:root {
  --bg: #faf9f7;
  --fg: #1c1b1a;
  --fg-soft: #77716c;
  --line: #e3ded8;
  --accent: #d84c3e;
  --accent-soft: #fbe9e7;
  --ok: #2e8b57;
  --card: #ffffff;
  --shadow: 0 8px 30px rgba(30, 20, 10, 0.08);
  --serif-jp: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", "Noto Serif KR", serif;
  --sans: "Pretendard", "Malgun Gothic", "Apple SD Gothic Neo", "Yu Gothic UI", "Meiryo", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17161a;
    --fg: #edeae6;
    --fg-soft: #9a948e;
    --line: #34323a;
    --accent: #e8695c;
    --accent-soft: #3a2521;
    --ok: #58b98a;
    --card: #211f26;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }
}

/* 뷰어의 명시적 테마 토글(data-theme)이 OS 설정보다 우선 */
:root[data-theme="dark"] {
  --bg: #17161a;
  --fg: #edeae6;
  --fg-soft: #9a948e;
  --line: #34323a;
  --accent: #e8695c;
  --accent-soft: #3a2521;
  --ok: #58b98a;
  --card: #211f26;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}
:root[data-theme="light"] {
  --bg: #faf9f7;
  --fg: #1c1b1a;
  --fg-soft: #77716c;
  --line: #e3ded8;
  --accent: #d84c3e;
  --accent-soft: #fbe9e7;
  --ok: #2e8b57;
  --card: #ffffff;
  --shadow: 0 8px 30px rgba(30, 20, 10, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  overflow: hidden;
}

.screen {
  display: none;
  height: 100vh;
  flex-direction: column;
}
.screen.active { display: flex; }

/* ---------- 시작 화면 ---------- */
.start-inner {
  margin: auto;
  text-align: center;
  max-width: 560px;
  padding: 2rem;
  width: 100%;
}

.logo {
  font-family: var(--serif-jp);
  font-size: clamp(3.5rem, 10vw, 5.5rem);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.tagline {
  color: var(--fg-soft);
  margin: 0.8rem 0 2.2rem;
  font-size: 1rem;
}

.level-grid {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.level-btn {
  position: relative;
  width: 4.2rem;
  height: 3.4rem;
  border: 1.5px solid var(--line);
  border-radius: 0.7rem;
  background: var(--card);
  color: var(--fg);
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--sans);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.level-btn:hover:not(:disabled) { transform: translateY(-2px); }
.level-btn.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.level-btn:disabled { opacity: 0.45; cursor: default; }
.level-btn .soon {
  position: absolute;
  bottom: 0.3rem;
  left: 0;
  right: 0;
  font-size: 0.55rem;
  font-weight: 400;
  color: var(--fg-soft);
}

.scope-row {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  margin-bottom: 2rem;
  color: var(--fg-soft);
  font-size: 0.92rem;
}
.scope-option { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.scope-option input { accent-color: var(--accent); }
.row-label { opacity: 0.7; }

.primary-btn {
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
  font-family: var(--sans);
  padding: 0.85rem 3rem;
  border-radius: 0.7rem;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.primary-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.help { margin-top: 2.4rem; color: var(--fg-soft); font-size: 0.82rem; line-height: 1.7; }

.credit-fixed {
  position: fixed;
  left: 1.3rem;
  bottom: 1.5rem;
  font-size: 0.82rem;
  color: var(--fg-soft);
  letter-spacing: 0.04em;
  z-index: 5;
}
.credit-fixed strong { color: var(--fg); font-weight: 700; }
.keyguide { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; justify-content: center; margin-top: 0.6rem; }

kbd {
  font-family: inherit;
  font-size: 0.75rem;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 0.3rem;
  padding: 0.05rem 0.35rem;
  background: var(--card);
}

/* ---------- 퀴즈 화면 ---------- */
.quiz-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
}

.badge {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.25rem 0.7rem;
  border-radius: 2rem;
}

.stats { flex: 1; color: var(--fg-soft); font-size: 0.88rem; display: flex; gap: 0.5rem; }
.stats .dot { opacity: 0.5; }

.ghost-btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg-soft);
  font-family: var(--sans);
  font-size: 0.85rem;
  padding: 0.4rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.ghost-btn:hover { border-color: var(--fg-soft); color: var(--fg); }

.quiz-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
}

.word-area {
  flex: 0 0 auto;
  margin-top: 11vh;
  min-height: 22vh;
  display: flex;
  align-items: center;
}

.word {
  font-family: var(--serif-jp);
  font-weight: 600;
  font-size: clamp(3rem, 11vw, 6.5rem);
  letter-spacing: 0.04em;
  text-align: center;
  transition: opacity 0.18s, transform 0.18s;
}
.word.long { font-size: clamp(2.2rem, 8vw, 4.6rem); }
.word.fade { opacity: 0; transform: translateY(8px); }
.word.wrong { color: var(--accent); }

/* 단어와 입력칸 사이 정답 표시 영역 (공간은 항상 확보해 레이아웃이 안 튀게) */
.reveal-slot {
  min-height: 4.8rem;
  margin-top: 1.5vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reveal-inner {
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.18s, transform 0.18s;
}
.reveal-slot.show .reveal-inner { opacity: 1; transform: translateY(0); }
.reveal-reading {
  font-family: var(--serif-jp);
  font-size: 1.4rem;
  margin-bottom: 0.25rem;
}
.reveal-meaning { color: var(--fg-soft); font-size: 1rem; }

.pos-chip {
  display: inline-block;
  font-size: 0.72em;
  border: 1px solid var(--line);
  border-radius: 1rem;
  padding: 0.06rem 0.55rem;
  color: var(--fg-soft);
  background: var(--card);
  margin-left: 0.35rem;
  vertical-align: 0.12em;
  white-space: nowrap;
}

.answer-area {
  margin-top: 1.5vh;
  width: 100%;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  justify-content: center;
}

.mode-chip {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--fg-soft);
  font-size: 1rem;
  font-family: var(--serif-jp);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  flex: 0 0 auto;
}
.mode-chip:hover { border-color: var(--accent); color: var(--accent); }

.answer-box {
  min-width: 16rem;
  max-width: 30rem;
  border-bottom: 2px solid var(--line);
  padding: 0.4rem 0.6rem;
  font-size: 1.9rem;
  font-family: var(--serif-jp);
  text-align: center;
  min-height: 3.2rem;
  transition: border-color 0.15s;
  white-space: nowrap;
}
.answer-box.focus-glow { border-color: var(--accent); }
.answer-box .pending { color: var(--fg-soft); }

.answer-box .caret {
  display: inline-block;
  width: 2px;
  height: 1.6rem;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: -0.25rem;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.answer-box.shake { animation: shake 0.35s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

.feedback {
  margin-top: 1.1rem;
  font-size: 0.95rem;
  min-height: 1.4rem;
  color: var(--fg-soft);
}
.feedback.ok { color: var(--ok); font-weight: 600; }
.feedback.bad { color: var(--accent); }

.hidden { display: none; }

.keyhints {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  padding: 1.1rem;
  color: var(--fg-soft);
  font-size: 0.78rem;
  flex-wrap: wrap;
}

/* ---------- 결과 화면 ---------- */
.result-title { font-size: 1.6rem; margin-bottom: 1.6rem; }
.result-big { font-size: 3.4rem; font-weight: 800; color: var(--accent); }
.result-sub { color: var(--fg-soft); margin-top: 0.5rem; }
.result-btns { display: flex; gap: 0.8rem; justify-content: center; margin-top: 2.2rem; }

/* ---------- 아는 정도 표시 ---------- */
.know-bar { display: inline-flex; gap: 4px; align-items: center; }
.know-bar .seg {
  width: 15px;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  transition: background 0.2s;
}
.know-bar .seg.filled { background: var(--ok); }
.know-bar .seg.filled.due { background: #d9a441; }
.quiz-know { margin-top: 1.3rem; justify-content: center; display: flex; }

.due-info { margin-top: 0.9rem; font-size: 0.82rem; color: var(--fg-soft); }
.start-links { display: flex; gap: 0.7rem; justify-content: center; margin-top: 1.4rem; }

/* ---------- 사전·오답 노트 ---------- */
.list-top {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.list-title { font-weight: 700; }
.list-count { color: var(--fg-soft); font-size: 0.85rem; flex: 1; }

.search-input {
  flex: 1;
  min-width: 12rem;
  max-width: 26rem;
  border: 1.5px solid var(--line);
  border-radius: 0.6rem;
  background: var(--card);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 0.5rem 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}
.search-input:focus { border-color: var(--accent); }

.primary-btn.small { padding: 0.5rem 1.1rem; font-size: 0.88rem; }

.word-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.6rem 1.4rem 2rem;
}

.word-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.65rem 0.6rem;
  border-bottom: 1px solid var(--line);
}
.word-row .row-word {
  font-family: var(--serif-jp);
  font-size: 1.45rem;
  min-width: 7.5rem;
}
.word-row .row-mid { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.word-row .row-reading { font-family: var(--serif-jp); font-size: 0.98rem; }
.word-row .row-meaning { color: var(--fg-soft); font-size: 0.85rem; }
.word-row .row-side { display: flex; align-items: center; gap: 0.7rem; }

.wrong-badge {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 2rem;
  text-align: right;
}

.empty-msg { text-align: center; color: var(--fg-soft); margin-top: 3rem; }

/* ---------- 테마 전환 버튼 ---------- */
.theme-btn {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--card);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  transition: border-color 0.15s, transform 0.1s;
}
.theme-btn:hover { border-color: var(--accent); transform: translateY(-1px); }

/* ---------- 토스트 ---------- */
.toast {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--fg);
  color: var(--bg);
  padding: 0.6rem 1.2rem;
  border-radius: 2rem;
  font-size: 0.85rem;
  opacity: 0.95;
  transition: opacity 0.3s;
  z-index: 10;
}
.toast.hidden { opacity: 0; pointer-events: none; }