@charset "UTF-8";
/* =====================================================================
   킹수학 배틀 첫 화면 · 게임판 스타일 — index.php 의 <style> 을 떼어 낸 것
   예전에는 index.php 안에 있어(약 105KB) 열 때마다 새로 받았다. km-battle.css?v=고친시각 으로
   불러오면 서버가 30일 캐시하고, 고치면 주소의 v 가 바뀌어 곧바로 새로 받는다.
   ===================================================================== */
/* === [핵심] 색상 변수 설정 (다크모드 고정) === */
:root {
    /* 다크 모드 (기본값) — 바탕은 킹수학 클래스(class/css/style.css)와 같은 보랏빛 검정 */
    --bg: #13101d;        /* 가장 뒤 바탕 (클래스 --bg) */
    --bg-2: #1a1528;
    --panel-bg: #1c1729;  /* 카드, 메뉴 배경 */
    --panel-2: #221b33;   /* 카드 안 한 단계 밝은 띠 */
    --field-bg: #29213c;  /* 펼침메뉴 · 입력칸 */
    --dark: #efeaf7;      /* 기본 텍스트 (클래스 --txt) */
    --text-muted: #a698c0; /* 클래스 --muted */
    --border-color: #382e52; /* 클래스 --line */
    --line: rgba(196,176,255,.10);
    --line-strong: rgba(196,176,255,.20);
    --line-hover: rgba(214,198,255,.38);
    /* 강조색 — 학년을 고르면 자바스크립트가 이 값을 바꾼다 */
    --accent: #ffd43b;
    --accent-soft: rgba(255,212,59,.12);
    --accent-line: rgba(255,212,59,.38);
    --accent-ring: rgba(255,212,59,.2);

    /* 팀 배경색 (다크모드용: 어두운 톤) */
    --dog-color: #332b00;
    --cat-color: #1e1b2e;
    --rabbit-color: #2e151a;
    --hamster-color: #2e1e0f;
    --panda-color: #0f2e26;
    --monkey-color: #221826;

    /* 수학 영역 색상 (다크모드용: 배경은 어둡게, 텍스트는 밝게) */
    --math-blue: #4dabf7; --math-blue-light: #183e5c;
    --math-red: #ff8787; --math-red-light: #4a1818;
    --math-green: #69db7c; --math-green-light: #164020;
    --math-yellow: #fcc419; --math-yellow-light: #423202;
    --math-purple: #b197fc; --math-purple-light: #2d1e4a;
    --math-cyan: #20c997; --math-cyan-light: #0d382e;
    --math-pink: #e64980; --math-pink-light: #421022;
    --math-orange: #fd7e14; --math-orange-light: #422005;
}

body {
    margin: 0;
    background: var(--bg);
    background-image:
        radial-gradient(120% 62% at 50% -14%, var(--accent-soft) 0%, rgba(0,0,0,0) 62%),
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%);
    background-attachment: fixed;
    color: var(--dark);
    /* 폰트: 시스템 기본 글꼴 */
    font-family: system-ui, -apple-system, 'Segoe UI', 'Malgun Gothic', '맑은 고딕', 'Apple SD Gothic Neo', Roboto, sans-serif;
    overflow: hidden;
    user-select: none; -webkit-user-select: none;
    touch-action: pan-y; overscroll-behavior: none;
    -webkit-text-size-adjust: none;
    display: flex; flex-direction: column;
    height: 100vh; height: -webkit-fill-available; height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
}

/* body 에 붙은 유틸리티 7개 — 예전에는 Tailwind CDN(400KB)이 브라우저에서 만들어 주던 것 (값은 그대로).
   applyLanguage() 가 body 클래스를 이 이름들로 갈아 끼우므로 이름을 바꾸지 않는다 */
.bg-gray-900 { background-color: rgb(17, 24, 39); }
.text-gray-100 { color: rgb(243, 244, 246); }
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.relative { position: relative; }
.overflow-x-hidden { overflow-x: hidden; }

/* 아이콘(공유 QR · 트로피 · 기록) — 예전 Font Awesome 글꼴 대신 SVG (KM_ICONS) */
.km-ico { width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.125em; }

/* === 오버레이 (시작/종료 화면) === */
#overlay {
    position: fixed; inset: 0;
    background: var(--bg);
    background-image:
        radial-gradient(120% 62% at 50% -14%, var(--accent-soft) 0%, rgba(0,0,0,0) 62%),
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%);
    opacity: 1;
    display: flex; flex-direction: column;
    /* 바탕이 불투명해 뒤를 흐리게 하는 backdrop-filter(blur 15px)는 보이지도 않으면서
       첫 화면을 스크롤할 때마다 화면 전체를 흐리는 계산만 더했다 — 뺐다 */
    z-index: 100;
    text-align: center; padding: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y;
}

.overlay-content {
    flex: 1 0 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: flex-start;
    padding: 20px 0 40px; width: 100%; box-sizing: border-box;
    margin: 0;
}

@media (min-width: 769px) and (min-height: 740px) {
    #overlay:not(.has-rank) .overlay-content {
        margin: auto 0;
        justify-content: center;
    }
}

.title-area { margin-bottom: 18px; }

#msgTitle {
    font-size: 3.6rem;
    color: var(--dark);
    margin: 0; font-weight: 500;
    text-shadow: 0 0 20px rgba(255,255,255,0.1); word-break: keep-all; line-height: 1.2;
}
.subtitle {
    color: var(--text-muted);
    font-size: 1.2rem; margin-top: 0px; line-height: 1.4;
}

/* 전자칠판은 대개 1200px 이상이라 가로로 넉넉하게 잡는다 */
#setupArea {
    width: 1040px; max-width: 92vw;
    margin: 0 auto 6px auto;
    display: flex; flex-direction: column; gap: 15px;
}

/* 로고 */
.logo-img {
    height: 92px;
    width: auto;
    max-width: 92vw;
    display: block;
    margin: 0 auto;
}

/* ===================== 첫 화면 설정 보드 ===================== */
.board {
    width: 100%; background: var(--panel-bg);
    border: 1px solid var(--line-strong); border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 28px 64px -28px rgba(0,0,0,.95);
}

/* 학년 탭 — 알약 모양 세그먼트 */
.grade-tabs {
    display: flex; gap: 5px; padding: 8px;
    background: var(--panel-2); border-bottom: 1px solid var(--line-strong);
    overflow-x: auto; scrollbar-width: none;
}
.grade-tabs::-webkit-scrollbar { display: none; }
.grade-tab {
    flex: 1 1 0; min-width: 66px; padding: 10px 6px;
    border: 1.5px solid transparent; background: transparent; cursor: pointer;
    color: #c4b9d8; font-family: inherit; font-size: 1.05rem; font-weight: 800;
    letter-spacing: -.01em; border-radius: 11px; white-space: nowrap;
    transition: color .15s, background-color .15s, border-color .15s;
}
.grade-tab:hover { color: var(--dark); background: rgba(255,255,255,.06); }
.grade-tab.active {
    color: var(--accent); font-weight: 900;
    background: var(--accent-soft); border-color: var(--accent-line);
}
.grade-tab.quick.active { color: #63e6be; background: rgba(99,230,190,.12); border-color: rgba(99,230,190,.35); }
/* 맨 오른쪽 '사칙연산' 탭 — 학년이 아니라 모아보기라는 걸 색으로 알린다 */
.grade-tab.ops { color: #38d9a9; }
.grade-tab.ops.active { color: #38d9a9; background: rgba(56,217,169,.12); border-color: rgba(56,217,169,.4); }

/* 고르는 줄 — 이름표는 칸 위에, 칸은 한 줄로 */
.pick-band, .opt-band {
    display: flex; align-items: flex-end; flex-wrap: wrap;
    gap: 10px 12px; padding: 16px;
    transition: opacity .18s;
}
.pick-band { border-bottom: 1px solid var(--line); }
.opt-band  { border-top: 1px solid var(--line); }
.pick-cell, .opt-cell {
    min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 7px;
}
.pick-cell.unit { flex: 1 1 250px; }
.pick-cell.type { flex: 1.45 1 330px; }
/* 인원 · 시간 · 골키퍼 + [학생명 입력] [배틀 기록] 이 한 줄에 들어가게 칸의 바탕 폭을 잡는다 */
.opt-cell  { flex: 1 1 140px; }
.opt-cell.game   { flex: 1.15 1 190px; }
.opt-cell.narrow { flex: .75 1 100px; }

/* 학교 · 학년 · 반 (1인 개인 랭킹전에서만 · 넣지 않아도 되는 칸)
   — 게임 모드 · 닉네임과 같은 줄에 끼면 학교 이름이 잘려서 아예 아랫줄을 통째로 쓴다 */
.opt-cell.school-cell { flex: 1 1 100%; }
.opt-optional {
    font-weight: 400; font-size: .92em; color: var(--text-muted); opacity: .8;
}
.school-row { display: flex; gap: 10px; align-items: stretch; min-width: 0; }
.school-row .pick-select { min-width: 0; }
.school-row #schoolGrade, .school-row #schoolClass { flex: 0 0 130px; }
.school-find { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.school-find .pick-select { flex: 1 1 auto; padding-right: 34px; }
.school-clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
    border: 0; background: transparent; color: var(--text-muted);
    font-family: inherit; font-size: .85rem; line-height: 1;
}
.school-clear:hover { color: var(--accent); background: var(--accent-soft); }
.school-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
    max-height: 244px; overflow-y: auto;
    background: var(--panel-2); border: 1px solid var(--line-strong);
    border-radius: 12px; box-shadow: 0 12px 28px rgba(0,0,0,.45);
}
.school-list[hidden] { display: none; }
.school-list button {
    display: flex; width: 100%; gap: 8px; align-items: baseline; text-align: left;
    padding: 9px 12px; background: transparent; border: 0; cursor: pointer;
    font-family: inherit; font-size: .92rem; color: var(--dark);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.school-list button:last-child { border-bottom: 0; }
.school-list button:hover, .school-list button:focus-visible {
    background: var(--accent-soft); color: var(--accent); outline: none;
}
.school-list button b {
    flex: 1 1 auto; min-width: 0; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.school-list button span {
    flex: 0 0 auto; margin-left: auto; white-space: nowrap;
    font-size: .82rem; color: var(--text-muted);
}
.school-note { padding: 10px 12px; font-size: .88rem; color: var(--text-muted); }

/* 학교를 넣었을 때만 나오는 알림 — 실명 대신 별명을 쓰라고 */
.nick-warn {
    flex: 1 1 100%; margin: 0; padding: 9px 12px;
    border-radius: 10px; font-size: .87rem; line-height: 1.5;
    color: #ffd8a8; background: rgba(255,169,77,.10); border: 1px solid rgba(255,169,77,.35);
}
.nick-warn b { color: #ffc078; }
.nick-warn[hidden] { display: none; }

/* 문제 유형 + '예시' 단추 (예시 단추는 폰에서만 쓴다) */
.type-row { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.type-row .pick-select { flex: 1 1 auto; min-width: 0; }
.ex-toggle {
    display: none; flex: 0 0 auto; font-family: inherit; font-size: .9rem; font-weight: 600;
    color: var(--accent); background: var(--field-bg); border: 1px solid var(--accent-line);
    border-radius: 12px; padding: 0 14px; cursor: pointer;
}
.ex-toggle[aria-expanded="true"] { background: var(--accent-soft); }

/* 폰 전용 칸 — 기본은 감추고, 폰에서만 보인다 */
.m-only { display: none; }
.m-mode-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 0 12px 12px;
}
.m-mode-grid[hidden] { display: none; }
.m-mode-card {
    display: flex; flex-direction: column; gap: 6px; padding: 0 0 8px; overflow: hidden;
    font-family: inherit; text-align: center; cursor: pointer;
    background: var(--field-bg); border: 2px solid var(--line); border-radius: 14px; color: var(--dark);
}
.m-mode-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0d12; }
.m-mode-card b { font-size: .88rem; font-weight: 700; }
.m-mode-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.m-mode-card.on b::after { content: ' ✓'; color: var(--accent); }

/* 학생 명단 자동순환 — 게임판 위 각자의 키패드 자리에 뜨는 준비 완료 */
.rg-banner {
    position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 3000; max-width: 94vw;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
    padding: 8px 16px; border-radius: 16px; background: rgba(15, 20, 35, .96); border: 2px solid #ffd24a;
    color: #fff; font-size: clamp(14px, 1.5vw, 20px);
}
.rg-banner b { color: #ffd24a; }
.rg-banner em { font-style: normal; color: #86efac; font-weight: 700; }
.rg-quit { font: inherit; font-size: .85em; padding: 4px 12px; border-radius: 10px; border: 1px solid #6b7280; background: #1f2937; color: #e5e7eb; cursor: pointer; }
.rg-seat {
    position: absolute; left: 4px; right: 4px; bottom: 4px; z-index: 60;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    background: rgba(0, 0, 0, .62); border: 3px dashed rgba(255, 255, 255, .5); border-radius: 16px;
}
.rg-name { color: #fff; font-weight: 900; font-size: clamp(18px, 2.2vw, 34px); text-align: center; word-break: keep-all; padding: 0 4px; }
.rg-btn {
    width: min(92%, 230px); min-height: clamp(64px, 11vh, 110px); font-family: inherit; font-size: clamp(18px, 2vw, 28px);
    font-weight: 900; color: #fff; background: #2563eb; border: 4px solid #fff; border-radius: 18px; cursor: pointer; touch-action: manipulation;
}
.rg-btn.done {
    /* 누른 뒤(대기중)는 '아직 안 누른 단추'와 절대 헷갈리면 안 된다 —
       자리 색에 쓰는 초록과 같은 색이면 남의 자리가 이미 눌린 것처럼 보인다.
       자리 색은 단추에 직접(style) 칠하므로 !important 로 덮는다. */
    background: #3f4757 !important; color: #aeb8c9; border-color: rgba(255, 255, 255, .35);
}

/* 게임 종류 썸네일 — 왼쪽 칸이 예시 줄 · 게임 모드 줄 두 줄 높이를 차지한다 */
.play-band { display: grid; grid-template-columns: 260px minmax(0, 1fr); align-items: stretch; }
.play-main { min-width: 0; display: flex; flex-direction: column; }
.play-main .preview-wrap { flex: 1 1 auto; }
/* 왼쪽 칸 — 썸네일(게임 종류) 아래에 1인 개인 랭킹전일 때만 [전체 랭킹전 순위] [공유 QR] */
.gt-col {
    display: flex; flex-direction: column; justify-content: center; min-width: 0;
    background: var(--panel-2); border-right: 1px solid var(--line-strong);
}
.gt-thumb {
    display: flex; flex-direction: column; justify-content: center; gap: 9px;
    padding: 14px 14px 16px; margin: 0; border: 0;
    background: transparent; color: var(--dark); font-family: inherit; text-align: left; cursor: pointer;
}
.gt-thumb img {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px;
    border: 1.5px solid var(--line-strong); background: #0b0d12; transition: border-color .15s, box-shadow .15s;
}
.gt-thumb:hover img, .gt-thumb:focus-visible img { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.gt-thumb-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.gt-thumb-name b { font-size: 1.12rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gt-thumb-change {
    flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--accent); border: 1.5px solid var(--accent-line);
    border-radius: 999px; padding: 2px 10px;
}
.gt-thumb:hover .gt-thumb-change { background: var(--accent-soft); }
.gt-solo-btns { display: flex; gap: 8px; padding: 0 14px 16px; margin-top: -4px; }
.gt-solo-btn {
    flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box; padding: 0 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border-radius: 11px; border: 1.5px solid var(--line-strong); background: var(--field-bg);
    color: var(--dark); font-family: inherit; font-size: .86rem; font-weight: 700;
    white-space: nowrap; text-decoration: none; cursor: pointer;
    transition: border-color .15s, color .15s, background-color .15s;
}
.gt-solo-btn .km-ico { font-size: .9em; color: var(--accent); }
.gt-solo-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.gt-solo-btn:active { transform: translateY(1px); }
@media (max-width: 768px) {
    .play-band { grid-template-columns: 1fr; }
    .gt-col { border-right: 0; }
    .gt-thumb {
        display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto 1fr;
        column-gap: 12px; row-gap: 4px; align-items: center;
        padding: 12px;
    }
    .gt-solo-btns { padding: 0 12px 12px; margin-top: 0; }
    .gt-solo-btn { height: 44px; font-size: .9rem; }
    .gt-thumb .pick-label { grid-column: 2; grid-row: 1; align-self: end; }
    .gt-thumb img { grid-column: 1; grid-row: 1 / 3; }
    .gt-thumb-name { grid-column: 2; grid-row: 2; align-self: start; }
    .gt-thumb-name b { font-size: 1.02rem; }
}
.km-modal-box.gt-box { width: min(1120px, 96vw); max-width: 96vw; display: flex; flex-direction: column; max-height: 92vh; }
/* 카드 7장 — 윗줄 4장 · 아랫줄 3장(가운데 맞춤). 카드 크기는 모두 같다.
   줄 높이는 카드 내용만큼 — 창 높이에 맞춰 카드가 눌려 설명이 잘리지 않게, 넘치면 스크롤 */
.gt-grid {
    display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 12px;
    padding: 14px 16px 16px; overflow-y: auto; min-height: 0; flex: 1 1 auto;
}
.gt-card {
    flex: 0 0 calc((100% - 36px) / 4); min-width: 0;
    display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden;
    border-radius: 14px; border: 2px solid var(--line-strong); background: var(--field-bg); color: var(--dark);
    font-family: inherit; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.gt-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.gt-card.on { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.gt-card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #0b0d12; }
.gt-body { display: flex; flex-direction: column; gap: 3px; padding: 8px 11px 12px; }
.gt-body b { font-size: 1rem; }
.gt-card.on .gt-body b::after { content: '  ✓ 선택됨'; font-size: .78rem; color: var(--accent); }
.gt-tag { font-size: .76rem; color: var(--accent); }
/* 설명은 네 줄 높이로 맞춰 윗줄 · 아랫줄 카드 높이가 같게 */
.gt-desc { font-size: .8rem; color: var(--text-muted); line-height: 1.42; word-break: keep-all; min-height: 5.68em; }
@media (max-width: 1000px) {
    .gt-card { flex-basis: calc((100% - 24px) / 3); }
}
@media (max-width: 768px) {
    .gt-box { max-height: 100dvh; }
    .gt-grid { gap: 10px; padding: 10px; }
    .gt-card { flex-basis: calc((100% - 10px) / 2); }
    .gt-body { padding: 8px 9px 10px; }
    .gt-body b { font-size: .95rem; }
    .gt-card.on .gt-body b::after { content: ' ✓'; }
    .gt-desc { font-size: .78rem; }
}

/* 추가 게임(월드컵 축구 · 슈팅 배틀)은 전체 화면 iframe 으로 띄운다 */
#extGameLayer { position: fixed; inset: 0; z-index: 160; display: none; background: #000; }
#extGameLayer iframe { width: 100%; height: 100%; border: 0; display: block; }
body.ext-game-open #resetBtn, body.ext-game-open #gameFsBtn, body.ext-game-open #header { display: none !important; }
.qr-setup { display: block; margin-top: 6px; color: var(--accent); font-size: .85rem; line-height: 1.4; word-break: keep-all; }
.pick-label {
    flex: 0 0 auto; font-size: .82rem; font-weight: 700; letter-spacing: .01em;
    color: var(--text-muted); background: none; border-radius: 0; padding: 0 2px;
    white-space: nowrap; text-align: left;
}

/* 펼침메뉴 · 입력칸 — 같은 높이, 같은 모서리 */
.pick-select {
    flex: 1 1 auto; min-width: 0; width: 100%; height: 46px;
    font-family: inherit; font-size: 1rem; font-weight: 600; padding: 0 40px 0 13px;
    border-radius: 12px; border: 1.5px solid var(--line-strong);
    background: var(--field-bg); color: var(--dark); cursor: pointer; outline: none;
    box-sizing: border-box; transition: border-color .15s, background-color .15s, box-shadow .15s;
    -webkit-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23a698c0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    text-overflow: ellipsis;
}
.pick-select:hover { border-color: var(--line-hover); }
.pick-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.pick-select:disabled { opacity: 1; cursor: default; color: var(--text-muted); background-image: none; }
.pick-select option { background: var(--panel-2); color: var(--dark); }
input.pick-select { cursor: text; padding-right: 13px; background-image: none; }
input.pick-select::placeholder { color: #6f6390; font-weight: 500; }

/* 보조 버튼 (문제 고르기 · 문제지 인쇄 · 랜덤 닉네임) */
.pick-more, .opt-band .tool-btn, .dice-btn {
    flex: 0 0 auto; align-self: flex-end; height: 46px; box-sizing: border-box;
    padding: 0 16px; border-radius: 12px;
    border: 1.5px solid var(--line-strong); background: var(--field-bg); color: var(--dark);
    font-family: inherit; font-size: .95rem; font-weight: 700; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    transition: border-color .15s, color .15s, background-color .15s;
}
.pick-more:hover, .opt-band .tool-btn:hover, .dice-btn:hover {
    border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.pick-more:active, .opt-band .tool-btn:active, .dice-btn:active { transform: translateY(1px); }
.dice-btn { width: 46px; padding: 0; font-size: 1.15rem; color: var(--accent);
            display: inline-flex; align-items: center; justify-content: center; }

/* 예시 문제 */
.preview-wrap {
    display: flex; align-items: stretch; gap: 12px;
    padding: 14px 16px; background: var(--panel-2);
}
.preview-tag {
    flex: 0 0 auto; align-self: center;
    font-size: .8rem; font-weight: 600; letter-spacing: .01em;
    color: var(--text-muted); background: none; border-radius: 0; padding: 0;
    writing-mode: horizontal-tb;
}
.preview-row { flex: 1 1 auto; display: flex; gap: 10px; overflow-x: auto; align-items: stretch; }
.preview-row::-webkit-scrollbar { height: 4px; }
.preview-row::-webkit-scrollbar-thumb { background: #3a3f4c; border-radius: 2px; }
.preview-card {
    flex: 1 1 0; min-width: 132px;
    background: var(--field-bg); border: 1px solid var(--line); border-radius: 14px;
    padding: 12px 12px 10px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 7px; min-height: 84px;
}
.preview-q { color: #fff; font-size: 1.3rem; line-height: 1.25; text-align: center; white-space: normal; }
.preview-q .frac { font-size: .95em; }
.preview-q .qtxt { font-size: .58em; color: var(--accent); display: block; }
.preview-q .small { font-size: .78em; display: block; }
.preview-a { font-size: .82rem; color: #57d9a8; font-weight: 600; letter-spacing: .01em; }
.preview-empty { color: var(--text-muted); font-size: .95rem; padding: 10px; }
.preview-side-btns {
    flex: 0 0 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 8px; align-self: center;
}
.preview-side-btns .tool-btn {
    height: 38px; padding: 0 12px; font-size: .85rem; font-weight: 700; border-radius: 10px;
    background: var(--field-bg); border: 1.5px solid var(--line-strong); color: var(--dark);
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
    transition: .15s; white-space: nowrap; font-family: inherit;
}
.preview-side-btns .tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.preview-refresh {
    flex: 0 0 auto; align-self: center; width: 42px; height: 42px; border-radius: 12px;
    border: 1.5px solid var(--line-strong); background: var(--field-bg); color: var(--text-muted);
    font-size: 1.2rem; cursor: pointer; transition: .15s;
}
.preview-refresh:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.preview-refresh:active { transform: rotate(-90deg); }

/* 하단 도구 버튼 */
.tool-row {
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
    margin: 14px auto 0; width: 100%; max-width: 760px;
}
.tool-btn {
    flex: 0 0 auto; padding: 9px 15px;
    border-radius: 10px; border: 1px solid var(--line-strong); background: transparent;
    color: var(--text-muted);
    font-family: inherit; font-size: .87rem; font-weight: 600; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: border-color .15s, color .15s, background-color .15s;
}
.tool-btn:hover { border-color: var(--line-hover); color: var(--dark); background: rgba(255,255,255,.04); }
.tool-btn:active { transform: translateY(1px); }
#oldVersionLink { background: transparent; border: 1px solid var(--line); color: #7d7196; font-size: .87rem; }
#oldVersionLink:hover { border-color: var(--line-hover); color: var(--text-muted); }
.pick-count {
    display: none; background: var(--accent); color: #14161c; font-size: .75rem;
    font-weight: 700; border-radius: 999px; padding: 1px 7px;
}
.pick-count.on { display: inline-block; }

/* ===================== 공통 모달 ===================== */
.km-modal {
    display: none; position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.72); align-items: center; justify-content: center; padding: 16px;
}
.km-modal.open { display: flex; }
body.km-modal-open .fixed-btn { display: none !important; }
.km-modal-box {
    width: 810px; max-width: 88vw; max-height: 92vh;
    background: var(--panel-bg); border: 1px solid var(--line);
    border-radius: 20px; display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,.85);
}
.km-modal-head {
    display: flex; align-items: center; gap: 10px; padding: 15px 18px;
    border-bottom: 1px solid var(--line); background: var(--panel-2);
}
.km-modal-head b { font-size: 1.15rem; color: var(--dark); }
.km-modal-sub { font-size: .85rem; color: var(--text-muted); }
.km-x { margin-left: auto; background: transparent; border: none; color: var(--text-muted); font-size: 1.3rem; cursor: pointer; }
.km-x:hover { color: #ff8787; }
.km-modal-head b { font-weight: 600; }
.km-modal-foot {
    display: flex; gap: 8px; justify-content: flex-end; padding: 13px 18px;
    border-top: 1px solid var(--line); background: var(--panel-2);
}
.mini-btn {
    padding: 10px 17px; border-radius: 11px; border: 1px solid var(--line-strong);
    background: var(--field-bg); color: var(--dark); font-family: inherit; font-size: .93rem;
    cursor: pointer; transition: .15s;
}
.mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.mini-btn.go { background: var(--accent); color: #14161c; font-weight: 700; border-color: var(--accent); }
.mini-btn.go:hover { filter: brightness(1.07); color: #14161c; }
.mini-btn.ghost { color: var(--text-muted); background: transparent; }

/* 문제 고르기 */
.pick-toolbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; flex-wrap: wrap; border-bottom: 1px solid var(--border-color); }
.pick-grades { display: flex; gap: 4px; flex-wrap: wrap; }
.pick-gbtn { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text-muted); font-family: inherit; cursor: pointer; transition: .15s; }
.pick-gbtn:hover { border-color: var(--line-hover); color: var(--dark); }
.pick-gbtn.active { background: var(--accent); border-color: var(--accent); color: #14161c; font-weight: 700; }
.pick-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pick-sum { font-size: .9rem; color: var(--accent); }
.pick-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.pick-unit { margin-top: 12px; }
.pick-unit-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; color: var(--dark); font-weight: 600; font-size: .96rem; }
.pick-unit-head .mini-btn { padding: 3px 9px; font-size: .8rem; margin-left: auto; }
.pick-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; margin-top: 6px; }
.pick-type { display: flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: .91rem; color: var(--text-muted); transition: .12s; }
.pick-type:hover { border-color: var(--line-hover); color: var(--dark); }
.pick-type.on { background: var(--accent-soft); border-color: var(--accent-line); color: var(--dark); }
.pick-type input { accent-color: var(--accent); width: 16px; height: 16px; }

/* 랭킹 */
.rank-title { padding: 11px 18px; color: var(--accent); font-size: 1rem; border-bottom: 1px solid var(--line); }
.rank-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.rank-list { list-style: none; margin: 0; padding: 0; }
.rank-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,.05); color: var(--dark); }
.rank-no { flex: 0 0 42px; text-align: center; color: var(--text-muted); font-weight: bold; }
.rank-list li.top .rank-no { color: var(--accent); font-size: 1.1rem; }
/* 닉네임 + (넣은 사람만) 학교 · 학년 · 반 — 한 줄에 다 안 들어가면 아래 줄로 내려간다.
   … 으로 자르지 않으므로 좁은 폰에서도 이름과 학교가 그대로 보인다 */
.rank-who {
    flex: 1 1 auto; min-width: 0;
    display: flex; flex-wrap: wrap; align-items: baseline;
    column-gap: 8px; row-gap: 2px;
}
.rank-nick { flex: 0 1 auto; word-break: keep-all; }
.rank-where {
    flex: 0 1 auto; font-size: .82rem; color: var(--text-muted);
    white-space: normal; word-break: keep-all;
}
.rank-score { flex: 0 0 auto; font-weight: 700; color: #57d9a8; }
.rank-time { flex: 0 0 58px; text-align: right; font-size: .8rem; color: var(--text-muted); }
.rank-empty { color: var(--text-muted); text-align: center; padding: 30px 10px; }
.rank-me { background: var(--accent-soft); border-radius: 8px; }

/* 첫 화면 아래쪽 랭킹 (1인 도전) — 모바일 조정은 파일 맨 아래 미디어쿼리에 있음 */
.home-rank {
    width: 100%; margin-top: 16px; background: var(--panel-bg);
    border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
    box-shadow: 0 20px 46px -26px rgba(0,0,0,.85);
}
.home-rank-head {
    display: flex; align-items: center; gap: 8px; padding: 11px 15px;
    background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.home-rank-head b { color: var(--accent); font-size: .96rem; }
.home-rank-head span {
    flex: 1 1 auto; min-width: 0; font-size: .82rem; color: var(--text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 순위판 머리 오른쪽 '전체 랭킹전 순위' (데스크톱 — ranking.php 새 창) */
.home-rank-more {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 9px;
    border: 1px solid var(--line-strong); background: var(--field-bg); color: var(--dark);
    font-family: inherit; font-size: .84rem; font-weight: 700; white-space: nowrap; text-decoration: none;
    cursor: pointer; transition: border-color .15s, color .15s, background-color .15s;
}
.home-rank-more .km-ico { font-size: .9em; color: var(--accent); }
.home-rank-more:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.home-rank .rank-list li { padding: 6px 13px; }
.home-rank .rank-empty { padding: 16px 10px; font-size: .9rem; }

/* 데스크톱 1인 개인 랭킹전 — 게임마다 한 열 (여섯 열), 열마다 1위부터 쭉 아래로.
   여섯 열이 들어가야 해서 설정 보드(1040px)보다 넓게 쓴다 (inline width 를 덮는다) */
.home-rank.multi { width: min(1320px, 96vw) !important; max-width: 96vw !important; }
.home-rank-head b { font-weight: 800; }
.hr-cols {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px;
    padding: 12px; align-items: start;
}
.hr-col {
    min-width: 0; border-radius: 12px; overflow: hidden;
    background: var(--panel-2); border: 1.5px solid var(--line);
    border-top: 3px solid var(--gc, var(--line-strong));
}
.hr-col.on { border-color: var(--accent-line); border-top-color: var(--gc); box-shadow: 0 0 0 2px var(--accent-ring); }
/* 게임 제목 줄은 단추 — 제목이나 오른쪽 작은 QR 을 누르면 그 게임의 도전 QR 을 썸네일과 함께 크게 (#soloQrModal) */
.hr-col-head {
    display: flex; align-items: center; gap: 7px; padding: 7px 8px 7px 10px; width: 100%; box-sizing: border-box;
    background: none; border: 0; border-bottom: 1px solid var(--line);
    font-family: inherit; color: inherit; text-align: left; cursor: pointer;
}
.hr-col-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.hr-col-head > i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--gc); }
.hr-col-head b { font-size: .92rem; font-weight: 800; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hr-col.on .hr-col-head b, .hr-col-head:hover b { color: var(--accent); }
.hr-qr {
    flex: 0 0 auto; margin-left: auto; min-width: 52px; min-height: 52px; padding: 3px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border-radius: 6px; color: #13101d; font-size: 1.5rem; transition: transform .15s;
}
.hr-qr svg { display: block; }   /* 크기는 smallQrSVG 가 칸마다 화면 점 정수 개로 정한 그대로 (늘리지 않는다) */
.hr-col-head:hover .hr-qr { transform: scale(1.08); }
.hr-col .rank-list li { gap: 6px; padding: 5px 8px; font-size: .88rem; border-bottom-color: rgba(255,255,255,.045); }
.hr-col .rank-list li:last-child { border-bottom: 0; }
.hr-col .rank-no { flex: 0 0 24px; font-size: .84rem; }
.hr-col .rank-list li.top .rank-no { font-size: .98rem; }
.hr-col .rank-nick { overflow-wrap: anywhere; }
.hr-col .rank-where { font-size: .72rem; }
.hr-col .rank-score { font-size: .86rem; }
.hr-col .rank-time { display: none; }
.hr-col .rank-empty { padding: 18px 8px; font-size: .82rem; line-height: 1.5; }
@media (max-width: 1100px) {
    .hr-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 1인 랭킹전 도전 QR 크게 보기 — 학기말 등에 교실 화면에 띄워 뒷자리에서도 찍히게.
   --qs 는 QR 한 변, 썸네일은 그 1.2배 폭으로 나란히 둔다 (1280×720 창에서도 한 화면에 들어간다) */
.km-modal.solo-qr { background: rgba(10,8,16,.95); padding: 24px; --qs: min(60vh, 40vw); }
.solo-qr-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 100%; text-align: center; }
.solo-qr-t1 {
    display: flex; align-items: center; gap: 14px; color: var(--dark); line-height: 1.2;
    font-size: clamp(1.5rem, 3.6vw, 2.7rem); font-weight: 800; letter-spacing: -.02em;
}
.solo-qr-t1 i { width: .5em; height: .5em; border-radius: 50%; background: var(--gc); }
.solo-qr-t2 { color: var(--text-muted); font-size: clamp(1rem, 2vw, 1.4rem); font-weight: 700; }
.solo-qr-main { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 3vw, 56px); margin-top: 6px; }
.solo-qr-thumb { margin: 0; width: calc(var(--qs) * 1.2); display: flex; flex-direction: column; gap: 16px; }
.solo-qr-thumb img {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; box-sizing: border-box;
    border-radius: 18px; border: 3px solid var(--gc); box-shadow: 0 24px 50px -24px rgba(0,0,0,.9);
}
.solo-qr-thumb figcaption { color: var(--dark); font-size: clamp(.95rem, 1.6vw, 1.3rem); font-weight: 700; line-height: 1.5; }
.solo-qr-big { width: var(--qs); height: var(--qs); padding: 18px; box-sizing: border-box; background: #fff; border-radius: 22px; }
.solo-qr-big svg, .solo-qr-big img { display: block; width: 100%; height: 100%; }
.solo-qr-foot { display: flex; align-items: center; gap: 10px; max-width: min(1000px, 90vw); }
.solo-qr-foot span { color: var(--text-muted); font-size: .85rem; word-break: break-all; text-align: left; }
.solo-qr-foot .mini-btn { flex: 0 0 auto; padding: 7px 13px; font-size: .85rem; }
.solo-qr-x {
    position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; border-radius: 50%;
    border: 1px solid var(--line-strong); background: var(--panel-2); color: var(--dark); font-size: 1.2rem; cursor: pointer;
}
.solo-qr-x:hover { border-color: var(--accent-line); color: var(--accent); }


.setup-row { display: flex; gap: 10px; width: 100%; }
.setup-group { flex: 1; text-align: left; }

.setup-label {
    font-size: 1.2rem; color: var(--text-muted);
    margin-bottom: 0px; display: block; margin-left: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.custom-select {
    width: 100%; font-family: inherit;
    font-size: 1.2rem; padding: 12px 12px;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    background: var(--panel-bg);
    cursor: pointer; outline: none;
    color: var(--dark);
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}

.math-menu-wrapper {
    width: 480px; max-width: 95vw; margin: 0 auto;
}

.math-menu-container {
    width: 100%; background: var(--panel-bg);
    border-radius: 20px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.math-tabs {
    display: flex;
    background: rgba(128, 128, 128, 0.1); /* 탭 배경 반투명 처리 */
    padding: 8px 8px 0 8px; gap: 4px; overflow-x: auto;
}
.math-tabs::-webkit-scrollbar { display: none; }

.math-tab {
    flex: 1; min-width: 45px; padding: 0px 2px;
    border-radius: 12px 12px 0 0; border: none;
    background: transparent; cursor: pointer;
    transition: all 0.2s; color: var(--text-muted);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.math-tab.active {
    background: var(--panel-bg);
    box-shadow: 0 -3px 10px rgba(0,0,0,0.05);
    color: var(--dark); font-weight: bold;
    transform: translateY(2px);
}

.tab-icon { font-size: 1.4rem; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }
.tab-text { font-size: 0.9rem; white-space: nowrap; overflow: hidden; }

/* 탭 활성화 색상 */
.math-tab[data-type="add"].active { color: var(--math-blue); background: var(--math-blue-light); border-bottom: 2px solid var(--math-blue);}
.math-tab[data-type="sub"].active { color: var(--math-red); background: var(--math-red-light); border-bottom: 2px solid var(--math-red);}
.math-tab[data-type="mul"].active { color: var(--math-green); background: var(--math-green-light); border-bottom: 2px solid var(--math-green);}
.math-tab[data-type="div"].active { color: var(--math-yellow); background: var(--math-yellow-light); border-bottom: 2px solid var(--math-yellow);}
.math-tab[data-type="mix"].active { color: var(--math-purple); background: var(--math-purple-light); border-bottom: 2px solid var(--math-purple);}
.math-tab[data-type="rule"].active { color: var(--math-cyan); background: var(--math-cyan-light); border-bottom: 2px solid var(--math-cyan);}
.math-tab[data-type="find"].active { color: var(--math-pink); background: var(--math-pink-light); border-bottom: 2px solid var(--math-pink);}
.math-tab[data-type="frac"].active { color: var(--math-orange); background: var(--math-orange-light); border-bottom: 2px solid var(--math-orange);}

/* === 단원별 게임 추천 — 배틀 문제가 없는 단원에서 대신 뜬다 === */
/* .play-band 처럼 display 를 가진 규칙이 hidden 을 이기지 못하게 못 박는다 */
#setupArea [hidden], #startBtn[hidden] { display: none !important; }
.reco-band {
    margin: 10px; padding: 14px; border-radius: 14px;
    background: var(--panel-bg); border: 2px solid var(--accent);
}
/* 배틀 문제도 있는 단원 — 설정 아래에 곁들이는 자리라 그림 없이 가로 한 줄로만.
   이름에 마우스를 올리면 그때 썸네일이 뜬다 (문제지 아래쪽과 같은 모양) */
.reco-band.with-battle {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 12px;
    margin: 0 10px 10px; padding: 9px 13px; border-width: 1px; border-color: var(--line-strong);
}
.reco-band.with-battle .reco-head { display: contents; }   /* 이름표도 같은 줄에 */
.reco-band.with-battle .reco-head > b { display: none; }   /* 단원 이름은 위 메뉴에 이미 있다 */
.reco-band.with-battle .reco-head > span { font-size: .9rem; white-space: nowrap; }
.reco-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px 14px; }
.reco-line .rgame { position: relative; display: inline-block; }
.reco-line .rgame > a {
    color: var(--dark); text-decoration: none; font-size: .95rem;
    border-bottom: 1px dotted var(--line-hover); white-space: nowrap;
}
.reco-line .rgame > a:hover, .reco-line .rgame > a:focus-visible {
    color: var(--accent); border-bottom-color: var(--accent);
}
.reco-line .rgame > img {
    display: none; position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
    width: 172px; aspect-ratio: 16 / 10; object-fit: cover; background: #222;
    border: 2px solid var(--accent); border-radius: 9px;
    box-shadow: 0 12px 32px rgba(0,0,0,.6); z-index: 60; pointer-events: none;
}
.reco-line .rgame:hover > img, .reco-line .rgame:focus-within > img { display: block; }
.reco-head { margin-bottom: 12px; line-height: 1.55; }
.reco-head b { color: var(--accent); }
.reco-head > b { display: block; font-size: 1.15rem; margin-bottom: 4px; }
.reco-head > span { font-size: .95rem; color: var(--text-muted); }
.reco-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.reco-card {
    display: flex; flex-direction: column; gap: 6px; padding: 8px;
    border-radius: 10px; border: 2px solid var(--border-color);
    background: transparent; color: inherit; text-decoration: none;
    transition: border-color .15s, transform .15s;
}
.reco-card:hover, .reco-card:focus-visible { border-color: var(--accent); transform: translateY(-2px); }
.reco-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; background: #222; }
.reco-card b { font-size: .9rem; line-height: 1.3; word-break: keep-all; }
.reco-empty { color: var(--text-muted); font-size: .95rem; }
@media (max-width: 480px) {
    .reco-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .reco-card b { font-size: .82rem; }
}

/* === 학년 탭 / 단원 칩 === */
.math-tab[data-type^="G"].active { color: var(--accent); background: var(--accent-soft); border-bottom: 2px solid var(--accent); }
.math-tab[data-type="quick"].active { color: var(--math-cyan); background: var(--math-cyan-light); border-bottom: 2px solid var(--math-cyan); }

.unit-chips {
    display: flex; gap: 6px; padding: 10px 10px 2px 10px;
    overflow-x: auto; background: var(--panel-bg);
}
.unit-chips::-webkit-scrollbar { height: 4px; }
.unit-chips::-webkit-scrollbar-thumb { background: #444; border-radius: 2px; }
.unit-chip {
    flex: 0 0 auto; padding: 6px 12px; border-radius: 999px;
    border: 2px solid var(--border-color); background: transparent;
    color: var(--text-muted); font-size: 0.85rem; cursor: pointer;
    white-space: nowrap; transition: all .15s;
}
.unit-chip.selected { background: var(--accent); border-color: var(--accent); color: #14161c; font-weight: bold; }
.unit-chip.quick.selected { background: var(--math-cyan); border-color: var(--math-cyan); color: #fff; }

.level-list { padding: 10px; background: var(--panel-bg); max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; }
.level-list::-webkit-scrollbar { width: 5px; }
.level-list::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
.level-item.all-random { border-color: var(--accent); }
.level-item.all-random.selected { background-color: var(--accent); color: #14161c; }
.level-item.all-random.selected .level-title,
.level-item.all-random.selected .level-desc { color: #1a1a1a; }

.level-item {
    display: flex; align-items: center; padding: 4px 15px;
    margin-bottom: 8px; border-radius: 12px;
    border: 2px solid var(--border-color);
    background: var(--panel-bg);
    cursor: pointer; transition: all 0.15s; text-align: left;
    color: var(--dark);
}
.level-item:last-child { margin-bottom: 0; }
.level-item.selected { border-color: transparent; background-color: #333; }

/* 리스트 선택 시 배경색 */
.level-list[data-theme="add"] .level-item.selected { background-color: var(--math-blue-light); border-color: var(--math-blue); }
.level-list[data-theme="sub"] .level-item.selected { background-color: var(--math-red-light); border-color: var(--math-red); }
.level-list[data-theme="mul"] .level-item.selected { background-color: var(--math-green-light); border-color: var(--math-green); }
.level-list[data-theme="div"] .level-item.selected { background-color: var(--math-yellow-light); border-color: var(--math-yellow); }
.level-list[data-theme="mix"] .level-item.selected { background-color: var(--math-purple-light); border-color: var(--math-purple); }
.level-list[data-theme="rule"] .level-item.selected { background-color: var(--math-cyan-light); border-color: var(--math-cyan); }
.level-list[data-theme="find"] .level-item.selected { background-color: var(--math-pink-light); border-color: var(--math-pink); }
.level-list[data-theme="frac"] .level-item.selected { background-color: var(--math-orange-light); border-color: var(--math-orange); }

.level-badge {
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(128,128,128,0.2); color: var(--text-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; font-weight: bold; margin-right: 15px; flex-shrink: 0;
}
.level-item.selected .level-badge { color: white; background: rgba(255,255,255,0.2); }
.level-list[data-theme="add"] .level-item.selected .level-badge { background: var(--math-blue); }
.level-list[data-theme="sub"] .level-item.selected .level-badge { background: var(--math-red); }
.level-list[data-theme="mul"] .level-item.selected .level-badge { background: var(--math-green); }
.level-list[data-theme="div"] .level-item.selected .level-badge { background: var(--math-yellow); }
.level-list[data-theme="mix"] .level-item.selected .level-badge { background: var(--math-purple); }
.level-list[data-theme="rule"] .level-item.selected .level-badge { background: var(--math-cyan); }
.level-list[data-theme="find"] .level-item.selected .level-badge { background: var(--math-pink); }
.level-list[data-theme="frac"] .level-item.selected .level-badge { background: var(--math-orange); }

.level-info { flex: 1; display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
.level-title { font-size: 1.15rem; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 레벨 설명 텍스트 색상 */
.level-desc { font-size: 1.15rem; margin-left: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.level-list[data-theme="add"] .level-desc { color: var(--math-blue); }
.level-list[data-theme="sub"] .level-desc { color: var(--math-red); }
.level-list[data-theme="mul"] .level-desc { color: var(--math-green); }
.level-list[data-theme="div"] .level-desc { color: var(--math-yellow); }
.level-list[data-theme="mix"] .level-desc { color: var(--math-purple); }
.level-list[data-theme="rule"] .level-desc { color: var(--math-cyan); }
.level-list[data-theme="find"] .level-desc { color: var(--math-pink); }
.level-list[data-theme="frac"] .level-desc { color: var(--math-orange); }
.level-item.selected .level-desc { color: #e0e0e0; opacity: 1; }

.action-btn-row {
    display: flex; align-items: stretch; justify-content: center; gap: 10px;
    /* 설정판(1040px) 아래에서 너무 길어 보이지 않게 — 폰은 아래 미디어쿼리에서 화면 폭 그대로 */
    margin: 18px auto 0 auto; width: 100%; max-width: 380px;
}
a.qr-btn { text-decoration: none; }
#startBtn {
    flex: 1 1 auto; height: 58px; min-height: 58px;
    font-size: 1.35rem; font-weight: 800; letter-spacing: -.01em;
    padding: 0 18px; border-radius: 16px; border: none;
    background: var(--accent); color: #14161c; cursor: pointer;
    transition: transform .12s, filter .15s, box-shadow .15s;
    font-family: inherit; touch-action: manipulation;
    margin: 0; display: flex; align-items: center; justify-content: center;
    white-space: nowrap; overflow: hidden; flex-shrink: 0; box-sizing: border-box;
}
#startBtn:hover { filter: brightness(1.07); transform: translateY(-1px); }
#startBtn:active { transform: translateY(1px); filter: brightness(.94); }

.qr-btn {
    flex: 0 0 auto; height: 58px; min-height: 58px;
    font-size: .98rem; padding: 0 18px; border-radius: 16px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--text-muted);
    font-family: inherit; cursor: pointer; font-weight: 700;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    white-space: nowrap; transition: .15s; box-sizing: border-box;
}
.qr-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.qr-btn:active { transform: translateY(1px); }

#otherGameLink { text-decoration: none; }

/* 첫 화면에서는 떠 있는 🏠 · ↕️ 단추를 감춘다 (보드가 가려지지 않게) */
body.menu-open .fixed-btn { display: none !important; }

/* === 인게임 스타일 === */
#finalPodium { height: 25vh; width: 100%; display: none; flex-direction: row; }
.podium-col {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; border-top: 4px solid rgba(255,255,255,0.05);
}
.podium-medal {
    font-size: clamp(45px, 5vw, 69px); filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5));
    margin-bottom: 5px; animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.podium-name {
    font-size: clamp(45px, 5vw, 69px); color: var(--dark);
    display: flex; align-items: center; justify-content: center; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
@keyframes popIn { 0% { transform: scale(0); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

#countdownLayer {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.7);
    display: none; align-items: center; justify-content: center;
    z-index: 200; pointer-events: none; backdrop-filter: blur(5px);
}
#countdownText {
    /* 화면의 짧은 쪽에 맞춘다 — 가로 폭(vw)으로 재면 넓은 칠판에서 '시작'이 너무 커진다 */
    font-size: clamp(72px, 30vmin, 360px); color: white; white-space: nowrap;
    text-shadow: 0 0 50px rgba(255,255,255,0.5);
    animation: countAnim 1s ease-out forwards;
}
@keyframes countAnim { 0% { transform: scale(0.3); opacity: 0; } 50% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }

/* === 헤더 & 타이머 === */
#header {
    height: clamp(84px, 17vh, 160px); background: var(--panel-bg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; z-index: 20; padding: 0 -3px;
    border-bottom: 2px solid #333;
}
.header-logo { font-size: clamp(20px, 2vw, 30px); flex: 1; color: var(--text-muted); }
.header-logo a { color: #ff8787; text-decoration: none; transition: all 0.2s ease-in-out; }
.header-logo a:hover { color: #ffc9c9; text-decoration: underline; }
.logo-left { text-align: center; } 
.logo-right { text-align: center; }

#timerDisplay {
    font-size: clamp(52px, 12vh, 120px); padding: 0 20px; color: #ff6b6b;
    text-align: center; width: 260px; min-width: auto;
    font-weight: bold; flex-shrink: 0; text-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
}
.timer-urgent { animation: timerBlink 0.5s infinite; background: #c92a2a !important; color: white !important; border-radius: 20px; box-shadow: 0 0 20px #c92a2a; }
@keyframes timerBlink { 50% { opacity: 0.7; } }

/* === 팀전 전용 스코어보드 === */
#teamScoreBoard {
    display: none; width: 100%; height: 31vh;
    flex-direction: row; justify-content: space-around; align-items: center;
    background: var(--bg); padding: 0 10px; box-sizing: border-box; z-index: 15;
}
.team-card {
    flex: 1; height: 90%; border-radius: 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    position: relative; box-shadow: 0 4px 15px rgba(0,0,0,0.3); margin: 0 5px; border: 2px solid rgba(255,255,255,0.05);
}
.team-A { background: var(--dog-color); }
.team-B { background: var(--rabbit-color); }
.team-C { background: var(--panda-color); display: none; }

/* 팀 이름 · 점수는 화면 폭에 맞춰 줄인다 — 고정 3.5rem 이면 1024px 폭의 2:2:2 에서 셋째 팀 카드가 화면 밖으로 밀렸다 */
.team-card .team-name { font-size: clamp(1.6rem, 3.1vw, 3.5rem); color: var(--dark); margin-bottom: 5px; white-space: nowrap; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.team-card .team-score { font-size: clamp(2.2rem, 3.6vw, 4rem); color: #ff8787; font-weight: bold; display: flex; align-items: center; gap: 10px; text-shadow: 0 0 10px rgba(255,135,135,0.3); }
.team-card .team-rank {
    position: absolute;
    bottom: -30px;
    color: #ccc;
    padding: 5px 20px;
    font-size: 3rem;
    transition: 0.3s;
}
.team-card .team-rank.rank-1 {
    background: #ff6b6b; color: white; transform: scale(1.2);
    border: none; font-weight: bold; box-shadow: 0 0 15px rgba(255, 107, 107, 0.5);
}

/* === 게임판 레이아웃 === */
#arena {
    display: flex; flex: 1 1 0; min-height: 0; width: 100vw; gap: 0;
    touch-action: none; background: #000; overflow: hidden;
}
.teamBox {
    flex: 1 1 0; min-width: 0; min-height: 0;
    display: none; flex-direction: column; align-items: center; justify-content: flex-start;
    padding: 10px 2px; position: relative;
    border-right: 1px solid rgba(255,255,255,0.1);
    overflow: hidden; z-index: 1;
}
body.team-mode .teamTitle, body.team-mode .scoreBadge, body.team-mode .rank-badge { display: none !important; }
/* 팀전 문제 칸 — 아래 여백을 음수로 주면 '.teamBox > .problem { margin: auto 0 }' 의
   위·아래 나눔이 깨져서 문제가 칸 맨 아래로 내려가 입력칸에 10px 가려졌다. 여백은 건드리지 않는다 */
body.team-mode .problem { font-size: 40px; }
.teamBox:last-child { border-right: none; }

.bg-dog { background: var(--dog-color); }
.bg-dog::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='35'%3E🐶%3C/text%3E%3C/svg%3E"); }
.bg-cat { background: var(--cat-color); }
.bg-cat::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='35'%3E🐱%3C/text%3E%3C/svg%3E"); }
.bg-rabbit { background: var(--rabbit-color); }
.bg-rabbit::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='35'%3E🐰%3C/text%3E%3C/svg%3E"); }
.bg-hamster { background: var(--hamster-color); }
.bg-hamster::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='35'%3E🐹%3C/text%3E%3C/svg%3E"); }
.bg-panda { background: var(--panda-color); }
.bg-panda::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='35'%3E🐼%3C/text%3E%3C/svg%3E"); }
.bg-monkey { background: var(--monkey-color); }
.bg-monkey::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='35'%3E🐵%3C/text%3E%3C/svg%3E"); }
.teamBox::before, .podium-col::before, .ses-col::before {
    content: ""; position: absolute; inset: 0; opacity: 0.05; z-index: -1; pointer-events: none;
    background-size: 80px 80px; background-repeat: repeat;
}

.teamTitle {
    font-size: calc(clamp(40px, 4vw, 60px) * var(--deco, 1)); min-font-size: 18px; margin: 0; color: var(--dark);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center;
    width: 100%; z-index: 15; margin-bottom: calc(5px * var(--deco, 1));
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.scoreBadge {
    font-size: calc(clamp(45px, 4vw, 60px) * var(--deco, 1)); color: #ff8787; margin: 2px 0; z-index: 15; margin-bottom: calc(5px * var(--deco, 1)); text-shadow: 0 0 5px rgba(255,135,135,0.3);
}
.rank-badge {
    font-size: calc(clamp(40px, 5vw, 55px) * var(--deco, 1)); /* 메달 기본 크기 */
    width: 100%;
    height: calc(60px * var(--deco, 1)); /* 높이 고정 (이모지 바뀌어도 틀 안 움직이게) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important; /* 배경 제거 */
    box-shadow: none !important; /* 박스 그림자 제거 */
    border: none !important;
    padding: 0;
    margin-bottom: calc(5px * var(--deco, 1));
    z-index: 15;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); /* 이모지 가독성용 그림자 */
    line-height: 1;
}

.rank-badge.rank-low {
    font-size: calc(clamp(28px, 3.5vw, 38px) * var(--deco, 1)) !important; 
}
.rank-1 { 
    background: transparent !important; 
    color: inherit !important; 
    transform: scale(1.2); 
    box-shadow: none !important; 
}

/* 1인용 전용 모드 스타일 (메달 제거, 닉네임 강조, 문제 폰트 대폭 확대) */
body.solo-mode #dogRank, body.solo-mode .scoreBadge { display: none !important; }
body.solo-mode #title-dog {
    font-size: clamp(30px, 4.5vw, 55px) !important;
    color: #ffd43b !important;
    margin-bottom: 12px !important;
}
body.solo-mode #dogSide .problem {
    font-size: clamp(48px, 9vw, 85px) !important;
    /* margin 은 auto 로 둔다 — 남는 자리를 문제 칸 위·아래로 똑같이 나눠 주어야
       문제가 길든 짧든 입력칸·키패드가 언제나 맨 아래 같은 자리에 붙는다 */
    margin: auto 0 !important;
}
body.solo-mode #dogSide .problem.curri {
    font-size: clamp(32px, 6.5vw, 60px) !important;
    max-width: 96% !important;
}

/* 그림이 있는 문제에서는 장식(이름·점수·메달)을 줄여 그림 자리를 만든다 */
.teamBox.has-fig .teamTitle { font-size: clamp(20px, 2.2vw, 30px); margin-bottom: 2px; }
.teamBox.has-fig .scoreBadge { font-size: clamp(22px, 2.3vw, 32px); margin: 0 0 2px; }
.teamBox.has-fig .rank-badge { height: 34px; font-size: clamp(22px, 2.8vw, 30px); margin-bottom: 2px; }
.teamBox.has-fig .rank-badge.rank-low { font-size: clamp(18px, 2.2vw, 24px) !important; }
.teamBox.has-fig .display { height: 42px; font-size: 26px; margin-bottom: 3px; }
body.solo-mode #dogSide.has-fig #title-dog { font-size: clamp(22px, 3vw, 36px) !important; margin-bottom: 4px !important; }
/* 치수는 그림이 알려 주므로 지시문은 작게 */
.teamBox.has-fig .problem.curri { font-size: clamp(15px, 2.5vw, 26px); }
/* 세로가 좁아지면 이름표·점수·메달·입력칸도 문제와 함께 작아진다 —
   위 규칙들의 --deco 는 fitProblems() 가 한 칸 높이를 재서 정한다(1 = 본디 크기, 0.55 까지).
   키패드만은 아이들이 눌러야 하므로 어떤 화면에서도 줄이지 않는다. */
body.solo-mode #dogSide.has-fig .problem.curri { font-size: clamp(20px, 3.4vw, 34px) !important; }
@media (max-height: 720px) {
    .teamBox { padding: 4px 2px; }
    .teamBox.has-fig .rank-badge { height: 26px; font-size: 20px !important; margin-bottom: 0; }
    .teamBox.has-fig .teamTitle { font-size: clamp(18px, 1.9vw, 24px); margin-bottom: 0; }
    .teamBox.has-fig .scoreBadge { font-size: clamp(19px, 2vw, 26px); margin: 0; }
}

.problem {
    font-size: 40px; color: #ffffff; margin: 0;
    letter-spacing: 0px; white-space: nowrap; z-index: 15;
    display: flex; align-items: center; justify-content: center;
    line-height: 1.2; text-overflow: ellipsis; overflow: hidden;
    text-shadow: 0 2px 2px rgba(0,0,0,0.8);
}

.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; margin: 0 4px; font-size: 0.9em; line-height: 1.1; }
.frac .num { border-bottom: 2px solid currentColor; padding-bottom: 1px; display: block; }
.frac .denom { padding-top: 1px; display: block; }

/* === 학년별 교육과정 문제 표시 === */
/* 교육과정 문제는 inline 흐름으로 — 분수·세로셈·장제법이 한 줄에 나란히 놓이도록 */
.problem.curri {
    display: block; text-align: center; white-space: normal;
    font-size: clamp(20px, 4.2vw, 36px); max-width: 96%;
}
/* 분수 답 키패드는 5줄이라 키 높이를 줄인다 */
.keypad.tall .key { min-height: 42px; max-height: 48px; font-size: 21px; }
.keypad.tall .key.clear, .keypad.tall .key.go { font-size: 16px; }
.mixnum { margin-right: 2px; }
.qtxt { font-size: 0.55em; color: var(--accent); display: block; line-height: 1.3; word-break: keep-all; }
.problem .small { font-size: 0.72em; display: block; }
/* 크기 비교의 빈칸 — 동그라미 안에 물음표 */
.cmpbox {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.4em; height: 1.4em; box-sizing: border-box;
    border: 3px solid var(--accent); border-radius: 50%;
    background: var(--accent-soft); color: var(--accent);
    font-size: .8em; font-weight: 700; line-height: 1;
    vertical-align: middle; margin: 0 .28em;
}

/* === 도형 그림 (교과서 그림처럼 그린 SVG) === */
.geo-fig {
    display: block; margin: .35em auto .1em;
    max-width: 100%; height: auto; overflow: visible;
    text-shadow: none;
}
.geo-fig .gs { fill: currentColor; fill-opacity: .09; stroke: currentColor; }
.geo-fig line.gs { fill: none; }
.geo-fig .gt { stroke-opacity: .72; }
.geo-fig .ga { fill: none; stroke: currentColor; stroke-opacity: .85; stroke-width: 2; }
.geo-fig .gd { fill: currentColor; stroke: none; }
.geo-fig .gl { fill: currentColor; stroke: none; font-weight: 600;
               font-family: system-ui, -apple-system, 'Segoe UI', 'Malgun Gothic', sans-serif; }
.geo-fig .gq { fill: var(--accent); font-weight: 800; }
/* 화면 상황에 따라 그림 크기 — 아래 키패드가 반드시 보이도록 작게 잡고,
   실제 남는 높이는 fitFigures() 가 재서 max-height 를 다시 정한다 */
.problem .geo-fig { width: min(100%, 320px); max-height: 22vh; }
body.solo-mode #dogSide .problem .geo-fig { width: min(92%, 430px); max-height: 30vh; }
body.team-mode .problem .geo-fig { width: min(100%, 290px); max-height: 18vh; }
.preview-q .geo-fig { max-height: 124px; margin: 2px auto 0; }

/* 문제 칸은 줄어들 수 있고, 입력칸·키패드는 절대 줄어들지 않는다.
   문제가 바뀌어 높이가 달라져도 입력칸·키패드는 언제나 같은(맨 아래) 자리에 있어야 하므로,
   남는 공간은 문제 칸의 위·아래에 똑같이 나눠 준다(margin:auto 0) — 문제 칸 높이가 어떻든
   그 위·아래 여백을 합친 값은 항상 같아서, 입력칸이 시작하는 위치(맨 아래에서부터 잰 거리)는
   그대로 유지되면서 문제 칸이 메달과 입력칸 사이 한가운데로 오고, 입력칸 바로 위 여백도 줄어든다 */
.teamBox > .problem { flex: 0 1 auto; min-height: 0; margin: auto 0; }
.teamBox > .display, .teamBox > .keypad,
.teamBox > .fraction-display-container { flex: 0 0 auto; }

/* 세로셈 */
.vcalc { display: inline-flex; align-items: flex-end; gap: 4px; border-bottom: 3px solid currentColor;
         padding: 0 6px 3px 2px; margin: 0 4px; }
.vcalc .vop { font-size: 0.8em; align-self: flex-end; padding-bottom: 2px; }
.vcalc .vnums { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.08; }
.vcalc .vnums i { font-style: normal; letter-spacing: 3px; }

/* 나눗셈 세로셈(장제법) */
.ldiv { display: inline-flex; align-items: flex-start; margin: 0 4px; }
.ldiv .lsor { padding-right: 5px; border-right: 3px solid currentColor; }
.ldiv .lend { border-top: 3px solid currentColor; padding: 2px 6px 0 6px; margin-left: 3px; }

/* 모으기 / 가르기 상자 */
.gbox { display: inline-flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.85em; }
.gbox .gbrow { display: inline-flex; gap: 5px; }
.gbox i { font-style: normal; display: inline-flex; align-items: center; justify-content: center;
          min-width: 1.5em; height: 1.5em; border: 3px solid currentColor; border-radius: 6px; padding: 0 4px; }
.gbox i.blank { color: #ffe066; border-color: #ffe066; }

.display {
    width: 90%; max-width: 180px; height: calc(50px * var(--deco, 1));
    background: #000000; border-radius: 12px;
    font-size: calc(30px * var(--deco, 1)); display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.1);
    margin-bottom: calc(5px * var(--deco, 1)); color: #00ff00;
    border: 2px solid #333;
    position: relative; z-index: 15; font-family: 'Courier New', Courier, monospace; font-weight: bold;
}

.keypad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; 
    width: 100% !important; max-width: 220px !important; min-width: 100px !important;
    position: relative; z-index: 15;
}
.key { 
    height: 20px; min-height: 55px; max-height: 60px;
    background: #2b2b2b; border-radius: 12px; 
    font-size: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer; 
    box-shadow: 0 4px 0 #111; transition: 0.1s; touch-action: manipulation;
    color: #e0e0e0; border: 1px solid #3d3d3d;
}
.key:active { transform: translateY(2px); box-shadow: 0 1px 0 #111; }
.key.clear { background: #4a1818; color: #ffc9c9; font-size: 18px; border:none; box-shadow: 0 4px 0 #2b0b0b;}
.key.go { background: #183e5c; color: #a5d8ff; font-weight: bold; font-size: 18px; border: none; box-shadow: 0 4px 0 #0b1f2e;}
.key.sp { background: #3b3320; color: #ffe066; font-size: 20px; border: 1px solid #5a4c2a; box-shadow: 0 4px 0 #201b10; }
.key.wide { grid-column: span 3; }
.key.cmp { background: #1f3b2c; color: #b2f2bb; font-size: 30px; font-weight: bold; border: 1px solid #2f5a42; box-shadow: 0 4px 0 #12241a; }
.key.ghost { background: transparent; box-shadow: none; border: none; cursor: default; }

/* 낮은 화면에서는 키를 낮춰 확인 줄까지 들어오게 하고, 문제 칸 자리도 남긴다.
   (.key 본 규칙보다 뒤에 두어야 덮어쓸 수 있다 — 앞에 두면 아무 일도 일어나지 않는다) */
@media (max-height: 800px) {
    .key { min-height: 44px; max-height: 50px; font-size: 21px; }
    .key.clear, .key.go { font-size: 16px; }
}
@media (max-height: 660px) {
    .key { min-height: 36px; max-height: 40px; font-size: 18px; }
    .key.clear, .key.go { font-size: 14px; }
    .display { height: 40px; font-size: 24px; }
}
@media (max-height: 520px) {
    .key { min-height: 28px; max-height: 32px; font-size: 15px; }
    .key.clear, .key.go { font-size: 12px; }
    .display { height: 30px; font-size: 19px; margin-bottom: 3px; }
}

/* ===================== 분수 입력칸 (자연수 · 분자 · 분모) ===================== */
.fraction-display-container {
    background: rgba(0,0,0,0.3); border: 2px solid var(--border-color); border-bottom: none;
    border-radius: 16px 16px 0 0; padding: 10px 5px;
    width: 100%; max-width: 220px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 80px; position: relative; z-index: 15; margin-bottom: 0;
}
.del-btn { position: absolute; top: 4px; right: 6px; color: #64748b; background: transparent;
    border: none; font-size: 18px; cursor: pointer; font-family: inherit; }
.fraction-layout { display: flex; align-items: center; justify-content: center; gap: 6px; }
.slot {
    background: #1e293b; border: 2px solid #334155; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: #94a3b8; font-size: 20px; cursor: pointer; transition: all 0.2s;
}
/* 칸 이름(자연수 · 분자 · 분모)이 11px · 폭 36px 이라 칠판에서 읽기도 누르기도 힘들었다 —
   세 자리 수가 여유 있게 들어가는 폭으로 넓힌다 (폰은 아래 768px 규칙이 따로 정한다) */
.slot-placeholder { opacity: 0.5; font-size: 12px; white-space: nowrap; }
.slot.integer { width: 46px; height: 55px; font-size: 24px; }
.slot.active { background: #6366f1 !important; color: #fff !important; border-color: #a5b4fc !important; transform: scale(1.05); }
.fraction-part { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.slot.numerator, .slot.denominator { width: 50px; height: 32px; font-size: 18px; }
.slot.numerator.active { background: #ec4899 !important; border-color: #f9a8d4 !important; }
.slot.denominator.active { background: #10b981 !important; border-color: #6ee7b7 !important; }
.fraction-bar { width: 54px; height: 3px; flex: 0 0 3px; background: #e2e8f0; border-radius: 2px; }
.fraction-display-container.wrong { animation: fracShake .2s; border-color: #ef4444 !important; }

/* 나머지가 있는 나눗셈 입력칸 — 몫 네모 … 나머지 네모.
   '…' 는 이름표(.rem-cap) 높이만큼 내려가지 않도록 네모 높이에 맞춰 세운다 */
.rem-layout { display: flex; align-items: flex-start; justify-content: center; gap: 5px; }
.rem-col { display: flex; flex-direction: column; align-items: center; }
.rem-dots { color: #cbd5e1; font-size: 20px; font-weight: 900; letter-spacing: 1px; line-height: 48px; }
.slot.quotient, .slot.remainder { width: 56px; height: 48px; font-size: 22px; }
.slot.quotient.active { background: #6366f1 !important; border-color: #a5b4fc !important; }
.slot.remainder.active { background: #f59e0b !important; border-color: #fcd34d !important; }
.rem-cap { font-size: 12px; color: #94a3b8; margin-top: 3px; letter-spacing: -.02em; }
/* 소수의 나눗셈 — 몫 · 나머지에 0.0012 같은 소수가 들어가므로 칸을 넓히고 글자를 조금 줄인다.
   칸이 넓어진 만큼 '…' 를 좁히고, ⌫ 는 구석으로 붙여 나머지 칸을 가리지 않게 한다 */
.rem-layout.dec { gap: 3px; }
.rem-layout.dec .slot.quotient, .rem-layout.dec .slot.remainder { width: 70px; font-size: 17px; }
.rem-layout.dec .rem-dots { font-size: 14px; letter-spacing: 0; }
.fraction-display-container.dec .del-btn { top: 0; right: 0; padding: 2px 4px; font-size: 15px; }
.keypad.frac-pad .key.sp { font-size: 34px; font-weight: 900; line-height: 1; }   /* 소수점 키 — 점이 작아 잘 안 보였다 */
@keyframes fracShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.keypad.frac-pad {
    background: rgba(0,0,0,0.3); padding: 6px; gap: 4px;
    border: 2px solid var(--border-color); border-top: none; border-radius: 0 0 16px 16px;
    max-width: 220px !important;
}
.keypad.frac-pad .key { height: 40px; min-height: 40px; max-height: 44px; font-size: 20px; border-radius: 6px; }
.key.key-next { background: #2563eb; color: #fff; font-size: 16px; border: none; box-shadow: 0 4px 0 #14386b; }
.key.key-submit { grid-column: span 3; background: #22c55e; color: #fff; font-size: 17px;
    border: none; box-shadow: 0 4px 0 #14622f; }

@media (max-width: 768px) {
    .slot.integer { width: 30px; height: 45px; font-size: 20px; }
    .slot.numerator, .slot.denominator { width: 30px; height: 28px; font-size: 16px; }
    .fraction-bar { width: 40px; }
    .slot-placeholder { font-size: 11px; }
    .slot.quotient, .slot.remainder { width: 46px; height: 40px; font-size: 19px; }
    .rem-layout.dec .slot.quotient, .rem-layout.dec .slot.remainder { width: 66px; font-size: 16px; }
    .rem-dots { line-height: 40px; }
    .keypad.frac-pad .key { height: 36px; min-height: 36px; font-size: 18px; }
    .fraction-display-container { min-height: 68px; padding: 8px 4px; }
}

.item-effect {
    position: absolute; bottom: -80px; font-size: 4rem; pointer-events: none;
    z-index: 50; animation: itemFlyUp 1.875s ease-in forwards; opacity: 0; filter: drop-shadow(0 0 10px rgba(255,255,255,0.5));
}
@keyframes itemFlyUp {
    0% { transform: translateY(0) scale(0.6) rotate(0deg); opacity: 0; }
    20% { opacity: 0.8; }
    100% { transform: translateY(-700px) scale(2.8) rotate(500deg); opacity: 0; }
}

/* 콤보 글씨는 이름표 · 점수 쪽(칸 위쪽)에서 떠오른다 — 30% 자리에 두면 1인 도전 · 6인 칸에서
   정답 직후 새로 나온 문제를 0.8초 동안 덮었다 */
.combo-text {
    position: absolute; top: 17%; left: 50%; transform: translate(-50%, -50%);
    font-size: 2.5rem; font-weight: 800; color: #69db7c;
    text-shadow: 2px 2px 0px #000, -2px -2px 0px #000, 2px -2px 0px #000, -2px 2px 0px #000;
    z-index: 100; pointer-events: none; white-space: nowrap; animation: comboPop 0.8s ease-out forwards;
}
.combo-text.super { color: #ff8787; font-size: 3.2rem; top: 15%; }
/* 팀전 칸에는 이름표 · 점수가 없어 칸 맨 위가 비어 있다 */
body.team-mode .combo-text, body.team-mode .combo-text.super { top: 12%; }
@keyframes comboPop {
    0% { transform: translate(-50%, 0) scale(0.5); opacity: 0; }
    40% { transform: translate(-50%, -40px) scale(1.2); opacity: 1; }
    100% { transform: translate(-50%, -100px) scale(1); opacity: 0; }
}

.fixed-btn {
    position: fixed; top: 50%; transform: translateY(-50%);
    z-index: 500; font-size: 1.4rem; background: rgba(0,0,0,0.45);
    border: 1px solid rgba(255,255,255,0.16); border-radius: 50%;
    width: 38px; height: 38px; cursor: pointer; opacity: .7;
    display: flex; align-items: center; justify-content: center; outline: none; touch-action: manipulation;
    backdrop-filter: blur(5px); color: white;
}
.fixed-btn:hover { opacity: 1; }
.fixed-btn:active { transform: translateY(-50%) scale(0.85); background: rgba(0,0,0,0.8); }
/* 화면 한가운데(top:50%)에 두면 문제 글씨와 겹쳐서, 타이머가 있는 머리띠의 빈 좌우로 올린다.
   머리띠 높이가 clamp(84px, 17vh, 160px) 이므로 그 절반이 머리띠 한가운데다. */
#resetBtn  { left: 8px;  top: clamp(42px, 8.5vh, 80px); }
#gameFsBtn { right: 8px; top: clamp(42px, 8.5vh, 80px); }

@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
.wrong { animation: shake 0.2s; color: #ff6b6b !important; border-color: #ff6b6b !important;}

@keyframes winPulse { 0%, 100% { transform: scale(1); box-shadow: 0 4px 15px rgba(255,215,0,0.2); } 50% { transform: scale(1.02); box-shadow: 0 4px 25px rgba(255,215,0,0.5); } }
.gold { background: #332b00 !important; border: 2px solid #fcc419 !important; color: #fcc419; animation: winPulse 0.6s infinite ease-in-out; }

#resultList {margin: 20px 0;padding: 0;list-style: none;width: 470px;max-width: 92vw;}
#resultList li {
    font-size: 1.5rem; padding: 10px 20px; margin: 8px 0; background: var(--panel-bg);
    border-radius: 15px; display: flex; justify-content: space-between; align-items: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: 1px solid #333; color: var(--dark);
}
.result-name { display: flex; gap: 10px; align-items: center; }

.desktop-view { display: inline; }
.mobile-view { display: none; cursor: pointer; }

@media (max-width: 768px) {
    #header { height: 100px; }
    .header-logo { font-size: 0px; }
    .desktop-view { display: none !important; }
    .mobile-view { display: inline !important; font-size: 3rem; color: #fff; }
    .header-logo .mobile-view { font-size: 3.5rem; display: inline-block !important; line-height: 1; }
    #timerDisplay { font-size: 70px; width: 120px; }
    #msgTitle { font-size: 3rem; }
    .subtitle { font-size: 1rem; }
    .title-area { margin-bottom: 12px; }
    .fixed-btn { display: none !important; }
}

/* =====================================================================
   모바일 최적화 — 다른 규칙보다 뒤에 두어 항상 이 값이 적용되게 한다
   ===================================================================== */
@media (max-width: 768px) {
    #overlay {
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
    }
    .overlay-content {
        padding: 50px 8px 30px !important;
        height: auto !important;
        min-height: 100% !important;
        overflow-y: visible !important;
        justify-content: flex-start !important;
    }
    #setupArea, .tool-row { width: 100%; max-width: 100%; }
    .title-area { margin-bottom: 12px; display: flex; align-items: center;
                  justify-content: center; gap: 8px; }
    .logo-img { height: 76px; }
    #msgTitle { font-size: 2rem !important; }
    #mobileTitleFsBtn { font-size: 1.5rem !important; opacity: .55; }
    .board { border-radius: 16px; }

    .grade-tabs { padding: 6px; gap: 3px; }
    .grade-tab { font-size: .88rem; min-width: 40px; padding: 9px 2px; border-radius: 10px; }
    .grade-tab.ops { flex-grow: 1.35; }     /* 네 글자라 조금 더 넓게 — 오른쪽 끝에 붙어 잘려 보이지 않게 */

    /* 세로 화면에서는 칸을 한 줄에 하나씩 (가로 방향은 그대로 두고 100%로 감싼다) */
    .pick-band, .opt-band { padding: 12px; gap: 10px; }
    .preview-wrap { padding: 12px; gap: 10px; min-height: 0; }
    .pick-cell, .opt-cell { flex: 1 1 100%; min-width: 0; }
    .pick-more, .opt-band .tool-btn { width: 100%; }
    .pick-label { font-size: .78rem; padding: 0 2px; }
    .pick-select { font-size: .95rem; height: 44px; }
    /* 폰에서는 학교 이름을 한 줄, 학년 · 반을 그 아래 한 줄에 반씩 */
    .school-row { gap: 8px; flex-wrap: wrap; }
    .school-find { flex: 1 1 100%; }
    .school-row #schoolGrade, .school-row #schoolClass { flex: 1 1 0; }
    .school-list { max-height: 200px; }
    .school-row .pick-select { font-size: .9rem; }
    .pick-cell.type .pick-select { font-size: .9rem; }

    .preview-card { min-width: 92px; padding: 9px 6px; }
    .preview-q { font-size: 1rem; }
    .preview-q .geo-fig { max-height: 92px; }
    .preview-a { font-size: .74rem; }
    .preview-tag { font-size: .74rem; }
    .preview-refresh { width: 36px; height: 36px; font-size: 1rem; }

    .action-btn-row { margin-top: 14px !important; gap: 8px; max-width: 100%; }
    #startBtn { font-size: 1.1rem !important; height: 52px !important; min-height: 52px !important;
                border-radius: 14px !important; }
    .qr-btn { height: 52px !important; min-height: 52px !important; border-radius: 14px !important;
              font-size: .9rem; padding: 0 14px; }
    .tool-row { gap: 6px; margin-top: 12px; }
    .tool-btn { min-width: 0; flex: 1 1 46%; font-size: .84rem; padding: 11px 4px; }

    .home-rank-head span { display: none; }
    .home-rank .rank-list li { padding: 6px 10px; font-size: .92rem; }
    .rank-time { display: none; }

    .km-modal { padding: 0; }
    .km-modal-box { max-width: 100vw; width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .km-modal-head { padding: 12px 12px; }
    .km-modal-sub { display: none; }
    .pick-toolbar { padding: 8px 10px; }
    .pick-actions { width: 100%; margin-left: 0; }
    .pick-types { grid-template-columns: 1fr; }
    .pick-body { padding: 6px 10px 12px; }
}
@media (max-width: 420px) {
    #msgTitle { font-size: 1.75rem !important; }
    .logo-img { height: 64px; }
    .grade-tab { font-size: .78rem; min-width: 38px; padding: 8px 1px; }
    .preview-card:nth-child(3) { display: none; }
    .tool-btn { font-size: .8rem; }
    .pick-label { font-size: .74rem; }
}
/* =====================================================================
   폰 첫 화면 — 될 수 있는 대로 단순하게.
   학년 → 단원 → 문제 유형(+예시 단추) → (예시) → 게임 썸네일 → 게임 종류 → 게임 모드
   1인 개인 랭킹전 · 1분 고정이므로 종류·시간을 고르는 칸과 선생님용 단추는 감춘다.
   (폰 판별은 자바스크립트가 body 에 붙이는 is-mobile 로 한다 — 화면 폭과 터치를 같이 본다)
   ===================================================================== */
body.is-mobile .ex-toggle { display: flex; align-items: center; }
body.is-mobile .m-only:not([hidden]) { display: grid; }
/* 게임 종류 · 게임 모드를 썸네일 한 곳에 모은다 —
   이름표는 '1인 개인 랭킹전', 그 아래 고른 게임 이름, 다시 그 아래 '바꾸기' */
body.is-mobile .gt-thumb-name { flex-direction: column; align-items: flex-start; gap: 5px; }
body.is-mobile .gt-thumb-change { display: inline-flex; }
body.is-mobile .preview-wrap { display: none; }          /* '예시'를 눌러야 펼쳐진다 */
body.is-mobile.ex-open .preview-wrap { display: flex; }

/* 칸 차례 바꾸기 — 예시를 썸네일 위로 (play-main 을 display:contents 로 풀어 순서를 준다).
   왼쪽 칸(.gt-col) 안은 썸네일 → 게임 고르기(2열 3행) → 공유 QR 차례 그대로 */
body.is-mobile .play-band { display: flex; flex-direction: column; }
body.is-mobile .play-main { display: contents; }
body.is-mobile .preview-wrap { order: 1; }
body.is-mobile .gt-col { order: 2; }
body.is-mobile .opt-band { order: 3; }

/* 폰에서 감추는 것 — 인원 · 시간(1인 · 1분 고정)과 선생님용 단추.
   설정 띠에는 닉네임 칸만 남는다 */
body.is-mobile #modeCell,
body.is-mobile #timeCell,
body.is-mobile #btnHistory,
body.is-mobile #oldVersionLink,
body.is-mobile #btnRoster { display: none !important; }

@media (max-width: 768px) {
    .m-mode-card b { font-size: .84rem; }
    .ex-toggle { font-size: .86rem; padding: 0 12px; }
}

/* 노트북·태블릿 가로 폭에서는 문제 고르기 버튼을 아래 줄로 내린다 */
@media (min-width: 769px) and (max-width: 1080px) {
    .pick-cell.unit { flex: 1 1 42%; }
    .pick-cell.type { flex: 1 1 46%; }
    .pick-more { flex: 1 1 40%; width: auto; }   /* 문제 고르기를 아랫줄로 */
    /* 예시 세 장이 들어갈 폭이 없어 셋째 장이 오른쪽 단추 밑으로 숨었다 — 두 장만 보인다 */
    .preview-row .preview-card:nth-child(n+3) { display: none; }
}


/* =====================================================================
   학생 명단 배틀 — 학생명(번호) 입력 · 준비 화면 · 회차 결과 · 최종 순위 · 과거 기록
   ===================================================================== */

/* 학생명(번호) 입력 모달 */
.roster-box { width: 720px; }
.roster-body {
    flex: 1 1 auto; overflow-y: auto; padding: 16px 18px 18px;
    display: flex; flex-direction: column; gap: 10px;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
}
.roster-input {
    width: 100%; min-height: 140px; resize: vertical; box-sizing: border-box;
    padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong);
    background: var(--field-bg); color: var(--dark); outline: none;
    font-family: inherit; font-size: 1.05rem; line-height: 1.55;
    user-select: text; -webkit-user-select: text;
    transition: border-color .15s, box-shadow .15s;
}
.roster-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.roster-input::placeholder { color: #5e6675; }
.roster-help { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--text-muted); }
.roster-help b { color: var(--dark); font-weight: 600; }
.roster-plan { font-size: .96rem; font-weight: 600; color: var(--accent); }
.roster-plan.empty { color: var(--text-muted); font-weight: 500; }
.roster-order { display: flex; align-items: center; gap: 10px; margin: 2px 0; flex-wrap: wrap; }
.roster-order .ro-label { font-size: .92rem; font-weight: 700; color: var(--text-muted); }
.roster-order .ro-group { display: flex; border: 2px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.roster-order .ro-btn {
    flex: 1 1 0; padding: 8px 16px; background: transparent; border: none; border-left: 2px solid var(--border-color);
    font-family: inherit; font-size: .94rem; font-weight: 700; color: var(--text-muted); cursor: pointer;
    white-space: nowrap; touch-action: manipulation; transition: background-color .15s, color .15s;
}
.roster-order .ro-btn:first-child { border-left: none; }
.roster-order .ro-btn.active { background: var(--accent); color: #14161c; }
.roster-note { font-size: .85rem; color: var(--text-muted); padding: 4px 2px 0; }
.roster-preview { display: flex; flex-direction: column; gap: 6px; }
.roster-round {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    padding: 7px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2);
}
.roster-rno { flex: 0 0 auto; min-width: 34px; margin-right: 2px; font-size: .78rem; font-weight: 700; color: var(--text-muted); }
.roster-round i {
    font-style: normal; font-size: .9rem; padding: 3px 9px; border-radius: 999px;
    background: var(--field-bg); border: 1px solid var(--line-strong); color: var(--dark);
}
.km-modal-foot .foot-gap { flex: 1 1 auto; }
.mini-btn.danger { color: #ff8787; border-color: rgba(255,135,135,.35); background: transparent; }
.mini-btn.danger:hover { color: #ff8787; border-color: #ff8787; background: rgba(255,135,135,.1); }

/* 과거 기록 모달 */
.hist-body {
    flex: 1 1 auto; overflow-y: auto; padding: 12px 16px 16px;
    display: flex; flex-direction: column; gap: 8px;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y;
}
.hist-item { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.hist-item[open] { border-color: var(--accent-line); }
.hist-item summary {
    list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 4px 12px; padding: 11px 14px; color: var(--dark);
}
.hist-item summary::-webkit-details-marker { display: none; }
.hist-item summary::before { content: '▸'; display: inline-block; color: var(--text-muted); transition: transform .15s; }
.hist-item[open] summary::before { transform: rotate(90deg); }
.hist-date { font-weight: 700; }
.hist-meta { font-size: .9rem; color: var(--text-muted); }
.hist-meta em { font-style: normal; color: #ffa94d; margin-left: 4px; }
.hist-label { flex: 1 1 200px; min-width: 0; font-size: .9rem; color: var(--accent); }
.hist-top { font-size: .92rem; color: var(--dark); }
.hist-detail { border-top: 1px solid var(--line); background: var(--panel-bg); }
.hist-rounds {
    display: flex; flex-direction: column; gap: 4px; padding: 8px 16px 12px;
    border-top: 1px dashed var(--line); font-size: .88rem; color: var(--text-muted);
}
.hist-rounds b { color: var(--dark); margin-right: 6px; }
.hist-rounds em { font-style: normal; color: var(--accent); margin-right: 6px; }

/* 준비 · 결과 화면 (게임판 위를 덮는다) */
#sessionLayer {
    position: fixed; inset: 0; z-index: 150; display: none;
    background: var(--bg);
    background-image:
        radial-gradient(120% 62% at 50% -14%, var(--accent-soft) 0%, rgba(0,0,0,0) 62%),
        linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 46%);
    overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain;
}
.ses-wrap {
    width: 1320px; max-width: calc(100vw - 110px); min-height: 100%;
    margin: 0 auto; padding: 24px 0 28px; box-sizing: border-box;
    display: flex; flex-direction: column; justify-content: center; gap: 16px;
    text-align: center; color: var(--dark);
}
.ses-head { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.ses-kicker { font-size: .95rem; color: var(--text-muted); }
.ses-title { margin: 0; font-size: clamp(2rem, 4.2vw, 3.4rem); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--dark); }
.ses-title small { margin-left: 6px; font-size: .48em; font-weight: 600; letter-spacing: 0; color: var(--text-muted); }
.ses-note { font-size: .98rem; color: var(--accent); }
.ses-call { margin: 0; font-size: clamp(1.05rem, 1.7vw, 1.45rem); color: var(--dark); }

/* 게임판 모양 — 칸 순서 · 칸 색이 실제 게임판과 같다 */
.ses-board { display: flex; gap: 10px; width: 100%; }
.ses-group { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ses-team-head {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line-strong);
    font-size: 1.15rem; color: var(--dark);
}
.ses-team-head.team-A { background: var(--dog-color); }
.ses-team-head.team-B { background: var(--rabbit-color); }
.ses-team-head.team-B.b3 { background: var(--hamster-color); }
.ses-team-head.team-C { background: var(--panda-color); }
.ses-team-head .ts { font-weight: 800; color: #ff8787; }
.ses-cols { flex: 1 1 auto; display: flex; border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong); }
.ses-col {
    flex: 1 1 0; min-width: 0; position: relative; z-index: 0; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    min-height: 30vh; padding: 18px 8px;
    border-right: 1px solid rgba(255,255,255,.08);
}
.ses-col:last-child { border-right: none; }
.ses-emoji { font-size: clamp(28px, 3vw, 46px); line-height: 1; }
.ses-medal { font-size: clamp(34px, 4vw, 60px); line-height: 1; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.ses-name {
    max-width: 100%; font-size: clamp(26px, 3.6vw, 64px); font-weight: 800; line-height: 1.15; color: #fff;
    word-break: keep-all; overflow-wrap: anywhere; text-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.ses-score { font-size: clamp(20px, 2.2vw, 36px); font-weight: 700; color: #ff8787; }
.ses-board.compact .ses-col { min-height: 0; padding: 14px 8px; gap: 4px; }
.ses-board.compact .ses-name { font-size: clamp(22px, 2.6vw, 44px); }
.ses-board.compact .ses-team-head { padding: 6px 12px; }

/* 자리마다(=실제 플레이 위치) 있는 개인별 준비 완료 단추 */
.ses-ready-btn {
    margin-top: 4px; padding: 12px 18px; box-sizing: border-box; max-width: 100%;
    border-radius: 14px; border: 2px solid var(--line-strong); background: var(--panel-bg);
    color: var(--text-muted); font-family: inherit; font-weight: 700; cursor: pointer;
    font-size: clamp(.95rem, 1.7vw, 1.25rem); white-space: nowrap; touch-action: manipulation;
    transition: transform .12s, border-color .15s, color .15s, background-color .15s;
}
.ses-ready-btn:hover { border-color: var(--accent); color: var(--dark); }
.ses-ready-btn:active { transform: translateY(1px); }
.ses-ready-btn.done { background: var(--accent); border-color: var(--accent); color: #14161c; cursor: default; }
.ses-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ses-btn {
    height: 64px; padding: 0 30px; box-sizing: border-box; border-radius: 16px;
    border: 1px solid var(--line-strong); background: transparent; color: var(--text-muted);
    font-family: inherit; font-size: 1.05rem; font-weight: 600; cursor: pointer; white-space: nowrap;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; touch-action: manipulation;
    transition: transform .12s, filter .15s, border-color .15s, color .15s, background-color .15s;
}
.ses-btn:hover { border-color: var(--line-hover); color: var(--dark); }
.ses-btn:active { transform: translateY(1px); }
.ses-btn.go {
    min-width: 300px; font-size: 1.4rem; font-weight: 700;
    background: var(--accent); border-color: var(--accent); color: #14161c;
    box-shadow: 0 14px 30px -12px var(--accent-line);
}
.ses-btn.go:hover { filter: brightness(1.07); transform: translateY(-1px); color: #14161c; }
.ses-link {
    align-self: center; padding: 6px 12px; border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: .92rem; color: var(--text-muted);
    text-decoration: underline; text-underline-offset: 3px;
}
.ses-link:hover { color: var(--dark); }

/* 순위 카드 */
.ses-card {
    background: var(--panel-bg); border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
    text-align: left; box-shadow: 0 20px 46px -26px rgba(0,0,0,.85);
}
.ses-card-head {
    display: flex; align-items: baseline; gap: 10px; padding: 11px 16px;
    background: var(--panel-2); border-bottom: 1px solid var(--line);
}
.ses-card-head b { font-size: 1.05rem; font-weight: 700; color: var(--accent); }
.ses-card-head span { margin-left: auto; font-size: .88rem; color: var(--text-muted); }

/* 전체 순위 — 위에서 아래로 읽고 옆 줄로 넘어간다 */
.ses-standings { list-style: none; margin: 0; padding: 8px 14px 12px; columns: 5 190px; column-gap: 18px; }
.ses-standings li {
    display: flex; align-items: center; gap: 8px; padding: 6px 8px;
    border-bottom: 1px solid rgba(255,255,255,.05); font-size: 1.02rem; color: var(--dark);
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
}
.ses-standings .no { flex: 0 0 30px; text-align: center; font-weight: 700; color: var(--text-muted); }
.ses-standings li.top .no { color: var(--accent); }
.ses-standings .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ses-standings .sc { flex: 0 0 auto; font-weight: 700; color: #57d9a8; }
.ses-standings li.now { background: var(--accent-soft); border-radius: 8px; }

/* 이번 회차 순위 */
.ses-round { list-style: none; margin: 0; padding: 10px 14px 12px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ses-round li {
    display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px;
    background: var(--field-bg); border: 1px solid var(--line); font-size: 1.1rem; color: var(--dark);
}
.ses-round li.win { background: #332b00; border-color: #fcc419; }
.ses-round .md { font-size: 1.35rem; line-height: 1; }
.ses-round .mem { font-size: .92rem; color: var(--text-muted); }
.ses-round .sc { font-weight: 700; color: #ff8787; }

/* 최종 순위 — 시상대 */
.ses-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.ses-step { flex: 0 1 280px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ses-step-medal { font-size: clamp(44px, 5vw, 76px); line-height: 1; animation: popIn .5s cubic-bezier(.175,.885,.32,1.275) both; }
.ses-step-names {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px;
    font-size: clamp(22px, 2.6vw, 40px); font-weight: 800; line-height: 1.2; color: #fff; word-break: keep-all;
}
.ses-step-names .more { align-self: center; font-size: .55em; font-weight: 600; color: var(--text-muted); }
.ses-step-score { font-size: clamp(18px, 1.8vw, 28px); font-weight: 700; color: #57d9a8; }
.ses-step-block {
    width: 100%; box-sizing: border-box; padding-top: 10px; border-radius: 14px 14px 0 0;
    border: 1px solid var(--line-strong); border-bottom: none;
    font-size: 2rem; font-weight: 800; color: rgba(255,255,255,.55);
}
.ses-step.p1 .ses-step-block { height: 150px; background: linear-gradient(180deg, #5c4a00, #332b00); color: #fcc419; }
.ses-step.p2 .ses-step-block { height: 104px; background: linear-gradient(180deg, #3a3f4c, #1e222b); }
.ses-step.p3 .ses-step-block { height: 74px;  background: linear-gradient(180deg, #4a2a14, #2e1e0f); }
/* 공동 등수로 비는 단도 자리는 남겨 1등 단이 늘 가운데 오게 한다 */
.ses-step.empty { visibility: hidden; }

/* ───── 자동순환 편성 — 배틀 시작을 누르면 맨 먼저 보여 주는 회차 나누기 ─────
   킹수학 메이킹(make0901/session.php)의 '자동 순환 편성'과 같은 화면이다 — 두 곳을 함께 고친다.
   세로 스크롤 없이 한 화면에 다 들어가게 만든다. 크기는 모두 em 이고 #sessionView 의 글씨 크기가
   --u 배율을 탄다. fitSessionView() 가 칸 수(--cols)와 --u 를 함께 골라 가장 크게 들어가는 조합을 쓴다.
   좌우 56px 은 화면 가장자리의 🏠 · ↕️ 단추 자리다. */
#sessionLayer.is-fit { overflow: hidden; }
#sessionLayer.is-fit .ses-wrap {
    width: 100%; max-width: none; height: 100%; min-height: 0;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 56px calc(12px + env(safe-area-inset-bottom, 0px));
    font-size: calc(16px * var(--u, 1)); gap: .7em; justify-content: flex-start;
}
.sp-head { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .25em; }
.sp-kicker { font-size: .92em; color: var(--text-muted); }
.sp-title { margin: 0; font-size: 2.4em; font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--dark); }
.sp-sub { font-size: 1em; color: var(--text-muted); }
.sp-sub b { color: var(--accent); font-weight: 700; }
.sp-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: .4em; margin-top: .2em; }
.sp-stat {
    padding: .28em .85em; border-radius: 999px; background: rgba(255,255,255,.04);
    border: 1px solid var(--line-strong); font-size: .92em; color: var(--text-muted);
}
.sp-stat b { color: var(--dark); font-weight: 800; margin-right: .15em; }
.sp-stat.hi { background: var(--accent-soft); border-color: var(--accent-line); color: var(--dark); }
.sp-panel {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; text-align: left;
    background: var(--panel-bg); border: 1px solid var(--line); border-radius: 1.1em; padding: .7em .85em;
    box-shadow: 0 20px 46px -26px rgba(0,0,0,.85);
}
.sp-panel-head { flex: 0 0 auto; display: flex; align-items: baseline; gap: .4em 1em; margin-bottom: .55em; flex-wrap: wrap; }
.sp-panel-head b { font-size: 1.05em; font-weight: 700; color: var(--accent); }
.sp-panel-head span { margin-left: auto; font-size: .86em; color: var(--text-muted); }
.sp-fitbox { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; justify-content: safe center; }
.sp-rounds { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: .55em; align-content: start; }
.sp-rd { min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: .9em; padding: .5em .6em; }
.sp-rd.first { border-color: var(--accent-line); background: #1f1d18; box-shadow: 0 0 0 .12em var(--accent-ring); }
.sp-rd-no { display: flex; align-items: center; gap: .4em; margin-bottom: .4em; font-size: .88em; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.sp-rd-no em { font-style: normal; font-size: 1.2em; font-weight: 900; color: var(--dark); }
.sp-rd.first .sp-rd-no em { color: var(--accent); }
.sp-rd-no small { font-size: .9em; font-weight: 600; color: var(--text-muted); }
.sp-rd-no .tag { margin-left: auto; font-size: .82em; font-weight: 800; color: #14161c; background: var(--accent); border-radius: 999px; padding: .1em .55em; }
.sp-names { display: flex; flex-direction: column; gap: .28em; }
.sp-team { display: flex; flex-direction: column; gap: .28em; }
.sp-team + .sp-team { margin-top: .3em; }
.sp-team-name {
    align-self: flex-start; padding: .08em .6em; border-radius: .5em; border: 1px solid var(--line-strong);
    font-size: .8em; font-weight: 800; color: var(--dark);
}
.sp-team-name.team-A { background: var(--dog-color); }
.sp-team-name.team-B { background: var(--rabbit-color); }
.sp-team-name.team-B.b3 { background: var(--hamster-color); }
.sp-team-name.team-C { background: var(--panda-color); }
.sp-chip {
    display: flex; align-items: center; gap: .45em; min-width: 0;
    padding: .26em .6em .26em .45em; border-radius: 999px;
    background: var(--field-bg); border: 1px solid var(--line-strong); font-size: .98em; font-weight: 700; color: var(--dark);
}
.sp-chip i { width: .6em; height: .6em; border-radius: 999px; flex: 0 0 auto; }
.sp-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-foot { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .7em; }
#sessionLayer.is-fit .sp-foot .ses-btn { height: auto; min-height: 0; padding: .75em 1.4em; font-size: 1.05em; border-radius: .9em; }
#sessionLayer.is-fit .sp-foot .ses-btn.go {
    min-width: 0; padding: .5em 2em; font-size: 1.4em; line-height: 1.2;
    flex-direction: column; gap: .1em;
}
.sp-foot .ses-btn.go .who { font-size: .62em; font-weight: 600; color: rgba(20,22,28,.78); white-space: nowrap; }

/* 회차 결과 · 최종 순위 — 모양은 그대로 두고, 화면보다 길면 통째로 줄여 한 화면에 넣는다 (shrinkSessionView).
   줄일 때는 그만큼 넓게 펼쳐 그린 뒤 줄이므로(확대/축소와 같은 효과) 전체 순위가 옆 칸으로 더 늘어선다.
   넘칠 때 위가 잘리지 않도록 가운데 맞춤은 justify-content 대신 첫 · 끝 칸의 auto 여백으로 한다. */
#sessionLayer.is-shrink { overflow: hidden; }
#sessionLayer.is-shrink .ses-wrap {
    max-width: none; min-height: 0; margin: 0; transform-origin: 0 0; justify-content: flex-start;
}
#sessionLayer.is-shrink .ses-wrap > * { flex-shrink: 0; }   /* 칸이 찌그러져 잘리지 않고 넘치게 해야 줄일 만큼을 잰다 */
#sessionLayer.is-shrink .ses-wrap > :first-child { margin-top: auto; }
#sessionLayer.is-shrink .ses-wrap > :last-child { margin-bottom: auto; }
#sessionLayer.is-shrink .ses-standings { columns: auto 190px; }

/* 게임판 — 학생 이름으로 할 때는 팀전에서도 칸마다 이름이 보이게 한다 */
body.team-mode.roster-mode .teamTitle {
    display: block !important; font-size: clamp(16px, 1.9vw, 30px); line-height: 1.15; margin-bottom: 3px;
}
body.roster-mode #teamScoreBoard { height: 25vh; }
body.roster-mode .team-card .team-name {
    max-width: 94%; font-size: clamp(1.3rem, 2.4vw, 2.5rem); line-height: 1.2;
    white-space: normal; word-break: keep-all; text-align: center;
}

@media (max-width: 768px) {
    .ses-wrap { max-width: calc(100vw - 24px); padding: 18px 0 24px; gap: 12px; justify-content: flex-start; }
    .ses-board { flex-direction: column; }
    .ses-cols { flex-wrap: wrap; }
    .ses-col { flex: 1 1 40%; min-height: 0; padding: 12px 6px; }
    .ses-name, .ses-board.compact .ses-name { font-size: 22px; }
    .ses-btn { height: 54px; padding: 0 18px; }
    .ses-btn.go { min-width: 0; font-size: 1.15rem; }
    .ses-actions .ses-btn.go { flex: 1 1 100%; }
    .ses-ready-btn { padding: 10px 14px; font-size: 1rem; }
    .ses-standings { columns: 2 130px; column-gap: 10px; padding: 6px 8px 10px; }
    .ses-standings li { font-size: .95rem; padding: 5px 4px; }
    .ses-step-block { height: auto !important; min-height: 44px; font-size: 1.3rem; }
    #sessionLayer.is-fit .ses-wrap { padding-left: 10px; padding-right: 10px; }   /* 폰 폭에서는 🏠 · ↕️ 가 숨는다 */
    #sessionLayer.is-shrink .ses-standings { columns: auto 130px; }
    .roster-box { width: 100vw; }
    #rosterModal .km-modal-foot .mini-btn, #historyModal .km-modal-foot .mini-btn { padding: 10px 12px; white-space: nowrap; }
    .hist-label { flex-basis: 100%; }
}

/* ───── 낮은 화면 (브라우저 창으로 띄운 전자칠판 · 노트북) ─────
   1366×768 · 1280×800 화면에서 주소창과 작업표시줄을 빼면 창 높이가 620~700px 이다.
   첫 화면이 734px 이라 그 높이에서는 [배틀 시작] 이 화면 아래로 밀려 스크롤해야 보였다.
   세로 여백 · 로고 · 예시 칸을 한 단씩 줄여 시작 단추와 아래 줄까지 한눈에 들어오게 한다. */
@media (min-width: 769px) and (max-height: 760px) {
    #overlay .overlay-content { padding: 10px 0 16px; }
    /* 줄여서 다 들어오면 남는 자리는 위아래로 나눈다 (넘치면 저절로 위에서부터 놓인다) */
    #overlay:not(.has-rank) .overlay-content { margin: auto 0; justify-content: center; }
    .title-area { margin-bottom: 10px; }
    .logo-img { height: 66px; }
    .grade-tabs { padding: 6px; }
    .grade-tab { padding: 7px 6px; }
    .pick-band, .opt-band { padding: 11px 16px; gap: 8px 12px; }
    .pick-cell, .opt-cell { gap: 5px; }
    .pick-select, .pick-more, .opt-band .tool-btn, .dice-btn { height: 42px; }
    .dice-btn { width: 42px; }
    .preview-wrap { padding: 9px 14px; }
    .preview-card { padding: 8px 10px 7px; gap: 4px; min-height: 68px; }
    .preview-q .geo-fig { max-height: 96px; }
    .gt-thumb { padding: 10px 12px 12px; gap: 6px; }
    .gt-solo-btns { padding: 0 12px 12px; }
    .gt-solo-btn { height: 36px; }
    .action-btn-row { margin-top: 12px; }
    #startBtn, .qr-btn { height: 52px; min-height: 52px; }
    .tool-row { margin-top: 10px; }
}
@media (min-width: 769px) and (max-height: 650px) {
    .logo-img { height: 54px; }
    .title-area { margin-bottom: 6px; }
    .preview-side-btns { gap: 5px; }
    .preview-side-btns .tool-btn { height: 32px; }
    .preview-refresh { width: 34px; height: 34px; }
    .preview-q { font-size: 1.15rem; }
}