/* A populated logo shifts the name right; the empty 「＋ロゴ」 button appears only while editing. */
.site-brand{display:flex;align-items:center;gap:.55em;width:100%;min-width:0}
.site-brand .brand-text{flex:1;min-width:0}
.site-brand .brand-logo-slot{display:flex;align-items:center;justify-content:center;flex:0 1 auto;width:max-content;max-width:min(4em,32%);height:clamp(24px,1.5em,64px);min-height:0;min-width:0;border:0;border-radius:0;background:transparent;padding:0;color:inherit}
.site-brand .brand-logo-img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain}
.is-editing .brand-logo-slot{outline:1px dashed #8299b8;outline-offset:2px;cursor:pointer}
.site-brand .brand-logo-slot:disabled{opacity:1;cursor:default}
.logo-settings{padding:0 0 22px;margin-bottom:22px;border-bottom:1px solid #dbe3ef}
.logo-settings h3{font-size:18px;margin:0 0 14px}
.logo-preview{display:flex;align-items:center;justify-content:center;min-height:100px;margin-bottom:16px;border:1px solid #dbe3ef;border-radius:10px;background:repeating-conic-gradient(#edf1f6 0% 25%,#fff 0% 50%) 50% / 16px 16px}
.logo-preview img{max-width:100%;max-height:100px;object-fit:contain;padding:8px}
#logo-empty{color:#65778f;font-size:14px}
@media(max-width:700px){.site-brand{gap:.4em}.site-brand .brand-logo-slot{height:clamp(24px,1.4em,48px);max-width:min(3em,32%)}}
.site-brand .brand-logo-add{flex:0 0 auto;max-width:none;width:auto;height:auto;padding:4px 8px;border:1px dashed #8299b8;border-radius:6px;background:#f5f8fc;color:#46607f;font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap;outline:0}
.is-editing .site-brand .brand-logo-add{outline:0}