:root{--bg:#0B1028;--surface:#141A38;--surface2:#1B2347;--line:#2A3556;--ink:#E8ECF7;--sub:#9AA5C2;--accent:#7FE3EC;
  --grad:linear-gradient(100deg,#29B8FF,#6E5BFF 55%,#C54DFF);color-scheme:dark;box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100vh;background:radial-gradient(1100px 700px at 10% -10%,#1C2752 0%,transparent 60%),var(--bg);
  color:var(--ink);font-family:"IBM Plex Sans KR","Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;line-height:1.6}
.wrap{max-width:1080px;margin:0 auto;padding:28px 20px 56px}
header{display:flex;align-items:center;justify-content:space-between}
header img{height:26px;display:block}
header span{color:var(--sub);font-size:13px;font-weight:600}
h1{font-size:clamp(22px,3.2vw,34px);margin:32px 0 4px;letter-spacing:-0.02em}
.lead{margin:0;color:var(--sub);font-size:15px}
.cats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.cats button{font:inherit;text-align:center;cursor:pointer;color:var(--sub);background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:14px 18px}
.cats b{display:block;font-size:18px;color:var(--ink)}
.cats small{font-size:13px}
.cats button[aria-selected="true"]{border-color:transparent;background:var(--grad) border-box;color:rgba(255,255,255,.85);box-shadow:0 10px 28px -10px rgba(110,91,255,.65)}
.cats button[aria-selected="true"] b{color:#fff}
.items{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:10px;margin:12px 0 22px}
.items button{font:inherit;cursor:pointer;background:var(--surface);color:var(--sub);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;font-size:16px;font-weight:700;line-height:1.35;text-align:center}
.items button small{display:block;font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.04em;margin-bottom:2px}
.items button[aria-selected="true"] small{color:var(--accent)}
.items button[aria-selected="true"]{background:#262A66;color:#fff;border-color:#6E5BFF;box-shadow:inset 0 0 0 1px rgba(110,91,255,.35)}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.stage{display:flex;flex-direction:column;gap:16px;max-width:960px}
.player{background:#000;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.player video{display:block;width:100%;height:100%;object-fit:contain;background:#000}
.player.landscape{aspect-ratio:16/9}
.player.portrait{aspect-ratio:9/16;height:min(78vh,760px);width:auto;max-width:100%;align-self:center}
.info .tag{display:inline-block;font-size:12px;font-weight:700;color:var(--accent);border:1.5px solid #2C8FA0;border-radius:99px;padding:3px 12px}
.info .tag[hidden]{display:none}
.info h2{font-size:24px;margin:8px 0 4px;letter-spacing:-0.02em}
.info p{margin:0;color:var(--sub);font-size:15px}
.nav{display:flex;gap:8px;max-width:420px;width:100%;align-self:center}
.nav button{font:inherit;cursor:pointer;flex:1;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px;font-size:14px;font-weight:600}
.nav button:disabled{opacity:.35;cursor:default}
.orig{font:inherit;cursor:pointer;display:flex;align-items:center;gap:14px;width:100%;max-width:520px;align-self:center;text-align:left;
  background:var(--surface);color:var(--ink);border:1.5px solid var(--line);border-radius:16px;padding:14px 18px}
.orig[hidden]{display:none}
.orig:hover{border-color:#6E5BFF}
.orig .oi{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:#fff;background:var(--grad)}
.orig b{display:block;font-size:16px}
.orig small{display:block;font-size:13px;color:var(--sub)}
.orig .oa{margin-left:auto;font-size:26px;color:var(--sub);line-height:1}
.modal{position:fixed;inset:0;z-index:50;background:rgba(5,8,22,.86);display:grid;place-items:center;padding:calc(16px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}
.modal[hidden]{display:none}
.mbox{display:flex;flex-direction:column;gap:10px;max-height:100%}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--ink);font-weight:700;font-size:15px}
.mhead button{font:inherit;cursor:pointer;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:16px}
.mbox video{display:block;height:min(82vh,900px);max-width:calc(100vw - 32px);aspect-ratio:9/16;object-fit:contain;background:#000;border-radius:18px}
.hint{margin:0;font-size:12.5px;color:var(--sub);text-align:center}
footer{margin-top:40px;color:var(--sub);font-size:12px}
@media (max-width:800px){
  .player.portrait{height:auto;width:100%}
  .wrap{padding:20px 16px 40px}
  .cats b{font-size:16px}
  .items{gap:8px}
  .items button{font-size:14px;padding:12px 8px;word-break:keep-all}
}