:root {
  --bg: #080c16; --bg2: #0d1424; --panel: #111a2c; --panel2: #16213a; --line: #22304d; --line2: #2d3f63;
  --text: #e8eef9; --dim: #8b9bb8; --dim2: #5d6d8a;
  --accent: #3ee6ff; --accent2: #7c5cff; --ok: #4ade80; --bad: #ff5470; --gold: #ffcc4d; --opp: #ff7a59;
  --key-top: #1c2740; --key-bot: #141d31;
  --font: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --mono: 'D2Coding', 'Cascadia Mono', Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); }
body { background: radial-gradient(1200px 700px at 20% -10%, #14204066, transparent), radial-gradient(900px 600px at 110% 10%, #2a134a55, transparent), var(--bg); min-height: 100vh; overflow-x: hidden; }
#fit { transform-origin: top left; }
.screen { display: none; }
.screen.on { display: block; }
.frame { width: 1480px; padding: 18px 20px 28px; }
button, select, input { font-family: inherit; }

/* 상단 바 */
.top { display: flex; align-items: center; gap: 18px; height: 52px; margin-bottom: 14px; }
.logo { font-weight: 900; letter-spacing: .08em; font-size: 22px; }
.logo b { color: var(--accent); }
.logo small { display: block; font-size: 10px; letter-spacing: .1em; color: var(--dim); font-weight: 500; }
.tabs { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px; }
.tabs a { color: var(--dim); text-decoration: none; font-size: 13px; padding: 7px 12px; border-radius: 8px; }
.tabs a.on { background: var(--panel2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
.top .sp { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--dim); }
.chip b { color: var(--text); }
.home { color: var(--dim); text-decoration: none; font-size: 13px; }

.card { background: linear-gradient(180deg, var(--panel), #0f1727); border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; position: relative; }
.card h3 { margin: 0 0 10px; font-size: 12px; letter-spacing: .14em; color: var(--dim); font-weight: 700; text-transform: uppercase; }

/* PC 그리드 */
.grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 380px; gap: 16px; }
.hud { grid-column: 1; }
.stage { grid-column: 2; min-height: 300px; display: flex; flex-direction: column; }
.explain { grid-column: 3; grid-row: span 2; display: flex; flex-direction: column; }
.kbwrap { grid-column: 1 / span 2; }

.hud .big { display: flex; align-items: baseline; gap: 8px; }
.hud .big .n { font-size: 56px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; letter-spacing: -.02em; }
.hud .big .u { color: var(--dim); font-size: 14px; }
.hud .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.stat { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }
.stat .k { font-size: 11px; color: var(--dim); }
.stat .v { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 12px; color: var(--dim); font-weight: 500; }
.bar { height: 6px; background: var(--bg2); border-radius: 3px; overflow: hidden; margin-top: 12px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); width: 0; transition: width .15s; }
.spark { margin-top: 12px; width: 100%; height: 44px; }
.up { color: var(--ok); font-size: 12px; }

.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tag { font-size: 11px; padding: 4px 9px; border-radius: 999px; background: var(--bg2); border: 1px solid var(--line2); color: var(--dim); }
.tag.hot { color: var(--accent); border-color: #3ee6ff55; }
.sentence { font-size: 30px; line-height: 1.75; letter-spacing: .01em; word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; flex: 1; font-weight: 500; }
.sentence.en { font-family: var(--mono); font-size: 26px; }
.sentence .c { color: #5d6d8a; position: relative; border-bottom: 3px solid var(--role, transparent); padding-bottom: 1px; transition: color .08s; }
.sentence .c.ok { color: var(--text); }
.sentence .c.cur { color: var(--accent); }
.sentence .c.bad { color: var(--bad); background: #ff547022; border-radius: 3px; animation: shake .18s; }
.sentence .c.caret::before { content: ''; position: absolute; left: -1px; top: 12%; bottom: 12%; width: 2px; background: var(--accent); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--dim); margin: 6px 0 12px; }
.legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.nextline { color: var(--dim2); font-size: 13px; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.typeline { width: 100%; font-size: 22px; padding: 12px 16px; border-radius: 12px; background: #060a13; border: 1px solid var(--line2); color: var(--text); outline: none; }
.typeline:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #3ee6ff22; }
.typeline.err { border-color: var(--bad); box-shadow: 0 0 0 3px #ff547022; }
.hint { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-top: 8px; }
.hint b { color: var(--accent); }

/* 해설 패널 */
.explain .bubble { background: #0a1120; border: 1px solid var(--line); border-radius: 14px; padding: 14px; font-size: 14px; line-height: 1.6; min-height: 250px; white-space: pre-wrap; font-family: var(--font); }
.explain .bubble.mono { font-family: var(--mono); font-size: 13px; }
.explain .bubble .who { font-size: 11px; color: var(--accent); letter-spacing: .1em; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.explain .bubble .who::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.explain .bubble .cursor { display: inline-block; width: 8px; height: 15px; background: var(--accent); vertical-align: -2px; animation: blink .8s steps(2) infinite; }
.explain .why { margin-top: 12px; background: linear-gradient(135deg, #7c5cff22, #3ee6ff11); border: 1px solid #7c5cff44; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.6; }
.explain .why b { color: #c4b5fd; }
.explain .anat { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.explain .anat div { font-size: 13px; display: flex; gap: 8px; align-items: baseline; }
.explain .anat span.r { font-size: 10px; padding: 2px 7px; border-radius: 6px; color: #08101e; font-weight: 800; flex: none; }
.muted { color: var(--dim); font-size: 13px; line-height: 1.6; }
.kbd { font-family: var(--mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 5px; color: var(--text); }

/* 키보드 */
.kbbar { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; font-size: 12px; color: var(--dim); flex-wrap: wrap; }
.seg { display: inline-flex; background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 3px; }
.seg button { background: none; border: 0; color: var(--dim); font-size: 12px; padding: 5px 10px; border-radius: 6px; cursor: pointer; }
.seg button.on { background: var(--panel2); color: var(--text); }
.swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.swatch.on { border-color: var(--accent); }
.kbhost { display: flex; justify-content: center; }
.kb-svg { display: block; overflow: visible; }
.kb-svg .cap { stroke: #2a3a5c; stroke-width: 1; transition: fill .1s; }
.kb-svg .lab-main { fill: #b9c6dd; font-size: 19px; font-weight: 600; font-family: var(--font); pointer-events: none; }
.kb-svg .lab-fn { font-size: 12px; fill: #6f7f9c; }
.kb-svg .lab-sub { fill: #5f6f8d; font-size: 10px; font-family: var(--mono); pointer-events: none; }
.kb-svg .bump { fill: #6f7f9c; }
.kb-svg .zone { opacity: 0; transition: opacity .2s; }
.kb-svg.zones .zone { opacity: .85; }
.kb-svg .key.next .cap { fill: #0f3a4a; stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 8px #3ee6ffaa); }
.kb-svg .key.next .lab-main { fill: #fff; }
.kb-svg .key.next-shift .cap { fill: #2a1f4f; stroke: #a78bfa; stroke-width: 2; }
.kb-svg .key.down .cap { fill: #3ee6ff; }
.kb-svg .key.down .lab-main { fill: #04111a; }
.kb-svg .key.down { transform-box: fill-box; transform-origin: center; transform: translateY(2px); }
.kb-svg .tipmark { fill: none; stroke-width: 2.5; animation: pulse 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes pulse { 50% { transform: scale(1.35); opacity: .5; } }
.kb-svg .kb-hands { transition: opacity .3s; }

/* 완료 토스트 */
.toast { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--line2); padding: 10px 18px; border-radius: 12px; font-size: 14px; z-index: 50; animation: toast 2.4s forwards; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }


/* ── 로비 ── */
.lobby { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; }
.hero { padding: 26px 28px; }
.hero h1 { margin: 0; font-size: 44px; font-weight: 900; letter-spacing: .04em; }
.hero h1 b { color: var(--accent); }
.hero p { color: var(--dim); margin: 8px 0 0; line-height: 1.6; }
.packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.pack { border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--bg2); font-size: 14px; text-align: left; color: var(--text); }
.pack .ic { font-size: 22px; }
.pack.on { border-color: var(--accent); box-shadow: 0 0 0 3px #3ee6ff22; cursor: pointer; }
.pack.lock { opacity: .45; }
.pack small { display: block; color: var(--dim); font-size: 11px; margin-top: 4px; }
.tiers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
.tierbtn { border: 1px solid var(--line); background: var(--bg2); color: var(--text); border-radius: 14px; padding: 14px 12px; text-align: left; cursor: pointer; font-size: 13px; }
.tierbtn b { display: block; font-size: 18px; margin-bottom: 4px; }
.tierbtn span { color: var(--dim); font-size: 11px; line-height: 1.5; display: block; }
.tierbtn em { display: block; font-style: normal; margin-top: 8px; color: var(--gold); font-size: 12px; }
.tierbtn.on { border-color: var(--accent); background: #0f2a3a; }
.startrow { display: flex; gap: 12px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.startrow .btn { font-size: 18px; padding: 14px 34px; }
.recent { display: grid; gap: 6px; font-size: 13px; }
.recent div { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 8px 10px; border-radius: 10px; background: var(--bg2); }
.recent .empty { display: block; color: var(--dim); }
.settings { display: grid; gap: 12px; font-size: 13px; color: var(--dim); }
.settings > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.backbtn { background: var(--panel); border: 1px solid var(--line); color: var(--dim); border-radius: 10px; padding: 7px 12px; cursor: pointer; font-size: 13px; }
textarea.typeline { resize: none; height: 58px; line-height: 1.4; font-family: inherit; display: block; overflow: hidden; }
textarea.typeline.multi { min-height: 120px; }
.sentence .nl { color: #3a4a6a; font-size: .7em; }
.sentence.multi { font-size: 22px; line-height: 1.6; font-family: var(--font); }

/* ── 결과 ── */
.overlay { position: fixed; inset: 0; background: #050810d9; display: none; place-items: center; z-index: 30; }
.overlay.on { display: grid; }
.resultcard { width: 640px; max-width: calc(100vw - 32px); padding: 26px 28px; }
.resultcard h2 { margin: 0 0 4px; font-size: 28px; }
.resgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.newrec { color: var(--gold); font-weight: 800; }
.weak { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; }
.weak span { font-size: 13px; padding: 6px 10px; border-radius: 10px; background: #ff547018; border: 1px solid #ff547055; }
.resbtns { display: flex; gap: 10px; flex-wrap: wrap; }

/* ── 좁은 화면 (휴대폰·작은 태블릿): 한 줄 배치, 화면 키보드 숨김 (모바일 전용 화면은 M7) ── */
@media (max-width: 899px) {
  .frame { width: 100%; padding: 12px 16px 24px; }
  .top { flex-wrap: wrap; height: auto; gap: 10px; }
  .grid, .lobby { grid-template-columns: minmax(0, 1fr); }
  .hud, .stage, .explain, .kbwrap { grid-column: 1; grid-row: auto; }
  .hud .big .n { font-size: 34px; }
  .hud .row { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
  .hud .stat { padding: 6px 8px; } .hud .stat .v { font-size: 16px; }
  .hud .spark, .hud h3 { display: none; }
  .stage { order: -1; min-height: 0; }
  .top .chip:not(:first-of-type) { display: none; }
  .typeline { font-size: 17px; }
  .legend, .nextline { display: none; }
  .kbwrap { display: none; }
  .sentence { font-size: 21px; }
  .sentence.multi { font-size: 17px; }
  .packs { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .hero h1 { font-size: 32px; }
  .resgrid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.btn { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #050810; border: 0; font-weight: 800; padding: 10px 18px; border-radius: 10px; cursor: pointer; font-size: 14px; }
.btn.ghost { background: var(--panel2); color: var(--text); border: 1px solid var(--line2); }
.btn:focus-visible, .tierbtn:focus-visible, .backbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }