/* Calm, shared vocabulary-learning visual system. */
:root {
  /* Match the warm paper, orange, and blue palette used by index_new.html. */
  --bg: #f0ede8; --surface: #fff; --surface2: #f7f5f2; --border: #d8d3cc;
  --text: #1c1a18; --text-2: #5a5650; --text-3: #9a948c;
  --accent: #e85d26; --accent-d: #c44a18; --blue: #2563eb; --blue-d: #1d4ed8;
  --green: #059669; --red: #be123c; --shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.06);
  --r: 16px; --r-s: 10px;
}
.dark {
  --bg: #131210; --surface: #201e1b; --surface2: #2a2823; --border: #3a3730;
  --text: #f0ece6; --text-2: #a09890; --text-3: #6a6460;
  --accent: #ff7043; --accent-d: #e85d26; --blue: #60a5fa; --blue-d: #3b82f6;
  --green: #34d399; --red: #fb7185; --shadow: 0 1px 3px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.3);
}

html, body { width: 100%; height: 100%; }
body.wordy-index-page { height: auto; min-height: 100%; }
body {
  background: var(--bg);
  font-size: 15px; line-height: 1.65; letter-spacing: -.015em;
}
button, select { font: inherit; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 3px solid color-mix(in srgb, var(--blue) 55%, transparent); outline-offset: 3px; }
#startScreen { gap: 18px; padding: 24px 18px; }
.start-eyebrow, .hero-eyebrow { font-family: 'Noto Sans KR', sans-serif; font-size: .72rem; letter-spacing: .12em; }
.start-title, .hero-title { font-family: 'Noto Sans KR', sans-serif; font-weight: 800; font-size: clamp(2rem, 7vw, 3.1rem); letter-spacing: -.055em; line-height: 1.2; }
.start-title span, .hero-title span { color: var(--accent); }
.start-meta, .hero-sub { font-size: .9rem; color: var(--text-2); }
.hint-chip { border-radius: 999px; padding: 6px 12px; font-size: .75rem; }
#startButton, .start-btn { border-radius: 14px; font-family: 'Noto Sans KR', sans-serif; font-size: 1rem; font-weight: 700; letter-spacing: 0; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 20%, transparent); }
.learn-screen { width: min(100%, 1040px); align-self: center; padding: 14px 20px 10px; gap: 14px; }
.top-bar { padding: 4px 2px; }
.progress-text { font-family: 'Noto Sans KR', sans-serif; font-size: .76rem; letter-spacing: .02em; }
.progress-bar-bg { height: 5px; border-radius: 999px; }
.progress-bar-fill { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #d7c79e)); }
.top-icon-btn { width: 38px; height: 38px; border-radius: 12px; }
.card-area { gap: 14px; }
.card-perspective { max-width: 720px; max-height: 480px; }
.card-face { border-radius: 16px; padding: clamp(24px, 5vw, 48px); box-shadow: var(--shadow); }
.card-front { background: var(--surface); border: 1px solid var(--border); }
.card-front::before { height: 4px; background: linear-gradient(90deg, var(--accent), #fbbf24); }
.word-eng { font-family: 'Noto Sans KR', sans-serif; font-size: clamp(2rem, 7vw, 4rem); font-weight: 800; letter-spacing: -.045em; line-height: 1.15; }
.word-hint { font-family: 'Noto Sans KR', sans-serif; font-size: .78rem; letter-spacing: 0; margin-top: 16px; }
.card-back { background: var(--blue); }
.dark .card-back { background: #1d4ed8; }
.card-back::before { height: 5px; background: rgba(255,255,255,.24); }
.word-kor { font-size: clamp(1.25rem, 4.5vw, 2.2rem); font-weight: 700; letter-spacing: -.035em; }
.known-badge { border-radius: 999px; padding: 5px 10px; }
.nav-side { width: 44px; height: 44px; border: 1px solid var(--border); box-shadow: none; }
.bottom-controls { gap: 8px; padding: 4px 0; }
.ctrl-btn { min-height: 42px; border: 1px solid var(--border); border-radius: 999px; padding: 9px 15px; background: color-mix(in srgb, var(--surface) 76%, transparent); font-size: .8rem; transition: color .16s, background .16s, border-color .16s, transform .16s; }
.ctrl-btn:hover { transform: translateY(-1px); }
.ctrl-btn.known { background: color-mix(in srgb, var(--green) 10%, var(--surface)); border-color: color-mix(in srgb, var(--green) 30%, var(--border)); }
.ctrl-btn.unkwn { background: color-mix(in srgb, var(--red) 7%, var(--surface)); border-color: transparent; }
.ctrl-btn.playing { background: var(--accent); border-color: var(--accent); }
.ctrl-btn.c-active { background: color-mix(in srgb, var(--blue) 12%, var(--surface)); }
.ad-wrap { min-height: 60px; }
#toast { font-size: .82rem; font-weight: 600; box-shadow: 0 10px 30px rgba(20,30,22,.16); }

/* Index page */
main { max-width: 700px; padding-top: calc(var(--hh) + env(safe-area-inset-top) + 34px); }
header { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.logo { font-family: 'Noto Sans KR', sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: -.04em; }
.hero { margin-bottom: 4px; }
.book-card, .form-card { border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); }
.book-img { max-height: 170px; animation: none; }
.book-card:hover .book-img { transform: none; filter: none; }
.form-card-head { background: transparent; padding: 16px 20px 12px; }
.form-card-head-title { font-family: 'Noto Sans KR', sans-serif; font-size: .78rem; letter-spacing: .01em; text-transform: none; }
.form-card-body { padding: 12px 20px 20px; }
.form-select { border-width: 1px; border-radius: 12px; background-color: var(--surface2); }
.range-grid { gap: 8px; max-height: 190px; }
.range-chip { border-width: 1px; border-radius: 10px; padding: 8px 5px; font-family: 'Noto Sans KR', sans-serif; font-size: .72rem; letter-spacing: 0; }
.range-chip.preset { background: color-mix(in srgb, var(--blue) 8%, var(--surface)); border-color: color-mix(in srgb, var(--blue) 23%, var(--border)); }
.start-btn { min-height: 54px; }
.voice-settings { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-2); font-size: .78rem; }
.voice-settings select { max-width: min(58vw, 250px); min-height: 38px; padding: 6px 30px 6px 10px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.voice-settings label { display: inline-flex; align-items: center; gap: 6px; }

@media (min-width: 760px) {
  .learn-screen { gap: 16px; padding: 20px 24px 14px; }
  .card-face { box-shadow: var(--shadow-h, var(--shadow)); }
  main { gap: 18px; }
}
@media (max-height: 700px) {
  .learn-screen { gap: 8px; padding-top: 7px; padding-bottom: 4px; }
  .card-perspective { max-height: 360px; }
  .bottom-controls { gap: 5px; }
  .ctrl-btn { min-height: 36px; padding: 7px 11px; }
  .ad-wrap { min-height: 50px; }
}
@media (max-width: 520px) {
  .learn-screen { padding: 8px 10px 6px; gap: 9px; }
  .card-area { gap: 6px; }
  .nav-side { width: 34px; height: 34px; font-size: .82rem; }
  .card-face { border-radius: 19px; padding: 18px; }
  .bottom-controls { gap: 6px; }
  .ctrl-btn { min-height: 38px; padding: 7px 11px; font-size: .73rem; }
  .ad-wrap { min-height: 50px; }
}
@media (max-height: 590px) {
  #startScreen { gap: 10px; padding: 12px; }
  .start-hints { display: none; }
  .card-perspective { max-height: 280px; }
  .ad-wrap { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}