/* Readable, image-first archive. */
:root { --color-page:#f7f8fb; --color-surface:#fff; --color-text:#142033; --color-muted:#526176; --color-border:#dce3ed; --color-accent:#2563eb; --color-focus:#1d4ed8; --shadow-card:0 2px 8px #14203305; }
html { scroll-padding-top:7rem; }
body { font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic',sans-serif; background:var(--color-page); color:var(--color-text); font-size:18px; -webkit-font-smoothing:antialiased; }
button,a,input,select,textarea { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { user-select:none; }
button:disabled { cursor:default; opacity:.6; }
:is(button,a,input,select,textarea,[tabindex]):focus-visible { outline:3px solid var(--color-focus)!important; outline-offset:4px; }
.skip-link { position:fixed; top:-6rem; left:1rem; z-index:100; padding:12px 20px; background:white; border-radius:10px; }
.skip-link:focus { top:1rem; }
.site-shell { max-width:1280px; margin-inline:auto; padding-inline:24px; width:100%; }
#site-header { background:#fffffff2; border-bottom:1px solid var(--color-border); backdrop-filter:blur(16px); }
.site-header-inner { display:flex; align-items:center; gap:24px; padding-block:16px; }
.site-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.site-logo { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; background:var(--color-accent); color:white; border-radius:12px; }
.site-title { font-size:24px; letter-spacing:-.035em; line-height:1.3; font-weight:800; }
.header-nav { display:flex; gap:4px; margin-left:auto; }
.header-nav button { min-height:44px; padding:8px 12px; border-radius:10px; color:var(--color-muted); font-size:16px; font-weight:600; white-space:nowrap; }
.submit-button,.primary-button,.secondary-button { min-height:46px; padding:11px 18px; border-radius:10px; font-size:16px; font-weight:700; white-space:nowrap; }
.primary-button { background:#2563eb; color:white; }
.secondary-button { background:white; color:#334155; border:1px solid #cbd5e1; }
.icon-button { width:44px; height:44px; border-radius:10px; }
main.site-shell { padding-block:24px; }
#page-home { display:flex; flex-direction:column; gap:28px; }
#page-home.hidden { display:none; }
#page-home > * { margin-top:0; }
.load-message { display:flex; align-items:center; flex-wrap:wrap; gap:12px; border:1px solid var(--color-border); border-radius:14px; padding:20px; background:white; color:var(--color-muted); font-size:16px; }
.load-message.hidden { display:none; }
.load-message button { color:#1d4ed8; font-weight:700; min-height:44px; padding:8px 12px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.section-heading h2 { font-size:22px; font-weight:750; letter-spacing:-.025em; }
#hero-position { min-width:56px; font-size:15px; color:var(--color-muted); font-variant-numeric:tabular-nums; }
.hero-stage { position:relative; }
.hero-track { position:relative; height:clamp(350px,calc(34vw + 106px),526px); overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent); }
.hero-card { position:absolute; top:2px; left:50%; width:clamp(244px,34vw,416px); transform:translateX(calc(-50% + var(--slide-x,0px))); opacity:0; }
.hero-card-link { display:block; background:white; border:1px solid var(--color-border); border-radius:16px; overflow:hidden; }
.hero-image-link { position:relative; aspect-ratio:1; background:#e9edf4; overflow:hidden; }
.hero-image-link img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.hero-copy { padding:12px 14px 14px; }
.hero-copy p { font-size:15px; color:var(--color-muted); margin-bottom:3px; }
.hero-copy h3 { font-size:20px; font-weight:750; line-height:1.45; letter-spacing:-.025em; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hero-arrow { position:absolute; top:calc(50% - 48px); z-index:3; width:50px; height:50px; border-radius:50%; border:1px solid var(--color-border); background:#fffffff5; box-shadow:0 3px 16px #14203318; color:#334155; }
.hero-arrow-prev { left:12px; } .hero-arrow-next { right:12px; }
.media-count { position:absolute; bottom:10px; right:10px; padding:4px 8px; color:white; background:#142033e6; border-radius:6px; font-size:13px; font-weight:600; }
.category-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.category-card { position:relative; display:flex; align-items:center; gap:12px; min-height:76px; padding:14px 18px; border:1px solid var(--color-border); border-radius:14px; background:white; }
.category-card h3 { font-size:20px; font-weight:700; letter-spacing:-.025em; word-break:keep-all; }
.category-icon { width:40px; height:40px; border-radius:10px; display:grid; place-items:center; flex-shrink:0; color:#365b93; background:#eef3fb; }
.category-count { margin-left:auto; color:#526176; font-size:17px; font-variant-numeric:tabular-nums; }
.category-all { grid-column:1/-1; background:#eaf1ff; border-color:#c4d5f4; }
.category-all .category-icon { background:white; }
.category-toolbar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:18px; padding-bottom:16px; border-bottom:1px solid var(--color-border); }
#cat-badge { font-size:28px; font-weight:800; letter-spacing:-.035em; background:transparent; border:0; padding:0; color:var(--color-text); }
.category-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.filter-field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.filter-field.hidden { display:none; }
.filter-field label { font-size:14px; font-weight:600; color:var(--color-muted); }
.category-filters :is(input,select,button) { border-width:1px; min-height:44px; font-size:16px; font-weight:500; }
#grid-search-input { width:290px; padding-left:12px; }
#grid-search-reset-button { width:44px; }
#gallery-result-count { font-size:15px; color:var(--color-muted); margin-top:14px; margin-bottom:14px; font-variant-numeric:tabular-nums; }
#page-category > #gallery-grid { margin-top:0; }
.evidence-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.evidence-card { position:relative; display:flex; flex-direction:column; min-width:0; background:white; border:1px solid var(--color-border); border-radius:12px; }
.evidence-thumbnail { position:relative; aspect-ratio:1; background:#e9edf4; border-radius:11px 11px 0 0; overflow:hidden; }
.evidence-thumbnail img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.evidence-card-body { display:flex; flex-direction:column; flex:1; padding:10px 12px; gap:3px; }
.card-category { color:#526176; font-size:15px; font-weight:500; }
.evidence-card h3 { font-size:19px; font-weight:700; line-height:1.45; letter-spacing:-.02em; overflow-wrap:anywhere; }
.comment-count { color:#1d4ed8; font-size:.9em; font-weight:750; white-space:nowrap; }
.evidence-card-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:8px; font-size:14px; color:var(--color-muted); }
.evidence-source { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-likes { margin-left:auto; white-space:nowrap; color:#475569; font-variant-numeric:tabular-nums; }
.stretched-link::after { content:''; position:absolute; inset:0; border-radius:12px; }
.stretched-link:focus-visible { outline:none!important; }
.stretched-link:focus-visible::after { outline:3px solid var(--color-focus); outline-offset:4px; }
.card-delete { position:relative; z-index:1; min-height:36px; padding:4px 8px; border:1px solid #fecaca; border-radius:7px; color:#b91c1c; background:white; font-size:14px; }
.feedback-card { position:relative; padding:18px; border:1px solid var(--color-border); border-radius:12px; background:white; }
#gallery-empty-state { text-align:center; padding:56px 20px; border:1px dashed #cbd5e1; border-radius:16px; background:white; }
.empty-action { color:#1d4ed8; font-size:16px; font-weight:700; margin-top:20px; min-height:44px; padding:8px 18px; background:#eff6ff; border-radius:10px; }
#gallery-scroll-sentinel { height:1px; margin-top:0; }
.feed-status { text-align:center; color:#526176; font-size:16px; padding:8px 0 16px; }
.feed-status button { margin-top:12px; }
.archive-footer { border-top:1px solid var(--color-border); margin-top:24px; padding-block:24px; font-size:15px; color:var(--color-muted); background:white; }
.archive-footer button { min-height:44px; font-size:15px; }
.notification-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#dc2626; vertical-align:middle; }
.notification-dot.hidden { display:none; }
[role="dialog"] { z-index:60; overscroll-behavior:contain; }
[role="dialog"] > div { max-height:90dvh; }
[role="dialog"]:not(#lightbox-modal):not(#upload-modal) > div { overflow-y:auto; }
[role="dialog"] button:has(> .fa-xmark) { min-width:44px; min-height:44px; border-radius:10px; }
[role="dialog"] h3 { padding-right:28px; }
#lightbox-modal { background:#101a2de8; }
#lightbox-body { width:min(960px,calc(100% - 152px)); height:100dvh; max-height:100dvh; }
.reader-content { min-height:0; padding:24px 28px 40px; overflow-anchor:none; overscroll-behavior:contain; }
.reader-content > * + * { margin-top:24px; }
.reader-arrow,.reader-close { position:absolute; z-index:2; display:grid; place-items:center; color:white; background:#334155; border:1px solid #ffffff30; width:48px; height:48px; border-radius:50%; }
.reader-arrow { top:calc(50% - 24px); }
.reader-prev { right:calc(50% + min(480px,50% - 76px) + 14px); }
.reader-next { left:calc(50% + min(480px,50% - 76px) + 14px); }
.reader-close { top:max(14px,env(safe-area-inset-top)); right:max(14px,env(safe-area-inset-right)); }
.lightbox-topbar { flex-shrink:0; padding:14px 28px; }
#lightbox-cat-badge { font-size:15px; font-weight:650; border-width:1px; }
.reader-position { font-size:14px; color:#526176; margin-left:8px; font-variant-numeric:tabular-nums; }
.lightbox-title-row { flex-wrap:wrap; }
#lightbox-title,#lightbox-source,#lightbox-desc { overflow-wrap:anywhere; }
#lightbox-title { padding-right:0; font-size:28px; font-weight:750; }
#lightbox-source-wrapper { align-items:flex-start; padding:10px 12px; border-width:1px; font-size:16px; font-weight:500; }
#lightbox-source-wrapper > span:first-child { flex-shrink:0; }
.reader-images { display:flex; flex-direction:column; gap:16px; }
.reader-image { width:100%; background:#eef2f6; }
#lightbox-desc { max-width:75ch; line-height:1.8; font-size:19px; font-weight:450; }
#comments-container { padding:16px; border-width:1px; }
#comments-list { max-height:none; }
#comments-list p { font-size:16px; line-height:1.6; }
#comment-form { display:grid; grid-template-columns:minmax(80px,1fr) minmax(100px,3fr) minmax(80px,1fr) auto; gap:8px; }
#comment-form input { width:100%; min-width:0; font-size:16px; border-width:1px; }
#comment-form button { min-height:44px; font-size:16px; }
.password-code-input { -webkit-text-security:disc; }
.toast-alert { z-index:80; max-width:calc(100vw - 32px); }
.editor-shell { background:white; width:min(940px,calc(100% - 48px)); border-radius:18px; display:flex; flex-direction:column; overflow:hidden; }
.editor-header { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; border-bottom:1px solid var(--color-border); }
.editor-header h3 { font-size:24px; font-weight:750; }
#evidence-form { display:flex; flex-direction:column; min-height:0; }
.editor-fields { display:grid; grid-template-columns:1fr 1.1fr; gap:28px; padding:24px; overflow:auto; overscroll-behavior:contain; }
.editor-media,.editor-details { display:flex; flex-direction:column; min-width:0; gap:10px; }
.editor-fields label,.draft-form label { font-size:16px; font-weight:650; margin-top:8px; }
.editor-fields :is(input:not([type=file]),textarea,select),.draft-form :is(input,textarea,select) { width:100%; min-width:0; border:1px solid #b8c4d5; border-radius:9px; background:white; padding:11px 12px; font-size:17px; font-weight:450; }
.editor-fields textarea,.draft-form textarea { resize:vertical; line-height:1.65; }
.editor-fields small { font-size:14px; color:#526176; }
.editor-actions { display:flex; justify-content:flex-end; gap:10px; padding:16px 24px; border-top:1px solid var(--color-border); background:white; padding-bottom:max(16px,env(safe-area-inset-bottom)); }
#drop-zone { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; min-height:214px; padding:20px; border:2px dashed #b8c4d5; border-radius:12px; background:#f7f9fc; text-align:center; }
#drop-zone > i { font-size:30px; color:#2563eb; }
#drop-zone strong { font-size:20px; } #drop-zone span { font-size:15px; color:#526176; }
#file-status { font-size:14px; color:#1d4ed8; }
#upload-preview-container { display:flex; flex-wrap:wrap; gap:10px; }
.upload-preview { width:80px; }
.upload-preview-media { position:relative; width:80px; height:80px; overflow:hidden; border-radius:8px; }
.upload-preview-controls { display:flex; justify-content:space-between; margin-top:4px; }
.upload-preview-controls button { min-height:32px; min-width:26px; border:1px solid #cbd5e1; border-radius:5px; font-size:12px; background:white; }
.drag-over { border-color:var(--color-accent)!important; background:#eff6ff!important; }
#drop-zone:focus-within { outline:3px solid var(--color-focus); outline-offset:4px; }
.admin-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:22px; }
.admin-heading h2 { font-size:28px; font-weight:750; }
.admin-heading p { font-size:16px; color:#526176; margin-top:6px; }
.admin-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:18px; }
.admin-panel { background:white; border:1px solid var(--color-border); border-radius:14px; padding:22px; margin-bottom:20px; }
.admin-panel h3 { font-size:21px; font-weight:700; }
.admin-workspace { display:grid; grid-template-columns:280px minmax(0,1fr); gap:20px; }
.draft-list { display:flex; flex-direction:column; gap:8px; }
.draft-list button { text-align:left; border:1px solid var(--color-border); border-radius:10px; padding:12px; background:white; overflow-wrap:anywhere; }
.draft-list button[aria-pressed=true] { border-color:#2563eb; background:#eff6ff; }
.draft-list strong { display:block; font-size:17px; }
.draft-list span { display:block; font-size:14px; color:#526176; margin-top:4px; }
.draft-form { display:flex; flex-direction:column; gap:8px; }
.draft-form fieldset { display:contents; }
.draft-form .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.draft-form .form-row > div { min-width:0; display:flex; flex-direction:column; gap:8px; }
.draft-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:10px; margin-top:12px; }
.admin-muted { color:#526176; font-size:16px; line-height:1.7; }
#draft-status { margin:12px 0; font-size:16px; color:#526176; }
.admin-feedback-list { display:flex; flex-direction:column; gap:10px; margin-top:12px; }
.admin-feedback-list a { display:flex; align-items:center; gap:10px; padding:12px; background:#f8fafc; border-radius:8px; font-size:17px; overflow-wrap:anywhere; }
#draft-published-link { color:#1d4ed8; text-decoration:underline; padding:8px 0; }
@media (hover:hover) { .header-nav button:hover,.secondary-button:hover { background:#edf2fa; } .category-card:hover,.evidence-card:hover { border-color:#8cace5; } .category-card:hover h3,.evidence-card:hover h3,.hero-card-link:hover h3 { color:#1d4ed8; } .primary-button:hover { background:#1d4ed8; } }
@media (prefers-reduced-motion:no-preference) { .hero-card { transition:transform 240ms cubic-bezier(.77,0,.175,1),opacity 240ms ease-out; } .hero-track.instant .hero-card { transition:none; } .category-card,.evidence-card { transition:border-color 150ms ease-out; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
@media (max-width:1239px) { .evidence-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:959px) { .site-header-inner { flex-wrap:wrap; gap:12px; padding-block:12px; } .site-brand { flex:1; } .header-nav { order:3; width:100%; margin:0; } .header-nav button { min-height:40px; } .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .category-toolbar,.category-filters { align-items:stretch; } .admin-workspace { grid-template-columns:220px minmax(0,1fr); } }
@media (max-width:719px) {
.site-shell { padding-inline:16px; } main.site-shell { padding-block:20px; } #page-home { gap:22px; }
.site-title { font-size:21px; } .site-logo { width:40px; height:40px; } .header-nav { gap:0; } .header-nav button { padding-inline:10px; }
.hero-track { height:calc(70vw + 110px); } .hero-card { width:70vw; } .hero-copy h3 { font-size:19px; } .hero-arrow { width:44px; height:44px; } .hero-arrow-prev { left:0; } .hero-arrow-next { right:0; }
.category-card { padding:12px; gap:9px; min-height:72px; } .category-card h3 { font-size:18px; } .category-icon { width:32px; height:32px; font-size:15px; } .category-count { font-size:15px; }
.evidence-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .evidence-card h3 { font-size:18px; } .evidence-card-body { padding:9px 10px; } .card-category { font-size:14px; }
.category-filters { width:100%; } .search-field { flex:1; } #grid-search-input { width:100%; } #sort-select { max-width:130px; }
input,select,textarea { font-size:16px!important; }
#lightbox-body { width:calc(100% - 56px); } .reader-content { padding:16px 12px 32px; } .reader-content > * + * { margin-top:18px; }
.reader-arrow { width:28px; height:52px; border:0; background:transparent; border-radius:0; font-size:15px; } .reader-prev { left:0; right:auto; } .reader-next { right:0; left:auto; }
.reader-close { top:max(8px,env(safe-area-inset-top)); right:8px; width:44px; height:44px; background:#334155; } .lightbox-topbar { min-height:60px; padding:12px; padding-right:30px; }
#lightbox-title { font-size:23px; } #lightbox-desc { font-size:18px; } #lightbox-source-wrapper { flex-wrap:wrap; } .lightbox-title-row button { min-height:40px; font-size:14px; }
#comment-form { grid-template-columns:1fr 1fr auto; } #comment-text { grid-column:1/-1; grid-row:1; } #comments-container { padding:12px; } #comment-form button { padding-inline:10px; }
.editor-shell { width:100%; height:100dvh; max-height:100dvh!important; border-radius:0; } .editor-header { padding:12px 16px; } .editor-header h3 { font-size:22px; } #evidence-form { flex:1; } .editor-fields { grid-template-columns:1fr; gap:18px; padding:16px; flex:1; } .editor-actions { padding-inline:16px; }
.admin-heading { align-items:flex-start; flex-wrap:wrap; } .admin-workspace { grid-template-columns:1fr; } .admin-panel { padding:16px; } .draft-list { max-height:260px; overflow:auto; } .draft-form .form-row { grid-template-columns:1fr; }
}
@media (max-width:479px) { .site-title { font-size:19px; } .site-brand { gap:8px; } .upload-button-text { display:none; } .submit-button { width:44px; padding:0; justify-content:center; } .category-card h3 { font-size:17px; } .category-card { flex-wrap:wrap; } .category-card .category-icon { display:none; } .category-grid { gap:10px; } .category-all .category-icon { display:grid; } .category-card { min-height:62px; } .evidence-grid { grid-template-columns:1fr; } .category-filters .sort-field { flex-basis:100%; } #sort-select { max-width:none; width:100%; } #comment-form { grid-template-columns:1fr 1fr; } #comment-form button { grid-column:1/-1; } .reader-position { margin-left:2px; font-size:13px; } #lightbox-cat-badge { font-size:14px; padding-inline:8px; } }
@media (forced-colors:active) { :is(button,a,input,select,textarea,[tabindex]):focus-visible,.stretched-link:focus-visible::after { outline-color:Highlight!important; } .notification-dot { background:Highlight; } }

.hidden { display:none!important; }

.editor-fields:has(#form-media-wrapper.hidden) { grid-template-columns:1fr; }

#site-header.header-hidden { transform:translateY(-100%); }
@media (prefers-reduced-motion:no-preference) { #site-header { transition:transform 180ms cubic-bezier(.16,1,.3,1); } }

/* Restore topic context and emphasize the active recommendation. */
.site-tagline { color:#526176; font-size:14px; line-height:1.5; margin-top:4px; }
.hero-track { height:clamp(476px,calc(36vw + 228px),668px); }
.hero-card { top:10px; width:clamp(244px,36vw,440px); transform:translateX(calc(-50% + var(--slide-x,0px))) translateY(var(--slide-y,0px)) scale(var(--slide-scale,1)); transform-origin:50% 0; }
.hero-copy h3 { min-height:2.9em; }
.hero-copy .hero-excerpt { font-size:16px; line-height:1.6; height:3.2em; margin:8px 0 10px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; }
.hero-meta { display:flex; gap:16px; align-items:center; font-size:15px; color:#475569; }
.category-card { --category-color:#334155; --category-tint:#f1f5f9; display:flex; flex-direction:column; align-items:stretch; gap:10px; min-height:168px; padding:20px; }
.category-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.category-name { display:flex; align-items:center; gap:12px; }
.category-card .category-icon { color:var(--category-color); background:var(--category-tint); }
.category-card h3 { color:var(--category-color); }
.category-card p { font-size:16px; line-height:1.65; color:#526176; word-break:keep-all; overflow-wrap:anywhere; }
.category-card .category-count { color:var(--category-color); background:var(--category-tint); padding:3px 8px; border-radius:7px; }
.category-arrow { display:none; }
.category-all { min-height:0; flex-direction:row; align-items:center; gap:24px; }
.category-all .category-card-top { flex:1; }
.category-all p { font-size:16px; }
.category-card[data-category=shape-memory] { --category-color:#065f46; --category-tint:#d1fae5; }
.category-card[data-category=strange-ballot] { --category-color:#92400e; --category-tint:#fef3c7; }
.category-card[data-category=bad-management] { --category-color:#9f1239; --category-tint:#ffe4e6; }
.category-card[data-category=nec-admin] { --category-color:#1e40af; --category-tint:#dbeafe; }
.category-card[data-category=etc] { --category-color:#6b21a8; --category-tint:#f3e8ff; }
.category-card[data-category=free-board] { --category-color:#3730a3; --category-tint:#e0e7ff; }
.required-star { color:#dc2626; font-size:13px; font-weight:800; vertical-align:super; }
.media-requirement { font-size:14px; color:#526176; }
.hero-heading-tools { display:flex; align-items:center; gap:24px; }
.keyboard-hint { display:flex; align-items:center; gap:16px; color:#526176; font-size:14px; }
.keyboard-hint > span { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.keyboard-hint kbd { display:inline-flex; align-items:center; justify-content:center; min-width:25px; height:25px; padding:0 5px; border:1px solid #b8c4d5; border-bottom-width:3px; border-radius:5px; background:white; color:#334155; font-family:inherit; font-weight:600; font-size:13px; line-height:1; }
.draft-preview-section { margin-bottom:16px; }
.draft-preview-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
#draft-image-count { color:#526176; font-size:16px; }
.draft-image-previews { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:12px; }
.draft-image-preview { display:flex; flex-direction:column; overflow:hidden; min-width:0; border:1px solid #cbd5e1; border-radius:10px; background:#f1f5f9; text-align:left; }
.draft-image-preview img { width:100%; height:180px; object-fit:contain; }
.draft-image-preview span { display:block; padding:10px; font-size:15px; color:#334155; background:white; width:100%; }
.draft-image-preview.image-failed { min-height:160px; justify-content:flex-end; }
#draft-image-modal { background:#101a2dec; padding:24px; }
.draft-viewer-shell { width:min(1200px,100%); height:calc(100dvh - 48px); max-height:none!important; display:flex; flex-direction:column; background:white; border-radius:16px; overflow:hidden!important; }
.draft-viewer-toolbar { display:flex; align-items:center; justify-content:space-between; padding:8px 16px; flex-shrink:0; border-bottom:1px solid #dce3ed; }
.draft-viewer-stage { min-height:0; flex:1; overflow:auto; display:grid; place-items:center; background:#e7ebf0; padding:16px; }
.draft-viewer-stage img { display:block; max-width:100%; max-height:100%; object-fit:contain; min-height:0; }
.draft-viewer-stage.actual-size { display:block; }
.draft-viewer-stage.actual-size img { max-width:none; max-height:none; margin:auto; }
#draft-viewer-error { max-width:420px; color:#334155; line-height:1.7; text-align:center; }
.draft-viewer-footer { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:12px; padding:12px 16px; flex-shrink:0; border-top:1px solid #dce3ed; }
.draft-viewer-navigation { display:flex; align-items:center; gap:6px; margin-right:auto; }
#draft-viewer-position { min-width:40px; text-align:center; font-size:16px; }
@media (max-width:959px) { .keyboard-hint { gap:10px; } .hero-heading-tools { gap:12px; } .draft-image-previews { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:719px) {
.hero-heading-row { flex-wrap:wrap; gap:8px; } .hero-heading-tools { width:100%; justify-content:space-between; } .keyboard-hint { font-size:13px; }
.draft-image-preview img { height:140px; } .draft-image-preview span { font-size:14px; padding:8px; }
#draft-image-modal { padding:0; } .draft-viewer-shell { height:100dvh; border-radius:0; } .draft-viewer-toolbar { padding-top:max(8px,env(safe-area-inset-top)); } .draft-viewer-footer { padding:10px 12px max(10px,env(safe-area-inset-bottom)); gap:8px; } .draft-viewer-footer .secondary-button { font-size:14px; padding:10px; } .draft-viewer-navigation { width:100%; justify-content:center; } .draft-viewer-stage { padding:8px; }
.hero-card { width:70vw; } .hero-track { height:calc(70vw + 228px); }
.site-tagline { font-size:12px; max-width:210px; } .site-brand { gap:8px; }
.category-card { padding:16px; min-height:190px; } .category-name { flex-wrap:wrap; gap:8px; }
.category-card .category-icon { display:grid; } .category-all { flex-direction:column; align-items:stretch; gap:8px; min-height:0; } .category-all .category-name { flex-wrap:nowrap; }
}
@media (max-width:479px) { .category-grid { grid-template-columns:1fr; } .category-card { min-height:0; } .category-name { flex-wrap:nowrap; } .category-card h3 { font-size:19px; } .category-card .category-icon { width:36px; height:36px; } }