/* css/main.css — 모바일 우선 최소 스타일 */

/* ── 리셋 & 기반 ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-primary:    #58cc02;   /* 듀오링고 그린 계열 */
  --color-primary-dk: #46a300;
  --color-secondary:  #1cb0f6;
  --color-ink:        #202f36;
  --color-locked:     #afafaf;
  --color-bg:         #f7f7f7;
  --color-surface:    #ffffff;
  --color-text:       #1c1c1c;
  --color-text-sub:   #6b6b6b;
  --color-danger:     #ff4b4b;
  --color-xp:         #ffc800;
  --radius:           12px;
  --tap-min:          44px;      /* 최소 탭 타겟 */
}

html, body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}

/* ── 앱 레이아웃 ───────────────────────────────────────────────── */
#app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-surface);
  border-bottom: 1px solid #e5e5e5;
  padding: 0 16px;
  min-height: var(--tap-min);
  display: flex;
  align-items: center;
}

#app-main {
  max-width: 480px;
  margin: 0 auto;
  padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 80px);
  min-height: calc(100vh - var(--tap-min));
}

#app-tabbar[hidden] { display: none; }
#app-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  min-height: calc(62px + env(safe-area-inset-bottom, 0px));
  padding: 8px max(14px, calc((100vw - 480px) / 2 + 14px)) calc(8px + env(safe-area-inset-bottom, 0px));
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid #e5e5e5;
  box-shadow: 0 -6px 18px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
}
.tabbar-item {
  min-height: 48px;
  padding: 4px 8px;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-sub);
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  font-size: .72rem;
  font-weight: 900;
  position: relative;
}
.tabbar-item .icon {
  width: 20px;
  height: 20px;
}
.tabbar-item--active {
  color: var(--color-primary-dk);
  background: #eaf7dd;
}
.tabbar-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.tabbar-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--color-danger);
  color: #fff;
  font-size: .68rem;
  line-height: 18px;
}

/* ── 버튼 공통 ─────────────────────────────────────────────────── */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 20px;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}
button:active, .btn:active { filter: brightness(0.9); }
button:disabled { cursor: not-allowed; opacity: .55; }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
  width: 100%;
}
.btn-primary:hover { background: var(--color-primary-dk); }

.btn-demo {
  width: 100%;
  margin-top: 10px;
  background: #fff;
  color: var(--color-secondary);
  border: 2px solid #d7e2e8;
}

.btn-secondary {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  width: 100%;
}

/* ── 온보딩 ───────────────────────────────────────────────────── */
.onboarding-screen {
  display: grid;
  gap: 18px;
  padding-top: 8px;
}
.onboarding-header {
  background: var(--color-ink);
  color: #fff;
  border-radius: 16px;
  padding: 22px 18px;
}
.onboarding-header p {
  color: #b9e7ff;
  font-weight: 900;
  font-size: .78rem;
  margin-bottom: 5px;
}
.onboarding-header h1 {
  font-size: 1.55rem;
  line-height: 1.18;
}
.onboarding-group {
  display: grid;
  gap: 10px;
}
.onboarding-group h2 {
  font-size: .95rem;
  color: var(--color-ink);
}
.onboarding-options {
  display: grid;
  gap: 10px;
}
.onboarding-option {
  width: 100%;
  min-height: 76px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 2px solid #e5e5e5;
  border-bottom-width: 4px;
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  text-align: left;
}
.onboarding-option--selected {
  border-color: var(--color-primary);
  background: #f4fbef;
}
.onboarding-option__check {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-secondary);
  background: #e8f7ff;
}
.onboarding-option--selected .onboarding-option__check {
  color: var(--color-primary-dk);
  background: #def0cc;
}
.onboarding-option__check .icon {
  width: 18px;
  height: 18px;
}
.onboarding-option__body {
  display: grid;
  gap: 2px;
}
.onboarding-option strong {
  color: var(--color-ink);
  font-size: .98rem;
}
.onboarding-option small {
  color: var(--color-text-sub);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.3;
}
.onboarding-option b {
  align-self: center;
  color: var(--color-secondary);
  font-size: .82rem;
}
.onboarding-start-btn {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  gap: 8px;
}
.onboarding-start-btn .icon {
  width: 18px;
  height: 18px;
}
.onboarding-status {
  min-height: 1.4em;
  color: var(--color-danger);
  font-size: .88rem;
  text-align: center;
}

/* ── 온보딩: 배치고사 진입 CTA ──────────────────────────────────── */
.onboarding-placement-cta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 2px solid var(--color-primary);
  background: #f1fbe9;
  cursor: pointer;
  margin-bottom: 14px;
}
.onboarding-placement-cta__icon .icon { width: 26px; height: 26px; color: var(--color-primary-dk); }
.onboarding-placement-cta__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.onboarding-placement-cta__body strong { font-size: 1rem; color: var(--color-text); }
.onboarding-placement-cta__body small { font-size: .78rem; color: var(--color-text-sub); }
.onboarding-placement-cta__arrow .icon { width: 18px; height: 18px; color: var(--color-primary-dk); }
.onboarding-or {
  display: flex; align-items: center; gap: 10px;
  color: var(--color-text-sub); font-size: .78rem; margin: 4px 0 16px;
}
.onboarding-or::before, .onboarding-or::after {
  content: ""; flex: 1; height: 1px; background: #e2e2e2;
}

/* ── 배치고사(레벨 테스트) ─────────────────────────────────────── */
.placement-screen { max-width: 520px; margin: 0 auto; padding: 8px 0 28px; }
.placement-top { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.placement-exit { background: none; border: none; padding: 0; cursor: pointer; line-height: 0; }
.placement-exit .icon { width: 24px; height: 24px; color: var(--color-text-sub); }
.placement-progress { flex: 1; height: 10px; border-radius: 99px; background: #e5e5e5; overflow: hidden; }
.placement-progress span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; transition: width .25s; }
.placement-count { font-size: .8rem; color: var(--color-text-sub); font-variant-numeric: tabular-nums; }
.placement-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--color-primary-dk); text-transform: uppercase; margin-bottom: 8px; }
.placement-q { font-size: 1.25rem; line-height: 1.4; margin-bottom: 22px; }
.placement-options { display: flex; flex-direction: column; gap: 10px; }
.placement-option {
  width: 100%; text-align: left; padding: 15px 16px;
  border-radius: var(--radius); border: 2px solid #e2e2e2; background: #fff;
  font-size: 1rem; cursor: pointer; transition: border-color .15s, background .15s;
}
.placement-option:hover:not(:disabled) { border-color: var(--color-primary); }
.placement-option--correct { border-color: var(--color-primary); background: #eafbe0; }
.placement-option--wrong { border-color: var(--color-danger); background: #fdecec; }

.placement-result { text-align: center; }
.placement-result__badge .icon { width: 56px; height: 56px; color: var(--color-primary); }
.placement-result__level { font-size: 1.5rem; margin: 6px 0 8px; }
.placement-result__copy { color: var(--color-text-sub); font-size: .92rem; margin-bottom: 22px; }
.placement-adjust { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; }
.placement-adjust__btn {
  padding: 9px 14px; border-radius: 99px; border: 1.5px solid #d9d9d9; background: #fff;
  font-size: .85rem; cursor: pointer;
}
.placement-adjust__btn:disabled { opacity: .4; cursor: default; }
.placement-adjust__cur { font-size: 1.2rem; font-weight: 800; color: var(--color-primary-dk); min-width: 36px; }
.placement-start { width: 100%; background: var(--color-primary); color: #fff; gap: 8px; }
.placement-start .icon { width: 18px; height: 18px; }
.placement-manual {
  width: 100%; margin-top: 10px; background: none; border: none;
  color: var(--color-text-sub); font-size: .9rem; text-decoration: underline; cursor: pointer;
}

/* ── 폼 ────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 0.875rem; font-weight: 600; }
.form-group input {
  height: var(--tap-min);
  padding: 0 14px;
  border: 2px solid #e5e5e5;
  border-radius: var(--radius);
  font-size: 1rem;
  outline: none;
  transition: border-color 0.15s;
}
.form-group input:focus { border-color: var(--color-primary); }

.form-error { color: var(--color-danger); font-size: 0.875rem; min-height: 1.2em; }

/* ── Auth 화면 ─────────────────────────────────────────────────── */
.auth-screen {
  min-height: calc(100vh - var(--tap-min) - 32px);
  display: grid;
  grid-template-rows: auto auto;
  gap: 18px;
  align-content: center;
}
.auth-showcase {
  min-height: 178px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 200, 0, .22), transparent 28%),
    linear-gradient(145deg, #e9f8ff 0%, #eefbe7 58%, #fff7d1 100%);
  border: 1px solid #d9edf5;
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.auth-mascot {
  width: 86px;
  height: 86px;
  color: var(--color-primary);
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid #d8f0c9;
  border-bottom-width: 5px;
  border-radius: 18px;
}
.auth-mascot .brand-logo { width: 58px; height: 54px; }
.auth-path-preview {
  position: absolute;
  right: 22px;
  top: 26px;
  width: 112px;
  height: 122px;
}
.auth-path-preview span {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #d7e2e8;
  border-bottom-width: 6px;
}
.auth-path-preview span:nth-child(1) { left: 34px; top: 0; border-color: #7ed957; }
.auth-path-preview span:nth-child(2) { left: 0; top: 38px; border-color: #1cb0f6; }
.auth-path-preview span:nth-child(3) { left: 52px; top: 72px; border-color: #ffc800; }
.auth-path-preview span:nth-child(4) { left: 12px; top: 102px; border-color: #d7e2e8; }
.auth-preview-card {
  position: absolute;
  left: 22px;
  right: 156px;
  bottom: 18px;
  min-width: 120px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(196, 220, 231, .9);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--color-ink);
}
.auth-preview-card strong { display: block; font-size: .82rem; margin-bottom: 8px; }
.auth-preview-track { height: 10px; border-radius: 99px; background: #dce8ee; overflow: hidden; }
.auth-preview-track span { display: block; width: 68%; height: 100%; background: var(--color-xp); border-radius: inherit; }

.auth-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 32px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.auth-card h1 { font-size: 1.5rem; margin-bottom: 8px; }
.auth-card p  { font-size: 0.9rem; color: var(--color-text-sub); margin-bottom: 24px; }
.auth-switch { text-align: center; margin-top: 16px; font-size: 0.875rem; }
.auth-switch button {
  background: none; border: none; color: var(--color-primary);
  font-weight: 700; min-height: unset; padding: 4px 6px;
}

/* ── 일일 목표 XP 바 ───────────────────────────────────────────── */
.daily-goal {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.daily-goal__label {
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.daily-goal__track {
  height: 12px;
  background: #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
}
.daily-goal__fill {
  height: 100%;
  background: var(--color-xp);
  border-radius: 6px;
  transition: width 0.4s ease;
}
.daily-goal__done { color: var(--color-primary); display: inline-flex; align-items: center; gap: 2px; }
.daily-goal__done .icon { width: 14px; height: 14px; }

/* ── 오늘의 퀘스트 ───────────────────────────────────────────── */
.daily-quests {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.daily-quests__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.daily-quests__header p {
  color: var(--color-secondary);
  font-weight: 900;
  font-size: .78rem;
  margin-bottom: 2px;
}
.daily-quests__header h2 {
  color: var(--color-ink);
  font-size: 1.1rem;
  line-height: 1.2;
}
.daily-quests__ring {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--color-primary) var(--quest-pct), #e5e5e5 0);
}
.daily-quests__ring span {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--color-ink);
  font-size: .78rem;
  font-weight: 900;
}
.daily-quests__list {
  list-style: none;
  display: grid;
  gap: 8px;
}
.daily-quests__list li {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 2px solid #edf0f2;
  border-bottom-width: 3px;
  border-radius: 10px;
  background: #fff;
}
.daily-quests__list li.daily-quest--done {
  background: #f4fbef;
  border-color: #d8efca;
}
.daily-quest__icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 34px;
  color: var(--color-secondary);
  background: #e8f7ff;
}
.daily-quest--done .daily-quest__icon {
  color: var(--color-primary-dk);
  background: #def0cc;
}
.daily-quest__icon .icon {
  width: 18px;
  height: 18px;
}
.daily-quests__list strong {
  display: block;
  color: var(--color-ink);
  font-size: .9rem;
}
.daily-quests__list small {
  display: block;
  color: var(--color-text-sub);
  font-size: .78rem;
  font-weight: 800;
}

/* ── 코스 개요 + 학습 경로 ─────────────────────────────────────── */
.course-overview {
  background: var(--color-ink);
  color: #fff;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 14px;
  display: grid;
  gap: 14px;
  box-shadow: 0 2px 12px rgba(19, 31, 36, .18);
}
.course-overview__eyebrow {
  color: #b9e7ff;
  font-weight: 800;
  font-size: .75rem;
  margin-bottom: 4px;
}
.course-overview h1 {
  font-size: 1.4rem;
  line-height: 1.2;
  margin-bottom: 6px;
}
.course-overview p {
  color: #d7e4e8;
  font-size: .9rem;
}
.course-overview__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.course-overview__stats span {
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 8px;
  font-size: .74rem;
  color: #d7e4e8;
}
.course-overview__stats b {
  display: block;
  color: #fff;
  font-size: 1.05rem;
}
.course-overview__cta {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  gap: 8px;
}
.course-overview__cta .icon { width: 18px; height: 18px; }

/* 레벨 구간 헤더 */
.path-band {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dk) 100%);
  color: #fff;
}
.path-band__level { font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; }
.path-band__desc { font-size: .78rem; opacity: 0.92; }
.path-band--review {
  background: #eef0f2;
  color: var(--color-text-sub);
  border: 1px dashed #cfd4d9;
}
.path-band--review .path-band__level { color: var(--color-text); }

/* 복습용(아래 레벨) 유닛은 흐리게 */
.path-unit--review { opacity: 0.72; }
.path-unit__review-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 99px;
  background: #e5e7eb;
  color: var(--color-text-sub);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}

.path-unit { margin-bottom: 24px; }
.path-unit__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.path-unit__title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-sub);
}
.path-unit__meta {
  font-size: .78rem;
  color: var(--color-text-sub);
  margin-top: 2px;
}
.path-unit__progress {
  height: 10px;
  border-radius: 99px;
  background: #e5e5e5;
  overflow: hidden;
}
.path-unit__progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-primary);
}

.path-lesson {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  cursor: pointer;
  transition: box-shadow 0.15s;
  min-height: var(--tap-min);
  text-decoration: none;
  color: inherit;
}
.path-lesson:hover:not(.path-lesson--locked) { box-shadow: 0 3px 12px rgba(0,0,0,0.12); }
.path-lesson--recommended {
  border: 2px solid var(--color-secondary);
  box-shadow: 0 4px 16px rgba(28, 176, 246, .16);
}
.path-lesson--recommended .path-lesson__icon {
  background: #e8f7ff;
  color: var(--color-secondary);
}

.path-lesson--locked {
  opacity: 0.55;
  cursor: not-allowed;
}
.path-lesson__icon {
  width: 40px; height: 40px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #eaf7dd; color: var(--color-primary);   /* 기본(시작) = 브랜드 그린 */
}
.path-lesson__icon .icon { width: 22px; height: 22px; }
.path-lesson--completed .path-lesson__icon { background: #def0cc; color: var(--color-primary-dk); }
.path-lesson--locked    .path-lesson__icon { background: #ececec; color: var(--color-locked); }
.path-lesson__info { flex: 1; }
.path-lesson__title { font-weight: 700; font-size: 0.95rem; }
.path-lesson__sub { font-size: 0.8rem; color: var(--color-text-sub); margin-top: 2px; }
.path-lesson__sub--recommended {
  color: var(--color-secondary);
  font-weight: 800;
}

.path-lesson__badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
}
.path-lesson--completed .path-lesson__badge {
  background: #e0f5cc;
  color: var(--color-primary-dk);
}

/* ── 헤더 내 프로필/XP ─────────────────────────────────────────── */
.header-inner {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-logo {
  font-weight: 900; font-size: 1.1rem; color: var(--color-primary);
  display: inline-flex; align-items: center; gap: 6px;
}
.header-logo--button {
  background: none;
  min-height: var(--tap-min);
  min-width: 0;
  padding: 0;
  border-radius: 0;
}
.header-logo .brand-logo { width: 24px; height: 22px; flex-shrink: 0; }
.header-right { display: flex; align-items: center; gap: 8px; }
.header-stat { display: flex; align-items: center; gap: 4px; font-weight: 700; font-size: 0.9rem; }
.header-stat__icon { display: inline-flex; }
.header-stat__icon .icon { width: 18px; height: 18px; display: block; }
.header-stat__icon--xp     { color: var(--color-xp); }
.header-stat__icon--streak { color: #ff6b35; }
.header-icon-btn {
  background: none; border: 2px solid #e5e5e5;
  color: var(--color-text); font-weight: 600;
  width: 36px; height: 36px; min-height: 36px; min-width: 36px; padding: 0;
  font-size: 0.8rem; border-radius: 8px;
}
.header-icon-btn .icon { width: 18px; height: 18px; }

/* ── 로딩/에러 ─────────────────────────────────────────────────── */
.loading { text-align: center; padding: 40px; color: var(--color-text-sub); }
.app-error {
  background: #fff0f0; border: 1px solid var(--color-danger);
  border-radius: var(--radius); padding: 16px; margin: 16px 0;
  font-size: 0.9rem; color: var(--color-danger);
}

/* ── 빈 경로 안내 ──────────────────────────────────────────────── */
.path-empty {
  text-align: center; padding: 40px 16px;
  color: var(--color-text-sub); font-size: 0.9rem;
}

/* ── 전역 아이콘 기본 크기 (컨텍스트에서 override) ───────────────── */
.icon { width: 24px; height: 24px; flex-shrink: 0; }

/* ── 레슨: 진행 바 + 컨테이너 ─────────────────────────────────── */
.lesson-top {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.lesson-close-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  padding: 0;
  color: var(--color-text-sub);
  background: transparent;
}
.lesson-close-btn .icon { width: 22px; height: 22px; }
.lesson-count {
  min-width: 54px;
  text-align: right;
  font-weight: 800;
  color: var(--color-text-sub);
  font-size: .86rem;
}
.lesson-tip {
  background: #eef8ff;
  border: 1px solid #cfeaff;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 18px;
  color: var(--color-ink);
}
.lesson-tip__label {
  color: var(--color-secondary);
  font-weight: 900;
  font-size: .78rem;
  margin-bottom: 4px;
}
.lesson-tip__body {
  font-size: .9rem;
  line-height: 1.45;
}
.lesson-tip__body p { margin: 0; }
.lesson-progress-bar-track {
  height: 12px; background: #e5e5e5; border-radius: 999px; overflow: hidden;
}
.lesson-progress-bar-fill { height: 100%; background: var(--color-primary); border-radius: 999px; transition: width .3s ease; }
.lesson-exercise { display: flex; flex-direction: column; gap: 16px; }
.ex-prompt { font-size: 1.25rem; font-weight: 800; line-height: 1.4; margin: 8px 0 4px; }
.ex-error { color: var(--color-danger); }

/* ── 객관식/듣기 선택지 ───────────────────────────────────────── */
.ex-mc-options { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ex-mc-options li { list-style: none; }
.ex-mc-btn {
  width: 100%; justify-content: flex-start; text-align: left;
  background: var(--color-surface); color: var(--color-text);
  border: 2px solid #e5e5e5; border-bottom-width: 3px; border-radius: var(--radius);
  padding: 14px 18px; font-size: 1rem; font-weight: 700;
}
.ex-mc-btn:hover { border-color: var(--color-primary); background: #f3fbe9; }
.ex-mc-btn--selected { border-color: var(--color-primary); background: #eaf7dd; color: var(--color-primary-dk); }

/* ── 듣기 ─────────────────────────────────────────────────────── */
.ex-listening-audio { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0; }
.ex-listen-btn {
  width: 96px; height: 96px; border-radius: 50%;
  background: var(--color-primary); color: #fff; border: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ex-listen-btn:hover { background: var(--color-primary-dk); }
.ex-listen-btn__icon { display: inline-flex; }
.ex-listen-btn__icon .icon { width: 40px; height: 40px; }
.ex-audio-fallback { color: var(--color-text-sub); font-size: .9rem; }

/* ── 단어 배열 (word_bank) — 탭 선택 ──────────────────────────── */
.ex-wb-tray {
  min-height: 56px; border-bottom: 2px dashed #cfcfcf; padding: 10px 0;
  display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start;
}
.ex-wb-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ex-wb-token, .ex-wb-tray-token {
  background: var(--color-surface); border: 2px solid #e5e5e5; border-bottom-width: 3px;
  border-radius: 10px; padding: 8px 14px; font-size: 1rem; font-weight: 700;
  min-height: unset; min-width: unset;
}
.ex-wb-token:hover { border-color: var(--color-primary); }
.ex-wb-token--used { visibility: hidden; }
.ex-wb-submit, .ex-fb-submit { width: 100%; margin-top: 8px; background: var(--color-primary); color: #fff; }

/* ── 빈칸 채우기 ──────────────────────────────────────────────── */
.ex-fb-form { display: flex; flex-direction: column; gap: 10px; }
.ex-fb-input {
  height: var(--tap-min); padding: 0 14px; border: 2px solid #e5e5e5;
  border-radius: var(--radius); font-size: 1rem; outline: none;
}
.ex-fb-input:focus { border-color: var(--color-primary); }
.ex-fb-hint { font-size: .85rem; color: var(--color-text-sub); }

/* ── 문장 영작 (translate_sentence) ───────────────────────────── */
.ex-ts-form { display: flex; flex-direction: column; gap: 10px; }
.ex-ts-guide { font-size: .85rem; color: var(--color-text-sub); }
.ex-ts-input {
  width: 100%; min-height: 64px; padding: 12px 14px;
  border: 2px solid #e5e5e5; border-radius: var(--radius);
  font-size: 1rem; font-family: inherit; line-height: 1.4; resize: vertical; outline: none;
}
.ex-ts-input:focus { border-color: var(--color-primary); }
.ex-ts-submit { width: 100%; margin-top: 4px; background: var(--color-primary); color: #fff; }

/* ── 받아쓰기 (dictation) ─────────────────────────────────────── */
.ex-dict-audio { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 8px 0; }
.ex-dict-form { display: flex; flex-direction: column; gap: 10px; }
.ex-dict-guide { font-size: .85rem; color: var(--color-text-sub); }
.ex-dict-input {
  width: 100%; min-height: 64px; padding: 12px 14px;
  border: 2px solid #e5e5e5; border-radius: var(--radius);
  font-size: 1rem; font-family: inherit; line-height: 1.4; resize: vertical; outline: none;
}
.ex-dict-input:focus { border-color: var(--color-primary); }
.ex-dict-submit { width: 100%; margin-top: 4px; background: var(--color-primary); color: #fff; }

/* ── 정답/오답 피드백 배너 ────────────────────────────────────── */
.ex-feedback {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-radius: var(--radius); font-weight: 800; margin-top: 8px;
}
.ex-feedback--correct { background: #e0f5cc; color: var(--color-primary-dk); }
.ex-feedback--wrong   { background: #ffe2e2; color: var(--color-danger); }
.ex-feedback__icon { display: inline-flex; }
.ex-feedback__icon .icon { width: 24px; height: 24px; }

/* ── 문제 신고 ────────────────────────────────────────────────── */
.ex-report-btn {
  align-self: center; margin-top: 8px;
  background: none; border: none; color: var(--color-text-sub);
  font-size: .8rem; font-weight: 600; min-height: unset; padding: 6px 10px;
  display: inline-flex; align-items: center; gap: 4px;
}
.ex-report-btn__icon { display: inline-flex; }
.ex-report-btn__icon .icon { width: 14px; height: 14px; }

/* ── 결과 화면 ────────────────────────────────────────────────── */
.lesson-result { text-align: center; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lesson-result-title {
  font-size: 1.5rem; font-weight: 900; margin-top: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.lesson-result-title__icon { color: var(--color-primary); display: inline-flex; }
.lesson-result-title__icon .icon { width: 72px; height: 72px; }
.lesson-result-score { color: var(--color-text-sub); margin-bottom: 16px; }
.lesson-result-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 4px;
}
.lesson-result-xp, .lesson-result-streak, .lesson-result-hearts {
  display: inline-flex; align-items: center; gap: 8px; font-size: 1.25rem; font-weight: 800; margin: 6px 0;
  justify-content: center;
  min-height: 54px;
  border: 2px solid #e5e5e5;
  border-bottom-width: 4px;
  border-radius: 12px;
  background: #fff;
}
.lesson-result-xp__icon, .lesson-result-streak__icon, .lesson-result-hearts__icon { display: inline-flex; }
.lesson-result-xp__icon { color: var(--color-xp); }
.lesson-result-streak__icon { color: #ff6b35; }
.lesson-result-hearts__icon { color: var(--color-danger); }
.lesson-result-xp__icon .icon, .lesson-result-streak__icon .icon, .lesson-result-hearts__icon .icon { width: 28px; height: 28px; }
.lesson-result-achievements {
  width: 100%;
  margin-top: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #fff8d9;
  border: 1px solid #ffe58a;
  text-align: left;
}
.lesson-result-achievements__title {
  font-weight: 900;
  color: #9a6a00;
  margin-bottom: 8px;
}
.lesson-result-achievements ul {
  display: grid;
  gap: 6px;
  list-style: none;
}
.lesson-result-achievements li {
  font-weight: 800;
  color: var(--color-ink);
}
.lesson-result-actions { width: 100%; margin-top: 24px; display: grid; gap: 10px; }
.lesson-result-next-btn {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
  gap: 8px;
}
.lesson-result-next-btn .icon { width: 18px; height: 18px; }
.lesson-result-back-btn {
  width: 100%;
  background: #fff;
  border: 2px solid #e5e5e5;
  color: var(--color-text);
}

/* ── 레슨 로딩/에러 ───────────────────────────────────────────── */
.lesson-loading, .lesson-submitting, .lesson-empty, .lesson-error {
  text-align: center; padding: 40px 16px; color: var(--color-text-sub);
}
.lesson-retry-btn { margin-top: 12px; background: var(--color-primary); color: #fff; }

.lesson-blocked {
  min-height: 420px;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 34px 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  text-align: center;
}
.lesson-blocked__icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #ffe2e2;
  color: var(--color-danger);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lesson-blocked__icon .icon {
  width: 42px;
  height: 42px;
}
.lesson-blocked h1 {
  color: var(--color-ink);
  font-size: 1.45rem;
}
.lesson-blocked p {
  max-width: 320px;
  color: var(--color-text-sub);
  font-size: .92rem;
}
.lesson-blocked__actions {
  width: 100%;
  max-width: 300px;
  display: grid;
  gap: 10px;
  margin-top: 8px;
}
.lesson-blocked__primary {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
}
.lesson-blocked__secondary {
  width: 100%;
  background: #fff;
  border: 2px solid #e5e5e5;
  color: var(--color-text);
}

/* ── 프로필 ───────────────────────────────────────────────────── */
.profile-section {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 22px 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.profile-section h2 {
  font-size: 1.35rem;
  margin-bottom: 14px;
}
.profile-stats {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 14px 0;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
}
.profile-stats dt {
  color: var(--color-text-sub);
  font-weight: 700;
}
.profile-stats dd {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 900;
}
.profile-stat__icon {
  display: inline-flex;
  color: var(--color-xp);
}
.profile-streak-week {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: #fff7ef;
  border: 1px solid #ffd9bf;
}
.profile-streak-week__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.profile-streak-week__top strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-ink);
  font-size: .94rem;
}
.profile-streak-week__top strong .icon {
  width: 18px;
  height: 18px;
  color: #ff6b35;
}
.profile-streak-week__top span {
  color: #c84f22;
  font-size: .82rem;
  font-weight: 900;
}
.profile-streak-week__days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.profile-streak-week__days span {
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: var(--color-text-sub);
  font-size: .72rem;
  font-weight: 900;
}
.profile-streak-week__days i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #eee;
  border: 2px solid #ddd;
}
.profile-streak-day--active i {
  background: #ff8b3d !important;
  border-color: #ff6b35 !important;
}
.profile-streak-day--today i {
  box-shadow: 0 0 0 3px rgba(28, 176, 246, .22);
}
.profile-streak-day--active b {
  color: #c84f22;
}
.profile-course-progress {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: #f4fbef;
  border: 1px solid #d8efca;
}
.profile-course-progress__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: .9rem;
  margin-bottom: 10px;
}
.profile-course-progress__top strong {
  color: var(--color-ink);
}
.profile-course-progress__top span {
  color: var(--color-text-sub);
  font-weight: 800;
}
.profile-course-progress__track {
  height: 12px;
  border-radius: 99px;
  background: #dce8d4;
  overflow: hidden;
}
.profile-course-progress__track span {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: inherit;
}
.profile-achievements {
  margin-top: 16px;
}
.profile-achievements h3 {
  font-size: 1rem;
  margin-bottom: 10px;
}
.profile-achievements ul {
  display: grid;
  gap: 8px;
  list-style: none;
}
.profile-achievements li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: #fff8d9;
  border: 1px solid #ffe58a;
}
.profile-achievement--locked {
  background: #f4f4f4 !important;
  border-color: #e5e5e5 !important;
  opacity: .78;
}
.profile-achievement__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9a6a00;
  background: #fff1ac;
}
.profile-achievement--locked .profile-achievement__icon {
  color: var(--color-locked);
  background: #e9e9e9;
}
.profile-achievement__icon .icon {
  width: 19px;
  height: 19px;
}
.profile-achievement__body {
  display: grid;
  gap: 2px;
}
.profile-achievements li strong {
  color: var(--color-ink);
}
.profile-achievements li span,
.profile-achievements__empty {
  color: var(--color-text-sub);
  font-size: .86rem;
}
.profile-achievements li strong + span {
  color: var(--color-text-sub);
}
.profile-achievements li small {
  color: var(--color-secondary);
  font-size: .76rem;
  font-weight: 900;
}
.profile-review-link {
  margin-top: 16px;
  padding: 14px;
  border-radius: 12px;
  background: #eef8ff;
  border: 1px solid #cfeaff;
}
.profile-review-btn {
  width: 100%;
  background: #fff;
  color: var(--color-secondary);
  border: 2px solid #bfe4fb;
  gap: 8px;
}
.profile-review-btn .icon {
  width: 18px;
  height: 18px;
}
.profile-review-link p {
  margin-top: 8px;
  color: var(--color-text-sub);
  font-size: .84rem;
}
.profile-settings-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}
.profile-settings-form label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}
.profile-settings-form input,
.profile-settings-form select {
  height: var(--tap-min);
  padding: 0 12px;
  border: 2px solid #e5e5e5;
  border-radius: 10px;
  font: inherit;
}
.profile-toggle {
  grid-template-columns: 1fr auto;
  align-items: center;
}
.profile-save-btn {
  width: 100%;
  background: var(--color-primary);
  color: #fff;
}
.profile-form-status {
  min-height: 1.3em;
  color: var(--color-text-sub);
  font-size: .88rem;
}
.profile-demo-tools {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
}
.profile-reset-demo-btn {
  width: 100%;
  background: #fff;
  border: 2px solid #e5e5e5;
  color: var(--color-danger);
}
.profile-demo-tools p {
  margin-top: 8px;
  color: var(--color-text-sub);
  font-size: .84rem;
}

/* ── 복습 ─────────────────────────────────────────────────────── */
.review-section {
  display: grid;
  gap: 14px;
}
.review-header {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.review-header__eyebrow {
  color: var(--color-secondary);
  font-weight: 900;
  font-size: .78rem;
  margin-bottom: 3px;
}
.review-header h2 {
  font-size: 1.2rem;
  line-height: 1.2;
}
.review-header__count {
  min-width: 58px;
  text-align: right;
  color: var(--color-text-sub);
  font-weight: 900;
}
.review-exercise {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
}
.review-card-meta {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
.review-card-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  background: #fff0f0;
  color: var(--color-danger);
  font-size: .76rem;
  font-weight: 900;
}
.review-card-host {
  display: grid;
  gap: 14px;
}
.review-empty {
  min-height: 360px;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 32px 20px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  text-align: center;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
}
.review-empty__icon {
  color: var(--color-primary);
  display: inline-flex;
}
.review-empty__icon .icon {
  width: 72px;
  height: 72px;
}
.review-empty h2 {
  font-size: 1.35rem;
}
.review-empty p {
  color: var(--color-text-sub);
  font-size: .92rem;
}
.review-primary-btn {
  margin-top: 8px;
  width: 100%;
  max-width: 260px;
  background: var(--color-primary);
  color: #fff;
}

/* ── 리그 ─────────────────────────────────────────────────────── */
.league-section {
  display: grid;
  gap: 14px;
}
.league-hero {
  background: var(--color-ink);
  color: #fff;
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
}
.league-hero p {
  color: #b9e7ff;
  font-weight: 900;
  font-size: .78rem;
  margin-bottom: 4px;
}
.league-hero h1 {
  font-size: 2.3rem;
  line-height: 1;
  margin-bottom: 8px;
}
.league-hero span {
  color: #d7e4e8;
  font-size: .9rem;
  font-weight: 800;
}
.league-list {
  list-style: none;
  display: grid;
  gap: 8px;
}
.league-list li {
  min-height: 58px;
  display: grid;
  grid-template-columns: 32px 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #e5e5e5;
  border-bottom-width: 4px;
  background: #fff;
}
.league-list li.league-row--promo {
  border-color: #d8efca;
}
.league-list li.league-row--me {
  border-color: var(--color-primary);
  background: #f4fbef;
}
.league-rank {
  color: var(--color-text-sub);
  font-weight: 900;
  text-align: center;
}
.league-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef8ff;
  color: var(--color-secondary);
}
.league-row--me .league-avatar {
  background: #def0cc;
  color: var(--color-primary-dk);
}
.league-avatar .icon {
  width: 19px;
  height: 19px;
}
.league-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-ink);
  font-weight: 900;
}
.league-list strong {
  color: var(--color-xp);
  font-size: .86rem;
  white-space: nowrap;
}

/* ── 애니메이션 / 재미 요소 ───────────────────────────────────── */
@keyframes lq-slide-up { from { transform: translateY(18px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes lq-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
@keyframes lq-shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(4px)} }

.ex-feedback { animation: lq-slide-up .22s ease-out; font-size: 1.05rem; }
.ex-feedback--wrong { animation: lq-slide-up .22s ease-out, lq-shake .3s ease-in-out .05s; }
.ex-feedback__icon .icon { animation: lq-pop .3s ease-out; }
.lesson-result-title__icon--pop .icon { animation: lq-pop .5s cubic-bezier(.2,.8,.3,1.2); }

.ex-mc-btn:active, .ex-wb-token:active, .ex-wb-tray-token:active, .ex-listen-btn:active { transform: scale(.97); }

@media (prefers-reduced-motion: reduce) {
  .ex-feedback, .ex-feedback--wrong, .ex-feedback__icon .icon, .lesson-result-title__icon--pop .icon { animation: none; }
}

@media (min-width: 760px) {
  #app-main { max-width: 720px; }
  .auth-screen {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: none;
    align-items: center;
  }
  .auth-showcase { min-height: 420px; }
  .auth-mascot { width: 128px; height: 128px; }
  .auth-mascot .brand-logo { width: 86px; height: 78px; }
  .auth-path-preview {
    right: 44px;
    top: 58px;
    transform: scale(1.45);
    transform-origin: top right;
  }
  .auth-preview-card {
    left: 28px;
    right: 210px;
    bottom: 34px;
  }
  .course-overview {
    grid-template-columns: minmax(0, 1fr) 240px;
    align-items: end;
  }
  .course-overview__stats { grid-column: 1 / -1; }
  .course-overview__cta { grid-column: 2; grid-row: 1; align-self: end; }
  .lesson-result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  #app-header { padding: 0 10px; }
  .header-logo { font-size: .98rem; }
  .header-right { gap: 5px; }
  .header-stat { font-size: .78rem; }
  .header-icon-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
  .course-overview__stats { grid-template-columns: 1fr; }
  .tabbar-item { font-size: .64rem; padding-inline: 2px; }
}