/* frontend/css/stats.css — 학습 통계 페이지(stats.html). 계약 ~/Desktop/control/STUDY-STATS.md v1.0 「화면 확정 — v0.3」 + 「API 계약 v1.1」(세 상태·메시지 글자 수 — 시안 R-*·R7-*·X-*, gen4~6.py).
   시안 정본 ~/Desktop/control/design/study-stats/v0.3/project/ — 라이트 L-*.dc.html(gen3l.py) · 다크 F-*.dc.html(gen3.py)
   의 <helmet><style>을 그대로 옮겼다(폰 390 기준 픽셀 동형).
   테마(10/9, 형권님 「시스템 설정에 따라」): 「항상 다크」 철회 → 앱 테마 추종. :root = 라이트 토큰, html[data-theme="dark"] = 다크 토큰.
   data-theme는 js/theme.js가 첫 페인트 전에 찍는다(auto = OS 추종·OS 전환 시 실시간, 계정 메뉴 eunha_theme 존중).
   theme.css 관례대로 이 파일에서는 prefers-color-scheme를 직접 쓰지 않는다(첫 페인트 폴백만 stats.html 인라인 <style>).
   상태 막대 띠(iOS 26): 맨 위에 닿는 fixed 상자가 없으므로 띠 = body 배경 → 테마가 바뀌면 같은 프레임에 따라간다
   (body 배경은 transition 없이 한 번에 바뀌어야 한다 — 메모리 ios26-status-band). 맨 위 fixed/sticky 요소 금지.
   시안 대비 바꾼 것: 고정 폭 390 → 유동 폭(최대 600) · 안전 영역 · 링크(a) → 버튼 리셋 · 시트는 화면 고정(position:fixed).
   쓰지 않는 시안 규칙(.rings·.rl·.li.sub 들여쓰기·.sec .r 우측 글자)은 옮기지 않았다(README 금지 목록). */

:root {
  /* 라이트 — 시안 gen3l.py 상수(애플 건강 앱 참조). 이 페이지의 새 리터럴 색은 이 두 블록에만 둔다(js는 var()만 쓴다) */
  --st-bg: #f2f2f7;
  --st-card: #ffffff;
  --st-card-2: #e9e9eb;
  --st-card-shadow: 0 1px 2px rgba(0,0,0,.04);
  --st-seg-on: #ffffff;
  --st-seg-shadow: 0 1px 4px rgba(0,0,0,.12);
  --st-ink: #000000;
  --st-ink-2: #3c3c43;
  --st-muted: #6e6e73;
  --st-line: #e5e5ea;
  --st-base: #c7c7cc;                      /* 격자 기준선 */
  --st-on-color: #ffffff;                  /* 화살표 원 위 획 */
  --st-green: #2a9d45;                     /* 단어 가족색(신규) */
  --st-green-2: rgba(42,157,69,0.38);      /* 복습 = 신규의 38% 단계 */
  --st-blue: #007aff;                      /* 읽기 가족색 */
  --st-blue-hover: #0a5fc2;
  --st-orange: #d97700;                    /* 쓰기 가족색 */
  --st-read-1: #1f9fb8;                    /* 이야기 */
  --st-read-2: #af52de;                    /* 책 */
  --st-read-3: #00a39b;                    /* 예비 */
  --st-write-1: #e0115f;                   /* 문서 */
  --st-write-2: #a0522d;                   /* 편지 */
  --st-write-3: #c99400;                   /* 메시지 */
  --st-card-locked: #f9f9fb;              /* 가족 잠금 접은 카드 = 카드보다 한 단계 가라앉힌 색(다크 #161618의 라이트 짝) */
  --st-scrim: rgba(0,0,0,0.35);
  --st-menu: #ffffffee;
  --st-home: #228b22;                      /* 「은하」 워드마크 = theme.css 라이트 --green(index 워드마크 색) */
  --st-home-tint: rgba(34,139,34,0.08);
  /* 단어장 알림 섹션·토스트(STATS-TILE-UNLOCK §11-3, 2026-10-11) — [켜기] 글자 = 흰색(두 테마, 계약) · 토스트 = korzina.css .toast 값 그대로(두 테마 같음) */
  --st-rm-on-ink: #ffffff;
  --st-toast-bg: rgba(0, 0, 0, 0.82);
  --st-toast-error-bg: rgba(255, 59, 48, 0.92);
  --st-toast-ink: #ffffff;
  /* accessGate.js 폴백 사슬(var(--bg)·--muted·--text·--line)이 이 페이지 테마로 나오게 */
  --bg: var(--st-bg);
  --muted: var(--st-muted);
  --text: var(--st-ink);
  --line: var(--st-line);
  /* 상단 안전 여백 — theme.css와 같은 이름(하네스가 이 값을 덮어 노치를 흉내 낼 수 있다) */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}
html[data-theme="dark"] {
  /* 다크 — 시안 gen3.py 상수(애플 피트니스 참조). 변수 이름은 라이트와 같다 */
  --st-bg: #000000;
  --st-card: #1c1c1e;
  --st-card-2: #2c2c2e;
  --st-card-shadow: none;
  --st-seg-on: #636366;
  --st-seg-shadow: 0 2px 6px rgba(0,0,0,.4);
  --st-ink: #ffffff;
  --st-ink-2: #ebebf5;
  --st-muted: #8e8e93;
  --st-line: #3a3a3c;
  --st-base: #48484a;
  --st-on-color: #000000;
  --st-green: #30d158;
  --st-green-2: rgba(48,209,88,0.38);
  --st-blue: #0a84ff;
  --st-blue-hover: #409cff;
  --st-orange: #ff9f0a;
  --st-read-1: #32b4cc;
  --st-read-2: #bf5af2;
  --st-read-3: #66d4cf;
  --st-write-1: #ff375f;
  --st-write-2: #ffd60a;
  --st-write-3: #ac8e68;
  --st-card-locked: #161618;              /* 시안 gen4/gen6 .card.locked */
  --st-scrim: rgba(0,0,0,0.55);
  --st-menu: #2c2c2ef2;
  --st-home: #61c76b;                      /* theme.css 다크 --green */
  --st-home-tint: rgba(97,199,107,0.08);
  color-scheme: dark;
}
html.app-shell { --safe-top: 0px; }

html, body { background: var(--st-bg); }
body { margin: 0; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
a { color: var(--st-blue); }
a:hover { color: var(--st-blue-hover); }

.ft { box-sizing: border-box; font-family: -apple-system, "SF Pro Text", "SF Pro Display", "Apple SD Gothic Neo", "Hiragino Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.35; -webkit-font-smoothing: antialiased; color: var(--st-ink);
  width: 100%; max-width: 600px; margin: 0 auto; min-height: 100vh; background: var(--st-bg); position: relative; }
.ft * { box-sizing: border-box; }
/* 시안은 링크(a)였다 — 버튼도 a처럼 글꼴·줄 높이를 물려받게(특정도 0: 아래 규칙들이 크기·굵기를 정한다) */
:where(.ft button) { font: inherit; letter-spacing: inherit; -webkit-tap-highlight-color: transparent; cursor: pointer; }

/* 머리 — 시안 .top(56px 위 여백)을 「은하」 줄(16+40) + 안전 영역으로 채운다: 인셋 0이면 날짜 줄이 시안과 같은 56px에 온다 */
.top { padding: calc(var(--safe-top) + 16px) 20px 0; }
.st-brand { display: flex; align-items: center; height: 40px; margin-left: -6px; }
.st-home { display: inline-flex; align-items: center; min-height: 40px; padding: 4px 6px; border-radius: 8px;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: 0.2px; white-space: nowrap;
  color: var(--st-home); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.st-home:hover { color: var(--st-home); background: var(--st-home-tint); }
.st-home:focus-visible { outline: 2px solid var(--st-home); outline-offset: 1px; }
@media (max-width: 699px) { .st-home { font-size: 18px; } }
html.app-shell .st-brand { display: none; }
html.app-shell .top { padding-top: 56px; }

.date { font-size: 13px; font-weight: 600; color: var(--st-muted); text-transform: uppercase; letter-spacing: .02em; min-height: 1.35em; }
.h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 2px 0 14px; }
.segc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--st-card-2); border-radius: 9px; padding: 2px; gap: 2px; }
.segc button { height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--st-ink); text-decoration: none;
  border: 0; background: transparent; padding: 0; margin: 0; }
.segc button.on { background: var(--st-seg-on); box-shadow: var(--st-seg-shadow); }
.wrap { padding: 18px 20px calc(44px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 16px; }
.sec { display: flex; align-items: center; justify-content: space-between; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.card { background: var(--st-card); border-radius: 16px; padding: 16px; box-shadow: var(--st-card-shadow); }
.big { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.big small { font-size: 17px; font-weight: 600; margin-left: 3px; letter-spacing: 0; }
.cap { font-size: 13px; color: var(--st-muted); font-weight: 500; }
.sub { font-size: 14px; color: var(--st-ink-2); margin-top: 6px; }
.sub b { font-weight: 600; }
.list { display: flex; flex-direction: column; }
.li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--st-line); }
.li:last-child { border-bottom: 0; padding-bottom: 0; }
.li:first-child { padding-top: 0; }
.li .t { flex: 1 1 auto; min-width: 0; }
.li .t .k { font-size: 15px; font-weight: 600; }
.li .t .s { font-size: 13px; color: var(--st-muted); margin-top: 1px; }
.li .n { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.li .n small { font-size: 13px; font-weight: 600; margin-left: 2px; }
.li .ar { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
/* v1.1 세 상태(시안 gen4 .ar.off·.ar.none · README 「세 상태 규칙」) — 둘 다 원 없이 화살표 원과 같은 28px 슬롯, 숫자 자리는 비운다.
   잠금 = 22px 자물쇠(muted) · 항목명·보조 줄 옅게 / 「—」 = 20px·3px 작대기, 항목 부분색(js가 stroke를 준다) */
.li .ar.off, .li .ar.none { background: transparent; }
.li .ar.off { color: var(--st-muted); }
.li.off .t .k, .li.off .t .s { color: var(--st-muted); }
/* 가족 잠금 접은 카드(시안 gen6 .card.locked) — 「개방되지 않음」 좌 + 자물쇠 우. 보조 문구가 있을 때만 둘째 줄(.t2) */
.card.locked { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 14px 16px; color: var(--st-muted); background: var(--st-card-locked); }
.card.locked .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.card.locked .t1 { font-size: 15px; font-weight: 600; color: var(--st-ink-2); opacity: .75; line-height: 1.3; }
.card.locked .t2 { font-size: 12px; color: var(--st-muted); line-height: 1.3; }
.card.locked .lk { width: 22px; height: 22px; flex: 0 0 auto; display: flex; color: var(--st-muted); }
.card.locked .lk svg { width: 22px; height: 22px; }
/* 마감된 달 없음(시안 gen6 .empty) */
.empty { padding: 22px 16px; color: var(--st-muted); font-size: 15px; font-weight: 500; }
/* 책 진도 행(전체 탭) — 제목 줄 아래 진행바가 카드 전폭(README 「책 진도 행」) */
.li.book { flex-direction: column; align-items: stretch; gap: 8px; }
.li.book .row { display: flex; align-items: center; gap: 12px; }
.li.book .meter { margin-top: 0; }
.split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; background: var(--st-card-2); margin-top: 12px; }
.split i { display: block; height: 100%; }
/* 범례 = 한 줄 고정(v1.1, 시안 R-*·X-Msg: nowrap · 간격 10px · 자간 -0.01em). 0·빈·잠금 항목은 js가 넣지 않는다 */
.lg { display: flex; gap: 10px; font-size: 12px; color: var(--st-muted); margin-top: 8px; flex-wrap: nowrap; white-space: nowrap; font-weight: 500; letter-spacing: -0.01em; }
.lg span { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; }
.lg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.meter { height: 8px; border-radius: 4px; background: var(--st-card-2); margin-top: 8px; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 4px; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.msel { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 14px; border-radius: 17px; background: var(--st-card-2); color: var(--st-ink); font-size: 15px; font-weight: 600; text-decoration: none;
  border: 0; margin: 0; }
.msel.static { background: transparent; padding: 0; color: var(--st-ink); }
.st-chart svg text { font-family: inherit; }

/* 월 선택 액션 시트(F-MonthPicker) — 시안의 보드 안 absolute를 화면 고정으로 */
.st-sheet[hidden] { display: none; }
.sheet-bg { position: fixed; inset: 0; background: var(--st-scrim); z-index: 50; }
.sheet { position: fixed; left: 8px; right: 8px; bottom: calc(12px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 8px; z-index: 51;
  max-width: 584px; margin: 0 auto; }
.menu { background: var(--st-menu); border-radius: 14px; overflow: hidden; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.menu .hd { padding: 12px 16px 8px; font-size: 13px; color: var(--st-muted); font-weight: 600; text-align: center; border-bottom: 1px solid var(--st-line); }
.opt { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--st-line); background: transparent; margin: 0;
  text-decoration: none; color: var(--st-ink); font-size: 17px; font-weight: 400; text-align: left; }
.opt:last-child { border-bottom: 0; }
.opt .r { display: flex; align-items: center; gap: 10px; color: var(--st-muted); font-size: 14px; }
.opt.on { font-weight: 700; }
.cancel { background: var(--st-card); border-radius: 14px; height: 56px; width: 100%; border: 0; margin: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 600; color: var(--st-blue); text-decoration: none; }
html.st-sheet-open, html.st-sheet-open body { overflow: hidden; }

/* ===== 단어장 알림 섹션(STATS-TILE-UNLOCK §11-3, 2026-10-11) — 시안 design/stats-tile/remind/shoot4.js `top` 변형의 .rm* 규칙 =====
   제목 17/700(아이콘 없음) · 제목 아래 14px · 항목 간격 12px · 항목 14px/1.45 --st-ink-2 · 아이콘 녹색 20px · 낱말 단위 줄바꿈 ·
   버튼 2열 높이 44 · 버튼 위 16px · [아니요] --st-card-2 · [켜기] --st-green 흰 글자. 누름 = 한 단계 어둡게(시안 #23843a ≈ 85%).
   접힘(js/stats/remind.js): .rm-out 0–150ms 페이드아웃 → .rm-fold 150–400ms 높이·안쪽 여백 0 · 위 간격(.wrap gap 16) 흡수 → 제거. */
.rm { display: flex; flex-direction: column; overflow: hidden;
  transition: opacity 150ms ease, height 250ms ease, padding 250ms ease, margin 250ms ease; }
.rm.rm-out { opacity: 0; }
.rm.rm-fold { padding-top: 0; padding-bottom: 0; margin-top: -16px; }
.rm-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.rm-t { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--st-ink); }
.rm-rows { display: flex; flex-direction: column; gap: 12px; margin-top: 2px; }
.rm-r { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--st-ink-2); word-break: keep-all; }
.rm-ri { width: 20px; height: 20px; flex: 0 0 auto; color: var(--st-green); }
.rm-ri svg { width: 20px; height: 20px; display: block; }
.rm-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.rm-b button { height: 44px; border: 0; border-radius: 12px; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.rm-no { background: var(--st-card-2); color: var(--st-ink); }
.rm-on { background: var(--st-green); color: var(--st-rm-on-ink); }
.rm-b button:active, .rm-b button.is-down { filter: brightness(0.85); }
@media (prefers-reduced-motion: reduce) { .rm { transition: none; } }

/* 토스트 — 단어장(korzina.css .toast)과 같은 모양·위치·3초. DOM = js/stats/remind.js(core.js KZ.toast와 같은 라이브 리전) */
#kz-toasts { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 9999; }
.toast {
  position: fixed;
  pointer-events: none;
  bottom: calc(24px + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: 85vw;
  padding: 10px 18px;
  border-radius: 10px;
  background: var(--st-toast-bg);
  color: var(--st-toast-ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  z-index: 9999;
  animation: toastAnim 3s ease forwards;
}
.toast-error { background: var(--st-toast-error-bg); }
@keyframes toastAnim {
  0% { opacity: 0; transform: translateX(-50%) translateY(10px); }
  8%, 85% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}