@font-face{font-family:"Galmuri11";src:url("/assets/fonts/Galmuri11.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Galmuri11";src:url("/assets/fonts/Galmuri11-Bold.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#0a0a18;
  --bg2:#12122a;
  --panel:#16163a;
  --line:#2b2b5e;
  --text:#e9e9ff;
  --muted:#9a9ac8;
  --pink:#ff3d8b;
  --cyan:#35f0ff;
  --yellow:#ffe14d;
  --green:#5dff7a;
  --orange:#ff9a3d;
  --font:"Galmuri11","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);line-height:1.7;
  background-image:radial-gradient(ellipse at top,#1d1450 0%,transparent 60%),radial-gradient(ellipse at bottom,#0d2a3a 0%,transparent 55%);
  background-attachment:fixed;min-height:100vh}
a{color:var(--cyan)}
img,canvas{display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}

/* 헤더 */
.top{border-bottom:2px solid var(--line);background:rgba(10,10,24,.85);position:sticky;top:0;z-index:20;backdrop-filter:blur(6px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:56px;gap:12px}
.logo{font-weight:700;font-size:20px;letter-spacing:2px;text-decoration:none;color:var(--yellow);text-shadow:0 0 8px rgba(255,225,77,.6),2px 2px 0 var(--pink)}
.logo span{color:var(--cyan);text-shadow:0 0 8px rgba(53,240,255,.6),2px 2px 0 var(--pink)}
.nav{display:flex;gap:14px;font-size:14px}
.nav a{color:var(--text);text-decoration:none}
.nav a:hover{color:var(--yellow)}

/* 로비 */
.hero{text-align:center;padding:40px 0 20px}
.hero h1{font-size:clamp(26px,6vw,44px);margin:0;color:var(--yellow);text-shadow:0 0 14px rgba(255,225,77,.5),3px 3px 0 var(--pink);letter-spacing:2px}
.hero p{color:var(--muted);margin:10px 0 0}
.insert{display:inline-block;margin-top:16px;color:var(--pink);animation:blink 1.1s steps(2,start) infinite;font-weight:700}
@keyframes blink{to{visibility:hidden}}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:20px 0 40px}
.card{display:block;text-decoration:none;color:var(--text);background:var(--panel);border:2px solid var(--line);border-radius:10px;overflow:hidden;transition:transform .12s,border-color .12s}
.card:hover,.card:focus-visible{transform:translateY(-3px);border-color:var(--cyan)}
.card .thumb{height:110px;display:flex;align-items:center;justify-content:center;font-size:44px;background:linear-gradient(135deg,var(--c1),var(--c2));position:relative}
.card .thumb::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px)}
.card .body{padding:10px 12px 12px}
.card h3{margin:0;font-size:16px}
.card p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.5}
.card .champ{margin-top:8px;font-size:12px;color:var(--yellow)}
h2.sec{font-size:20px;margin:30px 0 8px;color:var(--cyan)}

/* 게임 화면 */
.game-head{padding:20px 0 6px}
.game-head h1{margin:0;font-size:clamp(22px,5vw,30px);color:var(--yellow);text-shadow:2px 2px 0 var(--pink)}
.game-head p{margin:4px 0 0;color:var(--muted);font-size:14px}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}
@media (max-width:820px){.game-layout{grid-template-columns:1fr}}
.cabinet{background:#000;border:3px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 0 0 2px #000,0 0 30px rgba(53,240,255,.15)}
.hud{display:flex;justify-content:space-between;font-size:14px;padding:2px 6px 8px;color:var(--muted)}
.hud b{color:var(--text);font-weight:700}
.stage{position:relative;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none}
.stage canvas{width:100%;height:100%;border-radius:6px;background:#05050d}
.stage::after{content:"";pointer-events:none;position:absolute;inset:0;border-radius:6px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
.controls{display:flex;gap:8px;justify-content:center;margin-top:8px;flex-wrap:wrap}
.btn{font-family:var(--font);font-size:15px;font-weight:700;border:2px solid var(--cyan);background:transparent;color:var(--cyan);padding:9px 18px;border-radius:8px;cursor:pointer;touch-action:manipulation}
.btn:hover{background:rgba(53,240,255,.12)}
.btn.primary{border-color:var(--yellow);color:#111;background:var(--yellow)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{border-color:var(--line);color:var(--muted)}
.btn:disabled{opacity:.4;cursor:default}
.pad{display:none;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,52px);gap:6px;justify-content:center;margin-top:10px}
.pad button{font-size:20px;padding:0}
.touch .pad{display:grid}

/* 오버레이 */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:rgba(5,5,13,.82);border-radius:6px;z-index:5;text-align:center;padding:16px}
.overlay[hidden]{display:none}
.overlay .big{font-size:clamp(22px,6vw,34px);font-weight:700;color:var(--yellow);text-shadow:2px 2px 0 var(--pink);letter-spacing:2px}
.overlay .sub{color:var(--muted);font-size:14px}
.overlay .score{font-size:clamp(26px,7vw,40px);color:var(--cyan);font-weight:700}

/* 랭킹 */
.board{background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:12px}
.board h2{margin:0 0 8px;font-size:16px;color:var(--yellow);text-align:center;letter-spacing:1px}
.board ol{list-style:none;margin:0;padding:0;font-size:14px}
.board li{display:grid;grid-template-columns:34px 52px 1fr;gap:6px;padding:4px 6px;border-radius:4px}
.board li:nth-child(1){color:var(--yellow)}
.board li:nth-child(2){color:#dfe3ff}
.board li:nth-child(3){color:var(--orange)}
.board li .sc{text-align:right;font-variant-numeric:tabular-nums}
.board li.me{background:rgba(255,61,139,.25);animation:flash .5s steps(2) 6}
@keyframes flash{50%{background:transparent}}
.board .empty{color:var(--muted);font-size:13px;text-align:center;padding:10px 0}
.board .mybest{margin-top:8px;font-size:13px;color:var(--muted);text-align:center}
.board-mini{font-size:13px}

/* 이니셜 입력 */
.initials{display:flex;gap:10px;justify-content:center}
.slot{display:flex;flex-direction:column;align-items:center;gap:2px}
.slot button{font-family:var(--font);background:none;border:none;color:var(--cyan);font-size:18px;cursor:pointer;padding:2px 10px;touch-action:manipulation}
.slot .ch{width:44px;height:52px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:700;color:var(--yellow);border-bottom:3px solid var(--line)}
.slot.on .ch{border-color:var(--pink);animation:blinkb 1s steps(2) infinite}
@keyframes blinkb{50%{border-color:transparent}}
.msg{font-size:13px;color:var(--pink);min-height:1.2em}

/* 본문 */
.article{max-width:760px;margin:30px auto 10px}
.article h2{font-size:19px;color:var(--cyan);margin:28px 0 8px}
.article h3{font-size:16px;margin:18px 0 4px;color:var(--yellow)}
.article p,.article li{color:#d5d5f2;font-size:15px}
.article kbd{font-family:var(--font);background:var(--panel);border:1px solid var(--line);border-bottom-width:3px;border-radius:4px;padding:0 6px;font-size:13px}
.related{display:flex;gap:8px;flex-wrap:wrap}
.related a{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 10px;text-decoration:none;color:var(--text);font-size:14px}

/* 명예의 전당 */
.hall{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:16px 0 40px}
.hall .board h2 a{color:inherit;text-decoration:none}

.foot{border-top:2px solid var(--line);margin-top:40px;padding:20px 0 40px;font-size:13px;color:var(--muted);text-align:center}
.foot a{color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* 반응속도 */
.rx{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:6px;cursor:pointer;text-align:center;padding:16px;transition:background .05s}
.rx-big{font-size:clamp(30px,9vw,56px);font-weight:700}
.rx-sub{font-size:14px;opacity:.85;margin-top:6px}
.rx.idle{background:#16163a}
.rx.wait{background:#7a1838;color:#ffd5e2}
.rx.go{background:#18a84a;color:#eaffef}
.rx.foul{background:#5a3a00;color:#ffe9b8}
.rx.result,.rx.done{background:#14324a;color:#d9f6ff}
.touch .kbhint{display:none}

/* 보드·카드 게임 공통 */
.stage.dom{aspect-ratio:auto;min-height:420px;background:#0b2a1e;border-radius:6px;padding:10px}
.stage.dom.wood{background:#3a2610}
.stage.dom::after{display:none}
.small{font-size:12px}
.redt{color:#ff5a7a}

/* 원카드 */
#oc{display:flex;flex-direction:column;gap:10px;min-height:520px;color:#e9ffe9}
.oc-top{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.oc-cpu,.oc-me{background:rgba(0,0,0,.25);border:2px solid transparent;border-radius:8px;padding:6px 8px}
.oc-cpu.on,.oc-me.on{border-color:var(--yellow)}
.oc-cpu.out{opacity:.4}
.oc-name{font-size:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.oc-name small{color:#b9d9c6}
.oc-backs{display:flex;margin-top:4px;padding-left:14px;min-height:46px}
.oc-backs .pc{width:30px;height:44px;margin-left:-14px}
.oc-mid{display:flex;align-items:center;justify-content:center;gap:16px;padding:6px 0}
.oc-info{font-size:13px;line-height:1.6}
.oc-info .atk{color:var(--pink);font-weight:700;animation:blink 1s steps(2,start) infinite}
.oc-log{text-align:center;font-size:13px;min-height:2.6em;color:#fff;background:rgba(0,0,0,.25);border-radius:6px;padding:4px 8px}
.oc-hand{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;justify-content:center}
.oc-one{padding:4px 10px;font-size:13px}
.oc-one.hot{border-color:var(--pink);color:#fff;background:var(--pink);animation:blinkb 0.6s steps(2) infinite}
.pc{position:relative;width:52px;height:74px;background:#fdfdf6;color:#151515;border-radius:6px;box-shadow:0 2px 0 rgba(0,0,0,.35);font-family:var(--font);flex:none;user-select:none}
.pc span{position:absolute;left:5px;top:3px;font-size:15px;font-weight:700;line-height:1}
.pc b{position:absolute;left:5px;top:20px;font-size:13px;line-height:1}
.pc i{position:absolute;right:6px;bottom:4px;font-size:26px;font-style:normal;line-height:1}
.pc.red{color:#d8143a}
.pc.joker span{font-size:9px;letter-spacing:-.5px}
.pc.joker b{font-size:30px;left:auto;right:8px;top:auto;bottom:6px}
.pc.back{background:repeating-linear-gradient(45deg,#ff3d8b 0 5px,#c21f63 5px 10px);border:2px solid #fff}
.pc.deck{width:56px;height:80px;cursor:pointer;border:2px solid #fff;font-family:var(--font)}
.pc.deck span{position:static;display:flex;align-items:center;justify-content:center;height:100%;color:#fff;font-size:14px;text-shadow:0 1px 2px #000}
.pc.deck:disabled{cursor:default;opacity:.7}
.pc.pile{width:62px;height:88px}
.pc.ok{cursor:pointer;transform:translateY(-8px);box-shadow:0 0 0 3px var(--yellow),0 4px 0 rgba(0,0,0,.35)}
.pc.no{opacity:.55}
.oc-choose{position:absolute;inset:0;background:rgba(0,0,0,.75);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:6px;z-index:4}
.oc-choose .btn{font-size:24px;margin:0 4px;min-width:56px}
@media (max-width:420px){.pc{width:44px;height:64px}.pc i{font-size:20px}}

/* 윷놀이 */
#yut{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;min-height:360px}
@media (max-width:700px){#yut{grid-template-columns:1fr}}
.yut-board{background:#f6e3b8;border-radius:10px;padding:4px}
.yut-board svg{width:100%;height:auto;display:block}
.yp.can{cursor:pointer}
.yut-side{display:flex;flex-direction:column;gap:8px;color:#fff}
.yut-row{background:rgba(0,0,0,.3);border-radius:6px;padding:6px 10px;font-size:14px;display:flex;justify-content:space-between;gap:8px;border:2px solid transparent}
.yut-row.on{border-color:var(--yellow)}
.yut-row.cpu span:nth-child(1){color:var(--pink)}
.yut-row.me span:nth-child(1){color:var(--cyan)}
.yut-sticks{display:flex;gap:10px;justify-content:center;min-height:70px;align-items:center}
.stick{width:16px;height:66px;border-radius:8px;background:#c08a3e;border:2px solid #6a4410}
.stick.flat{background:#f4dca8}
.stick.flat::after{content:"✕";display:block;text-align:center;color:#6a4410;font-size:10px;margin-top:4px}
.stick.mark{background:#f4dca8;box-shadow:0 0 0 3px var(--pink)}
.yut-res{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:42px}

/* 고스톱 */
#gs{display:flex;flex-direction:column;gap:8px;color:#eaffea;min-height:560px}
.gs-row{background:rgba(0,0,0,.22);border:2px solid transparent;border-radius:8px;padding:6px 8px}
.gs-row.on{border-color:var(--yellow)}
.gs-name{font-size:14px;margin-bottom:4px}
.gs-name small{color:#b9d9c6;margin-left:6px}
.gs-cap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;font-size:11px}
.gs-cap>div{display:flex;flex-wrap:wrap;gap:1px;align-items:flex-start;min-height:30px;background:rgba(0,0,0,.18);border-radius:4px;padding:2px}
.gs-cap b{width:100%;font-size:11px;color:#cfe;font-weight:400}
.gs-floor{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;min-height:96px;padding:6px 0}
.gs-stack{display:flex}
.gs-stack .hw+.hw{margin-left:-26px}
.gs-deck{display:flex;flex-direction:column;align-items:center;font-size:12px}
.gs-hand{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:6px}
.hw{position:relative;width:46px;height:70px;border-radius:5px;background:#fff6e6;border:2px solid #b0102a;color:#3a0a12;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:2px 0;font-family:var(--font);flex:none;box-shadow:0 2px 0 rgba(0,0,0,.35);user-select:none}
.hw .mo{font-size:10px;line-height:1}
.hw .em{font-size:22px;line-height:1}
.hw .tg{font-size:9px;line-height:1.2;padding:1px 3px;border-radius:3px;background:#eee;white-space:nowrap}
.hw .t-gwang,.hw .t-bigwang{background:#ffe14d;color:#5a3a00;font-weight:700}
.hw .t-hong{background:#ff3d5a;color:#fff}
.hw .t-cheong{background:#2f6bff;color:#fff}
.hw .t-cho{background:#2a9a4a;color:#fff}
.hw .t-tti{background:#c88;color:#fff}
.hw .t-bird,.hw .t-yeol{background:#ff9a3d;color:#3a1a00}
.hw .t-ssang{background:#6a3aa0;color:#fff}
.hw.back{background:repeating-linear-gradient(45deg,#b0102a 0 6px,#8a0a20 6px 12px);border-color:#fff}
.hw.sm{width:22px;height:30px;border-width:1px;padding:0}
.hw.sm .em{font-size:11px}.hw.sm .mo{font-size:8px}.hw.sm .tg{display:none}
.hw.ok{cursor:pointer;transform:translateY(-8px);box-shadow:0 0 0 3px var(--yellow),0 4px 0 rgba(0,0,0,.35)}
.hw.free{cursor:pointer}
.hw.pick{cursor:pointer;box-shadow:0 0 0 3px var(--pink);z-index:2}
.hw.m3,.hw.m6,.hw.m10{background:#fff0f2}
@media (max-width:420px){.hw{width:40px;height:62px}.hw .em{font-size:18px}.gs-stack .hw+.hw{margin-left:-22px}}

/* 뽑기 도구 */
.tool{background:var(--panel);border:2px solid var(--line);border-radius:12px;padding:14px;max-width:820px;margin:0 auto}
.pk-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0}
.pk-row label{min-width:130px;color:var(--muted);font-size:14px}
.pk-row small{color:var(--muted);font-size:12px}
.pk-label{color:var(--muted);font-size:14px;margin:12px 0 6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pk-in{font-family:var(--font);font-size:15px;background:#0a0a18;color:var(--text);border:2px solid var(--line);border-radius:6px;padding:8px;min-width:0;width:100%}
.pk-in:focus{outline:none;border-color:var(--cyan)}
.pk-num{width:90px}
.pk-area{resize:vertical}
.pk-grid{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:6px}
.pk-grid.names{gap:0}
.pk-step{display:flex;align-items:center;gap:10px}
.pk-step .btn{padding:4px 14px}
.pk-seg{display:flex;gap:6px}
.pk-check{display:flex;gap:8px;align-items:center;margin:12px 0;font-size:14px;color:var(--muted)}
.btn.sm{padding:3px 8px;font-size:12px}
.pk-tag{font-family:var(--font);background:none;border:none;border-bottom:3px solid var(--c);color:var(--text);padding:6px 2px;font-size:13px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-res{text-align:center;font-size:13px;padding:6px 2px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-top:3px solid transparent}
.pk-res.hit{color:var(--yellow);border-top-color:var(--c);font-weight:700}
.pk-ladder canvas,.pk-race canvas{width:100%;display:block;border-radius:6px;background:#0a0a18}
.pk-live{text-align:center;margin:8px 0;font-size:14px;min-height:1.6em}
.pk-out{margin-top:10px}
.pk-out h3{color:var(--yellow);margin:8px 0}
.pk-rank{font-size:17px;padding:4px 0}
.pk-rank.r0{font-size:22px;color:var(--yellow)}
.pk-rank small{color:var(--muted);font-size:13px}
.pk-out details{margin:8px 0;color:var(--muted);font-size:14px}
.pk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:10px;margin:12px 0}
.pk-card{font-family:var(--font);background:none;border:none;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font-size:13px}
.pk-card .pc{width:58px;height:82px}
.pk-card.open .pc{animation:flip .35s ease-out}
@keyframes flip{from{transform:rotateY(90deg)}to{transform:none}}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:var(--yellow);color:#111;padding:10px 16px;border-radius:8px;font-size:14px;transition:transform .2s;z-index:50}
.toast.on{transform:translateX(-50%) translateY(0)}
.pk-lad{margin:0 auto}
.pk-race{max-width:720px;margin:0 auto}
.td-panel{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.td-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;align-items:center;font-size:14px}
.td-row .btn{padding:7px 12px;font-size:14px}

/* 타자 연습 */
#typing{display:flex;flex-direction:column;gap:12px;padding:6px;min-height:360px;color:var(--text)}
.ty-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.ty-stats div{background:rgba(0,0,0,.3);border-radius:8px;padding:6px}
.ty-stats small{display:block;color:var(--muted);font-size:12px}
.ty-stats b{font-size:24px;color:var(--yellow)}
.ty-target{font-size:clamp(18px,4.6vw,26px);line-height:1.6;background:#0a0a18;border-radius:8px;padding:14px;min-height:3.6em;letter-spacing:.5px;font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",var(--font)}
.ty-target span.ok{color:var(--green)}
.ty-target span.no{color:var(--pink);text-decoration:underline}
.ty-target span.comp{color:var(--yellow)}
.ty-target span.cur{border-bottom:3px solid var(--cyan)}
.ty-next{color:var(--muted);font-size:14px;min-height:1.4em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ty-input{font-size:20px;padding:12px;font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",var(--font)}

/* 공지·가이드 */
.news{display:flex;flex-direction:column;gap:6px;max-width:760px;margin:0 auto 10px}
.news a{display:flex;align-items:center;gap:8px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 12px;color:var(--text);text-decoration:none;font-size:14px}
.news small,.nlist small{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
.tag{display:inline-block;font-size:11px;padding:2px 7px;border-radius:4px;background:var(--pink);color:#fff;white-space:nowrap}
.tag.up{background:var(--cyan);color:#111}
.ntabs{display:flex;gap:6px;margin:10px 0}
.nlist{list-style:none;padding:0;margin:0}
.nlist li a{display:flex;align-items:center;gap:10px;padding:12px 4px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.nlist li[hidden]{display:none}
.muted{color:var(--muted);font-size:13px}
.glist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:10px 0 30px}
.glist a{display:flex;flex-direction:column;gap:6px;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:14px;text-decoration:none;color:var(--text)}
.glist a:hover{border-color:var(--cyan)}
.glist b{color:var(--yellow);font-size:15px;line-height:1.5}
.glist span{color:var(--muted);font-size:13px;line-height:1.6}
.cta{margin:24px 0;display:flex;gap:8px;flex-wrap:wrap}
.cta .btn{text-decoration:none}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.card .thumb{height:78px;font-size:34px}.card p{font-size:12px}.card h3{font-size:15px}}

/* 타이밍 스톱 */
#tm{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px 6px;min-height:420px;text-align:center}
.tm-round{color:var(--muted);font-size:14px}
.tm-mission{font-size:20px}
.tm-mission b{font-size:44px;color:var(--yellow);margin:0 4px}
.tm-clock{font-size:clamp(48px,14vw,84px);font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums;min-height:1.2em;letter-spacing:2px}
.tm-clock.hid{color:#3a3a7a}
.tm-msg{font-size:14px;color:var(--text);min-height:2.6em}
.tm-msg b{color:var(--yellow)}
.tm-btn{font-family:var(--font);font-size:26px;font-weight:700;width:min(260px,80%);height:96px;border-radius:16px;border:3px solid var(--yellow);background:var(--yellow);color:#111;cursor:pointer;touch-action:manipulation}
.tm-btn.stop{background:var(--pink);border-color:var(--pink);color:#fff}
.tm-hist{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:12px;color:var(--muted)}
.tm-hist span{background:rgba(0,0,0,.3);border-radius:4px;padding:2px 6px}

/* 기간 탭·기록 이름 */
.ptabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 8px;justify-content:center}
.ptabs button{font-family:var(--font);font-size:12px;background:transparent;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 9px;cursor:pointer}
.ptabs button.on{background:var(--yellow);color:#111;border-color:var(--yellow);font-weight:700}
.ptabs.big{margin:0 auto 6px;max-width:760px}
.ptabs.big button{font-size:14px;padding:6px 14px}
.board li{grid-template-columns:30px minmax(0,1fr) auto}
.board li .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:1px}
.name-in{font-family:var(--font);font-size:30px;font-weight:700;letter-spacing:6px;text-align:center;text-transform:uppercase;width:min(260px,80%);background:#0a0a18;color:var(--yellow);border:3px solid var(--pink);border-radius:10px;padding:8px 6px}
.name-in:focus{outline:none;border-color:var(--yellow)}

/* 의견함·관리 */
.fb-link{margin-top:22px;font-size:14px}
.fb-form{display:flex;flex-direction:column;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;margin:16px 0}
.fb-kinds{display:flex;flex-wrap:wrap;gap:8px}
.fb-kinds label{border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:pointer;font-size:14px}
.fb-kinds label:has(input:checked){border-color:var(--yellow);color:var(--yellow)}
.fb-lab{display:flex;flex-direction:column;gap:4px;font-size:14px}
.fb-in{width:100%;font-family:"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;font-size:16px;background:var(--bg2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.fb-in:focus{outline:2px solid var(--cyan);outline-offset:1px}
textarea.fb-in{resize:vertical;line-height:1.6}
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fb-form .btn[type=submit]{align-self:flex-start}
.fb-msg{margin:0;min-height:1.4em;color:var(--yellow);font-size:14px}
.fb-check{display:flex;gap:8px;flex-wrap:wrap}
.fb-check .fb-in{flex:1 1 120px;width:auto}
.fb-post{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0;display:flex;flex-direction:column;gap:8px}
.fb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px}
.fb-meta small{margin-left:auto;color:var(--muted);font-size:12px}
.fb-body{font-family:"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;font-size:15px;white-space:normal;overflow-wrap:anywhere}
.fb-reply{border-left:3px solid var(--cyan);background:rgba(53,240,255,.06);padding:8px 10px;border-radius:0 8px 8px 0;font-size:14px}
.fb-reply small{color:var(--muted);margin-left:8px}
.fb-reply div{font-family:"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;margin-top:4px;overflow-wrap:anywhere}
.fb-post .btn.sm{align-self:flex-start}
.fb-st{font-size:12px;padding:1px 7px;border-radius:4px;border:1px solid var(--muted);color:var(--muted)}
.fb-st.st-checking{border-color:var(--yellow);color:var(--yellow)}
.fb-st.st-done{border-color:var(--green);color:var(--green)}
.fb-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px}
.admin-list li{display:flex;align-items:center;gap:8px;padding:10px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.admin-list li small{margin-left:auto;color:var(--muted);font-size:12px}
.nt-prev{background:var(--bg2);border:1px dashed var(--line);border-radius:8px;padding:4px 14px;min-height:40px}

/* 일본어: 굵은 픽셀 글꼴에 일본어 글자가 없어 보통 굵기 글꼴로 채움 */
@font-face{font-family:"Galmuri11";src:url("/assets/fonts/Galmuri11.woff2") format("woff2");font-weight:700;font-display:swap;unicode-range:U+3000-30FF,U+3400-4DBF,U+4E00-9FFF,U+F900-FAFF,U+FF00-FFEF}
.nav a.lang{border:1px solid var(--line);border-radius:6px;padding:0 6px;color:var(--muted);font-size:13px}
@media (max-width:520px){.nav{gap:9px;font-size:13px}}

/* 자리 연습 */
.kp-stages{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0}
.kp-show{display:flex;align-items:center;justify-content:center;gap:18px;margin:10px 0 4px}
.kp-cur{min-width:84px;height:84px;padding:0 12px;display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;background:#0a0a18;border:3px solid var(--cyan);border-radius:12px;color:var(--yellow);font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",var(--font)}
.kp-cur.miss{border-color:var(--pink);animation:kpShake .2s}
@keyframes kpShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.kp-next{color:var(--muted);font-size:22px;letter-spacing:4px;font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",var(--font);white-space:pre}
.kp-finger{text-align:center;color:var(--cyan);font-size:14px;min-height:1.5em;margin-bottom:8px}
.kp-kb{display:flex;flex-direction:column;gap:4px;align-items:center;user-select:none}
.kp-row{display:flex;gap:4px}
.kp-row.r1{margin-left:22px}.kp-row.r2{margin-left:40px}.kp-row.r3{margin-left:62px}
.kp-key{position:relative;width:clamp(20px,6.4vw,38px);height:clamp(30px,8vw,40px);border-radius:6px;border:1px solid #3a3a6e;background:#14143a;color:#c9c9f0;font-family:"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",var(--font);font-size:clamp(11px,3.4vw,15px);padding:10px 0 0;cursor:pointer;touch-action:manipulation}
.kp-key small{position:absolute;left:3px;top:1px;font-size:9px;color:#7a7aa8}
.kp-key.wide{width:clamp(48px,14vw,80px);padding:0}
.kp-space{width:clamp(80px,30vw,200px)}
.kp-key.f-L5,.kp-key.f-R5{border-bottom:3px solid #b07aff}.kp-key.f-L4,.kp-key.f-R4{border-bottom:3px solid #35f0ff}
.kp-key.f-L3,.kp-key.f-R3{border-bottom:3px solid #5dff7a}.kp-key.f-L2,.kp-key.f-R2{border-bottom:3px solid #ffe14d}
.kp-key.on{background:var(--yellow);color:#111;box-shadow:0 0 10px rgba(255,225,77,.7)}
.kp-key.on small{color:#555}
.kp-key.hit{background:var(--green);color:#111}
.kp-key.miss{background:var(--pink);color:#fff}
.kp-key.lock{outline:2px solid var(--cyan)}
.kp-note{color:var(--muted);font-size:12px;text-align:center;margin:8px 0 0}
#kp{padding:12px}
/* 단어 소나기 입력 칸 */
.wr-box{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.wr-box .ty-lang{justify-content:center}
.kp-ctrl{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.kp-ctrl .ty-lang{justify-content:center}
.kp-title{text-align:center;color:var(--yellow);font-weight:700;margin-bottom:6px}
.ty-target.code,.ty-input.code{font-family:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;font-size:clamp(14px,3.6vw,19px);letter-spacing:0}

/* 글 속 표 (기록 기준표 등) */
.article table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:14px}
.article th,.article td{border:1px solid var(--line);padding:7px 9px;text-align:left;color:#d5d5f2}
.article th{background:var(--panel);color:var(--yellow);font-weight:700}
.article tr:nth-child(even) td{background:rgba(255,255,255,.02)}
.article ol{padding-left:22px}
.article ol li{color:#d5d5f2;font-size:15px}
.nav a{white-space:nowrap}
@media (max-width:440px){.nav a.lang{display:none}.nav{gap:10px;font-size:13px}.logo{font-size:17px}}