/* Clakk. 웹 속도 측정 (2026-10-08). 값은 게임 UI/Theme/Clakk.uss(1440x810 기준)에서 그대로 옮겼다 —
   어두운 쪽이 게임 그대로, 밝은 쪽은 같은 칸 사다리를 밝게 뒤집은 것 (시스템 설정이나 단추로). 글꼴은 모두 이 서버에서 (외부 요청 없음) */
@font-face { font-family: "Roboto"; font-weight: 400; src: url("fonts/Roboto-Regular.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 500; src: url("fonts/Roboto-Medium.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Roboto"; font-weight: 700; src: url("fonts/Roboto-Bold.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 400; src: url("fonts/Pretendard-Regular.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 500; src: url("fonts/Pretendard-Medium.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Pretendard"; font-weight: 700; src: url("fonts/Pretendard-Bold.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; font-weight: 700; src: url("fonts/SpaceGrotesk-Bold.woff") format("woff"); font-display: swap; }
@font-face { font-family: "DejaVu Sans Mono"; src: url("fonts/DejaVuSansMono.woff") format("woff"); font-display: swap; }
@font-face { font-family: "D2Coding"; src: url("fonts/D2Coding-web.woff") format("woff"); font-display: swap; }

:root {
  color-scheme: dark;
  /* 면 사다리: 깊은 바닥 → 배경 → 파인 자리 → 판 → 얹힌 것 → 눌린 것 */
  --bg-deep: #0A0B0D; --bg: #0D0F13; --sunken: #0C0E11; --panel-2: #121419; --panel: #15181E; --raised: #191C23;
  --control: #1D2027; --control-hi: #262A33; --control-on: #31363F; --thumb: #0A0B0D;
  --border: rgba(255, 255, 255, .06); --border-top: rgba(255, 255, 255, .09); --border-2: #2B3038; --border-3: #383D47;
  --text: #E7E9EE; --text-2: #9AA0AB; --text-3: #858B9A; --rest: #6C7180;
  --accent: #7EE3C1; --accent-fg: #7EE3C1; --accent-hi: #9BEDD3; --accent-dim: #3F8370; --accent-soft: #16241F; --accent-ink: #08120F;
  --me: #1A2B27; --me-line: #3F8370; --banner-line: #3F8370;
  --error: #FF7070; --gold: #E0C690;
  --topbar: rgba(13, 15, 19, .72); --hint: rgba(255, 255, 255, .03); --kbd: rgba(255, 255, 255, .04);
  --grid: rgba(255, 255, 255, .06); --fill: rgba(126, 227, 193, .05);
  --backdrop: url("kb/night.webp");
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg-deep: #DDE0E5; --bg: #EEF0F3; --sunken: #F3F4F6; --panel-2: #F5F6F8; --panel: #FFFFFF; --raised: #E3E6EB;
    --control: #E9EBEF; --control-hi: #DFE2E7; --control-on: #D4D8DE; --thumb: #E6E8EC;
    --border: rgba(16, 18, 23, .08); --border-top: rgba(16, 18, 23, .08); --border-2: #D3D7DD; --border-3: #C3C8D0;
    --text: #15171C; --text-2: #5A606D; --text-3: #646A77; --rest: #A2A7B1;
    --accent: #7EE3C1; --accent-fg: #198A67; --accent-hi: #9BEDD3; --accent-dim: #8FD3BC; --accent-soft: #E3F6EF; --accent-ink: #08120F;
    --me: #E6F6F0; --me-line: #8FD3BC; --banner-line: #8FD3BC;
    --error: #D64545; --gold: #A5822F;
    --topbar: rgba(238, 240, 243, .8); --hint: rgba(16, 18, 23, .03); --kbd: rgba(16, 18, 23, .04);
    --grid: rgba(16, 18, 23, .08); --fill: rgba(25, 138, 103, .07);
    --backdrop: none;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-deep: #DDE0E5; --bg: #EEF0F3; --sunken: #F3F4F6; --panel-2: #F5F6F8; --panel: #FFFFFF; --raised: #E3E6EB;
  --control: #E9EBEF; --control-hi: #DFE2E7; --control-on: #D4D8DE; --thumb: #E6E8EC;
  --border: rgba(16, 18, 23, .08); --border-top: rgba(16, 18, 23, .08); --border-2: #D3D7DD; --border-3: #C3C8D0;
  --text: #15171C; --text-2: #5A606D; --text-3: #646A77; --rest: #A2A7B1;
  --accent: #7EE3C1; --accent-fg: #198A67; --accent-hi: #9BEDD3; --accent-dim: #8FD3BC; --accent-soft: #E3F6EF; --accent-ink: #08120F;
  --me: #E6F6F0; --me-line: #8FD3BC; --banner-line: #8FD3BC;
  --error: #D64545; --gold: #A5822F;
  --topbar: rgba(238, 240, 243, .8); --hint: rgba(16, 18, 23, .03); --kbd: rgba(16, 18, 23, .04);
  --grid: rgba(16, 18, 23, .08); --fill: rgba(25, 138, 103, .07);
  --backdrop: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; color: var(--text); }
html[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }   /* 한글은 낱말 단위로 줄바꿈 (게임 UseHangulWordWrap) */   /* 배경은 html에 — body에 칠하면 뒤의 밤 그림(.backdrop)을 덮는다 */
body { font: 14px/1.4 Roboto, Pretendard, system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100vh; display: flex; flex-direction: column; }
.backdrop { position: fixed; inset: 0; z-index: -1; background: var(--backdrop) center / cover no-repeat, var(--bg); pointer-events: none; }
main { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding-inline: 40px; }
button { font: inherit; color: inherit; cursor: pointer; margin: 0; }
a { color: var(--accent-fg); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent-fg); outline-offset: 2px; }
.ic { display: block; flex: none; fill: none; stroke: currentColor; stroke-linecap: butt; stroke-linejoin: miter; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; }

/* 글자 (게임 .h1 .h2 .caps .faint …) */
.accent { color: var(--accent-fg); }
.faint, .muted { color: var(--text-2); }
.error { color: var(--error); }
.grow { flex: 1; }
.h2 { font-size: 20px; font-weight: 700; }
.caps { font-size: 11px; letter-spacing: 1.6px; font-weight: 500; text-transform: uppercase; color: var(--text-2); }
.caps.accent { color: var(--accent-fg); }
.stat-label { font-size: 12px; color: var(--text-2); }
.wordmark { font: 700 27px/1 "Space Grotesk", Roboto, sans-serif; letter-spacing: -1.35px; color: var(--text); }
.wordmark-xl { font: 700 118px/1 "Space Grotesk", Roboto, sans-serif; letter-spacing: -5.9px; color: var(--text); margin: 6px 0 0 -4px; }
.dot-accent { width: 7px; height: 7px; border-radius: 4px; background: var(--accent); flex: none; display: inline-block; }

/* 판·버튼 (게임 .panel Button .chip .seg …) */
.panel { background: var(--panel); border: 1px solid var(--border); border-top-color: var(--border-top); border-radius: 16px; padding: 24px; }
.panel-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.panel-head .faint { font-size: 13px; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--raised); flex-wrap: wrap; }
.seg button { height: 40px; padding: 0 18px; border: 0; border-radius: 9px; background: none; color: var(--text-2); font-size: 14px; transition: color .12s, background-color .12s; }
.seg button:hover { color: var(--text); }
.seg button.on { background: var(--control-on); color: var(--text); font-weight: 500; }
.seg--dark { background: var(--bg); }
.seg--dark button { padding: 0 12px; height: 36px; font-size: 13px; }
.seg--sm button { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 8px; }
.seg--sm { padding: 3px; border-radius: 10px; }
.chips, .src-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 32px; padding: 0 14px; border-radius: 16px; font-size: 13px; color: var(--text-2); background: var(--panel-2); border: 1px solid var(--border-2);
  display: inline-flex; align-items: center; transition: color .12s, border-color .12s, background-color .12s; }
button.chip:hover { color: var(--text); background: var(--control-hi); }
.chip.on, .chip--on { color: var(--text); background: var(--accent-soft); border-color: var(--accent-dim); }
.src-chip { height: 26px; padding: 0 11px; border-radius: 7px; border: 0; background: var(--control); color: var(--text-2); font-size: 12px; }
.src-chip:hover { color: var(--text); background: var(--control-hi); }
.src-chip.on { background: var(--control-on); color: var(--text); font-weight: 500; }
.icon-btn { width: 48px; height: 48px; padding: 0; border-radius: 12px; border: 1px solid transparent; background: var(--raised); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:hover { color: var(--text); border-color: var(--accent-dim); }
.icon-btn--sm { width: 36px; height: 36px; border-radius: 10px; }
.seg-pill { height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid transparent; background: var(--raised); display: inline-flex; align-items: center; gap: 9px; font-size: 12px; }
.seg-pill:hover { border-color: var(--accent-dim); }
.seg-pill-key { color: var(--text); opacity: .85; }
.pill { background: var(--control); border: 1px solid var(--border); border-radius: 23px; display: inline-flex; align-items: center; }
.pause-btn { height: 48px; padding: 0 20px; border-radius: 11px; border: 0; background: var(--raised); color: var(--text); font-size: 14px; }
.pause-btn:hover { background: var(--control-hi); }
.mode-start { height: 48px; min-width: 101px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; transition: background-color .12s, transform .08s; }
.mode-start:hover { background: var(--accent-hi); }
.mode-start:active, .home-play:active { transform: scale(.985, 1); }
.mode-start-label { font-size: 16px; font-weight: 700; color: var(--accent-ink); }
.home-play { height: 58px; width: 100%; max-width: 440px; padding: 0 26px 0 32px; border: 0; border-radius: 12px; background: var(--accent); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: space-between; transition: background-color .12s, transform .08s; }
.home-play:hover { background: var(--accent-hi); }
.home-play:disabled { background: var(--control); color: var(--text-2); cursor: default; border: 1px solid var(--border-2); }
.home-play:disabled .home-play-label { color: var(--text-2); }
.home-play-label { font-size: 25px; font-weight: 700; color: var(--accent-ink); }
.kbd { font: 11px/1 "DejaVu Sans Mono", D2Coding, monospace; padding: 3px 7px; border-radius: 5px; background: var(--kbd); border: 1px solid var(--border); color: var(--text-2); }

/* 상단바 */
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; display: flex; align-items: center; height: 64px; padding: 0 40px 0 38px;
  background: var(--topbar); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.topbar-logo { display: inline-flex; transition: transform .15s; transform-origin: left; }
.topbar-logo:hover { text-decoration: none; transform: scale(1.04); }
.topbar-logo:active { transform: scale(.97); }
.topbar-logo .wordmark { transition: color .15s, text-shadow .15s; }
.topbar-logo:hover .wordmark { text-shadow: 0 0 10px rgba(126, 227, 193, .85); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.typing-screen .topbar { display: none; }

/* 메인 */
.home-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; align-items: center; padding-block: 34px 26px; }
.hero-text { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tagline { font-size: 20px; color: var(--text-2); max-width: 30ch; line-height: 1.35; margin-top: 4px; }
.hero-pick { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 6px; }
.pick-row { display: flex; align-items: center; gap: 14px; }
.pick-row .stat-label { width: 52px; flex: none; }
.touch-note { display: none; font-size: 13px; }
.no-keyboard .touch-note { display: block; }
.hero-kb { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.kb-hint { font-size: 12px; text-align: center; }

/* 3D 키보드 = 게임 렌더 한 장 + 키마다 눌린 그림 조각 (kb/keys.json 다각형) */
.kb3d { position: relative; width: 100%; user-select: none; -webkit-user-select: none; touch-action: manipulation; cursor: pointer; }
.kb3d .kb-clips { position: absolute; width: 0; height: 0; }
.kb3d img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.kb3d .kb-keys i { position: absolute; inset: 0; background: var(--down) 0 0 / 100% 100% no-repeat; display: none; pointer-events: none; }
.kb3d .kb-keys i.on { display: block; }

/* 부품 카드 (게임 .part-card · PartArt.Switch) */
.switch-panel { margin-bottom: 20px; }
.part-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 12px; }
.part-card { position: relative; overflow: hidden; height: 128px; padding: 12px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: stretch; text-align: left; transition: border-color .15s, transform .15s; }
.part-card:hover { transform: translateY(-2px); border-color: var(--border-3); }
.part-card.on { border-color: var(--accent); }
.rarity-strip { position: absolute; left: 0; right: 0; top: 0; height: 2px; }
.part-thumb { height: 47px; border-radius: 8px; margin-top: 2px; background: var(--thumb); display: flex; align-items: center; justify-content: center; }
.part-name { font-size: 12px; margin-top: 9px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 11.5px; }
.part-foot .faint { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.part-foot .accent { margin-left: auto; flex: none; }

/* 순위표 (게임 .lb-row) */
.home-boards { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px; padding-bottom: 36px; }
.board-panel .seg { margin-left: auto; }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 1.6px; font-weight: 500; text-transform: uppercase; color: var(--accent-fg); }
.live .dot-accent { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }
.lb { display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }
.lb-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 64px; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent; }
.lb-row .n { color: var(--text-2); font-size: 14px; }
.lb-row .who { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-row .w { font-size: 15px; font-weight: 700; text-align: right; }
.lb-row .a { font-size: 13px; color: var(--text-2); text-align: right; }
.lb-row.top1 .n { color: var(--accent-fg); }
.lb-row.me { height: 52px; border-radius: 12px; background: var(--me); border-color: var(--me-line); }
.lb-empty { padding: 30px 14px; text-align: center; color: var(--text-2); font-size: 14px; }
.lb-note { font-size: 12px; margin-top: 12px; }
.bests { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.best { padding: 14px 16px; border-radius: 12px; background: var(--sunken); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.best b { font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.best b small { font-size: 12px; font-weight: 400; color: var(--text-2); margin-left: 5px; }
.best .none { font-size: 13px; color: var(--text-2); padding-block: 9px; }
.recent-title { margin: 22px 0 8px; }

/* 치기 (게임 Practice.uxml) */
.type-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-top: 28px; }
.type-top > .seg { justify-self: start; }
.type-actions { justify-self: end; display: flex; gap: 10px; align-items: center; }
.mode-badge { height: 34px; padding: 0 16px 0 14px; gap: 8px; }
.mode-badge-text { font-size: 11px; letter-spacing: 1.6px; font-weight: 500; color: var(--accent-fg); }
.type-body { max-width: 1042px; margin: 0 auto; padding-top: 34px; }
.hud { display: flex; align-items: baseline; gap: 34px; }
.hud-item { display: flex; align-items: baseline; gap: 9px; }
.hud-item b { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.hud-item span { font-size: 13px; }
.hud-src { margin-left: auto; font-size: 14px; }
.lines { position: relative; margin-top: 26px; height: 104px; overflow: hidden; font: 30px/48px "DejaVu Sans Mono", D2Coding, monospace; letter-spacing: -.25px; white-space: pre; }
html[lang="ko"] .lines { font-family: D2Coding, "DejaVu Sans Mono", monospace; letter-spacing: 0; }
.line { height: 48px; color: var(--rest); }
.line .ok { color: var(--text); }
.line .no { color: var(--error); text-decoration: underline 2px; text-underline-offset: 6px; }
.line .cmp { color: var(--accent-fg); }
.line .cmp.off { color: var(--error); }
.line .cur { position: relative; }
.line .cur::before { content: ""; position: absolute; left: -1px; top: 6px; width: 2px; height: 36px; background: var(--accent); animation: blink 1.06s steps(1) infinite; }
.typing .line .cur::before { animation: none; }
@keyframes blink { 50% { opacity: 0 } }
.line .br { opacity: .8; }
.type-hint { text-align: center; font-size: 13px; min-height: 18px; margin-top: 4px; }
#type:not([hidden]) { display: flex; flex-direction: column; min-height: calc(100vh - 56px); }
.kb3d--board { max-width: 1180px; margin: auto; flex: none; }
.parts-footer { display: flex; align-items: center; gap: 7px; font-size: 13px; padding-block: 18px 6px; flex-wrap: wrap; }
.parts-footer > .faint:not(:first-of-type) { margin-left: 19px; }
.speaker { width: 30px; height: 30px; margin-right: 12px; padding: 0; border-radius: 8px; border: 0; background: none; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.speaker:hover { color: var(--text); background: var(--hint); }

/* 결과 (게임 Results.uxml) */
.res { display: grid; grid-template-columns: minmax(0, 913fr) minmax(300px, 421fr); gap: 26px; padding-block: 28px 30px; align-items: stretch; }
.res-left { display: flex; flex-direction: column; min-width: 0; }
.res-top { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.res-meta { display: flex; align-items: center; gap: 26px; margin-top: 28px; font-size: 12px; }
.res-meta .chip { height: 24px; border-radius: 12px; padding: 0 10px; font-size: 12px; }
.res-main { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: -4px; }
.res-big { display: flex; align-items: baseline; gap: 10px; margin-left: 7px; }
.res-big b { font-size: 105px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.res-big .h2 { font-size: 22px; font-weight: 700; }
.res-big .faint { font-size: 12px; margin-left: 6px; }
.res-stats { margin-left: auto; display: grid; grid-template-columns: repeat(4, 113px); padding-bottom: 14px; }
.res-stats div { display: flex; flex-direction: column; }
.res-stats span { font-size: 11px; }
.res-stats b { font-size: 27px; font-weight: 700; font-variant-numeric: tabular-nums; }
.graph-panel { margin-top: 16px; padding: 22px 26px; }
.graph-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.graph-head .h2 { font-size: 14px; }
.legend { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-2); }
.legend-line { width: 14px; height: 2px; background: var(--accent-fg); display: inline-block; }
.legend-dot { width: 8px; height: 8px; border-radius: 4px; background: var(--error); display: inline-block; margin-left: 11px; }
#legend-avg { margin-left: 11px; }
.graph-box { margin-top: 14px; height: 220px; }
.graph { width: 100%; height: 100%; display: block; overflow: visible; }
.graph .grid { stroke: var(--grid); stroke-width: 1; }
.graph .axis { fill: var(--text-2); font-size: 12px; font-family: Roboto, Pretendard, sans-serif; }
.graph .area { fill: var(--fill); }
.graph .lineW { fill: none; stroke: var(--accent-fg); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.graph .err { fill: var(--error); }
.graph .tip-glow { fill: var(--accent-fg); opacity: .25; }
.graph .tip { fill: var(--accent-fg); }
.reward-banner { margin-top: 22px; display: grid; grid-template-columns: 38px minmax(0, 1fr) minmax(120px, 220px); gap: 15px; align-items: center; min-height: 68px; padding: 12px 20px;
  border-radius: 14px; background: var(--me); border: 1px solid var(--banner-line); }
.reward-icon { width: 38px; height: 38px; border-radius: 11px; background: var(--accent-soft); color: var(--accent-fg); }
.banner-text { display: flex; flex-direction: column; min-width: 0; }
.banner-tag { font-size: 10px; letter-spacing: 1.2px; font-weight: 500; color: var(--accent-fg); text-transform: uppercase; }
.banner-text b { font-size: 15px; font-weight: 700; margin-top: 1px; }
.banner-text .faint { font-size: 12px; margin-top: 3px; }
.rank-bar { height: 4px; border-radius: 2px; background: var(--control-on); overflow: hidden; }
.rank-bar i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--accent-fg); transition: width .6s ease-out; }
.reward-banner.quiet { background: var(--panel); border-color: var(--border-2); }
.reward-banner.quiet .reward-icon { background: var(--control); color: var(--text-2); }
.reward-banner.quiet .banner-tag { color: var(--text-2); }
.res-right { padding: 24px 22px; display: flex; flex-direction: column; min-width: 0; }
.res-right-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.res-right-head > .faint { font-size: 12px; }
.weak-panel { margin-top: 14px; padding: 14px 16px 16px; border-radius: 12px; background: var(--sunken); border: 1px solid var(--border); }
.weak-panel .h2 { font-size: 13px; }
.weak-keys { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; }
.weak-chip { width: 44px; padding: 6px 0; border-radius: 9px; background: var(--control); display: flex; flex-direction: column; align-items: center; }
.weak-chip b { font-size: 14px; font-weight: 400; }
.weak-chip span { font-size: 11px; color: var(--error); margin-top: 3px; }
.weak-none { font-size: 12px; color: var(--text-2); }

/* 아래 안내 줄 (게임 .hint-bar) + 바닥글 */
.foot { width: 100%; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 10px 32px 12px; font-size: 12px; }
.hint-bar { display: flex; align-items: center; gap: 4px; }
.hint-item { display: inline-flex; align-items: center; height: 26px; padding: 0 9px 0 4px; border-radius: 8px; border: 0; background: none; }
.hint-item--button { height: 28px; padding: 0 12px 0 8px; background: var(--hint); border: 1px solid var(--border); }
.hint-item--button:hover { background: var(--raised); border-color: var(--border-3); }
.hint-item--button:hover .kbd, .hint-item--button:hover .hint-label, .hint-item--button:hover .hint-arrow { color: var(--text); }
.hint-arrow { margin-right: 7px; color: var(--text-2); }
.hint-label { font-size: 12px; margin-left: 8px; color: var(--text-3); }
.hint-item--button .hint-label { font-size: 13px; color: var(--text-2); }
.typing-screen .foot > :not(.hint-bar) { display: none; }

@media (max-width: 1080px) {
  .home-hero, .home-boards, .res { grid-template-columns: minmax(0, 1fr); }
  .res-stats { margin-left: 0; grid-template-columns: repeat(4, minmax(80px, 1fr)); width: 100%; }
  .wordmark-xl { font-size: 92px; letter-spacing: -4.6px; }
}
@media (max-width: 640px) {
  main { padding-inline: 16px; }
  .topbar { padding: 0 16px; }
  .foot { padding-inline: 16px; }
  .wordmark-xl { font-size: 68px; letter-spacing: -3.4px; }
  .tagline { font-size: 17px; }
  .bests { grid-template-columns: minmax(0, 1fr); }
  .hud { gap: 18px; flex-wrap: wrap; }
  .hud-item b { font-size: 26px; }
  .lines { font-size: 20px; line-height: 34px; height: 72px; }
  .line { height: 34px; }
  .line .cur::before { top: 4px; height: 26px; }
  .res-big b { font-size: 78px; }
  .res-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 10px; }
  .reward-banner { grid-template-columns: 38px minmax(0, 1fr); }
  .rank-bar { grid-column: 1 / -1; }
  .type-top { grid-template-columns: 1fr; justify-items: start; gap: 10px; }
  .type-actions { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .live .dot-accent, .line .cur::before { animation: none; }
  .part-card, .rank-bar i, .mode-start, .home-play { transition: none; }
}