/*
 * tokens.css — UI 리디자인 (v0.6.2)
 *
 * 단일 진실 공급원: ui-redesign-spec.md §2 + components.md §7.5.2
 *
 * 순서:
 *   1. 루트 토큰 (크기, 타이포, 스페이싱, 라운딩, 그림자, 애니메이션, safe-area)
 *   2. 아이콘 상태 색 (currentColor 기반)
 *   3. 13 테마 × light/dark 색상 변수
 *   4. Reduced motion / 고대비 / 손잡이 오버라이드
 *
 * 주의:
 *   - :has() 금지 (steering 정책, Firefox 성능)
 *   - backdrop-filter 금지 (iOS Safari 성능)
 *   - 테마는 data-theme 속성으로 전환, 다크는 data-mode="dark"
 *   - "system" 테마가 첫 진입 기본값
 */

/* =========================================================================
 * 1. 루트 토큰 (테마 무관)
 * ========================================================================= */
:root {
  /* ---- 아이콘 크기 3-tier (spec §2.1) ---- */
  --icon-sm: 20px;   /* 툴바/인라인 */
  --icon-md: 24px;   /* 탭바/모달 헤더 */
  --icon-lg: 28px;   /* 평가/주요 CTA */

  /* ---- 타이포 (spec §2.3) ---- */
  --fontFamily:
    'Pretendard Variable', 'Pretendard',
    -apple-system, BlinkMacSystemFont, system-ui,
    'Segoe UI', Roboto, 'Apple SD Gothic Neo', 'Noto Sans KR',
    sans-serif;
  --fontFamilyMono:
    'SF Mono', Monaco, Consolas, 'Courier New', monospace;

  --fontSizeXS: 11px;
  --fontSizeSM: 13px;
  --fontSizeBase: 15px;
  --fontSizeMD: 17px;
  --fontSizeLG: 20px;
  --fontSizeXL: 24px;
  --fontSizeCard: 28px; /* 카드 본문 기본, 사용자 size controls로 덮어쓰기 */

  --fontWeightNormal: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;

  --lineHeightTight: 1.3;
  --lineHeightBase: 1.5;
  --lineHeightLoose: 1.7;

  /* ---- 스페이싱 4px 그리드 (spec §2.4) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- 라운딩 (spec §2.5) ---- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---- 그림자 (spec §2.6) ---- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10);

  /* ---- 애니메이션 타이밍 (spec §2.7 / components §4) ---- */
  --dur-instant: 100ms;
  --dur-fast: 150ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-ios: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1.0);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* 기존 legacy 속도 변수 계승 (사용자 설정) */
  --animSpeed: 1;
  --flipSpeed: 1;
  --slideSpeed: 1;

  /* ---- Safe area (components §7.5.2) ---- */
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
  --sa-left: env(safe-area-inset-left, 0px);
  --sa-right: env(safe-area-inset-right, 0px);

  /* ---- Chrome 높이 예약 (§3.13 레이아웃 점프 방지) ---- */
  --nav-height: 48px;
  --menu-height: 0px; /* 메뉴바 있는 화면에서 동적 치환 */
  --tabbar-height: 56px;

  /* ---- 구조 토큰 (vision §3 Theme-Native)
   *  색뿐 아니라 레이아웃·타이포·리듬도 테마가 결정.
   *  각 테마 블록에서 아래 값을 재정의 → 동일 HTML이 테마별로 다른 구조를 갖는다.
   * ---- */
  --heroScale: 1.0;        /* 히어로 폰트 배율 (28px × heroScale) */
  --titleWeight: 600;      /* 타이틀 font-weight */
  --sectionGap: var(--space-8);    /* 홈 섹션 간 여백 */
  --contentDensity: 1.0;   /* 카드·리스트 패딩 배율 */
  --heroAlign: left;       /* 히어로 정렬: left | center */
  --deckGridGap: var(--space-4);
  --deckCoverRatio: 3 / 2; /* 덱 커버 비율 */
  --sectionTitleSize: var(--fontSizeSM);
  --sectionTitleWeight: 500;
  --sectionTitleCase: none;        /* none | uppercase */
  --sectionTitleSpacing: 0;        /* letter-spacing */

  /* 섹션 내부 타일/리스트 프리셋 */
  --tileRadius: var(--radius-md);          /* 성취/최근덱 타일 radius */
  --tilePadding: var(--space-3);           /* 타일 내부 여백 */
  --tileGap: var(--space-3);               /* 타일 간 간격 */
  --tileBorder: 0;                          /* 타일 외곽선 두께 */
  --tileBg: transparent;                    /* 타일 배경 (기본 투명) */
  --achievementsLayout: scroll;             /* scroll | grid | list */
  --recentDecksLayout: scroll;              /* scroll | grid */
  --weeklyStyle: inline;                    /* inline | hero (저널 스타일) */
  --numStyle: display;                      /* display(큰 숫자) | body(일반) */

  /* ---- 아이콘 상태 색 (currentColor 기반, 테마 섹션에서 덮어쓰기 가능) ---- */
  --iconColor: currentColor;
  --iconColorMuted: var(--colorSecondary, #888);
  --iconColorActive: var(--colorAccent, #0071E3);
  --iconColorDanger: var(--colorError, #E53935);
  --iconColorSuccess: var(--colorSuccess, #2E7D32);
}

/* 브라우저 수준 가로 스크롤바 비활성화 — 의도치 않은 overflow로 가로 스크롤이 뜨지 않게 */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* =========================================================================
 * 2. 기본 색상 팔레트 (system 테마가 첫 진입 기본값)
 * ========================================================================= */

/* "system" 테마 light (기본값, 루트에도 동일 적용) */
:root,
[data-theme="system"] {
  --bgPrimary: #FFFFFF;
  --bgSecondary: #F5F5F7;
  --bgTertiary: #EEEEF0;

  --textPrimary: #1D1D1F;
  --textSecondary: #6E6E73;
  --textTertiary: #98989D;

  --colorPrimary: #0A0A0A;
  --colorSecondary: #6E6E73;
  --colorAccent: #0071E3;
  --colorError: #E53935;
  --colorDanger: var(--colorError);   /* btn-cta-danger 등 "위험" 버튼용 alias. 테마는 --colorError만 재정의 */
  --colorSuccess: #2E7D32;
  --colorWarning: #F9A825;

  --cardBg: #FFFFFF;
  /* 기본 테마(system/light) — 앞/뒷면 아주 연하게 구분 */
  --cardBgGradient: linear-gradient(135deg, #FFFFFF 0%, #F5F7FA 100%);
  --cardBackBg: linear-gradient(135deg, #F5F7FA 0%, #E8ECF3 100%);
  --cardBorder: rgba(60, 60, 67, 0.12);
  --cardBorderWidth: 0;
  --cardShadow: none;
  --cardRadius: var(--radius-lg);

  --cardWordColor: #1D1D1F;
  --cardMeaningColor: #3A3A3C;
  --cardQAColor: #6E6E73;

  --focusRing: #0071E3;

  /* date input 등 네이티브 팝업이 라이트/다크를 자동 전환하도록 color-scheme 힌트 */
  --colorScheme: light;

  /* 차트 라인 색 (통계 탭의 시간/정답률 라인 등) — 기본은 textPrimary와 동일,
   * 테마별로 막대 색과 구분이 필요한 경우 override */
  --chartLine: var(--textPrimary);

  /* Rating 전용 색 토큰 — 모든 테마에서 의미가 일관 (Again=빨강/Hard=주황/Good=파랑/Easy=초록)
   * 테마는 기본색 자체를 바꾸지 말고 명도/채도만 미세 조정 (예: color-mix opacity) */
  --rating1: #E53935;  /* Again */
  --rating2: #F59E0B;  /* Hard  */
  --rating3: #3B82F6;  /* Good  */
  --rating4: #10B981;  /* Easy  */
}

/* Rating 색 테마별 톤 조정 — 기본 의미(빨강/주황/파랑/초록) 보존, 명도·채도만 변주 */
[data-theme="midnight"] {
  /* 어두운 배경에서 눈 피로 줄이기 위해 5~10% 덜 강렬하게 */
  --rating1: #D0524F;
  --rating2: #E6A43F;
  --rating3: #5A8CD6;
  --rating4: #43A98A;
}
[data-theme="mono"] {
  /* 채도 낮춤 — 테마 성격 유지하되 순서는 빨강→초록 유지 */
  --rating1: #8B4A48;
  --rating2: #8B7140;
  --rating3: #4E6A93;
  --rating4: #507766;
}
[data-theme="hacker"] {
  /* 터미널 모노 톤 — 모두 단일 hue 내 명도 계조. 의미 순서는 유지 */
  --rating1: color-mix(in srgb, var(--colorAccent) 30%, #E53935);
  --rating2: color-mix(in srgb, var(--colorAccent) 50%, #F59E0B);
  --rating3: var(--colorAccent);
  --rating4: color-mix(in srgb, var(--colorAccent) 70%, #10B981);
  /* 라인 색이 막대 accent(녹)와 같은 hue라 충돌 → 채도 낮춘 회색톤으로 분리 */
  --chartLine: color-mix(in srgb, var(--textPrimary) 55%, #808080);
}
/* 차트 라인 — accent와 막대 색 hue가 같아 충돌하는 테마들: 채도 낮춘 톤으로 분리 */
[data-theme="ocean"]    { --chartLine: color-mix(in srgb, var(--textPrimary) 70%, #808080); }
[data-theme="forest"]   { --chartLine: color-mix(in srgb, var(--textPrimary) 70%, #808080); }
[data-theme="ember"]    { --chartLine: color-mix(in srgb, var(--textPrimary) 70%, #808080); }
[data-theme="blossom"]  { --chartLine: color-mix(in srgb, var(--textPrimary) 70%, #808080); }
[data-theme="sand"]     { --chartLine: color-mix(in srgb, var(--textPrimary) 70%, #808080); }

[data-theme="system"][data-mode="dark"],
:root[data-mode="dark"] {
  --bgPrimary: #000000;
  --bgSecondary: #1C1C1E;
  --bgTertiary: #2C2C2E;

  --textPrimary: #F5F5F7;
  --textSecondary: #98989D;
  --textTertiary: #6E6E73;

  --colorPrimary: #FFFFFF;
  --colorSecondary: #98989D;
  --colorAccent: #0A84FF;
  --colorError: #FF453A;
  --colorSuccess: #32D74B;
  --colorWarning: #FFD60A;

  --cardBg: #1C1C1E;
  /* dark 기본 — 앞/뒷면 미세한 구분 (너무 어두워 눈에 띄지 않되 분별은 가능) */
  --cardBgGradient: linear-gradient(135deg, #1C1C1E 0%, #252528 100%);
  --cardBackBg: linear-gradient(135deg, #252528 0%, #2E2E33 100%);
  --cardBorder: rgba(255, 255, 255, 0.08);
  --cardBorderWidth: 0;
  --cardShadow: none;

  --cardWordColor: #F5F5F7;
  --cardMeaningColor: #D1D1D6;
  --cardQAColor: #98989D;

  --focusRing: #0A84FF;
  --colorScheme: dark;
}

/* 어두운 전용 테마도 color-scheme=dark — date input 네이티브 팝업 톤 맞춤 */
[data-theme="midnight"],
[data-theme="hacker"],
[data-theme="neon"] { --colorScheme: dark; }

/* =========================================================================
 * 2.x 12 기본 테마 (legacy manager.js CARD_THEMES 이관, 2026-05-03)
 *   — data-theme × data-mode 조합. 각 블록은 카드 렌더 전용 색 + 기본 팔레트.
 *   — `custom`은 런타임에만 설정 (localStorage 기반)
 * ========================================================================= */

/* ---- 구조 토큰 — 테마별 프리셋
 *  각 테마가 색상 외에 "레이아웃·타이포·리듬" 프리셋을 함께 가진다.
 *  vision §3 "Theme-Native, Not Theme-Skin" — 테마는 분위기 전체.
 *  아래 블록은 색상 블록과 분리되어 data-theme만 매칭(모드 무관).
 * ---- */
[data-theme="ocean"]    { --heroScale: 1.3;  --sectionGap: var(--space-12); --contentDensity: 1.3; --deckCoverRatio: 3 / 2; --sectionTitleCase: uppercase; --sectionTitleSpacing: 0.05em; --tileRadius: 16px; --tilePadding: var(--space-4); --tileGap: var(--space-4); --achievementsLayout: scroll; --weeklyStyle: hero; }
[data-theme="forest"]   { --heroScale: 1.2;  --sectionGap: var(--space-10); --contentDensity: 1.2; --deckCoverRatio: 4 / 3; --tileRadius: 14px; --tilePadding: var(--space-3); }
[data-theme="classic"]  { --heroScale: 1.4;  --sectionGap: var(--space-16); --contentDensity: 1.4; --deckCoverRatio: 16 / 9; --heroAlign: left; --titleWeight: 700; --tileRadius: 14px; --achievementsLayout: list; --weeklyStyle: hero; }
[data-theme="midnight"] { --heroScale: 1.5;  --sectionGap: var(--space-16); --contentDensity: 1.5; --deckCoverRatio: 3 / 2; --heroAlign: left; --titleWeight: 700; --sectionTitleSize: var(--fontSizeBase); --tileRadius: 0; --tilePadding: 0; --achievementsLayout: list; --weeklyStyle: hero; --numStyle: display; }
[data-theme="ember"]    { --heroScale: 1.1;  --sectionGap: var(--space-8);  --contentDensity: 1.1; --deckCoverRatio: 3 / 2; --tileRadius: 10px; --tileBorder: 2px; }
[data-theme="blossom"]  { --heroScale: 1.15; --sectionGap: var(--space-10); --contentDensity: 1.2; --deckCoverRatio: 1 / 1; --heroAlign: center; --tileRadius: 24px; --tilePadding: var(--space-4); --tileGap: var(--space-4); }
[data-theme="sand"]     { --heroScale: 1.0;  --sectionGap: var(--space-8);  --contentDensity: 1.1; --deckCoverRatio: 4 / 3; --tileRadius: 10px; }
[data-theme="mono"]     { --heroScale: 0.95; --sectionGap: var(--space-6);  --contentDensity: 0.9; --deckCoverRatio: 1 / 1; --titleWeight: 500; --sectionTitleCase: uppercase; --sectionTitleSpacing: 0.08em; --sectionTitleSize: var(--fontSizeXS); --tileRadius: 4px; --tilePadding: var(--space-2); --tileGap: var(--space-2); --achievementsLayout: grid; }
[data-theme="neon"]     { --heroScale: 1.3;  --sectionGap: var(--space-10); --contentDensity: 1.1; --deckCoverRatio: 16 / 9; --titleWeight: 700; --sectionTitleCase: uppercase; --sectionTitleSpacing: 0.1em; --tileRadius: 12px; --tileBorder: 1px; }
[data-theme="hacker"]   { --heroScale: 1.0;  --sectionGap: var(--space-6);  --contentDensity: 0.85; --deckCoverRatio: 1 / 1; --titleWeight: 400; --sectionTitleCase: uppercase; --sectionTitleSpacing: 0.12em; --sectionTitleSize: var(--fontSizeXS); --tileRadius: 0; --tilePadding: var(--space-2); --tileGap: 0; --achievementsLayout: list; --numStyle: body; }
[data-theme="trump"]    { --heroScale: 1.2;  --sectionGap: var(--space-10); --contentDensity: 1.2; --deckCoverRatio: 2 / 3; --heroAlign: center; --titleWeight: 600; --tileRadius: 10px; --tileBorder: 2px; }
[data-theme="system"]   { --heroScale: 1.0;  --sectionGap: var(--space-8);  --contentDensity: 1.0; --deckCoverRatio: 3 / 2; --tileRadius: 12px; }
[data-theme="custom"]   { --heroScale: 1.0;  --sectionGap: var(--space-8);  --contentDensity: 1.0; --deckCoverRatio: 3 / 2; --tileRadius: 12px; }

/* Ocean */
[data-theme="ocean"][data-mode="light"] {
  --bgPrimary: #FFFFFF; --bgSecondary: #E8F4FD; --textPrimary: #1B4F72;
  --colorPrimary: #1B4F72; --colorSecondary: #2980B9; --colorAccent: #1B4F72;
  --cardBg: #FFFFFF; --cardBgGradient: linear-gradient(135deg, #FFFFFF 0%, #E8F4FD 100%);
  --cardBackBg: linear-gradient(135deg, #E8F4FD 0%, #D4E9F7 100%);
  --cardBorder: #1B4F72; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 12px rgba(27,79,114,0.15); --cardRadius: 12px;
  --cardWordColor: #1B4F72; --cardMeaningColor: #2C3E50; --cardQAColor: #5DADE2;
  --focusRing: #1B4F72;
}
[data-theme="ocean"][data-mode="dark"] {
  --bgPrimary: #0F1721; --bgSecondary: #1A2332; --textPrimary: #D5E8F0;
  --colorPrimary: #5DADE2; --colorSecondary: #1B4F72; --colorAccent: #5DADE2;
  --cardBg: #1A2332; --cardBgGradient: linear-gradient(135deg, #1A2332 0%, #1E3A5F 100%);
  --cardBackBg: linear-gradient(135deg, #1E3A5F 0%, #234B73 100%);
  --cardBorder: #5DADE2; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 12px rgba(93,173,226,0.2); --cardRadius: 12px;
  --cardWordColor: #5DADE2; --cardMeaningColor: #D5E8F0; --cardQAColor: #85C1E9;
  --focusRing: #5DADE2;
}

/* Forest */
[data-theme="forest"][data-mode="light"] {
  --bgPrimary: #FAFAF5; --bgSecondary: #E8F5E9; --textPrimary: #1B5E20;
  --colorPrimary: #2E7D32; --colorSecondary: #66BB6A; --colorAccent: #2E7D32;
  --cardBg: #FAFAF5; --cardBgGradient: linear-gradient(135deg, #FAFAF5 0%, #E8F5E9 100%);
  --cardBackBg: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
  --cardBorder: #2E7D32; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 12px rgba(46,125,50,0.15); --cardRadius: 14px;
  --cardWordColor: #1B5E20; --cardMeaningColor: #4E342E; --cardQAColor: #66BB6A;
  --focusRing: #2E7D32;
}
[data-theme="forest"][data-mode="dark"] {
  --bgPrimary: #141F14; --bgSecondary: #1E2B1E; --textPrimary: #D7CCC8;
  --colorPrimary: #81C784; --colorSecondary: #2E7D32; --colorAccent: #81C784;
  --cardBg: #1E2B1E; --cardBgGradient: linear-gradient(135deg, #1E2B1E 0%, #2E4A2E 100%);
  --cardBackBg: linear-gradient(135deg, #2E4A2E 0%, #3A5C3A 100%);
  --cardBorder: #81C784; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 12px rgba(129,199,132,0.2); --cardRadius: 14px;
  --cardWordColor: #81C784; --cardMeaningColor: #D7CCC8; --cardQAColor: #A5D6A7;
  --focusRing: #81C784;
}

/* Classic (Rainbow) */
[data-theme="classic"][data-mode="light"] {
  --bgPrimary: #FFFFF8; --bgSecondary: #FFE0E0; --textPrimary: #D32F2F;
  --colorPrimary: #E91E63; --colorSecondary: #2196F3; --colorAccent: #E91E63;
  --cardBg: #FFFFF8;
  --cardBgGradient: linear-gradient(135deg, #FFE0E0 0%, #FFE8C0 25%, #FFFFC0 50%, #C0FFD0 75%, #D0E0FF 100%);
  --cardBackBg: linear-gradient(315deg, #FFE0E0 0%, #E0C0FF 25%, #C0E0FF 50%, #C0FFD0 75%, #FFFFC0 100%);
  --cardBorder: #FF6B6B; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 16px rgba(255,107,107,0.2); --cardRadius: 14px;
  --cardWordColor: #D32F2F; --cardMeaningColor: #1565C0; --cardQAColor: #FF9800;
  --focusRing: #E91E63;
}
[data-theme="classic"][data-mode="dark"] {
  --bgPrimary: #12121A; --bgSecondary: #2D1B2E; --textPrimary: #F5F5F7;
  --colorPrimary: #F48FB1; --colorSecondary: #81D4FA; --colorAccent: #F48FB1;
  --cardBg: #1A1A20;
  --cardBgGradient: linear-gradient(135deg, #2D1B2E 0%, #1B2D2E 25%, #1B1B2E 50%, #2E1B2D 75%, #2D2E1B 100%);
  --cardBackBg: linear-gradient(315deg, #2D1B2E 0%, #1B2E1B 25%, #2E2D1B 50%, #1B1B2E 75%, #2E1B1B 100%);
  --cardBorder: #FF8A80; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 16px rgba(255,138,128,0.25); --cardRadius: 14px;
  --cardWordColor: #FF8A80; --cardMeaningColor: #80D8FF; --cardQAColor: #FFD740;
  --focusRing: #F48FB1;
}

/* Midnight */
[data-theme="midnight"][data-mode="light"] {
  --bgPrimary: #F5F0FF; --bgSecondary: #E8DAEF; --textPrimary: #4A148C;
  --colorPrimary: #4A148C; --colorSecondary: #7E57C2; --colorAccent: #4A148C;
  --cardBg: #F5F0FF; --cardBgGradient: linear-gradient(135deg, #F5F0FF 0%, #E8DAEF 100%);
  --cardBackBg: linear-gradient(135deg, #E8DAEF 0%, #D1C4E9 100%);
  --cardBorder: #4A148C; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 16px rgba(74,20,140,0.18); --cardRadius: 16px;
  --cardWordColor: #4A148C; --cardMeaningColor: #311B92; --cardQAColor: #7E57C2;
  --focusRing: #4A148C;
}
[data-theme="midnight"][data-mode="dark"] {
  --bgPrimary: #0F0A1A; --bgSecondary: #1A1025; --textPrimary: #E8E0F0;
  --colorPrimary: #B39DDB; --colorSecondary: #4A148C; --colorAccent: #B39DDB;
  --cardBg: #1A1025; --cardBgGradient: linear-gradient(135deg, #1A1025 0%, #2D1B4E 100%);
  --cardBackBg: linear-gradient(135deg, #2D1B4E 0%, #3E2768 100%);
  --cardBorder: #B39DDB; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 16px rgba(179,157,219,0.25); --cardRadius: 16px;
  --cardWordColor: #B39DDB; --cardMeaningColor: #E8E0F0; --cardQAColor: #CE93D8;
  --focusRing: #B39DDB;
}

/* Ember */
[data-theme="ember"][data-mode="light"] {
  --bgPrimary: #FFFAF0; --bgSecondary: #FFE0B2; --textPrimary: #BF360C;
  --colorPrimary: #E65100; --colorSecondary: #FF9800; --colorAccent: #E65100;
  --cardBg: #FFFAF0; --cardBgGradient: linear-gradient(135deg, #FFFAF0 0%, #FFE0B2 100%);
  --cardBackBg: linear-gradient(135deg, #FFE0B2 0%, #FFCC80 100%);
  --cardBorder: #E65100; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 12px rgba(230,81,0,0.18); --cardRadius: 10px;
  --cardWordColor: #BF360C; --cardMeaningColor: #3E2723; --cardQAColor: #FF9800;
  --focusRing: #E65100;
}
[data-theme="ember"][data-mode="dark"] {
  --bgPrimary: #1A0F05; --bgSecondary: #2B1A0E; --textPrimary: #FFE0B2;
  --colorPrimary: #FFB74D; --colorSecondary: #E65100; --colorAccent: #FFB74D;
  --cardBg: #2B1A0E; --cardBgGradient: linear-gradient(135deg, #2B1A0E 0%, #4A2800 100%);
  --cardBackBg: linear-gradient(135deg, #4A2800 0%, #5C3500 100%);
  --cardBorder: #FFB74D; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 12px rgba(255,183,77,0.2); --cardRadius: 10px;
  --cardWordColor: #FFB74D; --cardMeaningColor: #FFE0B2; --cardQAColor: #FFD54F;
  --focusRing: #FFB74D;
}

/* Blossom */
[data-theme="blossom"][data-mode="light"] {
  --bgPrimary: #FFF5F8; --bgSecondary: #FCE4EC; --textPrimary: #AD1457;
  --colorPrimary: #C2185B; --colorSecondary: #F06292; --colorAccent: #C2185B;
  --cardBg: #FFF5F8; --cardBgGradient: linear-gradient(135deg, #FFF5F8 0%, #FCE4EC 100%);
  --cardBackBg: linear-gradient(135deg, #FCE4EC 0%, #F8BBD0 100%);
  --cardBorder: #C2185B; --cardBorderWidth: 1px;
  --cardShadow: 0 4px 14px rgba(194,24,91,0.15); --cardRadius: 18px;
  --cardWordColor: #AD1457; --cardMeaningColor: #4A148C; --cardQAColor: #F06292;
  --focusRing: #C2185B;
}
[data-theme="blossom"][data-mode="dark"] {
  --bgPrimary: #1A0F15; --bgSecondary: #2B1520; --textPrimary: #FCE4EC;
  --colorPrimary: #F48FB1; --colorSecondary: #C2185B; --colorAccent: #F48FB1;
  --cardBg: #2B1520; --cardBgGradient: linear-gradient(135deg, #2B1520 0%, #4A1A35 100%);
  --cardBackBg: linear-gradient(135deg, #4A1A35 0%, #5C2248 100%);
  --cardBorder: #F48FB1; --cardBorderWidth: 1px;
  --cardShadow: 0 4px 14px rgba(244,143,177,0.25); --cardRadius: 18px;
  --cardWordColor: #F48FB1; --cardMeaningColor: #FCE4EC; --cardQAColor: #F8BBD0;
  --focusRing: #F48FB1;
}

/* Sand */
[data-theme="sand"][data-mode="light"] {
  --bgPrimary: #FEFCF5; --bgSecondary: #F5E6CA; --textPrimary: #5D4037;
  --colorPrimary: #8D6E63; --colorSecondary: #BCAAA4; --colorAccent: #8D6E63;
  --cardBg: #FEFCF5; --cardBgGradient: linear-gradient(135deg, #FEFCF5 0%, #F5E6CA 100%);
  --cardBackBg: linear-gradient(135deg, #F5E6CA 0%, #E8D5B0 100%);
  --cardBorder: #8D6E63; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 10px rgba(141,110,99,0.18); --cardRadius: 10px;
  --cardWordColor: #5D4037; --cardMeaningColor: #3E2723; --cardQAColor: #A1887F;
  --focusRing: #8D6E63;
}
[data-theme="sand"][data-mode="dark"] {
  --bgPrimary: #1A140F; --bgSecondary: #2C2418; --textPrimary: #EFEBE9;
  --colorPrimary: #BCAAA4; --colorSecondary: #8D6E63; --colorAccent: #BCAAA4;
  --cardBg: #2C2418; --cardBgGradient: linear-gradient(135deg, #2C2418 0%, #4A3828 100%);
  --cardBackBg: linear-gradient(135deg, #4A3828 0%, #5C4A35 100%);
  --cardBorder: #BCAAA4; --cardBorderWidth: 2px;
  --cardShadow: 0 4px 10px rgba(188,170,164,0.2); --cardRadius: 10px;
  --cardWordColor: #D7CCC8; --cardMeaningColor: #EFEBE9; --cardQAColor: #D7CCC8;
  --focusRing: #BCAAA4;
}

/* Mono */
[data-theme="mono"][data-mode="light"] {
  --bgPrimary: #FFFFFF; --bgSecondary: #F5F5F5; --textPrimary: #111111;
  --colorPrimary: #333333; --colorSecondary: #777777; --colorAccent: #333333;
  --cardBg: #FFFFFF; --cardBgGradient: linear-gradient(135deg, #FFFFFF 0%, #F5F5F5 100%);
  --cardBackBg: linear-gradient(135deg, #F5F5F5 0%, #EEEEEE 100%);
  --cardBorder: #333333; --cardBorderWidth: 1px;
  --cardShadow: 0 2px 6px rgba(0,0,0,0.1); --cardRadius: 4px;
  --cardWordColor: #111111; --cardMeaningColor: #555555; --cardQAColor: #999999;
  --focusRing: #333333;
}
[data-theme="mono"][data-mode="dark"] {
  --bgPrimary: #0E0E0E; --bgSecondary: #1A1A1A; --textPrimary: #EEEEEE;
  --colorPrimary: #CCCCCC; --colorSecondary: #777777; --colorAccent: #CCCCCC;
  --cardBg: #1A1A1A; --cardBgGradient: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
  --cardBackBg: linear-gradient(135deg, #2A2A2A 0%, #333333 100%);
  --cardBorder: #CCCCCC; --cardBorderWidth: 1px;
  --cardShadow: 0 2px 6px rgba(255,255,255,0.06); --cardRadius: 4px;
  --cardWordColor: #EEEEEE; --cardMeaningColor: #AAAAAA; --cardQAColor: #888888;
  --focusRing: #CCCCCC;
}

/* Neon */
[data-theme="neon"][data-mode="light"] {
  --bgPrimary: #05050F; --bgSecondary: #1A1A2E; --textPrimary: #E0E0E0;
  --colorPrimary: #00E5FF; --colorSecondary: #E040FB; --colorAccent: #00E5FF;
  --cardBg: #0A0A1A; --cardBgGradient: linear-gradient(135deg, #0A0A1A 0%, #1A0A2E 100%);
  --cardBackBg: linear-gradient(135deg, #1A0A2E 0%, #0A1A2E 100%);
  --cardBorder: #00E5FF; --cardBorderWidth: 2px;
  --cardShadow: 0 0 20px rgba(0,229,255,0.4), 0 0 40px rgba(0,229,255,0.1); --cardRadius: 12px;
  --cardWordColor: #00E5FF; --cardMeaningColor: #E040FB; --cardQAColor: #76FF03;
  --focusRing: #00E5FF;
}
[data-theme="neon"][data-mode="dark"] {
  --bgPrimary: #020208; --bgSecondary: #0D0520; --textPrimary: #F5F5F7;
  --colorPrimary: #00E5FF; --colorSecondary: #E040FB; --colorAccent: #00E5FF;
  --cardBg: #050510; --cardBgGradient: linear-gradient(135deg, #050510 0%, #0D0520 100%);
  --cardBackBg: linear-gradient(135deg, #0D0520 0%, #050D20 100%);
  --cardBorder: #00E5FF; --cardBorderWidth: 2px;
  --cardShadow: 0 0 25px rgba(0,229,255,0.5), 0 0 50px rgba(224,64,251,0.15); --cardRadius: 12px;
  --cardWordColor: #00E5FF; --cardMeaningColor: #E040FB; --cardQAColor: #76FF03;
  --focusRing: #00E5FF;
}

/* Hacker */
/* Hacker 테마 — 카드 외부 배경은 정적 스캔라인 (GPU 친화, 성능 무부담)
 * rain canvas는 카드 내부(CardRenderer decoration)에만 한정.
 */
body[data-theme="hacker"] {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 255, 65, 0.06) 0 1px,
      transparent 1px 3px
    );
  background-attachment: fixed;
}

/* 카드 내부 rain 캔버스 — CardRenderer decoration Layer 1에 삽입되는 용도 */
.hacker-rain-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
  mix-blend-mode: screen;
}
/* 앞면은 콘텐츠 가독성을 위해 더 연하게 — 배경 질감만 유지. */
.hacker-rain-canvas.hacker-rain-front { opacity: 0.18; }

/* Reduced motion — 정적 하이라이트만 */
@media (prefers-reduced-motion: reduce) {
  .hacker-rain-canvas { display: none; }
}
[data-reduced-motion="true"] .hacker-rain-canvas { display: none; }

[data-theme="hacker"][data-mode="light"],
[data-theme="hacker"][data-mode="dark"] {
  --bgPrimary: #000000; --bgSecondary: #0A1A0A; --textPrimary: #00FF41;
  --colorPrimary: #00FF41; --colorSecondary: #008F11; --colorAccent: #00FF41;
  --cardBg: #000000; --cardBgGradient: linear-gradient(180deg, #000000 0%, #001A00 100%);
  --cardBackBg: linear-gradient(180deg, #001A00 0%, #000000 100%);
  --cardBorder: #00FF41; --cardBorderWidth: 1px;
  --cardShadow: 0 0 20px rgba(0,255,65,0.4), 0 0 40px rgba(0,255,65,0.1); --cardRadius: 4px;
  --cardWordColor: #00FF41; --cardMeaningColor: #20C20E; --cardQAColor: #00FF41;
  --focusRing: #00FF41;
  --fontFamily: 'Courier New', 'Lucida Console', monospace;
}

/* Trump */
[data-theme="trump"][data-mode="light"] {
  --bgPrimary: #FFFFF8; --bgSecondary: #FFF8E8; --textPrimary: #1B3A6B;
  --colorPrimary: #1B3A6B; --colorSecondary: #C41E3A; --colorAccent: #1B3A6B;
  --cardBg: #FFFFF8; --cardBgGradient: linear-gradient(135deg, #FFFFF8 0%, #FFF8E8 100%);
  --cardBackBg: linear-gradient(135deg, #FFF8E8 0%, #F5ECD8 100%);
  --cardBorder: #1B3A6B; --cardBorderWidth: 2px;
  --cardShadow: 0 3px 10px rgba(27,58,107,0.2); --cardRadius: 10px;
  --cardWordColor: #1B3A6B; --cardMeaningColor: #C41E3A; --cardQAColor: #B8860B;
  --focusRing: #1B3A6B;
}
[data-theme="trump"][data-mode="dark"] {
  --bgPrimary: #0F0D14; --bgSecondary: #1A1520; --textPrimary: #E0D8F0;
  --colorPrimary: #7B9FD4; --colorSecondary: #E57373; --colorAccent: #7B9FD4;
  --cardBg: #1A1520; --cardBgGradient: linear-gradient(135deg, #1A1520 0%, #2A1A30 100%);
  --cardBackBg: linear-gradient(135deg, #2A1A30 0%, #3A2540 100%);
  --cardBorder: #7B9FD4; --cardBorderWidth: 2px;
  --cardShadow: 0 3px 10px rgba(123,159,212,0.25); --cardRadius: 10px;
  --cardWordColor: #7B9FD4; --cardMeaningColor: #E57373; --cardQAColor: #FFD54F;
  --focusRing: #7B9FD4;
}

/* =========================================================================
 * 3. 이모지 → SVG 기반 공통 아이콘 클래스 (spec §3.3)
 * ========================================================================= */
/* 공용 컨테이너 — 반응형
 *   모바일(< 640):   100% - 좌우 패딩 (화면별 --space-4)
 *   태블릿(640-1023): max 720 중앙 정렬
 *   데스크탑(1024+):  max 1040 중앙 정렬
 *   ※ 폭 고정이 아니라 폭 상한만. 모바일은 뷰포트 그대로.
 */
.home, .decklist, .study, .weak, .free, .quiz, .stats, .settings, .help {
  width: 100%;
  max-width: none;
  margin: 0 auto;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .home, .decklist, .study, .weak, .free, .quiz, .stats, .settings, .help {
    max-width: 720px;
  }
}
@media (min-width: 1024px) {
  .home, .decklist, .study, .weak, .free, .quiz, .stats, .settings, .help {
    max-width: 1040px;
  }
}

.icon {
  display: inline-block;
  flex-shrink: 0;
  color: var(--iconColor);
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-md { width: var(--icon-md); height: var(--icon-md); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }

.icon-muted { color: var(--iconColorMuted); }
.icon-active { color: var(--iconColorActive); }
.icon-danger { color: var(--iconColorDanger); }
.icon-success { color: var(--iconColorSuccess); }

/* =========================================================================
 * 3.5 자동 숨김 네비게이션 (components §3.13)
 * ========================================================================= */
.app-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding-top: var(--sa-top);
  padding-left: var(--sa-left);
  padding-right: var(--sa-right);
  background: var(--bgPrimary);
  transform: translateY(0);
  opacity: 1;
  transition:
    transform var(--dur-base) var(--ease-ios),
    opacity var(--dur-base) var(--ease-ios),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.app-nav[data-hidden="true"] {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
/* 스크롤 근처 = shadow 추가, 상단 = shadow 없음 (Quiet) */
.app-nav:not([data-at-top="true"]) { box-shadow: var(--shadow-md); }
.app-nav[data-at-top="true"] { box-shadow: none; }

/* FAB (components §3.12) */
.fab {
  position: fixed;
  bottom: calc(var(--tabbar-height) + var(--sa-bottom) + var(--space-4));
  z-index: 45;
  width: 56pt;
  height: 56pt;
  border-radius: 50%;
  border: 0;
  background: var(--colorAccent);
  color: #fff;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.fab[hidden] { display: none; }
/* 위치: 왼손잡이 모드 대응 */
:root:not([data-handedness="left"]) .fab,
body:not([data-handedness="left"]) .fab { right: calc(var(--sa-right) + var(--space-4)); left: auto; }
body[data-handedness="left"] .fab { left: calc(var(--sa-left) + var(--space-4)); right: auto; }
.fab:active { transform: scale(0.94); }
.fab:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 3px; }
.fab .icon { color: #fff; }
.fab[data-scrolled-down="true"] {
  opacity: 0.4;
  transform: scale(0.94);
}

/* 탭 바 (components §3.11) — Apple/배민 네이티브 톤 */
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  height: calc(var(--tabbar-height) + var(--sa-bottom));
  padding-bottom: var(--sa-bottom);
  background: color-mix(in srgb, var(--bgPrimary) 92%, transparent);
  border-top: 1px solid var(--cardBorder);
  transition:
    transform var(--dur-base) var(--ease-ios),
    opacity var(--dur-base) var(--ease-ios);
}
.tab-bar .tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--textTertiary);
  text-decoration: none;
  min-height: 44pt;
  padding: var(--space-1) 0;
  transition:
    color var(--dur-fast) var(--ease-standard);
}
.tab-bar .tab:hover { color: var(--textSecondary); }
.tab-bar .tab[data-active="true"] {
  color: var(--colorAccent);
}
.tab-bar .tab-label {
  font-size: 10px;
  letter-spacing: -0.01em;
  font-weight: var(--fontWeightMedium);
}
.tab-bar[data-mode="mobile"] .tab-label { font-size: 10px; }
/* 데스크탑: 탭바 유지하되 옆 정렬도 가능 — 5탭 */
.tab-bar[data-mode="desktop"] {
  justify-content: center;
  gap: var(--space-4);
}

/* 몰입/전체화면 진입 중에는 nav/tab 전면 숨김 (No-Scroll 정책 병행) */
body[data-immersive="true"] .app-nav,
body[data-immersive="true"] .tab-bar,
body[data-fullscreen="true"] .app-nav,
body[data-fullscreen="true"] .tab-bar {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
body[data-immersive="true"] .tab-bar,
body[data-fullscreen="true"] .tab-bar {
  transform: translateY(100%);
}

/* =========================================================================
 * 3.6 CTA 공통 버튼 — 강조 버튼 통일 규격 (학습 평가 pill과 동일 언어)
 *   * 큰 pill (min-height 56pt, radius: pill)
 *   * floating shadow (학습 .btn-rate와 같은 공식 — deck-accent가 있으면 살짝 물듦)
 *   * 모든 모달/시트/빈상태/온보딩/세션요약/폼 제출에서 이 클래스를 그대로 사용
 * ========================================================================= */
.btn-cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 56pt;
  padding: var(--space-3) var(--space-7);
  background: var(--colorAccent);
  color: #fff;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeMD);
  font-weight: var(--fontWeightSemibold);
  letter-spacing: -0.01em;
  /* pill */
  border-radius: var(--radius-pill);
  /* floating shadow — accent가 있으면 원거리 레이어에 살짝 물듦 */
  box-shadow:
    0 6px 18px -8px color-mix(in srgb, #000 22%, transparent),
    0 12px 28px -14px color-mix(in srgb, var(--colorAccent, #000) 25%, transparent);
  transition:
    transform var(--dur-instant) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-ios),
    opacity var(--dur-fast);
}
.btn-cta:hover:not(:disabled) {
  box-shadow:
    0 8px 22px -8px color-mix(in srgb, #000 26%, transparent),
    0 14px 32px -14px color-mix(in srgb, var(--colorAccent, #000) 30%, transparent);
}
.btn-cta:active:not(:disabled) { transform: translateY(0) scale(0.96); }
.btn-cta:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.btn-cta:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 2px; }

/* danger tone — 관리 모달 등에서 확인 액션이 파괴적일 때.
 *   사용자 선호: "테마 accent 색 그대로" — 파괴적이어도 테마 DNA를 유지.
 *   (이전: var(--colorDanger)로 빨간 고정. 2026-05-09 테마 일치로 변경) */
.btn-cta.btn-cta-danger {
  background: var(--colorAccent);
  box-shadow:
    0 6px 18px -8px color-mix(in srgb, #000 22%, transparent),
    0 12px 28px -14px color-mix(in srgb, var(--colorAccent) 30%, transparent);
}
.btn-cta.btn-cta-danger:hover:not(:disabled) {
  box-shadow:
    0 8px 22px -8px color-mix(in srgb, #000 26%, transparent),
    0 14px 32px -14px color-mix(in srgb, var(--colorAccent) 35%, transparent);
}

/* 작은 변형 — 인라인 칩/리스트 내부 등 공간 제약이 있을 때. 기본은 큰 pill 유지. */
.btn-cta.btn-cta-sm {
  min-height: 40px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--fontSizeSM);
}

/* wide 변형 — 주 CTA를 은근히 강조할 때 가로 padding 소폭 확장.
   (너무 넓으면 관리 탭 같은 맥락에서 주인공 과잉 → 최소한의 무게감만 추가) */
.btn-cta.btn-cta-wide {
  padding-left: var(--space-7, 28px);
  padding-right: var(--space-7, 28px);
  min-width: 140px;
}

/* outline 변형 — 강조 액션과 같은 폭/높이지만 보조 성격. (현재 미사용이지만 modifier는 유지) */
.btn-cta.btn-cta-outline {
  background: transparent;
  color: var(--colorAccent);
  border: 1.5pt solid var(--colorAccent);
  box-shadow:
    0 4px 14px -8px color-mix(in srgb, #000 18%, transparent),
    0 10px 24px -16px color-mix(in srgb, var(--colorAccent, #000) 18%, transparent);
}
.btn-cta.btn-cta-outline:hover:not(:disabled) {
  background: color-mix(in srgb, var(--colorAccent) 8%, transparent);
  box-shadow:
    0 6px 18px -8px color-mix(in srgb, #000 22%, transparent),
    0 12px 28px -14px color-mix(in srgb, var(--colorAccent, #000) 22%, transparent);
}

/* =========================================================================
 * 3.7 섹션 공통
 * ========================================================================= */
.section-title {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  margin: 0 0 var(--space-3);
  font-weight: var(--fontWeightMedium);
}

/* =========================================================================
 * 3.8 홈 화면 (components §3.0)
 * ========================================================================= */
/* 홈 — 구조 토큰 기반
 *  모든 값은 --heroScale / --sectionGap / --contentDensity / --heroAlign / --titleWeight 에서 파생.
 *  PWA와 web은 contentDensity·heroScale의 곱셈 배율만 달라진다.
 */
.home {
  padding: calc(var(--space-4) * var(--contentDensity));
  display: flex;
  flex-direction: column;
  gap: var(--sectionGap);
  text-align: var(--heroAlign);
}
.home-hero {
  padding: calc(var(--space-6) * var(--contentDensity)) 0 var(--space-2);
}
.home-greeting {
  margin: 0;
  font-size: calc(28px * var(--heroScale));
  font-weight: var(--titleWeight);
  color: var(--textPrimary);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.home-date {
  margin: var(--space-2) 0 0;
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}

/* 섹션 제목도 테마 토큰 반영 */
.section-title {
  font-size: var(--sectionTitleSize);
  font-weight: var(--sectionTitleWeight);
  text-transform: var(--sectionTitleCase);
  letter-spacing: var(--sectionTitleSpacing);
  color: var(--textSecondary);
  margin: 0 0 var(--space-3);
}

/* 웹 — 구조 토큰의 배율만 더 큼. 레이아웃은 테마가 이미 결정. */
[data-layout="web"] .home {
  padding: calc(var(--space-8) * var(--contentDensity)) calc(var(--space-6) * var(--contentDensity));
  gap: calc(var(--sectionGap) * 1.2);
}
[data-layout="web"] .home-hero { padding: calc(var(--space-10) * var(--contentDensity)) 0 var(--space-6); }
[data-layout="web"] .home-greeting { font-size: calc(48px * var(--heroScale)); letter-spacing: -0.03em; }
[data-layout="web"] .home-date { font-size: var(--fontSizeMD); margin-top: var(--space-3); }

.home-master .master-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.master-info { text-align: left; }
.master-headline {
  margin: 0;
  font-size: var(--fontSizeLG);
  font-weight: var(--fontWeightMedium);
  color: var(--textPrimary);
}
.master-count {
  font-size: 28px;
  font-weight: var(--fontWeightSemibold);
  color: var(--textPrimary);
  margin-right: var(--space-1);
}
.master-unit { color: var(--textSecondary); font-size: var(--fontSizeSM); }
.master-meta { font-size: var(--fontSizeSM); color: var(--textSecondary); }
.master-progress-bar {
  height: 4px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
/* 오늘의 학습 카드 하단 — CTA 링크 또는 학습 완료 메시지 */
.master-footer {
  margin: var(--space-2) 0 0;
  font-size: var(--fontSizeSM);
}
.master-footer.master-done { color: var(--textSecondary); }
.master-cta-link { font-weight: var(--fontWeightMedium); }

/* 성취 하이라이트 — 배치는 테마 토큰(--achievementsLayout)이 결정.
 *   기본(가로) 구성은 4칼럼 균등 flex로 브라우저 폭에 유연하게 맞춘다.
 *   컨테이너가 좁아지면 자동으로 2×2 그리드처럼 줄바꿈되고, 가로 스크롤은 생기지 않는다. */
.home-achievements .achievement-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tileGap);
  padding-bottom: var(--space-2);
}
[data-theme="mono"]    .home-achievements .achievement-tiles,
[data-theme="hacker"]  .home-achievements .achievement-tiles,
[data-theme="classic"] .home-achievements .achievement-tiles,
[data-theme="midnight"] .home-achievements .achievement-tiles {
  /* 토큰으로 배치 완전 교체 (hacker/mono=grid, midnight/classic=list) */
}
[data-theme="mono"]   .home-achievements .achievement-tiles { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; }
[data-theme="hacker"] .home-achievements .achievement-tiles { display: flex; flex-direction: column; overflow: visible; gap: 0; }
[data-theme="classic"] .home-achievements .achievement-tiles,
[data-theme="midnight"] .home-achievements .achievement-tiles { display: flex; flex-direction: column; overflow: visible; gap: var(--space-2); }

.achievement-tile {
  /* 유연 분배 — 4개 타일이 컨테이너 폭을 균등 분할. 좁아지면 2×2로 자연 wrap.
   *   basis 140pt를 최소 기준으로 두고 grow/shrink 둘 다 허용. */
  flex: 1 1 140pt;
  min-width: 140pt;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--tilePadding);
  background: var(--tileBg);
  border-radius: var(--tileRadius);
  border: var(--tileBorder) solid var(--cardBorder);
  /* <a>로 렌더될 때 기본 링크 스타일 제거 */
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--dur-instant) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.achievement-tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.achievement-tile:active { transform: scale(0.99); }
.achievement-tile:focus-visible {
  outline: 2px solid var(--focusRing);
  outline-offset: 2px;
}
[data-theme="hacker"] .achievement-tile { flex: initial; min-width: 0; border-bottom: 1px solid var(--cardBorder); padding: var(--space-2) 0; }
[data-theme="mono"]   .achievement-tile { flex: initial; min-width: 0; padding: var(--space-3); background: var(--bgSecondary); }
[data-theme="classic"] .achievement-tile,
[data-theme="midnight"] .achievement-tile { flex: initial; min-width: 0; padding: var(--space-3) 0; border-bottom: 1px solid var(--cardBorder); }
.achievement-dot { display: none; }
.achievement-icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  color: var(--colorAccent);
  margin-bottom: var(--space-2);
}
.achievement-locked .achievement-icon { color: var(--textTertiary); }
.achievement-label {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  letter-spacing: -0.01em;
}
.achievement-value {
  font-size: 22px;
  font-weight: var(--fontWeightSemibold);
  color: var(--textPrimary);
  letter-spacing: -0.02em;
}
.achievement-progress {
  margin-top: var(--space-2);
  height: 2px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.achievement-progress span {
  display: block;
  height: 100%;
  background: var(--colorAccent);
  transition: width var(--dur-base) var(--ease-ios);
}
.achievement-locked .achievement-value,
.achievement-locked .achievement-label {
  color: var(--textTertiary);
}
.achievement-unlocked .achievement-value { color: var(--colorAccent); }
.master-progress-bar {
  position: relative;
  height: 6px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.master-progress-fill {
  display: block;
  height: 100%;
  background: var(--colorAccent);
  transition: width var(--dur-base) var(--ease-ios);
}
.master-meta {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.master-cta { align-self: stretch; }

.home-recent-wrap { position: relative; }
.home-recent-scroll {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* 구 Edge */
}
.home-recent-scroll::-webkit-scrollbar { display: none; } /* WebKit */
.home-recent .deck-tiles {
  display: flex;
  gap: var(--tileGap);
  padding-bottom: var(--space-1);
}
.home-recent-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  color: var(--textPrimary);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  z-index: 1;
}
.home-recent-arrow[hidden] { display: none; }
.home-recent-arrow-left  { left: -4px; }
.home-recent-arrow-right { right: -4px; }
.home-recent-arrow svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.deck-tile {
  flex: 0 0 128pt;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--tilePadding);
  background: var(--cardBg);
  border: var(--tileBorder) solid var(--cardBorder);
  border-radius: var(--tileRadius);
  text-decoration: none;
  color: var(--textPrimary);
  transition: transform var(--dur-instant) var(--ease-standard);
}
/* Hacker: 타일 대신 라인 리스트 */
[data-theme="hacker"] .home-recent-scroll { overflow: visible; }
[data-theme="hacker"] .home-recent-arrow { display: none !important; }
[data-theme="hacker"] .home-recent .deck-tiles { flex-direction: column; gap: 0; overflow: visible; }
[data-theme="hacker"] .deck-tile { flex: initial; padding: var(--space-2) 0; border: 0; border-bottom: 1px solid var(--cardBorder); border-radius: 0; background: transparent; }
[data-theme="hacker"] .deck-tile-cover { height: 0; display: none; }
.deck-tile:active { transform: scale(0.97); }
.deck-tile-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72pt;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--colorAccent), var(--colorPrimary));
  color: #fff;
  font-size: var(--fontSizeLG);
  font-weight: var(--fontWeightSemibold);
  background-size: cover;
  background-position: center;
}
.deck-tile-cover.has-cover { background-color: transparent; }
.deck-tile-cover.has-cover span { display: none; }
.deck-tile-name {
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.deck-tile-meta {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}

/* 이번 주 스파크라인 — 막대 + 라인차트 오버레이
 * 막대와 라인 모두 같은 plot 영역에 그려지고, 요일 라벨은 그 아래로 음수 오프셋. */
.home-week-spark {
  position: relative;
  height: 64px;
  /* dow 라벨이 spark 박스 바깥 아래로 돌출 — 섹션 전체 레이아웃 간섭 방지용 마진 */
  margin: var(--space-2) 0 calc(var(--space-5) + var(--space-1));
}
.home-week-bars {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-2);
  align-items: end;
  z-index: 1;
}
.home-week-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  height: 100%;
}
/* 요일명은 plot 영역 바깥 아래로 */
.home-week-col .home-week-dow {
  position: absolute;
  bottom: calc(-1 * var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* 라인 SVG는 막대와 같은 plot 영역에 오버레이 */
.home-week-trend {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.home-week-trend polyline {
  fill: none;
  /* 막대(accent)와 구분되는 보조 색 — mono에 가까운 강조 */
  stroke: var(--textPrimary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.65;
}
/* dots 레이어 — trend와 동일 영역, SVG 아닌 DOM div로 렌더 (타원 왜곡 방지) */
.home-week-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.home-week-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--cardBg);
  border: 1.5px solid var(--textPrimary);
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0.85;
}
.home-week-dot.is-today {
  background: var(--textPrimary);
  border-color: var(--textPrimary);
  opacity: 1;
}
.home-week-bar {
  width: 100%;
  min-height: 2px;
  height: var(--h, 0%);
  background: var(--bgSecondary);       /* 스택 세그먼트로 채우므로 배경은 트랙 역할 */
  border-radius: var(--radius-sm);
  transition: height var(--dur-base) var(--ease-ios);
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;       /* 복습(아래) → 신규(위) 스택 */
}
.home-week-bar.is-empty {
  min-height: 2px;
  height: 2px;
  background: var(--bgSecondary);
}
.home-week-bar.is-today {
  outline: 2px solid var(--colorAccent);
  outline-offset: 1px;
}
/* 막대 내부 스택 세그먼트 — 신규 vs 복습 색 구분 */
.trend-seg { display: block; width: 100%; }
.trend-seg-review { background: color-mix(in srgb, var(--colorAccent) 50%, var(--bgSecondary)); }
.trend-seg-new    { background: var(--colorAccent); }
.home-week-col.is-today-col .home-week-dow { color: var(--colorAccent); font-weight: var(--fontWeightMedium); }
.home-week-dow {
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
  line-height: 1;
  white-space: nowrap;
}

/* (공용 .trend-labels-dense 정의 — 실제 적용은 위의 .stats-trend-chart와 .stats-daily-bars 각자 override에서) */

.home-week-line {
  margin: 0;
  font-size: var(--fontSizeMD);
  color: var(--textPrimary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
}
.home-week-sep { color: var(--textTertiary); }
.home-week-total { font-weight: var(--fontWeightSemibold); }
.home-streak, .home-cum { font-weight: var(--fontWeightMedium); }

/* 지난주 대비 추이 뱃지 — 색상·아이콘만으로 방향 전달(원칙 1 Quiet) */
.home-delta {
  display: inline-block;
  margin-left: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  font-size: var(--fontSizeXS);
  font-weight: var(--fontWeightMedium);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.home-delta-up   { color: var(--colorSuccess); background: color-mix(in srgb, var(--colorSuccess) 10%, transparent); }
.home-delta-down { color: var(--textTertiary); background: color-mix(in srgb, var(--textTertiary) 12%, transparent); }

/* 공지 카드 (§3.0) — hero 아래. 최대 1건만 노출, 원칙 1 Quiet. */
.home-announcement {
  margin-top: var(--space-3);
}
.announce-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--colorAccent) 8%, var(--bgPrimary));
  border: 1px solid color-mix(in srgb, var(--colorAccent) 20%, var(--cardBorder));
  border-radius: var(--radius-md);
  transition:
    background var(--dur-base) var(--ease-ios),
    border-color var(--dur-base) var(--ease-ios);
}
.announce-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.announce-title {
  margin: 0;
  font-size: var(--fontSizeMD);
  font-weight: var(--fontWeightMedium);
  color: var(--textPrimary);
  line-height: 1.35;
}
.announce-desc {
  margin: 0;
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.announce-cta {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--colorAccent);
  color: #fff;
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.announce-cta:hover { opacity: 0.85; }
.announce-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--textSecondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}
.announce-close:hover {
  background: var(--bgSecondary);
  color: var(--textPrimary);
}
.announce-close svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* 성취 타일 — 오늘 막 돌파했을 때 1회성 glow.
 * transform 없이 box-shadow만 써서 레이아웃 안정성 유지. */
@keyframes achievementJustEarned {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--colorAccent) 50%, transparent); }
  60%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--colorAccent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--colorAccent) 0%, transparent); }
}
.achievement-just-earned {
  animation: achievementJustEarned 1.6s var(--ease-ios) 1;
}
@media (prefers-reduced-motion: reduce) {
  .achievement-just-earned { animation: none; }
}

/* 이번 주 요약 — 스파크라인이 이미 시각적 hero 역할이므로 텍스트 줄은 모든 테마에서
 * 균일한 본문 크기/한 줄 레이아웃으로 유지 (이전의 --weeklyStyle=hero 승격 규칙 제거, v620v) */
.home-link {
  display: inline-block;
  margin-top: var(--space-2);
  color: var(--colorAccent);
  font-size: var(--fontSizeSM);
  text-decoration: none;
}
.home-link:hover { text-decoration: underline; }

/* =========================================================================
 * 3.82 덱 목록 (components §3.2 — 라지 뷰 P0)
 * ========================================================================= */
.decklist {
  padding: calc(var(--space-4) * var(--contentDensity));
  display: flex;
  flex-direction: column;
  gap: calc(var(--sectionGap) * 0.5);
}
.decklist-header { padding-top: var(--space-2); display: flex; align-items: center; justify-content: space-between; }
.decklist-title {
  margin: 0;
  font-size: calc(24px * var(--heroScale));
  font-weight: var(--titleWeight);
  letter-spacing: -0.01em;
}
.decklist-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.decklist-hint { color: var(--textSecondary); font-size: var(--fontSizeSM); }

.deck-large {
  display: block;
  color: var(--textPrimary);
  text-decoration: none;
  transition: transform var(--dur-instant) var(--ease-standard);
}
.deck-large:active { transform: scale(0.99); }
.deck-large-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: var(--tilePadding);
  aspect-ratio: var(--deckCoverRatio);
  border-radius: var(--tileRadius);
  background: linear-gradient(135deg, var(--colorAccent), var(--colorPrimary));
  color: #fff;
  overflow: hidden;
}
/* Hacker: 덱 라지도 터미널 라인 */
[data-theme="hacker"] .deck-large-cover {
  aspect-ratio: auto;
  padding: var(--space-2) 0;
  border-radius: 0;
  background: transparent;
  color: var(--colorAccent);
  border-bottom: 1px solid var(--cardBorder);
  align-items: center;
}
[data-theme="hacker"] .deck-large-cover::before { content: '> '; color: var(--colorSecondary); font-family: var(--fontFamilyMono); }
[data-theme="hacker"] .deck-large-cover-name { text-shadow: none; }
[data-theme="hacker"] .deck-large-fill { background: var(--colorAccent); }
.deck-large-cover-name {
  position: relative;
  z-index: 2;
  font-size: var(--fontSizeLG);
  font-weight: var(--fontWeightSemibold);
  letter-spacing: -0.01em;
  line-height: 1.2;
  max-width: 85%;
  word-break: keep-all;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.deck-large-fill {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.85);
  transition: width var(--dur-base) var(--ease-ios);
}
.deck-large-body {
  padding: var(--space-2) var(--space-1);
}
.deck-large-meta {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
/* 덱 라지 그리드 — 기본 PWA = 1열, 태블릿 폭만 올라가면 2열. 웹은 별도로 3열 + 커버 확대 */
.decklist-body[data-view="large"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
@media (min-width: 720px) {
  [data-layout="pwa"] .decklist-body[data-view="large"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}
[data-layout="web"] .decklist-body[data-view="large"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}
[data-layout="web"] .deck-large-cover { aspect-ratio: 4 / 3; padding: var(--space-5); }
[data-layout="web"] .deck-large-cover-name { font-size: var(--fontSizeXL); }
.deck-large-name {
  margin: 0 0 var(--space-1);
  font-size: var(--fontSizeLG);
  font-weight: var(--fontWeightMedium);
}
.deck-large-meta {
  margin: 0 0 var(--space-3);
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.deck-large-progress {
  height: 4px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.deck-large-progress .deck-large-fill {
  display: block;
  height: 100%;
  background: var(--colorAccent);
  transition: width var(--dur-base) var(--ease-ios);
}

/* 덱 목록 상단 "오늘 학습 진도 + 전체 학습 시작" 박스
 * - 아래 덱 카드들과 같은 좌우 폭을 쓰도록 border/shadow/padding 제거
 * - 구분은 배경이 아니라 간격(gap)으로 처리 */
.decklist-master .master-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* 뷰 전환 버튼 */
.decklist-header { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-2); }
.decklist-view-switch {
  display: inline-flex;
  gap: 0;
  background: var(--bgSecondary);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.view-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-1) var(--space-2);
  min-width: 32px;
  height: 32px;
  color: var(--textSecondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.view-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.view-btn[data-active="true"] {
  background: var(--cardBg);
  color: var(--colorAccent);
  box-shadow: var(--shadow-sm);
}

/* ===== 덱 카드 공통 — 커버 이미지 · 상태 배지 · 다음 복습 · 기타 배지 ===== */

/* 덱 커버가 있을 때 cover div 전체에 배경 이미지 */
.deck-thumb-cover[style*="background-image"],
.deck-list-cover[style*="background-image"],
.deck-large-cover[style*="background-image"] {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 라지 뷰 커버 — 그라디언트 오버레이는 pseudo로 분리해서 인라인 background-image와 충돌 방지 */
.deck-large.has-cover .deck-large-cover::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15), rgba(0,0,0,0.65));
  pointer-events: none;
  z-index: 1;
}
.deck-large.has-cover .deck-large-cover-name { text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
/* <img>로 커버 이미지를 자식으로 렌더 — CSS .deck-large-fill 충돌 회피 겸용 */
.deck-large-cover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.deck-large.has-cover .deck-large-cover::before { z-index: 1; }
.deck-list-cover.has-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }
.deck-list-cover.has-cover span { display: none; }
.deck-thumb.has-cover .deck-thumb-cover { background-size: cover; background-position: center; background-repeat: no-repeat; }
.deck-thumb.has-cover .deck-thumb-cover span { display: none; }

/* 상태 배지 */
.deck-status {
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fontWeightMedium);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
.deck-status-empty     { background: color-mix(in srgb, var(--textTertiary) 20%, transparent); color: var(--textTertiary); }
.deck-status-waiting   { background: color-mix(in srgb, var(--colorWarning) 15%, transparent); color: var(--colorWarning); }
.deck-status-scheduled { background: color-mix(in srgb, var(--colorAccent) 15%, transparent); color: var(--colorAccent); }
.deck-status-complete  { background: color-mix(in srgb, var(--colorSuccess) 15%, transparent); color: var(--colorSuccess); }
.deck-status-due       { background: color-mix(in srgb, var(--colorAccent) 15%, transparent); color: var(--colorAccent); }
/* 관리 탭 상태 — 학습 상태와 다른 3-종 라이프사이클 (활성/초안/보관) */
.deck-status-manage-active   { background: color-mix(in srgb, var(--colorSuccess) 15%, transparent); color: var(--colorSuccess); }
.deck-status-manage-draft    { background: color-mix(in srgb, var(--colorWarning) 15%, transparent); color: var(--colorWarning); }
.deck-status-manage-archived { background: color-mix(in srgb, var(--textTertiary) 20%, transparent); color: var(--textTertiary); }

/* 숙달률 pill — 배경은 accent 15% 베이스, 그 위로 .deck-mastery-fill이 --mastery-pct 만큼 채움.
 *   상태 pill과 같은 높이/반지름/폰트 크기 유지, 내부 수치와 "숙달" 라벨은 항상 읽기 가능.
 *   mix-blend-mode 없이 z-index로 라벨을 fill 위에 띄운다. */
.deck-mastery-pill {
  position: relative;
  display: inline-block;
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fontWeightMedium);
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
  background: color-mix(in srgb, var(--colorAccent) 12%, transparent);
  color: var(--colorAccent);
  overflow: hidden;
  isolation: isolate;
}
.deck-mastery-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--mastery-pct, 0%);
  background: color-mix(in srgb, var(--colorAccent) 28%, transparent);
  z-index: 0;
  transition: width var(--dur-base) var(--ease-standard);
}
.deck-mastery-label {
  position: relative;
  z-index: 1;
}

/* 다음 복습 텍스트 색 — 상황별 */
.deck-next-due { font-size: 11px; font-weight: var(--fontWeightMedium); white-space: nowrap; }
.deck-next-due-overdue   { color: var(--colorError); }
.deck-next-due-scheduled { color: var(--colorAccent); }
.deck-next-due-tomorrow  { color: var(--textSecondary); }

/* 작은 배지 아이콘 (난이도 · FSRS 튜닝) */
.deck-badge-icon {
  display: inline-block;
  vertical-align: middle;
  color: var(--textSecondary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* 투명 원 (테두리 + 아이콘) — 테마 토큰 기반
 *   --chipAccent: inline style로 주입되는 강조색. 난이도별/기능별 다른 색.
 *   크기·두께는 기존 텍스트 배지(.deck-badge)와 동일 높이로 맞춰 덱 이름 옆에서 일관성 확보. */
.deck-badge-chip {
  --chipAccent: var(--colorAccent);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--chipAccent) 55%, transparent);
  color: var(--chipAccent);
  vertical-align: middle;
  transition: border-color var(--dur-instant) var(--ease-standard),
              background var(--dur-instant) var(--ease-standard);
}
.deck-badge-chip .deck-badge-icon {
  color: inherit;
  stroke: currentColor;
  fill: none;
}
.deck-badge-chip:hover {
  border-color: var(--chipAccent);
  background: color-mix(in srgb, var(--chipAccent) 10%, transparent);
}
.deck-badge-chip-tuned { --chipAccent: var(--colorSuccess); }

/* 커스텀 툴팁 (data-tip) — 즉시 표시, 작고 깔끔 */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  background: var(--cardBg);
  color: var(--textPrimary);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-instant) var(--ease-standard);
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
[data-tip]:hover::after { opacity: 1; }
.deck-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  background: color-mix(in srgb, var(--textTertiary) 15%, transparent);
  color: var(--textSecondary);
  vertical-align: middle;
}
.deck-badge-test { background: color-mix(in srgb, var(--colorWarning) 20%, transparent); color: var(--colorWarning); }

/* Large 뷰 — 배지 영역 */
.deck-large-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-1); }

/* compact dot 상태별 색 — 탭별 "주색 하나 + 톤 단계"
 *   학습탭 주색 = --colorAccent (파랑). 진행중=풀톤, 완료=중간톤, 대기중=옅음.
 *   관리탭 주색 = --colorSuccess (초록). active=풀톤, draft=중간톤, archived=옅음.
 *   톤 단계는 opacity가 아닌 color-mix로 배경과 섞어 다크/라이트 테마에서 자연스럽게 적응.
 */
/* 학습탭 */
.deck-compact-dot-empty     { background: color-mix(in srgb, var(--textTertiary) 40%, var(--bgPrimary)); }
.deck-compact-dot-waiting   { background: color-mix(in srgb, var(--colorAccent) 25%, var(--bgPrimary)); } /* 대기중: 옅음 */
.deck-compact-dot-scheduled { background: color-mix(in srgb, var(--colorAccent) 55%, var(--bgPrimary)); } /* 예정: 중간 */
.deck-compact-dot-complete  { background: color-mix(in srgb, var(--colorAccent) 55%, var(--bgPrimary)); } /* 완료: 중간 */
.deck-compact-dot-due       { background: var(--colorAccent); }                                          /* 진행중: 풀톤 */
/* 관리탭 */
.deck-compact-dot-manage-active   { background: var(--colorSuccess); }
.deck-compact-dot-manage-draft    { background: color-mix(in srgb, var(--colorSuccess) 55%, var(--bgPrimary)); }
.deck-compact-dot-manage-archived { background: color-mix(in srgb, var(--colorSuccess) 25%, var(--bgPrimary)); }

/* 전체 숙달 진행률 상단 요약 */
.decklist-mastery {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--tileBg);
  border: var(--tileBorder) solid var(--cardBorder);
  border-radius: var(--tileRadius);
}
.decklist-mastery-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.decklist-mastery-label { font-size: var(--fontSizeSM); color: var(--textSecondary); }
.decklist-mastery-pct {
  font-size: var(--fontSizeLG);
  font-weight: var(--fontWeightSemibold);
  color: var(--colorAccent);
  font-variant-numeric: tabular-nums;
}
.decklist-mastery-count {
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.decklist-mastery-bar {
  height: 6px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.decklist-mastery-fill {
  display: block;
  height: 100%;
  background: var(--colorSuccess);
  transition: width var(--dur-base) var(--ease-ios);
}

/* 덱 목록 툴바 (정렬 드롭다운) */
.decklist-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.decklist-sort { position: relative; }
/* 필터 드롭다운 + 카운터 배지를 한 묶음으로 (관리 탭 전용) */
.decklist-filter {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.decklist-filter .decklist-count-badge { margin-left: 0; }
/* 필터 팝업 내부 체크박스 — 시트와 동일 .check-row 패턴 (통일) */
.decklist-filter-check { padding: var(--space-1) var(--space-2); }
.decklist-filter-check:hover { background: var(--bgSecondary); }
/* 태그 리스트 — 많으면 스크롤 (스크롤바 숨김: 휠/터치 스크롤은 그대로 동작) */
.decklist-filter-tags-list {
  display: flex;
  flex-direction: column;
  max-height: 200px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* 구 Edge/IE */
}
.decklist-filter-tags-list::-webkit-scrollbar { display: none; } /* WebKit (Chrome, Safari) */
.decklist-filter-tag-count {
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
  margin-left: var(--space-1);
}
/* 공통 툴바 컨트롤 높이 + pill 라운딩 — 통계탭 "모든 덱" 필터와 동일 톤 */
.decklist-filter-btn,
.decklist-sort-btn,
.decklist-search-input {
  height: 34px;
  box-sizing: border-box;
  border-radius: var(--radius-pill);
}
.decklist-filter-btn {
  appearance: none;
  background: var(--bgPrimary);
  border: 1px solid var(--cardBorder);
  color: var(--textPrimary);
  padding: 0 var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fontSizeSM);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: border-color var(--dur-instant) var(--ease-standard), color var(--dur-instant) var(--ease-standard);
}
.decklist-filter-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.decklist-filter-btn[aria-expanded="true"] {
  border-color: var(--colorAccent);
  color: var(--colorAccent);
  background: rgba(10, 132, 255, 0.08);
}
.decklist-filter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--colorAccent);
  display: inline-block;
}
.decklist-filter-pop {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 20;
  min-width: 200px;
  padding: var(--space-2);
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transform-origin: top left;
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.decklist-filter-pop[data-open="false"] {
  opacity: 0;
  transform: translateY(-4px) scaleY(0.95);
  pointer-events: none;
}
.decklist-filter-pop[data-open="true"] { opacity: 1; transform: translateY(0) scaleY(1); }
.decklist-filter-group { display: flex; flex-direction: column; gap: var(--space-1); }
.decklist-filter-group-label {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 2px;
}
.decklist-filter-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fontSizeSM);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-xs);
  cursor: pointer;
}
.decklist-filter-item:hover { background: var(--bgSecondary); }
.decklist-filter-item input[type="checkbox"] {
  margin: 0;
  accent-color: var(--colorAccent);
  cursor: pointer;
}
.decklist-filter-actions { border-top: 1px solid var(--cardBorder); padding-top: var(--space-2); }
.decklist-filter-reset {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-1) var(--space-2);
  color: var(--textSecondary);
  font-size: var(--fontSizeXS);
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-xs);
}
.decklist-filter-reset:hover { background: var(--bgSecondary); color: var(--textPrimary); }

/* 검색 박스 (관리 탭 전용) */
.decklist-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  max-width: 320px;
  margin-left: auto;
}
.decklist-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--space-4);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-pill);
  background: var(--bgPrimary);
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
  outline: none;
  transition: border-color var(--dur-instant) var(--ease-standard);
}
.decklist-search-input::placeholder { color: var(--textTertiary); }
.decklist-search-input:focus { border-color: var(--colorAccent); }
.decklist-count-badge {
  flex-shrink: 0;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  padding: 0 var(--space-2);
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  height: 22px;
  line-height: 22px;
  display: inline-flex;
  align-items: center;
}
.decklist-sort-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bgPrimary);
  color: var(--textPrimary);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-pill);
  padding: 0 var(--space-4);
  font-size: var(--fontSizeSM);
  cursor: pointer;
  transition: border-color var(--dur-instant) var(--ease-standard), color var(--dur-instant) var(--ease-standard);
}
.decklist-sort-btn svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.decklist-sort-btn[aria-expanded="true"] {
  color: var(--colorAccent);
  border-color: var(--colorAccent);
  background: rgba(10, 132, 255, 0.08);
}
.decklist-sort-pop {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 20;
  min-width: 160px;
  padding: var(--space-2);
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 2px;
  transform-origin: top left;
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.decklist-sort-pop[data-open="false"] {
  opacity: 0;
  transform: translateY(-6px) scaleY(0.98);
  pointer-events: none;
}
.decklist-sort-pop[data-open="true"] { opacity: 1; transform: translateY(0) scaleY(1); }
.decklist-sort-item {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}
.decklist-sort-item:hover { background: var(--bgSecondary); }
.decklist-sort-item[data-active="true"] { color: var(--colorAccent); font-weight: var(--fontWeightMedium); }
.decklist-sort-item-label { flex: 1; }
.decklist-sort-item-dir {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  display: inline-block;
  /* stroke는 inline SVG의 stroke="currentColor"가 받음 */
  color: var(--textTertiary);
  opacity: 0.55;
}
.decklist-sort-item[data-active="true"] .decklist-sort-item-dir {
  color: var(--colorAccent);
  opacity: 1;
}

/* 빈 상태 CTA */
.decklist-empty { text-align: center; padding: var(--space-10) var(--space-4); }
.decklist-empty-msg { font-size: var(--fontSizeLG); margin: 0 0 var(--space-2); }
.decklist-empty-sub { font-size: var(--fontSizeSM); color: var(--textSecondary); margin: 0 0 var(--space-4); }
.decklist-empty-cta { display: inline-block; }

/* 썸네일 뷰 (grid) */
.decklist-body[data-view="thumb"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-3);
}
.deck-thumb {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-decoration: none;
  color: var(--textPrimary);
  background: var(--cardBg);
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform var(--dur-instant) var(--ease-standard);
}
.deck-thumb:active { transform: scale(0.98); }
.deck-thumb-cover {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--colorAccent), var(--colorPrimary));
  color: #fff;
  font-size: 28px;
  font-weight: var(--fontWeightSemibold);
  position: relative;
}
.deck-thumb-strip {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.7);
  transition: width var(--dur-base) var(--ease-ios);
}
.deck-thumb-name { padding: var(--space-2) var(--space-2) 0; font-size: var(--fontSizeSM); font-weight: var(--fontWeightMedium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-thumb-meta { padding: 0 var(--space-2) var(--space-2); font-size: var(--fontSizeXS); color: var(--textSecondary); }

/* 리스트 뷰 */
.decklist-body[data-view="list"] {
  display: flex;
  flex-direction: column;
}
.deck-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--bgSecondary);
  text-decoration: none;
  color: var(--textPrimary);
  transition: background var(--dur-fast) var(--ease-standard);
}
.deck-list-row:hover { background: var(--bgSecondary); }
.deck-list-cover {
  width: 56px; height: 56px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--colorAccent), var(--colorPrimary));
  color: #fff;
  font-size: var(--fontSizeLG);
  font-weight: var(--fontWeightSemibold);
  flex-shrink: 0;
}
.deck-list-body { flex: 1; min-width: 0; }
.deck-list-name { font-size: var(--fontSizeBase); font-weight: var(--fontWeightMedium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-list-meta { font-size: var(--fontSizeXS); color: var(--textSecondary); }

/* 메타 pill — 덱 카드 메타 정보(장수·숙달도·기한 등)를 하나의 pill로 묶음.
 *   토큰 사이는 .deck-meta-sep(·)로 구분. */
.deck-meta-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--bgSecondary);
  color: var(--textSecondary);
  border-radius: var(--radius-pill);
  font-size: var(--fontSizeXS);
  line-height: 1.4;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deck-meta-pill > * { flex-shrink: 0; }
.deck-meta-sep {
  color: var(--textTertiary);
  opacity: 0.6;
  margin: 0 2px;
}
/* 메타 pill 내부의 기존 배지들은 배경을 제거해 pill과 섞이게 (자체 배경은 상태 배지만 유지) */
.deck-meta-pill .deck-next-due { background: transparent; padding: 0; }
.deck-meta-pill .deck-status { background: transparent; padding: 0; }
.deck-list-progress { font-size: var(--fontSizeSM); color: var(--colorAccent); font-weight: var(--fontWeightMedium); }
.deck-list-chev { color: var(--textTertiary); font-size: var(--fontSizeLG); }

/* 콤팩트 뷰 */
.decklist-body[data-view="compact"] {
  display: flex;
  flex-direction: column;
}
.deck-compact-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1px solid var(--bgSecondary);
  text-decoration: none;
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
}
.deck-compact-row:hover { background: var(--bgSecondary); }
.deck-compact-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  /* background는 상태별 .deck-compact-dot-* / .deck-compact-dot-manage-* 클래스가 결정 */
}
.deck-compact-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-compact-pct { color: var(--textSecondary); font-size: var(--fontSizeXS); }

/* .decklist-empty 규칙은 상단 (뷰 스위치 근처)에 통합 — CTA 버튼 포함 */

/* =========================================================================
 * 3.81 도움말 탭 (components §3.5)
 * ========================================================================= */
.help { padding: calc(var(--space-4) * var(--contentDensity)); display: flex; flex-direction: column; gap: calc(var(--sectionGap) * 0.5); }
.help-title { margin: 0; font-size: calc(24px * var(--heroScale)); font-weight: var(--titleWeight); letter-spacing: -0.01em; }
.help-section { display: flex; flex-direction: column; gap: var(--space-2); }
.help-dim { color: var(--textSecondary); font-size: var(--fontSizeSM); margin: 0; }

.help-faq-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.help-faq-row {
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--cardBg);
}
.help-faq-btn {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  text-align: left;
}
.help-faq-btn:hover { background: var(--bgSecondary); }
.help-faq-arrow { color: var(--textTertiary); transition: transform var(--dur-fast) var(--ease-standard); }
.help-faq-btn[aria-expanded="true"] .help-faq-arrow { transform: rotate(90deg); }
.help-faq-body {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.help-faq-body p { margin: 0; }
.help-version { color: var(--textTertiary); font-size: var(--fontSizeXS); margin: var(--space-6) 0 0; }

/* ── 도움말 intro + TOC + 섹션 아코디언 (중간 포팅) ── */
.help-intro {
  padding: var(--space-4);
  background: color-mix(in srgb, var(--colorAccent) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--colorAccent) 20%, transparent);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-4);
}
.help-intro-title { font-weight: var(--fontWeightSemibold); }
.help-intro-lead {
  font-size: var(--fontSizeMD);
  line-height: 1.6;
  margin: 0 0 var(--space-2);
  color: var(--textPrimary);
}
.help-intro-sub {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  line-height: 1.6;
  margin: 0 0 var(--space-3);
}
.help-intro-bullets {
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  line-height: 1.7;
}
.help-toc {
  padding: var(--space-3);
  background: color-mix(in srgb, var(--textPrimary) 4%, transparent);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-4);
}
.help-toc ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-2);
}
.help-toc-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bgPrimary, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-md, 8px);
  color: var(--textPrimary);
  text-decoration: none;
  font-size: var(--fontSizeSM);
  transition: background 0.15s, border-color 0.15s;
}
.help-toc-link:hover {
  background: color-mix(in srgb, var(--colorAccent) 8%, transparent);
  border-color: var(--colorAccent);
}
.help-sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.help-section-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--textPrimary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-md, 8px);
  color: var(--textPrimary);
  font-size: var(--fontSizeMD);
  font-weight: var(--fontWeightSemibold);
  cursor: pointer;
  text-align: left;
}
.help-section-head:hover { background: color-mix(in srgb, var(--textPrimary) 7%, transparent); }
.help-section-title {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
/* 섹션 헤드/TOC 아이콘 — SVG는 18px, 이모지 fallback은 1em 톤 보존 */
.help-section-icon-svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: var(--colorAccent);
}
.help-section-icon-emoji {
  font-size: 1.1em;
  flex: 0 0 auto;
}
/* 본문 안 인라인 아이콘 — 텍스트와 베이스라인 정렬, 색은 currentColor 흐름 따름 */
.help-inline-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.18em;
  margin-right: 0.15em;
  color: var(--colorAccent);
}
.help-section-chevron {
  color: var(--textSecondary);
  transition: transform 0.2s;
}
.help-section-head[aria-expanded="true"] .help-section-chevron { transform: rotate(90deg); }
.help-section-body {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fontSizeSM);
  line-height: 1.7;
  color: var(--textPrimary);
}
.help-section-body h4 {
  font-size: var(--fontSizeMD);
  font-weight: var(--fontWeightSemibold);
  margin: var(--space-4) 0 var(--space-2);
  color: var(--textPrimary);
}
.help-section-body h4:first-child { margin-top: 0; }
.help-section-body h5 {
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightSemibold);
  margin: var(--space-3) 0 var(--space-1);
  color: var(--textPrimary);
}
.help-section-body p { margin: 0 0 var(--space-2); }
.help-section-body ul, .help-section-body ol {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
}
.help-section-body li { margin-bottom: var(--space-1); }
.help-section-body code {
  font-family: var(--fontFamilyMono, monospace);
  font-size: 0.9em;
  padding: 1px 4px;
  background: color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: 3px;
}
.help-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fontSizeSM);
  margin: var(--space-2) 0 var(--space-3);
}
.help-table th,
.help-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  text-align: left;
  vertical-align: top;
}
.help-table th {
  color: var(--textSecondary);
  font-weight: var(--fontWeightSemibold);
  background: color-mix(in srgb, var(--textPrimary) 4%, transparent);
}
.help-kbd {
  display: inline-block;
  padding: 1px 6px;
  font-family: var(--fontFamilyMono, monospace);
  font-size: 0.85em;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--textPrimary) 4%, transparent);
  color: var(--textPrimary);
}
.help-desktop-only, .help-mobile-only { display: initial; }
body[data-layout="pwa"] .help-desktop-only { display: none !important; }
body[data-layout="web"] .help-mobile-only { display: none !important; }

/* ── 도움말 v2 서식 (card-grid + FSRS SVG) ── */
.help-section-body .help-lead {
  margin: 0 0 var(--space-4);
  font-size: var(--fontSizeMD);
  line-height: 1.6;
  color: var(--textPrimary);
}
.help-section-body .help-h4 {
  font-size: var(--fontSizeMD);
  font-weight: var(--fontWeightSemibold);
  margin: var(--space-5) 0 var(--space-3);
  color: var(--textPrimary);
}
.help-section-body .help-h4:first-child { margin-top: 0; }
.help-section-body .help-list {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  line-height: 1.7;
}
.help-section-body .help-list li { margin-bottom: var(--space-1); }
.help-section-body .help-list > li > ul {
  margin: var(--space-1) 0;
  padding-left: var(--space-5);
}

/* 카드 그리드 — 반응형 auto-fill (최소 180px) */
.help-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-4);
}
.help-card {
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--textPrimary) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-md, 8px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.help-card-title {
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightSemibold);
  color: var(--textPrimary);
}
.help-card-desc {
  margin: 0;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  line-height: 1.5;
}

/* FSRS 상태 카드 강조 */
.help-fsrs-card { border-left: 3px solid; }
.help-fsrs-card.help-fsrs-new     { border-left-color: color-mix(in srgb, var(--textTertiary) 70%, transparent); }
.help-fsrs-card.help-fsrs-learning{ border-left-color: color-mix(in srgb, var(--colorAccent) 45%, #f59e0b); }
.help-fsrs-card.help-fsrs-review  { border-left-color: var(--colorAccent); }
.help-fsrs-card.help-fsrs-relearn { border-left-color: color-mix(in srgb, var(--colorAccent) 50%, #ef4444); }

/* 평가 카드 강조 — rating1~4 토큰 재사용 */
.help-rating-card { border-left: 3px solid; }
.help-rating-card.help-rating-again { border-left-color: var(--rating1); }
.help-rating-card.help-rating-hard  { border-left-color: var(--rating2); }
.help-rating-card.help-rating-good  { border-left-color: var(--rating3); }
.help-rating-card.help-rating-easy  { border-left-color: var(--rating4); }

/* 인라인 강조용 rating 컬러 */
.help-section-body .help-rating-again { color: var(--rating1); }
.help-section-body .help-rating-hard  { color: var(--rating2); }
.help-section-body .help-rating-good  { color: var(--rating3); }
.help-section-body .help-rating-easy  { color: var(--rating4); }

/* FSRS SVG 다이어그램 */
.help-fsrs-diagram {
  width: 100%;
  margin: 0 0 var(--space-3);
  padding: var(--space-3);
  background: color-mix(in srgb, var(--textPrimary) 2%, transparent);
  border-radius: var(--radius-md, 8px);
  overflow-x: auto;
}
.help-fsrs-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  min-width: 520px;
  color: var(--textSecondary);
}
.help-fsrs-node rect {
  fill: color-mix(in srgb, var(--textPrimary) 4%, var(--bgPrimary));
  stroke: color-mix(in srgb, var(--textPrimary) 16%, transparent);
  stroke-width: 1.5;
}
.help-fsrs-node[data-state="0"] rect { stroke: color-mix(in srgb, var(--textTertiary) 70%, transparent); }
.help-fsrs-node[data-state="1"] rect { stroke: color-mix(in srgb, var(--colorAccent) 45%, #f59e0b); }
.help-fsrs-node[data-state="2"] rect { stroke: var(--colorAccent); }
.help-fsrs-node[data-state="3"] rect { stroke: color-mix(in srgb, var(--colorAccent) 50%, #ef4444); }
.help-fsrs-node text {
  font-size: 15px;
  font-weight: var(--fontWeightSemibold);
  fill: var(--textPrimary);
}
.help-fsrs-node text.help-fsrs-sub {
  font-size: 11px;
  font-weight: var(--fontWeightRegular, 400);
  fill: var(--textTertiary);
}
.help-fsrs-edge {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}
.help-fsrs-self {
  stroke: currentColor;
  stroke-width: 1.5;
}
.help-fsrs-edge-again, .help-fsrs-edge-again + * { color: var(--rating1); }
.help-fsrs-edge-easy, .help-fsrs-edge-easy + *   { color: var(--rating3); }
.help-fsrs-edge.help-fsrs-edge-again { stroke: var(--rating1); }
.help-fsrs-edge.help-fsrs-edge-easy  { stroke: var(--rating3); }
.help-fsrs-self                      { stroke: var(--textTertiary); }
.help-fsrs-diagram text.help-fsrs-label {
  font-size: 11px;
  fill: var(--textSecondary);
}
.help-fsrs-diagram text.help-fsrs-label-again { fill: var(--rating1); }
.help-fsrs-diagram text.help-fsrs-label-easy  { fill: var(--rating3); }
.help-section-body .help-fsrs-note {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  line-height: 1.6;
}

/* ── 피드백 허브 (도움말 탭 feedback 섹션 body) ── */
.feedback-hub { display: flex; flex-direction: column; gap: var(--space-4); }
.feedback-desc { margin: 0; font-size: var(--fontSizeSM); color: var(--textSecondary); line-height: 1.6; }
.feedback-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.feedback-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.feedback-filter-chip {
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 12%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--textSecondary);
  font-size: var(--fontSizeXS);
  cursor: pointer;
}
.feedback-filter-chip.is-active {
  background: var(--colorAccent);
  color: #fff;
  border-color: var(--colorAccent);
}
.feedback-sort-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.feedback-search {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 14%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
  box-sizing: border-box;
}
.feedback-sort {
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 14%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
}
.feedback-list { display: flex; flex-direction: column; gap: var(--space-3); }
.feedback-empty {
  margin: 0;
  padding: var(--space-5);
  text-align: center;
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.feedback-item {
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--textPrimary) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: var(--radius-md, 8px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.feedback-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--fontSizeXS);
}
.feedback-cat {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: var(--fontWeightSemibold);
  background: color-mix(in srgb, var(--textPrimary) 8%, transparent);
  color: var(--textPrimary);
}
.feedback-cat-bug { background: color-mix(in srgb, var(--rating1) 20%, transparent); color: var(--rating1); }
.feedback-cat-feature { background: color-mix(in srgb, var(--colorAccent) 20%, transparent); color: var(--colorAccent); }
.feedback-cat-review { background: color-mix(in srgb, var(--rating4) 22%, transparent); color: var(--rating4); }
.feedback-stars { color: var(--rating4); letter-spacing: 1px; }
.feedback-date { color: var(--textTertiary); }
.feedback-del { margin-left: auto; font-size: 11px; color: var(--textTertiary); }
.feedback-del:hover { color: var(--colorError, #ef4444); }
.feedback-item-title {
  margin: 0;
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightSemibold);
  color: var(--textPrimary);
}
.feedback-item-msg {
  margin: 0;
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  line-height: 1.6;
  white-space: pre-wrap;
}
.feedback-item-foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
}
.feedback-user { flex: 1 1 auto; }
.feedback-vote-group { display: flex; align-items: center; gap: 4px; }
.feedback-vote-btn {
  padding: 2px 8px;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-md, 8px);
  background: transparent;
  color: var(--textSecondary);
  font-size: var(--fontSizeXS);
  cursor: pointer;
}
.feedback-vote-btn.is-active {
  background: color-mix(in srgb, var(--colorAccent) 20%, transparent);
  border-color: var(--colorAccent);
  color: var(--colorAccent);
}
.feedback-score { font-variant-numeric: tabular-nums; font-weight: var(--fontWeightSemibold); }
.feedback-score.is-positive { color: var(--rating3); }
.feedback-score.is-negative { color: var(--rating1); }
.feedback-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
}
.feedback-page-info {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  font-variant-numeric: tabular-nums;
}

/* 피드백 작성 BottomSheet (FAB) */
.feedback-write-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.feedback-cat-row {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.feedback-cat-btn {
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 12%, transparent);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
  cursor: pointer;
}
.feedback-cat-btn.is-active {
  background: var(--colorAccent);
  color: #fff;
  border-color: var(--colorAccent);
}
.feedback-rating-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.feedback-rating-label { font-size: var(--fontSizeSM); color: var(--textSecondary); }
.feedback-stars[data-role="stars"] { display: flex; gap: 2px; }
.feedback-star {
  padding: 0;
  background: transparent;
  border: 0;
  font-size: 22px;
  color: color-mix(in srgb, var(--textPrimary) 20%, transparent);
  cursor: pointer;
  line-height: 1;
}
.feedback-star.is-on { color: var(--rating4); }
.feedback-rating-text { font-size: var(--fontSizeXS); color: var(--textSecondary); }
.feedback-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.feedback-field-label { font-size: var(--fontSizeXS); color: var(--textSecondary); }
.feedback-input,
.feedback-textarea {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 14%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeMD);
}
.feedback-textarea { resize: vertical; min-height: 120px; }
.feedback-charcount {
  align-self: flex-end;
  font-size: 11px;
  color: var(--textTertiary);
}

/* =========================================================================
 * 3.83 설정 패널 (components §3.7)
 * ========================================================================= */
.settings { padding: calc(var(--space-4) * var(--contentDensity)); display: flex; flex-direction: column; gap: calc(var(--sectionGap) * 0.5); }
.settings-title { margin: 0; font-size: calc(24px * var(--heroScale)); font-weight: var(--titleWeight); letter-spacing: -0.01em; }
.settings-header-sub {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.settings-sub-title { margin: 0; font-size: var(--fontSizeLG); font-weight: var(--fontWeightMedium); }
.settings-hint {
  margin: 0 0 var(--space-2);
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  line-height: var(--lineHeightRelaxed, 1.5);
}

.settings-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.settings-row-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cardBorder);
  border-radius: 0;
  width: 100%;
  padding: var(--space-3) 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0 var(--space-3);
  cursor: pointer;
  text-align: left;
  font-family: var(--fontFamily);
  text-decoration: none;
  color: inherit;
}
.settings-row:last-child .settings-row-btn { border-bottom: 0; }
.settings-row-label { grid-column: 1; grid-row: 1; font-size: var(--fontSizeBase); font-weight: var(--fontWeightMedium); color: var(--textPrimary); }
.settings-row-desc  { grid-column: 1; grid-row: 2; font-size: var(--fontSizeXS); color: var(--textSecondary); }
.settings-row-arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--textTertiary); font-size: var(--fontSizeLG); }
.settings-row-btn:hover { background: var(--bgSecondary); }

.settings-version { margin: var(--space-6) 0 0; color: var(--textTertiary); font-size: var(--fontSizeXS); }

/* 외형 미리보기 카드 */
.appearance-preview {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
}
.ap-card {
  width: 100%;
  max-width: 340px;
  padding: var(--space-6) var(--space-5);
  background: var(--cardBgGradient, var(--cardBg));
  border: var(--cardBorderWidth, 1px) solid var(--cardBorder);
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  color: var(--cardWordColor);
  text-align: center;
  font-family: var(--fontFamily);
  transition: background var(--dur-base) var(--ease-ios), border-color var(--dur-base) var(--ease-ios);
}
.ap-word {
  font-size: 28px;
  font-weight: var(--fontWeightSemibold);
  color: var(--cardWordColor);
}
.ap-meaning {
  margin-top: var(--space-2);
  font-size: var(--fontSizeMD);
  color: var(--cardMeaningColor);
}
.ap-meta {
  margin-top: var(--space-3);
  font-size: var(--fontSizeSM);
  color: var(--cardQAColor);
}

/* 테마 스와치 */
.theme-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  gap: var(--space-2);
}
.theme-swatch {
  appearance: none;
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  cursor: pointer;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeXS);
  color: var(--textPrimary);
}
.theme-swatch[data-active="true"] {
  border-color: var(--colorAccent);
  box-shadow: 0 0 0 1px var(--colorAccent);
}
.theme-swatch-dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--colorAccent), var(--colorPrimary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 아이콘이 흰색으로 그라디언트 위에 떠 있게 */
  color: #fff;
}
/* 테마 swatch 아이콘 — 그라디언트 dot 위에 currentColor(흰색)으로 렌더 */
.theme-swatch-icon {
  width: 22px; height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 약간의 가시성 강화 — sand/mono 같은 밝은 그라디언트에서도 보이도록 */
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.25));
}
/* 각 스와치 dot이 해당 테마의 실제 색을 보여주도록 */
.theme-swatch-dot[data-theme="system"]   { background: linear-gradient(135deg, #0071E3, #0A0A0A); }
.theme-swatch-dot[data-theme="ocean"]    { background: linear-gradient(135deg, #5DADE2, #1B4F72); }
.theme-swatch-dot[data-theme="forest"]   { background: linear-gradient(135deg, #81C784, #2E7D32); }
.theme-swatch-dot[data-theme="classic"]  { background: linear-gradient(135deg, #FF6B6B, #2196F3); }
.theme-swatch-dot[data-theme="midnight"] { background: linear-gradient(135deg, #B39DDB, #4A148C); }
.theme-swatch-dot[data-theme="ember"]    { background: linear-gradient(135deg, #FFB74D, #E65100); }
.theme-swatch-dot[data-theme="blossom"]  { background: linear-gradient(135deg, #F48FB1, #C2185B); }
.theme-swatch-dot[data-theme="sand"]     { background: linear-gradient(135deg, #BCAAA4, #8D6E63); }
.theme-swatch-dot[data-theme="mono"]     { background: linear-gradient(135deg, #777777, #333333); }
.theme-swatch-dot[data-theme="neon"]     { background: linear-gradient(135deg, #00E5FF, #E040FB); }
.theme-swatch-dot[data-theme="hacker"]   { background: linear-gradient(180deg, #00FF41, #000000); }
.theme-swatch-dot[data-theme="trump"]    { background: linear-gradient(135deg, #1B3A6B, #C41E3A); }
.theme-swatch-dot[data-theme="custom"]   { background: linear-gradient(135deg, #888, #555); }

/* 세그먼트 — flex-wrap으로 줄바꿈 허용, 스크롤바는 숨김 */
.segment {
  display: inline-flex;
  flex-wrap: wrap;
  background: var(--bgSecondary);
  border-radius: var(--radius-sm);
  padding: 2px;
  gap: 0;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;         /* Firefox */
  -ms-overflow-style: none;      /* 구 Edge */
}
.segment::-webkit-scrollbar { display: none; } /* WebKit */
.segment-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  border-radius: var(--radius-sm);
}
.segment-btn[data-active="true"] {
  background: var(--cardBg);
  color: var(--textPrimary);
  box-shadow: var(--shadow-sm);
}
/* 아이콘 + 라벨이 함께 있는 옵션 (예: 플립/슬라이드 효과) */
.segment-btn-with-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-2) var(--space-3);
  min-width: 56px;
}
.segment-btn-with-icon svg {
  width: 18px;
  height: 18px;
  opacity: 0.85;
}
.segment-btn-with-icon[data-active="true"] svg {
  opacity: 1;
}
.segment-btn-with-icon .segment-label {
  font-size: var(--fontSizeXS);
  line-height: 1;
}

/* 위험 액션 */
.settings-danger { display: flex; flex-direction: column; gap: var(--space-2); }
.btn-danger {
  appearance: none;
  background: transparent;
  color: var(--colorError);
  border: 1px solid var(--colorError);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  cursor: pointer;
}
.btn-danger:hover { background: rgba(229, 57, 53, 0.08); }
.settings-danger-hint { margin: 0; color: var(--textSecondary); font-size: var(--fontSizeSM); }

.settings-placeholder-text { color: var(--textSecondary); font-size: var(--fontSizeSM); }

/* 슬라이더 */
.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  outline: none;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--colorAccent);
  cursor: pointer;
}
.slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--colorAccent);
  cursor: pointer;
}

/* 설정 토글 */
.settings-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  cursor: pointer;
}
.settings-toggle input[type=checkbox] {
  width: 18px;
  height: 18px;
  accent-color: var(--colorAccent);
}

/* =========================================================================
 * 3.84 통계 탭 (components §3.4)
 * ========================================================================= */
.stats {
  padding: calc(var(--space-4) * var(--contentDensity));
  display: flex;
  flex-direction: column;
  gap: calc(var(--sectionGap) * 0.5);
}
.stats-title {
  margin: 0;
  font-size: calc(24px * var(--heroScale));
  font-weight: var(--titleWeight);
  letter-spacing: -0.01em;
}

.stats-subtabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--bgSecondary);
}
.stats-sub-chip {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-3) var(--space-4);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  color: var(--textSecondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.stats-sub-chip[data-active="true"] {
  color: var(--colorAccent);
  border-bottom-color: var(--colorAccent);
  font-weight: var(--fontWeightMedium);
}

/* 통계 차트 공용 박스 — 섹션 시각적 통일 (KPI 타일과 같은 구조 토큰 체계)
 * 테마 override가 .kpi-tile와 같은 selector로 확장되어 테마 변주 자동 적용 */
.stats-panel {
  padding: var(--tilePadding);
  background: var(--tileBg);
  border: var(--tileBorder) solid var(--cardBorder);
  border-radius: var(--tileRadius);
  /* 내부 스크롤 영역의 스크롤바 숨김 (기존 .stats-trend-scroll과 동일 정책) */
}
.stats-panel .stats-trend-scroll,
.stats-panel .stats-daily-bars {
  scrollbar-width: none;
}
.stats-panel .stats-trend-scroll::-webkit-scrollbar,
.stats-panel .stats-daily-bars::-webkit-scrollbar { display: none; }

/* 덱 필터 — 버튼은 기간 칩과 동일 pill/border/radius/폰트.
 * 높이·패딩은 학습/관리 탭 툴바 컨트롤(.decklist-filter-btn 등)과 통일해
 * 탭 간 필터 UI의 시각 일관성을 유지한다. */
.stats-deck-filter { position: relative; margin: var(--space-2) 0; }
.stats-deck-filter-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  color: var(--textSecondary);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-pill);
  height: 34px;
  box-sizing: border-box;
  padding: 0 var(--space-4);
  font-size: var(--fontSizeSM);
  cursor: pointer;
  flex-shrink: 0;
}
.stats-deck-filter-btn svg { stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.stats-deck-filter-btn[aria-expanded="true"] {
  color: var(--colorAccent);
  border-color: var(--colorAccent);
  background: rgba(10, 132, 255, 0.08);
}
/* 필터가 active(전체 아닌 선택) 상태면 accent 테두리로 표시 */
.stats-deck-filter.is-active .stats-deck-filter-btn {
  color: var(--colorAccent);
  border-color: var(--colorAccent);
}
.stats-deck-filter-pop {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 20;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  /* 슬라이드 다운 애니메이션 — hidden 속성 대신 data-open으로 전환 */
  transform-origin: top left;
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.stats-deck-filter-pop[hidden] { display: none; }
.stats-deck-filter-pop[data-open="false"] {
  opacity: 0;
  transform: translateY(-6px) scaleY(0.98);
  pointer-events: none;
}
.stats-deck-filter-pop[data-open="true"] {
  opacity: 1;
  transform: translateY(0) scaleY(1);
}
.stats-deck-filter-all .check-label { font-weight: var(--fontWeightMedium); }
.stats-deck-filter-sep { height: 1px; background: var(--cardBorder); margin: var(--space-1) 0; }

.stats-period {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}
.stats-chip {
  appearance: none;
  background: transparent;
  color: var(--textSecondary);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-pill);
  height: 34px;
  box-sizing: border-box;
  padding: 0 var(--space-4);
  font-size: var(--fontSizeSM);
  cursor: pointer;
  flex-shrink: 0;
}
.stats-chip[data-active="true"] {
  color: var(--colorAccent);
  border-color: var(--colorAccent);
  background: rgba(10, 132, 255, 0.08);
}

/* 기간 지정 date picker — period='custom' 선택 시 노출 */
.stats-range-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--bgSecondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    max-height var(--dur-base) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard),
    margin-top var(--dur-base) var(--ease-standard),
    padding-top var(--dur-base) var(--ease-standard),
    padding-bottom var(--dur-base) var(--ease-standard);
}
.stats-range-picker[data-open="false"] {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
.stats-range-picker[data-open="true"] {
  max-height: 240px;
  opacity: 1;
}
.range-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.range-label { white-space: nowrap; }
.range-field input[type="date"] {
  appearance: none;
  padding: var(--space-1) var(--space-3);
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-pill);
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
  font-family: inherit;
}
.range-apply {
  padding: var(--space-1) var(--space-4);
  background: var(--colorAccent);
  color: #fff;
  border-radius: var(--radius-pill);
  border: 0;
  font-size: var(--fontSizeSM);
  cursor: pointer;
}
.range-hint {
  flex-basis: 100%;
  margin: 0;
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
}

/* 통계 body — 각 섹션 사이 충분한 여백 + 상단 구분선으로 가독성 확보 */
.stats-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.stats-body > section + section {
  padding-top: var(--space-5);
  border-top: 1px solid var(--bgSecondary);
}

/* 섹션 제목에 리딩 아이콘 */
.section-title-with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.section-icon {
  color: var(--colorAccent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

/* KPI grid — production 대시보드 스타일. 모바일 3열(오늘) · 3열(진행도),
 * 좁은 뷰포트에서 2열로 접힘 */
.kpi-grid {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.kpi-grid-today        { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid-progress     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid-memory-mini  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 520px) {
  .kpi-grid-today, .kpi-grid-progress, .kpi-grid-memory-mini {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* 구조 토큰 기반 — 테마 전환 시 padding/bg/border/radius가 함께 변주됨 */
.kpi-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--tilePadding);
  background: var(--tileBg);
  border: var(--tileBorder) solid var(--cardBorder);
  border-radius: var(--tileRadius);
}

/* ==== 테마별 KPI 타일 변주 (Theme-Native) ==== */

/* hacker — 터미널 출력 느낌: 박스 없음, 하단 점선, mono 폰트 */
[data-theme="hacker"] .kpi-tile,
[data-theme="hacker"] .stats-state-tile,
[data-theme="hacker"] .stats-effect-card,
[data-theme="hacker"] .stats-panel {
  padding: var(--space-2) 0;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--cardBorder);
  border-radius: 0;
}
[data-theme="hacker"] .kpi-num,
[data-theme="hacker"] .stats-state-num,
[data-theme="hacker"] .stats-effect-num { font-family: var(--fontFamilyMono); }
[data-theme="hacker"] .kpi-tile-head::before {
  content: '>';
  color: var(--colorSecondary);
  margin-right: var(--space-1);
  font-family: var(--fontFamilyMono);
  opacity: 0.7;
}

/* classic — 신문/도서 느낌: 좌측 세로줄로만 구분, 세리프 큰 숫자 */
[data-theme="classic"] .kpi-tile,
[data-theme="classic"] .stats-state-tile,
[data-theme="classic"] .stats-effect-card,
[data-theme="classic"] .stats-panel {
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--cardBorder);
  border-radius: 0;
}
[data-theme="classic"] .kpi-num,
[data-theme="classic"] .stats-state-num,
[data-theme="classic"] .stats-effect-num { letter-spacing: -0.02em; }

/* midnight — 은은한 배경 gradient, 보더 없음 */
[data-theme="midnight"] .kpi-tile,
[data-theme="midnight"] .stats-state-tile,
[data-theme="midnight"] .stats-effect-card,
[data-theme="midnight"] .stats-panel {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tileBg) 90%, transparent),
    color-mix(in srgb, var(--tileBg) 60%, transparent));
  border: 0;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
}

/* mono — 깔끔한 흑백: 배경만 살짝 달리, 보더 없음 */
[data-theme="mono"] .kpi-tile,
[data-theme="mono"] .stats-state-tile,
[data-theme="mono"] .stats-effect-card,
[data-theme="mono"] .stats-panel {
  background: var(--bgSecondary);
  border: 0;
}

/* ocean — 대형 둥근 카드 + 크림 그라디언트 + soft shadow (대형 heroScale 철학 계승) */
[data-theme="ocean"] .kpi-tile,
[data-theme="ocean"] .stats-state-tile,
[data-theme="ocean"] .stats-effect-card,
[data-theme="ocean"] .stats-panel {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tileBg) 92%, transparent),
    color-mix(in srgb, var(--tileBg) 70%, var(--colorAccent) 2%));
  border: 0;
  border-radius: 16px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--colorAccent) 10%, transparent);
}

/* forest — 종이 질감 배경 + 좌측 녹 강조 */
[data-theme="forest"] .kpi-tile,
[data-theme="forest"] .stats-state-tile,
[data-theme="forest"] .stats-effect-card,
[data-theme="forest"] .stats-panel {
  background: color-mix(in srgb, var(--tileBg) 92%, var(--colorAccent) 3%);
  border: 0;
  border-left: 3px solid color-mix(in srgb, var(--colorAccent) 55%, transparent);
  border-radius: 6px;
}

/* ember — 웜톤: 2px 뚜렷한 테두리 + 부드러운 웜 배경 (기본 --tileBorder: 2px 존중) */
[data-theme="ember"] .kpi-tile,
[data-theme="ember"] .stats-state-tile,
[data-theme="ember"] .stats-effect-card,
[data-theme="ember"] .stats-panel {
  background: color-mix(in srgb, var(--tileBg) 85%, var(--colorAccent) 6%);
  border: 2px solid color-mix(in srgb, var(--colorAccent) 35%, var(--cardBorder));
  border-radius: 10px;
}

/* blossom — 라운드 큰 카드 + 핑크 hint 배경 */
[data-theme="blossom"] .kpi-tile,
[data-theme="blossom"] .stats-state-tile,
[data-theme="blossom"] .stats-effect-card,
[data-theme="blossom"] .stats-panel {
  background: color-mix(in srgb, var(--tileBg) 88%, var(--colorAccent) 5%);
  border: 0;
  border-radius: 20px;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--colorAccent) 12%, transparent);
}

/* sand — 베이지 내추럴: 얇은 선 구분만, 뚜렷한 배경 없음 */
[data-theme="sand"] .kpi-tile,
[data-theme="sand"] .stats-state-tile,
[data-theme="sand"] .stats-effect-card,
[data-theme="sand"] .stats-panel {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--cardBorder) 80%, var(--colorAccent) 10%);
  border-radius: 8px;
}

/* neon — 어두운 배경 + 네온 경계 glow */
[data-theme="neon"] .kpi-tile,
[data-theme="neon"] .stats-state-tile,
[data-theme="neon"] .stats-effect-card,
[data-theme="neon"] .stats-panel {
  background: color-mix(in srgb, var(--cardBg) 85%, #000 15%);
  border: 1px solid color-mix(in srgb, var(--colorAccent) 45%, transparent);
  border-radius: 10px;
  box-shadow: 0 0 12px color-mix(in srgb, var(--colorAccent) 20%, transparent),
              inset 0 0 0 1px color-mix(in srgb, var(--colorAccent) 10%, transparent);
}
[data-theme="neon"] .kpi-num,
[data-theme="neon"] .stats-state-num,
[data-theme="neon"] .stats-effect-num {
  text-shadow: 0 0 6px color-mix(in srgb, var(--colorAccent) 40%, transparent);
}

/* trump — 데코 테마: 기본 틀 유지하되 배경만 살짝 약화 (카드 풍경 방해 최소화) */
[data-theme="trump"] .kpi-tile,
[data-theme="trump"] .stats-state-tile,
[data-theme="trump"] .stats-effect-card,
[data-theme="trump"] .stats-panel {
  background: color-mix(in srgb, var(--tileBg) 85%, transparent);
  border: 2px solid var(--cardBorder);
  border-radius: 10px;
}

/* 강화 hero 카드는 공용 override 외에 자체 여백 보강 */
[data-theme="hacker"] .stats-effect-card  { padding: var(--space-3) 0; }
[data-theme="classic"] .stats-effect-card,
[data-theme="classic"] .stats-panel { padding: var(--space-3); }

/* 아틀라스 툴팁도 테마 변주 */
[data-theme="hacker"] .stats-atlas-tip {
  background: var(--bgSecondary);
  border-color: var(--colorAccent);
  font-family: var(--fontFamilyMono);
}
[data-theme="mono"] .stats-atlas-tip {
  background: var(--bgSecondary);
  border-color: var(--cardBorder);
  box-shadow: none;
}
.kpi-tile-head {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.kpi-icon {
  color: var(--textSecondary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
.kpi-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-value {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
.kpi-num {
  font-size: calc(22px * var(--heroScale));
  font-weight: var(--titleWeight);
  letter-spacing: -0.01em;
  color: var(--textPrimary);
  line-height: 1.05;
}
.kpi-unit { font-size: var(--fontSizeSM); color: var(--textSecondary); }
.kpi-sub { font-size: 11px; color: var(--textTertiary); }
.kpi-dim { font-size: var(--fontSizeSM); color: var(--textTertiary); }
.kpi-tile-accent .kpi-num { color: var(--colorAccent); }
.kpi-tile-accent .kpi-icon { color: var(--colorAccent); }

/* ===== 기간 기반 평가 분포 스택 막대 (항상 일별 해상도) =====
   바 폭은 위의 추세 차트(.stats-trend-bars)와 동일하게 minmax(8px, 1fr) + gap 2px로 맞춘다.
   width:100%는 1열일 때도 grid가 shrink-to-fit되지 않고 부모 전폭을 쓰게 강제 —
   없으면 1fr 트랙이 minmax 하한(8px)까지 수축해 바가 좁아짐. */
.stats-daily-bars {
  display: grid;
  grid-template-columns: repeat(var(--col-count, 7), minmax(8px, 1fr));
  gap: 2px;
  align-items: end;
  width: 100%;
  height: 180px;                              /* 사선 라벨 여유 포함 */
  padding-bottom: 28px;
  margin-top: var(--space-3);
  position: relative;
}
.daily-col { position: relative; }
/* 기본 라벨 위치 — 막대 아래 */
.stats-daily-bars .daily-label {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* 밀집 모드 — 사선 + 축소 */
.stats-daily-bars.trend-labels-dense .daily-label {
  font-size: 9px;
  bottom: -20px;
  transform: translateX(-50%) rotate(-45deg);
  transform-origin: top center;
}

/* 추세/일별 막대를 감싸는 스크롤 래퍼 — 가로 스와이프, 스크롤바 숨김, 양 끝 화살표 오버레이 */
.stats-trend-wrap { position: relative; }
.stats-trend-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;               /* Firefox */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}
.stats-trend-scroll::-webkit-scrollbar { display: none; } /* WebKit */
.stats-trend-scroll > .stats-trend-chart,
.stats-trend-scroll > .stats-daily-bars {
  /* 컨테이너가 컬럼 수에 따라 가로로 늘어나도록 최소 너비를 col-count * 18px로 */
  min-width: calc(var(--col-count, 7) * 18px);
}

/* 예측 탭 — 14일 과거+미래 혼합 차트 */
.trend-seg-future {
  /* 미래 예상 — accent 70% + warning 30%. 테마를 따른다. */
  background: color-mix(in srgb, var(--colorAccent) 70%, var(--colorWarning));
}
.stats-trend-bar.is-future {
  /* 미래 막대는 약간 투명 — '예측'임을 시각적으로 구분 */
  opacity: 0.75;
}
.stats-trend-col.is-future-col .stats-trend-dow {
  color: var(--textTertiary);
  font-style: italic;
}
/* 차트 아래 범례 */
.stats-forecast-legend {
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.legend-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.swatch-past-new    { background: var(--colorAccent); }
.swatch-past-review { background: color-mix(in srgb, var(--colorAccent) 50%, var(--bgSecondary)); }
.swatch-pending     { background: color-mix(in srgb, var(--textTertiary) 55%, transparent); }
.swatch-future      { background: color-mix(in srgb, var(--colorAccent) 70%, var(--colorWarning)); }
/* rating 분포 범례 */
.swatch-rating-1    { background: var(--rating1); }
.swatch-rating-2    { background: var(--rating2); }
.swatch-rating-3    { background: var(--rating3); }
.swatch-rating-4    { background: var(--rating4); }
/* 덱별 성과 상태 분포 바 범례 */
.swatch-seg-review   { background: var(--colorAccent); }
.swatch-seg-learning { background: color-mix(in srgb, var(--colorAccent) 55%, var(--colorWarning)); }
.swatch-seg-new      { background: color-mix(in srgb, var(--textTertiary) 60%, transparent); }

/* 오늘 학습 대기 세그먼트 (회색, 가운데가 아닌 위에 쌓임 — column-reverse 마지막) */
.trend-seg-pending {
  background: color-mix(in srgb, var(--textTertiary) 55%, transparent);
}
.swatch-line {
  width: 16px; height: 0;
  border-top: 2px solid var(--chartLine);
  opacity: 0.65;
  border-radius: 0;
}
.swatch-line-dashed {
  width: 16px; height: 0;
  border-top: 2px dashed var(--chartLine);
  opacity: 0.65;
  border-radius: 0;
}
/* 복습 분석 차트 — 과거 라인은 실선, 미래 예상 라인은 점선 */
.stats-forecast-trend .stats-trend-line-future polyline {
  stroke-dasharray: 3 3;
  opacity: 0.5;
}

/* 기억 건강 지표 - 안정성 분포 4색 */
.rating-fill.stab-0 { background: color-mix(in srgb, var(--colorError) 70%, transparent); }
.rating-fill.stab-1 { background: color-mix(in srgb, var(--colorWarning) 70%, transparent); }
.rating-fill.stab-2 { background: color-mix(in srgb, var(--colorAccent) 70%, transparent); }
.rating-fill.stab-3 { background: color-mix(in srgb, var(--colorSuccess) 70%, transparent); }

/* 예측 탭 전용 미래 일수 picker */
.stats-future-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--bgSecondary);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition:
    max-height var(--dur-base) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard),
    margin-top var(--dur-base) var(--ease-standard),
    padding-top var(--dur-base) var(--ease-standard),
    padding-bottom var(--dur-base) var(--ease-standard);
}
.stats-future-picker[data-open="false"] {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
}
.stats-future-picker[data-open="true"] {
  max-height: 220px;
  opacity: 1;
}
.range-hint-top { flex-basis: 100%; margin: 0 0 var(--space-1); }
.future-quick { display: inline-flex; gap: var(--space-1); flex-wrap: wrap; }
.future-quick-chip {
  appearance: none;
  border: 1px solid var(--cardBorder);
  background: var(--cardBg);
  color: var(--textPrimary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--fontSizeSM);
  cursor: pointer;
}
.future-quick-chip[data-active="true"] {
  color: var(--colorAccent);
  border-color: var(--colorAccent);
  background: rgba(10, 132, 255, 0.08);
}
.future-days-input {
  appearance: none;
  padding: var(--space-1) var(--space-2);
  width: 80px;
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
  font-family: inherit;
}
.range-suffix { font-size: var(--fontSizeSM); color: var(--textSecondary); }
.future-apply {
  padding: var(--space-1) var(--space-3);
  background: var(--colorAccent);
  color: #fff;
  border-radius: var(--radius-sm);
  border: 0;
  font-size: var(--fontSizeSM);
  cursor: pointer;
}

/* 예측 탭 hero */
.stats-predict-hero { }
.stats-predict-hero .kpi-grid-predict { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* FSRS 상태 스냅샷 — 기존 3열에서 4열로 확장 (New/Learning/Relearning/Review) */
.stats-state-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 520px) {
  .stats-state-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Relearning 숫자 색 — FSRS 관례상 빨강(다시 배워야 함) */
.state-relearning .stats-state-num { color: var(--colorError); }

/* 기억 건강 narration */
.stats-memory-narration {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  background: var(--bgSecondary);
  border-radius: var(--radius-md);
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  line-height: 1.5;
}
.stats-memory-narration:empty { display: none; }

/* 하위 섹션 여백 + 설명 힌트 */
.stats-subsection { margin-top: var(--space-4); }
.stats-subhint {
  margin: 0 0 var(--space-2);
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
}

/* 강화 학습 효과 hero 카드 — 구조 토큰 기반 (테마 전환 시 자동 변주) */
.stats-effect-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--tilePadding);
  background: var(--tileBg);
  border: var(--tileBorder) solid var(--cardBorder);
  border-radius: var(--tileRadius);
  margin-top: var(--space-3);
}
.stats-effect-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.stats-effect-num {
  font-size: calc(40px * var(--heroScale));
  font-weight: var(--titleWeight);
  letter-spacing: -0.02em;
  color: var(--colorAccent);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stats-effect-unit {
  font-size: var(--fontSizeMD);
  color: var(--textSecondary);
  font-weight: var(--fontWeightMedium);
}
.stats-effect-dim {
  margin: var(--space-1) 0 0;
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.stats-effect-sub {
  margin: 0;
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
}

/* 강화 탭 내 subheading (유형별 성과 등) */
.stats-subheading {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  margin: var(--space-4) 0 var(--space-2);
  font-weight: var(--fontWeightMedium);
}

/* 퀴즈/약점 추세는 학습 추세와 동일 .stats-trend-chart 사용 */
.stats-quiz-trend,
.stats-weak-trend {
  /* 스타일은 .stats-trend-chart가 JS 쪽 classList.add로 붙음 */
}

.stats-weak-pending {
  margin: var(--space-3) 0 0;
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
}

/* 추세 차트 아래 요약 라인 */
.stats-trend-summary {
  margin: var(--space-3) 0 0;
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  font-variant-numeric: tabular-nums;
}

/* ===== 통계 전용 추세 차트 — 홈 스파크라인과 분리된 네임스페이스 ===== */
.stats-trend-chart {
  position: relative;
  height: 140px;                              /* 사선 라벨 여유까지 포함한 높이 */
  padding-bottom: 28px;                       /* 라벨 공간 고정 확보 (사선 회전 대응) */
  margin-top: var(--space-3);
  overflow: visible;
}
.stats-trend-bars {
  position: absolute;
  inset: 0 0 28px 0;                          /* 하단 라벨 공간 제외 */
  display: grid;
  grid-template-columns: repeat(var(--col-count, 7), minmax(8px, 1fr));
  gap: 2px;
  align-items: end;
  z-index: 1;
}
.stats-trend-col {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  height: 100%;
}
.stats-trend-bar {
  width: 100%;
  min-height: 2px;
  height: var(--h, 0%);
  background: var(--bgSecondary);
  border-radius: var(--radius-sm);
  transition: height var(--dur-base) var(--ease-ios);
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse;
}
.stats-trend-bar.is-empty {
  min-height: 2px;
  height: 2px;
}
.stats-trend-bar.is-today {
  outline: 2px solid var(--colorAccent);
  outline-offset: 1px;
}
/* 라벨은 막대 컨테이너 하단 영역(absolute bottom:0)에 절대 위치 */
.stats-trend-dow {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
  line-height: 1;
  white-space: nowrap;
}
.stats-trend-col.is-today-col .stats-trend-dow { color: var(--colorAccent); font-weight: var(--fontWeightMedium); }
/* 라벨 밀집 모드 — 14열 초과 시 사선 + 축소 (통계 전용) */
.stats-trend-chart.trend-labels-dense .stats-trend-dow {
  font-size: 9px;
  bottom: -20px;
  transform: translateX(-50%) rotate(-45deg);
  transform-origin: top center;
}

/* 라인 SVG 레이어 — 막대와 같은 plot 영역(top 0 ~ bottom 28) 공유 */
.stats-trend-line {
  position: absolute;
  inset: 0 0 28px 0;
  width: 100%;
  height: calc(100% - 28px);
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}
.stats-trend-line polyline {
  fill: none;
  stroke: var(--chartLine);
  stroke-width: 1.5;
  /* butt + miter — 여러 점이 y=100에 몰려 round 꺾임/캡이 반원으로 부풀던 현상 제거 */
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-miterlimit: 2;
  opacity: 0.65;
  vector-effect: non-scaling-stroke;
}
/* dots 레이어 — plot 영역과 동일 영역 공유 */
.stats-trend-dots {
  position: absolute;
  inset: 0 0 28px 0;
  pointer-events: none;
  z-index: 3;
}
.stats-trend-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  background: var(--cardBg);
  border: 1.5px solid var(--chartLine);
  border-radius: 50%;
  box-sizing: border-box;
  opacity: 0.85;
}
.stats-trend-dot.is-today {
  background: var(--chartLine);
  border-color: var(--chartLine);
  opacity: 1;
}
.stats-trend-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 40px;
  background: color-mix(in srgb, var(--cardBg) 92%, transparent);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--textSecondary);
  box-shadow: var(--shadow-sm);
}
.stats-trend-arrow[hidden] { display: none; }
.stats-trend-arrow-left  { left: -4px; }
.stats-trend-arrow-right { right: -4px; }
.stats-trend-arrow svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* 기간 지정 picker — date input + 캘린더 아이콘 overlay */
.range-input-wrap {
  position: relative;
  display: inline-block;
}
.range-input-wrap input[type="date"] {
  appearance: none;
  padding: var(--space-1) 32px var(--space-1) var(--space-2);
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
  font-family: inherit;
  color-scheme: var(--colorScheme, light dark);
}
.range-input-wrap input[type="date"]:focus {
  outline: 2px solid var(--focusRing);
  outline-offset: 1px;
  border-color: var(--colorAccent);
}
/* 브라우저 기본 아이콘(WebKit의 calendar-picker-indicator) 숨김 — 우리 아이콘 사용 */
.range-input-wrap input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  position: absolute;
  right: 0; top: 0; bottom: 0; left: 0;
  cursor: pointer;
}
.range-cal-icon {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  /* 클릭 가능하도록 히트영역 확보 + 커서 지시 */
  padding: 4px;
  box-sizing: content-box;
  cursor: pointer;
  color: var(--textSecondary);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.range-cal-icon:hover { color: var(--colorAccent); }
.daily-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  height: 100%;
  min-width: 0;
}
.daily-bar {
  /* height은 inline style(막대 총량 비율) */
  /* 바 폭은 grid 트랙을 그대로 채운다(위쪽 추세 차트의 .stats-trend-bar와 동일).
     이전: width:70% + max-width:32px로 고정돼 1열일 때 트랙이 아무리 커져도 32px에 갇혔음. */
  width: 100%;
  min-height: 2px;
  background: var(--bgSecondary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column-reverse; /* Easy가 아래 쌓이게 */
  margin-top: auto;
}
.daily-seg {
  width: 100%;
  display: block;
  min-height: 1px;
}
.daily-seg.rating-1 { background: var(--rating1); }
.daily-seg.rating-2 { background: var(--rating2); }
.daily-seg.rating-3 { background: var(--rating3); }
.daily-seg.rating-4 { background: var(--rating4); }
.daily-total {
  font-size: 10px;
  color: var(--textSecondary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.daily-label {
  font-size: 10px;
  color: var(--textTertiary);
  line-height: 1;
}

/* ===== 최근 7일 평가 분포 가로 bar ===== */
.stats-rating-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.rating-row {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: var(--space-3);
}
.rating-label {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  font-weight: var(--fontWeightMedium);
}
.rating-track {
  height: 8px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.rating-fill {
  display: block;
  height: 100%;
  transition: width var(--dur-base) var(--ease-ios);
}
.rating-fill.rating-1 { background: var(--rating1); }
.rating-fill.rating-2 { background: var(--rating2); }
.rating-fill.rating-3 { background: var(--rating3); }
.rating-fill.rating-4 { background: var(--rating4); }
.rating-meta {
  display: inline-flex;
  gap: var(--space-2);
  font-size: var(--fontSizeXS);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rating-n   { color: var(--textPrimary); font-weight: var(--fontWeightMedium); }
.rating-pct { color: var(--textTertiary); }

.stats-hero {
  padding: var(--tilePadding);
  background: var(--tileBg);
  border: var(--tileBorder) solid var(--cardBorder);
  border-radius: var(--tileRadius);
}
[data-theme="hacker"] .stats-hero,
[data-theme="midnight"] .stats-hero,
[data-theme="classic"] .stats-hero { padding: 0; background: transparent; border: 0; border-radius: 0; }
.stats-hero-main { margin: 0; font-size: calc(24px * var(--heroScale)); font-weight: var(--titleWeight); letter-spacing: -0.01em; }
.stats-main-num { font-size: calc(40px * var(--heroScale)); color: var(--colorAccent); margin-right: var(--space-1); letter-spacing: -0.02em; }
[data-theme="hacker"] .stats-main-num { font-family: var(--fontFamilyMono); }
.stats-hero-sub { margin: var(--space-1) 0 0; font-size: var(--fontSizeSM); color: var(--textSecondary); }

/* ============================================================
 * 카드 아틀라스 (ADR-001)
 * 덱별 스트립 — 각 셀 = 카드 1장, 색 = FSRS state
 * ============================================================ */
.stats-atlas-section { display: flex; flex-direction: column; gap: var(--space-3); }
.stats-atlas-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.stats-atlas-legend {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.atlas-legend-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.stats-atlas-list { display: flex; flex-direction: column; gap: var(--space-3); }
.stats-atlas-row { display: flex; flex-direction: column; gap: var(--space-1); }
.stats-atlas-row-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fontSizeSM);
}
.stats-atlas-row-name { font-weight: var(--fontWeightMedium); }
.stats-atlas-row-count { color: var(--textTertiary); font-weight: var(--fontWeightRegular); }
.stats-atlas-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: var(--space-2) 0;
}
.stats-atlas-loading,
.stats-atlas-error,
.stats-atlas-empty {
  font-size: var(--fontSizeSM);
  color: var(--textTertiary);
  padding: var(--space-2) 0;
}
/* 셀 — 덱 크기에 관계없이 10px 고정, 다 찰 때까지 flex-wrap */
.atlas-cell {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--bgSecondary);
}
.atlas-cell[data-state="0"] { background: color-mix(in srgb, var(--textTertiary) 40%, transparent); }   /* 새 카드 (미학습) */
.atlas-cell[data-state="1"] { background: color-mix(in srgb, var(--colorAccent) 45%, #f59e0b); }        /* 학습 (주황톤) */
.atlas-cell[data-state="2"] { background: var(--colorAccent); }                                         /* 복습 (accent) */
.atlas-cell[data-state="3"] { background: color-mix(in srgb, var(--colorAccent) 50%, #ef4444); }        /* 재학습 (주황-적) */
/* 선택 기간 외 카드 dim */
.atlas-cell[data-in-period="false"] { opacity: 0.3; }

/* 카드 아틀라스 툴팁 — body 직속 fixed DOM 하나 재사용 */
.stats-atlas-tip {
  position: fixed;
  z-index: 70;
  min-width: 200px;
  max-width: 280px;
  padding: var(--space-3);
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fontSizeXS);
  color: var(--textPrimary);
  pointer-events: none; /* hover 방해 금지 */
}
.stats-atlas-tip[hidden] { display: none; }
.stats-atlas-tip .tip-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.stats-atlas-tip .tip-idx {
  font-weight: var(--fontWeightSemibold);
  font-variant-numeric: tabular-nums;
  color: var(--textSecondary);
}
.stats-atlas-tip .tip-state-badge {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fontWeightMedium);
  color: #fff;
}
.stats-atlas-tip .tip-state-badge.state-0 { background: color-mix(in srgb, var(--textTertiary) 70%, transparent); }
.stats-atlas-tip .tip-state-badge.state-1 { background: color-mix(in srgb, var(--colorAccent) 45%, #f59e0b); }
.stats-atlas-tip .tip-state-badge.state-2 { background: var(--colorAccent); }
.stats-atlas-tip .tip-state-badge.state-3 { background: color-mix(in srgb, var(--colorAccent) 50%, #ef4444); }
.stats-atlas-tip .tip-front {
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  margin-bottom: var(--space-2);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.stats-atlas-tip .tip-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1) var(--space-3);
}
.stats-atlas-tip .tip-metric {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
}
.stats-atlas-tip .tip-label { color: var(--textTertiary); }
.stats-atlas-tip .tip-val {
  color: var(--textPrimary);
  font-variant-numeric: tabular-nums;
}
/* 최근 rating dot strip — 툴팁 맨 아래, 오래된 평가 → 최근 순 (좌→우) */
.stats-atlas-tip .tip-ratings {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--bgSecondary);
}
.stats-atlas-tip .tip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.stats-atlas-tip .tip-dot.rating-1 { background: var(--rating1); }
.stats-atlas-tip .tip-dot.rating-2 { background: var(--rating2); }
.stats-atlas-tip .tip-dot.rating-3 { background: var(--rating3); }
.stats-atlas-tip .tip-dot.rating-4 { background: var(--rating4); }
.stats-atlas-tip .tip-overflow {
  color: var(--textTertiary);
  font-size: 10px;
  line-height: 8px;
}
.stats-atlas-tip .tip-leech-badge {
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--colorError, #ef4444) 80%, transparent);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fontWeightSemibold);
  margin-left: auto;
}
.stats-atlas-tip .tip-hint {
  margin: var(--space-2) 0 0;
  font-size: 10px;
  color: var(--textTertiary);
  text-align: center;
}

/* atlas cell 클릭 프리뷰 모달 */
.atlas-cell { cursor: pointer; }
.atlas-preview-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.atlas-preview-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
}
/* CardRenderer 는 REFERENCE 600×400(3:2) 기준으로 slot을 절대 좌표 배치.
   컨테이너에 명시 width 100% + aspect-ratio 3:2 + position:relative 를 줘야 scale 후에도 정상 렌더. */
.atlas-preview-card {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--cardBg);
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.atlas-preview-meta {
  font-size: var(--fontSizeXS);
  text-align: center;
}

.stats-deck-list { display: flex; flex-direction: column; gap: var(--space-3); }
.stats-deck-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--bgSecondary);
}
.stats-deck-row:last-child { border-bottom: 0; }
.stats-deck-toggle {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: transparent;
  border: 1px dashed var(--cardBorder);
  border-radius: var(--radius-sm);
  color: var(--textSecondary);
  font-size: var(--fontSizeSM);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}
.stats-deck-toggle:hover {
  color: var(--colorAccent);
  border-color: var(--colorAccent);
}
.stats-deck-row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.stats-deck-name { font-size: var(--fontSizeBase); font-weight: var(--fontWeightMedium); }
.stats-deck-mastery {
  font-size: var(--fontSizeSM);
  color: var(--colorAccent);
  font-weight: var(--fontWeightSemibold);
  font-variant-numeric: tabular-nums;
}
/* 덱 상태 분포 바 — Review(accent) · Learning(주황톤) · New(중립) */
.stats-deck-bar {
  display: flex;
  height: 6px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.stats-deck-bar .seg { height: 100%; }
.stats-deck-bar .seg-review   { background: var(--colorAccent); }
.stats-deck-bar .seg-learning { background: color-mix(in srgb, var(--colorAccent) 45%, #f59e0b); }
.stats-deck-bar .seg-new      { background: color-mix(in srgb, var(--textTertiary) 60%, transparent); }
.stats-deck-meta {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
}
.stats-deck-num   { color: var(--textPrimary); font-weight: var(--fontWeightMedium); }
.stats-deck-dim   { color: var(--textSecondary); }
.stats-deck-today { color: var(--colorAccent); font-weight: var(--fontWeightMedium); }
.stats-deck-sep   { color: var(--textTertiary); }

/* 최근 7일 추세 섹션 */
.stats-week-section { margin-top: var(--space-2); }

/* 예측 탭 '평균 예정 일수' 승격 카드 */
.stats-avg-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4);
  background: var(--cardBg);
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--radius-lg);
}
.stats-avg-main {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}
.stats-avg-num {
  font-size: calc(36px * var(--heroScale));
  font-weight: var(--titleWeight);
  letter-spacing: -0.02em;
  color: var(--textPrimary);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stats-avg-unit {
  font-size: var(--fontSizeMD);
  color: var(--textSecondary);
  font-weight: var(--fontWeightMedium);
}
.stats-avg-dim {
  margin: 0;
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}

.stats-reset-hint {
  font-size: var(--fontSizeSM);
  color: var(--textTertiary);
  margin: var(--space-4) 0 0;
}
.stats-placeholder { padding: var(--space-8) 0; text-align: center; color: var(--textSecondary); }
.stats-placeholder .stats-dim { font-size: var(--fontSizeSM); color: var(--textTertiary); margin-top: var(--space-2); }

/* 강화/예측 서브탭 — 등급·상태·안정성 바 */
.stats-rating-bars, .stats-stability-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.stats-rating-row {
  display: grid;
  grid-template-columns: 60px 1fr 40px;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fontSizeSM);
}
.stats-rating-label { color: var(--textSecondary); }
.stats-rating-bar {
  position: relative;
  height: 8px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.stats-rating-bar::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--pct, 0%);
  background: var(--colorAccent);
  transition: width var(--dur-base) var(--ease-ios);
}
.stats-rating-bar.rating-again::after { background: var(--colorError); }
.stats-rating-bar.rating-hard::after  { background: var(--colorWarning); }
.stats-rating-bar.rating-good::after  { background: var(--colorAccent); }
.stats-rating-bar.rating-easy::after  { background: var(--colorSuccess); }
.stats-rating-bar.stab-short::after { background: var(--colorError); }
.stats-rating-bar.stab-mid::after   { background: var(--colorWarning); }
.stats-rating-bar.stab-long::after  { background: var(--colorAccent); }
.stats-rating-bar.stab-vlong::after { background: var(--colorSuccess); }
.stats-rating-v { text-align: right; color: var(--textSecondary); }

.stats-state-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}
.stats-state-tile {
  /* KPI 타일과 같은 구조 토큰 — 테마 전환 시 자동 변주 */
  padding: var(--tilePadding);
  background: var(--tileBg);
  border: var(--tileBorder) solid var(--cardBorder);
  border-radius: var(--tileRadius);
  text-align: center;
}
.stats-state-num { font-size: 22px; font-weight: var(--fontWeightSemibold); }
.stats-state-label { font-size: var(--fontSizeSM); color: var(--textSecondary); margin-top: var(--space-1); }
.stats-state-pct { font-size: var(--fontSizeXS); color: var(--textTertiary); }
.state-new      .stats-state-num { color: var(--textPrimary); }
.state-learning .stats-state-num { color: var(--colorWarning); }
.state-mature   .stats-state-num { color: var(--colorSuccess); }

.stats-again-count { margin: 0 0 var(--space-1); font-size: var(--fontSizeMD); color: var(--colorError); }
.stats-avg-days { margin: 0; font-size: var(--fontSizeMD); }

/* =========================================================================
 * 3.86 퀴즈 화면 (components §3.1.6 — MC 전용 P1)
 * ========================================================================= */
.quiz { padding: calc(var(--space-4) * var(--contentDensity)); display: flex; flex-direction: column; gap: calc(var(--space-4) * var(--contentDensity)); min-height: 100vh; }
.quiz-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.quiz-title { margin: 0; font-size: calc(24px * var(--heroScale)); font-weight: var(--titleWeight); letter-spacing: -0.01em; }
.quiz-dim { color: var(--textSecondary); font-size: var(--fontSizeSM); margin: 0; }
.quiz-progress { color: var(--textSecondary); font-size: var(--fontSizeSM); }

.quiz-deck-list { display: flex; flex-direction: column; gap: var(--space-2); }
.quiz-deck-btn {
  appearance: none;
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  cursor: pointer;
  text-align: left;
}
.quiz-deck-btn:hover { background: var(--bgSecondary); }
.quiz-deck-btn-meta { font-size: var(--fontSizeSM); color: var(--textSecondary); }

.quiz-question { padding: var(--space-4); text-align: center; }
.quiz-q-label { font-size: var(--fontSizeSM); color: var(--textSecondary); margin: 0 0 var(--space-2); }
.quiz-q-text { margin: 0; font-size: var(--fontSizeXL); font-weight: var(--fontWeightSemibold); color: var(--cardWordColor); }

.quiz-options { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.quiz-option {
  appearance: none;
  width: 100%;
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  cursor: pointer;
  text-align: left;
  min-height: 56pt;
  transition: transform var(--dur-instant) var(--ease-standard), border-color var(--dur-fast);
}
.quiz-option:active:not(:disabled) { transform: scale(0.98); }
.quiz-option-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bgSecondary);
  color: var(--textSecondary);
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  flex-shrink: 0;
}
.quiz-option.is-correct { border-color: var(--colorSuccess); color: var(--colorSuccess); }
.quiz-option.is-correct .quiz-option-index { background: var(--colorSuccess); color: #fff; }
.quiz-option.is-wrong { border-color: var(--colorError); color: var(--colorError); }
.quiz-option.is-wrong .quiz-option-index { background: var(--colorError); color: #fff; }

.quiz-typing-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}
.quiz-typing-input {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fontSizeLG);
  font-family: var(--fontFamily);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgPrimary);
  color: var(--textPrimary);
  text-align: center;
  transition: border-color var(--dur-fast);
}
.quiz-typing-input:focus-visible {
  outline: 2px solid var(--focusRing);
  outline-offset: 1px;
  border-color: transparent;
}
.quiz-typing-input.is-correct { border-color: var(--colorSuccess); color: var(--colorSuccess); }
.quiz-typing-input.is-wrong   { border-color: var(--colorError); color: var(--colorError); }

.quiz-feedback {
  text-align: center;
  margin: var(--space-2) 0 0;
  min-height: 1.5em;
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.quiz-feedback[data-correct="true"]  { color: var(--colorSuccess); }
.quiz-feedback[data-correct="false"] { color: var(--colorError); }

.quiz-summary { text-align: center; padding: var(--space-6) 0; }
.quiz-score { margin: 0; font-size: 40px; font-weight: var(--fontWeightSemibold); color: var(--colorAccent); }
.quiz-rate  { margin: var(--space-2) 0 0; font-size: var(--fontSizeLG); }
.quiz-time  { margin: var(--space-1) 0 0; font-size: var(--fontSizeSM); color: var(--textSecondary); }

.quiz-wrong-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.quiz-wrong-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--bgSecondary);
}
.quiz-wrong-q { font-weight: var(--fontWeightMedium); }
.quiz-wrong-a { color: var(--textSecondary); font-size: var(--fontSizeSM); }

.quiz-end-actions { margin-top: var(--space-6); text-align: center; }
.quiz-end-actions .btn-cta { display: inline-flex; }

/* =========================================================================
 * 3.90 온보딩 (components §3.6)
 * ========================================================================= */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.onboarding-overlay[hidden] { display: none; }
.onboarding-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-ios);
  pointer-events: auto;
}
.onboarding-overlay[data-visible="true"] .onboarding-dim { opacity: 1; }
.onboarding-card {
  position: relative;
  background: var(--cardBg);
  color: var(--textPrimary);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: calc(100% - var(--space-8));
  box-shadow: var(--shadow-lg);
  transform: translateY(20px);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-ios), opacity var(--dur-base) var(--ease-ios);
  pointer-events: auto;
}
.onboarding-overlay[data-visible="true"] .onboarding-card { transform: translateY(0); opacity: 1; }
.onboarding-counter { margin: 0 0 var(--space-2); color: var(--textSecondary); font-size: var(--fontSizeSM); }
.onboarding-title { margin: 0 0 var(--space-2); font-size: var(--fontSizeLG); font-weight: var(--fontWeightSemibold); }
.onboarding-body { margin: 0 0 var(--space-5); font-size: var(--fontSizeBase); line-height: var(--lineHeightBase); color: var(--textSecondary); }
.onboarding-actions { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }

/* =========================================================================
 * 3.89 카드 편집 모달 (components §3.8)
 * ========================================================================= */
.card-edit-sheet { max-width: 680px; }
/* body는 sheet 내부 세로 스크롤 컨테이너 — header(fixed)를 제외한 공간만 스크롤.
   예전엔 overflow 속성이 없어 컨텐츠가 clipped되고 사용자가 backdrop을 스크롤하면 뒤 페이지가 움직이는 것처럼 느껴졌음. */
.ce-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-2);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ce-slot {
  box-sizing: border-box;  /* 부모 폭을 넘지 않도록 padding/border 포함 계산 */
  width: 100%;
  resize: vertical;
  min-height: 44pt;
  padding: var(--space-2);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  background: var(--bgPrimary);
  color: var(--textPrimary);
}
.ce-slot:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 1px; border-color: transparent; }
.ce-slot-side { font-size: var(--fontSizeXS); color: var(--textTertiary); margin-left: var(--space-1); }
.ce-tags { display: flex; flex-direction: column; gap: var(--space-2); }
.ce-tag-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ce-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  font-size: var(--fontSizeSM);
}
.ce-tag-remove {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--textSecondary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
}
.ce-tag-input {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-2);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  background: var(--bgPrimary);
  color: var(--textPrimary);
}
/* 모달/시트 내 모든 input/select/textarea의 폭 누수 방지 */
.card-edit-sheet input,
.card-edit-sheet select,
.card-edit-sheet textarea {
  box-sizing: border-box;
  max-width: 100%;
}
.ce-danger { padding-top: var(--space-3); border-top: 1px solid var(--bgSecondary); }

/* 프리뷰 */
.ce-preview { display: flex; flex-direction: column; gap: var(--space-2); }
.ce-preview-tabs { display: inline-flex; gap: 0; background: var(--bgSecondary); border-radius: var(--radius-sm); padding: 2px; width: fit-content; }
.ce-preview-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-1) var(--space-3);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.ce-preview-tab[data-active="true"] { background: var(--cardBg); color: var(--textPrimary); box-shadow: var(--shadow-sm); }
.ce-preview-card {
  min-height: 160px;
  padding: var(--space-3);
  background: var(--cardBg);
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--radius-md);
}

/* 미디어 업로드 */
.ce-media { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--bgSecondary); }
.ce-media-slot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fontSizeSM); color: var(--textSecondary); }
.ce-media-target {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  background: var(--bgPrimary);
  color: var(--textPrimary);
  font-family: var(--fontFamily);
}
.ce-media-picker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ce-media-filename {
  font-size: var(--fontSizeSM);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 0;
}
.ce-media-file {
  padding: var(--space-2);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeSM);
}
.ce-media-hint { margin: 0; font-size: var(--fontSizeXS); color: var(--textTertiary); }
.card-edit-sheet .sheet-header { gap: var(--space-2); }
.card-edit-sheet .sheet-header .btn-cta { min-height: 44pt; padding: var(--space-2) var(--space-4); }

/* =========================================================================
 * 3.88 자유 복습 화면 (components §3.1.8)
 * ========================================================================= */
.free { padding: calc(var(--space-4) * var(--contentDensity)); display: flex; flex-direction: column; gap: calc(var(--space-4) * var(--contentDensity)); min-height: 100vh; }
.free-mode-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bgSecondary);
  color: var(--textSecondary);
  font-size: var(--fontSizeXS);
  margin: 0;
  width: fit-content;
}
/* 시트 옵션 row 헤더 — 좌측 타이틀, 우측 보조 배지(예: 연습 모드) */
.sheet-opt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.sheet-opt-head .section-title { margin: 0; }
/* free 모드 — 셔플 체크박스와 "연습 모드" 배지를 한 줄에 배치 */
.shuffle-with-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.shuffle-with-badge .check-row { flex: 0 0 auto; }

/* Custom 테마 미리보기 미니어처 — 설정>외형>Custom 패널 안.
 * 실제 카드 뒷면(600×400, 3:2)을 240px 폭으로 축소 렌더. 슬라이더/세그먼트 변경마다 즉시 갱신. */
.ct-preview-wrap {
  margin: var(--space-3) 0;
}
.ct-preview-card {
  position: relative;
  width: 240px;
  aspect-ratio: 3 / 2;
  border-radius: var(--cardRadius, 12px);
  border: var(--cardBorderWidth, 1px) solid var(--cardBorder);
  background: var(--cardBackBg, var(--cardBg));
  box-shadow: var(--cardShadow);
  overflow: hidden;
}
.ct-preview-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}
.ct-preview-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--cardBackBg, rgba(0, 0, 0, 0.3));
  opacity: 0.7;
  pointer-events: none;
}
.ct-preview-content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--textPrimary);
  font-size: var(--fontSizeS);
  opacity: 0.6;
  pointer-events: none;
}

/* Pull_Forward 슬라이더 (multi-deck-composition Req 11)
 * 학습(FSRS) 모드 옵션 — 자정 이전 미래 due 카드를 N장 미리 끌어오기.
 * default 0 (맨 좌측 = OFF), value > 0이면 mild hint, ≥ 70%면 strong hint(warning 톤).
 */
.opt-pullforward {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.combined-pullforward-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--bgSecondary);
  outline: none;
  cursor: pointer;
}
.combined-pullforward-slider:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.combined-pullforward-slider[data-zero="false"] {
  background: linear-gradient(
    to right,
    var(--colorAccent) 0%,
    var(--colorAccent) calc((var(--pullforward-pct, 0)) * 1%),
    var(--bgSecondary) calc((var(--pullforward-pct, 0)) * 1%),
    var(--bgSecondary) 100%
  );
}
.combined-pullforward-slider[data-strong="true"] {
  background: linear-gradient(
    to right,
    var(--rating1) 0%,
    var(--rating1) calc((var(--pullforward-pct, 0)) * 1%),
    var(--bgSecondary) calc((var(--pullforward-pct, 0)) * 1%),
    var(--bgSecondary) 100%
  );
}
.combined-pullforward-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--colorAccent);
  border: 2px solid var(--bgPrimary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.combined-pullforward-slider:disabled::-webkit-slider-thumb {
  background: var(--textSecondary);
}
.combined-pullforward-slider[data-strong="true"]::-webkit-slider-thumb {
  background: var(--rating1);
}
.combined-pullforward-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--colorAccent);
  border: 2px solid var(--bgPrimary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.combined-pullforward-slider:disabled::-moz-range-thumb {
  background: var(--textSecondary);
}
.combined-pullforward-slider[data-strong="true"]::-moz-range-thumb {
  background: var(--rating1);
}
.combined-pullforward-readout {
  font-size: var(--fontSizeS);
  color: var(--textPrimary);
  font-weight: var(--fontWeightMedium);
}
.combined-pullforward-hint {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  margin: 0;
  line-height: 1.4;
}
.combined-pullforward-slider[data-strong="true"] + .combined-pullforward-readout + .combined-pullforward-hint {
  color: var(--rating1);
}
.shuffle-with-badge .free-mode-badge { margin-left: auto; }
.free-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bgSecondary);
  color: var(--textSecondary);
  font-size: var(--fontSizeXS);
  margin-right: var(--space-2);
}
/* 자유 복습 — 평가 4버튼 공간을 브라우징 바(이전·북마크·다음)로 재사용.
 * 학습 평가 바와 시각 일관성 유지: pill 형태 + floating shadow + stretch grid.
 * (학습 .study-rate .btn-rate 규격을 그대로 맞춤) */
.free-nav {
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: stretch;
  justify-items: stretch;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.free-nav .btn-rate {
  width: 100%;
  min-height: 56pt;
  padding: 0 var(--space-3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  text-align: center;
  line-height: 1.1;
  color: var(--textPrimary);
  border-radius: var(--radius-pill);
  transform: translateY(var(--fc-float-lift, 0));
  box-shadow:
    0 6px 18px -8px color-mix(in srgb, #000 calc(22% * var(--fc-float-shadow, 1)), transparent),
    0 12px 28px -14px color-mix(
      in srgb,
      var(--deck-accent, #000) calc(20% * var(--fc-float-shadow, 1)),
      transparent
    );
  transition:
    transform var(--dur-instant) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-ios),
    opacity var(--dur-fast);
}
.free-nav .btn-rate:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}
.free-nav .btn-rate svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 북마크 활성 시 강조 — 테두리/색 accent */
.free-nav .free-nav-bookmark[aria-pressed="true"] {
  color: var(--colorAccent);
  border-color: var(--colorAccent);
}
.free-nav .btn-rate[disabled] {
  opacity: 0.35;
  cursor: default;
  transform: none;
  box-shadow: none;
}
/* legacy selector 호환 — 혹시 남아 있는 btn-text 구조에도 disable 처리 */
.free-nav .btn-text[disabled] { opacity: 0.4; cursor: default; }

/* 북마크 관리 (설정 탭) — 상태 바 + 카드 리스트. 가로 레이아웃으로 한 줄에 덱·front·해제 버튼. */
.bookmarks-panel { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) 0; }
.bookmarks-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fontSizeSM);
}
.bookmarks-clear-all { font-size: var(--fontSizeSM); color: var(--colorDanger, #c14); }
.bookmarks-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.bookmarks-group { list-style: none; }
.bookmarks-deck-fold {
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgSecondary);
  overflow: hidden;
}
.bookmarks-deck-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-weight: var(--fontWeightMedium);
}
.bookmarks-deck-summary::-webkit-details-marker { display: none; }
.bookmarks-fold-chev {
  flex-shrink: 0;
  color: var(--textSecondary);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.bookmarks-deck-fold[open] .bookmarks-fold-chev { transform: rotate(90deg); }
.bookmarks-deck-name {
  flex: 1;
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bookmarks-deck-count {
  flex-shrink: 0;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  background: var(--bgTertiary);
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
}
.bookmarks-cards {
  list-style: none;
  margin: 0;
  padding: var(--space-1) var(--space-2) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.bookmarks-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm, 8px);
  background: var(--bgPrimary);
  min-width: 0;        /* grid track shrink 허용 — ellipsis 작동 보장 */
}
.bookmarks-faces {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  min-width: 0;
  overflow: hidden;
}
.bookmarks-front {
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  font-weight: var(--fontWeightMedium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 0 1 auto;
  max-width: 60%;
}
.bookmarks-sep {
  color: var(--textTertiary);
  flex-shrink: 0;
}
.bookmarks-back {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.bookmarks-remove { color: var(--colorAccent); }
.bookmarks-remove:hover { color: var(--colorDanger, #c14); }

/* 퀴즈 보조 영역 — TTS 없음. 좌측 spacer로 폭을 맞춰 키보드 힌트를 우측에 고정. */
.quiz-aux .quiz-aux-spacer { width: 36px; height: 36px; flex-shrink: 0; }

/* =========================================================================
 * 3.87 약점 복습 화면 (components §3.1.7)
 * ========================================================================= */
.weak { padding: calc(var(--space-4) * var(--contentDensity)); display: flex; flex-direction: column; gap: calc(var(--space-4) * var(--contentDensity)); min-height: 100vh; }
.weak-header { display: flex; align-items: center; justify-content: space-between; }
.weak-title { margin: 0; font-size: calc(24px * var(--heroScale)); font-weight: var(--titleWeight); letter-spacing: -0.01em; }
.weak-dim { color: var(--textSecondary); font-size: var(--fontSizeSM); margin: 0; }
.weak-deck-list { display: flex; flex-direction: column; gap: var(--space-2); }
.weak-deck-btn {
  appearance: none;
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  cursor: pointer;
  text-align: left;
}
.weak-deck-btn:hover { background: var(--bgSecondary); }
.weak-deck-btn-meta { font-size: var(--fontSizeSM); color: var(--textSecondary); }

/* =========================================================================
 * 3.85 학습 화면 (components §3.1)
 * ========================================================================= */
.study {
  position: relative;
  display: flex;
  flex-direction: column;
  /* 탭바는 fixed라 레이아웃 공간을 쓰지 않음 → 평가 바가 탭바 뒤에 숨는 것을 막기 위해
     하단 padding에 탭바 높이 + safe-area를 더한다. (몰입 모드에선 body[data-immersive]로 0 처리) */
  min-height: 100vh;
  padding: calc(var(--space-4) * var(--contentDensity));
  padding-bottom: calc(var(--tabbar-height) + var(--sa-bottom) + var(--space-3));
  gap: calc(var(--space-4) * var(--contentDensity));
  isolation: isolate;
}
body[data-immersive="true"] .study {
  padding-bottom: calc(var(--space-4) * var(--contentDensity));
}

/* =========================================================================
 * 4 학습 모드 body 배경 wash (POC §3.14) — Apple Music Now Playing 스타일
 * study/quiz/weak/free 진입 시 body[data-has-deck-accent="true"]로 세션 중
 * 뷰포트 전체가 덱 커버 색으로 물듦. 화면 전환(hashchange) 시 자동 해제.
 *
 * 테마 융합(study scope 한정, POC 단계):
 *   --deck-wash-strength : 0~1, 테마군별 덱 색 지배도
 *   --deck-wash-tint     : 테마 accent와 블렌드 비율 (0 = 순수 커버색, 1 = 순수 테마색)
 * ========================================================================= */
body[data-has-deck-accent="true"] {
  /* 기본값 = 활기 그룹과 동일 (커버 70% + 테마 accent 30% 블렌드).
   * 장식 테마만 아래에서 덮어씀. study scope 한정으로 테마 융합 체감 최대화. */
  --deck-wash-strength: 0.85;
  --deck-wash-tint: 0.3;
  --deck-wash-base: color-mix(
    in srgb,
    var(--deck-accent) calc(100% - var(--deck-wash-tint) * 100%),
    var(--colorAccent) calc(var(--deck-wash-tint) * 100%)
  );
  /* 그라디언트 스펙트럼을 상위 40% 구간(60~100%)으로 압축 — 하단이 덜 밝아짐.
   * 원 70/40/18 → 88/76/67 (60 + 원값 × 0.4) */
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--deck-wash-base) calc(88% * var(--deck-wash-strength)), var(--bgPrimary)) 0%,
      color-mix(in srgb, var(--deck-wash-base) calc(76% * var(--deck-wash-strength)), var(--bgPrimary)) 50%,
      color-mix(in srgb, var(--deck-wash-base) calc(67% * var(--deck-wash-strength)), var(--bgPrimary)) 100%
    ) fixed;
  transition: background var(--dur-base) var(--ease-ios);
}
/* 장식 테마: 커버색 약화, 테마 장식(matrix 레인·hacker 그리드·trump 외곽)이 주인공.
 * 주의: 이 오버라이드는 "균형(blend)" 모드에서만 의미 있음. "커버 중심(cover)" 모드는
 *       사용자가 명시적으로 커버색 전면을 원한 것이므로 아래 cover 규칙이 이 값을 덮어씀. */
body[data-theme="matrix"][data-has-deck-accent="true"][data-deck-palette-scope="study"],
body[data-theme="hacker"][data-has-deck-accent="true"][data-deck-palette-scope="study"],
body[data-theme="trump"][data-has-deck-accent="true"][data-deck-palette-scope="study"] {
  --deck-wash-strength: 0.35;
  --deck-wash-tint: 0;
}

/* =========================================================================
 * 덱 색 효과 모드 (설정 §3.7 외형) — "끄기 / 커버 중심 / 균형"
 *   off   : wash 전면 비활성 (JS가 clearBody()로 즉시 해제하지만, 잔존 data 플래그
 *           대응 위해 CSS에서도 strength=0 강제)
 *   cover : 커버 색 그대로, 테마 블렌드 0 → 장식 테마 약화 규칙도 뒤집음
 *   blend : 현재 기본값 유지 (위의 장식 테마 오버라이드도 그대로 작동)
 * body[data-deck-palette-mode]가 없으면 기본 blend로 동작.
 * ========================================================================= */
body[data-deck-palette-mode="off"][data-has-deck-accent="true"] {
  --deck-wash-strength: 0;
  --deck-wash-tint: 0;
  /* wash도 텍스트 색 변수도 의미 없어짐 — 테마 원본 복귀 */
  background: var(--bgPrimary);
}
/* 커버 중심 — 덱 색 100%, 테마 블렌드 0. spec §3.14.3 base linear gradient 그대로.
 * 장식 테마(matrix/hacker/trump)도 cover 모드에선 사용자 명시 의도라 동일 적용. */
body[data-deck-palette-mode="cover"][data-has-deck-accent="true"],
body[data-theme="matrix"][data-deck-palette-mode="cover"][data-has-deck-accent="true"][data-deck-palette-scope="study"],
body[data-theme="hacker"][data-deck-palette-mode="cover"][data-has-deck-accent="true"][data-deck-palette-scope="study"],
body[data-theme="trump"][data-deck-palette-mode="cover"][data-has-deck-accent="true"][data-deck-palette-scope="study"] {
  --deck-wash-strength: 1;
  --deck-wash-tint: 0;
}

/* #app·main#app은 기본 var(--bgPrimary)로 칠해 라우트 교체 시 흰 깜빡임을 막는데,
 * cover/blend 모드 + 학습/약점/자유/퀴즈 scope에서는 body의 gradient를 가려버림.
 * 해당 모드+scope에서만 #app 배경을 transparent로 해 body gradient가 비치게 한다.
 * (off 모드에선 body가 단색이라 #app 단색과 동등 → 영향 없음) */
body[data-deck-palette-mode="cover"][data-has-deck-accent="true"][data-deck-palette-scope] #app,
body[data-deck-palette-mode="cover"][data-has-deck-accent="true"][data-deck-palette-scope] main#app,
body[data-deck-palette-mode="cover"][data-has-deck-accent="true"][data-deck-palette-scope] main.app-main,
body[data-deck-palette-mode="blend"][data-has-deck-accent="true"][data-deck-palette-scope] #app,
body[data-deck-palette-mode="blend"][data-has-deck-accent="true"][data-deck-palette-scope] main#app,
body[data-deck-palette-mode="blend"][data-has-deck-accent="true"][data-deck-palette-scope] main.app-main,
/* mode 미지정(blend가 기본값) 케이스 */
body:not([data-deck-palette-mode])[data-has-deck-accent="true"][data-deck-palette-scope] #app,
body:not([data-deck-palette-mode])[data-has-deck-accent="true"][data-deck-palette-scope] main#app,
body:not([data-deck-palette-mode])[data-has-deck-accent="true"][data-deck-palette-scope] main.app-main {
  background-color: transparent;
}

/* 시트 내부 박스도 "끄기" 모드에선 wash 숨김 (시트는 scope 구분 없어 body attr 상속 활용).
 * .sheet-combined는 body의 자손이므로 body[data-deck-palette-mode="off"] 하위에서 매칭됨. */
body[data-deck-palette-mode="off"] .sheet-combined[data-has-deck-accent="true"] .sheet-decks::before,
body[data-deck-palette-mode="off"] .sheet-combined[data-has-deck-accent="true"] .sheet-opts-slot::before {
  display: none;
}

/* OFF 모드 안전장치 — JS가 apply(sheet, null)을 못 돌린 상태더라도 (초기 렌더 타이밍 등)
 * wash 배경이 숨겨졌으므로 텍스트도 테마 원본으로 돌아가야 한다. 아래 규칙이
 * --deck-text-on-wash를 강제로 초기화해 §3947+ 의 "wash 위 텍스트" 규칙이 자동으로
 * `var(..., fallback)`의 fallback(--textPrimary/--textSecondary)으로 되돌아가게 함. */
body[data-deck-palette-mode="off"] .sheet-combined {
  --deck-text-on-wash: initial;
  --deck-text-on-wash-secondary: initial;
}

/* =========================================================================
 * 덱 wash 가독성 보강 (POC §3.14 — 휘도 기반 동적 텍스트 색)
 * wash 배경이 덱 커버마다 밝기 달라 고정 --textPrimary 위에 올라가면 대비 깨짐.
 * deckPalette.js가 주입하는 --deck-text-on-wash(주)·-secondary(보조) 변수 사용.
 * wash가 덮이지 않는 카드 본문(.study-card)은 이미 --cardBg 패널 위 → 테마색 유지.
 * ========================================================================= */

/* 학습 툴바(뒤로·진행률·편집·몰입)가 wash 위에 직접 올라감 */
body[data-has-deck-accent="true"] .study-toolbar,
body[data-has-deck-accent="true"] .study-toolbar .btn-text {
  color: var(--deck-text-on-wash, var(--textPrimary));
}
body[data-has-deck-accent="true"] .study-progress {
  color: var(--deck-text-on-wash-secondary, var(--textSecondary));
}

/* 시트 두 박스 내부 텍스트 */
/*   주(primary): 덱 이름 · 전체 선택 라벨 · 체크 라벨 · 옵션 섹션 타이틀 */
.sheet-combined[data-has-deck-accent="true"] .deck-check-name,
.sheet-combined[data-has-deck-accent="true"] .deck-check-all .check-label,
.sheet-combined[data-has-deck-accent="true"] .sheet-opts-slot .check-label,
.sheet-combined[data-has-deck-accent="true"] .sheet-opts-slot .section-title {
  color: var(--deck-text-on-wash, var(--textPrimary));
}
/*   보조(secondary): 덱 카운트 · "N장 가능" · 흐릿 레이블 */
.sheet-combined[data-has-deck-accent="true"] .deck-check-meta,
.sheet-combined[data-has-deck-accent="true"] .sheet-total-avail,
.sheet-combined[data-has-deck-accent="true"] .sheet-opts-slot .sheet-dim {
  color: var(--deck-text-on-wash-secondary, var(--textSecondary));
}

/* =========================================================================
 * 덱 색 레이어 (POC §3.14)
 * 커버가 있는 덱만 --deck-accent / --deck-accent-soft를 받아 wash + halo 생성.
 * 테마 DNA 보호를 위해 중앙 카드 영역은 --cardBg 그대로, 가장자리에만 얹는다.
 * 테마군별 강도(--deck-wash-strength)로 차등 적용:
 *   - 중성 (ocean/classic/sand/mono/system) : 1.0 (기본)
 *   - 활기 (forest/blossom/ember/neon)       : 0.75
 *   - 장식 (matrix/hacker/trump)             : 0.0~0.2 (장식 보호)
 * ========================================================================= */
.study[data-has-deck-accent="true"] {
  --deck-wash-strength: 1;
}
.study[data-has-deck-accent="true"]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      140% 100% at 50% 0%,
      color-mix(in srgb, var(--deck-accent) calc(90% * var(--deck-wash-strength)), transparent) 0%,
      color-mix(in srgb, var(--deck-accent) calc(35% * var(--deck-wash-strength)), transparent) 55%,
      transparent 100%
    ),
    radial-gradient(
      130% 90% at 50% 100%,
      color-mix(in srgb, var(--deck-accent) calc(70% * var(--deck-wash-strength)), transparent) 0%,
      transparent 80%
    );
  transition: background var(--dur-base) var(--ease-ios);
}
.study[data-has-deck-accent="true"] > * {
  position: relative;
  z-index: 1;
}
/* 카드 halo — 테두리 색 + 약한 cardBg tint를 덱 색으로 살짝 밀어 올림.
 * 약한 tint(15% × wash strength)만 적용해 콘텐츠 가독성 + 테마 cardBg 의미 보존.
 * off 모드(strength=0)에선 자동으로 cardBg 원본 그대로. */
.study[data-has-deck-accent="true"] .study-card {
  border-color: color-mix(
    in srgb,
    var(--cardBorder) calc(85% - 35% * var(--deck-wash-strength)),
    var(--deck-accent)
  );
  background: color-mix(
    in srgb,
    var(--cardBgGradient, var(--cardBg)) calc(100% - 15% * var(--deck-wash-strength)),
    var(--deck-accent) calc(15% * var(--deck-wash-strength))
  );
  box-shadow:
    var(--cardShadow),
    0 0 0 1px color-mix(in srgb, var(--deck-accent) calc(12% * var(--deck-wash-strength)), transparent),
    0 20px 40px -20px color-mix(in srgb, var(--deck-accent) calc(30% * var(--deck-wash-strength)), transparent);
  transition:
    border-color var(--dur-base) var(--ease-ios),
    background var(--dur-base) var(--ease-ios),
    box-shadow var(--dur-base) var(--ease-ios),
    transform var(--dur-base) var(--ease-ios);
}
/* 카드 뒷면도 같은 약 tint 정책 — 덱 분위기 일관 */
.study[data-has-deck-accent="true"] .study-card-back {
  background: color-mix(
    in srgb,
    var(--cardBackBg, var(--cardBgGradient, var(--cardBg))) calc(100% - 15% * var(--deck-wash-strength)),
    var(--deck-accent) calc(15% * var(--deck-wash-strength))
  );
  transition: background var(--dur-base) var(--ease-ios);
}

/* 테마군별 강도 오버라이드 */
[data-theme="forest"]   .study[data-has-deck-accent="true"],
[data-theme="blossom"]  .study[data-has-deck-accent="true"],
[data-theme="ember"]    .study[data-has-deck-accent="true"],
[data-theme="neon"]     .study[data-has-deck-accent="true"] {
  --deck-wash-strength: 0.75;
}
[data-theme="matrix"]   .study[data-has-deck-accent="true"],
[data-theme="hacker"]   .study[data-has-deck-accent="true"],
[data-theme="trump"]    .study[data-has-deck-accent="true"] {
  --deck-wash-strength: 0.2;
}

/* 모션 감소 시 wash 전환은 즉시 */
@media (prefers-reduced-motion: reduce) {
  .study[data-has-deck-accent="true"]::before,
  .study[data-has-deck-accent="true"] .study-card { transition: none; }
}
.study-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 40pt;
}
.study-toolbar-left,
.study-toolbar-right {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.study-toolbar-right { justify-self: end; }
/* 손잡이 left — 툴바 좌/우 그룹 swap. 그룹 내부도 역순.
 *   원래 우측 그룹(undo/edit/immersive: 취소→편집→몰입) → 좌상단에 [몰입][편집][취소]
 *   원래 좌측 그룹(back/close: 덱목록→시작모달) → 우상단에 [시작모달][덱목록]
 *   가운데 진행 박스는 그대로 가운데. */
[data-handedness="left"] .study-toolbar {
  direction: rtl;
}
[data-handedness="left"] .study-toolbar > * {
  direction: ltr; /* 자식의 텍스트/data-tip은 정상 ltr */
}
[data-handedness="left"] .study-toolbar .study-toolbar-left,
[data-handedness="left"] .study-toolbar .study-toolbar-right {
  flex-direction: row-reverse; /* 그룹 내부 버튼 순서도 역순 */
}
[data-handedness="left"] .study-toolbar .study-toolbar-left  { justify-self: end; }
[data-handedness="left"] .study-toolbar .study-toolbar-right { justify-self: start; }
/* 툴바 아이콘 버튼 — 배경 가시화.
 *   이전의 "패널 없는 floating" 규칙으로 background: transparent가 상속돼 버튼이
 *   안 보이던 문제 수정. bgPrimary + cardBorder로 학습/관리 탭의 pill 컨트롤과
 *   같은 언어 유지. 텍스트 색은 --textPrimary(테마/다크모드에 따라 동적). */
.study-toolbar .btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--textPrimary);
  background: var(--bgPrimary);
  border: 1px solid var(--cardBorder);
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-instant) var(--ease-standard);
}
.study-toolbar .btn-icon:hover {
  background: var(--bgSecondary);
  border-color: var(--colorAccent);
  color: var(--colorAccent);
}
.study-toolbar .btn-icon:active:not(:disabled) { transform: scale(0.94); }
.study-toolbar .btn-icon:disabled { opacity: 0.35; cursor: default; }
.study-toolbar .btn-icon svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* 학습 툴바는 화면 최상단 — tooltip을 아래 방향으로 띄움 (기본 upward는 viewport 위로 잘림) */
.study-toolbar [data-tip]::after,
.study-progress[data-tip]::after {
  bottom: auto;
  top: calc(100% + 6px);
}
/* 우측 끝 버튼(몰입 등)은 tooltip이 화면 오른쪽 가장자리를 넘지 않도록 right-anchor */
.study-toolbar-right > [data-tip]:last-child::after {
  left: auto;
  right: 0;
  transform: none;
}

/* 카드 하단 보조 컨트롤 — 좌하단 TTS는 left-anchor, 우하단 키보드 토글은 right-anchor */
.study-aux .study-tts[data-tip]::after {
  left: 0;
  transform: none;
}
.study-aux .study-kb-hint .study-kb-toggle[data-tip]::after {
  left: auto;
  right: 0;
  transform: none;
}

/* 상단 진행/컨텍스트 정보 — 정보 전용 박스 (시트 재열기는 ✕ 버튼이 담당).
 *   덱이름이 길어도 박스가 커지지 않도록 "덱이름만" ellipsis 처리. "학습 · N/M" 메타와
 *   방향 아이콘은 축소되지 않는다. 전체 폭은 500px로 상한(가독성 중심 확대 — v622ge). */
.study-progress {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  height: 42px;
  box-sizing: border-box;
  padding: 0 var(--space-5) 0 var(--space-5);
  max-width: min(500px, 100%);
  background: var(--bgPrimary);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-size: var(--fontSizeMD);
  color: var(--deck-text-on-wash, var(--textPrimary));
  font-weight: var(--fontWeightMedium);
}
/* 덱이름 — 박스가 공간 부족이면 여기만 줄어들고 ellipsis */
.study-progress-deck {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* '·' 구분자 — 간격만 담당, 필요 시 hide */
.study-progress-sep {
  flex-shrink: 0;
  opacity: 0.5;
}
/* 메타(학습 · N/M) — 축소 금지 + 현재 학습 상태 강조 */
.study-progress-meta {
  flex-shrink: 0;
  white-space: nowrap;
}
/* 덱이름이 비어 있으면 구분자 숨김 (메타만 단독 출력) */
.study-progress-deck:empty + .study-progress-sep { display: none; }
/* 메타가 비어 있을 때는 JS에서 .study-progress-sep에 [hidden]을 토글하면 됨 — :has() 금지 정책 */
/* 중앙 박스 안 방향 아이콘 — 배경·테두리 없는 "표식" 스타일. 클릭하면 방향 전환. */
.study-progress .study-direction {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: inherit;
  border-radius: 4px;
  transition:
    background var(--dur-fast) var(--ease-standard),
    transform var(--dur-instant) var(--ease-standard);
}
.study-progress .study-direction:hover {
  background: color-mix(in srgb, var(--textPrimary) 10%, transparent);
}
.study-progress .study-direction:active { transform: scale(0.92); }
.study-progress .study-direction svg { width: 20px; height: 20px; }
/* 진행 텍스트가 비었을 때(초기 skeleton)에는 박스를 숨겨 깜빡임 방지.
 * Firefox :has() 회피 — study.js가 비어 있으면 data-empty="true"를 세팅한다. */
.study-progress[data-empty="true"] { visibility: hidden; }

/* 카드 아래 보조 컨트롤 — 좌: TTS, 우: 키보드 힌트(데스크탑 전용) */
.study-aux {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding: 0 var(--space-2);
  min-height: 36px;
}
/* 손잡이 left — TTS 버튼이 우측, 키 힌트가 좌측이 되도록 row 역방향. */
[data-handedness="left"] .study-aux { flex-direction: row-reverse; }
/* 키 힌트도 row-reverse: 토글이 좌측, 펼친 items는 토글 우측으로 슬라이딩.
 *   (default는 .study-kb-hint inline-flex의 normal 흐름이라 토글 우측 + items 좌측). */
[data-handedness="left"] .study-aux .study-kb-hint {
  flex-direction: row-reverse;
  margin-left: 0;
  margin-right: auto;
}
/* kb-key 진입 방향 — default는 translateX(32px → 0) (우→좌), left-hand는 (-32 → 0) 좌→우 */
[data-handedness="left"] .study-kb-items .kb-key { transform: translateX(-32px); }
[data-handedness="left"] .study-kb-hint[data-open="true"] .study-kb-items .kb-key { transform: translateX(0); }
.study-aux .study-tts {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bgPrimary);
  border: 1px solid var(--cardBorder);
  color: var(--colorAccent);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-instant) var(--ease-standard);
}
.study-aux .study-tts:hover { background: var(--bgSecondary); border-color: var(--colorAccent); }
.study-aux .study-tts:active { transform: scale(0.94); }
.study-aux .study-tts svg { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* 키보드 힌트 (데스크탑 전용, 접이식) — §3.1.2a
 * 레이아웃 전략: 토글 아이콘은 **우측 고정**, 힌트 리스트가 왼쪽으로 펼쳐짐.
 * 이를 위해 wrapper를 flex + 오른쪽 정렬, items가 먼저(DOM 순서), toggle이 나중.
 * items의 max-width만 0↔펼침 사이 트랜지션, toggle은 전혀 움직이지 않음.
 */
.study-kb-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  /* 힌트 items가 max-width=0일 때 토글만 보이도록 폭을 min-content로 제한 */
}
.study-kb-toggle {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--cardBorder);
  border-radius: 50%;
  background: var(--bgPrimary);
  /* 토글 색 — 테마의 textPrimary를 기본으로, 다크모드에서도 자동 대비 */
  color: var(--textPrimary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard);
}
.study-kb-toggle:hover { color: var(--colorAccent); border-color: var(--colorAccent); }
.study-kb-hint[data-open="true"] .study-kb-toggle {
  color: var(--colorAccent);
  border-color: var(--colorAccent);
}

.study-kb-items {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  overflow: hidden;
  max-width: 0;
  white-space: nowrap;
  /* 접힐 때는 기존 속도(dur-base ≈ 220ms) 유지 — 기본 transition이 close 방향에 적용됨. */
  transition:
    max-width var(--dur-base) var(--ease-ios);
}
/* 펼침(open)만 속도를 늦춰 "왼쪽으로 서서히 펼쳐지며 흘러나오는" 연출 — 컨테이너는 공간만 확보,
 *   실제 시각 모션은 개별 .kb-key가 stagger로 담당(아래 규칙). */
.study-kb-hint[data-open="true"] .study-kb-items {
  max-width: 640px;
  transition:
    max-width 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 각 키 항목은 우측에서 왼쪽으로 밀려들어오며 stagger 딜레이로 한 글자씩 펼쳐지듯 등장.
   접을 땐 전역 컨테이너가 max-width 0으로 빠르게 닫히면서 자연스럽게 사라진다(딜레이 없음). */
.study-kb-items .kb-key {
  opacity: 0;
  transform: translateX(32px);
  transition:
    opacity var(--dur-base) var(--ease-standard),
    transform 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.study-kb-hint[data-open="true"] .study-kb-items .kb-key {
  opacity: 1;
  transform: translateX(0);
}
/* stagger — 왼쪽 항목부터 먼저 드러나도록 nth-child별 delay */
.study-kb-hint[data-open="true"] .study-kb-items .kb-key:nth-child(1) { transition-delay: 60ms; }
.study-kb-hint[data-open="true"] .study-kb-items .kb-key:nth-child(2) { transition-delay: 120ms; }
.study-kb-hint[data-open="true"] .study-kb-items .kb-key:nth-child(3) { transition-delay: 180ms; }
.study-kb-hint[data-open="true"] .study-kb-items .kb-key:nth-child(4) { transition-delay: 240ms; }
.study-kb-hint[data-open="true"] .study-kb-items .kb-key:nth-child(5) { transition-delay: 300ms; }
.study-kb-hint[data-open="true"] .study-kb-items .kb-key:nth-child(6) { transition-delay: 360ms; }
.study-kb-hint[data-open="true"] .study-kb-items .kb-key:nth-child(7) { transition-delay: 420ms; }
/* 힌트 텍스트 — 테마 textPrimary 기반. 배경이 wash면 textOnWash 사용 */
.study-kb-items .kb-key {
  font-size: var(--fontSizeXS);
  color: var(--deck-text-on-wash, var(--textPrimary));
  white-space: nowrap;
  opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.study-kb-items .kb-key:hover { opacity: 1; }
.study-kb-items .kb-key em {
  font-style: normal;
  color: var(--deck-text-on-wash-secondary, var(--textSecondary));
  margin-left: 4px;
}
@media (prefers-reduced-motion: reduce) {
  .study-kb-items { transition: none; }
}
.study-stage {
  flex: 1 1 auto;
  min-height: 0;               /* flex child가 viewport 넘어서 밀어내지 않도록 */
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}
.study-card {
  width: 100%;
  max-width: 560px;
  /* Aspect ratio로 명시 높이를 주어 내부 slot-layout-container의 %-좌표가 정상 동작하게 함.
     (이전: min-height만 있어 자식의 height:100%가 계산되지 않아 슬롯이 한 점에 겹쳤음)
     stage 공간이 부족할 땐 aspect-ratio보다 max-height가 우선해 세로를 고정한다. */
  aspect-ratio: 3 / 2;
  max-height: 100%;
  min-height: 240px;
  padding: calc(var(--space-8) * var(--contentDensity)) calc(var(--space-6) * var(--contentDensity));
  box-sizing: border-box;
  /* 앞면 배경 역할 — gradient 있으면 우선, 없으면 cardBg 단색. 테마별 톤 명확 반영. */
  background: var(--cardBgGradient, var(--cardBg));
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  position: relative;
  white-space: pre-wrap;
  font-size: var(--fontSizeCard);
  line-height: var(--lineHeightTight);
  cursor: pointer;
  transition: transform var(--dur-base) var(--ease-ios);
}
.study-card:active { transform: scale(0.99); }
/* 카드 양면을 카드 박스 안쪽에 꽉 채워 CardRenderer 출력물의 %-좌표가 유효하도록 함 */
.study-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* face 자체 border-radius로 .study-card 모서리를 따라 배경이 잘림 */
  border-radius: inherit;
  overflow: hidden;
}
/* 뒷면에만 --cardBackBg 적용 → 앞/뒷면 시각적 구분.
   front는 투명 유지(.study-card의 gradient 그대로 보임). */
.study-card-back {
  background: var(--cardBackBg, var(--cardBgGradient, var(--cardBg)));
}

/* CardRenderer 결과물 최소 스타일 (legacy 포팅 세부는 후속) */
.card-renderer-face {
  position: relative;
  width: 100%;
  /* 부모(.study-card-face / .ce-preview-card)가 명시 높이를 갖는 경우 슬롯이 %-좌표로 배치되도록 height:100% */
  height: 100%;
  min-height: 180px;
  padding: var(--space-4);
  box-sizing: border-box;
}
.card-face-content {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.slot-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  max-width: 100%;
}
.slot-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  white-space: pre-wrap;
  word-break: break-word;
}
.slot-item-text { font-size: inherit; line-height: var(--lineHeightTight); }
.slot-media-img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.slot-media-video { max-width: 100%; border-radius: var(--radius-sm); }

/* 슬롯 오디오 재생 버튼 (슬롯 내부, 카드 뒷면에서 재생) */
.slot-audio-player {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.slot-audio-btn {
  appearance: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  /* 테두리와 내부 아이콘 색을 동일하게 → 다크 모드에서도 선명 */
  border: 1px solid currentColor;
  color: var(--colorAccent);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: transform var(--dur-instant) var(--ease-standard), background var(--dur-fast);
}
.slot-audio-btn:hover { background: color-mix(in srgb, var(--colorAccent) 12%, transparent); }
.slot-audio-btn:active { transform: scale(0.92); }
.slot-audio-btn:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 2px; }

/* 단일 SVG: play ↔ pause는 JS가 <use href> 만 교체 */
.slot-audio-icon {
  display: inline-block;
  color: currentColor;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.study-rate {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
/* 손잡이 left — 평가 버튼 4개 순서 역방향 (몰랐어요 우측, 확실해요 좌측).
 * 엄지가 가까운 위치에 자주 쓰는 버튼(쉬움쪽)을 두는 의도. */
[data-handedness="left"] .study-rate {
  direction: rtl;
}
[data-handedness="left"] .study-rate .btn-rate {
  direction: ltr; /* 버튼 내부 텍스트는 정상 ltr */
}
.btn-rate {
  appearance: none;
  cursor: pointer;
  min-height: 56pt;
  border-radius: var(--tileRadius);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  font-weight: var(--titleWeight);
  border: 1px solid var(--cardBorder);
  background: var(--bgSecondary);
  color: var(--textPrimary);
  transition: transform var(--dur-instant) var(--ease-standard), opacity var(--dur-fast);
  letter-spacing: -0.01em;
}
[data-theme="hacker"] .btn-rate { font-family: var(--fontFamilyMono); text-transform: uppercase; letter-spacing: 0.1em; }
[data-theme="mono"] .btn-rate { text-transform: uppercase; letter-spacing: 0.05em; font-size: var(--fontSizeSM); }
.btn-rate:active:not(:disabled) { transform: scale(0.94); }
.btn-rate:disabled { opacity: 0.4; cursor: default; }
.btn-rate.rate-again { color: var(--rating1); }
.btn-rate.rate-hard  { color: var(--rating2); }
.btn-rate.rate-good  { color: var(--rating3); }
.btn-rate.rate-easy  { color: var(--rating4); }

.study-empty {
  text-align: center;
  margin-top: var(--space-10);
}
.study-empty-msg {
  font-size: var(--fontSizeLG);
  color: var(--textSecondary);
  margin-bottom: var(--space-6);
}

/* =========================================================================
 * Floating 스타일 (§3.1.4, v2.8) — 공중에 떠 있는 느낌
 *
 *   4요소: 다층 box-shadow + 넓은 반경 + 미묘한 배경 톤 차이 + 주변 여백
 *   backdrop-filter 금지 정책 준수. color-mix로 테마·모드 자동 상속.
 *
 *   강도 변수:
 *     --fc-float-shadow : 0~1, shadow 강도 (기본 1, 장식 테마 0.4)
 *     --fc-float-lift   : px, 상방 이동 양 (기본 -2, 장식 0)
 *   테마군별로 오버라이드.
 *
 *   덱 팔레트(§3.14)와의 조합:
 *     덱 accent가 있으면 원거리 shadow 레이어에 살짝 섞어 "wash 색이 그림자까지 누출"
 *     시각 효과. 누출 강도는 --deck-wash-strength에 비례.
 * ========================================================================= */
.study {
  --fc-float-shadow: 1;
  --fc-float-lift: -2px;
}

/* 테마군별 강도 차등 — §3.1.4 표 반영 */
[data-theme="forest"]   .study,
[data-theme="blossom"]  .study,
[data-theme="ember"]    .study,
[data-theme="neon"]     .study {
  --fc-float-shadow: 0.75;
  --fc-float-lift: -1px;
}
[data-theme="matrix"]   .study,
[data-theme="hacker"]   .study,
[data-theme="trump"]    .study {
  --fc-float-shadow: 0.4;
  --fc-float-lift: 0;
}

/* 카드 — 가장 강한 floating (시선 우선). 테마 토큰(--cardRadius, --cardBgGradient, --cardBg,
   --cardShadow, --cardBorder/Width)은 앞선 규칙(line 4614)에서 설정. 여기선 floating "lift"만 담당.
   이전에 있던 background/border-radius 하드코딩은 테마 개성을 덮어써 제거.
   box-shadow는 테마 cardShadow 위에 floating shadow를 보조로 얹는다. */
.study-card {
  transform: translateY(var(--fc-float-lift));
  transition:
    transform var(--dur-base) var(--ease-ios),
    box-shadow var(--dur-base) var(--ease-ios);
}

/* 툴바·하단 평가 바 — "패널 없는 floating":
 *   툴바/하단 블록 컨테이너는 투명. 정보 박스와 버튼들이 각자 배경 위에 떠 있는 느낌.
 */
.study-toolbar,
.study-rate {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

/* 상단 진행/컨텍스트 박스 — 학습/관리 탭 pill 컨트롤과 동일 언어 + floating */
.study-toolbar .study-progress {
  transform: translateY(var(--fc-float-lift));
  box-shadow:
    0 4px 14px -6px color-mix(in srgb, #000 calc(20% * var(--fc-float-shadow)), transparent),
    0 10px 24px -12px color-mix(
      in srgb,
      var(--deck-accent, #000) calc(18% * var(--fc-float-shadow)),
      transparent
    );
  transition:
    transform var(--dur-base) var(--ease-ios),
    box-shadow var(--dur-base) var(--ease-ios);
}

/* 평가 4버튼 — pill형. 가로로 넓게 4등분, 높이 56pt로 엄지 comfort 충족.
 *   4개 1fr 그리드 유지 + stretch로 전체 폭 사용. */
.study-rate {
  align-items: stretch;
  justify-items: stretch;
  padding: var(--space-2) 0;
}
.study-rate .btn-rate {
  min-height: 56pt;
  width: 100%;
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);   /* pill 형 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.1;
  transform: translateY(var(--fc-float-lift));
  box-shadow:
    0 6px 18px -8px color-mix(in srgb, #000 calc(22% * var(--fc-float-shadow)), transparent),
    0 12px 28px -14px color-mix(
      in srgb,
      var(--deck-accent, #000) calc(20% * var(--fc-float-shadow)),
      transparent
    );
  transition:
    transform var(--dur-instant) var(--ease-standard),
    box-shadow var(--dur-base) var(--ease-ios),
    opacity var(--dur-fast);
}
.study-rate .btn-rate:active:not(:disabled) {
  transform: translateY(0) scale(0.96);
}

/* 툴바 아이콘/텍스트 버튼 — 박스는 투명, SVG 선에만 drop-shadow로 가벼운 떠 있음 */
.study-toolbar .btn-icon,
.study-toolbar .btn-text {
  background: transparent;
}
.study-toolbar .btn-icon svg,
.study-toolbar .btn-text svg {
  filter: drop-shadow(
    0 2px 4px color-mix(in srgb, #000 calc(28% * var(--fc-float-shadow)), transparent)
  );
  transition: filter var(--dur-base) var(--ease-ios);
}

/* 몰입 모드에선 shadow·lift 축소 — 카드 scale(1.04)이 주 시각 효과이므로 */
body[data-immersive="true"] .study {
  --fc-float-shadow: 0.5;
  --fc-float-lift: 0;
}

/* 접근성 */
@media (prefers-reduced-motion: reduce) {
  .study-card { transform: none; transition: box-shadow var(--dur-base) var(--ease-ios); }
}
[data-high-contrast="true"] .study-card,
[data-high-contrast="true"] .study-toolbar,
[data-high-contrast="true"] .study-rate,
[data-high-contrast="true"] .a11y-preview-card {
  box-shadow: none;
  border-width: 2px;
}
/* 고대비 모드 — 미리보기 본문/CTA 굵기 강조해 토글 효과를 즉시 보이게 */
[data-high-contrast="true"] .a11y-preview-card-title,
[data-high-contrast="true"] .a11y-preview-card-body,
[data-high-contrast="true"] .a11y-preview-sample {
  font-weight: var(--fontWeightSemibold, 600);
}
[data-high-contrast="true"] .a11y-preview-btn {
  font-weight: var(--fontWeightSemibold, 600);
  border-width: 2px;
}

.btn-text {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--textPrimary);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeightMedium);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  text-decoration: none;
}

/* 버튼 내부 선행 아이콘 공통 스타일 (뒤로·북마크 등) */
.btn-icon-lead {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Chevron SVG 정렬 (텍스트 › 대체) */
.settings-row-arrow,
.help-faq-arrow,
.deck-list-chev {
  flex-shrink: 0;
  align-self: center;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  color: var(--textTertiary);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.btn-text:hover { background: var(--bgSecondary); }
.btn-text:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 2px; }

/* =========================================================================
 * 3.9 인증 화면 (auth.js)
 * ========================================================================= */
.auth-screen {
  padding: var(--space-8) var(--space-4);
  max-width: 420px;
  margin: 0 auto;
}
.auth-title {
  font-size: var(--fontSizeXL);
  font-weight: var(--fontWeightSemibold);
  margin: 0 0 var(--space-6);
}
.auth-form { display: flex; flex-direction: column; gap: var(--space-4); }
.auth-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.auth-field input {
  appearance: none;
  padding: var(--space-3);
  font-family: var(--fontFamily);
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  background: var(--bgPrimary);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  min-height: 44pt;
}
.auth-field input:focus-visible {
  outline: 2px solid var(--focusRing);
  outline-offset: 1px;
  border-color: transparent;
}
.auth-error {
  color: var(--colorError);
  font-size: var(--fontSizeSM);
  margin: 0;
  min-height: 1.3em;
}
.auth-alt {
  margin: var(--space-2) 0 0;
  text-align: center;
  font-size: var(--fontSizeSM);
}
.auth-alt a { color: var(--colorAccent); text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }

/* =========================================================================
 * 3.93 전체 학습 시트 (components §3.3)
 * ========================================================================= */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-ios);
  /* backdrop은 포인터/휠을 잡지 않음 — 커서가 backdrop 위에 있을 때 배경 페이지 스크롤 허용.
   * 대신 .sheet만 pointer-events: auto. 닫기는 .sheet-close 버튼 또는 ESC로 처리 */
  pointer-events: none;
}
.sheet-backdrop .sheet { pointer-events: auto; }
.sheet-backdrop[data-visible="true"] { opacity: 1; }
.sheet-backdrop[hidden] { display: none; }

.sheet {
  position: relative;
  background: var(--cardBg);
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
  width: 100%;
  max-width: 560px;
  height: 85vh;      /* sheet 자체는 항상 창 여유만큼 — 내부 flex가 공간 분배 */
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) var(--space-4) calc(var(--sa-bottom) + var(--space-4));
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-ios);
  will-change: transform;
  overflow: hidden;  /* 자식이 sheet 바깥(backdrop)으로 삐져나가 hit-test되는 것 차단 */
}
.sheet-backdrop[data-visible="true"] .sheet { transform: translateY(0); }

.sheet-grab {
  width: 36px;
  height: 4px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  margin: 0 auto var(--space-3);
  flex: 0 0 auto;
  position: relative;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: background var(--dur-instant) var(--ease-standard);
}
/* 실제 시각 라인은 4px지만 클릭/드래그 hit-area는 위아래 14px, 좌우 80px 확장 */
.sheet-grab::before {
  content: '';
  position: absolute;
  inset: -14px -80px;
}
.sheet-grab:hover { background: color-mix(in srgb, var(--colorAccent) 40%, var(--bgSecondary)); }
.sheet-grab:active,
.sheet-grab[data-dragging="true"] { cursor: grabbing; }
.sheet-grab:focus-visible {
  outline: 2px solid var(--focusRing);
  outline-offset: 4px;
}
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  flex: 0 0 auto;
}
.sheet-title {
  margin: 0;
  font-size: var(--fontSizeLG);
  font-weight: var(--fontWeightSemibold);
}
.sheet-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--textSecondary);
  font-size: var(--fontSizeSM);
  cursor: pointer;
  padding: var(--space-2);
}

.sheet-modes {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}
.sheet-mode-chip {
  appearance: none;
  border: 1px solid var(--cardBorder);
  background: transparent;
  color: var(--textPrimary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fontSizeSM);
  cursor: pointer;
  flex-shrink: 0;
}
.sheet-mode-chip[data-active="true"] {
  background: var(--colorAccent);
  color: #fff;
  border-color: var(--colorAccent);
}
.sheet-mode-chip[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  color: var(--textSecondary);
}
.sheet-mode-chip[disabled]:hover { background: transparent; }

/* 퀴즈 유형 세그먼트 내 비활성 버튼 */
.segment-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 비활성 덱 체크 row (모드 조건 미충족) */
.deck-check-row.is-disabled {
  opacity: 0.45;
}
.deck-check-row.is-disabled label { cursor: not-allowed; }

/* 자유 복습 난이도 슬라이더 — 테마 토큰 기반 */
.opt-free-difficulty {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
  outline: none;
  margin: var(--space-2) 0 var(--space-1);
}
.opt-free-difficulty::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--colorAccent);
  border: 2px solid var(--cardBg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}
.opt-free-difficulty::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--colorAccent);
  border: 2px solid var(--cardBg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}
.free-diff-label {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}

/* 전체학습 시트 — 내용-맞춤 높이 (바닥 모드 탭/시작 버튼이 내용 바로 아래에 붙음) */
.sheet-combined {
  /* 기본 .sheet의 max-height: 85vh를 상속받아 쓰되, height는 내용에 맞춰 auto.
   * overflow:hidden으로 내부 요소가 footer 아래로 튀어나오지 못하게 clamp */
  padding: var(--space-4) var(--space-4) calc(var(--sa-bottom) + var(--space-3));
  overflow: hidden;
  isolation: isolate;
}

/* =========================================================================
 * 시트 덱 색 레이어 (POC §3.3) — Apple Music Now Playing 스타일
 * 선택된 덱 중 커버 있는 첫 덱의 지배색으로 시트 내부 두 박스
 * (덱 목록 .sheet-decks / 옵션 .sheet-opts-slot)만 물들임. 시트 틀은 건드리지 않음.
 * 테마 융합은 일단 배제(작동 확인 우선) — 커버색이 지배적.
 * ========================================================================= */
.sheet-combined[data-has-deck-accent="true"] .sheet-decks,
.sheet-combined[data-has-deck-accent="true"] .sheet-opts-slot {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: background var(--dur-base) var(--ease-ios);
}
.sheet-combined[data-has-deck-accent="true"] .sheet-decks::before,
.sheet-combined[data-has-deck-accent="true"] .sheet-opts-slot::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--deck-accent) 80%, transparent) 0%,
      color-mix(in srgb, var(--deck-accent) 45%, transparent) 60%,
      color-mix(in srgb, var(--deck-accent) 20%, transparent) 100%
    );
  transition: background var(--dur-base) var(--ease-ios);
}

/* 커버 중심 모드 — 시트 박스도 body와 동일한 100→60% 선형 (테마 무관, 진하게).
 * 기본(blend) 80/45/20 → cover 100/80/60 으로 확 밀어 체감 차이 확보. */
body[data-deck-palette-mode="cover"] .sheet-combined[data-has-deck-accent="true"] .sheet-decks::before,
body[data-deck-palette-mode="cover"] .sheet-combined[data-has-deck-accent="true"] .sheet-opts-slot::before {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--deck-accent) 100%, transparent) 0%,
      color-mix(in srgb, var(--deck-accent) 80%, transparent) 50%,
      color-mix(in srgb, var(--deck-accent) 60%, transparent) 100%
    );
}
.sheet-combined[data-has-deck-accent="true"] .sheet-decks > *,
.sheet-combined[data-has-deck-accent="true"] .sheet-opts-slot > * {
  position: relative;
  z-index: 1;
}
/* sheet-scroll — header/footer 사이의 가변 공간.
 *   두 박스(sheet-decks, sheet-opts-slot)가 flex:1 1 0으로 동등 분배 + 내부 스크롤. */
.sheet-combined .sheet-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* 노치 토글/드래그는 .sheet-combined의 전체 높이를 줄인다.
 *   시트는 backdrop의 flex-end로 바닥에 붙어 있으므로, 높이 감소 = TOP이 아래로 슬라이드 다운.
 *   footer(학습 칩 + 시작 버튼)는 시각적 위치 고정.
 * 전체 학습: 기본 85vh (내부 두 박스가 flex:1 1 0으로 동등 분배되려면 부모 높이가 필요).
 * 개별 학습: 내용만큼만 차지(auto). 노치 드래그 시 JS가 --sheet-h에 px을 씌워 덮어쓴다. */
.sheet-combined {
  height: var(--sheet-h, 85vh);
  transition:
    transform var(--dur-base) var(--ease-ios),
    height var(--dur-base) var(--ease-ios);
}
.sheet-combined[data-single-deck="true"] {
  height: var(--sheet-h, auto);
}
.sheet-combined[data-dragging="true"] {
  /* 드래그 중엔 height transition 끊어서 손가락 위치를 즉각 따라감 */
  transition: transform var(--dur-base) var(--ease-ios);
}
@media (prefers-reduced-motion: reduce) {
  .sheet-combined { transition: transform var(--dur-base) var(--ease-ios); }
}
.sheet-combined .deck-check-list {
  /* max-height는 JS(attachFader)가 10 rows 기준 동적 설정.
   * 그보다 작은 공간이어도 flex로 줄어들어 자체 스크롤 활성 */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: var(--space-1);
}
/* 삼각형 스크롤 오버레이 — 덱 목록·옵션 슬롯 공통
 * attachFader()가 scrollEl을 .fader-wrap 안으로 이동시킨다.
 * wrap 자체도 부모(.sheet-decks / .sheet-opts-slot)의 flex 공간을 받아
 * scrollEl에 그대로 넘겨줘야 overflow:auto가 살아 있다 — "덱 목록 패턴" 유지. */
.fader-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}
.fader-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* 기본 스크롤바 숨김 — Firefox/WebKit/Edge */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fader-scroll::-webkit-scrollbar { display: none; }
.fader-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--cardBg) 90%, transparent);
  border: 1px solid var(--cardBorder);
  color: var(--textSecondary);
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(4px);
  transition: opacity var(--dur-instant) var(--ease-standard), background var(--dur-instant) var(--ease-standard);
}
.fader-arrow:hover { color: var(--colorAccent); background: var(--cardBg); }
.fader-arrow[hidden] { display: none; }
.fader-arrow-up   { top: 2px; }
.fader-arrow-down { bottom: 2px; }
.sheet-combined .sheet-footer {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--cardBorder);
  margin-top: var(--space-2);
}
.sheet-combined .sheet-footer .sheet-modes {
  margin-bottom: 0;
  justify-content: center;
}

.sheet-decks {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--bgSecondary);
  /* 부모 sheet-scroll의 flex 아이템 — basis 0 + grow 1로 강제 동등 분배 */
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--cardBorder);
}
/* 시트 내부 진입 순서 — 옵션 먼저 보이고, 덱 목록이 뒤따라 등장 */
.sheet-backdrop[data-visible="true"] .sheet-opts-slot,
.sheet-backdrop[data-visible="true"] .sheet-decks {
  animation: sheet-stagger var(--dur-base) var(--ease-ios) both;
}
.sheet-backdrop[data-visible="true"] .sheet-opts-slot { animation-delay: 120ms; }
.sheet-backdrop[data-visible="true"] .sheet-decks    { animation-delay: 260ms; }
@keyframes sheet-stagger {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .sheet-backdrop[data-visible="true"] .sheet-opts-slot,
  .sheet-backdrop[data-visible="true"] .sheet-decks { animation: none; }
}
.deck-check-all, .deck-check-row label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1);
  cursor: pointer;
}

/* ===== 고급 체크박스 (iOS/Linear 톤) ===== */
/* 실제 input[type=checkbox]은 sr-only로 숨기고 .check-visual이 그림 */
.check-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-1);
  cursor: pointer;
  border-radius: var(--radius-sm);
  user-select: none;
}
.check-row:hover { background: var(--bgSecondary); }
.check-row input.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.check-visual {
  flex-shrink: 0;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--cardBorder);
  background: transparent;
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
/* 체크 아이콘 — 원 중앙 정렬 (translate + rotate 조합) */
.check-visual::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 9px;
  border-right: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  /* 회전 후 아래쪽으로 살짝 쏠리는 시각 무게감 보정: Y축으로 -1px 오프셋 */
  transform: translate(-50%, calc(-50% - 1px)) rotate(45deg) scale(0);
  transform-origin: 50% 50%;
  transition: transform var(--dur-fast) var(--ease-out-back, cubic-bezier(.34,1.56,.64,1));
}
.check-row input:checked + .check-visual {
  background: var(--colorAccent);
  border-color: var(--colorAccent);
}
.check-row input:checked + .check-visual::after {
  transform: translate(-50%, calc(-50% - 1px)) rotate(45deg) scale(1);
}
.check-row input:focus-visible + .check-visual {
  outline: 2px solid var(--focusRing);
  outline-offset: 2px;
}
.check-label { flex: 1; }

/* 라벨·메타가 같이 있는 행에서 정렬 */
.check-row .deck-check-name,
.check-row .check-label { flex: 1; }
.deck-check-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.deck-check-row { border-top: 1px solid var(--bgSecondary); }
.deck-check-name { flex: 1; font-size: var(--fontSizeBase); }
.deck-check-meta { font-size: var(--fontSizeXS); color: var(--textSecondary); }
.sheet-dim { margin-left: auto; font-size: var(--fontSizeXS); color: var(--textSecondary); }

.sheet-opts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--bgSecondary);
}
/* 모드 전환 시 옵션 블록 — 아래에서 위로 슬라이드업 느낌
 *   덱 목록과 시각적 분리를 위해 테마 accent를 5% 정도 섞은 은은한 배경 +
 *   액센트 계열 보더. 테마가 바뀌면 자동으로 톤이 따라감. */
.sheet-opts-slot {
  opacity: 1;
  transform: translateY(0);
  /* 바깥 컨테이너 — 크기만 가변, 실제 스크롤은 내부 .sheet-opts-inner */
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--colorAccent) 5%, var(--bgSecondary));
  border: 1px solid color-mix(in srgb, var(--colorAccent) 12%, var(--cardBorder));
  transition:
    opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
  will-change: opacity, transform;
}
/* 실제 스크롤 영역 — 부모 sheet-opts-slot 크기를 따르도록 height:100% + overflow-y:auto */
.sheet-opts-inner {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* 옵션 영역 내부 체크박스 — 액센트 톤을 살짝 섞어 구별 */
.sheet-opts-slot .check-visual {
  border-color: color-mix(in srgb, var(--colorAccent) 35%, var(--cardBorder));
}
.sheet-opts-slot .check-row input:checked + .check-visual {
  background: color-mix(in srgb, var(--colorAccent) 85%, transparent);
  border-color: var(--colorAccent);
}
/* 옵션 내부 첫 sheet-opts는 border-top 제거 (이미 컨테이너 경계가 있음) */
.sheet-opts-slot > .sheet-opts:first-child { border-top: 0; padding-top: 0; }
.sheet-opts-slot.is-fading {
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: reduce) {
  .sheet-opts-slot,
  .sheet-opts-slot.is-fading {
    transition: none;
    transform: none;
  }
}
.sheet-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fontSizeSM);
}
.sheet-footer { padding-top: var(--space-3); }
.sheet-footer .btn-cta { width: 100%; }

/* =========================================================================
 * 3.95 토스트 (components §3.10)
 * ========================================================================= */
.toast-stack {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-height) + var(--sa-bottom) + var(--space-4));
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
  max-width: calc(100vw - var(--space-8));
  width: min(420px, 100%);
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--cardBg);
  color: var(--textPrimary);
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  font-size: var(--fontSizeSM);
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity var(--dur-slow) var(--ease-ios),
    transform var(--dur-slow) var(--ease-ios);
}
.toast.toast-enter {
  opacity: 1;
  transform: translateY(0);
}
.toast.toast-leave {
  opacity: 0;
  transform: translateY(0);
  transition:
    opacity var(--dur-base) var(--ease-ios);
}
.toast-body {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
  min-width: 0;
}
.toast-msg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre-wrap;
}
.toast-info    { border-left: 3px solid var(--colorAccent); }
.toast-success { border-left: 3px solid var(--colorSuccess); }
.toast-warning { border-left: 3px solid var(--colorWarning); }
.toast-error   { border-left: 3px solid var(--colorError); }
.toast-info    .icon { color: var(--colorAccent); }
.toast-success .icon { color: var(--colorSuccess); }
.toast-warning .icon { color: var(--colorWarning); }
.toast-error   .icon { color: var(--colorError); }

.toast-action {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--colorAccent);
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
}
.toast-action:hover { text-decoration: underline; }

/* 홈 우상단 링크 영역 (§3.7 설정 아이콘 정식 구현 시 디자인 교체) */
.home-topright {
  position: absolute;
  top: var(--space-3);
  right: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.home-settings, .home-logout {
  background: transparent;
  border: 0;
  color: var(--textSecondary);
  font-size: var(--fontSizeSM);
  cursor: pointer;
  padding: var(--space-2);
  text-decoration: none;
}
.home-settings:hover { color: var(--colorAccent); }
.home-logout:hover { color: var(--colorError); }

/* =========================================================================
 * 4. 접근성 오버라이드
 * ========================================================================= */

/* Reduced Motion (components §4.10) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0.01ms;
    --dur-fast: 0.01ms;
    --dur-base: 0.01ms;
    --dur-slow: 0.01ms;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 설정의 "모션 감소 [항상 감소]" 명시적 덮어쓰기 */
[data-reduced-motion="true"] {
  --dur-instant: 0.01ms;
  --dur-fast: 0.01ms;
  --dur-base: 0.01ms;
  --dur-slow: 0.01ms;
}
[data-reduced-motion="true"] *,
[data-reduced-motion="true"] *::before,
[data-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* 고대비 (prefers-contrast / 설정 토글) */
@media (prefers-contrast: more) {
  :root {
    --cardBorderWidth: 1px;
  }
  .icon { stroke-width: 1.0; }
}
[data-high-contrast="true"] {
  --cardBorderWidth: 1px;
}
[data-high-contrast="true"] .icon { stroke-width: 1.0; }

/* 왼손잡이 모드 (components §7.4) */
:root {
  --fab-position-x: right;
  --immersive-close-x: right;
  --hint-button-x: right;
}
[data-handedness="left"] {
  --fab-position-x: left;
  --immersive-close-x: left;
  --hint-button-x: left;
}

/* 설정>접근성 합성 미리보기 — 폰트 크기·고대비·모션 옵션 결합 효과 즉시 확인. */
.a11y-preview {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.a11y-preview-card {
  border: var(--cardBorderWidth, 1px) solid var(--cardBorder);
  border-radius: var(--cardRadius, 12px);
  background: var(--cardBg);
  box-shadow: var(--cardShadow);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.a11y-preview-card-title {
  font-size: var(--fontSizeMD);
  font-weight: var(--fontWeightSemibold, 600);
  color: var(--textPrimary);
}
.a11y-preview-card-body {
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  line-height: 1.5;
}
.a11y-preview-card-meta {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.a11y-preview-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.a11y-preview-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.a11y-preview-label {
  flex: 0 0 auto;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  min-width: 80px;
}
.a11y-preview-sample {
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
}
.a11y-preview-btn {
  font-size: var(--fontSizeSM);
  padding: var(--space-2) var(--space-4);
}

/* 폰트 크기 스케일 (설정 ♿ 접근성)
 * 카드 슬롯 텍스트는 `${fontSize}rem` 인라인 스타일 — root font-size 기준이라
 * html(documentElement)에서도 font-size를 바꿔야 카드 본문이 비례 확장된다.
 * 컴포넌트 텍스트는 var(--fontSize*) px 고정 토큰을 쓰므로 토큰도 함께 재정의.
 *
 * 비율: s=0.92× / m=1.0× (기본) / l=1.13× / xl=1.27× — 14/15/17/19px에 맞춰.
 */
html[data-font-scale="s"]  { font-size: 14px; }
html[data-font-scale="m"]  { font-size: 15px; }
html[data-font-scale="l"]  { font-size: 17px; }
html[data-font-scale="xl"] { font-size: 19px; }

body[data-font-scale="s"] {
  --fontSizeXS:   10px;
  --fontSizeSM:   12px;
  --fontSizeBase: 14px;
  --fontSizeMD:   15px;
  --fontSizeLG:   18px;
  --fontSizeXL:   22px;
  --fontSizeCard: 25px;
}
body[data-font-scale="m"] {
  --fontSizeXS:   11px;
  --fontSizeSM:   13px;
  --fontSizeBase: 15px;
  --fontSizeMD:   17px;
  --fontSizeLG:   20px;
  --fontSizeXL:   24px;
  --fontSizeCard: 28px;
}
body[data-font-scale="l"] {
  --fontSizeXS:   12px;
  --fontSizeSM:   15px;
  --fontSizeBase: 17px;
  --fontSizeMD:   19px;
  --fontSizeLG:   22px;
  --fontSizeXL:   27px;
  --fontSizeCard: 32px;
}
body[data-font-scale="xl"] {
  --fontSizeXS:   14px;
  --fontSizeSM:   16px;
  --fontSizeBase: 19px;
  --fontSizeMD:   21px;
  --fontSizeLG:   25px;
  --fontSizeXL:   30px;
  --fontSizeCard: 35px;
}

/* ──────────────────────────────────────────────────────────────────
 * 덱 카드 기능 아이콘 슬롯 — 현재는 자리 예약만.
 * 정보/수정/설정/복제/내보내기/리셋/삭제 (compact 뷰는 "더보기" 하나)
 * 덱 전체가 <a>라서 아이콘 버튼은 클릭 버블링을 JS에서 stopPropagation으로 잡는다.
 * ─────────────────────────────────────────────────────────────── */
.deck-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-2);
  flex-wrap: wrap;
}
.deck-actions-compact { margin-top: 0; margin-left: auto; }
.deck-action-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--cardBorder);
  color: var(--textSecondary);
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-instant) var(--ease-standard),
              color var(--dur-instant) var(--ease-standard),
              border-color var(--dur-instant) var(--ease-standard);
}
.deck-action-btn:hover {
  color: var(--colorAccent);
  border-color: var(--colorAccent);
  background: color-mix(in srgb, var(--colorAccent) 8%, transparent);
}
.deck-action-btn:active { transform: scale(0.96); }
.deck-action-btn[data-action="delete"]:hover {
  color: var(--colorError);
  border-color: var(--colorError);
  background: color-mix(in srgb, var(--colorError) 8%, transparent);
}
.deck-action-btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* 리스트 뷰: 숙달도(%) + 기능 아이콘을 **우측 끝**에 붙여 compact 뷰와 동일한 위치 기준.
 *   compact의 "더보기" 버튼이 오른쪽 끝(chev 없음)에 있으므로, list 뷰도 chev를 숨기고
 *   마지막 아이콘(삭제)이 같은 x 위치에 오도록 정렬.
 *   flex-wrap 제거 — 기능 아이콘 7개(관리 탭 full mode)도 한 줄 유지. 모바일 폭에선 body가 축소. */
.deck-list-row .deck-actions {
  margin-top: 0;
  margin-left: var(--space-2);
  flex-shrink: 0;
  flex-wrap: nowrap;
}
/* progress(%)가 우측 cluster의 시작 — body 다음에 오는 첫 flex 요소에 margin-left:auto 적용 */
.deck-list-row .deck-list-progress {
  margin-left: auto;
  flex-shrink: 0;
  white-space: nowrap;
}
/* 리스트 뷰에서 chev 제거 — compact 뷰와 동일하게 기능 아이콘이 최우측 자리 차지.
 *   (덱 <a> 자체가 클릭 가능하므로 chev 없어도 네비 의도는 유지됨.) */
.deck-list-row .deck-list-chev { display: none; }

/* 썸네일 뷰 — 아이콘을 썸네일 경계에서 살짝 떨어뜨려 숨통 확보.
 *   좌우는 썸네일 패딩과 같은 --space-2, 하단도 동일하게 여유. */
.deck-thumb .deck-actions {
  margin-top: var(--space-1);
  padding: 0 var(--space-2) var(--space-2);
}

/* ──────────────────────────────────────────────────────────────────
 * 개별 학습 시트 — "전체 선택" 체크박스 대신 읽기 전용 라벨 +
 * 덱 목록창은 한 줄만 들어가면 되므로 크게 차지하지 않도록 축소.
 * ─────────────────────────────────────────────────────────────── */
.deck-check-all-solo {
  cursor: default;
  padding: var(--space-2) var(--space-1);
}
.deck-check-all-solo .check-label {
  font-weight: var(--fontWeightMedium);
}
/* singleDeck 모드: 덱 영역이 flex:1 1 0으로 옵션과 동등분배되지 않고
 *   내용만큼만 차지 + 옵션 영역이 남은 공간을 다 먹는다. */
.sheet-combined[data-single-deck="true"] .sheet-decks {
  flex: 0 0 auto;
}
.sheet-combined[data-single-deck="true"] .sheet-opts-slot {
  flex: 1 1 auto;
}
/* 개별 학습 + 옵션 자체가 빈 경우(study 모드) 옵션 슬롯 전체 숨김.
 *   JS가 .sheet-opts-slot에 data-empty="true"를 세팅하면 숨긴다.
 *   (Firefox 성능 가이드상 :has() 금지 — JS 클래스 토글 사용) */
.sheet-opts-slot[data-empty="true"] { display: none; }

/* =========================================================================
 * Compact 뷰 — 더보기 클릭 시 action 드로어 (관리 탭 전용)
 *   - 더보기 버튼 좌측 .deck-actions-reveal이 max-width로 확장되며 아이콘 스테거 등장
 *   - 숙달도(%)는 좌측으로 밀려 페이드 아웃 (.deck-compact-row[data-actions-open="true"])
 *   - 닫힐 때는 역순 스태거. 아이콘 --stg 인덱스로 delay 조절.
 * ========================================================================= */

/* 드로어 레일 — 기본 숨김(폭 0). data-open='true'면 자동 확장 + overflow-x 스크롤 */
/* drawer는 position:absolute로 flex 바깥에 띄워 숙달률(%) 위를 덮는다.
 *   → flex 재배치 없음 = 숙달률은 움직이지 않음. drawer가 커지며 자연스럽게 숙달률을 가림.
 *   더보기 버튼의 바로 왼쪽(right:0)에서 시작해 왼쪽으로 펼쳐짐. */
.deck-actions-compact { position: relative; }
.deck-actions-reveal {
  position: absolute;
  top: 50%;
  right: 100%;                   /* 더보기 버튼 바로 왼쪽에서 시작해 왼쪽으로 펼쳐짐 */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  width: 0;                      /* 닫힌 상태는 폭 0, 실제 숙달률을 전혀 덮지 않음 */
  box-sizing: border-box;
  padding: 0;                    /* 닫힌 상태에선 padding도 0 */
  overflow: hidden;              /* 폭이 0일 때 내부 아이콘이 삐져나와 보이지 않게 */
  /* 닫힐 때는 빠르게 (기본 220ms) — 아이콘들이 역스태거로 순차 사라지는 동안 drawer도 즉시 수축 */
  transition:
    width var(--dur-base) var(--ease-ios),
    padding var(--dur-base) var(--ease-ios);
  white-space: nowrap;
  justify-content: flex-end;
  background: var(--cardBg);
  z-index: 1;
}
.deck-compact-row:hover .deck-actions-reveal { background: var(--bgSecondary); }
.deck-actions-compact[data-open="true"] .deck-actions-reveal {
  width: 232px;                  /* 열리면 232px, 숙달률 전체를 덮음 */
  padding: 0 var(--space-2);     /* 내부 여백 */
  overflow: visible;             /* 툴팁이 drawer 위로 뜨도록 */
  /* 열 때: 아이콘 7개 × 60ms + scale 전환 150ms ≈ 520ms */
  transition:
    width 520ms var(--ease-ios),
    padding 520ms var(--ease-ios);
}

/* 각 reveal 버튼 — 더보기 버튼 "아래"에서 시작해 좌측으로 슬라이딩하며 제자리로.
 *   translateX(+20px)가 초기 오프셋 → 더보기 쪽에서 출현하는 효과.
 *   120ms 간격으로 순차(앞 아이콘이 거의 끝날 때 다음 시작) — "하나씩 나오는" 느낌 강화. */
/* 아이콘은 drawer 내부 제자리에서 등장. drawer 폭 확장이 숙달률을 점진적으로 덮고,
 *   아이콘은 그 안에서 scale+opacity로 하나씩 fade-in. 초기 translateX는 없음
 *   (drawer 바깥에서 밀고 들어오는 모습 방지 — 사용자는 "덮어가는" 연출을 원함). */
.deck-action-reveal-btn {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  flex-shrink: 0;
  transform-origin: center;
  transition:
    opacity var(--dur-fast) var(--ease-ios),
    transform var(--dur-fast) var(--ease-ios);
  transition-delay: calc(var(--stg, 0) * 25ms);
}
.deck-actions-compact[data-open="true"] .deck-action-reveal-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  /* 열릴 때: 더보기 쪽(큰 --stg)이 먼저, 60ms 간격으로 순차 등장 */
  transition-delay: calc((6 - var(--stg, 0)) * 60ms);
}

/* 더보기 버튼 — more/close SVG 토글 */
.deck-action-more .deck-action-more-ic-close { display: none; }
.deck-action-more[aria-expanded="true"] .deck-action-more-ic-more { display: none; }
.deck-action-more[aria-expanded="true"] .deck-action-more-ic-close { display: inline-block; }
.deck-action-more[aria-expanded="true"] {
  color: var(--colorAccent);
  border-color: var(--colorAccent);
}

/* 숙달도(%) — drawer가 position:absolute로 위에 덮이는 마스킹 방식.
 *   숙달률 자체는 움직이지 않고 drawer가 좌측으로 펼쳐지며 가림.
 *   닫힐 때 drawer가 우측으로 수축하며 자연스럽게 다시 드러남. */
.deck-compact-pct {
  display: inline-block;
  text-align: right;
}

/* ===== 미디어 프리캐시 진행률 오버레이 (§offline-and-preload Part B)
 * 세션 시작 전 오늘 학습 카드 전체의 이미지·오디오를 SW media-cache에 선제 로드.
 * 풀스크린 backdrop + 중앙 카드 (스피너 + N/M장 텍스트). 취소 버튼 없음. */
.media-preload-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--bgPrimary) 82%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-ios);
}
.media-preload-overlay[data-visible="true"] {
  opacity: 1;
  pointer-events: auto;
}
.media-preload-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  background: var(--cardBg);
  border: 1px solid var(--cardBorder);
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  min-width: 220px;
  max-width: 90vw;
}
.media-preload-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid color-mix(in srgb, var(--textPrimary) 15%, transparent);
  border-top-color: var(--colorAccent);
  border-radius: 50%;
  animation: media-preload-spin 0.9s linear infinite;
}
@keyframes media-preload-spin {
  to { transform: rotate(360deg); }
}
.media-preload-text {
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .media-preload-spinner { animation-duration: 2s; }
  .media-preload-overlay { transition-duration: 0ms; }
}

/* =========================================================
   전역 배경 — 라우트 전환·스크롤 바운스·짧은 콘텐츠에서도
   흰색/검정 기본이 비치지 않도록 테마 bg를 모든 레이어에 깔아둔다.
   ========================================================= */
html {
  background-color: var(--bgPrimary);
  min-height: 100%;
  /* iOS Safari 스크롤 바운스 영역이 흰색 노출되지 않도록 */
  overscroll-behavior: none;
}
body {
  background-color: var(--bgPrimary);
  min-height: 100dvh;
}
/* 앱 마운트 포인트 — 라우트 전환 시 innerHTML 교체 순간에도 테마 bg 유지 */
#app, main#app, main.app-main {
  background-color: var(--bgPrimary);
  min-height: calc(100dvh - var(--nav-height, 0px) - var(--menu-height, 0px) - var(--tabbar-height, 0px) - var(--sa-top, 0px) - var(--sa-bottom, 0px));
}

/* =========================================================
   Overlay Root 4종 (App Shell §1.0.5 z-index 표준)
   각 root는 자식이 있을 때만 인터랙션하고, 비어있으면 no-op.
   ========================================================= */
.overlay-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;      /* 자식 요소가 각자 재활성 */
  display: contents;         /* 루트 자체는 레이아웃에 영향 없음, 자식의 position:fixed 기준은 viewport */
}
#onboard-root { z-index: 80; }
#sheet-root   { z-index: 90; }
#modal-root   { z-index: 100; }
#toast-root   { z-index: 110; }

/* 자식이 있을 때만 인터랙션 허용 (자식 자체에서도 pointer-events 제어 가능) */
.overlay-root:empty { display: none; }
.overlay-root > * { pointer-events: auto; }

/* 오버레이 열림 상태 훅 — 스크롤 잠금 옵션용 */
body.has-overlay-open {
  overflow: hidden;
}

/* =========================================================
   Bottom Sheet (utils/bottomSheet.js)
   ========================================================= */
.bs-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, #000 55%, transparent);
  opacity: 0;
  transition: opacity 220ms var(--ease-ios, cubic-bezier(0.4, 0, 0.2, 1));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: auto;
}
.bs-backdrop[data-state="open"]     { opacity: 1; }
.bs-backdrop[data-state="closing"]  { opacity: 0; }

.bs-sheet {
  position: relative;
  width: 100%;
  max-width: min(100vw, 640px);
  max-height: var(--bs-height, 90dvh);
  display: flex;
  flex-direction: column;
  background: var(--bgPrimary);
  color: var(--textPrimary);
  border-top-left-radius: var(--radius-lg, 16px);
  border-top-right-radius: var(--radius-lg, 16px);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 220ms var(--ease-ios, cubic-bezier(0.4, 0, 0.2, 1));
  padding-bottom: var(--sa-bottom, 0);
  will-change: transform;
}
.bs-sheet[data-state="open"]    { transform: translateY(0); }
.bs-sheet[data-state="closing"] { transform: translateY(100%); }

/* 드래그 중에는 transition 끄고 손가락 따라감 */
.bs-sheet.bs-dragging { transition: none; }

/* 상단 그립 핸들 */
.bs-handle {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
  cursor: grab;
  touch-action: none;
}
.bs-handle:active { cursor: grabbing; }
.bs-grip {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--textPrimary) 25%, transparent);
}

/* 헤더 (optional) */
.bs-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px var(--space-4) 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  gap: var(--space-2);
}
.bs-title {
  font-size: var(--fontSizeLG, 1.1rem);
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.bs-close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--textSecondary);
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.bs-close:hover {
  background: color-mix(in srgb, var(--textPrimary) 8%, transparent);
  color: var(--textPrimary);
}
.bs-close:active { transform: scale(0.92); }
.bs-close .icon { width: 18px; height: 18px; }

/* 본문 — 스크롤 영역 */
.bs-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;               /* 내용이 시트 폭을 넘지 않게 */
  overscroll-behavior: contain;     /* 내부 스크롤이 부모로 전파되지 않음 */
  padding: var(--space-4);
  box-sizing: border-box;
  min-width: 0;
}

/* 데스크톱(호버 포인터) — 화면이 크면 중앙 정렬된 작은 시트로 */
@media (min-width: 720px) and (hover: hover) {
  .bs-backdrop {
    align-items: center;        /* 중앙 정렬 */
  }
  .bs-sheet {
    max-width: 640px;
    max-height: min(90dvh, 800px);
    border-radius: var(--radius-lg, 16px);
    overflow: hidden;    /* 하단 ds-actions 같은 footer가 모서리를 뚫지 않도록 */
    transform: translateY(20px) scale(0.98);
  }
  .bs-sheet[data-state="open"]    { transform: translateY(0) scale(1); }
  .bs-sheet[data-state="closing"] { transform: translateY(20px) scale(0.98); }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .bs-backdrop, .bs-sheet { transition-duration: 0.01ms; }
}
[data-reduced-motion="true"] .bs-backdrop,
[data-reduced-motion="true"] .bs-sheet { transition-duration: 0.01ms; }

/* =========================================================
   Session Summary (utils/sessionSummary.js)
   학습 4모드 종료 화면 공용 UI
   ========================================================= */
.session-summary {
  max-width: 560px;
  margin: var(--space-6) auto;
  padding: var(--space-6) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}
.ss-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.ss-icon {
  color: var(--colorAccent);
  margin-bottom: var(--space-1);
}
.session-summary[data-mode="weak"]  .ss-icon { color: var(--colorWarning); }
.session-summary[data-mode="quiz"]  .ss-icon { color: var(--colorSuccess); }
.session-summary[data-mode="free"]  .ss-icon { color: var(--textSecondary); }
.ss-title {
  font-size: var(--fontSizeXL, 1.4rem);
  font-weight: 600;
  margin: 0;
  line-height: 1.3;
}
.ss-subtitle {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  margin: 0;
}

/* 통계 타일 그리드 */
.ss-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: var(--space-3);
  width: 100%;
  margin: 0;
}
.ss-stat {
  padding: var(--space-3) var(--space-2);
  background: color-mix(in srgb, var(--textPrimary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: var(--radius-md, 12px);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}
.ss-stat-value {
  font-size: var(--fontSizeXL, 1.6rem);
  font-weight: 600;
  color: var(--textPrimary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ss-stat-unit {
  font-size: var(--fontSizeSM);
  font-weight: 400;
  color: var(--textSecondary);
  margin-left: 2px;
}
.ss-stat-label {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.ss-stat-accent .ss-stat-value { color: var(--colorAccent); }
.ss-stat-danger .ss-stat-value { color: var(--colorError); }

/* 평가 분포 스택 바 */
.ss-ratings {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ss-rating-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--textPrimary) 6%, transparent);
}
.ss-rating-seg { height: 100%; }
.ss-rating-1 { background: var(--rating1); }
.ss-rating-2 { background: var(--rating2); }
.ss-rating-3 { background: var(--rating3); }
.ss-rating-4 { background: var(--rating4); }
.ss-rating-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.ss-rating-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ss-rating-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

/* ── 필터 칩 — Again/Hard/Good/Easy 토글 (§spec Req 14) ── */
.ss-filter-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
}
.ss-filter-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  background: transparent;
  color: var(--textPrimary);
  font-size: var(--fontSizeXS);
  font-weight: var(--fontWeightMedium, 500);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s, border-color 0.15s, color 0.15s;
}
.ss-filter-chip:hover { opacity: 0.85; }
.ss-filter-chip.active { opacity: 1; font-weight: var(--fontWeightSemibold, 600); color: #fff; }
.ss-chip-1.active { background: var(--rating1); border-color: var(--rating1); }
.ss-chip-2.active { background: var(--rating2); border-color: var(--rating2); }
.ss-chip-3.active { background: var(--rating3); border-color: var(--rating3); }
.ss-chip-4.active { background: var(--rating4); border-color: var(--rating4); }

/* ── 학습한 카드 목록 — 접기/펼치기 (§spec Req 4/5) ── */
.ss-card-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ss-card-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--textPrimary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-md, 8px);
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium, 500);
  cursor: pointer;
  transition: background 0.15s;
}
.ss-card-toggle:hover { background: color-mix(in srgb, var(--textPrimary) 7%, transparent); }
.ss-card-count {
  margin-left: auto;
  color: var(--colorAccent);
  font-weight: var(--fontWeightSemibold, 600);
}
.ss-chevron {
  display: inline-block;
  font-size: 0.7em;
  transition: transform 0.2s;
  transform-origin: center;
}
.ss-card-list.open .ss-chevron { transform: rotate(90deg); }

.ss-card-items {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-2);
}
.ss-card-list.open .ss-card-items { display: flex; }

.ss-card-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  text-align: left;
}
.ss-card-item:last-child { border-bottom: none; }
.ss-card-front {
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  overflow-wrap: anywhere;
}
.ss-card-back {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  opacity: 0.8;
  overflow-wrap: anywhere;
}
.ss-card-meta {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
}
.ss-rating-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ss-rating-dot.ss-rating-1 { background: var(--rating1); }
.ss-rating-dot.ss-rating-2 { background: var(--rating2); }
.ss-rating-dot.ss-rating-3 { background: var(--rating3); }
.ss-rating-dot.ss-rating-4 { background: var(--rating4); }

.ss-note {
  font-size: var(--fontSizeXS);
  color: var(--textTertiary, var(--textSecondary));
  margin: 0;
}

/* 액션 버튼 영역 */
.ss-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  width: 100%;
}
.ss-action {
  min-width: 140px;
}
.ss-action-accent {
  /* 기본 .btn-cta 스타일 사용 */
}
.ss-action-muted {
  background: color-mix(in srgb, var(--textPrimary) 8%, transparent);
  color: var(--textPrimary);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 15%, transparent);
}
.ss-action-danger {
  background: color-mix(in srgb, var(--colorError) 15%, transparent);
  color: var(--colorError);
  border: 1px solid color-mix(in srgb, var(--colorError) 30%, transparent);
}

/* =========================================================
   AnimationManager (Phase 1.4 flipEngine)
   플립은 JS에서 transform·opacity inline 지정, CSS는 shake만 담당.
   ========================================================= */
@keyframes am-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.am-shake { animation: am-shake 400ms var(--ease-ios, cubic-bezier(0.4, 0, 0.2, 1)); }
@media (prefers-reduced-motion: reduce) {
  .am-shake { animation-duration: 0.01ms; }
}
[data-reduced-motion="true"] .am-shake { animation-duration: 0.01ms; }

/* =========================================================
   Manage Tab (Phase 2.1 뼈대)
   ========================================================= */
.manage-detail {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.manage-detail-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
}
.manage-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--textSecondary);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 150ms ease, color 150ms ease;
}
.manage-back:hover {
  background: color-mix(in srgb, var(--textPrimary) 8%, transparent);
  color: var(--textPrimary);
}
.manage-detail-meta { min-width: 0; }
.manage-detail-title {
  font-size: var(--fontSizeLG, 1.2rem);
  font-weight: 600;
  margin: 0 0 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manage-detail-sub {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
/* 상세 헤더 내부 chip 크기 소폭 보정 — deckList보다 약간 타이트하게 */
.manage-detail-sub .deck-badge-chip { vertical-align: middle; }
.manage-detail-actions {
  display: inline-flex;
  gap: var(--space-2);
  align-items: center;
}

/* 탭 내비 */
.manage-detail-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
}
.manage-tab {
  padding: 10px 14px;
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.manage-tab[aria-selected="true"] {
  color: var(--colorAccent);
  border-bottom-color: var(--colorAccent);
  font-weight: 500;
}
.manage-tab:hover:not([aria-selected="true"]) { color: var(--textPrimary); }

.manage-tab-placeholder {
  padding: var(--space-6) var(--space-4);
  text-align: center;
}
.manage-dim {
  color: var(--textTertiary, var(--textSecondary));
  font-size: var(--fontSizeSM);
  margin: 0;
}
.manage-empty {
  padding: var(--space-6) var(--space-4);
  text-align: center;
  color: var(--textSecondary);
}
.manage-info-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2) var(--space-4);
  text-align: left;
  margin: 0 auto var(--space-4);
  max-width: 480px;
}
.manage-info-list dt {
  color: var(--textSecondary);
  font-size: var(--fontSizeSM);
}
.manage-info-list dd {
  margin: 0;
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
}
.manage-info-mono {
  font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.manage-card-edit {
  /* .manage-detail(960)과 정렬 — 카드/템플릿/정보 탭과 동일 폭 언어 유지 */
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* 편집 상단 헤더의 네비 + 액션 영역. 데스크톱에선 오른쪽 cluster로 정렬 */
.manage-card-edit .manage-detail-actions { gap: var(--space-2); flex-wrap: wrap; }
.manage-edit-nav {
  display: inline-flex;
  gap: var(--space-1);
  padding: 2px;
  background: var(--bgSecondary);
  border-radius: var(--radius-pill);
}
.manage-edit-nav .btn-chip {
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  border-color: transparent;
  background: transparent;
}
.manage-edit-nav .btn-chip:hover:not(:disabled) {
  background: color-mix(in srgb, var(--colorAccent) 10%, transparent);
  color: var(--colorAccent);
}
.manage-edit-nav .btn-chip:disabled {
  opacity: 0.35;
}

/* 2-column 그리드 — 좌 form, 우 sticky preview. 모바일에선 1-column 스택 (preview 상단).
 *   960px 컨테이너 기준으로 form 최소 폭이 확보되도록 preview 칼럼을 300~360px로 제한. */
.manage-edit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: var(--space-5);
  align-items: start;
}
.manage-edit-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}
.manage-edit-preview-wrap {
  position: sticky;
  top: calc(var(--space-4) + 56px);   /* 앱바 + 약간 여유 */
  align-self: start;
}
.manage-edit-preview-wrap .ce-preview { gap: var(--space-2); }
.manage-edit-preview-wrap .ce-preview-card {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 60vh;
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--textPrimary) 20%, transparent);
  cursor: pointer;
  user-select: none;
}
.manage-edit-shortcuts {
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
  margin: var(--space-2) 0 0;
  text-align: center;
}
.manage-edit-shortcuts kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--bgSecondary);
  border: 1px solid var(--cardBorder);
  border-radius: 4px;
  font-family: var(--fontFamily);
  font-size: 11px;
  color: var(--textSecondary);
}

/* 모바일: preview를 상단으로 옮기고 1-column. sticky 해제 (스크롤 따라 내려감). */
@media (max-width: 860px) {
  .manage-edit-grid {
    grid-template-columns: 1fr;
  }
  .manage-edit-preview-wrap {
    position: static;
    order: -1;          /* preview를 form보다 먼저 */
  }
  .manage-edit-preview-wrap .ce-preview-card {
    max-height: 50vh;
  }
}

/* 슬롯 라벨 — 이름(좌) + 미디어 chips(우) 같은 줄에 배치 */
.ce-slot-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 4px;
}
.ce-slot-name {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.ce-slot-media {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
/* 미디어 chip — image면 40×40 썸네일, 오디오·비디오는 원형 아이콘 배지 */
.ce-slot-media-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--bgSecondary);
  border: 1px solid var(--cardBorder);
  overflow: hidden;
  flex-shrink: 0;
}
.ce-slot-media-chip[data-type="image"] { padding: 0; }
.ce-slot-media-chip[data-type="image"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ce-slot-media-chip[data-type="audio"],
.ce-slot-media-chip[data-type="video"] {
  color: var(--colorAccent);
  background: color-mix(in srgb, var(--colorAccent) 10%, transparent);
  border-color: color-mix(in srgb, var(--colorAccent) 25%, transparent);
}
.ce-slot-media-more {
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
  padding: 2px 6px;
  border-radius: var(--radius-pill);
  background: var(--bgSecondary);
}

/* 커스텀 파일 피커 — 네이티브 "Choose File" 대신 btn-chip으로 통일 */
.ce-media-picker {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ce-media-browse {
  /* btn-chip 베이스 유지, 아이콘+텍스트 정렬만 강조 */
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ce-media-filename {
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 카드 리스트 (Phase 2.8) */
.manage-cards-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* 툴바 2-그룹 레이아웃 — 필터(검색+정렬+카운트) | 액션(새 카드+대량 추가).
 *   가로가 좁아지면 그룹 단위로 줄바꿈해 검색창이 찌그러지지 않는다.
 *   각 그룹 내부도 wrap 허용 — 칩/버튼이 줄바꿈돼도 겹치지 않게. */
.manage-cards-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.manage-cards-filters {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  flex: 1 1 360px;
  min-width: 0;
}
.manage-cards-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex: 0 0 auto;
}
/* .manage-input은 width:100% 기본값이 있어 select/input이 flex 컨테이너 내부에서
 *   제어가 안 된다. 여기서는 !important 없이 auto로 덮어 재계산을 허용.
 *   검색·정렬을 pill 스타일로 통일 — 상단 툴바 요소(chip 버튼들)와 시각 언어 정합. */
.manage-cards-filters .manage-input {
  width: auto;
  border-radius: var(--radius-pill);
}
.manage-cards-search {
  flex: 1 1 200px;
  min-width: 160px;
  max-width: 380px;
  /* pill 안쪽 좌우 여백을 약간 늘려 문자가 원호에 닿지 않게 */
  padding-left: 16px;
  padding-right: 16px;
}
.manage-cards-count {
  flex: 0 0 auto;
  font-size: var(--fontSizeSM);
  font-variant-numeric: tabular-nums;
}
.manage-cards-count:empty {
  display: none;
}
.manage-cards-sort {
  flex: 0 0 auto;
  width: 160px;
  font-size: var(--fontSizeSM);
  /* pill 여백 — 좌측 늘리고 우측은 chevron까지 포함 */
  padding-left: 16px;
  padding-right: 32px;
}
/* 방향 토글 버튼 — select 옆 좁은 아이콘 버튼. disabled 상태(default 정렬)는 흐리게. */
.manage-cards-sort-dir {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.manage-cards-sort-dir:disabled {
  opacity: 0.35;
  cursor: default;
}
/* 태그 필터 바 — 툴바 아래 한 줄. 칩이 많으면 줄바꿈. */
.manage-cards-tagbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0 0;
}
.manage-tagbar-label {
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  padding-right: var(--space-1);
}
.manage-cards-tagbar[hidden] {
  display: none;
}
.manage-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px var(--space-3);
  height: 28px;
  font-size: var(--fontSizeSM);
  line-height: 1;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  background: transparent;
  color: var(--textPrimary);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.manage-tag-chip:hover {
  background: color-mix(in srgb, var(--colorAccent) 8%, transparent);
  border-color: color-mix(in srgb, var(--colorAccent) 40%, transparent);
}
.manage-tag-chip.is-active {
  background: var(--colorAccent);
  color: var(--colorAccentOnContrast, #fff);
  border-color: var(--colorAccent);
}
.manage-tag-chip-count {
  font-size: var(--fontSizeXS);
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.manage-tag-chip.is-active .manage-tag-chip-count {
  opacity: 0.85;
}
/* "전체" 지우개 칩 — active 상태일 때만 강조(아무 필터도 없을 땐 기본 톤). */
.manage-tag-chip-clear {
  font-weight: 600;
}
.manage-tag-chip-clear:not(.is-active) {
  background: color-mix(in srgb, var(--textPrimary) 6%, transparent);
  border-color: transparent;
}
/* Rename 시트 레이아웃 — 다른 manage-sheet들과 정렬. */
.manage-sheet-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2) 0;
}
.manage-sheet-field-label {
  font-size: var(--fontSizeSM);
  color: var(--textMuted);
}
/* 새 카드 버튼 — sm보다 크고 기본 CTA(56pt)보다 작은 중간 크기 (툴바 한 줄 유지) */
.manage-cards-new.btn-cta {
  flex: 0 0 auto;
  min-height: 44px;
  padding: var(--space-2) var(--space-5);
  font-size: var(--fontSizeMD);
}
.manage-cards-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: var(--radius-md, 10px);
  overflow: hidden;
}
/* 카드 행 그리드 — 6칸 고정. 마지막 tags 칸은 태그가 없으면 빈 셀로 유지되지만,
 *   child 개수가 달라지는 문제(check/dot/thumb/text/reps 5개 vs +tags 6개)를 피하기 위해
 *   태그 슬롯은 항상 렌더하고 내용만 empty로 둔다(template literal에서 처리).
 *   열 순서: checkbox · dot · thumb · text(1fr) · tags · reps */
.manage-card-row {
  display: grid;
  grid-template-columns: auto auto auto 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 14px;
  min-height: 80px;
  color: var(--textPrimary);
  text-decoration: none;
  background: var(--bgPrimary);
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 6%, transparent);
  transition: background 120ms ease;
}
/* 카드 썸네일 — CardRenderer manage-preview 결과 주입 + 3D 플립 토글 */
.manage-card-thumb {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: 6px;
  background: var(--bgSecondary, #f5f5f5);
  padding: 0;
  perspective: 600px;
  cursor: pointer;
  transition: border-color 150ms ease, transform 150ms ease;
}
.manage-card-thumb:hover {
  border-color: color-mix(in srgb, var(--colorAccent) 40%, transparent);
}
.manage-card-thumb:active {
  transform: scale(0.97);
}
/* 레이어 분리로 scale·flip 축 독립:
   .manage-card-thumb          120×80 (perspective + overflow:hidden)
    └ .manage-card-thumb-scale  600×400 (좌상단 기준 scale(0.2))
       └ .manage-card-thumb-inner  600×400 (preserve-3d, rotateY 플립)
          ├ .manage-card-thumb-front  inset:0, rotateY 0, backface-hidden
          └ .manage-card-thumb-back   inset:0, rotateY 180, backface-hidden
*/
.manage-card-thumb-scale {
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 400px;
  transform-origin: top left;
  transform: scale(var(--thumb-scale, 0.2));
}
.manage-card-thumb-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 280ms var(--ease-ios, cubic-bezier(0.4, 0, 0.2, 1));
}
.manage-card-thumb[data-flipped="true"] .manage-card-thumb-inner {
  transform: rotateY(180deg);
}
.manage-card-thumb-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  pointer-events: none;   /* 내부 미디어 클릭 차단 */
}
.manage-card-thumb-front { transform: rotateY(0deg); }
.manage-card-thumb-back  { transform: rotateY(180deg); }
/* 썸네일 내부 이미지가 셀을 벗어나지 않게 */
.manage-card-thumb-face img,
.manage-card-thumb-face .slot-media-img {
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  display: block;
}
/* 미디어 존재 뱃지 — 썸네일 우상단 */
.manage-card-media-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px 4px;
  background: color-mix(in srgb, var(--bgPrimary) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 15%, transparent);
  border-radius: 999px;
  color: var(--colorAccent);
  pointer-events: none;
}
.manage-card-media-badge .icon {
  width: 10px;
  height: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .manage-card-thumb-inner { transition-duration: 0.01ms; }
}

/* 카드 리스트 페이저 */
.manage-cards-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  margin-top: var(--space-2);
}
.manage-pager-prev,
.manage-pager-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
}
.manage-pager-prev:disabled,
.manage-pager-next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.manage-pager-info {
  font-size: var(--fontSizeSM);
  font-variant-numeric: tabular-nums;
  color: var(--textPrimary);
}
.manage-pager-info .manage-dim {
  margin-left: var(--space-2);
}
.manage-card-row:last-child { border-bottom: none; }
.manage-card-row:hover {
  background: color-mix(in srgb, var(--textPrimary) 4%, transparent);
}
/* FSRS 상태 dot */
/* 카드 상태 dot — 5-종 semantic, accent/warning 위주라 테마 톤을 자동으로 따른다.
 *   new      : 회색 40% (아직 학습하지 않음)
 *   learning : accent 25% (학습/재학습 중, 오늘 아님)
 *   stable   : accent 55% (state=2 복습, 오늘 아님)
 *   due      : accent 풀톤 (오늘 기한/연체 — 작업 우선순위 높음)
 *   leech    : warning 풀톤 (lapses ≥ 7 — 재구성 필요한 카드) */
.manage-card-state, .manage-card-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.manage-card-dot-new      { background: color-mix(in srgb, var(--textTertiary) 55%, transparent); }
.manage-card-dot-learning { background: color-mix(in srgb, var(--colorAccent) 30%, var(--bgPrimary)); }
.manage-card-dot-stable   { background: color-mix(in srgb, var(--colorAccent) 60%, var(--bgPrimary)); }
.manage-card-dot-due      { background: var(--colorAccent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--colorAccent) 18%, transparent); }
.manage-card-dot-leech    { background: var(--colorWarning); box-shadow: 0 0 0 2px color-mix(in srgb, var(--colorWarning) 22%, transparent); }
/* 레거시 state class (다른 페이지에서 참조할 가능성) */
.manage-card-state.is-new        { background: color-mix(in srgb, var(--textTertiary) 55%, transparent); }
.manage-card-state.is-learning   { background: color-mix(in srgb, var(--colorAccent) 30%, var(--bgPrimary)); }
.manage-card-state.is-review     { background: color-mix(in srgb, var(--colorAccent) 60%, var(--bgPrimary)); }
.manage-card-state.is-relearning { background: color-mix(in srgb, var(--colorAccent) 30%, var(--bgPrimary)); }

/* 카드 체크박스 — row 맨 앞. 체크되면 accent, 미선택은 옅은 테두리. */
.manage-card-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  cursor: pointer;
}
.manage-card-check-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.manage-card-check-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--cardBorder);
  background: var(--bgPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.manage-card-check-input:checked ~ .manage-card-check-box {
  background: var(--colorAccent);
  border-color: var(--colorAccent);
  color: #fff;
}
.manage-card-check:hover .manage-card-check-box {
  border-color: var(--colorAccent);
}
/* 선택된 row — 좌측 accent bar + 배경 8% */
.manage-card-row[data-selected="true"] {
  background: color-mix(in srgb, var(--colorAccent) 6%, transparent);
}
.manage-card-row[data-selected="true"]::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--colorAccent);
  border-radius: 0 2px 2px 0;
}
.manage-card-row { position: relative; }

/* 전체 선택 체크박스 (toolbar) */
.manage-cards-select-all {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  cursor: pointer;
}
.manage-cards-select-all-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.manage-cards-select-all-box {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--cardBorder);
  background: var(--bgPrimary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.manage-cards-select-all-box .icon-check,
.manage-cards-select-all-box .icon-dash { display: none; }
.manage-cards-select-all-input:checked ~ .manage-cards-select-all-box {
  background: var(--colorAccent);
  border-color: var(--colorAccent);
  color: #fff;
}
.manage-cards-select-all-input:checked ~ .manage-cards-select-all-box .icon-check { display: block; }
.manage-cards-select-all-input:indeterminate ~ .manage-cards-select-all-box {
  background: var(--colorAccent);
  border-color: var(--colorAccent);
  color: #fff;
}
.manage-cards-select-all-input:indeterminate ~ .manage-cards-select-all-box .icon-dash { display: block; }

/* 일괄 작업 바 — 선택 있을 때만 표시. accent 톤.
 *   [hidden] 속성은 HTML 기본이지만 여기서 display: flex 로 덮어버릴 수 있어,
 *   [hidden] 분기를 명시해 display:none을 우선시킨다. */
.manage-cards-batch-bar {
  position: sticky;
  top: calc(var(--space-2) + 52px);   /* 앱바 높이 + 여유 */
  z-index: 5;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--colorAccent) 12%, var(--bgPrimary));
  border: 1px solid color-mix(in srgb, var(--colorAccent) 25%, transparent);
  border-radius: var(--radius-pill);
  box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--colorAccent) 30%, transparent);
  flex-wrap: wrap;
}
.manage-cards-batch-bar[hidden] { display: none; }
.manage-cards-batch-count {
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  color: var(--colorAccent);
  white-space: nowrap;
}
.manage-cards-batch-actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-left: auto;
}
.manage-cards-batch-actions .btn-chip {
  padding: 6px 12px;
}
.manage-cards-batch-actions .manage-batch-delete {
  color: var(--colorError);
  border-color: color-mix(in srgb, var(--colorError) 30%, transparent);
}
.manage-cards-batch-actions .manage-batch-delete:hover:not(:disabled) {
  background: color-mix(in srgb, var(--colorError) 12%, transparent);
}
.manage-cards-batch-actions .manage-batch-clear {
  padding: 6px 10px;
  font-size: var(--fontSizeBase);
}

/* =========================================================================
 * 덱 설정 모달 (Phase 2.11) — deckSettings.js
 * 3-section 접힘 패널: 기본 / 학습 / 위험 영역. flat 15필드 → 레이블 개선.
 *
 * 레이아웃 정책: bs-body의 자체 스크롤 OFF, wrap이 flex:1로 bs-body 전체 차지 →
 *   wrap 안의 .deck-settings가 유일한 스크롤 영역. .ds-actions는 footer로 고정.
 *
 *   bs-body는 원래 overflow-y:auto이지만 이 wrap이 `data-scroll-shell="1"` 속성으로
 *   부모 bs-body의 padding을 뚫고 들어가 풀폭으로 차지하도록 CSS에서 override.
 * ========================================================================= */
/* wrap이 있는 sheet body는 내부 스크롤을 위임 — bs-body 자체는 스크롤하지 않음.
 *   Firefox 성능 가이드상 :has() 금지 → JS에서 bs-body에 data-scroll-shell="1" 부여. */
.bs-body[data-scroll-shell="1"] {
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.bs-body[data-scroll-shell="1"] > .ds-actions {
  /* wrap 외부에 액션 바가 오는 경우를 위한 대비 — 좌우 padding 확보 */
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
.deck-settings-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;   /* flex 부모에서 overflow 자식이 축소 가능해야 함 */
  width: 100%;
}
.deck-settings {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  overflow-y: auto;            /* 유일한 스크롤 영역 */
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 0 var(--space-4) var(--space-3);
  min-height: 0;
}
.ds-section {
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgPrimary);
}
.ds-section-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  user-select: none;
  font-weight: var(--fontWeightSemibold);
  color: var(--textPrimary);
  list-style: none;   /* 기본 disclosure triangle 제거 */
}
.ds-section-summary::-webkit-details-marker { display: none; }
.ds-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 0 var(--space-4) var(--space-4);
}
.ds-section-chev {
  transition: transform var(--dur-fast) var(--ease-standard);
  color: var(--textTertiary);
}
.ds-section[open] .ds-section-chev { transform: rotate(180deg); }

/* 필드 레이블 */
.ds-field-label {
  display: block;
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  color: var(--textPrimary);
  margin-bottom: 4px;
}
.ds-field-hint {
  display: block;
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
  margin-bottom: var(--space-2);
}

/* 덱 커버 — 4:3 프리뷰 + 업로드/제거 버튼 */
.ds-cover-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ds-cover-wrap {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 3;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bgSecondary);
}
.ds-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ds-cover-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--textTertiary);
}
.ds-cover-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ds-cover-upload {
  cursor: pointer;
}

/* 세그먼트 버튼 그룹 — 프리셋/상태 선택 */
.ds-segmented {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--bgSecondary);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.ds-seg-btn {
  appearance: none;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  border-radius: calc(var(--radius-md) - 2px);
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.ds-seg-btn:hover { color: var(--textPrimary); }
.ds-seg-btn[aria-checked="true"] {
  background: var(--colorAccent);
  color: #fff;
  font-weight: var(--fontWeightMedium);
}
.ds-seg-clear {
  appearance: none;
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--textTertiary);
  cursor: pointer;
  font-size: var(--fontSizeBase);
}
.ds-seg-clear:hover { background: color-mix(in srgb, var(--textPrimary) 6%, transparent); color: var(--textPrimary); }

/* 토글(체크박스) — 삭제 잠금 등 */
.ds-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}
.ds-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.ds-toggle-box {
  width: 36px; height: 22px;
  border-radius: 22px;
  background: var(--cardBorder);
  position: relative;
  flex: 0 0 auto;
  transition: background var(--dur-fast);
}
.ds-toggle-box::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform var(--dur-fast) var(--ease-ios);
}
.ds-toggle input:checked ~ .ds-toggle-box { background: var(--colorAccent); }
.ds-toggle input:checked ~ .ds-toggle-box::after { transform: translateX(14px); }
.ds-toggle-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fontSizeSM);
}
.ds-toggle-hint { font-size: var(--fontSizeXS); }

/* 스케줄링 파라미터 블록 — 그룹 타이틀 + 소그룹 제목 */
.ds-params {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.ds-params-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.ds-params-title {
  margin: 0;
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeightSemibold);
  color: var(--textPrimary);
}
.ds-params-sub {
  margin: 0 0 var(--space-2);
  font-size: var(--fontSizeXS);
}
.ds-apply-recommend {
  flex: 0 0 auto;
  color: var(--colorAccent);
  border-color: color-mix(in srgb, var(--colorAccent) 30%, transparent);
}
.ds-apply-recommend:hover:not(:disabled) {
  background: color-mix(in srgb, var(--colorAccent) 10%, transparent);
}
.ds-apply-recommend-hint {
  margin: 0 0 var(--space-2);
  font-size: var(--fontSizeXS);
}

/* 추천값 미리보기 chip 행 — 축 선택 즉시 반영, 슬라이더와 다른 항목만 accent 강조. */
.ds-preview-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.ds-preview-chip {
  appearance: none;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  background: var(--bgSecondary);
  color: var(--textSecondary);
  border: 1px solid transparent;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast), transform var(--dur-instant);
}
.ds-preview-chip:hover {
  background: color-mix(in srgb, var(--colorAccent) 10%, var(--bgSecondary));
  color: var(--colorAccent);
}
.ds-preview-chip:active { transform: scale(0.96); }
.ds-preview-chip-label {
  font-weight: var(--fontWeightMedium);
  color: var(--textTertiary);
}
.ds-preview-chip-val {
  font-variant-numeric: tabular-nums;
}
.ds-preview-chip.is-different {
  background: color-mix(in srgb, var(--colorAccent) 14%, transparent);
  color: var(--colorAccent);
  border-color: color-mix(in srgb, var(--colorAccent) 28%, transparent);
}
.ds-preview-chip.is-different .ds-preview-chip-label {
  color: var(--colorAccent);
}

/* 파라미터 필드 pulse — "추천값 적용" 후 바뀐 필드 강조 (900ms) */
@keyframes ds-pulse-kf {
  0%   { background: color-mix(in srgb, var(--colorAccent) 25%, transparent); }
  100% { background: transparent; }
}
.ds-pulse {
  animation: ds-pulse-kf 900ms var(--ease-ios) both;
  border-radius: var(--radius-sm);
}
.ds-numeric-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-3) var(--space-4);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  background: var(--bgPrimary);
}
.ds-group-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-1);
}
.ds-group-title {
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightSemibold);
  color: var(--colorAccent);
}
.ds-group-sub {
  font-size: var(--fontSizeXS);
}

/* 숫자 슬라이더 필드 — 레이블+현재값+range+힌트 */
.ds-numeric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.ds-num-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ds-field-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.ds-field-value {
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightSemibold);
  color: var(--colorAccent);
  font-variant-numeric: tabular-nums;
}
.ds-num-input {
  width: 100%;
  accent-color: var(--colorAccent);
}
/* range wrap — 추천값 마커가 올라가는 레이어. range 자체는 width:100% */
.ds-num-track {
  position: relative;
  width: 100%;
  padding: 4px 0;
}
.ds-num-track .ds-num-input { display: block; }
/* 추천값 마커 — 네이티브 range thumb 폭(~16px)만큼 안쪽에 머물도록 계산.
 *   thumb 중심은 left 0에서 반지름(8px)만큼, right에서도 반지름만큼 안쪽.
 *   ∴ 실제 usable 범위는 (100% - thumb폭). --pct(0..1)로 비율을 넣으면
 *     left: calc(thumb반지름 + pct * (100% - thumb폭))
 *   로 정확히 thumb 중심과 일치.
 *
 *   --thumb-full과 --thumb-half는 accent-color 기반 네이티브 thumb의 실측 중위값. */
.ds-num-rec-marker {
  --thumb-full: 16px;
  --thumb-half: 8px;
  --pct: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--colorAccent) 70%, transparent);
  border-radius: 2px;
  left: calc(var(--thumb-half) + var(--pct) * (100% - var(--thumb-full)));
  transform: translateX(-50%);
  pointer-events: none;
  transition: left var(--dur-base) var(--ease-ios);
}
.ds-num-rec-marker::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: var(--colorAccent);
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--bgPrimary);
}

/* 고급 패널 */
.ds-advanced {
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}
.ds-advanced summary {
  cursor: pointer;
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
  margin-bottom: var(--space-3);
}
.ds-advanced[open] summary {
  color: var(--textPrimary);
  margin-bottom: var(--space-4);
}
.ds-fsrs-stub {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bgSecondary);
  border-radius: var(--radius-sm);
  font-size: var(--fontSizeXS);
}

/* 위험 영역 — 풀폭 버튼 (제목+설명) */
.ds-danger-btn {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  width: 100%;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--colorError) 30%, transparent);
  border-radius: var(--radius-sm);
  color: var(--colorError);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.ds-danger-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--colorError) 8%, transparent);
}
.ds-danger-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--cardBorder);
  color: var(--textTertiary);
}
.ds-danger-title {
  font-weight: var(--fontWeightSemibold);
  font-size: var(--fontSizeBase);
}
.ds-danger-desc {
  font-size: var(--fontSizeXS);
  font-weight: var(--fontWeightRegular);
  white-space: normal;
}
.ds-danger-btn:disabled .ds-danger-title,
.ds-danger-btn:disabled .ds-danger-desc { color: var(--textTertiary); }

/* 하단 저장·취소 액션 — .deck-settings(스크롤 영역) 바깥의 normal-flow footer.
 *   bs-body의 padding이 data-scroll-shell로 0이 되므로 여기서 좌우 padding을 직접.
 *   border-top은 bs-header의 border-bottom과 동일 톤(textPrimary 8%)으로 일관. */
.ds-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) var(--space-3);
  background: var(--bgPrimary);
  border-top: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  flex: 0 0 auto;
}
/* 하단 모서리 처리: 데스크탑에서 bs-sheet 자체에 overflow:hidden + border-radius가
 *   적용되므로 이 영역에 별도 radius 불필요 (자연스럽게 클리핑됨). */

/* Gmail 스타일 "필터 전체 선택" 배너 — batch-bar 안에 링크 버튼으로 삽입. */
.manage-select-all-banner {
  padding: 4px 10px;
  font-size: var(--fontSizeXS);
  font-weight: var(--fontWeightMedium);
  color: var(--colorAccent);
  background: color-mix(in srgb, var(--colorAccent) 10%, transparent);
  border-color: transparent;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  flex: 0 0 auto;
}
.manage-select-all-banner:hover:not(:disabled) {
  background: color-mix(in srgb, var(--colorAccent) 18%, transparent);
}

.manage-card-text {
  min-width: 0;
  overflow: hidden;
}
.manage-card-front,
.manage-card-back {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.manage-card-front {
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.manage-card-back {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  margin-top: 4px;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
/* 프리뷰 내부 primary(면당 가장 큰 폰트 슬롯) 강조 — 본문 원문에서의 weight-차이를
 *   리스트 행에서도 재현해, 사용자가 카드 핵심을 한눈에 스캔할 수 있게 한다.
 *   뒷면은 기본이 textSecondary라 primary만 textPrimary로 대비. */
.manage-card-primary {
  font-weight: var(--fontWeightSemibold, 600);
}
.manage-card-back .manage-card-primary {
  color: var(--textPrimary);
}
.manage-card-sep {
  color: var(--textTertiary);
  opacity: 0.7;
  margin: 0 2px;
}
.manage-card-tags {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  max-width: 180px;
  overflow: hidden;
}
.manage-card-tag,
.manage-card-tag-more {
  padding: 2px 8px;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  background: color-mix(in srgb, var(--textPrimary) 6%, transparent);
  border-radius: 999px;
  white-space: nowrap;
}
.manage-card-reps {
  font-variant-numeric: tabular-nums;
  font-size: var(--fontSizeXS);
  min-width: 24px;
  text-align: right;
}

/* 관리 탭 랜딩 툴바 */
.manage-list {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.manage-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
/* 공용 chip 버튼 — 보조 액션(가져오기·일괄 선택·덱 설정 등)에 사용하는 작은 pill.
 *   강조(btn-cta) pill 옆에 나란히 놓일 때 **계층·크기 구분**이 자명하도록 작게 유지.
 *   같은 pill 언어(radius-pill)는 공유 — 시각 일관성. */
.btn-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-family: var(--fontFamily);
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  color: var(--textPrimary);
  background: color-mix(in srgb, var(--textPrimary) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-chip:hover:not(:disabled) {
  background: color-mix(in srgb, var(--textPrimary) 10%, transparent);
}
.btn-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--colorAccent) 12%, transparent);
  border-color: color-mix(in srgb, var(--colorAccent) 40%, transparent);
  color: var(--colorAccent);
}
.btn-chip:disabled { opacity: 0.45; cursor: default; }
.btn-chip:focus-visible { outline: 2px solid var(--focusRing); outline-offset: 2px; }
.manage-toolbar .btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: var(--fontSizeSM);
  font-weight: 500;
}

/* 관리 툴바 '새 덱' — Primary Pill CTA (관리 대표 액션, 향후 AI 덱 생성 확장)
   btn-cta 기본 스타일은 유지하고 pill 형태만 씌움.
   + 아이콘이 왼쪽을 시각적으로 끌어당기는 걸 보정: 오른쪽 패딩 +6px (optical alignment). */
.manage-toolbar .manage-tool-new {
  border-radius: 999px;
  padding-left: 16px;
  padding-right: 22px;
}
/* 가비지 덱 정리 버튼 — 경고 톤 (있을 때만 툴바 끝에 추가됨) */
.manage-toolbar .manage-tool-orphans {
  background: color-mix(in srgb, var(--colorWarning) 12%, transparent);
  border-color: color-mix(in srgb, var(--colorWarning) 35%, transparent);
  color: var(--colorWarning);
}
.manage-toolbar .manage-tool-orphans:hover {
  background: color-mix(in srgb, var(--colorWarning) 18%, transparent);
  border-color: color-mix(in srgb, var(--colorWarning) 50%, transparent);
}

/* 새 덱 시트 폼 */
.manage-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: var(--space-3);
}
.manage-field-label {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.manage-input {
  width: 100%;
  padding: 10px 12px;
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  background: color-mix(in srgb, var(--textPrimary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 12%, transparent);
  border-radius: 8px;
  outline: none;
  transition: border-color 150ms ease, background 150ms ease;
}
.manage-input:focus {
  border-color: var(--colorAccent);
  background: var(--bgPrimary);
}
.manage-field-hint {
  font-size: var(--fontSizeXS);
  color: var(--textTertiary, var(--textSecondary));
  margin-bottom: var(--space-3);
}
.manage-sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.manage-sheet-actions .btn-cta {
  min-width: 120px;
}
.manage-confirm-msg {
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  line-height: 1.5;
  margin: 0 0 var(--space-3);
}
.manage-confirm-actions {
  justify-content: flex-end;
}
/* .btn-cta-danger 단독 규칙 — .btn-cta.btn-cta-danger(위쪽, 섀도우 포함)가 메인.
 *   .btn-cta 클래스 없이 .btn-cta-danger만 붙는 경우를 위해 색만 복제.
 *   accent 기반으로 테마 DNA 유지 (위의 .btn-cta.btn-cta-danger와 동일 정책). */
.btn-cta-danger:not(.btn-cta) {
  background: var(--colorAccent);
  color: #fff;
}
.btn-cta-danger:not(.btn-cta):hover {
  background: color-mix(in srgb, var(--colorAccent) 85%, var(--textPrimary));
}

/* 가져오기 시트 (Phase 2.5a) */
.manage-import-msg {
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  margin: 0 0 var(--space-3);
}
.manage-import-filename {
  margin: var(--space-2) 0 0;
  font-size: var(--fontSizeXS);
}
.manage-import-progress {
  height: 4px;
  background: color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.manage-import-progress-bar {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 30%;
  background: var(--colorAccent);
  border-radius: 999px;
  animation: manage-import-progress-slide 1200ms ease-in-out infinite;
}
@keyframes manage-import-progress-slide {
  0%   { left: -30%; }
  100% { left: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .manage-import-progress-bar { animation-duration: 0.01ms; }
}

/* 요약 통계 타일 */
.manage-import-summary {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-bottom: var(--space-4);
}
.manage-import-stat {
  padding: var(--space-3) var(--space-4);
  background: color-mix(in srgb, var(--textPrimary) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: var(--radius-md, 12px);
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}
.manage-import-stat-value {
  font-size: var(--fontSizeXL, 1.5rem);
  font-weight: 600;
  color: var(--colorAccent);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.manage-import-stat-label {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  margin-top: 4px;
}

/* 슬롯 chip */
.manage-import-slots {
  margin-bottom: var(--space-3);
}
.manage-import-slot-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.manage-import-slot-chip {
  display: inline-block;
  padding: 4px 10px;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  background: color-mix(in srgb, var(--textPrimary) 6%, transparent);
  border-radius: 999px;
}

/* 샘플 리스트 */
.manage-import-samples {
  margin: var(--space-3) 0;
}
.manage-import-sample {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 6%, transparent);
  font-size: var(--fontSizeSM);
  align-items: baseline;
}
.manage-import-sample:last-child { border-bottom: none; }
.manage-import-sample-idx {
  color: var(--textTertiary, var(--textSecondary));
  font-variant-numeric: tabular-nums;
  font-size: var(--fontSizeXS);
}
.manage-import-sample-front {
  color: var(--textPrimary);
  overflow-wrap: break-word;
  word-break: break-word;
}
.manage-import-sample-back {
  color: var(--textSecondary);
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 샘플 테이블 (CSV/JSON) */
.manage-import-table-wrap {
  overflow-x: auto;
  margin-top: 6px;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: var(--radius-md, 8px);
}
.manage-import-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fontSizeSM);
}
.manage-import-table th,
.manage-import-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 6%, transparent);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manage-import-table tbody tr:last-child td {
  border-bottom: none;
}
.manage-import-table th {
  background: color-mix(in srgb, var(--textPrimary) 4%, transparent);
  color: var(--textSecondary);
  font-weight: 500;
  font-size: var(--fontSizeXS);
}
.manage-import-table td {
  color: var(--textPrimary);
}
.manage-import-th-idx,
.manage-import-td-idx {
  width: 32px;
  color: var(--textTertiary, var(--textSecondary));
  font-variant-numeric: tabular-nums;
  text-align: right !important;
}

/* 파일명 줄 (분석 / commit 시트 공용) */
.manage-import-filename-line {
  margin-top: var(--space-2);
  font-size: var(--fontSizeXS);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 입력 overflow 방지 */
.manage-input {
  box-sizing: border-box;
  max-width: 100%;
}

/* 분할 결과 그룹 리스트 */
.manage-import-split-groups {
  margin: var(--space-3) 0;
}
.manage-import-group-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: var(--radius-md, 8px);
}
.manage-import-group-row {
  padding: 8px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 6%, transparent);
}
.manage-import-group-row:last-child { border-bottom: none; }
.manage-import-group-row.is-excluded .manage-import-group-name {
  text-decoration: line-through;
  color: var(--textTertiary, var(--textSecondary));
}
.manage-import-group-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--fontSizeSM);
}
.manage-import-group-check {
  accent-color: var(--colorAccent);
}
.manage-import-group-name {
  flex: 1 1 auto;
  color: var(--textPrimary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.manage-import-group-prefix {
  color: var(--textTertiary, var(--textSecondary));
}
.manage-import-group-count {
  flex: 0 0 auto;
  font-size: var(--fontSizeXS);
}

/* Determinate 진행 바 (commit NDJSON) */
.manage-import-progress-determinate {
  height: 6px;
  background: color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: 999px;
  overflow: hidden;
}
.manage-import-progress-fill {
  display: block;
  height: 100%;
  background: var(--colorAccent);
  transition: width 300ms ease;
  border-radius: 999px;
}

/* 시트 닫기 버튼 라벨 (BottomSheet 공용) — Req 8.11 일관성 */
.bs-close {
  width: auto;
  padding: 4px 10px 4px 8px;
  gap: 4px;
}
.bs-close .bs-close-label {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.bs-close:hover .bs-close-label { color: var(--textPrimary); }

/* =========================================================
   전역 스크롤바 숨김 — 스크롤 기능은 유지, 시각 bar만 제거.
   휠/터치패드/터치 스크롤은 정상 동작.
   ========================================================= */
html {
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE/Edge legacy */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                   /* Chrome/Safari/Edge */
}
/* 내부 스크롤러 공통 */
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

/* =========================================================
   App Bar (components §1.0 App Shell Phase 1)
   pill 타입 영구 앱 바 + 내부 Ticker 슬롯. 스크롤 방향과 함께 슬라이드.
   메시지가 없어도 pill은 유지, 메시지가 있을 때만 type 배경·아이콘 활성.
   ========================================================= */
.app-bar-ticker {
  position: fixed;
  top: calc(var(--sa-top) + var(--space-2));
  left: calc(var(--sa-left) + var(--space-4));
  right: calc(var(--sa-right) + var(--space-4));
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;        /* 내부 아이콘+메시지는 항상 중앙 */
  gap: var(--space-2);
  /* 좌우 엔드캡 버튼(28px + 4px inset) 자리 예약 — 슬롯 첫/끝 글자가 버튼에 가려지지 않도록 */
  padding: 6px 40px;
  min-height: 36px;
  background: color-mix(in srgb, var(--bgPrimary) 92%, transparent);
  color: var(--textPrimary);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: 999px;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12));
  font-size: var(--fontSizeSM);
  font-family: var(--fontFamily);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 1;
  transform: translateY(0);
  /* 부드러운 등퇴장 — 220ms에서 380ms로 늘리고 'ease' 곡선으로 시작/끝 가속도를 완만하게.
     스크롤로 자주 토글되는 요소이므로 너무 짧으면 "방정맞은" 느낌, 너무 길면 반응 늦음. 380ms가 절충. */
  transition:
    opacity 380ms cubic-bezier(0.32, 0.72, 0.24, 1),
    transform 380ms cubic-bezier(0.32, 0.72, 0.24, 1);
}
/* 스크롤 다운·몰입 시 pill이 위로 말려 올라감 — translate 거리도 130% → 110%로 살짝 줄여 거칠지 않게 */
.app-bar-ticker[data-visible="false"] {
  opacity: 0;
  transform: translateY(-110%);
}
/* 메시지 없는 빈 pill은 아이콘 자리 숨겨 중앙 밸런스 유지.
   ※ 과거 opacity+width transition 시도했으나 "아이콘 뚝 + 메시지 재렌더 후 페이드"로 어색해서
     원래 display:none 방식으로 원복. 아이콘-먼저-페이드 효과는 추후 재설계 필요. */
.app-bar-ticker[data-has-message="false"] .abt-icon {
  display: none;
}
/* 메시지 없을 때는 pill 자체도 살짝 투명하게 — 주의 끌지 않음 */
.app-bar-ticker[data-has-message="false"] {
  background: color-mix(in srgb, var(--bgPrimary) 80%, transparent);
  border-color: color-mix(in srgb, var(--textPrimary) 6%, transparent);
}
/* 토스트 알림이 표시될 때만 슬롯 글자를 굵게 + 테마 accent 색으로 강조.
   기본 ticker 슬라이드(시각/라우트/학습 상태)는 data-type="default"로 구분되어
   이 강조 규칙의 대상이 아님 — 토스트가 끝나면 자동으로 일반 굵기/색으로 돌아옴.
   color는 flip의 양쪽 face에 모두 적용되어 애니메이션 중에도 일관. */
.app-bar-ticker[data-has-message="true"]:not([data-type="default"]) .abt-slot,
.app-bar-ticker[data-has-message="true"]:not([data-type="default"]) .abt-face {
  font-weight: var(--fontWeightSemibold, 600);
  color: var(--colorAccent);
}
/* 토스트일 때 pill 테두리도 accent 톤으로 소폭 강조 */
.app-bar-ticker[data-has-message="true"]:not([data-type="default"]) {
  border-color: color-mix(in srgb, var(--colorAccent) 35%, var(--cardBorder));
}
.app-bar-ticker .abt-icon {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.app-bar-ticker .abt-icon .icon {
  width: 16px;
  height: 16px;
}

/* 양끝 버튼 공통 — pointer-events 국소 허용. pill 자체는 무반응 유지.
   서클 배경 + 얇은 테두리로 아이콘을 감싸 "엔드 캡" 인상 강화. */
.app-bar-ticker .abt-conn-btn,
.app-bar-ticker .abt-focus-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--textPrimary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 12%, transparent);
  color: var(--textSecondary);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition:
    background 150ms var(--ease-standard, ease),
    border-color 150ms ease,
    color 150ms ease;
}
.app-bar-ticker .abt-conn-btn  { left: 4px; }
.app-bar-ticker .abt-focus-btn { right: 4px; }
.app-bar-ticker .abt-conn-btn:hover,
.app-bar-ticker .abt-focus-btn:hover {
  background: color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-color: color-mix(in srgb, var(--textPrimary) 20%, transparent);
  color: var(--textPrimary);
}
.app-bar-ticker .abt-conn-btn:active,
.app-bar-ticker .abt-focus-btn:active {
  transform: translateY(-50%) scale(0.92);
}
.app-bar-ticker .abt-conn-btn .icon,
.app-bar-ticker .abt-focus-btn .icon { width: 16px; height: 16px; }

/* 좌우 버튼 자리 확보 — 슬롯이 버튼 위에 깔리지 않게 */
.app-bar-ticker {
  padding-left: 36px;
  padding-right: 36px;
}

/* 양끝 버튼 툴팁 — data-tooltip 속성을 CSS ::after로 표시. hover/focus 시 등장. */
.app-bar-ticker .abt-conn-btn[data-tooltip],
.app-bar-ticker .abt-focus-btn[data-tooltip] {
  /* 상대 위치로 tooltip 기준점 확보. 기존 position: absolute 유지. */
}
.app-bar-ticker .abt-conn-btn[data-tooltip]::after,
.app-bar-ticker .abt-focus-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 8px);
  padding: 4px 10px;
  background: color-mix(in srgb, var(--textPrimary) 90%, transparent);
  color: var(--bgPrimary);
  font-size: var(--fontSizeXS);
  line-height: 1.3;
  white-space: nowrap;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity 150ms var(--ease-standard, ease),
    transform 150ms var(--ease-standard, ease);
  z-index: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
/* 좌측 버튼 — 툴팁 좌측 정렬 (버튼 왼쪽 가장자리 기준) */
.app-bar-ticker .abt-conn-btn[data-tooltip]::after {
  left: 0;
}
/* 우측 버튼 — 툴팁 우측 정렬 (버튼 오른쪽 가장자리 기준, 뷰포트 밖으로 밀리지 않음) */
.app-bar-ticker .abt-focus-btn[data-tooltip]::after {
  right: 0;
}
.app-bar-ticker .abt-conn-btn[data-tooltip]:hover::after,
.app-bar-ticker .abt-conn-btn[data-tooltip]:focus-visible::after,
.app-bar-ticker .abt-focus-btn[data-tooltip]:hover::after,
.app-bar-ticker .abt-focus-btn[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}
/* 모바일 (터치) 에서는 툴팁 생략 — 의도치 않게 뜨는 것 방지 */
@media (hover: none) {
  .app-bar-ticker .abt-conn-btn[data-tooltip]::after,
  .app-bar-ticker .abt-focus-btn[data-tooltip]::after {
    display: none;
  }
}

/* 연결 상태 색 — 아이콘·테두리·살짝 배경까지 연동 */
.app-bar-ticker[data-online="true"]  .abt-conn-btn {
  color: var(--colorSuccess);
  border-color: color-mix(in srgb, var(--colorSuccess) 30%, transparent);
  background: color-mix(in srgb, var(--colorSuccess) 8%, transparent);
}
.app-bar-ticker[data-online="false"] .abt-conn-btn {
  color: var(--colorWarning);
  border-color: color-mix(in srgb, var(--colorWarning) 30%, transparent);
  background: color-mix(in srgb, var(--colorWarning) 8%, transparent);
}

/* 집중 모드: pill 경계선 살짝 강조 + 버튼 active 색(테두리·배경 연동) */
.app-bar-ticker[data-focus="true"] {
  border-color: color-mix(in srgb, var(--colorAccent) 35%, transparent);
}
.app-bar-ticker[data-focus="true"] .abt-focus-btn {
  color: var(--colorAccent);
  border-color: color-mix(in srgb, var(--colorAccent) 35%, transparent);
  background: color-mix(in srgb, var(--colorAccent) 10%, transparent);
}
.app-bar-ticker[data-type="info"]    .abt-icon .icon { color: var(--colorAccent); }
.app-bar-ticker[data-type="success"] .abt-icon .icon { color: var(--colorSuccess); }
.app-bar-ticker[data-type="warning"] .abt-icon .icon { color: var(--colorWarning); }
.app-bar-ticker[data-type="error"]   .abt-icon .icon { color: var(--colorError); }

/* 기본 순환 표시 — 중립 톤. 아이콘 숨김, 글자 색만 살짝 낮춤. */
.app-bar-ticker[data-type="default"] {
  background: color-mix(in srgb, var(--bgPrimary) 88%, transparent);
  color: var(--textSecondary);
  border-color: color-mix(in srgb, var(--textPrimary) 8%, transparent);
}
.app-bar-ticker[data-type="default"] .abt-icon { display: none; }
.app-bar-ticker[data-type="default"].abt-pulse { animation: none; }

.abt-slot {
  display: inline-flex;
  align-items: center;
  gap: 2px;              /* 문자 간 최소 간격 — 겹침 방지 */
  line-height: 1.2;
  white-space: nowrap;
}

.abt-char {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* 한 글자 폭 보장 — 숫자는 tabular-nums + 1ch, 한글/라틴은 1em. 둘 중 큰 쪽.
     (이전 0.9em은 특정 폰트에서 "20:30"의 첫 글자 "2"가 셀 안에 완전히 못 들어가
      라운드 오차로 좌측이 잘려 보이는 이슈가 있었다.) */
  min-width: max(1ch, 1em);
  padding: 0 1px;        /* 라운드 오차로 face가 셀 밖으로 튀는 엣지 흡수 */
  box-sizing: content-box;
  height: 1.3em;
  line-height: 1.3em;
  perspective: 300px;
  text-align: center;
}
.abt-face {
  position: absolute;
  inset: 0;              /* 셀 내부 전체 — 셀 밖으로 나가지 않음 */
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
  transition: transform 260ms var(--ease-ios, cubic-bezier(0.55, 0, 0.1, 1));
  white-space: pre;
}
.abt-face-current {
  transform: rotateX(0deg);
  z-index: 2;
  /* 접힐 때(위로 떨어지듯): 빠르게 접히다 후반 감속 */
  transition-timing-function: cubic-bezier(0.55, 0.02, 0.73, 0.15);
}
.abt-face-next {
  transform: rotateX(90deg);
  z-index: 1;
  /* 펼쳐질 때: 위에서 떨어져 살짝 튕김 */
  transition-timing-function: cubic-bezier(0.17, 0.82, 0.3, 1.04);
}
.abt-char.abt-flipping .abt-face-current {
  transform: rotateX(-90deg);
}
.abt-char.abt-flipping .abt-face-next {
  transform: rotateX(0deg);
  z-index: 3;
}

/* pill 자체의 반복 알림 pulse — 같은 메시지가 연속일 때도 눈에 띄게 */
@keyframes abt-pulse {
  0%   { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12)); }
  30%  {
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--colorAccent) 22%, transparent),
      0 6px 22px rgba(0,0,0,0.14);
  }
  100% { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12)); }
}
.app-bar-ticker.abt-pulse {
  animation: abt-pulse 520ms var(--ease-ios, cubic-bezier(0.4, 0, 0.2, 1)) 1;
}
.app-bar-ticker[data-type="success"].abt-pulse { animation-name: abt-pulse-success; }
.app-bar-ticker[data-type="warning"].abt-pulse { animation-name: abt-pulse-warning; }
.app-bar-ticker[data-type="error"].abt-pulse   { animation-name: abt-pulse-error; }
@keyframes abt-pulse-success {
  0% { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12)); }
  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--colorSuccess) 28%, transparent), 0 6px 22px rgba(0,0,0,0.14); }
  100% { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12)); }
}
@keyframes abt-pulse-warning {
  0% { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12)); }
  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--colorWarning) 28%, transparent), 0 6px 22px rgba(0,0,0,0.14); }
  100% { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12)); }
}
@keyframes abt-pulse-error {
  0% { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12)); }
  30% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--colorError) 30%, transparent), 0 6px 24px rgba(0,0,0,0.16); }
  100% { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12)); }
}

/* 몰입 모드에서는 ticker 숨김 */
body[data-immersive="true"] .app-bar-ticker {
  display: none;
}

/* Reduced Motion: 플립 생략 (JS에서도 이중 안전) */
@media (prefers-reduced-motion: reduce) {
  .app-bar-ticker { transition-duration: 0.01ms; }
  .abt-face { transition-duration: 0.01ms; }
}
[data-reduced-motion="true"] .app-bar-ticker { transition-duration: 0.01ms; }
[data-reduced-motion="true"] .abt-face { transition-duration: 0.01ms; }

/* =========================================================================
 * 템플릿 편집 탭 (Phase 2.10 Pass 1) — templateEdit.js
 * 관리 탭 → 덱 상세 → "템플릿" 탭에 인라인 마운트. 모달이 아님.
 * ========================================================================= */
.manage-templates-wrap {
  padding: var(--space-4) 0;
}
.manage-templates {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 800px;
  margin: 0 auto;
}
.te-switcher {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}
.te-switch-btn[aria-pressed="true"] {
  background: color-mix(in srgb, var(--colorAccent) 14%, transparent);
  color: var(--colorAccent);
  border-color: color-mix(in srgb, var(--colorAccent) 35%, transparent);
}
/* lifecycle 액션 — 스위치 버튼들과 시각 분리. 중간 구분선으로 묶음. */
.te-switcher-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-left: auto;
  padding-left: var(--space-2);
  border-left: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
}
.te-tpl-delete {
  /* 삭제는 위험 — 톤만 약하게 다르게 (테마 콘트라스트는 유지) */
  color: var(--colorDanger, var(--textPrimary));
}
.te-name-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.te-slots-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.te-slots-title {
  margin: 0;
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeightSemibold);
}
.te-slot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.te-slot-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgPrimary);
  transition: opacity var(--dur-fast), border-color var(--dur-fast);
}
.te-slot-row.is-deleted {
  opacity: 0.5;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--colorError) 30%, transparent);
}
.te-slot-row.is-deleted .te-slot-name {
  text-decoration: line-through;
}
.te-slot-row.is-new {
  border-color: color-mix(in srgb, var(--colorAccent) 35%, transparent);
  background: color-mix(in srgb, var(--colorAccent) 4%, var(--bgPrimary));
}
.te-slot-ord {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 4px;
}
.te-ord-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  font-size: var(--fontSizeXS);
  font-weight: var(--fontWeightSemibold);
  color: var(--textSecondary);
  background: var(--bgSecondary);
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
}
.te-slot-row.is-deleted .te-ord-num {
  color: var(--textTertiary);
  text-decoration: none;
}
.te-ord-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.te-slots-head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.te-sort {
  padding: 2px;
}
.te-sort .te-sort-btn {
  padding: 4px 10px;
  font-size: var(--fontSizeXS);
}
.te-slots-hint {
  font-weight: var(--fontWeightRegular);
  font-size: var(--fontSizeXS);
  margin-left: 6px;
}

/* 2-column 레이아웃: 좌 슬롯 편집, 우 sticky 프리뷰 패널. 모바일에선 1-column. */
.te-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
}
.te-layout-main {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}
.te-preview-wrap {
  position: sticky;
  top: calc(var(--space-4) + 56px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  align-self: start;
  padding: var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgPrimary);
}
.te-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.te-preview-title {
  margin: 0;
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightSemibold);
}
.te-preview-tabs .te-preview-tab {
  padding: 4px 10px;
  font-size: var(--fontSizeXS);
}
.te-preview-card {
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-sm);
  background: var(--bgSecondary);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--textPrimary) 5%, transparent);
}
.te-preview-caption {
  font-size: var(--fontSizeXS);
  margin: 0;
  text-align: center;
}

/* 면별 분포 뱃지 — 슬롯 섹션 헤더 위 */
.te-side-dist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: var(--space-2) var(--space-3);
  background: var(--bgSecondary);
  border-radius: var(--radius-sm);
}
.te-side-dist-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  background: var(--bgPrimary);
  border: 1px solid var(--cardBorder);
}
.te-side-dist-chip[data-kind="front"] { border-color: color-mix(in srgb, var(--colorAccent) 30%, transparent); }
.te-side-dist-chip[data-kind="back"]  { border-color: color-mix(in srgb, var(--colorAccent) 20%, transparent); }
.te-side-dist-chip[data-kind="both"]  { border-color: color-mix(in srgb, var(--colorAccent) 40%, transparent); }
.te-side-dist-chip[data-kind="none"]  { border-color: color-mix(in srgb, var(--textTertiary) 40%, transparent); opacity: 0.75; }
.te-side-dist-label { color: var(--textSecondary); font-weight: var(--fontWeightMedium); }
.te-side-dist-num { color: var(--colorAccent); font-weight: var(--fontWeightSemibold); font-variant-numeric: tabular-nums; }

/* 드래그 핸들 */
.te-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--textTertiary);
  font-size: 14px;
  line-height: 1;
  cursor: grab;
  user-select: none;
  letter-spacing: -3px;
}
.te-drag-handle:active { cursor: grabbing; }
.te-slot-row.is-dragging { opacity: 0.55; }
.te-slot-row.drop-above { box-shadow: 0 -2px 0 0 var(--colorAccent) inset; border-top: 2px solid var(--colorAccent); }
.te-slot-row.drop-below { box-shadow: 0 2px 0 0 var(--colorAccent) inset; border-bottom: 2px solid var(--colorAccent); }

/* 슬롯 사용률 배지 */
.te-slot-usage {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--colorAccent) 10%, transparent);
  color: var(--colorAccent);
  font-size: 10px;
  font-weight: var(--fontWeightMedium);
  font-variant-numeric: tabular-nums;
}

/* TTS 언어 select */
.te-slot-tts-lang {
  max-width: 100px;
  padding: 4px 8px;
  font-size: var(--fontSizeXS);
}
.te-slot-tts-lang:disabled { opacity: 0.4; }

/* 변경 요약 경고 문구 */
.te-change-warn {
  color: var(--colorError);
  font-size: 10px;
  margin-left: 4px;
}

/* 보기 정렬 힌트 */
.te-sort-hint {
  font-size: var(--fontSizeXS);
  margin: 0;
}

/* 모바일 */
@media (max-width: 960px) {
  .te-layout {
    grid-template-columns: 1fr;
  }
  .te-preview-wrap {
    position: static;
    order: -1;   /* 프리뷰 상단 */
  }
}
.te-ord-btn {
  appearance: none;
  width: 24px;
  height: 22px;
  border: 1px solid var(--cardBorder);
  background: var(--bgPrimary);
  border-radius: 4px;
  color: var(--textSecondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.te-ord-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--colorAccent) 8%, transparent);
  color: var(--colorAccent);
}
.te-ord-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.te-slot-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.te-slot-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.te-slot-icon {
  flex: 0 0 auto;
  max-width: 110px;
  padding: 4px 6px;
  font-size: var(--fontSizeXS);
}
.te-slot-hint {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  background: var(--bgSecondary);
  border: 1px solid var(--cardBorder);
  border-radius: 4px;
  width: 100%;
}
.te-slot-advanced {
  font-size: var(--fontSizeXS);
}
.te-slot-advanced > summary {
  cursor: pointer;
  color: var(--textTertiary);
  padding: 2px 6px;
  user-select: none;
  list-style: none;
}
.te-slot-advanced > summary::-webkit-details-marker { display: none; }
.te-slot-advanced[open] > summary { color: var(--textSecondary); }
.te-slot-advanced[open] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.te-warnings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.te-warning {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: var(--fontSizeXS);
  border-radius: var(--radius-sm);
}
.te-warning.is-warn {
  background: color-mix(in srgb, var(--colorWarning) 15%, transparent);
  color: var(--colorWarning);
}
.te-warning.is-info {
  background: color-mix(in srgb, var(--colorAccent) 10%, transparent);
  color: var(--colorAccent);
}
.te-warning.is-hint {
  background: var(--bgSecondary);
  color: var(--textSecondary);
}
.te-warning-icon { flex: 0 0 auto; font-weight: var(--fontWeightSemibold); }
.te-slot-name {
  flex: 1 1 auto;
  min-width: 0;
}
.te-slot-badge {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fontWeightMedium);
  background: color-mix(in srgb, var(--colorError) 14%, transparent);
  color: var(--colorError);
}
.te-slot-badge.is-new {
  background: color-mix(in srgb, var(--colorAccent) 14%, transparent);
  color: var(--colorAccent);
}
.te-slot-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.te-side {
  /* ds-segmented 재사용. 축소형 padding */
  padding: 2px;
}
.te-side .te-side-btn {
  padding: 4px 10px;
  font-size: var(--fontSizeXS);
}
.te-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.te-inline-field input[type="number"] {
  width: 60px;
  padding: 4px 6px;
  text-align: center;
}
.te-inline-toggle {
  padding: 4px 8px;
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.te-inline-toggle input {
  accent-color: var(--colorAccent);
}
.te-slot-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-end;
}
.te-slot-delete {
  padding: 6px 8px;
  color: var(--textSecondary);
}
.te-slot-delete:hover:not(:disabled) {
  color: var(--colorError);
  border-color: color-mix(in srgb, var(--colorError) 30%, transparent);
}
.te-slot-restore {
  padding: 6px 10px;
  color: var(--colorAccent);
}

.te-changes-section {
  border: 1px solid color-mix(in srgb, var(--colorAccent) 25%, transparent);
  background: color-mix(in srgb, var(--colorAccent) 6%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.te-changes-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightSemibold);
  color: var(--colorAccent);
}
.te-changes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fontSizeXS);
}
.te-change-item::before {
  margin-right: 6px;
  font-weight: var(--fontWeightSemibold);
}
.te-change-item.is-add::before    { content: '+'; color: var(--colorAccent); }
.te-change-item.is-delete::before { content: '−'; color: var(--colorError); }
.te-change-item.is-rename::before { content: '~'; color: var(--textSecondary); }
.te-changes-warning {
  margin: var(--space-2) 0 0;
  font-size: var(--fontSizeXS);
}

.te-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
}
.te-phase-note {
  font-size: var(--fontSizeXS);
  text-align: center;
  margin: 0;
  padding: var(--space-2) 0;
}

/* 모바일: 슬롯 행 3-column → 1-column, actions 하단 */
@media (max-width: 640px) {
  .te-slot-row {
    grid-template-columns: auto 1fr;
  }
  .te-slot-actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
  }
}

/* =========================================================================
 * 템플릿 편집: 구조/레이아웃 모드 탭 + 레이아웃 시각 편집기 (Pass 2)
 * ========================================================================= */
.te-shell {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.te-shell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.te-shell-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.te-dirty-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--colorAccent) 15%, transparent);
  color: var(--colorAccent);
  font-size: 10px;
  font-weight: var(--fontWeightMedium);
}
.te-mode-tabs {
  align-self: flex-start;
}
.te-mode-tab {
  padding: 6px 14px;
}

/* ===== 퀴즈 규칙 편집기 (templateQuizRules.js) ===== */
.te-quiz-rules {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.te-quiz-rules-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.te-quiz-rules-title {
  margin: 0 0 4px;
  font-size: var(--fontSizeMD);
  font-weight: var(--fontWeightSemibold);
}
.te-quiz-rules-sub {
  margin: 0;
  font-size: var(--fontSizeSM);
  max-width: 520px;
}
.te-quiz-rules-empty {
  padding: var(--space-4) 0;
  text-align: center;
}
.te-quiz-rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.te-quiz-rule {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--bgSecondary);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  border-radius: var(--radius-md);
}
.te-quiz-rule-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.te-quiz-rule-name {
  flex: 1 1 auto;
}
.te-quiz-rule-del {
  flex: 0 0 auto;
}
.te-quiz-rule-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-2);
}
.te-quiz-rule-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.te-quiz-rule-field > span {
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
}
/* 빈칸 원문 슬롯 — 'blank' 변형이 아닐 때 시각적 약화. data-enabled로 토글. */
.te-quiz-rule-field[data-enabled="false"] {
  opacity: 0.5;
}
.te-quiz-rule-field[data-enabled="false"] > span::after {
  content: ' (빈칸 채우기 선택 시)';
  color: var(--textTertiary);
}
.te-quiz-rule-modes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding-top: var(--space-1);
}
.te-quiz-rule-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: var(--fontSizeSM);
  user-select: none;
}
/* :has() 금지(CLAUDE.md Firefox 정책) — 활성 상태는 JS가 .is-active 클래스를 토글한다 */
.te-quiz-rule-mode-chip.is-active {
  background: var(--colorAccent);
  color: var(--colorAccentOnContrast, #fff);
  border-color: var(--colorAccent);
}
.te-quiz-rule-mode-chip input { accent-color: var(--colorAccent); }

/* ===== 레이아웃 편집기 (templateLayout.js) =====
 *
 * 레이아웃 정책 — 구조 탭과 레이아웃 탭의 콘텐츠 영역(prev + 사이드 영역)을 동일 폭으로.
 * 프리뷰는 양쪽 모두 콘텐츠 폭의 50%에 배치.
 * 구조 탭의 te-layout grid는 minmax(0, 1fr) + minmax(280px, 360px)였으나
 * 이제 일관성을 위해 50%/50%로 맞춘다 — te-layout 업데이트는 아래 te-layout 블록 참조.
 */
.tl-root {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tl-grid {
  /* 2-column: 좌 슬롯+속성 50%, 우 미리보기 50% — 구조 탭과 동일한 비율. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.tl-editor-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* 미리보기 컬럼도 좌측과 동일한 뷰포트 기반 높이 사용 — 스크롤 없이 고정 */
.tl-col-preview {
  position: sticky;
  top: var(--space-3);
  max-height: calc(100dvh - 264px);
  min-height: 420px;
}
.tl-col {
  min-width: 0;
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgPrimary);
  padding: var(--space-3);
}
/* 좌측 편집 컬럼 — 자체 스크롤. 상위 컨테이너에 높이 제약이 없어도 viewport 기반으로 동작.
 *   `.te-shell-body` 자체는 document flow라 탭 body 안에서는 max-height가 기준이 모호 →
 *   위치 기반 상한 계산: 앱바(56) + 덱 상세 헤더(~80) + 탭 nav(~44) + 모드 탭(~44) + 여유(40) ≈ 264px.
 *   `calc(100dvh - 264px)` 로 뷰포트에서 거꾸로 계산해 남는 공간만큼 딱 채우고 그 안에서 스크롤. */
.tl-col-editor {
  max-height: calc(100dvh - 264px);
  min-height: 420px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: var(--space-2);
}
.tl-mobile-tabs { display: none; }

/* 좌 — 슬롯 선택기 */
.tl-slot-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.tl-selector-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tl-selector-title {
  margin: 0;
  font-size: var(--fontSizeXS);
  font-weight: var(--fontWeightSemibold);
  color: var(--textSecondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tl-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tl-slot-chip {
  appearance: none;
  cursor: pointer;
  padding: 6px 10px;
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-pill);
  background: var(--bgPrimary);
  color: var(--textPrimary);
  font-size: var(--fontSizeXS);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all var(--dur-fast);
}
.tl-slot-chip:hover { border-color: color-mix(in srgb, var(--colorAccent) 40%, transparent); }
.tl-slot-chip[aria-pressed="true"] {
  background: var(--colorAccent);
  color: #fff;
  border-color: var(--colorAccent);
}
.tl-slot-chip.is-palette {
  border-style: dashed;
  opacity: 0.75;
}
.tl-chip-both {
  font-size: 10px;
  color: var(--colorAccent);
}
.tl-slot-chip[aria-pressed="true"] .tl-chip-both { color: #fff; }
.tl-palette-hint, .tl-empty-hint {
  font-size: 11px;
  margin: 0;
}

/* 중 — 프리뷰 캔버스 */
.tl-preview-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tl-preview-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.tl-side-tabs .tl-side-btn { padding: 4px 12px; }
.tl-preview-tools {
  display: flex;
  gap: 4px;
}
.tl-preview-tools .btn-chip { padding: 4px 10px; font-size: var(--fontSizeXS); }
.tl-preview-tools .btn-chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--colorAccent) 12%, transparent);
  color: var(--colorAccent);
  border-color: color-mix(in srgb, var(--colorAccent) 40%, transparent);
}
.tl-canvas-wrap {
  width: 100%;
  aspect-ratio: 3 / 2;
  background: var(--bgSecondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--cardBorder);
  overflow: hidden;
  position: relative;
}
.tl-canvas {
  position: absolute;
  inset: 0;
  touch-action: none;  /* pointer drag — 브라우저 팬 방지 */
}
.tl-canvas-renderer {
  position: absolute;
  inset: 0;
}
.tl-canvas-affordances {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* 자식 rect만 auto */
}
.tl-aff-rect.is-dragging {
  opacity: 0.7;
  border-style: dashed !important;
}
.tl-preview-caption {
  font-size: var(--fontSizeXS);
  margin: 0;
  text-align: center;
}
.tl-preview-caption kbd {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--cardBorder);
  border-radius: 3px;
  background: var(--bgSecondary);
  font-size: 10px;
}

/* Layout preview grid — legacy 포팅 (CardRenderer `_buildGridHtml` 출력물 스타일) */
.preview-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.preview-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(to right, rgba(128,128,128,0.22) 0, rgba(128,128,128,0.22) 1px, transparent 1px, transparent 10%),
    repeating-linear-gradient(to bottom, rgba(128,128,128,0.22) 0, rgba(128,128,128,0.22) 1px, transparent 1px, transparent 10%);
}
.preview-grid::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, transparent 49.9%, rgba(128,128,128,0.35) 50%, rgba(128,128,128,0.35) 50.1%, transparent 50.2%),
    linear-gradient(to bottom, transparent 49.9%, rgba(128,128,128,0.35) 50%, rgba(128,128,128,0.35) 50.1%, transparent 50.2%);
}
.preview-grid-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.preview-grid-label {
  position: absolute;
  font-size: 0.5rem;
  color: rgba(128,128,128,0.7);
  pointer-events: none;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.preview-grid-label.top { top: 1px; transform: translateX(-50%); }
.preview-grid-label.left { left: 1px; transform: translateY(-50%); }
.preview-grid-detailed::before {
  background-image:
    repeating-linear-gradient(to right, rgba(128,128,128,0.06) 0, rgba(128,128,128,0.06) 1px, transparent 1px, transparent 1%),
    repeating-linear-gradient(to bottom, rgba(128,128,128,0.06) 0, rgba(128,128,128,0.06) 1px, transparent 1px, transparent 1%);
}
.preview-grid-detailed::after {
  background-image:
    repeating-linear-gradient(to right, rgba(128,128,128,0.27) 0, rgba(128,128,128,0.27) 1px, transparent 1px, transparent 10%),
    repeating-linear-gradient(to bottom, rgba(128,128,128,0.27) 0, rgba(128,128,128,0.27) 1px, transparent 1px, transparent 10%);
}
.preview-grid-5pct {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
}
.preview-grid-5pct-line-v, .preview-grid-5pct-line-h {
  position: absolute;
}
.preview-grid-5pct-line-v {
  width: 1px; top: 0; bottom: 0;
  background: repeating-linear-gradient(to bottom, rgba(128,128,128,0.2) 0, rgba(128,128,128,0.2) 3px, transparent 3px, transparent 7px);
}
.preview-grid-5pct-line-h {
  height: 1px; left: 0; right: 0;
  background: repeating-linear-gradient(to right, rgba(128,128,128,0.2) 0, rgba(128,128,128,0.2) 3px, transparent 3px, transparent 7px);
}

/* 우 — 속성 패널 */
.tl-prop-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  /* 독립 스크롤 컨테이너가 아니라 컬럼 자체가 독립 스크롤하도록 위임 — 아래 .tl-col-props 참조 */
}
.tl-prop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--cardBorder);
}
.tl-prop-slot-name {
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeightSemibold);
}
.tl-prop-side-badge {
  padding: 2px 8px;
  background: color-mix(in srgb, var(--colorAccent) 12%, transparent);
  color: var(--colorAccent);
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fontWeightMedium);
}
.tl-prop-group {
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tl-prop-group > summary {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  font-weight: var(--fontWeightMedium);
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  background: var(--bgSecondary);
  list-style: none;
}
.tl-prop-group > summary::-webkit-details-marker { display: none; }
.tl-prop-group[open] > summary { color: var(--textPrimary); }
.tl-prop-body {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tl-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tl-field-inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;           /* 폭 부족하면 다음 줄로 떨어지게 */
  min-width: 0;
}
.tl-field-inline label:not(.tl-toggle-label):first-child {
  flex: 0 0 72px;            /* 라벨 고정 폭 소폭 축소 */
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.tl-field-inline > input,
.tl-field-inline > select {
  min-width: 0;              /* 부모 flex 안에서 축소 허용 */
  flex: 1 1 auto;
}
.tl-field-inline .tl-range {
  flex: 1 1 80px;
  min-width: 60px;
}
.tl-field-inline .tl-range-val {
  flex: 0 0 auto;
}
.tl-field > label {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.tl-range { flex: 1; accent-color: var(--colorAccent); }
.tl-range-val {
  font-size: 11px;
  color: var(--textSecondary);
  min-width: 40px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.tl-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fontSizeXS);
  cursor: pointer;
}
.tl-preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  max-width: 120px;
}
.tl-jog {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.tl-jog-pos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  font-variant-numeric: tabular-nums;
  min-width: 50px;
}
.tl-jog-pos b { color: var(--textPrimary); font-weight: var(--fontWeightSemibold); }
.tl-jog-grid {
  display: grid;
  grid-template-columns: repeat(3, 28px);
  grid-template-rows: repeat(2, 28px);
  gap: 2px;
}
.tl-jog-btn {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--cardBorder);
  border-radius: 4px;
  background: var(--bgPrimary);
  color: var(--textPrimary);
  font-size: var(--fontSizeXS);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast);
}
.tl-jog-btn:hover { background: color-mix(in srgb, var(--colorAccent) 10%, transparent); }
.tl-jog-btn:active { background: color-mix(in srgb, var(--colorAccent) 20%, transparent); }
/* ▲ center-top, ◀ ▶ middle row, ▼ center-bottom */
.tl-jog-btn[data-dx="0"][data-dy="-1"] { grid-column: 2; grid-row: 1; }
.tl-jog-btn[data-dx="-1"][data-dy="0"] { grid-column: 1; grid-row: 2; }
.tl-jog-btn[data-dx="1"][data-dy="0"]  { grid-column: 3; grid-row: 2; }
.tl-jog-btn[data-dx="0"][data-dy="1"]  { grid-column: 2; grid-row: 2; }
.tl-preset-btn, .tl-anchor-btn, .tl-align-btn, .tl-style-btn {
  appearance: none;
  cursor: pointer;
  padding: 6px 8px;
  border: 1px solid var(--cardBorder);
  border-radius: 4px;
  background: var(--bgPrimary);
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--dur-fast);
}
.tl-preset-btn:hover, .tl-anchor-btn:hover, .tl-align-btn:hover, .tl-style-btn:hover {
  border-color: color-mix(in srgb, var(--colorAccent) 40%, transparent);
}
.tl-preset-btn[aria-pressed="true"],
.tl-anchor-btn[aria-pressed="true"],
.tl-align-btn[aria-pressed="true"],
.tl-style-btn[aria-pressed="true"] {
  background: var(--colorAccent);
  color: #fff;
  border-color: var(--colorAccent);
}
.tl-anchor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  max-width: 120px;
}
.tl-align-btns, .tl-style-btns {
  display: flex;
  gap: 4px;
}
.tl-color {
  width: 44px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--cardBorder);
  border-radius: 4px;
  cursor: pointer;
}
.tl-color-reset {
  padding: 4px 10px;
  font-size: var(--fontSizeXS);
}
.tl-prop-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-2);
  border-top: 1px solid var(--cardBorder);
}

/* 모바일: 1-column + 탭 전환 (편집 / 미리보기) */
@media (max-width: 1024px) {
  .tl-mobile-tabs { display: inline-flex; align-self: center; }
  .tl-grid { grid-template-columns: 1fr; }
  .tl-root[data-mobile-tab="editor"]  .tl-col-preview,
  .tl-root[data-mobile-tab="preview"] .tl-col-editor {
    display: none;
  }
  .tl-col-editor { max-height: none; }
  .tl-prop-panel { max-height: none; }
}

/* ===== 설정 탭 — 데이터·관리·앱 정보 (Phase 2.13) ===== */
.settings-devices,
.settings-storage,
.settings-export,
.settings-reset-decks {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.settings-device-list,
.settings-export-list,
.settings-reset-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.settings-device-row,
.settings-export-row,
.settings-reset-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-2);
  align-items: center;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgPrimary);
}
/* 기기 행 — 편집 모드에선 [저장][취소][×] 3버튼 + main 으로 4슬롯이 필요. */
.settings-device-row {
  grid-template-columns: 1fr auto auto auto;
}
.settings-device-row[data-current="1"] {
  border-color: color-mix(in srgb, var(--colorAccent) 40%, transparent);
  background: color-mix(in srgb, var(--colorAccent) 4%, var(--bgPrimary));
}
.settings-device-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.settings-device-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.settings-device-name {
  /* 편집 모드 input — flex를 0 1 auto로 줄여 [저장][취소][×] 3버튼이 같은 줄에 들어가게 */
  flex: 0 1 200px;
  min-width: 0;
  max-width: 200px;
}
.settings-device-name-display {
  flex: 1 1 auto;
  min-width: 120px;
  font-size: var(--fontSizeBase);
  font-weight: var(--fontWeightMedium);
  color: var(--textPrimary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* HTML5 hidden 속성이 inline-flex 등 display 규칙에 덮이지 않도록 강제.
   .btn-chip / span 모두 동일 처리. */
.settings-device-row [hidden] { display: none !important; }
.settings-device-badge {
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 10px;
  font-weight: var(--fontWeightMedium);
}
.settings-device-badge.is-current {
  background: color-mix(in srgb, var(--colorAccent) 14%, transparent);
  color: var(--colorAccent);
}
.settings-device-badge.is-online {
  background: color-mix(in srgb, var(--colorSuccess) 14%, transparent);
  color: var(--colorSuccess);
}
.settings-device-meta {
  font-size: var(--fontSizeXS);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.settings-device-meta-sep { opacity: 0.5; }

/* 세션 펼침 토글 + 세션 리스트 */
.settings-device-sessions-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--colorAccent);
  font-size: var(--fontSizeXS);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.settings-device-sessions-toggle[aria-expanded="true"] .settings-device-chev {
  transform: rotate(90deg);
}
.settings-device-chev {
  transition: transform var(--dur-fast) var(--ease-standard);
  vertical-align: middle;
}
.settings-device-sessions {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.settings-session-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm, 8px);
  background: var(--bgSecondary);
}
.settings-session-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.settings-session-meta {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.settings-device-quota {
  font-size: var(--fontSizeXS);
  margin: var(--space-2) 0 0;
  text-align: right;
}
.settings-export-name,
.settings-reset-name {
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.settings-export-count,
.settings-reset-count {
  font-size: var(--fontSizeXS);
  font-variant-numeric: tabular-nums;
}
.settings-storage-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgPrimary);
}
.settings-storage-cleanup {
  align-self: flex-start;
  margin-top: var(--space-1);
  font-size: var(--fontSizeXS);
}
.settings-storage-detail-toggle {
  background: transparent;
  border: 0;
  padding: 4px 0;
  cursor: pointer;
  color: var(--colorAccent);
  font-size: var(--fontSizeXS);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
}
.settings-storage-detail-toggle[aria-expanded="true"] .settings-storage-chev {
  transform: rotate(90deg);
}
.settings-storage-chev {
  transition: transform var(--dur-fast) var(--ease-standard);
}
.settings-storage-deck-list {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.settings-storage-deck-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-sm, 8px);
  background: var(--bgSecondary);
}
.settings-storage-deck-name {
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  color: var(--textPrimary);
}
.settings-storage-deck-meta {
  font-size: var(--fontSizeXS);
}

/* 캐시 플러시 시트 */
.cache-flush-sheet { display: flex; flex-direction: column; gap: var(--space-2); }
.cache-flush-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.cache-flush-list label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgSecondary);
  cursor: pointer;
  font-size: var(--fontSizeSM);
}
.cache-flush-list input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.cache-flush-actions { display: flex; justify-content: flex-end; margin-top: var(--space-1); }

/* 공용 confirm 모달 — confirmModal.js */
.confirm-modal { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) 0; }
.confirm-modal-msg { font-size: var(--fontSizeBase); line-height: 1.5; color: var(--textPrimary); margin: 0; white-space: pre-wrap; }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* 시간대 picker 시트 — iOS native picker 스타일 */
.tz-picker-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.tz-picker-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: transparent;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  font-size: var(--fontSizeBase);
  color: var(--textPrimary);
  transition: background var(--dur-fast) var(--ease-standard);
}
.tz-picker-item:hover { background: var(--bgSecondary); }
.tz-picker-item[aria-selected="true"] {
  color: var(--colorAccent);
  font-weight: var(--fontWeightMedium);
  background: color-mix(in srgb, var(--colorAccent) 8%, transparent);
}
.tz-picker-item[aria-selected="true"] .icon { color: var(--colorAccent); }
.sel-timezone-btn {
  cursor: pointer;
  background: var(--bgPrimary);
  color: var(--textPrimary);
}
.sel-timezone-btn .icon { color: var(--textTertiary); }
.sel-timezone-btn:hover { background: var(--bgSecondary); }

/* 공용 v2 Dropdown — Dropdown.create / Dropdown.fromSelect */
.fc-dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  cursor: pointer;
  text-align: left;
  background: var(--bgPrimary);
  color: var(--textPrimary);
  font-size: var(--fontSizeBase);
  min-height: 36px;
}
.fc-dropdown-btn .fc-dropdown-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fc-dropdown-btn .fc-dropdown-chev {
  flex-shrink: 0;
  color: var(--textTertiary);
  transition: transform var(--dur-fast) var(--ease-standard);
}
.fc-dropdown-btn:hover { background: var(--bgSecondary); }
.fc-dropdown-btn:focus-visible {
  outline: 2px solid var(--focusRing);
  outline-offset: 2px;
}
.fc-dropdown-btn:disabled,
.fc-dropdown-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.fc-dropdown-pop {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px;
  background: var(--cardBg, var(--bgPrimary));
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow-y: auto;
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.fc-dropdown-pop[data-open="false"] {
  opacity: 0;
  transform: translateY(-6px) scaleY(0.98);
  pointer-events: none;
}
.fc-dropdown-pop[data-open="true"] { opacity: 1; transform: translateY(0) scaleY(1); }
.fc-dropdown-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 6px 10px;
  min-height: 28px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font-size: var(--fontSizeXS);
  color: var(--textPrimary);
  transition: background var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.fc-dropdown-item:hover { background: var(--bgSecondary); }
.fc-dropdown-item[aria-selected="true"] {
  color: var(--colorAccent);
  font-weight: var(--fontWeightMedium);
  background: color-mix(in srgb, var(--colorAccent) 8%, transparent);
}
.fc-dropdown-check { color: var(--colorAccent); flex-shrink: 0; }

/* 관리 탭 덱 일괄 선택 — list-body[data-bulk="true"]일 때만 체크박스 + 행 클릭 가로채기 시각 표시.
   4개 뷰(list / compact / large / thumb) 모두 지원. */
.manage-list-body[data-bulk="true"] .deck-list-row,
.manage-list-body[data-bulk="true"] .deck-compact-row {
  position: relative;
  cursor: pointer;
  padding-left: calc(var(--space-4) + 22px);
}
.manage-list-body[data-bulk="true"] .deck-large,
.manage-list-body[data-bulk="true"] .deck-thumb {
  position: relative;
  cursor: pointer;
}
.manage-list-body[data-bulk="true"] .deck-list-row::before,
.manage-list-body[data-bulk="true"] .deck-compact-row::before,
.manage-list-body[data-bulk="true"] .deck-large::before,
.manage-list-body[data-bulk="true"] .deck-thumb::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--cardBorder);
  background: var(--bgPrimary);
  z-index: 2;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.6);
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
/* list/compact는 좌측 verticla 중앙 */
.manage-list-body[data-bulk="true"] .deck-list-row::before,
.manage-list-body[data-bulk="true"] .deck-compact-row::before {
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
}
/* large/thumb는 카드 좌상단에 배치 */
.manage-list-body[data-bulk="true"] .deck-large::before,
.manage-list-body[data-bulk="true"] .deck-thumb::before {
  left: 8px;
  top: 8px;
}
.manage-list-body[data-bulk="true"] .deck-list-row[data-bulk-checked="true"]::before,
.manage-list-body[data-bulk="true"] .deck-compact-row[data-bulk-checked="true"]::before,
.manage-list-body[data-bulk="true"] .deck-large[data-bulk-checked="true"]::before,
.manage-list-body[data-bulk="true"] .deck-thumb[data-bulk-checked="true"]::before {
  background: var(--colorAccent);
  border-color: var(--colorAccent);
}
.manage-list-body[data-bulk="true"] .deck-list-row[data-bulk-checked="true"]::after,
.manage-list-body[data-bulk="true"] .deck-compact-row[data-bulk-checked="true"]::after,
.manage-list-body[data-bulk="true"] .deck-large[data-bulk-checked="true"]::after,
.manage-list-body[data-bulk="true"] .deck-thumb[data-bulk-checked="true"]::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  z-index: 3;
}
.manage-list-body[data-bulk="true"] .deck-list-row[data-bulk-checked="true"]::after,
.manage-list-body[data-bulk="true"] .deck-compact-row[data-bulk-checked="true"]::after {
  left: calc(var(--space-3) + 4px);
  top: 50%;
  transform: translateY(-60%) rotate(-45deg);
}
.manage-list-body[data-bulk="true"] .deck-large[data-bulk-checked="true"]::after,
.manage-list-body[data-bulk="true"] .deck-thumb[data-bulk-checked="true"]::after {
  left: 12px;
  top: 14px;
  transform: rotate(-45deg);
}
/* 선택된 카드는 강조 outline */
.manage-list-body[data-bulk="true"] .deck-large[data-bulk-checked="true"],
.manage-list-body[data-bulk="true"] .deck-thumb[data-bulk-checked="true"] {
  outline: 2px solid var(--colorAccent);
  outline-offset: -2px;
}
.manage-deck-bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--colorAccent) 8%, var(--bgPrimary));
  border: 1px solid color-mix(in srgb, var(--colorAccent) 30%, var(--cardBorder));
  border-radius: var(--radius-md);
  margin: var(--space-2) 0;
  flex-wrap: wrap;
}
.manage-deck-bulk-bar[hidden] { display: none; }
.manage-deck-bulk-count {
  font-weight: var(--fontWeightMedium);
  color: var(--colorAccent);
  flex: 1;
  min-width: 0;
}
.manage-deck-bulk-clear { margin-left: auto; }
.btn-chip-danger { color: var(--colorDanger, #c14); border-color: color-mix(in srgb, var(--colorDanger, #c14) 30%, var(--cardBorder)); }
.settings-export-actions { margin-top: var(--space-2); }
.settings-export-fold { margin-top: var(--space-3); }

/* 오프라인 학습 다운로드 */
.settings-offline-decks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.settings-offline-deck-row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--cardBorder); border-radius: var(--radius-md);
  background: var(--bgSecondary);
}
.settings-offline-deck-name { font-size: var(--fontSizeSM); color: var(--textPrimary); font-weight: var(--fontWeightMedium); }

/* 덱 리스트/시트의 오프라인 배지 */
.deck-badge-chip-offline { --chipAccent: var(--colorSuccess, #27ae60); }
.deck-check-offline {
  display: inline-block;
  vertical-align: middle;
  margin-left: 4px;
  color: var(--colorSuccess, #27ae60);
  opacity: 0.85;
}
.settings-offline-deck-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.settings-offline-deck-meta { font-size: var(--fontSizeXS); }
.settings-offline-picker { display: flex; flex-direction: column; gap: var(--space-3); }
.settings-offline-pick-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); max-height: 40vh; overflow-y: auto; }
.settings-offline-pick-row label {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--cardBorder); border-radius: var(--radius-md);
  background: var(--bgPrimary); cursor: pointer;
  font-size: var(--fontSizeSM);
}
.settings-offline-progress {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-2);
  border: 1px solid var(--cardBorder); border-radius: var(--radius-md);
  background: var(--bgTertiary);
}
.settings-offline-progress-bar { width: 100%; }
.settings-offline-pick-actions { display: flex; justify-content: flex-end; }

/* =========================================================================
 * 충돌 해결 시트 (conflictResolver.js)
 * ========================================================================= */
.cr-root { display: flex; flex-direction: column; gap: var(--space-3); }
.cr-warn { font-size: var(--fontSizeSM); color: var(--colorWarning, #e67e22); margin: 0; }
.cr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.cr-pane {
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: var(--bgSecondary);
}
.cr-pane-title {
  font-weight: var(--fontWeightSemibold);
  font-size: var(--fontSizeSM);
  margin-bottom: var(--space-1);
}
.cr-local .cr-pane-title { color: var(--colorAccent); }
.cr-server .cr-pane-title { color: var(--colorSuccess, #27ae60); }
.cr-summary { font-size: var(--fontSizeXS); color: var(--textSecondary); display: flex; flex-direction: column; gap: 2px; }
.cr-summary b { color: var(--textPrimary); font-weight: var(--fontWeightMedium); }
.cr-version { color: var(--textTertiary); font-size: 10px; }
.cr-empty { font-size: var(--fontSizeXS); color: var(--textTertiary); }
.cr-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-2); }
.cr-bulk { display: flex; gap: var(--space-2); }
.cr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.cr-item {
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: var(--bgSecondary);
}
.cr-item-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-2); margin-bottom: 4px;
}
.cr-item-label { font-weight: var(--fontWeightMedium); font-size: var(--fontSizeSM); }
.cr-choice {
  font-size: var(--fontSizeXS);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--cardBorder);
  background: var(--bgPrimary);
  color: var(--textPrimary);
}
.cr-diff { font-size: var(--fontSizeXS); color: var(--textTertiary); }
/* "곧 활성" 같은 pending 표시 — section-title 옆 small badge */
.settings-pending-tag {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 1px 8px;
  font-size: 10px;
  font-weight: var(--fontWeightMedium);
  letter-spacing: 0.02em;
  color: var(--textSecondary);
  background: var(--bgTertiary);
  border-radius: 999px;
  vertical-align: middle;
}
.settings-storage-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}
.settings-storage-label {
  font-size: var(--fontSizeSM);
  color: var(--textSecondary);
}
.settings-storage-value {
  font-size: var(--fontSizeLG);
  font-weight: var(--fontWeightSemibold);
  color: var(--colorAccent);
  font-variant-numeric: tabular-nums;
}
.settings-storage-breakdown {
  font-size: var(--fontSizeXS);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.settings-version-card {
  padding: var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgPrimary);
}
.settings-version-main {
  margin: 0;
  font-size: var(--fontSizeLG);
  font-weight: var(--fontWeightSemibold);
  font-variant-numeric: tabular-nums;
}
.settings-legal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.settings-legal-list a {
  padding: var(--space-2) 0;
  display: inline-block;
}

/* ── 설정 탭 접힘 섹션 (<details>) ── */
.settings-fold {
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-md, 8px);
  overflow: hidden;
  background: color-mix(in srgb, var(--textPrimary) 3%, transparent);
}
.settings-fold-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  color: var(--textPrimary);
  list-style: none;
  user-select: none;
}
.settings-fold-summary::-webkit-details-marker { display: none; }
.settings-fold-summary::after {
  content: '▶';
  font-size: 0.7em;
  color: var(--textSecondary);
  transition: transform 0.2s;
  margin-left: var(--space-2);
}
.settings-fold[open] > .settings-fold-summary::after { transform: rotate(90deg); }
.settings-fold-meta {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  font-weight: var(--fontWeightRegular, 400);
  margin-left: auto;
  margin-right: var(--space-2);
}
.settings-fold-body {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
}
.settings-fold-body .section-subtitle {
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightSemibold);
  color: var(--textPrimary);
  margin: var(--space-4) 0 var(--space-2);
}
.settings-backup-all {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

/* 내보내기 옵션 시트 */
.export-opts-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* 공용 toggle-row — export 옵션 시트·import 복원 옵션 등에서 재사용 */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fontSizeSM);
  line-height: 1.5;
  color: var(--textPrimary);
  cursor: pointer;
}
.toggle-row input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
}
.toggle-row strong {
  font-weight: var(--fontWeightSemibold);
}

/* import 시트 학습 정보 복원 블록 */
.manage-import-restore {
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3) var(--space-4);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: color-mix(in srgb, var(--textPrimary) 3%, transparent);
}
.manage-import-restore legend {
  padding: 0 var(--space-2);
  font-weight: var(--fontWeightSemibold);
  color: var(--textPrimary);
}

/* 전체 백업 import — 덱 리스트 */
.manage-import-backup-list {
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3) var(--space-4);
  margin: 0;
  background: color-mix(in srgb, var(--textPrimary) 3%, transparent);
}
.manage-import-backup-list legend {
  padding: 0 var(--space-2);
  font-weight: var(--fontWeightSemibold);
  color: var(--textPrimary);
}
.manage-import-backup-ul {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  max-height: 240px;
  overflow-y: auto;
}
.manage-import-backup-toolbar {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.manage-import-backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 6%, transparent);
  font-size: var(--fontSizeSM);
}
.manage-import-backup-row:last-child { border-bottom: 0; }
.manage-import-backup-row.is-excluded { opacity: 0.4; }
.manage-import-backup-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.manage-import-backup-name {
  color: var(--textPrimary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── APKG 다덱 import UI ── */
.manage-import-apkg {
  border: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-3) var(--space-4);
  margin: 0;
  background: color-mix(in srgb, var(--textPrimary) 3%, transparent);
}
.manage-import-apkg legend {
  padding: 0 var(--space-2);
  font-weight: var(--fontWeightSemibold);
  color: var(--textPrimary);
}
.manage-import-apkg-modes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-2) 0;
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
}
.manage-import-apkg-mode {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
  cursor: pointer;
}
.manage-import-apkg-mode input { margin-top: 3px; flex: 0 0 auto; }
.manage-import-apkg-toolbar {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.manage-import-apkg-list {
  list-style: none;
  padding: 0;
  margin: var(--space-2) 0 0;
  max-height: 240px;
  overflow-y: auto;
}
.manage-import-apkg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 6%, transparent);
  font-size: var(--fontSizeSM);
}
.manage-import-apkg-row:last-child { border-bottom: 0; }
.manage-import-apkg-row.is-excluded { opacity: 0.4; }
.manage-import-apkg-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
}
.manage-import-apkg-name {
  color: var(--textPrimary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* ── 일괄 편집 BottomSheet ── */
.bulk-edit-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bulk-edit-tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 10%, transparent);
}
.bulk-edit-tab {
  flex: 1 1 auto;
  padding: var(--space-2) var(--space-3);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--textSecondary);
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.bulk-edit-tab:hover { color: var(--textPrimary); }
.bulk-edit-tab[aria-selected="true"] {
  color: var(--colorAccent);
  border-bottom-color: var(--colorAccent);
}
.bulk-edit-slot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
}
.bulk-edit-slot select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
}
.bulk-edit-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.bulk-edit-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
}
.bulk-edit-row input {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
  font-size: var(--fontSizeMD);
}
.bulk-edit-check {
  display: flex;
  gap: var(--space-2);
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
}
.bulk-edit-set-text {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
  font-family: var(--fontFamilyMono, monospace);
  font-size: var(--fontSizeSM);
  resize: vertical;
}
.bulk-edit-count { margin: 0; }
.bulk-edit-media-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.bulk-edit-media-status { font-size: var(--fontSizeSM); }
.bulk-edit-preview {
  font-size: var(--fontSizeSM);
}
.bulk-edit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fontSizeXS);
}
.bulk-edit-table th,
.bulk-edit-table td {
  text-align: left;
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--textPrimary) 6%, transparent);
  vertical-align: top;
  word-break: break-word;
}
.bulk-edit-table th {
  color: var(--textSecondary);
  font-weight: var(--fontWeightMedium);
}
.bulk-edit-after { color: var(--colorAccent); }

/* ── 대량 추가 BottomSheet (bulk-edit 스타일 재사용 + 일부 고유) ── */
.bulk-add-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.bulk-add-clipboard {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-3);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
  font-family: var(--fontFamilyMono, monospace);
  font-size: var(--fontSizeSM);
  resize: vertical;
}
.bulk-add-file-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.bulk-add-file-status { font-size: var(--fontSizeSM); }
.bulk-add-count { margin: 0; }
.bulk-add-slot-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
}
.bulk-add-slot-row select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
}
.bulk-add-csv-preview {
  margin-top: var(--space-2);
  font-size: var(--fontSizeSM);
}
.bulk-add-tags {
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
  font-size: var(--fontSizeMD);
}

.export-opts-range {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--textPrimary) 8%, transparent);
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
}
.export-opts-range select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
  font-size: var(--fontSizeSM);
}

/* ── 위험 작업 BottomSheet (전체 통계 초기화 / 계정 삭제 3단계) ── */
.danger-sheet-body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.danger-sheet-warn {
  margin: 0;
  font-size: var(--fontSizeSM);
  line-height: 1.55;
  color: var(--textPrimary);
}
.danger-sheet-warn strong {
  color: var(--colorError, #d33);
  font-weight: var(--fontWeightSemibold);
}
.danger-sheet-final {
  font-size: var(--fontSizeMD);
  font-weight: var(--fontWeightMedium);
  text-align: center;
  padding: var(--space-4) 0;
}
.danger-sheet-list {
  margin: 0;
  padding-left: var(--space-5);
  list-style: disc;
  font-size: var(--fontSizeSM);
  line-height: 1.7;
  color: var(--textSecondary);
}
.danger-sheet-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--fontSizeSM);
  color: var(--textPrimary);
}
.danger-sheet-input {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fontSizeMD);
  border: 1px solid color-mix(in srgb, var(--textPrimary) 16%, transparent);
  border-radius: var(--radius-md, 8px);
  background: var(--bgPrimary, transparent);
  color: var(--textPrimary);
}
.danger-sheet-input:focus {
  outline: 2px solid var(--colorAccent);
  outline-offset: 1px;
  border-color: var(--colorAccent);
}
.danger-sheet-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* ── 법적 고지 BottomSheet 본문 ── */
.legal-sheet-body {
  padding: var(--space-3) var(--space-4) var(--space-6);
  font-size: var(--fontSizeSM);
  line-height: 1.7;
  color: var(--textPrimary);
}
.legal-sheet-meta {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  margin-bottom: var(--space-4);
}
.legal-sheet-content h3 {
  font-size: var(--fontSizeMD);
  font-weight: var(--fontWeightSemibold);
  margin: var(--space-4) 0 var(--space-2);
  color: var(--textPrimary);
}
.legal-sheet-content h3:first-child { margin-top: 0; }
.legal-sheet-content p { margin: 0 0 var(--space-3); }
.legal-sheet-content ul {
  margin: 0 0 var(--space-3);
  padding-left: var(--space-5);
  list-style: disc;
}
.legal-sheet-content li { margin-bottom: var(--space-1); }
.legal-sheet-content strong { font-weight: var(--fontWeightSemibold); }

/* ===== 덱 정보 탭 (manage → info) ===== */
.manage-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  max-width: 860px;
  margin: 0 auto;
}
.manage-info-card {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgPrimary);
}
.manage-info-sectitle {
  margin: 0 0 var(--space-2);
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightSemibold);
  color: var(--textSecondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.manage-info-list {
  margin: 0;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--space-1) var(--space-3);
  font-size: var(--fontSizeSM);
}
.manage-info-list dt {
  color: var(--textSecondary);
  font-weight: var(--fontWeightRegular);
}
.manage-info-list dd {
  margin: 0;
  color: var(--textPrimary);
  word-break: break-word;
  overflow-wrap: anywhere;
}
.manage-info-mono {
  font-family: var(--fontFamilyMono, ui-monospace, SFMono-Regular, monospace);
  font-size: var(--fontSizeXS);
  color: var(--textTertiary);
}

.manage-info-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.manage-info-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) var(--space-3);
  background: var(--bgSecondary);
  border-radius: var(--radius-sm);
}
.manage-info-metric-label {
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.manage-info-metric-value {
  font-size: var(--fontSizeLG);
  font-weight: var(--fontWeightSemibold);
  color: var(--colorAccent);
  font-variant-numeric: tabular-nums;
}
.manage-info-metric-sub {
  font-size: var(--fontSizeXS);
}

.manage-info-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--bgSecondary);
  margin-bottom: var(--space-2);
}
.manage-info-bar-seg {
  transition: flex-grow var(--dur-base) var(--ease-standard);
  min-width: 0;
}
.manage-info-bar-seg.is-new        { background: color-mix(in srgb, var(--textTertiary) 55%, transparent); }
.manage-info-bar-seg.is-learning   { background: color-mix(in srgb, var(--colorAccent)  30%, var(--bgPrimary)); }
.manage-info-bar-seg.is-review     { background: var(--colorAccent); }
.manage-info-bar-seg.is-relearning { background: var(--colorWarning); }
.manage-info-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fontSizeXS);
}
.manage-info-legend .dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
.manage-info-legend .dot.is-new        { background: color-mix(in srgb, var(--textTertiary) 55%, transparent); }
.manage-info-legend .dot.is-learning   { background: color-mix(in srgb, var(--colorAccent)  30%, var(--bgPrimary)); }
.manage-info-legend .dot.is-review     { background: var(--colorAccent); }
.manage-info-legend .dot.is-relearning { background: var(--colorWarning); }

.manage-info-slot-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.manage-info-slot-row {
  display: grid;
  grid-template-columns: 1fr auto auto 1fr;
  gap: var(--space-2);
  align-items: center;
  padding: 6px var(--space-2);
  background: var(--bgSecondary);
  border-radius: 4px;
  font-size: var(--fontSizeXS);
}
.manage-info-slot-name { font-weight: var(--fontWeightMedium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.manage-info-slot-side { font-size: 10px; }
.manage-info-slot-fill {
  font-variant-numeric: tabular-nums;
  color: var(--colorAccent);
  font-weight: var(--fontWeightSemibold);
}
.manage-info-slot-types { font-size: 10px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.manage-info-media-dist {
  margin-top: var(--space-2);
  font-size: var(--fontSizeXS);
}
.manage-info-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Custom 테마 설정 패널 (settings.js appearance 섹션 내) */
.custom-theme-panel {
  padding: var(--space-3);
  border: 1px dashed var(--cardBorder);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--colorAccent) 4%, var(--bgPrimary));
  margin-top: var(--space-3);
}
.ct-img-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ct-img-pick { cursor: pointer; }
.ct-img-opts {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.ct-opt-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.ct-opt-label {
  flex: 0 0 100px;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
}
.ct-opt-row input[type="range"] { flex: 1 1 auto; min-width: 140px; accent-color: var(--colorAccent); }
.ct-scale-val { color: var(--textPrimary); font-variant-numeric: tabular-nums; margin-left: 4px; }

/* ===== Custom 테마 뒷면 배경 이미지 (Phase 2.X.3, Req 21-23) =====
 * DOM 레이어 구조: 이미지(z:0) → 반투명 오버레이(z:1) → 콘텐츠(z:2)
 * 물리적 뒷면(.flashcard-back 또는 backward 모드의 .flashcard-front)에만 삽입.
 */
.flashcard-front.has-back-bg-image,
.flashcard-back.has-back-bg-image {
  position: relative;
}
.flashcard-front.has-back-bg-image > .card-face-content,
.flashcard-front.has-back-bg-image > .card-qa-label,
.flashcard-front.has-back-bg-image > .card-side-badge,
.flashcard-back.has-back-bg-image > .card-face-content,
.flashcard-back.has-back-bg-image > .card-qa-label,
.flashcard-back.has-back-bg-image > .card-side-badge {
  position: relative;
  z-index: 2;
}
.backBgImageLayer {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
}
.backBgOverlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
}

/* ===== 카드 마모 효과 (Phase 2.X.3) =====
 * wearEffect.js가 .flashcard에 wear-level-{N} 클래스 부여 + 인라인 box-shadow.
 * SVG 필터 (#wear-rough-1~4)는 index.html <defs>에서 정의.
 * 모든 테마에서 동일 필터 참조 — 색상은 인라인 box-shadow(--wearR/G/B)로 조절.
 */
/* 루트(.study-card / .flashcard)에 직접 필터 — border + 배경 + 면 전체가 물결치며 부식된 테두리 연출.
   면(.study-card-front 등)에만 걸면 절대배치 자식 내부만 흔들려 border가 멀쩡히 남는다. */
.study-card.wear-level-1, .flashcard.wear-level-1,
.coverflowPeek.wear-level-1, .coverflowCard.wear-level-1,
.pageTurnFace.wear-level-1 { filter: url(#wear-rough-1); }
.study-card.wear-level-2, .flashcard.wear-level-2,
.coverflowPeek.wear-level-2, .coverflowCard.wear-level-2,
.pageTurnFace.wear-level-2 { filter: url(#wear-rough-2); }
.study-card.wear-level-3, .flashcard.wear-level-3,
.coverflowPeek.wear-level-3, .coverflowCard.wear-level-3,
.pageTurnFace.wear-level-3 { filter: url(#wear-rough-3); }
.study-card.wear-level-4, .flashcard.wear-level-4,
.coverflowPeek.wear-level-4, .coverflowCard.wear-level-4,
.pageTurnFace.wear-level-4 { filter: url(#wear-rough-4); }

/* ===========================================================================
 * flipClock — split-flap (공항 안내판) 스타일 플립 (Legacy 포팅)
 *
 * 4개 레이어:
 *   top half   : from면 상단 (clip-path로 상단 반만 노출, z:5)
 *   bottom half: to면 하단 (clip-path로 하단 반만 노출, z:5)
 *   panel      : from면 상단 — 접혀 내려가는 패널 (z:6, rotateX 0→-90)
 *   panelBottom: to면 하단 — 올라오는 패널 (z:6, rotateX 90→0, 0.25s delay)
 *
 * 호출부 (flipEngine)가 overlay.innerHTML에 4개 panel을 채우고 animating 클래스 토글.
 * =========================================================================== */
.flipClockOverlay {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; border-radius: var(--cardRadius);
}
/* legacy의 `inner.style.visibility='hidden'` 대응 — .study-card는 inner 래퍼가 없으므로
   직계 .study-card-face 2장을 함께 숨기는 단일 토글 클래스를 제공.
   border/배경/그림자는 건드리지 않는다 (이전 실패 경로). */
/* v0.3.26 legacy 교훈: "inner visibility:hidden"은 pageTurn/flipClock 연출을 망가뜨림 → 사용하지 않음.
   face 가시성은 그대로 두고, panel 4장이 z-index:5/6로 위를 덮는 방식으로 연출. */
.study-card.flipClockActive {
  /* :active scale(0.99) + floating lift의 transition이 panel 생성 순간 아직
     진행 중일 수 있어 panel이 축소된 컨테이너 기준으로 그려짐. transform과 transition
     모두 즉시 고정해 panel이 원본 카드와 완벽 정렬되게 한다. */
  transform: none !important;
  transition: none !important;
}

/* panel 내부로 클론된 .card-renderer-face/.card-face-content가 원본 face처럼
   panel 전체를 채우도록 보정. min-height: 180px이 기본인데 panel height가
   훨씬 크면 content가 상단에 쏠려 "작아진 것처럼" 보임. */
.flipClockContent > .card-renderer-face,
.flipClockContent > .card-face-content {
  width: 100%;
  height: 100%;
  min-height: 100%;
}
/* 힌지 — 은은한 금속 라인 + 양끝 볼트. 콘텐츠가 주인공이므로 차분하게. */
.flipClockOverlay::before {
  content: ''; position: absolute;
  left: 3%; right: 3%; top: 50%; height: 4px;
  transform: translateY(-2px);
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.10) 50%,
    rgba(0,0,0,0) 100%);
  z-index: 9;
  pointer-events: none;
}
.flipClockOverlay::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%; height: 1px;
  transform: translateY(-0.5px);
  background: linear-gradient(to right,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.35) 8%,
    rgba(0,0,0,0.35) 92%,
    rgba(0,0,0,0) 100%);
  z-index: 11;
  opacity: 0.55;
}
/* 힌지 양끝 볼트 */
.flipClockRivet {
  position: absolute; top: 50%;
  width: 5px; height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    rgba(200,200,200,0.9) 0%,
    rgba(120,120,120,0.9) 50%,
    rgba(50,50,50,0.9) 100%);
  box-shadow: 0 1px 1px rgba(0,0,0,0.3);
  z-index: 12;
  opacity: 0.65;
}
.flipClockRivet.left  { left: 2px; }
.flipClockRivet.right { right: 2px; }
.flipClockHalf {
  /* .study-card는 border-box(560px 외곽, 556px content) + padding=0. panel은 absolute로
     content-box 기준(556) → 4px 작아짐. calc(100% + 2*borderWidth)로 outer 복원 + border-box 유지. */
  position: absolute;
  left: calc(-1 * var(--cardBorderWidth));
  width: calc(100% + 2 * var(--cardBorderWidth));
  height: calc(100% + 2 * var(--cardBorderWidth));
  box-sizing: border-box;
  overflow: hidden; border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--cardRadius);
}
.flipClockHalf.top {
  top: calc(-1 * var(--cardBorderWidth)); clip-path: inset(0 0 50% 0);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.flipClockHalf.bottom {
  top: calc(-1 * var(--cardBorderWidth)); clip-path: inset(50% 0 0 0);
  border-top-left-radius: 0; border-top-right-radius: 0;
}
/* v2: panel content는 .study-card-face처럼 단순 absolute 컨테이너.
   자식(.card-renderer-face + .card-face-content)이 자체 flex·좌표 시스템을 갖고 있어
   여기서 추가 flex center/padding을 걸면 내용이 이중 중앙 정렬되어 쪼그라들어 보임. */
.flipClockContent {
  position: absolute; inset: 0;
  font-family: var(--cardFont);
  color: var(--cardWordColor);
  box-sizing: border-box;
  z-index: 2;
}
.flipClockHalf.top .flipClockContent { top: 0; }
.flipClockHalf.bottom .flipClockContent { top: 0; }

.flipClockPanel {
  position: absolute;
  left: calc(-1 * var(--cardBorderWidth)); top: calc(-1 * var(--cardBorderWidth));
  width: calc(100% + 2 * var(--cardBorderWidth));
  height: calc(100% + 2 * var(--cardBorderWidth));
  box-sizing: border-box;
  overflow: hidden; transform-origin: center 50%;
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--cardRadius); z-index: 6;
  clip-path: inset(0 0 50% 0);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
.flipClockPanel .flipClockContent {
  position: absolute; inset: 0;
  box-sizing: border-box;
}
.flipClockPanel::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(0,0,0,0); transition: background 0.3s;
}
.flipClockPanel.animating {
  animation: flipClockFold calc(0.4s * var(--flipSpeed, 1)) cubic-bezier(0.19,1,0.22,1) forwards;
}
.flipClockPanel.animating::after {
  animation: flipClockDarken calc(0.4s * var(--flipSpeed, 1)) ease-in forwards;
}
.flipClockPanelBottom {
  position: absolute;
  left: calc(-1 * var(--cardBorderWidth)); top: calc(-1 * var(--cardBorderWidth));
  width: calc(100% + 2 * var(--cardBorderWidth));
  height: calc(100% + 2 * var(--cardBorderWidth));
  box-sizing: border-box;
  overflow: hidden; transform-origin: center 50%;
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--cardRadius); z-index: 6;
  clip-path: inset(50% 0 0 0);
  transform: perspective(600px) rotateX(90deg);
  border-top-left-radius: 0; border-top-right-radius: 0;
}
.flipClockPanelBottom .flipClockContent {
  position: absolute; inset: 0;
  box-sizing: border-box;
}
.flipClockPanelBottom::after {
  content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.25);
}
.flipClockPanelBottom.animating {
  animation: flipClockUnfold calc(0.5s * var(--flipSpeed, 1)) calc(0.25s * var(--flipSpeed, 1)) cubic-bezier(0.19,1,0.22,1) forwards;
}
.flipClockPanelBottom.animating::after {
  animation: flipClockBrighten calc(0.5s * var(--flipSpeed, 1)) calc(0.25s * var(--flipSpeed, 1)) ease-out forwards;
}
@keyframes flipClockFold {
  0% { transform: perspective(600px) rotateX(0deg); }
  100% { transform: perspective(600px) rotateX(-90deg); }
}
@keyframes flipClockDarken {
  0% { background: rgba(0,0,0,0); } 100% { background: rgba(0,0,0,0.25); }
}
@keyframes flipClockUnfold {
  0% { transform: perspective(600px) rotateX(90deg); }
  75% { transform: perspective(600px) rotateX(-4deg); }
  88% { transform: perspective(600px) rotateX(2deg); }
  100% { transform: perspective(600px) rotateX(0deg); }
}
@keyframes flipClockBrighten {
  0% { background: rgba(0,0,0,0.25); } 100% { background: rgba(0,0,0,0); }
}

/* ===========================================================================
 * pageTurn — 책 페이지 넘김 (Legacy 이식)
 *
 * 구조:
 *   .pageTurnOverlay (perspective 1800px)
 *   ├ .pageTurnPage (transform-style preserve-3d, rotateY 0→±180)
 *   │  ├ .pageTurnFace.front (현재 보이는 면 내용)
 *   │  └ .pageTurnFace.back (다음 카드 앞면, rotateY 180deg로 등 맞댐)
 *   └ .pageTurnShadow (정지 카드 위의 드리우는 그림자)
 * =========================================================================== */
.pageTurnOverlay {
  position: absolute; inset: 0; z-index: 5;
  pointer-events: none; perspective: 1800px;
}
.pageTurnPage {
  position: absolute; inset: 0; z-index: 6;
  transform-style: preserve-3d;
}
.pageTurnPage.flipNext { transform-origin: left center; }
.pageTurnPage.flipPrev { transform-origin: right center; }
.pageTurnPage .pageTurnFace {
  /* padding 없음 — face의 padding은 trump-inner-border(absolute inset:6px) 좌표계를
     안쪽으로 밀어 원본 카드와 어긋나게 한다. 내용 정렬은 .card-face-content 등 내부 규칙에 맡김. */
  position: absolute;
  inset: 0;
  background: var(--cardBgGradient, var(--cardBg));
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--cardRadius);
  overflow: hidden;
  font-family: var(--cardFont);
  color: var(--cardWordColor);
  box-sizing: border-box;
  backface-visibility: hidden;
}
.pageTurnPage .pageTurnFace.front::before {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 60px;
  background: linear-gradient(to left, rgba(0,0,0,0.04) 0%, transparent 100%);
  pointer-events: none; z-index: 1;
}
.pageTurnPage .pageTurnFace.back {
  transform: rotateY(180deg);
  color: var(--cardMeaningColor);
  background: var(--cardBackBg, var(--cardBgGradient, var(--cardBg)));
}
.pageTurnPage.flipNext .pageTurnFace.back::after {
  content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 30px;
  background: linear-gradient(to left, rgba(0,0,0,0.06) 0%, transparent 100%);
  pointer-events: none;
}
.pageTurnPage.flipPrev .pageTurnFace.back::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 30px;
  background: linear-gradient(to right, rgba(0,0,0,0.06) 0%, transparent 100%);
  pointer-events: none;
}
.pageTurnShadow {
  position: absolute; inset: 0; z-index: 7;
  pointer-events: none; opacity: 0;
  border-radius: var(--cardRadius);
}
.pageTurnShadow.shadowNext {
  background: linear-gradient(to right, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.08) 40%, transparent 100%);
}
.pageTurnShadow.shadowPrev {
  background: linear-gradient(to left, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.08) 40%, transparent 100%);
}
.pageTurnPage::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40px;
  pointer-events: none; z-index: 8; opacity: 0;
  transition: opacity 0.1s;
}
.pageTurnPage.flipNext::after {
  left: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.12) 0%, transparent 100%);
}
.pageTurnPage.flipPrev::after {
  right: 0;
  background: linear-gradient(to left, rgba(0,0,0,0.12) 0%, transparent 100%);
}
.pageTurnPage.animating::after { opacity: 1; }
.pageTurnPage.flipNext.animating {
  animation: pageFlipNext calc(0.56s * var(--slideSpeed, 1)) cubic-bezier(0.19,1,0.22,1) forwards;
}
.pageTurnPage.flipPrev.animating {
  animation: pageFlipPrev calc(0.56s * var(--slideSpeed, 1)) cubic-bezier(0.19,1,0.22,1) forwards;
}
.pageTurnShadow.animating {
  animation: pageShadowFade calc(0.56s * var(--slideSpeed, 1)) cubic-bezier(0.19,1,0.22,1) forwards;
}
@keyframes pageFlipNext {
  0%   { transform: rotateY(0deg) translateZ(0); box-shadow: none; }
  15%  { transform: rotateY(-15deg) translateZ(20px) scale(1.01); box-shadow: -4px 0 16px rgba(0,0,0,0.12); }
  40%  { transform: rotateY(-70deg) translateZ(30px) scale(1.02); box-shadow: -8px 0 30px rgba(0,0,0,0.2); }
  60%  { transform: rotateY(-110deg) translateZ(25px) scale(1.01); box-shadow: -6px 0 24px rgba(0,0,0,0.18); }
  80%  { transform: rotateY(-160deg) translateZ(10px); box-shadow: -2px 0 8px rgba(0,0,0,0.08); }
  95%  { transform: rotateY(-177deg) translateZ(2px); box-shadow: 0 0 2px rgba(0,0,0,0.03); }
  100% { transform: rotateY(-180deg) translateZ(0); box-shadow: none; }
}
@keyframes pageFlipPrev {
  0%   { transform: rotateY(0deg) translateZ(0); box-shadow: none; }
  15%  { transform: rotateY(15deg) translateZ(20px) scale(1.01); box-shadow: 4px 0 16px rgba(0,0,0,0.12); }
  40%  { transform: rotateY(70deg) translateZ(30px) scale(1.02); box-shadow: 8px 0 30px rgba(0,0,0,0.2); }
  60%  { transform: rotateY(110deg) translateZ(25px) scale(1.01); box-shadow: 6px 0 24px rgba(0,0,0,0.18); }
  80%  { transform: rotateY(160deg) translateZ(10px); box-shadow: 2px 0 8px rgba(0,0,0,0.08); }
  95%  { transform: rotateY(177deg) translateZ(2px); box-shadow: 0 0 2px rgba(0,0,0,0.03); }
  100% { transform: rotateY(180deg) translateZ(0); box-shadow: none; }
}
@keyframes pageShadowFade {
  0%   { opacity: 0; }
  20%  { opacity: 0.7; }
  50%  { opacity: 1; }
  80%  { opacity: 0.5; }
  100% { opacity: 0; }
}

/* ===========================================================================
 * Coverflow — legacy rail + peek 포팅 (간소)
 *
 * 부모 컨테이너(.study-card의 parent)에 perspective: 2000px 공유 → 모든 카드가 한 3D 공간.
 * .coverflowPeek(정지 상태) + .coverflowCard.cfAnim(전환 중) 2가지 요소 클래스.
 * COVERFLOW_POSITIONS 테이블의 (x, y, rotateY, scale, opacity, z, tz)를 인라인 transform으로.
 * =========================================================================== */
.coverflow-stage {
  /* JS가 .study-card의 부모에 이 클래스를 토글해 perspective 공유 활성화 */
  perspective: 2000px;
  perspective-origin: 50% 50%;
}
/* coverflow overlay 애니메이션 중 원본 .study-card와 정지 peek 강제 숨김 (중첩 방지).
   direct child 선택자는 중간 래퍼 있으면 실패 → descendant selector + opacity 병용으로 확실히 숨김. */
.coverflow-animating .study-card,
.coverflow-animating .coverflowPeek {
  visibility: hidden !important;
  opacity: 0 !important;
}
.coverflowPeek, .coverflowCard {
  position: absolute;
  top: 50%;
  left: 50%;
  /* center card와 동일 치수 — legacy는 .flashcard와 동일하게 560x373 맞춤.
     여기선 max-width 560 / aspect-ratio 3:2 / translate(-50%,-50%)로 center 앵커. */
  width: 100%;
  max-width: 560px;
  aspect-ratio: 3 / 2;
  max-height: 100%;
  min-height: 240px;
  padding: calc(var(--space-8) * var(--contentDensity)) calc(var(--space-6) * var(--contentDensity));
  box-sizing: border-box;
  background: var(--cardBgGradient, var(--cardBg));
  border: var(--cardBorderWidth) solid var(--cardBorder);
  border-radius: var(--cardRadius);
  box-shadow: var(--cardShadow);
  color: var(--cardWordColor);
  /* 기본 transform: JS가 translate(-50%,-50%) 포함해 인라인으로 덮어씀 */
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.coverflowPeek .peekText,
.coverflowCard .peekText {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  font-weight: var(--fontWeightMedium);
  font-size: clamp(1rem, 2.2vw, 2rem);
  line-height: 1.3;
  box-sizing: border-box;
  overflow: hidden;
}
/* Rail cfAnim에 실제 .study-card-face가 들어오면 그대로 카드 크기로 채움 */
.coverflowPeek .study-card-face,
.coverflowCard .study-card-face {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .coverflowPeek, .coverflowCard { transition: none; }
}

/* ===== FSRS 학습 성향 섹션 (deckSettings 내부 + 전용 모달) ===== */
.ds-fsrs-section {
  padding: var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--colorAccent) 4%, var(--bgPrimary));
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.ds-fsrs-status {
  font-size: var(--fontSizeSM);
  line-height: 1.5;
}
.ds-fsrs-status .fo-insufficient { color: var(--colorError); }
.ds-fsrs-status .fo-warn-lite { color: var(--colorWarning); }
.ds-fsrs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ds-fsrs-actions .btn-cta[disabled] { opacity: 0.5; cursor: not-allowed; }

/* FSRS 프로필 픽커 (최적화 시작 전 fast/balanced/thorough 선택) */
.fo-profile-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fo-profile-opt {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.fo-profile-opt.is-active {
  border-color: var(--colorAccent);
  background: color-mix(in srgb, var(--colorAccent) 8%, var(--bgPrimary));
}
.fo-profile-opt > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fo-profile-opt input[type="radio"] { accent-color: var(--colorAccent); }

/* Progress 모달 */
.fo-progress-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--textPrimary) 40%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-4);
}
.fo-progress-card {
  width: 100%;
  max-width: 420px;
  padding: var(--space-5);
  background: var(--bgPrimary);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px color-mix(in srgb, var(--textPrimary) 25%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fo-progress-title { margin: 0; font-size: var(--fontSizeLG); font-weight: var(--fontWeightSemibold); }
.fo-progress-phase { margin: 0; font-size: var(--fontSizeSM); }
.fo-progress-bar {
  height: 6px;
  background: var(--bgSecondary);
  border-radius: 3px;
  overflow: hidden;
}
.fo-progress-fill {
  display: block;
  height: 100%;
  background: var(--colorAccent);
  transition: width var(--dur-base) var(--ease-standard);
}
.fo-progress-eta { margin: 0; font-size: var(--fontSizeXS); }
.fo-progress-actions { display: flex; justify-content: flex-end; margin-top: var(--space-2); }

/* 결과 모달 */
.fo-result-head {
  margin-bottom: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fo-result-delta {
  font-size: var(--fontSizeXL);
  font-weight: var(--fontWeightSemibold);
}
.fo-result-delta.is-positive { color: var(--colorSuccess); }
.fo-result-delta.is-negative { color: var(--colorError); }
.fo-result-delta.is-neutral  { color: var(--textSecondary); }
.fo-result-warn {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--colorWarning) 14%, transparent);
  border-left: 3px solid var(--colorWarning);
  color: var(--colorWarning);
  font-size: var(--fontSizeXS);
  border-radius: 4px;
}
.fo-result-tabs {
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.fo-result-body {
  min-height: 220px;
  margin-bottom: var(--space-3);
}
.fo-result-save {
  padding: var(--space-3);
  border: 1px dashed var(--cardBorder);
  border-radius: var(--radius-md);
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fo-save-toggle { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.fo-save-form { display: flex; flex-direction: column; gap: var(--space-2); }

/* 결과 모달 내부 차트 */
.fo-chart-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.fo-chart { width: 100%; height: auto; max-width: 420px; }
.fo-chart-line { stroke-width: 2; fill: none; }
.fo-chart-line.is-baseline  { stroke: var(--textTertiary); stroke-dasharray: 4 4; }
.fo-chart-line.is-optimized { stroke: var(--colorAccent); }
.fo-chart-legend {
  display: flex;
  gap: var(--space-3);
  font-size: var(--fontSizeXS);
  flex-wrap: wrap;
}
.fo-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
.fo-dot.is-baseline  { background: var(--textTertiary); }
.fo-dot.is-optimized { background: var(--colorAccent); }

.fo-bars {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: var(--space-1);
  align-items: end;
  height: 140px;
  max-width: 420px;
}
.fo-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
}
.fo-bar-pair {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100%;
  width: 100%;
}
.fo-bar {
  flex: 1;
  min-height: 2px;
}
.fo-bar.is-baseline  { background: var(--textTertiary); }
.fo-bar.is-optimized { background: var(--colorAccent); }
.fo-bar-label {
  font-size: 10px;
  color: var(--textTertiary);
  white-space: nowrap;
}

.fo-delta-list { display: flex; flex-direction: column; gap: 4px; }
.fo-delta-row {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: var(--space-2);
  align-items: center;
}
.fo-delta-name { font-size: var(--fontSizeXS); }
.fo-delta-bar-wrap {
  position: relative;
  height: 8px;
  background: var(--bgSecondary);
  border-radius: 4px;
  overflow: hidden;
}
.fo-delta-bar {
  display: block;
  height: 100%;
  background: var(--colorAccent);
}
.fo-delta-bar-wrap[data-sign="neg"] .fo-delta-bar { background: var(--textTertiary); }
.fo-delta-val {
  font-variant-numeric: tabular-nums;
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  min-width: 40px;
  text-align: right;
}

.fo-spider-wrap { align-items: center; }
.fo-spider-svg { max-width: 320px; }
.fo-spider-narr {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bgSecondary);
  border-radius: var(--radius-sm);
  font-size: var(--fontSizeXS);
  color: var(--textPrimary);
}

/* 프로필 라이브러리 */
.fp-empty {
  padding: var(--space-5);
  text-align: center;
  background: var(--bgSecondary);
  border-radius: var(--radius-md);
}
.fp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fp-row {
  display: grid;
  /* 차트 슬롯 80 → 150 으로 확대해 5축 라벨이 읽히도록 함. */
  grid-template-columns: 1fr 150px auto;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  background: var(--bgPrimary);
  transition: border-color var(--dur-fast), background var(--dur-fast);
}
.fp-row[data-mode="edit"] {
  border-color: var(--colorAccent);
  background: color-mix(in srgb, var(--colorAccent) 4%, var(--bgPrimary));
}
.fp-row-head {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  align-items: baseline;
}
/* view/edit 가시성 토글 — data-mode 기준 */
.fp-row[data-mode="view"] [data-edit-only] { display: none !important; }
.fp-row[data-mode="edit"] [data-view-only] { display: none !important; }
/* 이름 폰트 줄여 차트와의 시각 균형 확보 (제목 느낌 약화). */
.fp-name-view {
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightMedium);
  color: var(--textPrimary);
}
.fp-name { flex: 1 1 auto; min-width: 120px; font-size: var(--fontSizeSM); }
.fp-cat { flex: 0 0 auto; max-width: 160px; }
.fp-cat-view {
  font-size: var(--fontSizeXS);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bgSecondary);
}
.fp-row-meta { font-size: var(--fontSizeXS); margin-top: 4px; }
.fp-row-meta .fp-delta.is-positive { color: var(--colorSuccess); }
.fp-row-meta .fp-delta.is-negative { color: var(--colorError); }
.fp-overfit { color: var(--colorWarning); }
.fp-usedby { font-size: var(--fontSizeXS); margin-top: 4px; }
.fp-usedby.is-active { color: var(--textPrimary); }
.fp-usedby.is-active .fp-usedby-label { color: var(--colorAccent); font-weight: var(--fontWeightSemibold); }
.fp-usedby.is-inactive { color: var(--textTertiary); font-style: italic; }
.fp-row-actions { display: flex; gap: 4px; flex-direction: column; }
.fp-row-actions .btn-chip { padding: 4px 8px; min-width: 56px; }
.fp-row-actions .btn-chip.fp-edit.is-edit {
  background: var(--colorAccent);
  color: var(--textInverse, #fff);
  border-color: var(--colorAccent);
}
.fp-row-spider svg { display: block; }
.fp-row-spider-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px;
  cursor: pointer;
  transition: border-color var(--dur-fast), background var(--dur-fast);
  width: 100%;
}
.fp-row-spider-btn:hover {
  border-color: var(--cardBorder);
  background: color-mix(in srgb, var(--colorAccent) 6%, transparent);
}

/* 성향 지도 상세 모달 (fsrsSpiderDetail.js) */
.fsd-main { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.fsd-svg { width: 100%; max-width: 320px; }
.fsd-svg svg { width: 100%; height: auto; }
.fsd-legend { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; font-size: var(--fontSizeXS); }
.fsd-narration {
  margin: var(--space-2) 0 0;
  padding: var(--space-2) var(--space-3);
  background: var(--bgSecondary);
  border-radius: var(--radius-sm);
  font-size: var(--fontSizeSM);
}
.fsd-narration-tags {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.fsd-narration-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: var(--fontSizeXS);
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--cardBorder);
  background: var(--bgPrimary);
}
.fsd-narration-tag[data-sign="pos"] {
  border-color: color-mix(in srgb, var(--colorAccent) 40%, transparent);
  background: color-mix(in srgb, var(--colorAccent) 8%, var(--bgPrimary));
}
.fsd-narration-tag[data-sign="neg"] {
  border-color: color-mix(in srgb, var(--colorWarning) 40%, transparent);
  background: color-mix(in srgb, var(--colorWarning) 8%, var(--bgPrimary));
}
.fsd-narration-tag[data-bucket="strong"] { font-weight: var(--fontWeightSemibold); }

.fsd-analysis {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bgSecondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--cardBorder);
}
.fsd-analysis .section-title {
  margin: 0 0 var(--space-2);
  font-size: var(--fontSizeSM);
  font-weight: var(--fontWeightSemibold);
}
.fsd-analysis-summary {
  margin: 0 0 var(--space-3);
  font-size: var(--fontSizeSM);
  line-height: 1.5;
  color: var(--textPrimary);
}
.fsd-analysis-rec-title {
  margin: var(--space-2) 0 var(--space-1);
  font-size: var(--fontSizeXS);
  font-weight: var(--fontWeightSemibold);
  color: var(--textSecondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fsd-analysis-rec-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.fsd-analysis-rec {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--bgPrimary);
  border-left: 3px solid var(--cardBorder);
  font-size: var(--fontSizeSM);
}
.fsd-analysis-rec[data-sign="pos"] { border-left-color: var(--colorAccent); }
.fsd-analysis-rec[data-sign="neg"] { border-left-color: var(--colorWarning); }
.fsd-analysis-rec.is-strong { background: color-mix(in srgb, var(--colorAccent) 6%, var(--bgPrimary)); }
.fsd-analysis-rec.is-strong[data-sign="neg"] { background: color-mix(in srgb, var(--colorWarning) 6%, var(--bgPrimary)); }
.fsd-analysis-rec-axis {
  font-weight: var(--fontWeightMedium);
  color: var(--textPrimary);
  white-space: nowrap;
}
.fsd-analysis-rec-text {
  color: var(--textPrimary);
  line-height: 1.45;
}
.fsd-analysis-rec-strong {
  color: var(--colorAccent);
  font-size: 10px;
}
.fsd-analysis-rec[data-sign="neg"] .fsd-analysis-rec-strong { color: var(--colorWarning); }

.fsd-axes {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--cardBorder);
}
.fsd-axis-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fsd-axis-row {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
}
.fsd-axis-head { display: flex; justify-content: space-between; align-items: baseline; }
.fsd-axis-label { font-weight: var(--fontWeightMedium); }
.fsd-axis-val {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fontWeightSemibold);
}
.fsd-axis-val[data-sign="pos"] { color: var(--colorAccent); }
.fsd-axis-val[data-sign="neg"] { color: var(--textTertiary); }
.fsd-axis-meta { font-size: var(--fontSizeXS); margin-top: 2px; }
.fsd-axis-expl { font-size: var(--fontSizeSM); margin-top: 4px; color: var(--textPrimary); }

.fo-spider-detail { margin-top: var(--space-2); }

.fp-warn {
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--colorWarning) 14%, transparent);
  color: var(--colorWarning);
  border-radius: var(--radius-sm);
  font-size: var(--fontSizeXS);
  margin-bottom: var(--space-3);
}
.fp-picker-list { display: flex; flex-direction: column; gap: var(--space-3); }
.fp-picker-cat-title {
  margin: 0 0 var(--space-1);
  font-size: var(--fontSizeXS);
  color: var(--textSecondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.fp-picker-cat ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fp-picker-row {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  background: var(--bgPrimary);
  border: 1px solid var(--cardBorder);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  gap: var(--space-2);
}
.fp-picker-row:hover {
  border-color: var(--colorAccent);
  background: color-mix(in srgb, var(--colorAccent) 6%, var(--bgPrimary));
}
.fp-picker-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fp-picker-main strong { font-size: var(--fontSizeSM); }
.fp-picker-main .manage-dim { font-size: var(--fontSizeXS); }

.fsrs-profiles-panel { margin-top: var(--space-3); }

/* ===== 통계 — FSRS 상태 도넛 (예측 탭 스냅샷) ===== */
.stats-state-row {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 180px);
  gap: var(--space-3);
  align-items: center;
}
.stats-state-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
}
.stats-state-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.stats-donut { width: 140px; height: 140px; }
.stats-donut-num {
  font-size: 24px;
  font-weight: 600;
  fill: var(--textPrimary);
}
.stats-donut-sub {
  font-size: 10px;
  fill: var(--textSecondary);
}
@media (max-width: 640px) {
  .stats-state-row { grid-template-columns: 1fr; }
  .stats-state-donut-wrap { margin-top: var(--space-2); }
}

/* ===== 통계 — 활동 캘린더 (학습 탭) ===== */
.stats-streak-heatmap {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.stats-heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 12px);
  grid-auto-flow: column;
  gap: 3px;
  overflow-x: auto;
}
.stats-heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--bgSecondary);
  display: inline-block;
}
.stats-heatmap-cell.is-pad { background: transparent; }
.stats-heatmap-cell[data-lvl="0"] { background: var(--bgSecondary); }
.stats-heatmap-cell[data-lvl="1"] { background: color-mix(in srgb, var(--colorAccent) 20%, var(--bgSecondary)); }
.stats-heatmap-cell[data-lvl="2"] { background: color-mix(in srgb, var(--colorAccent) 40%, var(--bgSecondary)); }
.stats-heatmap-cell[data-lvl="3"] { background: color-mix(in srgb, var(--colorAccent) 70%, var(--bgSecondary)); }
.stats-heatmap-cell[data-lvl="4"] { background: var(--colorAccent); }
.stats-heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fontSizeXS);
}

/* ===== 통계 — 난이도 분포 (rating-fill 확장) ===== */
.rating-fill.diff-easy     { background: color-mix(in srgb, var(--colorSuccess) 70%, transparent); }
.rating-fill.diff-normal   { background: color-mix(in srgb, var(--colorAccent) 60%, transparent); }
.rating-fill.diff-hard     { background: color-mix(in srgb, var(--colorWarning) 70%, transparent); }
.rating-fill.diff-stubborn { background: color-mix(in srgb, var(--colorError) 70%, transparent); }

/* ===== 통계 — 망각 곡선 SVG ===== */
.stats-rc-svg {
  width: 100%;
  height: auto;
  max-width: 560px;       /* 과한 확대 방지 — viewBox 320px 대비 1.75배까지만 */
  display: block;
  margin: 0 auto;
}
.stats-rc-grid {
  stroke: var(--cardBorder);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.stats-rc-axis-label {
  fill: var(--textTertiary);
  font-size: 9px;
}
.stats-rc-line {
  stroke-width: 2;
  fill: none;
  vector-effect: non-scaling-stroke;  /* SVG viewBox 확대해도 선 굵기 고정 */
}
.stats-rc-line.is-baseline { stroke: var(--textTertiary); stroke-dasharray: 4 4; }
.stats-rc-line.is-current  { stroke: var(--colorAccent); }
.stats-rc-grid { vector-effect: non-scaling-stroke; }
.stats-rc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fontSizeXS);
  justify-content: center;
  margin-top: var(--space-1);
}
.stats-rc-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
.stats-rc-dot.is-baseline { background: var(--textTertiary); }
.stats-rc-dot.is-current  { background: var(--colorAccent); }

/* 정보 탭 내 인라인 "설정 열기" 버튼 — 텍스트 링크 스타일 */
.manage-info-open-settings {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0 0 0 6px;
  color: var(--colorAccent);
  font-size: var(--fontSizeXS);
  font-weight: var(--fontWeightMedium);
  cursor: pointer;
}
.manage-info-open-settings:hover { text-decoration: underline; }

.deck-tag-chip {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 4px;
  background: color-mix(in srgb, var(--colorAccent) 10%, transparent);
  color: var(--colorAccent);
  border-radius: var(--radius-pill);
  font-size: var(--fontSizeXS);
}

@media (max-width: 640px) {
  .manage-info-list { grid-template-columns: 96px 1fr; }
  .manage-info-slot-row { grid-template-columns: 1fr auto auto; }
  .manage-info-slot-types { display: none; }
}

/* ===========================================================================
 * Hacker(Matrix) & Trump 테마 장식 (ThemeRegistry descriptor의 cssClass 대응)
 *   - ThemeRegistry가 .flashcard에 theme-hacker / theme-trump 클래스 추가
 *   - CardRenderer가 장식 DOM(.matrix-rain-canvas, .matrix-rain-back,
 *     .matrix-scanline, .trump-suit-tl/br, .trump-front-border,
 *     .trump-inner-border, .trump-back-pattern) 삽입
 * =========================================================================== */
.flashcard.theme-hacker .flashcard-front,
.flashcard.theme-hacker .flashcard-back { overflow: hidden; }
.flashcard.theme-hacker .card-face-content {
  position: relative; z-index: 1;
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.6), 0 0 25px rgba(0, 255, 65, 0.2);
}
.flashcard.theme-hacker .card-qa-label { text-shadow: 0 0 6px rgba(0, 255, 65, 0.4); }
.flashcard.theme-hacker .card-side-badge { text-shadow: 0 0 4px rgba(0, 255, 65, 0.3); opacity: 0.6; }

.matrix-rain-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
  border-radius: inherit;
  opacity: 0.35;
}
.matrix-rain-back {
  position: absolute; inset: 0;
  font-size: 10px; line-height: 1.2;
  color: rgba(0, 255, 65, 0.08);
  word-break: break-all; overflow: hidden;
  pointer-events: none; z-index: 0;
}
.matrix-scanline {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,65,0.03) 2px, rgba(0,255,65,0.03) 4px);
  pointer-events: none; z-index: 0;
}

.flashcard.theme-trump .card-qa-label {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic; letter-spacing: 0.05em;
}
.flashcard.theme-trump .card-face-content { position: relative; z-index: 1; }
.trump-suit-tl, .trump-suit-br {
  position: absolute;
  font-size: 1.1rem;
  color: var(--cardBorder); opacity: 0.3;
  pointer-events: none; z-index: 0;
  line-height: 1; letter-spacing: 0.1em;
}
.trump-suit-tl { top: 8px; left: 12px; }
.trump-suit-br { bottom: 8px; right: 12px; transform: rotate(180deg); }
.trump-front-border {
  position: absolute; inset: 8px;
  border: 1px solid var(--cardBorder);
  border-radius: calc(var(--cardRadius) - 6px);
  opacity: 0.15; pointer-events: none; z-index: 0;
}
.trump-inner-border {
  position: absolute; inset: 6px;
  border: 1px solid var(--cardBorder);
  border-radius: calc(var(--cardRadius) - 4px);
  opacity: 0.25; pointer-events: none; z-index: 0;
}
.trump-back-pattern {
  position: absolute; inset: 12px;
  background:
    repeating-linear-gradient(45deg, transparent, transparent 8px, var(--cardBorder) 8px, var(--cardBorder) 9px),
    repeating-linear-gradient(-45deg, transparent, transparent 8px, var(--cardBorder) 8px, var(--cardBorder) 9px);
  opacity: 0.06;
  border-radius: calc(var(--cardRadius) - 10px);
  pointer-events: none; z-index: 0;
}