/* styles.css — 내가 주인공! 동화모험
   팔레트·컴포넌트 토큰 (설계서 §4, Claude Design 프로토타입 시각 스펙 계승)
   초등용: 자막 20px+, 버튼 큼직(≥44px), 한 화면 한 가지 일 */

@import url("tokens.css"); /* 교과 색 공용 토큰 — 이솝 테마와 공유 */

:root {
  --cream: #FFF6DC;
  --paper: #FFF9E6;
  --paper-soft: #F7EDD2;
  --paper-dim: #F2E9CF;
  --border: #E0C98F;
  --border-dash: #D8C79C;
  --ink: #4C3A1D;
  --ink-mid: #6B4E23;
  --ink-soft: #7A6640;  /* 대비 5.2:1 on paper — 4.5:1 미달(#8F7A50, 3.9:1) 접근성 보정 2026-08-03 */
  --ink-faint: #7A6A45;
  --ink-pale: #82704A;  /* 대비 4.6:1 on paper — 2.4:1(#B0A382)이던 잠금 안내가 읽히도록 */
  --wood1: #A9743F;
  --wood2: #8B5A2B;
  --wood-b: #6B4423;
  --wood-sh: #5A3A1E;
  --pink: #F27B9B;
  --pink-soft: #FDEDEE;
  --pink-b: var(--subj-art);
  --pink-d: #D95F7E;
  --rose: #9A4A50;
  --orange: #F49E4C;
  --gold: #FFC94D;
  --sun: #FFD166;
  --blue: #5FA8E0;
  --blue1: #6FB6F0;
  --blue2: #3D8FD6;
  --blue-b: #2D6FA8;
  --blue-sh: #235682;
  --blue-d: #2D5F8A;
  --blue-soft: #E3F1FB;
  --green: #7FB069;
  --green-soft: #E9F2DC;
  --green-b: #A8C97F;
  --green-d: #4F6B33;
  --lav: var(--subj-music);
  --lav-soft: #F1EBF9;
  --lav-d: #6B5590;
  /* 막 테마 (main.js가 story.js theme으로 교체) */
  --sky1: #bfe2ff;
  --sky2: #e8f3d6;
  --ground1: #9ccb8f;
  --ground2: #c3e0b3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--cream);
}

body {
  font-size: 16px; /* 명시 기준값 — 이솝(20px)과 달리 선언이 없어 브라우저 기본에 묵시 의존하던 것을 문서화(2026-08-03) */
  font-family: "Jua", "Gowun Dodum", "Malgun Gothic", sans-serif;
  color: var(--ink);
  user-select: none;
  /* 한글은 어절(띄어쓰기) 단위로만 끊는다 — keep-all이 단어 중간 끊김을 막고,
     pretty가 마지막 줄에 한 어절만 남는 고아 줄을 줄인다. 의미 덩어리가 유지돼야 아이가 읽는다.
     break-word는 최후의 수단(한 어절이 줄보다 길 때만) — 없으면 좁은 화면에서 넘쳐 잘린다. */
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
  line-height: 1.4;
}
/* 여러 문장을 줄 나눌 땐 <br> 대신 블록 <span> — <br>로 끊으면 text-wrap: balance가 안 먹어서
   "…맡으면 / 돼요."처럼 꼬리 어절만 떨어진다(2026-07-21 실측) */
.teacher-desc > span, .prep-note > span { display: block; }

/* 짧은 제목·안내는 줄 길이를 고르게 — "…맡으면 / 돼요."처럼 꼬리만 떨어지는 걸 막는다 */
h1, h2, .acts-title, .acts-sub, .act-card .card-title, .act-card .card-lesson, .act-card .card-motions,
.teacher-desc, #prep-prompt, #prep-hint, #play-prompt, #toast, .shelf-hint, .choice-option, .card-cta {
  text-wrap: balance;
}

input, textarea { user-select: text; }

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
}

:focus-visible {
  outline: 3px dashed var(--blue);
  outline-offset: 3px;
}

[hidden] { display: none !important; }

/* ── 애니메이션 ── */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes riseIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes riseInX { from { opacity: 0; transform: translate(-50%, 22px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.55); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes countPulse { 0% { transform: scale(1.35); opacity: .4; } 60% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes stampIn { 0% { opacity: 0; transform: rotate(-18deg) scale(2.2); } 100% { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes twinkle { 0%, 100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.18); filter: brightness(1.25); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes drift { from { transform: translateX(-16vw); } to { transform: translateX(116vw); } }

/* ── 무대 배경 (3D는 4단계 — 지금은 CSS 하늘/언덕) ── */
#stage {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 74%);
  overflow: hidden;
}
#stage::before {
  content: "";
  position: absolute;
  left: -12%;
  right: 30%;
  bottom: 0;
  height: 34%;
  background: var(--ground2);
  border-radius: 100% 100% 0 0 / 78% 92% 0 0;
}
#stage::after {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: 0;
  height: 24%;
  background: var(--ground1);
  border-radius: 46% 58% 0 0 / 42% 50% 0 0;
}
#stage .cloud {
  position: absolute;
  width: 110px;
  height: 34px;
  border-radius: 999px;
  background: rgba(255, 250, 240, .9);
  box-shadow: 28px -13px 0 4px rgba(255, 250, 240, .9), -26px -9px 0 0 rgba(255, 250, 240, .9);
  animation: drift 70s linear infinite;
}
#stage .cloud.c1 { top: 12%; animation-delay: -12s; }
#stage .cloud.c2 { top: 24%; scale: .72; animation-delay: -42s; animation-duration: 95s; }
#stage canvas { position: absolute; inset: 0; }
/* 3D 무대가 살아있으면 CSS 언덕·구름은 숨김 (폴백 전용) */
body.has-3d #stage::before,
body.has-3d #stage::after,
body.has-3d #stage .cloud { display: none; }

/* ── 화면 공통 ── */
.screen { position: fixed; inset: 0; }

/* ── 공통 버튼 ── */
.btn-wood {
  display: inline-block;
  color: #FFF3C9;
  letter-spacing: 2px;
  text-shadow: 0 2px 0 rgba(90, 58, 30, .5);
  background: linear-gradient(180deg, var(--wood1), var(--wood2));
  border: 4px solid var(--wood-b);
  border-radius: 16px;
  padding: 13px 34px;
  font-size: 24px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 5px 0 var(--wood-sh), 0 10px 16px rgba(90, 58, 30, .3);
  transition: transform .12s ease, filter .12s ease;
}
.btn-wood:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-wood:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 2px 0 var(--wood-sh); }
.btn-wood.xl { font-size: 30px; padding: 16px 44px; border-radius: 18px; }

.btn-blue {
  display: inline-block;
  color: #FFF3C9;
  text-shadow: 0 1px 0 rgba(35, 86, 130, .6);
  background: linear-gradient(180deg, var(--blue1), var(--blue2));
  border: 3px solid var(--blue-b);
  border-radius: 999px;
  padding: 11px 24px;
  font-size: 19px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--blue-sh);
  transition: transform .12s ease, filter .12s ease;
}
.btn-blue:hover { filter: brightness(1.07); }
.btn-blue:active { transform: translateY(2px); }

.btn-pill {
  display: inline-block;
  font-size: 17px;
  color: var(--ink-soft);
  background: var(--paper);
  border: 3px solid var(--border);
  border-radius: 999px;
  padding: 10px 22px;
  transition: background .12s ease;
}
.btn-pill:hover { background: #FDF3D9; }
.btn-pill.lav { color: var(--lav-d); background: var(--lav-soft); border-color: var(--lav); }
.btn-pill.lav:hover { background: #E7DDF4; }

/* ══ 타이틀 ══ */
#screen-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center; /* 낮은 창에서 시작 버튼 잘림 방지 — acts와 동일 */
  overflow-y: auto;
  gap: 22px;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 246, 220, 0) 34%, rgba(255, 243, 201, .6) 100%);
  animation: riseIn .5s ease both;
}
.title-float { display: flex; flex-direction: column; align-items: center; gap: 14px; animation: floaty 4s ease-in-out infinite; }
/* 타이틀 일러스트(images/brand/title-logo.webp)가 있으면 현판 대신 일러스트+텍스트 오버레이 */
.title-logo { position: relative; display: flex; align-items: center; justify-content: center; }
#title-logo-img {
  display: block;
  width: min(600px, 74vw);
  filter: drop-shadow(0 12px 26px rgba(90, 58, 30, .28));
}
body.has-title-logo .title-plaque {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%) rotate(-2deg);
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* 일러스트 위에서는 크림색 소제목이 안 보이므로 갈색+크림 테두리로 반전 */
body.has-title-logo .title-top {
  color: #A9743F;
  text-shadow:
    -2px 0 var(--cream), 2px 0 var(--cream), 0 -2px var(--cream), 0 2px var(--cream),
    2px 2px var(--cream), -2px -2px var(--cream), 2px -2px var(--cream), -2px 2px var(--cream),
    0 4px 0 rgba(90, 58, 30, .2);
}
.title-plaque {
  background: linear-gradient(180deg, var(--wood1), var(--wood2));
  border: 5px solid var(--wood-b);
  border-radius: 26px;
  padding: 20px 52px 26px;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .22), 0 8px 0 var(--wood-sh), 0 16px 30px rgba(90, 58, 30, .35);
  transform: rotate(-2deg);
  text-align: center;
}
.title-top { font-size: 30px; color: #FFE9B8; letter-spacing: 4px; text-shadow: 0 2px 0 rgba(90, 58, 30, .5); }
.title-word { display: flex; gap: 3px; font-size: 76px; line-height: 1.05; justify-content: center; }
.title-word span {
  text-shadow:
    -3px 0 var(--cream), 3px 0 var(--cream), 0 -3px var(--cream), 0 3px var(--cream),
    3px 3px var(--cream), -3px -3px var(--cream), 3px -3px var(--cream), -3px 3px var(--cream),
    0 7px 0 rgba(90, 58, 30, .45);
}
.title-word .c1 { color: var(--pink); }
.title-word .c2 { color: var(--orange); }
.title-word .c3 { color: var(--blue); }
.title-word .c4 { color: var(--green); }
.title-sub {
  background: var(--paper);
  border: 3px solid var(--border);
  border-radius: 999px;
  padding: 9px 28px;
  font-size: 20px;
  color: #7A5C2E;
  box-shadow: 0 4px 12px rgba(90, 58, 30, .15);
}
#team-input {
  font-family: inherit;
  font-size: 19px;
  color: var(--ink);
  text-align: center;
  width: 260px;
  padding: 12px 18px;
  border: 3px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 249, 230, .94);
  outline: none;
  box-shadow: 0 4px 10px rgba(90, 58, 30, .12);
}
#team-input:focus { border-color: var(--orange); }
.title-foot { font-size: 15px; color: var(--ink-soft); }

/* ══ 동화 선택 ══ */
#screen-acts {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* safe center + 스크롤: 폭은 넓고 높이가 낮은 창(720p 프로젝터·노트북)에서 하단
     .acts-bottom(교사 메뉴 진입점)이 화면 밖으로 잘려 닿을 수 없던 문제 — #screen-lines 패턴 이식 */
  justify-content: safe center;
  overflow-y: auto;
  gap: 20px;
  background: rgba(255, 243, 201, .72);
  backdrop-filter: blur(3px);
  animation: riseIn .4s ease both;
}
/* 교사 패널(우측 356px 오버레이)이 4열 그리드의 끝 열 카드 2장을 완전히 가리던 문제 —
   열려 있는 동안만 본문을 왼쪽 남은 폭의 중앙으로 민다 */
#screen-acts.panel-open { padding-right: 392px; } /* 패널 외곽 실측 359px + 여유 — 그리드 끝 열이 패널에 물리지 않게 */
.acts-title { font-size: 36px; color: #6B4E23; text-shadow: 0 2px 0 var(--paper); }
.acts-sub { font-size: 16px; color: var(--ink-soft); margin-top: -12px; }
#act-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 248px)); /* 4×2 고정 그리드 */
  gap: 14px 16px;
  justify-content: center;
  max-width: 1080px;
  padding: 6px;
}
.act-card {
  background: var(--paper);
  border: 4px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(90, 58, 30, .16);
  display: flex;
  flex-direction: column;
  text-align: left;
  animation: popIn .45s ease both;
  transition: transform .15s ease, box-shadow .15s ease;
}
/* 호버·키보드 포커스에 같은 강조 — 마우스 없이 고르는 아이도 어디를 짚었는지 보여야 한다 */
.act-card:hover, .act-card:focus-visible {
  transform: translateY(-6px) scale(1.02) rotate(-.4deg);
  box-shadow: 0 16px 30px rgba(90, 58, 30, .26), 0 0 0 3px var(--gold) inset;
  outline: none;
}
.act-card:hover .card-thumb, .act-card:focus-visible .card-thumb { transform: scale(1.06); }
.act-card .card-thumb { transition: transform .25s ease; }

/* ── 보상 예고 (게이미피케이션) ──
   아직 못 깬 편: 흑백 실루엣 + "완주하면!" → 호버하면 컬러로 살아나며 통통.
   깬 편: 컬러 보물 + 별 등급. 3★ 미만이면 재도전 칩이 따로 붙는다. */
.act-card .card-prize {
  position: absolute;
  right: 8px; bottom: 8px;
  display: flex; align-items: center; gap: 4px;
  background: var(--paper);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  box-shadow: 0 2px 8px rgba(60, 40, 15, .3);
  transition: transform .2s ease;
}
.act-card .prize-ico { width: 26px; height: 26px; object-fit: contain; }
/* 깨기 전엔 무엇인지 밝히지 않는다 — 도감의 잠긴 칸과 같은 "?"다.
   카드에서 보물을 미리 보여주면 개봉 세리머니가 김이 새고, 도감의 규칙과도 어긋난다(2026-07-21 사용자 지적) */
.act-card .card-prize.locked { border-style: dashed; border-color: var(--border-dash); background: rgba(255, 249, 230, .82); }
.act-card .prize-q {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: var(--ink-soft);
}
.act-card .card-prize.won { border-color: var(--gold); padding-right: 8px; }
.act-card .card-prize.won .prize-label { font-size: 12px; color: var(--orange); letter-spacing: .5px; }
.act-card:hover .card-prize, .act-card:focus-visible .card-prize { transform: scale(1.16) translateY(-2px); }

/* 호버 CTA — 그림 아래에서 떠오른다. 카드 전체가 버튼이라 평소엔 숨어 있어도 된다 */
.act-card .card-go {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 7px 0 8px;
  font-size: 15px; text-align: center;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(90, 58, 30, 0), rgba(90, 58, 30, .82) 45%);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.act-card:hover .card-go, .act-card:focus-visible .card-go { transform: translateY(0); opacity: 1; }
/* 오늘의 추천 — 한 장만 붙는다. 카드가 은은히 숨 쉬어 "여기부터"가 눈에 들어오게 */
/* 추천·진행중 표시는 주황 — 금색은 "완료" 전용(이솝 done과 의미 통일, 2026-08-03 디자인 점검) */
.act-card.pick { border-color: var(--orange); animation: pickPulse 2.4s ease-in-out infinite; }
@keyframes pickPulse {
  0%, 100% { box-shadow: 0 8px 18px rgba(90, 58, 30, .16), 0 0 0 0 rgba(244, 158, 76, .55); }
  50%      { box-shadow: 0 8px 18px rgba(90, 58, 30, .16), 0 0 0 8px rgba(244, 158, 76, 0); }
}
.act-card:hover.pick, .act-card:focus-visible.pick { animation: none; }
.act-card .card-pick {
  position: absolute;
  top: 8px; right: 8px;
  font-size: 12px; color: var(--wood-sh);
  background: var(--gold);
  border-radius: 999px;
  padding: 3px 10px;
  box-shadow: 0 2px 6px rgba(60, 40, 15, .25);
}
.act-card .card-retry {
  position: absolute;
  left: 8px; bottom: 8px;
  font-size: 12px; color: #8A6410;
  background: #FDF0D3;
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 2px 9px;
}

.act-card.t-locked { filter: grayscale(.6) opacity(.6); }
.act-card .card-head {
  /* 그림이 카드의 주인공 — 13vh(최대 124px)일 땐 일러스트가 얇은 띠라 확대해도 티가 안 났다 */
  height: clamp(104px, 21vh, 178px);
  position: relative;
  border-bottom: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.act-card .card-emoji { font-size: clamp(36px, 6.5vh, 58px); filter: drop-shadow(0 4px 6px rgba(90, 58, 30, .25)); }
.act-card .card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 난이도 — 제목 오른쪽 끝에 점 세 개. 그림 위 알약이던 것을 걷어냈다(2026-07-21) */
.act-card .card-titlerow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.act-card .card-title { flex: 1; }
.act-card .card-diff {
  flex: none;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1;
  cursor: help;
}
.card-diff.easy { color: var(--green); }
.card-diff.normal { color: var(--orange); }
.act-card .card-tlock {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-size: 13px;
  color: var(--paper);
  background: rgba(70, 52, 26, .78);
  border-radius: 999px;
  padding: 3px 12px;
}
.act-card .card-stamp {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  color: var(--pink-d);
  background: var(--pink-soft);
  border: 2px dashed var(--pink-b);
  border-radius: 999px;
  padding: 3px 12px;
  transform: rotate(5deg);
}
.act-card .card-body { padding: 10px 13px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.act-card .card-title { font-size: 22px; color: var(--ink); line-height: 1.2; }
.act-card .card-lesson { font-size: 13px; color: var(--ink-soft); }
/* 몸짓 칩 — 평소엔 앞 3개만, 호버하면 여섯 개가 다 펼쳐진다 */
.act-card .card-motions { display: flex; flex-wrap: wrap; gap: 4px; }
.act-card .m-chip {
  font-size: 12px; color: var(--ink-mid);
  background: var(--paper-soft);
  border: 1.5px solid var(--border-dash);
  border-radius: 999px;
  padding: 2px 8px;
}
/* 호버에서 여섯 개를 다 펼쳤더니 카드가 세로로 자라 줄 전체가 흔들렸다 —
   호버의 보상은 아래 "모험 시작 ▶"이 맡고, 칩은 항상 2개 + 개수로 고정한다 */
.act-card .m-chip.more { display: none; }
.act-card .m-rest { font-size: 12px; color: var(--ink-pale); align-self: center; }
.act-card .card-cta {
  margin-top: auto;
  text-align: center;
  font-size: 18px;
  color: #FFF3C9;
  background: linear-gradient(180deg, var(--wood1), var(--wood2));
  border: 3px solid var(--wood-b);
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25), 0 4px 0 var(--wood-sh);
  text-shadow: 0 2px 0 rgba(90, 58, 30, .5);
}
.acts-bottom { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; }
.acts-note { font-size: 15px; color: var(--ink-soft); }

/* 교사 메뉴 패널 */
#teacher-panel {
  position: absolute;
  right: 24px;
  top: 24px;
  width: 332px; /* 한 줄에 한글 17자쯤 — 300px에선 "한 / 번", "눌러 / 두면"처럼 의미 덩어리가 갈렸다 */
  background: var(--paper);
  border: 4px solid var(--lav);
  border-radius: 18px;
  padding: 16px 18px;
  box-shadow: 0 14px 30px rgba(60, 40, 15, .3);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: popIn .3s ease both;
  z-index: 20;
  max-height: calc(100vh - 48px); /* 항목이 늘어 화면보다 길어짐 — 패널 자체를 스크롤 (선택 방식·수업 기록도 닿게) */
  overflow-y: auto;
}
.teacher-head { display: flex; justify-content: space-between; align-items: center; }
.teacher-head span { font-size: 19px; color: var(--ink); }
.teacher-close {
  font-size: 15px;
  color: var(--ink-soft);
  background: var(--paper-soft);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 6px 12px;
  min-width: 44px;  /* 터치 타깃 44px */
  min-height: 44px;
}
.teacher-desc { font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.teacher-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 10px;
  padding: 8px 12px;
  width: 100%;
}
.teacher-row:hover { filter: brightness(.97); }
/* 개방 토글이 행 대부분을 차지하고, 오른쪽에 미리 받기 버튼이 붙는다 */
.teacher-row .t-toggle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 30px;
}
.t-get {
  flex: none;
  min-height: 44px; /* 터치 타깃 기준 44px (프로젝트 품질 기준) */
  padding: 0 14px;
  font-size: 13px;
  color: var(--ink-mid);
  background: var(--paper);
  border-radius: 999px;
  box-shadow: inset 0 0 0 2px rgba(107, 68, 35, .14);
  white-space: nowrap;
}
.t-get:hover { filter: brightness(.96); }
.t-get.busy { color: var(--ink-soft); cursor: progress; }
.t-get.done { color: var(--green-d); box-shadow: inset 0 0 0 2px rgba(79, 107, 51, .32); }
.t-get.part { color: var(--rose); box-shadow: inset 0 0 0 2px rgba(154, 74, 80, .3); }
.t-get[disabled] { opacity: .7; }
.teacher-row .t-title { font-size: 15px; color: var(--ink); }
.teacher-row .t-state {
  font-size: 12px;
  background: var(--paper);
  border-radius: 999px;
  padding: 2px 10px;
  box-shadow: inset 0 0 0 2px rgba(107, 68, 35, .12);
}

/* ══ 막 인트로 ══ */
#screen-intro {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(70, 52, 26, .35);
  animation: riseIn .4s ease both;
}
.intro-panel {
  background: var(--paper);
  border: 4px solid var(--border);
  border-radius: 26px;
  padding: 30px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 18px 40px rgba(60, 40, 15, .35);
  animation: popIn .45s ease both;
  max-width: 720px; /* 6역할 3열 그리드 폭 (2026-07-20 6인 확장) */
}
.intro-diff { font-size: 17px; color: var(--ink-soft); background: var(--paper-soft); border-radius: 999px; padding: 4px 18px; }
.intro-title { font-size: 42px; color: var(--ink); }
.intro-sub { font-size: 18px; color: var(--ink-soft); }
#role-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 100%; } /* 6역할 = 3×2 */
@media (max-width: 767px) { #role-grid { grid-template-columns: 1fr 1fr; } } /* 좁은 화면 = 2×3 */
.role-item { display: flex; align-items: center; gap: 12px; border-radius: 16px; padding: 10px 14px; }
.role-num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #6B4E23;
  box-shadow: inset 0 0 0 2px rgba(107, 68, 35, .25);
  flex-shrink: 0;
}
.role-texts { display: flex; flex-direction: column; }
.role-name { font-size: 20px; color: var(--ink); }
.role-motion { font-size: 14px; color: var(--ink-faint); }
.intro-btns { display: flex; gap: 12px; margin-top: 6px; }

/* ══ VN 대화 ══ */
#screen-dialogue { cursor: pointer; }
.vn-wrap {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  width: min(780px, 92%);
  animation: riseInX .35s ease both;
}
.vn-box {
  position: relative;
  background: rgba(255, 249, 230, .97);
  border: 4px solid var(--border);
  border-radius: 22px;
  padding: 26px 30px 20px;
  box-shadow: 0 14px 32px rgba(60, 40, 15, .3);
  min-height: 96px;
}
#speaker-pill {
  position: absolute;
  top: -20px;
  left: 22px;
  font-size: 19px;
  padding: 6px 22px;
  border-radius: 999px;
  border: 3px solid rgba(255, 249, 230, .9);
  box-shadow: 0 4px 10px rgba(60, 40, 15, .2);
}
#vn-text { font-size: 25px; line-height: 1.55; color: var(--ink); min-height: 62px; text-wrap: pretty; }
.vn-controls { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; }
#btn-replay {
  font-size: 16px;
  color: #7A5C2E;
  background: var(--paper-soft);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
}
#btn-replay:hover { background: #F2E4BE; }
#vn-next {
  font-size: 20px;
  color: #FFF3C9;
  background: linear-gradient(180deg, var(--blue1), var(--blue2));
  border: 3px solid var(--blue-b);
  border-radius: 999px;
  padding: 9px 26px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--blue-sh);
  text-shadow: 0 1px 0 rgba(35, 86, 130, .6);
  animation: blink 1.6s ease-in-out infinite;
}
.vn-foot {
  text-align: center;
  margin-top: 10px;
  font-size: 14px;
  color: rgba(90, 68, 38, .85);
  text-shadow: 0 1px 0 rgba(255, 249, 230, .8);
}

/* ══ 선택 ══ */
#screen-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: rgba(70, 52, 26, .38);
  animation: riseIn .4s ease both;
}
.choice-kicker { font-size: 21px; color: #FFE9B8; letter-spacing: 2px; text-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
#choice-question {
  font-size: 36px;
  color: var(--paper);
  text-align: center;
  max-width: 760px;
  line-height: 1.35;
  text-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
#choice-options { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.choice-option {
  position: relative; /* 몸으로 고르기 게이지(::after)의 기준 */
  overflow: hidden;
  width: 250px;
  background: var(--paper);
  border: 4px solid var(--border);
  border-radius: 22px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 12px 26px rgba(40, 26, 8, .3);
  transition: transform .25s ease, opacity .25s ease, border-color .25s ease, background .25s ease;
  animation: popIn .4s ease both;
}
/* 몸으로 고르기 — 머무는 쪽에 차오르는 게이지 + 강조 */
.choice-option::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 9px;
  width: calc(var(--dwell, 0) * 100%);
  background: var(--orange);
  border-radius: 0 6px 6px 0;
}
.choice-option.hovering { transform: translateY(-6px) scale(1.05); border-color: var(--orange); }
.choice-option:hover { transform: translateY(-6px) scale(1.03); }
.choice-option.chosen { background: #FFEFC2; border-color: var(--orange); transform: scale(1.05); }
.choice-option.dimmed { opacity: .45; }
.choice-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 249, 230, .85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px; /* 26px 추상 글리프 → 큼직한 픽토그램 (저학년 가독, 2026-08-03) */
  color: var(--rose);
}
.choice-label { font-size: 24px; color: var(--ink); text-align: center; line-height: 1.3; }
#choice-note {
  font-size: 16px;
  color: rgba(255, 243, 201, .92);
  background: rgba(70, 52, 26, .5);
  border-radius: 999px;
  padding: 8px 22px;
}
/* 몸으로 고르기 미니 웹캠 (교사 옵션) — 플레이 화면 .play-cam과 같은 자리·톤 */
#choice-cam-wrap {
  position: absolute;
  left: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
#choice-cam-wrap .cam-mini {
  position: relative;
  width: 240px;
  height: 180px;
  background: #2B2B33;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--green), 0 8px 18px rgba(0, 0, 0, .3);
  overflow: hidden;
}
#choice-cam { display: block; width: 100%; height: 100%; }
#choice-cam-msg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 15px;
  color: #FFF3C9;
  text-shadow: 0 2px 5px rgba(0, 0, 0, .55);
}
#choice-cam-msg:empty { display: none; }
#choice-cam-note {
  font-size: 14px;
  color: rgba(255, 243, 201, .92);
  background: rgba(70, 52, 26, .5);
  border-radius: 999px;
  padding: 4px 14px;
}

/* ══ 모션 준비 ══ */
#screen-prep {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(70, 52, 26, .42);
  animation: riseIn .35s ease both;
}
.prep-panel {
  background: var(--paper);
  border: 4px solid var(--border);
  border-radius: 26px;
  padding: 28px 38px;
  display: flex;
  gap: 30px;
  align-items: center;
  box-shadow: 0 18px 40px rgba(40, 26, 8, .4);
  animation: popIn .4s ease both;
}
.prep-left { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 340px; }
.prep-kicker { font-size: 16px; color: var(--rose); background: var(--pink-soft); border: 2px solid var(--pink-b); border-radius: 999px; padding: 4px 16px; }
#prep-who { font-size: 33px; color: var(--ink); text-align: center; line-height: 1.25; }
#prep-prompt { font-size: 21px; color: #6B4E23; text-align: center; line-height: 1.4; }
#prep-hint {
  font-size: 16px;
  color: var(--ink-faint);
  background: var(--paper-soft);
  border-radius: 12px;
  padding: 9px 16px;
  text-align: center;
  line-height: 1.5;
}
#prep-count { font-size: 74px; color: var(--orange); text-shadow: 0 3px 0 rgba(90, 58, 30, .2); animation: countPulse 1s ease both infinite; }
.prep-right { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.demo-box {
  position: relative;
  width: 224px;
  height: 150px;
  background: linear-gradient(180deg, #e8f3fb, var(--green-soft));
  border: 3px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}
#prep-demo { display: block; width: 100%; height: 100%; }
.demo-label {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  font-size: 13px;
  color: var(--green-d);
  background: rgba(255, 249, 230, .92);
  border: 2px solid var(--green-b);
  border-radius: 999px;
  padding: 2px 12px;
  white-space: nowrap;
}
.cam-box {
  width: 224px;
  height: 164px;
  background: #2B2B33;
  border: 3px dashed #8F8FA0;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
#prep-cam { position: absolute; inset: 0; width: 100%; height: 100%; }
.cam-msg {
  position: relative;
  z-index: 1;
  font-size: 14px;
  color: #E8E8F0;
  background: rgba(43, 43, 51, .72);
  border-radius: 999px;
  padding: 5px 14px;
  text-align: center;
}
.cam-msg:empty { display: none; }
.prep-note { font-size: 13px; color: var(--ink-faint); max-width: 230px; text-align: center; line-height: 1.5; }

/* ══ 모션 플레이 ══ */
.play-top {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: riseInX .35s ease both;
}
#play-prompt {
  font-size: 24px;
  color: var(--ink);
  background: rgba(255, 249, 230, .96);
  border: 3px solid var(--border);
  border-radius: 999px;
  padding: 10px 32px;
  box-shadow: 0 6px 16px rgba(60, 40, 15, .22);
}
.play-score { display: flex; gap: 6px; align-items: center; background: rgba(70, 52, 26, .45); border-radius: 999px; padding: 6px 18px; }
.play-score .star { font-size: 24px; color: rgba(255, 249, 230, .45); text-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.play-score .star.on { color: var(--gold); }
#play-reps { font-size: 19px; color: #FFF3C9; margin-left: 8px; }
#btn-skip {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 15px;
  color: #7A5C2E;
  background: rgba(255, 249, 230, .9);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 10px 18px;
}
#btn-skip:hover { background: #FDF3D9; }
.play-cam {
  position: absolute;
  left: 22px;
  bottom: 66px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.play-cam .cam-mini {
  width: 240px;
  height: 180px;
  background: #2B2B33;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--green), 0 8px 18px rgba(0, 0, 0, .3);
  overflow: hidden;
}
#play-cam { display: block; width: 100%; height: 100%; }
#play-quality {
  align-self: flex-start;
  font-size: 14px;
  color: var(--green-d);
  background: var(--green-soft);
  border: 2px solid var(--green-b);
  border-radius: 999px;
  padding: 4px 14px;
}
#play-quality.bad { color: var(--rose); background: var(--pink-soft); border-color: var(--pink-b); }
#play-mode-tag {
  align-self: flex-start;
  font-size: 14px;
  color: var(--green-d);
  background: var(--green-soft);
  border: 2px solid var(--green-b);
  border-radius: 999px;
  padding: 4px 14px;
}
.play-center {
  position: absolute;
  left: 50%;
  bottom: 58px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#progress-track {
  width: 300px;
  height: 16px;
  background: rgba(70, 52, 26, .4);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .3);
}
#progress-fill {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, var(--sun), var(--orange), var(--pink));
  border-radius: 999px;
}
#btn-action {
  width: 134px;
  height: 134px;
  border-radius: 50%;
  font-size: 32px;
  color: #FFF3C9;
  letter-spacing: 3px;
  background: radial-gradient(circle at 50% 32%, var(--gold), var(--orange) 70%);
  border: 5px solid #C97B2E;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .35), 0 7px 0 #A85F1E, 0 14px 24px rgba(60, 40, 15, .35);
  text-shadow: 0 2px 0 rgba(140, 80, 20, .5);
  transition: transform .1s ease, filter .1s ease;
}
#btn-action:hover { filter: brightness(1.07); }
#btn-action:active { transform: translateY(5px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .35), 0 2px 0 #A85F1E; }
.play-note {
  font-size: 15px;
  color: rgba(90, 68, 38, .9);
  background: rgba(255, 249, 230, .8);
  border-radius: 999px;
  padding: 4px 16px;
}
#timeout-track { position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: rgba(70, 52, 26, .35); }
#timeout-fill { width: 100%; height: 100%; background: linear-gradient(90deg, var(--green-b), var(--green)); }

/* ══ 막 완료 ══ */
#screen-complete {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(70, 52, 26, .35);
  animation: riseIn .4s ease both;
}
.complete-panel {
  background: var(--paper);
  border: 4px solid var(--border);
  border-radius: 28px;
  padding: 34px 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 18px 44px rgba(40, 26, 8, .4);
  animation: popIn .5s ease both;
  /* (2026-07-20 실플레이) 자리 이동 안내 1줄이 늘면서 720p 전체화면(교실 프로젝터·TV)에서
     아래 버튼 2개가 잘릴 수 있다. html{overflow:hidden}+.screen{position:fixed}라 페이지 스크롤이
     불가능하므로 패널 자체를 스크롤 가능하게 한다(.prep-panel·#act-grid와 동일 문법). */
  max-height: 92vh;
  overflow-y: auto;
}
.complete-stars { display: flex; gap: 6px; align-items: flex-end; }
.complete-stars span { color: var(--gold); text-shadow: 0 3px 0 rgba(140, 80, 20, .25); animation: twinkle 1.4s ease-in-out infinite; }
.complete-stars .s1 { font-size: 46px; }
.complete-stars .s2 { font-size: 58px; animation-delay: .25s; }
.complete-stars .s3 { font-size: 46px; animation-delay: .5s; }
.complete-stamp {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  border: 5px dashed var(--pink);
  background: var(--pink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: stampIn .55s ease both;
}
.complete-stamp span { font-size: 26px; color: var(--pink-d); line-height: 1.15; text-align: center; }
#complete-title { font-size: 34px; color: var(--ink); margin-top: 6px; }
#complete-lesson { font-size: 20px; color: var(--lav-d); background: var(--lav-soft); border-radius: 999px; padding: 7px 24px; }
/* 자리 이동 안내 (2026-07-20 실플레이) — 교훈 알약과 구분되게 초록톤 */
.complete-seat {
  font-size: 19px;
  color: var(--green-d);
  background: var(--green-soft);
  border-radius: 18px;
  padding: 9px 22px;
  max-width: 430px;
  text-align: center;
  line-height: 1.35;
}
.complete-btns { display: flex; gap: 12px; margin-top: 10px; }
.complete-btns .btn-wood { font-size: 21px; padding: 11px 26px; border-radius: 15px; letter-spacing: 0; }

/* ══ 엔딩 ══ */
#screen-ending {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center; /* 낮은 창에서 하단 버튼 잘림 방지 — acts와 동일 */
  overflow-y: auto;
  gap: 20px;
  background: rgba(255, 243, 201, .8);
  backdrop-filter: blur(3px);
  animation: riseIn .45s ease both;
}
.ending-sub { font-size: 22px; color: var(--ink-soft); }
.ending-title { font-size: 40px; color: var(--ink); }
#ending-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 210px)); /* 4×2 고정 그리드 */
  gap: 14px;
  justify-content: center;
  max-width: 1040px;
}
.ending-card {
  background: var(--paper);
  border: 4px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  box-shadow: 0 8px 18px rgba(90, 58, 30, .15);
  animation: popIn .45s ease both;
}
.ending-card .e-dot { width: 20px; height: 20px; border-radius: 50%; }
.ending-card .e-title { font-size: 20px; color: var(--ink); text-align: center; line-height: 1.25; }
.ending-card .e-lesson { font-size: 13px; color: var(--ink-soft); text-align: center; }
.ending-card .e-done {
  font-size: 15px;
  color: var(--pink-d);
  border: 2px dashed var(--pink-b);
  border-radius: 999px;
  padding: 3px 14px;
  transform: rotate(-4deg);
}
.ending-card .e-todo { font-size: 14px; color: #9A8B68; background: var(--paper-dim); border-radius: 999px; padding: 3px 14px; }
.ending-note {
  font-size: 17px;
  color: var(--lav-d);
  background: var(--lav-soft);
  border: 2px solid var(--lav);
  border-radius: 999px;
  padding: 8px 26px;
}

/* ══ HUD · 토스트 ══ */
#hud { position: fixed; top: 18px; left: 20px; display: flex; gap: 8px; align-items: center; z-index: 30; }
#hud-act {
  font-size: 16px;
  color: #6B4E23;
  background: rgba(255, 249, 230, .92);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  box-shadow: 0 4px 10px rgba(60, 40, 15, .15);
}
#hud-team { font-size: 15px; color: var(--blue-d); background: var(--blue-soft); border: 2px solid var(--subj-lang); border-radius: 999px; padding: 7px 16px; }
#btn-exit {
  font-size: 14px;
  color: var(--ink-soft);
  background: rgba(255, 249, 230, .8);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
}
#btn-exit:hover { background: #FDF3D9; }
/* 소리 토글 — 로비 하단 알약 · 플레이 HUD 아이콘. 교사가 한 번에 찾을 수 있게 두 곳 다 같은 자리 계열 */
.btn-sound.off { color: var(--rose); background: #FBE9EC; border-color: var(--pink-b); }
.hud-sound {
  font-size: 16px; line-height: 1;
  min-width: 44px; min-height: 44px;
  color: var(--ink-soft);
  background: rgba(255, 249, 230, .8);
  border: 2px solid var(--border);
  border-radius: 999px;
}
.hud-sound:hover { background: #FDF3D9; }
/* 섹션 소제목 — 본문·행과 같은 크기라 통짜로 읽히던 것을 위계로 분리 (2026-08-03 디자인 점검)
   (서브 헤더는 <div class="teacher-head teacher-sub">텍스트</div> — span 없음) */
.teacher-sub {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 2px solid var(--paper-dim);
  font-size: 14px;
  letter-spacing: 1.5px;
  color: var(--ink-soft);
}
.teacher-desc { margin-bottom: 2px; }
#toast {
  position: fixed;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  font-size: 17px;
  color: var(--paper);
  background: rgba(70, 52, 26, .85);
  border-radius: 999px;
  padding: 10px 26px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  animation: riseInX .3s ease both;
  z-index: 50;
  max-width: 84vw;
  text-align: center;
}

/* 좁은 화면(태블릿 등) 보정 */
@media (max-width: 1080px) {
  #act-grid { grid-template-columns: repeat(2, minmax(0, 248px)); max-height: 60vh; overflow-y: auto; overflow-anchor: none; }
  #ending-grid { grid-template-columns: repeat(2, minmax(0, 210px)); max-height: 46vh; overflow-y: auto; }
}
@media (max-width: 900px) {
  .title-word { font-size: 56px; }
  .prep-panel { flex-direction: column; gap: 16px; padding: 22px 26px; max-height: 92vh; overflow-y: auto; }
  .intro-panel { padding: 22px 24px; }
  .intro-title { font-size: 34px; }
}

/* ══════════ 보물 도감 (게이미피케이션 · 2026-07-16) ══════════ */
/* ── 선반 스트립: 로비 상단 + complete 착지 도크 공용 ── */
/* 로비용 한 줄 형태 — 보물 8칸은 도감을 열었을 때만 크게 본다 */
.treasure-shelf.compact {
  flex-direction: row; flex-wrap: wrap; justify-content: center;
  gap: 10px; padding: 8px 16px;
  max-width: 880px; /* 미니 슬롯 8칸이 들어오며 620px에선 두 줄로 감김 — 한 줄 유지(2026-08-03) */
}
.treasure-shelf.compact .shelf-track { flex: 1 1 160px; max-width: 240px; }
/* 미니 슬롯 8칸 — 게이지 대신, 한 줄 높이 안에서 "8개 모으기"를 그림으로 */
.treasure-shelf.compact .shelf-mini { display: flex; gap: 4px; align-items: center; }
.m-slot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px dashed var(--border-dash);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-style: normal;
  color: var(--ink-pale);
  background: rgba(255, 249, 230, .7);
}
.m-slot.owned { border: 2px solid var(--gold); background: var(--paper); }
.m-ico { width: 17px; height: 17px; object-fit: contain; }
.treasure-shelf.compact .shelf-count { font-size: 15px; }
.treasure-shelf.compact .shelf-goal { font-size: 13px; }

.treasure-shelf {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #FBEFCF, var(--paper-soft));
  border: 3px solid var(--border); border-radius: 18px;
  padding: 10px 18px 12px; margin: 0 auto; max-width: 720px;
  box-shadow: 0 6px 16px rgba(90, 58, 30, .14), inset 0 2px 0 rgba(255, 255, 255, .5);
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.treasure-shelf:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(90, 58, 30, .2); }
.treasure-shelf:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.treasure-shelf.dock { cursor: default; margin-top: 4px; }
.treasure-shelf.dock:hover { transform: none; box-shadow: 0 6px 16px rgba(90, 58, 30, .14), inset 0 2px 0 rgba(255, 255, 255, .5); }
.shelf-count { font-size: 16px; color: var(--ink-mid); letter-spacing: .2px; }
.shelf-row { display: flex; gap: 8px; }
.shelf-hint { font-size: 13px; color: var(--ink-soft); }
/* 진행 게이지 — 몇 개 모았는지보다 '얼마나 남았는지'가 다음 한 편을 부른다 */
.shelf-track {
  width: 100%; max-width: 460px; height: 10px;
  background: rgba(107, 68, 35, .13);
  border-radius: 999px; overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(60, 40, 15, .2);
}
.shelf-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--orange));
  border-radius: 999px;
  transition: width .5s cubic-bezier(.2, .9, .3, 1);
}
.shelf-goal { font-size: 13px; color: var(--ink-mid); }
/* 아직 하나도 못 모았을 때 — 빈 막대만 두면 시작 시점이 가장 밋밋해진다 */
.shelf-track.empty {
  border: 2px dashed var(--border-dash);
  background: rgba(255, 249, 230, .6);
  animation: emptyPulse 2.6s ease-in-out infinite;
}
@keyframes emptyPulse {
  0%, 100% { border-color: var(--border-dash); }
  50%      { border-color: var(--gold); }
}

/* ── 보물 슬롯 ── */
.t-slot {
  position: relative; width: clamp(42px, 6vw, 58px); aspect-ratio: 1;
  border-radius: 12px; background: rgba(255, 255, 255, .55);
  border: 2px solid var(--border-dash);
  display: flex; align-items: center; justify-content: center;
}
.t-ico { width: 84%; height: 84%; object-fit: contain; display: block; }
.t-slot.locked { background: rgba(120, 100, 60, .08); border-style: dashed; }
.t-slot.locked .t-ico { filter: grayscale(1) brightness(1.05) opacity(.3); }
.t-lock {
  position: absolute; font-size: 15px; font-weight: 800; color: var(--ink-soft);
  background: rgba(255, 255, 255, .78); border-radius: 50%;
  width: 21px; height: 21px; display: flex; align-items: center; justify-content: center;
}
.t-slot.owned { background: #FFFDF6; border-color: var(--gold); animation: popIn .4s ease both; }
.t-ring { position: absolute; inset: -3px; border-radius: 14px; pointer-events: none; }
.tier-bronze .t-ring { box-shadow: 0 0 0 2.5px #C88A4A, 0 0 8px rgba(200, 138, 74, .5); }
.tier-silver .t-ring { box-shadow: 0 0 0 2.5px #A9B2BA, 0 0 9px rgba(169, 178, 186, .6); }
.tier-gold .t-ring { box-shadow: 0 0 0 2.5px var(--gold), 0 0 12px rgba(255, 201, 77, .85); animation: goldShimmer 1.9s ease-in-out infinite; }
.t-slot.just { animation: justLand .6s ease; z-index: 2; }
.t-ico.pop { animation: iconPop .5s ease; }
@keyframes goldShimmer { 0%, 100% { box-shadow: 0 0 0 2.5px var(--gold), 0 0 8px rgba(255, 201, 77, .55); } 50% { box-shadow: 0 0 0 2.5px #FFE39A, 0 0 17px rgba(255, 201, 77, 1); } }
@keyframes justLand { 0% { transform: scale(1); } 35% { transform: scale(1.4); } 100% { transform: scale(1); } }
@keyframes iconPop { 0% { transform: scale(1); } 40% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ── 엔딩 = 보물 도감 카드 ── */
.d-card .t-slot { width: clamp(74px, 12vw, 98px); border-radius: 16px; }
.d-card.owned { cursor: pointer; }
.d-card.locked { opacity: .95; }
.d-name { font-size: 15px; color: var(--ink-mid); }
.d-name.locked { color: var(--ink-pale); }
.d-badge { font-size: 13px; color: var(--rose); background: var(--pink-soft); border: 1.5px solid var(--pink-b); border-radius: 999px; padding: 2px 12px; }
.ending-btns { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; }

/* ── 교사 초기화 버튼 ── */
/* 8편 일괄 받기 — 교실 노트북 첫 세팅용. 파괴적이지 않으니 초기화 버튼과 톤을 구분한다 */
.btn-get-all {
  margin-top: 12px; width: 100%; font-size: 14px; color: var(--blue-d);
  background: var(--blue-soft); border: 2px solid #BFDDF3; border-radius: 12px; padding: 10px 16px;
  transition: background .15s ease;
}
.btn-get-all:hover { background: #D6E9F7; }
.btn-get-all[disabled] { opacity: .75; cursor: progress; }

.btn-reset {
  margin-top: 12px; width: 100%; font-size: 14px; color: var(--rose);
  background: #FBE9EC; border: 2px solid var(--pink-b); border-radius: 12px; padding: 10px 16px;
  transition: background .15s ease;
}
.btn-reset:hover { background: #F7DBE1; }
.btn-reset.armed { color: #fff; background: var(--pink-d); border-color: var(--pink-d); animation: blink 1s ease-in-out infinite; }

/* ── 톡! 개봉 세리머니 오버레이 ── */
.treasure-open {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: radial-gradient(circle at 50% 42%, rgba(255, 245, 214, .45), rgba(58, 40, 15, .58));
  backdrop-filter: blur(2px);
}
.to-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, #fff, transparent 46%); opacity: 0; pointer-events: none; }
.to-flash.go { animation: flashGo .5s ease; }
@keyframes flashGo { 0% { opacity: 0; } 12% { opacity: .92; } 100% { opacity: 0; } }
.to-stage { position: relative; width: min(46vw, 300px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.to-stage.shake-s { animation: stageShake .24s ease; }
@keyframes stageShake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-5px, 3px); } 50% { transform: translate(4px, -4px); } 75% { transform: translate(-3px, 3px); } }
.to-bundle { font-size: clamp(80px, 16vw, 150px); filter: drop-shadow(0 8px 14px rgba(60, 40, 15, .4)); }
.to-bundle.wobble { animation: bundleWobble .56s ease-in-out; }
.to-bundle.hide { display: none; }
@keyframes bundleWobble { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-9deg) scale(1.05); } 45% { transform: rotate(8deg) scale(1.09); } 70% { transform: rotate(-6deg) scale(1.13); } }
.to-ico { position: absolute; width: 78%; height: 78%; object-fit: contain; opacity: 0; filter: drop-shadow(0 10px 18px rgba(60, 40, 15, .4)); }
.to-ico.burst { animation: burstIn .55s cubic-bezier(.2, 1.4, .5, 1) forwards; }
@keyframes burstIn { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.35); } 100% { opacity: 1; transform: scale(1); } }
.to-ico.fly { transition: transform .55s cubic-bezier(.55, -0.2, .35, 1), opacity .55s ease; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.24); opacity: 0; }
.treasure-open.tier-gold .to-ico { filter: drop-shadow(0 0 18px rgba(255, 201, 77, .9)) drop-shadow(0 10px 18px rgba(60, 40, 15, .4)); }
.treasure-open.tier-silver .to-ico { filter: drop-shadow(0 0 14px rgba(169, 178, 186, .85)) drop-shadow(0 10px 18px rgba(60, 40, 15, .4)); }
.to-name {
  font-size: clamp(28px, 5vw, 46px); color: #FFF3C9; opacity: 0;
  text-shadow: 0 3px 0 rgba(90, 58, 30, .6), 0 0 18px rgba(255, 201, 77, .7);
  transform: translateY(8px) scale(.8);
}
.to-name.show { animation: namePop .4s cubic-bezier(.2, 1.5, .5, 1) forwards; }
@keyframes namePop { to { opacity: 1; transform: translateY(0) scale(1); } }
.to-confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti {
  position: absolute; left: 50%; top: 46%; width: 11px; height: 14px; border-radius: 2px;
  transform: translate(-50%, -50%); opacity: 0; animation: confettiFly .95s ease-out forwards;
}
@keyframes confettiFly {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cx, 0)), calc(-50% + var(--cy, 0))) rotate(300deg); }
}

/* ── 8/8 완성 증서 ── */
.treasure-cert {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(58, 40, 15, .6); backdrop-filter: blur(3px);
}
.cert-card {
  position: relative; background: var(--paper); border: 5px solid var(--gold); border-radius: 26px;
  padding: 30px 40px; display: flex; flex-direction: column; align-items: center; gap: 14px;
  box-shadow: 0 22px 50px rgba(40, 26, 8, .5); max-width: 90vw; animation: popIn .5s ease both;
}
.cert-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 26px; }
.cert-title { font-size: 32px; color: var(--ink); }
.cert-row { display: grid; grid-template-columns: repeat(4, 62px); gap: 12px; justify-content: center; } /* 4×2 균형 그리드 */
.cert-ico { width: 62px; height: 62px; object-fit: contain; border-radius: 12px; padding: 3px; background: #FFFDF6; }
.cert-ico.tier-gold { box-shadow: 0 0 0 2.5px var(--gold), 0 0 12px rgba(255, 201, 77, .8); }
.cert-ico.tier-silver { box-shadow: 0 0 0 2.5px #A9B2BA; }
.cert-ico.tier-bronze { box-shadow: 0 0 0 2.5px #C88A4A; }
.cert-sub { font-size: 20px; color: var(--rose); }
.cert-foot { font-size: 14px; color: var(--ink-soft); }

/* ── 접근성: 모션 최소화 요청 시 모든 애니메이션 정지 ──
   기존엔 보물 세리머니만 덮어 floaty·blink·pickPulse 등 무한 루프가 그대로 돌았다(2026-08-03 점검).
   duration .01ms 방식이라 fill:both 애니메이션은 최종 상태로 즉시 안착한다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .to-name.show { opacity: 1; transform: none; }
  .to-ico.burst { opacity: 1; } /* 리뷰 W2: 애니메이션 정지 시에도 보물 아이콘은 보여야 함 */
}

/* ══ 수업 전 점검 (교사) ══ */
#preflight {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(60, 40, 15, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pf-card {
  width: min(540px, 92vw);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--paper);
  border: 4px solid var(--lav);
  border-radius: 18px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 14px 30px rgba(60, 40, 15, .3);
}
.pf-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--paper-soft);
  border-radius: 12px;
  padding: 10px 12px;
}
.pf-row.ok { background: var(--green-soft); }
.pf-row.warn { background: var(--pink-soft); }
.pf-ico { font-size: 20px; width: 26px; text-align: center; }
.pf-body { flex: 1; }
.pf-name { font-size: 16px; color: var(--ink); }
.pf-detail { font-size: 14px; color: var(--ink-soft); margin-top: 2px; }
.pf-cam-wrap { align-self: center; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 3px var(--green); }
#pf-cam { display: block; }
.pf-note { font-size: 13px; color: var(--ink-soft); }

/* 엔딩 카드 발표 근거 — 우리 조의 선택·최고 기록 (2026-08-03) */
.e-choice {
  font-size: 13px;
  color: var(--blue-d);
  background: var(--blue-soft);
  border-radius: 10px;
  padding: 4px 10px;
  word-break: keep-all;
}
.e-best { font-size: 13px; color: var(--ink-soft); }

/* 대기 조원 응원 큐 — 준비 화면, 참여 톤(초록) */
#prep-cheer {
  font-size: 16px;
  color: var(--green-d);
  background: var(--green-soft);
  border: 2px solid var(--green-b);
  border-radius: 14px;
  padding: 8px 16px;
  max-width: 380px;
}

/* TTS 다시 듣기 미니 버튼 — 선택지·모션 준비 화면 (음성엔 눈에 보이는 다시듣기 컨트롤) */
.btn-replay-mini {
  font-size: 15px;
  color: var(--ink-mid);
  background: var(--paper);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 8px 18px;
  min-height: 44px;
}
.btn-replay-mini:hover { background: var(--paper-soft); }

/* ── 위치 통일(이솝 패턴): 소리=우상단 고정 원형, 뒤로=좌하단 고정 — 로비·여정 (2026-08-03)
   플레이 화면(HUD·건너뛰기)과 엔딩(CTA 3버튼 묶음)은 의도된 배치라 그대로 둔다 ── */
.corner-sound {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 15; /* 교사 패널(20)이 열리면 패널이 위 */
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  border-radius: 50%;
}
.btn-back-fixed {
  position: fixed;
  left: 18px;
  bottom: 16px;
  z-index: 15;
}

/* ── 터치 피드백: 태블릿(hover 없음)에서 탭 반응 (2026-08-03 디자인 점검) ── */
.act-card:active { transform: translateY(-2px) scale(.99); }
.btn-pill:active { transform: translateY(1px); filter: brightness(.96); }
@media (hover: none) {
  .act-card:hover { transform: none; } /* 탭 후 hover 상태 눌러붙음 방지 */
}

/* ── 좁은 화면 보정 ── */
@media (max-width: 1080px) {
  .treasure-shelf { max-width: 94vw; }
  .shelf-row { flex-wrap: wrap; justify-content: center; }
}

/* 모션 플레이 화면 — 좁은 화면에서 웹캠 미니뷰가 중앙 진행바·버튼과 겹치지 않게 */
@media (max-width: 600px) {
  .play-cam { transform: scale(.6); transform-origin: bottom left; left: 10px; bottom: 54px; }
  #progress-track { width: min(300px, 80vw); }
  #btn-skip { padding: 8px 12px; font-size: 13px; }
}

/* ══ 활동 여정 — 통합 수업 모드 S1 (docs/PLATFORM-MIGRATION.md) ══ */
#screen-journey {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 243, 201, .72);
  backdrop-filter: blur(3px);
  animation: riseIn .4s ease both;
}
.journey-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(760px, 94vw);
  max-height: 94vh;
  overflow-y: auto;
  padding: 12px 20px;
}
.journey-kicker { font-size: 17px; color: var(--lav-d); background: var(--lav-soft); border-radius: 999px; padding: 4px 18px; }
.journey-title { font-size: 40px; color: var(--ink); margin: 0; text-shadow: 0 2px 0 var(--paper); text-wrap: balance; }
.journey-mode { font-size: 16px; color: var(--ink-soft); margin-top: -4px; text-wrap: balance; }
#journey-steps { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 6px; }
.j-step {
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  background: var(--paper);
  border: 3px solid var(--border);
  border-radius: 18px;
  padding: 12px 18px;
  box-shadow: 0 5px 12px rgba(90, 58, 30, .14);
  transition: transform .12s ease, filter .12s ease;
}
.j-step:hover { transform: translateY(-2px); filter: brightness(1.03); }
.j-step.current { border-color: var(--orange); background: #FFFBEA; box-shadow: 0 0 0 3px rgba(244, 158, 76, .35), 0 8px 16px rgba(90, 58, 30, .18); } /* 진행중=주황, 금색은 완료 전용 */
.j-step.done { opacity: .74; background: var(--green-soft); border-color: var(--green-b); }
.j-num {
  flex: 0 0 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-soft);
  border: 2px solid var(--border);
  border-radius: 50%;
  font-size: 19px;
  color: var(--ink-mid);
}
.j-step.done .j-num { background: var(--green); border-color: var(--green-d); color: #fff; }
.j-ico { font-size: 30px; }
.j-texts { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.j-name { font-size: 22px; color: var(--ink); }
.j-meta { font-size: 14px; color: var(--ink-soft); }
.j-badge { font-size: 14px; color: var(--blue-d); }
.j-go {
  font-size: 18px;
  color: #FFF3C9;
  background: linear-gradient(180deg, var(--wood1), var(--wood2));
  border: 3px solid var(--wood-b);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 3px 0 var(--wood-sh);
  white-space: nowrap;
}
.journey-bottom { display: flex; gap: 12px; margin-top: 8px; }

/* 마무리 패널 — 오늘의 모험 완성 */
.journey-closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--paper);
  border: 4px solid var(--gold);
  border-radius: 22px;
  padding: 20px 26px;
  box-shadow: 0 14px 30px rgba(60, 40, 15, .25);
  animation: popIn .4s ease both;
}
.jc-stamp { font-size: 52px; }
.jc-title { font-size: 34px; color: var(--ink); }
.jc-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.jc-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  background: var(--paper-soft);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 8px 16px;
  font-size: 18px;
  color: var(--ink-mid);
}
.jc-row.on { background: var(--green-soft); border-color: var(--green-b); }
.jc-row b { color: var(--ink-pale); white-space: nowrap; }
.jc-row.on b { color: var(--green-d); }
.jc-note, .jc-cue { font-size: 17px; color: var(--ink-soft); text-wrap: balance; }
.jc-btns { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }

/* ══ 활동 안내 화면 (전용 화면 전 단계 — 교사 진행) ══ */
#screen-activity {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 243, 201, .72);
  backdrop-filter: blur(3px);
  animation: riseIn .4s ease both;
}
.activity-panel {
  background: var(--paper);
  border: 4px solid var(--border);
  border-radius: 26px;
  padding: 24px 34px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(60, 40, 15, .35);
  animation: popIn .45s ease both;
  width: min(820px, 94vw);
  max-height: 92vh;
  overflow-y: auto;
}
.activity-kicker { font-size: 16px; color: var(--ink-soft); }
.activity-title { font-size: 34px; color: var(--ink); margin: 0; text-wrap: balance; }
.activity-cue { font-size: 19px; color: var(--green-d); background: var(--green-soft); border-radius: 12px; padding: 8px 14px; text-wrap: balance; }
.activity-links { font-size: 17px; color: var(--blue-d); }
.activity-body { display: flex; flex-direction: column; gap: 12px; }
.ab-note { font-size: 19px; color: var(--ink-mid); text-wrap: balance; }
.ab-part {
  align-self: flex-start;
  font-size: 17px;
  color: var(--lav-d);
  background: var(--lav-soft);
  border-radius: 999px;
  padding: 3px 14px;
  margin-bottom: 6px;
}
.ab-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ab-role { display: flex; align-items: center; gap: 10px; background: var(--paper-soft); border-radius: 12px; padding: 10px 14px; font-size: 20px; }
.ab-role b {
  flex: 0 0 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sun);
  border-radius: 50%;
  font-size: 16px;
  color: var(--ink-mid);
}
.ab-lyrics { display: flex; flex-direction: column; background: var(--lav-soft); border-radius: 14px; padding: 12px 18px; }
.ab-line { font-size: 24px; color: var(--ink); line-height: 1.6; }
.ab-rhythm { display: flex; flex-direction: column; background: var(--paper-soft); border-radius: 14px; padding: 12px 18px; }
.ab-beats { display: flex; gap: 10px; }
.ab-beat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--paper);
  border: 3px solid var(--gold);
  border-radius: 14px;
  padding: 10px 6px;
  font-size: 16px;
  color: var(--ink-mid);
}
.ab-beat b { font-size: 30px; }
.ab-beat.rest { border-color: var(--border); opacity: .65; }
.ab-art, .ab-lang { display: flex; flex-direction: column; background: var(--paper-soft); border-radius: 14px; padding: 12px 18px; }
.ab-steps { margin: 4px 0 8px 24px; font-size: 19px; color: var(--ink); }
.ab-steps li { margin: 3px 0; }
.ab-mats { font-size: 16px; color: var(--ink-soft); }
.ab-scenes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 4px; }
.ab-scene { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 2px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 19px; }
.ab-scene b { font-size: 26px; }
.ab-emos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.ab-emo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--paper);
  border: 2px solid var(--pink-b);
  border-radius: 14px;
  padding: 8px 18px;
  font-size: 16px;
  color: var(--ink-mid);
}
.ab-emo b { font-size: 28px; }
.ab-q { font-size: 19px; color: var(--ink); margin: 3px 0; text-wrap: balance; }
.ab-coming { font-size: 15px; color: var(--ink-pale); text-wrap: balance; }
.activity-btns { display: flex; justify-content: space-between; gap: 12px; margin-top: 6px; }

/* 좁은 화면 보정 — 태블릿·폰 */
@media (max-width: 700px) {
  .ab-roles { grid-template-columns: repeat(2, 1fr); }
  .ab-scenes { grid-template-columns: 1fr; }
  .j-go { display: none; } /* 폭이 좁으면 카드 자체가 버튼이라는 걸 hover CTA 없이도 안다 */
  .activity-btns { flex-direction: column; align-items: stretch; }
}

/* ══ 노래 화면 (S2 — 가사 하이라이트) ══
   색 방향(2026-07-22 피드백): 갈색 대신 영역 포인트색이 주인공 — 음악=라벤더·하늘 */
#screen-music {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(241, 235, 249, .78); /* 라벤더 소프트 톤 */
  backdrop-filter: blur(3px);
  animation: riseIn .4s ease both;
}
.music-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FFFDF4;
  border: 4px solid var(--lav);
  border-radius: 26px;
  padding: 22px 30px;
  box-shadow: 0 18px 40px rgba(107, 85, 144, .3);
  animation: popIn .45s ease both;
  width: min(820px, 94vw);
  max-height: 93vh;
}
.music-tracks { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mt-label { font-size: 15px; color: var(--lav-d); }
.mt-btn {
  font-size: 17px;
  color: var(--blue-d);
  background: var(--blue-soft);
  border: 3px solid var(--blue1);
  border-radius: 999px;
  padding: 8px 18px;
  transition: transform .12s ease, filter .12s ease;
}
.mt-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.mt-btn.on { color: #fff; background: linear-gradient(180deg, var(--blue1), var(--blue2)); }
.mt-btn.off { opacity: .45; }
.mt-hint { font-size: 14px; color: var(--ink-pale); }
#music-lyrics { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 4px 2px; }
.ly-part { border-radius: 16px; padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; }
.ly-part.p0 { background: var(--blue-soft); }
.ly-part.p1 { background: #FFF3CE; } /* 후렴 = 햇살 */
.ly-part.p2 { background: var(--green-soft); }
.ly-name { align-self: flex-start; font-size: 15px; color: #fff; background: var(--lav-d); border-radius: 999px; padding: 2px 12px; margin-bottom: 4px; }
.ly-line {
  font-size: 26px;
  color: var(--ink);
  line-height: 1.55;
  border-radius: 12px;
  padding: 3px 12px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease;
}
.ly-line.sung { opacity: .45; }
.ly-line.now {
  background: linear-gradient(90deg, #FFE28A, #FFD1DC);
  box-shadow: 0 0 0 3px var(--gold), 0 6px 14px rgba(255, 201, 77, .35);
  transform: scale(1.03);
  font-size: 29px;
}
.music-foot { font-size: 14px; color: var(--ink-pale); text-align: center; }
.btn-sing {
  font-size: 24px;
  color: #fff;
  letter-spacing: 1px;
  text-shadow: 0 1px 0 rgba(107, 85, 144, .5);
  background: linear-gradient(180deg, #B9A3E3, var(--subj-music-deep));
  border: 3px solid #6B5590;
  border-radius: 18px;
  padding: 12px 34px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 5px 0 #55437A, 0 10px 16px rgba(107, 85, 144, .3);
  transition: transform .12s ease, filter .12s ease;
}
.btn-sing:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-sing:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 2px 0 #55437A; }
/* 완료 버튼 — 나무(갈색) 대신 햇살 글로우 */
.btn-glow {
  font-size: 21px;
  color: #7A4E00;
  background: linear-gradient(180deg, #FFE28A, #FFC94D);
  border: 3px solid #E8A924;
  border-radius: 18px;
  padding: 12px 26px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 5px 0 #C98F14, 0 10px 16px rgba(232, 169, 36, .3);
  transition: transform .12s ease, filter .12s ease;
}
.btn-glow:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-glow:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 2px 0 #C98F14; }

/* ══ 리듬 화면 (S2 — 4박 메트로놈) — 리듬=햇살·산호 ══ */
#screen-rhythm {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 243, 201, .78);
  backdrop-filter: blur(3px);
  animation: riseIn .4s ease both;
}
.rhythm-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FFFDF4;
  border: 4px solid var(--gold);
  border-radius: 26px;
  padding: 22px 30px;
  box-shadow: 0 18px 40px rgba(201, 143, 20, .3);
  animation: popIn .45s ease both;
  width: min(820px, 94vw);
  max-height: 93vh;
  overflow-y: auto;
}
#rhythm-patterns { display: flex; gap: 10px; flex-wrap: wrap; }
.rp-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--paper-soft);
  border: 3px solid var(--border);
  border-radius: 14px;
  padding: 8px 16px;
  font-size: 15px;
  color: var(--ink-soft);
  transition: transform .12s ease;
}
.rp-chip b { font-size: 18px; color: var(--ink); }
.rp-chip:hover { transform: translateY(-2px); }
.rp-chip.on { background: #FFF3CE; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255, 201, 77, .3); }
#rhythm-beats { display: flex; gap: 14px; justify-content: center; padding: 6px 0; }
@keyframes beatPop { 0% { transform: scale(1.16); } 100% { transform: scale(1); } }
.rb-tile {
  flex: 1;
  max-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  border-radius: 20px;
  padding: 22px 8px 14px;
  font-size: 19px;
  color: var(--ink-mid);
  border: 4px solid transparent;
  transition: filter .1s ease;
}
.rb-tile b { font-size: 52px; }
.rb-tile.t-clap { background: #FFF3CE; border-color: #FFD166; }
.rb-tile.t-knee { background: var(--blue-soft); border-color: var(--subj-lang); }
.rb-tile.t-shoulder { background: var(--pink-soft); border-color: var(--subj-art); }
.rb-tile.t-rest { background: var(--paper-dim); border-color: var(--border-dash); opacity: .6; }
.rb-tile.now {
  animation: beatPop .18s ease both;
  filter: brightness(1.08);
  box-shadow: 0 0 0 4px var(--orange), 0 10px 20px rgba(244, 158, 76, .35);
}
.rhythm-controls { display: flex; gap: 12px; justify-content: center; align-items: center; }
.btn-beat {
  font-size: 26px;
  color: #fff;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 rgba(178, 82, 30, .5);
  background: linear-gradient(180deg, #FFB067, #F4834C);
  border: 3px solid #D96A35;
  border-radius: 20px;
  padding: 13px 44px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 5px 0 #B2521E, 0 10px 16px rgba(217, 106, 53, .35);
  transition: transform .12s ease, filter .12s ease;
}
.btn-beat:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-beat:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4), 0 2px 0 #B2521E; }
#btn-rhythm-slow.on { background: var(--green-soft); border-color: var(--green-b); color: var(--green-d); }

@media (max-width: 700px) {
  #rhythm-beats { flex-wrap: wrap; }
  .rb-tile { min-width: 42%; }
  .ly-line { font-size: 22px; }
  .ly-line.now { font-size: 24px; }
}

/* ══ 국어 화면 (S3) — 국어=하늘 ══ */
#screen-language {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(227, 241, 251, .8);
  backdrop-filter: blur(3px);
  animation: riseIn .4s ease both;
}
.lang-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FFFDF4;
  border: 4px solid var(--blue1);
  border-radius: 26px;
  padding: 22px 30px;
  box-shadow: 0 18px 40px rgba(45, 95, 138, .3);
  animation: popIn .45s ease both;
  width: min(860px, 94vw);
  max-height: 93vh;
  overflow-y: auto;
}
.lang-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.lt-chip {
  font-size: 17px;
  color: var(--blue-d);
  background: var(--blue-soft);
  border: 3px solid transparent;
  border-radius: 999px;
  padding: 8px 18px;
}
.lt-chip.on { background: linear-gradient(180deg, var(--blue1), var(--blue2)); color: #fff; border-color: var(--blue-b); }
.lang-body { display: flex; flex-direction: column; gap: 12px; }
.lg-note { font-size: 18px; color: var(--ink-mid); text-wrap: balance; }
.sq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sq-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--paper);
  border: 3px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 20px;
  transition: transform .12s ease;
}
.sq-card:hover { transform: translateY(-2px); }
.sq-card.picked { background: var(--blue-soft); border-color: var(--blue1); }
.sq-ico { font-size: 34px; }
.sq-text { flex: 1; color: var(--ink); }
.sq-num {
  position: absolute;
  top: -12px;
  right: -8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sun);
  border: 3px solid #E8A924;
  border-radius: 50%;
  font-size: 18px;
  color: #7A4E00;
}
.sq-num:empty { display: none; }
.sq-foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.sq-win { font-size: 21px; color: var(--green-d); }
.sq-retry { font-size: 19px; color: var(--rose); }
.fe-q { font-size: 24px; color: var(--ink); background: var(--paper-soft); border-radius: 14px; padding: 14px 18px; text-wrap: balance; }
.fe-emos { display: flex; gap: 12px; flex-wrap: wrap; }
.fe-emo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: var(--paper);
  border: 3px solid var(--pink-b);
  border-radius: 16px;
  padding: 10px 22px;
  font-size: 17px;
  color: var(--ink-mid);
  transition: transform .12s ease;
}
.fe-emo b { font-size: 32px; }
.fe-emo:hover { transform: translateY(-2px); }
.fe-emo.on { background: var(--pink-soft); border-color: var(--pink); box-shadow: 0 0 0 3px rgba(242, 123, 155, .3); }
.fe-talk { font-size: 20px; color: var(--blue-d); background: var(--blue-soft); border-radius: 12px; padding: 10px 16px; text-wrap: balance; }
.tk-card {
  font-size: 26px;
  color: var(--ink);
  background: linear-gradient(135deg, #FFF3CE, var(--pink-soft));
  border: 3px solid var(--gold);
  border-radius: 18px;
  padding: 26px 24px;
  text-align: center;
  text-wrap: balance;
}
.btn-sky {
  align-self: flex-start;
  font-size: 20px;
  color: #fff;
  background: linear-gradient(180deg, var(--blue1), var(--blue2));
  border: 3px solid var(--blue-b);
  border-radius: 16px;
  padding: 10px 26px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 4px 0 var(--blue-sh);
  transition: transform .12s ease, filter .12s ease;
}
.btn-sky:hover { transform: translateY(-2px); filter: brightness(1.05); }

/* ══ 미술 화면 (S3) — 미술=복숭아 ══ */
#screen-art {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(253, 237, 238, .8);
  backdrop-filter: blur(3px);
  animation: riseIn .4s ease both;
}
.art-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #FFFDF4;
  border: 4px solid var(--pink-b);
  border-radius: 26px;
  padding: 22px 30px;
  box-shadow: 0 18px 40px rgba(217, 95, 126, .28);
  animation: popIn .45s ease both;
  width: min(880px, 94vw);
  max-height: 93vh;
  overflow-y: auto;
}
.art-body { display: flex; flex-direction: column; gap: 12px; }
.art-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.art-card { background: var(--paper-soft); border-radius: 16px; padding: 12px 18px; }
.art-head { font-size: 20px; color: var(--ink); }
.art-where { font-size: 15px; color: var(--rose); margin: 2px 0 6px; } /* --pink-d는 3.1:1 미달 — 배지와 같은 rose로 */
.art-steps { margin: 0 0 6px 22px; font-size: 17px; color: var(--ink); }
.art-steps li { margin: 2px 0; }
.art-mats { font-size: 14px; color: var(--ink-soft); }
.art-previews { display: flex; gap: 14px; flex-wrap: wrap; }
.art-pv { margin: 0; display: flex; flex-direction: column; gap: 4px; }
.art-pv img { width: 200px; border-radius: 12px; border: 3px solid var(--border); background: #fff; }
.art-pv figcaption { font-size: 14px; color: var(--ink-soft); text-align: center; }
.art-print { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-top: 2px dashed var(--border-dash); padding-top: 10px; }
.art-print-label { font-size: 15px; color: var(--ink-soft); }

@media (max-width: 700px) {
  .sq-grid, .art-grid { grid-template-columns: 1fr; }
  .art-pv img { width: 150px; }
}

/* 사건 순서 카드 — 장면 일러스트 (S3 후속, 파일 없으면 텍스트 카드 폴백) */
.sq-card.has-img { flex-direction: column; align-items: stretch; gap: 8px; }
.sq-img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: contain; border-radius: 10px; background: #FFFBEF; }
.sq-row { display: flex; align-items: center; gap: 10px; justify-content: center; }
@media (max-width: 700px) { .sq-img { aspect-ratio: 16 / 9; } }

/* ── 교사 수업 기록 (§4-8, 2026-07-23) — 조별 여정 완료 누적 표시 ── */
#teacher-record { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 10px; }
.record-empty { font-size: 13px; color: #8a7d5e; padding: 6px 2px; }
.record-team { background: rgba(255, 255, 255, .55); border: 1.5px solid rgba(160, 140, 90, .35); border-radius: 10px; padding: 8px 10px; }
.record-team-name { font-family: "Jua", sans-serif; font-size: 14px; color: #6b5590; margin-bottom: 4px; }
.record-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; padding: 3px 0; border-top: 1px dashed rgba(160, 140, 90, .3); }
.record-row:first-of-type { border-top: 0; }
.record-title { flex: 0 1 auto; color: #4c3a1d; white-space: nowrap; }
.record-chips { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.record-chip { width: 22px; height: 22px; border-radius: 6px; background: #e9f2dc; border: 1px solid #a8c97f; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; cursor: default; }
.record-meta { font-size: 12px; color: #8a7d5e; white-space: nowrap; }

/* ══ 프로그램 라인 선택 런처 (이솝 S1) — 영역 포인트색이 주인공: 전래=하늘, 이솝=초록 ══ */
#screen-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* safe center — 모바일 세로에서 카드 2장이 넘치면 위 정렬로 전환, 잘림 없이 스크롤 (§ .prep-panel과 동일 취지) */
  justify-content: safe center;
  overflow-y: auto;
  gap: 22px;
  padding: 24px;
}
.lines-brand { font-size: 15px; letter-spacing: 1px; color: #FFF3C9; background: linear-gradient(180deg, var(--wood1), var(--wood2)); border-radius: 999px; padding: 6px 18px; text-shadow: 0 1px 0 rgba(90, 58, 30, .5); }
.lines-title { font-size: clamp(26px, 4.4vw, 40px); color: var(--ink); text-shadow: 0 2px 0 rgba(255, 255, 255, .7); }
.lines-sub { font-size: 17px; color: var(--ink-mid); }
#line-grid { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; max-width: 900px; }
.line-card {
  width: min(380px, 92vw);
  display: flex;
  flex-direction: column; /* 두 카드 내부 단 정렬 고정 — 본문 줄수가 달라도 높이·하단선 동일 */
  text-align: left;
  background: var(--paper);
  border: 4px solid var(--border);
  border-radius: 26px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 0 rgba(140, 100, 40, .16);
  transition: transform .14s ease, box-shadow .14s ease;
}
.line-card:hover, .line-card:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 0 rgba(140, 100, 40, .2); }
.line-card:active { transform: translateY(0); }
.line-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.line-folktale .line-img { background: #dceafb; }
.line-aesop .line-img { background: #dff0cf; }
.line-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 18px; }
.line-grades { align-self: flex-start; font-size: 14px; color: #fff; border-radius: 999px; padding: 3px 12px; }
.line-folktale .line-grades { background: #2F6E9E; } /* 흰 글자 대비 5.46:1 (기준 4.5) */
.line-aesop .line-grades { background: #4A6E2A; } /* 흰 글자 대비 5.91:1 */
.line-name { font-size: 24px; color: var(--ink); }
.line-tag { font-size: 15px; color: var(--ink-mid); word-break: keep-all; min-height: 2.9em; }
.line-go { margin-top: auto; font-size: 16px; color: var(--ink-mid); }
.line-soon { margin-top: auto; font-size: 15px; color: #4A6E2A; background: #eef6e2; border: 2px dashed #a8c97f; border-radius: 12px; padding: 5px 12px; align-self: flex-start; }
.title-lines { position: fixed; left: 18px; bottom: 16px; font-size: 15px; padding: 7px 16px; }