:root { --bg:#10131a; --card:#1a1f2b; --line:#2b3345; --text:#e8ecf3; --mute:#9aa6bd; --acc:#4cc9f0; --outer:#22d3ee; --inner:#e879f9; --two:#ffe44d; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,"Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,sans-serif; line-height:1.55; }
a { color:var(--acc); }
.top { padding:14px 14px 4px; max-width:1100px; margin:0 auto; }
.top h1 { margin:0; font-size:1.3rem; }
.src { margin:2px 0 0; color:var(--mute); font-size:.82rem; }
#nav { display:flex; gap:6px; overflow-x:auto; padding:10px 14px; max-width:1100px; margin:0 auto; scrollbar-width:thin; }
#nav button { flex:0 0 auto; background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:999px; padding:8px 12px; font-size:.9rem; cursor:pointer; white-space:nowrap; }
#nav button.on { background:var(--acc); color:#06121a; border-color:var(--acc); font-weight:700; }
main { max-width:1100px; margin:0 auto; padding:0 14px 20px; display:grid; gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
.card[hidden] { display:none; }
.card h2 { margin:0 0 6px; font-size:1.15rem; }
.badges { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 8px; }
.badge { background:#27304a; border-radius:999px; padding:3px 10px; font-size:.8rem; color:#cfe3ff; }
.badge.grip { background:#3b2f57; }
.btn { background:#2a3350; color:var(--text); border:1px solid #3a4666; border-radius:12px; padding:10px 14px; font-size:1rem; cursor:pointer; touch-action:manipulation; }
.btn:hover { background:#33406a; }
.btn.primary { background:var(--acc); color:#06121a; border-color:var(--acc); font-weight:700; }
.btn.big { padding:16px 10px; font-size:1.15rem; flex:2; }
.btn.mini { padding:6px 10px; font-size:.85rem; border-radius:9px; }
.btn.mini.on { background:var(--acc); color:#06121a; border-color:var(--acc); }
.video-wrap { margin-top:10px; }
.video-wrap iframe { width:100%; aspect-ratio:16/9; border:0; border-radius:10px; }
.tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px; }
.tabs button { background:#222a3d; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:7px 11px; font-size:.9rem; cursor:pointer; }
.tabs button.on { border-color:var(--acc); color:var(--acc); font-weight:700; }
.when { margin:0 0 10px; color:var(--mute); font-size:.9rem; }
.stage-wrap { display:grid; gap:10px; grid-template-columns:1fr; }
.stage { position:relative; width:100%; aspect-ratio:1/1; max-height:70vh; background:radial-gradient(circle at 50% 40%, #232b3d, #121622); border-radius:12px; overflow:hidden; touch-action:none; }
#gl { width:100%; height:100%; display:block; }
.lbl { position:absolute; transform:translate(-50%,-50%); background:rgba(0,0,0,.62); color:#fff; border:1px solid rgba(255,255,255,.4); padding:2px 9px; border-radius:999px; font-size:.82rem; font-weight:700; pointer-events:none; white-space:nowrap; }
.whole-note { position:absolute; left:8px; right:8px; bottom:8px; background:rgba(251,191,36,.95); color:#2a1d00; font-weight:700; text-align:center; border-radius:10px; padding:6px; }
.whole-note[hidden] { display:none; }
.side { display:flex; flex-direction:column; align-items:center; }
#net { width:100%; max-width:420px; background:#0f1320; border-radius:10px; border:1px solid var(--line); }
.netcap { margin:4px 0 0; color:var(--mute); font-size:.75rem; text-align:center; }
.legend { margin:4px 0 0; font-size:.8rem; color:var(--mute); }
.lg { display:inline-block; width:12px; height:12px; border-radius:3px; margin:0 4px 0 8px; vertical-align:-1px; }
.lg.outer { background:var(--outer); } .lg.inner { background:var(--inner); } .lg.two { background:var(--two); }
.explain { min-height:3em; margin:10px 0 6px; padding:8px 10px; background:#12192a; border-left:4px solid var(--acc); border-radius:6px; font-size:.95rem; }
.chips { display:flex; flex-wrap:wrap; gap:10px 14px; margin-bottom:10px; }
.chipgroup { display:flex; flex-direction:column; gap:4px; }
.grouplbl { font-size:.75rem; color:var(--acc); border-bottom:2px solid var(--acc); padding-bottom:1px; }
.grouprow { display:flex; flex-wrap:wrap; gap:8px; }
.chip { min-width:54px; min-height:50px; padding:6px 10px; border-radius:12px; border:2px solid #3a4666; background:#202843; color:var(--text); font-size:1.2rem; font-weight:700; font-family:ui-monospace,Menlo,monospace; cursor:pointer; position:relative; touch-action:manipulation; }
.chip small { display:block; font-family:inherit; font-size:.62rem; font-weight:400; color:var(--mute); }
.chip.done { background:#26364a; }
.chip.active { border-color:var(--acc); box-shadow:0 0 0 3px rgba(76,201,240,.35); background:#173247; }
.chip.extra { border-style:dashed; }
.chip.kind-outer { border-bottom-color:var(--outer); } .chip.kind-inner { border-bottom-color:var(--inner); } .chip.kind-two { border-bottom-color:var(--two); }
.ctrl { display:flex; gap:8px; align-items:stretch; margin-bottom:8px; }
.ctrl .btn { flex:1; }
.ctrl.small { align-items:center; flex-wrap:wrap; font-size:.9rem; }
.ctrl.small .btn { flex:0 0 auto; }
.chk { display:flex; align-items:center; gap:6px; }
.chk input { width:20px; height:20px; }
.spd { display:flex; gap:4px; }
.hint { color:var(--mute); font-size:.78rem; margin:6px 0 0; }
.parity { display:flex; flex-wrap:nowrap; gap:8px; margin:10px 0; }
.parity figure { margin:0; text-align:center; font-size:.7rem; color:var(--mute); max-width:150px; flex:1; } .parity svg { max-width:100%; height:auto; }
table { border-collapse:collapse; width:100%; font-size:.92rem; }
th, td { border:1px solid var(--line); padding:6px 8px; text-align:left; vertical-align:top; }
th { background:#212a3f; }
code { background:#0f1320; padding:1px 6px; border-radius:6px; font-family:ui-monospace,Menlo,monospace; }
footer { max-width:1100px; margin:0 auto; padding:6px 14px 40px; color:var(--mute); font-size:.78rem; }
@media (min-width: 900px) {
  .stage-wrap { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); align-items:start; }
  .stage { max-height:620px; }
  .btn.big { font-size:1.05rem; padding:12px 10px; }
}

.card h3 { margin:12px 0 2px; font-size:.95rem; color:var(--acc); }
.card p { margin:4px 0; }
.card ul { margin:4px 0; padding-left:20px; }
.card li { margin:3px 0; }
.navsep { flex:0 0 auto; color:var(--mute); align-self:center; padding:0 2px; }
.exc { margin-top:12px; padding:10px; border:1px dashed var(--two); border-radius:10px; background:#241f12; }
.exc h3 { color:var(--two); margin-top:0; }
.tabs button.exc { border-style:dashed; border-color:var(--two); }

#viewer.symmode { position:sticky; top:0; z-index:20; }
.symmode .stage { aspect-ratio:auto; height:40vh; max-height:none; }
.symmode #tabs, .symmode #when, .symmode .side, .symmode #chips, .symmode .ctrl, .symmode .hint { display:none; }
.symmode .stage-wrap { grid-template-columns:1fr; }
.symmode .explain { margin:6px 0 0; min-height:2.4em; font-size:.85rem; }
.symgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:6px 0 12px; }
.symcard { background:#202843; border:2px solid #3a4666; border-radius:12px; padding:8px; cursor:pointer; }
.symcard.on { border-color:#39ff14; background:#1b3a2a; }
.symbig { font-size:1.9rem; font-weight:800; font-family:ui-monospace,Menlo,monospace; }
.symdesc { font-size:.78rem; color:var(--mute); min-height:3.2em; }
.symbtns { display:flex; gap:4px; flex-wrap:wrap; margin-top:4px; }
.symbtns .btn { flex:1; padding:6px 4px; font-size:.8rem; }
.symlink { margin-left:6px; white-space:nowrap; }

.progtop { font-size:.8rem; color:var(--acc); font-weight:700; margin-bottom:2px; }
.navbtns { display:flex; gap:8px; } .navbtns .btn { flex:1; } .navbtns .btn:disabled { opacity:.35; }
button.grouplbl { background:none; border:0; border-bottom:2px solid var(--acc); color:var(--acc); cursor:pointer; text-align:left; padding:0 0 1px; font-size:.75rem; }
#fBar[hidden], #fBottom[hidden] { display:none; }
#viewer.follow { position:fixed; inset:0; z-index:100; background:#10131a; border-radius:0; border:0; padding:0; display:flex; flex-direction:column; }
.follow #tabs, .follow #when, .follow .side, .follow #explain, .follow #chips, .follow .ctrl, .follow .hint, .follow #undoPanel { display:none; }
.follow #fBar { order:0; display:flex; align-items:center; gap:10px; padding:10px 12px; background:#1a1f2b; }
#fProg { font-weight:800; font-size:1.1rem; } #fSec { flex:1; color:var(--acc); font-weight:700; }
.follow .stage-wrap { order:1; flex:1; min-height:0; display:block; }
.follow .stage { height:100%; max-height:none; aspect-ratio:auto; border-radius:0; }
.follow #fBottom { order:2; padding:10px 14px calc(12px + env(safe-area-inset-bottom)); background:#1a1f2b; }
.fsym { font-size:3.2rem; font-weight:800; font-family:ui-monospace,Menlo,monospace; line-height:1.1; }
.ftext { font-size:1.05rem; margin:4px 0 8px; min-height:3em; }
.fbtns { display:flex; gap:8px; } .fbtns .btn { flex:1; } .fbtns .big { flex:2; }
.fhint { color:var(--mute); font-size:.75rem; margin-top:6px; }
.undoq { margin:8px 0 4px; font-size:.9rem; font-weight:700; color:var(--two); }
#undoPanel { border:1px dashed var(--two); border-radius:10px; padding:8px; margin-bottom:10px; background:#241f12; }
#undoMsg { font-size:.88rem; margin:6px 0; }
.ctrl .btn { white-space:normal; word-break:keep-all; min-width:0; }
.follow-btn { background:#2f6f4a; border-color:#3f9a66; font-weight:700; }

.sitgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:6px 0 10px; }
.sitcard { background:#202843; border:2px solid #3a4666; border-radius:12px; padding:6px; color:var(--text); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:.8rem; }
.sitcard:active, .sitcard:hover { border-color:var(--acc); }
.sitcard canvas { width:100%; max-width:176px; height:auto; background:#0f1320; border-radius:8px; }
@media (min-width:700px) { .sitgrid { grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); } }

.quiz #chips, .quiz .ctrl, .quiz .hint, .quiz #undoPanel { display:none; }
#quizPanel { border:1px solid var(--acc); border-radius:10px; padding:8px; margin-bottom:10px; background:#10222f; }
.qhead { display:flex; justify-content:space-between; align-items:center; font-weight:800; }
.qchoices { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:8px 0; }
.qchoices .btn { font-size:1.4rem; font-weight:800; font-family:ui-monospace,Menlo,monospace; padding:14px 6px; }
.qchoices .btn.right { background:#1f6f3f; border-color:#39ff14; } .qchoices .btn.bad { background:#6f2330; border-color:#ff6b7f; }
.qfb { min-height:2.4em; font-size:.92rem; margin:0 0 6px; }
#modal { position:fixed; inset:0; z-index:200; background:rgba(5,8,14,.86); display:flex; align-items:center; justify-content:center; padding:14px; }
#modal[hidden] { display:none; }
#mbox { width:100%; max-width:480px; max-height:92vh; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; }
.timerbig { font-size:4rem; font-weight:800; text-align:center; font-family:ui-monospace,Menlo,monospace; margin:10px 0; }
.timerarea { min-height:46vh; display:flex; flex-direction:column; justify-content:center; user-select:none; cursor:pointer; text-align:center; }
.mrow { display:grid; grid-template-columns:1fr; gap:4px; padding:8px 0; border-bottom:1px solid var(--line); }
.mtitle { font-weight:700; } .mtitle small { color:var(--mute); font-weight:400; margin-left:6px; }
.mbtns { display:flex; gap:6px; flex-wrap:wrap; } .mbtns .btn { padding:6px 10px; font-size:.82rem; }
.mbar { display:flex; gap:3px; align-items:center; } .mbar i { width:22px; height:9px; border-radius:3px; background:#2a3350; display:inline-block; } .mbar i.on { background:var(--acc); }
.mbar i.on.top { background:#39ff14; } .mbar span { font-size:.75rem; color:var(--mute); margin-left:6px; }
.plat { color:var(--two); font-size:.82rem; }
.mastsum { margin:6px 0 8px; padding:6px 8px; background:#12192a; border-radius:8px; font-size:.8rem; }
.mastsum .mi { display:grid; grid-template-columns:minmax(0,1fr) 16.5em; align-items:center; gap:6px; margin:2px 0; } .mastsum .mi b { font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .mastsum .mi .mbar { white-space:nowrap; } .mastsum .mi .plat { grid-column:1 / -1; }
.bundle { border:2px solid #7fd1a8; border-radius:12px; padding:0 4px 4px; background:rgba(127,209,168,.06); }
.bundle .bname { display:block; font-size:.68rem; color:#7fd1a8; padding:1px 4px; }
.bundle .brow { display:flex; gap:6px; }
.tdata { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.drillmode { font-size:.92rem; margin:4px 0 8px; color:#cfe3ff; }
.mlbl { font-size:.72rem; color:var(--mute); margin-top:4px; }
.mchips { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:4px; }
.mchip { font-family:ui-monospace,Menlo,monospace; font-size:.85rem; padding:2px 6px; border:1px solid #3a4666; border-radius:6px; background:#202843; }
.timerarea { min-height:30vh; }
#puzzles { display:flex; gap:6px; padding:8px 14px 0; max-width:1100px; margin:0 auto; }
#puzzles button { flex:1; background:var(--card); color:var(--text); border:2px solid var(--line); border-radius:12px; padding:10px 2px; font-size:1rem; font-weight:800; cursor:pointer; min-width:0; }
#puzzles button.on { background:var(--acc); color:#06121a; border-color:var(--acc); }
.exc ul { margin:6px 0 8px 1.1em; padding:0; } .exc li { margin:4px 0; }
.excgo { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.rules { margin:10px 0; padding:10px; border:1px solid var(--line); border-radius:10px; background:#12192a; } .rules h3 { margin-top:0; } .rules ol { margin:6px 0 0 1.2em; padding:0; } .rules li { margin:6px 0; }
.rulego { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; } .mini { font:inherit; font-size:.78rem; padding:3px 9px; border-radius:999px; border:1px solid var(--line); background:#232b44; color:inherit; cursor:pointer; }
.cmp table { width:100%; border-collapse:collapse; margin:6px 0; font-size:.85rem; } .cmp th, .cmp td { border:1px solid var(--line); padding:5px 7px; text-align:left; vertical-align:top; } .cmp thead th { background:#1b2236; }
.cmp tbody th { white-space:nowrap; background:#1b2236; }
.seatinfo { display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center; margin:8px 0; font-size:.9rem; } .seatinfo .seat { padding:3px 9px; border-radius:999px; background:#1b2236; border:1px solid var(--line); } .seatinfo .seat b { color:#ffa31a; } .seatinfo .seat.all b { color:#39ff14; } .seatinfo .seatnote { color:var(--mute); font-size:.78rem; }

[hidden] { display:none !important; }
.follow #seatInfo { order:1; margin:0; padding:6px 12px; background:#1a1f2b; } .follow #seatInfo .seatnote { display:none; }
.follow .stage-wrap { order:2; } .follow #fBottom { order:3; }

#mirrorBar { display:flex; gap:6px; padding:6px 14px 0; max-width:1100px; margin:0 auto; } #mirrorBar[hidden] { display:none !important; }
#mirrorBar button { background:var(--card); color:var(--mute); border:1px solid var(--line); border-radius:999px; padding:5px 12px; font-size:.82rem; cursor:pointer; }
#mirrorBar button.on { color:#1a1304; background:#d9b44a; border-color:#d9b44a; font-weight:700; }
.mnote { color:#d9b44a; }
.mbox { border:1px solid #d9b44a66; background:#d9b44a14; border-radius:10px; padding:8px 12px; margin:10px 0; } .mbox h3 { margin:0 0 4px; color:#d9b44a; font-size:.95rem; } .mbox ul { margin:4px 0 0; padding-left:18px; }
.mtab { width:100%; border-collapse:collapse; font-size:.74rem; margin:4px 0; } .mtab th, .mtab td { border:1px solid #d9b44a55; padding:2px 3px; text-align:center; }