:root{--navy:#081423;--panel:#10243a;--line:#31506d;--ink:#edf6ff;--muted:#a5b8c9;--cyan:#27d4e8;--amber:#ffb347;--bad:#ff7d7d}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--navy);color:var(--ink);font-family:system-ui,sans-serif;min-height:100vh}.shell{max-width:1200px;margin:auto;padding:24px}.panel{background:var(--panel);border:1px solid var(--line);padding:32px}.join{max-width:540px;margin:12vh auto}.center{text-align:center;max-width:700px;margin:12vh auto}.eyebrow{font-size:.75rem;letter-spacing:.16em;color:var(--muted);margin:0 0 8px}h1,h2,p{margin-top:0}h1{letter-spacing:.08em}label{display:grid;gap:7px;color:var(--muted)}input{height:52px;border:1px solid var(--line);background:#07111d;color:var(--ink);font-size:1.2rem;padding:8px}button{min-height:52px;border:0;background:var(--cyan);color:#04101b;font-weight:800;font-size:1rem;padding:10px 20px;cursor:pointer}button:disabled{opacity:.5}.join form,.mode-actions{display:grid;gap:16px;margin-top:24px}.error{color:var(--bad);min-height:1.2em}.hud{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;text-align:center;position:sticky;top:0;background:var(--navy);z-index:2;padding:8px 0}.hud time{font-size:2rem;font-weight:800}.team{font-size:1.1rem;display:flex;gap:12px;align-items:center}.team strong{display:flex;align-items:center;gap:8px}.team b{font-size:2.3rem}.team em{font-style:normal;border:3px solid currentColor;border-radius:99px;padding:3px 8px;font-size:.85rem}.team.is-me{outline:3px solid currentColor;outline-offset:5px;border-radius:4px}.cyan{color:var(--cyan);justify-content:flex-start}.amber{color:var(--amber);justify-content:flex-end}.status{text-align:center;min-height:24px;color:var(--muted)}.legend{display:flex;justify-content:center;gap:20px;font-size:.88rem;color:var(--muted);margin:0 0 8px}.legend-mine{color:var(--cyan)}.legend-enemy{color:var(--amber)}.board{display:grid;gap:7px;max-height:calc(100vh - 180px);aspect-ratio:1.4;margin:auto}.board.grid-6{grid-template-columns:repeat(6,1fr)}.board.grid-7{grid-template-columns:repeat(7,1fr)}.cell{border:2px solid var(--line);background:#152d43;color:var(--ink);font-size:1.3rem;font-weight:bold;min-height:48px}.cell.CYAN{background:repeating-linear-gradient(135deg,#0e4a5c,#0e4a5c 9px,#0c4050 9px,#0c4050 18px);border-color:var(--cyan);filter:saturate(.78)}.cell.AMBER{background:repeating-linear-gradient(45deg,#5a3c15,#5a3c15 9px,#4a300e 9px,#4a300e 18px);border-color:var(--amber)}.cell.CYAN:not(:disabled){box-shadow:inset 0 0 0 2px #abf9ff;cursor:pointer}.cell.AMBER:not(:disabled){box-shadow:inset 0 0 0 2px #ffe2ab;cursor:pointer}.cell.locked{opacity:.55;cursor:not-allowed}.cell.flash{outline:3px solid white}.cell.level-A{border-style:solid}.cell.level-B{border-style:dashed}.cell.level-C{border-width:4px}.cell.flip{animation:territory-flip .32s ease-out both;animation-delay:var(--flip-delay,0ms)}@keyframes territory-flip{0%{transform:perspective(480px) rotateY(0)}49%{transform:perspective(480px) rotateY(90deg)}100%{transform:perspective(480px) rotateY(0)}}.top5{font-size:1.3rem;line-height:1.9}.top5 li{display:flex;justify-content:space-between;max-width:460px;border-bottom:1px solid var(--line)}dialog{background:transparent;border:0;color:var(--ink);width:min(630px,94vw)}dialog::backdrop{background:#020810cc}dialog section{background:var(--panel);border:1px solid var(--line);padding:26px;text-align:center}.equation{display:flex;justify-content:center;align-items:center;gap:22px;font-size:2.2rem;margin:22px}.frac{display:inline-grid;grid-template-rows:auto 3px auto;text-align:center;min-width:54px}.frac i{height:3px;background:currentColor;margin:3px 0}.answer{display:grid;grid-template-columns:1fr 1fr 12px 1fr;gap:10px;align-items:end;text-align:left}.answer input{width:100%}.fraction-bar{height:2px;background:var(--ink);margin-bottom:25px}.keypad{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin:18px 0}.keypad button{background:#21415c;color:var(--ink);font-size:1.3rem}.submit{width:100%;background:var(--amber)}.teacher section{margin-top:32px}.teacher li{margin:6px}.teacher table{border-collapse:collapse;width:100%}.teacher td,.teacher th{border-bottom:1px solid var(--line);padding:7px;text-align:left}.secondary{margin-top:20px;background:transparent;border:1px solid var(--line);color:var(--ink)}.briefing{height:calc(100vh - 48px);max-width:1080px;margin:auto;display:grid;grid-template-rows:auto 1fr auto;gap:12px;text-align:center}.briefing h2{margin:0}.brief-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:10px;min-height:0}.brief-card{border:1px solid var(--line);background:var(--panel);padding:10px;display:grid;place-items:center;align-content:center;gap:6px;min-height:0}.brief-card small{color:var(--muted)}.mini-board,.bonus-diagram{display:grid;grid-template-columns:repeat(3,35px);grid-template-rows:repeat(3,25px);gap:3px}.mini-cell,.bonus-diagram i{display:grid;place-items:center;font-size:.62rem;border:1px solid var(--line)}.mini-cell.mine{background:repeating-linear-gradient(135deg,#0e4a5c,#0e4a5c 6px,#0c4050 6px,#0c4050 12px);border-color:var(--cyan)}.mini-cell.enemy{background:repeating-linear-gradient(45deg,#5a3c15,#5a3c15 6px,#4a300e 6px,#4a300e 12px);border-color:var(--amber)}.mini-cell.locked{background:#526274}.level-diagram{display:grid;gap:6px;width:150px}.level-diagram b{padding:5px;border:2px solid var(--line)}.level-diagram .level-A{border-style:solid}.level-diagram .level-B{border-style:dashed}.level-diagram .level-C{border-width:4px}.bonus-diagram i{background:#4a300e}.bonus-diagram .bonus-center{grid-column:2;grid-row:2;background:var(--cyan);color:#04101b}.bonus-diagram i:nth-child(2){grid-column:2}.bonus-diagram i:nth-child(3){grid-column:1;grid-row:2}.bonus-diagram i:nth-child(5){grid-column:3;grid-row:2}.bonus-diagram i:nth-child(6){grid-column:2;grid-row:3}.answer-demo{display:grid;grid-template-columns:50px 50px 8px 50px;gap:5px;align-items:end}.answer-demo label{font-size:.6rem;text-align:left}.answer-demo span{display:block;border:1px solid var(--line);height:28px;background:#07111d;padding:5px;color:var(--ink);font-size:.9rem}.answer-demo i{height:2px;background:var(--ink);margin-bottom:13px}.cooldown-mark{width:60px;height:60px;border:4px solid var(--bad);border-radius:50%;display:grid;place-items:center;color:var(--bad);font-size:2rem;font-weight:800}.team-reveal{position:fixed;inset:0;z-index:8;display:grid;place-content:center;text-align:center;color:#04101b}.team-reveal h2{font-size:clamp(2.3rem,6vw,5rem);margin:.2em}.team-reveal .eyebrow{color:#04101b}.team-reveal p{font-weight:700}@media (prefers-reduced-motion:reduce){.cell.flip{animation:none}}@media (max-height:768px){.shell{padding:12px}.hud time{font-size:1.5rem}.board{gap:4px}.cell{min-height:42px}.briefing{height:calc(100vh - 28px);padding-top:4px}.briefing header p,.briefing header h2,.briefing header>p{margin-bottom:3px}.brief-card{padding:6px}.mini-board,.bonus-diagram{transform:scale(.85)}.brief-card small{font-size:.7rem}.briefing button{min-height:44px}}
.brief-answer-option{display:flex;align-items:center;justify-content:center;gap:7px}.answer-demo-pair{display:flex;align-items:center;justify-content:center;gap:9px}.answer-demo-pair .brief-answer-option{gap:4px}.answer-demo-pair .answer-demo{grid-template-columns:34px 34px 6px 34px;gap:3px}.answer-mark{font-size:1.35rem;font-weight:900}.correct-mark{color:var(--cyan)}.incorrect-mark{color:var(--bad)}.correct-rule{border-color:var(--cyan)}.incorrect-rule{border-color:var(--bad)}
.teacher .delete-student{min-height:36px;padding:7px 12px;color:#fff;background:#9f2635;border:1px solid var(--bad)}
.record-delete-note{display:inline-block;max-width:190px;color:var(--muted);font-size:.78rem;line-height:1.35}

/* ── 게임 설명(브리핑) 읽기 문제 정리 ───────────────────────────────
   1) 한글은 기본적으로 글자 단위로 줄바꿈되어 "자연수"가 "자 / 연수"로 쪼개졌다.
      낱말 단위로 끊기게 한다. 분수(.frac)가 문장 중간에 들어가면 더 심해진다.
   2) .brief-grid 가 3열로 고정되어 있어 좁은 화면에서 카드가 화면 밖으로 나갔다.
      .briefing 도 높이가 100vh 로 묶여 있어 넘친 내용을 볼 방법이 없었다. */
.briefing, .briefing small, .briefing strong, .briefing p { word-break: keep-all; overflow-wrap: break-word; }
/* 문장 속 분수는 글자와 같은 줄에 앉고, 앞뒤 낱말과 떨어지지 않게 한다. */
.briefing .frac { vertical-align: middle; margin: 0 2px; }
.briefing .answer-demo { max-width: 100%; }

@media (max-width: 900px) {
  /* 3열 → 2열. 카드 높이도 내용에 맞춘다. */
  .brief-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .briefing { height: auto; min-height: calc(100vh - 48px); }
}

@media (max-width: 620px) {
  /* 휴대폰: 한 줄에 한 장. 화면을 넘치면 스크롤로 읽는다. */
  .brief-grid { grid-template-columns: 1fr; }
  .briefing { height: auto; min-height: 0; }
  .brief-card { padding: 14px; }
  .brief-card small { font-size: .8rem; }
  /* 답 입력 예시 두 개가 나란히 있으면 가로로 넘친다. 줄을 바꾸게 한다. */
  .brief-answer-option { flex-wrap: wrap; justify-content: center; }
  .answer-demo { grid-template-columns: 44px 44px 8px 44px; }
}

/* ── 설명의 답 입력 예시를 실제 입력칸과 같은 모양으로 ─────────────────
   실제 게임은 분자 위, 분모 아래로 쌓고 그 사이에 분수 막대를 둔다(.fraction-input).
   그런데 설명 예시는 가로로 늘어놓아 "1 - 2"처럼 빼기로 읽혔다. 같은 모양으로 맞춘다. */
.answer-demo {
  grid-template-columns: 52px 58px;
  grid-template-rows: auto 3px auto;
  gap: 4px 10px;
  align-items: center;
  justify-content: center;
}
.answer-demo > label:nth-of-type(1) { grid-column: 1; grid-row: 1 / 4; align-self: center; }
.answer-demo > label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
.answer-demo > i                    { grid-column: 2; grid-row: 2; height: 3px; margin: 0; width: 100%; }
.answer-demo > label:nth-of-type(3) { grid-column: 2; grid-row: 3; }
.answer-demo label { text-align: center; }
.answer-demo label span { text-align: center; }

@media (max-width: 620px) {
  .answer-demo { grid-template-columns: 46px 52px; }
}

/* 문장 속 분수는 글자 크기에 맞춘다. 기본 .frac 은 문제 화면용이라 폭이 54px 로 넓어,
   설명 문장에 들어가면 "1"과 분수가 멀어져 대분수가 두 개의 수처럼 읽혔다. */
.briefing small .frac,
.briefing p .frac {
  min-width: 0;
  padding: 0 5px;
  font-size: .95em;
  margin: 0 1px 0 3px;
}
.briefing small .frac i,
.briefing p .frac i { height: 2px; margin: 2px 0; }