/* 채운타자 화면 스타일 — 사용자 본인 레포 AcousticSync(음악 시간)의 '코지 농장' 화풍을 따른다(2026-10-04 사용자 요청).
 * 원천: AcousticSync `src/style.css`·`docs/ART-DIRECTION-COZY.md`. AF 원색 9종, 나무 테 크림판·나무판·칸·원형 배지·밧줄 간판·
 * 나무 게이지 그림(9분할), 3px 테두리 + `0 4px 0` 하드 그림자 알약 버튼, 스프링 이징, Jua 글씨 + Galmuri 픽셀 숫자, 종이 질감.
 * 자주 바뀌는 판(타자·순위·전황)에는 filter 그림자를 쓰지 않는다 — 글자 하나 바뀔 때마다 판 전체를 다시 그리게 된다. */
@font-face{font-family:Jua;src:url('/fonts/Jua-Regular.ttf') format('truetype');font-display:swap}
@font-face{font-family:Galmuri11;src:url('/fonts/Galmuri11-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --grass:#7bc47f;--grass-deep:#5ba46a;--sky:#aedcf0;--cream:#fff8e7;--wood:#8b6f47;--wood-deep:#6e5638;--coral:#ff9e7d;--amber:#ffb86b;--ink:#4a3a28;
  --line:color-mix(in srgb,var(--wood) 26%,var(--cream));
  --line-strong:color-mix(in srgb,color-mix(in srgb,var(--wood) 42%,var(--cream)) 30%,var(--wood)); /* 컨트롤 경계: 크림 위 3:1 */
  --paper:color-mix(in srgb,var(--cream) 94%,var(--amber));
  --track:color-mix(in srgb,var(--wood) 16%,var(--cream));
  --dim:color-mix(in srgb,var(--wood) 58%,var(--ink));
  --faint:color-mix(in srgb,var(--wood) 78%,var(--ink));
  --green:#407d45;--gold:#96601f;--red:#b3462a; /* 크림 위 글자용으로 누른 잔디·호박·산호 */
  --shadow:color-mix(in srgb,var(--ink) 18%,transparent);
  --btn-cream:var(--line-strong);--btn-leaf:color-mix(in srgb,var(--grass-deep) 75%,var(--ink));
  --spring:cubic-bezier(.34,1.56,.64,1);
  --pixel:'Galmuri11','Jua',sans-serif; /* 픽셀 숫자는 11px의 정수배일 때 또렷하다 */
  --outline:1px 0 0 var(--ink),-1px 0 0 var(--ink),0 1px 0 var(--ink),0 -1px 0 var(--ink),0 2px 0 var(--ink); /* 나무 위 크림 글씨 */
  --panel:url('/assets/ui/panel.webp') 48 44 fill;
  --board:url('/assets/ui/board.webp') 56 fill;
}
*{box-sizing:border-box}
html{color-scheme:light}
body{margin:0;color:var(--ink);background:linear-gradient(var(--sky),#d9eff8);font:14px 'Jua','Malgun Gothic',sans-serif;font-synthesis:none;word-break:keep-all}
/* 페이지 바탕 = 하늘·들판 풍경, 맨 위 = 종이 질감(미리 구운 정적 그림이라 합성 비용이 거의 없다) */
body:before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('/assets/ui/backdrop.webp') center bottom/cover no-repeat}
body:after{content:'';position:fixed;inset:0;z-index:25;pointer-events:none;background:url('/assets/ui/grain.webp');opacity:.5}
@media(orientation:portrait){body:before{background-image:url('/assets/ui/backdrop-portrait.webp')}}
button,input{font:inherit;color:inherit}
button,a,input{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;border:0;background:none;transition:transform .25s var(--spring),box-shadow .2s,border-color .2s,background .2s}
button:focus-visible,a:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
button:disabled{cursor:default;opacity:.55}
button:active:not(:disabled){transform:translateY(2px)}
svg{width:24px;height:24px}
.symbols{position:absolute;width:0;height:0}
h1,h2,p{margin:0}
h1,h2{font-size:18px;font-weight:400}
strong,b{font-weight:400}
.sr-only{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.eyebrow{font:11px var(--pixel);color:var(--dim)}

/* 판 = 나무 테 크림판(panel.webp 9분할). 칸 = 크림 바탕 + 두꺼운 나무 선. 버튼 = 크림 알약 + 하드 그림자. */
.panel{border:16px solid transparent;border-image:var(--panel)/16px 15px round;border-radius:16px;box-shadow:0 8px 14px -6px var(--shadow)}
.wood-btn,.header nav button,.study-foot button,.choices button,.troop{background:var(--cream);border:3px solid var(--line-strong);border-radius:999px;box-shadow:0 4px 0 var(--btn-cream)}
.wood-btn:hover:not(:disabled),.header nav button:hover:not(:disabled),.study-foot button:hover:not(:disabled),.choices button:hover:not(:disabled),.troop:hover:not(:disabled){border-color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,var(--cream));box-shadow:0 6px 0 var(--btn-cream);transform:translateY(-2px)}
.wood-btn:active:not(:disabled),.header nav button:active:not(:disabled),.study-foot button:active:not(:disabled),.choices button:active:not(:disabled),.troop:active:not(:disabled){box-shadow:0 1px 0 var(--btn-cream);transform:translateY(2px)}

/* 한 화면: 상단바 한 줄 + [사이드바 | 지도 위·타자 아래]. 세로 스크롤 없이 지도가 남는 높이를 모두 쓴다. */
.app{max-width:1560px;margin:auto;padding:0 20px 14px;height:100vh;height:100dvh;min-height:620px;display:grid;grid-template-rows:auto minmax(0,1fr)}
.header{height:74px;display:flex;align-items:center;gap:16px;min-width:0}
/* 제목 = 화면 위 가장자리에 밧줄로 매달린 나무 간판(sign.webp 640×404, 위 1/4은 밧줄) */
.brand{align-self:flex-start;display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);flex:none}
.brand-sign{width:114px;aspect-ratio:640/404;display:grid;place-items:center;padding:18px 8px 0;background:url('/assets/ui/sign.webp') center/100% 100% no-repeat;font-size:21px;line-height:1;white-space:nowrap;text-shadow:0 2px 0 color-mix(in srgb,var(--cream) 45%,transparent)}
.brand small{font-size:11px;line-height:1.35;color:var(--dim);margin-top:14px;text-shadow:0 1px 0 var(--cream)}
.header nav{display:flex;gap:8px;flex:none}
.header nav button{padding:7px 16px;color:var(--dim)}
.header nav .nav-active,.header nav .nav-active:hover:not(:disabled){background:var(--grass);border-color:var(--grass-deep);color:var(--ink);box-shadow:0 4px 0 var(--btn-leaf)}
.slogan-box{margin-left:auto;display:grid;justify-items:center;gap:3px;min-width:0}
.slogan{font-size:17px;color:var(--ink);white-space:nowrap;text-shadow:0 1px 0 var(--cream),0 0 8px var(--cream)}
.header-meta{margin-left:auto;display:flex;gap:8px;align-items:center;min-width:0}
.chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:11px;white-space:nowrap;background:var(--cream);border:2.5px solid var(--line-strong);color:var(--dim)}
.chip .sun{color:var(--gold);font-size:15px;line-height:1}
.preview-chip{border:9px solid transparent;border-image:var(--board)/9px round;border-radius:10px;background:none;padding:0 4px;font:11px var(--pixel);color:var(--cream);text-shadow:var(--outline)}
.profile{display:flex;align-items:center;gap:9px;flex:none}
.avatar{display:grid;place-items:center;width:42px;height:42px;background:url('/assets/ui/badge.webp') center/100% 100% no-repeat;border-radius:50%;box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 22%,transparent);font-size:18px}
.profile strong{font-size:14px;text-shadow:0 1px 0 var(--cream)}
.profile small{display:block;color:var(--dim);font-size:10px;margin-top:3px}
.game-grid{display:grid;grid-template-columns:268px minmax(0,1fr);gap:12px;min-height:0}
.sidebar{display:flex;flex-direction:column;gap:12px;min-height:0}
.stage{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:12px;min-height:0;min-width:0}

/* 나의 학교 · 순위 */
.school-panel{padding:0 2px;display:flex;flex-direction:column;flex:1;min-height:0}
.panel-caption{font-size:12px;display:flex;justify-content:space-between;align-items:center;color:var(--dim)}
.tag{font:11px var(--pixel);background:color-mix(in srgb,var(--sky) 45%,var(--cream));color:#2f6a85;padding:3px 7px;border-radius:999px;border:2px solid color-mix(in srgb,var(--sky) 60%,var(--wood))}
.school-picker{display:flex;align-items:center;gap:8px;padding:8px 0;text-align:left;width:100%;font-size:17px}
.school-picker>span:last-child{margin-left:auto;color:var(--faint)}
.school-picker:hover #school-name{text-decoration:underline wavy var(--coral) 1.5px;text-underline-offset:5px}
.school-crest{width:28px;height:32px;display:grid;place-items:center;color:#7cb9d5}
.school-crest svg{width:25px;height:25px}
.school-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:center}
.school-stats>div{background:var(--paper);border:2.5px solid var(--line-strong);border-radius:14px;padding:7px 0 6px;box-shadow:inset 0 -3px 0 var(--track)}
.school-stats strong{font:22px var(--pixel);color:var(--green)}
.school-stats strong small{font:11px var(--pixel);margin-left:3px;color:var(--dim)}
.school-stats div>span{display:block;font-size:10px;margin-top:2px;color:var(--dim)}
/* 내실·투표 열기 버튼 — 열린 창의 버튼은 잔디(AF의 "지금 이거") */
.school-actions{display:flex;gap:8px;margin:10px 0 9px}
.school-actions button{flex:1;padding:5px 0;font-size:14px;background:var(--cream);border:3px solid var(--line-strong);border-radius:999px;box-shadow:0 4px 0 var(--btn-cream)}
.school-actions button:hover{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 12%,var(--cream));box-shadow:0 6px 0 var(--btn-cream);transform:translateY(-2px)}
.school-actions button[aria-expanded=true]{background:var(--grass);border-color:var(--grass-deep);box-shadow:0 4px 0 var(--btn-leaf)}
/* 내실·투표 창의 탭 = 나무판 띠 위 크림 글씨, 고른 칸 = 크림 칸 + 산호 테 */
.views{display:flex;gap:2px;margin:10px 0 8px;border:10px solid transparent;border-image:var(--board)/10px round;border-radius:12px}
.views button{flex:1;padding:3px 0;border-radius:8px;font-size:14px;color:var(--cream);text-shadow:var(--outline)}
.views button:hover:not([aria-selected=true]){color:var(--amber)}
.views button[aria-selected=true]{background:var(--cream);color:var(--ink);text-shadow:none;box-shadow:inset 0 0 0 2px var(--coral)}
.pane{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.pane[hidden]{display:none}
.pane-note{font-size:10px;color:var(--dim);line-height:1.5;margin:2px 0 8px}
.pane-note b{color:var(--green);font:11px var(--pixel)}
.study,.ballot{background:var(--paper);border:2.5px solid var(--line);border-radius:14px;padding:8px 9px;margin-bottom:8px}
.study-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:13px}
.study-head b{font:11px var(--pixel);color:var(--green)}
.study-head small{font-size:9px;color:var(--faint)}
.study>small{display:block;font-size:10px;color:var(--dim);margin-top:3px}
/* 게이지 = 나무 테 + 어두운 홈(gauge.webp). 채움은 어두운 홈 위라 원색 잔디. */
.bar{height:16px;margin:6px 0 5px;border-style:solid;border-color:transparent;border-width:5px 10px;border-image:url('/assets/ui/gauge.webp') 24 42 22 fill/5px 10px stretch;overflow:hidden}
.bar i{display:block;height:100%;background:var(--grass);border-radius:2px} /* 차오르는 연출은 app.js가 늘 때만 한다(같은 요소를 고쳐 쓰므로 CSS 전환을 두면 단계가 오를 때 거꾸로 빠진다) */
.study-foot{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--dim)}
.study-foot span{margin-right:auto;font:11px var(--pixel)}
.study-foot button{padding:1px 9px;border-width:2.5px;box-shadow:0 3px 0 var(--btn-cream);font:11px var(--pixel);color:var(--green)}
.study-foot button:disabled{opacity:.45;box-shadow:none}
.choices{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.choices button{flex:1 1 30%;min-width:0;padding:3px 4px;border-width:2.5px;border-radius:12px;box-shadow:0 3px 0 var(--btn-cream);font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.choices button b{display:block;font:11px var(--pixel);color:var(--green)}
.choices button[aria-pressed=true],.choices button[aria-pressed=true]:hover:not(:disabled){background:var(--grass);border-color:var(--grass-deep);color:var(--ink);box-shadow:0 3px 0 var(--btn-leaf)}
.choices button[aria-pressed=true] b{color:var(--ink)}
.choices button.lead{outline:2.5px solid var(--amber);outline-offset:-1px}
.choices button:focus-visible,.choices button.lead:focus-visible{outline:3px solid var(--coral);outline-offset:2px} /* 앞서는 선택지도 키보드 초점이 보이게 */
.choices button:disabled{cursor:default;box-shadow:none}
.choices button[aria-disabled=true],.choices button[aria-disabled=true]:hover,.choices button[aria-disabled=true]:active{opacity:.55;cursor:default;box-shadow:none;transform:none;border-color:var(--line-strong)} /* 투표할 수 없음: 눌리면 이유 알림 */
.ballot .pane-note{margin:5px 0 0}
.vote-msg{margin:-4px 0 8px;padding:4px 8px;border-radius:8px;background:color-mix(in srgb,var(--grass) 18%,var(--cream));font-size:11px;color:var(--ink);line-height:1.45}
.vote-msg:empty{display:none}
.ally-mark{display:inline-grid;place-items:center;width:1.45em;height:1.45em;margin-right:3px;border-radius:50%;background:#f2cc4a;border:1.5px solid #8a6408;color:var(--ink);font-size:.8em;line-height:1;vertical-align:middle} /* 동맹 학교 이름 앞 원문자 '동'(2026-10-05 사용자 요청) */
.ally-mark[hidden]{display:none}
/* 동맹 투표: 참여 학교마다 동맹·적대 */
.pact-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:5px;max-height:260px;overflow:auto}
.pact-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 6px;padding:4px 6px;border:2px solid var(--line);border-radius:10px;background:var(--cream)}
.pact-list li.ally{border-color:#d9a520;background:#fff4cc}
.pact-name{font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pact-now{font-size:10px;padding:0 6px;border-radius:999px;border:1.5px solid}
.pact-now.ally{color:#8a6408;border-color:#d9a520;background:#ffe9a6}
.pact-now.foe{color:#a2453a;border-color:#e8735f;background:#ffe3dc}
.pact-list small{grid-column:1;font-size:10px;color:var(--dim)}
.pact-list .choices{grid-column:2;grid-row:1 / span 2;margin:0;flex-wrap:nowrap}
.pact-list .choices button{flex:0 0 auto;padding:2px 9px}
#theme-mark{margin-right:4px}
.troop .focus-badge{position:absolute;top:-7px;right:10px;padding:0 6px;border-radius:999px;background:var(--amber);border:2px solid var(--ink);color:var(--ink);font-size:9px}
.troop{position:relative}
.tabs{display:flex;padding:3px;border-radius:999px;background:var(--track);border:2.5px solid var(--line-strong);gap:3px}
.tabs button{flex:1;color:var(--dim);font-size:12px;padding:4px 0;border-radius:999px}
.tabs button[aria-pressed=true]{background:var(--grass);color:var(--ink);box-shadow:0 2px 0 var(--btn-leaf)}
/* 순위 탭(2026-10-05 사용자 요청): 학교 순위 전체(목록만 스크롤) + 아래에 우리 학교 기여도 */
.rank-pane{overflow:hidden}
.rank-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:0 4px}
.rank-head strong{font-size:13px}
.rank-head small{font-size:10px;color:var(--faint)}
.rank-head b{font:12px var(--pixel);color:var(--green)}
.rank-list{list-style:none;margin:4px 0 0;padding:0 2px 0 0;flex:1;min-height:60px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.rank-list li{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:12px;font-size:12px}
.contrib{flex:none;margin-top:8px;padding:7px 6px 6px;border:2.5px solid var(--line-strong);border-radius:14px;background:var(--paper)}
.contrib-list{list-style:none;margin:4px 0 0;padding:0}
.contrib-list li{display:flex;align-items:center;gap:8px;padding:3px 6px;border-radius:10px;font-size:11px}
.contrib-list li.me{background:color-mix(in srgb,var(--grass) 28%,var(--cream));box-shadow:inset 0 0 0 2px var(--grass-deep)}
.contrib-list li.gap{justify-content:center;padding:0;color:var(--faint);font-size:10px}
.contrib-list span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.contrib-list b{margin-left:auto;font:11px var(--pixel);color:var(--green)}
.contrib-note{display:block;margin-top:4px;font-size:9px;color:var(--faint);line-height:1.4}
.rank-list li+li{border-top:1.5px dashed var(--line)}
.rank-list .mine{background:color-mix(in srgb,var(--grass) 28%,var(--cream));box-shadow:inset 0 0 0 2.5px var(--grass-deep);border-top-color:transparent}
.rank-list .mine+li{border-top-color:transparent}
.rank-number{width:18px;text-align:center;color:var(--faint);font:11px var(--pixel)}
.rank-list li:first-child .rank-number{color:var(--gold)}
.rank-list li>b{margin-left:auto;font:11px var(--pixel)}
.rank-list small{font-size:9px;color:var(--faint)}
.rank-school{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-list .online{flex:none;color:var(--green);white-space:nowrap;font:11px var(--pixel)}
.rank-list .online:before{content:'';display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;background:var(--grass-deep);vertical-align:1px}

/* 응원단: 사이드바 아래칸. 부대 카드는 나무판(board.webp) 위 크림 알약, 그림은 크림 칸(slot.webp) 안에 */
/* 순위·응원단 = 같은 판 안 탭(나무판 띠). 고른 쪽이 판의 남는 높이를 모두 쓴다. */
.side-views{margin:0 0 8px}
.shop-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.shop-head .pane-note{margin:0}
/* 에너지 = 상단바 칩(다른 상단 칩과 같은 크림 알약, 숫자는 픽셀 글씨) */
.chip.wallet{gap:5px;padding:2px 13px 2px 10px;color:var(--dim)}
.wallet:before{content:'✦';color:var(--gold);font-size:14px}
.debug-chip{padding:2px 8px;border:2px dashed var(--gold);border-radius:999px;background:var(--paper);color:var(--gold);font:11px var(--pixel);white-space:nowrap}
.debug-chip.inline{margin-left:4px}
/* 타자 완성: 에너지 알갱이가 지갑으로 날아와 닿으면 번쩍이고 숫자가 오른다 */
.wallet.flash{animation:wallet-flash .75s ease-out}
.energy-fly{position:fixed;left:-10px;top:-12px;z-index:30;pointer-events:none;color:#78b04f;font-size:20px;line-height:1;text-shadow:0 0 6px #fff7b8,0 0 14px #ffe36a}
/* 산 응원단이 성으로 날아가는 그림 */
.squad-fly{position:fixed;left:-24px;top:-24px;width:48px;height:48px;z-index:30;pointer-events:none;filter:drop-shadow(0 0 6px #fff3a6) drop-shadow(0 4px 4px #4a3a2855)}
@keyframes wallet-flash{0%{box-shadow:0 0 0 0 #ffe36acc,0 0 22px 8px #fff3a6;transform:scale(1.14)}100%{box-shadow:0 0 0 12px #ffe36a00,0 0 0 0 #fff3a600;transform:scale(1)}}
.wallet b{font:22px var(--pixel);color:var(--green)}
.wallet span{font-size:11px;white-space:nowrap}
/* 응원단 3칸(누르면 내 부대에 들어간다) + 내 부대 편성판(2026-10-04 사용자 요청) */
.troops{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:8px;padding:0 0 3px;border:10px solid transparent;border-image:var(--board)/10px round;border-radius:14px}
.troop{display:grid;justify-items:center;gap:1px;text-align:center;border-radius:14px;padding:3px 2px 4px;position:relative}
.troop>svg{width:34px;height:34px;padding:2px;background:url('/assets/ui/slot.webp') center/100% 100% no-repeat;transition:transform .25s var(--spring)}
.troop:hover>svg{transform:translateY(-3px) rotate(-4deg)}
.troop strong{display:block;font-size:12px;line-height:1.2}
.troop small{display:block;font-size:9px;color:var(--dim)}
.troop>b{font:10px var(--pixel);color:var(--gold)}
.troop.capped{opacity:.5}
.troop{touch-action:pan-y;-webkit-touch-callout:none;user-select:none} /* 휴대폰: 세로로 쓸면 스크롤(그때는 사지 않음), 길게 누르면 계속 넣기 */
.troop.poor>b{color:var(--red)} /* 에너지가 모자란 응원단: 값이 붉다(누르면 이유를 알려 준다) */
.troop.poor>svg{opacity:.6}
.troop.nope{animation:troop-nope .35s ease-in-out}
@keyframes troop-nope{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.troops{position:relative}
.troop-note{position:absolute;left:50%;bottom:-21px;transform:translateX(-50%);z-index:3;width:max-content;max-width:calc(100% + 20px);padding:3px 9px;border:2px solid var(--red);border-radius:10px;background:var(--cream);color:var(--red);font-size:11px;line-height:1.3;text-align:center;box-shadow:0 3px 6px -2px var(--shadow);pointer-events:none}
.troop-note:empty{display:none}
.wallet.short{animation:wallet-short .6s ease-out}
@keyframes wallet-short{0%{box-shadow:0 0 0 0 #e8735fcc,0 0 18px 6px #ffb3a6;transform:scale(1.08)}100%{box-shadow:0 0 0 10px #e8735f00,0 0 0 0 #ffb3a600;transform:scale(1)}}
.troop .focus-badge{position:absolute;top:-7px;right:-4px}
/* 내 부대 고르기(2026-10-05 사용자 요청): 새 부대 편성 / 출격한 부대(정보·보강) */
.squad-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.squad-tabs button{padding:2px 8px;border:2px solid var(--line-strong);border-radius:999px;background:var(--cream);font-size:11px;color:var(--dim);white-space:nowrap}
.squad-tabs button[aria-selected=true]{background:var(--grass);border-color:var(--grass-deep);color:var(--ink)}
.squad-tabs button.out:before{content:'';display:inline-block;width:7px;height:7px;margin-right:4px;border-radius:50%;background:#7cb9d5;box-shadow:0 0 0 1.5px #3f7fa0;vertical-align:0}
.squad-actions{display:flex;gap:4px;margin:3px 0 1px}
.squad-actions[hidden]{display:none}
.squad-actions button{flex:1 1 auto;white-space:nowrap;padding:2px 4px;border:2px solid var(--line-strong);border-radius:999px;background:var(--cream);font-size:11px;color:var(--dim)}
.squad-actions button[aria-pressed=true]{background:#ffe9a6;border-color:#d9a520;color:var(--ink)} /* 목표 고르는 중 */
.formation{margin-top:8px;padding:7px 9px 8px;border:2.5px solid var(--line-strong);border-radius:14px;background:var(--paper)}
.form-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.form-head strong{font-size:13px}
.form-head b{font:12px var(--pixel);color:var(--green)}
.form-body{display:flex;align-items:center;gap:7px;min-height:38px;margin:3px 0}
.form-body small{font-size:10px;color:var(--dim);line-height:1.35}
.form-art{display:flex;align-items:flex-end;flex:none;min-width:36px;height:36px;position:relative;color:#7cb9d5}
.form-art svg{width:26px;height:26px;margin-right:-8px;filter:drop-shadow(0 1px 0 #fff8e7)}
.form-art.tier-3 svg,.form-art.tier-4 svg{width:29px;height:29px}
.form-flag{position:absolute;left:4px;top:-2px;width:14px;height:10px;background:#7cb9d5;clip-path:polygon(0 0,100% 50%,0 100%);box-shadow:inset 0 0 0 1.5px #4a3a28}
.form-art.tier-4 .form-flag{background:#ffd65a}
.formation .bar{margin:2px 0 6px}
.form-foot{display:flex;justify-content:space-between;align-items:center;gap:6px}
.slots{display:flex;align-items:center;gap:4px}
#slots{display:flex;gap:3px}
#slots i{width:11px;height:11px;border-radius:50%;border:2px solid var(--grass-deep);background:var(--cream)}
#slots i.out{background:#7cb9d5;border-color:#3f7fa0}
#slots i.locked{border-style:dashed;border-color:var(--line-strong);opacity:.6}
.slots small{font:10px var(--pixel);color:var(--dim)}
.deploy{padding:3px 12px;font-size:13px;white-space:nowrap}
.deploy:disabled{opacity:.55;cursor:default}
.deploy.ready{border-color:var(--coral);box-shadow:0 4px 0 var(--btn-cream),0 0 0 3px color-mix(in srgb,var(--coral) 45%,transparent)} /* 깜빡이지 않는다: 계속 움직이는 효과는 타자 글자를 늦게 보이게 한다(2026-10-04 측정) */
.auto-row{display:flex;justify-content:space-between;align-items:center;margin-top:9px;gap:8px}
.auto-row>small{font-size:10px;color:var(--dim);text-align:right;margin-left:auto}
.switch{display:flex;gap:7px;align-items:center;font-size:12px;cursor:pointer;flex:none}
.switch input{position:absolute;opacity:0;width:30px;height:20px}
.switch>span{width:34px;height:20px;border-radius:999px;background:var(--track);border:2.5px solid var(--line-strong);position:relative;transition:background .2s}
.switch>span:before{content:'';position:absolute;left:1px;top:1px;width:13px;height:13px;border-radius:50%;background:var(--cream);box-shadow:0 0 0 2px var(--line-strong);transition:transform .25s var(--spring)}
.switch input:checked+span{background:var(--grass);border-color:var(--grass-deep)}
.switch input:checked+span:before{transform:translateX(14px);box-shadow:0 0 0 2px var(--grass-deep)}
.switch input:focus-visible+span{outline:3px solid var(--coral);outline-offset:3px}

/* 전장: 나무 액자(panel.webp 테만) 안에 그림과 같은 3:2 세계 상자를 꽉 채워(cover) 깔고, 경계·병사·이름표를 그 위 같은 좌표에 둔다. */
.battlefield{user-select:none;-webkit-user-select:none;position:relative;overflow:hidden;border:13px solid transparent;border-image:url('/assets/ui/panel.webp') 48 44/13px 12px round;border-radius:16px;background:#a6bf91 padding-box;box-shadow:0 8px 14px -6px var(--shadow);isolation:isolate;container-type:size;min-height:0}
.world{position:absolute;width:max(100cqw,150cqh);aspect-ratio:3/2;left:calc((100cqw - max(100cqw,150cqh))/2);top:calc((100cqh - max(66.667cqw,100cqh))*.48);transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-origin:40% 45%}
.plane{position:absolute;inset:0;pointer-events:none;transform-origin:0 0} /* 확대·축소는 왼쪽 위 기준 scale(app.js showCamera) */ /* 충북 지도 px 평면: 전장 화면(카메라)만큼 app.js가 옮긴다. 늘 따로 합성(will-change)하면 프레임마다 GPU 일이 늘어 쓰지 않는다(2026-10-04 측정) */
.plane button.map-label{pointer-events:auto} /* 누르는 이름표(우리 학교 공헌도)만 받는다. 나머지 이름표 위에서도 전장을 끌 수 있게(2026-10-05: 보은군 이름표 22개가 끌기를 막았다) */
.chunk{position:absolute;width:100%;height:100%;filter:saturate(.93)} /* 전장 그림 조각 하나 = 1000×667 */
.territory{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* 학교 땅: 칸 주인 지도에서 칸을 칠하고, 주인이 다른 칸과 맞닿은 변만 점선으로 잇는다. */
.border{fill:none;stroke-width:2.5;stroke-dasharray:7 4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.border.blue{stroke:#d9f0ff}
.border.red{stroke:#ffd0c6}
.border.yellow{stroke:#fff2a8}
.battle-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y;cursor:grab}
/* 지도 위 작은 판 = 얇은 나무 테 크림판, 띠 = 나무판 위 크림 글씨, 아이콘 버튼 = 크림 원형 배지 */
.map-title,.map-label,.battle-event,.map-key,.minimap,.contribution{border:9px solid transparent;border-image:var(--panel)/9px 8px round;border-radius:10px;box-shadow:0 5px 10px -4px var(--shadow)}
.map-toolbar{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.map-title{padding:2px 4px;font-size:13px;display:flex;align-items:center;gap:7px}
.map-title small{color:var(--dim);font-size:10px;margin-left:8px}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--grass-deep);box-shadow:0 0 0 2px color-mix(in srgb,var(--grass) 40%,transparent)}
.icon-button{width:38px;height:38px;border-radius:50%;background:url('/assets/ui/badge.webp') center/100% 100% no-repeat;box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 22%,transparent);pointer-events:auto;font-size:15px}
.icon-button:hover{transform:translateY(-2px)}
.toolbar-buttons{display:flex;gap:6px}
.icon-button svg{width:17px;height:17px;vertical-align:middle}
#sound .mute,#sound[aria-pressed=true] .waves{display:none}
#sound[aria-pressed=true] .mute{display:inline}
.map-label{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:2px 5px;font-size:12px;white-space:nowrap;background:none}
.school-tip{position:absolute;left:0;top:0;z-index:25;padding:3px 10px;border:2px solid var(--line-strong);border-radius:9px;background:#fff9e9f5;box-shadow:0 5px 10px -4px var(--shadow);color:var(--ink);text-align:center;white-space:nowrap;pointer-events:none} /* 이름표 작은 창(마우스 올리기) */
.school-tip[hidden]{display:none}
.school-tip b{display:block;font-size:13px}
.school-tip span{display:block;font-size:11px;color:var(--dim)}
.map-label.own{box-shadow:0 0 0 3px #7cb9d5,0 5px 10px -4px var(--shadow)}
.map-label.distant{font-size:11px}
.map-label.other{font-size:10px;padding:0 4px;opacity:.92}
.flag-dot,.map-key i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;box-shadow:0 0 0 1.5px var(--ink)}
.blue-dot{background:#7cb9d5}
.red-dot{background:#e8735f}
.gray-dot{background:#b9b2a3}
.map-label.other.idle{opacity:.72;filter:grayscale(1)} /* 지역 월드: 참여 전 학교 */
body.choosing .game-grid{filter:blur(3px) grayscale(.4);pointer-events:none} /* 처음 접속: 학교를 고르기 전 */
#school-dialog.first .dialog-close{display:none}
#school-dialog .first-note{display:none;margin:0 0 8px;padding:6px 10px;border-radius:10px;background:color-mix(in srgb,var(--grass) 18%,var(--cream));font-size:12px;line-height:1.5}
#school-dialog.first .first-note{display:block}
.yellow-dot{background:#f2cc4a}
.battle-event{display:flex;align-items:center;gap:8px;padding:1px 6px;contain:inline-size} /* 범례와 같은 너비(2026-10-05 사용자 요청): 자기 글 길이로 넓히지 않고 범례 너비에 맞춘다 */
.battle-event>div{min-width:0}
.battle-event strong,.battle-event small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.battle-event>span{font-size:24px;color:var(--grass-deep)}
.battle-event strong{font-size:12px;display:block}
.battle-event small{font-size:10px;color:var(--dim);display:block;margin-top:1px}
.map-bottom{position:absolute;bottom:10px;left:12px;display:flex;flex-direction:column;align-items:stretch;gap:6px} /* 전황 카드 + 범례 */
.map-side{position:absolute;right:12px;bottom:10px;width:172px;display:flex;flex-direction:column;align-items:flex-end;gap:6px} /* 확대 막대 + 미니맵(2026-10-05 사용자 요청: 확대 표기를 미니맵 위로) */
#zoom-level{white-space:nowrap}
.map-key{display:flex;gap:10px;padding:0 3px;font-size:10px}
.map-controls{display:flex;align-items:center;border:9px solid transparent;border-image:var(--board)/9px round;border-radius:10px}
.map-controls button{width:26px;font-size:18px;line-height:1;color:var(--cream);text-shadow:var(--outline)}
.map-controls button:hover{color:var(--amber)}
.map-controls span{font:11px var(--pixel);min-width:38px;text-align:center;color:var(--cream);text-shadow:var(--outline)}
.minimap{width:100%;padding:0 3px 2px;box-sizing:border-box}
.minimap a{color:var(--grass-deep);text-decoration:none}
.minimap svg{cursor:pointer}
#follow[aria-pressed=false] svg{opacity:.4}
.scarf{display:inline-block;width:13px;height:5px;border-radius:3px;margin:0 2px 0 5px;vertical-align:middle;box-shadow:0 0 0 1.2px var(--ink)} /* 병사 목도리 색 = 학교 */

.minimap>span{display:flex;justify-content:space-between;font-size:11px}
.minimap svg{display:block;width:100%;height:92px}
.minimap small{font-size:9px;color:var(--faint)}
.contribution{position:absolute;top:40%;left:13%;z-index:3;width:256px;padding:4px 6px}
.contribution p{display:flex;gap:10px;font-size:12px;margin-top:10px}
.contribution p b{margin-left:auto;color:var(--green);font:11px var(--pixel)}
.contribution>small{display:block;font-size:9px;color:var(--faint);margin-top:12px}
.contribution .my-contribution{background:color-mix(in srgb,var(--grass) 28%,var(--cream));box-shadow:inset 0 0 0 2px var(--grass-deep);padding:6px 7px;margin-left:-4px;margin-right:-4px;border-radius:10px}

/* 타자: 지도 바로 아래, 지도와 같은 폭. 윗줄 정답과 아랫줄 입력이 같은 글꼴·크기·자간·왼쪽 시작점이라 글자가 세로로 맞는다
 * (정답 줄 왼쪽 14px = 입력 칸 테두리 2.5px + 입력 안쪽 11.5px). */
.typing-panel{padding:0 4px}
.typing-prompt,.typing-panel input{font-size:22px;letter-spacing:.6px;line-height:1.3}
.typing-prompt{position:relative;padding:0 14px;white-space:pre;overflow:hidden}
/* 장수 문장(2026-10-09): 글자 자리는 그대로(입력 줄과 세로로 맞게) 금색 테두리와 오른쪽 끝 작은 표만 더한다 */
.typing-prompt.gen-line{border-radius:10px;background:color-mix(in srgb,#ffd65a 22%,transparent);box-shadow:inset 0 0 0 2.5px #e0a63a}
.typing-prompt.gen-line:after{content:attr(data-label);position:absolute;right:6px;top:50%;transform:translateY(-50%);padding:2px 8px 2px 30px;border-radius:999px;background:#fff6d6 var(--card) 4px 50%/20px 26px no-repeat;border:1.5px solid #e0a63a;font-size:11px;letter-spacing:0;color:#7a5208;white-space:nowrap}
@media(max-width:1100px){.typing-prompt.gen-line{padding-right:44px}.typing-prompt.gen-line:after{content:'';padding:0;width:28px;height:30px;background-size:24px 30px}}
.typing-prompt .correct{color:var(--green)}
.typing-prompt .wrong{color:var(--red);background:color-mix(in srgb,var(--coral) 30%,var(--cream));border-radius:4px}
.typing-prompt .pending{background:color-mix(in srgb,var(--amber) 35%,var(--cream));border-radius:4px;box-shadow:inset 0 -2px var(--amber)}
.typing-prompt .caret{box-shadow:inset 0 -3px var(--grass-deep)}
.typing-panel form{position:relative;display:flex;margin-top:4px;border:2.5px solid var(--line-strong);border-radius:14px;background:var(--paper);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.typing-panel form:focus-within{border-color:var(--coral);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 40%,transparent)}
.typing-panel input{padding:5px 11.5px;border:0;background:none;outline:0;width:100%;min-width:0}
.typing-panel input::placeholder{color:var(--faint);font-size:15px;letter-spacing:0}
.submit{margin:4px;padding:0 14px;border-radius:999px;background:var(--grass);border:2.5px solid var(--grass-deep);box-shadow:0 3px 0 var(--btn-leaf);color:var(--ink);font-size:16px}
.submit:hover{transform:translateY(-1px)}
.keycap{display:grid;place-items:center;width:28px;height:28px;background:url('/assets/ui/slot.webp') center/100% 100% no-repeat;font-size:12px;flex:none}
.typing-footer{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:11px;color:var(--dim);min-width:0}
.typing-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 18px;color:var(--dim);font-size:12px;white-space:nowrap}
.typing-stats b{color:var(--green);font:11px var(--pixel);margin-left:5px}
/* 연습 종류·난도(2026-10-17 사용자 요청): 타자 칸 아래 두 칸 */
.lesson-tools{display:flex;gap:5px;flex:none}
.lesson-tools select{padding:2px 6px;border:2px solid var(--line-strong);border-radius:999px;background:var(--cream);font:inherit;font-size:11px;color:var(--ink);cursor:pointer}
/* 정확도 패널티(2026-10-17 사용자 요청): 제한 중에는 타자 칸 위를 덮는다(움직임 없음, 남은 초는 1초마다 글자만) */
.penalty{position:absolute;inset:0;display:flex;align-items:center;gap:10px;margin:0;padding:0 12px;background:#ffe9dc;color:#8a2f12;font-size:12px;white-space:nowrap;overflow:hidden}
.penalty b{font-size:15px}
.typing-stats b.warn{color:var(--red)}
@media(max-width:520px){#penalty-next{display:none}}
.energy-gain{color:var(--green);font:11px var(--pixel)}

/* 학교 고르기 창 = 풍경 위에 뜬 나무 테 크림 창 */
dialog{border:20px solid transparent;border-image:var(--panel)/20px 18px round;border-radius:18px;background:none;padding:8px 12px 12px;color:var(--ink);width:500px;max-width:92vw;box-shadow:0 18px 40px -12px #283e3a55}
dialog::backdrop{background:#33463766;backdrop-filter:blur(5px)}
dialog h2{font-size:25px;margin:10px 0}
dialog p{font-size:12px;color:var(--dim);line-height:1.6}
.dialog-close{position:absolute;right:10px;top:6px;font-size:25px;color:var(--dim)}
#school-search{width:100%;padding:11px 13px;margin:16px 0 8px;border:2.5px solid var(--line-strong);border-radius:14px;background:var(--paper);outline:0}
#school-search:focus{border-color:var(--coral);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 40%,transparent)}
#school-results{max-height:280px;overflow:auto;margin-bottom:15px}
#school-results button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:11px 12px;text-align:left;border-radius:12px}
#school-results button:hover{background:color-mix(in srgb,var(--grass) 25%,var(--cream))}
#school-results small,dialog>small{font-size:10px;color:var(--faint)}
/* 알림 = 나무판 띠 위 크림 글씨. 전장 아래쪽 가운데(전황 카드 위)라 위쪽 칸의 교전을 가리지 않는다. */
#toast{position:absolute;top:58px;left:50%;transform:translate(-50%,calc(-100% - 70px));opacity:0;visibility:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility 0s .35s;border:10px solid transparent;border-image:var(--board)/10px round;border-radius:12px;padding:1px 10px;z-index:30;color:var(--cream);text-shadow:var(--outline);font-size:14px;line-height:1.35;text-align:center;width:max-content;max-width:min(560px,calc(100% - 40px));pointer-events:none}
#toast.show{transform:translate(-50%,0);opacity:1;visibility:visible;transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s,visibility 0s} /* 알림(2026-10-05 사용자 요청): 전장 위에서 내려왔다가 다시 올라간다. 긴 글은 줄을 바꾼다 */
.paused *,.paused *:before{animation-play-state:paused!important}

/* 내실·투표 = 사이드바 버튼을 누르면 전장 위에 뜨는 큰 나무 창(2026-10-04 사용자 결정: 배치 시안 C). 탭으로 둘을 오가고 ×·Esc로 닫는다. */
.school-sheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;width:min(580px,92%);max-height:92%;display:flex;flex-direction:column;border:20px solid transparent;border-image:var(--panel)/20px 18px round;border-radius:18px;padding:0 4px 4px;box-shadow:0 18px 40px -12px #283e3a55}
.school-sheet[hidden]{display:none}
.sheet-head{display:flex;align-items:center;gap:10px}
.sheet-head .views{flex:1;margin:0}
.sheet-head>button{font-size:26px;line-height:1;color:var(--dim)}
.school-sheet .pane{margin-top:8px}
@media(max-width:1380px){.slogan{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}}
@media(max-width:1560px){.season-chip{display:none}} /* 1560px 아래는 머리말 칩이 넘쳐 닉네임 칸과 겹친다(1280: 싱글 45px·서버 150px). 늘 같은 예시 글인 시즌 칩을 빼고, 서버의 실제 전장·시즌은 preview-chip에 남긴다(2026-10-17 검토) */
@media(max-width:1150px){.app{padding:0 14px 12px}.game-grid{grid-template-columns:240px minmax(0,1fr)}.season-chip,.profile small,.brand small{display:none}.header nav button{padding:7px 12px}.map-title small{display:none}.map-key{gap:6px;font-size:9px}.map-side{width:150px}}
@media(max-height:760px) and (min-width:851px){.header{height:66px}.brand-sign{width:102px;font-size:19px;padding-top:16px}.panel{border-width:13px;border-image-width:13px 12px}.school-stats>div{padding:3px 0 2px}.school-stats div>span{display:none}.school-actions{margin:7px 0 6px}.typing-prompt,.typing-panel input{font-size:20px}}
/* 좁은 화면: 지도와 타자를 먼저, 학교·응원단은 아래로. 이때는 세로 스크롤을 허용한다. */
@media(max-width:850px){
  .app{height:auto;min-height:0;display:block;padding:0 12px 16px}
  .header{height:62px;gap:10px}
  .brand-sign{width:96px;font-size:18px;padding-top:15px}
  .brand small,.header nav,.header-meta .season-chip{display:none}
  .game-grid{display:flex;flex-direction:column;gap:12px}
  .stage{display:flex;flex-direction:column;gap:12px;order:-1}
  .battlefield{height:min(70vh,470px)}
  .sidebar{gap:12px}
  .pane{max-height:320px}
  .typing-footer{flex-wrap:wrap}
  .typing-footer .keycap{display:none}
  .typing-stats{width:100%;margin-left:0}
  .contribution{left:8%;top:30%}
}
@media(max-width:520px){
  .profile .avatar,.preview-chip{display:none}
  .typing-prompt,.typing-panel input{font-size:17px;letter-spacing:.3px}
  .typing-prompt{white-space:pre-wrap}
  .map-label{font-size:10px;padding:0 2px}
  .map-label.distant,.map-label.other{display:none}
  .region .map-label.other{display:block;font-size:9px;padding:0 3px} /* 지역 월드: 좁은 화면에서도 학교 이름은 보인다(2026-10-05 검토) */
  .region .map-label.other .scarf{display:none}
  .map-key{display:none}
  .map-bottom{bottom:8px;left:8px}
  .map-side{width:124px;right:8px;bottom:8px}
  .minimap svg{height:66px}
  .battle-event{contain:none;max-width:calc(100vw - 190px);gap:6px} /* 범례가 없으니 자기 너비로 */
  .battle-event strong{font-size:11px}
  .battle-event small{font-size:9px;line-height:1.4}
  .map-toolbar{left:8px;right:8px}
  .map-title{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* 멀리 보기(2026-10-05 사용자 요청: 일정 이상 축소하면 압축해 표현): 지형 그림 조각 대신 미니맵 같은 단순한 땅·호수, 학교 칸 색은 진하게 */
.far-only{display:none}
.battlefield.far{background:#ece3c8 padding-box}
.battlefield.far #plane{visibility:hidden}
.battlefield.far .far-only{display:inline}
#far-land{fill:#d6e2a8;stroke:#95a470;stroke-width:.12;stroke-linejoin:round}
#far-water{fill:#8fcbe8}
.battlefield.far #fills path{fill-opacity:.6}
.battlefield.far .map-label:not(.own){font-size:9px;padding:0 3px} /* 멀리 보기: 학교 이름표가 몰려도 덜 겹치게 작게 */
.battlefield.far .map-label:not(.own) .scarf{display:none}
.battlefield.far .map-label:not(.own){border:0;border-image:none;box-shadow:none;background:none;padding:0;font-size:10px;color:#2b2116;text-shadow:0 0 2px #fff9e9,0 0 2px #fff9e9,0 0 4px #fff9e9} /* 멀리 보기: 이름표는 테 없는 글자만(병력 원을 덜 가리게, 2026-10-05 검토) */
.battlefield.far .map-label:not(.own) .flag-dot{width:6px;height:6px;margin-right:3px}
/* 동맹 파기 예고 띠(2026-10-05 사용자 요청): 전장 위 가운데, 남은 시간을 센다. 알림은 그 아래로 내려온다 */
.pact-alert{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:25;display:grid;gap:2px;padding:3px 12px;border:2.5px solid #c0661a;border-radius:12px;background:#fff1d6f2;box-shadow:0 5px 10px -4px var(--shadow);color:#7a3d0c;font-size:12px;text-align:center;white-space:nowrap;pointer-events:none}
.pact-alert[hidden]{display:none}
.pact-alert b{font:13px var(--pixel);color:#a2453a}
.battlefield.alerting #toast{top:calc(58px + var(--alert-h, 0px))}
@media(max-width:1150px){.pact-alert{top:54px}.battlefield.alerting #toast{top:calc(100px + var(--alert-h, 0px))}}
.battlefield.sheet-open #toast{top:auto;bottom:16px;transform:translate(-50%,calc(100% + 40px))} /* 학교 창이 열려 있으면 알림은 아래에서 올라온다 */
.battlefield.sheet-open #toast.show{transform:translate(-50%,0)}
.school-tip{z-index:31} /* 이름표 작은 창은 알림보다 위 */
/* 학교 테마 타자판(2026-10-06 사용자 요청): 입력칸 바탕 무늬와 테두리 색. 움직이지 않는 무늬(타자 지연에 영향 없게) */
body.theme-forest .typing-panel form{background:radial-gradient(circle at 12px 10px,#d9eec6 0 3px,transparent 3.5px) 0 0/34px 26px,linear-gradient(#f4fbec,#eaf6dd);border-color:#4f8a3c}
body.theme-sea .typing-panel form{background:radial-gradient(ellipse 14px 5px at 50% 100%,transparent 9px,#dcedf8 9.5px 11px,transparent 11.5px) 0 0/30px 14px,linear-gradient(#f1f9fe,#e3f2fb);border-color:#3f7fae}
body.theme-sun .typing-panel form{background:radial-gradient(circle at 14px 12px,#ffe9a6 0 4px,transparent 4.5px) 0 0/38px 28px,linear-gradient(#fffaea,#fff1cc);border-color:#a87814} /* 테두리는 바탕 위 3:1 이상(2026-10-06 검토) */
body[class*=theme-] .typing-panel form:focus-within{border-color:var(--coral)} /* 입력 중에는 테마와 상관없이 산호색 테두리 */
.pact-list small.pact-last{color:#7a3d0c} /* 지난 회차 결과 */
/* 서버 무료 사용량 막대(서버 버전, 2026-10-07 사용자 요청): 머리 문구 아래 */
.usage{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--dim);background:none;border:0;padding:0;font-family:inherit;cursor:pointer}
.usage:hover span:first-child{text-decoration:underline}
.usage[hidden]{display:none}
.usage-track{width:130px;height:7px;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden;box-shadow:inset 0 0 0 1px var(--line-strong)}
.usage-track i{display:block;height:100%;width:1%;background:var(--grass-deep);border-radius:999px}
.usage-track i.warm{background:#e0a72a}.usage-track i.hot{background:#d9573f}
.usage b{font:10px var(--pixel);color:var(--ink)}
@media(max-width:1380px){.slogan-box{margin-left:auto}.usage span:first-child{display:none}}
/* 관리자 단추(왼쪽 아래 문구)와 창 */
.admin-dialog{width:min(640px,calc(100vw - 32px));max-height:min(86vh,760px);overflow:auto}
.admin-box{border:2px solid var(--line);border-radius:12px;padding:8px 10px;margin:8px 0;background:var(--paper)}
.admin-box h3{margin:0 0 4px;font-size:13px}
.admin-box p{margin:2px 0;font-size:12px;line-height:1.5}
.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px 10px}
.admin-grid label{display:grid;gap:2px;font-size:11px;color:var(--dim)}
.admin-grid input{width:90px;padding:3px 6px;border:2px solid var(--line-strong);border-radius:8px;font:inherit;color:var(--ink);margin-right:4px}
.admin-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.admin-row button{padding:4px 12px;border:2.5px solid var(--line-strong);border-radius:999px;background:var(--cream);font-size:12px;color:var(--ink)}
.admin-row button:hover{border-color:var(--coral)}
.admin-row input{flex:1;min-width:160px;padding:4px 8px;border:2px solid var(--line-strong);border-radius:8px;font:inherit}
/* 서버에 닿지 않을 때(서버 버전): 흉내 전장으로 넘어가지 않고 알린다 */
.server-down{margin:20vh auto;max-width:28em;padding:24px;border-radius:14px;background:#fff8e7;box-shadow:0 4px 18px rgba(74,58,40,.18);text-align:center;font-size:18px}
/* 서버 사용량 창(2026-10-07): 사용량·과금 안내, 다 쓰면 닫을 수 없는 사용량 화면 */
.usage-table{width:100%;border-collapse:collapse;font-size:12px;margin:4px 0}
.usage-table th,.usage-table td{padding:2px 6px;border-bottom:1px solid var(--line);text-align:right;font-weight:400}
.usage-table th{text-align:left;color:var(--dim)}
.usage-table tr:first-child td{color:var(--dim);font-size:11px}
.limit-note{margin:6px 0 8px;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--coral) 16%,var(--cream));font-size:13px;line-height:1.5}
#usage-dialog.locked .dialog-close{display:none}
.admin-limit{display:flex;align-items:center;gap:6px;font-size:12px}
.admin-limit select{padding:3px 6px;border:2px solid var(--line-strong);border-radius:8px;font:inherit}
.admin-limit input{width:80px;padding:3px 6px;border:2px solid var(--line-strong);border-radius:8px;font:inherit}
/* 싱글 버전 승패 결과(2026-10-07) */
.end-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:10px 0}
.end-stats div{display:grid;gap:2px;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--paper)}
.end-stats small{color:var(--dim);font-size:12px}
.end-stats b{font-size:22px;color:var(--ink)}
.end-dialog.won h2{color:var(--grass-deep)}
.end-dialog .admin-row form{margin:0}
/* 서버 시즌 결과(2026-10-17 사용자 요청): 닫기(×)·'전장 계속 보기' 없이 학교 순위·우리 학교 기여도 두 목록(움직임 없음) */
.end-dialog.season form[method="dialog"]{display:none}
.end-board{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 10px}.end-board[hidden]{display:none}
.end-board ol{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:2px;font-size:13px}
.end-board li{display:flex;gap:6px}.end-board li small{min-width:2.6em;color:var(--dim)}.end-board li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.end-board li b{margin-left:auto}.end-board li.mine{font-weight:700;color:var(--grass-deep)}
@media (max-width:560px){.end-board{grid-template-columns:1fr}}
/* 장수(2026-10-08): 편성판의 장수 칩과 고르기 창 */
.form-body #form-mix{flex:1;min-width:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} /* 세 줄까지: 응원단 칸이 넘치지 않게(전체 글은 title) */
/* 장수 칸(2026-10-09): 편성 그림 줄 오른쪽 끝의 동그란 얼굴 단추 + 자동·수동 단추. 따로 줄을 두지 않아 응원단 칸이 넘치지 않는다(1280×720) */
.form-general{display:grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:2.5px solid var(--grade,var(--line-strong));border-radius:50%;background:var(--cream);cursor:pointer}
.form-general svg{width:30px;height:30px;color:#4f8fd6}
.form-general.empty svg{opacity:.45}
.form-general:disabled{opacity:.7;cursor:default}
.gen-mode{margin-left:auto;min-width:34px;padding:0 7px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--cream);font:inherit;font-size:10.5px;line-height:16px;color:var(--dim);cursor:pointer;white-space:nowrap} /* 편성판 머리줄: 장수가 있을 때만 */
.gen-mode[hidden]{display:none}
.gen-mode[aria-pressed=true]{background:#e9e0ff;border-color:#7a5fc0;color:var(--ink)}
.form-general.charged{box-shadow:0 0 0 2.5px #ffd34a,0 0 10px 4px #ffcf3a99}
.squad-tabs button.charged{border-color:#e0a63a;box-shadow:0 0 6px 1px #ffd34a}
.squad-actions .gen-use{border-color:#c98a12;background:#ffd65a;color:var(--ink);font-weight:700}
/* 장수 창 = 고르기 + 도감 + 뽑기(2026-10-09). 장수가 늘어도 스크롤 없이 쪽을 넘긴다: 한 쪽 장수 수(--page)는 CSS가 화면 크기마다 정하고 app.js가 읽는다 */
.general-dialog{width:min(880px,calc(100vw - 32px))}
.gen-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.gen-top h2{margin:2px 0}.gen-count{margin-right:auto;color:var(--dim);font-size:11px}
.gen-top button,.gen-foot button,.gen-detail button{padding:3px 12px;border:2.5px solid var(--line-strong);border-radius:999px;background:var(--cream);font:inherit;font-size:12px;color:var(--ink);cursor:pointer}
.gen-top button:disabled,.gen-detail button:disabled{opacity:.55;cursor:default}
.gen-pot{padding:2px 10px;border-radius:999px;background:#d9f5ef;border:2px solid #1a9e8f;color:#0e6b60;font-size:12px;white-space:nowrap}.gen-pot b{font:15px var(--pixel);color:#1a9e8f}
#pot-draw:not(:disabled){border-color:#1a9e8f;background:#d9f5ef;font-weight:700}
#gen-odds[aria-pressed=true]{background:#ffe9a6;border-color:#d9a520}
.gen-body{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:12px;margin:6px 0}
.general-list{--page:32;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;align-content:start}
.gen-tile{position:relative;padding:0;border:3px solid var(--g);border-radius:10px;background:var(--paper);overflow:hidden;font:inherit;font-size:11px;color:var(--ink);cursor:pointer}
.gen-tile img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover}
.gen-tile span{display:block;padding:1px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gen-tile i,.gen-detail i{padding:0 4px;border-radius:999px;background:var(--g);color:#fff;font:9px var(--pixel);font-style:normal}
.gen-tile i{position:absolute;left:2px;top:2px}
.gen-stars{font-style:normal;color:#e0a422;letter-spacing:-2px;font-size:9px}.gc-head .gen-stars{color:#fff3a0;font-size:11px}
.gen-tile.locked img{filter:grayscale(1);opacity:.5}
.gen-tile.busy:after{content:'출격 중';position:absolute;right:2px;top:2px;padding:0 4px;border-radius:999px;background:#1f5f86;color:#fff;font-size:9px}
.gen-tile[aria-current=true]{box-shadow:0 0 0 3px #8fd8ff}
.gen-detail{display:flex;flex-direction:column;gap:3px;font-size:11px;line-height:1.4}
.gen-detail>b{font-size:15px}.gen-detail p{margin:0;font-size:11px}.gen-detail small{color:var(--dim)}
/* 장수 카드(2026-10-09): 등급 색 테두리 · 이름 띠 · 그림과 공격력 배지 · 설명/공격력/패시브/특수능력 칸 */
.gen-detail>button{margin-top:6px} /* 카드와 단추 사이 간격 */
.gen-card{display:grid;grid-template-columns:100px 1fr;gap:5px 7px;align-items:start;padding:6px;border:4px solid var(--g);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--g) 20%,var(--paper)),var(--paper) 45%);box-shadow:0 3px 0 color-mix(in srgb,var(--g) 50%,#3d3020),inset 0 0 0 2px #fffaf0}
.gc-head{grid-column:1/-1;display:flex;align-items:center;gap:6px;padding:3px 8px;border-radius:10px;background:var(--g);color:#fff}
.gc-head i{padding:1px 6px;border-radius:999px;background:#fff;color:var(--g);font:10px var(--pixel);font-style:normal}
.gc-head b{font-size:15px;white-space:nowrap}.gc-head small{margin-left:auto;font-size:10px;color:#fff;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gc-art{position:relative;grid-row:span 2;aspect-ratio:3/4;border-radius:10px;overflow:hidden;border:2px solid color-mix(in srgb,var(--g) 55%,#3d3020);background:#f6efdc}
.gc-art img{display:block;width:100%;height:100%;object-fit:cover} /* 카드 그림 전체(3:4)가 그대로 보이게 */
.gc-rows{display:contents}.gc-passive,.gc-special{grid-column:1/-1} /* 그림 옆에 설명·공격력, 아래에 패시브·특수능력 */
.gen-detail.locked .gc-art img{filter:grayscale(1);opacity:.6}
.gen-detail.new .gc-art img{animation:gen-new .5s ease-out}
.gc-atk{position:absolute;left:5px;bottom:5px;display:grid;place-items:center;align-content:center;width:42px;height:42px;border-radius:50%;background:#c0392b;border:3px solid #fff3d0;color:#fff;font:16px/1 var(--pixel);box-shadow:0 2px 0 #7a2018}
.gc-atk em{font:normal 700 8px/1 inherit;font-family:inherit;letter-spacing:-.3px}
.gc-new{position:absolute;right:5px;top:5px;padding:1px 8px;border-radius:999px;background:#ffd34a;border:2px solid #fff3d0;color:#5a3d00;font-weight:700;font-size:11px}

.gc-row{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:start;padding:4px 6px;border-radius:9px;background:#fffdf5;border:1.5px solid var(--line)}
.gc-row dt{min-width:44px;padding:1px 6px;border-radius:6px;background:#8a7a62;color:#fff;text-align:center;font-size:10px;font-weight:700;white-space:nowrap}
.gc-power dt{background:#c0392b}.gc-passive dt{background:#2b7a99}.gc-special dt{background:#b37a00}
.gc-row dd{margin:0;font-size:11px;line-height:1.4}
.gc-row dd>b{display:block;font-size:12px}.gc-power dd>b{display:inline;color:#c0392b}
.gc-row dd small{display:block;margin-top:1px;font-size:10px;color:var(--dim)}
.gen-detail table{border-collapse:collapse;font-size:11px}.gen-detail td,.gen-detail th{padding:2px 6px;border-bottom:1px solid var(--line);text-align:right}.gen-detail th:first-child,.gen-detail td:first-child{text-align:left}
@keyframes gen-new{from{transform:scale(.6) rotateY(90deg);opacity:0}}
.gen-foot{display:flex;justify-content:space-between;align-items:center}
.gen-pager[hidden]{display:none}
[data-grade=UR]{--g:#c2185b}[data-grade=SSR]{--g:#7a3cf0}[data-grade=SR]{--g:#2f6fd6}[data-grade=R]{--g:#24783f}[data-grade=A]{--g:#6f6352}
.form-general[data-grade]{--grade:var(--g)}
/* 뽑기 연출(2026-10-17 사용자 요청 '화려하게'): 장수 창 위 막. 빛 모으기(카드 뒷면이 떨림) → 번쩍·충격파·뒤집기 → 빛줄기·불꽃·별. 빛 색만 등급색, 길이·소리는 같다 */
.gacha{--w:min(210px,32vh,56vw);position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:hidden;cursor:pointer;outline:0;color:#fff;background:radial-gradient(circle at 50% 42%,#3a2a5ae6,#0d0a18f5 70%);animation:gacha-in .3s ease-out}
.gacha.out{animation:gacha-out .34s ease-in forwards}
.gacha-stage{position:relative;display:grid;place-items:center}
.gacha-rays{position:absolute;left:50%;top:50%;width:150vmax;height:150vmax;margin:-75vmax 0 0 -75vmax;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(#fff6c8 0 5deg,#0000 5deg 15deg);-webkit-mask:radial-gradient(circle,#000,#0000 45%);mask:radial-gradient(circle,#000,#0000 45%);opacity:.55;scale:.5;animation:gacha-spin 9s linear infinite;transition:scale .6s cubic-bezier(.2,.9,.3,1),opacity .6s}
.gacha.open .gacha-rays{opacity:.85;scale:1.1;background:repeating-conic-gradient(color-mix(in srgb,var(--g) 55%,#fff) 0 5deg,#0000 5deg 15deg)}
.gacha.open[data-grade=UR] .gacha-rays{background:repeating-conic-gradient(#ff6b6b 0 5deg,#0000 5deg 14.4deg,#ffd93b 14.4deg 19.4deg,#0000 19.4deg 28.8deg,#6bff95 28.8deg 33.8deg,#0000 33.8deg 43.2deg,#6bc8ff 43.2deg 48.2deg,#0000 48.2deg 57.6deg,#d18bff 57.6deg 62.6deg,#0000 62.6deg 72deg)}
.gacha-hold{animation:gacha-shake 1.3s ease-in both}
.gacha.open .gacha-hold{animation:gacha-pop .6s cubic-bezier(.2,1.6,.4,1) both}
.gacha-card{position:relative;width:var(--w);aspect-ratio:3/4;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,1.4,.5,1)}
.gacha.open .gacha-card{transform:rotateY(180deg)}
.gacha-back,.gacha-face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden}
.gacha-back{display:grid;place-items:center;border:5px solid #ffe08a;background:radial-gradient(circle,#fff7d1,#f0b93a 35%,#9a5a10);box-shadow:0 0 30px 6px #ffd65a,inset 0 0 0 3px #fff3c4;animation:gacha-glow .45s ease-in-out infinite alternate}
.gacha-back b{font-size:calc(var(--w) * .42);color:#fff;text-shadow:0 0 14px #fff,0 0 30px #ffb13a}
.gacha-face{transform:rotateY(180deg);overflow:hidden;border:5px solid var(--g);background:#f6efdc;box-shadow:0 0 0 3px #fff,0 0 40px 10px color-mix(in srgb,var(--g) 70%,#fff)}
.gacha-face img{display:block;width:100%;height:100%;object-fit:cover}
.gacha-face i{position:absolute;left:8px;top:8px;padding:2px 10px;border-radius:999px;background:var(--g);border:2px solid #fff;font:14px var(--pixel);font-style:normal}
.gacha-ring{position:absolute;left:50%;top:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:6px solid #fff;opacity:0;pointer-events:none}
.gacha.open .gacha-ring{animation:gacha-ring .7s ease-out}
.gacha-flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,#fff,color-mix(in srgb,var(--g) 35%,#fff) 30%,#fff0 75%)}
.gacha.open .gacha-flash{animation:gacha-flash .8s ease-out}
.gacha-spark{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px #ffd65a;pointer-events:none;font-style:normal;font-size:18px;line-height:10px;text-align:center;color:#fff3c4}
.gacha.open .gacha-spark{box-shadow:0 0 10px 4px color-mix(in srgb,var(--g) 60%,#fff)}
.gacha-spark:not(:empty){background:none;box-shadow:none;text-shadow:0 0 8px #ffd65a}
.gacha-info{display:grid;justify-items:center;gap:4px;max-width:min(520px,90vw);text-align:center;opacity:0}
.gacha.open .gacha-info{animation:gacha-rise .5s .3s ease-out both}
.gacha-info>span{padding:2px 14px;border-radius:999px;background:#ffd34a;color:#5a3d00;font-weight:800;font-size:15px;box-shadow:0 0 18px #ffd34a}
.gacha-info>b{display:flex;align-items:center;gap:8px;font-size:30px;text-shadow:0 2px 0 #0008,0 0 18px var(--g)}
.gacha-info>b i{padding:1px 10px;border-radius:999px;background:var(--g);border:2px solid #fff;font:14px var(--pixel);font-style:normal;text-shadow:none}
.gacha-info em{font-style:normal;font-size:26px;letter-spacing:2px;color:#ffd34a;text-shadow:0 0 10px #ffb13a}
.gacha-info em i{display:inline-block;font-style:normal;animation:gacha-star .45s calc(.55s + var(--k) * .12s) cubic-bezier(.2,1.8,.4,1) both}
.gacha-info em i.up{animation-duration:.8s;color:#fff;text-shadow:0 0 14px #ffd34a,0 0 28px #ff9a1a}
.gacha-info small{font-size:13px;line-height:1.5;color:#f3ead6}
.gacha-tap{font-size:12px;opacity:0}
.gacha.open .gacha-tap{animation:gacha-rise .4s 1.2s both}
@keyframes gacha-in{from{opacity:0}}
@keyframes gacha-out{to{opacity:0;transform:scale(1.04)}}
@keyframes gacha-spin{to{rotate:1turn}}
@keyframes gacha-shake{0%{transform:scale(.4) translateY(40px);opacity:0}15%{transform:none;opacity:1}40%{transform:rotate(-2deg)}45%{transform:rotate(2deg)}50%{transform:rotate(-3deg)}55%{transform:rotate(3deg)}62%{transform:rotate(-5deg) scale(1.02)}68%{transform:rotate(5deg) scale(1.03)}74%{transform:rotate(-7deg) scale(1.05)}80%{transform:rotate(7deg) scale(1.06)}86%{transform:rotate(-8deg) scale(1.08)}92%{transform:rotate(8deg) scale(1.1)}100%{transform:scale(1.12)}}
@keyframes gacha-pop{0%{transform:scale(1.12)}40%{transform:scale(1.24)}100%{transform:none}}
@keyframes gacha-glow{to{box-shadow:0 0 50px 14px #ffe9a0,inset 0 0 0 3px #fff3c4}}
@keyframes gacha-ring{from{transform:scale(.3);opacity:1}to{transform:scale(7);opacity:0;border-width:1px}}
@keyframes gacha-flash{from{opacity:1}to{opacity:0}}
@keyframes gacha-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes gacha-star{from{transform:scale(0) rotate(-90deg);opacity:0}}
@media(max-height:560px){.gacha{--w:min(150px,30vh);gap:8px}.gacha-info>b{font-size:22px}.gacha-info small{display:none}}
@media(max-height:700px){.general-list{--page:24}.gc-atk{width:34px;height:34px;font-size:13px}.gc-atk em{display:none}.gc-row{padding:2px 6px}.gc-row dd small,.general-dialog .eyebrow{display:none}} /* 낮은 화면: 그림을 띠처럼 낮춰 창에 스크롤 없게 */
@media(max-width:640px){.gen-body{grid-template-columns:1fr}.general-list{--page:10;grid-template-columns:repeat(5,minmax(0,1fr))}.gen-detail{order:-1}.gen-card{grid-template-columns:78px 1fr;gap:3px 8px}.gc-art{grid-row:auto}.gc-power{grid-column:1/-1}.gc-atk{width:30px;height:30px;font-size:12px;left:3px;bottom:3px;border-width:2px}.gc-atk em,.gc-row dd small{display:none}.gc-row{grid-template-columns:44px 1fr;padding:2px 5px}.gc-row dd{font-size:10.5px}.general-dialog .eyebrow{display:none}.gen-top h2{font-size:17px}} /* 휴대폰: 그림 옆에 설명, 나머지 칸은 아래 한 줄씩 */
/* 잠재력(2026-10-09): 에너지 지갑 옆. 한 번도 안 틀린 문장 10개마다 1개 */
button.chip{font:inherit;cursor:pointer}
.chip.wallet.pot:before{content:'◆';color:#1a9e8f}
.pot b{color:#1a9e8f}
.pot small{font:10px var(--pixel);color:var(--dim)}
@media(max-width:520px){.pot span,.pot small,.wallet span{display:none}}
@media(max-width:640px){.gen-detail:not([data-grade]){display:flex}.gen-tile span{font-size:10px;letter-spacing:-.5px;padding:1px 0}}
@media(max-width:640px) and (max-height:700px){.general-list{--page:10}.gen-detail:not([data-grade]) small:first-of-type{display:none}}
/* 잠재력 알갱이(완벽 문장마다)와 +1 연출(10개마다): 한 번만 돌고 사라진다 */
.energy-fly.pot-fly{color:#1a9e8f;text-shadow:0 0 6px #e0fff8,0 0 14px #6fe0c8}
.pot-burst{position:fixed;left:50%;top:42%;z-index:40;display:grid;justify-items:center;pointer-events:none;transform:translate(-50%,-50%)}
.pot-burst b{font-size:96px;line-height:1;color:#1a9e8f;text-shadow:0 0 18px #ffffff,0 0 40px #6fe0c8,0 4px 0 #0e6b60}
.pot-burst span{margin-top:-4px;padding:3px 14px;border-radius:999px;background:#fffdf3;border:3px solid #1a9e8f;font-size:20px;font-weight:700;color:#0e6b60}
/* ── 받아쓰기 모드(2026-10-15) ── 처음 화면 모드 고르기, 아래 도구줄(급·진도·듣기·오답 노트), 확인한 글의 틀린 곳 표시 */
.mode-dialog{width:min(560px,calc(100vw - 32px))}
.mode-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.mode-card{display:grid;gap:4px;padding:16px 12px;border:3px solid var(--line-strong);border-radius:16px;background:var(--cream);font:inherit;color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 4px 0 var(--btn-cream)}
.mode-card b{font-size:18px}.mode-card span{font-size:12px;color:var(--dim);line-height:1.4}
.mode-card:hover,.mode-card[aria-pressed=true]{border-color:var(--grass-deep);background:color-mix(in srgb,var(--grass) 25%,var(--cream))}
.mode-grade{display:grid;gap:8px;justify-items:start;margin-bottom:6px}.mode-grade p{margin:0;font-size:13px}
.mode-grades{display:flex;flex-wrap:wrap;gap:6px}
.mode-grades button{padding:5px 14px;border:2.5px solid var(--line-strong);border-radius:999px;background:var(--cream);font:inherit;font-size:14px;color:var(--ink);cursor:pointer}
.mode-grades button[aria-pressed=true]{background:#2f6fd6;border-color:#1f4fa0;color:#fff}
#mode-go{padding:6px 20px;font-size:14px}#mode-go:disabled{opacity:.5}
@media(max-width:520px){.mode-cards{grid-template-columns:1fr}}
.dict-tools{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap}
.dict-badge{display:grid;justify-items:center;line-height:1}
.dict-badge small{font-size:10px;color:var(--dim)}
.dict-level{min-width:46px;padding:3px 8px;border-radius:10px;background:var(--lv,#2f6fd6);color:#fff;font:16px var(--pixel);text-align:center;box-shadow:0 2px 0 color-mix(in srgb,var(--lv,#2f6fd6) 60%,#000)}
.dict-level[data-level="10"],.dict-level[data-level="9"]{--lv:#2e8b4f}.dict-level[data-level="8"],.dict-level[data-level="7"]{--lv:#1f8a9e}.dict-level[data-level="6"],.dict-level[data-level="5"]{--lv:#2f6fd6}
.dict-level[data-level="4"],.dict-level[data-level="3"]{--lv:#7a3cf0}.dict-level[data-level="2"],.dict-level[data-level="1"]{--lv:#c2185b}.dict-level[data-level="gen"]{--lv:#b37a00;font-size:13px}
.dict-path{display:grid;gap:2px;min-width:0}.dict-path small{font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.dict-ladder{display:flex;gap:2px}
.dict-ladder i{display:grid;place-items:center;width:15px;height:15px;border-radius:4px;background:#e9e2d2;color:#9a8c7a;font:8px var(--pixel);font-style:normal}
.dict-ladder i.pass{background:#9fd68a;color:#2a5a1c}.dict-ladder i.now{background:#ffd65a;color:#5a3d00;box-shadow:0 0 0 1.5px #c98a12}.dict-ladder i.item{outline:2px solid #2f6fd6;outline-offset:1px}
.dict-tools .dict-review{padding:1px 8px;border-radius:999px;background:#fde3d0;border:1.5px solid #e8853a;color:#9a4a10;font-size:11px;font-weight:700;white-space:nowrap}
.dict-tools button{padding:2px 9px;border:2px solid var(--line-strong);border-radius:999px;background:var(--cream);font:inherit;font-size:11px;color:var(--ink);cursor:pointer;white-space:nowrap}
#dict-say{border-color:#2f6fd6;background:#e3eefc;font-weight:700}#dict-show{border-color:#c98a12;background:#fff3c4}
.dict-note{padding:1px 8px;border-radius:999px;background:#fff;border:1.5px solid #e0533f;color:#a8321f;font-size:11px;white-space:nowrap}
.bump{animation:bump .55s ease-out}
@keyframes bump{30%{transform:scale(1.25)}100%{transform:scale(1)}}
body.dict-mode .typing-stats>span:not(.energy-gain){display:none} /* 받아쓰기: 정확도·속도는 답을 알려 주니 감춘다 */
.typing-prompt .dict-hint{color:var(--dim);font-size:15px;letter-spacing:0}
.typing-prompt.dict-review{border-radius:10px;background:color-mix(in srgb,#ffb27a 18%,transparent);box-shadow:inset 0 0 0 2.5px #e8853a}
.typing-prompt.dict-stale{opacity:.55}
.typing-prompt .d-wrong,.typing-prompt .d-extra{color:#fff;background:#e0533f;border-radius:4px}
.typing-prompt .d-extra{text-decoration:line-through}
.typing-prompt .d-space{background:#f3a59a;box-shadow:inset 0 -3px #e0533f}
.typing-prompt .d-miss{position:relative;display:inline-block;width:0;height:1em;vertical-align:baseline}
.typing-prompt .d-miss:after{content:'';position:absolute;left:-6px;bottom:-9px;border:6px solid transparent;border-bottom:9px solid #e0533f}
body.dict-mode .typing-prompt{padding-top:8px} /* 빠진 띄어쓰기 ∨가 글자 위에 들어갈 자리(문장 칸은 넘치는 글을 자른다) */
.typing-prompt .d-miss.d-gap:after{content:'∨';border:0;left:-.3em;bottom:auto;top:-.5em;color:#e0533f;font-weight:900;font-size:.75em;line-height:1}
.typing-prompt .d-answer{color:#1f7a3a;background:color-mix(in srgb,#9fd68a 30%,transparent);border-radius:6px}
.pot-burst.level-burst b{color:#c98a12;text-shadow:0 0 18px #fff,0 0 40px #ffd65a}
.pot-burst.level-burst span{border-color:#c98a12;color:#7a5208;font-size:24px}
.pot-burst.level-burst small{margin-top:4px;padding:2px 12px;border-radius:999px;background:#fffdf3;font-size:15px;color:#7a5208}
.dict-tools[hidden],.mode-grade[hidden],.lesson-tools[hidden],.penalty[hidden]{display:none}
.admin-servers{align-items:center;font-size:12px}.admin-servers button[aria-pressed=true]{background:#2f6fd6;border-color:#1f4fa0;color:#fff}
/* 급수장(2026-10-17 사용자 요청): 사이드바 탭. 학년 × 급 히트맵(색 = 한 번에 맞힌 비율 빨강→초록, 진하기 = 그 급에서 푼 문장 수, 노란 테 = 지금 급), 아래에 고른 급의 문장 10칸 */
.dict-pane{gap:6px}
.book-sum{margin:0;font-size:12px;color:var(--dim)}.book-sum b{color:var(--ink)}
.book-heat{display:grid;grid-template-columns:34px repeat(10,minmax(0,1fr));gap:2px;align-items:center}
.book-heat small{font:9px var(--pixel);color:var(--dim);text-align:center}
.book-heat b{font-size:10px;white-space:nowrap}
.book-heat button,.book-items button{aspect-ratio:1;min-width:0;padding:0;border:0;border-radius:4px;background:#e9e2d2;cursor:pointer}
.book-heat button.now{box-shadow:inset 0 0 0 2px #e0a63a}
.book-heat button.on,.book-items button.on{outline:2px solid var(--ink);outline-offset:1px}
.book-legend{margin:0;font-size:10px;line-height:1.6;color:var(--dim)}
.book-legend i{display:inline-block;width:10px;height:10px;margin-left:4px;border-radius:3px;vertical-align:-1px}
.lg-none{background:#e9e2d2}.lg-bad{background:hsl(0 62% 50%)}.lg-mid{background:hsl(60 62% 50%)}.lg-good{background:hsl(120 62% 50%)}.lg-now{background:#e9e2d2;box-shadow:inset 0 0 0 2px #e0a63a}
.book-level{display:flex;align-items:baseline;gap:6px;min-width:0}.book-level b{font-size:13px;white-space:nowrap}.book-level small{overflow:hidden;font-size:11px;color:var(--dim);white-space:nowrap;text-overflow:ellipsis}
.book-items{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.book-heat,.book-items{max-width:340px} /* 좁은 화면(사이드바가 넓어짐): 칸이 커져 아래 문장 칸이 밀리지 않게 */
.book-items button{font:10px var(--pixel);color:var(--ink)}
.book-line{flex-shrink:0;min-height:2.9em;margin:0;padding:4px 6px;border:1.5px solid var(--line);border-radius:8px;background:#fffdf5;font-size:11px;line-height:1.4}
/* 성장 탭(2026-10-17 사용자 요청): 두벌식 자판 히트맵(반 칸 단위 21칸 격자)과 날마다 속도 선 그래프. 움직임 없음(타자 지연) */
.grow-kinds{display:flex;gap:4px}
.grow-kinds button{flex:1;padding:2px 0;border:1.5px solid var(--line);border-radius:8px;background:#fffdf5;font-size:11px;color:var(--ink)}
.grow-kinds button[aria-pressed=true]{background:var(--cream);box-shadow:inset 0 0 0 2px var(--coral)}
.grow-keys{display:grid;grid-template-columns:repeat(21,minmax(0,1fr));grid-auto-rows:22px;gap:2px;max-width:340px}
.grow-keys button{min-width:0;padding:0;border:0;border-radius:5px;background:#e9e2d2;font-size:11px;color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden}
.grow-keys button.weak{box-shadow:inset 0 0 0 2px var(--ink)} /* 정확도 90% 아래: 색만으로 알리지 않게 테두리 */
.grow-keys button.on{outline:2px solid var(--ink);outline-offset:1px}
.grow-chart{display:block;width:100%;max-width:340px;height:auto;overflow:visible}
.grow-chart line{stroke:var(--line);stroke-width:1}
.grow-chart text{font:9px var(--pixel);fill:var(--dim)}
.grow-chart polyline{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.grow-chart .avg{stroke:var(--green)}.grow-chart circle.avg{fill:var(--green);stroke:none}
.grow-chart .best{stroke:#c77d1a;stroke-dasharray:4 3}.grow-chart circle.best{fill:#fffdf5;stroke-dasharray:none;stroke-width:1.5}
.grow-chart rect{fill:transparent}
.lg-avg{background:var(--green)}.lg-best{background:#c77d1a}
/* 이어하기(2026-10-17 사용자 요청: 닉네임 + 숫자 4자리, 서버 버전만): 머리말 🔑 단추, 처음 화면 글자 단추, 이어하기 창. 움직임 없음 */
.key-btn{margin-left:5px;padding:1px 4px;border:2px solid var(--line-strong);border-radius:8px;background:var(--cream);font-size:12px;line-height:1.2;vertical-align:1px} /* 닉네임 옆(머리말이 좁아 따로 칸을 두지 않는다) */
.key-btn:hover{border-color:var(--coral)}
.cont-link{display:block;margin:6px auto 0;padding:2px 6px;font-size:13px;color:#1f5fa8;text-decoration:underline}
.cont-link[hidden],.cont-box[hidden]{display:none}
.continue-dialog{width:min(500px,calc(100vw - 32px))}
.continue-dialog.blocking .dialog-close{display:none} /* 다른 기기로 옮겨 감: 숫자를 다시 넣거나 새로 시작할 때까지 닫지 않는다 */
.cont-box{display:grid;gap:6px;margin:8px 0;padding:10px 12px;border:2px solid var(--line);border-radius:12px;background:var(--paper)}
.cont-box p{margin:0}.cont-box>b{font-size:14px}.cont-box small{font-size:11px;color:var(--dim)}
.cont-code{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.cont-code b{font-size:18px;color:var(--ink)}.cont-code b+b{font:22px var(--pixel);letter-spacing:4px;color:var(--green)}
.cont-warn{padding:4px 8px;border-radius:8px;background:color-mix(in srgb,var(--coral) 16%,var(--cream));color:var(--red)}
.cont-fields{display:flex;flex-wrap:wrap;gap:6px}
.cont-fields input{padding:6px 10px;border:2.5px solid var(--line-strong);border-radius:10px;background:var(--cream);font-size:15px;outline:0}
.cont-fields input:focus{border-color:var(--coral)}
#cont-nick{flex:1;min-width:150px}#cont-pin{width:7.5em;letter-spacing:2px}
.cont-box .wood-btn{justify-self:start;padding:5px 16px;font-size:14px}
#cont-msg{min-height:1.5em;margin:4px 0 0;font-size:13px;color:var(--ink)}
/* 우리 반(이어하기 창 안, 2026-10-17 사용자 요청: 선생님 반 화면): 선생님이 보는 것 목록은 좁은 화면에서 한 줄로 */
.cls-see{margin:0;padding-left:18px;font-size:12px;line-height:1.55;columns:2;column-gap:14px}
@media(max-width:520px){.cls-see{columns:1}}
.cls-name b{font-size:15px}.cls-name small{color:var(--dim)}
#cls-code{width:10em;letter-spacing:2px;text-transform:uppercase}
.cont-fields[hidden],#cls-in[hidden],#cls-join[hidden],#cls-hint[hidden]{display:none} /* .cont-fields가 display:flex라 hidden이 먹지 않는다 */
a.cont-link{width:fit-content} /* 기록 안내 링크(2026-10-17 사용자 요청): 단추처럼 글자 폭만, 가운데 */
/* 맞춤법 카드(2026-10-17): 받아쓰기에서 처음에 틀린 문장을 마치면 전장 가운데에 큰 글씨 규칙·예시가 잠깐 떴다가 사라진다. 글씨는 전장 높이에 맞춰(cqh) 줄인다. 나타날 때 한 번만 움직이고, 남은 시간 막대는 한 번 줄어든다 */
.rule-card{position:absolute;left:50%;top:50%;z-index:32;width:min(620px,calc(100% - 24px));max-height:calc(100% - 16px);overflow:hidden;box-sizing:border-box;display:grid;gap:clamp(3px,1.2cqh,8px);padding:clamp(10px,2.6cqh,18px) clamp(14px,3cqw,24px) clamp(14px,3cqh,20px);border:4px solid #c98a12;border-radius:20px;background:#fffdf3;box-shadow:0 14px 30px -10px rgba(40,25,10,.55),0 0 0 6px #fff3cf;color:var(--ink);text-align:center;cursor:pointer;transform:translate(-50%,-50%) scale(.85);opacity:0;transition:transform .35s cubic-bezier(.2,1.4,.4,1),opacity .25s}
.rule-card.on{transform:translate(-50%,-50%);opacity:1}
.rule-card.still{transition:none}
.rule-card p,.rule-card h3,.rule-card ul{margin:0}
.rule-tag{font:clamp(11px,2.4cqh,14px) var(--pixel);color:#7a5208}
.rule-word{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px 14px;font-size:clamp(26px,8cqh,46px);line-height:1.15}
.rule-word b{color:var(--green)}
.rule-word b::before{content:'⭕ ';font-size:.6em}
.rule-word s{color:var(--red);text-decoration-thickness:3px}
.rule-word s::before{content:'❌ ';font-size:.6em;display:inline-block;text-decoration:none}
.rule-word span{font-size:.6em;color:var(--dim)}
.rule-card h3{font-size:clamp(17px,4.6cqh,26px);color:#7a5208}
.rule-say{font-size:clamp(14px,3.5cqh,19px);line-height:1.45;text-wrap:balance}
.rule-ex{list-style:none;padding:0;display:grid;gap:clamp(2px,.8cqh,6px);justify-items:center;font-size:clamp(15px,3.9cqh,21px)}
.rule-ex li{padding:1px 12px;border-radius:10px;background:#f5ecd4}
.rule-ex mark{background:#ffe27a;color:inherit;font-weight:700;padding:0 2px;border-radius:4px}
.rule-ex small{font-size:.75em;color:var(--dim);margin-left:4px}
.rule-tip{font-size:clamp(14px,3.4cqh,18px);font-weight:700;color:#2f6a85}
.rule-time{display:block;height:5px;border-radius:999px;background:#c98a12;transform-origin:left;margin-top:2px}
.rule-card.on .rule-time{animation:rule-time var(--ms,9s) linear forwards}
.rule-card.still .rule-time{animation:none;opacity:.5}
@keyframes rule-time{to{transform:scaleX(0)}}
.rule-close{font-size:clamp(11px,2.3cqh,13px);color:var(--dim)}