/* ===== 단어 놀이터 — 스타일 =====
   팔레트
   --sky      #EAF4FF  페이지 바탕(하늘)
   --paper    #FFFFFF  노트 종이
   --ink      #223052  잉크(본문)
   --ink-soft #6B7590  옅은 잉크
   --coral    #FF6F59  주 버튼
   --lemon    #FFD43B  별, 강조
   --mint     #35C088  정답
   --berry    #F25C5C  오답
   --grape    #7B6CF6  게임 카드
   --line-blue #A9CBF2 / --line-red #F3A6A6  4선 노트 줄
*/
:root {
  --sky: #EAF4FF;
  --sky-deep: #CFE3FA;
  --paper: #FFFFFF;
  --ink: #223052;
  --ink-soft: #6B7590;
  --coral: #FF6F59;
  --coral-dark: #D9503B;
  --lemon: #FFD43B;
  --lemon-dark: #D9AE1E;
  --mint: #35C088;
  --mint-dark: #23996A;
  --berry: #F25C5C;
  --grape: #7B6CF6;
  --grape-dark: #5B4CD6;
  --line-blue: #A9CBF2;
  --line-red: #F3A6A6;
  --shadow: 0 6px 18px rgba(34, 48, 82, 0.08);
  --radius: 20px;
  --font-ko: 'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-head: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-en: 'Fredoka', 'Comic Sans MS', 'Arial Rounded MT Bold', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-ko);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--sky);
  background-image: radial-gradient(var(--sky-deep) 1.4px, transparent 1.6px);
  background-size: 26px 26px;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--grape); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 400; margin: 0; text-wrap: balance; }

#app { max-width: 600px; margin: 0 auto; padding: 0 16px 40px; }

/* ----- 상단 바 ----- */
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 10px;
  padding-block: 12px;
  background: linear-gradient(var(--sky) 80%, rgba(234, 244, 255, 0));
}
.topbar-title { font-family: var(--font-head); font-size: 1.35rem; }
.top-btn {
  width: 48px; height: 48px; border-radius: 14px; border: 0;
  background: var(--paper); box-shadow: 0 3px 0 var(--sky-deep); font-size: 1.4rem;
}
.top-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--sky-deep); }
.pill {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  background: var(--paper); font-family: var(--font-en); font-weight: 600;
  font-variant-numeric: tabular-nums; box-shadow: 0 2px 0 var(--sky-deep);
}

.screen { display: flex; flex-direction: column; gap: 18px; padding-top: 6px; }

/* ----- 공통 버튼 ----- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 56px; padding: 10px 24px; border: 0; border-radius: 18px;
  font-family: var(--font-head); font-size: 1.2rem; color: #fff;
  background: var(--coral); box-shadow: 0 5px 0 var(--coral-dark);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--coral-dark); }
.btn.grape { background: var(--grape); box-shadow: 0 5px 0 var(--grape-dark); }
.btn.grape:active { box-shadow: 0 1px 0 var(--grape-dark); }
.btn.ghost { background: var(--paper); color: var(--ink); box-shadow: 0 5px 0 var(--sky-deep); }
.btn.ghost:active { box-shadow: 0 1px 0 var(--sky-deep); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ----- 홈 ----- */
.hero { text-align: center; padding-block: 8px 4px; }
.hero-emojis { font-size: 2.4rem; letter-spacing: 0.15em; }
.hero h1 { font-size: 2.6rem; line-height: 1.15; }
.hero p { margin: 6px 0 0; color: var(--ink-soft); }

.menu { display: grid; gap: 14px; }
.menu-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 420px) { .menu-row { grid-template-columns: 1fr; } }
.menu-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  padding: 20px 22px; border: 0; border-radius: var(--radius); text-align: left;
  color: #fff; transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.menu-card:active { transform: translateY(4px); }
.menu-card .mc-icon { font-size: 2.2rem; line-height: 1; }
.menu-card .mc-title { font-family: var(--font-head); font-size: 1.6rem; line-height: 1.2; }
.menu-card .mc-desc { font-size: 0.95rem; opacity: 0.92; }
.learn-card { background: var(--coral); box-shadow: 0 6px 0 var(--coral-dark); }
.learn-card:active { box-shadow: 0 1px 0 var(--coral-dark); }
.game-card { background: var(--grape); box-shadow: 0 6px 0 var(--grape-dark); }
.game-card:active { box-shadow: 0 1px 0 var(--grape-dark); }
.game-card .mc-title { font-size: 1.35rem; }

.wordlist { background: var(--paper); border-radius: var(--radius); padding: 16px 18px 18px; box-shadow: var(--shadow); }
.wordlist h2 { font-size: 1.2rem; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.wordlist h2 small { font-family: var(--font-ko); font-size: 0.85rem; color: var(--ink-soft); font-weight: normal; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px;
  border: 2px solid var(--sky-deep); border-radius: 999px; background: var(--sky);
}
.chip:active { background: var(--sky-deep); }
.chip .en { font-family: var(--font-en); font-weight: 600; font-size: 1.05rem; }
.chip .ko { color: var(--ink-soft); font-size: 0.9rem; }

/* ----- 학습 ----- */
.dots { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--sky-deep);
}
.dot.copy.done { background: var(--coral); border-color: var(--coral); }
.dot.blank.done { background: var(--grape); border-color: var(--grape); }
.dot.now { border-color: var(--ink); transform: scale(1.25); }

.wordcard {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  background: var(--paper); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow);
}
.wordcard .emoji { font-size: 3rem; line-height: 1; }
.wordcard .meaning { font-family: var(--font-head); font-size: 1.7rem; }
.wordcard .meaning small { display: block; font-family: var(--font-ko); font-size: 0.85rem; color: var(--ink-soft); }
.speak {
  border: 2px solid var(--sky-deep); background: var(--sky); border-radius: 14px;
  padding: 8px 12px; font-family: var(--font-head); font-size: 1rem; white-space: nowrap;
}
.speak:active { background: var(--sky-deep); }

.task-label { text-align: center; font-family: var(--font-head); font-size: 1.25rem; }
.task-label b { color: var(--coral); font-family: var(--font-en); }
.task-label.blank b { color: var(--grape); }

.model-word {
  text-align: center; font-family: var(--font-en); font-weight: 600; font-size: 2.3rem;
  letter-spacing: 0.06em; color: var(--ink-soft); min-height: 1.3em; line-height: 1.3;
}
.model-word.peek { color: var(--grape); }

.notebook {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 14px; overflow-x: auto;
}
.write-row {
  --cell: 52px;
  position: relative; display: flex; justify-content: center; gap: 8px;
  padding-block: 10px;
  /* 영어 4선 노트: 파란 줄 3개 + 빨간 기준선 */
  background:
    linear-gradient(var(--line-blue), var(--line-blue)) 0 15% / 100% 2px no-repeat,
    repeating-linear-gradient(90deg, var(--line-blue) 0 7px, transparent 7px 14px) 0 47% / 100% 2px no-repeat,
    linear-gradient(var(--line-red), var(--line-red)) 0 79% / 100% 2px no-repeat,
    linear-gradient(var(--line-blue), var(--line-blue)) 0 100% / 100% 2px no-repeat;
}
.cell {
  width: var(--cell); height: calc(var(--cell) * 1.3); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en); font-weight: 600; font-size: calc(var(--cell) * 0.8);
  line-height: 1; color: var(--ink); border-radius: 10px;
}
.cell.space { width: calc(var(--cell) * 0.5); }
.cell-input {
  margin: 0; padding: 0; text-align: center; caret-color: var(--coral);
  border: 2px dashed rgba(255, 111, 89, 0.55); background: rgba(255, 111, 89, 0.08);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.cell-input::placeholder { color: rgba(34, 48, 82, 0.22); }
.cell-input:focus { outline: 0; border-style: solid; border-color: var(--coral); background: #FFF3F0; }
.blank .cell-input { border-color: rgba(123, 108, 246, 0.55); background: rgba(123, 108, 246, 0.08); caret-color: var(--grape); }
.blank .cell-input:focus { border-color: var(--grape); background: #F3F1FF; }
.cell-input.ok { border-style: solid; border-color: var(--mint); background: #E6F8F0; color: var(--mint-dark); }
.cell-input.bad { border-style: solid; border-color: var(--berry); background: #FFECEC; color: var(--berry); }
.write-row.shake { animation: shake 0.4s ease; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  50% { transform: translateX(7px); }
  75% { transform: translateX(-4px); }
}
.feedback { min-height: 2em; text-align: center; font-family: var(--font-head); font-size: 1.3rem; }
.feedback.good { color: var(--mint-dark); animation: pop 0.35s ease; }
.feedback.oops { color: var(--berry); }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.learn-tools { display: flex; justify-content: center; gap: 10px; }
.tool-btn {
  border: 2px solid var(--sky-deep); background: var(--paper); border-radius: 12px;
  padding: 6px 14px; font-family: var(--font-head); font-size: 1rem; color: var(--ink-soft);
}
.tool-btn:active { background: var(--sky); }

/* ----- 게임: 짝 맞추기 ----- */
.match-hint { text-align: center; color: var(--ink-soft); margin: 0; }
.match-board { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.match-btn {
  min-height: 62px; padding: 8px 12px; border-radius: 16px; border: 3px solid var(--sky-deep);
  background: var(--paper); box-shadow: 0 4px 0 var(--sky-deep);
  font-size: 1.2rem; transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}
.match-btn.en { font-family: var(--font-en); font-weight: 600; font-size: 1.35rem; }
.match-btn.ko { font-family: var(--font-head); }
.match-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sky-deep); }
.match-btn.selected { border-color: var(--grape); background: #F3F1FF; box-shadow: 0 4px 0 var(--grape); }
.match-btn.bad { border-color: var(--berry); background: #FFECEC; box-shadow: 0 4px 0 var(--berry); animation: shake 0.4s ease; }
.match-btn.matched {
  border-color: var(--mint); background: #E6F8F0; color: var(--mint-dark);
  box-shadow: 0 4px 0 var(--mint); cursor: default; animation: pop 0.35s ease;
}

/* ----- 게임: 4지선다 ----- */
.progress { height: 12px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 2px var(--sky-deep); overflow: hidden; }
.progress > i { display: block; height: 100%; background: var(--grape); border-radius: 999px; transition: width 0.3s ease; }
.quiz-q {
  background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px 18px; text-align: center;
}
.quiz-q .emoji { font-size: 4.2rem; line-height: 1; }
.quiz-q .meaning { font-family: var(--font-head); font-size: 2rem; margin-top: 8px; }
.quiz-q .ask { color: var(--ink-soft); margin: 4px 0 0; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 380px) { .options { grid-template-columns: 1fr; } }
.opt {
  min-height: 66px; border-radius: 16px; border: 3px solid var(--sky-deep);
  background: var(--paper); box-shadow: 0 4px 0 var(--sky-deep);
  font-family: var(--font-en); font-weight: 600; font-size: 1.5rem;
  transition: transform 0.08s ease, background 0.15s ease;
}
.opt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sky-deep); }
.opt:disabled { cursor: default; }
.opt.ok { border-color: var(--mint); background: #E6F8F0; color: var(--mint-dark); box-shadow: 0 4px 0 var(--mint); animation: pop 0.35s ease; }
.opt.bad { border-color: var(--berry); background: #FFECEC; color: var(--berry); box-shadow: 0 4px 0 var(--berry); animation: shake 0.4s ease; }
.opt.dim { opacity: 0.5; }

/* ----- 결과 ----- */
.result { text-align: center; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.result h2 { font-size: 2.2rem; }
.stars { font-size: 3.2rem; letter-spacing: 0.1em; line-height: 1; }
.stars .off { filter: grayscale(1); opacity: 0.35; }
.result .score { font-family: var(--font-en); font-weight: 600; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.result .score small { font-family: var(--font-ko); font-size: 1rem; font-weight: normal; color: var(--ink-soft); }
.review { width: 100%; background: var(--paper); border-radius: var(--radius); padding: 14px 18px; box-shadow: var(--shadow); text-align: left; }
.review h3 { font-size: 1.1rem; margin-bottom: 8px; }
.confetti { font-size: 2.6rem; animation: pop 0.5s ease; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ----- 홈: 주차 선택 ----- */
[hidden] { display: none !important; }
.loading { margin: 0; text-align: center; color: var(--ink-soft); padding-block: 10px; }
.loading.error { color: var(--berry); }
.loading b { color: var(--ink); }
.week-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.week-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 118px; padding: 10px 14px; border-radius: 16px;
  border: 3px solid var(--sky-deep); background: var(--paper); box-shadow: 0 4px 0 var(--sky-deep);
  transition: transform 0.08s ease;
}
.week-chip:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sky-deep); }
.week-chip .wk-label { font-family: var(--font-head); font-size: 1.15rem; }
.week-chip .wk-label em { font-style: normal; font-family: var(--font-ko); font-size: 0.75rem; color: var(--coral); }
.week-chip .wk-count { font-family: var(--font-en); font-weight: 500; font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.week-chip.selected { border-color: var(--lemon); background: #FFF8DB; box-shadow: 0 4px 0 var(--lemon-dark); }
.week-chip.selected .wk-count { color: var(--lemon-dark); }
.week-chips.small .week-chip { min-width: 0; padding: 6px 10px; }
.week-chips.small .week-chip .wk-label { font-size: 0.95rem; }
.home-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; }
.demo-note { margin: 0; font-size: 0.85rem; color: var(--ink-soft); text-align: center; }

/* ----- 등록: 비밀번호 ----- */
.gate { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 20px; }
.gate-icon { font-size: 3rem; }
.gate h2 { font-size: 1.8rem; }
.gate p { margin: 0; color: var(--ink-soft); }
.pin-form { display: flex; gap: 10px; margin-top: 6px; }
.pin-form input {
  width: 150px; min-height: 56px; padding: 0 14px; border-radius: 16px; border: 3px solid var(--sky-deep);
  font-family: var(--font-en); font-size: 1.4rem; letter-spacing: 0.2em; text-align: center;
}

/* ----- 등록: 편집 ----- */
.reg { display: flex; flex-direction: column; gap: 16px; }
.reg-card { background: var(--paper); border-radius: var(--radius); padding: 16px 18px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 12px; }
.reg-card h2 { font-size: 1.25rem; }
.week-pick { display: flex; gap: 8px; }
.week-pick select {
  flex: 1; min-height: 48px; padding: 0 10px; border-radius: 12px; border: 3px solid var(--sky-deep);
  background: var(--paper); font-family: var(--font-head); font-size: 1.05rem; color: var(--ink);
}
.reg-note { margin: 0; font-size: 0.9rem; color: var(--ink-soft); text-align: center; }
.row-head, .row { display: grid; grid-template-columns: 1.3fr 1fr 64px 40px; gap: 8px; align-items: center; }
.row-head { font-size: 0.8rem; color: var(--ink-soft); padding: 0 4px; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.row input {
  min-width: 0; min-height: 46px; padding: 0 10px; border-radius: 12px; border: 2px solid var(--sky-deep);
  font-family: var(--font-ko); font-size: 1.05rem; color: var(--ink); background: var(--paper);
}
.row input:focus { outline: 0; border-color: var(--grape); background: #F8F7FF; }
.row .in-word { font-family: var(--font-en); font-weight: 500; }
.row .in-emoji { text-align: center; }
.row-del { width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--sky); color: var(--ink-soft); font-size: 1rem; }
.row-del:active { background: var(--sky-deep); }
.btn-row.left { justify-content: flex-start; }
.bulk { display: flex; flex-direction: column; gap: 8px; }
.bulk textarea {
  width: 100%; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--sky-deep);
  font-family: var(--font-ko); font-size: 1rem; color: var(--ink); resize: vertical;
}
.bulk textarea:focus { outline: 0; border-color: var(--grape); }
@media (max-width: 420px) {
  .row-head, .row { grid-template-columns: 1.2fr 1fr 52px 36px; gap: 6px; }
  .row input { padding: 0 8px; font-size: 1rem; }
}

/* 홈: 현재 주차 + 다른 주차 펼치기 */
.weeks { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.week-current .week-chip { min-width: 200px; padding: 14px 22px; cursor: default; }
.week-current .week-chip:active { transform: none; box-shadow: 0 4px 0 var(--lemon-dark); }
.week-current .wk-label { font-size: 1.5rem; }
.week-current .wk-count { font-size: 1rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.week-select select {
  min-width: 240px; min-height: 48px; padding: 0 40px 0 16px; border-radius: 14px;
  border: 3px solid var(--sky-deep); background: var(--paper); box-shadow: 0 4px 0 var(--sky-deep);
  font-family: var(--font-head); font-size: 1.05rem; color: var(--ink); cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.week-select select:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sky-deep); }

/* 등록: 전체 내보내기 */
.bulk textarea[readonly] { background: var(--sky); color: var(--ink-soft); font-family: var(--font-en); font-size: 0.9rem; }