:root{--bg:#0f1012;--panel:#17191d;--line:#2a2d32;--ink:#f2f3f5;--muted:#999da5;--focus:#8fb7ff;--cols:9;--gap:8px;--touch:44px;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;color-scheme:dark}*{box-sizing:border-box}html{background:var(--bg);color:var(--ink)}body{margin:0;min-height:100vh}button,input,select{font:inherit}.skip{position:fixed;left:8px;top:-60px;z-index:30;background:#fff;color:#000;padding:12px}.skip:focus{top:8px}.topbar{height:58px;position:sticky;top:0;z-index:20;display:grid;grid-template-columns:auto minmax(220px,620px) auto;gap:18px;align-items:center;padding:7px 14px;background:rgba(15,16,18,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.brand{display:flex;gap:10px;align-items:center}.brand b{border:1px solid #555b65;padding:4px 6px;font-size:12px;letter-spacing:.12em}.brand span{font-size:13px;color:#c6c8cc}.search{height:44px;display:flex;align-items:center;gap:9px;border:1px solid #353941;background:#1b1d21;padding:0 12px}.search:focus-within{outline:2px solid var(--focus);outline-offset:1px}.search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink)}kbd{color:#777b84}.iconbtn,.filters button,.tray button{min-height:44px;border:1px solid #3a3e45;background:#202328;color:var(--ink);padding:0 14px}.statusbar{display:flex;gap:12px;align-items:baseline;padding:10px 14px;font-size:12px;border-bottom:1px solid var(--line)}.statusbar strong{font-size:16px}.statusbar span{color:var(--muted)}.buildDate{margin-left:auto}.filters{padding:8px 14px;border-bottom:1px solid var(--line);display:flex;gap:12px;flex-wrap:wrap}.chips{display:flex;gap:5px;flex-wrap:wrap}.chips button{min-width:60px}.chips button[aria-pressed=true],.density button[aria-pressed=true]{background:#eef1f5;color:#111}.selects{display:flex;gap:8px;flex:1;justify-content:flex-end;flex-wrap:wrap}.selects label{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:5px}.selects select{height:36px;border:1px solid #33373d;background:#17191d;color:var(--ink)}.density{display:flex;border:0;padding:0;margin:0}.density legend{position:absolute;clip:rect(0,0,0,0)}.density button{min-height:36px;padding:0;width:38px}.gallery{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap);padding:var(--gap)}.card{min-width:0;position:relative}.visual{display:block;width:100%;padding:0;border:0;background:#202226;position:relative;aspect-ratio:3/4;overflow:hidden;cursor:zoom-in}.visual img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .18s}.visual:hover img,.visual:focus img{transform:scale(1.025)}.play,.dup{position:absolute;background:rgba(8,9,11,.78);padding:4px 6px;font-size:10px}.play{left:6px;bottom:6px}.dup{right:6px;top:6px}.cardline{display:flex;align-items:center;min-width:0}.card h2{font-size:11px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:6px 0;flex:1}.pick{width:44px;height:44px;border:0;background:transparent;color:#aeb2ba;cursor:pointer}.pick[aria-pressed=true]{color:#fff;background:#31353c}.peek{position:absolute;display:none;left:0;right:0;bottom:42px;z-index:4;padding:8px;background:rgba(8,9,11,.94);font-size:10px;line-height:1.45;box-shadow:0 6px 20px #000}.card:hover .peek,.card:focus-within .peek{display:grid}.peek code{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#9ba3af}.sentinel{text-align:center;color:var(--muted);padding:30px}.tray{position:fixed;z-index:22;left:50%;bottom:12px;transform:translateX(-50%);width:min(720px,calc(100% - 20px));min-height:64px;background:#f2f3f5;color:#111;display:flex;align-items:center;gap:10px;padding:8px 10px;box-shadow:0 10px 35px #000}.tray>div{min-width:0;flex:1}.tray #trayItems{display:flex;gap:4px}.tray img{width:30px;height:30px;object-fit:cover}.tray button{color:#fff;white-space:nowrap}.lightbox,.compare{padding:0;border:1px solid #3a3d43;background:#111;color:#fff;max-width:none;max-height:none}.lightbox{width:min(1100px,96vw);height:94vh}.lightbox::backdrop,.compare::backdrop{background:rgba(0,0,0,.88)}.lightbox figure{margin:0;height:100%;display:grid;grid-template-columns:minmax(0,1fr) 290px}.lightbox figure img{width:100%;height:100%;object-fit:contain;background:#090a0b}.lightbox figcaption{padding:60px 20px 20px;display:flex;gap:13px;flex-direction:column;overflow:auto}.lightbox code{font-size:11px;color:#9fa4ad;word-break:break-all}.lightbox a{color:#b9d1ff;min-height:44px;display:flex;align-items:center}.close,.nav{position:absolute;z-index:2;width:44px;height:44px;border:0;background:rgba(15,16,18,.75);color:#fff;font-size:28px}.close{right:8px;top:8px}.nav{top:50%}.prev{left:8px}.next{right:300px}.compare{width:96vw;height:92vh;padding:24px}.compare h2{margin:0 0 16px}.compare #compareGrid{height:calc(100% - 50px);display:grid;grid-template-columns:repeat(var(--compare-cols),1fr);gap:8px}.compare figure{margin:0;min-width:0;display:grid;grid-template-rows:minmax(0,1fr) auto}.compare img{width:100%;height:100%;object-fit:contain;background:#090a0b}.compare figcaption{font-size:11px;padding:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.roomy{--cols:7;--gap:14px}.dense{--cols:10;--gap:5px}:focus-visible{outline:2px solid var(--focus);outline-offset:2px}@media(max-width:800px){:root,.roomy,.dense{--cols:3;--gap:4px}.topbar{grid-template-columns:auto 1fr auto;gap:8px}.brand span,kbd,.buildDate{display:none}.filters{display:none}.filters.open{display:flex}.selects{justify-content:flex-start}.gallery{padding:4px}.card h2{font-size:10px}.lightbox{width:100vw;height:100dvh}.lightbox figure{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto}.lightbox figcaption{padding:10px 14px;max-height:34vh}.next{right:8px}.compare{width:100vw;height:100dvh;padding:12px}.compare #compareGrid{overflow:auto;grid-template-columns:repeat(2,minmax(145px,1fr));grid-auto-rows:50vh}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}