:root {
  --bg: #fff8e1;
  --card: #ffffff;
  --ink: #3a2e1f;
  --muted: #8a7a66;
  --yellow: #ffd84d;
  --orange: #ff9f43;
  --green: #2ecc71;
  --blue: #4aa3ff;
  --pink: #ff6b9a;
  --shadow: 0 4px 0 rgba(0, 0, 0, .12);
  --emoji: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { margin: 0; height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

#app {
  max-width: 520px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

h1, h2, p { margin: 0; }
h1 { font-size: 1.7rem; text-align: center; }
h2 { font-size: 1.3rem; }
.muted { color: var(--muted); font-size: .95rem; }
.center { text-align: center; }
.emoji { font-family: var(--emoji); line-height: 1; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  cursor: pointer;
  touch-action: manipulation;
}
button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
button:disabled { opacity: .45; }

/* 상단 바: 뒤로가기 + 제목 + 진행 표시 */
.topbar { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.topbar .back { width: 52px; height: 52px; font-size: 1.6rem; flex: 0 0 auto; }
.topbar .title { flex: 1; font-weight: 700; font-size: 1.15rem; }
.topbar .count { font-weight: 700; color: var(--muted); }

/* 아이 선택 */
.profile-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.profile-btn { padding: 18px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 1.2rem; font-weight: 700; }
.profile-btn .emoji { font-size: 4rem; }
.profile-btn.add { background: transparent; box-shadow: none; border: 3px dashed #e0cfa8; color: var(--muted); }

.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-grid button { font-size: 2.6rem; padding: 10px 0; }
.avatar-grid button.selected { outline: 4px solid var(--orange); }

input[type=text], input[type=number] {
  font: inherit;
  font-size: 1.3rem;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 3px solid #eadcb8;
  background: #fff;
}

/* 홈 메뉴 */
.hello { display: flex; align-items: center; gap: 14px; }
.hello .emoji { font-size: 3.4rem; }
.hello .stats { display: flex; gap: 12px; flex-wrap: wrap; font-weight: 700; color: var(--muted); }
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.menu button { padding: 20px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 1.15rem; font-weight: 700; }
.menu button .emoji { font-size: 3rem; }
.menu .big { grid-column: 1 / -1; background: var(--yellow); flex-direction: row; justify-content: center; gap: 14px; font-size: 1.5rem; padding: 26px 8px; }
.menu .big .emoji { font-size: 3.2rem; }
.menu .test { background: #e6f7ff; }
.link-btn { background: transparent; box-shadow: none; color: var(--muted); padding: 10px; font-size: .95rem; text-decoration: underline; }

/* 단계 선택 */
.stage-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.stage-tab { padding: 10px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: .9rem; }
.stage-tab .emoji { font-size: 1.8rem; }
.stage-tab.on { background: var(--yellow); }
.stage-tabs.ten { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.stage-tabs.ten .stage-tab { padding: 8px 0; font-size: .8rem; }
.stage-tabs.ten .stage-tab .emoji { font-size: 1.5rem; }
.stage-tab.plan-only:not(.on) { background: #f6efdd; color: var(--muted); }
.stage-head { display: flex; flex-direction: column; gap: 4px; background: var(--card); border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow); }
.stage-head b { font-size: 1.15rem; }
.stage-head span { font-size: .9rem; }
.menu .big > span:not(.emoji) { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.menu .big small { font-size: .8rem; color: var(--muted); font-weight: 600; }

/* 노멀 / 부스트 선택 */
.speed { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mode-toggle { display: flex; gap: 6px; background: #f3e7c8; padding: 5px; border-radius: 18px; }
.mode-toggle button { box-shadow: none; background: transparent; padding: 10px 22px; font-size: 1.05rem; font-weight: 800; color: var(--muted); border-radius: 14px; }
.mode-toggle button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.mode-toggle button[data-mode="boost"].on { background: #ffe1ea; color: #c2185b; }
.speed small { text-align: center; }
.review-chip.boost { background: #ff6b9a; }

/* 부모 프로필 */
.profile-btn.parent { background: #eef6ff; }
.role-badge { font-size: .75rem; color: #1d4f80; font-weight: 700; }

/* 그림 크기: 이모지 개수(g1~g3)와 놓인 자리(카드·보기 2~4개·위쪽 그림)에 맞춘다 */
.pic { display: inline-block; line-height: 1.05; text-align: center; white-space: nowrap; }
.pic.size-small { transform: scale(.42); }

/* 단어 카드 · 이야기 그림 */
.card-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; }
.card-picture {
  width: min(78vw, 360px);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 36px;
  background: var(--card);
  overflow: hidden;
}
.card-picture .pic.g1 { font-size: min(46vw, 210px); }
.card-picture .pic.g2 { font-size: min(28vw, 130px); }
.card-picture .pic.g3 { font-size: min(19vw, 88px); }
.card-picture.speaking { animation: bounce .6s ease-in-out infinite alternate; }
@keyframes bounce { from { transform: scale(1); } to { transform: scale(1.05); } }

.row { display: flex; gap: 12px; justify-content: center; }
.round-btn { width: 76px; height: 76px; border-radius: 50%; font-size: 2.2rem; }
.next-btn { background: var(--green); color: #fff; padding: 18px 28px; font-size: 1.4rem; font-weight: 800; border-radius: 40px; }
.next-btn.blue { background: var(--blue); }

.dots { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.dots i { width: 12px; height: 12px; border-radius: 50%; background: #eadcb8; }
.dots i.on { background: var(--orange); }

/* 문제 풀이 */
.ask-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.prompt { width: min(40vw, 170px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: var(--card); border-radius: 28px; box-shadow: var(--shadow); }
.prompt .pic { font-size: min(24vw, 110px); }
.listen-btn { width: 120px; height: 120px; border-radius: 50%; font-size: 3.6rem; background: var(--yellow); flex: 0 0 auto; }
.listen-btn.small { width: 84px; height: 84px; font-size: 2.4rem; }
.listen-btn.speaking { animation: bounce .5s ease-in-out infinite alternate; }

.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.choices.n2 { margin-top: 12px; }
.choices.n3 { grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; padding: 4px; }
.choice .pic.g1 { font-size: min(24vw, 110px); }
.choice .pic.g2 { font-size: min(15vw, 70px); }
.choice .pic.g3 { font-size: min(10.5vw, 50px); }
.choices.n3 .pic.g1 { font-size: min(16vw, 74px); }
.choices.n3 .pic.g2 { font-size: min(10vw, 46px); }
.choices.n3 .pic.g3 { font-size: min(6.5vw, 28px); }
.choices.n3 .pic, .order .pic { white-space: normal; }
.choice.right { background: #d9f8e5; outline: 5px solid var(--green); }
.choice.hint { outline: 5px dashed var(--green); animation: bounce .45s ease-in-out infinite alternate; }
.choice.wrong { background: #ffe3e3; animation: shake .35s; }
.choice.talk { outline: 5px solid var(--blue); background: #e6f3ff; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

.reveal { text-align: center; min-height: 0; }
.reveal .pic { font-size: 4rem; animation: pop .5s ease-out; }
.stars { text-align: center; font-size: 1.6rem; min-height: 2rem; letter-spacing: 2px; }

/* 몇 개일까? */
/* 몇 개든 한눈에 셀 수 있게 격자로 놓는다: 1개 / 2개 가로 / 3·4개 2×2 / 5·6개 3×2 */
.count { display: grid; justify-items: center; align-items: center; gap: 2px 4px; }
.count i { font-style: normal; line-height: 1.1; }
.count.c1 { grid-template-columns: auto; }
.count.c2, .count.c3, .count.c4 { grid-template-columns: repeat(2, auto); }
.count.c5, .count.c6 { grid-template-columns: repeat(3, auto); }
.count.c1 i { font-size: min(14vw, 64px); }
.count.c2 i { font-size: min(9vw, 42px); }
.count.c3 i, .count.c4 i { font-size: min(8vw, 36px); }
.count.c5 i, .count.c6 i { font-size: min(6.5vw, 28px); }
.count.c3 i:last-child { grid-column: 1 / -1; }
.count.c5 i:nth-child(n+4) { grid-column: span 1; }

/* 누가 뭐 해요? — 주인공 + 오른쪽 아래 작은 그림 */
.actor { position: relative; display: inline-block; font-size: min(14vw, 64px); line-height: 1; margin-right: .3em; }
.actor .badge { position: absolute; right: -32%; bottom: -10%; font-size: .52em; background: #fff; border-radius: 50%; padding: 2px; }

/* 어디 있어요? — 상자·탁자와 물건 위치 */
.scene { position: relative; display: block; width: 100%; height: 100%; }
.scene .floor { position: absolute; left: 4%; right: 4%; bottom: 10%; border-top: 3px solid #e3d2a8; }
.scene .obj { position: absolute; font-size: min(8.5vw, 38px); line-height: 1; transform: translateX(-50%); z-index: 1; }
.scene.box .furn { position: absolute; left: 8%; bottom: 10%; width: 48%; height: 38%; background: #b07a44; border: 3px solid #8a5a2b; border-radius: 4px; }
.scene.box .box-front { position: absolute; left: 8%; bottom: 10%; width: 48%; height: 24%; background: #d9a066; border: 3px solid #8a5a2b; border-radius: 0 0 4px 4px; z-index: 2; box-sizing: border-box; }
.scene.box.at-in .obj { left: 32%; bottom: 22%; }
.scene.box.at-on .obj { left: 32%; bottom: 48%; }
.scene.box.at-next-to .obj { left: 78%; bottom: 10%; }
.scene.table .furn { position: absolute; left: 6%; bottom: 44%; width: 58%; height: 7%; background: #8a5a2b; border-radius: 3px; }
.scene.table .furn::before, .scene.table .furn::after { content: ''; position: absolute; top: 100%; width: 9%; height: 480%; background: #8a5a2b; }
.scene.table .furn::before { left: 4%; }
.scene.table .furn::after { right: 4%; }
.scene.table.at-on .obj { left: 35%; bottom: 51%; }
.scene.table.at-under .obj { left: 35%; bottom: 10%; }
.scene.table.at-next-to .obj { left: 80%; bottom: 10%; }

/* 박수 세기 · 알파벳 */
.claps { font-size: min(8vw, 36px); letter-spacing: -2px; white-space: nowrap; }
.letter { font-size: min(20vw, 92px); font-weight: 800; line-height: 1; font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; color: var(--ink); }

/* 이야기 */
.story-list { display: flex; flex-direction: column; gap: 12px; }
.story-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; }
.story-item .emoji { font-size: 2.6rem; }
.story-item .name { flex: 1; font-weight: 700; font-size: 1.1rem; }
.story-item .times { color: var(--muted); font-size: .9rem; font-weight: 700; }
.guide { font-size: 1.15rem; font-weight: 700; line-height: 1.5; }
.order { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.order .pic.g1 { font-size: min(16vw, 74px); }
.order .pic.g2 { font-size: min(10vw, 46px); }
.order .pic.g3 { font-size: min(6.5vw, 28px); }
.order-card .num { position: absolute; left: 6px; top: 6px; width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; font-size: 1.1rem; display: none; align-items: center; justify-content: center; }
.order-card.placed { background: #d9f8e5; outline: 4px solid var(--green); }
.order-card.placed .num { display: flex; }

/* 완료 */
.done { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.done .sticker { font-size: 8rem; animation: pop .6s ease-out; }
@keyframes pop { 0% { transform: scale(.2) rotate(-30deg); } 70% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1); } }
.sticker-book { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 1.8rem; }
.sticker-book.big { font-size: 3rem; }

/* 부모 화면 */
.panel { background: var(--card); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.kv div { display: flex; flex-direction: column; }
.kv b { font-size: 1.3rem; }
.kv span { font-size: .85rem; color: var(--muted); }
.week { display: flex; gap: 6px; align-items: flex-end; height: 70px; }
.week div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; height: 100%; font-size: .7rem; color: var(--muted); }
.week i { width: 100%; background: var(--orange); border-radius: 6px 6px 0 0; min-height: 2px; }
.weak { display: flex; flex-wrap: wrap; gap: 8px; }
.weak > span { background: #fff1e6; border-radius: 12px; padding: 4px 10px; font-size: .95rem; }
.stage-lines { display: flex; flex-direction: column; gap: 8px; font-size: .95rem; line-height: 1.4; }
.unlock { background: #e6f3ff; padding: 12px 14px; font-weight: 700; }
.danger { background: #ffe3e3; color: #b3261e; padding: 10px 14px; font-size: .9rem; }
.warn { background: #fff1e6; border-radius: 16px; padding: 12px 14px; font-size: .95rem; line-height: 1.5; }
.primary { background: var(--orange); color: #fff; padding: 16px; font-size: 1.2rem; font-weight: 800; }

/* 부모 검토 모드 */
.review-chip { background: var(--orange); color: #fff; font-size: .8rem; font-weight: 800; padding: 4px 10px; border-radius: 12px; }
.caption { background: #eaf4ff; color: #1d4f80; border-radius: 14px; padding: 10px 12px; font-size: .95rem; line-height: 1.5; text-align: center; font-weight: 600; }
.plan-list { display: flex; flex-direction: column; gap: 10px; }
.plan-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; }
.plan-n { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: #eadcb8; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem; }
.plan-item.built .plan-n { background: var(--yellow); }
.plan-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.plan-body small { color: var(--muted); font-size: .85rem; }
.plan-status { flex: 0 0 auto; font-size: .8rem; font-weight: 800; padding: 4px 8px; border-radius: 10px; background: #f0e8d6; color: var(--muted); }
.plan-item.built .plan-status { background: #d9f8e5; color: #1e7a45; }
.plan-ul { margin: 0; padding-left: 20px; line-height: 1.6; }
.panel > b { margin-top: 4px; }
.review-sec { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); padding: 4px 12px; }
.review-sec summary { font-weight: 800; padding: 10px 0; cursor: pointer; }
.review-sec[open] { padding-bottom: 12px; }
.review-sec .review-sec { box-shadow: none; background: #fbf6ea; margin-top: 8px; }
.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.rv-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; text-align: left; box-shadow: none; background: #fbf6ea; border-radius: 12px; min-width: 0; }
.rv-item .emoji { font-size: 1.8rem; flex: 0 0 auto; }
.rv-item b { display: block; font-size: .95rem; overflow-wrap: anywhere; }
.rv-item small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.3; overflow-wrap: anywhere; }
.rv-group { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0; border-bottom: 1px dashed #eadcb8; }
.rv-group .rv-item { flex: 0 1 auto; }
.rv-scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0; }
.rv-scene { box-shadow: none; background: #fbf6ea; padding: 4px; display: flex; flex-direction: column; align-items: center; }
.rv-scene .scene { height: 90px; }
.rv-scene small { font-size: .78rem; color: var(--muted); }
.rv-story { padding-left: 22px; margin: 6px 0; }
.rv-line { box-shadow: none; background: transparent; text-align: left; padding: 6px 4px; width: 100%; line-height: 1.5; }

/* ===== 1년 과정 추가 ===== */
/* 홈: 이번 주차 카드 */
.week-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; text-align: left; background: var(--card); }
.wc-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.wc-top b { font-size: 1.4rem; }
.wc-top span { font-size: .9rem; color: var(--muted); font-weight: 700; }
.wc-theme { font-size: 1.15rem; font-weight: 800; }
.wc-bottom { display: flex; justify-content: space-between; gap: 8px; font-size: .9rem; color: var(--muted); font-weight: 700; flex-wrap: wrap; }
.bar { display: block; height: 10px; border-radius: 6px; background: #f0e5c8; overflow: hidden; }
.bar i { display: block; height: 100%; min-width: 6px; background: var(--orange); border-radius: 6px; }
.mode-toggle button { padding: 10px 14px; font-size: 1rem; }
.mode-toggle button[data-mode="easy"].on { background: #e3f6e9; color: #1e7a45; }
.lesson-count { font-weight: 800; font-size: 1.1rem; }

/* 5주 차부터 보이는 영어 글자 */
.word-text { font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size: 2.4rem; font-weight: 800; text-align: center; letter-spacing: 1px; }
.word-text.small { font-size: 1.4rem; margin-top: 6px; }
.story-text { min-height: 1.6em; font-size: 1.25rem; font-weight: 700; text-align: center; line-height: 1.4; }
.prompt .letter { font-size: min(15vw, 64px); }

/* 진도 지도 */
.course { display: flex; flex-direction: column; gap: 8px; }
.course-head { display: flex; align-items: center; gap: 10px; }
.course-head .emoji { font-size: 2rem; }
.course-head span:last-child { display: flex; flex-direction: column; }
.course-head small { color: var(--muted); font-size: .85rem; }
.map-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.wk { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px; border-radius: 14px; }
.wk b { font-size: 1.15rem; }
.wk .emoji { font-size: .95rem; min-height: 1em; }
.wk i { position: absolute; right: 5px; top: 3px; font-style: normal; font-size: .8rem; font-weight: 800; }
.wk.done { background: #d9f8e5; }
.wk.done i { color: #1e7a45; }
.wk.now { background: var(--yellow); outline: 4px solid var(--orange); }
.wk.locked { background: #f6efdd; color: var(--muted); }
.wk.plan { opacity: .6; box-shadow: none; border: 2px dashed #e0cfa8; }

/* 부모 검토 모드 */
.rv-table { display: flex; flex-direction: column; gap: 8px; padding-bottom: 4px; }
.rv-course { display: flex; flex-direction: column; gap: 3px; background: #fbf6ea; border-radius: 12px; padding: 10px 12px; line-height: 1.45; font-size: .95rem; }
.rv-course small { color: var(--muted); font-size: .85rem; }
.plan-list + .course-head, .course-head { margin-top: 6px; }
/* 결과 화면의 큰 스티커·별(⭐⭐⭐)이 화면 폭을 넘지 않게 */
.done .sticker { font-size: min(8rem, 25vw); white-space: nowrap; }
.done { overflow: hidden; }

/* 새 1년 과정 앱은 기존 앱(노란 바탕)과 한눈에 구분되게 하늘색 바탕 */
:root { --bg: #e8f4ff; }
.new-banner { display: flex; flex-direction: column; align-items: center; gap: 4px; background: linear-gradient(135deg, #4aa3ff, #7b61ff); color: #fff; border-radius: 18px; padding: 12px 14px; text-align: center; box-shadow: var(--shadow); }
.new-banner b { font-size: 1.15rem; }
.new-banner span { font-size: .95rem; font-weight: 700; }

/* 속도 표시(고정) · 천재 모드 입구 */
.mode-fixed { background: #ffe1ea; color: #c2185b; font-weight: 800; padding: 8px 18px; border-radius: 16px; }
.mode-fixed.genius { background: #efe7ff; color: #5b3cc4; }
.genius-entry { display: flex; align-items: center; gap: 14px; padding: 16px; text-align: left; background: linear-gradient(135deg, #7b61ff, #c455ff); color: #fff; }
.genius-entry .emoji { font-size: 2.8rem; }
.genius-entry span:last-child { display: flex; flex-direction: column; gap: 2px; }
.genius-entry b { font-size: 1.3rem; }
.genius-entry small { font-size: .9rem; opacity: .95; }
.new-banner.genius { background: linear-gradient(135deg, #7b61ff, #c455ff); }
.profile-btn.genius { background: #f3eeff; }
.menu .big.genius { background: linear-gradient(135deg, #b9a8ff, #e3b3ff); }

/* ===== 9주~ 새 활동 화면 ===== */
/* 글자 보기(단어·뜻·문장): 네모 칸 대신 가로로 긴 버튼 */
.wtxt { font-weight: 800; font-size: 1.25rem; line-height: 1.3; overflow-wrap: anywhere; text-align: center; }
.wtxt.big { font-size: 1.7rem; font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; }
.wtxt.ko { font-size: 1.15rem; }
.choices.text { grid-template-columns: 1fr; gap: 10px; }
.choices.text .choice { aspect-ratio: auto; min-height: 64px; padding: 12px 16px; }
.choices.text.n4 { grid-template-columns: 1fr 1fr; }
.choices.text.list .wtxt { font-size: 1.05rem; font-weight: 700; text-align: left; }
.text-prompt { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 16px; font-size: 1.2rem; font-weight: 700; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.text-prompt u { text-decoration: none; border-bottom: 3px solid var(--orange); padding: 0 6px; }
.big-en { font-size: 2.2rem; font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; }

/* 단어 카드: 그림 없는 단어는 큰 글자, 뜻·예문 */
.card-word { font-size: min(13vw, 60px); font-weight: 800; padding: 12px; text-align: center; overflow-wrap: anywhere; font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; }
.ko-mean { font-size: 1.3rem; font-weight: 800; color: #1d4f80; background: #eaf4ff; border-radius: 14px; padding: 6px 16px; text-align: center; }
.card-sentence { font-size: 1.1rem; text-align: center; line-height: 1.5; color: var(--ink); padding: 0 8px; }

/* 조각 맞추기 */
.slots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; min-height: 52px; background: var(--card); border-radius: 18px; padding: 10px; box-shadow: var(--shadow); }
.slot { min-width: 44px; min-height: 40px; border-bottom: 3px dashed #c9d9ea; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; font-weight: 800; padding: 0 4px; }
.slots.letters .slot { min-width: 38px; font-size: 1.6rem; }
.slot.on { border-bottom: 3px solid var(--green); color: #1e7a45; }
.tiles { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.tile { padding: 12px 16px; font-size: 1.15rem; font-weight: 800; min-width: 52px; }
.tiles.letters .tile { font-size: 1.7rem; min-width: 58px; padding: 10px 0; }
.tile:disabled { opacity: .25; }
.tile.wrong { background: #ffe3e3; animation: shake .35s; }
.tile.hint { outline: 4px dashed var(--green); animation: bounce .45s ease-in-out infinite alternate; }

/* 따라 말하기 */
.speak-line { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 20px 16px; font-size: 1.45rem; font-weight: 800; text-align: center; line-height: 1.45; overflow-wrap: anywhere; }
.speak-line.speaking { outline: 4px solid var(--yellow); }
.round-btn.mic { background: #ffe1ea; }
.round-btn.mic.speaking { animation: bounce .5s ease-in-out infinite alternate; background: #ff6b9a; }
.heard { text-align: center; font-size: 1.05rem; font-weight: 700; color: var(--muted); line-height: 1.5; min-height: 3em; }

/* 상황극 채팅 */
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; padding: 4px; }
.chat.static { max-height: none; }
.bubble { max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: 1.05rem; line-height: 1.45; text-align: left; box-shadow: none; overflow-wrap: anywhere; }
.bubble b { display: block; font-size: .8rem; opacity: .7; }
.bubble.you { align-self: flex-start; background: var(--card); border-bottom-left-radius: 4px; }
.bubble.me { align-self: flex-end; background: #d9f8e5; border-bottom-right-radius: 4px; }

/* 책 읽기 */
.reader-head { display: flex; align-items: center; gap: 12px; }
.reader-head .emoji { font-size: 3rem; min-width: 3rem; text-align: center; }
.reader-head b { font-size: 1.1rem; line-height: 1.35; }
.reader { background: var(--card); border-radius: 20px; box-shadow: var(--shadow); padding: 14px 16px; max-height: 50vh; overflow-y: auto; }
.rline { margin: 0 0 8px; padding: 6px 8px; border-radius: 10px; font-size: 1.15rem; line-height: 1.6; cursor: pointer; }
.rline.on { background: #fff4c2; }
.rline.read { color: var(--muted); }
.tap { cursor: pointer; border-radius: 4px; }
.tap:active { background: #cfe6ff; }

/* 쓰기 */
textarea { font: inherit; font-size: 1.15rem; width: 100%; padding: 14px; border-radius: 16px; border: 3px solid #cfe0f2; background: #fff; line-height: 1.5; user-select: text; -webkit-user-select: text; }
.model { line-height: 1.6; }
.writing { background: #f4f9ff; border-radius: 12px; padding: 8px 12px; line-height: 1.5; font-size: .95rem; }
.writing small { display: block; color: var(--muted); }

/* 검토 모드 조각 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0; }
.chip { padding: 6px 12px; font-weight: 700; box-shadow: none; background: #eef5ff; border-radius: 12px; }

/* ===== 2026-10-01 추가: 로그인 · 미션 · 꾸미기 · 도서관 · 따라 쓰기 · 받아쓰기 · 리포트 ===== */
/* 로그인 */
.login label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.login input, input[type=password] { font: inherit; font-size: 1.4rem; width: 100%; padding: 14px 16px; border-radius: 16px; border: 3px solid #cfe0f2; background: #fff; letter-spacing: 4px; user-select: text; -webkit-user-select: text; }
.login-err { color: #b3261e; font-weight: 700; min-height: 1.2em; font-size: .95rem; }
.account-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--card); border-radius: 16px; padding: 6px 6px 6px 12px; box-shadow: var(--shadow); font-size: .95rem; }
.account-bar > span:first-child { flex: 1; }
.account-bar small { color: var(--muted); }
.account-bar .link-btn { padding: 6px 8px; }
.install-btn { padding: 14px; font-weight: 800; background: #e6f3ff; display: flex; align-items: center; justify-content: center; gap: 8px; }
.profile-btn.pick.selected { outline: 4px solid var(--green); background: #d9f8e5; }
.check { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 1rem; line-height: 1.4; }
.check input { width: 26px; height: 26px; }

/* 잠깐 뜨는 알림 */
.toast { position: fixed; left: 50%; top: max(14px, env(safe-area-inset-top)); transform: translateX(-50%); z-index: 50; width: max-content; max-width: min(92vw, 480px); background: #2b2350; color: #fff; padding: 12px 16px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); font-size: 1rem; line-height: 1.4; text-align: center; animation: toastIn .3s ease-out; transition: opacity .4s, transform .4s; pointer-events: none; }
.toast.out { opacity: 0; transform: translate(-50%, -12px); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, -16px); } }

/* 캐릭터 (꾸미기 아이템을 입은 모습) */
.av { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .05); flex: 0 0 auto; }
.av .av-base { font-size: 3.1rem; }
.av i { position: absolute; font-style: normal; line-height: 1; }
.av .av-hat { font-size: 1.9rem; top: -.75rem; left: 50%; transform: translateX(-50%) rotate(-8deg); }
.av .av-face { font-size: 1.7rem; top: 42%; left: 50%; transform: translate(-50%, -50%); }
.av .av-hand { font-size: 1.5rem; right: -.45rem; bottom: -.1rem; }
.av .av-pet { font-size: 1.4rem; left: -.5rem; bottom: -.15rem; }
.av.sm { width: 4.4rem; height: 4.4rem; }
.av.xs { width: 2.2rem; height: 2.2rem; vertical-align: middle; }
.av.xs .av-base { font-size: 1.5rem; }
.av.xs i { display: none; }
.av.lg { width: 9rem; height: 9rem; }
.av.lg .av-base { font-size: 6.2rem; }
.av.lg .av-hat { font-size: 3.6rem; top: -1.6rem; }
.av.lg .av-face { font-size: 3.3rem; }
.av.lg .av-hand { font-size: 2.9rem; right: -1rem; }
.av.lg .av-pet { font-size: 2.7rem; left: -1.1rem; }
.profile-btn .av .av-base { font-size: 3rem; }
.profile-btn .av i { font-size: 1.3rem; }
.profile-btn .av .av-hat { top: -.6rem; }
.av-btn { background: transparent; box-shadow: none; padding: 6px 4px 0; border-radius: 50%; }
.closet-preview { display: flex; justify-content: center; padding: 22px 0 6px; }

/* 오늘의 미션 */
.quests { background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.quest { display: grid; grid-template-columns: auto 1fr 56px auto; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; }
.quest .emoji { font-size: 1.3rem; }
.quest .q-label { min-width: 0; }
.q-bar { display: block; height: 8px; border-radius: 6px; background: #e3eefb; overflow: hidden; }
.q-bar i { display: block; height: 100%; background: var(--blue); border-radius: 6px; }
.quest.ok { color: #1e7a45; }
.quest.ok .q-bar i { background: var(--green); }
.quest small { color: var(--muted); min-width: 3.2em; text-align: right; }
.menu button small { font-size: .8rem; }
.act-hint { font-size: .78rem; color: var(--muted); font-weight: 700; }

/* 꾸미기 상점 · 탭 */
.filter-tabs { display: flex; gap: 6px; background: #dcebfb; padding: 5px; border-radius: 16px; flex-wrap: wrap; }
.filter-tabs button { flex: 1; box-shadow: none; background: transparent; padding: 9px 6px; font-weight: 800; color: var(--muted); border-radius: 12px; font-size: .95rem; white-space: nowrap; }
.filter-tabs button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.shop-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; font-weight: 700; }
.shop-item .emoji { font-size: 2.6rem; }
.shop-item small { font-size: .85rem; color: var(--muted); }
.shop-item.own small { color: #1d4f80; }
.shop-item.on { outline: 4px solid var(--green); background: #e9fbef; }
.swatch { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #cfe0f2; }

/* 관심사 */
.interest-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ichip { padding: 10px 14px; font-weight: 700; display: flex; align-items: center; gap: 6px; box-shadow: none; border: 3px solid #d6e6f7; }
.ichip.on { background: #ffe1ea; border-color: var(--pink); }

/* 도서관 */
.lib-list { display: flex; flex-direction: column; gap: 10px; }
.lib-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; }
.lib-item > .emoji { font-size: 2.4rem; flex: 0 0 auto; }
.lib-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lib-body small { color: var(--muted); font-size: .85rem; overflow-wrap: anywhere; }
.lib-count { flex: 0 0 auto; font-size: .85rem; font-weight: 800; color: var(--muted); text-align: right; }
.new-t { color: var(--pink); }

/* 책 읽기 3단계 · 읽는 단어 강조 · 소리 내어 읽기 색칠 */
.read-steps { display: flex; gap: 6px; }
.read-steps span { flex: 1; text-align: center; padding: 7px 2px; border-radius: 12px; background: #dcebfb; color: var(--muted); font-weight: 800; font-size: .9rem; }
.read-steps span.on { background: var(--yellow); color: var(--ink); }
.read-steps span.did:not(.on) { background: #d9f8e5; color: #1e7a45; }
.tap.hl { background: #ffd84d; box-shadow: 0 0 0 2px #ffd84d; }
.tap.ok { color: #1e7a45; background: #d9f8e5; }
.tap.miss { color: #b3261e; background: #ffe3e3; text-decoration: underline wavy #ff8a80; }
.miss-t { color: #b3261e; }
.speak-line .tap { padding: 0 2px; }

/* 녹음 */
.round-btn.rec { background: #fff1e6; }
.round-btn.rec.speaking { background: #ff6b6b; animation: bounce .5s ease-in-out infinite alternate; }
.my-voice { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.compare { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }
.compare audio { height: 40px; max-width: 220px; }
.rec-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: .95rem; }
.rec-row .chip { flex: 0 0 auto; }

.round-btn.ok { background: #d9f8e5; }
.letter-inline { font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size: 1.4em; color: #1d4f80; }

/* 받아쓰기 */
#dictInput { font-size: 1.5rem; text-align: center; border-color: #cfe0f2; user-select: text; -webkit-user-select: text; }
.dict-result { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.dict-diff { font-family: "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif; font-size: 1.6rem; font-weight: 800; letter-spacing: 1px; overflow-wrap: anywhere; }
.dict-diff .ok { color: #1e7a45; }
.dict-diff .miss { color: #b3261e; text-decoration: underline; }
.ok-t { color: #1e7a45; }

/* 부모님 화면: 주간 리포트 · 가족 */
.report { display: flex; flex-direction: column; gap: 8px; background: #f4f9ff; border-radius: 16px; padding: 12px; }
.praise { background: #fff8d6; border-radius: 12px; padding: 8px 12px; font-weight: 700; line-height: 1.45; font-size: .95rem; }
.member-head { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.member-head .emoji { font-size: 1.8rem; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #d6e6f7; }
.acct-row .danger { padding: 6px 12px; }
.pw-form { display: flex; flex-direction: column; gap: 8px; padding-bottom: 6px; }
.panel h2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* 용돈 별 */
.allowance-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; text-align: left; background: linear-gradient(135deg, #fff6cc, #ffe7a3); }
.al-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 800; font-size: 1.05rem; }
.al-top small { color: var(--muted); font-weight: 700; }
.al-won { color: #b45f06; font-size: 1.15rem; white-space: nowrap; }
.allowance-card .q-bar { height: 10px; background: #fff; }
.allowance-card .q-bar i { background: linear-gradient(90deg, #ffb703, #fb8500); }
.al-big { font-size: 1.6rem; color: #b45f06; }
.panel.center { align-items: center; text-align: center; }
.panel.center .q-bar { width: 100%; height: 12px; }
.panel.center .q-bar i { background: linear-gradient(90deg, #ffb703, #fb8500); }
.level-chip { background: #efe7ff; color: #5b3cc4; border-radius: 14px; padding: 10px 14px; font-weight: 700; text-align: center; line-height: 1.5; }

/* 접속 횟수 (오른쪽 위) · 관리자 */
.visit-slot { margin-left: auto; display: inline-flex; }
.visit-slot:empty { display: none; }
.visit-badge { background: #2b2350; color: #fff; font-weight: 800; font-size: .85rem; padding: 5px 10px; border-radius: 12px; white-space: nowrap; }
.account-bar .who { flex: 1; white-space: nowrap; }
.account-bar #syncState { order: 5; flex-basis: 100%; font-size: .8rem; }
.account-bar .visit-slot { margin-left: 0; }
.topbar .visit-slot { margin-left: auto; }
.admin-entry { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; background: linear-gradient(135deg, #ffcf5c, #ff9f43); color: #3a2400; }
.admin-entry .emoji { font-size: 2.4rem; }
.admin-entry span:last-child { display: flex; flex-direction: column; gap: 2px; }
.admin-entry b { font-size: 1.2rem; }
.admin-entry small { font-size: .9rem; }
.visit-count { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 3.4em; }
.visit-count b { font-size: 1.5rem; color: #1d4f80; }
.visit-count small { font-size: .75rem; color: var(--muted); }

/* =====================================================================
   디자인 테마 (2026-10-01): 듀오링고 스타일
   - 흰 바탕 · 굵고 둥근 글씨(Nunito + Noto Sans KR) · 선명한 색
   - 버튼·카드: 회색 테두리 2px + 아래쪽만 두꺼운 테두리(4px) → 누르면 내려앉는 "말랑한" 버튼
   - 색: 초록 #58CC02 · 파랑 #1CB0F6 · 빨강 #FF4B4B · 노랑 #FFC800 · 주황 #FF9600 · 보라 #CE82FF
   이 아래 규칙이 위쪽의 예전 모양을 덮어쓴다. 화면 구조(HTML)는 그대로.
   ===================================================================== */
:root {
  --bg: #ffffff;
  --card: #ffffff;
  --ink: #3c3c3c;
  --muted: #777777;
  --line: #e5e5e5;
  --line-dark: #cecece;
  --green: #58cc02; --green-d: #58a700; --green-l: #d7ffb8;
  --blue: #1cb0f6; --blue-d: #1899d6; --blue-l: #ddf4ff;
  --red: #ff4b4b; --red-d: #ea2b2b; --red-l: #ffdfe0;
  --yellow: #ffc800; --yellow-d: #e5b400; --yellow-l: #fff5d3;
  --orange: #ff9600; --orange-d: #e08600;
  --purple: #ce82ff; --purple-d: #a560e8; --purple-l: #f4e6ff;
  --pink: #ff86d0;
  --shadow: none;
}
body { background: var(--bg); color: var(--ink); font-family: "Nunito", "Noto Sans KR", "Pretendard", system-ui, sans-serif; font-weight: 700; }
h1, h2 { font-weight: 900; letter-spacing: -.3px; color: #3c3c3c; }
h1 { font-size: 1.75rem; }
.muted { color: var(--muted); font-weight: 700; }

/* --- 기본 버튼 · 카드: 테두리 + 아래 두꺼운 테두리 --- */
button {
  background: #fff;
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 16px;
  box-shadow: none;
  font-weight: 800;
  transition: transform .06s, border-bottom-width .06s, filter .15s;
}
button:active { transform: translateY(2px); border-bottom-width: 2px; box-shadow: none; }
button:disabled { opacity: .5; filter: grayscale(.4); }
.panel, .quests, .week-card, .report, .text-prompt, .speak-line, .reader, .slots, .stage-head, .review-sec, .prompt, .card-picture {
  background: #fff;
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 18px;
  box-shadow: none;
}
.report { background: #f7fbff; border-color: #d9ecfb; }
input[type=text], input[type=number], input[type=password], textarea, .login input, #dictInput {
  border: 2px solid var(--line); border-radius: 14px; background: #f7f7f7; font-weight: 700;
}
input:focus, textarea:focus { outline: none; border-color: var(--blue); background: #fff; }

/* 테두리 없는 버튼들 */
.link-btn, .av-btn, .filter-tabs button, .mode-toggle button, .rv-line, .rv-scene, .tap { border: 0; }
.link-btn { color: var(--blue); text-decoration: none; font-weight: 800; letter-spacing: .2px; }
.link-btn:active { transform: none; border: 0; opacity: .7; }

/* 색 있는 큰 버튼 (주요 행동) */
.next-btn, .primary {
  background: var(--green); color: #fff; border-color: var(--green-d); border-width: 0 0 4px;
  text-transform: none; letter-spacing: .5px; font-weight: 900;
}
.next-btn.blue { background: var(--blue); border-color: var(--blue-d); }
.primary { border-radius: 16px; }
.danger { background: #fff; color: var(--red-d); border-color: var(--red-l); border-bottom-color: #ffc1c3; }
.unlock { background: var(--blue-l); border-color: #b8e5fb; color: #1477a8; }
.install-btn { background: var(--blue-l); border-color: #b8e5fb; color: #1477a8; }
.chip { border: 2px solid var(--line); border-bottom-width: 3px; background: #fff; }

/* --- 위쪽 바 --- */
.topbar .back { width: 48px; height: 48px; font-size: 1.4rem; border-radius: 14px; }
.topbar .title { font-weight: 900; color: #3c3c3c; }
.topbar .count { color: #afafaf; font-weight: 900; }
.review-chip { border-radius: 10px; font-weight: 900; }
.review-chip.boost { background: var(--pink); }
.review-chip.genius { background: var(--purple); }

/* --- 첫 화면 --- */
.new-banner { background: var(--blue); border: 0; border-bottom: 4px solid var(--blue-d); border-radius: 18px; box-shadow: none; }
.new-banner.genius { background: var(--purple); border-bottom-color: var(--purple-d); }
.profile-btn { border-radius: 20px; }
.profile-btn.parent { background: var(--blue-l); border-color: #b8e5fb; }
.profile-btn.genius { background: var(--purple-l); border-color: #e7c9ff; }
.profile-btn.add { border: 2px dashed var(--line-dark); background: #fff; color: #afafaf; }
.genius-entry { background: var(--purple); border: 0; border-bottom: 4px solid var(--purple-d); color: #fff; }
.admin-entry { background: var(--yellow); border: 0; border-bottom: 4px solid var(--yellow-d); color: #5c4300; }
.account-bar { border: 2px solid var(--line); border-radius: 16px; box-shadow: none; }
.visit-badge { background: var(--orange); border-radius: 12px; font-weight: 900; }
.level-chip { background: var(--purple-l); color: #7b3fc4; border: 2px solid #e7c9ff; border-radius: 16px; }
.login-err { color: var(--red-d); }

/* --- 홈 --- */
.hello h2 { font-size: 1.45rem; }
.hello .stats { gap: 14px; color: #afafaf; font-weight: 900; font-size: 1rem; }
.hello .stats span:first-child { color: var(--orange); }
.av { background: #f7f7f7; box-shadow: inset 0 0 0 2px var(--line); }
.week-card { gap: 8px; }
.wc-top b { font-size: 1.5rem; font-weight: 900; }
.wc-theme { font-size: 1.2rem; font-weight: 900; }
.bar, .q-bar { background: var(--line); border-radius: 99px; overflow: hidden; height: 14px; }
.bar i, .q-bar i { position: relative; border-radius: 99px; background: var(--green); }
.bar i::after, .q-bar i::after { /* 진도 막대 위쪽 반짝이 줄 (듀오링고 진도 막대) */
  content: ''; position: absolute; left: 8px; right: 8px; top: 3px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35);
}
.q-bar { height: 12px; }
.quest.ok .q-bar i { background: var(--green); }
.quest:not(.ok) .q-bar i { background: var(--yellow); }
.quests > b { font-size: 1.1rem; font-weight: 900; }
.mode-fixed { background: var(--pink); color: #fff; border-radius: 12px; font-weight: 900; }
.mode-fixed.genius { background: var(--purple); color: #fff; }
.menu { gap: 12px; }
.menu button { border-radius: 18px; padding: 18px 8px; }
.menu .big { background: var(--green); color: #fff; border-color: var(--green-d); border-width: 0 0 5px; font-weight: 900; }
.menu .big small { color: rgba(255, 255, 255, .9); }
.menu .big.genius { background: var(--purple); border-color: var(--purple-d); }
.menu .test { background: var(--blue); color: #fff; border-color: var(--blue-d); border-width: 0 0 5px; }
.menu .test small { color: rgba(255, 255, 255, .9); }
.menu .test:disabled { background: #e5e5e5; color: #afafaf; border-color: #cecece; }
.menu .test:disabled small { color: #afafaf; }
.allowance-card { background: var(--yellow-l); border-color: #ffe08a; }
.allowance-card .q-bar { background: #fff; }
.allowance-card .q-bar i, .panel.center .q-bar i { background: var(--yellow); }
.al-won, .al-big { color: #b47b00; }

/* --- 진도 지도 --- */
.wk { border-radius: 50%; }
.wk.done { background: var(--yellow); border-color: var(--yellow-d); color: #fff; }
.wk.done i { color: #fff; }
.wk.now { background: var(--green); border-color: var(--green-d); color: #fff; outline: 4px solid var(--green-l); }
.wk.open { background: #fff; }
.wk.locked { background: #e5e5e5; border-color: #cecece; color: #afafaf; }

/* --- 문제 풀이 --- */
.listen-btn { background: var(--blue); border: 0; border-bottom: 5px solid var(--blue-d); }
.listen-btn.speaking { background: #49c0f8; }
.choice { border-radius: 18px; }
.choice.right { background: var(--green-l); border-color: var(--green); outline: 0; }
.choice.hint { outline: 0; border-color: var(--green); border-style: dashed; }
.choice.wrong { background: var(--red-l); border-color: var(--red); }
.choice.talk { outline: 0; border-color: var(--blue); background: var(--blue-l); }
.reveal .word-text { color: var(--green-d); }
.caption { background: var(--blue-l); color: #1477a8; border-radius: 14px; }
.round-btn { border-radius: 50%; }
.round-btn.mic { background: var(--red-l); border-color: #ffc1c3; }
.round-btn.mic.speaking { background: var(--red); border-color: var(--red-d); }
.round-btn.ok { background: var(--green-l); border-color: #b2f08a; }
.round-btn.rec { background: var(--yellow-l); border-color: #ffe08a; }
.tile { border-radius: 14px; }
.tile.wrong { background: var(--red-l); border-color: var(--red); }
.tile.hint { outline: 0; border-color: var(--green); border-style: dashed; }
.slot.on { border-bottom-color: var(--green); color: var(--green-d); }
.order-card.placed { background: var(--green-l); outline: 0; border-color: var(--green); }
.order-card .num { background: var(--green); }
.dots i { background: var(--line); }
.dots i.on { background: var(--green); }
.stars { color: var(--yellow); }

/* --- 읽기 · 단어 강조 --- */
.rline.on { background: var(--yellow-l); }
.tap.hl { background: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); color: #3c3c3c; }
.tap.ok { background: var(--green-l); color: var(--green-d); }
.tap.miss { background: var(--red-l); color: var(--red-d); }
.read-steps span { background: #f7f7f7; border: 2px solid var(--line); border-radius: 12px; }
.read-steps span.on { background: var(--yellow-l); border-color: var(--yellow); color: #8a6a00; }
.read-steps span.did:not(.on) { background: var(--green-l); border-color: #b2f08a; color: var(--green-d); }
.bubble.me { background: var(--green-l); border-color: #b2f08a; }
.bubble.you { background: #fff; }

/* --- 결과 화면 --- */
.done h1 { font-size: 2rem; color: var(--yellow-d); }
.lesson-count { color: var(--green-d); }

/* --- 탭 · 상점 · 도서관 · 관리자 --- */
.filter-tabs { background: #f2f2f2; border-radius: 14px; }
.filter-tabs button.on { background: #fff; color: var(--blue); box-shadow: 0 2px 0 var(--line); }
.shop-item.on { background: var(--green-l); border-color: var(--green); outline: 0; }
.shop-item.own small { color: var(--blue-d); }
.ichip { border: 2px solid var(--line); border-bottom-width: 4px; }
.ichip.on { background: var(--blue-l); border-color: var(--blue); color: #1477a8; }
.lib-item { border-radius: 18px; }
.new-t { color: var(--orange); }
.visit-count b { color: var(--blue); }
.weak > span { background: #f7f7f7; border: 2px solid var(--line); border-radius: 12px; }
.praise { background: var(--green-l); color: #3f7f00; border-radius: 14px; }
.warn { background: var(--yellow-l); border: 2px solid #ffe08a; border-radius: 16px; color: #6b5300; }
.toast { background: #3c3c3c; border-radius: 16px; font-weight: 800; }
.kv b { font-weight: 900; }
.week i { background: var(--blue); }
.rv-course, .rv-item { background: #f7f7f7; }

/* --- 로그인: 가족 이모티콘 → 숫자 키패드 --- */
.who-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.who-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 8px 14px; border-radius: 22px; }
.who-btn .emoji { font-size: 4.2rem; }
.who-btn b { font-size: 1.3rem; font-weight: 900; }
.who-btn small { color: #fff; background: var(--orange); border-radius: 10px; padding: 2px 8px; font-size: .8rem; }
.pin-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.pin-head .emoji { font-size: 4.6rem; }
.pin-head b { font-size: 1.5rem; font-weight: 900; }
.pin-head #pinTitle { font-size: 1.15rem; font-weight: 900; color: var(--blue); }
.pin-dots { display: flex; justify-content: center; gap: 18px; padding: 6px 0; }
.pin-dots i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line-dark); }
.pin-dots i.on { background: var(--blue); border-color: var(--blue-d); }
.pin-dots.wrong { animation: shake .35s; }
.pin-dots.wrong i { border-color: var(--red); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 330px; width: 100%; margin: 0 auto; }
.key { height: 66px; font-size: 1.8rem; font-weight: 900; border-radius: 18px; color: #3c3c3c; }
.key[data-k="⌫"] { color: var(--muted); }
.masked { -webkit-text-security: disc; letter-spacing: 4px; }

/* --- 관리자: 날짜별 공부 시간 --- */
.day-log { gap: 0; }
.day-row { display: grid; grid-template-columns: 1fr auto 4.5em; gap: 10px; align-items: center; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: .98rem; }
.day-row:last-of-type { border-bottom: 0; }
.day-row b { text-align: right; color: var(--green-d); font-weight: 900; }
.day-log small { padding-top: 8px; }
.pin-show { letter-spacing: 3px; color: var(--blue); }

/* 실전 표현 · 영작 · 대화 (2026-10-02) */
.phrase-card { display: flex; flex-direction: column; align-items: center; gap: min(12px, 1.4dvh); background: #fff; border: 2px solid var(--line); border-radius: 20px; padding: min(18px, 2dvh) 14px; text-align: center; }
.sit { font-size: 1.02rem; font-weight: 700; color: #6b5300; background: var(--yellow-l); border-radius: 12px; padding: 6px 12px; line-height: 1.45; }
.phrase-en { font-family: "Nunito", system-ui, sans-serif; font-size: clamp(1.35rem, 3.6dvh, 1.8rem); font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; background: none; border: 0; box-shadow: none; padding: 4px; color: var(--ink); }
.phrase-en.speaking { outline: 4px solid var(--yellow); border-radius: 12px; }
.phrase-en .tap { padding: 0 2px; border-radius: 6px; }
.ko-line { font-size: 1.05rem; font-weight: 800; color: #1477a8; text-align: center; line-height: 1.45; }
.ko-line.big { font-size: clamp(1.15rem, 3dvh, 1.4rem); }
.alts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.alts small { width: 100%; }
.text-prompt .sit { display: inline-block; }
.phrase-card.compose, .phrase-card.build { padding: 10px 12px; gap: 6px; }
.phrase-card.compose .guide { font-size: .95rem; margin: 0; }
#composeInput { height: 13dvh; min-height: 70px; resize: none; font-size: 1.25rem; }
.my-turn { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; background: var(--green-l); border: 2px solid #b2f08a; border-radius: 18px; padding: 10px 12px; }
.my-turn > b { color: var(--green-d); }
.my-turn .choices { width: 100%; }
.bubble small { display: block; font-size: .85rem; color: var(--muted); margin-top: 2px; }
.speak-line + .ko-line { margin-top: -6px; }

/* ===== 한 화면 맞춤 (2026-10-02 사용자 요청) =====
   뒤로 버튼 ~ 다음 버튼까지 가급적 스크롤 없이 한 화면에 — 그림·버튼·설명 상자를 화면 높이(dvh)에 맞춰 줄인다.
   그래도 넘치는 화면(홈 메뉴 · 긴 글 등)은 위쪽 바가 항상 위에, 다음 버튼이 항상 아래에 떠 있다.
   다음 버튼은 sticky라서 맨 아래까지 내리면 제자리로 돌아가 본문을 끝까지 가리지 않는다. */
.topbar {
  position: sticky; top: 0; z-index: 20; background: var(--bg);
  margin: calc(-1 * max(16px, env(safe-area-inset-top))) -16px 0;
  padding: max(10px, env(safe-area-inset-top)) 16px 6px;
}
.next-btn, .primary { position: sticky; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 15; }
.done { overflow: clip; } /* hidden은 sticky를 막는다 */
#app { gap: min(16px, 1.6dvh); }
.card-stage { gap: min(24px, 1.8dvh); }
.card-picture { width: min(78vw, 360px, 30dvh); }
.card-picture .pic.g1 { font-size: min(46vw, 210px, 18dvh); }
.round-btn { width: clamp(52px, 8dvh, 76px); height: clamp(52px, 8dvh, 76px); font-size: clamp(1.6rem, 3.6dvh, 2.2rem); }
.word-text { font-size: clamp(1.8rem, 4.6dvh, 2.4rem); }
/* 대화: 말풍선이 쌓여도 아래 내 차례 칸이 화면 안에 남도록 대화 칸만 따로 스크롤 */
.chat { max-height: 30dvh; }
/* 홈: 메뉴가 길어 스크롤이 생기므로 "오늘의 공부" 버튼은 화면 아래에 늘 떠 있게 하고,
   그만큼 아래 여백을 둬서 맨 아래 메뉴가 버튼에 가려지지 않게 한다 */
.menu #daily {
  position: fixed; z-index: 15;
  left: max(16px, calc(50% - 244px)); right: max(16px, calc(50% - 244px));
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: clamp(14px, 2.4dvh, 26px) 8px;
}
#app:has(.menu #daily) { padding-bottom: calc(max(10px, env(safe-area-inset-bottom)) + 110px); }

/* ===== 오늘 분량 진도 바 (2026-10-02 사용자 요청) =====
   하루치 공부 동안 화면 맨 아래에 "복습 › 단어 › 듣기 › 뜻 › 표현 › … › 말하기"를 띄운다.
   회색 글자 위에 같은 글자를 그라데이션 색으로 한 겹 더 깔고, 그 겹을 진행률(--p)까지만 보이게 가린다(가장자리는 부드럽게).
   --p가 바뀔 때 천천히 움직여서 색이 번지며 글자를 채우는 것처럼 보인다. */
@property --p { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
#dayBar {
  position: fixed; z-index: 30; display: flex; align-items: center; gap: 6px;
  left: max(8px, calc(50% - 252px)); right: max(8px, calc(50% - 252px)); bottom: max(6px, env(safe-area-inset-bottom));
  padding: 5px 8px; background: rgba(255, 255, 255, .97); border: 2px solid var(--line); border-radius: 16px; box-shadow: 0 3px 0 var(--line);
  --p: 0%; transition: --p .9s cubic-bezier(.3, .7, .3, 1);
}
#dayBar[hidden] { display: none; }
.db-title { flex: 0 0 auto; font-size: .78rem; font-weight: 900; color: var(--blue-d); }
.db-pct { flex: 0 0 auto; min-width: 2.6em; text-align: right; font-size: .78rem; font-weight: 900; color: var(--green-d); }
.db-track { position: relative; flex: 1; height: 30px; border-radius: 11px; overflow: hidden; background: #f1f1f1; }
.db-row { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 4px; font-size: clamp(.6rem, 2.75vw, .82rem); font-weight: 900; white-space: nowrap; }
.db-row span { flex: 1 1 0; min-width: 0; text-align: center; overflow: hidden; }
.db-row i { flex: 0 0 auto; font-style: normal; opacity: .5; }
.db-base { color: #b5b5b5; }
.db-fill {
  color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
  background: linear-gradient(90deg, #58cc02 0%, #2ec4a5 35%, #1cb0f6 65%, #a46cff 100%);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) - 8%), transparent var(--p));
  mask-image: linear-gradient(90deg, #000 calc(var(--p) - 8%), transparent var(--p));
}
.db-row span.now { text-decoration: underline 2px; text-underline-offset: 3px; }
.db-base span.now { color: #7a7a7a; }
/* 진도 바가 떠 있는 동안: 아래 버튼·본문이 바에 가리지 않게 */
body.with-daybar #app { padding-bottom: 64px; }
body.with-daybar .next-btn, body.with-daybar .primary { bottom: calc(max(6px, env(safe-area-inset-bottom)) + 52px); }

/* 일차별 공부 내용 한눈에 보기 · 하루치 끝 화면의 용돈 표시 (2026-10-02) */
.day-tabs { display: flex; flex-wrap: wrap; }
.day-tabs button { flex: 1 1 0; min-width: 3.6em; }
.day-tabs button:disabled { opacity: .4; }
.rv-line .ko-line { display: inline; font-size: .95rem; }
.won-get { color: var(--green-d); }

/* 로그인 화면: 가족 이름 아래 애칭 (2026-10-02) */
.who-btn b, .pin-head b { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.nick { font-size: .78em; font-weight: 800; color: var(--pink, #ff86d0); margin-top: 2px; }
/* 로그인 얼굴 그림 (2026-10-02) */
.who-btn .face { width: clamp(84px, 24vw, 110px); height: auto; aspect-ratio: 1; border-radius: 50%; }
.pin-head .face { width: clamp(96px, 26vw, 120px); height: auto; aspect-ratio: 1; border-radius: 50%; }
/* 홈의 오늘 분량 진도 바 (2026-10-02) — 아래 고정 바(#dayBar)와 같은 모양, 홈 안에 놓임 */
.home-bar-wrap { display: flex; flex-direction: column; gap: 4px; }
.home-bar { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: #fff; border: 2px solid var(--line); border-radius: 16px; box-shadow: 0 3px 0 var(--line); --p: 0%; }

/* 패턴 문법 (2026-10-02) — 문장 틀 · 문장 뜯어보기(덩어리마다 색) · 바꿔 말하기 */
.pattern-card { display: flex; flex-direction: column; gap: min(10px, 1.2dvh); background: #fff; border: 2px solid var(--line); border-radius: 20px; padding: 12px 14px; text-align: center; }
.pt-frame { font-family: "Nunito", system-ui, sans-serif; font-size: clamp(1.4rem, 3.8dvh, 1.9rem); font-weight: 900; color: var(--blue-d); }
.pt-tip { margin: 0; font-size: .95rem; line-height: 1.5; background: var(--yellow-l); border-radius: 12px; padding: 8px 10px; text-align: left; }
.pt-h { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; font-size: .98rem; }
.chunks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.chunk { display: flex; flex-direction: column; align-items: center; padding: 6px 10px; border-radius: 12px; border: 2px solid; border-bottom-width: 4px; box-shadow: none; }
.chunk b { font-family: "Nunito", system-ui, sans-serif; font-size: 1.15rem; font-weight: 900; }
.chunk small { font-size: .8rem; font-weight: 700; opacity: .8; }
.chunk i { font-style: normal; font-size: .75rem; color: var(--muted); margin-top: 2px; }
.chunk.c0 { background: #e9f7ff; border-color: #a9dcff; } .chunk.c1 { background: #fff1e0; border-color: #ffd29a; }
.chunk.c2 { background: #eafbe0; border-color: #b6ec8f; } .chunk.c3 { background: #f6ecff; border-color: #d9b8ff; }
.chunk.on { outline: 3px solid var(--blue); }
.pt-note { min-height: 3em; font-size: .95rem; line-height: 1.5; background: #f7f7f7; border-radius: 12px; padding: 8px 10px; }
.fills { display: flex; flex-direction: column; gap: 6px; }
.fill { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 8px 12px; border-radius: 14px; }
.fill b { font-family: "Nunito", system-ui, sans-serif; font-weight: 900; }
.fill small { color: #1477a8; font-weight: 700; }
/* 세로가 짧은 폰: 패턴 화면 여백·글자를 조금 줄여 한 화면에 */
@media (max-height: 800px) {
  .pattern-card { padding: 8px 10px; gap: 6px; }
  .pt-tip { font-size: .86rem; padding: 6px 8px; }
  .chunk { padding: 4px 8px; }
  .chunk b { font-size: 1rem; }
  .pt-note { min-height: 2.4em; font-size: .88rem; padding: 6px 8px; }
  .fill { padding: 6px 10px; }
}

/* 3천 문장 훈련 (2026-10-02) — 뜻 2초(줄어드는 막대) → 뜻은 그대로 보이고 조각 맞추기 (2026-10-04) */
.genius-entry.dad { background: #fff4e5; border-color: #ffc46b; }
.dad-mean { background: #fff; border: 2px solid var(--line); border-radius: 20px; padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; transition: filter .3s, opacity .3s; }
.dad-mean .ko-line.big { font-size: clamp(1.3rem, 3.6dvh, 1.7rem); }
.dad-mean.hide { filter: blur(8px); opacity: .35; }
.dad-timer { height: 8px; border-radius: 6px; background: #eee; overflow: hidden; }
.dad-timer i { display: block; height: 100%; width: 100%; background: var(--orange, #ff9600); }
.dad-mean.hide .dad-timer { visibility: hidden; }
.dad-play { display: flex; flex-direction: column; gap: 12px; }
.dad-play[hidden] { display: none; } /* 뜻을 보여 주는 5초 동안은 조각을 숨김 */

/* 미드 귀 뚫기 (2026-10-02) */
.genius-entry.ear { background: #eaf6ff; border-color: #8fd0ff; }
.ear-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 2px solid var(--line); border-radius: 20px; padding: 12px 14px; text-align: center; }
.ear-open { font-family: "Nunito", system-ui, sans-serif; font-size: clamp(1.5rem, 4dvh, 2rem); font-weight: 900; color: var(--blue-d); }
.ear-sound { font-size: 1.05rem; } .ear-sound b { font-size: 1.35rem; color: #e8590c; margin-left: 4px; }
.ear-now { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 2px 0; padding: 14px 12px; border-radius: 18px; font-family: "Nunito", system-ui, sans-serif; font-size: clamp(1.2rem, 3.2dvh, 1.55rem); font-weight: 900; min-height: 4.2em; }
.ear-now.speaking { outline: 4px solid var(--yellow); }
.ear-now small { width: 100%; font-family: inherit; font-size: .8rem; font-weight: 700; color: #1477a8; margin-top: 4px; }
.ear-o { color: #e8590c; background: #fff1e0; border-radius: 8px; padding: 0 4px; margin-right: 4px; }
.ear-e { color: var(--ink); }
.ear-count { text-align: center; font-weight: 800; color: var(--muted); } .ear-count b { color: var(--green-d); font-size: 1.3rem; }
/* 속도 3개 한 줄에 (2026-10-16) */
.ear-speed { flex-wrap: nowrap; gap: 6px; }
.ear-speed .chip { flex: 0 1 auto; white-space: nowrap; font-size: .85rem; padding: 5px 9px; }
.ear-speed .chip.on, .row .chip.on { background: var(--blue-l); border-color: var(--blue); color: #1477a8; }
.ear-ctrl { gap: 8px; } .ear-ctrl .next-btn { position: static; flex: 1; white-space: nowrap; font-size: 1.1rem; padding: 14px 6px; } .ear-ctrl #prev { flex: 0 0 64px; }
.ear-list { display: flex; flex-direction: column; gap: 6px; }
.ear-row { display: grid; grid-template-columns: 2.4em 1fr auto; grid-template-rows: auto auto; column-gap: 8px; text-align: left; padding: 8px 10px; border-radius: 14px; }
.ear-row .n { grid-row: span 2; align-self: center; font-weight: 900; color: var(--muted); }
.ear-row b { font-family: "Nunito", system-ui, sans-serif; }
.ear-row small { grid-column: 2; color: var(--muted); }
.ear-row i { grid-row: 1 / span 2; grid-column: 3; align-self: center; font-style: normal; color: var(--green-d); font-weight: 900; }
.ear-row.ok { background: var(--green-l); }
/* 아빠 음성 모드 (2026-10-03) — 운전 중에도 누르기 쉽게 버튼을 크게 */
.menu .big.dad-voice-entry { background: #1c7ed6; border-color: #1864ab; }
.dad-voice { background: #fff; border: 2px solid var(--line); border-radius: 20px; padding: 22px 16px; display: flex; flex-direction: column; gap: 14px; text-align: center; }
.dv-num { color: var(--muted); font-weight: 700; }
.dv-ko { font-size: clamp(1.4rem, 4dvh, 1.9rem); font-weight: 800; word-break: keep-all; }
.dv-en { font-size: clamp(1.3rem, 3.6dvh, 1.7rem); font-weight: 700; color: #1c7ed6; visibility: hidden; }
.dv-en.on { visibility: visible; }
.dv-step { color: var(--muted); font-weight: 600; min-height: 1.4em; }
.dv-ctrl { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 12px; margin-top: 14px; }
.dv-ctrl button { font-size: 2.4rem; padding: 22px 0; }
.dv-ctrl .dv-main { background: var(--yellow); font-size: 3rem; }
/* 아빠 3천 문장 — ⭐ 외울 문장 체크 · 속독 모드 (2026-10-03) */
.dad-star-row { display: flex; justify-content: flex-end; }
.dad-star.on { background: #fff3bf; color: #b26b00; }
#dvStar { display: flex; justify-content: center; }
.dad-fast { cursor: pointer; min-height: 230px; justify-content: center; }
.dv-q { font-size: clamp(1.5rem, 4.4dvh, 2rem); font-weight: 800; word-break: keep-all; }
.dv-a { font-size: clamp(1.3rem, 3.6dvh, 1.7rem); font-weight: 700; visibility: hidden; word-break: keep-all; }
.dv-a.ko { color: #1c7ed6; }
.dv-a.en { color: #c2255c; }
.dv-a.on { visibility: visible; }
.dv-ctrl.fast { grid-template-columns: 1fr 2.4fr; }
.dv-ctrl.fast .dv-main { font-size: 1.8rem; }
#fStar { display: flex; justify-content: center; }
/* 연설문 독해 (2026-10-03) */
.genius-entry.speech { background: #f3f0ff; border-color: #b9a8ff; }
.speech-list { display: flex; flex-direction: column; gap: 12px; }
.speech-item { display: flex; flex-direction: column; align-items: stretch; gap: 6px; text-align: left; padding: 16px; }
.speech-item b { font-size: 1.15rem; }
.speech-card { background: #fff; border: 2px solid var(--line); border-radius: 20px; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.speech-en { font-size: clamp(1.15rem, 3dvh, 1.4rem); font-weight: 700; line-height: 1.55; }
.speech-note { background: #fbfaff; border: 2px solid #e3dcff; border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.speech-note[hidden] { display: none; }
.sp-row { display: flex; flex-direction: column; gap: 4px; line-height: 1.55; }
.sp-row > b { font-size: .85rem; color: #6f42c1; }
.sp-chunks span { background: #efe9ff; border-radius: 6px; padding: 1px 4px; }
.sp-chunks i { color: #c2255c; font-style: normal; font-weight: 800; margin: 0 4px; }
.sp-ko { font-weight: 700; }
.sp-auto { display: flex; gap: 8px; align-items: center; justify-content: center; color: var(--muted); font-size: .9rem; margin-top: 8px; }
.ear-now .ear-ko { width: 100%; font-family: system-ui, sans-serif; font-size: .95rem; font-weight: 700; color: var(--text, #333); margin-top: 6px; } /* 문장 전체 뜻 (2026-10-03) */
#silent.on { background: #fff3bf; }
/* 미드 귀 뚫기 — 문장 양옆 ◀ ▶ 왕복 · ⭐ 외울 문장 (2026-10-03) */
.ear-nowrow { display: flex; align-items: stretch; gap: 6px; }
.ear-nowrow .ear-now { flex: 1; min-width: 0; }
.ear-step { flex: 0 0 44px; padding: 0; font-size: 1.4rem; border-radius: 14px; }
.chip.ear-star.on { background: #fff3bf; color: #b26b00; border-color: #ffc46b; }
.ear-card.small { padding: 10px 12px; gap: 4px; }
/* 속도 3단계 버튼 · 미드 이어 듣기 (2026-10-03) */
.dv-speed, .stream-speed { justify-content: center; margin-top: 10px; }
/* 레벨 테스트 결과표 · 레벨 이전 구간 잠금 (2026-10-04) */
.wk.below { background: #ececec; color: #b5b5b5; opacity: .45; box-shadow: none; border-color: #e0e0e0; cursor: not-allowed; filter: grayscale(1); }
.pl-report { background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; text-align: left; width: 100%; }
.pl-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-step { font-size: .8rem; font-weight: 700; padding: 3px 8px; border-radius: 10px; background: #fde2e2; }
.pl-step.ok { background: #d9f8e5; }
.pl-skill { display: grid; grid-template-columns: 7.5em 1fr 3em; align-items: center; gap: 8px; font-size: .9rem; }
.pl-skill b { text-align: right; }
.done:has(.pl-report) { padding-bottom: 120px; } /* 결과표가 길어 고정 버튼에 안내 글이 가리지 않게 */

/* 3천 문장 · 연설문 · 미드 입구 3개(2026-10-04부터 가족 모두) · 물방울(광택) 반짝이 버튼 (2026-10-04 사용자 요청: 흐려서 안 보임 → 진한 색 · 중간 크기 · 이쁘게) */
.dad-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-radius: 24px; color: #fff; text-align: left; text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .16), inset 0 2px 1px rgba(255, 255, 255, .6), 0 6px 14px rgba(0, 0, 0, .16); transition: transform .12s; }
.dad-btn > * { position: relative; z-index: 1; }
.dad-btn .emoji { font-size: 2rem; flex: 0 0 auto; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.dad-btn > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dad-btn b { font-size: 1.08rem; font-weight: 900; }
.dad-btn small { font-size: .8rem; font-weight: 700; opacity: .96; line-height: 1.35; }
/* 물방울 윗부분 하이라이트 */
.dad-btn::before, .menu .big.bubble::before, .speech-item.bubble-soft::before { content: ''; position: absolute; left: 6%; right: 6%; top: 4px; height: 44%; border-radius: 20px 20px 50% 50% / 20px 20px 100% 100%;
  background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .06)); pointer-events: none; z-index: 0; }
/* 반짝이는 빛줄기가 지나감 */
.dad-btn::after, .menu .big.bubble::after { content: ''; position: absolute; top: -10%; left: -60%; width: 35%; height: 120%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-20deg); animation: bubbleShine 3.8s ease-in-out infinite; pointer-events: none; z-index: 0; }
@keyframes bubbleShine { 0%, 62% { left: -60%; } 100% { left: 135%; } }
.dad-btn:active, .menu .big.bubble:active { transform: scale(.97); }
.dad-btn.dad { background: radial-gradient(circle at 28% 18%, #ffc27a, #ff8a1f 55%, #e86a00); }
.dad-btn.speech { background: radial-gradient(circle at 28% 18%, #c7adff, #8457ff 55%, #6236e0); }
.dad-btn.ear { background: radial-gradient(circle at 28% 18%, #7fdcff, #24a4ef 55%, #0c7cc4); }
.dad-btn + .dad-btn { margin-top: 10px; }
/* 안쪽 화면의 큰 시작 버튼 · 연설 목록도 같은 물방울 느낌 */
.menu .big.bubble { position: relative; overflow: hidden; border-radius: 26px; text-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .16), inset 0 2px 1px rgba(255, 255, 255, .6), 0 6px 14px rgba(0, 0, 0, .14); }
.menu .big.bubble > * { position: relative; z-index: 1; }
.menu .big.bubble#dadGo, .menu .big.bubble#earGo { background: radial-gradient(circle at 28% 18%, #8ff06a, #58cc02 55%, #46a302); }
.menu .big.bubble.dad-voice-entry { background: radial-gradient(circle at 28% 18%, #7fdcff, #24a4ef 55%, #0c7cc4); }
.speech-item.bubble-soft { position: relative; overflow: hidden; border: 0; border-radius: 22px; color: #3b2a7a; background: radial-gradient(circle at 25% 15%, #ffffff, #efe8ff 55%, #ddd0ff);
  box-shadow: inset 0 -4px 0 rgba(98, 54, 224, .14), inset 0 2px 1px rgba(255, 255, 255, .9), 0 5px 12px rgba(98, 54, 224, .14); }
.speech-item.bubble-soft > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .dad-btn::after, .menu .big.bubble::after { animation: none; display: none; } }

/* ===== 경쟁 바 (2026-10-04 사용자 요청: 딸·아들이 늘 서로의 레벨·용돈을 보며 경쟁) =====
   왼쪽 🏆 레벨 성취도(가족 4명) · 오른쪽 💰 이번 달 용돈(아이 둘). 막대 안에 사람마다 한 줄씩 나란히, 얼굴이 채운 높이를 타고 올라가고 앞선 아이 머리에 👑.
   폰(좁은 화면)은 본문 양옆을 막대 폭만큼 비우고, 넓은 화면은 본문 칸 바깥에 띄운다. */
.race-bar {
  position: fixed; z-index: 25; top: calc(max(10px, env(safe-area-inset-top)) + 62px); bottom: max(8px, env(safe-area-inset-bottom));
  width: 36px; padding: 4px 2px 5px; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  background: rgba(255, 255, 255, .94); border: 2px solid var(--line); border-bottom-width: 2px; border-radius: 14px; box-shadow: 0 3px 0 var(--line);
}
.race-bar:active { transform: none; box-shadow: 0 3px 0 var(--line); }
.race-bar.left { left: 3px; width: 66px; }
.race-bar.left .rc-cols { gap: 1px; }
.race-bar.left .rc-track { width: 8px; }
.race-bar.left .rc-face { width: 14px; height: 14px; border-width: 1.5px; }
.race-bar.left .rc-val { font-size: .62rem; }
.race-bar[hidden] { display: none; }
.race-bar.right { right: 3px; }
.rc-head { font-size: 1rem; text-align: center; }
.rc-cols { flex: 1; min-height: 0; display: flex; gap: 2px; }
.rc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding-top: 22px; }
.rc-track { position: relative; flex: 1; width: 11px; border-radius: 8px; background: #efefef; }
.rc-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; transition: height 1.2s cubic-bezier(.3, .7, .3, 1); }
.rc-col.girl .rc-fill { background: linear-gradient(0deg, #ff86d0, #ff4fa0); }
.rc-col.boy .rc-fill { background: linear-gradient(0deg, #6fd0ff, #1c8ff6); }
.rc-col.dad .rc-fill { background: linear-gradient(0deg, #ffc27a, #ff8a1f); }
.rc-col.mom .rc-fill { background: linear-gradient(0deg, #c7adff, #8457ff); }
.rc-col.other .rc-fill { background: linear-gradient(0deg, #b8f28a, #58cc02); }
.rc-tick { position: absolute; left: -2px; right: -2px; height: 2px; z-index: 1; background: rgba(255, 255, 255, .85); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .12); }
.rc-face {
  position: absolute; left: 50%; z-index: 2; width: 17px; height: 17px; transform: translate(-50%, 50%);
  border-radius: 50%; background: #fff; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  display: grid; place-items: center; transition: bottom 1.2s cubic-bezier(.3, .7, .3, 1);
}
.rc-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.rc-face .emoji { font-size: .7rem; }
.rc-col.girl .rc-face { border-color: #ff4fa0; }
.rc-col.boy .rc-face { border-color: #1c8ff6; }
.rc-col.dad .rc-face { border-color: #ff8a1f; }
.rc-col.mom .rc-face { border-color: #8457ff; }
.rc-col.me .rc-face { box-shadow: 0 0 0 2px var(--yellow), 0 1px 3px rgba(0, 0, 0, .3); }
.rc-crown { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: .7rem; animation: crownBob 1.6s ease-in-out infinite; }
@keyframes crownBob { 50% { transform: translate(-50%, -2px); } }
.rc-val { margin-top: 11px; font-size: .68rem; font-weight: 900; line-height: 1; color: #4b4b4b; }
.rc-col.girl .rc-val { color: #e0388a; }
.rc-col.boy .rc-val { color: #1679d6; }
.rc-col.dad .rc-val { color: #e06d00; }
.rc-col.mom .rc-val { color: #6236e0; }
@media (max-width: 599.98px) {
  body.with-race #app { padding-left: 72px; padding-right: 42px; }
  body.with-race .topbar { margin-left: -72px; margin-right: -42px; }
  body.with-race .menu #daily { left: 72px; right: 42px; }
  body.with-race #dayBar { left: 72px; right: 42px; }
}
@media (min-width: 600px) {
  .race-bar { width: 44px; }
  .race-bar.left { left: max(4px, calc(50% - 260px - 72px)); width: 66px; }
  .race-bar.left .rc-track { width: 10px; }
  .race-bar.left .rc-face { width: 17px; height: 17px; }
  .race-bar.right { right: max(4px, calc(50% - 260px - 52px)); }
  .rc-track { width: 13px; }
  .rc-face { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .rc-crown { animation: none; } .rc-fill, .rc-face { transition: none; } }

/* 아이 계정: 3천 문장 · 연설문 · 미드는 1년 과정(52주)을 다 통과해야 열림 (2026-10-04) — 그전에는 흐리게(그림자) + 자물쇠 안내 */
.dad-btn.adv-locked { filter: grayscale(.85) brightness(.92); opacity: .5; }
.dad-btn.adv-locked::after { animation: none; display: none; }
.dad-btn.adv-locked:active { transform: none; }
.adv-lock-note { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 16px; background: #f4f4f4; border: 2px dashed var(--line-dark); color: #555; }
.adv-lock-note .emoji { font-size: 1.6rem; }
.adv-lock-note span:last-child { display: flex; flex-direction: column; gap: 2px; line-height: 1.35; }
.adv-lock-note small { color: var(--muted); font-weight: 800; }

/* 안드로이드 카톡 안 브라우저 안내 띠 (2026-10-06) — 소리가 안 나므로 바깥 브라우저로 */
.inapp-warn { position: relative; z-index: 50; margin: 8px 12px 0; text-align: center; }
.inapp-warn a { display: inline-block; margin-top: 4px; padding: 6px 12px; border-radius: 12px; background: #4aa3ff; color: #fff; text-decoration: none; }

/* 영어단어 집중모드 (2026-10-06) — 스크롤 없이 한 화면에 (같은 날 사용자 요청: 글자 · 버튼이 너무 커서 아래로 스크롤해야 했음) */
.dad-btn.vocab { background: radial-gradient(circle at 28% 18%, #9ef0a6, #2fbf55 55%, #17953a); margin-bottom: 10px; }
.vc-note { font-size: .85rem; }
.vc-dir { justify-content: center; gap: 8px; }
.vc-dir .chip { font-size: .9rem; padding: 6px 10px; }
.vc-levels { display: grid; gap: min(10px, 1.2dvh); }
.vc-level, .vc-practice { display: flex; align-items: center; gap: 10px; width: 100%; padding: min(12px, 1.5dvh) 12px; text-align: left; border-radius: 18px; }
.vc-level .emoji, .vc-practice .emoji { font-size: clamp(1.4rem, 3.6dvh, 1.9rem); }
.vc-body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.vc-body b { font-size: 1.02rem; }
.vc-body b small { font-weight: 600; color: var(--muted); font-size: .8rem; }
.vc-body small { color: var(--muted); font-size: .8rem; }
.vc-level.l1 { background: #fff7d6; }
.vc-level.l2 { background: #e6f6ff; }
.vc-level.l3 { background: #f3ecff; }
.vc-practice { background: #fff1e0; }
.vc-bar { display: block; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; }
.vc-bar i { display: block; height: 100%; background: #2fbf55; }
/* 학습 화면: 단어 카드가 남는 높이를 쓰고, 아래 버튼들은 작게 */
.vc-card { flex: 1 1 auto; min-height: 0; justify-content: center; padding: min(14px, 1.8dvh) 12px; gap: min(8px, 1dvh); }
.vc-card .dv-num { font-size: .82rem; }
.vc-card .dv-step { font-size: .85rem; min-height: 1.2em; }
.vc-q { font-size: clamp(1.5rem, 5.4dvh, 2.4rem); font-weight: 900; line-height: 1.2; word-break: keep-all; }
.vc-a { font-size: clamp(1.3rem, 4.6dvh, 2rem); font-weight: 800; line-height: 1.2; color: #1c7ed6; visibility: hidden; word-break: keep-all; }
.vc-a.on { visibility: visible; }
.vc-star { align-self: center; font-size: .82rem; padding: 5px 10px; }
.vc-star.on { background: #ffe8a3; border-color: #f5c400; }
.vc-ctrl { margin-top: 0; gap: 10px; }
.vc-ctrl button { font-size: clamp(1.4rem, 3.6dvh, 1.9rem); padding: clamp(6px, 1.6dvh, 14px) 0; }
.vc-ctrl .dv-main { font-size: clamp(1.6rem, 4.2dvh, 2.2rem); }
.vc-opts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.vc-opts .vc-speed { display: contents; }
.vc-opts .chip { font-size: .8rem; padding: 5px 8px; }
.vc-links { gap: 4px; }
.vc-links .link-btn { padding: 2px 8px; font-size: .88rem; }
/* 영어로 묻는 문제의 질문 원문 — 스피커 아래 (2026-10-07) */
.q-src { margin: 6px auto 0; max-width: 100%; padding: 6px 14px; border-radius: 14px; background: #fff7d6; border: 2px solid #ffe08a; color: #3a3a3a; font-family: "Nunito", system-ui, sans-serif; font-weight: 800; font-size: clamp(1rem, 2.6dvh, 1.2rem); line-height: 1.35; text-align: center; word-break: keep-all; }

/* 글자 보기 문제(듣고 대답 고르기 · 듣고 뜻 고르기 · 상황에 맞는 말 등)는 조금 작게 — 로그인 막대가 붙은 좁은 폰에서도 한 화면에 (2026-10-07) */
#app:has(.choices.text) .text-prompt { padding: 8px 10px; font-size: 1rem; line-height: 1.35; }
#app:has(.choices.text) .text-prompt .sit { font-size: .92rem; padding: 4px 10px; }
#app:has(.choices.text) .ask-row { gap: 10px; }
#app:has(.choices.text) .listen-btn { width: 72px; height: 72px; font-size: 2.1rem; }
#app:has(.choices.text) .listen-btn.small { width: 58px; height: 58px; font-size: 1.7rem; }
#app:has(.choices.text) .q-src { margin-top: 2px; padding: 4px 10px; font-size: clamp(.95rem, 2.4dvh, 1.1rem); }
#app:has(.choices.text) .choices.text { gap: 7px; }
#app:has(.choices.text) .choices.text .choice { min-height: 46px; padding: 7px 12px; }
#app:has(.choices.text) .choices.text .wtxt { font-size: clamp(.95rem, 2.5dvh, 1.12rem); line-height: 1.25; }
#app:has(.choices.text) .choices.text .wtxt.ko { font-size: clamp(.95rem, 2.4dvh, 1.08rem); }
#app:has(.choices.text) .stars { font-size: 1.1rem; min-height: 1.3rem; }
/* 아주 낮은 화면(세로 700px 이하)은 한 번 더 */
@media (max-height: 700px) {
  #app:has(.choices.text) .listen-btn, #app:has(.choices.text) .listen-btn.small { width: 50px; height: 50px; font-size: 1.5rem; }
  #app:has(.choices.text) .choices.text .choice { min-height: 40px; padding: 5px 10px; }
  #app:has(.choices.text) .choices.text .wtxt { font-size: .93rem; }
  #app:has(.choices.text) .stars { display: none; }
}

/* 듣고 대답 고르기: 영어 아래 우리말 해석 */
.wsub { display: block; margin-top: 2px; font-size: .8rem; font-weight: 600; color: #6b6b6b; line-height: 1.25; word-break: keep-all; }
#app:has(.choices.text) .wsub { font-size: clamp(.72rem, 1.9dvh, .85rem); margin-top: 1px; }
#app:has(.choices.text .wsub) .choices.text { gap: 5px; }
#app:has(.choices.text .wsub) .choices.text .choice { min-height: 0; padding: 4px 10px; }
#app:has(.choices.text .wsub) .choices.text .wtxt { font-size: clamp(.9rem, 2.3dvh, 1.05rem); line-height: 1.2; }
#app:has(.choices.text .wsub) .wsub { font-size: clamp(.7rem, 1.8dvh, .8rem); line-height: 1.15; margin-top: 0; }
#app:has(.choices.text .wsub) .stars { min-height: 0; font-size: 1rem; }
.choice:has(.wsub) { flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.choice .wsub { text-align: center; }

/* 🔁 지난 전체 복습 버튼(하루 공부 바로 아래, 한 줄 전체) */
.menu .past-btn { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 12px; padding: 14px 10px; background: #e6f6ff; font-size: 1.2rem; text-align: left; }
.menu .past-btn .emoji { font-size: 2rem; }
.menu .past-btn > span:not(.emoji) { display: flex; flex-direction: column; gap: 2px; }
.menu .past-btn small { font-size: .82rem; font-weight: 600; line-height: 1.3; }
.vc-level:disabled { opacity: .5; }

/* 듣고 대답 고르기: 대화 제목 + 바로 앞 대화 2줄 (2026-10-11) */
.reply-ctx { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; text-align: left; }
.reply-ctx > b { font-size: .9rem; color: #1c7ed6; }
.rc-line { display: flex; gap: 6px; align-items: flex-start; font-size: .92rem; line-height: 1.3; }
.rc-line i { flex: 0 0 auto; font-style: normal; font-weight: 800; font-size: .78rem; color: #fff; background: #8a8a8a; border-radius: 8px; padding: 1px 6px; margin-top: 1px; }
.rc-line.me i { background: #58cc02; }
.rc-line span { display: flex; flex-direction: column; font-weight: 700; }
.rc-line small { font-weight: 600; color: var(--muted); font-size: .8rem; }
#app:has(.choices.text) .reply-ctx .rc-line { font-size: .86rem; }
/* 3천 문장 틀린 문장: ✅ 마스터 버튼 (2026-10-11) */
.dad-star-row { gap: 6px; flex-wrap: wrap; }
.chip.dad-master { background: #e6f9ec; color: #1e7a45; border-color: #9fe0b6; }
.chip.dad-master.on { background: #eee; color: var(--muted); }

/* 질문 원문을 스피커 옆 한 줄로 (2026-10-11) */
.ask-row:has(.q-src) { justify-content: center; gap: 10px; }
.ask-row .q-src { flex: 0 1 auto; margin: 0; text-align: left; }
.ask-row .q-src .wsub { display: block; }
#app:has(.choices.text) .ask-row:has(.q-src) .listen-btn,
#app:has(.choices.text) .ask-row:has(.q-src) .listen-btn.small { width: 50px; height: 50px; font-size: 1.45rem; flex: 0 0 auto; }
/* 앞 대화는 조금 작게 */
#app:has(.reply-ctx) .text-prompt { padding: 6px 10px; }
#app:has(.reply-ctx) .reply-ctx { gap: 2px; margin-bottom: 4px; }
#app:has(.reply-ctx) .rc-line { font-size: .82rem; }
#app:has(.reply-ctx) .rc-line small { font-size: .74rem; }
#app:has(.reply-ctx) .text-prompt .sit { font-size: .84rem; padding: 3px 8px; }
#app:has(.reply-ctx) .choices.text .choice { min-height: 40px; padding: 5px 10px; }
#app:has(.reply-ctx) .choices.text .wtxt { font-size: clamp(.9rem, 2.3dvh, 1.02rem); }
#app:has(.reply-ctx) .wsub { font-size: .76rem; }
#app:has(.reply-ctx) .stars { display: none; }

/* 넘치는 문제 화면만 단계적으로 줄이기 (2026-10-11, app.js fitTight) */
#app.tight1:has(.choices) .rc-line small { display: none; }
#app.tight1:has(.choices) .stars { display: none; }
#app.tight1:has(.choices) .choices.text .wsub { font-size: .72rem; }
#app.tight2:has(.choices) .reply-ctx .rc-line:not(:last-of-type) { display: none; }
#app.tight2:has(.choices) .q-src .wsub { font-size: .72rem; }
#app.tight2:has(.choices) .choices.text { gap: 5px; }
#app.tight3:has(.choices) .ask-row .listen-btn, #app.tight3:has(.choices) .ask-row .listen-btn.small { width: 42px; height: 42px; font-size: 1.2rem; }
#app.tight3:has(.choices) .choices.text .choice { min-height: 34px; padding: 4px 8px; }
#app.tight3:has(.choices) .choices.text .wtxt { font-size: .88rem; line-height: 1.2; }
#app.tight3:has(.choices) .q-src { font-size: .92rem; padding: 3px 8px; }
#app.tight3:has(.choices) .text-prompt { padding: 4px 8px; }

/* 연설문 새 단어 · 숙어 · 구동사 해설 (2026-10-11) */
.sp-words { display: flex; flex-direction: column; gap: 10px; }
.sp-word { background: #fff; border: 1.5px solid #e3dcff; border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.sw-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sw-head b { font-size: 1.12rem; color: #2b2250; }
.sw-kind { font-size: .72rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #eef2ff; color: #3d4ab8; }
.sw-kind.phr { background: #fff1e6; color: #c2410c; }
.sw-kind.idi { background: #e8f7ee; color: #15803d; }
.sw-kind.exp { background: #fdf2f8; color: #be185d; }
.sw-mean { font-weight: 700; color: #1f2937; }
.sw-note { font-size: .9rem; color: #4b5563; line-height: 1.55; }
.sw-ex { text-align: left; background: #f6f4ff; border: 0; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: .9rem; color: #3b2f86; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.sw-ex small { color: #6b7280; font-size: .82rem; }

/* 말로 대답하기 (2026-10-12) */
.tb-chat { max-height: 34dvh; }
.bubble.tb-now { outline: 3px solid #ffd43b; }
.tb-turn { display: flex; flex-direction: column; gap: 8px; }
.tb-hint { font-size: .95rem; color: #6b4f00; }
.tb-type { display: flex; gap: 8px; }
.tb-type input { flex: 1; font: inherit; font-size: 1.05rem; padding: 10px 12px; border-radius: 12px; border: 2px solid #d6dbe6; }
.tb-result { display: flex; flex-direction: column; gap: 6px; }
.tb-said { color: #374151; }
.tb-verdict { font-weight: 800; }
.tb-model { background: #f2fbf4; border: 2px solid #c8eed3; border-radius: 14px; padding: 8px 12px; }
.tb-model div { font-size: 1.2rem; font-weight: 800; line-height: 1.5; }
.tb-model span.ok { color: #15803d; }
.tb-model span.miss { color: #dc2626; text-decoration: underline wavy; }
.tb-model small, .tb-alts small { color: var(--muted); }
.tb-alts { font-size: .92rem; }
.tb-turn [hidden], .tb-chat [hidden] { display: none !important; }

/* 문장 훈련 ① 3번 듣기 (2026-10-12) */
.hear3 { display: flex; flex-direction: column; align-items: center; gap: 16px; margin: 18px 0; }
.round-btn.big { width: 110px; height: 110px; font-size: 3rem; }
.h3-dots { display: flex; gap: 12px; }
.h3-dots i { width: 22px; height: 22px; border-radius: 50%; background: #e5e7eb; display: block; }
.h3-dots i.on { background: #58cc02; }
.h3-text { font-size: 1.4rem; text-align: center; padding: 0 12px; }
.hear3 [hidden], #h3Next[hidden] { display: none !important; }

/* 3번 듣기: 앞 대화 · 단어 단계별 공개 (2026-10-12) */
.h3-chat { max-height: 26dvh; margin-bottom: 4px; }
.h3-text b { font-weight: 800; }
.h3-blank { color: #c4c9d4; font-style: normal; letter-spacing: -2px; }

/* 용돈 게이지: 남은 용돈 + 깎인 돈(회색 빗금) · 안내 말풍선 (2026-10-14) */
.al-bar { position: relative; display: flex; height: 14px; border-radius: 999px; background: #eef1f5; overflow: hidden; width: 100%; }
.al-bar .al-net { background: linear-gradient(90deg, #ffb703, #fb8500); height: 100%; }
.al-bar .al-cut { height: 100%; background: repeating-linear-gradient(135deg, #b8bec9 0 6px, #d7dbe2 6px 12px); }
.al-calc { color: #4b5563; }
.al-cut-t { color: #6b7280; text-decoration: line-through; }
.al-warn { color: #c2410c; font-weight: 700; }
.al-back { color: #15803d; font-weight: 700; }
.al-minus { color: #b91c1c; }
.tip-pop { position: absolute; z-index: 9999; max-width: 300px; background: #1f2937; color: #fff; border-radius: 12px; padding: 10px 12px; font-size: .92rem; line-height: 1.5; box-shadow: 0 6px 18px rgba(0,0,0,.25); pointer-events: none; }
.tip-pop small { color: #d1d5db; }
.rc-track { position: relative; }
.rc-cut { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #b8bec9 0 4px, #d7dbe2 4px 8px); border-radius: 4px; }

/* 용돈 지급 계산기 (2026-10-15) */
.pay-calc { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pay-amount { font-size: 2.2rem; color: #15803d; }
.pay-keys { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pay-keys .chip { min-width: 72px; font-size: 1.05rem; }

/* 🎓 심화 과정 (2026-10-16): 출입구 · 레벨 1~27 숫자 눈금 · 긴 듣기 · 바꿔 말하기 · 독해 */
.dad-btn.adv-entry { background: radial-gradient(circle at 28% 18%, #ffd98a, #ff9f1c 55%, #e07800); margin-bottom: 10px; }
.review-chip.adv { background: #e07800; margin-right: 4px; }
.adv-home-link { display: block; width: 100%; margin: 6px 0; padding: 10px 12px; border-radius: 14px; font-weight: 800; color: #b35f00; background: #fff4e0; border: 2px solid #ffc46b; }
.rc-scale-col { flex: 0 0 13px; display: flex; flex-direction: column; align-items: center; padding-top: 22px; }
.rc-scale { position: relative; flex: 1; width: 13px; }
.rc-scale i { position: absolute; right: 0; transform: translateY(50%); font-style: normal; font-size: .46rem; font-weight: 800; line-height: 1; color: #9a9a9a; }
.rc-tick.year { height: 3px; background: #ffb347; }
.read-head { display: flex; flex-direction: column; gap: 4px; background: #fff8ec; border: 2px solid #ffd59a; border-radius: 16px; padding: 12px 14px; margin-bottom: 8px; line-height: 1.5; }
.read-head b { color: #b35f00; }
.para-src { font-size: 1.15rem; font-weight: 800; margin-top: 6px; }
.ls-line { display: block; width: 100%; text-align: left; margin-bottom: 6px; }
/* 📖 독해 전체 문장 한눈에 (2026-10-16) */
.read-full { margin-bottom: 10px; }
.read-all { display: flex; flex-direction: column; gap: 10px; margin-bottom: 110px; }
.read-full .speech-en { font-size: 1.05rem; font-weight: 600; line-height: 1.6; }
.ra-en { display: block; width: 100%; text-align: left; font-size: 1.05rem; line-height: 1.5; }

/* 🎯 레벨 테스트 방식 선택 · 정밀 판정 (2026-10-17) */
.mode-pick { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.mode-pick .check { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; text-align: left; }
.mode-pick .check small { flex-basis: 100%; padding-left: 26px; }
.pl-fine { font-size: .95rem; padding: 6px 8px; border-radius: 10px; background: #e7f5ff; }
/* 🎯 레벨 테스트 패스 · 내 레벨 확인 (2026-10-18) */
.pass-btn { display: block; margin: 10px auto 0; padding: 10px 18px; border-radius: 14px; font-weight: 800; color: #6b6b6b; background: #f3f3f3; border: 2px dashed #c9c9c9; }
.dad-btn.level-check { background: radial-gradient(circle at 28% 18%, #9fd8ff, #3aa0f0 55%, #1c7fd0); margin-bottom: 10px; }
/* 🎺 용돈 적립 팡파르 (2026-10-18) */
.fanfare { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(20, 16, 40, .45); animation: ffIn .25s ease-out; transition: background .8s; }
.fanfare.ff-out { background: rgba(20, 16, 40, 0); pointer-events: none; }
.ff-card { position: relative; width: min(86vw, 360px); padding: 22px 18px 18px; border-radius: 26px; text-align: center; background: radial-gradient(circle at 50% 0%, #fff8d6, #ffe08a 55%, #ffc23d); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); animation: ffPop .5s cubic-bezier(.2, 1.6, .4, 1); transition: opacity .7s, transform .7s; }
.ff-out .ff-card { opacity: 0; transform: scale(.85); }
.ff-title { font-size: 1.25rem; font-weight: 900; color: #a45a00; }
.ff-amount { position: relative; z-index: 2; margin: 6px 0 10px; font-size: clamp(2.4rem, 11vw, 3.4rem); font-weight: 900; color: #e8590c; text-shadow: 0 3px 0 #fff, 0 0 18px rgba(255, 200, 0, .9); animation: ffGlow 1s ease-in-out infinite alternate; }
.ff-amount.ff-fly { animation: none; transition: transform 1s cubic-bezier(.5, -0.3, .7, .2), opacity 1s ease-in, filter 1s; transform: translate(var(--fx), var(--fy)) scale(.15) rotate(25deg); opacity: 0; filter: blur(1px); }
.ff-line { font-size: .95rem; font-weight: 700; color: #6b3d00; margin-top: 4px; }
.ff-burst { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.ff-bit { position: absolute; font-style: normal; font-size: 1.4rem; opacity: 0; animation: ffBit 1.4s var(--d) ease-out forwards; }
.ff-pulse { animation: ffPulse .9s ease-out; }
@keyframes ffIn { from { opacity: 0; } }
@keyframes ffPop { from { transform: scale(.3); opacity: 0; } }
@keyframes ffGlow { to { transform: scale(1.06); text-shadow: 0 3px 0 #fff, 0 0 28px rgba(255, 170, 0, 1); } }
@keyframes ffBit { 0% { transform: translate(0, 0) scale(.3); opacity: 1; } 80% { opacity: 1; } 100% { transform: translate(var(--x), var(--y)) scale(1.1) rotate(200deg); opacity: 0; } }
@keyframes ffPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 190, 0, .9); transform: scale(1.06); } 100% { box-shadow: 0 0 0 18px rgba(255, 190, 0, 0); transform: none; } }

/* 한 줄 맞춤 · 관리자 목록 칸 (2026-10-18) */
.lib-body small { overflow-wrap: normal; word-break: keep-all; }
.lib-item .lib-body { flex: 1 1 auto; min-width: 0; }
.lib-item .lib-count, .lib-item .visit-count { flex: 0 0 auto; white-space: nowrap; }
.profile-list .profile-btn.go-study { grid-column: 1 / -1; flex-direction: row; justify-content: center; gap: 12px; padding: 12px 14px; }
.profile-list .profile-btn.go-study .role-badge { margin-left: 4px; }
h1, .new-banner b, .new-banner span { word-break: keep-all; }
.admin-user > .emoji, .pay-kid > .emoji { font-size: 1.9rem; }
.admin-user, .pay-kid { gap: 10px; padding: 10px 12px; }
.profile-list .profile-btn.go-study { flex-wrap: nowrap; gap: 10px; }
.profile-list .profile-btn.go-study .av { flex: 0 0 auto; }
/* 넓으면 '공부하러 가기 · 레벨 · 일차'가 한 줄, 좁으면 두 줄로 — 겹치지 않게 */
.profile-list .profile-btn.go-study .gs-text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 10px; row-gap: 2px; min-width: 0; }
.profile-list .profile-btn.go-study .gs-label, .profile-list .profile-btn.go-study .role-badge { white-space: nowrap; margin: 0; }
.account-bar .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* 좁은 폰(폭 360 이하): 칸이 좁아 글자가 겹치거나 한 글자씩 끊기지 않게 */
.dad-btn b, .dad-btn small, .menu button small { word-break: keep-all; }
.profile-list .profile-btn.go-study .gs-label { min-width: 0; max-width: 100%; }
@media (max-width: 360px) {
  .visit-badge { font-size: .75rem; padding: 4px 7px; }
  .profile-list .profile-btn.go-study { gap: 6px; padding: 10px; }
  .profile-list .profile-btn.go-study .av { transform: scale(.8); margin: -6px; }
}
.quest .q-label { word-break: keep-all; }
.account-bar .who { min-width: 3.4em; }
@media (max-width: 380px) {
  /* 오늘의 미션: 좁으면 막대를 글자 아래 줄로 — 글자가 한 글자씩 세로로 끊기지 않게 */
  .quest { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; }
  .quest .emoji { grid-row: 1 / 3; }
  .quest .q-label { grid-column: 2; grid-row: 1; }
  .quest small { grid-column: 3; grid-row: 1; }
  .quest .q-bar { grid-column: 2 / 4; grid-row: 2; }
}
.day-row { grid-template-columns: minmax(0, 1fr) auto auto; column-gap: 8px; }
.day-row > * { word-break: keep-all; }