:root{
  /* ===== 따뜻한 팔레트 (테라코타 살롱) ===== */
  --bg:#F6F2EC;
  --surface:#FFFFFF;
  --surface-alt:#FBF7F1;
  --surface-sunk:#F0E9DF;
  --surface-dark:#221E1A;
  --surface-dark-alt:#2E2823;
  --ink:#2A231D;
  --ink-muted:#6E6356;
  --ink-faint:#A39686;
  --on-brand:#FFFCF8;
  --on-dark:#F4EEE4;
  --line:#ECE4D8;
  --line-strong:#DCCFBC;
  --brand:#B5562E;
  --brand-soft:#F7E9DD;
  --brand-softer:#FBF2EA;
  --brand-dark:#8E3F1F;
  --brand-line:#E8CDB8;
  --accent:#5E7152;
  --accent-soft:#E9EEE3;
  --accent-line:#C7D3BA;
  --sand:#C29A5C;
  --sand-soft:#F5EAD6;
  --gold:#B58A3C;
  --gold-soft:#F6ECD4;
  --success:#4E7A4C; --success-soft:#E8F0E3; --success-line:#BFD6B8;
  --danger:#B23A33;  --danger-soft:#F7E5E0;  --danger-line:#E6C2B6;
  --warning:#A4761B; --warning-soft:#F6ECD7; --warning-line:#E6D2A8;
  --focus-ring:rgba(181,86,46,.20);
  --shadow-sm:0 1px 2px rgba(58,40,28,.05);
  --shadow:0 6px 18px rgba(74,55,40,.07);
  --shadow-lg:0 18px 44px rgba(74,55,40,.13);

  /* radius 토큰 */
  --r-tile:12px;
  --r-card:16px;
  --r-lg:20px;
  --r-btn:13px;
  --r-pill:999px;

  /* ===== 기존 변수 별칭 (참조 호환) ===== */
  --card:var(--surface);
  --ink-2:var(--ink-muted);
  --ink-3:var(--ink-faint);
  --accent-2:var(--brand-dark);
  /* 학습 카테고리=브랜드. 기존 --accent-soft 참조는 brand-soft로 (테스트 모드는 .test- 변형으로 별도 처리) */
  --green:var(--success); --green-soft:var(--success-soft); --green-line:var(--success-line);
  --red:var(--danger);  --red-soft:var(--danger-soft);  --red-line:var(--danger-line);
  --amber:var(--warning); --amber-soft:var(--warning-soft); --amber-line:var(--warning-line);
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; height:100%; overflow:hidden; overscroll-behavior:none; }  /* 당겨서 새로고침 방지 + 문서 스크롤 잠금 */
body{
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  color:var(--ink); background:var(--bg);
  font-weight:500; letter-spacing:-.005em;
  min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent; /* 탭 시 회색 깜빡임 제거(앱 느낌) */
}
#app{ max-width:460px; margin:0 auto; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding-bottom:44px; }  /* 앱이 스크롤 컨테이너 — 내용 짧으면 스크롤 없음 */

/* ===== 아이콘 공통 ===== */
.ic{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; line-height:0; }
.ic svg{ width:100%; height:100%; display:block; }
/* 숫자 자릿수 진동 제거 */
.day-meta,.home-prog,.stat-num,.result-score,.intro-count,.wa-title{ font-variant-numeric:tabular-nums; }

/* ===== 상단바 ===== */
.wa-top{ display:flex; align-items:center; gap:8px; padding:calc(18px + env(safe-area-inset-top)) 18px 10px; position:sticky; top:0; z-index:10; background:var(--bg); }  /* 헤더 상단 고정 (env=엣지투엣지 상태바 회피) */
.wa-title{ flex:1; min-width:0; text-align:center; font-size:17px; font-weight:600; letter-spacing:-.01em; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }  /* 범위 이름이 길어도 헤더가 최대 2줄 — 더 늘어나면 시험 화면이 아래로 밀림 */
.wa-back,.wa-audio{ cursor:pointer; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border:1px solid var(--line); background:var(--surface); border-radius:10px; padding:0; color:var(--ink-muted); font-family:inherit; transition:all .15s; flex:0 0 auto; }
.wa-back:hover,.wa-audio:hover{ border-color:var(--line-strong); }
.wa-audio.on{ background:var(--brand-soft); border-color:transparent; color:var(--brand-dark); }
.wa-wrap{ padding:10px 18px 0; }
.wa-sub{ text-align:center; color:var(--ink-faint); font-size:14px; margin-bottom:22px; font-weight:500; }

/* ===== DAY 카드 ===== */
.day-list{ display:flex; flex-direction:column; gap:10px; }
.day-card{ cursor:pointer; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 18px; box-shadow:var(--shadow-sm); transition:all .15s; font-family:inherit; }
.day-card:hover{ border-color:var(--brand-line); box-shadow:var(--shadow); transform:translateY(-1px); }
.day-name{ display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.day-name .ic{ color:var(--ink-faint); }
.day-meta{ font-size:13px; color:var(--ink-faint); margin:4px 0 12px; font-weight:500; }
.day-bar{ height:6px; background:var(--surface-sunk); border-radius:var(--r-pill); overflow:hidden; }
.day-bar-fill{ height:100%; background:var(--brand); border-radius:var(--r-pill); transition:width .4s; }
.wrong-entry{ width:100%; margin-top:18px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--warning-soft); border:1px solid var(--warning-line); color:var(--warning); border-radius:14px; padding:14px; font-size:15px; font-weight:600; font-family:inherit; transition:all .15s; }
.wrong-entry:hover{ border-color:var(--warning); }
.wrong-entry:active{ transform:scale(.99); }

/* 빠른채점 진입 카드 (마이페이지) */
.grade-card{ width:100%; box-sizing:border-box; text-align:left; display:flex; align-items:center; gap:14px; text-decoration:none; color:inherit; cursor:pointer; background:var(--brand-softer); border:1px solid var(--brand-line); border-radius:var(--r-card); padding:16px 18px; margin-bottom:10px; box-shadow:var(--shadow-sm); transition:all .15s; }
.grade-card:hover{ border-color:var(--brand); transform:translateY(-1px); box-shadow:var(--shadow); }
.gc-ic{ width:44px; height:44px; flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--surface); border-radius:var(--r-tile); color:var(--brand); }
.gc-tx{ flex:1; min-width:0; }
.gc-nm{ font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.gc-sub{ font-size:12.5px; color:var(--ink-faint); font-weight:500; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gc-arrow{ color:var(--brand-dark); flex:0 0 auto; display:inline-flex; }

/* ===== 모드 ===== */
.mode-grid{ display:flex; flex-direction:column; gap:10px; }
.mode-card{ cursor:pointer; display:flex; align-items:center; gap:14px; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:14px 16px; box-shadow:var(--shadow-sm); transition:all .15s; font-family:inherit; }
.mode-card:hover{ border-color:var(--brand-line); box-shadow:var(--shadow); transform:translateY(-1px); }
.mode-card:active{ transform:translateY(0) scale(.99); }
.mode-ic{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); border-radius:var(--r-tile); flex:0 0 auto; }
/* 테스트 모드 타일 = 세이지 */
.mode-card.test-mode .mode-ic{ background:var(--accent-soft); color:var(--accent); }
.mode-txt{ flex:1; }
.mode-nm{ font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--ink); }
.mode-desc{ font-size:12.5px; color:var(--ink-faint); margin-top:2px; font-weight:500; }
/* 책 선택 후 학습/테스트 큰 버튼 2개 (좌우 2열) */
.choose-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.choose-card{ cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:30px 14px; box-shadow:var(--shadow-sm); transition:all .15s; font-family:inherit; }
.choose-card:hover{ border-color:var(--brand-line); box-shadow:var(--shadow); transform:translateY(-2px); }
.choose-card.test:hover{ border-color:var(--accent); }
.choose-card:active{ transform:translateY(0) scale(.99); }
.choose-ic{ width:66px; height:66px; display:inline-flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); border-radius:20px; }
.choose-card.test .choose-ic{ background:var(--accent-soft); color:var(--accent); }
.choose-nm{ font-size:18px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.choose-desc{ font-size:11.5px; color:var(--ink-faint); font-weight:500; line-height:1.45; }

/* 세션 진행바 */
.sess-bar{ height:5px; background:var(--surface-sunk); border-radius:var(--r-pill); overflow:hidden; margin-bottom:22px; }
.sess-bar-fill{ height:100%; background:var(--brand); border-radius:var(--r-pill); transition:width .4s; }

/* ===== 플래시카드 ===== */
.flip-card{ perspective:1400px; height:240px; cursor:pointer; margin-bottom:16px; }
.flip-inner{ position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(.4,.15,.2,1); transform-style:preserve-3d; }
.flip-card.flipped .flip-inner{ transform:rotateY(180deg); }
.flip-front,.flip-back{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; border-radius:var(--r-lg); }
.flip-front{ background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-lg); }
.flip-back{ background:var(--surface-dark); transform:rotateY(180deg); box-shadow:var(--shadow-lg); overflow-y:auto; justify-content:flex-start; padding:16px 0; }
/* 뜻이 길어 카드를 넘치면 안에서 드래그 스크롤 — auto 마진이라 짧을 땐 중앙 그대로, 길 땐 맨 위부터 끝까지 닿는다 */
.flip-back > :first-child{ margin-top:auto; }
.flip-back > :last-child{ margin-bottom:auto; }
.word-en{ font-size:42px; font-weight:600; letter-spacing:-.022em; color:var(--ink); font-feature-settings:'ss01','cv11'; }
.word-ko{ font-size:26px; font-weight:500; color:var(--on-dark); padding:0 24px; text-align:center; letter-spacing:-.01em; }
.hint{ display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; color:var(--ink-faint); font-size:13px; margin-bottom:18px; font-weight:500; }
.audio-btn{ cursor:pointer; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); background:var(--surface); color:var(--ink-muted); border-radius:var(--r-pill); width:42px; height:42px; transition:all .15s; }
.audio-btn:hover{ border-color:var(--brand-line); }
.flip-back .audio-btn{ background:rgba(255,255,255,.12); border-color:transparent; color:var(--on-dark); }

/* ===== 판정 ===== */
.judge{ display:flex; gap:10px; }
.judge button{ flex:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:var(--r-btn); padding:15px; font-size:16px; font-weight:600; font-family:inherit; transition:all .15s; }
.judge button:active{ transform:translateY(0) scale(.99); }
.judge .no{ background:var(--surface); border:1px solid var(--line); color:var(--ink-muted); }
.judge .no:hover{ border-color:var(--danger); color:var(--danger); }
.judge .yes{ background:var(--brand); border:1px solid var(--brand); color:var(--on-brand); }
.judge .yes:hover{ background:var(--brand-dark); }
.judge .no.sel,.judge .yes.sel{ box-shadow:0 0 0 3px var(--focus-ring); }
.judge .no.sel{ border-color:var(--danger); color:var(--danger); }
.flash-nav{ display:flex; gap:10px; margin-top:12px; }
.flash-nav button{ flex:1; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:var(--r-btn); padding:11px; font-size:14px; font-weight:600; font-family:inherit; background:var(--surface); border:1px solid var(--line); color:var(--ink-muted); transition:all .15s; }
.flash-nav button:hover:not(:disabled){ border-color:var(--brand-line); color:var(--brand); }
.flash-nav button:disabled{ opacity:.4; cursor:default; }

/* ===== 퀴즈 ===== */
.q-word{ text-align:center; font-size:38px; font-weight:600; letter-spacing:-.022em; margin:6px 0 2px; color:var(--ink); font-feature-settings:'ss01','cv11'; }
.q-opts{ display:flex; flex-direction:column; gap:9px; margin-top:18px; }
.q-opt{ cursor:pointer; display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-btn); padding:15px 16px; font-size:16px; font-weight:500; text-align:left; font-family:inherit; transition:all .12s; color:var(--ink); }
.q-opt:hover{ border-color:var(--brand); }
.q-opt:active{ transform:scale(.99); }
.q-opt .opt-tx{ flex:1; }
.q-opt .opt-mark{ flex:0 0 auto; opacity:0; }
.q-opt.correct{ background:var(--success-soft); border-color:var(--success-line); color:var(--success); font-weight:600; }
.q-opt.wrong{ background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger); font-weight:600; }
.q-opt.correct .opt-mark,.q-opt.wrong .opt-mark{ opacity:1; }
/* 잉크 드로잉 — 정답/오답 체크 */
.q-opt.correct .opt-mark svg path,.q-opt.wrong .opt-mark svg path,
.judge .no .ic svg path,.judge .yes .ic svg path{ }
.opt-mark.draw svg path{ stroke-dasharray:32; stroke-dashoffset:32; animation:inkdraw .22s ease forwards; }
@keyframes inkdraw{ to{ stroke-dashoffset:0; } }

/* ===== 스펠링 ===== */
.s-mean{ text-align:center; font-size:26px; font-weight:600; margin:18px 0; letter-spacing:-.01em; color:var(--ink); }
.s-input{ width:100%; font-family:inherit; font-size:22px; font-weight:600; text-align:center; padding:15px; border:1px solid var(--line); border-radius:var(--r-btn); background:var(--surface-alt); color:var(--ink); transition:all .15s; }
.s-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); background:var(--surface); }
.s-feedback{ display:flex; align-items:center; justify-content:center; gap:6px; text-align:center; font-size:17px; font-weight:600; margin-top:16px; min-height:24px; }
.s-feedback.ok{ color:var(--success); }
.s-feedback.bad{ color:var(--danger); }
.s-feedback.warn{ color:var(--warning); }
.big-btn{ width:100%; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:var(--r-btn); padding:15px; font-size:15px; font-weight:600; color:var(--on-brand); background:var(--brand); margin-top:14px; font-family:inherit; transition:background .15s, transform .08s; }
.big-btn:hover{ background:var(--brand-dark); }
.big-btn:active{ transform:translateY(1px) scale(.99); }
.big-btn:disabled{ background:var(--line-strong); cursor:default; }

/* ===== 결과 ===== */
.result{ text-align:center; padding-top:18px; }
.result-emoji{ width:88px; height:88px; margin:0 auto; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--r-pill); animation:resultpop .24s ease-out; }
.result-emoji .ic{ width:32px; height:32px; }
.result-emoji.r-trophy{ background:var(--gold-soft); color:var(--gold); }
.result-emoji.r-celebrate{ background:var(--brand-soft); color:var(--brand); }
.result-emoji.r-effort{ background:var(--warning-soft); color:var(--warning); }
.result-emoji.r-seed{ background:var(--success-soft); color:var(--success); }
.result-emoji.r-done{ background:var(--success-soft); color:var(--success); }
.result-emoji.r-review{ background:var(--brand-soft); color:var(--brand); }
@keyframes resultpop{ from{ opacity:0; transform:scale(.96); } to{ opacity:1; transform:scale(1); } }
.result-score{ font-size:26px; font-weight:700; margin:12px 0 4px; letter-spacing:-.01em; color:var(--ink); }
.result-sub{ color:var(--ink-faint); font-size:14px; margin-bottom:22px; font-weight:500; }
.missed{ text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:6px 16px; margin-bottom:20px; }
.missed-title{ display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-faint); font-weight:600; padding:12px 0 6px; }
.missed-title .ic{ color:var(--brand); }
.missed-item{ display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.missed-item:last-child{ border-bottom:none; }
.missed-en{ font-weight:600; color:var(--ink); }
.missed-ko{ color:var(--ink-faint); text-align:right; }
/* 다시 볼 단어 줄 오른쪽에 '담기' — 뜻은 남는 폭을 채워 버튼 앞까지 우측정렬 */
.missed-item .missed-ko{ flex:1 1 auto; }
.missed-item .take-btn{ flex:0 0 46px; align-self:center; }
.result-btns{ display:flex; flex-direction:column; gap:9px; }
.result-btns .big-btn:nth-child(n+2){ background:var(--surface); border:1px solid var(--line); color:var(--ink-muted); }
.result-btns .big-btn:nth-child(n+2):hover{ border-color:var(--brand-line); background:var(--surface-alt); }

/* ===== 하단 탭바 ===== */
#app{ padding-bottom:calc(92px + env(safe-area-inset-bottom)); }
.tabbar{ position:fixed; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:460px; display:flex; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-top:1px solid var(--line); z-index:20; padding-bottom:env(safe-area-inset-bottom); }
.tab-item{ flex:1; cursor:pointer; border:none; background:none; font-family:inherit; padding:9px 0 13px; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--ink-faint); position:relative; }
.tab-ic{ width:22px; height:22px; position:relative; }
.tab-ic::before{ content:''; position:absolute; top:-9px; left:50%; transform:translateX(-50%); width:16px; height:3px; border-radius:var(--r-pill); background:transparent; transition:background .18s, opacity .18s; }
.tab-lb{ font-size:11.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-faint); }
.tab-item.active{ color:var(--brand); }
.tab-item.active .tab-ic::before{ background:var(--brand); }
.tab-item.active .tab-lb{ color:var(--ink); }

.seg-note{ text-align:center; font-size:12.5px; color:var(--warning); background:var(--warning-soft); border:1px solid var(--warning-line); border-radius:var(--r-tile); padding:11px; margin-bottom:14px; font-weight:600; }
.daypick-all{ border-style:dashed; }

/* 아이스케치 / MP3 스터디 카드 */
.study-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:32px 20px; display:flex; flex-direction:column; align-items:center; gap:14px; min-height:236px; justify-content:center; margin-bottom:16px; }
.sk-emoji{ font-size:64px; line-height:1; }
.sk-ko{ font-size:24px; font-weight:600; color:var(--accent); text-align:center; letter-spacing:-.01em; }

/* 아이블링크 자동 플래시 */
.blink-stage{ background:var(--surface-dark); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); min-height:236px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; margin-bottom:16px; }
.blink-en{ font-size:46px; font-weight:600; color:var(--on-dark); letter-spacing:-.022em; font-feature-settings:'ss01','cv11'; }
.blink-ko{ font-size:28px; font-weight:500; color:var(--sand); }
.ctrl-row{ display:flex; gap:10px; }
.ctrl-row .big-btn{ margin-top:0; }
.ctrl-ghost{ background:var(--surface)!important; border:1px solid var(--line)!important; color:var(--ink-muted)!important; }
.ctrl-ghost:hover{ border-color:var(--brand-line)!important; }

/* OX (테스트) */
.ox-mean{ text-align:center; font-size:26px; font-weight:600; color:var(--accent); margin:14px 0 4px; }
.judge .ox-o{ background:var(--brand); border:1px solid var(--brand); color:var(--on-brand); }
.judge .ox-o:hover{ background:var(--brand-dark); }
.judge .ox-x{ background:var(--surface); border:1px solid var(--line); color:var(--ink-muted); }
.judge .ox-x:hover{ border-color:var(--danger); color:var(--danger); }

/* ===== 마이 ===== */
.my-stats{ display:flex; gap:10px; margin-bottom:18px; }
.stat{ flex:1; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:16px 8px; text-align:center; box-shadow:var(--shadow-sm); }
.stat-num{ font-size:25px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.stat-num.accent{ color:var(--brand); }
.stat-lb{ font-size:12px; color:var(--ink-faint); margin-top:3px; font-weight:500; }
.my-section{ font-size:12.5px; font-weight:700; color:var(--ink-faint); letter-spacing:.04em; margin:18px 2px 10px; }
.myvoca-list{ display:flex; flex-direction:column; gap:7px; margin-top:10px; }
.myvoca-row{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-btn); padding:11px 14px; box-shadow:var(--shadow-sm); }
.mv-w{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.mv-en{ font-size:15px; font-weight:700; color:var(--brand-dark); }
.mv-ko{ font-size:13px; color:var(--ink-muted); }
.mv-src{ font-size:11.5px; color:var(--ink-faint); font-weight:600; }   /* 배포함: 어느 테스트에서 담아 보냈는지 */
.mv-no{ font-size:11.5px; color:var(--ink-faint); font-weight:700; min-width:22px; text-align:right; flex:0 0 auto; }   /* 담은 순서 번호 — 범위(번호)로 고를 때 기준 */
.mv-del{ flex:0 0 auto; width:30px; height:30px; border:1px solid var(--line-strong); border-radius:9px; background:var(--surface); color:var(--ink-faint); font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .15s; }
.mv-del:hover{ border-color:var(--brand); color:var(--brand); background:var(--brand-softer); }
.myvoca-empty{ background:var(--surface-alt); border:1px dashed var(--brand-line); border-radius:var(--r-card); padding:18px; text-align:center; font-size:13.5px; color:var(--ink-muted); margin-top:10px; }
.mv-cat-acts{ display:flex; gap:8px; margin:8px 0 10px; }
.mv-act{ flex:1; padding:11px; border-radius:12px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .15s; }
.mv-act.study{ background:var(--brand-soft); border:1px solid var(--brand-line); color:var(--brand-dark); }
.mv-act.test{ background:var(--brand); border:1px solid var(--brand); color:#FFFCF8; }
.mv-act.test:hover{ background:var(--brand-dark); }
.mv-count{ font-size:12px; color:var(--ink-faint); font-weight:600; margin:2px 0 8px; }
.set-row{ display:flex; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-btn); padding:14px 16px; font-size:15px; font-weight:500; color:var(--ink); }
.set-row .set-lb{ display:inline-flex; align-items:center; gap:8px; }
.set-row .set-lb .ic{ color:var(--ink-muted); }
.toggle{ width:48px; height:28px; border-radius:var(--r-pill); border:none; cursor:pointer; background:var(--line-strong); position:relative; transition:background .15s; flex:0 0 auto; }
.toggle.on{ background:var(--brand); }
.toggle::after{ content:''; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; transition:left .15s; }
.toggle.on::after{ left:23px; }

/* ===== 타이머 / 홈 / 리뷰 ===== */
.timer-wrap{ height:6px; background:var(--surface-sunk); border-radius:var(--r-pill); overflow:hidden; margin-bottom:16px; }
.timer-bar{ height:100%; background:var(--brand); border-radius:var(--r-pill); width:100%; animation:deplete linear forwards; }
@keyframes deplete{ from{ width:100% } to{ width:0 } }

/* home-hero: 따뜻한 surface 카드 + 좌측 4px 브랜드 악센트 바 (그라데이션 제거) */
.home-hero{ position:relative; background:var(--surface); border:1px solid var(--brand-line); border-radius:var(--r-lg); padding:24px 22px 24px 26px; color:var(--ink); margin-bottom:16px; box-shadow:var(--shadow); overflow:hidden; }
.home-hero::before{ content:''; position:absolute; left:16px; top:16px; width:4px; height:calc(100% - 32px); background:var(--brand); border-radius:var(--r-pill); }
.home-hi{ display:flex; align-items:center; gap:8px; font-size:21px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.home-hi .ic{ color:var(--brand); }
.home-prog{ font-size:13px; color:var(--ink-muted); margin:10px 0 8px; font-weight:500; }
.home-bar{ height:8px; background:var(--surface-sunk); border-radius:var(--r-pill); overflow:hidden; }
.home-bar-fill{ height:100%; background:var(--brand); border-radius:var(--r-pill); }
.home-actions{ display:flex; gap:10px; margin-bottom:18px; }
.home-act{ flex:1; cursor:pointer; font-family:inherit; border:1px solid var(--line); background:var(--surface); border-radius:18px; padding:20px 14px; text-align:center; box-shadow:var(--shadow-sm); transition:all .15s; }
.home-act:hover{ border-color:var(--brand-line); transform:translateY(-1px); box-shadow:var(--shadow); }
.home-act:active{ transform:translateY(0) scale(.99); }
.ha-ic{ width:44px; height:44px; margin:0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); border-radius:var(--r-tile); }
.ha-nm{ font-size:15px; font-weight:600; margin-top:8px; color:var(--ink); }

.review-item{ padding:11px 2px; border-bottom:1px solid var(--line); text-align:left; }
.review-item:last-child{ border-bottom:none; }
.rv-q{ font-weight:600; font-size:15px; color:var(--ink); }
.rv-ans{ font-size:14px; margin-top:4px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.rv-mine{ color:var(--ink-muted); }
.rv-mine.ok{ color:var(--success); font-weight:700; }
.rv-mine.wrong{ color:var(--danger); font-weight:700; }
/* 정답 페이지 (뜻쓰기/영어쓰기 자가채점 + 출처 + 담기) */
.rv-range{ text-align:center; font-size:13px; color:var(--ink-muted); margin:2px 0 16px; }
.rv-range b{ color:var(--ink); font-weight:700; }
.rv-list{ display:flex; flex-direction:column; gap:9px; text-align:left; margin-bottom:18px; }
.rv-row{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:12px 14px; box-shadow:var(--shadow-sm); }
.rv-row.wrong{ background:var(--danger-soft); border-color:var(--danger-line); }
.rv-top{ display:flex; align-items:baseline; gap:9px; margin-bottom:7px; }
.rv-src{ flex:0 0 auto; font-size:11px; font-weight:700; color:var(--brand-dark); background:var(--brand-soft); border-radius:var(--r-pill); padding:2px 9px; white-space:nowrap; }
.rv-en{ font-size:17px; font-weight:800; color:var(--ink); letter-spacing:-.01em; word-break:break-word; }
.rv-mid2{ display:flex; gap:8px; font-size:14px; margin-top:2px; align-items:baseline; }
.rv-lbl{ flex:0 0 38px; color:var(--ink-faint); font-weight:600; font-size:12.5px; }
.rv-correct2{ color:var(--success); font-weight:700; }
.rv-mine2{ color:var(--ink-muted); font-weight:600; }
.rv-mine2.wrong{ color:var(--danger); font-weight:700; text-decoration:line-through; }
.rv-act{ display:flex; gap:8px; margin-top:11px; }
.ox-btn{ flex:1; cursor:pointer; font-family:inherit; border-radius:var(--r-btn); padding:9px; font-size:14px; font-weight:700; border:1px solid; transition:all .12s; }
.ox-btn.o{ background:var(--success-soft); border-color:var(--success-line); color:var(--success); }
.ox-btn.x{ background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger); }
.ox-btn:active{ transform:scale(.98); }
.take-btn{ flex:0 0 44px; order:2; margin-left:auto; cursor:pointer; font-family:inherit; border-radius:8px; padding:5px 0; font-size:11.5px; font-weight:700; background:var(--brand); border:1px solid var(--brand); color:var(--on-brand); transition:all .12s; }
.take-btn.done{ background:var(--surface); color:var(--brand-dark); border-color:var(--brand-line); }
.take-btn:active{ transform:scale(.98); }
.rv-correct{ color:var(--brand-dark); font-weight:600; }

/* 뜻쓰기 단어 가림 */
.q-masked{ text-align:center; margin:8px 0 4px; color:var(--ink-faint); display:flex; flex-direction:column; align-items:center; gap:4px; }
.q-masked .ic{ width:40px; height:40px; }
.q-masked .mk-sub{ display:block; font-size:14px; font-weight:500; margin-top:4px; color:var(--ink-muted); }

/* 책 선택 세그먼트 */
.book-seg{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.seg-btn{ cursor:pointer; display:inline-flex; align-items:center; gap:6px; font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--ink-muted); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-tile); padding:9px 14px; transition:all .12s; }
.seg-btn:active{ transform:scale(.99); }
.seg-btn.active{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.lesson-meta-sm{ font-size:12px; color:var(--ink-faint); margin-bottom:10px; font-weight:500; }
.pick-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:6px 0 10px; font-size:13px; color:var(--ink-faint); font-weight:600; }
.day-card.sel{ border-color:var(--brand); background:var(--brand-softer); }
.day-card.lesson-pick .day-name{ color:var(--brand-dark); }
.day-card.lesson-pick:not(.sel) .day-name{ color:var(--ink); }
.day-card.lesson-pick .day-name .ic{ color:var(--brand); }
.start-spacer{ height:78px; }
.start-test{ position:fixed; left:50%; transform:translateX(-50%); bottom:calc(80px + env(safe-area-inset-bottom)); width:calc(100% - 36px); max-width:424px; margin:0; box-shadow:0 8px 22px rgba(181,86,46,.34); z-index:15; }
.start-test:disabled{ background:var(--line-strong); box-shadow:none; cursor:default; }
.range-row{ display:flex; align-items:center; gap:7px; margin-bottom:14px; flex-wrap:wrap; }
.range-lbl{ font-size:13px; color:var(--ink-faint); font-weight:600; }
.range-tilde{ font-size:13px; color:var(--ink-muted); }
.range-num{ width:62px; font-family:inherit; font-size:15px; font-weight:600; text-align:center; padding:8px; border:1px solid var(--line); border-radius:var(--r-tile); background:var(--surface-alt); color:var(--ink); }
.range-num:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); background:var(--surface); }
.book-select{ width:100%; font-family:inherit; font-size:16px; font-weight:600; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-btn); padding:13px 14px; margin-bottom:16px; cursor:pointer; }
.book-select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); }

/* ===== 로그인 ===== */
.login-wrap{ min-height:calc(100vh - 60px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:32px 24px; text-align:center; }
.login-logo{ width:64px; height:64px; display:inline-flex; align-items:center; justify-content:center; background:var(--brand-soft); border:1px solid var(--brand-line); border-radius:var(--r-lg); color:var(--brand); margin-bottom:14px; filter:drop-shadow(0 8px 18px var(--focus-ring)); }
.login-logo .ic{ width:30px; height:30px; }
.login-title{ font-size:25px; font-weight:700; letter-spacing:-.02em; color:var(--ink); }
.login-sub{ font-size:14px; color:var(--ink-faint); font-weight:500; margin-top:7px; margin-bottom:26px; }
.login-card{ width:100%; max-width:360px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-lg); }
.login-input{ width:100%; font-family:inherit; font-size:18px; font-weight:600; text-align:center; padding:15px; border:1px solid var(--line); border-radius:var(--r-btn); background:var(--surface-alt); color:var(--ink); transition:all .15s; }
.login-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--focus-ring); background:var(--surface); }
.login-btn{ margin-top:12px; }
.login-err{ color:var(--danger); font-size:13.5px; font-weight:600; margin-top:12px; min-height:18px; }
.login-foot{ margin-top:26px; font-size:11.5px; color:var(--ink-faint); font-weight:500; }

/* 계정 / 로그아웃 */
.acct-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-btn); padding:14px 16px; }
.acct-info{ text-align:left; }
.acct-name{ font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }
.acct-id{ font-size:12.5px; color:var(--ink-faint); font-weight:500; margin-top:2px; }
.logout-btn{ cursor:pointer; font-family:inherit; font-size:13.5px; font-weight:600; color:var(--ink-muted); background:var(--surface-alt); border:1px solid var(--line); border-radius:11px; padding:9px 14px; transition:all .12s; flex:0 0 auto; }
.logout-btn:hover{ border-color:var(--danger); color:var(--danger); }

/* ===== 테스트 안내 화면 ===== */
.intro-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:32px 24px 26px; text-align:center; margin-top:28px; }
.intro-emoji{ width:56px; height:56px; margin:0 auto; display:inline-flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand); border-radius:var(--r-card); }
.intro-emoji .ic{ width:26px; height:26px; }
.intro-title{ font-size:22px; font-weight:700; letter-spacing:-.01em; margin-top:13px; color:var(--ink); }
.intro-count{ display:inline-block; font-size:13.5px; font-weight:700; color:var(--brand-dark); background:var(--brand-soft); border-radius:var(--r-pill); padding:6px 15px; margin-top:12px; }
.intro-lines{ margin:22px 0 6px; }
.intro-line{ font-size:15px; color:var(--ink-muted); line-height:1.7; font-weight:500; padding:4px 0; }
.intro-line b{ color:var(--ink); font-weight:700; }
.intro-line .ic{ vertical-align:-3px; color:var(--ink-muted); }
.intro-start{ margin-top:18px; }

/* ===== 모션 접근성 가드 ===== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001s!important; animation-iteration-count:1!important; transition-duration:.001s!important; }
  .flip-inner{ transition:none!important; }
  .timer-bar{ animation:none!important; }
  .home-act:hover,.mode-card:hover,.day-card:hover,.grade-card:hover,.home-act:active,.mode-card:active,.q-opt:active,.judge button:active,.big-btn:active,.seg-btn:active{ transform:none!important; }
}

/* ===== 정규 테스트 (원장과 보는 종이 누적 테스트 — 강조 카드) ===== */
.regtest-card{ background:var(--brand); border-color:var(--brand); box-shadow:0 6px 18px rgba(181,86,46,.30); }
.regtest-card .gc-nm{ color:#fff; }
.regtest-card .gc-sub{ color:#fff; opacity:.85; white-space:normal; }
.regtest-card .gc-ic{ background:rgba(255,255,255,.16); color:#fff; }
.regtest-card .gc-arrow{ color:#fff; opacity:.9; }
.regtest-card:hover{ border-color:var(--brand); box-shadow:0 9px 24px rgba(181,86,46,.38); }

/* 통과 카드 (27/30 이상) */
.regtest-card.pass{ background:#2E7D4F; border-color:#2E7D4F; box-shadow:0 6px 18px rgba(46,125,79,.30); cursor:default; }
.regtest-card.pass:hover{ transform:none; border-color:#2E7D4F; box-shadow:0 6px 18px rgba(46,125,79,.30); }

/* 정규 테스트 정답표 (선생님 채점 — 틀린 단어 탭) */
.ak-list{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.ak-row{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; padding:9px 10px; border-top:1px solid var(--line); font-size:14px; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.ak-row:first-child{ border-top:none; }
.ak-row.wrong{ background:#FBEAE7; }
.ak-row.wrong .ak-en{ color:#B23B2E; text-decoration:line-through; }
.ak-no{ flex:0 0 20px; color:var(--ink-faint); font-weight:600; font-size:10.5px; }
.ak-en{ flex:1 1 auto; font-weight:700; color:var(--ink); word-break:break-word; }
.ak-src{ flex:0 0 auto; font-size:10px; font-weight:600; color:var(--ink-faint); background:var(--surface); border:1px solid var(--line); border-radius:6px; padding:1px 6px; white-space:nowrap; }
.ak-ko{ flex:0 0 100%; order:3; color:var(--ink); font-size:15px; line-height:1.45; padding-left:28px; }   /* 뜻은 아랫줄 전체 폭 — 담기(order:2)가 첫 줄 오른쪽에 남게 */

/* ───── 나가기 확인 모달 — 앱 WebView는 confirm()이 안 떠서 자체 모달로 표시 ───── */
.cf-ov{position:fixed;inset:0;background:rgba(34,30,26,.45);z-index:10000;display:flex;align-items:center;justify-content:center;padding:24px;}
.cf-card{background:var(--surface);border-radius:18px;padding:22px 20px 16px;max-width:340px;width:100%;box-shadow:0 14px 44px rgba(34,30,26,.28);}
.cf-msg{font-size:15px;line-height:1.55;white-space:pre-line;color:var(--ink);margin-bottom:18px;}
.cf-row{display:flex;gap:8px;justify-content:flex-end;}
.cf-btn{font-family:inherit;font-size:14px;font-weight:700;padding:10px 16px;border-radius:12px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-muted);cursor:pointer;}
.cf-btn.pri{background:var(--brand);border-color:transparent;color:var(--on-brand);}

/* 결과 페이지: 테스트 범위 옆 진행 방식(랜덤/순서대로) */
.rv-ord{ color:var(--brand); font-weight:700; }

/* 교과서: 단어 자료 준비 중(plan만 있는) 과 칩 */
.seg-btn.plan{ opacity:.45; }

/* 교과서 고르기: 중등/고등 묶음. 칩 10개가 한 덩어리로 뭉쳐 보여서 라벨 붙인 상자로 나눔 */
.tb-group{ background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--r-card); padding:11px 12px 0; margin-bottom:10px; }
.tb-group-lb{ font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--ink-faint); margin-bottom:9px; }
.tb-group .book-seg{ margin-bottom:11px; }
.tb-group .seg-btn:not(.active){ background:var(--surface); }   /* 선택(active) 칩까지 흰 배경으로 덮어 이름이 안 보이던 것 수정 */

/* 전자책: 범위 칩이 수백 개(모의고사·N회 M번)라 상자 안에서만 스크롤 */
.eb-secs{ max-height:170px; overflow-y:auto; overscroll-behavior:contain; margin-bottom:6px; }
.eb-row{ cursor:pointer; }
.eb-no{ flex:0 0 26px; font-size:11.5px; font-weight:700; color:var(--ink-faint); text-align:right; }