@font-face{font-family:SUIT;src:url(/fonts/SUIT-Variable.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --bg:#0f1115;--panel:#181b22;--line:#2a2f3a;--text:#eef0f4;--muted:#9aa3b2;--accent:#4f8cff;
  --bar-h:64px;--top-h:52px;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:var(--bg);color:var(--text);font:15px/1.4 SUIT,"Noto Sans KR","Malgun Gothic",system-ui,sans-serif;overflow:hidden}
.stage{position:fixed;inset:var(--top-h) 0 var(--bar-h) 0;display:grid;place-items:center;padding:8px 16px;transition:inset .25s}
body.present .stage{inset:0;padding:0}
#slide{width:min(100%,calc((100vh - var(--top-h) - var(--bar-h) - 16px)*780/540));width:min(100%,calc((100dvh - var(--top-h) - var(--bar-h) - 16px)*780/540));height:auto;aspect-ratio:780/540;background:#fff;border-radius:6px;box-shadow:0 12px 48px rgba(0,0,0,.5);user-select:none;-webkit-user-drag:none}
body.present #slide{border-radius:0;box-shadow:none;width:min(100vw,calc(100vh*780/540));width:min(100vw,calc(100dvh*780/540))}
.hit{position:absolute;top:0;bottom:0;width:30%;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hit.prev{left:0;cursor:w-resize}.hit.next{right:0;cursor:e-resize}
.hit:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

.progress{position:fixed;left:0;right:0;top:0;height:3px;background:transparent;z-index:5}
.progress i{display:block;height:100%;width:0;background:var(--accent);transition:width .2s}

.top{position:fixed;top:0;left:0;right:0;height:var(--top-h);display:flex;align-items:center;gap:16px;padding:0 16px;background:linear-gradient(var(--bg),rgba(15,17,21,0));z-index:4;transition:opacity .25s,transform .25s}
.brand{color:var(--text);text-decoration:none;font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.title{color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.bar{position:fixed;bottom:0;left:0;right:0;height:var(--bar-h);display:flex;align-items:center;justify-content:center;gap:8px;padding:0 16px calc(env(safe-area-inset-bottom));background:linear-gradient(rgba(15,17,21,0),var(--bg) 40%);z-index:4;transition:opacity .25s,transform .25s}
.sep{width:1px;height:24px;background:var(--line);margin:0 8px}
.btn{min-height:44px;min-width:44px;padding:0 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:inherit;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--accent);background:#1f2430}
.btn:focus-visible,.jump input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.icon{font-size:26px;line-height:1;padding:0 14px}
.jump{display:flex;align-items:center;gap:6px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:96px;justify-content:center}
.jump input{width:56px;min-height:44px;text-align:center;font:inherit;font-weight:700;color:var(--text);background:var(--panel);border:1px solid var(--line);border-radius:10px;-moz-appearance:textfield;appearance:textfield}
.jump input::-webkit-outer-spin-button,.jump input::-webkit-inner-spin-button{-webkit-appearance:none}
.jump b{color:var(--text)}

body.present .top,body.present .bar{opacity:0;pointer-events:none}
body.present.show .top,body.present.show .bar{opacity:1;pointer-events:auto}
body.present{cursor:none}body.present.show{cursor:default}

.grid{position:fixed;inset:0;background:rgba(15,17,21,.97);z-index:10;display:flex;flex-direction:column}
.grid[hidden]{display:none}
.gridhead{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.thumbs{flex:1;overflow:auto;padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;align-content:start}
.thumbs button{position:relative;display:block;border:2px solid transparent;border-radius:8px;background:#fff;cursor:pointer;overflow:hidden;width:100%;height:0;padding-bottom:69.23%}
.thumbs button:hover{border-color:var(--accent)}
.thumbs button.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.thumbs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.thumbs span{position:absolute;left:6px;bottom:6px;padding:1px 7px;border-radius:6px;background:rgba(15,17,21,.82);color:#fff;font-size:12px;font-weight:700}

.hint{position:fixed;left:50%;bottom:calc(var(--bar-h) + 8px);transform:translateX(-50%);padding:8px 14px;border-radius:999px;background:rgba(24,27,34,.92);border:1px solid var(--line);color:var(--muted);font-size:13px;z-index:6;pointer-events:none;transition:opacity .6s;text-align:center;max-width:calc(100% - 32px)}
.hint.gone{opacity:0}

@media (max-width:640px){
  :root{--bar-h:116px}
  .title{display:none}.top{justify-content:space-between}
  .bar{flex-wrap:wrap;align-content:center;gap:8px}
  .sep{display:none}
  .stage{padding:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* Accessible page title, preserving the original presentation chrome. */
h1.title{font-size:15px;font-weight:400;line-height:1.4}
.thumbs span{font-size:13px}
@media(max-width:640px){h1.title{display:block;position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;flex:none}}