/* 스탯스토리 — storybook-fantasy game UI: cream paper panels with ink outlines over illustrated scenes.
   Single deliberate look (daytime fantasy); colors are set explicitly so it reads the same on any host theme. */
:root {
  --ink: #2b2140;
  --ink-2: #4a3d66;
  --ink-soft: #6f6390;
  --paper: #fffaf0;
  --paper-2: #f6ecd8;
  --paper-3: #efe1c4;
  --paper-line: #dcc9a3;
  --sky: #bfe8ff;
  --leaf: #5cbf4d;
  --leaf-deep: #3d8f35;
  --gold: #ffc83d;
  --gold-deep: #d98e0b;
  --orange: #ff8a2a;
  --orange-deep: #d9620c;
  --hp: #ff4d6d;
  --hp-deep: #c41f45;
  --exp: #ffd23f;
  --exp-deep: #e0a106;
  --mint: #2fc4a1;
  --mint-deep: #158a6f;
  --violet: #7c5cff;
  --violet-deep: #4b2fc4;
  --ok: #1fa95e;
  --ok-bg: #e2f7e9;
  --bad: #e63e50;
  --bad-bg: #ffe9eb;
  --shade: rgba(43, 33, 64, .28);
  /* 글꼴은 모두 '통통 주아체' 하나(--f-game: 주아, 주아에 없는 글자는 고운돋움·Noto): 제목(--f-display)·이름표·단추(--f-ui)·숫자(--f-num)·본문(--f-body)과
     문제 지문·보기·해설·대사(--f-quiz·--f-pick·--f-sol·--f-talk, 설정의 '글꼴'). 기본체(--f-plain)는 아래 html.font-plain 이 글 읽는 칸에만 쓴다 */
  --f-game: "Jua", "Gowun Dodum", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-plain: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-display: var(--f-game);
  --f-ui: var(--f-game);
  --f-body: var(--f-game);
  --f-num: var(--f-game);
  --f-quiz: var(--f-game);
  --f-pick: var(--f-game);
  --f-sol: var(--f-game);
  --f-talk: var(--f-game);
  /* 수식의 영문 변수(x, Y, Z 등): 굵은 주아 한글 옆에서 가는 Times 는 따로 놀아서, 둥글고 굵은 기울임(Nunito, 못 불러오면 주아를 기울여) */
  --f-mvar: "Nunito", "Jua", sans-serif;
  --w-mvar: 800;
  --r-lg: 20px;
  --r-md: 14px;
  --r-sm: 10px;
  color-scheme: light;
}
/* 기본체(설정 '글꼴: 기본체', js/settings.js 가 <html> 에 붙인다): 본문·문제·보기·해설·대사를 반듯한 Noto Sans KR 로(제목·이름표·단추·숫자는 그대로 주아) */
html.font-plain { --f-body: var(--f-plain); --f-quiz: var(--f-plain); --f-pick: var(--f-plain); --f-sol: var(--f-plain); --f-talk: var(--f-plain); --f-mvar: "Times New Roman", "Noto Serif", serif; --w-mvar: 400; }

html, body { height: 100%; }
body {
  margin: 0;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
* { box-sizing: border-box; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
svg { display: block; }

#app { height: 100%; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.scroll { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding-inline: 16px; }

/* ---------- buttons ---------- */
.btn {
  --c: var(--orange); --cd: var(--orange-deep); --t: #fff; --ts: var(--orange-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-ui); font-size: 18px; line-height: 1.1; color: var(--t);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 62%, #fff) 0%, var(--c) 48%, var(--c) 100%);
  border: 3px solid var(--ink); border-radius: 14px; padding: 11px 20px 12px;
  box-shadow: 0 5px 0 var(--ink), inset 0 -4px 0 var(--cd), inset 0 2px 0 rgba(255, 255, 255, .55);
  text-shadow: 0 2px 0 var(--ts);
  cursor: pointer; user-select: none;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.btn:hover { filter: brightness(1.06) saturate(1.05); }
.btn:active, .btn.pressed { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink), inset 0 -2px 0 var(--cd), inset 0 2px 0 rgba(255, 255, 255, .55); }
.btn:focus-visible, .choice:focus-visible, .swatch:focus-visible, .opt:focus-visible, .node:focus-visible, .step:focus-visible, .slot:focus-visible, .icon-btn:focus-visible {
  outline: 3px solid var(--violet); outline-offset: 3px;
}
.btn.paper { --c: #fffaf0; --cd: #e4d4b2; --t: var(--ink); --ts: transparent; }
.btn.gold { --c: var(--gold); --cd: var(--gold-deep); --t: #5a3a00; --ts: rgba(255, 255, 255, .55); }
.btn.mint { --c: var(--mint); --cd: var(--mint-deep); --ts: var(--mint-deep); }
.btn.violet { --c: var(--violet); --cd: var(--violet-deep); --ts: var(--violet-deep); }
.btn.big { font-size: 22px; padding: 14px 30px 15px; border-radius: 16px; }
.btn.small { font-size: 15px; padding: 7px 12px 8px; border-radius: 11px; box-shadow: 0 4px 0 var(--ink), inset 0 -3px 0 var(--cd), inset 0 2px 0 rgba(255, 255, 255, .55); }
.btn.small:active { box-shadow: 0 1px 0 var(--ink), inset 0 -2px 0 var(--cd); }
.btn[aria-disabled="true"] { filter: grayscale(.85) brightness(1.05); }
.btn svg { width: 20px; height: 20px; flex: none; }

.icon-btn {
  width: 40px; height: 40px; flex: none; display: grid; place-items: center;
  border: 3px solid var(--ink); border-radius: 12px; background: var(--paper);
  box-shadow: 0 3px 0 var(--ink); cursor: pointer; padding: 0;
}
.icon-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------- panels and small parts ---------- */
.panel {
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r-lg);
  box-shadow: 0 6px 0 var(--shade), inset 0 0 0 3px var(--paper-2);
}
.ribbon {
  display: inline-block; font-family: var(--f-ui); font-size: 17px; color: #fff;
  background: var(--violet); border: 3px solid var(--ink); border-radius: 10px;
  padding: 4px 14px 5px; box-shadow: 0 3px 0 var(--ink); text-shadow: 0 2px 0 var(--violet-deep);
}
.pill {
  display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-ui); font-size: 13px;
  padding: 2px 9px 3px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; white-space: nowrap;
}
.pill.ok { background: var(--ok-bg); color: #0f6a3a; border-color: var(--ok); }
.pill.lock { background: #ece8f3; color: var(--ink-soft); border-color: #b9b0cc; }
.pill.go { background: #fff3cf; color: #7a4d00; border-color: var(--gold-deep); }
.pill.boss { background: #efe8ff; color: var(--violet-deep); border-color: var(--violet); }
.stars { color: var(--gold-deep); letter-spacing: 1px; }
.muted { color: var(--ink-soft); }
.lv {
  font-family: var(--f-num); font-size: 14px; line-height: 1; color: var(--gold);
  background: var(--ink); border-radius: 7px; padding: 3px 7px 3px; white-space: nowrap;
}
/* 몬스터 레벨: 내 레벨과 비교한 어려움에 따라 글자색(아주 쉬움 회색, 쉬움 초록, 알맞음 금색, 버거움 주황, 위험 빨강) */
.lv.gap-easy { color: #cfc8e2; }
.lv.gap-low { color: #8ce99a; }
.lv.gap-high { color: #ffb15e; }
.lv.gap-danger { color: #ff8fa3; }
.coin { display: inline-flex; align-items: center; gap: 5px; font-family: var(--f-num); font-size: 16px; font-variant-numeric: tabular-nums; }
.coin svg { width: 20px; height: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- HUD ---------- */
.hud {
  flex: none; position: relative; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: rgba(255, 250, 240, .96);
  border-bottom: 3px solid var(--ink);
}
.hud .portrait {
  width: 46px; height: 46px; flex: none; border-radius: 50%; overflow: hidden;
  border: 3px solid var(--ink); background: radial-gradient(circle at 50% 38%, #fff 0 30%, #cfeeff 31% 100%);
}
.hud .portrait svg { width: 100%; height: 100%; }
.hud .who { min-width: 0; display: grid; gap: 3px; }
.hud .name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.hud .name { font-family: var(--f-ui); font-size: 17px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .title-tag { font-family: var(--f-ui); font-size: 12px; color: var(--violet-deep); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hud .bars { flex: 1; min-width: 90px; max-width: 360px; display: grid; gap: 4px; }
.hud .spacer { flex: 1; }
.hud .tools { display: flex; gap: 8px; align-items: center; }

.gauge {
  position: relative; height: 17px; border: 2.5px solid var(--ink); border-radius: 9px;
  background: #3a2f55; overflow: hidden;
}
.gauge .lag, .gauge .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; }
.gauge .lag { background: #fff; opacity: .55; transition: width .8s .35s ease-out; }
.gauge .fill {
  background: linear-gradient(180deg, #ff9db0 0%, var(--hp) 50%, var(--hp-deep) 100%);
  transition: width .45s cubic-bezier(.2, .8, .2, 1);
}
.gauge .fill::after {
  content: ""; position: absolute; left: 3px; right: 3px; top: 2px; height: 30%;
  border-radius: 6px; background: rgba(255, 255, 255, .45);
}
.gauge.exp .fill { background: linear-gradient(180deg, #fff3b0 0%, var(--exp) 50%, var(--exp-deep) 100%); }
.gauge.boss .fill { background: linear-gradient(180deg, #d9c6ff 0%, #9a74ff 50%, #5b2fd6 100%); }
.gauge .txt {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  font-family: var(--f-num); font-size: 12px; letter-spacing: .3px; color: #fff;
  text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink), 1px 1px 0 var(--ink), 0 2px 0 var(--ink);
  font-variant-numeric: tabular-nums;
}
.gauge .tag { position: absolute; left: 6px; top: 0; bottom: 0; display: grid; place-items: center; z-index: 2; font-family: var(--f-num); font-size: 11px; color: #fff; text-shadow: 0 1px 0 var(--ink), 1px 0 0 var(--ink), -1px 0 0 var(--ink); }
.gauge .seg { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--ink); z-index: 3; }
/* 윗줄 HP·EXP 막대가 좁아지면(휴대폰에서 이름이 길 때 70px 까지) 가운데 숫자가 왼쪽 HP·EXP 글씨와 겹친다. 좁을 때는 글씨를 숨긴다(막대 색으로 구분된다). */
.hud .bars { container-type: inline-size; }
@container (max-width: 160px) { .gauge .tag { display: none; } }
/* HP·EXP 숫자는 한 줄로(네 자리 HP 'n / n' 이 좁은 막대에서 두 줄로 꺾여 반만 보였다). 막대가 더 좁으면 글자를 조금 작게 */
.gauge .txt { white-space: nowrap; }
@container (max-width: 110px) { .gauge .txt { font-size: 11px; letter-spacing: 0; } }

/* ---------- shared scene pieces ---------- */
.bg-layer { position: absolute; inset: 0; overflow: hidden; }
.bg-layer > svg { width: 100%; height: 100%; }
.clouds { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cloud { position: absolute; width: 180px; opacity: .95; animation: drift linear infinite; }
.cloud svg { width: 100%; height: auto; }
@keyframes drift { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 260px)); } }
.fireflies { position: absolute; inset: 0; pointer-events: none; }
.firefly { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff6a8; box-shadow: 0 0 10px 3px rgba(255, 240, 140, .8); animation: fly 6s ease-in-out infinite alternate; }
@keyframes fly { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translate(30px, -40px); opacity: .3; } }

/* ---------- title ---------- */
.title-screen { overflow: hidden; }
.title-screen .stage-art { position: absolute; inset: 0; }
.title-screen .critters { position: absolute; left: 0; right: 0; bottom: var(--ground, 14%); height: 0; }
.title-screen .critter { position: absolute; bottom: 0; transform: translate(-50%, 8%); }
.title-card {
  position: relative; z-index: 3; margin: auto; display: grid; justify-items: center; gap: 18px;
  padding: 24px 16px; text-align: center; width: 100%; max-width: 640px;
}
.logo { position: relative; display: inline-block; transform: rotate(-3deg); isolation: isolate; }
.logo .word {
  font-family: var(--f-display); font-size: clamp(56px, 13vw, 112px); line-height: 1; letter-spacing: -1px;
  background: linear-gradient(180deg, #fff7b8 0%, #ffd23f 38%, #ff9d1c 70%, #ff6a1a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: block; padding: 0 6px;
}
.logo .word::before {
  content: attr(data-t); position: absolute; left: 6px; top: 0; z-index: -1; color: var(--ink);
  -webkit-text-stroke: 14px var(--ink); text-shadow: 0 10px 0 var(--ink);
}
.logo .sigma {
  --rot: 12deg;
  position: absolute; right: -58px; top: -46px; width: 70px; height: 80px;
  animation: bob 2.4s ease-in-out infinite;
}
.subtitle {
  font-family: var(--f-ui); font-size: clamp(18px, 3.6vw, 24px); color: #fff;
  background: var(--violet); border: 3px solid var(--ink); border-radius: 12px; padding: 5px 16px 6px;
  box-shadow: 0 4px 0 var(--ink); text-shadow: 0 2px 0 var(--violet-deep); transform: rotate(-1.5deg);
}
.title-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.title-note { font-family: var(--f-ui); font-size: 14px; color: var(--ink); background: rgba(255, 250, 240, .85); border-radius: 10px; padding: 4px 12px; border: 2px solid rgba(43, 33, 64, .35); }
.corner-tools { position: absolute; right: 12px; top: 12px; z-index: 5; display: flex; gap: 8px; }

/* ---------- character creation ---------- */
.create-grid { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 20px; align-items: start; padding-block: 20px 28px; }
.preview-card { position: relative; overflow: hidden; padding: 0; height: 400px; }
.preview-card .bg-layer { border-radius: 17px; }
.preview-card .pedestal { position: absolute; z-index: 2; left: 50%; bottom: var(--ground, 15%); transform: translate(-50%, 6%); width: 56%; max-width: 200px; }
.preview-card .pedestal .idle { animation: breathe 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.preview-card .nameplate-preview { position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%); white-space: nowrap; }
.form-card { padding: 18px 18px 20px; display: grid; gap: 16px; }
.form-card h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 28px; letter-spacing: -.5px; }
.field { display: grid; gap: 8px; }
.field > label, .field > .label { font-family: var(--f-ui); font-size: 16px; color: var(--ink-2); }
.text-input {
  font-family: var(--f-ui); font-size: 20px; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 12px;
  background: #fff; color: var(--ink); width: 100%; box-shadow: inset 0 3px 0 rgba(43, 33, 64, .08);
}
.text-input:focus { outline: 3px solid var(--violet); outline-offset: 2px; }
.field .err { color: var(--bad); font-size: 14px; font-family: var(--f-ui); min-height: 1em; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch {
  width: 40px; height: 40px; border-radius: 50%; border: 3px solid var(--ink); cursor: pointer; padding: 0;
  box-shadow: 0 3px 0 var(--ink), inset 0 -5px 0 rgba(0, 0, 0, .14), inset 0 3px 0 rgba(255, 255, 255, .4);
  transition: transform .12s;
}
.swatch[aria-pressed="true"] { transform: translateY(-3px) scale(1.08); box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--violet), 0 6px 0 4px rgba(43, 33, 64, .2); }
.opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.opt {
  border: 3px solid var(--ink); border-radius: 14px; background: #fff; cursor: pointer; padding: 4px 4px 6px;
  box-shadow: 0 3px 0 var(--ink); display: grid; justify-items: center; gap: 2px;
  font-family: var(--f-ui); font-size: 13px; color: var(--ink-2);
}
.opt svg { width: 62px; height: 62px; }
.opt[aria-pressed="true"] { background: #f0eaff; border-color: var(--violet); box-shadow: 0 3px 0 var(--violet-deep); color: var(--violet-deep); }
.create-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- world map ---------- */
.map-screen .scroll {
  background-color: #8fd679;
  background-image:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .25) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .2) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(61, 143, 53, .25) 0 3px, transparent 4px);
  background-size: 90px 90px, 120px 120px, 70px 70px;
}
.map-head { padding-block: 18px 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.map-head h1 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 6vw, 40px); color: #fff; -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 4px 0 var(--ink); letter-spacing: -.5px; }
.map-board { position: relative; margin: 6px auto 40px; max-width: 760px; }
.map-board > svg.route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-deco { position: absolute; pointer-events: none; }
/* 그림 바닥(map_ground.jpg, 가장자리가 이어지게 만든 무늬)이 있으면 점무늬 대신 이어 붙여 깐다 */
.map-screen .scroll.has-ground { background-size: 520px auto; background-repeat: repeat; }
/* 지역 랜드마크 디오라마(lm_<주차>.png): 동그라미 메달 대신 받침 달린 작은 그림. 키 큰 그림(탑)은 높이를 묶고 아래(받침)를 맞춘다 */
.node .medal.lm { width: 150px; height: auto; border: 0; border-radius: 0; background: none; box-shadow: none; display: block; }
.node .medal.lm .lm-img { display: block; width: 100%; height: auto; max-height: 190px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 5px 0 rgba(43, 33, 64, .28)); }
.node .medal.lm .fog { inset: 6% -8% 0; }
.node .medal.lm .wk { left: 0; top: 0; }
.node.current .medal.lm { animation: none; }
.node.current .medal.lm .lm-img { animation: lm-glow 1.8s ease-in-out infinite; }
@keyframes lm-glow { 50% { filter: drop-shadow(0 5px 0 rgba(43, 33, 64, .28)) drop-shadow(0 0 12px rgba(255, 214, 90, .95)); } }
.node.foggy .medal.lm .lm-img { filter: saturate(.6) brightness(.92) drop-shadow(0 5px 0 rgba(43, 33, 64, .28)); }
.node.locked .medal.lm .lm-img { filter: grayscale(1) brightness(.95) opacity(.8); }
/* 현재 지역: 주인공이 디오라마 받침의 오른쪽 앞에 선다(안개보다 위) */
.node .medal.lm .you { top: auto; left: auto; right: -14px; bottom: 4px; width: 46px; z-index: 2; }
.node .medal.lm .you.is-hero { width: 36px; }
.node {
  position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px;
  width: 200px; background: none; border: 0; padding: 0; cursor: pointer;
}
.node .medal {
  width: 112px; height: 112px; border-radius: 50%; border: 4px solid var(--ink); position: relative;
  background: radial-gradient(circle at 50% 35%, #fffef7 0 45%, #f1e3c2 46% 100%);
  box-shadow: 0 7px 0 var(--ink), inset 0 -6px 0 rgba(0, 0, 0, .08);
  display: grid; place-items: center; transition: transform .15s;
}
.node .medal > svg { width: 84px; height: 84px; }
.node:hover .medal { transform: translateY(-3px) scale(1.03); }
.node .wk {
  position: absolute; left: -6px; top: -6px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--orange); color: #fff; border: 3px solid var(--ink); display: grid; place-items: center;
  font-family: var(--f-num); font-size: 19px; text-shadow: 0 2px 0 var(--orange-deep); box-shadow: 0 3px 0 var(--ink);
}
.node .label { background: var(--paper); border: 3px solid var(--ink); border-radius: 12px; padding: 5px 12px 6px; box-shadow: 0 4px 0 var(--ink); text-align: center; max-width: 200px; }
.node .label b { display: block; font-family: var(--f-ui); font-weight: 400; font-size: 18px; line-height: 1.15; word-break: keep-all; }
.node .label .ch, .node .label .ch i { font-style: normal; }
.node .label span { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.35; margin-top: 2px; word-break: keep-all; }
.node.locked .medal { background: radial-gradient(circle at 50% 35%, #f4f2f8 0 45%, #dedbe6 46% 100%); }
.node.locked .medal > svg { filter: grayscale(1) brightness(.95); opacity: .75; }
.node.locked .label { background: #f1edf7; }
.node.locked .wk { background: #9a93ad; text-shadow: none; }
.node .lockbadge { position: absolute; right: -6px; bottom: -4px; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; border: 3px solid var(--paper); box-shadow: 0 3px 0 var(--ink); }
.node .lockbadge svg { width: 20px; height: 20px; }
.node.current .medal { animation: pulse-ring 1.8s ease-out infinite; }
.node .you { position: absolute; top: -58px; left: calc(50% - 26px); width: 52px; animation: bob 1.8s ease-in-out infinite; } /* bob 이 transform 을 덮어쓰므로 가운데 맞춤은 left 로 한다 */
/* 지도: 보스를 아직 못 쓰러뜨린 지역은 착각의 안개에 덮여 있다 */
.node .medal .fog {
  position: absolute; inset: -10px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 34% 40%, rgba(176, 126, 255, .6), transparent 55%), radial-gradient(circle at 68% 62%, rgba(132, 84, 220, .55), transparent 55%),
    radial-gradient(circle, rgba(96, 60, 170, .32) 0 58%, transparent 72%);
  animation: fog-drift 5s ease-in-out infinite alternate;
}
@keyframes fog-drift { from { transform: translateX(-4px) scale(1); } to { transform: translateX(4px) scale(1.06); } }
.node.foggy .medal > svg { filter: saturate(.55) brightness(.9); }
/* 지도 위 근거의 조각 막대(누르면 이야기 다시 보기) */
.shard-bar {
  display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; margin: 4px 0 0; padding: 7px 12px; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
  background: rgba(255, 250, 240, .94); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 4px 0 var(--ink);
}
.shard-bar .lbl { font-family: var(--f-ui); font-size: 15px; white-space: nowrap; }
.shard-bar .slots { display: flex; align-items: flex-end; gap: 3px; min-width: 0; }
.shard-bar .slots .shard-img { width: clamp(11px, 3.2vw, 20px); }
.shard-bar .cnt { font-family: var(--f-num); font-size: 15px; white-space: nowrap; }
/* 지도 바로 가기: 문제 도감·모험 기록 */
.map-quick { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 2px; max-width: 520px; }
.map-quick .btn { position: relative; flex: 1 1 auto; font-size: 17px; padding: 9px 14px 10px; } /* 문제 도감·모험 기록·스킬: 글자 길이만큼 나눠 한 줄에 */
.map-quick .new-dot { position: absolute; right: -5px; top: -5px; width: 14px; height: 14px; border-radius: 50%; background: var(--bad); border: 2.5px solid var(--ink); }
@media (max-width: 420px) {
  .map-quick { gap: 8px; }
  .map-quick .btn { font-size: 15px; gap: 5px; padding: 8px 8px 9px; }
  .map-quick .btn svg { width: 20px; height: 20px; }
}
.map-quick .btn svg { width: 22px; height: 22px; }
/* 이야기 다시 보기 목록 */
.story-menu { max-width: 520px; }
.story-list { display: grid; gap: 8px; max-height: min(58vh, 520px); overflow: auto; padding: 2px 2px 6px; text-align: left; }
.story-row {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 12px; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink);
}
.story-row .ico { width: 34px; height: 40px; flex: none; display: grid; place-items: center; }
.story-row .ico .shard-img { width: 22px; }
.story-row .ico > svg { width: 28px; height: 28px; }
.story-row b { display: block; font-family: var(--f-ui); font-weight: 400; font-size: 16.5px; line-height: 1.25; word-break: keep-all; }
.story-row small { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.35; }
.story-row:disabled { opacity: .55; cursor: default; box-shadow: none; }
/* 크레딧(엔딩 다음): 축제 그림을 흐리게 깐 위에 제목·그림·인사, 도트 불꽃놀이 */
.credits { background: #2b2140; overflow: hidden; }
.credits .credits-bg { position: absolute; inset: -24px; background: center / cover no-repeat; filter: blur(16px) brightness(.45) saturate(1.1); }
.credits .credits-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.credits .scroll { position: relative; z-index: 2; }
.credits-card { display: grid; justify-items: center; gap: 16px; max-width: 640px; margin: 0 auto; padding: 32px 16px 40px; text-align: center; }
.credits-card .story-pic { max-height: 46vh; }
.credits-line { margin: 0; font-family: var(--f-ui); font-size: clamp(18px, 3.4vw, 22px); line-height: 1.5; color: #fff; text-shadow: 0 2px 0 var(--ink); word-break: keep-all; }
@keyframes pulse-ring {
  0% { box-shadow: 0 7px 0 var(--ink), 0 0 0 0 rgba(255, 200, 61, .9); }
  70% { box-shadow: 0 7px 0 var(--ink), 0 0 0 18px rgba(255, 200, 61, 0); }
  100% { box-shadow: 0 7px 0 var(--ink), 0 0 0 0 rgba(255, 200, 61, 0); }
}

/* ---------- stage ---------- */
.stage-hero { position: relative; height: clamp(200px, 36vh, 330px); overflow: hidden; border-bottom: 3px solid var(--ink); flex: none; }
/* 배경이 아주 천천히 다가오고, 글자가 있는 아래쪽은 살짝 어둡게 한다 */
.stage-hero .bg-layer > img.bg-img { animation: banner-drift 28s ease-in-out infinite alternate; transform-origin: 55% 60%; }
@keyframes banner-drift { from { transform: scale(1.02); } to { transform: scale(1.09) translateX(-1.2%); } }
.stage-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(28, 20, 50, .5), rgba(28, 20, 50, 0) 58%); }
/* 챕터 화면 아래 바탕: 그 지역 배경을 흐리고 옅게 깐다(카드는 그 위에) */
.stage-screen { isolation: isolate; }
.stage-screen::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--stage-bg) center / cover no-repeat; filter: blur(18px) saturate(1.15) brightness(1.08); opacity: .5; transform: scale(1.12); }
.stage-hero .hero-text { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; }
.stage-hero h1 {
  margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 6.4vw, 48px); line-height: 1.05; color: #fff;
  -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 5px 0 var(--ink); letter-spacing: -.5px;
}
.stage-hero .lvrange { display: inline-block; margin: 10px 0 0 6px; vertical-align: top; font-family: var(--f-num); font-size: 14px; line-height: 1; color: var(--gold); background: var(--ink); border: 2.5px solid #fff; border-radius: 10px; padding: 5px 9px 4px; white-space: nowrap; }
.step .info .row .lv { font-size: 13px; padding: 3px 7px; }
.lvgain { text-align: center; font-family: var(--f-ui); font-size: 15px; color: var(--ink-2); margin-top: 4px; }
.lvgain b { font-family: var(--f-num); color: var(--ok); font-weight: 400; }
.stage-hero .sub { display: inline-block; margin-top: 10px; font-family: var(--f-ui); font-size: 15px; background: rgba(255, 250, 240, .94); border: 2.5px solid var(--ink); border-radius: 10px; padding: 3px 10px 4px; }
.stage-stats { display: flex; gap: 10px; flex-wrap: wrap; padding-block: 16px 4px; }
.stat-chip { display: flex; align-items: center; gap: 8px; background: var(--paper); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 12px; box-shadow: 0 4px 0 var(--shade); font-family: var(--f-ui); }
.stat-chip b { font-family: var(--f-num); font-weight: 400; font-size: 18px; }
button.stat-chip { cursor: pointer; color: var(--ink); font-size: 16px; }
button.stat-chip:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--shade); }
button.stat-chip:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }
.steps { display: grid; gap: 14px; padding-block: 14px 30px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.step {
  position: relative; text-align: left; cursor: pointer; display: grid; grid-template-rows: auto 1fr; gap: 0; padding: 0;
  background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 0 6px 0 var(--ink); overflow: hidden;
  transition: transform .12s;
}
.step:hover { transform: translateY(-3px); }
.step:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--ink); }
.step .art { height: 120px; position: relative; overflow: hidden; border-bottom: 3px solid var(--ink); }
.step .art .bg-layer svg { height: 100%; }
.step .art .who { position: absolute; left: 50%; bottom: var(--ground, 14%); transform: translate(-50%, 8%); width: 86px; }
.step .art .who.big { width: 112px; transform: translate(-50%, 3%); }
.step .no { position: absolute; left: 10px; top: 10px; z-index: 2; }
.step .info { padding: 10px 12px 12px; display: grid; gap: 6px; align-content: start; }
.step .info b { font-family: var(--f-ui); font-weight: 400; font-size: 19px; line-height: 1.15; }
.step .info .desc { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
.step .info .row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.step .drop { font-size: 12.5px; color: var(--ink-soft); }
.step.locked { cursor: not-allowed; }
.step.locked .art { filter: grayscale(1) brightness(.95); }
.step.locked:hover { transform: none; }
.stage-foot { display: flex; gap: 12px; flex-wrap: wrap; padding-block: 0 30px; }

/* ---------- lecture / dialogue ---------- */
.lecture { background: #2b2140; }
.lecture .lec-scene { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.lecture .owl-wrap { position: absolute; left: clamp(8px, 4vw, 48px); bottom: var(--ground, 14%); transform: translateY(5%); width: clamp(120px, 21vw, 220px); z-index: 2; }
.lecture .owl-wrap .idle { animation: breathe 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.slide-card {
  position: absolute; z-index: 3; left: clamp(130px, 27vw, 300px); right: 16px; top: 16px; bottom: 16px;
  display: grid; place-items: center; padding: 16px; overflow: auto;
}
.slide-card .slide { width: 100%; max-width: 640px; animation: pop-in .35s cubic-bezier(.2, 1.4, .4, 1); }
.dlg {
  position: relative; z-index: 4; flex: none; margin: 0 auto 14px; width: calc(100% - 32px); max-width: 980px;
  padding: 26px 20px 14px; min-height: 150px; display: grid; gap: 10px;
}
.dlg .nameplate {
  position: absolute; left: 18px; top: -20px; display: flex; align-items: baseline; gap: 8px;
  background: var(--violet); color: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 14px 5px; box-shadow: 0 3px 0 var(--ink);
  font-family: var(--f-ui); font-size: 19px; text-shadow: 0 2px 0 var(--violet-deep);
}
.dlg .nameplate small { font-size: 13px; opacity: .92; }
.dlg .text { font-family: var(--f-talk); font-size: 18px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; min-height: 3.5em; }
.dlg .text b { color: var(--violet-deep); background: linear-gradient(transparent 62%, #ffe48a 62%); }
.dlg .nav { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.dlg .dots { display: flex; gap: 5px; flex-wrap: wrap; }
.dlg .dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--paper-3); border: 2px solid var(--ink); }
.dlg .dots i.on { background: var(--orange); }
.dlg .caret { display: inline-block; margin-left: 6px; animation: blink 1s steps(2) infinite; color: var(--orange); }

/* ---------- 이야기(스토리) ---------- */
/* 내레이션 줄: 시그마 그림을 숨기고 그림 칸을 넓힌다. 이름표는 '이야기' */
.lecture .owl-wrap { transition: opacity .35s ease, translate .35s ease; }
.lecture.nar .owl-wrap { opacity: 0; translate: -24px 0; }
.lecture.nar .slide-card { left: 16px; }
.dlg .nameplate.nar { background: var(--ink); text-shadow: none; }
/* 이야기 그림: 그림 칸을 꽉 채운 상자 안에서 비율을 지켜 들어간다(칸 높이가 정해져 있어야 max-height 가 먹는다) */
.slide-card .slide.story { position: absolute; inset: 16px; width: auto; max-width: none; display: flex; align-items: center; justify-content: center; }
.story-pic { display: block; width: auto; height: auto; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; border: 4px solid var(--ink); border-radius: 18px; box-shadow: 0 8px 0 rgba(0, 0, 0, .35); background: #fff; }
/* 보스를 쓰러뜨린 지역의 이야기: 덮여 있던 보랏빛 안개가 걷힌다 */
.lec-scene .fog-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 28% 62%, rgba(168, 116, 255, .85), transparent 70%),
    radial-gradient(ellipse 55% 40% at 74% 38%, rgba(124, 77, 214, .8), transparent 70%), rgba(76, 46, 140, .62);
  animation: fog-lift 2.8s ease-in .4s forwards;
}
@keyframes fog-lift { to { opacity: 0; transform: translateY(-8%) scale(1.12); } }
/* 근거의 조각: 수정 그림 한 장을 색만 돌려 쓴다(js/art.js shard). 못 얻은 조각은 회색 */
.shard-img.dim { filter: grayscale(1) brightness(1.05) opacity(.58); }
.dg.shard-card { display: flex; align-items: center; gap: 18px; }
.shard-card .shard-big { width: clamp(60px, 11vw, 92px); flex: none; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .9)); animation: shard-float 2.4s ease-in-out infinite; }
.shard-card .shard-txt { min-width: 0; }
.shard-card .shard-txt .k { display: inline-block; font-family: var(--f-num); background: var(--ink); color: var(--gold); border-radius: 8px; padding: 2px 8px; font-size: 13px; }
.shard-card .shard-txt b { display: block; font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 4vw, 32px); line-height: 1.15; margin: 6px 0 4px; word-break: keep-all; }
.shard-card .shard-txt p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); word-break: keep-all; }
@keyframes shard-float { 50% { transform: translateY(-6px) rotate(3deg); } }
.shard-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; }
.shard-grid .sh { display: grid; justify-items: center; gap: 2px; }
.shard-grid .sh .shard-img { width: 62%; max-width: 32px; }
.shard-grid .sh span { font-family: var(--f-num); font-size: 13px; color: var(--ink-soft); }
.shard-grid .sh.on span { color: var(--ink); }
.drop-card .ico.shard-ico .shard-img { width: auto; height: 52px; }
/* 낮은 화면(가로로 든 휴대폰 등): 조각 그림을 줄여 그림 칸 안에 들어가게 */
@media (max-height: 560px) {
  .shard-grid { gap: 4px 6px; }
  .shard-grid .sh .shard-img { max-width: 18px; }
  .shard-card .shard-big { width: 46px; }
}
@media (max-height: 560px) and (min-width: 600px) { .shard-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } /* 낮고 넓으면 한 줄로 */
@media (max-height: 420px) { .shard-grid + .note { display: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* diagram building blocks on the slide card */
.dg { background: var(--paper); border: 3px solid var(--ink); border-radius: 18px; padding: 18px; box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.dg h3 { margin: 0 0 12px; font-family: var(--f-ui); font-weight: 400; font-size: 20px; display: flex; align-items: center; gap: 8px; word-break: keep-all; overflow-wrap: break-word; }
.dg h3 .k { font-family: var(--f-num); background: var(--ink); color: var(--gold); border-radius: 8px; padding: 2px 8px; font-size: 14px; flex: none; white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-family: var(--f-ui); font-size: 16px; padding: 7px 12px 8px; border: 2.5px solid var(--ink); border-radius: 12px; background: #eaf6ff; box-shadow: 0 3px 0 var(--ink); word-break: keep-all; overflow-wrap: break-word; }
.chip.y { background: #fff3cf; } .chip.g { background: #e2f7e9; } .chip.p { background: #f0eaff; } .chip.r { background: #ffe9eb; }
.flow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.flow .arrow { font-family: var(--f-num); font-size: 22px; color: var(--ink-soft); }
.flow .chip { font-size: 18px; padding: 10px 14px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.card2 { border: 3px solid var(--ink); border-radius: 14px; padding: 12px 14px; background: #fff; box-shadow: 0 4px 0 var(--ink); display: grid; gap: 6px; }
.card2 .hd { font-family: var(--f-ui); font-size: 19px; display: flex; gap: 6px; align-items: center; word-break: keep-all; }
.card2 .bd { font-size: 15px; line-height: 1.6; word-break: keep-all; }
.card2 .ex { font-size: 14px; color: var(--ink-soft); line-height: 1.5; border-top: 2px dashed var(--paper-line); padding-top: 6px; word-break: keep-all; }
.card2.blue { background: #eaf6ff; } .card2.orange { background: #fff1e3; } .card2.green { background: #e9f8ee; } .card2.violet { background: #f2edff; }
.terms { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; }
.terms th, .terms td { text-align: left; padding: 7px 10px; border-bottom: 2px dashed var(--paper-line); word-break: keep-all; }
.terms th { font-family: var(--f-ui); font-weight: 400; font-size: 16px; white-space: nowrap; color: var(--violet-deep); }
.terms tr:last-child th, .terms tr:last-child td { border-bottom: 0; }
.dg-svg svg { width: 100%; height: auto; }
.dtbl-wrap { overflow-x: auto; }
.dtbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 15px; background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; overflow: hidden; }
.dtbl th, .dtbl td { padding: 7px 10px; text-align: center; border-bottom: 1.5px solid var(--paper-line); word-break: keep-all; }
.dtbl thead th { background: var(--paper-2); font-family: var(--f-ui); font-weight: 400; font-size: 15px; }
.dtbl tbody tr:last-child td { border-bottom: 0; }
.dtbl .hl-col { background: #f0eaff; }
.dtbl .hl-row td { background: #fff1e3; }
.dtbl .hl-row td.hl-col { background: #f3d9ff; }
.dtbl tr.q td { background: #eaf6ff; }
.dtbl tr.n td { background: #e9f8ee; }
/* 던전 층 타일: 층 · 챕터, 그 층을 지키는 보스 */
.floors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.floors .fl { background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 2px 0 var(--ink); padding: 5px 8px 6px; text-align: center; font-size: 15px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
.floors .fl small { display: block; font-size: 12.5px; color: var(--violet-deep); }
.floors .fl small b { font-family: var(--f-num); font-weight: 400; }
.floors .fl.boss { background: #f0eaff; }
/* 칸이 많은 표(숫자 6~7칸)는 칸 여백을 줄인다. A/B 이름표 */
.dtbl.tight th, .dtbl.tight td { padding: 6px 4px; }
.tag { display: inline-block; min-width: 1.7em; padding: 1px 4px; border-radius: 6px; font-family: var(--f-num); color: #fff; border: 2px solid var(--ink); line-height: 1.3; }
.tag.a { background: #4a8cff; } .tag.b { background: #ff8a2a; }
.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px; }
.mini-card { background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 8px 8px 10px; display: grid; gap: 4px; justify-items: center; align-content: start; text-align: center; box-shadow: 0 3px 0 var(--ink); }
.mini-card svg { width: 100%; max-width: 124px; height: auto; }
.mini-card b { font-family: var(--f-ui); font-weight: 400; font-size: 15px; word-break: keep-all; }
.mini-card span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; word-break: keep-all; }
.freq-row { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: center; }
/* 3주차 강의: 수식과 숫자 칸 */
.formula { margin: 8px 0; text-align: center; font-size: 21px; line-height: 2; word-break: keep-all; }
.formula.small { font-size: 17px; }
/* 360px 휴대폰: 수식 변수(주아 옆의 Nunito)가 Times 보다 조금 넓어 작은 수식이 괄호 가운데서 끊기지 않게(‘Pr(A ∩’ / ‘B)’) 조금 작게 */
@media (max-width: 370px) { .formula.small { font-size: 16px; } }
.formula sub, .formula sup { font-size: .62em; }
.ovl { border-top: 1.5px solid currentColor; padding: 0 3px; margin-left: 1px; }
.nw { white-space: nowrap; }
.card2 .bd.formula { text-align: left; margin: 0; }
.mv { font-family: var(--f-mvar); font-weight: var(--w-mvar); font-style: italic; margin-right: .06em; line-height: 1; } /* 강의 수식의 변수: 문제 수식(.m i)과 같은 글꼴. Nunito 는 줄이 높아 줄 높이는 1로(제목 줄이 커지지 않게) */
.xbar { text-decoration: overline; text-decoration-thickness: 1.5px; }
.sig { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; vertical-align: middle; margin: 0 2px; }
.sig b { font-family: var(--f-body); font-weight: 400; font-size: 1.55em; line-height: .95; }
.sig small { font-family: var(--f-mvar); font-weight: var(--w-mvar); font-style: italic; font-size: .5em; }
.nums { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 6px 0; }
.nums .n { min-width: 38px; padding: 4px 8px; border: 2.5px solid var(--ink); border-radius: 10px; background: #fff; font-family: var(--f-num); font-size: 16px; text-align: center; box-shadow: 0 2px 0 var(--ink); }
.nums .n.hl { background: #ffcf5a; }
.nums .n.out { background: #ffb3bd; }
.nums .n.x { text-decoration: line-through; opacity: .5; }
.nums .lbl { font-family: var(--f-ui); font-size: 14.5px; color: var(--ink-soft); margin-right: 2px; }
.nums .eq { font-family: var(--f-ui); font-size: 16px; margin-left: 4px; }
.dg .big-stat { font-family: var(--f-display); font-size: 40px; color: var(--violet-deep); line-height: 1.1; }
@media (max-width: 560px) { .freq-row, .three { grid-template-columns: minmax(0, 1fr); } }
.dg .note { margin: 12px 0 0; font-size: 15px; line-height: 1.6; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- battle ---------- */
/* 문제 길이에 따라 스크롤 막대가 생겼다 없어져도 장면 폭이 그대로이게(몬스터·말풍선 자리가 흔들리지 않게) 자리를 늘 비워 둔다 */
.battle .scroll { display: flex; flex-direction: column; scrollbar-gutter: stable; }
/* 문제 칸 아래 바탕: 이 전투 배경을 흐리고 옅게 깐다(챕터 화면 .stage-screen 과 같은 방식, 주소는 js/battle.js 가 --battle-bg 로 넘긴다) */
.screen.battle { isolation: isolate; }
.screen.battle::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--battle-bg) center / cover no-repeat; filter: blur(18px) saturate(1.15) brightness(1.08); opacity: .5; transform: scale(1.12); }
.scene {
  position: sticky; top: 0; z-index: 6; flex: none; height: clamp(200px, 36vh, 400px);
  overflow: hidden; border-bottom: 3px solid var(--ink); background: #9fdcff;
}
.scene.shake { animation: shake .42s; }
.scene .vignette { position: absolute; inset: 0; pointer-events: none; z-index: 8; opacity: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(230, 30, 60, .55) 100%); }
.scene .vignette.on { animation: vig .6s ease-out; }
@keyframes vig { 0% { opacity: 1; } 100% { opacity: 0; } }
.scene .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 9; }
.scene .flash.on { animation: flash .5s ease-out; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; } }
/* 도트 효과 캔버스(js/pixelfx.js): back 은 배경 위·캐릭터 아래(레벨 오라), front 는 캐릭터·이름표 위(타격 효과, 오라 앞쪽) */
.scene canvas.px { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene canvas.px.back { z-index: 3; }
.scene canvas.px.front { z-index: 7; }
.actor { --sink: 6%; position: absolute; bottom: var(--ground, 14%); z-index: 4; transform: translate(-50%, var(--sink)); }
.actor .act, .actor .idle { transform-origin: 50% 100%; }
.actor .shadow { position: absolute; left: 14%; right: 14%; bottom: var(--sink); height: 9%; transform: translateY(50%); border-radius: 50%; background: rgba(0, 0, 0, .2); z-index: -1; }
.actor.player { left: 24%; width: clamp(92px, 14vw, 148px); }
.actor.player .idle { animation: breathe 2.2s ease-in-out infinite; }
.actor.monster { left: 73%; width: clamp(112px, 17vw, 188px); }
.actor.monster.k-slime { --sink: 9%; }
.actor.monster.k-mush { --sink: 4%; }
.actor.monster.k-dice { --sink: 10%; }
.actor.monster.boss { --sink: 2%; left: 71%; width: clamp(160px, 26vw, 300px); }
.scene.measuring .act, .scene.measuring .idle { animation: none !important; } /* battle.js 가 제자리 크기를 잴 때 */
.actor.pre { visibility: hidden; } /* 그림이 다 떠서 자리를 잡기 전 */
.actor.monster .idle { animation: wobble 1.6s ease-in-out infinite; }
.actor.monster.k-slime .idle { animation: squish 1.3s ease-in-out infinite; }
.actor.monster.k-dice .idle { animation: hop 1.1s ease-in-out infinite; }
.actor.monster.k-mush .idle { animation: sway 1.9s ease-in-out infinite; }
.actor.monster.boss .idle { animation: boss-idle 2.6s ease-in-out infinite; }
.e-h, .eyeglow { display: none; }
.hurt .e-n { display: none; }
.hurt .e-h { display: inline; }
.actor.hit .act { animation: hit-back .45s ease-out; }
.actor.hit svg { animation: hit-flash .45s; }
.actor.player.lunge .act { animation: lunge-r .55s cubic-bezier(.3, .7, .3, 1); }
.actor.monster.lunge .act { animation: lunge-l .55s cubic-bezier(.3, .7, .3, 1); }
.actor.dying .act { animation: die 1s ease-in forwards; }
.actor.enter .act { animation: enter-r .7s cubic-bezier(.2, 1.3, .4, 1); }
.actor.player.cheer .act { animation: cheer .7s ease-out 2; }
.actor.boss.rage1 .cs1 { stop-color: #ffd6ea; }
.actor.boss.rage1 .cs2 { stop-color: #f05aa6; }
.actor.boss.rage1 .cs3 { stop-color: #9c1c5e; }
.actor.boss.rage2 .cs1 { stop-color: #ffd0c4; }
.actor.boss.rage2 .cs2 { stop-color: #ff4d4d; }
.actor.boss.rage2 .cs3 { stop-color: #8f0f22; }
.actor.boss.rage2 .idle { animation: boss-idle 1.4s ease-in-out infinite; }
.actor.boss.rage2 .eyeglow { display: inline; }
.mon-plate {
  position: absolute; right: 12px; top: 12px; z-index: 6; width: min(46%, 330px);
  background: rgba(255, 250, 240, .95); border: 3px solid var(--ink); border-radius: 14px; padding: 6px 10px 8px; box-shadow: 0 4px 0 var(--shade);
}
.mon-plate .nm { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-family: var(--f-ui); font-size: 16px; margin-bottom: 5px; }
.mon-plate .nm span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon-plate .nm > span:last-child { flex: none; }
/* 몬스터 레벨: HP 막대 왼쪽 칩(가운데 HP 숫자와 겹치지 않는다). 글자색은 내 레벨과 비교한 어려움 */
.mon-plate .gauge .tag { left: 2px; top: 1px; bottom: 1px; padding: 0 5px; border-radius: 6px; background: var(--ink); color: var(--gold); text-shadow: none; font-size: 10.5px; line-height: 1; }
.mon-plate.gap-easy .gauge .tag { color: #cfc8e2; }
.mon-plate.gap-low .gauge .tag { color: #8ce99a; }
.mon-plate.gap-high .gauge .tag { color: #ffb15e; }
.mon-plate.gap-danger .gauge .tag { color: #ff8fa3; }
.pl-plate {
  position: absolute; left: 12px; top: 12px; z-index: 6; display: flex; align-items: center; gap: 6px;
  background: rgba(255, 250, 240, .95); border: 3px solid var(--ink); border-radius: 14px; padding: 5px 10px; box-shadow: 0 4px 0 var(--shade);
  font-family: var(--f-ui); font-size: 14px;
}
.combo {
  position: absolute; left: 24%; top: 24%; transform: translateX(-50%); z-index: 8; pointer-events: none;
  font-family: var(--f-num); font-size: clamp(22px, 4vw, 34px); color: #fff; opacity: 0; white-space: nowrap;
  -webkit-text-stroke: 1.5px var(--ink); text-shadow: 0 3px 0 var(--ink);
}
.combo.on { animation: combo-pop .9s ease-out; }
.combo em { font-style: normal; color: var(--gold); }
.banner {
  position: absolute; left: 0; right: 0; top: 42%; z-index: 9; display: grid; place-items: center; pointer-events: none;
}
.banner .in {
  font-family: var(--f-display); font-size: clamp(22px, 4.6vw, 40px); color: #fff; padding: 8px 28px 10px;
  background: linear-gradient(90deg, transparent, rgba(43, 33, 64, .88) 12%, rgba(43, 33, 64, .88) 88%, transparent);
  -webkit-text-stroke: 1px var(--ink); text-shadow: 0 3px 0 var(--ink); letter-spacing: -.3px; white-space: nowrap;
  animation: banner 2s ease-in-out forwards;
}
.banner .in.violet { background: linear-gradient(90deg, transparent, rgba(75, 47, 196, .92) 12%, rgba(75, 47, 196, .92) 88%, transparent); }
/* 몬스터 말풍선: 자리는 battle.js 가 잰다. 꼬리는 진한 삼각형(::before) 위에 흰 삼각형(::after)을 겹쳐 말풍선과 이어 보이게 한다. */
.speech {
  position: absolute; z-index: 8; visibility: hidden; background: #fff; border: 3px solid var(--ink); border-radius: 14px;
  padding: 8px 12px; font-family: var(--f-ui); font-size: 15px; line-height: 1.35; box-shadow: 0 4px 0 var(--shade); word-break: keep-all;
}
.speech.on { visibility: visible; animation: pop-in .3s cubic-bezier(.2, 1.4, .4, 1); }
.speech::before, .speech::after { content: ""; position: absolute; border: solid transparent; }
.speech.tail-r::before { left: 100%; top: var(--tail); transform: translateY(-50%); border-width: 11px 0 11px 16px; border-left-color: var(--ink); }
.speech.tail-r::after { left: calc(100% - 1px); top: var(--tail); transform: translateY(-50%); border-width: 7px 0 7px 11px; border-left-color: #fff; }
.speech.tail-d::before { top: 100%; left: var(--tail); transform: translateX(-50%); border-width: 16px 11px 0; border-top-color: var(--ink); }
.speech.tail-d::after { top: calc(100% - 1px); left: var(--tail); transform: translateX(-50%); border-width: 11px 7px 0; border-top-color: #fff; }
/* 좁은 화면처럼 장면에 말풍선 자리가 없을 때: 문제 카드 맨 위에 붙는 대사. 꼬리는 위쪽 몬스터를 가리킨다. */
.taunt {
  position: relative; margin: 2px 0 12px; padding: 7px 12px 9px; background: #fff; border: 3px solid var(--ink); border-radius: 14px;
  box-shadow: 0 3px 0 var(--shade); font-family: var(--f-ui); font-size: 15px; line-height: 1.4; word-break: keep-all;
  animation: pop-in .3s cubic-bezier(.2, 1.4, .4, 1);
}
.taunt b { display: block; margin-bottom: 1px; font-weight: 400; font-size: 13px; color: var(--violet-deep); }
.taunt::before, .taunt::after { content: ""; position: absolute; right: 24%; border: solid transparent; transform: translateX(50%); }
.taunt::before { bottom: 100%; border-width: 0 11px 15px; border-bottom-color: var(--ink); }
.taunt::after { bottom: calc(100% - 1px); border-width: 0 7px 10px; border-bottom-color: #fff; }
.defeat-line { margin: -6px 0 0; font-family: var(--f-ui); font-size: 15px; line-height: 1.45; color: var(--ink-soft); text-align: center; word-break: keep-all; overflow-wrap: anywhere; }

.floater { position: absolute; z-index: 9; pointer-events: none; transform: translate(-50%, 0); animation: float-up 1.15s ease-out forwards; }
.dmg { position: relative; display: block; isolation: isolate; font-family: var(--f-num); font-size: clamp(34px, 5vw, 52px); line-height: 1; white-space: nowrap; }
.dmg span { background: linear-gradient(180deg, #fffbd1 0%, #ffd23f 40%, #ff8a1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dmg::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: var(--ink); -webkit-text-stroke: 8px var(--ink); }
.dmg.crit { font-size: clamp(44px, 6.6vw, 70px); }
.dmg.crit span { background: linear-gradient(180deg, #ffe0f0 0%, #ff6fa0 45%, #e0124a 100%); -webkit-background-clip: text; background-clip: text; }
.dmg.hurt span { background: linear-gradient(180deg, #e9dcff 0%, #b18cff 45%, #6b3fe0 100%); -webkit-background-clip: text; background-clip: text; }
.dmg-tag { display: block; text-align: center; font-family: var(--f-num); font-size: 16px; color: #fff; -webkit-text-stroke: 1px var(--ink); text-shadow: 0 2px 0 var(--ink); letter-spacing: 1px; margin-bottom: 2px; }
.dmg-tag.crit { color: #ffd23f; }

.quiz { position: relative; z-index: 5; margin: 16px auto 22px; width: calc(100% - 32px); max-width: 860px; padding: 16px 18px 18px; }
.q-meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-family: var(--f-ui); font-size: 14px; color: var(--ink-soft); }
.q-meta .grow { flex: 1; }
.q-stem { margin: 10px 0 14px; font-family: var(--f-quiz); font-size: 17.5px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
.q-choices { display: grid; gap: 9px; }
.q-choices.row { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.choice {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%;
  font-family: var(--f-pick); font-size: 16px; line-height: 1.55; padding: 10px 12px; color: var(--ink);
  border: 2.5px solid var(--ink); border-radius: 13px; background: #fff; box-shadow: 0 3px 0 var(--ink);
  cursor: pointer; transition: transform .1s, background .15s; word-break: keep-all; overflow-wrap: anywhere;
}
.choice:hover:not([disabled]) { background: #fff6dc; transform: translateY(-2px); box-shadow: 0 5px 0 var(--ink); }
.choice:active:not([disabled]) { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.choice .no {
  flex: none; width: 27px; height: 27px; margin-top: -1px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(180deg, #fffdf6 0%, var(--paper-3) 100%); border: 2px solid var(--ink); box-shadow: inset 0 -2px 0 rgba(43, 33, 64, .14);
  font-family: var(--f-num); font-size: 14px; line-height: 1;
}
.choice:hover:not([disabled]) .no { background: var(--gold); } /* 고르려는 보기는 번호가 금색으로 */
.choice .tx { min-width: 0; padding-top: 1px; }
.choice[disabled] { cursor: default; }
.choice.dim { opacity: .55; }
.choice.correct { background: var(--ok-bg); border-color: var(--ok); box-shadow: 0 3px 0 var(--ok); opacity: 1; }
.choice.correct .no { background: var(--ok); color: #fff; border-color: #0f6a3a; }
.choice.wrong { background: var(--bad-bg); border-color: var(--bad); box-shadow: 0 3px 0 var(--bad); animation: shake-x .4s; opacity: 1; }
.choice.wrong .no { background: var(--bad); color: #fff; border-color: #9c1b2a; }
.feedback { margin-top: 14px; border-radius: 14px; padding: 12px 14px 14px; border: 2.5px solid; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; animation: pop-in .3s cubic-bezier(.2, 1.3, .4, 1); }
.feedback.ok { background: var(--ok-bg); border-color: var(--ok); }
.feedback.bad { background: var(--bad-bg); border-color: var(--bad); }
.feedback .head { display: flex; align-items: center; gap: 8px; font-family: var(--f-ui); font-size: 18px; line-height: 1.35; word-break: keep-all; } /* 긴 머리글(몬스터 이름 + 데미지)은 별 옆에서 줄을 바꾼다 */
.feedback.ok .head { color: #0f6a3a; } .feedback.bad .head { color: #a3192b; }
/* 해설: 아주 좁은 휴대폰에서 긴 수식은 해설 칸 안에서 옆으로 민다(카드 밖으로 잘리지 않게). 이름표는 시그마 이름표처럼 */
.feedback .sol { font-family: var(--f-sol); font-size: 15.5px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; color: var(--ink); background: rgba(255, 255, 255, .7); border-radius: 10px; padding: 10px 12px; overflow-x: auto; }
.feedback .sol .lbl {
  display: inline-block; margin-right: 6px; padding: 0 7px 1px; border: 2px solid var(--ink); border-radius: 8px;
  background: var(--violet); color: #fff; font-family: var(--f-ui); font-size: 13.5px; line-height: 1.35; text-shadow: 0 1px 0 var(--violet-deep); vertical-align: 1px;
}
.feedback .acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; align-items: center; }
.link-btn { background: none; border: 0; padding: 4px 2px; font-family: var(--f-ui); font-size: 15px; color: var(--violet-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.kbd { font-family: var(--f-num); font-size: 11px; border: 1.5px solid currentColor; border-radius: 5px; padding: 0 4px; opacity: .7; }
/* 문제 번호는 퀘스트 배지(금색 Q), 지문·해설의 굵은 말은 대사처럼 형광펜 */
.q-meta > .pill:first-child { gap: 5px; padding: 2px 10px 3px 3px; background: var(--ink); color: #fff; border-color: var(--ink); }
.q-meta > .pill:first-child::before {
  content: "Q"; display: grid; place-items: center; width: 17px; height: 17px; flex: none; border-radius: 50%;
  background: var(--gold); color: var(--ink); font-family: var(--f-num); font-size: 11.5px; line-height: 1;
}
.q-stem b, .feedback .sol b, .review .it b { color: var(--violet-deep); background: linear-gradient(transparent 62%, #ffe48a 62%); }
/* 두 칸 보기의 긴 집합 {1, 2, …, 6}: 좁은 칸에서는 띄어쓰기에서만 줄을 바꾼다(단추 밖으로 나가지 않게) */
.q-choices.row .choice .m { white-space: normal; overflow-wrap: normal; }

/* ---------- modal ---------- */
.modal-back { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; padding: 30px 16px 16px; background: rgba(28, 20, 48, .62); animation: fade-in .25s ease-out; overflow-y: auto; }
.modal { position: relative; width: 100%; max-width: 480px; padding: 26px 20px 20px; text-align: center; display: grid; gap: 14px; animation: pop-in .4s cubic-bezier(.2, 1.4, .4, 1); margin: auto; }
.modal .rays { position: absolute; left: 50%; top: -10px; width: 420px; height: 420px; transform: translate(-50%, -38%); z-index: -1; pointer-events: none; animation: spin 14s linear infinite; opacity: .9; }
.modal .top-ribbon { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); font-family: var(--f-display); font-size: 30px; color: #fff; background: var(--orange); border: 3px solid var(--ink); border-radius: 14px; padding: 4px 22px 7px; box-shadow: 0 4px 0 var(--ink); text-shadow: 0 3px 0 var(--orange-deep); white-space: nowrap; }
.modal .top-ribbon.lose { background: #8a7fa8; text-shadow: 0 3px 0 #5e5580; }
.modal h2 { margin: 8px 0 0; font-family: var(--f-ui); font-weight: 400; font-size: 22px; }
.reward-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.reward { display: flex; align-items: center; gap: 8px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 8px 12px; box-shadow: 0 4px 0 var(--ink); font-family: var(--f-ui); font-size: 16px; }
.reward b { font-family: var(--f-num); font-weight: 400; font-size: 20px; }
.reward svg { width: 26px; height: 26px; }
.exp-anim { display: grid; gap: 6px; text-align: left; }
.exp-anim .row { display: flex; justify-content: space-between; font-family: var(--f-ui); font-size: 15px; }
.drop-card { display: flex; gap: 12px; align-items: center; text-align: left; background: linear-gradient(180deg, #fffdf2, #fff3cf); border: 3px solid var(--gold-deep); border-radius: 16px; padding: 10px 14px; box-shadow: 0 4px 0 var(--gold-deep); animation: pop-in .5s .5s both cubic-bezier(.2, 1.5, .4, 1); }
.drop-card .ico { width: 64px; height: 64px; flex: none; border-radius: 14px; background: #fff; border: 3px solid var(--ink); display: grid; place-items: center; }
.drop-card .ico svg { width: 54px; height: 54px; }
.drop-card .t { font-family: var(--f-ui); font-size: 18px; }
.drop-card .d { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.levelup { position: relative; display: inline-block; justify-self: center; isolation: isolate; animation: pop-in .6s .2s both cubic-bezier(.2, 1.6, .4, 1); }
.levelup .word { display: block; font-family: var(--f-num); font-size: 44px; line-height: 1.05; letter-spacing: 1px; background: linear-gradient(180deg, #fffbd1 0%, #ffd23f 45%, #ff8a1f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.levelup .word::before { content: attr(data-t); position: absolute; left: 0; top: 0; z-index: -1; color: var(--ink); -webkit-text-stroke: 9px var(--ink); text-shadow: 0 5px 0 var(--ink); }
.modal-acts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.review { text-align: left; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-height: 42vh; overflow-y: auto; padding-right: 4px; }
/* 쓰러졌을 때 복습 목록: 넓은 표·긴 수식은 그 문제 칸 안에서 옆으로 민다(목록 전체가 넓어지지 않게) */
.review .it { background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; padding: 10px 12px; font-family: var(--f-sol); font-size: 15px; line-height: 1.65; word-break: keep-all; overflow-wrap: anywhere; overflow-x: auto; }
.review .it .center { overflow-x: auto; }
.review .it .q { font-family: var(--f-quiz); font-weight: 500; margin-bottom: 6px; }
.review .it .a { color: #0f6a3a; font-family: var(--f-ui); margin-bottom: 4px; }
.modal .owl-mini { width: 92px; margin: -6px auto 0; }

/* ---------- inventory ---------- */
.inv-grid { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 20px; padding-block: 20px 30px; align-items: start; }
.char-card { padding: 0; overflow: hidden; }
.char-card .stagebox { position: relative; height: 270px; border-bottom: 3px solid var(--ink); }
.char-card .stagebox .pedestal { position: absolute; left: 50%; bottom: var(--ground, 14%); transform: translate(-50%, 6%); width: 150px; z-index: 2; }
.char-card .stagebox .pedestal .idle { animation: breathe 2.2s ease-in-out infinite; transform-origin: 50% 100%; }
.statlist { padding: 14px 16px 16px; display: grid; gap: 8px; }
.statlist .r { display: flex; justify-content: space-between; align-items: center; font-family: var(--f-ui); font-size: 16px; }
.statlist .r b { font-family: var(--f-num); font-weight: 400; font-size: 19px; }
.statlist .r b small { font-size: 13px; color: var(--ok); margin-left: 4px; }
.items-card { padding: 18px; display: grid; gap: 16px; }
.items-card h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: 26px; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.slot {
  position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 6px 8px; cursor: pointer;
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 3px 0 var(--ink);
  font-family: var(--f-ui); font-size: 13px; text-align: center; line-height: 1.2; word-break: keep-all; overflow-wrap: break-word;
}
.slot svg { width: 56px; height: 56px; }
.slot[aria-pressed="true"] { border-color: var(--violet); box-shadow: 0 0 0 3px #e3dbff, 0 3px 0 var(--violet-deep); }
.slot .eq { position: absolute; top: -9px; right: -7px; font-size: 11px; background: var(--ok); color: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 5px; }
.slot .plus { position: absolute; top: 4px; left: 6px; font-family: var(--f-num); font-size: 13px; color: var(--orange-deep); }
.slot.empty { cursor: default; background: repeating-linear-gradient(45deg, #faf3e3, #faf3e3 6px, #f2e8d2 6px, #f2e8d2 12px); border-style: dashed; color: var(--ink-soft); box-shadow: none; min-height: 96px; place-content: center; }
.detail { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; background: var(--paper-2); border: 2.5px solid var(--paper-line); border-radius: 14px; padding: 12px; }
.detail .ico { width: 84px; height: 84px; background: #fff; border: 3px solid var(--ink); border-radius: 14px; display: grid; place-items: center; }
.detail .ico svg { width: 70px; height: 70px; }
.detail .nm { font-family: var(--f-ui); font-size: 20px; }
.detail .ds { font-size: 14px; line-height: 1.6; color: var(--ink-2); margin-top: 2px; }
.detail .st { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.enhance { display: grid; gap: 10px; border: 3px solid var(--ink); border-radius: 16px; padding: 14px; background: linear-gradient(180deg, #2f2650, #1f1838); color: #fff; position: relative; overflow: hidden; }
.enhance .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--f-ui); font-size: 18px; }
.enhance .row { display: flex; gap: 12px; flex-wrap: wrap; font-family: var(--f-ui); font-size: 15px; color: #e6defc; }
.enhance .row b { font-family: var(--f-num); font-weight: 400; color: var(--gold); font-size: 17px; }
.enhance .anvil { height: 120px; display: grid; place-items: center; position: relative; }
.enhance .anvil svg { width: 96px; height: 96px; }
.enhance .anvil.hammer svg { animation: hammer .25s ease-in-out 4; }
.enhance .result { font-family: var(--f-display); font-size: 28px; text-align: center; min-height: 34px; }
.enhance .result.ok { color: var(--gold); text-shadow: 0 0 18px rgba(255, 200, 61, .8); }
.enhance .result.fail { color: #b9b0d6; }
.enhance.win { animation: enh-win 1.1s ease-out; }
.enhance.win .anvil svg { animation: pop-in .5s cubic-bezier(.2, 1.6, .4, 1); filter: drop-shadow(0 0 14px rgba(255, 210, 63, .9)); }
@keyframes enh-win { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 63, .9), inset 0 0 60px rgba(255, 210, 63, .5); } 100% { box-shadow: 0 0 0 22px rgba(255, 210, 63, 0), inset 0 0 0 rgba(255, 210, 63, 0); } }

/* ---------- question content (from the LaTeX bank) ---------- */
.m { white-space: nowrap; }
.m i { font-family: var(--f-mvar); font-weight: var(--w-mvar); font-style: italic; margin-right: .06em; } /* 기울인 끝이 다음 글자(‘X와’의 ‘와’)에 닿지 않게 살짝 띄운다 */
.frac { display: inline-flex; flex-direction: column; vertical-align: middle; text-align: center; font-size: .86em; line-height: 1.12; margin: 0 .12em; }
.frac .fn { border-bottom: 1.5px solid currentColor; padding: 0 .2em .05em; }
.frac .fd { padding: .05em .2em 0; }
.sqrt { white-space: nowrap; }
.sqrt .rad { border-top: 1.5px solid currentColor; padding: 0 .1em 0 .05em; }
.bar { text-decoration: overline; }
span.hat { position: relative; display: inline-block; line-height: 1; } /* 문제 글의 수식 모자(ŷ)만. 모자 아이콘(.item-pic.hat)에는 붙지 않게 span 으로 한정 */
span.hat::before { content: "^"; position: absolute; left: .16em; right: 0; top: -.34em; text-align: center; font-family: "Times New Roman", serif; font-style: normal; font-size: .8em; line-height: 1; pointer-events: none; } /* ŷ: 문제 속 y 위에 모자 기호 */
.bogi { border: 2px dashed var(--paper-line); background: var(--paper-2); border-radius: 12px; padding: 10px 14px; margin: 10px 0; line-height: 1.8; }
.tbl-wrap { overflow-x: auto; margin: 10px 0; }
.tbl { border-collapse: collapse; font-size: 15px; background: #fff; margin: 8px auto; }
.tbl th, .tbl td { border-bottom: 1px solid var(--paper-line); padding: 5px 12px; text-align: center; white-space: nowrap; }
.tbl thead th { border-bottom: 2px solid var(--ink); font-weight: 700; }
/* 휴대폰: 표 칸 옆 여백을 줄여 조금만 넓은 표는 옆으로 밀지 않고 들어가게 한다(그래도 넓은 표는 .tbl-wrap 안에서 옆으로 스크롤) */
@media (max-width: 760px) { .tbl th, .tbl td { padding: 5px 8px; } }
.center { text-align: center; }

/* ---------- toast ---------- */
.toast { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 60; background: var(--ink); color: #fff; font-family: var(--f-ui); font-size: 16px; padding: 10px 18px; border-radius: 12px; border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); animation: toast 2.4s ease-in-out forwards; width: max-content; max-width: min(calc(100% - 32px), 520px); text-align: center; line-height: 1.4; word-break: keep-all; pointer-events: none; } /* 긴 알림은 줄을 바꾸고, 떠 있는 동안 아래 단추를 막지 않는다 */

/* ---------- glue ---------- */
[hidden] { display: none !important; }
.screen-root { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.owl .bk-o { display: none; }
.owl.talk .bk-o { display: inline; }
.owl.talk .bk-c { display: none; }
.bg-layer.dim { filter: brightness(.74) saturate(.9); }
.chip svg, .stat-chip svg, .card2 .hd svg, .feedback .head svg, .reward svg { width: 22px; height: 22px; display: inline-block; flex: none; }
.chip svg { vertical-align: -5px; margin-right: 5px; }
.lineup { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; align-items: end; }
.lineup figure { margin: 0; display: grid; justify-items: center; gap: 6px; font-family: var(--f-ui); font-size: 15px; text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.lineup svg { width: 100%; height: auto; max-height: 120px; }
.nav-r { display: flex; gap: 12px; align-items: center; }
.pl-plate { display: grid; gap: 5px; width: min(40%, 230px); }
.pl-plate .nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
.pl-plate .nm span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-plate .gauge, .mon-plate .gauge { height: 15px; }
.drop-card .ico > svg { width: 54px; height: 54px; }

/* ---------- 그림 파일(assets/)을 쓸 때 ---------- */
.bg-layer > img.bg-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.bg-layer > img.bg-img.boss-tint { filter: brightness(.62) saturate(1.25) hue-rotate(-28deg) contrast(1.08); }
.art-img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.mon-img .e-h { display: none; }
.hurt .mon-img .e-n { display: none; }
.hurt .mon-img .e-h { display: block; }
.actor.has-img { --sink: 2%; }
.scene { container-type: size; }
.actor.has-img .art-img { width: auto; max-width: 100%; max-height: 66cqh; margin: 0 auto; }
.actor.boss.has-img .art-img { max-height: 76cqh; }
.step .art .who .art-img { width: auto; max-width: 100%; max-height: 104px; margin: 0 auto; }
.lineup .art-img { width: auto; max-width: 100%; max-height: 120px; margin: 0 auto; }
.title-screen .critter .art-img { width: auto; max-width: 100%; max-height: 22vh; margin: 0 auto; }
.actor.hit .art-img { animation: hit-flash .45s; }
.lecture .owl-wrap.portrait { bottom: 0; transform: none; width: clamp(170px, 30vw, 360px); }
.btn, .link-btn { white-space: nowrap; }

/* 그림 파일 캐릭터: 캐릭터 한 장 위에 무기, 주먹 덮개, 모자를 차례로 겹친다(메이플스토리처럼 무기 자루가 주먹을 꿰뚫고 나온다).
   isolation: 층 순서(z-index)가 바깥 요소와 섞이지 않게 캐릭터 안에서만 쌓는다. */
.hero-fig { position: relative; width: 100%; isolation: isolate; }
.hero-fig .art-img { position: absolute; max-width: none; }
.hero-fig .hero-base { position: relative; z-index: 2; width: 100%; height: auto; }
.hero-fig .hero-weapon { z-index: 1; width: auto; }
.hero-fig .hero-hat { z-index: 3; height: auto; }
/* 주먹 덮개: 캐릭터 그림과 같은 그림을 같은 자리·같은 크기로 한 장 더 얹고, 주먹만 남겨(clip-path, js/art.js) 무기 손잡이를 덮는다 */
.hero-fig .hero-fist { z-index: 4; left: 0; top: 0; width: 100%; height: auto; }
/* 장비 층: 무기는 캐릭터 앞(3, 주먹 덮개 아래)에 쥐고, behind 무기·fist 없는 그림이면 캐릭터 뒤(1). 모자는 맨 앞(5).
   층마다 크기 기준(container)을 두어 테두리·그림자를 그림 폭에 비례하게(cqw) 그린다. */
.hero-fig .hero-layer { position: absolute; inset: 0; container-type: inline-size; pointer-events: none; }
.hero-fig .hero-layer.back { z-index: 1; }
.hero-fig .hero-layer.held { z-index: 3; }
.hero-fig .hero-layer.front { z-index: 5; }
.hero-fig .hero-swing { position: absolute; inset: 0; } /* 무기 감싸개: 손을 축으로 돌려 휘두른다(css/battlefx.css) */
.hero-fig .hero-hatshade { position: absolute; inset: 0; }
.hero-fig { --ink: drop-shadow(0.8cqw 0 0 #2a2230) drop-shadow(-0.8cqw 0 0 #2a2230) drop-shadow(0 0.8cqw 0 #2a2230) drop-shadow(0 -0.8cqw 0 #2a2230); }
.hero-fig .hero-weapon.inked { filter: var(--ink); }
.hero-fig .hero-weapon.inked.glow-4 { filter: var(--ink) drop-shadow(0 0 3px #6cc6ff) drop-shadow(0 0 9px #6cc6ff); }
.hero-fig .hero-weapon.inked.glow-7 { filter: var(--ink) drop-shadow(0 0 3px #c08bff) drop-shadow(0 0 11px #c08bff); }
.hero-fig .hero-weapon.inked.glow-10 { filter: var(--ink) drop-shadow(0 0 4px #ffe066) drop-shadow(0 0 14px #ffb000); }
.hero-fig .hero-layer.inked .hero-hatshade { filter: var(--ink) drop-shadow(0 1.3cqw 0.9cqw rgba(40, 24, 30, .4)); }
/* 레벨 오라를 두른 캐릭터는 둘레가 은은하게 빛난다(색은 pixelfx.js 가 --px-glow 로 넘긴다) */
.hero-fig.px-glow { filter: drop-shadow(0 0 2px var(--px-glow)) drop-shadow(0 0 8px var(--px-glow)); animation: pxglow 1.8s ease-in-out infinite; }
@keyframes pxglow { 50% { filter: drop-shadow(0 0 1px var(--px-glow)) drop-shadow(0 0 4px var(--px-glow)); } }
.glow-4 { filter: drop-shadow(0 0 3px #6cc6ff) drop-shadow(0 0 9px #6cc6ff); }
.glow-7 { filter: drop-shadow(0 0 3px #c08bff) drop-shadow(0 0 11px #c08bff); }
.glow-10 { filter: drop-shadow(0 0 4px #ffe066) drop-shadow(0 0 14px #ffb000); }
.hud .portrait { position: relative; }
.hero-headimg { position: absolute; max-width: none; height: auto; }
.hero-ped .hero-fig { height: 100%; width: auto; margin: 0 auto; }
.preview-card .pedestal.hero-ped { width: auto; max-width: none; height: 74%; }
.char-card .stagebox .pedestal.hero-ped { width: auto; height: 80%; }
.actor.player.is-hero { width: calc(62cqh * var(--hero-ar, .55)); }
.node .you.is-hero { width: 38px; top: -86px; left: calc(50% - 19px); }
.item-pic { position: relative; width: 100%; height: 100%; overflow: visible; }
.item-pic img { position: absolute; left: 50%; top: 50%; display: block; max-width: none; transform: translate(-50%, -50%); }
.item-pic.weapon img { width: auto; height: 118%; transform: translate(-50%, -50%) rotate(40deg); }
.item-pic.hat img { width: 100%; height: 100%; object-fit: contain; } /* 키 큰 모자(가발·투구)도 칸 안에 */
.slot .item-pic { width: 56px; height: 56px; }
.detail .ico .item-pic { width: 70px; height: 70px; }
.drop-card .ico .item-pic { width: 54px; height: 54px; }
.hero-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.hero-card { display: grid; justify-items: center; gap: 4px; padding: 10px 8px 12px; cursor: pointer; text-align: center;
  background: #fff; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 3px 0 var(--ink); }
.hero-card .pic { height: 130px; display: flex; justify-content: center; align-items: flex-end; }
.hero-card .pic .hero-fig { height: 100%; width: auto; }
.hero-card b { font-family: var(--f-ui); font-weight: 400; font-size: 18px; }
.hero-card span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.4; word-break: keep-all; }
.hero-card[aria-pressed="true"] { background: #f0eaff; border-color: var(--violet); box-shadow: 0 0 0 3px #e3dbff, 0 3px 0 var(--violet-deep); }
.dlg .count { display: none; font-family: var(--f-num); font-size: 14px; color: var(--ink-soft); }
.scene { height: clamp(200px, 42vh, 440px); }
.actor.monster.boss.has-img { left: 66%; }
.actor.boss.has-img .art-img { max-height: 64cqh; }
@media (max-width: 760px) {
  .scene { height: clamp(190px, 31vh, 300px); }
  .dlg .dots { display: none; }
  .dlg .count { display: inline; }
}
/* 넓은 화면: 캐릭터와 몬스터를 키우고, 둘 사이가 너무 벌어지지 않게 가운데로 모은다 */
@media (min-width: 761px) {
  .actor.player { left: max(22%, calc(50% - 400px)); }
  .actor.monster { left: min(74%, calc(50% + 380px)); width: clamp(112px, 17vw, 270px); }
  .actor.monster.boss.has-img { left: min(68%, calc(50% + 340px)); width: clamp(160px, 26vw, 360px); }
  .actor.player.is-hero { width: calc(72cqh * var(--hero-ar, .55)); }
  .actor.has-img .art-img { max-height: 72cqh; }
  .actor.boss.has-img .art-img { max-height: 84cqh; }
}
/* 세로로 긴 넓은 화면(태블릿 세로 등): 장면이 높아서, 키로 크기가 정해지는 주인공에 비해 폭으로 정해지는 몬스터가 너무 작아지지 않게 */
@media (min-width: 761px) and (max-aspect-ratio: 1/1) {
  .actor.monster { width: clamp(112px, 30vw, 270px); }
  .actor.monster.boss.has-img { width: clamp(160px, 38vw, 360px); }
}
.lecture .owl-wrap.portrait .idle { animation-duration: 3.2s; }

/* ---------- keyframes ---------- */
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.015, .985) translateY(1px); } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--rot, 0deg)); } }
@keyframes squish { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.08, .9); } 60% { transform: scale(.95, 1.06) translateY(-6px); } }
@keyframes hop { 0%, 100% { transform: translateY(0) rotate(0); } 40% { transform: translateY(-14px) rotate(-6deg); } 70% { transform: translateY(0) rotate(4deg); } }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg) translateY(-3px); } }
@keyframes wobble { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes boss-idle { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.02, .99); } }
@keyframes lunge-r { 0% { transform: translateX(0); } 35% { transform: translateX(var(--lunge, 160%)) rotate(6deg); } 55% { transform: translateX(var(--lunge, 160%)) rotate(-10deg); } 100% { transform: translateX(0); } }
@keyframes lunge-l { 0% { transform: translateX(0); } 35% { transform: translateX(calc(var(--lunge, 120%) * -1)) rotate(-8deg); } 55% { transform: translateX(calc(var(--lunge, 120%) * -1)) rotate(4deg); } 100% { transform: translateX(0); } }
@keyframes hit-back { 0% { transform: translateX(0); } 25% { transform: translateX(var(--kb, 12%)) rotate(4deg); } 60% { transform: translateX(calc(var(--kb, 12%) * -.3)); } 100% { transform: translateX(0); } }
@keyframes hit-flash { 0%, 100% { filter: none; } 15%, 45% { filter: brightness(2.2) saturate(.3); } 30% { filter: brightness(1) sepia(1) hue-rotate(-50deg) saturate(4); } }
@keyframes die { 0% { transform: scale(1); opacity: 1; filter: brightness(1); } 25% { transform: scale(1.12, .9); filter: brightness(2.5); } 100% { transform: scale(.2, 1.5) translateY(-30%); opacity: 0; filter: brightness(3); } }
@keyframes enter-r { 0% { transform: translateX(140%) scale(.6); opacity: 0; } 100% { transform: translateX(0) scale(1); opacity: 1; } }
@keyframes cheer { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-22%); } }
@keyframes shake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-7px, 4px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }
@keyframes shake-x { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@keyframes float-up { 0% { transform: translate(-50%, 10px) scale(.4); opacity: 0; } 14% { transform: translate(-50%, -8px) scale(1.18); opacity: 1; } 26% { transform: translate(-50%, -4px) scale(1); } 75% { opacity: 1; } 100% { transform: translate(-50%, -64px) scale(1); opacity: 0; } }
@keyframes combo-pop { 0% { opacity: 0; transform: translateX(-50%) scale(.5); } 20% { opacity: 1; transform: translateX(-50%) scale(1.2); } 35% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-14px); } }
@keyframes banner { 0% { opacity: 0; transform: scaleX(.2); } 12% { opacity: 1; transform: scaleX(1.06); } 18% { transform: scaleX(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.85) translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: translate(-50%, -38%) rotate(360deg); } }
@keyframes hammer { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg) translateY(-6px); } }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 16px); } 12%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .create-grid, .inv-grid { grid-template-columns: minmax(0, 1fr); }
  .preview-card { height: 320px; }
  .hud { gap: 8px; padding: 6px 10px; }
  .hud .portrait { width: 40px; height: 40px; }
  .hud .name { font-size: 15px; }
  .hud .bars { min-width: 70px; }
  .hud .gold-wrap { display: none; }
  .scene { height: clamp(190px, 31vh, 300px); }
  .mon-plate { width: min(54%, 260px); padding: 4px 8px 6px; }
  .mon-plate .nm { font-size: 14px; }
  .pl-plate { display: none; }
  .quiz { padding: 14px 14px 16px; margin-top: 12px; }
  .q-stem { font-size: 16.5px; }
  .choice { font-size: 15.5px; padding: 9px 10px; }
  .lecture .owl-wrap { width: clamp(104px, 28vw, 150px); }
  .slide-card { left: 12px; right: 12px; top: 12px; bottom: 34%; padding: 0; place-items: center; }
  .lecture.nar .slide-card { left: 12px; bottom: 12px; }
  .slide-card .slide.story { inset: 0; }
  .stage-hero { height: clamp(180px, 30vh, 260px); }
  .shard-grid { gap: 6px 6px; }
  .shard-grid .sh .shard-img { max-width: 20px; }
  .dlg { padding: 24px 14px 12px; min-height: 0; }
  .dlg .text { font-size: 16.5px; line-height: 1.7; }
  .dg { padding: 14px; }
  .node { width: 160px; }
  .node .medal { width: 92px; height: 92px; }
  .node .medal > svg { width: 68px; height: 68px; }
  .node .medal.lm { width: 124px; height: auto; }
  .node .medal.lm .lm-img { max-height: 156px; }
  .node .medal.lm .you.is-hero { width: 32px; }
  .node .label b { font-size: 16px; }
  .node .label .ch { display: block; font-size: 12.5px; color: var(--orange-deep); margin-bottom: 1px; } /* 좁은 화면: '챕터 N'을 이름 위 작은 줄로 */
  .node .label .ch i { display: none; }
  .speech { font-size: 13.5px; }
  .taunt { font-size: 14.5px; }
  .nums { gap: 5px; }
  .nums .lbl { flex-basis: 100%; text-align: center; margin: 2px 0 0; }
  .nums .n { min-width: 30px; padding: 3px 5px; font-size: 14.5px; }
}
/* 휴대폰(760px 이하)에서 강의 슬라이드가 카드 안에 들어가게 한다. 데스크톱 배치는 그대로다.
   pair: 두 칸 카드를 나란히, trio: 짧은 카드 셋을 한 줄에, m3/m2: 작은 그래프 묶음을 3열/2열로,
   ph-hide: 대사가 같은 말을 읽어 주는 메모·장식 그림은 숨김, ph-w: 그림 폭을 style 의 --phw 로 줄임. */
@media (max-width: 760px) {
  .two.pair, .three.pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .two.trio, .three.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .two.pair > .card2, .three.pair > .card2, .two.trio > .card2, .three.trio > .card2 { padding: 10px; align-content: start; }
  .two.pair .card2 .hd, .three.pair .card2 .hd, .two.trio .card2 .hd, .three.trio .card2 .hd { flex-wrap: wrap; row-gap: 0; }
  .two.trio .card2 .hd, .three.trio .card2 .hd { font-size: 16px; }
  .minis.m3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .minis.m2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .minis.m3 .mini-card, .minis.m2 .mini-card { padding: 6px 5px 8px; }
  .minis.m2 .mini-card svg { max-width: 92px; }
  .dtbl th, .dtbl td { padding: 6px; }
  .chips { gap: 7px; }
  .chip { font-size: 15px; padding: 6px 10px 7px; }
  .flow { gap: 6px; }
  .flow .chip { font-size: 16px; padding: 7px 11px 8px; }
  .flow .arrow { font-size: 19px; }
  .ph-hide { display: none !important; }
  .dg-svg.ph-w { max-width: var(--phw) !important; }
}
@media (max-width: 420px) {
  .q-choices.row .choice { gap: 7px; padding-inline: 8px; } /* 두 칸 보기: 짧은 답(496g∼504g, 단순무작위추출)이 낱자로 쪼개지지 않게 글자 자리를 넓힌다 */
  .hud .title-tag { display: none; }
  .btn.big { font-size: 19px; padding: 12px 22px 13px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
}
/* 휴대폰 윗줄: 레벨 칩이 이름 옆을 차지해 이름이 잘리거나(지역 화면 30px) 아예 안 보였다(지도 0px, 레벨이 높을 때).
   레벨 칩을 이름 위로 올려 이름이 칸 너비를 다 쓰게 하고, 지도의 '이야기 다시 보기' 단추는 숨긴다(근거의 조각 막대를 눌러도 같은 이야기 메뉴가 열린다). */
@media (max-width: 420px) {
  .hud .name-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hud .name-row .lv { font-size: 12px; padding: 2px 6px 1px; }
  .hud .name { max-width: 100%; }
  .map-screen .hud .tools [data-act="story"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .cloud { display: none; }
}

/* 휴대폰: 던전·탑의 몬스터 두 줄 슬라이드(강의 'GO')는 그림을 조금 낮춰 대사가 다 나와도 칸 안에 들어가게 한다(탑 몬스터 여섯 마리가 375×812 에서 5px 넘쳤다) */
@media (max-width: 760px) {
  .lineup.rows2 svg, .lineup.rows2 .art-img { max-height: 96px; }
}