.admin-page { margin:0; color:var(--ink); }
[hidden] { display:none!important; }
.admin-header { position:static; display:flex; align-items:center; gap:22px; padding:20px clamp(18px,4vw,56px); border-bottom:2px solid var(--bg); background:var(--paper); }
.admin-brand { display:flex; align-items:center; gap:9px; font-family:var(--font-masthead); font-size:1.65rem; letter-spacing:-1px; color:var(--bg); text-decoration:none; }
.admin-brand img { width:36px; height:36px; }
.admin-brand sup { font-size:.8em; }
.admin-header-label,.admin-kicker { font-size:.68rem; font-weight:700; letter-spacing:.14em; color:var(--bg); }
.admin-header .admin-link { margin-left:auto; font-size:.8rem; color:var(--ink); text-decoration:underline; text-underline-offset:4px; }
.login-panel { max-width:430px; margin:clamp(48px,9vh,100px) auto; padding:36px; border:1px solid var(--bg); background:rgba(255,250,242,.7); }
.login-panel h1 { color:var(--bg); font-size:2.3rem; margin:15px 0; letter-spacing:-.05em; }
.login-panel>p { line-height:1.8; font-size:.9rem; }
.login-panel form,.password-dialog form { display:grid; gap:10px; margin-top:28px; }
.login-panel label,.password-dialog label { font-weight:600; font-size:.8rem; }
.admin-page input,.admin-page select { font:inherit; border:1px solid var(--line-dark); border-radius:0; color:var(--ink); background:var(--white); min-height:42px; padding:9px 12px; min-width:0; width:100%; }
.admin-page input:focus,.admin-page select:focus { outline:2px solid var(--bg); outline-offset:2px; }
.admin-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:40px; padding:9px 14px; border:1px solid var(--line-dark); background:var(--white); color:var(--ink); font:600 .78rem var(--font-body); cursor:pointer; white-space:nowrap; border-radius:0; }
.admin-button.primary { background:var(--bg); color:var(--white); border-color:var(--bg); }
.admin-button.primary:hover { background:var(--bg-deep); }
.admin-button:hover,.text-button:hover { border-color:var(--bg); color:var(--bg); }
.admin-button:disabled { opacity:.4; cursor:default; }
.admin-button.compact { padding:8px 11px; }
.admin-button:focus-visible,.text-button:focus-visible,.media-card button:focus-visible,.board-card button:focus-visible { outline:2px solid var(--bg); outline-offset:3px; }
.login-panel .primary { margin-top:8px; justify-content:space-between; }
.login-note { color:var(--ink-soft); font-size:.72rem!important; margin:24px 0 0; }
.form-error { min-height:1em; color:#a02616; font-size:.82rem; line-height:1.7; }
.editor { max-width:1520px; margin:0 auto; padding:32px clamp(16px,3vw,46px) 48px; }
.editor-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.editor-heading h1 { margin:10px 0 26px; color:var(--bg); font-size:clamp(1.7rem,3vw,2.6rem); letter-spacing:-.05em; }
.editor-heading h1 span { margin-left:6px; }
.editor-account { display:flex; gap:18px; }
.text-button { background:none; border:0; padding:8px 0; color:var(--ink-soft); font:inherit; font-size:.75rem; cursor:pointer; }
.editor-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0; border-block:1px solid var(--line); }
.toolbar-status,.toolbar-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.toolbar-status { font-size:.78rem; }
.toolbar-status>span:last-child { margin-left:6px; color:var(--ink-soft); }
.save-dot { width:7px; height:7px; background:#59774b; border-radius:50%; }
.save-dot.dirty { background:var(--bg); }
.editor-layout { display:grid; grid-template-columns:272px minmax(0,1fr); gap:24px; align-items:start; margin-top:24px; }
.media-panel { border:1px solid var(--line-dark); padding:20px 16px 14px; background:rgba(255,250,242,.58); position:sticky; top:18px; max-height:calc(100vh - 36px); display:flex; flex-direction:column; }
.panel-heading,.layout-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-heading h2,.layout-heading h2 { margin:7px 0 0; font-size:1.15rem; letter-spacing:-.04em; }
.count-badge { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); font-size:.75rem; color:var(--bg); }
.panel-help { font-size:.75rem; color:var(--ink-soft); line-height:1.8; margin:12px 0 18px; }
.upload-zone { display:grid; gap:3px; justify-items:center; border:1px dashed var(--bg); padding:14px 8px; cursor:pointer; background:rgba(242,74,29,.03); text-align:center; }
.upload-zone>span { font-size:1.4rem; line-height:1; color:var(--bg); }
.upload-zone strong { font-size:.82rem; }.upload-zone small { font-size:.68rem; color:var(--ink-soft); }
.upload-zone.drag-over,.media-panel.drop-active { background:#ffdfc5; outline:2px dashed var(--bg); outline-offset:3px; }
.upload-help { margin:9px 0 16px; font-size:.64rem; line-height:1.7; color:var(--ink-soft); }
.upload-progress { margin:0 0 12px; font-size:.75rem; color:var(--bg); }
.upload-feedback { margin:0 0 12px; padding:10px; border:1px solid var(--line); font-size:.72rem; line-height:1.7; overflow-wrap:anywhere; color:var(--ink); }
.upload-feedback.error { color:#a02616; border-color:#a02616; }
.search-input { font-size:.75rem!important; min-height:36px!important; }
.library-filters { display:flex; gap:12px; margin:12px 0; }
.library-filters button { border:0; background:none; font:inherit; font-size:.72rem; padding:4px 0; color:var(--ink-soft); cursor:pointer; }
.library-filters button[aria-pressed=true] { color:var(--bg); font-weight:700; border-bottom:1px solid var(--bg); }
.media-library { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; overflow:auto; align-content:start; min-height:110px; padding:4px; margin:-4px; flex:1; }
.media-card { min-width:0; position:relative; background:var(--white); border:1px solid transparent; }
.media-card.selected { border-color:var(--bg); }
.media-card img { display:block; width:100%; height:112px; object-fit:cover; pointer-events:none; }
.media-card .media-image { padding:0; display:block; border:0; width:100%; cursor:grab; background:none; }
.media-card .media-name { display:block; font-size:.62rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:7px 6px 4px; }
.media-card .media-action { width:100%; background:none; border:0; padding:4px 5px 8px; cursor:pointer; color:var(--bg); font:600 .66rem var(--font-body); }
.media-used { position:absolute; top:5px; left:5px; padding:3px 5px; font-size:.59rem; background:var(--paper); color:var(--ink); pointer-events:none; }
.library-drop-hint { font-size:.64rem; text-align:center; margin:16px 0 0; line-height:1.7; color:var(--ink-soft); }
.column-setting { display:flex; align-items:center; gap:8px; font-size:.75rem; white-space:nowrap; }.column-setting select { width:76px; min-height:36px; font-size:.75rem; }
.lookbook-board { display:grid; grid-template-columns:repeat(var(--columns,4),minmax(0,1fr)); gap:12px; align-items:start; }
.board-column { min-width:0; }
.column-label { font-size:.67rem; color:var(--ink-soft); display:flex; justify-content:space-between; margin-bottom:8px; padding-inline:2px; }
.column-items { min-height:190px; padding:6px; border:1px dashed var(--line); background:rgba(255,250,242,.22); }
.column-items:empty::after { content:'사진을 놓으세요'; display:block; font-size:.68rem; color:var(--ink-soft); text-align:center; padding:64px 2px; pointer-events:none; }
.board-card { position:relative; margin-bottom:8px; background:var(--white); border:1px solid var(--line-dark); }
.board-card:last-child { margin-bottom:0; }.board-card.selected { border-color:var(--bg); box-shadow:0 0 0 1px var(--bg); }
.board-card img { display:block; width:100%; height:auto; pointer-events:none; }
.board-card .image-select { display:block; width:100%; padding:0; border:0; background:none; cursor:pointer; }
.card-tools { display:flex; align-items:center; justify-content:space-between; min-height:32px; color:var(--ink-soft); font-size:.65rem; }
.card-tools button { width:30px; min-height:32px; border:0; background:none; color:var(--ink); cursor:pointer; padding:0; font-size:1rem; }
.card-tools .drag-handle { cursor:grab; touch-action:none; }.card-tools .remove { color:var(--bg); }
.sortable-ghost { opacity:.25; background:var(--bg)!important; outline:2px dashed var(--bg); }.sortable-fallback { opacity:.9!important; pointer-events:none; max-width:220px; z-index:2000!important; }
.media-image.drag-handle { touch-action:none; }
.image-inspector { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin-top:22px; padding:18px; border:1px solid var(--line-dark); background:var(--white); }
.inspector-name { flex-basis:100%; margin:0 0 5px; font-size:.78rem; overflow-wrap:anywhere; }
.image-inspector label { font-size:.72rem; display:grid; gap:6px; }.image-inspector select,.image-inspector input { width:95px; font-size:.75rem; }
.publish-note { font-size:.7rem; color:var(--ink-soft); line-height:1.7; margin-top:22px; }
.editor-notice { border-left:3px solid var(--bg); background:rgba(255,250,242,.7); margin:16px 0 0; padding:12px 16px; font-size:.8rem; line-height:1.6; overflow-wrap:anywhere; }
.editor-notice.error { color:#a02616; border-color:#a02616; }
dialog { color:var(--ink); background:var(--paper); border:1px solid var(--bg); padding:24px; max-height:90vh; }
dialog::backdrop { background:rgba(43,20,9,.5); }.dialog-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }.dialog-toolbar h2 { font-size:1.1rem; margin:0; }.dialog-toolbar>div { display:flex; gap:6px; }
.preview-dialog { width:min(1180px,95vw); }.preview-wall { margin:auto; padding:18px; border:1px solid var(--bg); }.preview-wall.mobile { width:360px; max-width:100%; }.preview-wall.mobile .managed-gallery { display:flex; flex-direction:column; gap:0; }.preview-wall.mobile .managed-gallery__column { display:contents; }
.password-dialog { width:min(440px,92vw); }.password-dialog form { margin-top:0; }.password-dialog .primary { margin-top:8px; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.empty-library { grid-column:1/-1; font-size:.75rem; color:var(--ink-soft); text-align:center; padding:18px 6px; }
@media(max-width:1050px) { .editor-toolbar { align-items:start; flex-direction:column; }.editor-layout { grid-template-columns:235px minmax(0,1fr); gap:16px; }.media-card img { height:100px; }.lookbook-board { gap:6px; }.column-items { padding:4px; }.admin-header-label { display:none; } }
@media(max-width:700px) { .admin-header { padding:14px 16px; }.admin-brand { font-size:1.3rem; }.admin-brand img { width:28px; height:28px; }.editor { padding-top:22px; }.editor-heading { align-items:start; }.editor-account { flex-direction:column; gap:0; }.editor-layout { display:flex; flex-direction:column; }.media-panel { width:100%; position:static; max-height:none; }.media-library { grid-template-columns:repeat(4,minmax(0,1fr)); max-height:270px; }.media-card img { height:110px; }.upload-zone { padding:10px; }.media-panel .panel-help { margin-bottom:10px; }.layout-panel { width:100%; }.lookbook-board { overflow-x:auto; padding:3px; grid-template-columns:repeat(var(--columns,4),minmax(112px,1fr)); }.toolbar-actions { gap:6px; }.admin-button { padding:8px 10px; font-size:.72rem; }.login-panel { margin:40px 16px; max-width:none; padding:26px; }.dialog-toolbar { align-items:start; }.dialog-toolbar h2 { font-size:.9rem; }.media-panel .upload-help { margin-bottom:10px; }.media-panel .library-drop-hint { margin-top:12px; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }