:root{
  --ink:#10222f; --ink2:#2b4356; --paper:#f7fbfd; --card:#ffffff;
  --line:#c6d8e4; --accent:#0a5578; --accent-ink:#ffffff;
  --gold:#8a5a00; --gold-bg:#ffe9a8; --danger:#8c1d18; --ok:#0d5c33;
  --tap:56px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;overscroll-behavior:none}
body{
  font-family:'Apple SD Gothic Neo','Malgun Gothic',system-ui,sans-serif;
  color:var(--ink); background:#0a1a24; -webkit-text-size-adjust:100%;
  touch-action:manipulation; user-select:none;
}
#app{position:fixed;inset:0;overflow:hidden;background:#0a1a24}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block}
#ui{position:absolute;inset:0}
#boot{position:absolute;inset:0;display:grid;place-items:center;color:#e8f4fa;font-size:16px}

.screen{position:absolute;inset:0;display:none;flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
.screen.on{display:flex}
.screen.overlay{background:rgba(6,20,28,.82)}
.pane{background:var(--paper);margin:auto;width:min(560px,100%);min-height:100%;padding:16px 16px 32px;display:flex;flex-direction:column;gap:12px}

h1{font-size:28px;margin:8px 0 0;letter-spacing:-.5px}
h2{font-size:20px;margin:4px 0}
p{margin:0;line-height:1.5;font-size:15px;color:var(--ink2)}
.small{font-size:13px;color:var(--ink2)}

button{
  font:inherit;font-weight:700;color:var(--ink);background:var(--card);
  border:2px solid var(--line);border-radius:14px;min-height:var(--tap);
  padding:12px 16px;cursor:pointer;text-align:left;width:100%;
}
button:active{transform:translateY(1px)}
button.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
button.ghost{background:transparent}
button[disabled]{opacity:.5;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row>button{width:auto;flex:1 1 40%}
.card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:12px}

/* ── 게임 HUD */
#hud{position:absolute;top:0;left:0;right:0;padding:8px 12px;display:flex;gap:10px;align-items:center;
  background:linear-gradient(180deg,rgba(4,18,26,.72),rgba(4,18,26,0));color:#fff;font-weight:800}
#hud .chip{background:rgba(255,255,255,.92);color:var(--ink);border-radius:999px;padding:6px 10px;font-size:14px;white-space:nowrap;flex:0 0 auto}
#hud{font-size:14px}
#hud .btn{margin-left:auto;width:auto;flex:0 0 auto}
#tide{letter-spacing:2px;font-size:15px}
#hud .lbl{font-size:12px;opacity:.75;font-weight:700}
#gauge{position:absolute;left:12px;right:12px;bottom:120px;height:22px;border-radius:11px;background:rgba(255,255,255,.35);overflow:hidden;display:none}
#gauge.on{display:block}
#gauge > i{display:block;height:100%;background:linear-gradient(90deg,#ffe9a8,#ff9d3c,#e8452f);width:0}
#gaugeMarks{position:absolute;inset:0}
#gaugeMarks span{position:absolute;top:0;bottom:0;width:2px;background:rgba(0,0,0,.45)}
#gaugeMarks .m35{left:35%}
#gaugeMarks .m75{left:75%}

#tension{position:absolute;left:12px;right:12px;bottom:120px;height:34px;border-radius:10px;
  background:#0e2532;border:2px solid #cfe3ee;overflow:hidden;display:none}
#tension.on{display:block}
#tension .green{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,#1f8a4c,#1f8a4c 6px,#25a259 6px,#25a259 12px)}
#tension .red{position:absolute;top:0;bottom:0;right:0;background:repeating-linear-gradient(45deg,#8c1d18,#8c1d18 6px,#a82a24 6px,#a82a24 12px)}
/* 🔴 왼쪽 위험 구역 — 줄이 늘어져 바늘이 빠지는 쪽. 오른쪽과 같은 무늬를 거울로 쓴다. */
#tension .redL{position:absolute;top:0;bottom:0;left:0;background:repeating-linear-gradient(-45deg,#8c1d18,#8c1d18 6px,#a82a24 6px,#a82a24 12px)}
/* 위험 게이지 = 빨간 띠 안에서 «바깥 끝부터» 밝게 차오른다. transform 만 만져 레이아웃을 안 건드린다. */
#tension .red > i,#tension .redL > i{position:absolute;top:0;bottom:0;left:0;right:0;display:block;
  background:#ff5a4e;box-shadow:0 0 10px #ff5a4e;transform:scaleX(0)}
#tension .red > i{transform-origin:right center}
#tension .redL > i{transform-origin:left center}
#tension.warn{border-color:#ff9a90}
#tension .mark{position:absolute;top:-3px;bottom:-3px;width:5px;background:#fff;border-radius:3px;box-shadow:0 0 0 2px #06202c}
#distbar{position:absolute;left:12px;right:12px;bottom:100px;height:10px;border-radius:5px;background:rgba(255,255,255,.3);display:none}
#distbar.on{display:block}
#distbar > i{display:block;height:100%;border-radius:5px;background:#ffe9a8;width:100%}

#hint{position:absolute;left:0;right:0;bottom:64px;text-align:center;color:#fff;font-weight:800;font-size:17px;
  text-shadow:0 2px 6px rgba(0,0,0,.7);pointer-events:none}

/* ── 문항 카드(하단 40%) */
/* 🔴 40% 로는 선택지 4개가 안 들어간다 — 분수 때문에 줄 간격을 키운 뒤 카드가 386px 를
   요구하는데 40% 는 작은 폰에서 252px 뿐이라, 아이가 마지막 선택지를 보려면 스크롤해야 했다
   (2026-09-08 실측 15/15 넘침). 찌는 화면 34% 근처에 뜨므로 56% 까지는 가리지 않는다. */
#quiz{position:absolute;left:8px;right:8px;bottom:8px;max-height:56%;overflow:auto;
  background:var(--card);border:2px solid var(--line);border-radius:18px;padding:12px;
  transform:translateY(120%);transition:transform .2s ease;display:flex;flex-direction:column;gap:8px}
#quiz.on{transform:translateY(0)}
/* 🔴 분수는 두 줄 높이를 먹는다 — 줄 간격을 넉넉히 두지 않으면 아래가 잘린다(2026-09-08 실측). */
#quiz .stem{font-size:17px;font-weight:800;line-height:1.95}
#quiz .choices{display:flex;flex-direction:column;gap:8px}
#quiz .choices button{min-height:52px;padding:12px 14px;font-size:16px;line-height:1.95}
/* 🔢 실제 분수 모양 — 「3/8」이 아니라 3 위에 8. 가로줄은 아래 칸의 위 테두리로 그린다. */
/* 🔴 inline-flex 의 «기준선»은 첫 줄(분자)의 기준선이라, vertical-align 로 아무리 밀어도
   글꼴·줄간격이 바뀌면 높낮이가 같이 흔들린다. inline-block 으로 바꾸고 가로줄을 분자의
   아래 테두리로 그린다 — 줄이 분자·분모 사이 한가운데 놓이고, 두께도 글자 크기를 따라간다.
   px 로 박으면 작은 화면에서 줄만 두꺼워 보인다(2026-09-08 사용자 지적). */
/* 🔴 vertical-align 로 맞추려 하면 안 된다 — 그 값이 줄 상자 높이를 바꿔서 옆 글자까지
   같이 움직이고, 되먹임이 생겨 값이 수렴하지 않는다(2026-09-08: +0.86em 을 줬더니
   1.63em 이 움직였다). 정렬은 레이아웃을 건드리지 않는 position:relative 로 한다. */
.frac{display:inline-block;vertical-align:baseline;position:relative;top:0.445em;text-align:center;
  line-height:1.12;margin:0 .2em;font-size:.80em;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.frac .num{display:block;padding:0 .3em .05em;border-bottom:.09em solid currentColor}
.frac .den{display:block;padding:.05em .3em 0}
/* 세로가 짧은 기기(구형 폰)에서는 56% 도 빠듯하다 — 줄 간격과 패딩을 한 단계 줄인다.
   1.85 아래로는 두 줄짜리 분수(약 1.8em)가 다시 잘리므로 여기가 하한이다. */
@media (max-height:700px){
  #quiz .stem{font-size:16px;line-height:1.85}
  #quiz .choices button{min-height:46px;padding:10px 12px;font-size:15px;line-height:1.85}
  #quiz{padding:10px;gap:6px}
  #quiz .choices{gap:6px}
}
/* 🔴 아주 낮은 화면(360×640 같은 구형 폰)에서는 «줄 간격»을 더 못 줄인다 — 1.85 가 분수의
   하한이다. 대신 여백을 깎는다. 실측(2026-09-09): 긴 문항 「회의 주제를…」이 366px 를
   요구하는데 카드는 354px 뿐이라 **카드 안에서 조용히 스크롤**됐다 — 아이는 아래 선택지를
   못 본다. 카드를 키우면 하단 40% 규칙(C1)이 깨지므로 내용 쪽을 줄인다(여유 ≈18px). */
@media (max-height:660px){
  #quiz{padding:8px;gap:4px}
  #quiz .choices{gap:4px}
  #quiz .choices button{min-height:44px;padding:8px 12px}
}
/* 🔴 판정은 «크고 눈에 띄게». 15px 회색 한 줄로는 아이가 맞았는지 틀렸는지도 못 알아챈다
   (2026-09-09 사용자 「문제를 풀면 맞았다 틀렸다.. 알려줘야지」). 색 띠를 깔아 한눈에 보인다. */
#quiz .fb{font-size:17px;font-weight:900;line-height:1.5;border-radius:12px;padding:0}
#quiz .fb.ok,#quiz .fb.no{padding:10px 12px}
#quiz .fb.ok{color:#0b3d22;background:#c9f2d8;border:2px solid var(--ok)}
#quiz .fb.no{color:#4a0f0c;background:#ffd8d4;border:2px solid var(--danger)}
/* 설명은 판정 아래 별도 줄 — 한 줄에 섞으면 둘 다 안 읽힌다 */
#quiz .why{font-size:14px;line-height:1.6;color:var(--ink2)}
#quiz .why:empty{display:none}
/* 채점된 뒤: 정답 자리는 초록, 내가 고른 오답은 빨강. 누른 자리에 표시가 나야 이어진다. */
/* 🔴 채점 뒤에는 **필요한 것만 남긴다.** 판정 배너와 설명이 붙으면 카드가 길어져 작은 화면
   (360×640)에서 안쪽 스크롤이 생기고 「찌가 잠기는지 보세요」 힌트까지 가린다(실측 9건).
   아이에게 필요한 건 «정답이 무엇인가»와 «내가 뭘 골랐나» 둘뿐이라, 나머지 선택지는 접는다. */
#quiz.done .skip{display:none}
#quiz.done .choices button{display:none}
#quiz.done .choices button.ans,#quiz.done .choices button.mine{display:block}
#quiz.done .choices button.ans{opacity:1;background:#c9f2d8;border-color:var(--ok);color:#0b3d22}
#quiz.done .choices button.ans::after{content:'  ⭕';font-weight:900}
#quiz.done .choices button.mine{opacity:1;background:#ffd8d4;border-color:var(--danger);color:#4a0f0c}
#quiz.done .choices button.mine::after{content:'  ❌';font-weight:900}
#quiz .skip{background:transparent;border-style:dashed;min-height:44px;font-weight:600;color:var(--ink2)}

/* ── 결과 카드 */
/* 🔴 카드는 아래 3분의 1에 둔다 — 정중앙에 두면 들어올린 물고기를 정확히 가린다(2026-09-08). */
#catch{position:absolute;left:16px;right:16px;bottom:12%;transform:scale(.9);
  background:var(--card);border:3px solid var(--line);border-radius:20px;padding:16px;
  opacity:0;transition:opacity .18s ease, transform .18s ease;pointer-events:none;text-align:center}
#catch.on{opacity:1;transform:scale(1);animation:catchPop .42s cubic-bezier(.2,1.5,.4,1)}
@keyframes catchPop{0%{transform:scale(.72)}55%{transform:scale(1.06)}100%{transform:scale(1)}}
/* 등급이 높을수록 테두리가 빛난다 — 「전설을 잡았다」가 카드에서 바로 읽혀야 한다. */
#catch.r-rare{border-color:#e08a3c;box-shadow:0 0 0 4px rgba(224,138,60,.28)}
#catch.r-legend{border-color:#e0a800;box-shadow:0 0 0 5px rgba(224,168,0,.35),0 0 32px rgba(255,200,60,.55)}
#catch .cm{font-size:34px;font-weight:900;color:var(--accent)}
/* 🎉 희귀·전설 포획 순간의 화면 번쩍임. 아이가 「해냈다」를 몸으로 느끼는 유일한 신호다. */
#flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 42%,rgba(255,238,170,.95),rgba(255,214,90,0) 62%)}
#flash.on{animation:flashPop .5s ease-out}
@keyframes flashPop{0%{opacity:0}18%{opacity:.85}100%{opacity:0}}
#catch .name{font-size:24px;font-weight:900}
#catch .cm{font-size:34px;font-weight:900;color:var(--accent)}
#catch .tag{display:inline-block;background:var(--gold-bg);color:var(--gold);border-radius:999px;padding:4px 10px;font-weight:800;font-size:13px;margin-top:6px}

table{width:100%;border-collapse:collapse;font-size:15px}
th,td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:left}
th{font-size:13px;color:var(--ink2)}
tr.me td{background:var(--gold-bg);font-weight:800}
.tabs{display:flex;gap:6px;flex-wrap:wrap}
.tabs button{width:auto;flex:0 0 auto;min-height:44px;padding:8px 12px;font-size:14px}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.dexcard{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px;text-align:center;font-size:13px}
.dexcard.locked{color:#8ba4b3;background:#eef4f8}
.dexcard .sw{width:100%;height:34px;border-radius:8px;background:#b9cad6;margin-bottom:4px}
.badge{display:inline-block;border-radius:999px;padding:2px 8px;font-size:12px;font-weight:800}
.b-common{background:#e6eef3;color:#33566b} .b-normal{background:#dcecff;color:#1c4f86}
.b-rare{background:#ffe3c9;color:#8a4b13} .b-legend{background:#ffe9a8;color:var(--gold)}
.b-junk{background:#e9e9e9;color:#555}
.srsdot{letter-spacing:2px}
@media (min-width:900px){ .pane{border-radius:18px;min-height:0;margin:24px auto} }

/* 입력이 캔버스에 닿도록 — 오버레이는 필요한 요소만 클릭을 받는다 */
#ui{pointer-events:none}
.screen{pointer-events:auto}
#screen-game{pointer-events:none;background:transparent}
#screen-game #quiz,#screen-game #hud .btn,#screen-game #catch.on{pointer-events:auto}

/* 🖥️ 몰입 모드 — 전체화면 API 가 없는 곳(iOS 사파리)의 대체. 주소창을 밀어내고 여백을 없앤다. */
body.immersive #app{ height:100dvh }
body.immersive{ position:fixed; inset:0; width:100%; height:100dvh }

/* 접근성 — 동작 최소화 선호 시 전환 애니메이션을 끈다 */
@media (prefers-reduced-motion: reduce){
  #quiz,#catch{transition:none}
  *{animation:none!important}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 공용 모달 — 네이티브 alert/confirm 대신(아이용 앱에서 시스템 대화상자는 무섭고 스타일이 없다) */
#modal{position:absolute;inset:0;display:none;place-items:center;background:rgba(6,20,28,.72);padding:16px;pointer-events:auto;z-index:20}
#modal.on{display:grid}
#modal .box{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:16px;max-width:420px;width:100%;display:flex;flex-direction:column;gap:10px}
#modal h2{margin:0}