/* 이미지·위 여백을 일반 흐름에 두어 메뉴와 패턴이 함께 내려간다. */
.sidebar{height:100svh;overflow:hidden;z-index:15;transition:transform .25s ease}
.sidebar>.brand{min-height:0;max-height:calc(100svh - 300px);overflow:visible;flex-shrink:0}
.sidebar>nav{position:relative;z-index:2;background:#e2e7ef;display:grid;align-content:start;flex:1;min-height:100px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain}
.sidebar>nav::-webkit-scrollbar{display:none}.sidebar>.sidebar-bottom{position:relative;z-index:2;background:#e2e7ef;flex:none;padding:12px 12px 0}.sidebar-bottom small{margin-top:0}
.workspace{transition:margin-left .25s ease}
.menu-restoring .sidebar,.menu-restoring .workspace,.menu-restoring .menu-toggle{transition:none}
.menu-collapsed .sidebar{transform:translateX(-100%)}.menu-collapsed .workspace{margin-left:0}
.menu-toggle{display:none;position:fixed;left:var(--sidebar);top:50%;transform:translateY(-50%);z-index:16;width:26px;height:76px;min-height:76px;padding:0;border-radius:0 9px 9px 0;border-left:0;background:#e2e7ef;box-shadow:2px 1px 5px #15203418;transition:left .25s ease}.menu-toggle-enabled .menu-toggle{display:inline-flex}.menu-toggle-enabled.menu-collapsed .menu-toggle{left:0}
.menu-handle-icon{font-size:28px;line-height:1}.menu-handle-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
body:has(#main-menu){overflow-x:hidden}
.logo-stack{display:flex;flex-direction:column;align-items:center;width:100%;gap:0;min-width:0;flex-shrink:0}
.sidebar .brand.logo-stack{width:100%;margin:0}
.logo-stack img{display:block;height:auto;flex:0 0 auto;object-fit:contain;max-width:none;min-width:0}.logo-stack img[data-logo-part=title]{z-index:1}
.logo-stack img[hidden]{display:none}
.logo-editor-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:20px;align-items:start}
.logo-upload-panel{grid-column:1/-1}.logo-upload-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.logo-editor-grid .panel{margin-bottom:0;min-width:0}
.logo-preview-panel{position:sticky;top:20px}.logo-preview-panel h2{font-size:18px!important}
.logo-editor-grid label{margin-bottom:12px}.logo-upload-thumb{display:block;max-width:180px;max-height:140px;object-fit:contain;margin:16px 0;background:repeating-conic-gradient(#eef1f5 0% 25%,white 0% 50%) 50%/16px 16px}
.logo-upload-thumb[hidden]{display:none}.logo-part-fields{border:1px solid var(--line);padding:14px;margin:14px 0;min-width:0}.logo-part-fields legend{padding:0 6px;font-weight:600}
.logo-numbers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.logo-numbers input{width:100%}
#logo-status{padding:12px;background:#e9edf3;border-radius:6px;overflow-wrap:anywhere}
#pattern-frame{display:block;width:100%;height:min(660px,75svh);min-height:360px;border:1px solid var(--line);background:white}
@media(max-width:1100px){.logo-numbers{grid-template-columns:1fr}}
@media(max-width:850px){.logo-editor-grid,.logo-upload-grid{grid-template-columns:1fr}.logo-preview-panel{position:static}.logo-upload-panel{grid-column:auto}}
body:has([data-logo-screen=pattern]){display:block;overflow-x:hidden}body:has([data-logo-screen=pattern]) main{margin:24px auto;overflow:visible}
.menu-button-option{display:flex;align-items:center;gap:8px}
@media(max-width:760px){.sidebar{height:auto}.sidebar>.brand{max-height:none}.sidebar>nav{display:flex;flex-wrap:wrap;min-height:0;overflow:hidden}.menu-toggle-enabled .sidebar{position:fixed;inset:0 auto 0 0;width:222px;height:100svh;border-right:1px solid var(--line)}.menu-toggle-enabled .sidebar>.brand{max-height:calc(100svh - 300px)}.menu-toggle-enabled .sidebar>nav{display:grid;min-height:100px;overflow-y:auto}.menu-toggle-enabled .sidebar>nav a{display:flex;font-size:13px;padding:12px 13px}.menu-toggle-enabled .sidebar>.sidebar-bottom{display:block}.menu-toggle-enabled .sidebar .brand-divider{width:calc(100% - 24px);margin:22px 12px 8px}.menu-toggle-enabled .sidebar .nav-divider{width:auto;flex-basis:auto;margin:12px}.menu-toggle-enabled.home-page .workspace{height:100dvh}}
@media(max-width:760px){.menu-toggle-enabled .menu-toggle{left:222px}.menu-toggle-enabled.menu-collapsed .menu-toggle{left:0}}
@media(prefers-reduced-motion:reduce){.sidebar,.workspace,.menu-toggle{transition:none}}

/* 남는 높이를 메뉴 사이에 나눠 마지막 버튼까지 여유 있게 표시한다. */
@media(min-width:761px){.sidebar>nav{gap:4px;align-content:space-between}.sidebar>nav a{padding:7px 13px}.sidebar .nav-divider{margin:6px 12px}}
@media(max-width:760px){.menu-toggle-enabled .sidebar>nav{gap:4px;align-content:space-between}.menu-toggle-enabled .sidebar>nav a{padding:7px 13px}.menu-toggle-enabled .sidebar .nav-divider{margin:6px 12px}}

/* 첫 HTML과 실시간 초안 모두 같은 모바일 배치를 사용한다. */
@media(max-width:760px),(pointer:coarse){.mobile-logo-layout [data-logo-screen=main] [data-logo-part]{width:var(--mobile-logo-width)!important;left:var(--mobile-logo-x)!important;margin-top:var(--mobile-logo-top)!important}}
#pattern-frame.mobile-menu-frame{width:min(390px,100%);height:620px;margin-inline:auto}
.mobile-logo-preview .sidebar{position:fixed!important;inset:0 auto 0 0!important;width:222px!important;height:100svh!important;transform:none!important;transition:none!important}
.mobile-logo-preview .workspace,.mobile-logo-preview .menu-toggle{display:none!important}