:root {
  --bg: #fdf7ee;
  --card: #ffffff;
  --ink: #2c2c2c;
  --muted: #7b7268;
  --line: #e8ddcd;
  --placeholder: #ded7cb;
  --blue: #3d8bfd;
  --green: #34b878;
  --red: #ef5350;
  --yellow: #ffc94d;
  --purple: #9b6bd6;
  --radius: 20px;
  --shadow: 0 3px 0 rgba(0,0,0,.07), 0 8px 20px rgba(0,0,0,.06);
}

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  background: var(--bg);
  color: var(--ink);
  padding-bottom: 40px;
}

#topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px calc(14px) 16px;
  padding-top: max(14px, env(safe-area-inset-top));
  background: rgba(253,247,238,.94);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--line);
}
#title { font-size: 20px; margin: 0; flex: 1; text-align: center; }
#spacer, .icon-btn { width: 44px; flex: none; }
.icon-btn {
  height: 44px; border: none; background: var(--card); border-radius: 14px;
  font-size: 22px; box-shadow: var(--shadow); cursor: pointer;
}

main { max-width: 900px; margin: 0 auto; padding: 18px 16px; }

/* ---------- 버튼 ---------- */
.btn {
  display: block; width: 100%; padding: 18px;
  font-size: 19px; font-weight: 700; font-family: inherit;
  border: none; border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  box-shadow: var(--shadow); cursor: pointer; margin-bottom: 12px;
  transition: transform .08s;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--blue); color: #fff; }
.btn.green { background: var(--green); color: #fff; }
.btn.purple { background: var(--purple); color: #fff; }
.btn.small { padding: 12px; font-size: 15px; }
.btn.ghost { background: transparent; box-shadow: none; border: 2px solid var(--line); color: var(--muted); }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

/* ---------- 세트 목록 ---------- */
.set-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); cursor: pointer;
}
.set-item .emoji { font-size: 30px; }
.set-item .meta { flex: 1; min-width: 0; }
.set-item .name { font-weight: 700; font-size: 17px; }
.set-item .sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.empty { text-align: center; color: var(--muted); padding: 50px 20px; line-height: 1.7; }

/* ---------- 단어 카드 그리드 ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.wcard {
  background: var(--card); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); text-align: center;
}
.wcard img, .wcard .ph {
  width: 100%; aspect-ratio: 1; display: block; background: #fff;
  object-fit: contain;
}
.wcard .ph { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.wcard .w { font-weight: 800; font-size: 18px; padding: 8px 6px 0; }
.wcard .m { font-size: 14px; color: var(--muted); padding: 2px 6px 12px; }

.spin { animation: spin 1.4s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- 플래시카드 ---------- */
.flash {
  background: var(--card); border-radius: 28px; box-shadow: var(--shadow);
  padding: 20px; text-align: center; min-height: 60vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  cursor: pointer;
}
.flash img { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: contain; }
.flash .word { font-size: 40px; font-weight: 800; letter-spacing: .5px; }
.flash .mean { font-size: 24px; color: var(--muted); }
.flash .ex { font-size: 17px; color: var(--muted); line-height: 1.5; }
.hint { text-align: center; color: var(--muted); font-size: 14px; margin: 14px 0; }

/* ---------- 퀴즈 ---------- */
.progress { height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; margin-bottom: 6px; }
.progress > div { height: 100%; background: var(--green); transition: width .3s; }
.qcount { text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.qstem {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; text-align: center; margin-bottom: 18px;
}
.qstem img { width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: contain; }
.qstem .big { font-size: 34px; font-weight: 800; }
.qstem .mid { font-size: 24px; font-weight: 700; line-height: 1.5; }
.qstem .label { font-size: 14px; color: var(--muted); margin-bottom: 10px; }
.qstem .cloze { font-size: 20px; line-height: 1.7; }
.qstem .cloze b { color: var(--blue); letter-spacing: 2px; }

.opt {
  display: block; width: 100%; padding: 18px; margin-bottom: 10px;
  font-size: 20px; font-weight: 700; font-family: inherit;
  background: var(--card); border: 3px solid transparent; border-radius: var(--radius);
  box-shadow: var(--shadow); cursor: pointer; transition: transform .08s;
}
.opt:active { transform: scale(.98); }
.opt.correct { background: var(--green); color: #fff; border-color: var(--green); }
.opt.wrong { background: var(--red); color: #fff; border-color: var(--red); }
.opt.reveal { border-color: var(--green); }
.opt[disabled] { cursor: default; }

.tiles { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; }
.tile {
  width: 52px; height: 60px; font-size: 26px; font-weight: 800; font-family: inherit;
  border: none; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); cursor: pointer;
}
.tile[disabled] { opacity: .25; }
.slots {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  min-height: 62px; margin-bottom: 14px;
}
.slot {
  width: 46px; height: 56px; border-bottom: 4px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800;
}
.slot.filled { border-bottom-color: var(--blue); }

.speak-btn {
  width: 96px; height: 96px; border-radius: 50%; border: none;
  background: var(--yellow); font-size: 42px; box-shadow: var(--shadow); cursor: pointer;
}

.feedback { text-align: center; font-size: 22px; font-weight: 800; min-height: 34px; margin: 6px 0 14px; }
.feedback.ok { color: var(--green); }
.feedback.no { color: var(--red); }

.result { text-align: center; padding: 30px 10px; }
.result .score { font-size: 60px; font-weight: 800; }
.result .emoji { font-size: 70px; }
.wrong-list { margin-top: 24px; text-align: left; }
.wrong-list h3 { font-size: 16px; color: var(--muted); }
.wrong-item {
  background: var(--card); border-radius: 14px; padding: 12px 14px;
  margin-bottom: 8px; box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center;
}
.wrong-item img { width: 46px; height: 46px; object-fit: contain; }

/* ---------- 편집 ---------- */
.edit-row {
  background: var(--card); border-radius: 14px; padding: 12px;
  margin-bottom: 10px; box-shadow: var(--shadow);
}
.edit-row input {
  width: 100%; font-size: 16px; font-family: inherit; padding: 9px 10px; margin-bottom: 6px;
  border: 2px solid var(--line); border-radius: 10px; background: #fffdf9;
}
.edit-row .del { background: none; border: none; color: var(--red); font-size: 14px; cursor: pointer; padding: 4px; }

.status-box {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 20px; text-align: center; line-height: 1.8;
}
.status-box .big { font-size: 44px; }
.err { color: var(--red); font-size: 15px; }

/* ---------- 아이 고르기 ---------- */
.child-card {
  display: flex; align-items: center; gap: 16px;
  background: var(--card); border-radius: 26px;
  border-left: 10px solid var(--accent);
  padding: 24px 20px; margin-bottom: 14px;
  box-shadow: var(--shadow); cursor: pointer;
  transition: transform .08s;
}
.child-card:active { transform: scale(.98); }
.child-card .face { font-size: 46px; line-height: 1; }
.child-card .meta { flex: 1; min-width: 0; }
.child-card .name { font-size: 24px; font-weight: 800; }
.child-card .sub { font-size: 14px; color: var(--muted); margin-top: 4px; }
.child-card .go { font-size: 26px; color: var(--muted); }

/* 워크시트가 누구 것인지 표시 */
.owner {
  display: inline-block; font-size: 14px; font-weight: 700;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #fff);
  border-radius: 99px; padding: 6px 14px; margin-bottom: 14px;
}

/* 설정 화면의 난이도 토글 */
.lv {
  padding: 12px 8px; font-size: 14px; font-weight: 700; font-family: inherit;
  border: 2px solid var(--line); border-radius: 12px;
  background: #fffdf9; color: var(--muted); cursor: pointer;
}
.lv.on { border-color: var(--blue); background: var(--blue); color: #fff; }

/* ---------- 단계 목록 ---------- */
.step-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--card); border-radius: var(--radius);
  padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow); cursor: pointer;
  transition: transform .08s;
}
.step-card:active { transform: scale(.98); }
.step-card.locked { opacity: .55; }
.step-card .num { font-size: 30px; }
.step-card .meta { flex: 1; min-width: 0; }
.step-card .name { font-weight: 800; font-size: 17px; }
.step-card .sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.step-card .score { font-weight: 800; color: var(--muted); font-size: 15px; }
.step-card .bar { height: 7px; background: var(--line); border-radius: 99px; margin-top: 8px; overflow: hidden; }
.step-card .bar > div { height: 100%; border-radius: 99px; }

/* ---------- 1단계 배우기 ---------- */
.learn-card {
  background: var(--card); border-radius: 28px; box-shadow: var(--shadow);
  padding: 20px; text-align: center; margin-bottom: 14px;
}
.learn-card img { width: 100%; max-width: 280px; aspect-ratio: 1; object-fit: contain; }
.learn-card .word { font-size: 38px; font-weight: 800; margin-top: 6px; }
.learn-card .def { font-size: 19px; color: var(--blue); font-weight: 700; margin-top: 8px; line-height: 1.4; }
.learn-card .ex { font-size: 16px; color: var(--muted); margin-top: 10px; line-height: 1.5; }

/* ---------- 2단계 짝 맞추기 ---------- */
/* 그림과 단어를 행으로 짝지어 배치한다. 두 칸의 높이가 항상 같아진다. */
.match-wrap {
  position: relative; display: grid;
  grid-template-columns: 1fr 1fr; gap: 10px 12px; align-items: stretch;
}
.match-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }
.match-item {
  border: 4px solid transparent; border-radius: 18px; background: var(--card);
  box-shadow: var(--shadow); cursor: pointer; padding: 5px; font-family: inherit;
  transition: transform .1s, border-color .1s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.match-item.pic { min-height: 150px; }
.match-item.pic img { width: 100%; height: 132px; object-fit: contain; }
.match-item.word { font-size: 21px; font-weight: 800; word-break: break-word; }
.match-item.picked {
  border-color: var(--blue); border-width: 8px; padding: 1px;
  transform: scale(1.04);
  box-shadow: 0 0 0 4px rgba(61,139,253,.22), var(--shadow);
}
.match-item.done { opacity: .45; }
.match-item.shake { animation: shake .35s; border-color: var(--red); }
@keyframes shake { 25% { transform: translateX(-7px) } 75% { transform: translateX(7px) } }

/* 정의가 붙는 경우 — 그림은 최대한 크게, 정의는 아래 작게 */
.match-item.pic.withdef { padding: 6px; }
.match-item.pic.withdef img { height: 128px; }
.match-item.pic.withdef .d {
  font-size: 11.5px; line-height: 1.3; color: var(--muted); font-weight: 600; text-align: center;
}

/* ---------- 4단계 듣고 쓰기 ---------- */
/* 글자 수에 따라 칸을 줄여 한 줄에 담는다. 단어 모양이 보여야 철자가 기억난다. */
.spell-row { display: flex; flex-wrap: nowrap; gap: 6px; justify-content: center; margin: 18px 0 8px; }
.spell-row[data-len="m"] { gap: 5px; }
.spell-row[data-len="l"], .spell-row[data-len="xl"] { gap: 4px; }
.letter {
  width: 46px; height: 58px; font-size: 26px; font-weight: 800; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; text-align: center; flex: 0 0 auto; padding: 0;
}
.spell-row[data-len="m"] .letter { width: 38px; height: 52px; font-size: 22px; }
.spell-row[data-len="l"] .letter { width: 31px; height: 46px; font-size: 19px; border-radius: 9px; }
.spell-row[data-len="xl"] .letter { width: 25px; height: 40px; font-size: 16px; border-radius: 8px; }
.spell-row[data-len="l"] .letter.blank, .spell-row[data-len="xl"] .letter.blank { border-width: 2px; }
.letter.given { background: var(--line); color: var(--ink); }
.letter.blank { border: 3px solid var(--blue); background: #fffdf9; color: var(--ink); }
.letter.blank.ok { border-color: var(--green); background: var(--green); color: #fff; }
.letter.blank.no { border-color: var(--red); background: var(--red); color: #fff; }
.qstem .def { font-size: 17px; color: var(--blue); font-weight: 700; }

/* ---------- 5단계 실전 ---------- */
.answer-box {
  width: 100%; padding: 16px; font-size: 24px; font-weight: 700; font-family: inherit;
  text-align: center; border: 3px solid var(--blue); border-radius: var(--radius);
  background: var(--card); margin-bottom: 10px;
}
.answer-box.ok { border-color: var(--green); background: var(--green); color: #fff; }
.answer-box.no { border-color: var(--red); background: var(--red); color: #fff; }


/* ---------- 정답 · 오답 전체 화면 표시 ---------- */
/* 한국 학교 관습대로 정답이 빨간 동그라미. 오답은 아이가 상처받지 않게 파란색. */
.verdict {
  position: fixed; inset: 0; z-index: 999;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: rgba(253,247,238,.93); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity .22s; pointer-events: none;
}
.verdict.in { opacity: 1; }
.verdict.ok { color: #e53935; }
.verdict.no { color: #3d8bfd; }
.verdict .mark { width: min(58vw, 260px); height: min(58vw, 260px); }
.verdict.in .mark { animation: pop .34s cubic-bezier(.2,1.4,.4,1); }
@keyframes pop { from { transform: scale(.4); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.verdict .say { font-size: 40px; font-weight: 800; letter-spacing: .5px; }
.verdict .note {
  margin-top: 8px; font-size: 30px; font-weight: 800; letter-spacing: 2px;
  color: var(--ink); background: var(--card); padding: 8px 20px; border-radius: 16px;
  box-shadow: var(--shadow);
}

.tune-h { font-size: 15px; color: var(--muted); margin: 22px 0 10px; }

/* ---------- 설정 화면의 선택 칩 ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  flex: 1 1 calc(50% - 4px); min-width: 130px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 12px 8px; font-size: 15px; font-weight: 700; font-family: inherit;
  border: 2px solid var(--line); border-radius: 14px;
  background: #fffdf9; color: var(--muted); cursor: pointer;
}
.chip small { font-size: 12px; font-weight: 400; opacity: .85; }
.chip.on { border-color: var(--blue); background: var(--blue); color: #fff; }


/* ---------- 입력칸 안내 문구 ---------- */
/* 아이가 아직 안 쓴 자리라는 표시일 뿐이니, 실제 답보다 훨씬 옅게 보여야 한다. */
input::placeholder { color: var(--placeholder); opacity: 1; font-weight: 400; }
.answer-box::placeholder { color: var(--placeholder); font-weight: 500; font-size: 20px; }

/* ---------- 공유받은 워크시트 표시 ---------- */
.set-item .shared {
  display: inline-block; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: var(--muted);
  background: var(--line); border-radius: 99px; padding: 1px 8px;
}

/* ---------- 설정의 워크시트 정리 ---------- */
.sheet-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border-radius: 14px; padding: 12px 14px;
  margin-bottom: 8px; box-shadow: var(--shadow);
}
.sheet-row .meta { flex: 1; min-width: 0; }
.sheet-row .name { font-weight: 700; font-size: 15px; }
.sheet-row .sub { font-size: 12px; color: var(--muted); margin-top: 3px; }
.del-btn {
  flex: none; border: 2px solid var(--line); background: transparent; color: var(--red);
  font-family: inherit; font-size: 13px; font-weight: 700;
  border-radius: 10px; padding: 8px 12px; cursor: pointer;
}
.del-btn:active { background: var(--red); color: #fff; border-color: var(--red); }

/* ---------- 은빈: 배우기 화면의 한글 뜻 (그림 이해용) ---------- */
.learn-card .ko { font-size: 17px; color: var(--muted); font-weight: 700; margin-top: 4px; }
.learn-card .word .pos { font-size: 15px; font-weight: 600; color: var(--muted); }

/* ---------- 은빈: 정의가 붙은 짝 맞추기 카드 ---------- */

/* ---------- 정의의 핵심어 ---------- */
.kw { font-style: normal; color: #e53935; font-weight: 800; }

/* ---------- 그림 힌트 ---------- */
/* 앞 단계에서 그림으로 익히고, 뒤 단계에서는 막혔을 때만 꺼내 본다. */
.pic-hint { margin-top: 12px; }
.pic-hint .btn { margin: 0 auto; width: auto; padding: 8px 16px; }
.pic-hint img { width: 100%; max-width: 190px; aspect-ratio: 1; object-fit: contain; margin: 0 auto; display: block; }
/* display:block 이 hidden 속성을 덮어쓰지 않도록 */
.pic-hint img[hidden] { display: none; }

/* ---------- 워크시트 종류 배지 ---------- */
.kind {
  display: inline-block; white-space: nowrap; font-size: 12px; font-weight: 800;
  border-radius: 99px; padding: 2px 9px;
}
.kind.novel { background: #efe6fb; color: #7a49c4; }
.kind.nonfiction { background: #e3f0ff; color: #1f66c9; }

/* 철자 채우기 단계의 정의는 강조 없이 검은 글씨로 */
.qstem .def.plain { color: var(--ink); font-weight: 700; }

/* ---------- 이모지 그림 ---------- */
/* 기기와 상관없이 같은 그림이 나오도록 서버가 내려주는 SVG 를 쓴다. */
.emo { width: 1em; height: 1em; vertical-align: -0.16em; display: inline-block; }
.child-card .face .emo { width: 46px; height: 46px; vertical-align: middle; }
.step-card .num .emo { width: 30px; height: 30px; vertical-align: middle; }
.kind .emo { width: 13px; height: 13px; vertical-align: -0.12em; }
.owner .emo { width: 15px; height: 15px; vertical-align: -0.18em; }