:root {
  /* 크기 배율: 모든 크기를 calc(N * var(--u)) 로 쓴다. 보통은 1px 이고, TV·큰 모니터에서만 화면에 맞게 커진다 (아래 html 글자 크기 참고) */
  --u: 1px;
  --paper: #fff7e6;
  --paper-2: #f6e7c8;
  --ink: #3b2414;
  --ink-soft: #7a5a3f;
  --brown: #8a5a2b;
  --brown-dark: #4a2c16;
  --teal: #1f7a7a;
  --teal-light: #d5efec;
  --gold: #e8b33a;
  --red: #d9534f;
  --green: #3c9a5f;
  --night: #141a33;
  --radius: calc(18 * var(--u));
  --font: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-en: 'Fredoka', 'Jua', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 10%, #fff3d6 0, transparent 40%),
    radial-gradient(circle at 80% 90%, #f2dcb4 0, transparent 45%),
    #f7e9cc;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* 한글은 낱말 단위로만 줄을 바꾼다 ('보너/스', '불규/칙' 처럼 끊기지 않게) */
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
h1, h2, h3, .screen-title, .quiz-prompt, .fish-prompt, .act-head, .panel-title, .factory-q, .sp-prompt { text-wrap: balance; }
p, .speech, .explain, .fb, .dialog { text-wrap: pretty; }

/* 기기별 기본 글자 크기: 휴대폰은 조금 작게, 큰 화면은 조금 크게 (모든 글자가 rem 이라 같은 비율로 맞춰진다) */
html { font-size: calc(16 * var(--u)); }
@media (max-width: 420px) { html { font-size: calc(14 * var(--u)); } }
@media (min-width: 421px) and (max-width: 640px) { html { font-size: calc(15 * var(--u)); } }
@media (min-width: 700px) and (min-height: 900px) { html { font-size: calc(17 * var(--u)); } }
@media (min-width: 1280px) and (min-height: 820px) { html { font-size: calc(17 * var(--u)); } }
/* TV·큰 모니터: 게임 판(폭 1100, 높이 약 770 기준)이 화면의 가로 92% 또는 세로 100% 중 먼저 닿는 쪽까지 통째로 커진다 */
@media (min-width: 1280px) and (min-height: 760px) { :root { --u: clamp(1px, min(0.0836vw, 0.13vh), 4px); } }
button, input { font-family: inherit; color: inherit; }
b.en, .en { font-family: var(--font-en); }

#app { max-width: calc(1100 * var(--u)); margin: 0 auto; min-height: 100vh; padding: calc(16 * var(--u)) calc(16 * var(--u)) calc(76 * var(--u)); }
.screen { animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(calc(8 * var(--u))); } to { opacity: 1; transform: none; } }

/* ---------- 공통 요소 ---------- */
.btn {
  border: calc(3 * var(--u)) solid var(--brown-dark);
  background: var(--paper);
  border-radius: calc(14 * var(--u));
  padding: calc(10 * var(--u)) calc(18 * var(--u));
  font-size: 1.125rem;
  cursor: pointer;
  box-shadow: 0 calc(4 * var(--u)) 0 var(--brown-dark);
  transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translateY(calc(3 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 var(--brown-dark); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--teal); color: #fff; }
.btn.big { font-size: 1.375rem; padding: calc(14 * var(--u)) calc(26 * var(--u)); }
.btn.small { font-size: 0.9375rem; padding: calc(6 * var(--u)) calc(12 * var(--u)); margin-top: calc(10 * var(--u)); }
.btn small { display: block; font-size: 0.875rem; opacity: .85; }
.icon-btn { border: none; background: none; font-size: 1.375rem; cursor: pointer; padding: calc(4 * var(--u)); }
.icon-btn.big { font-size: 1.875rem; }

.panel {
  background: var(--paper);
  border: calc(3 * var(--u)) solid var(--brown);
  border-radius: var(--radius);
  padding: calc(18 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) 0 rgba(74, 44, 22, .25);
}
.screen-title { text-align: center; font-size: 1.875rem; margin: calc(10 * var(--u)) 0 calc(6 * var(--u)); }
.hint { text-align: center; color: var(--ink-soft); margin: calc(6 * var(--u)) auto calc(14 * var(--u)); width: fit-content; max-width: 100%; background: rgba(255, 247, 230, .92); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); }
.row-btns { display: flex; gap: calc(12 * var(--u)); justify-content: center; flex-wrap: wrap; margin-top: calc(16 * var(--u)); }

.portrait-frame {
  background: #1b120c;
  border: calc(5 * var(--u)) solid var(--gold);
  outline: calc(3 * var(--u)) solid var(--brown-dark);
  border-radius: calc(24 * var(--u));
  overflow: hidden;
  aspect-ratio: 2 / 3;
}
.portrait-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-frame.glow { box-shadow: 0 0 calc(40 * var(--u)) calc(8 * var(--u)) rgba(232, 179, 58, .7); }

.dot-frame {
  width: calc(190 * var(--u)); aspect-ratio: 2 / 3; border-radius: 50%;
  overflow: hidden; background: #1b120c; border: calc(4 * var(--u)) solid var(--gold);
  margin: 0 auto calc(14 * var(--u)); animation: bob 2.4s ease-in-out infinite;
}
.dot-frame img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
@keyframes bob { 50% { transform: translateY(calc(-8 * var(--u))); } }

.bar { flex: 1; height: calc(14 * var(--u)); background: #ead7b3; border-radius: calc(8 * var(--u)); overflow: hidden; border: calc(2 * var(--u)) solid #c9a978; }
.bar > div { height: 100%; background: linear-gradient(90deg, #3aa59d, var(--teal)); border-radius: calc(6 * var(--u)); transition: width .5s; }
.bar.exp > div { background: linear-gradient(90deg, #f4cf66, var(--gold)); }
.bar.fatigue > div { background: linear-gradient(90deg, #f0a35e, #e07b39); }
.bar.fatigue.danger > div { background: var(--red); }
.bar.conf > div { background: linear-gradient(90deg, #c69df0, #9a6bd8); }
.bar.full > div { background: linear-gradient(90deg, #f4cf66, var(--gold)); }

/* ---------- 타이틀 ---------- */
.title-screen { position: relative; min-height: calc(100vh - calc(92 * var(--u))); display: flex; align-items: center; justify-content: center; }
.title-chars { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.title-chars img { width: 30%; max-width: calc(300 * var(--u)); border-radius: calc(30 * var(--u)); border: calc(5 * var(--u)) solid var(--gold); box-shadow: 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0,0,0,.25); }
.title-chars img:first-child { transform: rotate(-4deg); }
.title-chars img:last-child { transform: rotate(4deg); }
.title-box { position: relative; text-align: center; background: rgba(255, 247, 230, .94); border: calc(4 * var(--u)) solid var(--brown); border-radius: calc(28 * var(--u)); padding: calc(28 * var(--u)) calc(36 * var(--u)); box-shadow: 0 calc(8 * var(--u)) 0 rgba(74,44,22,.3); }
.logo-sub { color: var(--teal); font-size: 1.25rem; letter-spacing: calc(4 * var(--u)); }
.logo { font-size: 4rem; margin: calc(4 * var(--u)) 0; color: var(--brown-dark); text-shadow: calc(3 * var(--u)) calc(3 * var(--u)) 0 var(--gold); }
.logo-desc { color: var(--ink-soft); font-size: 1.125rem; }
.title-btns { display: flex; flex-direction: column; gap: calc(14 * var(--u)); margin-top: calc(20 * var(--u)); }

/* ---------- 입장 비밀번호 ---------- */
.gate-box .logo { font-size: 3rem; }
.gate-dots { display: flex; justify-content: center; gap: calc(14 * var(--u)); margin: calc(12 * var(--u)) 0 calc(18 * var(--u)); }
.gate-dots span { width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; border: calc(3 * var(--u)) solid var(--brown); background: #fff; }
.gate-dots span.on { background: var(--teal); border-color: var(--teal); }
.gate-dots.shake { animation: shake .3s; }
.gate-dots.shake span { border-color: var(--red); }
.gate-pad { display: grid; grid-template-columns: repeat(3, calc(76 * var(--u))); gap: calc(10 * var(--u)); justify-content: center; }
.gate-key { font-size: 1.75rem; padding: calc(10 * var(--u)) 0; }

/* ---------- 캐릭터 만들기 ---------- */
.gender-pick { display: flex; gap: calc(28 * var(--u)); justify-content: center; margin: calc(20 * var(--u)) 0; }
.char-card { width: calc(230 * var(--u)); padding: calc(10 * var(--u)); background: var(--paper); border: calc(4 * var(--u)) solid #c9a978; border-radius: calc(22 * var(--u)); cursor: pointer; transition: transform .15s; }
.char-card img { width: 100%; aspect-ratio: 2/3; object-fit: cover; border-radius: calc(14 * var(--u)); display: block; background: #1b120c; }
.char-card span { display: block; font-size: 1.375rem; margin-top: calc(8 * var(--u)); }
.char-card.on { border-color: var(--teal); transform: translateY(calc(-6 * var(--u))) scale(1.03); box-shadow: 0 0 0 calc(4 * var(--u)) var(--teal-light); }
.name-row { display: flex; gap: calc(12 * var(--u)); align-items: center; justify-content: center; flex-wrap: wrap; }
.name-row label { font-size: 1.375rem; }
.name-row input { font-size: 1.375rem; padding: calc(10 * var(--u)) calc(14 * var(--u)); border: calc(3 * var(--u)) solid var(--brown); border-radius: calc(12 * var(--u)); width: calc(220 * var(--u)); background: #fff; user-select: text; }

/* ---------- 이야기 시작 ---------- */
.story-screen { display: flex; gap: calc(24 * var(--u)); align-items: center; justify-content: center; min-height: calc(100vh - calc(92 * var(--u))); flex-wrap: wrap; }
.story-screen .portrait-frame { width: calc(260 * var(--u)); }
.dialog { max-width: calc(480 * var(--u)); background: var(--paper); border: calc(4 * var(--u)) solid var(--brown); border-radius: calc(22 * var(--u)); padding: calc(22 * var(--u)); font-size: 1.25rem; line-height: 1.6; }
.dialog p { margin: 0 0 calc(10 * var(--u)); }

/* ---------- 메인 ---------- */
.topbar { display: flex; align-items: center; gap: calc(14 * var(--u)); background: var(--brown-dark); color: #fff; border-radius: calc(18 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u)); }
.lv-badge { background: var(--gold); color: var(--brown-dark); font-size: 1.375rem; padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); font-family: var(--font-en); }
.topinfo { flex: 1; display: flex; flex-direction: column; }
.topinfo span { font-size: 0.875rem; opacity: .8; }
.coins { font-size: 1.25rem; }
.topbar .icon-btn { filter: grayscale(.2); }

.main-body { display: grid; grid-template-columns: calc(300 * var(--u)) 1fr; gap: calc(18 * var(--u)); margin-top: calc(16 * var(--u)); }
.portrait-col { display: flex; flex-direction: column; gap: calc(12 * var(--u)); }
.speech { position: relative; background: #fff; border: calc(3 * var(--u)) solid var(--brown); border-radius: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(14 * var(--u)); font-size: 1.0625rem; line-height: 1.5; }
.speech::before { content: ''; position: absolute; top: calc(-12 * var(--u)); left: calc(40 * var(--u)); border: calc(10 * var(--u)) solid transparent; border-bottom-color: var(--brown); border-top: 0; }
.info-col { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.panel-title { font-size: 1.25rem; margin-bottom: calc(10 * var(--u)); }
.exp-row { display: flex; gap: calc(10 * var(--u)); align-items: center; font-size: 0.9375rem; margin-bottom: calc(12 * var(--u)); }

.strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); }
.strip.empty { display: block; text-align: center; color: var(--ink-soft); padding: calc(14 * var(--u)); border: calc(2 * var(--u)) dashed #c9a978; border-radius: calc(12 * var(--u)); }
.strip-cell { text-align: center; background: var(--paper-2); border-radius: calc(12 * var(--u)); padding: calc(6 * var(--u)); display: flex; flex-direction: column; border: calc(2 * var(--u)) solid transparent; }
.strip-cell span { font-size: 1.625rem; }
.strip-cell small { font-size: 0.8125rem; color: var(--ink-soft); }
.strip-cell.done { opacity: .5; }
.strip-cell.done span::after { content: ' ✔'; font-size: 1rem; color: var(--green); }
.strip-cell.now { border-color: var(--teal); background: var(--teal-light); }

.stats { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.stat { display: flex; align-items: center; gap: calc(10 * var(--u)); }
.stat-name { width: calc(100 * var(--u)); font-size: 1rem; }
.stat-val { width: calc(36 * var(--u)); text-align: right; font-family: var(--font-en); }
.stat.sub .stat-name { color: var(--ink-soft); }
.main-act { width: 100%; }

/* ---------- 스케줄 ---------- */
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12 * var(--u)); max-width: calc(640 * var(--u)); margin: 0 auto; }
.slot { background: var(--paper); border: calc(3 * var(--u)) dashed #c9a978; border-radius: calc(16 * var(--u)); min-height: calc(110 * var(--u)); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); font-size: 1rem; }
.slot.filled { border-style: solid; border-color: var(--teal); background: var(--teal-light); }
.slot span { font-size: 2.125rem; }
.slot .plus { color: #c9a978; }
.fatigue-preview { text-align: center; margin: calc(14 * var(--u)) auto; width: fit-content; font-size: 1.0625rem; background: rgba(255, 247, 230, .92); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(999 * var(--u)); }
.fatigue-preview.danger { color: var(--red); }
.acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(150 * var(--u)), 1fr)); gap: calc(12 * var(--u)); }
.act-card { background: var(--paper); border: calc(3 * var(--u)) solid var(--brown); border-radius: calc(16 * var(--u)); padding: calc(12 * var(--u)) calc(8 * var(--u)); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--u)); box-shadow: 0 calc(4 * var(--u)) 0 rgba(74,44,22,.3); }
.act-card:active:not(:disabled) { transform: translateY(calc(3 * var(--u))); box-shadow: none; }
.act-card.locked { opacity: .5; cursor: default; }
.act-icon { font-size: 2.25rem; }
.act-card b { font-size: 1.1875rem; }
.act-card small { color: var(--ink-soft); font-size: 0.875rem; }
.act-card em { font-style: normal; font-size: 0.7812rem; color: var(--teal); }

/* ---------- 활동 공통 ---------- */
.activity-screen, .exam-screen, .lesson-screen { max-width: calc(760 * var(--u)); margin: 0 auto; }
.act-head { display: flex; align-items: center; justify-content: space-between; font-size: 1.5rem; margin-bottom: calc(12 * var(--u)); }
.mini-dot { width: calc(56 * var(--u)); height: calc(84 * var(--u)); object-fit: cover; border-radius: calc(14 * var(--u)); border: calc(3 * var(--u)) solid var(--gold); background: #1b120c; }

.quiz-head { display: flex; justify-content: space-between; font-size: 1.125rem; color: var(--ink-soft); }
.progress { height: calc(8 * var(--u)); background: #ead7b3; border-radius: calc(6 * var(--u)); margin: calc(8 * var(--u)) 0 calc(18 * var(--u)); overflow: hidden; }
.progress > div { height: 100%; background: var(--gold); transition: width .3s; }
.quiz-prompt { font-size: 1.75rem; text-align: center; margin: calc(10 * var(--u)) 0 calc(22 * var(--u)); line-height: 1.4; }
.q-emoji { font-size: 2.75rem; vertical-align: middle; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
.choice { font-size: 1.5rem; font-family: var(--font-en); padding: calc(16 * var(--u)); background: #fff; border: calc(3 * var(--u)) solid #c9a978; border-radius: calc(16 * var(--u)); cursor: pointer; }
.choice:hover:not(:disabled) { border-color: var(--teal); }
.choice.right { background: #dff3e4; border-color: var(--green); }
.choice.wrong { background: #fbe1df; border-color: var(--red); animation: shake .3s; }
@keyframes shake { 25% { transform: translateX(calc(-6 * var(--u))); } 75% { transform: translateX(calc(6 * var(--u))); } }
.feedback { margin-top: calc(16 * var(--u)); text-align: center; }
.fb { font-size: 1.25rem; padding: calc(10 * var(--u)); border-radius: calc(12 * var(--u)); background: var(--paper-2); }
.fb.ok { color: var(--green); }
.fb.bad { color: var(--red); }
.explain { color: var(--ink); font-size: 1.0625rem; margin-top: calc(6 * var(--u)); }
.feedback .btn { margin-top: calc(12 * var(--u)); }

/* 수업 */
.lesson-step { color: var(--ink-soft); font-size: 1rem; }
.lesson-card h2 { font-size: 1.75rem; margin: calc(6 * var(--u)) 0 calc(14 * var(--u)); color: var(--teal); }
.lesson-body { font-size: 1.25rem; line-height: 1.6; }
.lesson-card { max-width: calc(760 * var(--u)); margin: 0 auto; }
.lesson-body p { margin: calc(8 * var(--u)) 0; }
.tip { background: #fff3c8; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); }
.ex-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(10 * var(--u)); margin: calc(12 * var(--u)) 0; }
.ex-grid div { background: #fff; border: calc(2 * var(--u)) solid #c9a978; border-radius: calc(12 * var(--u)); text-align: center; padding: calc(8 * var(--u)); font-family: var(--font-en); cursor: pointer; }
.ex-grid span { display: block; font-size: 2.125rem; }
.ex-row { background: #fff; border-radius: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); margin: calc(6 * var(--u)) 0; font-family: var(--font-en); cursor: pointer; }
.ex-row.good { color: var(--green); }
.ex-row.bad { color: var(--red); cursor: default; }
.rule { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 1.125rem; margin: calc(8 * var(--u)) 0; background: #fff;
  border: calc(2 * var(--u)) solid #d9c7a4; border-radius: calc(14 * var(--u)); overflow: hidden; }
.rule th, .rule td { padding: calc(10 * var(--u)) calc(12 * var(--u)); text-align: center; vertical-align: middle; line-height: 1.45;
  border-right: calc(2 * var(--u)) solid #ead7b3; border-bottom: calc(2 * var(--u)) solid #ead7b3; }
.rule tr > :last-child { border-right: none; }
.rule tr:last-child > * { border-bottom: none; }
.rule th { background: #eef5f0; color: var(--ink); font-weight: normal; }
.rule th.ko:first-child { min-width: 5.2em; }
.rule th.en { color: var(--teal); font-weight: 600; font-size: 1.08em; }
@media (max-width: 520px) { .rule th, .rule td { padding: calc(8 * var(--u)) calc(7 * var(--u)); } .rule { font-size: 1.05rem; } }
.rule tr:first-child th:empty ~ td { background: #eef5f0; }
.rule td.ex { text-align: left; }
.rule b { color: var(--teal); font-weight: 600; }
.rule .en { font-family: var(--font-en); }
.rule .nowrap { white-space: nowrap; }
.rule .ln { display: block; white-space: nowrap; }
.rule .chip { display: inline-block; white-space: nowrap; background: var(--paper); border: calc(2 * var(--u)) solid #ead7b3; border-radius: calc(999 * var(--u));
  padding: 0 calc(8 * var(--u)); margin: calc(2 * var(--u)) calc(1 * var(--u)); font-family: var(--font-en); font-size: .95em; }

/* 도서관 */
.story h2 { font-family: var(--font-en); color: var(--teal); text-align: center; font-size: 1.875rem; margin: calc(4 * var(--u)) 0 calc(12 * var(--u)); }
.story-text p { margin: calc(6 * var(--u)) 0; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); cursor: pointer; font-size: 1.375rem; line-height: 1.4; }
.story-text p:hover { background: var(--paper-2); }
.story-text .ko { display: block; font-size: 1rem; color: var(--ink-soft); }

/* 말하기 */
.speak-card { text-align: center; padding: calc(18 * var(--u)); background: #fff; border-radius: calc(18 * var(--u)); border: calc(3 * var(--u)) solid #c9a978; }
.speak-emoji { font-size: 3.375rem; }
.speak-en { font-family: var(--font-en); font-size: 2.5rem; color: var(--teal); }
.speak-ko { color: var(--ink-soft); font-size: 1.125rem; }
.speak .btn.primary { min-width: calc(160 * var(--u)); }

/* 일기 */
.diary-page { background: repeating-linear-gradient(#fff, #fff calc(38 * var(--u)), #d9e8f2 calc(39 * var(--u)), #fff calc(40 * var(--u))); border: calc(3 * var(--u)) solid #c9a978; border-radius: calc(16 * var(--u)); padding: calc(18 * var(--u)); text-align: center; }
.diary-pic { font-size: 2.75rem; letter-spacing: calc(6 * var(--u)); }
.diary-ko { color: var(--ink-soft); font-size: 1.125rem; }
.diary-line { font-family: var(--font-en); font-size: 1.875rem; }
.diary-line input { font-family: var(--font-en); font-size: 1.75rem; width: calc(220 * var(--u)); border: none; border-bottom: calc(3 * var(--u)) solid var(--teal); background: transparent; text-align: center; outline: none; user-select: text; }

/* 휴식 */
.rest { text-align: center; font-size: 1.375rem; padding: calc(20 * var(--u)); }
.rest-pic { width: min(calc(560 * var(--u)), 100%, 64vh); margin: 0 auto calc(6 * var(--u)); border-radius: calc(18 * var(--u)); overflow: hidden; border: calc(4 * var(--u)) solid var(--gold);
  box-shadow: 0 calc(6 * var(--u)) 0 rgba(74, 44, 22, .25); animation: pop .5s ease; }
.rest-pic img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.zzz { font-size: 3.75rem; color: var(--teal); font-family: var(--font-en); }
.zzz span { display: inline-block; animation: float 1.6s ease-in-out infinite; }
.zzz span:nth-child(2) { animation-delay: .4s; font-size: .8em; }
@keyframes float { 50% { transform: translateY(calc(-14 * var(--u))); opacity: .5; } }

/* ---------- 결과 / 레벨업 ---------- */
.result-screen, .levelup-screen { max-width: calc(520 * var(--u)); margin: calc(30 * var(--u)) auto; text-align: center; position: relative; }
.result-panel h2 { margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); font-size: 1.625rem; }
.result-panel p { font-size: 1.125rem; line-height: 1.5; }
.warn { color: var(--red); }
.gains { list-style: none; padding: 0; margin: calc(10 * var(--u)) 0 calc(18 * var(--u)); font-size: 1.25rem; }
.gains li { padding: calc(6 * var(--u)); border-bottom: calc(2 * var(--u)) dotted #ead7b3; }
.up { color: var(--green); }
.down { color: var(--red); }
.levelup-screen .portrait-frame { width: calc(220 * var(--u)); margin: 0 auto calc(18 * var(--u)); animation: pop .6s ease; }
.lv-up { font-family: var(--font-en); font-size: 2.75rem; color: var(--gold); text-shadow: calc(2 * var(--u)) calc(2 * var(--u)) 0 var(--brown-dark); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.sparkles { position: absolute; inset: calc(-20 * var(--u)); pointer-events: none; }
.sparkles i { position: absolute; color: var(--gold); font-style: normal; font-size: 1.625rem;
  left: calc(5% + var(--i) * 6.5%); top: calc(10% + (var(--i) * 37 % 60) * 1%);
  animation: twinkle 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
@keyframes twinkle { 50% { opacity: .1; transform: scale(.5); } }

/* ---------- 단어 낚시 ---------- */
.fishing-screen { max-width: calc(960 * var(--u)); margin: 0 auto; }
.fish-head { display: flex; justify-content: space-between; font-size: 1.375rem; background: var(--night); color: #fff; padding: calc(10 * var(--u)) calc(16 * var(--u)); border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0; }
.fish-prompt { background: var(--paper); border: calc(3 * var(--u)) solid var(--night); border-top: none; font-size: 1.625rem; text-align: center; padding: calc(10 * var(--u)); min-height: calc(64 * var(--u)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(4 * var(--u)) calc(8 * var(--u)); line-height: 1.3; }
.fish-prompt .late { color: var(--red); }
.timebar { height: calc(8 * var(--u)); background: #2b3460; }
.timebar > div { height: 100%; background: var(--gold); width: 100%; }
.pond {
  position: relative; height: min(62vh, calc(520 * var(--u))); overflow: hidden; border-radius: 0 0 calc(16 * var(--u)) calc(16 * var(--u));
  background: linear-gradient(#141a33 0, #26305e 40%, #2c5d84 40%, #1d4a6e 60%, #123552 100%);
}
.moon { position: absolute; right: 8%; top: 6%; width: calc(54 * var(--u)); height: calc(54 * var(--u)); border-radius: 50%; background: #fff4c4; box-shadow: 0 0 calc(30 * var(--u)) calc(10 * var(--u)) rgba(255, 244, 196, .35); }
.stars i { position: absolute; color: #fff7d6; font-style: normal; font-size: 0.75rem; left: calc(25% + var(--i) * 7%); top: calc(4% + (var(--i) * 13 % 22) * 1%); animation: twinkle 2s infinite; animation-delay: calc(var(--i) * .3s); }
.dock { position: absolute; left: 0; top: 0; height: 40%; width: 30%; }
.dock::after { content: ''; position: absolute; left: 0; bottom: calc(-8 * var(--u)); width: 100%; height: calc(16 * var(--u)); background: #6b4524; border-top: calc(4 * var(--u)) solid #8a5a2b; border-radius: 0 calc(8 * var(--u)) calc(8 * var(--u)) 0; }
.dock img {
  position: absolute; bottom: calc(2 * var(--u)); left: calc(8 * var(--u)); height: 96%; image-rendering: pixelated;
  -webkit-mask-image: radial-gradient(ellipse 48% 50% at 50% 50%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 48% 50% at 50% 50%, #000 62%, transparent 100%);
}
.water { position: absolute; left: 0; right: 0; top: 40%; bottom: 0; }
.water::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(40 * var(--u)), rgba(255,255,255,.04) calc(40 * var(--u)) calc(80 * var(--u))); animation: wave 6s linear infinite; }
@keyframes wave { to { background-position: calc(160 * var(--u)) 0; } }
.line-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fish { position: absolute; display: flex; align-items: center; gap: calc(4 * var(--u)); background: none; border: none; cursor: pointer; padding: calc(6 * var(--u)); touch-action: manipulation; }
.fish-body { font-size: 2.75rem; display: inline-block; filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.35)); }
.tag { background: #fff; color: var(--ink); font-family: var(--font-en); font-size: 1.375rem; padding: calc(4 * var(--u)) calc(12 * var(--u)); border-radius: calc(999 * var(--u)); border: calc(3 * var(--u)) solid var(--gold); white-space: nowrap; }
.fish:hover .tag { border-color: var(--teal); }
.fish.miss { opacity: .6; }
.fish.miss .tag { border-color: var(--red); }
.fish.reveal .tag { border-color: var(--green); box-shadow: 0 0 0 calc(4 * var(--u)) rgba(60,154,95,.5), 0 0 calc(20 * var(--u)) rgba(160,255,190,.8); }
.fish.caught .tag { border-color: var(--green); background: #dff3e4; }
.float-text { position: absolute; color: #fff; font-size: 1.5rem; text-shadow: 0 calc(2 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.6); pointer-events: none; animation: rise 1.2s ease forwards; white-space: nowrap; }
@keyframes rise { to { transform: translateY(calc(-50 * var(--u))); opacity: 0; } }
.fish-end { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10, 14, 30, .55); padding: calc(16 * var(--u)); }
.fish-end .result-panel { max-width: calc(440 * var(--u)); text-align: center; }

/* ---------- 미니게임 공통 ---------- */
.game-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(170 * var(--u)), 1fr)); gap: calc(12 * var(--u)); }
.game-screen { max-width: calc(860 * var(--u)); }
.game-stage { position: relative; overflow: hidden; min-height: calc(460 * var(--u)); }
.game-stage .fish-end { border-radius: var(--radius); }

/* 카드 짝맞추기 */
.mem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(12 * var(--u)); perspective: calc(900 * var(--u)); }
.mem-card { border: none; background: none; padding: 0; cursor: pointer; aspect-ratio: 4 / 3; }
.mem-inner { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.mem-card.flip .mem-inner { transform: rotateY(180deg); }
.mem-back, .mem-front { position: absolute; inset: 0; border-radius: calc(14 * var(--u)); display: flex; flex-direction: column; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: calc(3 * var(--u)) solid var(--brown); }
.mem-back { background: repeating-linear-gradient(45deg, var(--teal), var(--teal) calc(10 * var(--u)), #237f7f calc(10 * var(--u)), #237f7f calc(20 * var(--u))); color: #fff; font-size: 2.5rem; font-family: var(--font-en); }
.mem-front { background: #fff; transform: rotateY(180deg); }
.mem-en { font-family: var(--font-en); font-size: 1.625rem; color: var(--teal); }
.mem-emoji { font-size: 2.125rem; }
.mem-ko { font-size: 1.125rem; }
.mem-card.done .mem-front { background: #dff3e4; border-color: var(--green); animation: pop .4s ease; }

/* 품사 분류 공장 */
.factory-q { text-align: center; font-size: 1.75rem; margin: calc(6 * var(--u)) 0 calc(16 * var(--u)); }
.new-rule { color: var(--red); font-size: 1.125rem; display: block; }
.belt { position: relative; height: calc(110 * var(--u)); background: linear-gradient(#cfd6dd, #9aa5b1); border-radius: calc(14 * var(--u)); border: calc(3 * var(--u)) solid #5d6b78; overflow: hidden; }
.belt-line { position: absolute; left: 0; right: 0; bottom: calc(14 * var(--u)); height: calc(10 * var(--u)); background: repeating-linear-gradient(90deg, #5d6b78 0 calc(20 * var(--u)), #7e8c99 calc(20 * var(--u)) calc(40 * var(--u))); animation: belt 1s linear infinite; }
@keyframes belt { to { background-position: calc(40 * var(--u)) 0; } }
.crate { position: absolute; top: calc(14 * var(--u)); left: 0; width: calc(110 * var(--u)); height: calc(66 * var(--u)); background: #c98d4e; border: calc(4 * var(--u)) solid #8a5a2b; border-radius: calc(8 * var(--u)); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-size: 1.375rem; color: #fff; text-shadow: 0 calc(2 * var(--u)) 0 #6b4524; }
.crate.drop-yes, .crate.drop-no, .crate.fall { transition: transform .5s ease-in, opacity .5s; transform: translateY(calc(120 * var(--u))) rotate(12deg); opacity: 0; }
.crate.good { background: #4caf73; border-color: #2f7d4f; }
.crate.bad { background: var(--red); border-color: #a33a37; }
.factory-msg { min-height: calc(34 * var(--u)); text-align: center; font-size: 1.1875rem; margin: calc(12 * var(--u)) 0; }
.bins { display: grid; grid-template-columns: 1fr 1fr; gap: calc(16 * var(--u)); }
.bin { font-family: var(--font); font-size: 1.5rem; padding: calc(26 * var(--u)) calc(10 * var(--u)); border-radius: 0 0 calc(26 * var(--u)) calc(26 * var(--u)); border: calc(4 * var(--u)) solid var(--brown-dark); cursor: pointer; box-shadow: 0 calc(5 * var(--u)) 0 var(--brown-dark); }
.bin:active { transform: translateY(calc(3 * var(--u))); box-shadow: 0 calc(2 * var(--u)) 0 var(--brown-dark); }
.bin.yes { background: var(--teal-light); }
.bin.no { background: #fbe1df; }
.factory .progress { margin-top: calc(18 * var(--u)); }

/* 스펠링 몬스터 */
.arena { position: relative; height: calc(180 * var(--u)); background: linear-gradient(#2b2350, #4a3b7a 70%, #3c7a4e 70%, #2f5f3c); border-radius: calc(14 * var(--u)); overflow: hidden; }
.hero { position: absolute; left: calc(14 * var(--u)); bottom: calc(6 * var(--u)); width: calc(100 * var(--u)); height: calc(150 * var(--u)); border-radius: calc(50 * var(--u)); overflow: hidden; background: #1b120c; border: calc(3 * var(--u)) solid var(--gold); }
.hero img { width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.monster { position: absolute; right: 0; bottom: calc(20 * var(--u)); font-size: 5rem; line-height: 1; animation: stomp .5s ease-in-out infinite alternate; }
@keyframes stomp { to { transform: translateY(calc(-8 * var(--u))) rotate(-4deg); } }
.monster.poof { animation: poof .6s forwards; }
@keyframes poof { to { transform: scale(1.8) rotate(30deg); opacity: 0; filter: blur(calc(4 * var(--u))); } }
.monster.bite { animation: bite .3s 3; }
@keyframes bite { 50% { transform: translateX(calc(-16 * var(--u))) scale(1.15); } }
.sp-prompt { text-align: center; font-size: 1.625rem; margin: calc(14 * var(--u)) 0 calc(8 * var(--u)); }
.slots-row { display: flex; justify-content: center; gap: calc(8 * var(--u)); margin-bottom: calc(16 * var(--u)); }
.slot-ch { width: calc(46 * var(--u)); height: calc(56 * var(--u)); border-bottom: calc(4 * var(--u)) solid var(--brown); font-family: var(--font-en); font-size: 2.125rem; text-align: center; line-height: calc(56 * var(--u)); }
.slot-ch.on { color: var(--teal); }
.slot-ch.reveal { color: var(--red); }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); }
.tile { width: calc(58 * var(--u)); height: calc(58 * var(--u)); font-family: var(--font-en); font-size: 1.875rem; background: #fff7d6; border: calc(3 * var(--u)) solid var(--gold); border-radius: calc(12 * var(--u)); cursor: pointer; box-shadow: 0 calc(4 * var(--u)) 0 #b88a1f; }
.tile:disabled { opacity: .25; cursor: default; }
.tile.shake { animation: shake .3s; border-color: var(--red); }

/* 문장 기차 */
.train-ko { text-align: center; font-size: 1.625rem; margin: calc(6 * var(--u)) 0 calc(14 * var(--u)); }
.track { position: relative; padding: calc(14 * var(--u)) calc(8 * var(--u)) calc(22 * var(--u)); background: linear-gradient(transparent 82%, #8a5a2b 82%, #8a5a2b 88%, transparent 88%); overflow: hidden; border-radius: calc(12 * var(--u)); min-height: calc(96 * var(--u)); }
.train { display: flex; align-items: flex-end; gap: calc(6 * var(--u)); flex-wrap: wrap; }
.train.depart { transition: transform 1.6s ease-in; transform: translateX(110%); }
.engine { font-size: 3.375rem; line-height: 1; transform: scaleX(-1); }
.car { font-family: var(--font-en); font-size: 1.375rem; padding: calc(10 * var(--u)) calc(14 * var(--u)); background: var(--teal); color: #fff; border: calc(3 * var(--u)) solid #135b5b; border-radius: calc(10 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u)) calc(4 * var(--u)); cursor: pointer; position: relative; }
.car::after { content: '● ●'; position: absolute; left: 0; right: 0; bottom: calc(-16 * var(--u)); text-align: center; color: #333; font-size: 0.75rem; letter-spacing: calc(6 * var(--u)); }
.car.empty { background: transparent; border: calc(3 * var(--u)) dashed #c9a978; color: var(--ink-soft); font-family: var(--font); font-size: 1rem; cursor: default; min-width: calc(80 * var(--u)); }
.car.empty::after, .car.end::after { content: none; }
.car.end { background: transparent; border: none; color: var(--ink); font-size: 1.875rem; cursor: default; padding: 0 calc(4 * var(--u)); }
.car.wrong { background: var(--red); border-color: #a33a37; animation: shake .3s; }
.station { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(10 * var(--u)); margin-top: calc(18 * var(--u)); min-height: calc(60 * var(--u)); padding: calc(12 * var(--u)); background: var(--paper-2); border-radius: calc(14 * var(--u)); }
.block { font-family: var(--font-en); font-size: 1.5rem; padding: calc(10 * var(--u)) calc(16 * var(--u)); background: #fff; border: calc(3 * var(--u)) solid var(--brown); border-radius: calc(12 * var(--u)); cursor: pointer; box-shadow: 0 calc(4 * var(--u)) 0 var(--brown); }
.block:active { transform: translateY(calc(3 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 var(--brown); }

/* ---------- Codex 그림 ---------- */
#scene { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; opacity: 0; transition: opacity .4s; }
#scene.on { opacity: 1; }
#scene.on::after { content: ''; position: absolute; inset: 0; background: rgba(255, 247, 230, .18); }
.has-bg { background-size: cover; background-position: center; }

.wpic { display: inline-block; vertical-align: middle; object-fit: contain; }
img.wpic { filter: drop-shadow(0 calc(3 * var(--u)) calc(4 * var(--u)) rgba(74, 44, 22, .25)); }
.wpic.q-pic { width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
.wpic.emoji.q-pic { width: auto; height: auto; font-size: 2.75rem; }
.wpic.mem-pic { width: calc(62 * var(--u)); height: calc(62 * var(--u)); }
.wpic.emoji.mem-pic { width: auto; height: auto; font-size: 2.125rem; }
.wpic.inline { width: 1.6em; height: 1.6em; }
.ex-grid .wpic.inline { display: block; width: calc(72 * var(--u)); height: calc(72 * var(--u)); margin: 0 auto calc(4 * var(--u)); }
.speak-pics { display: flex; justify-content: center; gap: calc(6 * var(--u)); min-height: calc(100 * var(--u)); align-items: center; }
.wpic.speak-pic { width: calc(96 * var(--u)); height: calc(96 * var(--u)); }
.wpic.emoji.speak-pic { width: auto; height: auto; font-size: 3.375rem; }
.diary-pic { display: flex; justify-content: center; flex-wrap: wrap; gap: calc(4 * var(--u)); }
.wpic.diary-img { width: calc(66 * var(--u)); height: calc(66 * var(--u)); }
.wpic.emoji.diary-img { width: auto; height: auto; font-size: 2.75rem; }

.pond.has-bg .moon, .pond.has-bg .stars { display: none; }
.pond.has-bg .dock::after { content: none; }
.fish-body img { width: calc(86 * var(--u)); height: auto; display: block; }

.monster img { height: calc(120 * var(--u)); width: auto; display: block; filter: drop-shadow(0 calc(6 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .35)); }
.arena.has-bg { background-position: center 65%; }

.belt.has-bg { height: calc(130 * var(--u)); background-size: cover; background-position: center 47%; border-color: var(--brown); }
.belt.has-bg .belt-line { display: none; }
.act-head > span { background: rgba(255, 247, 230, .9); padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(999 * var(--u)); border: calc(2 * var(--u)) solid var(--brown); }
.act-head .t-en { font-size: .72em; font-family: var(--font-en); white-space: nowrap; color: var(--ink-soft); }
.act-head > span:first-child { line-height: 1.25; }
.crate.has-art { background-color: transparent; border: none; background-size: 100% 100%; background-repeat: no-repeat;
  width: calc(130 * var(--u)); height: calc(84 * var(--u)); color: var(--brown-dark); text-shadow: 0 0 calc(4 * var(--u)) #fff, 0 0 calc(4 * var(--u)) #fff; top: calc(4 * var(--u)); }
.crate.has-art.good, .crate.has-art.bad { background-color: transparent; }
.crate.has-art.good { filter: drop-shadow(0 0 calc(8 * var(--u)) var(--green)); }
.crate.has-art.bad { filter: drop-shadow(0 0 calc(8 * var(--u)) var(--red)); }

.engine-img { height: calc(78 * var(--u)); width: auto; align-self: flex-end; }
.train.art .car:not(.empty):not(.end) { background: var(--car) center bottom / 100% 100% no-repeat; border: none; color: #fff;
  text-shadow: 0 calc(2 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, .6); padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(26 * var(--u)); min-width: calc(76 * var(--u)); }
.train.art .car::after { content: none; }
.train.art .car.wrong { filter: drop-shadow(0 0 calc(6 * var(--u)) var(--red)); background-color: transparent; }

/* ---------- 변형 모드 ---------- */
.wpic.q-pic.big { width: calc(130 * var(--u)); height: calc(130 * var(--u)); }
.wpic.mem-pic.big { width: calc(84 * var(--u)); height: calc(84 * var(--u)); }
.mem-ko.big { font-size: 1.5rem; }
.mem-en.sm { font-size: 1.125rem; }
.hide-en { font-family: var(--font); font-size: 1.375rem; color: var(--ink-soft); }
.plural-tag { color: var(--red); }
.bonus { color: #d48a00; white-space: nowrap; flex-basis: 100%; font-size: .8em; line-height: 1.1; }
.fish.golden .tag { background: #fff3c4; border-color: #f0b400; box-shadow: 0 0 calc(14 * var(--u)) calc(4 * var(--u)) rgba(255, 210, 60, .8); }
.fish.golden .fish-body { filter: drop-shadow(0 0 calc(10 * var(--u)) #ffd84a) saturate(1.3); }
.event-icon { font-size: 3.75rem; line-height: 1; animation: pop .5s ease; }

/* 이모티콘 대신 쓰는 Codex 아이콘: 글자 크기에 맞춰 같이 커지고 작아진다 */
img.ico { height: 1.2em; width: auto; max-width: 1.6em; object-fit: contain; vertical-align: -0.24em; display: inline-block; margin: 0 .12em;
  filter: drop-shadow(0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(74, 44, 22, .25)); pointer-events: none; }
.act-icon img.ico, .map-icon img.ico, .event-icon img.ico { height: 1.15em; vertical-align: middle; }

/* 깜짝 이벤트: 움직이는 그림 */
.event-stage { position: relative; width: min(calc(260 * var(--u)), 66vw); aspect-ratio: 1; margin: 0 auto calc(20 * var(--u)); display: flex; align-items: flex-end; justify-content: center; }
.event-stage::before { content: ''; position: absolute; left: 14%; right: 14%; bottom: 2%; height: 9%; border-radius: 50%; background: rgba(74, 44, 22, .16); filter: blur(calc(2 * var(--u))); }
.event-pic { position: relative; max-width: 100%; max-height: 100%; object-fit: contain; transform-origin: 50% 100%;
  animation: evIn .6s cubic-bezier(.3, 1.6, .5, 1) both, var(--ev-anim) var(--ev-dur, 2.4s) ease-in-out .6s infinite; }
.event-fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.event-fx i { position: absolute; bottom: 40%; font-style: normal; font-family: var(--font); font-size: 1.25rem; color: var(--teal);
  text-shadow: 0 0 calc(3 * var(--u)) #fff, 0 0 calc(6 * var(--u)) #fff; white-space: nowrap; animation: evPuff 2s ease-out forwards; }
.event-fx i.heart { color: #e0607e; font-size: 1.5rem; }
.event-hint { position: absolute; bottom: calc(-6 * var(--u)); left: 50%; transform: translateX(-50%); font-size: .9rem; color: var(--ink-soft);
  background: var(--paper); border-radius: calc(999 * var(--u)); padding: calc(2 * var(--u)) calc(10 * var(--u)); white-space: nowrap; animation: hintBob 1.2s ease-in-out infinite; }
.event-stage[class*="anim-purr"] { cursor: pointer; }
.anim-glow   { --ev-anim: evGlow; }
.anim-bounce { --ev-anim: evBounce; --ev-dur: 1.6s; }
.anim-clap   { --ev-anim: evClap; --ev-dur: .9s; }
.anim-gift   { --ev-anim: evWiggle; --ev-dur: 1.8s; }
.anim-rain   { --ev-anim: evSway; --ev-dur: 3s; }
.anim-rain .event-fx i { bottom: auto; top: 30%; color: #5aa6d6; animation-name: evDrop; }
.anim-music  { --ev-anim: evGroove; --ev-dur: 1s; }
.anim-music .event-fx i { color: #b866c8; font-family: var(--font-en); font-size: 1.6rem; }
.anim-fly    { --ev-anim: evFly; --ev-dur: 3s; }
.anim-sway   { --ev-anim: evSway; --ev-dur: 2.6s; }
.anim-purr   { --ev-anim: evPurr; --ev-dur: 2.2s; }
.anim-purr .event-fx i { color: #c8822c; }
.anim-purr.awake { --ev-anim: evPurrAwake; --ev-dur: .5s; }
@keyframes evIn { from { transform: scale(.2) translateY(30%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes evPuff { from { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(calc(-70 * var(--u))) scale(1.1); opacity: 0; } }
@keyframes evDrop { from { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } to { transform: translateY(calc(110 * var(--u))); opacity: 0; } }
@keyframes hintBob { 50% { transform: translate(-50%, calc(-4 * var(--u))); } }
@keyframes evGlow { 50% { transform: translateY(calc(-6 * var(--u))); filter: drop-shadow(0 0 calc(14 * var(--u)) #ffe27a) brightness(1.08); } }
@keyframes evBounce { 0%, 100% { transform: none; } 30% { transform: translateY(calc(-14 * var(--u))) scaleY(1.03); } 55% { transform: scale(1.04, .95); } }
@keyframes evClap { 50% { transform: rotate(-3deg) translateY(calc(-4 * var(--u))); } }
@keyframes evWiggle { 0%, 60%, 100% { transform: none; } 70% { transform: rotate(-6deg); } 80% { transform: rotate(5deg); } 90% { transform: rotate(-3deg); } }
@keyframes evSway { 0%, 100% { transform: rotate(-3deg) translateX(calc(-4 * var(--u))); } 50% { transform: rotate(3deg) translateX(calc(4 * var(--u))); } }
@keyframes evGroove { 0%, 100% { transform: rotate(-4deg) scaleY(1); } 50% { transform: rotate(4deg) scaleY(.94); } }
@keyframes evFly { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(calc(-16 * var(--u))) rotate(3deg); } }
/* 자는 고양이: 숨 쉬듯 부풀었다 줄어들고, 그르릉 할 때마다 몸이 살짝 떨린다 */
@keyframes evPurr {
  0%, 100% { transform: scale(1, 1); }
  45% { transform: scale(1.035, 1.06); }
  48% { transform: scale(1.035, 1.06) translateX(calc(1 * var(--u))); } 51% { transform: scale(1.035, 1.06) translateX(calc(-1 * var(--u))); }
  54% { transform: scale(1.035, 1.06) translateX(calc(1 * var(--u))); } 57% { transform: scale(1.035, 1.06); }
}
@keyframes evPurrAwake { 0%, 100% { transform: rotate(-2deg) translateX(calc(-1 * var(--u))); } 50% { transform: rotate(2deg) translateX(calc(1 * var(--u))) scaleY(1.03); } }

/* ---------- 저장 칸 (형제자매) ---------- */
.slot-hint { color: var(--ink-soft); margin: calc(14 * var(--u)) 0 calc(6 * var(--u)); }
.slots-pick { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-width: calc(300 * var(--u)); }
.save-slot { display: flex; gap: calc(6 * var(--u)); align-items: center; }
.save-slot .btn { flex: 1; }
.save-go { display: flex; align-items: center; gap: calc(12 * var(--u)); text-align: left; padding: calc(8 * var(--u)) calc(14 * var(--u)); }
.save-go > img { width: calc(40 * var(--u)); height: calc(54 * var(--u)); object-fit: cover; border-radius: calc(10 * var(--u)); border: calc(2 * var(--u)) solid var(--gold); background: #1b120c; }
.save-go > span { display: flex; flex-direction: column; }
.save-go small { font-size: 0.875rem; opacity: .9; }
.save-new { border-style: dashed; color: var(--ink-soft); }

/* ---------- 메인 메뉴 ---------- */
.hub-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--u)); }
.hub-nav .btn { font-size: 1rem; padding: calc(10 * var(--u)) calc(6 * var(--u)); }
.hub-screen { max-width: calc(960 * var(--u)); margin: 0 auto; }
.coin-pill { background: var(--paper); border: calc(2 * var(--u)) solid var(--brown); border-radius: calc(999 * var(--u)); padding: calc(4 * var(--u)) calc(12 * var(--u)); font-size: 1.125rem; }

/* ---------- 마을 지도 ---------- */
.map-board { position: relative; aspect-ratio: 3 / 2; border-radius: calc(18 * var(--u)); border: calc(4 * var(--u)) solid var(--brown); overflow: hidden;
  background: #e9d9b5 center / cover no-repeat; box-shadow: 0 calc(6 * var(--u)) 0 rgba(74, 44, 22, .25); }
/* 가로로 넓은 화면(모니터·TV·패드 가로)에서는 지도가 화면 높이 안에 들어오게 폭을 줄인다 (지도 밖 제목·설명·여백이 약 240) */
@media (orientation: landscape) {
  .map-board { width: min(100%, max(calc(320 * var(--u)), calc((100vh - calc(240 * var(--u))) * 1.5))); margin-inline: auto; }
}
.map-board.no-art { background: radial-gradient(circle at 30% 70%, #cfe7c4, #e9d9b5); }
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-path polyline { fill: none; stroke: rgba(122, 74, 34, .7); stroke-width: .8; stroke-dasharray: 2 1.6; }
.map-node { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u));
  background: rgba(255, 247, 230, .92); border: calc(3 * var(--u)) solid var(--brown); border-radius: calc(16 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); cursor: pointer; min-width: calc(92 * var(--u)); }
.map-node .map-icon { font-size: 1.875rem; line-height: 1; }
.map-node .map-name { font-size: 1rem; }
.map-node small { font-size: 0.75rem; color: var(--ink-soft); }
.map-node.current { border-color: var(--teal); box-shadow: 0 0 0 calc(4 * var(--u)) var(--teal-light), 0 0 calc(18 * var(--u)) rgba(31, 122, 122, .6); animation: bob 2s ease-in-out infinite; }
.map-node.cleared { border-color: var(--gold); }
.map-node.locked { opacity: .75; filter: grayscale(.6); }
.map-node.hidden-stage { background: rgba(40, 30, 70, .8); color: #fff; border-color: #9a6bd8; }
.map-node.hidden-stage small { color: #d9c8ff; }
.map-hint { position: absolute; bottom: calc(10 * var(--u)); left: 50%; transform: translateX(-50%); color: var(--ink-soft); }
.map-info { margin-top: calc(12 * var(--u)); font-size: 1.125rem; line-height: 1.6; }

/* ---------- 내 방 ---------- */
.room-view { position: relative; aspect-ratio: 3 / 2; border-radius: calc(18 * var(--u)); border: calc(4 * var(--u)) solid var(--gold); overflow: hidden;
  background: linear-gradient(#f6ead2 0 56%, #c99a62 56% 100%) center / cover no-repeat; box-shadow: 0 calc(6 * var(--u)) 0 rgba(74, 44, 22, .25); }
.room-slot { position: absolute; transform: translateX(-50%); border: none; background: none; padding: 0; cursor: pointer; }
.room-slot:disabled { cursor: default; }
.room-pic { display: block; width: 100%; height: auto; filter: drop-shadow(0 calc(6 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .25)); }
.room-pic.emoji { font-size: 3rem; text-align: center; filter: none; }
.room-slot.empty { border: calc(2 * var(--u)) dashed rgba(122, 74, 34, .55); border-radius: calc(12 * var(--u)); background: rgba(255, 247, 230, .45); aspect-ratio: 1.3; }
.room-plus { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; font-size: 1.625rem; color: var(--brown); }
.room-plus small { font-size: 0.75rem; }
.room-slot.filled:hover .room-pic { transform: translateY(calc(-3 * var(--u))); }
.room-help { margin-top: calc(12 * var(--u)); font-size: 1.0625rem; line-height: 1.8; }

/* ---------- 상점 ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(150 * var(--u)), 1fr)); gap: calc(12 * var(--u)); }
.shop-item { background: var(--paper); border: calc(3 * var(--u)) solid var(--brown); border-radius: calc(16 * var(--u)); padding: calc(10 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(4 * var(--u)); text-align: center; }
.shop-item.owned { border-color: var(--green); background: #eef8f0; }
.shop-pic { height: calc(96 * var(--u)); display: flex; align-items: center; justify-content: center; }
.shop-img { max-height: calc(96 * var(--u)); max-width: calc(120 * var(--u)); }
.shop-img.emoji { font-size: 3.375rem; }
.shop-item small { color: var(--ink-soft); }
.owned-tag { color: var(--green); font-size: 0.875rem; }

/* ---------- 단어 도감 ---------- */
.dex-tabs { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin-bottom: calc(10 * var(--u)); }
.dex-head { display: flex; align-items: center; gap: calc(12 * var(--u)); flex-wrap: wrap; font-size: 1.125rem; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(110 * var(--u)), 1fr)); gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); }
.dex-card { background: #fff; border: calc(3 * var(--u)) solid var(--gold); border-radius: calc(14 * var(--u)); padding: calc(8 * var(--u)) calc(4 * var(--u)); display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); cursor: pointer; }
.dex-card b { font-family: var(--font-en); font-size: 1.0625rem; }
.dex-card small { font-size: 0.75rem; color: var(--ink-soft); }
.dex-card.locked { background: #ede3cf; border-color: #c9b48d; cursor: default; }
.dex-q { font-size: 2.5rem; color: #b59e75; height: calc(64 * var(--u)); display: flex; align-items: center; }
.wpic.dex-pic { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
.wpic.emoji.dex-pic { width: auto; height: auto; font-size: 2.5rem; }

/* ---------- 배경음악 켜기/끄기 ---------- */
#bgm-toggle { position: fixed; right: calc(14 * var(--u)); bottom: calc(14 * var(--u)); z-index: 50; width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: 50%;
  border: calc(3 * var(--u)) solid var(--brown-dark); background: var(--paper); font-size: 1.375rem; cursor: pointer; box-shadow: 0 calc(4 * var(--u)) 0 var(--brown-dark); }
#bgm-toggle:active { transform: translateY(calc(3 * var(--u))); box-shadow: 0 calc(1 * var(--u)) 0 var(--brown-dark); }

/* ---------- 품사 레벨·보스전 ---------- */
.ko-hint { color: var(--ink-soft); font-size: 1.0625rem; }
.ex-grid small { display: block; font-family: var(--font); font-size: 0.8125rem; color: var(--ink-soft); }
.crate { text-align: center; line-height: 1.1; padding: 0 calc(6 * var(--u)); }

.boss-screen { max-width: calc(760 * var(--u)); margin: 0 auto; }
.boss-top { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(12 * var(--u)); }
.boss-info { flex: 1; background: rgba(255, 247, 230, .92); border: calc(3 * var(--u)) solid var(--brown); border-radius: calc(16 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); font-size: 1.125rem; }
.bar.boss-hp { height: calc(18 * var(--u)); margin: calc(6 * var(--u)) 0; }
.bar.boss-hp > div { background: linear-gradient(90deg, #e05a5a, #a43a8c); }
.boss-sprite { width: calc(190 * var(--u)); height: calc(190 * var(--u)); display: flex; align-items: flex-end; justify-content: center; }
.boss-sprite img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 calc(8 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .4)); animation: stomp .8s ease-in-out infinite alternate; }
.boss-emoji { font-size: 7.5rem; line-height: 1; }
.boss-sprite.hit img, .boss-sprite.hit .boss-emoji { animation: bossHit .45s; }
.boss-sprite.laugh img, .boss-sprite.laugh .boss-emoji { animation: bossLaugh .5s; }
.boss-sprite.defeated img, .boss-sprite.defeated .boss-emoji { animation: poof 1.2s forwards; }
@keyframes bossHit { 30% { transform: translateX(calc(12 * var(--u))) rotate(6deg); filter: brightness(2) drop-shadow(0 0 calc(10 * var(--u)) #fff); } }
@keyframes bossLaugh { 50% { transform: scale(1.12) translateY(calc(-8 * var(--u))); } }
.boss-line { margin: calc(10 * var(--u)) 0; background: #3b2050; color: #fff; border-radius: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); font-size: 1.125rem; text-align: center; }

/* ---------- 태블릿 세로 / 휴대폰 ---------- */
@media (max-width: 760px) {
  #app { padding: calc(12 * var(--u)); }
  .main-body { grid-template-columns: 1fr; }
  .portrait-col { flex-direction: row; align-items: flex-start; }
  .portrait-col .portrait-frame { width: calc(130 * var(--u)); flex: none; }
  .title-chars { opacity: .35; }
  .logo { font-size: 2.875rem; }
  .char-card { width: 44%; }
  .slots { grid-template-columns: repeat(2, 1fr); }
  .choices { grid-template-columns: 1fr; }
  .choices.two { grid-template-columns: 1fr 1fr; }
  .quiz-prompt { font-size: 1.375rem; }
  .ex-grid { grid-template-columns: repeat(2, 1fr); }
  .fish-body { font-size: 2.125rem; }
  .tag { font-size: 1.125rem; }
  .fish-prompt { font-size: 1.25rem; }
  .dock { width: 40%; }
  .mem-grid { grid-template-columns: repeat(3, 1fr); }
  .mem-en { font-size: 1.25rem; }
  .bin { font-size: 1.125rem; padding: calc(18 * var(--u)) calc(6 * var(--u)); }
  .tile { width: calc(48 * var(--u)); height: calc(48 * var(--u)); font-size: 1.5rem; }
  .slot-ch { width: calc(34 * var(--u)); font-size: 1.625rem; }
  .block { font-size: 1.25rem; }
  .hub-nav .btn { font-size: 0.875rem; }
  .map-node { min-width: calc(64 * var(--u)); padding: calc(4 * var(--u)) calc(6 * var(--u)); }
  .map-node .map-icon { font-size: 1.25rem; }
  .map-node .map-name { font-size: 0.75rem; }
  .map-node small { display: none; }
}

/* 태블릿·컴퓨터: 수업 글씨를 크게 */
@media (min-width: 700px) { .lesson-body { font-size: 1.35rem; } .rule { font-size: 1.3rem; } .rule th, .rule td { padding: calc(12 * var(--u)) calc(16 * var(--u)); } }
.dot-frame.small { width: calc(92 * var(--u)); margin-bottom: calc(8 * var(--u)); }

/* 난이도 표시 (최근 10문제 정답률로 자동) */
.diff-badge { font-size: .62em; padding: calc(1 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); vertical-align: middle; white-space: nowrap; background: #fff; border: calc(2 * var(--u)) solid #ead7b3; color: var(--ink-soft); }
.diff-badge.easy { border-color: #9fd3a8; color: var(--green); }
.diff-badge.hard { border-color: #f2b38a; color: #c8642c; }

/* 그림이 여러 개 나란히 나올 때(five houses 등): 칸 너비에 맞춰 함께 줄어든다. 화면 밖으로 나가지 않게 */
img { max-width: 100%; }
html, body { overflow-x: hidden; }
.speak-pics, .diary-pic { flex-wrap: nowrap; max-width: 100%; }
.speak-pics .wpic, .diary-pic .wpic, .fish-prompt .wpic, .sp-prompt .wpic { flex: 0 1 auto; min-width: 0; }
.speak-pics img.wpic { width: auto; height: auto; max-height: calc(96 * var(--u)); flex-basis: calc(96 * var(--u)); aspect-ratio: 1; }
.diary-pic img.wpic { width: auto; height: auto; max-height: calc(66 * var(--u)); flex-basis: calc(66 * var(--u)); aspect-ratio: 1; }
.speak-card, .diary-page, .story, .panel { min-width: 0; max-width: 100%; }

/* 화면 위 제목 줄: 제목은 한 줄로(넘치면 …), 오른쪽 버튼 묶음은 줄어들지 않게 */
.act-head { gap: calc(8 * var(--u)); min-width: 0; }
.act-head > span { white-space: nowrap; }
.act-head > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.act-head > :last-child { flex: none; }
.head-actions { display: flex; align-items: center; gap: calc(6 * var(--u)); flex: none; }
.head-actions .btn.small { margin-top: 0; padding: calc(6 * var(--u)) calc(12 * var(--u)); }
.head-actions .coin-pill { white-space: nowrap; }
@media (max-width: 520px) {
  .act-head { font-size: 1.2rem; }
  .act-head > span { padding: calc(4 * var(--u)) calc(10 * var(--u)); }
  .act-head .mini-dot { width: calc(46 * var(--u)); height: calc(66 * var(--u)); }
}
@media (max-width: 420px) { .act-head .t-en { display: none; } }
/* 문장 기차: 결과 글·다음 버튼 자리를 미리 잡아 둬서 아래 화면이 밀리지 않게 */
#t-fb { min-height: calc(96 * var(--u)); }
.train.depart { will-change: transform; }

/* 도서관 이야기 그림 */
.story-scene { margin: calc(-4 * var(--u)) 0 calc(10 * var(--u)); border-radius: calc(16 * var(--u)); overflow: hidden; border: calc(3 * var(--u)) solid var(--gold); box-shadow: 0 calc(4 * var(--u)) 0 rgba(74, 44, 22, .2); }
.story-scene img { display: block; width: 100%; aspect-ratio: 4 / 3; max-height: min(calc(300 * var(--u)), 34vh); object-fit: cover; }
.story-pics { display: flex; justify-content: center; gap: calc(10 * var(--u)); margin: 0 0 calc(6 * var(--u)); }
.story-pics .wpic.story-pic { width: auto; height: auto; max-height: calc(76 * var(--u)); flex: 0 1 calc(76 * var(--u)); min-width: 0; aspect-ratio: 1; }

/* 모험: 탐험 길 */
.explore-screen .trail { position: relative; height: min(46vh, calc(340 * var(--u))); border-radius: calc(18 * var(--u)); overflow: hidden; margin-bottom: calc(12 * var(--u));
  border: calc(3 * var(--u)) solid var(--brown); background: #cfe3c4 center 80% / cover no-repeat; }
.trail .stop { position: absolute; left: var(--x); bottom: 16%; width: calc(34 * var(--u)); height: calc(16 * var(--u)); margin-left: calc(-17 * var(--u)); border-radius: 50%;
  background: rgba(255, 247, 230, .85); border: calc(3 * var(--u)) dashed var(--brown); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; }
.trail .stop.done { background: var(--gold); border-style: solid; }
.trail .stop.last { width: calc(44 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(-22 * var(--u)); }
.trail .walker { position: absolute; left: min(var(--x), 70%); bottom: 18%; width: clamp(calc(54 * var(--u)), 15vw, calc(80 * var(--u))); transform: translateX(-50%); transition: left .85s ease-in-out; z-index: 2; }
.trail .walker img { width: 100%; border-radius: calc(14 * var(--u)); border: calc(3 * var(--u)) solid var(--gold); background: #1b120c; display: block; }
.trail .walker.walking img { animation: walkBob .3s ease-in-out 3; }
@keyframes walkBob { 50% { transform: translateY(calc(-8 * var(--u))) rotate(-3deg); } }
.trail .foe-peek { position: absolute; left: min(calc(var(--x) + 22%), 84%); bottom: 14%; width: clamp(calc(84 * var(--u)), 24vw, calc(140 * var(--u))); transform: translateX(-50%); z-index: 1;
  animation: foeJump .5s cubic-bezier(.3, 1.6, .5, 1) both; }
.trail .foe-peek.boss { width: clamp(calc(110 * var(--u)), 32vw, calc(180 * var(--u))); }
.trail .foe-peek img { width: 100%; filter: drop-shadow(0 calc(6 * var(--u)) calc(6 * var(--u)) rgba(0, 0, 0, .35)); animation: stomp .8s ease-in-out .5s infinite alternate; }
@keyframes foeJump { from { transform: translate(-50%, 60%) scale(.3); opacity: 0; } to { transform: translate(-50%, 0) scale(1); opacity: 1; } }
.explore-panel { text-align: center; }
.explore-log { font-size: 1.2rem; min-height: 3.2em; margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); }
.new-tag { color: #c8642c; font-size: .8em; white-space: nowrap; }
.foe-grid .foe-pic { width: calc(72 * var(--u)); height: calc(72 * var(--u)); object-fit: contain; display: block; margin: 0 auto calc(4 * var(--u)); }
.foe-grid .foe-pic.shadow { filter: brightness(0) opacity(.25); }
/* Codex 아이콘은 글자처럼: 다른 곳의 "img" 꾸밈(초상 사진 크기·테두리)이 묻지 않게 */
img.ico { width: auto !important; height: 1.2em !important; max-width: 1.6em !important; border: 0 !important; background: none !important;
  border-radius: 0 !important; object-fit: contain !important; box-shadow: none !important; aspect-ratio: auto !important; }

/* ---------- 직업 엔딩 · 직업 도감 (ending.js) ---------- */
.ending-panel .ending-intro { font-size: 1.125rem; margin: calc(6 * var(--u)) 0 0; }
.ending-job { margin: calc(8 * var(--u)) auto; animation: pop .7s ease; }
.ending-job .ending-pic { width: calc(180 * var(--u)); height: calc(180 * var(--u)); object-fit: contain; font-size: calc(120 * var(--u)); line-height: 1; display: inline-block; }
.ending-panel h2 { font-size: 1.75rem; margin: calc(4 * var(--u)) 0; }
.ending-line { font-size: 1.0625rem; }
.ending-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(6 * var(--u)) calc(12 * var(--u)); margin: calc(8 * var(--u)) 0; font-size: 0.9375rem; }
.ending-screen.genius .result-panel { border-color: var(--gold); box-shadow: 0 0 calc(30 * var(--u)) rgba(232, 179, 58, .7); }
.ending-screen.genius .lv-up { color: #b8860b; }
.job-grid .dex-card b { font-family: inherit; font-size: 0.9375rem; text-align: center; }
.job-grid .dex-card small { text-align: center; }
.job-grid .dex-card.genius { border-color: #b8860b; background: #fff8dc; }
.map-node.hidden-stage.current { filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(232, 179, 58, .9)); }

/* ---------- 엔딩 연출 (ending.js) ---------- */
.ending-screen { max-width: calc(620 * var(--u)); margin: 0 auto; padding: calc(12 * var(--u)) 0; text-align: center; position: relative; max-height: 100dvh; overflow-y: auto; }
.ending-screen .ending-panel { position: relative; overflow: hidden; }
.ending-screen .step { opacity: 0; transform: translateY(calc(16 * var(--u))) scale(.9); transition: opacity .6s ease, transform .6s cubic-bezier(.2, 1.4, .4, 1); }
.ending-screen .step.on { opacity: 1; transform: none; }
.ending-screen .ending-name.step.on { animation: thud .5s ease; }
@keyframes thud { 0% { transform: scale(1.8); opacity: 0; } 70% { transform: scale(.95); } 100% { transform: scale(1); opacity: 1; } }
.ending-intro { font-size: 1.25rem; margin: calc(6 * var(--u)) 0; }
.ending-intro.on { animation: heartbeat .52s ease-in-out 4; }
@keyframes heartbeat { 50% { transform: scale(1.08); } }
.ending-flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 50; }
.ending-flash.on { animation: flash 1s ease-out; }
@keyframes flash { 0% { opacity: .95; } 100% { opacity: 0; } }
.ending-skip { position: absolute; top: calc(10 * var(--u)); right: calc(10 * var(--u)); }
.ending-congrats { font-size: 1.25rem; font-weight: bold; color: var(--teal); margin: calc(6 * var(--u)) 0; }

/* 직업 장면: 2컷을 번갈아 보여 주고 천천히 다가간다 */
.job-scene { position: relative; width: 100%; max-width: calc(340 * var(--u)); aspect-ratio: 4 / 3; margin: 0 auto; border-radius: calc(16 * var(--u)); overflow: hidden; border: calc(4 * var(--u)) solid var(--gold); background: #fff7e6; }
.job-scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: kenburns 9s ease-in-out infinite alternate; }
.job-scene img.f2 { animation: kenburns 9s ease-in-out infinite alternate, frameswap 1.8s steps(1) infinite; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08) translateY(-2%); } }
@keyframes frameswap { 0% { opacity: 0; } 50% { opacity: 1; } }
.job-scene.no-art { aspect-ratio: auto; border: 0; background: none; }
.job-scene::after { content: '✦ ✧ ✦'; position: absolute; top: 6%; right: 8%; color: #fff; text-shadow: 0 0 calc(8 * var(--u)) var(--gold); font-size: 1.25rem; animation: twinkle 1.4s ease-in-out infinite; }
.job-scene.no-art::after { display: none; }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.8); } }
.ending-screen.genius .job-scene { border-color: #b8860b; box-shadow: 0 0 calc(30 * var(--u)) rgba(232, 179, 58, .8); }

/* 보스들의 축하 */
.cheer-row { display: flex; justify-content: center; align-items: flex-end; gap: calc(4 * var(--u)); margin: calc(10 * var(--u)) 0 0; min-height: calc(96 * var(--u)); }
.cheer { position: relative; width: calc(92 * var(--u)); opacity: 0; transform: translateY(calc(60 * var(--u))); }
.cheer-row.on .cheer { animation: cheerUp .6s cubic-bezier(.2, 1.4, .4, 1) forwards, cheerHop .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .15s), calc(.6s + var(--i) * .15s); }
@keyframes cheerUp { to { opacity: 1; transform: none; } }
@keyframes cheerHop { from { transform: none; } to { transform: translateY(calc(-8 * var(--u))) rotate(-3deg); } }
.cheer img { width: 100%; height: calc(90 * var(--u)); object-fit: contain; }
.cheer-row.on .cheer, .cheer-wrap.on .cheer { animation: cheerUp .6s cubic-bezier(.2, 1.4, .4, 1) forwards, cheerHop .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * .15s), calc(.6s + var(--i) * .15s); }
.cheer.talk img { transform: scale(1.18); filter: drop-shadow(0 0 calc(8 * var(--u)) rgba(232, 179, 58, .9)); transition: transform .3s; }
.cheer img { transition: transform .3s; }
.cheer-line { min-height: calc(30 * var(--u)); margin-top: calc(4 * var(--u)); background: #fff; border: calc(2 * var(--u)) solid var(--gold); border-radius: calc(12 * var(--u)); padding: calc(5 * var(--u)) calc(10 * var(--u)); font-size: 0.9375rem; display: inline-block; }
.cheer-line.pop { animation: pop .35s ease; }
.cheer-line:empty { display: none; }
.job-scene.no-art img { position: static; animation: none; }

/* 색종이 */
.ending-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.ending-screen.party .ending-confetti { background-image:
  radial-gradient(circle, #e8b33a 0 3px, transparent 4px), radial-gradient(circle, #1f7a7a 0 3px, transparent 4px),
  radial-gradient(circle, #e05a5a 0 3px, transparent 4px), radial-gradient(circle, #9a6bd8 0 3px, transparent 4px);
  background-size: 90px 90px, 130px 130px, 110px 110px, 150px 150px; background-position: 0 0, 40px 60px, 70px 20px, 20px 90px;
  animation: confetti 3s linear infinite; }
@keyframes confetti { from { background-position: 0 -150px, 40px -90px, 70px -130px, 20px -60px; } to { background-position: 30px 100vh, 0 100vh, 100px 100vh, 50px 100vh; } }

/* 도감 카드 크게 보기 */
.zoom-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(40, 25, 10, .55); display: flex; align-items: center; justify-content: center; padding: calc(16 * var(--u)); cursor: pointer; animation: fadeIn .2s ease; }
.zoom-overlay.out { animation: fadeOut .2s ease forwards; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }
.zoom-card { background: #fff7e6; border: calc(4 * var(--u)) solid var(--gold); border-radius: calc(20 * var(--u)); padding: calc(16 * var(--u)); width: min(92vw, calc(520 * var(--u))); text-align: center; display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); animation: zoomIn .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes zoomIn { from { transform: scale(.4); opacity: 0; } }
.zoom-card b { font-size: 1.5rem; }
.zoom-card b.en { font-family: var(--font-en); }
.zoom-card p { margin: 0; font-size: 1.0625rem; }
.zoom-card .zoom-pic { width: calc(260 * var(--u)); height: calc(260 * var(--u)); object-fit: contain; font-size: calc(160 * var(--u)); line-height: 1; }
.zoom-card .job-scene { max-width: 100%; }
.ending-screen .ending-win { margin: calc(2 * var(--u)) 0; }
.ending-screen .lv-up { margin-bottom: 0; }
.zoom-card.genius { border-color: #b8860b; box-shadow: 0 0 calc(30 * var(--u)) rgba(232, 179, 58, .8); }
.zoom-hint { color: var(--ink-soft); font-size: 0.75rem; }
.job-grid .dex-card { cursor: pointer; }
.job-thumb { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(8 * var(--u)); }
button.dex-card { font: inherit; color: inherit; }

/* ---------- 상점 세트 · 방 테마 · 펫 · 옷장 (5-11) ---------- */
.shop-tabs { justify-content: center; }
.shop-set { margin: calc(16 * var(--u)) 0 calc(8 * var(--u)); font-size: 1.25rem; background: rgba(255, 247, 230, .92); width: fit-content; padding: calc(4 * var(--u)) calc(14 * var(--u)); border-radius: calc(12 * var(--u)); }
.shop-set small { font-size: 0.875rem; color: var(--ink-soft); margin-left: calc(6 * var(--u)); }
.shop-set.locked { color: var(--ink-soft); }
.shop-item.locked { background: #e9dfcd; border-style: dashed; border-color: #b49a74; }
.shop-pic.shadow img { filter: brightness(0) opacity(.3); }
.shop-pic.shadow .emoji { filter: grayscale(1) brightness(.2) opacity(.3); }
.lock-tag { font-size: 0.8125rem; color: var(--brown); font-weight: bold; }
.shop-img.theme { max-width: calc(140 * var(--u)); border-radius: calc(10 * var(--u)); border: calc(2 * var(--u)) solid #c9a978; }

.room-pet { position: absolute; left: 53%; bottom: 14%; width: 11%; transform: translateX(-50%); z-index: 5; border: none; background: none; padding: 0; cursor: pointer; animation: bob 2.4s ease-in-out infinite; }
.room-pet img { width: 100%; display: block; filter: drop-shadow(0 calc(5 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, .25)); }

.pet-home { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); margin: calc(6 * var(--u)) 0 calc(12 * var(--u)); }
.pet-big { width: calc(220 * var(--u)); max-width: 60vw; }
.pet-big img { width: 100%; display: block; filter: drop-shadow(0 calc(8 * var(--u)) calc(8 * var(--u)) rgba(0, 0, 0, .3)); }
.pet-big.hop { animation: hop .5s ease; }
.pet-big.grow { margin: 0 auto calc(12 * var(--u)); animation: pop .8s ease; filter: drop-shadow(0 0 calc(24 * var(--u)) rgba(255, 220, 120, .9)); }
@keyframes hop { 40% { transform: translateY(calc(-24 * var(--u))) scale(1.05); } }
.pet-bubble { background: var(--paper); border: calc(3 * var(--u)) solid var(--brown); border-radius: calc(18 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); font-size: 1.125rem; min-height: calc(40 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u)); }
.pet-say { border: none; background: none; font: inherit; cursor: pointer; display: flex; gap: calc(6 * var(--u)); align-items: baseline; flex-wrap: wrap; justify-content: center; }
.pet-bubble small, .pet-say small { color: var(--ink-soft); }
.aff-row { display: flex; gap: calc(10 * var(--u)); align-items: center; margin: calc(10 * var(--u)) 0; }
.bar.aff { position: relative; overflow: visible; }
.bar.aff > div { background: linear-gradient(90deg, #f7a6c4, #e45f8f); }
.bar.aff i { position: absolute; top: calc(-5 * var(--u)); bottom: calc(-5 * var(--u)); width: calc(3 * var(--u)); background: var(--brown); border-radius: calc(2 * var(--u)); }
.btn-pic { height: 1.4em; vertical-align: middle; }
.pet-switch { display: flex; gap: calc(8 * var(--u)); align-items: center; flex-wrap: wrap; justify-content: center; margin-top: calc(14 * var(--u)); }
.pet-chip { background: var(--paper-2); border: calc(3 * var(--u)) solid transparent; border-radius: calc(14 * var(--u)); padding: calc(4 * var(--u)); cursor: pointer; display: flex; flex-direction: column; align-items: center; width: calc(76 * var(--u)); }
.pet-chip.on { border-color: var(--gold); background: #fff1c9; }
.pet-chip img { width: 100%; }
.pet-empty { text-align: center; }
.pet-row { display: flex; justify-content: center; gap: calc(10 * var(--u)); }
.pet-row img { width: calc(110 * var(--u)); }
.pet-cheer { position: absolute; right: calc(-30 * var(--u)); bottom: calc(-20 * var(--u)); width: calc(130 * var(--u)); border: none; background: none; padding: 0; cursor: pointer; animation: pop .6s ease .3s both; }
.pet-cheer img { width: 100%; display: block; animation: bob 2.4s ease-in-out infinite; }
.pet-cheer .pet-bubble.small { position: absolute; bottom: 92%; right: 30%; white-space: nowrap; font-size: 0.9375rem; flex-direction: column; gap: 0; padding: calc(4 * var(--u)) calc(10 * var(--u)); min-height: 0; }
@media (max-width: 640px) { .pet-cheer { right: 0; width: calc(100 * var(--u)); } }

.wear-stage { position: relative; width: 100%; height: 100%; }
.wear-stage.roomy { transform: scale(.88) translateY(6%); }
.wear-stage .who { width: 100%; height: 100%; object-fit: cover; display: block; }
.portrait-frame img.wear-pic { position: absolute; height: auto; object-fit: contain; transform: translate(-50%, -50%); pointer-events: none; filter: drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) rgba(0, 0, 0, .35)); }
.portrait-frame img.wear-pic.from-top { transform: translate(-50%, 0); }
.portrait-frame img.wear-pic.from-base { transform: translate(-50%, -100%); }
/* 날개는 몸 뒤에 있는 것처럼 가운데(몸)를 비운다 */
.portrait-frame img.wear-pic.behind { -webkit-mask-image: linear-gradient(90deg, #000 0 31%, transparent 37% 63%, #000 69%); mask-image: linear-gradient(90deg, #000 0 31%, transparent 37% 63%, #000 69%); }
.wardrobe { display: grid; grid-template-columns: calc(240 * var(--u)) 1fr; gap: calc(16 * var(--u)); align-items: start; }
.wardrobe-me { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.wardrobe-list .shop-set { margin-top: calc(4 * var(--u)); }
.wear-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(110 * var(--u)), 1fr)); gap: calc(8 * var(--u)); margin-bottom: calc(8 * var(--u)); }
.wear-card { background: var(--paper); border: calc(3 * var(--u)) solid #c9a978; border-radius: calc(14 * var(--u)); padding: calc(6 * var(--u)); cursor: pointer; display: flex; flex-direction: column; align-items: center; font: inherit; }
.wear-card.on { border-color: var(--gold); background: #fff1c9; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(232, 179, 58, .4); }
.wear-thumb { height: calc(64 * var(--u)); max-width: 100%; object-fit: contain; }
.wear-card small { color: var(--ink-soft); font-size: 0.8125rem; }
@media (max-width: 640px) { .wardrobe { grid-template-columns: 1fr; } .wardrobe-me { width: calc(220 * var(--u)); margin: 0 auto; } }