/* frontend/css/korzina.css — 웹 단어장(코르지나) 기본 토큰 · 셸 · 홈 · 덱 상세.
   K-P1(2026-09-23) 픽셀 동형 재작성: 정본은 iOS 화면이다
   (Sources/Theme.swift · Vocab/VocabListViewController.swift · DeckDetailViewController.swift).
   - 색은 iOS 시스템 색 실값(systemGroupedBackground 등)과 Theme.swift의 브랜드 값을 그대로 쓴다.
     공용 css/theme.css는 이 페이지에서 읽지 않는다(형권님 지시: 앱 우선이 웹 토큰 원칙보다 상위).
   - 간격·반경은 Theme.Metric(pad 16 · gap 12 · radius 14 · radiusSmall 10 · chipRadius 8 · hitMin 44).
   - iOS Safari에서 1 CSS px = 1 pt이므로 Swift의 pt 값을 px로 그대로 옮긴다.
   화면별 분리: 복습 = css/korzina/review.css · 단어 상세/모달 = css/korzina/detail.css.
   정본 설계 ~/Desktop/control/KORZINA-WEB-PARITY.md §14. */

/* ===== iOS 시스템 색 실값 (라이트) ===== */
:root {
  --ios-grouped-bg: #F2F2F7;          /* systemGroupedBackground */
  --ios-card: #FFFFFF;                /* secondarySystemGroupedBackground */
  --ios-surface: #FFFFFF;             /* systemBackground */
  --ios-tertiary-bg: #FFFFFF;         /* 원형 뒤로가기 배경 — 라이트는 K-P1 값 유지 */
  --ios-label: #000000;               /* label */
  --ios-secondary: rgba(60, 60, 67, 0.60);   /* secondaryLabel */
  --ios-tertiary: rgba(60, 60, 67, 0.30);    /* tertiaryLabel */
  /* separator — 실측값(라이트 #F2F2F7 위 220 / 흰 카드 위 231에 동시에 맞는 알파) */
  --ios-separator: rgba(60, 60, 67, 0.12);
  --ios-fill: rgba(118, 118, 128, 0.12);     /* secondarySystemFill — 세그먼트 트랙·검색창 */
  --ios-red: #FF3B30;
  --ios-orange: #FF9500;
  --ios-blue: #007AFF;

  /* Theme.swift — 브랜드/파생색(실값 그대로) */
  --kz-brand: rgb(33, 140, 41);              /* Color.brand  = (0.13, 0.55, 0.16) */
  --kz-brand-rgb: 33, 140, 41;
  --kz-brand-soft: rgba(33, 140, 41, 0.12);  /* Color.brandSoft — 배너 실측 rgb(217,230,222)과 일치 */
  /* 폴더 카드 [복습 N] 캡슐만 더 진하다 — 캡처 실측 흰 카드 위 rgb(215,234,216) = brand α0.18
     (다크는 카드 #2C2C2E 위 rgb(57,83,61) = brand α0.25). 배너(α0.12)와 다른 값이다. */
  --kz-deck-pill-bg: rgba(33, 140, 41, 0.18);
  /* FOLDER-ACTIVE §5(2026-09-28) — 비활성 폴더 [복습 n]: iOS 틴티드 버튼 전경 secondaryLabel ·
     배경 systemGray(142,142,147) 틴트. 알파는 위 브랜드 캡슐 실측(라이트 0.18 · 다크 0.25)과 같은 비율. */
  --kz-deck-pill-bg-off: rgba(142, 142, 147, 0.18);
  --kz-deck-pill-label-off: rgba(60, 60, 67, 0.60);
  --kz-ruby: #FF3B30;                        /* Color.ruby = systemRed */
  --kz-translation: rgb(0, 107, 217);        /* Color.translation = (0, 0.42, 0.85) */
  --kz-gloss: rgb(46, 128, 82);              /* RubyGlossRenderer.glossColor = (0.18, 0.5, 0.32) */
  --kz-on-accent: #FFFFFF;

  /* Theme.Metric */
  --kz-pad: 16px;
  --kz-gap: 12px;
  --kz-radius: 14px;
  --kz-radius-sm: 10px;
  /* K-P4 실측 — inset grouped 카드 모서리는 iOS 26에서 25pt다(캡처 코너 원호 적합, 오차 <0.5pt). */
  --kz-card-radius: 25px;
  --kz-chip-radius: 8px;
  --kz-hit: 44px;
  --kz-nav-h: 70px;   /* 실측 — 내비 영역 상단부터 safeArea 시작까지 69.7pt */

  /* Theme.applyCardShadow */
  --kz-card-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);

  /* ===== K-P4(2026-09-24) Liquid Glass 근사 — 값은 시뮬레이터 캡처 실측 =====
     정본 = reports/2026-09-24-ios-sim/vocab.*-{light,dark}.png (iPhone 16e 390×844pt·DPR3, sRGB).
     유리 요소 = 원형 버튼(닫기·톱니·⋯)·세그먼트 트랙/썸·하단 검색 바. [복습 N] 알약은 채움이라 유리가 아니다.
     실측(라이트): 원형 안쪽 rgb(251,251,254) · 검색 바 rgb(251,251,255) — 바탕 #F2F2F7 위 흰색 0.72 합성과 같다.
     실측(다크): 원형 rgb(27,27,28)(바탕 #1C1C1E보다 살짝 어둡다) · 검색 바 rgb(37,37,39)(살짝 밝다) ·
                 둘레 1px 링 rgb(56,56,61).  ★한계 = 굴절·기울임 반응·실시간 왜곡은 재현하지 않는다(§19). */
  --kz-glass-blur: blur(18px) saturate(170%);
  --kz-glass-bg: rgba(255, 255, 255, 0.72);
  --kz-glass-bg-search: rgba(255, 255, 255, 0.75);
  --kz-glass-line: transparent;                       /* 둘레 1px — 라이트는 없다 */
  --kz-glass-line-search: transparent;
  --kz-glass-ring: inset 0 1px 0 rgba(255, 255, 255, 0.60);   /* 안쪽 하이라이트 */
  --kz-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 5px 16px rgba(0, 0, 0, 0.09);
  --kz-glass-spec: linear-gradient(145deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 52%);
  /* [복습 N] 알약 — iOS 26 `.done` 바 버튼(prominent). 글자는 흰색이 아니라 틴트를 밝힌 민트다(실측). */
  --kz-pill-bg: rgb(33, 139, 40);
  --kz-pill-label: rgb(171, 255, 178);

  /* 안전영역 — 스크린샷 하네스가 실기기 값(50/34, 시트 화면은 44/34)을 주입해 픽셀 비교를 가능하게 한다. */
  /* 상단 인셋 — 앱 페이지 공통 변수(--safe-top, theme.css와 같은 정의 · 홈 v1.3 §9-8)를 따른다(단어장은 theme.css를 읽지 않는다).
     단어장은 이미 이 값 + 띠(6px)로 머리를 내린다 — 기준에 맞아 배치는 무변경. */
  --safe-top: env(safe-area-inset-top, 0px);
  --kz-sa-top: var(--safe-top);
  --kz-sa-bottom: env(safe-area-inset-bottom, 0px);

  /* K-P3 시트 프레임(§16) — 시트 바깥 '띠' 색·모서리. 띠 색은 앱 실측(뒤 화면을 20% 어둡게 한 자리). */
  --kz-band: #CCCCCC;
  /* 위 모서리 반경 = 목표 사진에 겹쳐 맞춘 값(§16 "최종값은 사진에 겹쳐 맞춘다").
     사진의 코너 곡선을 원호로 근사하면 위 38에서 어긋남이 0.5pt 이내다
     (계약의 어림값 36은 가장자리 열 관측만으로 잡은 것 — 실측으로 갱신).
     ★K-5.1(2026-09-24, 형권님 실기 지적): 아래 모서리는 **0**이다. 비 standalone 사파리는
       주소창이 화면 최하단에 떠서, 둥근 아래 모서리와 그 바깥 띠가 주소창과 겹쳐 흉하게 보였다.
       standalone·사파리·아이패드 전부 동일하게 바닥까지 사각으로 채운다("하단부 둥근 처리는
       없애고 끝까지 채워야"). 상단 띠·위 모서리·띠 색·theme-color는 종전 그대로. */
  --kz-sheet-r-top: 38px;
  --kz-sheet-r-bottom: 0px;
}

/* ===== iOS 시스템 색 실값 (다크) — formSheet → elevated 단계 =====
   iOS는 단어장 흐름 전체를 formSheet로 띄운다(Sources/RootContainerViewController.swift L222·L276).
   시트 안에서 다크 시스템 색은 base가 아니라 **elevated** 값으로 렌더된다 —
   systemGroupedBackground #000 → #1C1C1E, secondarySystemGrouped #1C1C1E → #2C2C2E,
   tertiarySystemGrouped #2C2C2E → #3A3A3C. 라이트는 시트 여부와 무관하게 같은 값이라 손대지 않는다.
   실측 근거 = reports/2026-09-23-korzina-pixel/target/ios-review-front-dark-srgb.png
   (실기 사진은 Display P3 — sRGB로 변환한 뒤 읽어야 CSS 값과 같은 공간이다. K-P1.1 교훈). */
html[data-theme="dark"] {
  --ios-grouped-bg: #1C1C1E;          /* systemGroupedBackground (elevated) — 실측 (28,28,30) */
  --ios-card: #2C2C2E;                /* secondarySystemGroupedBackground (elevated) — 실측 (44,44,46) */
  --ios-surface: #1C1C1E;             /* systemBackground (elevated) */
  --ios-tertiary-bg: #3A3A3C;         /* tertiarySystemGroupedBackground (elevated) — 원형 뒤로가기 실측 (58,58,61) */
  --ios-label: #FFFFFF;
  --ios-secondary: rgba(235, 235, 245, 0.60);   /* 실측 '남은 N장' (152,152,159) = 0.6 합성값 */
  --ios-tertiary: rgba(235, 235, 245, 0.30);
  /* separator — 명목은 rgba(84,84,88,0.6)이지만 진행 바 트랙 실측이 #1C1C1E 위 (55~56)이다.
     라이트(0.12)와 같은 방식으로 렌더 결과에 알파를 맞춘다. */
  --ios-separator: rgba(84, 84, 88, 0.50);
  --ios-fill: rgba(120, 120, 128, 0.24);        /* fill 계열은 elevated 변형이 없다 — 그대로 */
  --ios-red: #FF453A;
  --ios-orange: #FF9F0A;
  --ios-blue: #0A84FF;
  --kz-brand: rgb(97, 199, 107);              /* Color.brand 다크 = (0.38, 0.78, 0.42) — 펼치기 버튼 실측과 일치 */
  --kz-brand-rgb: 97, 199, 107;
  --kz-brand-soft: rgba(97, 199, 107, 0.18);
  --kz-translation: rgb(115, 179, 255);
  --kz-gloss: rgb(140, 199, 153);
  /* Theme.applyCardShadow는 다크에도 같은 값을 쓴다(라이트/다크 분기 없음) */
  --kz-card-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  --kz-band: #000000;                          /* 다크 띠 — 실측 (0,0,0) */
  /* K-P4 유리 — 다크는 바탕보다 아주 살짝 어둡고(원형) 둘레에 밝은 링이 있다(실측). */
  --kz-glass-bg: rgba(0, 0, 0, 0.05);
  --kz-glass-bg-search: rgba(255, 255, 255, 0.04);
  --kz-glass-line: rgba(235, 235, 245, 0.11);        /* 실측 둘레 rgb(50,50,52) */
  --kz-glass-line-search: rgba(235, 235, 245, 0.20);  /* 검색 바 둘레는 더 밝다 — 실측 rgb(70,70,74) */
  --kz-glass-ring: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  /* 다크 캡처에는 원형 둘레 그림자가 없다(바탕이 #1C1C1E 그대로다) — 아주 얕게만. */
  --kz-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  --kz-glass-spec: linear-gradient(145deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 52%);
  --kz-pill-bg: rgb(95, 198, 105);
  --kz-pill-label: rgb(176, 255, 186);
  --kz-deck-pill-bg: rgba(97, 199, 107, 0.25);
  --kz-deck-pill-bg-off: rgba(142, 142, 147, 0.25);      /* systemGray 다크 = 라이트와 같은 (142,142,147) */
  --kz-deck-pill-label-off: rgba(235, 235, 245, 0.60);   /* secondaryLabel 다크 */
}

/* backdrop-filter가 없거나(구형) 투명도 축소를 원하면 불투명 폴백 — 합성 결과와 같은 색으로. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --kz-glass-blur: none; --kz-glass-bg: #FBFBFE; --kz-glass-bg-search: #FBFBFF; }
  html[data-theme="dark"] { --kz-glass-bg: #1B1B1C; --kz-glass-bg-search: #252527; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --kz-glass-blur: none; --kz-glass-bg: #FBFBFE; --kz-glass-bg-search: #FBFBFF; --kz-glass-spec: none; }
  html[data-theme="dark"] { --kz-glass-bg: #1B1B1C; --kz-glass-bg-search: #252527; --kz-glass-spec: none; }
}

* { box-sizing: border-box; margin: 0; }

html { background: var(--ios-grouped-bg); }
/* 홈 v1.3(§9-5): 더블탭 확대만 끈다(핀치 확대 유지). 단어장은 theme.css를 읽지 않아 여기서 따로 건다.
   v1.3.1(§9-13): 가로 쓸어넘기기 내비 억제(크롬 안드로이드 — 런처 → 단어장이 replace라 뿌리에는 뒤로 갈 기록도 없다). */
html, body { touch-action: manipulation; overscroll-behavior-x: none; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro", system-ui, sans-serif;
  background: var(--ios-grouped-bg);
  color: var(--ios-label);
  font-size: 17px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  padding-top: calc(var(--kz-sa-top) + var(--kz-nav-h));
}

/* ===== K-P3 시트 프레임 (터치 기기 전용 · 2026-09-23) =====
   앱은 단어장 전체를 iOS 26 formSheet로 띄운다 — 화면 위 50pt(상태바 44 + 6)부터 시작하는
   둥근 시트, 그 바깥은 뒤 화면이 어두워진 '띠'. 웹은 뒤 화면이 없으므로 평색(--kz-band)을 쓴다.
   적용 = html.kz-touch(navigator.maxTouchPoints > 1, korzina.html head 인라인 스크립트).
   PC(maxTouchPoints 0)와 앱 셸은 스탬프가 없어 아래 규칙이 하나도 걸리지 않는다 = K-P2 상태 그대로.

   ★내부 요소의 화면 기준 절대 좌표는 K-P2와 같아야 한다(§16 결정 4).
     띠 높이 = --kz-sa-top + 6px (실기 standalone: 0+6, 상태바는 viewport 밖 — theme-color가 칠한다
                                  하네스: 44+6 = 50 → 목표 사진과 같은 자리).
     내비 = 띠 아래 0 + padding-top 16  → 원형 뒤로가기 y = 띠 + 16 (종전 sa-top(50)+16과 동일)
     본문 = 시트 padding-top --kz-nav-h  → 종전 body padding-top(sa-top + nav-h)과 동일 좌표.
   정본 ~/Desktop/control/KORZINA-WEB-PARITY.md §16. */
#kz-sheet { display: contents; }     /* 비터치 = 레이아웃에 개입하지 않는 투명 래퍼 */

html.kz-touch {
  --kz-band-h: calc(var(--kz-sa-top) + 6px);
  background: var(--kz-band);
}
html.kz-touch body {
  background: var(--kz-band);
  padding-top: 0;                    /* 본문 여백은 시트가 가진다 */
}
html.kz-touch #kz-sheet {
  display: block;
  position: fixed;
  top: var(--kz-band-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--ios-grouped-bg);
  border-radius: var(--kz-sheet-r-top) var(--kz-sheet-r-top)
                 var(--kz-sheet-r-bottom) var(--kz-sheet-r-bottom);
  padding-top: var(--kz-nav-h);
  overflow-x: hidden;
  overflow-y: auto;                  /* 스크롤은 시트 안에서만 — 띠는 고정 */
  -webkit-overflow-scrolling: touch; /* 구 iOS 관성 스크롤(최신 iOS는 기본) */
  /* K-6(§21 결정 1): none → contain. WebKit은 none이면 러버밴드 자체를 끄고, contain은 바운스는
     살리고 body로의 체이닝만 막는다. 시트는 fixed·자기 배경이라 바운스해도 띠는 드러나지 않는다
     (움직이는 것은 시트 안 콘텐츠뿐 — §16 결정 5의 목적 유지). 당겨서 새로고침도 이 바운스를 읽는다. */
  overscroll-behavior: contain;
}
/* 시트는 transform을 갖지 않는다 — 안쪽 position:fixed 요소(내비·복습 화면·툴바·모달)가
   종전처럼 뷰포트 기준으로 남아 절대 좌표가 보존된다. 대신 시트 모서리를 덮지 않도록
   상·하단에 닿는 요소에만 같은 반경을 준다. */
html.kz-touch .kz-nav {
  top: var(--kz-band-h);
  height: var(--kz-nav-h);
  padding-top: 16px;
  border-radius: var(--kz-sheet-r-top) var(--kz-sheet-r-top) 0 0;
}
html.kz-touch .kz-multibar {
  border-radius: 0 0 var(--kz-sheet-r-bottom) var(--kz-sheet-r-bottom);
}
/* 화면 전환 중 가로 스크롤 잠금 — 터치에서는 스크롤 주체가 시트다(K-P2 결정 3). */
html.kz-animating.kz-touch #kz-sheet { overflow: hidden; }

/* ===== 내비게이션 바 (iOS UINavigationBar — 좌상단 원형 뒤로가기 + 제목 한 줄) ===== */
.kz-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  height: calc(var(--kz-sa-top) + var(--kz-nav-h));
  padding: calc(var(--kz-sa-top) + 16px) var(--kz-pad) 0;
  background: var(--ios-grouped-bg);
}
/* K-P4 — 유리 재질 공통. position:relative는 ::before 스펙큘러를 담기 위한 것이다. */
.kz-glass {
  position: relative;
  background: var(--kz-glass-bg);
  -webkit-backdrop-filter: var(--kz-glass-blur);
  backdrop-filter: var(--kz-glass-blur);
  border: 1px solid var(--kz-glass-line);
  box-shadow: var(--kz-glass-ring), var(--kz-glass-shadow);
}
.kz-glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--kz-glass-spec);
  pointer-events: none;
}
.kz-nav-back {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--ios-label);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.kz-nav-back[hidden] { display: none; }
.kz-nav-back svg { width: 22px; height: 22px; }
/* 단어 상세만 Close(×) — iOS WordDetailViewController가 leftBarButtonItem에 .close를 쓴다(K-4). */
.kz-nav-back .ic-close { display: none; }
.kz-nav-back.is-close .ic-back { display: none; }
.kz-nav-back.is-close .ic-close { display: block; }
/* Anki 가져오기 화면의 '취소' — iOS .cancel 바 버튼(원형 대신 텍스트) */
.kz-nav-cancel { height: 44px; padding: 0 2px; }
.kz-nav-cancel[hidden] { display: none; }
.kz-nav-title {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-label);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 뒤로가기가 없는 화면(단어장 루트)에서도 제목 위치는 iOS와 같은 자리 — 루트는 홈이라 뒤로가기 유지 */
.kz-nav-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; height: 44px; }
.kz-nav-btn {
  border: none;
  background: none;
  color: var(--kz-brand);
  font-size: 17px;
  font-weight: 600;
  padding: 6px 4px;
  min-width: 32px;
  min-height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.kz-nav-btn[hidden] { display: none; }
.kz-nav-btn:disabled { color: var(--ios-tertiary); cursor: default; }
/* K-P4 — 톱니/⋯는 44pt 원형 유리(실측 x 220..264 · y 63..107). */
.kz-nav-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: 50%;
  padding: 0;
}
.kz-nav-icon svg { width: 23px; height: 23px; }
/* .kz-glass는 이 블록보다 위에 있어 .kz-nav-btn { background: none }에 덮인다 —
   원형 톱니(⋯)에도 유리 배경이 남도록 특이도를 한 단계 올려 되살린다. */
.kz-nav-btn.kz-glass { background: var(--kz-glass-bg); }
/* K-P4 — [복습 N] = iOS 26 `.done` 바 버튼(브랜드 채움 알약). 실측 42pt 높이 · 캡슐 · 글자 17 semibold. */
#kz-review-all.kz-nav-btn {
  height: 42px;
  min-height: 42px;
  padding: 0 17px;
  border-radius: 999px;
  background: var(--kz-pill-bg);
  color: var(--kz-pill-label);
  gap: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.10);
}
#kz-review-all.kz-nav-btn:disabled { background: var(--ios-fill); color: var(--ios-tertiary); box-shadow: none; }
.kz-nav-icon .ic-dots { display: none; }
.kz-nav-icon.deck-menu .ic-gear { display: none; }
.kz-nav-icon.deck-menu .ic-dots { display: inline; }
.kz-nav-badge:empty { display: none; }

.container { max-width: 900px; margin: 0 auto; padding: 0 var(--kz-pad); }

/* ===== 화면(스크린) ===== */
.kz-screen { display: none; }
.kz-screen.active { display: block; }

/* 화면 전환 (K-P2 — iOS 내비게이션 push/pop, §15 결정 3)
   전환 중에는 나가는 화면과 들어오는 화면이 동시에 .active다. 나가는 쪽은 js가
   position:fixed로 '지금 보이는 자리'에 고정하고(스크롤 보존), 들어오는 쪽은 흐름에 남는다.
   실제 움직임은 Web Animations API(core.js) — 여기서는 담는 그릇만 만든다. */
.kz-screen.kz-tr {
  position: relative;               /* 어둡게 덮개(.kz-tr-dim)의 기준 — 나가는 쪽은 인라인 fixed가 이긴다 */
  will-change: transform;
}
/* 위에 놓이는 화면(push = 들어오는 쪽, pop = 나가는 쪽)의 바탕 — 화면 자체는 투명해서 카드 사이·좌우 여백·
   내용 아래로 아래 화면(폴더 목록)이 비쳤다(2026-09-29 형권님 지적). 앱은 새 화면이 불투명한 판이다.
   ::before로 깐다 — 나가는 쪽은 인라인 left/width로 고정돼 있어 여백을 늘리면 자리가 틀어진다.
   좌우는 컨테이너 여백까지, 세로는 내용이 짧아도 화면 끝까지(전환 중 스크롤은 잠겨 있다).
   위로는 내비 높이만큼 올린다 — 화면 윗변과 내비 아랫변 사이 몇 pt로 아래 화면의 세그먼트가 보였다
   (사파리 실측). 올라간 부분은 불투명한 내비(z 40)가 덮는다. */
.kz-screen.kz-tr-top::before {
  content: '';
  position: absolute;
  top: calc(-1 * var(--kz-nav-h));
  left: calc(-1 * var(--kz-pad));
  right: calc(-1 * var(--kz-pad));
  height: calc(100% + var(--kz-nav-h));
  min-height: calc(100vh + var(--kz-nav-h));
  background: var(--ios-grouped-bg);
  z-index: -1;                      /* 화면(전환 중 쌓임 맥락) 안에서 내용 아래 */
  pointer-events: none;
}
.kz-tr-dim {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  z-index: 30;
}
/* 시트 전환 (K-5/A-9 — 단어 상세·Anki 가져오기는 iOS가 시트 위 시트로 띄운다).
   올라오는 화면은 뒤 화면을 완전히 덮어야 하므로 컨테이너 좌우 여백까지 배경을 펼치고
   위 모서리만 K-P3와 같은 반경으로 둥글린다(프레임을 한 겹 더 만들지 않는다). */
.kz-screen.kz-tr-sheet {
  background: var(--ios-grouped-bg);
  border-radius: var(--kz-sheet-r-top) var(--kz-sheet-r-top) 0 0;
  margin-left: calc(-1 * var(--kz-pad));
  margin-right: calc(-1 * var(--kz-pad));
  padding-left: var(--kz-pad);
  padding-right: var(--kz-pad);
  min-height: 100vh;
  z-index: 25;
  /* 배경색이 아래 화면과 같아 모서리가 보이지 않는다 — 시트로 읽히도록 얕은 그림자만 준다. */
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
}
/* 화면 밖으로 밀려난 화면이 스크롤 영역을 늘리지 않게 — 전환 중에만 잠근다. */
html.kz-animating,
html.kz-animating body { overflow: hidden; }

/* ===== 세그먼트 (iOS UISegmentedControl) =====
   트랙 = secondarySystemFill, 선택 썸 = 흰 캡슐 + 얕은 그림자. */
/* K-P4 실측(캡처 vocab.home.folders-light): 트랙 x 16..374 · y 125..157(높이 32) · 캡슐(r 16) ·
   rgb(227,227,232) = --ios-fill 합성값 그대로. 썸 = 캡슐 흰색(다크 rgb(105,105,111)), 안쪽 2pt. */
.kz-segment {
  display: flex;
  background: var(--ios-fill);
  /* 트랙은 채도 보정 없는 흐림만 — saturate를 걸면 바탕(#F2F2F7)이 파래져 실측(227,227,232)에서 벗어난다. */
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-radius: 999px;
  height: 32px;
  padding: 2px;
  gap: 4px;                 /* 실측 — 썸 폭 115pt = (358 - 안쪽 4 - 틈 8) / 3 */
  margin: 8px 0 0;
}
.kz-seg-btn {
  flex: 1;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-label);
  cursor: pointer;
}
.kz-seg-btn:disabled { opacity: .35; cursor: default; }
.kz-seg-btn.active {
  background: linear-gradient(180deg, #FCFCFC, #FFFFFF);
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7),
              0 1px 2px rgba(0, 0, 0, 0.05), 0 3px 10px rgba(0, 0, 0, 0.10);
}
html[data-theme="dark"] .kz-seg-btn.active {
  background: linear-gradient(180deg, rgb(102, 102, 108), rgb(107, 107, 113));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.45);
}
/* K-P4: 단어 세그먼트의 빨간 개수 배지는 앱에 없다 — 표시하지 않는다(값 계산은 그대로 둔다). */
.kz-seg-badge { display: none; }

/* ===== 검색 (iOS 26 하단 떠 있는 검색 필드) =====
   K-P4 실측: x 29..361(폭 332) · y 769..815(높이 46) · 캡슐 · 유리.
   iOS 26에서 검색 바는 목록 위가 아니라 **화면 최하단**에 떠 있고 목록이 그 아래로 지나간다. */
.kz-search {
  position: fixed;
  left: 0;
  right: 0;
  bottom: max(12px, calc(var(--kz-sa-bottom) - 6px));   /* 키보드가 열리면 아래 html.kz-kb 규칙 */
  z-index: 35;
  width: 332px;
  max-width: calc(100% - 58px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 46px;
  padding: 0 16px;
  background: var(--kz-glass-bg-search);
  -webkit-backdrop-filter: var(--kz-glass-blur);
  backdrop-filter: var(--kz-glass-blur);
  border: 1px solid var(--kz-glass-line-search);
  box-shadow: var(--kz-glass-ring), var(--kz-glass-shadow);
  border-radius: 999px;
}
/* 검색 바는 홈에서만 — 덱 상세·복습·단어 상세·가져오기는 각자 하단 바를 쓴다(앱과 같다). */
body:not(.kz-home) .kz-search,
body.kz-selecting .kz-search { display: none; }
/* 목록이 검색 바 뒤로 지나가되 마지막 행이 가려지지 않게 — 홈 세 창만. */
body.kz-home .container { padding-bottom: calc(58px + max(12px, var(--kz-sa-bottom))); }
/* K-6(§21 결정 3) — 터치: 마지막 행이 검색 바 위로 20px 더 뜬다(58 → 78).
   (K-6.1: 키보드 인셋은 여백이 아니라 시트 자체를 줄여서 반영한다 — 아래 html.kz-kb. 이중 인셋 제거.)
   min-height 100%+1px = 목록이 짧아도 시트가 1px 넘치게 — WebKit은 넘치지 않는 스크롤러에는
   러버밴드를 주지 않는다(앱의 UITableView는 항상 바운스한다). 당겨서 새로고침도 여기에 기댄다. */
html.kz-touch body.kz-home .container {
  padding-bottom: calc(78px + max(12px, var(--kz-sa-bottom)));
  min-height: calc(100% + 1px);
  transition: padding-top 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}
/* K-6.1(§21.1 결정 1) — 당겨서 새로고침 중 스피너 자리. 발동 때 한 번 붙이고 끝나면 뗀다(js/korzina/pull-refresh.js).
   바운스에 맞춰 프레임마다 자리를 늘리던 종전 방식은 실기에서 "드드득" 떨려 폐기했다. */
html.kz-touch body.kz-home .container.kz-ptr-active { padding-top: 44px; }
/* K-6.1(§21.1 결정 2) — 키보드 열림(html.kz-kb, main.js가 --kz-kb > 0일 때 스탬프).
   iOS formSheet가 키보드 위로 줄어드는 것처럼 시트 자체가 키보드(+ WebKit 폼 보조 바 ∧∨✓) 위에서 끝나고,
   검색 바는 그 보조 바 바로 위에 붙어 한 덩어리로 보인다. 시트 바닥 아래는 띠색. 전환 없이 즉시
   (키보드 애니메이션과 싸우지 않게). 보조 바는 웹 코드로 숨길 수 없다(WKWebView 네이티브만 가능). */
html.kz-touch.kz-kb #kz-sheet { bottom: var(--kz-kb, 0px); }
html.kz-kb .kz-search { bottom: calc(var(--kz-kb, 0px) + 8px); }
/* K-6 — 검색 바는 시트 밖(body 직계)이라 시트 안의 모달(z 10000)·설치 안내(z 10003)보다 위에 놓인다
   (시트가 fixed라 자기 쌓임 맥락을 만든다). 종전 모습을 그대로 재현한다:
   모달이 떠 있으면 바도 같은 덮개 색으로 어둡게 + 입력 차단, 설치 안내가 떠 있으면 카드 뒤로 숨긴다. */
html.kz-touch body.kz-modal-open .kz-search { pointer-events: none; }
html.kz-touch body.kz-modal-open .kz-search::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.4);    /* = .modal-overlay 덮개 */
}
.kz-search-icon { flex: 0 0 auto; display: flex; color: var(--ios-label); }
.kz-search-icon svg { width: 21px; height: 21px; }
.kz-search input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 17px;
  color: var(--ios-label);
  padding: 0 8px;
  -webkit-appearance: none;
  appearance: none;
}
.kz-search input::placeholder { color: var(--ios-secondary); }
.kz-search input:focus { outline: none; }
.kz-search input::-webkit-search-cancel-button { display: none; }
.kz-search-clear {
  border: none; background: none;
  color: var(--ios-secondary);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  display: none;
}
.kz-search.has-text .kz-search-clear { display: block; }

/* ===== 당겨서 새로고침 (K-6 · iOS UIRefreshControl — js/korzina/pull-refresh.js) =====
   받침(.kz-ptr)은 홈 첫 자식이고 늘 높이 0 — 레이아웃·픽셀에 개입하지 않는다(터치에서만 생긴다).
   새로고침 중 자리는 .container.kz-ptr-active(padding-top 44)가 만든다.
   스피너 = iOS activity indicator(medium 20pt · 살 8개 · secondaryLabel 회색). 당길 때는 깊이만큼
   살이 하나씩 나타나고, 발동하면 앞선 살이 진하고 뒤따르는 살이 옅은 채로 8단계 회전한다. */
.kz-ptr { position: relative; height: 0; pointer-events: none; }
.kz-ptr-spin {
  position: absolute;
  left: 50%;
  top: 0;
  color: var(--ios-secondary);
  opacity: 0;
  visibility: hidden;
}
.kz-ptr.show .kz-ptr-spin { opacity: 1; visibility: visible; }
.kz-ptr.fading .kz-ptr-spin { opacity: 0; transition: opacity 0.25s ease; }
.kz-ptr-spin line { stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.kz-ptr-spin g { transform-origin: 10px 10px; }
.kz-ptr.spinning .kz-ptr-spin g { animation: kz-ptr-rot 0.8s steps(8) infinite; }
.kz-ptr.spinning line:nth-child(1) { opacity: 0.30; }
.kz-ptr.spinning line:nth-child(2) { opacity: 0.40; }
.kz-ptr.spinning line:nth-child(3) { opacity: 0.50; }
.kz-ptr.spinning line:nth-child(4) { opacity: 0.60; }
.kz-ptr.spinning line:nth-child(5) { opacity: 0.70; }
.kz-ptr.spinning line:nth-child(6) { opacity: 0.80; }
.kz-ptr.spinning line:nth-child(7) { opacity: 0.90; }
.kz-ptr.spinning line:nth-child(8) { opacity: 1; }
@keyframes kz-ptr-rot { to { transform: rotate(360deg); } }

/* ===== inset grouped 목록 (iOS UITableView .insetGrouped) ===== */
/* K-P4 실측 — 행 구분선은 카드 폭을 다 쓰지 않는다. 카드 좌우에서 16pt 들어온 자리에만 그어진다
   (앱 x 32..357.67, 카드 16..374). 종전 border-bottom은 카드 끝까지 이어져 있었다. */
.kz-sep-row { position: relative; border-bottom: none !important; }
.kz-sep-row::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px;
  background: var(--ios-separator);
}
.kz-sep-row:last-child::after { display: none; }
.kz-pane { display: none; }
.kz-pane.active { display: block; }
/* K-P4 실측: 캡션(「폴더 5개」) 잉크 x 32.33 · 높이 15.33 = 본문과 같은 17pt(세미볼드).
   iOS 26에서 그룹 섹션 헤더가 13pt에서 본문 크기로 커졌다 — 종전 13pt와 가장 큰 차이. */
.kz-list-header {
  padding: 36px 16px 4px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ios-secondary);
}
.kz-list-header:empty { display: none; }
.kz-card {
  background: var(--ios-card);
  border-radius: var(--kz-card-radius);
  overflow: hidden;
  margin-bottom: 20px;
}

/* ===== 단어 행 (iOS configureVocabCell: 표제 18 semibold + [읽기] 14 red / 뜻 · 폴더) ===== */
.vocab-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;            /* K-P4 실측 — 단어 행 간격 63pt */
  min-height: 44px;
  position: relative;
  cursor: pointer;
}
.vocab-row::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px;
  background: var(--ios-separator);
}
.vocab-row:last-child::after { display: none; }
.vocab-row.selected { background: var(--kz-brand-soft); }
.vr-check { width: 20px; height: 20px; accent-color: var(--kz-brand); cursor: pointer; flex-shrink: 0; display: none; }
.kz-selecting .vr-check { display: block; }
.vr-main { flex: 1; min-width: 0; }
.vr-word { font-size: 18px; font-weight: 600; color: var(--ios-label); }
.vr-reading { font-size: 14px; color: var(--ios-red); margin-left: 6px; }
.vr-sub {
  font-size: 15px;
  color: var(--ios-secondary);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vr-meta { font-size: 13px; color: var(--ios-secondary); flex-shrink: 0; text-align: right; }
/* iOS accessoryType = .checkmark — 복습 경험이 있는 카드만 */
.vr-check-mark { flex-shrink: 0; color: var(--kz-brand); font-size: 17px; font-weight: 600; }
.vr-tag { font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; }
.vr-tag.vr-new { background: var(--kz-brand-soft); color: var(--kz-brand); }
.vr-tag.vr-rev { background: rgba(255, 149, 0, 0.16); color: var(--ios-orange); }
.sense-sub { font-size: 13px; color: var(--ios-secondary); margin-top: 1px; }
/* K-P4: 목록 행의 × 삭제 버튼은 앱에 없다(캡처 vocab.home.words · vocab.deck) —
   iOS는 스와이프로 지우고 행에는 아무것도 얹지 않는다. 웹에서도 숨기고, 삭제는
   단어 상세의 [삭제]와 홈 메뉴의 선택 모드로 남긴다(기능은 그대로). */
.btn-delete { display: none; }
.btn-delete-unused {
  background: none;
  border: none;
  color: var(--ios-tertiary);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  flex-shrink: 0;
}
.kz-selecting .btn-delete { display: none; }

/* 다중 선택 하단 바 (iOS toolbarItems: [이동] … [삭제(N)]) */
.kz-multibar {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  align-items: center;
  gap: 10px;
  padding: 8px var(--kz-pad) calc(8px + var(--kz-sa-bottom));
  background: var(--ios-grouped-bg);
  border-top: 1px solid var(--ios-separator);
}
.kz-selecting .kz-multibar { display: flex; }
.kz-multibar .kz-spacer { flex: 1; }
.kz-multibar .kz-selcount { font-size: 13px; color: var(--ios-secondary); }
.btn-bar {
  border: none;
  background: none;
  color: var(--kz-brand);
  font-size: 17px;
  font-family: inherit;
  cursor: pointer;
  padding: 8px 6px;
}
.btn-bar:disabled { color: var(--ios-tertiary); cursor: default; }
.btn-bar.danger { color: var(--ios-red); }
.btn-bar.danger:disabled { color: var(--ios-tertiary); }

/* ===== 빈 상태 (iOS EmptyStateView) ===== */
.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: var(--ios-secondary);
  font-size: 15px;
}
.empty-state p { margin: 8px 0; }
.empty-state strong { color: var(--ios-label); font-size: 20px; font-weight: 700; }
.empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
/* 빈 상태 CTA (K-5/B-b) — iOS EmptyStateView의 Theme.filledButton과 같은 모양. */
.kz-empty-cta {
  margin-top: 24px;
  padding: 12px 22px;
  background: var(--kz-brand);
  color: #fff;
  border: none;
  border-radius: var(--kz-radius-sm);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  min-height: var(--kz-hit);
}
/* 지연 렌더 감시점 (K-5/A-2) — 높이 0, 레이아웃에 개입하지 않는다. */
.kz-more { height: 1px; }

/* ===== 폴더 카드 (iOS DeckCardCell) — 이름 17 semibold / 메타 13 / [복습 Q] 캡슐 / › ===== */
.deck-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;          /* K-P4 실측 — 행 높이 63.5pt(앱 63.9) */
  position: relative;
}
.deck-card::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px;
  background: var(--ios-separator);
}
.deck-card:last-child::after { display: none; }
.deck-info { flex: 1; cursor: pointer; min-width: 0; }
/* 이름이 길면 **중간**을 접는다(K-5/A-3 = iOS DeckCardCell .byTruncatingMiddle).
   CSS에는 중간 말줄임이 없어 실제 접기는 decks.js가 한다 — 여기 ellipsis는 스크립트 전 폴백. */
.deck-name { font-size: 17px; font-weight: 600; color: var(--ios-label);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck-kind {
  font-size: 11px; font-weight: 600; color: var(--kz-brand);
  background: var(--kz-brand-soft); padding: 1px 8px; border-radius: 999px; margin-left: 8px;
  vertical-align: middle;
}
.deck-meta { font-size: 13px; color: var(--ios-secondary); margin-top: 1px; }
/* K-P4 실측 — 「전체 N · 복습 M · 신규 K」의 구분점 좌우 여백(앱 메타 줄 폭 177pt). */
.deck-meta-sep { padding: 0 7px; }
.deck-meta .due-hot { color: var(--ios-orange); font-weight: 600; }
.deck-meta .new-hot { color: var(--kz-brand); font-weight: 600; }
.deck-actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.btn-deck-review {
  padding: 4px 9px;            /* K-P4 실측 — 캡슐 70.7 × 28pt */
  background: var(--kz-deck-pill-bg);
  color: var(--kz-brand);
  border: none;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
}
.btn-deck-review:disabled { display: none; }
/* 비활성 폴더 — 모양·크기·글자 그대로 색만 회색(눌러진다 — disabled·투명도 금지, FOLDER-ACTIVE §5). */
.btn-deck-review.off { background: var(--kz-deck-pill-bg-off); color: var(--kz-deck-pill-label-off); }
.deck-chevron { color: var(--ios-tertiary); font-size: 19px; flex-shrink: 0; }

/* ===== 덱 상세 (iOS DeckDetailViewController) =====
   헤더 카드(16pt 패딩 · radius 16 · 그림자) = 캡션 13 / 요약 19 semibold / [복습 시작] 50pt / 힌트 12. */
.deck-head-card {
  background: var(--ios-card);
  border-radius: 16px;
  box-shadow: var(--kz-card-shadow);
  padding: 16px 16px 20px;      /* K-P4 실측 — [복습 시작] 아래 여백이 위보다 넓다 */
  margin-top: 12px;
}
.deck-head-caption { font-size: 13px; font-weight: 500; color: var(--ios-secondary); }
.deck-head-summary {
  font-size: 19px;
  font-weight: 600;
  color: var(--ios-label);
  margin: 6px 0 10px;           /* K-P4 실측 — 버튼 위 129+74.7pt */
}
.deck-head-summary.done { color: var(--ios-secondary); }
.btn-deck-start {
  display: block;
  width: 100%;
  height: 50px;
  border: none;
  border-radius: 14px;
  background: var(--kz-brand);
  color: var(--kz-on-accent);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.btn-deck-start:disabled { opacity: 0.4; cursor: default; }
.deck-ahead-hint {
  font-size: 12px;
  font-weight: 500;
  color: var(--ios-secondary);
  text-align: center;
  margin-top: 8px;
}
.deck-ahead-hint:empty { display: none; }
/* K-5/B-e — 눌러서 설명을 볼 수 있는 라벨(iOS도 같은 자리에 같은 알럿). */
.deck-ahead-hint.tappable { cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* ===== 학습일 연기 바 (iOS StudyDayExtendBar, 23:00~23:59만) ===== */
.kz-extend-bar {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: var(--kz-hit);
  border-radius: var(--kz-radius-sm);
  margin: 8px 0 0;
  padding: 6px 12px;
  text-align: center;
  font-size: 13px;
}
.kz-extend-bar.show { display: flex; }
.kz-extend-bar.state-button { background: var(--kz-brand-soft); }
.kz-extend-bar.state-info { background: var(--ios-fill); color: var(--ios-secondary); font-weight: 500; }
.kz-extend-bar button {
  border: none;
  background: none;
  color: var(--kz-brand);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 12px;
  width: 100%;
}

/* ===== 통계 (iOS value1 셀: 라벨 좌 / 값 우 16 semibold) ===== */
.stats-detail .info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;           /* K-P4 실측 — 통계 행 높이 53pt */
  min-height: 44px;
  position: relative;
  font-size: 17px;
}
.stats-detail .info-row::after {
  content: '';
  position: absolute;
  left: 16px; right: 16px; bottom: 0;
  height: 1px;
  background: var(--ios-separator);
}
.stats-detail .info-row:last-child::after { display: none; }
.stats-detail .info-label { color: var(--ios-label); }
.stats-detail .info-value { font-size: 16px; font-weight: 600; color: var(--ios-secondary); }
/* K-P4 — iOS buildStatRows의 값 색(캡처 실측). */
.stats-detail .info-value.v-orange { color: var(--ios-orange); }
.stats-detail .info-value.v-brand { color: var(--kz-brand); }
.stats-detail .info-value.v-blue { color: var(--ios-blue); }

/* ===== 드롭다운 메뉴 (iOS UIMenu) ===== */
.kz-menu {
  position: fixed;
  z-index: 10002;
  min-width: 250px;
  max-width: min(320px, calc(100vw - 16px));
  background: rgba(249, 249, 249, 0.94);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 13px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  padding: 0;
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
html[data-theme="dark"] .kz-menu { background: rgba(37, 37, 39, 0.94); }
.kz-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 17px;
  color: var(--ios-label);
  text-align: left;
  cursor: pointer;
}
.kz-menu-item + .kz-menu-item { border-top: 1px solid var(--ios-separator); }
.kz-menu-item.destructive { color: var(--ios-red); }
.kz-menu-item.muted { color: var(--ios-tertiary); }   /* 쓸 수 없는 줄(알림 — 미설치·미지원·거부) = 비활성 버튼과 같은 색 */
.kz-menu-item .kz-menu-check { width: 14px; color: var(--kz-brand); font-weight: 700; flex-shrink: 0; }
.kz-menu-title {
  padding: 8px 16px 4px;
  font-size: 13px;
  color: var(--ios-secondary);
}
.kz-menu-sep { height: 8px; background: var(--ios-separator); }

/* ===== Toast (iOS ReviewViewController.showNotice 대응 — 검은 캡슐) ===== */
/* K-4/B11 — 토스트는 라이브 리전 안에 쌓인다(core.js). 리전 자체는 자리를 차지하지 않는다. */
/* 2026-10-02(TZ v2): 리전이 fixed라 쌓임 맥락을 만들어 토스트의 z-index 9999가 리전 안에 갇혔다 — 홈 하단 검색 바
   (z 35) 뒤에 토스트가 묻혔다. 리전에 같은 층을 줘 토스트 본래 의도(최상단)를 되살린다. 위치·모양은 무변경. */
#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(--kz-sa-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: 85vw;
  padding: 10px 18px;
  border-radius: var(--kz-radius-sm);
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  z-index: 9999;
  animation: toastAnim 3s ease forwards;
}
.toast-error { background: rgba(255, 59, 48, 0.92); }
@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); }
}

/* ===== 홈 화면 웹 앱 — 비로그인 로그인 진입점 (§3) ===== */
.kz-login-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 16px;
  margin-top: 12px;
  background: var(--kz-brand-soft);
  border-radius: var(--kz-radius);
}
.kz-login-bar[hidden] { display: none; }
.kz-login-text { flex: 1; min-width: 150px; font-size: 15px; color: var(--ios-secondary); }
.kz-login-btn {
  padding: 8px 16px;
  border-radius: var(--kz-radius-sm);
  background: var(--kz-brand);
  color: var(--kz-on-accent);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

/* ===== 앱 셸(iOS WebVocabViewController) — 네이티브 툴바가 상태바를 이미 먹었다 ===== */
html.app-shell { --kz-sa-top: 0px; }