@font-face{font-family:Pretendard;src:url('../../ds/fonts/PretendardVariable.woff2') format('woff2');font-display:swap}
:root{--paper:#f6f8fa;--ink:#0f1926;--muted:#566775;--line:#ccd5dc;--accent:#9b621e}*{box-sizing:border-box}html,body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font-family:Pretendard,Arial,sans-serif;line-height:1.65}main{max-width:1440px;margin:auto;padding:28px 32px 24px}button,select{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,select:focus-visible,canvas:focus-visible{outline:3px solid var(--accent);outline-offset:4px}::selection{background:#fae7c5;color:var(--ink)}header{display:flex;justify-content:space-between;gap:24px;min-height:110px}h2{font-size:clamp(20px,2.4vw,28px);line-height:1.35;letter-spacing:-.025em;margin:0 0 10px;word-break:keep-all}header p{font-size:14px;color:var(--muted);max-width:65ch;margin:0;word-break:keep-all}#count{white-space:nowrap;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted);padding-top:5px}.views{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}.views button,.controls button{min-height:44px;padding:8px 16px;border:1px solid var(--line);border-radius:8px;background:transparent;font-size:13px}.views button[aria-pressed=true],.controls button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}button:hover{background:#e9eef1}#stage{height:550px;position:relative}#scene{position:absolute;inset:0 26% 0 0;touch-action:pan-y}canvas{display:block;width:100%;height:100%;touch-action:pan-y}.poster{width:100%;height:100%;object-fit:contain}.ready .poster{display:none}#leaders{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}#leaders path{stroke:var(--line);fill:none;stroke-width:1}#leaders circle{fill:#657b87}#tags{position:absolute;right:0;top:55px;bottom:55px;width:23%;display:flex;flex-direction:column;justify-content:space-around;gap:16px}#tags button{padding:10px 14px;min-height:50px;border:0;background:none;text-align:left;font-size:15px;font-weight:600;border-radius:8px}#tags button[aria-pressed=true],#tags button:hover{background:#e8edf0}#tags button[aria-pressed=true]{box-shadow:inset 2px 0 var(--accent)}.playback{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-block:1px solid var(--line)}.playback button,.playback select{font-size:13px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:8px 14px}.playback #play{background:var(--ink);color:#fff;border-color:var(--ink);min-width:130px}.step-nav{display:flex;gap:8px;align-items:center;min-width:0}.step-nav select{min-width:0;max-width:340px}.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px}.controls>span{font-size:12px;color:var(--muted)}.controls>div{display:flex;gap:8px}#detail{min-height:54px;font-size:14px;line-height:1.8;margin:18px 0 0;color:var(--muted);max-width:65ch}#status{font-size:12px;color:var(--muted)}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:700px){main{padding:18px 14px 20px}header{min-height:142px;gap:10px}h2{font-size:20px;min-height:54px}header p{font-size:12px;min-height:62px}#count{font-size:10px}.views{gap:5px;flex-wrap:nowrap}.views button{font-size:11px;min-width:0;flex:1;padding:7px 4px}#stage{height:460px}#scene{inset:0 0 120px}#tags{left:0;right:0;top:auto;bottom:15px;width:100%;height:66px;flex-direction:row;gap:6px}#tags button{flex:1;min-width:0;padding:5px 3px;font-size:12px;text-align:center;word-break:keep-all}#tags button[aria-pressed=true]{box-shadow:inset 0 -2px var(--accent)}.playback{align-items:stretch;flex-direction:column;gap:10px}.playback #play{width:100%}.step-nav select{width:0;flex:1;font-size:11px;padding-inline:5px}.step-nav button{padding-inline:10px}.controls{justify-content:flex-end}.controls>span{display:none}.controls button{font-size:12px;padding-inline:12px}#detail{font-size:12px;min-height:72px}}

body[data-presentation=true] .views,
body[data-presentation=true] .controls{display:none!important}
body[data-presentation=true] main{padding:24px 28px}
body[data-presentation=true] header{min-height:90px}
body[data-presentation=true] #tags button{border-radius:4px}
body[data-presentation=true]:not([data-part-selected=true]) #detail{display:none}
body[data-presentation=true] #detail{border-top:1px solid var(--line);padding-top:18px;margin-top:8px;min-height:0;max-width:80ch}
@media(max-width:700px){
 body[data-presentation=true] main{padding:18px 14px}
 body[data-presentation=true] header{min-height:112px}
 body[data-presentation=true] header p{font-size:14px;min-height:0}
 body[data-presentation=true] #detail{font-size:14px}
}

/* A compact playback control remains available in the public presentation. */
body[data-presentation=true] .playback{display:flex;justify-content:flex-start;margin-top:12px}
body[data-presentation=true] .playback .step-nav{display:none}
body[data-presentation=true] #play{min-height:44px;font-size:14px;border-radius:4px}