/* 시안 C(재생목록) — 토큰은 DESIGN.md와 같게 유지 */
:root{--bg:#eef1f5;--card:#fff;--line:#e2e6ec;--tx:#14181f;--mut:#6b7380;--ac:#2f6bff;--acs:#e8efff;--bad:#d93025;--bads:#fdecea;--r:16px;
  --sh:0 1px 2px #0000000d,0 8px 24px -12px #0000001f;
  --f:"Pretendard","Noto Sans KR","Noto Sans CJK KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--bg);color:var(--tx);font:15px/1.5 var(--f);-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
[hidden]{display:none!important}
.top{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(14px,3vw,28px)}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-.02em;min-width:0}
.logo span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logo .sub{color:var(--mut);font-weight:600}
.lg{width:28px;height:28px;flex:none}.lg rect{fill:var(--ac)}.lg path{fill:#fff}
.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--sh)}
.chip{background:var(--bg);color:var(--mut);font-size:13px;padding:4px 10px;border-radius:99px;font-variant-numeric:tabular-nums;border:0;white-space:nowrap}
.chip b{color:var(--ac)}
.chip.bad{background:var(--bads);color:var(--bad);font-weight:600;cursor:pointer}
.inp{width:100%;min-width:0;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:13px 14px;outline:none;transition:border-color .15s,background .15s}
.inp:focus{border-color:var(--ac);background:var(--card)}
.btn{border:0;border-radius:12px;padding:13px;background:var(--ac);color:#fff;font-weight:700;cursor:pointer}
.btn.sm{padding:8px 14px;font-size:14px;background:var(--bg);color:var(--tx);font-weight:600;white-space:nowrap}
.btn.sm:hover{background:var(--acs);color:var(--ac)}
.btn:disabled{opacity:.5;cursor:default}
/* 로그인·시작 */
.gate{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;padding:20px}
.gate form{width:min(380px,100%);padding:32px 28px;display:grid;gap:14px}
.gate .logo{justify-content:center;font-size:22px;margin-bottom:8px}
.err{color:var(--bad);font-size:14px;margin:-4px 0 0;text-align:center}
/* 시청 */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;padding:0 clamp(14px,3vw,28px) 40px;max-width:1500px;margin:0 auto;align-items:start}
.stage{overflow:hidden}
.player{aspect-ratio:16/9;background:#0d1117}
.player video{width:100%;height:100%;display:block;background:#0d1117}
.info{padding:18px 22px 20px;display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap}
.info h1{margin:0;font-size:22px;letter-spacing:-.02em}
.list{position:sticky;top:16px;padding:8px;max-height:calc(100vh - 100px);overflow:auto}
.lh{display:flex;justify-content:space-between;padding:10px 12px 8px;font-weight:700}
.lh span{color:var(--mut);font-weight:500}
.it{display:grid;grid-template-columns:24px 128px minmax(0,1fr);gap:12px;align-items:center;width:100%;border:0;background:none;padding:8px;border-radius:12px;cursor:pointer;text-align:left;transition:background .12s}
.it:hover{background:var(--bg)}
.it[aria-current=true]{background:var(--acs)}
.it .i{color:var(--mut);font-size:13px;text-align:center;font-variant-numeric:tabular-nums}
.it[aria-current=true] .i{color:var(--ac);font-weight:700}
.it img{width:128px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block;background:var(--bg)}
.it b{font-weight:600;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.it small{color:var(--mut);font-variant-numeric:tabular-nums}
.empty{text-align:center;color:var(--mut);padding:80px 0}
/* 관리 */
.adm{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:0 clamp(14px,3vw,28px) 40px;max-width:1200px;margin:0 auto;align-items:start}
.side{padding:8px;display:grid;gap:2px;position:sticky;top:16px}
.side button{width:100%;border:0;background:none;text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;color:var(--mut);font-weight:600}
.side button[aria-selected=true]{background:var(--acs);color:var(--ac)}
.side form{margin:0}
.side hr{border:0;border-top:1px solid var(--line);margin:6px 4px}
.ahd{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ahd h2{margin:0;font-size:18px}
.acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ar{display:grid;grid-template-columns:120px minmax(0,1fr) 64px 52px;gap:16px;align-items:center;padding:10px 20px;border-bottom:1px solid var(--line)}
.ar:last-child{border-bottom:0}
.ar img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:8px;display:block;background:var(--bg)}
.ar.off img{opacity:.4;filter:grayscale(1)}
.ar .inp{background:transparent;border-color:transparent;padding:8px 10px}
.ar .inp:hover{border-color:var(--line)}
.ar .inp:focus{border-color:var(--ac)}
.ar small{color:var(--mut);text-align:right;font-variant-numeric:tabular-nums}
.sw{position:relative;width:44px;height:26px;border-radius:99px;border:0;background:#d5dae2;cursor:pointer;transition:background .15s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .15s}
.sw[aria-checked=true]{background:var(--ac)}.sw[aria-checked=true]::after{transform:translateX(18px)}
.fr{display:grid;grid-template-columns:160px minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line);margin:0}
.fr:last-child{border-bottom:0}
.fr>span{color:var(--mut);font-weight:600;font-size:14px}
.fr em{font-style:normal;font-weight:600;font-size:12px;margin-left:4px}
.fr em.bad{color:var(--bad)}.fr em.ok{color:var(--ac)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px;min-width:0}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--tx);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;transition:opacity .2s;pointer-events:none;z-index:9}
.toast.on{opacity:1}.toast.bad{background:var(--bad)}
@media (max-width:980px){.layout{grid-template-columns:1fr}.list{position:static;max-height:none}}
@media (max-width:640px){
  .adm{grid-template-columns:1fr}.side{position:static;display:flex;overflow:auto}.side hr{display:none}
  .side button{white-space:nowrap}
  .ar{grid-template-columns:88px minmax(0,1fr) 48px;gap:10px;padding:10px 12px}.ar img{width:88px}.ar small{display:none}
  .fr{grid-template-columns:minmax(0,1fr) auto;padding:12px}.fr>span{grid-column:1/-1}
  .two{grid-template-columns:1fr}
  .it{grid-template-columns:20px 112px minmax(0,1fr)}.it img{width:112px}
  .info{padding:14px 16px}.info h1{font-size:19px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}