:root {
  --bg: #f4f1ea;
  --card: #ffffff;
  --ink: #2b2622;
  --ink-soft: #6f675e;
  --line: #e7e1d6;
  --accent: #c66a3e;       /* terracotta — 콘텐츠 계열 */
  --accent-soft: #f3e2d6;
  --green: #5b8c63;        /* green — 단어 계열 */
  --green-soft: #e2efe1;
  --danger: #c0524a;       /* 삭제·오답 (테마와 무관하게 항상 구분) */
  --gold: #c9a24a;
  --shadow: 0 6px 24px rgba(60, 48, 36, 0.10);
  --radius: 18px;
}

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

/* 단어 계열 화면(복습·단어장): 포인트 컬러를 녹색으로 — 안의 var(--accent)들이 모두 녹색이 됨 */
.theme-green { --accent: var(--green); --accent-soft: var(--green-soft); }

html, body {
  height: 100%;
  font-family: "Noto Sans KR", system-ui, sans-serif;
  background: #d9d2c5;
  color: var(--ink);
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

/* 폰 프레임 */
#phone {
  position: relative;
  width: 100%;
  max-width: 430px;
  height: min(900px, 96vh);
  background: var(--bg);
  border-radius: 34px;
  box-shadow: 0 18px 50px rgba(40, 30, 20, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#app {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
#app::-webkit-scrollbar { display: none; }

/* 실제 모바일 / 설치형(PWA): 데스크톱 미리보기용 폰 프레임을 없애고 화면을 꽉 채운다 */
@media (max-width: 540px), (display-mode: standalone) {
  body { padding: 0; background: var(--bg); }
  #phone {
    max-width: none; width: 100%; height: 100%;
    border-radius: 0; box-shadow: none;
    padding-top: env(safe-area-inset-top); /* 노치/상태바 대응 (없으면 0) */
  }
}

.hidden { display: none !important; }

/* ---------- 공통 ---------- */
.screen { padding: 22px 20px 28px; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
h1.title { font-family: "Gowun Batang", serif; font-size: 27px; line-height: 1.25; margin: 6px 0 4px; }
h1.title em { font-style: italic; color: var(--accent); }
.subtitle { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  margin-top: 16px;
}

.row { display: flex; gap: 10px; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }

/* 버튼 */
.btn {
  width: 100%;
  border: none;
  border-radius: 14px;
  padding: 15px 16px;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: transform .08s ease, filter .15s ease, background .15s;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:disabled { background: #cdbfae; cursor: default; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.btn.green { background: var(--green); color: #fff; }
.btn.small { padding: 10px 14px; font-size: 14px; width: auto; }

/* 선택 칩 */
.chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.chip {
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 9px 15px;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all .12s;
}
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* 옵션 큰 버튼 (언어/난이도) */
.optlist { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.opt {
  display: flex; align-items: center; gap: 14px;
  border: 1.5px solid var(--line); background: var(--card);
  border-radius: 16px; padding: 16px; cursor: pointer; font-family: inherit;
  text-align: left; transition: all .12s; width: 100%;
}
.opt.on { border-color: var(--accent); background: var(--accent-soft); }
.opt .big { font-size: 26px; }
.opt .opt-main { display: block; font-weight: 700; font-size: 16px; }
.opt .opt-main .lv-tag { display: inline-block; vertical-align: middle; margin-left: 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em; color: var(--accent); background: var(--accent-soft); padding: 2px 7px; border-radius: 999px; }
.opt .opt-sub { display: block; color: var(--ink-soft); font-size: 13px; margin-top: 4px; line-height: 1.5; }

/* 진행 점 (온보딩 상단) */
.dots { display: flex; gap: 7px; justify-content: center; margin: 6px 0 26px; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: #d9d0c2; }
.dots i.on { background: var(--accent); width: 22px; border-radius: 99px; }

/* 서비스 소개 인트로 */
.intro-screen { display: flex; flex-direction: column; min-height: 100%; padding: 18px 24px 28px; }
.intro-top { display: flex; justify-content: flex-end; min-height: 28px; }
.intro-skip { background: none; border: none; color: var(--ink-soft); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; padding: 6px 2px; }
.intro-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; }
.intro-emoji { font-size: 76px; line-height: 1; animation: introPop .4s ease; }
@keyframes introPop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.intro-title { font-size: 25px; line-height: 1.3; }
.intro-text { font-size: 15.5px; line-height: 1.6; max-width: 300px; }
.intro-cta { margin-top: 6px; }

/* 로그인 화면 */
.login-cta { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.login-btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }
.login-btn .login-ico { font-weight: 900; }
.login-btn.kakao { background: #FEE500; color: #191600; }
.login-btn.google { background: #fff; color: #2b2622; border: 1.5px solid var(--line); }
.login-btn.google .login-ico { color: #4285F4; }
.login-note { text-align: center; font-size: 12px; color: var(--ink-soft); margin-top: 6px; }

/* 작은 텍스트 토글 (예: 알림 안 받을래요) */
.link-toggle { display: block; margin: 12px auto 0; background: none; border: none;
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.card.disabled { opacity: .45; }

/* 설정 리스트 (뎁스형) */
.set-list { margin-top: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 17px 16px; background: none; border: none; font-family: inherit;
  border-bottom: 1px solid var(--line); cursor: pointer; text-align: left; }
.set-row:last-child { border-bottom: none; }
.set-row:active { background: rgba(0,0,0,.03); }
.set-label { font-size: 15px; font-weight: 600; color: var(--ink); }
.set-right { display: flex; align-items: center; gap: 8px; }
.set-value { font-size: 14px; color: var(--ink-soft); }
.set-chevron { font-size: 20px; color: #c4b9a8; line-height: 1; }

/* on/off 토글 스위치 */
.switch { position: relative; display: inline-block; width: 46px; height: 28px; flex: 0 0 auto; }
.switch input { display: none; }
.switch .slider { position: absolute; inset: 0; background: #d4cabb; border-radius: 999px; transition: background .2s; }
.switch .slider::before { content: ""; position: absolute; width: 22px; height: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* ---------- 홈 ---------- */
.greeting { display: flex; justify-content: space-between; align-items: flex-start; }
.streak { background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
/* 홈 상단 국기+레벨 칩 (탭 → 언어 전환) */
.lang-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--card); border: 1px solid var(--line, #e7e2d8); border-radius: 999px; padding: 6px 11px 6px 9px; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.lang-chip:active { transform: scale(.97); }
.lang-chip .lc-flag { font-size: 22px; line-height: 1; }
.lang-chip .lc-lv { font-size: 14px; font-weight: 700; color: var(--ink); }
.lang-chip .lc-caret { width: 15px; height: 15px; color: var(--ink-soft); margin-left: -2px; }
.lang-switch .optlist { gap: 10px; }

.stat-row { display: flex; gap: 10px; margin-top: 16px; }
.stat { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; text-align: center; }
/* 단어 2개를 한 카드에 묶고 각 절반을 탭 가능하게 */
.stat-group { flex: 2; padding: 0; display: flex; overflow: hidden; }
.stat-half { flex: 1; padding: 14px 8px; text-align: center; cursor: pointer; transition: transform .08s, background .12s; }
.stat-half:active { transform: scale(.96); background: var(--accent-soft); }
.stat-half + .stat-half { border-left: 1px solid var(--line); }
.stat b { display: block; font-size: 24px; font-family: "Gowun Batang", serif; }
.stat span { font-size: 12px; color: var(--ink-soft); }

.feature {
  margin-top: 16px; border-radius: var(--radius); padding: 20px; color: #fff;
  position: relative; overflow: hidden; cursor: pointer; box-shadow: var(--shadow);
}
.feature.today { background: linear-gradient(135deg, #c66a3e, #a8502c); }
.feature.review { background: linear-gradient(135deg, #5b8c63, #436b4a); }
.feature.locked { background: linear-gradient(135deg, #b7ada1, #9c9183); } /* 무료 콘텐츠 상한 / 체험 종료 */
.feature.review.locked { background: linear-gradient(135deg, #a7a79c, #8c8c83); }

/* 체험 종료 잠금 배너 */
.banner.lock-banner { background: #f3e2d6; color: var(--accent); cursor: pointer; font-weight: 600; }

/* 결제 페이지 */
.paywall { padding: 22px 4px; text-align: center; }
.pw-emoji { font-size: 54px; line-height: 1; margin-bottom: 6px; }
.pw-card { margin-top: 20px; background: var(--card); border: 1.5px solid var(--accent); border-radius: 18px; padding: 22px 20px; box-shadow: var(--shadow); }
.pw-price { font-size: 22px; }
.pw-price b { font-size: 26px; color: var(--accent); }
.pw-price .pw-old { color: var(--ink-soft); text-decoration: line-through; font-size: 15px; margin-right: 6px; }
.pw-tag { display: inline-block; margin-top: 8px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 13px; padding: 5px 12px; border-radius: 999px; }
.pw-benefits { list-style: none; text-align: left; margin-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.pw-benefits li { font-size: 14.5px; padding-left: 24px; position: relative; }
.pw-benefits li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 900; }
.pw-email { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 13px 14px; font-size: 15px; font-family: inherit; margin-top: 14px; }
.pw-email:focus { outline: none; border-color: var(--accent); }

/* 플랜 선택 카드 */
.pw-plans { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.pw-plan { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px;
  font-family: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
.pw-plan.on { border-color: var(--accent); background: var(--accent-soft); }
.pw-radio { width: 20px; height: 20px; min-width: 20px; border-radius: 50%; border: 2px solid #cdbfae; position: relative; }
.pw-plan.on .pw-radio { border-color: var(--accent); }
.pw-plan.on .pw-radio::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
.pw-plan-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pw-plan-name { font-size: 15.5px; font-weight: 700; }
.pw-rec { font-size: 11px; font-weight: 800; color: #fff; background: var(--accent); padding: 2px 7px; border-radius: 999px; margin-left: 4px; vertical-align: middle; }
.pw-plan-daily { font-size: 12.5px; color: var(--ink-soft); }
.pw-plan-amt { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.pw-plan-price { font-size: 16px; font-weight: 800; }
.pw-plan-off { font-size: 11.5px; color: var(--accent); font-weight: 700; }
.pw-plan-off .pw-old { color: var(--ink-soft); text-decoration: line-through; font-weight: 500; margin-right: 3px; }

/* 준비 중 — 빛이 왼쪽→오른쪽으로 스쳐 지나가는 효과 */
.feature.loading-shimmer::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 55%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.06) 35%, rgba(255,255,255,.38) 50%, rgba(255,255,255,.06) 65%, transparent 100%);
  transform: skewX(-18deg);
  animation: shimmerSweep 1.9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSweep {
  0%   { left: -70%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
.feature .f-eyebrow { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .85; font-weight: 700; }
.feature h2 { font-family: "Gowun Batang", serif; font-weight: 500; font-size: 21px; margin: 6px 0 4px; }
.feature p { font-size: 13.5px; opacity: .9; line-height: 1.5; }
.feature .arrow { position: absolute; right: 18px; bottom: 16px; font-size: 22px; opacity: .9; }
.feature .status-pill {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,.22); color: #fff; font-size: 12px; font-weight: 700;
  padding: 7px 13px; border-radius: 999px;
}

/* 완료 체크 배지 — 카드 색 체크가 든 큰 흰 원 + 파티클 */
.check-badge {
  position: absolute; right: 18px; top: 50%; margin-top: -21px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(30, 22, 14, .2);
}
.feature.today .check-badge { color: var(--accent); }
.feature.review .check-badge { color: var(--green); }
.check-badge svg { width: 23px; height: 23px; }
/* 완료 전 — 흐릿한 자리표시 (그림자처럼) */
.feature .check-badge.ghost {
  background: rgba(0, 0, 0, .10); color: rgba(0, 0, 0, .20); box-shadow: none;
}
/* 이전 학습 카드용 작은 배지 — 연한 주황 배경 */
.check-badge.small {
  position: static; margin-top: 0; flex-shrink: 0;
  width: 42px; height: 42px; color: var(--accent);
  background: var(--accent-soft); border: none;
  box-shadow: 0 3px 10px rgba(30, 22, 14, .10);
}
.check-badge.small svg { width: 23px; height: 23px; }
/* 배지가 있으면 텍스트가 겹치지 않게 */
.feature:has(.check-badge) { padding-right: 76px; }
.check-badge.pop { animation: stampIn .55s cubic-bezier(.2, 1.9, .45, 1) both; }
@keyframes stampIn {
  0%   { transform: scale(2.2) rotate(-14deg); opacity: 0; }
  55%  { transform: scale(.9) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
/* 파티클 — pop일 때만 사방으로 터짐 */
.check-badge .spark {
  position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
  border-radius: 50%; opacity: 0; pointer-events: none;
}
.check-badge.pop .spark { animation: sparkOut .85s ease-out .2s both; }
.check-badge .s1 { --dx: -64px; --dy: -42px; background: #e8638c; }
.check-badge .s2 { --dx:  58px; --dy: -50px; background: #5b8cf2; width: 14px; height: 14px; }
.check-badge .s3 { --dx:  72px; --dy:  12px; background: #46c2b1; }
.check-badge .s4 { --dx: -72px; --dy:  14px; background: #c9a24a; width: 9px; height: 9px; }
.check-badge .s5 { --dx: -38px; --dy:  50px; background: #9b6ff2; }
.check-badge .s6 { --dx:  42px; --dy:  48px; background: #e8638c; width: 9px; height: 9px; }
.check-badge .s7 { --dx:   5px; --dy: -62px; background: #46c2b1; width: 10px; height: 10px; }
.check-badge .s8 { --dx:  10px; --dy:  62px; background: #5b8cf2; }
@keyframes sparkOut {
  0%   { transform: translate(-50%, -50%) scale(.3); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.3); opacity: 0; }
}

/* 목표 복습량 달성 축하 화면 */
.goal-done { padding-top: 70px; }
.celebrate {
  position: relative; width: 96px; height: 96px; margin: 0 auto 24px;
  background: #fff; border-radius: 50%; box-shadow: var(--shadow);
  display: grid; place-items: center;
  animation: stampIn .6s cubic-bezier(.2, 1.9, .45, 1) both;
}
.celebrate .big-emoji { font-size: 46px; }
.celebrate .spark {
  position: absolute; left: 50%; top: 50%; width: 16px; height: 16px;
  border-radius: 50%; opacity: 0; pointer-events: none;
  animation: sparkOut 1.1s cubic-bezier(.15,.7,.3,1) .2s both;
}
.celebrate .s1  { --dx: -125px; --dy:  -85px; background: #e8638c; }
.celebrate .s2  { --dx:  115px; --dy:  -98px; background: #5b8cf2; width: 20px; height: 20px; }
.celebrate .s3  { --dx:  140px; --dy:   20px; background: #46c2b1; }
.celebrate .s4  { --dx: -140px; --dy:   26px; background: #c9a24a; width: 13px; height: 13px; }
.celebrate .s5  { --dx:  -72px; --dy:  102px; background: #9b6ff2; }
.celebrate .s6  { --dx:   82px; --dy:   96px; background: #e8638c; width: 13px; height: 13px; }
.celebrate .s7  { --dx:    8px; --dy: -130px; background: #46c2b1; width: 15px; height: 15px; }
.celebrate .s8  { --dx:   14px; --dy:  128px; background: #5b8cf2; }
.celebrate .s9  { --dx: -100px; --dy:  -16px; background: #f0a13e; width: 12px; height: 12px; }
.celebrate .s10 { --dx:  100px; --dy:  -24px; background: #9b6ff2; width: 12px; height: 12px; }

/* 내 학습 피드 — 날짜 라벨 & 이전 콘텐츠 카드 */
.day-label { font-size: 13px; color: var(--ink-soft); font-weight: 600; margin: 16px 2px 9px; }
.past-day { font-size: 14px; color: var(--ink); font-weight: 700; margin: 18px 2px 4px; }
.past-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px; box-shadow: var(--shadow); cursor: pointer; margin-top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.past-card:active { transform: scale(.99); }
.past-left { min-width: 0; }
.past-meta { font-size: 12.5px; color: var(--ink-soft); font-weight: 600; margin-bottom: 5px; }
.past-title { font-size: 18px; font-weight: 500; line-height: 1.35; }
.past-sub { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }
.past-badge {
  font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 999px;
  background: var(--accent); color: #fff; white-space: nowrap; flex-shrink: 0;
}
.past-badge.gray { background: #cdbfae; }

/* ---------- 콘텐츠 리더 ---------- */
/* 스티키 헤더 공통 — 상단바 / 리더 헤더 / 목록 헤더. (.screen 패딩 22px 20px 기준)
   · margin -22/-20 + padding 22/20 : 화면 패딩을 상쇄하고 동일 위치를 유지해
     in-flow ↔ 고정 전환 시 점프('살짝 밀림') 없이 매끄럽게.
   · 좌우 풀블리드 배경 : 스크롤되는 카드가 가장자리에 비치지 않음. */
.topbar, .reader-head, .list-head, .home-head {
  position: sticky; top: 0; z-index: 30; background: var(--bg);
  margin: -22px -20px 0; padding: 22px 20px 0;
}
/* 고정영역이 상단에 붙었을 때(.stuck)만 부드러운 그림자 — 콘텐츠가 뒤로 넘어갈 때 끊겨 보이지 않게 */
.topbar, .reader-head, .list-head, .home-head, .sticky-bar { transition: box-shadow .2s ease; }
.topbar.stuck, .reader-head.stuck, .list-head.stuck, .home-head.stuck, .sticky-bar.stuck {
  box-shadow: 0 7px 14px -7px rgba(40, 30, 20, .18);
}
/* 내 학습(홈): 언어 칩 + 연속일 바를 상단 고정 (인사말·이하 콘텐츠는 스크롤) */
.home-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; }
.topbar { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; } /* 단독 상단바 (설정·타임라인·온보딩 등) */
.reader-head { padding-bottom: 12px; }   /* 오늘의 콘텐츠 · 읽을거리 · 지난 콘텐츠: 상단바+탭 고정 */
/* 리더 헤더 안의 상단바는 바깥 리더 헤더가 풀블리드·고정을 담당하므로 자체 마진/패딩 리셋 */
.reader-head .topbar { position: static; margin: 0; padding: 0; z-index: auto; }
.reader-head .tabs { margin-top: 14px; }
/* 단어장: 제목('나의 단어장')+요주의 필터 한 줄 + 탭까지 통째로 상단 고정 */
.list-head { padding-bottom: 12px; }
.list-head .wb-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.list-head .wb-head-row .title { margin: 0; white-space: nowrap; }
.list-head .wb-head-row .leech-filter { margin: 0; flex-shrink: 0; }
.list-head .tabs { margin-top: 14px; }

/* 목록 화면(단어장·읽을거리): 제목은 함께 스크롤되다가, 탭/필터부터 상단 고정.
   padding-top 으로 고정 시 상태표시줄과의 여백 확보(바 배경에 포함되어 항상 유지). */
.sticky-bar { position: sticky; top: 0; z-index: 30; background: var(--bg); margin: 0 -20px; padding: 16px 20px 10px; }
.sticky-bar .tabs { margin-top: 0; }
.sticky-bar .ex-filters { margin: 0; }
/* 콘텐츠 학습완료 — 폰 프레임 하단에 고정되는 풀폭 버튼 (주황=콘텐츠 테마) */
.content-cta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 40;
  border: none; border-radius: 0;
  background: var(--accent); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  padding: 18px 20px calc(18px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 22px rgba(60, 48, 36, .12);
}
.content-cta:active { filter: brightness(.95); }
.content-cta:disabled { background: #cdbfae; cursor: default; }
.review-cta { background: var(--green); } /* 복습 = 녹색 테마 */

/* 오늘 완료 칭찬 팝업 */
.modal-backdrop { position: absolute; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
  background: rgba(40, 30, 20, .42); padding: 28px; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card { background: var(--card); border-radius: 22px; padding: 28px 24px 22px; width: 100%; max-width: 320px;
  text-align: center; box-shadow: 0 20px 50px rgba(40, 30, 20, .35); animation: modalPop .32s cubic-bezier(.2,.9,.3,1.3); }
@keyframes modalPop { from { transform: scale(.8); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-card .dd-emoji { font-size: 60px; line-height: 1; animation: introPop .5s ease; }
.modal-card .modal-title { font-family: "Gowun Batang", serif; font-size: 24px; margin: 12px 0 6px; }
.modal-card .modal-text { color: var(--ink-soft); font-size: 15px; line-height: 1.6; margin-bottom: 20px; }

/* 읽을거리 필터 버튼 */
.ex-filters { display: flex; gap: 8px; margin: 14px 0 4px; flex-wrap: wrap; }
.filter-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--card); border: 1px solid var(--line); color: var(--ink);
  font-size: 13.5px; font-weight: 600; padding: 8px 13px; border-radius: 999px; cursor: pointer; }
.filter-btn svg { width: 15px; height: 15px; color: var(--ink-soft); }
.filter-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.filter-btn.active svg { color: #fff; }
.filter-btn:active { transform: scale(.97); }

/* 바텀시트(밑에서 올라오는 모달) */
.modal-backdrop.sheet { align-items: flex-end; padding: 0; }
.sheet-card { background: var(--card); width: 100%; border-radius: 22px 22px 0 0; padding: 8px 20px 22px;
  box-shadow: 0 -10px 40px rgba(40, 30, 20, .28); animation: sheetUp .28s cubic-bezier(.2,.85,.3,1); }
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
.sheet-grip { width: 38px; height: 4px; border-radius: 999px; background: var(--line); margin: 4px auto 10px; }
.sheet-title { font-family: "Gowun Batang", serif; font-size: 18px; margin: 0 2px 10px; }
.sheet-row { display: flex; align-items: center; justify-content: space-between; width: 100%; background: var(--bg, #faf8f3);
  border: 1px solid var(--line); border-radius: 14px; padding: 13px 15px; margin-bottom: 8px; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer; }
.sheet-row.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.sheet-check { width: 19px; height: 19px; color: var(--accent); }

/* 온보딩 공통 레이아웃 — 콘텐츠를 살짝 아래로 */
.ob-screen .dots { margin-top: 16px; margin-bottom: 24px; }
.ob-screen .title { margin-top: 4px; }
.iconbtn { background: var(--card); border: 1px solid var(--line); border-radius: 12px; width: 40px; height: 40px; font-size: 18px; cursor: pointer; display: grid; place-items: center; }
.skip-btn {
  margin-left: auto; border: none; background: transparent; cursor: pointer;
  color: var(--ink-soft); font-size: 13.5px; font-weight: 600; font-family: inherit; padding: 8px 4px;
}
.skip-btn:active { opacity: .6; }
.badge { background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; }

/* 문장들을 하나의 카드 안에 묶고, 사이는 구분선으로만 (연결된 글 느낌) */
.sentence-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; }
.sentence { padding: 16px 18px; cursor: pointer; }
.sentence + .sentence { border-top: 1px solid var(--line); }
.sentence .orig { font-size: 18px; line-height: 1.6; font-weight: 500; }
/* 초급 후리가나 (한자 위 읽기) */
.sentence .orig.furi { line-height: 2.2; }
.orig.furi ruby rt { font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.sentence .trans { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.sentence .tap-hint { font-size: 12px; color: var(--accent); margin-top: 8px; }

.section-h { font-family: "Gowun Batang", serif; font-size: 19px; margin: 26px 0 4px; }

/* 제목 번역 탭 토글 */
.title-trans { margin-top: 5px; cursor: pointer; font-size: 14px; line-height: 1.5; }
.title-trans .tt-hidden { color: var(--accent); font-weight: 500; }
.title-trans .tt-shown { color: var(--ink-soft); }

/* 단어 카드 (콘텐츠 하단 + 단어장) */
.vocab {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 15px 16px; margin-top: 11px; box-shadow: var(--shadow);
}
.vocab .v-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vocab .term { font-size: 18px; font-weight: 500; }
.vocab .reading { font-size: 13px; color: var(--ink-soft); font-weight: 400; margin-left: 6px; }
.vocab .term ruby rt { font-size: 11px; color: var(--ink-soft); font-weight: 400; }
.vocab .tag { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; white-space: nowrap; }
.vocab .meaning { font-size: 15px; margin-top: 8px; }
.vocab .ex { font-size: 13.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.5; }
.vocab .ex .exko { display: block; opacity: .8; margin-top: 2px; }
.vocab .ex .hl-term { color: var(--green); font-weight: 700; } /* 예문 속 해당 단어 강조 */
.vocab.hide-meaning .meaning, .vocab.hide-meaning .ex { filter: blur(6px); user-select: none; }

.save-btn {
  border: 1.5px solid var(--accent); background: transparent; color: var(--accent);
  border-radius: 10px; padding: 7px 13px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.save-btn.saved { background: var(--accent); color: #fff; }

/* ---------- 단어장 ---------- */
.tabs { display: flex; gap: 8px; background: var(--accent-soft); padding: 5px; border-radius: 14px; margin-top: 16px; }
.tabs button { flex: 1; border: none; background: transparent; padding: 11px; border-radius: 10px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; color: var(--accent); }
.tabs button.on { background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.06); color: var(--ink); }

.empty { text-align: center; color: var(--ink-soft); padding: 50px 20px; }
.empty .e-emoji { font-size: 44px; }
.empty p { margin-top: 12px; font-size: 14px; line-height: 1.6; }

.card-actions { display: flex; gap: 8px; margin-top: 12px; }

/* 단어장 — 스와이프 삭제 & 뜻 숨김 */
.swipe-wrap { position: relative; margin-top: 12px; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow); }
.swipe-btn {
  position: absolute; top: 0; bottom: 0;
  border: none; color: #fff; font-weight: 700; font-size: 15px;
  font-family: inherit; cursor: pointer;
}
.swipe-btn.del { left: 0; width: 84px; background: var(--danger); }       /* 오른쪽 스와이프 → 삭제 */
.swipe-btn.master { right: 0; width: 96px; background: var(--green); }     /* 왼쪽 스와이프 → 마스터 */
.swipe-btn.relearn { right: 0; width: 120px; background: var(--green); font-size: 14px; } /* 왼쪽 스와이프 → 학습중으로 */
.swipe-card {
  margin-top: 0 !important; box-shadow: none; position: relative;
  touch-action: pan-y; transition: transform .18s ease; will-change: transform;
}
.swipe-card.dragging { transition: none; }
.reveal { margin-top: 11px; cursor: pointer; }
.reveal-hidden {
  background: #F0EFEF; color: var(--ink-soft); border-radius: 10px;
  padding: 13px 14px; font-size: 14px; font-weight: 500; user-select: none;
}
.reveal-shown .meaning { margin-top: 0; }
.reveal-shown .ex { margin-top: 8px; }
/* 뜻을 펼쳤을 때도 '뜻 확인하기'와 같은 회색 박스 — 단어장 + 콘텐츠 리더 문장 번역 동일 포맷 */
.vocab .reveal-shown, .sentence .reveal-shown { background: #F0EFEF; border-radius: 10px; padding: 13px 14px; }
.sentence .reveal-shown { font-size: 14px; line-height: 1.55; } /* 문장 번역 글자 크기 (단어장은 별도) */
.vocab .reveal-shown .exko { color: var(--ink-soft); }

/* 복습 진행 도트 (마스터까지 3회) */
/* 마스터 별 — 마스터한 횟수만큼. 별이 많을수록 자주 까먹는 단어. */
.stars { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 6px;
  color: var(--gold); font-size: 13px; letter-spacing: 1px; }
.stars .star-plus { color: var(--ink-soft); font-size: 11px; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
/* 요주의(자주 틀리는) 단어 — 주황 느낌표 뱃지 */
.leech-badge { display: inline-grid; place-items: center; vertical-align: middle; margin-left: 6px;
  width: 18px; height: 18px; border-radius: 50%; background: #ef8a3c; color: #fff;
  font-size: 12px; font-weight: 800; line-height: 1; }
/* 단어장 '요주의만 보기' 필터 토글 */
.leech-filter { display: inline-flex; align-items: center; gap: 4px; margin: 10px 0 0;
  background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 999px;
  padding: 7px 12px 7px 9px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; }
.leech-filter .leech-badge { margin-left: 0; width: 16px; height: 16px; font-size: 11px; }
.leech-filter.on { background: #fdeede; border-color: #ef8a3c; color: #b85e1e; }

/* 마스터 배지 */
.grad-badge { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: var(--green-soft); color: var(--green); font-weight: 700; }

/* ---------- 복습 ---------- */
.review-stage { margin-top: 18px; }
.prompt-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px; box-shadow: var(--shadow); }
.prompt-card .for-term-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.prompt-card .for-term { font-size: 13px; color: var(--accent); font-weight: 700; }
.prompt-card .for-term-row .play { flex: 0 0 auto; }
.prompt-card .ex-sentence { font-family: "Gowun Batang", serif; font-size: 20px; line-height: 1.55; margin-top: 10px; }
.ex-sentence .tgt { color: var(--green); font-weight: 700; } /* 복습 대상 단어 강조 */
/* 예문 속 탭 가능한 단어 + 툴팁 */
.hw {
  position: relative; cursor: pointer;
  border-bottom: 2px dotted #d8c2ad; padding-bottom: 1px;
}
.hw.open { background: var(--accent-soft); border-radius: 5px; border-bottom-color: var(--accent); }
.hw .tip {
  display: none; position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font-family: "Noto Sans KR", sans-serif; font-size: 13px; font-weight: 500; line-height: 1.4;
  padding: 8px 12px; border-radius: 10px; z-index: 30;
  width: max-content; max-width: 220px; text-align: center; white-space: normal;
  box-shadow: 0 6px 18px rgba(30, 22, 14, .25);
}
.hw .tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--ink);
}
.hw.open .tip { display: block; }

textarea.answer {
  width: 100%; margin-top: 14px; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 14px; font-size: 15px; font-family: inherit; resize: none; background: var(--card); color: var(--ink); min-height: 90px;
}
textarea.answer:focus { outline: none; border-color: var(--accent); }

.result {
  margin-top: 16px; border-radius: 16px; padding: 18px; border: 1.5px solid;
}
.result.ok { background: var(--green-soft); border-color: var(--green); }
.result.partial { background: #fbf1dd; border-color: #e0b54e; } /* 단어✓·문맥✗ — 정답/오답 중간 */
.result.no { background: #f7e4dc; border-color: var(--danger); }
.result .r-head { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px; }
.result .r-note { font-size: 13px; color: #9a6a16; background: rgba(224,181,78,.16); border-radius: 10px; padding: 8px 11px; margin: 10px 0 2px; line-height: 1.5; }
.result .r-flags { display: flex; gap: 8px; margin: 12px 0; }
.result .flag { font-size: 12px; padding: 5px 10px; border-radius: 999px; font-weight: 700; }
.result .flag.y { background: #fff; color: var(--green); }
.result .flag.n { background: #fff; color: var(--danger); }
.result .fb { font-size: 14.5px; line-height: 1.6; }
.result .model { font-size: 13px; color: var(--ink-soft); margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.12); }

/* 로딩 */
.loading { text-align: center; padding: 60px 20px; }
.spinner {
  width: 38px; height: 38px; border: 3px solid var(--accent-soft);
  border-top-color: var(--accent); border-radius: 50%; margin: 0 auto 16px;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading p { color: var(--ink-soft); font-size: 14px; }

/* 타임라인 */
.tl-item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; margin-top: 12px; box-shadow: var(--shadow); cursor: pointer; }
.tl-item .tl-date { font-size: 12px; color: var(--accent); font-weight: 700; }
.tl-item .tl-title { font-weight: 700; font-size: 16px; margin: 5px 0 6px; }
.tl-item .tl-meta { font-size: 12.5px; color: var(--ink-soft); }

/* 설정 */
.setting-group { margin-top: 22px; }
.setting-group h3 { font-size: 13px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.time-input { width: 100%; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; font-size: 16px; font-family: inherit; background: var(--card); color: var(--ink); }

/* 탭바 */
#tabbar {
  display: flex; border-top: 1px solid var(--line); background: rgba(255,255,255,.92);
  backdrop-filter: blur(8px); padding: 8px 6px max(8px, env(safe-area-inset-bottom));
}
#tabbar button {
  flex: 1; border: none; background: transparent; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: var(--ink-soft); font-size: 11px; font-weight: 500; padding: 4px;
}
#tabbar button .ico { width: 23px; height: 23px; opacity: .65; }
#tabbar button.on { color: var(--accent); font-weight: 700; }
#tabbar button.on .ico { opacity: 1; }
#tabbar button[data-tab="wordbook"].on { color: var(--green); } /* 단어장 = 녹색 */

/* 플로팅 복습 버튼 (단어장) */
.fab {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 82px; z-index: 40;
  background: var(--green); color: #fff; border: none;
  border-radius: 999px; padding: 14px 24px; font-size: 15px; font-weight: 700;
  font-family: inherit; cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 26px rgba(160, 80, 44, .38);
}
.fab:active { transform: translateX(-50%) scale(.96); }

.toast {
  position: absolute; left: 50%; bottom: 84px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; box-shadow: var(--shadow); z-index: 50;
  animation: toastin .25s ease; white-space: nowrap;
}
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

.banner {
  background: #fbeede; border: 1px solid #f0d2b8; color: #8a4a22;
  border-radius: 14px; padding: 13px 15px; font-size: 13px; line-height: 1.55; margin-top: 16px;
}
.banner b { font-weight: 700; }

/* 음성 재생 버튼 */
.s-row { display: flex; align-items: flex-start; gap: 10px; }
.s-row .orig { flex: 1; }
.play {
  border: none; background: var(--accent-soft); color: var(--accent);
  width: 36px; height: 36px; min-width: 36px; border-radius: 11px; cursor: pointer;
  font-size: 16px; display: grid; place-items: center; flex-shrink: 0; transition: transform .08s;
}
.play:active { transform: scale(.9); }
.play.speaking { background: var(--accent); color: #fff; }
.play svg.spk { width: 64%; height: 64%; display: block; }
/* 재생 중: 파동이 0→1→2 순서로 켜졌다가 반복 */
.play.speaking .spk .w1 { animation: spk1 1s linear infinite; }
.play.speaking .spk .w2 { animation: spk2 1s linear infinite; }
@keyframes spk1 { 0%, 32% { opacity: 0; } 34%, 100% { opacity: 1; } }
@keyframes spk2 { 0%, 65% { opacity: 0; } 67%, 100% { opacity: 1; } }
/* 단어장 예문 사운드 버튼은 회색 계열 */
.play.ex-play { background: #e3ddd1; color: var(--ink-soft); }
.play.ex-play.speaking { background: #8c857a; color: #fff; }
.vocab .v-top .play, .ex .play {
  width: 26px; height: 26px; min-width: 26px; font-size: 12px;
  border-radius: 8px; display: inline-grid; vertical-align: middle; margin: 0 4px;
}

/* 단어 탭 — 문장별 그룹 */
.vgroup { margin-top: 20px; }
.vgroup + .vgroup { border-top: 1px solid var(--line); padding-top: 6px; }
.vgroup-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.vgroup-n { font-size: 12px; font-weight: 700; color: var(--accent); letter-spacing: .02em; }
.vgroup-s { font-size: 13.5px; color: var(--ink-soft); line-height: 1.45; }
.vocab.word { padding: 13px 15px; }
.vocab.word .meaning { margin-top: 6px; font-size: 14.5px; }