/* 영작만 웹 — 디자인 토큰 + PC 레이아웃.
   브랜드 값은 proxy/landing.py :root 와 동일 계열(딥그린 --accent, 코퍼 --copper).
   라이트가 기준, 다크는 prefers-color-scheme 로 파생. 색·간격은 전부 토큰 — 하드코딩 금지. */

:root {
  /* landing.py :root 그대로 */
  --accent: #0E6B4E;
  --accent-deep: #0A4D38;
  --ink: #191F28;
  --sub: #6B7684;
  --surface: #F2F4F6;
  --surface2: #E9EDF0;
  --copper: #B4531D;
  --line: #E5E8EB;
  --bad: #D6455D;
  --done: #C6483B;              /* 숙제 완료 도장 — 앱 Theme.doneTint */
  --done-soft: rgba(198, 72, 59, 0.10);
  /* 웹 전용 파생 토큰 */
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --accent-soft: rgba(14, 107, 78, 0.08);
  --copper-soft: rgba(180, 83, 29, 0.10);
  --good: #0E6B4E;
  --gold: #B4531D;              /* '바로 정확' 강조 — 앱의 코인 코퍼 계열 */
  --shadow: 0 1px 3px rgba(25, 31, 40, 0.06);
  --news-overlay: rgba(255, 255, 255, 0.84);   /* 홈 뉴스 카드 — 배경 일러스트 위 --card(#FFFFFF) 계열 오버레이(은은하게) */
  --radius: 18px;               /* 앱 카드 라운드 16~20 중간값 */
  --radius-sm: 12px;
  --backdrop: rgba(25, 31, 40, 0.24);            /* 드로어 백드롭 — 살짝 딤 */
  --drawer-shadow: 0 12px 40px rgba(25, 31, 40, 0.18);   /* 열린 드로어가 떠 있음을 은은히 */
  --sidebar-w: 224px;
  --content-max: 1040px;
  --font: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard',
          'Segoe UI', 'Malgun Gothic', sans-serif;
  --font-rounded: ui-rounded, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
          'Pretendard', sans-serif;   /* 연습 입력칸은 둥근 서체(앱 규칙) */
  /* select 커스텀 셰브론 — url() 안에는 var()를 못 써서 --sub(#6B7684) 값을 데이터 URI에 고정.
     --sub를 바꾸면 여기도 함께 갱신할 것(다크 오버라이드 포함). */
  --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B7684' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent: #2FA47C;
    --accent-deep: #24805F;
    --ink: #E7ECF0;
    --sub: #8B95A1;
    --surface: #1B2127;
    --surface2: #232B33;
    --copper: #D97A45;
    --line: #2A323B;
    --bad: #E4677E;
    --done: #E26A5C;              /* 앱 Theme.doneTint 다크 */
    --done-soft: rgba(226, 106, 92, 0.16);
    --bg: #0F1216;
    --card: #171C22;
    --accent-soft: rgba(47, 164, 124, 0.14);
    --copper-soft: rgba(217, 122, 69, 0.16);
    --good: #2FA47C;
    --gold: #D97A45;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --backdrop: rgba(0, 0, 0, 0.5);
    --drawer-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    --news-overlay: rgba(23, 28, 34, 0.86);   /* 다크 --card(#171C22) 계열 — 어두운 배경에서 글자 대비 유지 */
    /* 다크 --sub(#8B95A1)에 맞춘 셰브론 */
    --chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238B95A1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* hidden 속성 보장 — display:flex 등 저자 스타일이 UA의 [hidden]을 덮지 않게(.action-stack 등) */
[hidden] { display: none !important; }
html { height: 100%; }
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
  min-height: 100%;
}
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }

/* 키보드 포커스 — 마우스 클릭엔 조용히, 탭 이동엔 또렷하게 */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* ── 레이아웃: 접이식 좌측 드로어 + 콘텐츠 ──
   기본은 사이드바 숨김(콘텐츠 전폭) + 좌상단 햄버거(#sb-toggle).
   body.sb-open   → 오버레이 드로어(백드롭 살짝 딤, 백드롭·ESC·메뉴 클릭·햄버거 재클릭으로 닫힘).
   body.sb-pinned → '항상 보기' 핀: 예전처럼 상시 사이드바(861px 이상 데스크톱 전용).
   860px 이하는 핀과 무관하게 드로어 고정. 상태 클래스·localStorage 는 main.js 가 관리. */
#app { display: flex; min-height: 100vh; }

/* 햄버거 — 44px 터치 타깃. 드로어(z 95)보다 위(z 96)라 열린 채로도 재클릭해 닫을 수 있다 */
.sb-toggle {
  position: fixed; top: 12px; left: 12px; z-index: 96;
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); cursor: pointer;
}
.sb-toggle:hover { background: var(--surface); }
.sb-toggle svg { width: 22px; height: 22px; }
/* 라우트가 정해진 뒤에만 노출(부팅 스플래시 동안 숨김) — 로그인·핀 고정에선 아래에서 다시 숨긴다 */
body[data-route] .sb-toggle { display: flex; }

/* 백드롭 — 드로어 뒤 콘텐츠를 살짝 딤. 클릭하면 닫힘(main.js) */
#sb-backdrop {
  position: fixed; inset: 0; z-index: 94;
  background: var(--backdrop);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
}
body.sb-open #sb-backdrop { opacity: 1; pointer-events: auto; }

#sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 14px 22px; border-right: 1px solid var(--line); background: var(--bg);
  z-index: 95;
  /* 기본은 화면 밖 — visibility 도 꺼서 숨은 메뉴로 탭 포커스가 가지 않게(전환 끝나고 숨김) */
  transform: translateX(-100%); visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
}
body.sb-open #sidebar {
  transform: none; visibility: visible;
  transition: transform 0.22s ease;
  box-shadow: var(--drawer-shadow);
}
#sidebar .brand {
  display: flex; align-items: center; gap: 9px;
  font-size: 20px; font-weight: 800; color: var(--accent);
  /* 좌상단 햄버거(12+44px) 옆자리 — 열리면 [햄버거][로고]가 같은 높이에 나란히 */
  margin-left: 44px; height: 44px; padding: 0 10px; margin-bottom: 8px;
}
#sidebar .brand svg { width: 24px; height: 24px; }
#sidebar nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
#sidebar nav a {
  display: block; padding: 11px 12px; border-radius: var(--radius-sm);
  color: var(--ink); font-weight: 600; font-size: 15px;
}
#sidebar nav a:hover { background: var(--surface); }
#sidebar nav a.active { background: var(--accent-soft); color: var(--accent); font-weight: 800; }

/* 고정(pin) 토글 — 드로어 하단. 켜면 상시 사이드바(예전 배치), 선택은 localStorage 유지 */
.sb-pin {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 10px 12px;
  border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--sub);
  font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left;
}
.sb-pin:hover { background: var(--surface); }
.sb-pin svg { width: 16px; height: 16px; flex: none; }
body.sb-pinned .sb-pin { background: var(--accent-soft); color: var(--accent); font-weight: 700; }

/* 공식 웹사이트 링크 — 사이드바 하단, 새 탭(학습 세션 유지). 로고는 브랜드색 */
.sb-site {
  display: flex; align-items: center; gap: 9px;
  margin-top: 8px; padding: 10px 12px; border-radius: var(--radius-sm);
  color: var(--sub); font-size: 14px; font-weight: 700;
}
.sb-site:hover { background: var(--surface); color: var(--ink); }
.sb-site .logo { width: 18px; height: 18px; flex: none; color: var(--accent); }
.sb-site .ext { width: 13px; height: 13px; flex: none; margin-left: auto; opacity: 0.65; }

#view {
  flex: 1; width: 100%;
  /* 상단 68px — 좌상단 햄버거(12+44px) 아래에서 본문 시작 */
  padding: 68px 32px 80px;
}
/* 콘텐츠 블록은 최대폭으로 제한하고 가로 가운데 정렬(사이드바 숨김·핀 양쪽 공통).
   각 직속 자식이 같은 최대폭 + auto 마진이라 좌우 여백이 대칭이 되고 좌측 끝선도 서로 맞는다. */
#view > * { max-width: var(--content-max); margin-inline: auto; }

/* 핀 고정(데스크톱만) — 예전 상시 사이드바 레이아웃 복귀 */
@media (min-width: 861px) {
  body.sb-pinned #sidebar {
    transform: none; visibility: visible; transition: none; box-shadow: none;
    padding-top: 22px;
  }
  body.sb-pinned #sidebar .brand { margin-left: 0; height: auto; padding: 6px 10px 18px; margin-bottom: 0; }
  body.sb-pinned .sb-toggle { display: none; }
  body.sb-pinned #sb-backdrop { display: none; }
  body.sb-pinned #view {
    margin-left: var(--sidebar-w);
    padding-top: 36px;
    max-width: calc(var(--sidebar-w) + var(--content-max));
  }
}

/* 로그인 화면 — 사이드바·햄버거·백드롭 모두 숨김, 중앙 카드(기존 규칙 유지) */
body[data-route="login"] #sidebar,
body[data-route="login"] .sb-toggle,
body[data-route="login"] #sb-backdrop { display: none; }
body[data-route="login"] #view { margin-left: 0; max-width: none; padding: 32px; display: flex; align-items: center; justify-content: center; min-height: 100vh; }

/* 좁은 창(브라우저 반쪽·모바일) — 핀과 무관하게 드로어 고정, 핀 토글은 의미가 없어 숨김 */
@media (max-width: 860px) {
  #view { padding: 64px 16px 60px; }
  #sidebar { width: min(var(--sidebar-w), 84vw); }
  .sb-pin { display: none; }
}

/* ── 공용 컴포넌트 ── */
.page-title { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; margin-bottom: 4px; }
.page-sub { color: var(--sub); font-size: 15px; margin-bottom: 22px; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow);
}
.card + .card { margin-top: 12px; }
.card.flat { background: var(--surface); border: 0; box-shadow: none; }
.card.clickable { cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; }
.card.clickable:hover { border-color: var(--accent); transform: translateY(-1px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: #fff; border: 0; cursor: pointer;
  font-weight: 800; font-size: 15px; padding: 12px 20px; border-radius: 14px;
}
.btn:hover { background: var(--accent-deep); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.secondary { background: var(--surface); color: var(--ink); }
.btn.secondary:hover { background: var(--surface2); }
.btn.ghost { background: transparent; color: var(--sub); font-weight: 700; }
.btn.ghost:hover { color: var(--ink); background: var(--surface); }
.btn.danger { background: transparent; color: var(--bad); font-weight: 700; }
.btn.block { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; border-radius: 99px; padding: 5px 12px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--sub); cursor: pointer;
}
.chip.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.chip:not(.on):hover { border-color: var(--sub); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 16px; align-items: center; }

/* 필터 select — 칩과 같은 캡슐 문법(높이·폰트·보더 동일), 우측 커스텀 셰브론(--chevron) */
select.chip-select {
  -webkit-appearance: none; appearance: none;
  width: auto; cursor: pointer;
  font-size: 13px; font-weight: 700; line-height: inherit;
  color: var(--sub); border: 1.5px solid var(--line); border-radius: 99px;
  padding: 5px 30px 5px 12px;
  background: var(--card) var(--chevron) no-repeat right 12px center;
}
select.chip-select:hover { border-color: var(--sub); color: var(--ink); }
select.chip-select:focus { outline: none; border-color: var(--accent); }

.badge {
  display: inline-block; font-size: 11.5px; font-weight: 800;
  border-radius: 99px; padding: 3px 10px;
}
.badge.green { background: var(--accent-soft); color: var(--accent); }
.badge.gold { background: var(--copper-soft); color: var(--gold); }
.badge.gray { background: var(--surface); color: var(--sub); }

.fi { color: var(--copper); font-weight: 800; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], select {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); }

textarea.answer {
  width: 100%; min-height: 130px; resize: vertical;
  padding: 16px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  font-family: var(--font-rounded); font-size: 18px; line-height: 1.55;
}

/* ── 연습 화면(상하 2분할 — 위 한국어 해석 / 아래 영어 입력) ── */
.practice-ko {
  background: var(--surface); border-radius: var(--radius);
  padding: 34px 30px; margin-bottom: 16px;
}
.practice-ko .meta { font-size: 13px; color: var(--sub); font-weight: 600; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.practice-ko .ko { font-size: 24px; font-weight: 800; line-height: 1.5; letter-spacing: -0.01em; }
.practice-actions { display: flex; gap: 10px; margin-top: 12px; align-items: center; }
.practice-actions .hint { color: var(--sub); font-size: 13px; margin-left: auto; }

/* 연습 제출 영역 — 앱 PracticeView와 동일 문법: 전폭 제출 + 아래 고스트 건너뛰기 */
.action-stack { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.input-hint { text-align: right; color: var(--sub); font-size: 12.5px; margin-top: 6px; }
/* 다음 문장 — 공개 영역(모범답안+피드백) 맨 아래 전폭 프라이머리(앱 revealPanel) */
.next-row { margin-top: 16px; }

.reveal { margin-top: 16px; }
.reveal .model-en { font-size: 20px; font-weight: 700; color: var(--accent); line-height: 1.5; }
.reveal .model-ko { font-size: 14px; color: var(--sub); margin-top: 6px; }
.reveal .my-en { font-size: 15px; color: var(--sub); margin-top: 8px; }

/* 발음 듣기 — 스피커 아이콘 원형 버튼(앱 SpeakButton) */
.speak-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 99px; border: 0; padding: 0;
  background: var(--accent-soft); color: var(--accent); cursor: pointer;
}
.speak-btn:hover { background: var(--accent); color: #fff; }
.speak-btn svg { width: 14px; height: 14px; }
.match-chip { font-size: 13px; font-weight: 800; border-radius: 99px; padding: 4px 12px; background: var(--accent-soft); color: var(--accent); }
.match-chip.gold { background: var(--copper-soft); color: var(--gold); }

.progress-bar { height: 6px; border-radius: 99px; background: var(--surface2); overflow: hidden; }
.progress-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width 0.3s ease; }

/* ── 피드백 카드 ── */
.fb-card { margin-top: 16px; }
.fb-card .fb-title { font-size: 14px; font-weight: 800; color: var(--accent); margin-bottom: 8px; }
.fb-card .fb-assess { font-size: 16px; font-weight: 700; }
.fb-sub { margin-top: 12px; background: var(--surface); border-radius: var(--radius-sm); padding: 12px 14px; }
.fb-sub .h { font-size: 12.5px; font-weight: 800; color: var(--sub); margin-bottom: 5px; }
.fb-sub.good .h { color: var(--accent); }
.fb-sub.wrong .h { color: var(--copper); }
.fb-sub ul { margin-left: 18px; }
.fb-sub li { font-size: 14.5px; margin-top: 3px; }
.fb-corrected { margin-top: 12px; font-size: 17px; font-weight: 800; color: var(--accent); }

/* ── 스켈레톤 로딩 ── */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skel {
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 37%, var(--surface) 63%);
  background-size: 800px 100%;
  animation: shimmer 1.3s infinite linear;
}
.skel-line { height: 14px; margin-top: 10px; }
.skel-title { height: 26px; width: 40%; margin-bottom: 14px; }
.skel-card { height: 110px; margin-top: 12px; }

/* ── 토스트 ── */
#toasts { position: fixed; right: 24px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast {
  background: var(--ink); color: var(--bg);
  border-radius: 14px; padding: 12px 18px; font-size: 14px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  animation: toast-in 0.25s ease;
  max-width: 340px;
}
.toast.fi-toast { background: var(--accent); color: #fff; font-weight: 800; }
.toast.fi-toast.big { background: var(--copper); font-size: 16px; }
.toast.error { background: var(--bad); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast.out { opacity: 0; transition: opacity 0.3s ease; }

/* ── 목록/그리드 ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 720px) { .grid-2 { grid-template-columns: 1fr; } }
.list-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--sub); }
.more-row { text-align: center; margin-top: 16px; }

.empty {
  text-align: center; color: var(--sub); padding: 48px 20px;
  background: var(--surface); border-radius: var(--radius); font-size: 15px;
}

/* ── 홈 ── */
.home-hero { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.home-hero h1 { font-size: 26px; font-weight: 900; letter-spacing: -0.02em; }

/* 나의 학습 현황 — 통계 타일 3개 + 최근 7일 미니 막대(FI 없음, 진척 중심) */
.home-stats { margin-bottom: 18px; }
.home-stats-title { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 14px; }
.home-stats-empty { color: var(--sub); font-size: 14.5px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-tile {
  background: var(--surface); border-radius: var(--radius-sm);
  padding: 14px 12px; display: flex; flex-direction: column; gap: 3px;
}
.stat-tile .stat-num { font-size: 24px; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); line-height: 1.1; }
.stat-tile .stat-label { font-size: 12.5px; font-weight: 600; color: var(--sub); }
.week-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-top: 18px; align-items: end; }
.week-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.week-bar-track { width: 100%; height: 56px; display: flex; align-items: flex-end; }
.week-bar-track i {
  display: block; width: 100%; min-height: 3px; border-radius: 5px;
  background: var(--surface2); transition: height 0.3s ease;
}
.week-bar.today .week-bar-track i { background: var(--accent); }
.week-bar-label { font-size: 11.5px; font-weight: 700; color: var(--sub); }
.week-bar.today .week-bar-label { color: var(--accent); }
.wallet-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wallet-card .amount { font-size: 26px; font-weight: 900; color: var(--copper); }
/* 홈 뉴스 카드 — 일러스트를 카드 배경으로(홈 카드 그리드와 같은 평면 문법).
   ::before 가 이미지(--news-bg, JS가 로드 성공 시에만 has-bg 부여),
   ::after 가 --news-overlay 오버레이로 이미지를 가라앉혀 글자 대비를 확보.
   이미지 로드 실패·부재 시 has-bg 없음 → 기존 평면 카드 그대로(폴백). */
.news-home-card { position: relative; overflow: hidden; }
.news-home-card .news-home-body { position: relative; z-index: 1; }
.news-home-card.has-bg::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--news-bg);
  background-size: cover; background-position: center;
  pointer-events: none;
}
.news-home-card.has-bg::after {
  content: ''; position: absolute; inset: 0;
  background: var(--news-overlay);
  pointer-events: none;
}
.news-home-title { font-size: 18px; font-weight: 800; margin-top: 8px; }
/* 본문 티저 — 희미하게(저대비 --sub) 1~2문장, 2줄 클램프 */
.news-home-teaser {
  margin-top: 6px; color: var(--sub); font-size: 13.5px; line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── 단어 뜻 팝오버(모범답안 드래그 선택 — glossary.js) ── */
.gloss-pop {
  position: fixed; z-index: 90;
  max-width: min(320px, calc(100vw - 16px));
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);   /* .toast와 동일 계열 */
  padding: 12px 14px;
}
.gloss-pop .gloss-word { font-size: 15px; font-weight: 800; color: var(--accent); word-break: break-word; }
.gloss-pop .gloss-meaning { margin-top: 4px; font-size: 14.5px; color: var(--ink); }
.gloss-pop .gloss-meaning.loading { color: var(--sub); font-size: 13.5px; }

/* ── 뉴스 ── */
.news-img { width: 100%; max-height: 300px; object-fit: cover; border-radius: var(--radius); margin: 14px 0; }
.news-sources { font-size: 12.5px; color: var(--sub); margin-top: 14px; }

/* ── 로그인 ── */
.login-card { width: 400px; max-width: 92vw; }
.login-card .brand-row { display: flex; align-items: center; gap: 9px; color: var(--accent); font-size: 22px; font-weight: 900; margin-bottom: 6px; }
.login-card .brand-row svg { width: 26px; height: 26px; }
.login-card form { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.login-tabs { display: flex; gap: 8px; margin-top: 14px; }
.login-note { margin-top: 16px; font-size: 13px; color: var(--sub); background: var(--surface); border-radius: var(--radius-sm); padding: 10px 12px; }
.form-error { color: var(--bad); font-size: 13.5px; font-weight: 600; min-height: 18px; }

/* 소셜 로그인 — "또는" 구분선 + 카카오·네이버·애플 버튼 세로 스택.
   배경·글자색은 각 사 브랜드 가이드 고정값 — 라이트/다크 동일(토큰 예외, 하드코딩 허용). */
.social-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0 12px; color: var(--sub); font-size: 12.5px; font-weight: 600;
}
.social-divider::before, .social-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.social-stack { display: flex; flex-direction: column; gap: 8px; }
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 12px 20px; border: 0; border-radius: 14px;   /* .btn 과 동일 라운드 */
  font-size: 15px; font-weight: 700; cursor: pointer;
}
.social-btn svg { width: 17px; height: 17px; flex: none; }
.social-btn:disabled { opacity: 0.45; cursor: default; }
.social-btn.kakao { background: #FEE500; color: #191919; }
.social-btn.kakao:hover:not(:disabled) { background: #F6DC00; }
.social-btn.naver { background: #03C75A; color: #fff; }
.social-btn.naver:hover:not(:disabled) { background: #02B351; }
.social-btn.naver svg { width: 13px; height: 13px; }   /* N 마크는 풀블리드 — 살짝 작게 */
.social-btn.apple {
  background: #000; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);   /* 다크 배경 위 윤곽(높이 불변) */
}
.social-btn.apple:hover:not(:disabled) { background: #1A1A1A; }
.social-btn.apple svg { margin-top: -2px; }   /* 사과 글리프 광학 보정 */

/* ── 개선 방향(진단) ── */
.tag-bar-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.tag-bar-row .name { width: 90px; font-size: 13.5px; font-weight: 700; color: var(--sub); flex: none; }
.tag-bar-row .bar { flex: 1; }
.tag-bar-row .cnt { width: 34px; text-align: right; font-size: 13px; color: var(--sub); }

/* ── 일기(diary) — 한 장의 일기장처럼 제목·본문을 이어 붙인 시트 ── */
.card.diary-sheet { padding: 0; overflow: hidden; }
.card.diary-sheet .diary-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
}
.diary-date { font-size: 13px; font-weight: 700; color: var(--sub); letter-spacing: 0.01em; }
.card.diary-sheet .diary-title {
  border: 0; border-radius: 0; background: transparent;
  padding: 18px 22px 4px; font-size: 21px; font-weight: 900; letter-spacing: -0.01em;
}
.card.diary-sheet .diary-title:focus { outline: none; border: 0; }
.card.diary-sheet .diary-body {
  border: 0; border-radius: 0; background: transparent; resize: none;
  min-height: 300px; padding: 4px 22px 24px; font-size: 18px; line-height: 1.8;
}
.card.diary-sheet .diary-body:focus { outline: none; border: 0; }
.diary-sentence .diary-orig { font-size: 15.5px; color: var(--ink); line-height: 1.5; }
.diary-sentence .diary-reason { font-size: 14.5px; color: var(--sub); line-height: 1.55; }

/* ── 영작 숙제(homework) — 홈 배너 + 숙제 화면 + 축하 팝업 ── */
/* 배너: 딥그린 그라디언트 기본, 주제 일러스트 로드 성공 시 배경 교체(has-bg)
   + 흰 글씨 가독용 어두운 스크림(앱 homeworkBannerBackground와 동일 문법). */
.hw-banner {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px;
  padding: 17px 18px; margin-bottom: 18px;
  border-radius: var(--radius); color: #fff; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  transition: transform 0.12s ease;
}
.hw-banner:hover { transform: translateY(-1px); }
.hw-banner::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--hw-bg); background-size: cover; background-position: center;
  opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.hw-banner.has-bg::before { opacity: 1; }
.hw-banner.has-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.30));
}
.hw-banner > * { position: relative; z-index: 1; }
.hw-banner-date {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 46px; height: 46px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.18);
  font-size: 14px; font-weight: 800; font-family: var(--font-rounded);
}
.hw-banner-title {
  flex: 1; font-size: 18px; font-weight: 800; font-family: var(--font-rounded);
  line-height: 1.4; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
}
.hw-banner-chev { width: 18px; height: 18px; flex: none; opacity: 0.9; }

/* 완료 스티커 — 반투명 흰 바탕 + 레드 테두리·글자, 살짝 기울인 고무도장(앱 배너 스티커 미러) */
.hw-sticker {
  flex: none; transform: rotate(-6deg);
  background: rgba(255, 255, 255, 0.82); color: #C6483B;   /* 흰 바탕 고정 → 라이트 도장색 고정 */
  border: 1.5px solid rgba(198, 72, 59, 0.85); border-radius: 8px;
  padding: 4px 9px; font-size: 11px; font-weight: 900; font-family: var(--font-rounded);
  white-space: nowrap;
}

/* 숙제 화면 — 오늘 카드(옅은 accent 틴트, 완료 시 레드 워시 + 중앙 도장) */
.hw-card {
  position: relative;
  background: var(--accent-soft); border-radius: var(--radius);
  padding: 18px; margin-top: 4px;
}
.hw-label { font-size: 12px; font-weight: 800; color: var(--accent); }
.hw-hero {
  height: 150px; margin-top: 12px;
  border-radius: calc(var(--radius) - 6px);
  background-size: cover; background-position: center;
  background-color: var(--accent-soft);
}
.hw-headline {
  margin-top: 12px; font-size: 22px; font-weight: 800; line-height: 1.35;
  font-family: var(--font-rounded); letter-spacing: -0.01em;
}
.hw-sub { margin-top: 6px; font-size: 14px; font-weight: 500; color: var(--sub); }
.hw-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; font-weight: 500; color: var(--sub); }
.hw-card .hw-wash {
  position: absolute; inset: 0; border-radius: inherit;
  background: var(--done-soft); pointer-events: none;
}
.hw-stamp {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  background: rgba(255, 255, 255, 0.78); color: #C6483B;   /* 도장은 흰 바탕 고정(앱과 동일) */
  border: 2px solid rgba(198, 72, 59, 0.85); border-radius: 12px;
  padding: 10px 18px; font-size: 20px; font-weight: 900; font-family: var(--font-rounded);
  white-space: nowrap; pointer-events: none;
  animation: hw-stamp-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes hw-stamp-in {
  from { transform: translate(-50%, -50%) rotate(-6deg) scale(1.45); opacity: 0; }
  to { transform: translate(-50%, -50%) rotate(-6deg) scale(1); opacity: 1; }
}
.hw-preview { margin-top: 12px; }
.hw-start-row { margin-top: 16px; }

/* 커리큘럼 개요 — 레벨 진행바 + 학습 순서/분야 칩(화살표 연결, 줄바꿈 안전) */
.hw-cur { margin-top: 12px; }
.hw-cur-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hw-cur-head b { font-size: 17px; font-weight: 800; font-family: var(--font-rounded); letter-spacing: -0.01em; }
.hw-cur-head span { font-size: 12px; font-weight: 600; color: var(--sub); white-space: nowrap; }
.hw-level-row { margin-top: 12px; }
.hw-level-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.hw-level-head b { font-size: 14px; font-weight: 800; font-family: var(--font-rounded); }
.hw-level-head span { font-size: 12.5px; font-weight: 600; color: var(--sub); }
.hw-sec-h { margin-top: 16px; font-size: 12px; font-weight: 700; color: var(--sub); }
.hw-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.hw-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 99px;
  background: var(--accent-soft); color: var(--sub);
  font-size: 13px; font-weight: 800; font-family: var(--font-rounded);
}
.hw-chip.on { background: var(--accent); color: #fff; }
.hw-chip.soft { color: var(--accent); font-weight: 600; }
.hw-flow { display: inline-flex; align-items: center; gap: 6px; }
.hw-arrow { font-size: 11px; font-weight: 700; color: var(--sub); opacity: 0.55; }

/* "고생하셨어요!" 축하 팝업 — 중앙 카드, 1.8s 자동 닫힘(homework.js celebrate) */
.hw-celebrate {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.35); cursor: pointer;
  animation: hw-fade-in 0.2s ease;
}
.hw-celebrate.out { opacity: 0; transition: opacity 0.25s ease; }
.hw-celebrate-card {
  background: var(--bg); border-radius: var(--radius);
  padding: 28px 34px; text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  animation: hw-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.hw-celebrate-card svg { width: 40px; height: 40px; color: var(--accent); }
.hw-celebrate-card .t { margin-top: 8px; font-size: 24px; font-weight: 900; font-family: var(--font-rounded); }
.hw-celebrate-card .s { margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--sub); }
@keyframes hw-fade-in { from { opacity: 0; } }
@keyframes hw-pop { from { transform: scale(0.8); opacity: 0; } }

/* ── 시험·에세이 총평 대기 연출 + 배치 진행(reviewflow.js) ── */
.review-wait { margin-top: 16px; }
.review-wait-count { font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 12px; }
.review-steps { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.review-steps li {
  display: flex; align-items: center; gap: 10px;
  font-size: 14.5px; font-weight: 600; color: var(--sub);
  transition: color 0.25s ease;
}
.review-steps li.active { color: var(--ink); font-weight: 700; }
.review-steps li.done { color: var(--accent); }
.review-step-ic {
  position: relative; flex: none; width: 18px; height: 18px;
  border-radius: 99px; border: 2px solid var(--line);
  transition: border-color 0.25s ease, background 0.25s ease;
}
.review-steps li.active .review-step-ic {
  border-color: var(--accent-soft); border-top-color: var(--accent);
  animation: review-spin 0.9s linear infinite;
}
.review-steps li.done .review-step-ic { border-color: var(--accent); background: var(--accent); }
.review-steps li.done .review-step-ic::after {
  content: ''; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes review-spin { to { transform: rotate(360deg); } }
.review-wait-skel { margin-top: 12px; }
.review-progress {
  display: flex; align-items: center; gap: 9px;
  margin-top: 16px; font-size: 13.5px; font-weight: 600; color: var(--sub);
}
.review-spin {
  flex: none; width: 14px; height: 14px; border-radius: 99px;
  border: 2px solid var(--surface2); border-top-color: var(--accent);
  animation: review-spin 0.9s linear infinite;
}
.review-batch-error { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.review-error { margin-top: 16px; }

/* ── 녹음(record) — 시작 카드·프롬프터(검정 풀스크린)·상세 3탭 ── */
/* 시작 카드의 시스템 소리 토글 — 칩 문법과 같은 캡슐, 체크박스는 네이티브 유지(접근성) */
.rec-toggle {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  margin-top: 14px; padding: 8px 14px; border-radius: 99px;
  border: 1.5px solid var(--line); background: var(--card);
  font-size: 14px; font-weight: 700;
}
.rec-toggle:hover { border-color: var(--sub); }
.rec-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.rec-toggle:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* 녹음 시작 버튼의 빨간 점 */
.rec-dot { width: 9px; height: 9px; border-radius: 99px; background: #FF5A5A; display: inline-block; }

/* 실패 배지 — 기존 green/gold/gray 문법에 경고색 추가 */
.badge.bad { background: rgba(214, 69, 93, 0.12); color: var(--bad); }

/* 프롬프터 — 앱 녹음 화면 미러: 불투명 검정 풀스크린(자막 가독 최우선), 라이트/다크 동일 */
.rec-prompter {
  position: fixed; inset: 0; z-index: 130;
  background: #000; color: #fff;
  display: flex; flex-direction: column;
}
.rec-top { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px 8px; }
.rec-top-mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.rec-top-pad { width: 34px; flex: none; }   /* X 버튼과 좌우 균형 — 타이머 중앙 고정 */
.rec-x {
  flex: none; width: 34px; height: 34px; border-radius: 99px; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.85);
  font-size: 15px; font-weight: 800; line-height: 1;
}
.rec-x:hover { background: rgba(255, 255, 255, 0.2); }
.rec-timer {
  font-size: 15px; font-weight: 800; font-family: var(--font-rounded);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.rec-level { width: 90px; height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.18); overflow: hidden; }
.rec-level i { display: block; height: 100%; width: 0; background: #fff; border-radius: 99px; transition: width 0.15s linear; }
.rec-cap-note {
  margin: 4px auto 0; padding: 4px 12px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6);
  font-size: 12px; font-weight: 600;
}
.rec-captions { flex: 1; overflow-y: auto; padding: 18px max(22px, 6vw) 30px; }
.rec-cap-line {
  color: #fff; font-size: clamp(20px, 2.6vw, 27px); font-weight: 600; line-height: 1.55;
  font-family: var(--font-rounded); margin-top: 16px; word-break: keep-all;
}
.rec-cap-partial {
  color: rgba(255, 255, 255, 0.55); font-size: clamp(20px, 2.6vw, 27px); font-weight: 600;
  line-height: 1.55; font-family: var(--font-rounded); margin-top: 16px; word-break: keep-all;
}
.rec-cap-empty { color: rgba(255, 255, 255, 0.4); font-size: 14px; margin-top: 6px; }
.rec-bottom { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 18px 30px; }
.rec-hint { color: rgba(255, 255, 255, 0.45); font-size: 12px; font-weight: 500; }
.rec-finish {
  border: 0; cursor: pointer; border-radius: 99px;
  background: #fff; color: #000;
  font-size: 17px; font-weight: 900; font-family: var(--font-rounded);
  padding: 14px 46px;
}
.rec-finish:hover { background: #E9EDF0; }
.rec-finish:disabled { opacity: 0.5; cursor: default; }

/* 상세 — 세그먼트·타임라인·학습 문장 */
.rec-time {
  flex: none; display: inline-block; min-width: 44px; text-align: center;
  font-size: 11.5px; font-weight: 800; font-family: var(--font-rounded);
  color: var(--sub); background: var(--surface); border-radius: 99px; padding: 2px 8px;
}
.rec-tl-row { display: flex; align-items: baseline; gap: 10px; font-size: 14.5px; margin-top: 9px; }
.rec-tl-dot { flex: none; width: 6px; height: 6px; border-radius: 99px; background: var(--accent); align-self: center; }
.rec-seg { padding: 11px 0; border-top: 1px solid var(--line); }
.rec-seg:first-child { border-top: 0; padding-top: 0; }
.rec-seg-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rec-seg-text { font-size: 15.5px; line-height: 1.6; }
.rec-seg-text.en { font-weight: 700; }
.rec-seg-text .speak-btn { vertical-align: -6px; margin-left: 6px; }
.rec-seg-sub { font-size: 13.5px; color: var(--sub); margin-top: 3px; line-height: 1.55; }
.rec-pair-en { font-size: 17px; font-weight: 800; color: var(--accent); line-height: 1.5; margin-top: 6px; }
.rec-pair-en .speak-btn { vertical-align: -5px; margin-left: 6px; }

/* 접근성 — 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  #sidebar { transition: none; }      /* 드로어 슬라이드 → 즉시 표시/숨김 */
  #sb-backdrop { transition: none; }
  .skel { animation: none; }
  .toast { animation: none; }
  .card.clickable { transition: none; }
  .week-bar-track i { transition: none; }
  .hw-banner { transition: none; }
  .hw-banner:hover { transform: none; }
  .hw-banner::before { transition: none; }
  .hw-stamp { animation: none; }
  .hw-celebrate { animation: none; }
  .hw-celebrate-card { animation: none; }
  .review-steps li.active .review-step-ic { animation: none; border-color: var(--accent); }
  .review-spin { animation: none; border-color: var(--accent); }
  .rec-level i { transition: none; }
}