/* Bible Reader asset-version: v1178c */
  /* ================================
     테마 변수 / Theme variables
     ================================ */
  :root {
    --bg: #15140f;
    --surface: #1d1c17;
    --surface-2: #252319;
    --surface-rgb: 29, 28, 23;
    --border: #2c2a22;
    --text: #e8e3d4;
    --text-dim: #a09a89;
    --text-faint: #7d7866;
    --accent: #c9a961;
    --accent-dim: #8a7544;
    /* v466q — accent 위에 박는 텍스트 컬러 (대비 자동 보정용 토큰) */
    --accent-fg: #15140f;
    --verse-num: #6d6859;
    --hl-yellow: rgba(241, 196, 15, 0.22);
    --hl-green: rgba(46, 204, 113, 0.22);
    --hl-blue: rgba(52, 152, 219, 0.22);
    --hl-pink: rgba(231, 76, 60, 0.22);
    --shadow: 0 10px 40px rgba(0,0,0,0.5);
    --strong-color: #8aa9d9;
    /* v466q — 언어 식별 컬러 (Hebrew warm earth · Greek cool blue).
       세 테마 모두 동일 기본값. 대비 부족시 테마별 보정. */
    --lang-hebrew: #b87a3e;
    --lang-hebrew-border: #8b5a2b;
    --lang-greek: #5a8ec9;
    --lang-greek-border: #3d6995;
    /* 본문 글꼴 — 설정에서 .reader 의 클래스로 덮어씀 */
    --font-body-ko: 'Noto Serif KR', serif;
    --font-body-en: 'Cormorant Garamond', 'Georgia', serif;

    /* ================================================================
       v466q — Design System Tokens (award-winning consistency)
       기존 코드 호환을 위해 토큰만 추가. 점진 마이그레이션.
       ================================================================ */

    /* spacing scale (4px base, rem) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* radius scale */
    --r-xs: 4px;
    --r-sm: 6px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-xl: 16px;
    --r-full: 999px;

    /* type scale (rem) */
    --text-xs:   0.72rem;
    --text-sm:   0.82rem;
    --text-base: 0.95rem;
    --text-md:   1.05rem;
    --text-lg:   1.2rem;
    --text-xl:   1.4rem;
    --text-2xl:  1.75rem;

    /* line-height */
    --lh-tight:  1.3;
    --lh-normal: 1.5;
    --lh-loose:  1.7;
    --lh-verse:  1.85;

    /* letter-spacing */
    --ls-tight:  -0.01em;
    --ls-normal: 0;
    --ls-wide:   0.02em;
    --ls-wider:  0.08em;

    /* shadow scale (--shadow legacy 와 공존) */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.5);

    /* z-index scale */
    --z-base:     0;
    --z-sticky:   10;
    --z-dropdown: 50;
    --z-modal:    100;
    --z-popover:  200;
    --z-toast:    300;
    --z-boot:     400;  /* 부팅·라이트박스·온보딩 (최상위) */

    /* motion */
    --duration-fast: 0.12s;
    --duration-base: 0.18s;
    --duration-slow: 0.3s;
    /* ⚠ 자기참조 금지 — var(--자기자신) 은 무효가 되어 이 변수를 쓰는
       animation/transition shorthand 전체가 none 으로 붕괴한다 (Sprint 11 회귀:
       빈 상태 말씀 본문이 opacity:0 에 갇혀 전부 투명해졌었음). */
    --ease-standard:   cubic-bezier(0.4, 0, 0.2, 1);
    --ease-decelerate: cubic-bezier(0.2, 0.6, 0.2, 1);
    --ease-spring:     cubic-bezier(0.34, 1.12, 0.64, 1);
  }
  /* light/sepia 의 shadow-lg 만 약화 (기존 --shadow 와 동일 패턴) */
  [data-theme="sepia"] { --shadow-lg: 0 10px 40px rgba(0,0,0,0.12); }
  [data-theme="light"] { --shadow-lg: 0 10px 40px rgba(0,0,0,0.12); }
  :root[data-theme="night"] {
    --bg: #070b16;
    --surface: #11182a;
    --surface-2: #18223a;
    --surface-rgb: 17, 24, 42;
    --border: rgba(217, 189, 115, 0.18);
    --text: #f0eadb;
    --text-dim: #c9bea5;
    --text-faint: #817b91;
    --accent: #d9bd73;
    --accent-dim: #a58a48;
    --paper-bg-1: #151a28;
    --paper-bg-2: #151a28;
    --paper-ink: #efe8d6;
    --paper-meta: #b8aa89;
    --paper-ref: #d9bd73;
    --paper-quote-line: rgba(217, 189, 115, 0.5);
    --paper-quote-ink: rgba(240, 234, 219, 0.84);
    --paper-hl: rgba(217, 189, 115, 0.24);
    --paper-comment-line: rgba(126, 164, 214, 0.42);
    --paper-comment-ink: #9dbce8;
    --paper-comment-bg: rgba(126, 164, 214, 0.08);
    --paper-tool: #d9bd73;
    --paper-footer-line: rgba(217, 189, 115, 0.2);
    --verse-num: #d9bd73;
    --hl-yellow: rgba(217, 189, 115, 0.26);
    --hl-green: rgba(106, 176, 141, 0.22);
    --hl-blue: rgba(111, 159, 222, 0.24);
    --hl-pink: rgba(204, 126, 164, 0.18);
    --shadow: 0 18px 60px rgba(0,0,0,0.56);
    --shadow-lg: 0 24px 70px rgba(0,0,0,0.6);
    --strong-color: #8fb8ff;
    --star-glow: rgba(217, 189, 115, 0.34);
  }
  [data-theme="sepia"] {
    --bg: #f4ecd8;
    --surface: #ebe1c4;
    --surface-2: #e4d8b8;
    --surface-rgb: 235, 225, 196;
    --border: #d3c8a8;
    --text: #3a2e20;
    --text-dim: #6b5a44;
    --text-faint: #9a8a70;
    --accent: #8b6f3e;
    --accent-dim: #6b5530;
    /* v292 — paper background is intentionally one-tone.
       --paper-bg-2 remains as a compatibility alias for older rules. */
    --paper-bg-1: #f3e9d3;
    --paper-bg-2: #f3e9d3;
    --paper-ink: #2a2118;
    --paper-meta: #6b5a3e;
    --paper-ref: #8b6f3e;
    --paper-quote-line: rgba(201, 169, 97, 0.55);
    --paper-quote-ink: rgba(42, 33, 24, 0.78);
    --paper-hl: rgba(201, 169, 97, 0.32);
    --paper-comment-line: rgba(196, 122, 106, 0.4);
    --paper-comment-ink: #c47a6a;
    --paper-comment-bg: rgba(196, 122, 106, 0.06);
    --paper-tool: #6b5a3e;
    --paper-footer-line: rgba(106, 90, 62, 0.25);
    --verse-num: #8a7a5c;
    --hl-yellow: rgba(218, 165, 32, 0.28);
    --hl-green: rgba(85, 139, 47, 0.22);
    --hl-blue: rgba(70, 130, 180, 0.22);
    --hl-pink: rgba(178, 34, 52, 0.18);
    --shadow: 0 10px 40px rgba(0,0,0,0.12);
    --strong-color: #5a7ba8;
  }
  /* v296g: 세피아(Sepia) 테마 아날로그 종이 텍스처 추가 */
  [data-theme="sepia"] body,
  [data-theme="sepia"] .note-desk,
  [data-theme="sepia"] .reader-area,
  [data-theme="sepia"] .couple-shell {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E") !important;
  }
  [data-theme="light"] {
    --bg: #fafaf7;
    --surface: #ffffff;
    --surface-2: #f5f4f0;
    --surface-rgb: 255, 255, 255;
    --border: #e5e3dd;
    --text: #1a1a1a;
    --text-dim: #6b6b6b;
    --text-faint: #a0a0a0;
    --accent: #8b6f3e;
    --accent-dim: #6b5530;
    /* v292 — light 테마 paper-* fallback (vellum, one-tone) */
    --paper-bg-1: #f3e9d3;
    --paper-bg-2: #f3e9d3;
    --paper-ink: #2a2118;
    --paper-meta: #6b5a3e;
    --paper-ref: #8b6f3e;
    --paper-quote-line: rgba(201, 169, 97, 0.55);
    --paper-quote-ink: rgba(42, 33, 24, 0.78);
    --paper-hl: rgba(201, 169, 97, 0.32);
    --paper-comment-line: rgba(196, 122, 106, 0.4);
    --paper-comment-ink: #c47a6a;
    --paper-comment-bg: rgba(196, 122, 106, 0.06);
    --paper-tool: #6b5a3e;
    --paper-footer-line: rgba(106, 90, 62, 0.25);
    --verse-num: #b0b0b0;
    --hl-yellow: rgba(241, 196, 15, 0.32);
    --hl-green: rgba(46, 204, 113, 0.25);
    --hl-blue: rgba(52, 152, 219, 0.22);
    --hl-pink: rgba(231, 76, 60, 0.18);
    --shadow: 0 10px 40px rgba(0,0,0,0.08);
    --strong-color: #2e5a96;
  }

  /* ================================
     Paper Tones — 노트 페이지 종이 톤 (v124 redesign)
     기본은 vellum. 노트 element에 data-paper-tone="..." 으로 토글.
     ================================ */
  :root {
    /* v291 — 다크 테마 (default) 에서 paper-tone 컨테이너 밖 element 들이 paper-* 사용 시
       다크 친화 값 (ink 톤). 글래스 카드·스탯 카드·스크랩 카드·빈 상태 verse 모두 적용.
       paper-tone 컨테이너 (data-paper-tone="vellum" 등) 는 자기 변수 override 하므로 영향 X.
       light/sepia 테마는 아래에서 다시 light paper (vellum) 톤으로 override. */
    --paper-bg-1: #3a342b;
    --paper-bg-2: #3a342b;
    --paper-ink: #ece4cf;
    --paper-meta: #a89e87;
    --paper-quote-line: rgba(201, 169, 97, 0.55);
    --paper-quote-ink: rgba(216, 207, 184, 0.85);
    --paper-hl: rgba(201, 169, 97, 0.32);
    --paper-ref: #c9a961;
    --paper-comment-line: rgba(196, 122, 106, 0.5);
    --paper-comment-ink: #d18a7c;
    --paper-comment-bg: rgba(196, 122, 106, 0.08);
    --paper-tool: #6b5a3e;
    --paper-footer-line: rgba(106, 90, 62, 0.25);
  }
  /* v432 — :root[data-theme] override: paper 변수 우선순위 수정
     :root (0,1,0) 와 [data-theme] (0,1,0) 특정도 충돌로 :root 값이 덮어쓰던 문제 해결.
     :root[data-theme="..."] (0,2,0) 으로 특정도 상향. */
  :root[data-theme="sepia"] {
    --paper-bg-1: #f3e9d3;
    --paper-bg-2: #f3e9d3;
    --paper-ink: #2a2118;
    --paper-meta: #6b5a3e;
    --paper-quote-line: rgba(201, 169, 97, 0.55);
    --paper-quote-ink: rgba(42, 33, 24, 0.78);
    --paper-hl: rgba(201, 169, 97, 0.32);
    --paper-ref: #8b6f3e;
    --paper-comment-line: rgba(196, 122, 106, 0.4);
    --paper-comment-ink: #c47a6a;
    --paper-comment-bg: rgba(196, 122, 106, 0.06);
    --paper-tool: #6b5a3e;
    --paper-footer-line: rgba(106, 90, 62, 0.25);
  }
  :root[data-theme="light"] {
    --paper-bg-1: #ffffff;
    --paper-bg-2: #ffffff;
    --paper-ink: #1a1a1a;
    --paper-meta: #6b6b6b;
    --paper-quote-line: rgba(201, 169, 97, 0.55);
    --paper-quote-ink: rgba(42, 33, 24, 0.78);
    --paper-hl: rgba(201, 169, 97, 0.32);
    --paper-ref: #8b6f3e;
    --paper-comment-line: rgba(196, 122, 106, 0.4);
    --paper-comment-ink: #c47a6a;
    --paper-comment-bg: rgba(196, 122, 106, 0.06);
    --paper-tool: #6b5a3e;
    --paper-footer-line: rgba(106, 90, 62, 0.25);
  }
  :root[data-theme="night"] {
    --paper-bg-1: #151a28;
    --paper-bg-2: #151a28;
    --paper-ink: #efe8d6;
    --paper-meta: #b8aa89;
    --paper-quote-line: rgba(217, 189, 115, 0.5);
    --paper-quote-ink: rgba(240, 234, 219, 0.84);
    --paper-hl: rgba(217, 189, 115, 0.24);
    --paper-ref: #d9bd73;
    --paper-comment-line: rgba(126, 164, 214, 0.42);
    --paper-comment-ink: #9dbce8;
    --paper-comment-bg: rgba(126, 164, 214, 0.08);
    --paper-tool: #d9bd73;
    --paper-footer-line: rgba(217, 189, 115, 0.2);
  }
  /* v466q — JS 가 data-theme 박기 전 짧은 초기 페인트 동안 OS 따라가기.
     명시적 토글 (data-theme 속성) 이 있으면 그게 항상 우선. */
  @media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
      --bg: #fafaf7;
      --surface: #ffffff;
      --surface-2: #f5f4f0;
      --surface-rgb: 255, 255, 255;
      --border: #e5e3dd;
      --text: #1a1a1a;
      --text-dim: #6b6b6b;
      --text-faint: #a0a0a0;
      --accent: #8b6f3e;
      --accent-dim: #6b5530;
      --shadow: 0 10px 40px rgba(0,0,0,0.12);
      --strong-color: #5a7ba8;
      color-scheme: light;
    }
  }
  [data-paper-tone="vellum"] {
    --paper-bg-1: #f3e9d3; --paper-bg-2: #f3e9d3;
    --paper-ink: #2a2118; --paper-meta: #6b5a3e;
    --paper-quote-line: rgba(201, 169, 97, 0.55);
    --paper-quote-ink: rgba(42, 33, 24, 0.78);
    --paper-hl: rgba(201, 169, 97, 0.32);
    --paper-ref: #8b6f3e;
    --paper-comment-line: rgba(196, 122, 106, 0.4);
    --paper-comment-ink: #c47a6a;
    --paper-comment-bg: rgba(196, 122, 106, 0.06);
    --paper-tool: #6b5a3e;
    --paper-footer-line: rgba(106, 90, 62, 0.25);
  }
  [data-paper-tone="cream"] {
    --paper-bg-1: #f5efe2; --paper-bg-2: #f5efe2;
    --paper-ink: #2d2820; --paper-meta: #6f6346;
    --paper-quote-line: rgba(180, 150, 90, 0.5);
    --paper-quote-ink: rgba(45, 40, 32, 0.78);
    --paper-hl: rgba(201, 169, 97, 0.3);
    --paper-ref: #8a6f42;
    --paper-comment-line: rgba(196, 122, 106, 0.4);
    --paper-comment-ink: #b87060;
    --paper-comment-bg: rgba(196, 122, 106, 0.06);
    --paper-tool: #7a684a;
    --paper-footer-line: rgba(106, 90, 62, 0.25);
  }
  [data-paper-tone="linen"] {
    --paper-bg-1: #ede8df; --paper-bg-2: #ede8df;
    --paper-ink: #2c2a26; --paper-meta: #6a6660;
    --paper-quote-line: rgba(150, 140, 120, 0.5);
    --paper-quote-ink: rgba(44, 42, 38, 0.78);
    --paper-hl: rgba(180, 160, 100, 0.32);
    --paper-ref: #7d6f55;
    --paper-comment-line: rgba(170, 110, 100, 0.4);
    --paper-comment-ink: #a86d5e;
    --paper-comment-bg: rgba(170, 110, 100, 0.06);
    --paper-tool: #7a766e;
    --paper-footer-line: rgba(100, 96, 90, 0.25);
  }
  [data-paper-tone="stone"] {
    --paper-bg-1: #e8e4dd; --paper-bg-2: #e8e4dd;
    --paper-ink: #2a2825; --paper-meta: #686460;
    --paper-quote-line: rgba(140, 130, 110, 0.55);
    --paper-quote-ink: rgba(42, 40, 37, 0.78);
    --paper-hl: rgba(160, 140, 100, 0.3);
    --paper-ref: #786f5c;
    --paper-comment-line: rgba(170, 110, 100, 0.4);
    --paper-comment-ink: #a06860;
    --paper-comment-bg: rgba(170, 110, 100, 0.06);
    --paper-tool: #76726e;
    --paper-footer-line: rgba(100, 96, 90, 0.25);
  }
  [data-paper-tone="mist"] {
    --paper-bg-1: #e6ebec; --paper-bg-2: #e6ebec;
    --paper-ink: #232a30; --paper-meta: #5a6670;
    --paper-quote-line: rgba(110, 130, 150, 0.55);
    --paper-quote-ink: rgba(35, 42, 48, 0.78);
    --paper-hl: rgba(140, 170, 200, 0.3);
    --paper-ref: #4a6a86;
    --paper-comment-line: rgba(170, 110, 100, 0.42);
    --paper-comment-ink: #a06860;
    --paper-comment-bg: rgba(170, 110, 100, 0.06);
    --paper-tool: #687480;
    --paper-footer-line: rgba(90, 100, 110, 0.25);
  }
  [data-paper-tone="sage"] {
    --paper-bg-1: #e7ecdb; --paper-bg-2: #e7ecdb;
    --paper-ink: #2b2f22; --paper-meta: #5e6647;
    --paper-quote-line: rgba(130, 150, 90, 0.55);
    --paper-quote-ink: rgba(43, 47, 34, 0.78);
    --paper-hl: rgba(180, 180, 90, 0.3);
    --paper-ref: #5a6a3a;
    --paper-comment-line: rgba(170, 110, 100, 0.42);
    --paper-comment-ink: #a86d5e;
    --paper-comment-bg: rgba(170, 110, 100, 0.06);
    --paper-tool: #6a7252;
    --paper-footer-line: rgba(90, 100, 70, 0.25);
  }
  [data-paper-tone="rose"] {
    --paper-bg-1: #f1e2d8; --paper-bg-2: #f1e2d8;
    --paper-ink: #2e221d; --paper-meta: #7a584c;
    --paper-quote-line: rgba(180, 130, 110, 0.55);
    --paper-quote-ink: rgba(46, 34, 29, 0.78);
    --paper-hl: rgba(220, 150, 120, 0.3);
    --paper-ref: #94614b;
    --paper-comment-line: rgba(200, 110, 100, 0.42);
    --paper-comment-ink: #b06058;
    --paper-comment-bg: rgba(200, 110, 100, 0.06);
    --paper-tool: #8a604e;
    --paper-footer-line: rgba(120, 90, 76, 0.25);
  }
  [data-paper-tone="ink"] {
    --paper-bg-1: #3a342b; --paper-bg-2: #3a342b;
    --paper-ink: #ece4cf; --paper-meta: #a89e87;
    --paper-quote-line: rgba(201, 169, 97, 0.55);
    --paper-quote-ink: rgba(216, 207, 184, 0.85);
    --paper-hl: rgba(201, 169, 97, 0.32);
    --paper-ref: #c9a961;
    --paper-comment-line: rgba(196, 122, 106, 0.5);
    --paper-comment-ink: #d18a7c;
    --paper-comment-bg: rgba(196, 122, 106, 0.08);
    --paper-tool: #9c9484;
    --paper-footer-line: rgba(140, 132, 116, 0.25);
  }
  :root[data-theme="night"] [data-paper-tone],
  [data-theme="night"] [data-paper-tone] {
    --paper-bg-1: #111827;
    --paper-bg-2: #111827;
    --paper-ink: #efe8d6;
    --paper-meta: #b8aa89;
    --paper-quote-line: rgba(217, 189, 115, 0.46);
    --paper-quote-ink: rgba(240, 234, 219, 0.84);
    --paper-hl: rgba(217, 189, 115, 0.24);
    --paper-ref: #d9bd73;
    --paper-comment-line: rgba(126, 164, 214, 0.42);
    --paper-comment-ink: #9dbce8;
    --paper-comment-bg: rgba(126, 164, 214, 0.08);
    --paper-tool: #d9bd73;
    --paper-footer-line: rgba(217, 189, 115, 0.18);
  }
  :root[data-theme="night"] [data-paper-tone="ink"],
  [data-theme="night"] [data-paper-tone="ink"] {
    --paper-bg-1: #0d1322;
    --paper-bg-2: #0d1322;
  }
  [data-theme="night"] #worship-modal[data-worship-kind="intercession"] .note-workspace-modal,
  [data-theme="night"] #worship-modal[data-worship-kind="intercession"] .worship-edit-shell,
  [data-theme="night"] #worship-modal[data-worship-kind="intercession"] .worship-page-area {
    background: var(--bg);
    color: var(--text);
  }
  [data-theme="night"] #worship-modal[data-worship-kind="intercession"] .sermon-header-card,
  [data-theme="night"] #worship-modal[data-worship-kind="intercession"] .note-page-toolbar {
    background: color-mix(in srgb, var(--paper-bg-1) 88%, var(--surface) 12%);
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
    color: var(--paper-ink);
  }
  [data-theme="night"] #worship-modal[data-worship-kind="intercession"] .worship-edit-head,
  [data-theme="night"] #worship-modal[data-worship-kind="intercession"] .source-url-input,
  [data-theme="night"] #worship-modal[data-worship-kind="intercession"] .ref-chips-section,
  [data-theme="night"] #worship-modal[data-worship-kind="intercession"] .yt-embed-section {
    background: color-mix(in srgb, var(--surface) 86%, var(--paper-bg-1) 14%);
    border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
    color: var(--text);
  }
  [data-theme="night"] #couple-modal .couple-shell,
  [data-theme="night"] #couple-modal .couple-tabs,
  [data-theme="night"] #cou-note-edit .cou-note-modal,
  [data-theme="night"] #cou-note-edit .cou-note-content {
    background: var(--bg);
    color: var(--text);
  }
  [data-theme="night"] #cou-note-edit .cou-note-modal .cou-engage,
  [data-theme="night"] #cou-note-edit .cou-note-preview,
  [data-theme="night"] #couple-modal .cou-prayer-row {
    background: color-mix(in srgb, var(--surface) 84%, var(--paper-bg-1) 16%);
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
    color: var(--text);
  }
  [data-theme="night"] #cou-note-edit .source-url-input,
  [data-theme="night"] #cou-note-edit .ref-chips-section,
  [data-theme="night"] #cou-note-edit .yt-embed-section {
    background: color-mix(in srgb, var(--surface) 86%, var(--paper-bg-1) 14%);
    border-color: color-mix(in srgb, var(--accent) 16%, var(--border));
    color: var(--text);
  }

  /* ================================
     Desk · Rail · Drawer · Page (v124 노트 모달 공통 컴포넌트)
     ================================ */

  /* 책상 — 단색 surface (v157: 그라데이션 제거) */
  .note-desk { background: var(--bg); }

  /* 좌측 슬림 rail — 아이콘 nav */
  .note-rail {
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 0; gap: 4px;
    width: 64px; flex-shrink: 0;
  }
  .note-rail .rail-brand {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    color: var(--accent); font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-style: italic; font-weight: 500;
    margin-bottom: 8px;
  }
  .note-rail .rail-btn {
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: var(--r-sm); background: transparent;
    border: 1px solid transparent;
    color: var(--text-faint); cursor: pointer;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
  }
  .note-rail .rail-btn svg { width: 18px; height: 18px; }
  .note-rail #rail-scrapbook svg { width: 20px; height: 20px; }
  .note-rail .rail-btn:hover { color: var(--text); background: var(--surface-2); }
  .note-rail .rail-btn.active {
    color: var(--accent);
    background: var(--surface-2);
    border-color: var(--accent-dim);
  }
  .note-rail .rail-spacer { flex: 1; }

  /* 서랍 — 좌측 컨텍스트 패널 (Obsidian 스타일 컴팩트) */
  .note-drawer {
    width: 232px; flex-shrink: 0;
    padding: 14px 12px 16px;
    display: flex; flex-direction: column; gap: 14px;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface);
  }
  .note-drawer .drawer-section { display: flex; flex-direction: column; gap: 6px; }
  .note-drawer .drawer-head {
    font-size: 0.66rem; color: var(--text-faint);
    letter-spacing: 0.14em; text-transform: uppercase;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 2px 2px;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
  }
  .note-drawer .drawer-head-btn {
    background: transparent; border: 0; color: var(--accent);
    font-family: 'Cormorant Garamond', serif; font-size: var(--text-lg);
    cursor: pointer; font-style: italic; padding: 0 6px;
    line-height: 1;
  }
  .note-drawer .drawer-spacer { flex: 1; min-height: 12px; }

  /* 날짜 nav 한 줄 */
  .drawer-date-strip {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 0;
  }
  .drawer-date-strip .date-arrow {
    width: 26px; height: 26px;
    border-radius: var(--r-xs); background: transparent;
    border: 1px solid transparent;
    color: var(--text-faint); cursor: pointer;
    display: grid; place-items: center;
    font-family: 'Cormorant Garamond', serif; font-size: 1.1rem; line-height: 1;
  }
  .drawer-date-strip .date-arrow:hover { color: var(--accent); background: var(--surface-2); }
  .drawer-date-strip .date-now {
    flex: 1;
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-md); color: var(--text); font-style: italic;
    letter-spacing: var(--ls-wide); padding-left: 4px;
    cursor: pointer;
  }
  .drawer-date-strip .date-now small {
    display: block; font-family: 'Inter', sans-serif;
    font-size: 0.62rem; color: var(--text-faint); letter-spacing: 0.12em;
    text-transform: uppercase; margin-top: 1px; font-style: normal;
  }
  .drawer-date-strip input[type="date"] {
    background: transparent; border: 0; color: var(--text);
    font-family: 'Inter', sans-serif; font-size: 0.78rem;
    color-scheme: dark; padding: 2px 4px;
  }

  /* 요약 한 문장 */
  .drawer-summary {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem; color: var(--text-dim); line-height: 1.6;
    padding: 9px 2px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .drawer-summary strong { color: var(--accent); font-weight: 500; }

  /* 노트 카드 (drawer 안) */
  .drawer-notes { display: flex; flex-direction: column; gap: 4px; }
  .drawer-note-card {
    padding: 9px 11px;
    border-radius: var(--r-sm); border: 1px solid transparent;
    background: var(--surface);
    cursor: pointer; transition: all 0.12s;
    position: relative;
  }
  .drawer-note-card:hover { background: var(--surface-2); }
  .drawer-note-card.active {
    background: var(--surface-2); border-color: var(--accent-dim);
    box-shadow: inset 2px 0 0 var(--accent);
  }
  .drawer-note-card-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.86rem; color: var(--text); line-height: var(--lh-tight);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .drawer-note-card-meta {
    display: flex; gap: 6px; align-items: center; margin-top: 3px;
    font-size: 0.66rem; color: var(--text-faint); font-family: 'Inter', sans-serif;
  }

  /* peripheral 영역 — 오늘 자취 */
  .drawer-peripheral {
    border-top: 1px solid var(--border);
    padding-top: 12px;
    display: flex; flex-direction: column; gap: 4px;
  }
  .drawer-peripheral-item {
    display: flex; align-items: baseline; gap: 8px;
    padding: 2px 0;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.76rem; color: var(--text-dim);
    cursor: pointer;
    transition: color 0.12s;
  }
  .drawer-peripheral-item:hover { color: var(--text); }
  .drawer-peripheral-item time {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem; color: var(--text-faint);
    letter-spacing: 0.05em; min-width: 36px;
  }
  .drawer-peripheral-item.read::before {
    content: ""; width: 4px; height: 4px; border-radius: 50%;
    background: var(--accent); opacity: 0.55; margin-right: -2px;
    flex-shrink: 0;
  }

  /* 배우자 위스퍼 */
  .drawer-spouse {
    border-top: 1px solid var(--border); padding-top: 12px;
    display: flex; align-items: center; gap: 9px;
  }
  .drawer-spouse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: radial-gradient(circle, #c47a6a 30%, rgba(196, 122, 106, 0.3) 100%);
    box-shadow: 0 0 8px rgba(196, 122, 106, 0.4);
    flex-shrink: 0;
  }
  .drawer-spouse-text {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-xs); color: var(--text-dim); line-height: 1.4;
  }
  .drawer-spouse-text strong { color: #c47a6a; font-weight: 500; }

  /* v128 — Obsidian 스타일 3-pane: page area = column wrapper + right pane */
  .note-page-area {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    display: flex; flex-direction: row;
    position: relative;
  }

  /* 페이지 column = toolbar (sticky top) + page-scroll + status bar (bottom) */
  .note-page-column {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    background: var(--paper-bg-1);
    color: var(--paper-ink);
  }
  .note-page-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
    display: flex; flex-direction: column;
    /* v1104 — 페이지가 가장자리까지 차도록 패딩 0 + 배경 통일 (종이 가장자리 프레임 제거) */
    padding: 0;
    background: var(--paper-bg-1);
  }

  /* 상단 sticky toolbar — 삼성노트 스타일, 도구 항상 보임 */
  /* v204 — paper-bg-1 로 통일 (두 톤 배경 제거, 구분은 border-bottom 1px) */
  /* v581 — 노트 편집 툴바 리디자인 (YouTube 앱 스타일) */
  .note-page-toolbar {
    flex: 0 0 auto;
    display: flex; align-items: center;
    gap: 4px;
    padding: 0 6px;
    background: color-mix(in srgb, var(--paper-bg-1) 92%, var(--surface) 8%);
    border-bottom: 1px solid var(--paper-footer-line);
    height: 36px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 1px 0 rgba(255,255,255,0.38), 0 10px 24px -22px rgba(58,46,32,0.32);
    position: relative;
    z-index: 2;
  }
  @media (hover: hover) and (pointer: fine) {
    .note-page-toolbar { height: 36px; gap: 6px; padding: 0 8px; }
  }
  .note-page-toolbar::-webkit-scrollbar { display: none; }
  .note-page-toolbar > * { align-self: center; }
  [data-theme="light"] .note-page-toolbar {
    background: color-mix(in srgb, var(--paper-bg-1) 92%, var(--surface) 8%);
    border-bottom-color: var(--paper-footer-line);
  }
  [data-theme="sepia"] .note-page-toolbar {
    background: color-mix(in srgb, var(--paper-bg-1) 92%, var(--surface) 8%);
    border-bottom-color: var(--paper-footer-line);
  }
  .note-page-toolbar .toolbar-spacer { flex: 1; }
  .note-save-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 86px;
    max-width: 164px;
    height: 24px;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, var(--paper-meta) 18%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper-bg-1) 82%, var(--surface) 18%);
    color: color-mix(in srgb, var(--paper-meta) 88%, var(--paper-ink) 12%);
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 0 0 auto;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.32);
  }
  .note-save-pill:empty {
    display: none;
  }
  .note-save-pill::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper-ref) 84%, var(--accent) 16%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--paper-ref) 12%, transparent);
    flex: 0 0 auto;
  }
  .note-save-pill[data-save-state="saving"]::before {
    animation: noteSavePulse 1.15s ease-in-out infinite;
    background: color-mix(in srgb, var(--accent) 72%, #b8893d 28%);
  }
  .note-save-pill[data-save-state="error"] {
    color: #a85645;
    border-color: color-mix(in srgb, #a85645 32%, transparent);
    background: color-mix(in srgb, #fff6f1 78%, var(--paper-bg-1) 22%);
  }
  .note-save-pill[data-save-state="error"]::before {
    background: #a85645;
    box-shadow: 0 0 0 3px color-mix(in srgb, #a85645 14%, transparent);
  }
  @keyframes noteSavePulse {
    0%, 100% { opacity: 0.48; transform: scale(0.88); }
    50% { opacity: 1; transform: scale(1); }
  }
  @media (max-width: 640px) {
    .note-save-pill {
      min-width: 0;
      max-width: 108px;
      height: 22px;
      padding: 0 7px;
      font-size: 0.64rem;
    }
  }
  .note-page-toolbar .media-toolbar.inline-on-page {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    border: 0;
    background: transparent;
    flex-wrap: nowrap;
  }
  /* v581 — 터치 타겟 40x40 (Apple HIG 44px 준수), 아이콘 20px */
  .note-page-toolbar .media-toolbar.inline-on-page .media-tool-btn,
  .note-page-toolbar .note-page-tool {
    width: 36px; height: 36px;
    border-radius: var(--r-md);
    background: transparent; border: 0;
    color: var(--text-dim);
    cursor: pointer;
    display: grid; place-items: center;
    padding: 0;
    opacity: 1;
    transition: background 0.12s, color 0.12s, transform 0.08s;
    font-size: 0;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
  }
  .note-page-toolbar .media-toolbar.inline-on-page .media-tool-btn:hover,
  .note-page-toolbar .note-page-tool:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--text);
  }
  .note-page-toolbar .note-danger-tool {
    color: var(--paper-comment-ink, #c47a6a);
  }
  .note-page-toolbar .note-danger-tool:hover,
  .note-page-toolbar .note-danger-tool:focus-visible {
    background: color-mix(in srgb, var(--paper-comment-ink, #c47a6a) 12%, transparent);
    color: var(--paper-comment-ink, #c47a6a);
    outline: none;
  }
  .note-page-toolbar .media-toolbar.inline-on-page .media-tool-btn:active,
  .note-page-toolbar .note-page-tool:active {
    transform: scale(0.9);
    background: color-mix(in srgb, var(--accent) 20%, transparent);
  }
  .note-page-toolbar .media-toolbar.inline-on-page .media-tool-btn svg,
  .note-page-toolbar .note-page-tool svg {
    width: 20px; height: 20px; stroke-width: 1.5;
  }
  @media (hover: hover) and (pointer: fine) {
    .note-page-toolbar .media-toolbar.inline-on-page .media-tool-btn,
    .note-page-toolbar .note-page-tool {
      width: 36px; height: 36px;
      border-radius: var(--r-md);
    }
    .note-page-toolbar .media-toolbar.inline-on-page .media-tool-btn svg,
    .note-page-toolbar .note-page-tool svg {
      width: 20px; height: 20px;
    }
    .tool-group { padding: 4px 6px; gap: 2px; }
    .tool-group-selection.is-active { max-width: 280px; padding: 4px 6px; }
  }
  .note-page-toolbar .toolbar-divider {
    flex: 0 0 auto;
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 4px;
    align-self: center;
  }
  /* v581 — 툴 그룹: 약간 더 큰 pill, 여유있는 spacing */
  .tool-group {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 5px;
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--text-faint) 5%, transparent);
    flex: 0 0 auto;
  }
  .tool-group + .tool-group { margin-left: 6px; }
  .tool-group-action { background: transparent; }
  /* 액션 그룹은 시각적으로 살짝 분리 — 위험 (삭제) 아이콘 강조 위해 */
  /* ════════════════════════════════════════════════════════════════
     v482 — 글로벌 UX 컴포넌트 라이브러리 (B 로딩 · C 빈 상태 · D 포커스)
     award-winning 패턴: spinner / skeleton / empty-state / focus-ring
     ════════════════════════════════════════════════════════════════ */

  /* B. 로딩 — circular spinner (재사용 가능) */
  .ui-spinner {
    display: inline-block;
    width: 28px; height: 28px;
    border: 2px solid color-mix(in srgb, var(--text-faint) 30%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ui-spin 0.8s linear infinite;
    flex-shrink: 0;
  }
  .ui-spinner.sm { width: 16px; height: 16px; border-width: 1.5px; }
  .ui-spinner.lg { width: 44px; height: 44px; border-width: 3px; }
  @keyframes ui-spin { to { transform: rotate(360deg); } }

  /* B. 로딩 — skeleton shimmer (텍스트 줄 자리 표시) */
  .ui-skeleton {
    display: block;
    background: linear-gradient(
      90deg,
      color-mix(in srgb, var(--text-faint) 10%, transparent) 0%,
      color-mix(in srgb, var(--text-faint) 18%, transparent) 50%,
      color-mix(in srgb, var(--text-faint) 10%, transparent) 100%
    );
    background-size: 200% 100%;
    animation: ui-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--r-sm);
    height: 12px;
    margin-bottom: 8px;
  }
  .ui-skeleton.title { height: 22px; width: 60%; margin-bottom: 12px; }
  .ui-skeleton.line  { height: 12px; width: 100%; }
  .ui-skeleton.line.short { width: 75%; }
  @keyframes ui-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ui-spinner, .ui-skeleton { animation: none; }
  }

  /* C. 빈 상태 — 통일 디자인 (아이콘 + 안내 + 선택적 액션) */
  .ui-empty {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-faint);
    min-height: 200px;
  }
  .ui-empty .ui-empty-icon {
    width: 48px; height: 48px;
    color: color-mix(in srgb, var(--text-faint) 60%, transparent);
    flex-shrink: 0;
  }
  .ui-empty .ui-empty-title {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-md);
    color: var(--text-dim);
    margin: 0;
  }
  .ui-empty .ui-empty-sub {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    color: var(--text-faint);
    margin: 0;
    max-width: 320px;
    line-height: var(--lh-normal);
  }
  .ui-empty .ui-empty-action {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--accent);
    color: var(--accent-fg);
    border: none;
    border-radius: var(--r-md);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-standard);
  }
  .ui-empty .ui-empty-action:hover { background: var(--accent-dim); }

  /* D. 키보드 focus — 글로벌 ring (outline:none 어디든 키보드 포커스는 살림) */
  :where(button, a, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }
  /* 이미 자체 focus-visible 정의된 곳 (.note-tone-dot 등) 은 specificity 로 우선 */

  /* C. 기존 .empty-message — CSS 정의 부재였음 (검정 텍스트). lib-empty 와 통일 */
  .empty-message {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-family: 'Noto Serif KR', serif;
    line-height: var(--lh-normal);
  }

  /* v481 — 모바일 터치 피드백 :active 글로벌 보강.
     :hover 266건 vs :active 36건 (1:7.4) — 모바일에서 "눌렀는지" 인지 약함.
     자주 누르는 인터랙티브 컴포넌트에 transform scale + 빠른 transition. */
  .modal-head-iconbtn:active,
  .head-link-btn:active,
  .note-page-tool:active,
  .media-tool-btn:active,
  .rail-btn:active,
  .mhead-icon-btn:active,
  .icon-btn:active,
  .nav-bar-btn:active,
  .worship-new-btn:active,
  .worship-synth-btn:active,
  .scrapbook-chip:active,
  .scrap-card:active,
  .worship-card:active,
  .testament-tabs button:active,
  .picker-chapter-action:active,
  .picker-current-action:active,
  .journal-action:active,
  .return-note-btn:active,
  .share-card-link:active,
  .share-btn:active,
  .cou-add-btn:active {
    transform: scale(0.94);
    transition: transform 80ms var(--ease-standard), background 80ms var(--ease-standard);
  }
  /* 이미 자체 :active transform 정의된 곳 (custom-confirm-btn 등) 은 selector 미포함 — 충돌 회피 */

  /* v479 — 커스텀 tooltip portal (body 끝에 fixed 단일 element).
     부모 (note-page-area/column) 가 overflow:hidden 이라 ::after 로는 잘려서 안 보임 → portal 패턴 */
  #hover-tooltip {
    position: fixed;
    z-index: 9999;
    background: var(--surface);
    color: var(--text);
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: var(--text-xs);
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%) translateY(-8px);
    transition: opacity 0.12s var(--ease-standard);
  }
  #hover-tooltip.visible { opacity: 1; }
  /* 터치 디바이스에선 비활성 */
  @media (hover: none) { #hover-tooltip { display: none !important; } }

  /* v477 — text 그룹은 contenteditable 본문에 selection 있을 때만 표시. Apple Notes 스타일 */
  .tool-group-selection {
    max-width: 0; padding: 0; margin: 0;
    overflow: hidden; opacity: 0;
    transition: max-width var(--duration-base) var(--ease-standard),
                opacity   var(--duration-fast) var(--ease-standard),
                padding   var(--duration-base) var(--ease-standard),
                margin    var(--duration-base) var(--ease-standard);
    pointer-events: none;
  }
  .tool-group-selection.is-active {
    max-width: 220px; padding: 2px 4px; margin-left: 6px;
    opacity: 1;
    pointer-events: auto;
  }
  .note-page-toolbar .note-page-tool span {
    font-size: 1rem;
  }
  .note-page-toolbar .note-tone-picker {
    padding: 3px 6px;
    background: color-mix(in srgb, var(--text-faint) 8%, transparent);
    border-radius: var(--r-xl);
    gap: 4px;
    flex: 0 0 auto;
    height: 22px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
  }
  .note-page-toolbar .note-tone-picker .note-tone-dot {
    width: 14px; height: 14px; flex: 0 0 auto;
  }
  .note-page-toolbar .toolbar-spacer { flex: 1 1 auto; min-width: 8px; }

  /* === ☰ 노트 선택자 (v154) === */
  .note-selector-trigger {
    appearance: none;
    height: 22px;
    padding: 0 0.5rem 0 0.4rem;
    background: transparent;
    border: 0;
    border-radius: var(--r-sm);
    color: var(--paper-meta, var(--text-dim));
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    flex: 0 0 auto;
    transition: background 0.12s, color 0.12s;
    box-sizing: border-box;
    line-height: 1;
  }
  .note-selector-trigger:hover {
    background: rgba(0,0,0,0.06);
    color: var(--paper-ink, var(--text));
  }
  [data-paper-tone="ink"] .note-selector-trigger:hover { background: rgba(255,255,255,0.08); }
  .note-selector-trigger svg { width: 14px; height: 14px; flex: 0 0 auto; }
  /* icon-only variant (v156) — 텍스트 없이 ☰ 정사각 */
  .note-selector-trigger-icon {
    width: 22px; height: 22px;
    padding: 0;
    justify-content: center;
  }
  .note-selector-trigger-icon svg { width: 15px; height: 15px; }

  .note-selector-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.42);
    z-index: 10050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s;
  }
  .note-selector-backdrop.open { opacity: 1; pointer-events: auto; }

  .note-selector-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(102%);
    width: min(460px, 100vw);
    max-height: 70vh;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    padding: 12px 14px max(20px, env(safe-area-inset-bottom));
    z-index: 10051;
    transition: transform 0.24s cubic-bezier(.32,.72,0,1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 -10px 32px rgba(0,0,0,0.22);
    box-sizing: border-box;
  }
  .note-selector-sheet.open { transform: translateX(-50%) translateY(0); }
  .note-selector-grab {
    width: 40px; height: 4px;
    background: var(--border);
    border-radius: 2px;
    margin: 0 auto 4px;
    flex: 0 0 auto;
  }
  .note-selector-head {
    display: flex; align-items: center; justify-content: space-between;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    padding: 0 4px;
    flex: 0 0 auto;
  }
  .note-selector-list {
    flex: 1 1 auto;
    overflow-y: auto;
    display: flex; flex-direction: column;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
  }
  .note-selector-empty {
    min-height: 96px;
    padding: 22px 14px;
    border: 1px dashed var(--border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--surface-2) 70%, transparent);
    color: var(--text-faint);
    font-size: 0.9rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  .note-selector-item {
    appearance: none;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-base);
    display: flex; align-items: center; gap: 10px;
    transition: background 0.12s, border-color 0.12s;
  }
  .note-selector-item:hover { background: var(--surface); border-color: var(--accent-dim); }
  .note-selector-item.active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
  }
  .note-selector-item-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
  }
  .note-selector-item.empty .note-selector-item-title {
    color: var(--text-faint);
    font-style: italic;
    font-weight: 400;
  }
  .note-selector-item-meta {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-family: 'Inter', sans-serif;
  }
  .note-selector-add {
    flex: 0 0 auto;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent);
    border-radius: 10px;
    color: var(--accent);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    font-size: 0.88rem;
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    transition: background 0.12s;
  }
  .note-selector-add:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
  .note-selector-add svg { width: 14px; height: 14px; }
  .note-selector-sheet .daily-template-strip {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding-top: 2px;
  }
  .daily-template-chip {
    appearance: none;
    min-width: 0;
    min-height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%);
    color: var(--text-dim);
    cursor: pointer;
    font: 500 0.76rem/1.2 'Inter', sans-serif;
    white-space: nowrap;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
  }
  .daily-template-chip:hover,
  .daily-template-chip:focus-visible {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
    color: var(--text);
    outline: none;
  }
  @media (max-width: 390px) {
    .note-selector-sheet .daily-template-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  /* === 데일리 toolbar 정리 (v155) — photo/draw/rec는 + 메뉴로 이전 === */
  .daily-page-area .media-toolbar .media-tool-btn[data-act="photo"],
  .daily-page-area .media-toolbar .media-tool-btn[data-act="draw"],
  .daily-page-area .media-toolbar .media-tool-btn[data-act="rec"] {
    display: none !important;
  }

  /* === Anchored popover menu (v155) — + 추가 / ⋮ 더보기 === */
  .note-anchored-menu {
    position: fixed;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 10px 32px rgba(0,0,0,0.22);
    padding: 6px;
    min-width: 200px;
    max-width: 280px;
    z-index: 150;
    display: none;
    flex-direction: column;
    gap: 1px;
  }
  .note-anchored-menu.open { display: flex; }
  .note-anchored-menu-item {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: 0;
    background: transparent;
    text-align: left;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    font-weight: 650;
    letter-spacing: 0;
    color: var(--text);
    border-radius: var(--r-md);
    cursor: pointer;
    width: 100%;
    transition: background 0.1s;
    line-height: 1.2;
  }
  .note-anchored-menu-item:hover,
  .note-anchored-menu-item:focus-visible {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
    outline: none;
  }
  .note-anchored-menu-item.danger { color: #c47a6a; }
  .note-anchored-menu-item.danger:hover { background: rgba(196,122,106,0.1); }
  .note-anchored-menu-item svg {
    width: 16px; height: 16px;
    flex: 0 0 auto;
    opacity: 0.8;
    stroke-width: 1.6;
  }
  .note-anchored-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 6px;
  }
  /* hidden stash — header-actions에서 button 보존만 */
  .header-actions-stash { display: none; }

  /* === 모달 헤더 아이콘 버튼 (v156, v408q modernize) — ⋮ + X 통일 === */
  .modal-head-iconbtn {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--text-dim) 16%, transparent);
    background: color-mix(in srgb, var(--surface-2, var(--surface)) 72%, transparent);
    color: var(--text-dim);
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
    transition: background 0.16s var(--ease-standard), border-color 0.16s var(--ease-standard), color 0.16s var(--ease-standard), transform 0.16s var(--ease-standard);
    flex: 0 0 auto;
  }
  .modal-head-iconbtn:hover,
  .modal-head-iconbtn:focus-visible {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 34%, transparent);
    transform: translateY(-1px);
    outline: none;
  }
  .modal-head-iconbtn:active {
    transform: scale(0.97);
  }
  .modal-head-iconbtn svg {
    width: 18px;
    height: 18px;
  }
  /* v474 — 통일 공유 버튼: 모든 노트 모달 동일 디자인 (accent 톤 hover) */
  .modal-head-iconbtn.note-share-btn:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }

  /* === Anchored popover polish (v156) === */
  .note-anchored-menu {
    /* fade-in animation */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.14s ease, transform 0.14s ease;
    padding: 5px;
    border-radius: 14px;
  }
  .note-anchored-menu.open {
    opacity: 1;
    transform: translateY(0);
  }
  .note-anchored-menu-item {
    padding: 10px 12px;
    font-size: 0.88rem;
    gap: 11px;
  }
  .note-anchored-menu-item svg {
    color: var(--accent-dim, var(--text-dim));
  }
  #notes-menu .note-anchored-menu-item svg {
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--accent);
    opacity: 0.9;
    box-sizing: border-box;
  }
  .note-anchored-menu-item.danger svg { color: #c47a6a; opacity: 0.85; }
  .note-anchored-menu-divider {
    margin: 5px 8px;
  }
  .note-toolbar-secondary {
    display: none !important;
  }

  /* 페이지 = Obsidian flat surface.
     v1104 — 데스크탑도 모바일처럼 완전 플랫: 테두리·라운드·그림자 제거 (노트 안 프레임 X) */
  .note-page {
    width: 100%;
    max-width: none;
    min-height: 100%;
    background: var(--paper-bg-1);
    color: var(--paper-ink);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 28px clamp(22px, 3.5vw, 48px) 24px;
    position: relative;
    font-family: 'Noto Serif KR', 'Cormorant Garamond', serif;
    /* v227 — 노트 페이지 톤 전환 빠릿하게 (320ms → 100ms) */
    transition: background 0.1s ease, color 0.1s ease;
    display: flex; flex-direction: column;
    flex: 1;
  }
  .note-page::before { content: none; }

  /* Status bar — v176: 사용자 요청으로 모든 노트에서 hidden (글자수 카운터 의미 X) */
  .note-status-bar {
    display: none !important;
  }
  [data-theme="light"] .note-status-bar { background: #fafaf5; border-top-color: #e0dccf; }
  [data-theme="sepia"] .note-status-bar { background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%); }
  .note-status-bar .status-item { display: inline-flex; align-items: center; gap: 4px; }
  .note-status-bar .status-spacer { flex: 1; }
  .note-status-bar .status-tone {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-dim);
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 0.78rem;
    text-transform: capitalize;
  }
  .note-status-bar .status-tone::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--paper-bg-1);
    border: 1px solid var(--border);
    display: inline-block;
  }

  /* 우측 sidebar — Obsidian 스타일 컴팩트 */
  .note-right-pane {
    width: 220px; flex-shrink: 0;
    border-left: 1px solid var(--border);
    background: var(--surface);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 10px 18px;
    display: flex; flex-direction: column; gap: 14px;
  }
  [data-theme="light"] .note-right-pane { background: #fafaf5; border-left-color: #e0dccf; }
  [data-theme="sepia"] .note-right-pane { background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%); }
  .note-right-section { display: flex; flex-direction: column; gap: 6px; }
  .note-right-head {
    font-size: 0.62rem; color: var(--text-faint);
    letter-spacing: 0.14em; text-transform: uppercase;
    font-family: 'Inter', sans-serif; font-weight: 500;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 2px 2px;
  }
  .note-right-head .count {
    font-size: 0.66rem; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    padding: 1px 7px; border-radius: var(--r-md);
    letter-spacing: 0; text-transform: none;
    font-weight: 500;
  }

  /* 페이지 상단 메타라인 */
  .note-page-meta {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem; color: var(--paper-meta);
    letter-spacing: 0.18em; text-transform: uppercase;
    margin-bottom: 10px;
    flex: 0 0 auto;
  }
  .note-page-meta .meta-dot {
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--paper-meta); opacity: 0.5; flex-shrink: 0;
  }
  .note-page-meta .meta-pill {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-style: italic;
    font-size: 0.86rem;
    text-transform: none;
    letter-spacing: var(--ls-wide);
    color: var(--paper-ink);
    opacity: 0.75;
  }

  /* 제목 */
  .note-page-title {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: 1.7rem; line-height: 1.25;
    color: var(--paper-ink);
    font-weight: 700;
    margin: 0 0 14px;
    letter-spacing: -0.005em;
    background: transparent; border: 0; outline: 0;
    width: 100%; resize: none;
    flex: 0 0 auto;
  }
  .note-page-title::placeholder { color: var(--paper-meta); opacity: 0.65; }
  .note-page-title-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 0.96rem;
    color: var(--paper-meta);
    margin-bottom: 18px;
    display: block;
  }

  /* 본문 — 페이지 안에서 flex-grow + 폰트·크기 variable (노트별 적용) */
  .note-page {
    --note-body-font: 'Noto Serif KR', 'Cormorant Garamond', serif;
    --note-body-size: 1.02rem;
    --note-body-lh: 1.95;
  }
  .note-page[data-note-font="noto-serif-kr"]   { --note-body-font: 'Noto Serif KR', 'Cormorant Garamond', serif; }
  .note-page[data-note-font="nanum-myeongjo"]  { --note-body-font: 'Nanum Myeongjo', 'EB Garamond', serif; }
  .note-page[data-note-font="gowun-batang"]    { --note-body-font: 'Gowun Batang', 'Cormorant Garamond', serif; }
  .note-page[data-note-font="pretendard"]      { --note-body-font: 'Pretendard', 'Inter', system-ui, sans-serif; }
  .note-page[data-note-font="gowun-dodum"]     { --note-body-font: 'Gowun Dodum', 'Inter', sans-serif; }

  .note-page[data-note-fontsize="s"]   { --note-body-size: 0.92rem; --note-body-lh: 1.85; }
  .note-page[data-note-fontsize="m"]   { --note-body-size: 1.02rem; --note-body-lh: 1.95; }
  .note-page[data-note-fontsize="l"]   { --note-body-size: 1.14rem; --note-body-lh: 2.00; }
  .note-page[data-note-fontsize="xl"]  { --note-body-size: 1.28rem; --note-body-lh: 2.05; }
  .note-page[data-note-fontsize="xxl"] { --note-body-size: 1.45rem; --note-body-lh: 2.1; }

  .note-page-body {
    font-family: var(--note-body-font);
    font-size: var(--note-body-size);
    line-height: var(--note-body-lh);
    color: var(--paper-ink);
    font-weight: 400;
    letter-spacing: -0.002em;
    background: transparent; border: 0; outline: 0;
    width: 100%; resize: none;
    flex: 1 1 auto;
    min-height: 60vh;
    padding: 0;
    caret-color: var(--accent);
  }
  /* 제목도 폰트 자동 매칭 (sans 계열이면 sans, serif면 serif) */
  .note-page[data-note-font="pretendard"] .note-page-title,
  .note-page[data-note-font="gowun-dodum"] .note-page-title {
    font-family: var(--note-body-font);
    font-weight: 600;
  }
  .note-page-body::placeholder {
    color: var(--paper-meta); opacity: 0.45;
    font-style: italic;
  }

  /* 본문 안 인용 quote (마크다운 미리보기·렌더링용) */
  .note-page-quote {
    display: block;
    padding: 4px 0 4px 16px;
    margin: 0.8em 0 1em -4px;
    border-left: 2px solid var(--paper-quote-line);
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-style: italic;
    color: var(--paper-quote-ink);
    font-size: 0.98em;
    line-height: var(--lh-verse);
  }
  .note-page-quote .qref {
    display: block; margin-top: 5px;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    font-size: 0.68rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--paper-meta);
  }

  /* 본문 안 형광·참조 (마크업 렌더된 결과) */
  .note-page-hl {
    background: linear-gradient(180deg, transparent 60%, var(--paper-hl) 60%);
    padding: 0 2px;
  }
  .note-page-ref {
    color: var(--paper-ref);
    font-weight: 500;
    border-bottom: 1px dotted color-mix(in srgb, var(--paper-ref) 50%, transparent);
    cursor: pointer;
    text-decoration: none;
  }

  /* 배우자 댓글 inline — 본문 흐름 안 위스퍼 */
  .note-page-spouse {
    margin: 18px 0;
    padding: 14px 16px;
    background: var(--paper-comment-bg);
    border-left: 2px solid var(--paper-comment-line);
    border-radius: 0 4px 4px 0;
    font-family: 'Noto Serif KR', serif;
  }
  .note-page-spouse .author {
    font-size: var(--text-xs);
    color: var(--paper-comment-ink);
    letter-spacing: 0.1em;
    font-family: 'Inter', sans-serif;
    margin-bottom: 4px;
  }
  .note-page-spouse .text {
    font-size: 0.94rem; color: var(--paper-ink);
    font-style: italic; line-height: var(--lh-loose); opacity: 0.88;
  }

  /* 페이지 푸터 — 거의 invisible chrome, 페이지 하단 sticky */
  .note-page-footer {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--paper-meta) 18%, transparent);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    font-family: 'Inter', sans-serif;
    flex: 0 0 auto;
  }
  .note-page-footer .footer-left {
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap;
    font-size: var(--text-xs); color: var(--paper-meta);
    min-width: 0; flex: 1 1 auto;
  }
  .note-page-footer .footer-tag {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic; font-size: 0.88rem;
    color: var(--paper-ref);
    cursor: pointer;
  }
  .note-page-footer .footer-status {
    color: var(--paper-meta); font-size: var(--text-xs);
    opacity: 0.7;
  }
  .note-page-footer .footer-right {
    display: flex; gap: 8px; align-items: center;
    flex-wrap: nowrap;
  }
  .note-page-tool {
    background: transparent; border: 0;
    color: var(--paper-tool); cursor: pointer;
    width: 26px; height: 26px; border-radius: 5px;
    display: grid; place-items: center; opacity: 0.55;
    transition: opacity 0.12s, background 0.12s;
    padding: 0;
  }
  .note-page-tool:hover {
    opacity: 1;
    background: color-mix(in srgb, var(--paper-tool) 12%, transparent);
  }
  .note-page-tool svg { width: 14px; height: 14px; stroke-width: 1.5; }

  /* Tone Picker — 8개 dot */
  .note-tone-picker {
    display: flex; gap: 5px; align-items: center;
    padding: 4px 6px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--paper-meta) 10%, transparent);
  }
  .note-tone-dot {
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--paper-meta) 25%, transparent);
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
    padding: 0;
  }
  .note-tone-dot:hover { transform: scale(1.15); }
  .note-tone-dot.active {
    box-shadow: 0 0 0 2px var(--paper-ref);
    transform: scale(1.1);
  }
  .note-tone-dot[data-tone="vellum"] { background: #f3e9d3; }
  .note-tone-dot[data-tone="cream"]  { background: #f5efe2; }
  .note-tone-dot[data-tone="linen"]  { background: #ede8df; }
  .note-tone-dot[data-tone="stone"]  { background: #e8e4dd; }
  .note-tone-dot[data-tone="mist"]   { background: #e6ebec; }
  .note-tone-dot[data-tone="sage"]   { background: #e7ecdb; }
  .note-tone-dot[data-tone="rose"]   { background: #f1e2d8; }
  .note-tone-dot[data-tone="ink"]    { background: #3a342b; border-color: rgba(201,169,97,0.3); }

  /* 책상 위 인용 카드 (페이지 옆에 비스듬히) */
  /* v128 — note-side-cards는 이제 right-pane 안의 flat 리스트 (tilt·shadow 제거) */
  .note-side-cards {
    display: flex; flex-direction: column; gap: 6px;
    width: 100%;
  }
  .note-side-card {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 8px 4px 10px;
    box-shadow: none;
    font-family: 'Noto Serif KR', serif;
    cursor: pointer;
    transition: background 0.12s;
  }
  .note-side-card:last-child { border-bottom: 0; }
  .note-side-card:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
  .note-side-card .side-card-ref {
    font-size: 0.66rem; color: var(--accent);
    letter-spacing: 0.12em; text-transform: uppercase;
    font-family: 'Inter', sans-serif; font-weight: 500;
  }
  .note-side-card .side-card-en {
    font-style: italic; font-size: 0.78rem;
    color: var(--text); line-height: var(--lh-normal);
    margin-top: 4px;
    font-family: 'Cormorant Garamond', serif;
  }
  .note-side-card .side-card-ko {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.76rem;
    color: var(--text-dim); line-height: 1.55;
    margin-top: 4px; font-weight: 300;
  }
  .note-side-card .side-card-remove {
    position: absolute; top: 4px; right: 6px;
    width: 18px; height: 18px;
    background: transparent; border: 0;
    color: var(--text-faint); opacity: 0;
    transition: opacity 0.12s, color 0.12s;
    cursor: pointer; font-size: var(--text-base); line-height: 1;
    border-radius: 50%;
  }
  .note-side-card { position: relative; }
  .note-side-card:hover .side-card-remove { opacity: 0.7; }
  .note-side-card .side-card-remove:hover { color: var(--text); opacity: 1; }

  /* ─────────────────────────────────────────
     모바일 — drawer = 단일 row strip, 페이지 = 화면 80%+
     v126 피드백: drawer가 여전히 너무 큼 → 진짜 한 줄로
     ───────────────────────────────────────── */
  @media (max-width: 720px) {
    .note-rail { display: none; }

    /* base note-drawer 모바일 — 컴팩트 vertical (daily가 row로 override) */
    .note-drawer {
      width: 100%;
      flex: 0 0 auto;
      max-height: none;
      padding: 8px 10px;
      gap: 8px;
      border-right: 0;
      border-bottom: 1px solid var(--border);
      overflow: visible;
    }
    .note-drawer .drawer-spacer,
    .note-drawer .drawer-peripheral,
    .note-drawer .drawer-spouse,
    .note-drawer .drawer-summary-wrap,
    .note-drawer .daily-date-label { display: none; }

    /* ─── daily-drawer만 row-strip 으로 ─── */
    .daily-drawer {
      flex-direction: row !important;
      align-items: center;
      padding: 6px 10px !important;
      gap: 6px !important;
    }
    .daily-drawer .drawer-section:first-child {
      display: flex !important; flex-direction: row; align-items: center;
      gap: 4px; flex: 0 0 auto;
    }
    /* drawer-date-actions: 라벨만 숨기고 아이콘은 노출 */
    .daily-drawer .drawer-date-actions { gap: 4px; margin-top: 0; margin-left: 4px; }
    .daily-drawer .drawer-date-actions .daily-date-label { display: none; }
    .daily-drawer .drawer-date-iconbtn { width: 26px; height: 26px; }
    .daily-drawer .drawer-date-iconbtn svg { width: 14px; height: 14px; }
    .daily-drawer .drawer-date-strip { gap: 2px; padding: 0; }
    .daily-drawer .drawer-date-strip .date-arrow { width: 24px; height: 24px; }
    .daily-drawer .daily-date-input {
      padding: 3px 6px; font-size: 0.76rem; max-width: 124px;
    }
    .daily-drawer .drawer-section:nth-child(3) {
      flex: 1 1 auto; min-width: 0;
      flex-direction: row !important; align-items: center; gap: 6px;
      margin-left: 4px;
    }
    .daily-drawer .drawer-section:nth-child(3) > .drawer-head { display: none; }
    .daily-drawer .drawer-notes,
    .daily-drawer .daily-entry-list {
      flex-direction: row !important;
      overflow-x: auto;
      overflow-y: hidden;
      max-height: none;
      gap: 5px;
      flex: 1 1 auto;
      min-width: 0;
      padding: 2px 0;
    }
    .daily-drawer .daily-entry-card {
      flex: 0 0 auto;
      max-width: min(46vw, 180px);
      padding: 4px 9px;
      box-shadow: none;
    }
    .daily-drawer .daily-entry-card-title {
      font-size: var(--text-xs);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 1;
    }
    /* row-strip 가로 스크롤 인디케이터 — 끝 fade */
    .daily-drawer .daily-entry-list {
      mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 14px), transparent 100%);
    }
    .daily-drawer .daily-entry-card-meta { display: none; }
    .daily-drawer #daily-new-entry {
      font-size: var(--text-lg);
      padding: 0 8px;
      flex-shrink: 0;
      color: var(--accent);
    }
    .daily-drawer .drawer-section:nth-child(4),
    .daily-drawer .drawer-section:nth-child(5) { display: none; }

    /* 페이지 area = 남은 공간 거의 전부 */
    .note-page-area { padding: 0 8px 14px; flex: 1; min-height: 0; }
    .note-page-scroll {
      padding: 0;
      background: var(--paper-bg-1);
    }
    .note-page {
      padding: 18px 16px 14px;
      max-width: 100%;
      min-height: 100%;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .note-page-title { font-size: var(--text-xl); margin-bottom: 8px; }
    .note-page-body { font-size: 0.96rem; line-height: var(--lh-verse); min-height: 60vh; }
    .note-page-meta { font-size: 0.6rem; gap: 6px; margin-bottom: 8px; }
    .note-page-footer { margin-top: 10px; padding-top: 8px; gap: 8px; }
    .note-page-footer .footer-tag { font-size: var(--text-sm); }
    .note-page-footer .footer-status { font-size: 0.66rem; }
    .note-tone-picker { padding: 3px 4px; gap: 3px; }
    .note-tone-dot { width: 16px; height: 16px; }
    /* v242 — 모바일 toolbar 손가락 친화 크기 (28→40px, SVG 13→18px, height ↑) */
    .note-page-toolbar {
      height: 36px !important;
      gap: 3px !important;
      padding: 0 6px !important;
      scroll-padding-inline: 6px 112px;
    }
    .note-page-toolbar .note-page-tool,
    .note-page-toolbar .media-toolbar.inline-on-page .media-tool-btn {
      width: 36px !important; height: 36px !important;
      border-radius: var(--r-md) !important;
    }
    .note-page-toolbar .note-page-tool svg,
    .note-page-toolbar .media-toolbar.inline-on-page .media-tool-btn svg {
      width: 18px !important; height: 18px !important;
      stroke-width: 1.65 !important;
    }
    .note-page-toolbar .toolbar-divider {
      height: 20px !important;
      margin: 0 2px !important;
    }
    .note-page-toolbar .media-toolbar.inline-on-page {
      gap: 2px !important;
      min-width: max-content;
    }
    .note-page-toolbar .toolbar-spacer {
      flex: 0 0 6px !important;
      min-width: 6px;
    }
    .note-page-toolbar .tool-group,
    .note-page-toolbar .tool-group-selection.is-active {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
      flex: 0 0 auto;
    }
    .note-page-toolbar .tool-group + .tool-group {
      margin-left: 2px !important;
    }
    .note-page-toolbar .tool-group-action {
      margin-right: 80px;
    }
    .note-page-toolbar .note-tone-picker {
      display: none !important;
    }
    .note-page-toolbar .note-save-pill {
      position: sticky;
      right: 6px;
      z-index: 6;
      min-width: 72px;
      max-width: 72px;
      background: color-mix(in srgb, var(--paper-bg-1) 92%, var(--surface) 8%);
      backdrop-filter: blur(8px);
      font-size: 0;
      box-shadow:
        -10px 0 14px color-mix(in srgb, var(--paper-bg-1) 82%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.32);
    }
    .note-page-toolbar .note-save-pill::after {
      content: "저장됨";
      font-size: 0.64rem;
    }
    .note-page-toolbar .note-save-pill[data-save-state="saving"]::after {
      content: "저장 중";
    }
    .note-page-toolbar .note-save-pill[data-save-state="error"]::after {
      content: "실패";
    }
    /* 모달 헤더 액션도 컴팩트 */
    .note-workspace-modal .modal-head {
      padding: 8px 12px;
      gap: 4px;
    }
    .note-workspace-modal .modal-head h2 { font-size: var(--text-base); }
    .modal-head-actions { gap: 2px !important; flex-wrap: nowrap; }
    .modal-head-actions .head-link-btn {
      padding: 4px 7px; font-size: 0.66rem;
    }
    .modal-head-actions .head-link-btn svg { display: none; }

    /* 모바일: 우측 sidebar는 collapsible — 기본 hide, 페이지 풀폭 */
    .note-right-pane {
      display: none;
    }
    /* 페이지 area는 column (page-column만) — right pane 사라지니까 row→column 의미 동일 */
    .note-page-area { flex-direction: row; }

    /* 모바일 예배 — 메타 필드 한 줄 grid 로 컴팩트화 */
    .worship-redesign-v124 .note-drawer .worship-meta {
      display: grid !important;
      grid-template-columns: 1fr 1fr; gap: 4px;
    }
    .worship-redesign-v124 .note-drawer .worship-meta .w-title {
      grid-column: 1 / -1;
    }
    .worship-redesign-v124 .note-drawer .worship-meta .w-maintext-wrap {
      grid-column: 1 / -1;
    }
    .worship-redesign-v124 .note-drawer .worship-meta .meta-field {
      padding: 5px 8px !important; font-size: 0.78rem !important;
    }
  }

  /* ================================
     데일리·예배 redesign v124 — 신규 레이아웃 + 기존 요소 override
     ================================ */

  /* Modal head 액션 줄 (배우자에게·공유·복사·삭제) */
  .note-workspace-modal .modal-head-actions {
    display: flex; gap: 4px; align-items: center;
    flex: 1; justify-content: flex-end;
    margin-right: 8px;
    flex-wrap: wrap;
  }
  .head-link-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    padding: 5px 10px;
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
  }
  .head-link-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
  .head-link-btn:hover {
    color: var(--text);
    border-color: var(--accent-dim);
    background: var(--surface);
  }
  .head-link-btn.danger {
    color: rgba(196,122,106,0.85);
    border-color: rgba(196,122,106,0.25);
  }
  .head-link-btn.danger:hover {
    color: #c47a6a;
    background: rgba(196,122,106,0.08);
    border-color: rgba(196,122,106,0.5);
  }

  /* 모달 shell — rail + drawer + page-area 3-column grid */
  .daily-redesign-v124 .daily-shell,
  .worship-redesign-v124 .worship-shell {
    display: flex;
    flex: 1; min-height: 0;
    overflow: hidden;
    background: var(--paper-bg-1);
  }
  /* note-desk 배경 */
  .note-desk { background: var(--paper-bg-1); }
  .note-desk .note-page-area { background: var(--paper-bg-1); }

  /* === Drawer 내부 컴포넌트 override (기존 .daily-* 클래스가 drawer 안일 때) === */

  /* daily-overview chips — drawer 안에서 한 줄에 자연스럽게 */
  .daily-redesign-v124 .drawer-summary-wrap {
    padding: 8px 2px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .daily-redesign-v124 .daily-overview {
    display: flex; flex-wrap: wrap; gap: 4px;
    margin: 0;
  }
  .daily-redesign-v124 .daily-overview:empty { display: none; }
  .daily-redesign-v124 .daily-overview-chip {
    padding: 3px 7px;
    font-size: 0.68rem;
    background: transparent;
    border: 1px solid transparent;
  }

  /* daily-entry-list — drawer 안에선 세로 stack, 가로 스크롤 X */
  .daily-redesign-v124 .daily-entry-list {
    display: flex; flex-direction: column; gap: 4px;
    overflow-x: visible; flex: none;
    padding: 0;
  }
  .daily-redesign-v124 .daily-entry-card {
    min-width: 0; max-width: none;
    width: 100%;
    padding: 9px 11px;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    background: var(--surface);
    position: relative;
  }
  .daily-redesign-v124 .daily-entry-card:hover {
    background: var(--surface-2);
    border-color: transparent;
  }
  .daily-redesign-v124 .daily-entry-card.active {
    background: var(--surface-2);
    border-color: var(--accent-dim);
    box-shadow: inset 2px 0 0 var(--accent);
  }
  .daily-redesign-v124 .daily-entry-card-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.86rem;
  }
  .daily-redesign-v124 .daily-entry-card-meta {
    font-size: 0.66rem;
    margin-top: 3px;
  }

  /* daily-template-strip — drawer 안에서 wrap, 작게 */
  .daily-redesign-v124 .daily-template-strip {
    gap: 4px;
  }
  .daily-redesign-v124 .daily-template-btn {
    padding: 4px 10px;
    font-size: var(--text-xs);
    border-radius: var(--r-full);
  }

  /* 활동 로그 — peripheral 안에서 컴팩트 */
  .daily-redesign-v124 .drawer-peripheral .daily-activity-list {
    padding: 0; max-height: none; overflow: visible;
    display: flex; flex-direction: column; gap: 2px;
    background: transparent; border: 0;
  }
  .daily-redesign-v124 .daily-act-item {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 2px;
    border: 0; background: transparent;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.76rem; color: var(--text-dim);
    cursor: pointer;
    transition: color 0.12s;
    border-radius: var(--r-xs);
  }
  .daily-redesign-v124 .daily-act-item:hover,
  .daily-redesign-v124 .daily-act-item:focus-visible { color: var(--text); background: var(--surface); }
  .daily-redesign-v124 .daily-act-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 2px;
  }
  .daily-redesign-v124 .daily-act-item .act-time {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem; color: var(--text-faint);
    letter-spacing: 0.05em; min-width: 38px; flex-shrink: 0;
  }
  .daily-redesign-v124 .daily-act-item .act-icon { color: var(--accent); opacity: 0.6; }
  .daily-redesign-v124 .daily-act-item .act-icon svg { width: 12px; height: 12px; }
  .daily-redesign-v124 .daily-act-item .act-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
  }
  .daily-redesign-v124 .daily-act-empty {
    font-size: var(--text-xs); color: var(--text-faint);
    padding: 4px 2px; font-style: italic;
  }

  /* 읽기 계획 — peripheral 안에서 컴팩트 */
  .daily-redesign-v124 .drawer-peripheral .daily-plan,
  .daily-redesign-v124 .drawer-peripheral .daily-plan-list {
    background: transparent; border: 0; padding: 0; max-height: none;
  }
  .daily-redesign-v124 .daily-plan-list { display: flex; flex-direction: column; gap: 3px; }

  /* v128 — 인용 절 (담은 절) — note-side-cards 안 flat list */
  .note-side-cards .daily-linked-list {
    display: flex; flex-direction: column; gap: 0;
    padding: 0;
  }
  .note-side-cards .daily-linked-item {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 9px 4px 11px;
    box-shadow: none;
    font-family: 'Noto Serif KR', serif;
    cursor: pointer;
    position: relative;
    transition: background 0.12s;
  }
  .note-side-cards .daily-linked-item:last-child { border-bottom: 0; }
  .note-side-cards .daily-linked-item:hover {
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }
  .note-side-cards .daily-linked-item .ref {
    display: block;
    font-size: 0.66rem; color: var(--accent);
    letter-spacing: 0.12em; text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
  }
  .note-side-cards .daily-linked-item .preview {
    display: block; margin-top: 4px;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.76rem; color: var(--text-dim); line-height: 1.55;
    font-weight: 300;
  }
  .note-side-cards .daily-linked-item .rm {
    position: absolute; top: 6px; right: 4px;
    width: 18px; height: 18px;
    background: transparent; border: 0;
    color: var(--text-faint); opacity: 0;
    transition: opacity 0.12s, color 0.12s;
    cursor: pointer; line-height: 1;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
  }
  .note-side-cards .daily-linked-item .rm svg {
    width: 12px; height: 12px; stroke-width: 1.8;
  }
  .note-side-cards .daily-linked-item:hover .rm { opacity: 0.7; }
  .note-side-cards .daily-linked-item .rm:hover { color: var(--text); opacity: 1; }
  .note-side-cards .daily-linked-empty {
    font-size: var(--text-xs); color: var(--text-faint);
    padding: 8px 4px;
    font-style: italic;
  }

  /* 페이지 안 media-toolbar inline (사진/그리기/녹음/형광/U) */
  .note-page .media-toolbar.inline-on-page {
    display: flex; gap: 2px; padding: 0; border: 0; background: transparent;
    flex-wrap: nowrap;
  }
  .note-page .media-toolbar.inline-on-page .media-tool-btn {
    /* 기존 .media-tool-btn 룰 무력화하고 .note-page-tool 룰 활용 */
    padding: 0; background: transparent; border: 0; color: var(--paper-tool);
    width: 28px; height: 28px; border-radius: 5px;
    display: grid; place-items: center; opacity: 0.55;
    transition: opacity 0.12s, background 0.12s;
    font-size: 0;  /* 기존 text 라벨 숨김 (만약 들어있으면) */
  }
  .note-page .media-toolbar.inline-on-page .media-tool-btn:hover {
    opacity: 1; background: color-mix(in srgb, var(--paper-tool) 12%, transparent);
  }
  .note-page .media-toolbar.inline-on-page .media-tool-btn svg {
    width: 15px; height: 15px; font-size: initial;
  }
  .note-page .media-toolbar.inline-on-page .note-format-btn {
    font-size: var(--text-base);
  }
  .note-page .media-toolbar.inline-on-page .note-format-btn span {
    font-size: var(--text-base);
  }

  /* tag chips inside footer — paper 톤에 맞춤 */
  .note-page-footer .worship-tag-chips {
    padding: 0;
    display: inline-flex; gap: 6px; flex-wrap: wrap;
    align-items: center;
  }
  .note-page-footer .worship-tag-chips:empty { display: none; }
  /* page-tag-chip — 클릭 가능, hover 강조 */
  .note-page-footer .page-tag-chip {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding: 3px 9px;
    background: color-mix(in srgb, var(--paper-ref) 12%, transparent);
    color: var(--paper-ref);
    border: 1px solid color-mix(in srgb, var(--paper-ref) 25%, transparent);
    border-radius: var(--r-full);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1.3;
    transition: all 0.12s;
  }
  .note-page-footer .page-tag-chip:hover {
    background: color-mix(in srgb, var(--paper-ref) 22%, transparent);
    border-color: color-mix(in srgb, var(--paper-ref) 50%, transparent);
    transform: translateY(-1px);
  }
  .note-page-footer .page-tag-chip:active { transform: translateY(0); }

  /* attach-gallery on page — paper 위에서 자연스럽게 */
  .note-page .attach-gallery:empty { display: none; }
  .note-page .attach-gallery {
    margin-top: 18px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px;
    background: transparent; border: 0;
  }

  /* worship-preview-toggle on page */
  .note-page .worship-preview-toggle {
    margin-top: 18px;
    border-top: 1px dashed var(--paper-footer-line);
    padding-top: 12px;
  }
  .note-page .worship-preview-toggle > summary {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--paper-meta);
    cursor: pointer;
    list-style: none;
  }
  .note-page .worship-preview-toggle > summary::-webkit-details-marker { display: none; }
  .note-page .worship-preview-toggle > summary::before { content: "▶ "; opacity: 0.5; }
  .note-page .worship-preview-toggle[open] > summary::before { content: "▼ "; }
  .note-page .worship-preview {
    margin-top: 10px;
    color: var(--paper-ink);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base); line-height: var(--lh-verse);
  }

  /* 모바일 데일리 shell — column flow (drawer 컴팩트화는 위 .note-drawer 블록에서) */
  @media (max-width: 720px) {
    .daily-redesign-v124 .daily-shell {
      flex-direction: column;
      overflow: hidden;
    }
  }

  /* ================================
     예배 모달 redesign v124 — 편집 pane 전용 overrides
     ================================ */

  /* 기존 #worship-edit-pane grid 무력화 (column 2 grid → flex column) */
  .worship-redesign-v124 #worship-edit-pane:not([hidden]) {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    background: var(--paper-bg-1);
  }

  /* 예배·함께 노트 공통 편집 헤더 (← 목록 + 저장 상태)
     v504c — .cou-note-modal 도 같은 룰 적용해 worship 과 시각 통일 */
  .worship-redesign-v124 .worship-edit-head,
  .cou-note-modal .worship-edit-head {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 4px 10px;
    min-height: 36px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: sticky; top: 0; z-index: 8;
  }
  .worship-redesign-v124 .worship-save-status:not(.note-save-pill),
  .cou-note-modal .worship-save-status:not(.note-save-pill) {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs); color: var(--text-faint);
    letter-spacing: 0.05em;
  }

  /* shell 그리드 */
  .worship-redesign-v124 .worship-shell {
    flex: 1; min-height: 0;
    display: flex;
    overflow: hidden;
  }

  /* drawer 안 메타 필드 — 단정한 폼 */
  .worship-redesign-v124 .worship-meta {
    display: flex; flex-direction: column; gap: 6px;
  }
  .worship-redesign-v124 .worship-meta .meta-field {
    width: 100%;
    padding: 7px 9px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 5px;
    color: var(--text);
    font-family: 'Noto Serif KR', sans-serif;
    font-size: var(--text-sm);
    color-scheme: dark;
    transition: border-color 0.12s;
  }
  .worship-redesign-v124 .worship-meta .meta-field:focus {
    border-color: var(--accent-dim);
    outline: 0;
  }
  .worship-redesign-v124 .worship-meta .w-title {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: 1rem; font-weight: 500;
    color: var(--text);
  }
  .worship-redesign-v124 .worship-meta .w-category {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%238a8576' fill='none' stroke-width='1.4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 9px center;
    padding-right: 24px;
  }

  /* AI find panel — page 안 */
  .worship-redesign-v124 .note-page .ai-find-panel {
    margin-top: 14px;
    background: rgba(201,169,97,0.08);
    border: 1px solid var(--paper-quote-line);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    color: var(--paper-ink);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
  }

  /* worship body wrap (mention popup 위치 유지) */
  .worship-redesign-v124 .note-page .w-body-wrap { position: relative; }

  /* page-meta 빈 요소 깔끔히 처리 */
  .note-page-meta span:empty { display: none; }

  /* worship-drawer-mhead row — 데스크탑에선 hide, 모바일에서만 보임 */
  .worship-drawer-mhead-row,
  .worship-drawer-mhead { display: none; }

  /* toolbar 작은 구분선 */
  .toolbar-divider {
    width: 1px; height: 18px;
    background: color-mix(in srgb, var(--text-faint) 35%, transparent);
    margin: 0 4px;
    flex-shrink: 0;
  }

  /* 폰트 popover */
  .note-font-popover {
    position: fixed; z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12);
    padding: 12px;
    min-width: 240px; max-width: 280px;
    display: flex; flex-direction: column; gap: 12px;
  }
  [data-theme="light"] .note-font-popover { background: #fff; border-color: #e0dccf; }
  .note-font-popover[hidden] { display: none; }
  .note-font-popover-section { display: flex; flex-direction: column; gap: 6px; }
  .note-font-popover-head {
    font-size: 0.62rem; color: var(--text-faint);
    letter-spacing: 0.14em; text-transform: uppercase;
    font-family: 'Inter', sans-serif; font-weight: 500;
    padding: 0 2px;
  }
  .note-font-list { display: flex; flex-direction: column; gap: 2px; }
  .note-font-item {
    text-align: left;
    padding: 7px 10px;
    border: 0; background: transparent;
    color: var(--text);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 0.94rem;
    transition: background 0.12s;
    display: flex; align-items: baseline; gap: 8px;
  }
  .note-font-item[data-font="noto-serif-kr"] { font-family: 'Noto Serif KR', serif; }
  .note-font-item[data-font="nanum-myeongjo"] { font-family: 'Nanum Myeongjo', serif; }
  .note-font-item[data-font="gowun-batang"] { font-family: 'Gowun Batang', serif; }
  .note-font-item[data-font="pretendard"] { font-family: 'Pretendard', sans-serif; }
  .note-font-item[data-font="gowun-dodum"] { font-family: 'Gowun Dodum', sans-serif; }
  .note-font-item em {
    margin-left: auto;
    font-style: italic;
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-family: 'Inter', sans-serif;
  }
  .note-font-item:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
  .note-font-item.active {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
  }
  .note-fontsize-row {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  }
  .note-fontsize-btn {
    padding: 6px 0;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: 'Cormorant Garamond', serif;
    transition: all 0.12s;
  }
  .note-fontsize-btn[data-size="s"]  { font-size: 0.78rem; }
  .note-fontsize-btn[data-size="m"]  { font-size: var(--text-base); }
  .note-fontsize-btn[data-size="l"]  { font-size: 1.08rem; }
  .note-fontsize-btn[data-size="xl"] { font-size: 1.22rem; }
  .note-fontsize-btn[data-size="xxl"]{ font-size: var(--text-xl); }
  .note-fontsize-btn sub, .note-fontsize-btn sup {
    font-family: 'Inter', sans-serif;
    font-size: 0.55em;
    color: var(--text-faint);
    margin-left: 1px;
  }
  .note-fontsize-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .note-fontsize-btn.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  }

  /* 원어 lookup popover */
  .note-lex-popover {
    position: fixed; z-index: 100;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.12);
    padding: 12px;
    width: min(360px, calc(100vw - 24px));
    max-height: min(420px, calc(100dvh - 100px));
    display: flex; flex-direction: column; gap: 10px;
  }
  [data-theme="light"] .note-lex-popover { background: #fff; border-color: #e0dccf; }
  .note-lex-popover[hidden] { display: none; }
  .note-lex-head {
    display: flex; align-items: center; justify-content: space-between;
  }
  .note-lex-title {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
  }
  .note-lex-close {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 0; color: var(--text-faint);
    cursor: pointer; padding: 0; border-radius: var(--r-xs);
  }
  .note-lex-close svg {
    width: 16px; height: 16px; stroke-width: 1.7;
  }
  .note-lex-close:hover, .note-lex-close:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--text-faint) 15%, transparent);
    outline: none;
  }
  .note-lex-query {
    display: flex; gap: 6px;
  }
  .note-lex-input {
    flex: 1;
    padding: 7px 10px;
    background: color-mix(in srgb, var(--text-faint) 8%, transparent);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
  }
  .note-lex-input:focus { outline: 0; border-color: var(--accent-dim); }
  .note-lex-go {
    padding: 0 14px;
    background: var(--accent);
    border: 0; border-radius: var(--r-sm);
    color: var(--bg); font-family: 'Inter', sans-serif;
    font-size: 0.78rem; font-weight: 500;
    cursor: pointer; transition: opacity 0.12s;
  }
  .note-lex-go:hover { opacity: 0.85; }
  .note-lex-go:disabled { opacity: 0.5; cursor: wait; }
  .note-lex-result {
    flex: 1; min-height: 0;
    overflow-y: auto;
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.86rem; line-height: 1.6;
    padding: 4px 2px;
  }
  .note-lex-result .note-lex-hint {
    color: var(--text-faint); font-size: 0.78rem;
    line-height: 1.55; padding: 8px 4px;
  }
  .note-lex-result .note-lex-hint em {
    font-style: italic; color: var(--accent);
  }
  .note-lex-result h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.15rem; color: var(--accent);
    margin: 0 0 4px;
    display: flex; align-items: baseline; gap: 8px;
  }
  .note-lex-result h3 .translit {
    font-size: var(--text-sm); color: var(--text-dim); font-style: italic;
  }
  .note-lex-result h4 {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem; color: var(--text-faint);
    letter-spacing: 0.12em; text-transform: uppercase;
    margin: 12px 0 4px;
  }
  .note-lex-result p { margin: 0 0 6px; }
  .note-lex-result code, .note-lex-result em {
    font-style: italic; color: var(--text-dim);
  }
  .note-lex-result a {
    color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent-dim);
  }
  .note-lex-loading {
    color: var(--text-faint); font-size: var(--text-sm); font-style: italic;
    padding: 8px 4px;
  }
  .note-lex-error {
    color: #c47a6a;
  }
  /* v243 — 결과 아래 액션 버튼들 (노트 삽입 / 복사 / 새로고침) */
  .note-lex-body { padding: 4px 4px 0; }
  .note-lex-actions {
    display: flex; flex-wrap: wrap;
    gap: 6px; align-items: center;
    margin-top: 10px;
    padding: 8px 4px 0;
    border-top: 1px dashed var(--border);
  }
  .note-lex-action {
    appearance: none;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    padding: 6px 11px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .note-lex-action svg,
  .note-lex-action-sm svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
  }
  .note-lex-action:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  }
  .note-lex-action-sm {
    background: transparent;
    border: 0;
    color: var(--text-dim);
    font-size: var(--text-xs);
    cursor: pointer;
    padding: 4px 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }
  .note-lex-action-sm:hover { color: var(--text); text-decoration: underline; }
  .note-lex-cached {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-family: 'Inter', sans-serif;
  }

  /* 모바일 예배 — drawer를 collapsible 한 줄로 + edit-head 흡수 (~36px) */
  @media (max-width: 720px) {
    /* v416 — 모바일 토글 헤더 row 제거 (사용자 요청) */
    .worship-drawer-mhead-row { display: none !important; }

    /* worship-edit-head 모바일 보이기 + compact spacing */
    .worship-redesign-v124 .worship-edit-head {
      display: flex !important;
      padding: 4px 10px !important;
      min-height: 36px !important;
    }

    .worship-redesign-v124 .worship-shell {
      flex-direction: column;
      overflow-y: auto;
    }

    /* v420 — worship-drawer 모바일 완전 숨김 (빈 공간 제거) */
    .worship-redesign-v124 .worship-drawer {
      display: none !important;
    }
    .worship-redesign-v124 .worship-drawer[data-mobile-open="true"] {
      max-height: 70vh;
      overflow-y: auto;
    }

    /* v416 — 모바일 토글 헤더 row 숨김 (worship-edit-head가 대체) */
    .worship-drawer-mhead-row { display: none !important; }
    .worship-drawer-mhead { display: none !important; }
    [data-theme="light"] .worship-drawer-mhead-row { background: #fafaf5; }
    .worship-drawer-mhead-row .mhead-icon-btn {
      flex: 0 0 36px;
      display: grid; place-items: center;
      background: transparent; border: 0;
      color: var(--text-dim);
      cursor: pointer;
      transition: color 0.12s, background 0.12s;
      padding: 0;
    }
    .worship-drawer-mhead-row .mhead-icon-btn:hover {
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 10%, transparent);
    }
    .worship-drawer-mhead-row .mhead-icon-btn svg { width: 18px; height: 18px; }
    .worship-drawer-mhead-row .mhead-icon-btn.mhead-danger {
      color: color-mix(in srgb, #c47a6a 75%, var(--text-dim) 25%);
    }
    .worship-drawer-mhead-row .mhead-icon-btn.mhead-danger:hover {
      color: #c47a6a;
      background: color-mix(in srgb, #c47a6a 12%, transparent);
    }
    .worship-drawer-mhead {
      display: flex !important;
      flex: 1; min-width: 0;
      align-items: center; justify-content: space-between;
      padding: 0 8px;
      background: transparent; border: 0;
      cursor: pointer;
      font-family: 'Inter', sans-serif;
      font-size: var(--text-sm);
      color: var(--text-dim);
      text-align: left;
      border-left: 1px solid var(--border);
      border-right: 1px solid var(--border);
    }
    .worship-drawer-mhead .mhead-summary {
      flex: 1; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      color: var(--text);
      font-weight: 500;
    }
    .worship-drawer-mhead .mhead-summary .meta-count {
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      padding: 1px 6px; border-radius: var(--r-md); margin-left: 6px;
      font-size: var(--text-xs);
    }
    .worship-drawer-mhead .mhead-arrow {
      color: var(--text-faint);
      transition: transform 0.2s;
      margin-left: 6px; flex-shrink: 0;
      width: 14px; height: 14px;
    }
    .worship-drawer[data-mobile-open="true"] .worship-drawer-mhead .mhead-arrow {
      transform: rotate(180deg);
    }

    /* drawer 내용 padding (collapsed 시 hidden, expanded 시 보임) */
    .worship-redesign-v124 .worship-drawer > .drawer-section,
    .worship-redesign-v124 .worship-drawer > .drawer-spacer,
    .worship-redesign-v124 .worship-drawer > .drawer-peripheral {
      padding-left: 12px; padding-right: 12px;
    }
    .worship-redesign-v124 .worship-drawer > .drawer-section:first-of-type {
      padding-top: 4px;
    }
    .worship-redesign-v124 .worship-drawer > .drawer-section:last-of-type {
      padding-bottom: 14px;
    }
    .worship-redesign-v124 .note-drawer .worship-meta { gap: 4px; }
    .worship-redesign-v124 .note-drawer .meta-field { padding: 5px 8px; font-size: var(--text-sm); }
    .worship-redesign-v124 .note-drawer .worship-cited-add { gap: 4px; }
  }

  /* ─────────────────────────────────────────
     v124 — 기존 룰 specificity 추월용 override
     ───────────────────────────────────────── */

  /* 본문 textarea / contenteditable이 페이지 톤으로 통일 + 폰트 var 따름 */
  .note-page .note-page-body,
  .note-page #daily-textarea,
  .note-page #w-body,
  .note-page .daily-textarea,
  .note-page .editable-area {
    background: transparent !important;
    color: var(--paper-ink) !important;
    border: 0 !important;
    padding: 0 !important;
    font-family: var(--note-body-font, 'Noto Serif KR', serif) !important;
    font-size: var(--note-body-size, 1.02rem) !important;
    line-height: var(--note-body-lh, 1.95) !important;
    min-height: 280px;
    resize: none !important;
    caret-color: var(--accent);
  }
  .note-page .note-page-body:focus,
  .note-page #daily-textarea:focus,
  .note-page #w-body:focus,
  .note-page .daily-textarea:focus,
  .note-page .editable-area:focus {
    background: transparent !important;
    outline: 0 !important;
  }
  /* placeholder pseudo for contenteditable */
  .note-page .editable-area:empty:not(:focus)::before {
    content: attr(data-placeholder);
    color: var(--paper-meta);
    opacity: 0.55;
    font-style: italic;
    pointer-events: none;
    display: inline-block;
  }

  /* 페이지 안 텍스트는 라이트 테마에서도 페이지 톤 ink */
  .note-page .note-page-title,
  .note-page .daily-entry-title,
  .note-page input.daily-entry-title {
    background: transparent !important;
    color: var(--paper-ink) !important;
    font-weight: 700 !important;
    border: 0;
  }
  .note-page input.daily-entry-title::placeholder,
  .note-page .note-page-title::placeholder {
    color: var(--paper-meta);
    opacity: 0.65;
  }

  /* 페이지 안 mark.hl-* (형광)도 페이지 톤 위에서 자연스러운 색감 */
  .note-page mark.hl-y { background: rgba(218, 165, 32, 0.35); color: var(--paper-ink); }
  .note-page mark.hl-r { background: rgba(178, 34, 52, 0.22); color: var(--paper-ink); }
  .note-page mark.hl-g { background: rgba(85, 139, 47, 0.28); color: var(--paper-ink); }
  .note-page mark.hl-b { background: rgba(70, 130, 180, 0.28); color: var(--paper-ink); }
  .note-page mark.hl-p { background: rgba(199, 89, 122, 0.28); color: var(--paper-ink); }

  /* 페이지 안 inline-attach 의 어색한 border 줄임 */
  .note-page .inline-attach {
    background: transparent;
    border-color: var(--paper-footer-line);
  }

  /* 페이지 톤 ink 면 inline-attach border 도 다르게 */
  [data-paper-tone="ink"] .inline-attach {
    background: rgba(0,0,0,0.18);
    border-color: rgba(201,169,97,0.18);
  }

  /* drawer 안 meta-field 가 light 테마에서도 일관된 dark 스타일 */
  .worship-redesign-v124 .note-drawer .meta-field {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }
  .worship-redesign-v124 .note-drawer .meta-field::placeholder {
    color: var(--text-faint);
  }

  /* daily-overview chips: light 테마에서도 drawer dark 톤에 맞춤 */
  .daily-redesign-v124 .note-drawer .daily-overview-chip {
    background: transparent !important;
    color: var(--text-dim) !important;
    border-color: transparent !important;
  }

  /* ─────────────────────────────────────────
     v125 — 글로벌 테마 존중 + 차분한 light surface
     - Dark theme: 기존대로 다크 책상 + 양피지 페이지
     - Light theme: 부드러운 cream/stone 책상 + 양피지 페이지 (Bear/iA Writer 톤)
     - Sepia theme: 따뜻한 sepia 책상 + 페이지
     모든 surface는 글로벌 테마 변수를 base로 사용하되 노트 모달용 미세 조정
     ───────────────────────────────────────── */

  /* 노트 데스크 base — 테마 무관 var(--bg) 사용 */
  .note-workspace-modal.note-desk { background: var(--bg); color: var(--text); }
  [data-theme="light"] .note-workspace-modal.note-desk,
  [data-theme="sepia"] .note-workspace-modal.note-desk { background: var(--paper-bg-1); }

  /* 페이지 area = 단색 surface (v157: 그라데이션 제거, v204: 라이트 override 도 제거 → paper-bg-1 단일톤) */
  .note-desk .note-page-area { background: var(--paper-bg-1); }
  [data-theme="sepia"] .note-desk .note-page-area { background: var(--paper-bg-1); }

  /* rail/drawer: 테마별 자연스러운 surface (light에서 dark 강제 X) */
  .note-rail {
    background: var(--surface);
    color: var(--text-dim);
    border-right: 1px solid var(--border);
  }
  [data-theme="light"] .note-rail {
    background: #f7f4ed;
    border-right: 1px solid #e0dccf;
  }
  [data-theme="sepia"] .note-rail {
    background: color-mix(in srgb, var(--surface) 60%, var(--bg) 40%);
    border-right: 1px solid var(--border);
  }
  .note-rail .rail-btn { color: var(--text-faint); }
  .note-rail .rail-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  .note-rail .rail-btn.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  }

  .note-drawer {
    background: var(--surface);
    color: var(--text);
    border-right: 1px solid var(--border);
  }
  [data-theme="light"] .note-drawer {
    background: #fafaf5;
    border-right: 1px solid #e0dccf;
  }
  [data-theme="sepia"] .note-drawer {
    background: color-mix(in srgb, var(--surface) 70%, var(--bg) 30%);
  }

  .note-drawer .drawer-head { color: var(--text-faint); }
  .note-drawer .drawer-summary {
    color: var(--text-dim);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }
  .note-drawer .drawer-summary strong { color: var(--accent); }
  .note-drawer .drawer-note-card,
  .note-drawer .daily-entry-card {
    background: color-mix(in srgb, var(--accent) 4%, transparent);
    color: var(--text);
  }
  [data-theme="light"] .note-drawer .drawer-note-card,
  [data-theme="light"] .note-drawer .daily-entry-card {
    background: #fff;
    border: 1px solid #ebe6d8;
  }
  .note-drawer .drawer-note-card.active,
  .note-drawer .daily-entry-card.active {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .note-drawer .daily-template-btn {
    background: transparent;
    color: var(--text-dim);
    border-color: var(--border);
  }
  .note-drawer .daily-template-btn:hover {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 6%, transparent);
  }
  .note-drawer .meta-field {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
  }
  [data-theme="light"] .note-drawer .meta-field {
    background: #fff !important;
    border-color: #ddd7c5 !important;
    color: var(--text) !important;
  }
  .note-drawer .meta-field::placeholder { color: var(--text-faint); }
  [data-theme="light"] .note-drawer .meta-field { color-scheme: light; }

  /* v425 — 모달 head 테마별 일관성 (dark=어두움, light/sepia=paper 톤) */
  .note-workspace-modal .modal-head {
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04);
  }
  /* Dark 테마: 어두운 surface 배경 + 밝은 텍스트 */
  :root .note-workspace-modal .modal-head {
    background: var(--surface);
    color: var(--text);
    border-bottom-color: var(--border);
  }
  /* Light/sepia 테마: paper 배경 + 어두운 텍스트 */
  [data-theme="light"] .note-workspace-modal .modal-head,
  [data-theme="sepia"] .note-workspace-modal .modal-head {
    background: var(--paper-bg-1) !important;
    color: var(--paper-ink) !important;
    border-bottom-color: color-mix(in srgb, var(--paper-meta) 18%, transparent) !important;
  }
  [data-theme="light"] .note-workspace-modal .modal-head h2,
  [data-theme="sepia"] .note-workspace-modal .modal-head h2 {
    color: var(--paper-ink) !important;
  }
  /* 노트 모달 제목 — 공통 */
  .note-workspace-modal .modal-head h2,
  .note-workspace-modal .modal-head h2 .ko,
  .cou-note-head h2 {
    font-weight: 700 !important;
    letter-spacing: -0.015em;
  }
  /* Dark 제목 */
  :root .note-workspace-modal .modal-head h2,
  :root .note-workspace-modal .modal-head h2 .ko,
  :root .cou-note-head h2 {
    color: var(--text) !important;
  }
  /* Light/sepia 제목 */
  [data-theme="light"] .note-workspace-modal .modal-head h2,
  [data-theme="light"] .note-workspace-modal .modal-head h2 .ko,
  [data-theme="light"] .cou-note-head h2,
  [data-theme="sepia"] .note-workspace-modal .modal-head h2,
  [data-theme="sepia"] .note-workspace-modal .modal-head h2 .ko,
  [data-theme="sepia"] .cou-note-head h2 {
    color: #1a1a1a !important;
  }
  /* 아이콘 버튼 — 테마별 */
  .note-workspace-modal .modal-head-iconbtn { color: var(--text-dim); }
  .note-workspace-modal .modal-head-iconbtn:hover,
  .note-workspace-modal .modal-head-iconbtn:focus-visible { color: var(--text); }
  [data-theme="light"] .note-workspace-modal .modal-head-iconbtn,
  [data-theme="sepia"] .note-workspace-modal .modal-head-iconbtn {
    color: color-mix(in srgb, var(--paper-ink) 66%, var(--paper-meta) 34%) !important;
    background: color-mix(in srgb, var(--paper-meta) 8%, transparent);
    border-color: color-mix(in srgb, var(--paper-meta) 18%, transparent);
  }
  [data-theme="light"] .note-workspace-modal .modal-head-iconbtn:hover,
  [data-theme="light"] .note-workspace-modal .modal-head-iconbtn:focus-visible,
  [data-theme="sepia"] .note-workspace-modal .modal-head-iconbtn:hover,
  [data-theme="sepia"] .note-workspace-modal .modal-head-iconbtn:focus-visible {
    color: var(--paper-ink) !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  }

  /* v464 — 세피아/라이트 모달 헤더 강제 밝게 (변수 상속 실패 방지) */
  [data-theme="sepia"] #daily-modal .modal-head,
  [data-theme="sepia"] #scrapbook-modal .modal-head,
  [data-theme="sepia"] #scraps-modal .modal-head {
    background: #f3e9d3 !important;
    border-bottom: 1px solid #d3c8a8 !important;
  }
  [data-theme="sepia"] #daily-modal .modal-head h2,
  [data-theme="sepia"] #daily-modal .modal-head h2 .ko,
  [data-theme="sepia"] #scrapbook-modal .modal-head h2,
  [data-theme="sepia"] #scraps-modal .modal-head h2 {
    color: #3a2e20 !important;
  }
  [data-theme="sepia"] #daily-modal .modal-head-iconbtn,
  [data-theme="sepia"] #scrapbook-modal .modal-head-iconbtn,
  [data-theme="sepia"] #scraps-modal .modal-head-iconbtn {
    color: color-mix(in srgb, #3a2e20 66%, #6b5a44 34%) !important;
    background: color-mix(in srgb, #6b5a44 8%, transparent);
    border-color: color-mix(in srgb, #6b5a44 18%, transparent);
  }
  [data-theme="light"] #daily-modal .modal-head,
  [data-theme="light"] #scrapbook-modal .modal-head,
  [data-theme="light"] #scraps-modal .modal-head {
    background: #ffffff !important;
    border-bottom: 1px solid #d2d2d7 !important;
  }
  [data-theme="light"] #daily-modal .modal-head h2,
  [data-theme="light"] #daily-modal .modal-head h2 .ko,
  [data-theme="light"] #scrapbook-modal .modal-head h2,
  [data-theme="light"] #scraps-modal .modal-head h2 {
    color: #1d1d1f !important;
  }
  [data-theme="light"] #daily-modal .modal-head-iconbtn,
  [data-theme="light"] #scrapbook-modal .modal-head-iconbtn,
  [data-theme="light"] #scraps-modal .modal-head-iconbtn {
    color: color-mix(in srgb, #1d1d1f 66%, #6e6e73 34%) !important;
    background: color-mix(in srgb, #6e6e73 8%, transparent);
    border-color: color-mix(in srgb, #6e6e73 18%, transparent);
  }
  [data-theme="sepia"] #daily-modal .modal-head-iconbtn:hover,
  [data-theme="sepia"] #daily-modal .modal-head-iconbtn:focus-visible,
  [data-theme="sepia"] #scrapbook-modal .modal-head-iconbtn:hover,
  [data-theme="sepia"] #scrapbook-modal .modal-head-iconbtn:focus-visible {
    color: #3a2e20 !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  }
  [data-theme="light"] #daily-modal .modal-head-iconbtn:hover,
  [data-theme="light"] #daily-modal .modal-head-iconbtn:focus-visible,
  [data-theme="light"] #scrapbook-modal .modal-head-iconbtn:hover,
  [data-theme="light"] #scrapbook-modal .modal-head-iconbtn:focus-visible {
    color: #1d1d1f !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent) 36%, transparent);
  }

  /* head buttons — 테마 토큰화 */
  .head-link-btn {
    color: var(--text-dim);
    border-color: var(--border);
    background: transparent;
  }
  .head-link-btn:hover {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .head-link-btn.danger {
    color: color-mix(in srgb, #c47a6a 80%, var(--text-dim) 20%);
    border-color: color-mix(in srgb, #c47a6a 30%, transparent);
  }
  .head-link-btn.danger:hover {
    color: #c47a6a;
    background: color-mix(in srgb, #c47a6a 8%, transparent);
    border-color: color-mix(in srgb, #c47a6a 50%, transparent);
  }
  .note-workspace-modal #daily-close,
  .note-workspace-modal #worship-close { color: var(--text-dim); }
  .note-workspace-modal #daily-close:hover,
  .note-workspace-modal #worship-close:hover { color: var(--text); }

  /* ================================
     기본 / Base
     ================================ */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* v466q — 모바일 탭시 회색 박스 제거 (award-winning 기본) */
    -webkit-tap-highlight-color: transparent;
  }
  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* v466q — 브라우저 form/scrollbar 자동 테마 (light/dark) */
    color-scheme: dark;
  }
  [data-theme="sepia"] html, html[data-theme="sepia"],
  [data-theme="light"] html, html[data-theme="light"] { color-scheme: light; }
  [data-theme="night"] html, html[data-theme="night"] { color-scheme: dark; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    /* v227 — 테마 전환 빠릿하게 (300ms → 100ms) */
    transition: background 0.1s ease, color 0.1s ease;
    /* v466q — 모바일 주소창 등장 시 잘림 해결 (dvh) */
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* v467q — 한글 자간 자동 보정 (Pretendard·Noto 권장 OpenType feature) */
    font-feature-settings: "palt" 1, "kern" 1;
    /* v467q — fake bold synthesis 명시 (fonts.css 일부 weight 가짜인 경우 대비) */
    font-synthesis-weight: auto;
    /* v467q — form (checkbox/radio/progress) 컬러 자동 매핑 */
    accent-color: var(--accent);
  }
  [data-theme="night"] body {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(circle at 50% -10%, rgba(217, 189, 115, 0.12), transparent 34rem),
      radial-gradient(circle at 12% 18%, rgba(93, 139, 204, 0.16), transparent 24rem),
      linear-gradient(180deg, #070b16 0%, #0b1020 52%, #090b14 100%);
  }
  [data-theme="night"] body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.75) 0 1px, transparent 1.6px),
      radial-gradient(circle at 72% 16%, rgba(217, 189, 115, 0.82) 0 1px, transparent 1.7px),
      radial-gradient(circle at 84% 58%, rgba(255, 255, 255, 0.58) 0 1px, transparent 1.5px),
      radial-gradient(circle at 38% 70%, rgba(126, 164, 214, 0.68) 0 1px, transparent 1.6px),
      radial-gradient(circle at 9% 82%, rgba(255, 255, 255, 0.5) 0 1px, transparent 1.5px);
    background-size: 260px 260px, 310px 310px, 360px 360px, 420px 420px, 480px 480px;
    opacity: 0.72;
    filter: drop-shadow(0 0 8px var(--star-glow));
  }
  button { background: none; border: none; color: inherit; font: inherit; cursor: pointer; }
  input, textarea { background: none; border: none; color: inherit; font: inherit; outline: none; }
  input::placeholder, textarea::placeholder { color: var(--text-faint); }
  /* v466q — 텍스트 선택 컬러 (앱 정체성 — 묵상의 warm gold) */
  ::selection { background: var(--accent); color: var(--bg); }
  ::-moz-selection { background: var(--accent); color: var(--bg); }

  /* ================================
     상단바 / Top bar
     ================================ */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    background: rgba(21, 20, 15, 0.72);
    backdrop-filter: saturate(200%) blur(20px) brightness(1.05);
    -webkit-backdrop-filter: saturate(200%) blur(20px) brightness(1.05);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 4px 20px rgba(0,0,0,0.35);
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    transition: transform 0.25s ease, opacity 0.2s ease, background 0.3s ease;
  }
  /* v213 — 모바일 성경 뷰에서 아래로 스크롤시 topbar 자동 숨김 (화면 꽉 채우기) */
  .topbar.is-hidden {
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
  }
  /* v399q — 테마별 glassmorphism 최적화 */
  [data-theme="sepia"] .topbar {
    background: rgba(244, 236, 216, 0.72);
    border-bottom: 1px solid rgba(139, 111, 62, 0.18);
    box-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 4px 20px rgba(58,46,32,0.18);
  }
  [data-theme="light"] .topbar {
    background: rgba(250, 250, 247, 0.78);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 4px 20px rgba(0,0,0,0.06);
  }
  [data-theme="night"] .topbar {
    background:
      linear-gradient(180deg, rgba(7, 11, 22, 0.9), rgba(10, 15, 29, 0.78)),
      radial-gradient(circle at 12% 0%, rgba(217, 189, 115, 0.14), transparent 42%);
    border-bottom: 1px solid rgba(217, 189, 115, 0.18);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05), 0 16px 38px rgba(0,0,0,0.42);
  }

  .brand {
    font-family: 'Cormorant Garamond', serif;
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    font-size: 1.28rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    color: var(--accent);
    user-select: none;
    white-space: nowrap;
    text-transform: none;
  }
  .brand-main {
    line-height: 1;
  }
  .brand-sub {
    font-family: 'Inter', 'Pretendard', sans-serif;
    font-size: 0.56em;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: var(--text-dim);
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    line-height: 1;
  }
  .brand-sub::before {
    content: "";
    display: inline-block;
    width: 1.05rem;
    height: 1px;
    background: color-mix(in srgb, var(--accent) 58%, transparent);
  }
  .brand .ko { font-family: 'Noto Serif KR', serif; font-weight: 600; }

  @media (min-width: 721px) {
    .topbar {
      display: grid;
      grid-template-columns: minmax(190px, max-content) 38px minmax(190px, 0.72fr) minmax(320px, 1.35fr) max-content;
      grid-template-areas: "brand back nav search actions";
      align-items: center;
      gap: 0.62rem;
      flex-wrap: nowrap;
    }
    .topbar .brand {
      grid-area: brand;
      justify-self: start;
      min-width: 0;
    }
    .topbar .nav-back {
      grid-area: back;
      justify-self: center;
    }
    .topbar .nav-current {
      grid-area: nav;
      min-width: 0;
      width: 100%;
      justify-content: space-between;
    }
    .topbar .search-box {
      grid-area: search;
      min-width: 0;
      width: 100%;
      max-width: none;
    }
    .topbar .topbar-actions {
      grid-area: actions;
      justify-self: end;
      margin-left: 0;
    }
  }

  .nav-current {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 0.4rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    transition: background 0.15s;
  }
  .nav-current:hover { background: var(--surface-2); border-color: var(--accent-dim); }
  .nav-current .arrow { color: var(--text-faint); font-size: 0.75rem; }
  .nav-back {
    font-size: var(--text-xl);
    line-height: 1;
    font-family: 'Cormorant Garamond', serif;
  }
  .nav-back:disabled { opacity: 0.25; cursor: default; }
  .nav-back:not(:disabled):hover { color: var(--accent); background: var(--surface-2); }

  .search-box {
    flex: 1; min-width: 200px; max-width: 360px;
    display: flex; align-items: center; gap: var(--space-2);
    padding: 0.4rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    position: relative;
    transition: all 0.3s var(--ease-standard);
  }
  .search-box:focus-within {
    border-color: var(--accent);
    max-width: 420px;
    box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 12%, transparent),
                0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
  }
  [data-theme="night"] .search-box {
    background: linear-gradient(180deg, rgba(17, 24, 42, 0.9), rgba(10, 15, 29, 0.88));
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    box-shadow: 0 14px 32px color-mix(in srgb, #000 24%, transparent),
                inset 0 1px 0 rgba(255,255,255,0.045);
  }
  [data-theme="night"] .search-box:focus-within {
    border-color: color-mix(in srgb, var(--accent) 54%, var(--border));
    box-shadow: 0 18px 42px color-mix(in srgb, #000 30%, transparent),
                0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent),
                inset 0 1px 0 rgba(255,255,255,0.055);
  }
  .search-box input { flex: 1; font-size: 0.9rem; }
  #search-input::-webkit-search-cancel-button,
  #search-input::-webkit-search-decoration,
  #search-input::-webkit-search-results-button,
  #search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
  }
  .search-box-icon,
  .search-box .icon {
    color: var(--text-faint);
    font-size: var(--text-sm);
  }
  .search-inline-clear,
  .search-inline-close {
    display: none;
  }

  /* 검색 결과 드롭다운 */
  .search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: var(--r-lg);
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.18),
                0 0 0 1px color-mix(in srgb, var(--border) 30%, transparent);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 80;
    min-width: 360px;
    opacity: 0;
    transform: translateY(10px) scale(0.975);
    pointer-events: none;
    transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
  }
  [data-theme="night"] .search-results {
    background: linear-gradient(180deg, rgba(13, 19, 34, 0.98), rgba(8, 12, 24, 0.98));
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    box-shadow: 0 24px 60px color-mix(in srgb, #000 42%, transparent),
                0 0 0 1px rgba(255,255,255,0.035) inset;
  }
  .search-box:focus-within .search-results:not([hidden]) {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  .search-results[hidden] { display: none; }
  .search-results .res-head {
    padding: 0.75rem 1.1rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-dim);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-2);
    background: color-mix(in srgb, var(--surface-2) 40%, transparent);
  }
  [data-theme="night"] .search-results .res-head {
    background: color-mix(in srgb, var(--accent) 9%, rgba(13, 19, 34, 0.9));
    border-bottom-color: color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .search-results .res-head .download-btn {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.76rem;
    color: var(--accent);
    padding: 0.3rem 0.7rem;
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    border-radius: var(--r-sm);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    cursor: pointer;
    font-weight: 700;
    transition: all 0.2s var(--ease-standard);
  }
  .search-results .res-head .download-btn:hover {
    background: color-mix(in srgb, var(--accent) 15%, var(--surface-2));
    transform: translateY(-0.5px);
  }
  .search-results .res-head .download-btn:disabled { opacity: 0.5; cursor: default; }
  .search-results .res-list { padding: 0.4rem 0; }
  .search-results .res-section-label {
    padding: 0.6rem 1.1rem 0.3rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--accent-dim);
  }
  .search-results .res-item.res-note {
    background: color-mix(in srgb, var(--accent) 4%, var(--surface-2));
  }
  .search-results .res-item.res-lexicon {
    background: color-mix(in srgb, var(--strong-color) 7%, var(--surface-2));
  }
  .search-results .res-item {
    padding: 0.75rem 1.1rem;
    cursor: pointer;
    border-left: 3.5px solid transparent;
    transition: all 0.22s var(--ease-standard);
  }
  .search-results .res-item:hover, .search-results .res-item.selected {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
    border-left-color: var(--accent);
    padding-left: 1.3rem;
  }
  .search-results .res-ref {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    font-weight: 750;
    color: var(--accent);
    margin-bottom: 0.25rem;
  }
  .search-results .res-snippet {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--text-dim);
    word-break: keep-all;
  }
  .search-results .res-snippet.en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.86rem;
    margin-top: 0.2rem;
  }
  .search-results .res-hint-compact {
    font-size: 0.75rem;
  }
  .search-results .res-ai-hint {
    color: var(--accent-dim);
  }
  .search-results .res-meta-tag {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    color: var(--accent-dim);
    margin-left: 0.35rem;
  }
  .search-results .res-meta-tag.wide {
    font-size: 0.74rem;
  }
  .search-results .res-ref-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-left: 0.4rem;
  }
  .search-results .res-kind-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .search-results .res-sub-meta {
    color: var(--text-faint);
    font-size: 0.78rem;
    margin-left: 0.4rem;
  }
  .search-results .strong-lexeme.res-lexeme {
    font-size: 1.02rem;
  }
  .search-results mark.search-hl {
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
    padding: 2px 5px;
    margin: 0 1px;
    border-radius: var(--r-xs);
    font-weight: 700;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  }
  .search-results .res-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
  }
  .search-results .res-progress {
    padding: 0.9rem 1rem;
    text-align: center;
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
  }
  .search-results .res-progress.compact {
    padding: 0 0.85rem 0.5rem;
  }
  .search-results .res-progress .bar {
    margin-top: 0.4rem;
    height: 4px;
    background: var(--surface);
    border-radius: 2px;
    overflow: hidden;
  }
  .search-results .res-progress .bar > span {
    display: block;
    height: 100%;
    background: var(--accent);
    transition: width 0.2s;
  }

  .topbar-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
  .reader-mobile-action-shelf { display: none; }
  .topbar .reader-mobile-action-shelf[hidden] {
    display: none !important;
  }
  .topbar #btn-search-mobile,
  .topbar #btn-picker-tools,
  .topbar #btn-tag-mgr,
  .topbar #btn-graph {
    display: none;
  }
  .topbar [data-mobile-reader-tool="true"] {
    display: none;
  }
  .topbar .reader-mobile-only-action[hidden] {
    display: none !important;
  }
  @media (min-width: 721px) {
    .topbar #btn-picker-tools {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none;
    }
    .topbar [data-mobile-reader-tool="true"] {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none;
    }
    .topbar .topbar-actions {
      gap: 2px;
      padding: 2px;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
      border-radius: 999px;
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--surface-2) 88%, var(--text) 5%),
        color-mix(in srgb, var(--surface-2) 94%, var(--bg) 6%)
      );
      box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 20%, transparent),
                  inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
    }
    .topbar .topbar-actions:focus-within {
      border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
      box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow) 18%, transparent),
                  0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
    }
    .topbar .topbar-actions > :not([data-desktop-reader-action="true"]) {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .topbar .topbar-actions .icon-btn {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      color: color-mix(in srgb, var(--text) 94%, var(--accent) 6%);
      background: transparent;
      border: 0;
    }
    .topbar .topbar-actions .icon-btn svg {
      width: 18px;
      height: 18px;
      stroke-width: 1.85;
      opacity: 1;
    }
    .topbar .topbar-actions .icon-btn:hover,
    .topbar .topbar-actions .icon-btn:focus-visible,
    .topbar .topbar-actions .icon-btn[aria-expanded="true"] {
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 13%, transparent);
      outline: none;
    }
  }
  @media (hover: hover) and (pointer: fine) {
    .topbar #btn-picker-tools[data-mobile-reader-tool="true"] {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none;
    }
  }
  @media (min-width: 721px) {
    [data-theme="night"] .topbar .topbar-actions {
      border-color: rgba(217, 189, 115, 0.28);
      background: linear-gradient(180deg, rgba(18, 24, 45, 0.9), rgba(10, 15, 29, 0.86));
      box-shadow:
        0 16px 36px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    [data-theme="night"] .topbar .topbar-actions > :where(#btn-notes, #btn-more-menu, #btn-settings) {
      color: color-mix(in srgb, var(--text) 88%, var(--accent) 12%);
    }
  }
  .icon-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--r-md);
    color: var(--text-dim);
    transition: background 0.15s, color 0.15s;
  }
  .icon-btn svg {
    width: 18px; height: 18px;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  /* 작은 in-line SVG 아이콘 — buttons 안 등 */
  .ic {
    display: inline-block;
    vertical-align: -0.16em;
    width: 1.05em; height: 1.05em;
    stroke: currentColor; fill: none;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .ic-sm { width: 0.9em; height: 0.9em; vertical-align: -0.12em;
    font-size: 1rem;
  }
  .inline-action-icon { vertical-align: -0.15em; }
  .icon-btn:hover { background: var(--surface); color: var(--text); }
  .icon-btn.active { color: var(--accent); background: var(--surface); }

  @media (min-width: 721px) and (max-width: 1100px) {
    .topbar {
      display: grid;
      grid-template-columns: minmax(170px, max-content) minmax(170px, 0.8fr) minmax(250px, 1.25fr) max-content;
      grid-template-areas: "brand nav search actions";
      align-items: center;
      gap: 0.55rem 0.65rem;
      padding: 0.62rem 0.9rem;
      flex-wrap: nowrap;
    }
    .topbar .brand {
      grid-area: brand;
      min-width: 0;
      white-space: nowrap;
    }
    .topbar .nav-back {
      display: none;
    }
    .topbar .nav-current {
      grid-area: nav;
      min-width: 0;
      width: 100%;
      justify-content: space-between;
    }
    .topbar .search-box {
      grid-area: search;
      min-width: 0;
      max-width: none;
      width: 100%;
    }
    .topbar.show-search .search-box {
      grid-area: search;
      display: flex;
      flex-basis: auto;
      max-width: none;
    }
    .topbar .topbar-actions {
      grid-area: actions;
      margin-left: 0;
      justify-self: end;
      gap: 0.25rem;
    }
    .topbar .icon-btn {
      width: 34px;
      height: 34px;
    }
    .topbar .icon-btn svg {
      width: 17px;
      height: 17px;
    }
    .search-results {
      min-width: min(520px, calc(100vw - 2rem));
    }
  }

  @media (min-width: 721px) and (max-width: 900px) {
    .topbar {
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "brand actions" "nav search";
    }
    .topbar .search-box {
      min-width: 220px;
    }
    .topbar .topbar-actions {
      padding-left: 2px;
    }
    .topbar .brand {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .brand-sub {
      letter-spacing: 0.12em;
    }
    .brand-sub::before {
      width: 0.75rem;
    }
    .topbar .search-results {
      left: auto;
      right: 0;
      width: min(520px, calc(100vw - 2rem));
      min-width: 0;
    }
  }

  /* ================================
     리더 / Reader
     ================================ */
  .reader {
    max-width: 1200px;
    margin: 0 auto;
    padding: clamp(1.35rem, 2.4vw, 2rem) 1.5rem 6rem;
    box-sizing: border-box;
  }
  /* v1032x — 밤하늘 테마는 말씀 본문도 같은 밤하늘 팔레트로 읽힌다. */
  [data-theme="night"] .reader {
    --bg: #070b16;
    --surface: #101727;
    --surface-2: #162039;
    --border: rgba(217, 189, 115, 0.18);
    --text: #f0eadb;
    --text-dim: #c9bea5;
    --text-faint: #817b91;
    --accent: #d9bd73;
    --accent-dim: #a58a48;
    --verse-num: #d9bd73;
    --strong-color: #8fb8ff;
    --hl-yellow: rgba(217, 189, 115, 0.26);
    --hl-green: rgba(106, 176, 141, 0.22);
    --hl-blue: rgba(111, 159, 222, 0.24);
    --hl-pink: rgba(204, 126, 164, 0.18);
    background:
      radial-gradient(circle at 18% 12%, rgba(217, 189, 115, 0.16) 0 1px, transparent 1.8px),
      radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.18) 0 1px, transparent 1.6px),
      linear-gradient(180deg, rgba(13, 19, 34, 0.98), rgba(8, 12, 24, 0.985)),
      url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.045'/%3E%3C/svg%3E");
    color: var(--text);
    min-height: 100dvh;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 24px 70px rgba(0, 0, 0, 0.35);
  }
  .chapter-head {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border);
  }
  /* 드롭캡 — 1절의 본문 첫 글자 강조 (v217: 한글만 유지) */
  .verse-row[data-verse="1"] .verse-text.ko::first-letter {
    font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
    font-size: 3.2em;
    font-weight: 600;
    color: var(--accent);
    float: left;
    line-height: 0.95;
    margin-right: 0.18em;
    margin-top: 0.1em;
  }
  /* 영단어 드롭캡(Drop Cap) 고도화 (v296g) */
  .verse-row[data-verse="1"] .verse-text.en::first-letter {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-size: 3.5em;
    font-weight: 500;
    color: var(--accent);
    float: left;
    line-height: 0.8;
    margin-right: 0.22em;
    margin-top: 0.08em;
    text-transform: uppercase;
  }
  .chapter-head .book-name {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    letter-spacing: 0.25em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }
  .chapter-head .book-name .en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    text-transform: none;
    letter-spacing: 0.05em;
    margin-left: 0.5rem;
    color: var(--text-faint);
  }
  .chapter-head .chapter-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4rem;
    font-weight: 500;
    line-height: 1;
    color: var(--accent);
  }

  /* 챕터 헤더 (.chapter-head) 클래식 재디자인 (v296g) */
  .chapter-head-classic {
    text-align: center;
    padding-top: max(clamp(1.15rem, 2.4vw, 1.9rem), calc(env(safe-area-inset-top) + 0.85rem));
    scroll-margin-top: max(clamp(2rem, 4vw, 3.2rem), calc(env(safe-area-inset-top) + 1.7rem));
    margin-bottom: clamp(1.4rem, 3vw, 2.1rem);
    padding-bottom: clamp(0.8rem, 1.8vw, 1.2rem);
    position: relative;
    border-bottom: none; /* 기존 border 제거 */
  }
  .chapter-head-classic .ch-book-sub {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.35em;
    color: var(--text-faint);
    text-transform: uppercase;
    min-height: 1.35em;
    padding-top: 0.15rem;
    margin-bottom: 0.65rem;
    overflow: visible;
  }
  .chapter-head-classic .ch-book-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
  }
  .chapter-head-classic .ch-book-title .ko-title {
    min-width: 0;
  }
  .chapter-head-classic .ch-book-title .en-italic {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--text-dim);
    letter-spacing: 0;
    text-transform: none;
    margin-left: 0.3rem;
  }
  .chapter-head-classic .ch-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.75rem auto;
    width: 52%;
    max-width: 400px;
    color: var(--border);
  }
  .chapter-head-classic .ch-divider::before,
  .chapter-head-classic .ch-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to var(--direction, right), transparent, var(--border) 40%, var(--border) 60%, transparent);
  }
  .chapter-head-classic .ch-divider::before {
    --direction: right;
    margin-right: 1.2rem;
  }
  .chapter-head-classic .ch-divider::after {
    --direction: left;
    margin-left: 1.2rem;
  }
  .chapter-head-classic .ch-divider span {
    font-size: 0.75rem;
    color: var(--accent);
    opacity: 0.8;
  }
  .chapter-head-classic .ch-chapter-num {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--accent);
    letter-spacing: 0.15em;
    margin-top: 0.45rem;
  }
  .chapter-head-classic .ch-chapter-num .ch-chapter-num-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: var(--text-md);
    color: var(--text-dim);
    margin-left: 0.6rem;
    letter-spacing: 0.05em;
  }
  .chapter-head-classic .chapter-head-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
  }

  .verses { display: flex; flex-direction: column; gap: 0.4rem; }

  /* ── 이 장의 맥락 카드 ── */
  .ctx-card { margin: 0 0 1rem; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: 14px; overflow: hidden; background: var(--card-bg, rgba(0,0,0,.015)); }
  .ctx-bar { width: 100%; display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; background: none; border: 0; cursor: pointer; font: inherit; color: var(--text, inherit); text-align: left; }
  .ctx-ic { width: 16px; height: 16px; flex: 0 0 auto; fill: var(--accent, #8a6d3b); opacity: .85; }
  .ctx-stage { font-weight: 600; font-size: .92rem; }
  .ctx-dot { opacity: .4; }
  .ctx-era-name { font-size: .86rem; color: var(--text-faint, #8a8a8a); }
  .ctx-chev { width: 16px; height: 16px; margin-left: auto; flex: 0 0 auto; transition: transform .25s; }
  .ctx-chev path { fill: none; stroke: var(--text-faint, #8a8a8a); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .ctx-card.open .ctx-chev { transform: rotate(180deg); }
  .ctx-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
  .ctx-card.open .ctx-body { max-height: 2400px; }
  .ctx-scope { display: flex; gap: 6px; margin: .2rem .8rem .35rem; }
  .ctx-scope button {
    font: inherit;
    font-size: .72rem;
    min-height: 34px;
    padding: .32rem .72rem;
    border: 1px solid var(--line, rgba(0,0,0,.12));
    background: transparent;
    color: var(--text-faint, #9a8a70);
    border-radius: 999px;
    cursor: pointer;
    line-height: 1.15;
    touch-action: manipulation;
  }
  .ctx-scope button.on { background: var(--accent, #8b6f3e); color: #fff; border-color: var(--accent, #8b6f3e); }
  .ctx-scope button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 2px;
  }
  .ctx-note { font-size: .76rem; color: var(--text-faint, #8a8a8a); margin: 0 .8rem .5rem; }
  .ctx-places { list-style: none; padding: 0; margin: 0 .8rem .6rem; display: flex; flex-direction: column; gap: .35rem; }
  .ctx-places li { font-size: .82rem; }
  .ctx-pl-name { font-weight: 600; }
  .ctx-pl-ref { margin-left: .4rem; font-size: .72rem; color: var(--accent, #8a6d3b); }
  .ctx-pl-desc { margin: .1rem 0 0; font-size: .76rem; color: var(--text-faint, #8a8a8a); line-height: 1.45; }
  .ctx-era { display: flex; gap: 3px; margin: 0 .8rem .7rem; }
  .ctx-era-seg { flex: 1; text-align: center; font-size: .66rem; padding: .25rem 0; border-radius: 6px; color: var(--text-faint, #9a9a9a); background: var(--line, rgba(0,0,0,.05)); }
  .ctx-era-seg.on { color: #fff; background: var(--accent, #b5482f); font-weight: 600; }
  .ctx-meta { font-size: .74rem; color: var(--text-faint, #8a8a8a); margin: 0 .8rem .7rem; }
  .verse-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
    position: relative;
    /* v467q — viewport 밖 verse 행 paint skip (성경 본문 200+ 절 성능) */
    content-visibility: auto;
    contain-intrinsic-size: auto 80px;
  }
  /* v399q — hover: 더 선명한 surface */
  .verse-row:hover,
  .verse-row:focus-visible {
    background: var(--surface);
    box-shadow: inset 2px 0 0 rgba(201,169,97,0.2);
  }
  /* v399q — active: accent 왼쪽 glow bar + 따뜻한 배경 */
  .verse-row.active {
    background: var(--surface-2);
    box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px rgba(201,169,97,0.08);
  }
  .verse-row.has-note::before {
    content: '';
    position: absolute;
    left: -4px; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%;
    background: var(--accent);
    border-radius: 2px;
  }
  .verse-row.has-voice::after,
  .verse-row.has-attachment::after {
    content: '';
    position: absolute;
    right: 6px; top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.6;
    pointer-events: none;
  }
  .verse-row.has-attachment:not(.has-voice)::after {
    background: var(--accent-dim);
  }
  .verse-row.has-attachment.has-voice::after {
    box-shadow: -10px 0 0 var(--accent-dim);
  }
  /* 깨끗한 읽기 모드 — 본문 옆 보조 마커 모두 숨김 */
  .reader.hide-markers .xref-badge { display: none; }
  .reader.hide-markers .verse-row.has-note::before { display: none; }
  .reader.hide-markers .verse-row.has-voice::after,
  .reader.hide-markers .verse-row.has-attachment::after { display: none; }
  .verse-row.hl-yellow { background: var(--hl-yellow); }
  .verse-row.hl-green { background: var(--hl-green); }
  .verse-row.hl-blue { background: var(--hl-blue); }
  .verse-row.hl-pink { background: var(--hl-pink); }
  :root:not([data-theme]) .verse-row.hl-yellow,
  [data-theme="dark"] .verse-row.hl-yellow,
  [data-theme="night"] .verse-row.hl-yellow {
    background: linear-gradient(90deg, rgba(241, 196, 15, 0.34), rgba(241, 196, 15, 0.16));
    box-shadow: inset 3px 0 0 rgba(255, 221, 87, 0.92), inset 0 0 0 1px rgba(255, 221, 87, 0.26);
  }
  :root:not([data-theme]) .verse-row.hl-green,
  [data-theme="dark"] .verse-row.hl-green,
  [data-theme="night"] .verse-row.hl-green {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.30), rgba(46, 204, 113, 0.14));
    box-shadow: inset 3px 0 0 rgba(93, 230, 146, 0.86), inset 0 0 0 1px rgba(93, 230, 146, 0.22);
  }
  :root:not([data-theme]) .verse-row.hl-blue,
  [data-theme="dark"] .verse-row.hl-blue,
  [data-theme="night"] .verse-row.hl-blue {
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.32), rgba(52, 152, 219, 0.14));
    box-shadow: inset 3px 0 0 rgba(112, 192, 255, 0.88), inset 0 0 0 1px rgba(112, 192, 255, 0.24);
  }
  :root:not([data-theme]) .verse-row.hl-pink,
  [data-theme="dark"] .verse-row.hl-pink,
  [data-theme="night"] .verse-row.hl-pink {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.30), rgba(231, 76, 60, 0.13));
    box-shadow: inset 3px 0 0 rgba(255, 123, 112, 0.86), inset 0 0 0 1px rgba(255, 123, 112, 0.22);
  }
  :root:not([data-theme]) .verse-row[class*="hl-"] .verse-num,
  [data-theme="dark"] .verse-row[class*="hl-"] .verse-num,
  [data-theme="night"] .verse-row[class*="hl-"] .verse-num {
    opacity: 0.96;
    color: var(--accent);
  }
  :root:not([data-theme]) .verse-row.hl-yellow:hover,
  :root:not([data-theme]) .verse-row.hl-yellow:focus-visible,
  [data-theme="dark"] .verse-row.hl-yellow:hover,
  [data-theme="dark"] .verse-row.hl-yellow:focus-visible,
  [data-theme="night"] .verse-row.hl-yellow:hover,
  [data-theme="night"] .verse-row.hl-yellow:focus-visible {
    background: linear-gradient(90deg, rgba(241, 196, 15, 0.42), rgba(241, 196, 15, 0.20));
    box-shadow: inset 3px 0 0 rgba(255, 221, 87, 0.98), inset 0 0 0 1px rgba(255, 221, 87, 0.34);
  }
  :root:not([data-theme]) .verse-row.hl-green:hover,
  :root:not([data-theme]) .verse-row.hl-green:focus-visible,
  [data-theme="dark"] .verse-row.hl-green:hover,
  [data-theme="dark"] .verse-row.hl-green:focus-visible,
  [data-theme="night"] .verse-row.hl-green:hover,
  [data-theme="night"] .verse-row.hl-green:focus-visible {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.38), rgba(46, 204, 113, 0.18));
    box-shadow: inset 3px 0 0 rgba(93, 230, 146, 0.94), inset 0 0 0 1px rgba(93, 230, 146, 0.30);
  }
  :root:not([data-theme]) .verse-row.hl-blue:hover,
  :root:not([data-theme]) .verse-row.hl-blue:focus-visible,
  [data-theme="dark"] .verse-row.hl-blue:hover,
  [data-theme="dark"] .verse-row.hl-blue:focus-visible,
  [data-theme="night"] .verse-row.hl-blue:hover,
  [data-theme="night"] .verse-row.hl-blue:focus-visible {
    background: linear-gradient(90deg, rgba(52, 152, 219, 0.40), rgba(52, 152, 219, 0.18));
    box-shadow: inset 3px 0 0 rgba(112, 192, 255, 0.96), inset 0 0 0 1px rgba(112, 192, 255, 0.32);
  }
  :root:not([data-theme]) .verse-row.hl-pink:hover,
  :root:not([data-theme]) .verse-row.hl-pink:focus-visible,
  [data-theme="dark"] .verse-row.hl-pink:hover,
  [data-theme="dark"] .verse-row.hl-pink:focus-visible,
  [data-theme="night"] .verse-row.hl-pink:hover,
  [data-theme="night"] .verse-row.hl-pink:focus-visible {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.38), rgba(231, 76, 60, 0.17));
    box-shadow: inset 3px 0 0 rgba(255, 123, 112, 0.94), inset 0 0 0 1px rgba(255, 123, 112, 0.30);
  }

  .verse-col { display: flex; gap: 0.6rem; align-items: flex-start; }
  .verse-num-wrap {
    display: flex; flex-direction: column; align-items: flex-end;
    min-width: 1.5rem;
    padding-top: 0.3rem;
    flex-shrink: 0;
    user-select: none;
  }
  .verse-num {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent);
    opacity: 0.6;
    line-height: 1;
    letter-spacing: 0.03em;
    /* v399q — superscript 느낌: 작고 위로 올림 */
    vertical-align: super;
    transition: opacity 0.15s, color 0.15s;
  }
  .verse-row:hover .verse-num,
  .verse-row.active .verse-num {
    opacity: 1;
    color: var(--accent);
  }
  .xref-badge {
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 500;
    color: var(--text-faint);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    padding: 0.05rem 0.3rem;
    margin-top: 0.25rem;
    cursor: pointer;
    line-height: 1.4;
    transition: all 0.15s;
  }
  .xref-badge:hover {
    color: var(--accent);
    background: var(--surface);
    border-color: var(--accent-dim);
  }
  .xref-badge.has-user {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: var(--bg);
  }
  .verse-text { flex: 1; }
  .verse-text.ko {
    font-family: var(--font-body-ko);
    font-size: var(--text-md);
    line-height: 1.95;
    word-break: keep-all;
  }
  .included-verse-note {
    color: var(--muted);
    font-size: 0.82em;
    font-style: italic;
  }
  .verse-text.en {
    font-family: var(--font-body-en);
    font-size: 1.15rem;
    line-height: var(--lh-verse);
    color: var(--text);
  }
  /* 본문 글꼴 옵션 — 한국어 */
  .reader.kfont-noto-serif { --font-body-ko: 'Noto Serif KR', serif; }
  .reader.kfont-nanum      { --font-body-ko: 'Nanum Myeongjo', 'Noto Serif KR', serif; }
  .reader.kfont-gowun      { --font-body-ko: 'Gowun Batang', 'Noto Serif KR', serif; }
  .reader.kfont-noto-sans  { --font-body-ko: 'Noto Sans KR', sans-serif; }
  /* 본문 글꼴 옵션 — 영어 */
  .reader.efont-cormorant  { --font-body-en: 'Cormorant Garamond', 'Georgia', serif; }
  .reader.efont-eb-garamond{ --font-body-en: 'EB Garamond', 'Georgia', serif; }
  .reader.efont-crimson    { --font-body-en: 'Crimson Text', 'Georgia', serif; }
  .reader.efont-noto-serif { --font-body-en: 'Noto Serif', 'Georgia', serif; }
  .verse-text .search-hl {
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    color: inherit;
    border-radius: var(--r-xs);
    padding: 1px 4px;
    margin: 0 1px;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
  }

  /* Strong's 단어 / Strong's word */
  .sword {
    cursor: help;
    border-bottom: 1px dotted transparent;
    transition: all 0.15s;
    touch-action: manipulation;
  }
  .reader.show-strong .sword {
    border-bottom-color: var(--strong-color);
  }
  .sword:hover {
    color: var(--strong-color);
    border-bottom-color: var(--strong-color) !important;
  }

  /* 단일 보기 / Single language */
  .reader.single-ko .verse-row { grid-template-columns: 1fr; }
  .reader.single-en .verse-row { grid-template-columns: 1fr; }
  .reader.single-ko .verse-col.en,
  .reader.single-en .verse-col.ko { display: none; }
  .reader.single-ko .verse-col.orig,
  .reader.single-en .verse-col.orig { display: none; }

  /* 3열 모드 — 원어 본문 표시 */
  .reader.show-orig .verse-row { grid-template-columns: 1fr 1fr 1fr; gap: 1.6rem; }
  .verse-text.orig {
    font-family: 'Noto Serif', serif;
    font-size: 1.18rem;
    line-height: var(--lh-verse);
    color: var(--text);
  }
  .verse-col.orig.lang-hebrew .verse-text.orig {
    font-family: 'Noto Serif Hebrew', 'SBL Hebrew', 'Noto Serif', serif;
    direction: rtl;
    text-align: right;
    font-size: 1.32rem;
    line-height: 2.05;
    unicode-bidi: embed;
  }
  .verse-col.orig.lang-hebrew .verse-num-wrap {
    align-items: flex-start;   /* RTL 절 번호 위치 보정 */
  }
  .verse-col.orig.lang-greek .verse-text.orig {
    font-family: 'Noto Serif', 'SBL Greek', serif;
  }

  /* ================================
     장 네비게이션 / Chapter nav
     ================================ */
  .chapter-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 3rem; padding-top: 2rem;
    border-top: 1px solid var(--border);
    gap: var(--space-4);
  }
  .chapter-nav button {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.9rem;
    transition: all 0.15s;
  }
  .chapter-nav button:hover:not(:disabled) {
    border-color: var(--accent-dim);
    background: var(--surface-2);
  }
  .chapter-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
  .chapter-nav-icon {
    width: 15px;
    height: 15px;
    stroke-width: 1.8;
    flex: 0 0 auto;
  }

  /* ================================
     로딩 / 에러
     ================================ */
  .state-msg {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
  }
  .state-msg .spinner {
    display: inline-block; width: 28px; height: 28px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 1rem;
  }
  .state-msg-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: var(--accent-dim);
  }
  @keyframes spin { to { transform: rotate(360deg); } }
  .state-msg button {
    margin-top: 1rem; padding: 0.58rem 1.25rem;
    min-height: 40px;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--surface); color: var(--text);
    touch-action: manipulation;
  }
  .state-msg button:hover { border-color: var(--accent); }
  .chapter-source-warning {
    margin: -0.15rem auto clamp(0.85rem, 1.6vw, 1.25rem);
    max-width: min(720px, calc(100vw - 2rem));
    width: fit-content;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.62rem;
    padding: 0.46rem 0.64rem;
    border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--text-dim);
    font-family: var(--font-ui);
    font-size: 0.76rem;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .chapter-source-warning button {
    appearance: none;
    border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 72%, var(--accent) 28%);
    color: var(--accent);
    padding: 0.24rem 0.56rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
  }
  .chapter-source-warning button:hover,
  .chapter-source-warning button:focus-visible {
    border-color: var(--accent);
    outline: none;
  }
  @media (max-width: 720px) {
    .chapter-source-warning {
      margin: 0 0.4rem 0.9rem;
      width: auto;
      max-width: none;
      display: flex;
      justify-content: space-between;
      gap: 0.55rem;
      padding: 0.52rem 0.62rem;
      font-size: 0.74rem;
      line-height: 1.36;
      text-align: left;
    }
    .chapter-source-warning span {
      min-width: 0;
      flex: 1 1 auto;
    }
    .chapter-source-warning button {
      flex: 0 0 auto;
      min-height: 36px;
      padding: 0.38rem 0.72rem;
      font-size: 0.72rem;
      line-height: 1.15;
    }
  }

  /* ================================
     모달 / Modal
     ================================ */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 100;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 4rem 1rem 2rem;
    overflow-y: auto;
  }
  .modal-overlay.open {
    display: flex;
    animation: overlayFadeIn 0.28s var(--ease-decelerate);
  }
  [data-theme="sepia"] .modal-overlay { background: rgba(58, 46, 32, 0.4); }
  [data-theme="light"] .modal-overlay { background: rgba(0, 0, 0, 0.3); }
  /* v290 — 시네마틱 페이드: 부드러운 ease + 약간 긴 시간 (영화 장면 전환 무드) */
  @keyframes overlayFadeIn {
    0%   { opacity: 0; backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
    100% { opacity: 1; }
  }
  /* v399q — 모달 진입: scale + translateY 콤보 (더 살아있는 느낌) */
  .modal-overlay.open > .modal,
  .modal-overlay.open > .note-workspace-modal {
    animation: modalRise 0.28s var(--ease-spring);
  }
  @keyframes modalRise {
    0%   { opacity: 0; transform: translateY(16px) scale(0.97); }
    60%  { opacity: 1; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* v399q — 노트 본문 영역 진입 페이드 */
  .note-page,
  .cou-note-content,
  .worship-page {
    animation: noteEnter 0.32s var(--ease-decelerate);
  }
  @keyframes noteEnter {
    0%   { opacity: 0.3; transform: translateY(6px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  /* 사용자가 reduced motion 원하면 모든 시네마틱 애니 short-circuit */
  @media (prefers-reduced-motion: reduce) {
    .modal-overlay.open,
    .modal-overlay.open > .modal,
    .modal-overlay.open > .note-workspace-modal,
    .note-page, .cou-note-content, .worship-page,
    .empty-with-verse, .empty-with-verse * {
      animation: none !important;
    }
  }
  /* v272 — 커스텀 confirm 다이얼로그 (브라우저 native await customConfirm() 대체).
     글래스 + 페이퍼 톤 통일. native 의 "origin 헤더" ("bible-reader-acq...") 없음. */
  .custom-confirm-overlay {
    align-items: center;
    padding: 1rem;
  }
  .custom-confirm-dialog {
    width: 100%;
    max-width: 360px;
    background: rgba(var(--surface-rgb),0.98);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid color-mix(in srgb, #ffffff 35%, transparent);
    border-top-color: color-mix(in srgb, #ffffff 55%, transparent);
    border-bottom-color: color-mix(in srgb, var(--paper-meta, var(--border)) 22%, transparent);
    border-radius: 14px;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #ffffff 30%, transparent),
      0 1px 2px color-mix(in srgb, var(--paper-ink, #000) 8%, transparent),
      0 24px 60px -16px color-mix(in srgb, var(--paper-ink, #000) 30%, transparent);
    animation: ccPop 0.2s ease-out;
  }
  /* v473 — 테마 분기: light/sepia 에서 검정 위 검정 텍스트 안 보이던 버그 fix */
  [data-theme="sepia"] .custom-confirm-dialog {
    background: var(--paper-bg-1, var(--surface));
    border: 1px solid var(--border);
    border-top-color: color-mix(in srgb, var(--border) 80%, transparent);
    border-bottom-color: var(--border);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #ffffff 40%, transparent),
      0 24px 60px -16px rgba(58,46,32,0.3);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  [data-theme="light"] .custom-confirm-dialog {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow:
      0 24px 60px -16px rgba(0,0,0,0.18),
      0 8px 24px -8px rgba(0,0,0,0.08);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* light/sepia 의 cancel 버튼 — dark 톤 (rgba(255,255,255,*)) 으로는 light bg 에서 안 보임 */
  [data-theme="sepia"] .custom-confirm-btn.cc-cancel,
  [data-theme="light"] .custom-confirm-btn.cc-cancel {
    background: color-mix(in srgb, var(--text) 5%, transparent);
    border: 1px solid var(--border);
    color: var(--text-dim);
  }
  [data-theme="sepia"] .custom-confirm-btn.cc-cancel:hover,
  [data-theme="light"] .custom-confirm-btn.cc-cancel:hover {
    background: color-mix(in srgb, var(--text) 10%, transparent);
    color: var(--text);
    border-color: var(--text-faint);
  }
  @keyframes ccPop {
    from { opacity: 0; transform: scale(0.96) translateY(6px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  .custom-confirm-body {
    padding: 1.4rem 1.5rem 1.1rem;
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
    letter-spacing: 0.012em;
    word-break: keep-all;
    text-align: left;
  }
  .custom-prompt-control-wrap {
    padding: 0 1.5rem 1rem;
  }
  .custom-prompt-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.55;
    outline: 0;
    box-sizing: border-box;
  }
  .custom-prompt-input:focus {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .custom-prompt-textarea {
    min-height: 112px;
    max-height: 42vh;
    resize: vertical;
  }
  .custom-confirm-actions {
    display: flex; gap: var(--space-2);
    padding: 0 1rem 1rem;
    justify-content: flex-end;
  }
  .custom-confirm-btn {
    appearance: none;
    -webkit-appearance: none;
    font-family: -apple-system, "Apple SD Gothic Neo", "Pretendard Variable", sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.6rem 1.35rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.18s var(--ease-standard);
    min-width: 80px;
  }
  .custom-confirm-btn.cc-cancel {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: #98989d;
  }
  .custom-confirm-btn.cc-cancel:hover {
    background: rgba(255,255,255,0.08);
    color: #f5f5f7;
    border-color: rgba(255,255,255,0.12);
  }
  .custom-confirm-btn.cc-ok {
    background: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--accent-fg);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.2);
  }
  .custom-confirm-btn.cc-ok:hover {
    background: #d4b574;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(201,169,97,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
  }
  .custom-confirm-btn.cc-ok.cc-danger {
    background: #e74c3c;
    border: 1px solid rgba(231,76,60,0.5);
    color: #fff;
    box-shadow: 0 2px 8px rgba(231,76,60,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .custom-confirm-btn.cc-ok.cc-danger:hover {
    background: #ef5a4a;
    border-color: #a85a48;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231,76,60,0.4),
                inset 0 1px 0 color-mix(in srgb, #ffffff 25%, transparent);
  }
  .custom-confirm-btn:active { transform: scale(0.97); }
  .custom-confirm-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent);
    outline-offset: 2px;
  }

  .modal {
    background: rgba(var(--surface-rgb),0.98);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04),
      0 32px 80px -16px rgba(0,0,0,0.6),
      0 16px 40px -8px rgba(0,0,0,0.4);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    width: 100%;
    max-width: 720px;
    overflow: hidden;
    animation: modalSlideUp 0.32s var(--ease-spring);
  }
  /* v432 — 세피아/라이트 테마 모달 스타일 */
  [data-theme="sepia"] .modal {
    background: var(--paper-bg-1);
    border: 1px solid var(--border);
    box-shadow: 0 16px 48px -12px rgba(58,46,32,0.25);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  [data-theme="light"] .modal {
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 16px 48px -12px rgba(0,0,0,0.15);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  @keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  /* 모바일 — 바닥에서 올라오는 시트 같은 느낌 */
  @media (max-width: 600px) {
    @keyframes modalSlideUp {
      from { opacity: 0; transform: translateY(40px) scale(0.98); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
  }
  .modal-head {
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; justify-content: space-between; align-items: center;
  }
  [data-theme="sepia"] .modal-head,
  [data-theme="light"] .modal-head {
    border-bottom: 1px solid var(--border);
  }
  .modal-head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    color: #f5f5f7;
  }
  [data-theme="sepia"] .modal-head h2 { color: var(--paper-ink); }
  [data-theme="light"] .modal-head h2 { color: #1a1a1a; }
  .modal-head h2 .ko { font-family: 'Noto Serif KR', serif; }
  /* v189 — lookup의 dynamic 키워드 등 sub-title (em → span) */
  .modal-head h2 .modal-head-sub {
    margin-left: 0.6rem;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    font-weight: 400;
    color: #98989d;
    letter-spacing: 0.01em;
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
  }

  /* 스크롤바 마감 고도화 */
  .picker-categorized::-webkit-scrollbar,
  .picker-verse-grid::-webkit-scrollbar,
  .concord-list::-webkit-scrollbar,
  .search-results::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .picker-categorized::-webkit-scrollbar-track,
  .picker-verse-grid::-webkit-scrollbar-track,
  .concord-list::-webkit-scrollbar-track,
  .search-results::-webkit-scrollbar-track {
    background: transparent;
  }
  .picker-categorized::-webkit-scrollbar-thumb,
  .picker-verse-grid::-webkit-scrollbar-thumb,
  .concord-list::-webkit-scrollbar-thumb,
  .search-results::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-radius: var(--r-full);
  }
  .picker-categorized::-webkit-scrollbar-thumb:hover,
  .picker-verse-grid::-webkit-scrollbar-thumb:hover,
  .concord-list::-webkit-scrollbar-thumb:hover,
  .search-results::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
  }

  /* v322c+ — 데스크탑 picker Apple 톤 통일.
     모달 안 변수 override (통독 모달과 같은 grouped insets 패턴),
     글래스모피즘 폐기, 시스템 sans-serif. */
  /* v351c — light/dark 분기 뒤집기: :root default dark 환경 통일.
     기본 dark Apple 톤 + [data-theme="light"]/["sepia"] 명시 시만 light. */
  #picker-modal {
    --paper-bg-1: #1c1c1e;
    --paper-bg-2: #2c2c2e;
    --paper-ink: #f5f5f7;
    --paper-meta: #98989d;
    --paper-ref: #2c2c2e;
    --surface: #1c1c1e;
    --surface-2: #2c2c2e;
    --border: #38383a;
    --text: #f5f5f7;
    --text-dim: #98989d;
    --text-faint: #6e6e73;
    font-family: -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0;
    -webkit-font-smoothing: auto;
    -moz-osx-font-smoothing: auto;
    text-rendering: optimizeLegibility;
  }
  [data-theme="light"] #picker-modal {
    --paper-bg-1: #ffffff;
    --paper-bg-2: #f5f5f7;
    --paper-ink: #1d1d1f;
    --paper-meta: #6e6e73;
    --paper-ref: #f5f5f7;
    --surface: #ffffff;
    --surface-2: #f5f5f7;
    --border: #d2d2d7;
    --text: #1d1d1f;
    --text-dim: #6e6e73;
    --text-faint: #aeaeb2;
  }
  [data-theme="sepia"] #picker-modal {
    --paper-bg-1: #faf6eb;
    --paper-bg-2: #f0e8d2;
    --paper-ink: #3a2e20;
    --paper-meta: #8b7355;
    --paper-ref: #f0e8d2;
    --surface: #faf6eb;
    --surface-2: #f0e8d2;
    --border: #d4c5a9;
    --text: #3a2e20;
    --text-dim: #8b7355;
    --text-faint: #a89070;
  }
  /* 모든 자식의 박힌 font-family 무력화 (button/input/select 포함) */
  #picker-modal,
  #picker-modal * {
    font-family: inherit;
  }
  /* v328c+ — picker 진짜 풀스크린 (selector specificity + !important 강제).
     이전 .scripture-picker 정의가 부모 .modal-overlay/.modal 또는 외부 도구 변경에
     밀려서 모달 식으로 보이던 문제 근본 해결. 룰 1: 디바이스 분기 폐기 + 통일. */
  .modal-overlay#picker-modal,
  .modal-overlay#picker-modal.open {
    padding: 0 !important;
    background: transparent !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }
  .modal-overlay#picker-modal .scripture-picker,
  .modal-overlay#picker-modal.open .scripture-picker {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
    background: var(--picker-bg, #1c1c1e) !important;
    transition: opacity 0.22s ease;
    display: flex;
    flex-direction: column;
  }
  /* v428 — picker 전체 다크 모드 하드코딩 (변수 의존성 제거) */
  #picker-modal,
  #picker-modal .scripture-picker,
  #picker-modal .scripture-picker * {
    --picker-bg: #1c1c1e !important;
    --picker-bg-alt: #2c2c2e !important;
    --picker-text: #f5f5f7 !important;
    --picker-text-dim: #98989d !important;
    --picker-border: #38383a !important;
    --picker-accent: #c9a961 !important;
  }
  /* v431 — 라이트 테마 picker */
  [data-theme="light"] #picker-modal,
  [data-theme="light"] #picker-modal .scripture-picker,
  [data-theme="light"] #picker-modal .scripture-picker * {
    --picker-bg: #ffffff !important;
    --picker-bg-alt: #f5f5f7 !important;
    --picker-text: #1d1d1f !important;
    --picker-text-dim: #6e6e73 !important;
    --picker-border: #d2d2d7 !important;
    --picker-accent: #c9a961 !important;
  }
  /* v431 — 세피아 테마 picker (따뜻한 베이지 톤) */
  [data-theme="sepia"] #picker-modal,
  [data-theme="sepia"] #picker-modal .scripture-picker,
  [data-theme="sepia"] #picker-modal .scripture-picker * {
    --picker-bg: #faf6eb !important;
    --picker-bg-alt: #f0e8d2 !important;
    --picker-text: #3a2e20 !important;
    --picker-text-dim: #8b7355 !important;
    --picker-border: #d4c5a9 !important;
    --picker-accent: #b8941f !important;
  }
  /* v728 — 밤하늘 테마 picker: 앱 전체 night 변수와 같은 별빛 톤으로 묶기 */
  [data-theme="night"] #picker-modal,
  [data-theme="night"] #picker-modal .scripture-picker,
  [data-theme="night"] #picker-modal .scripture-picker * {
    --picker-bg: var(--bg) !important;
    --picker-bg-alt: var(--surface) !important;
    --picker-text: var(--text) !important;
    --picker-text-dim: var(--text-dim) !important;
    --picker-border: var(--border) !important;
    --picker-accent: var(--accent) !important;
  }
  #picker-books-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--picker-bg-alt, #2c2c2e) !important;
  }
  [data-theme="light"] #picker-books-view {
    background: var(--picker-bg-alt, #f5f5f7) !important;
  }
  [data-theme="sepia"] #picker-books-view {
    background: var(--picker-bg-alt, #f0e8d2) !important;
  }
  .scripture-picker .modal-head {
    padding: 1.1rem 1.25rem;
    background: var(--picker-bg, #1c1c1e) !important;
    border-bottom: 1px solid var(--picker-border, #38383a);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
  }
  /* v330c+ — 타이틀 가독성 강화: weight 700 + 진한 #000 + letter-spacing 0 (흐림 보고 대응) */
  .scripture-picker .modal-head h2 {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--picker-text, #f5f5f7) !important;
  }
  .picker-current-strip {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--picker-border, #38383a);
    background: var(--picker-bg, #1c1c1e) !important;
  }
  .picker-current-title {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--picker-text, #f5f5f7) !important;
    line-height: var(--lh-tight);
    letter-spacing: 0;
  }
  .picker-current-meta {
    margin-top: 0.15rem;
    font-size: 0.78rem;
    color: var(--picker-text-dim, #98989d) !important;
  }
  /* v322c+ — 액션 버튼: accent 베이지 → 검정 ink (흰 배경에서 묻힘 해소) */
  .picker-current-action,
  .picker-chapter-action {
    min-height: 44px;
    border: 1px solid var(--picker-accent, #c9a961);
    border-radius: var(--r-md);
    padding: 0.4rem 0.85rem;
    color: #1a150a !important;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    background: var(--picker-accent, #c9a961) !important;
    box-shadow: none;
    transition: opacity 0.18s ease, transform 0.12s ease;
    cursor: pointer;
  }
  .picker-current-action:hover,
  .picker-chapter-action:hover {
    opacity: 0.85;
  }
  .picker-current-action:active,
  .picker-chapter-action:active {
    transform: scale(0.96);
  }
  .picker-search-row {
    padding: 0.85rem 1.25rem;
    background: var(--picker-bg, #1c1c1e) !important;
    border-bottom: 1px solid var(--picker-border, #38383a);
    display: grid;
    gap: 0.52rem;
  }
  .picker-search {
    width: 100%;
    min-height: 42px;
    padding: 0 0.9rem;
    background: var(--picker-bg-alt, #2c2c2e) !important;
    border: 1px solid var(--picker-border, #38383a);
    border-radius: 12px;
    color: var(--picker-text, #f5f5f7) !important;
    font-size: 0.92rem;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  }
  .picker-search::placeholder { color: var(--picker-text-dim, #98989d); opacity: 0.7; }
  .picker-search:focus {
    outline: none;
    border-color: var(--picker-accent, #c9a961);
    background: var(--picker-bg, #1c1c1e) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--picker-accent, #c9a961) 12%, transparent);
  }
  .picker-quick-samples {
    margin-top: 0;
    display: grid;
    grid-template-columns: auto repeat(3, max-content);
    justify-content: start;
    gap: 0.36rem;
    align-items: center;
    font-size: 0.76rem;
    color: var(--picker-text-dim, #98989d) !important;
  }
  .picker-quick-samples span {
    padding-right: 0.22rem;
  }
  .picker-quick-samples button {
    border: 1px solid var(--picker-border, #38383a);
    border-radius: var(--r-full);
    min-height: 28px;
    padding: 0 0.66rem;
    color: var(--picker-text-dim, #98989d) !important;
    background: var(--picker-bg-alt, #2c2c2e) !important;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
  }
  .picker-quick-samples button:hover {
    color: var(--picker-text, #f5f5f7) !important;
    border-color: var(--picker-accent, #c9a961);
    background: var(--picker-bg, #1c1c1e) !important;
  }
  /* v326c+ — picker-route: 풀스크린에 맞춰 flex 채움. 책/장/절 영역 화면 전체 활용 */
  .picker-route {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.7fr) minmax(0, 0.7fr);
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    background: var(--picker-bg-alt, #2c2c2e) !important;
    overflow: hidden;
  }
  .picker-panel,
  .picker-books-column,
  .picker-chapters-view,
  .picker-verses-view {
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--picker-bg, #1c1c1e) !important;
    overflow-x: hidden;
  }
  .picker-books-column,
  .picker-chapters-view {
    border-right: 1px solid var(--picker-border);
  }
  .picker-panel-head,
  .picker-chapter-head {
    padding: 0.85rem 1rem 0.75rem;
    border-bottom: 1px solid var(--picker-border, #38383a);
    background: var(--picker-bg, #1c1c1e) !important;
  }
  .picker-verse-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
  }
  .picker-panel-title,
  .picker-chapter-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--picker-text, #f5f5f7) !important;
    letter-spacing: 0;
  }
  .picker-panel-sub,
  .picker-chapter-sub {
    margin-top: 0.12rem;
    font-size: var(--text-xs);
    color: var(--picker-text-dim, #98989d) !important;
  }
  .picker-chapter-hint {
    margin-top: 0.4rem;
    font-size: var(--text-xs);
    color: var(--picker-text-dim, #98989d) !important;
  }
  /* v322c+ — testament-tabs: pill 단순화 (베이지 → 검정·회색 톤) */
  .testament-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.2rem;
    padding: 0.3rem;
    background: var(--picker-bg-alt, #2c2c2e) !important;
    border-radius: 10px;
    margin: 0.65rem 0.75rem 0.5rem;
    border: 1px solid var(--picker-border, #38383a);
  }
  .testament-tabs button {
    min-height: 44px;
    padding: 0.55rem 0.2rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--picker-text-dim, #98989d) !important;
    border: 0;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    transition: color 0.18s ease, background 0.18s ease;
  }
  .testament-tabs button.active {
    color: var(--picker-text, #f5f5f7) !important;
    background: var(--picker-bg, #1c1c1e) !important;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--picker-text, #f5f5f7) 8%, transparent);
  }
  .testament-tabs button:hover:not(.active) {
    color: var(--picker-text, #f5f5f7) !important;
    background: color-mix(in srgb, var(--picker-text, #f5f5f7) 4%, transparent);
  }
  .picker-recent {
    flex: 0 0 auto;
    padding: 0 0.75rem 0.5rem;
  }
  .picker-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: 0.35rem 0 0.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--picker-border, #38383a);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--picker-text, #f5f5f7) !important;
    letter-spacing: 0;
    text-transform: none;
  }
  .picker-section-label .ko-name {
    font-size: var(--text-xs);
    color: var(--picker-text-dim, #98989d) !important;
    font-weight: 500;
  }
  .picker-recent-list { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0; }
  /* v329c+ — grid minmax 에 min() 함수: 컨테이너 < 260px 시 1 col 100%,
     ≥ 260 시 여러 col. 모바일 가로 스크롤 제거 (사용자 보고). overflow-x: hidden 안전벨트. */
  .picker-categorized {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0.5rem 1rem 0.85rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
    gap: 0;
    align-content: start;
  }
  .picker-cat {
    display: contents;
  }
  .picker-cat .picker-section-label {
    grid-column: 1 / -1;
    margin: 0.5rem 0 0.25rem;
  }
  .picker-cat .picker-cat-books {
    display: contents;
  }
  /* v325c+ — picker book list: 갓피플 식 1열 항상 (디바이스 분기 폐기) */
  .picker-cat-books,
  .picker-cat-books.flat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }
  /* v325c+ — recent-chip 그대로 chip 식, book-item 은 1열 list-row 갓피플 식 */
  .recent-chip {
    background: var(--picker-bg, #1c1c1e) !important;
    border: 1px solid var(--picker-border, #38383a);
    border-radius: var(--r-full);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    color: var(--picker-text-dim, #98989d) !important;
    font-size: var(--text-sm);
    cursor: pointer;
    box-shadow: none;
    transition: border-color 0.18s ease, background 0.18s ease;
  }
  .recent-chip:hover {
    border-color: var(--picker-accent, #c9a961);
    background: var(--picker-bg-alt, #2c2c2e) !important;
  }
  .recent-chip .rc-ko { color: var(--picker-text, #f5f5f7) !important; font-weight: 600; }
  .recent-chip .rc-num { color: var(--picker-text, #f5f5f7) !important; font-weight: 700; }
  /* v327c+ — book-item 콤팩트 (60→48px) + multi-column 안 자연스럽게 흐름.
     [축약자(빨강)] [한국명(굵게)] [영문명(회색)] 한 줄 식 유지 */
  .book-item {
    min-height: 48px;
    padding: 0.55rem 0.8rem;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--picker-border, #38383a) 60%, transparent);
    border-radius: 0;
    background: var(--picker-bg, #1c1c1e) !important;
    display: grid;
    grid-template-columns: 34px 1fr;
    column-gap: var(--space-3);
    align-items: center;
    text-align: left;
    box-shadow: none;
    cursor: pointer;
    overflow: hidden;
    transition: background 0.15s ease;
    animation: pickerItemFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .book-item:hover,
  .book-item:active {
    background: var(--picker-bg-alt);
  }
  .book-item.current {
    background: color-mix(in srgb, var(--picker-accent) 12%, var(--picker-bg));
    border-bottom-color: color-mix(in srgb, var(--picker-accent) 18%, transparent);
  }
  /* v327c+ — 폰트도 콤팩트하게 (48px 카드에 맞춤) */
  .book-item .abbr {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--text-sm);
    color: #e84a4a;
    letter-spacing: -0.02em;
    line-height: 1;
  }
  .book-item .book-main {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    align-items: flex-start;
  }
  .book-item .ko {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--picker-text, #f5f5f7) !important;
    line-height: 1.18;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0;
  }
  .book-item .en {
    display: block;
    font-size: var(--text-xs);
    color: var(--picker-text-dim, #98989d) !important;
    line-height: 1.18;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .chapter-grid,
  .picker-verse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 0.4rem;
    padding: 0.85rem;
    overflow-y: auto;
    align-content: start;
    min-height: 0;
  }
  /* v322c+ — chapter/verse item: accent 베이지 → ink 톤. current = 검정 사각형 */
  .chapter-item,
  .verse-item {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--picker-bg, #1c1c1e) !important;
    border: 1px solid var(--picker-border, #38383a);
    border-radius: var(--r-md);
    color: var(--picker-text, #f5f5f7) !important;
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.12s ease;
    cursor: pointer;
    animation: pickerItemFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes pickerItemFadeIn {
    0% { opacity: 0; transform: scale(0.92) translateY(2px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
  .chapter-item:hover,
  .verse-item:hover {
    border-color: var(--picker-accent);
    background: var(--picker-bg-alt);
    transform: scale(1.04);
  }
  .chapter-item.target,
  .verse-item.target {
    border-color: var(--picker-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--picker-accent) 12%, transparent);
  }
  .chapter-item.current,
  .verse-item.current {
    border-color: var(--picker-accent);
    color: var(--picker-bg);
    background: var(--picker-accent);
    box-shadow: none;
  }
  .picker-verse-loading,
  .picker-empty {
    grid-column: 1 / -1;
    width: 100%;
    box-sizing: border-box;
    padding: 1.25rem;
    color: var(--picker-text-dim);
    font-size: var(--text-sm);
    line-height: var(--lh-normal);
    text-align: center;
  }
  .picker-empty-action {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.85rem;
    min-height: 34px;
    padding: 0 0.9rem;
    border: 1px solid var(--picker-accent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--picker-accent) 12%, transparent);
    color: var(--picker-accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
  .picker-empty-action:hover,
  .picker-empty-action:focus-visible {
    background: var(--picker-accent);
    color: var(--picker-bg);
    outline: none;
  }
  .picker-mobile-keypad { display: none; }

  @media (min-width: 721px) {
    .modal-overlay#picker-modal,
    .modal-overlay#picker-modal.open {
      padding: 22px !important;
      background: color-mix(in srgb, #000 34%, transparent) !important;
      align-items: flex-start !important;
      justify-content: center !important;
      overflow: hidden !important;
    }
    .modal-overlay#picker-modal .scripture-picker,
    .modal-overlay#picker-modal.open .scripture-picker {
      width: min(1180px, calc(100vw - 44px)) !important;
      height: min(760px, calc(100dvh - 44px)) !important;
      max-width: min(1180px, calc(100vw - 44px)) !important;
      max-height: calc(100dvh - 44px) !important;
      margin: 0 !important;
      border-radius: 18px !important;
      border: 1px solid color-mix(in srgb, var(--picker-accent) 18%, var(--picker-border)) !important;
      box-shadow:
        0 24px 80px color-mix(in srgb, #000 34%, transparent),
        0 1px 0 color-mix(in srgb, var(--picker-text) 9%, transparent) inset !important;
      overflow: hidden;
    }
    .scripture-picker .modal-head {
      min-height: 56px;
      padding: 0.78rem 1.05rem;
      border-bottom-color: color-mix(in srgb, var(--picker-border) 82%, transparent);
    }
    .scripture-picker .modal-head h2 {
      font-size: 1rem;
      letter-spacing: 0;
    }
    .scripture-picker .modal-head-iconbtn {
      width: 36px;
      height: 36px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--picker-bg-alt) 72%, transparent);
    }
    .picker-current-strip {
      padding: 0.66rem 1.05rem;
      border-bottom-color: color-mix(in srgb, var(--picker-border) 74%, transparent);
    }
    .picker-current-action,
    .picker-chapter-action {
      min-height: 38px;
      border-radius: 999px;
    }
    .picker-search-row {
      padding: 0.7rem 1.05rem 0.78rem;
      border-bottom-color: color-mix(in srgb, var(--picker-border) 74%, transparent);
    }
    .picker-search {
      min-height: 40px;
      border-color: color-mix(in srgb, var(--picker-border) 78%, transparent);
      box-shadow: inset 0 1px 0 color-mix(in srgb, var(--picker-text) 4%, transparent);
    }
    .picker-route {
      grid-template-columns: minmax(330px, 1.04fr) minmax(210px, 0.68fr) minmax(230px, 0.78fr);
      border-top: 0;
    }
    .picker-categorized {
      padding: 0.5rem 0.72rem 0.72rem;
      grid-template-columns: 1fr;
    }
    .picker-section-label {
      position: sticky;
      top: 0;
      z-index: 1;
      margin-top: 0;
      padding: 0.42rem 0.5rem 0.36rem;
      background: color-mix(in srgb, var(--picker-bg) 88%, transparent) !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-bottom-color: color-mix(in srgb, var(--picker-border) 62%, transparent);
    }
    .book-item {
      min-height: 42px;
      padding: 0.46rem 0.62rem;
      grid-template-columns: 32px 1fr;
      border-radius: 10px;
      border-bottom: 1px solid color-mix(in srgb, var(--picker-border) 46%, transparent);
    }
    .book-item:hover,
    .book-item:focus-visible {
      background: color-mix(in srgb, var(--picker-accent) 10%, var(--picker-bg-alt)) !important;
      outline: none;
    }
    .book-item.current {
      box-shadow: inset 3px 0 0 var(--picker-accent);
    }
    .book-item .ko {
      font-size: 0.92rem;
    }
    .chapter-grid,
    .picker-verse-grid {
      grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
      gap: 0.32rem;
      padding: 0.72rem;
    }
    .chapter-item,
    .verse-item {
      border-radius: 10px;
      font-size: 0.84rem;
    }
    .chapter-item:hover,
    .chapter-item:focus-visible,
    .verse-item:hover,
    .verse-item:focus-visible {
      border-color: var(--picker-accent);
      background: color-mix(in srgb, var(--picker-accent) 10%, var(--picker-bg-alt)) !important;
      outline: none;
      transform: translateY(-1px);
    }
    .picker-route.step-chapter .picker-chapters-view,
    .picker-route.step-verse .picker-verses-view {
      box-shadow: inset 3px 0 0 color-mix(in srgb, var(--picker-accent) 72%, transparent);
    }
  }

  /* ================================
     AI 종합 분석 모달
     ================================ */
  .synth-modal-body { max-width: 820px; }
  .synth-prompt {
    padding: 1rem 1.25rem 0.85rem;
    border-bottom: 1px solid var(--border);
  }
  .synth-prompt textarea {
    width: 100%;
    min-height: 90px;
    padding: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    line-height: 1.65;
    resize: vertical;
  }
  .synth-prompt textarea:focus { border-color: var(--accent-dim); outline: none; }
  .synth-prompt-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0.6rem;
    gap: var(--space-2);
  }
  .synth-stats {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
  }
  .synth-go-btn {
    padding: 0.55rem 1.1rem;
    background: var(--accent);
    color: var(--bg);
    border-radius: var(--r-md);
    border: 0;
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    font-size: 0.9rem;
  }
  .synth-go-btn:hover { background: var(--accent-dim); }
  .synth-go-btn:disabled { opacity: 0.5; cursor: default; }
  .synth-result {
    max-height: 60vh;
    overflow-y: auto;
    padding: 1.1rem 1.4rem;
  }
  .synth-result h2, .synth-result h3, .synth-result h4 {
    font-family: 'Noto Serif KR', serif;
    color: var(--accent);
    margin-top: 1.1rem;
    margin-bottom: 0.4rem;
  }
  .synth-result h3 { font-size: 1rem; font-weight: 600; }
  .synth-result h2:first-child, .synth-result h3:first-child { margin-top: 0; }
  .synth-result p {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    line-height: 1.78;
    color: var(--text);
    margin-bottom: 0.6rem;
    word-break: keep-all;
  }
  .synth-result ul {
    margin: 0.4rem 0 0.7rem 1.2rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.9rem;
    line-height: var(--lh-loose);
  }
  .synth-result strong { color: var(--accent); font-weight: 600; }
  .synth-result em { font-style: italic; color: var(--text-dim); }
  .synth-result a.note-link {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px dashed var(--accent-dim);
    cursor: pointer;
  }
  .synth-result a.note-link:hover { border-bottom-style: solid; }

  /* ================================
     예배 노트 모달
     ================================ */
  .worship-modal-body { max-width: 820px; }
  .worship-pane { padding: 0; }

  /* 리스트 뷰 */
  /* List head — primary + secondary 액션, count는 메타 톤 */
  /* v581 — 리스트 헤더 리디자인 */
  .worship-list-head {
    display: flex; align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    gap: 10px;
    min-height: 52px;
    flex-wrap: nowrap;
    overflow: hidden;
  }
  .worship-new-btn {
    padding: 8px 16px;
    background: var(--accent);
    color: var(--bg);
    border-radius: var(--r-lg);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    font-weight: 600;
    border: 0;
    cursor: pointer;
    transition: filter 0.12s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .worship-new-btn:hover { filter: brightness(1.08); }
  .worship-new-btn:active { transform: scale(0.97); }
  /* AI 종합 = secondary outline (시각 충돌 줄임) */
  .worship-synth-btn {
    padding: 8px 14px;
    background: transparent;
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--r-lg);
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: all 0.12s;
    -webkit-tap-highlight-color: transparent;
    justify-content: center;
    height: 42px;
    line-height: 1;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  .worship-synth-btn:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .worship-synth-btn:active { transform: scale(0.97); }
  .worship-synth-btn svg { width: 16px; height: 16px; }
  .worship-list-count {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-left: auto;
    letter-spacing: var(--ls-wide);
  }

  /* Toolbar — 검색 + 카테고리 + 태그 */
  /* v581 — 카테고리/태그 툴바 */
  .worship-toolbar {
    padding: 12px;
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 10px;
  }
  .worship-toolbar-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-direction: row;
  }
  .worship-search-fill {
    flex: 1 1 auto;
    min-width: 0;
  }
  .layout-flex-spacer {
    flex: 1 1 auto;
    min-width: 0;
  }
  .draw-toolbar-actions {
    margin-left: auto;
  }
  .couple-prayer-compose-row {
    gap: 6px;
  }
  .couple-prayer-add-btn {
    padding: 7px 10px;
  }
  .couple-prayer-add-icon {
    width: 14px;
    height: 14px;
    display: block;
  }
  /* v581 — 예배노트 검색바 (pill, 42px) */
  .worship-search {
    width: 100%;
    padding: 10px 16px;
    background: color-mix(in srgb, var(--text-faint) 6%, transparent);
    border: 1.5px solid transparent;
    border-radius: var(--r-full);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    height: 42px;
    transition: all 0.15s;
  }
  .worship-search:focus {
    border-color: var(--accent);
    background: var(--surface);
    outline: none;
  }
  .worship-search::placeholder { color: var(--text-faint); }

  /* Cat chips + tag chips — 통일된 디자인 시스템 (색·active만 다름) */
  .worship-cat-chips,
  .worship-toolbar .worship-tag-chips {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin: 0;
  }
  /* v581 — 칩: 더 큰 터치 타겟, pill 디자인 */
  .cat-chip,
  .worship-toolbar .tag-chip {
    appearance: none;
    -webkit-appearance: none;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--text-faint) 28%, transparent);
    border-radius: var(--r-full);
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all 0.12s;
    display: inline-flex; align-items: center; gap: 5px;
    line-height: 1.4;
  }
  .cat-chip:hover,
  .cat-chip:focus-visible,
  .worship-toolbar .tag-chip:hover,
  .worship-toolbar .tag-chip:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--text);
  }
  .cat-chip:focus-visible,
  .worship-toolbar .tag-chip:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 2px;
  }
  .cat-chip.active,
  .worship-toolbar .tag-chip.active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 500;
  }
  .cat-chip .count,
  .worship-toolbar .tag-chip .count {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    color: var(--text-faint);
    opacity: 1;
    margin-left: 0;
    padding: 1px 5px;
    background: color-mix(in srgb, var(--text-faint) 12%, transparent);
    border-radius: var(--r-sm);
    line-height: 1;
  }
  .cat-chip.active .count,
  .worship-toolbar .tag-chip.active .count {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
  }

  .worship-list {
    /* v179 fix — max-height 60vh 제거: 모달 본문 전체 차지 (모바일·tablet 빈 공간 사라짐) */
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 20px;
  }
  /* list-pane이 flex column으로 child 차지 보장 */
  #worship-list-pane {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
  }
  .worship-month-group {
    margin-top: 28px;
  }
  .worship-month-group:first-child { margin-top: 8px; }
  .worship-month-head {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    color: var(--text);
    padding: 8px 4px 12px;
    margin-bottom: 14px;
    display: flex; justify-content: space-between; align-items: baseline;
    border-bottom: 1.5px solid var(--border);
  }
  .worship-month-cnt {
    font-weight: 400;
    color: var(--text-faint);
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.72rem;
  }
  .worship-month-list { display: flex; flex-direction: column; gap: 14px; }

  /* Cat badge — 카테고리 색 코드 (작은 inline chip) */
  .cat-badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 500;
    border: 1px solid;
    letter-spacing: var(--ls-wide);
    line-height: 1.4;
    white-space: nowrap;
  }

  /* 모바일 worship list — padding 압축 + 헤더 한 줄 */
  @media (max-width: 720px) {
    /* v581 — 모바일 툴바 일관 사이즈 */
    .worship-list-head { padding: 12px; gap: 8px; min-height: 50px; }
    .worship-new-btn { padding: 8px 14px; font-size: 0.82rem; }
    .worship-synth-btn { padding: 7px 12px; font-size: 0.78rem; }
    .worship-list-count { font-size: var(--text-xs); }
    .worship-toolbar { padding: 10px; gap: 8px; }
    .worship-search { padding: 9px 14px; font-size: var(--text-sm); }
    .worship-list { padding: 10px 12px 20px; }
    .worship-card { padding: 12px 14px; gap: 6px; min-height: 120px; height: 120px; }
    .worship-card .card-title { font-size: 0.95rem; }
    .worship-card .card-snippet { font-size: 0.78rem; }
    .worship-month-head { padding: 4px 2px 8px; margin-bottom: 10px; }
  }
  /* #태그 인라인 칩 (마크다운 렌더 내부) + 카드의 태그 미리보기 */
  .md-tag, .tag-chip {
    display: inline-block;
    background: var(--surface-2);
    color: var(--accent);
    padding: 0.05rem 0.5rem;
    border-radius: var(--r-full);
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    font-size: 0.78rem;
    margin: 0 0.1rem;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: border-color 0.15s, background 0.15s;
  }
  .md-tag:hover, .tag-chip:hover { border-color: var(--accent-dim); background: var(--surface); }
  .tag-chip.active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
  }
  .worship-card .card-tags {
    display: flex; gap: 0.2rem; flex-wrap: wrap;
    margin-top: 0.35rem;
  }
  .worship-card .card-tags .tag-chip {
    font-size: var(--text-xs);
    padding: 0.02rem 0.4rem;
    cursor: default;
  }
  /* 태그 필터 칩 영역 */
  .worship-tag-chips {
    display: flex; gap: 0.3rem; flex-wrap: wrap;
    margin-top: 0.35rem;
  }
  .worship-tag-chips:empty { display: none; }
  .worship-tag-chips .tag-chip { font-size: var(--text-xs); }
  .w-category {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    padding: 0.5rem 0.65rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    color-scheme: dark;
    flex-shrink: 0;
    min-width: 110px;
  }
  .category-picker-overlay {
    z-index: 99800;
  }
  .category-picker-panel {
    max-width: 440px;
  }
  .category-picker-body {
    padding: 0.6rem 0.9rem 1rem;
  }
  .category-picker-hint {
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.6rem;
    font-family: 'Noto Serif KR', serif;
    line-height: 1.5;
  }
  .category-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.5rem;
  }
  .category-picker-choice {
    --category-picker-color: var(--accent);
    padding: 0.7rem 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--category-picker-color);
    border-radius: 8px;
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .category-picker-choice[data-cat="sunday"] { --category-picker-color: #c9a961; }
  .category-picker-choice[data-cat="dawn"] { --category-picker-color: #7e9eb6; }
  .category-picker-choice[data-cat="wed"] { --category-picker-color: #a07eb6; }
  .category-picker-choice[data-cat="fri"] { --category-picker-color: #b67e9e; }
  .category-picker-choice[data-cat="special"] { --category-picker-color: #d97757; }
  .category-picker-choice[data-cat="overseas"] { --category-picker-color: #5e8aa6; }
  .category-picker-choice[data-cat="family"] { --category-picker-color: #7eb695; }
  .category-picker-choice[data-cat="qt"] { --category-picker-color: #b6a07e; }
  .category-picker-choice[data-cat="lecture"] { --category-picker-color: #8a8576; }
  .category-picker-choice[data-cat="other"] { --category-picker-color: #6d6859; }
  .category-picker-actions {
    margin-top: 0.7rem;
    text-align: right;
  }
  .category-picker-empty {
    padding: 0.5rem 0.85rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.82rem;
    cursor: pointer;
  }
  /* v266 — 노트 종류 selector: 카테고리 selector 와 일관, 살짝 강조 (둘레 accent 톤) */
  .w-kind {
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: var(--r-sm);
    color: var(--text);
    padding: 0.5rem 0.65rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    font-weight: 600;
    color-scheme: dark;
    flex-shrink: 0;
    min-width: 78px;
    cursor: pointer;
  }
  .w-kind:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border-color: var(--accent);
  }
  .worship-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-family: 'Noto Serif KR', serif;
  }
  /* v579 — empty state with verse (NotebookLM-style) */
  .worship-empty.empty-with-verse {
    padding: 3.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    font-style: normal;
  }
  .empty-verse {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-dim);
    line-height: 1.6;
    letter-spacing: 0.02em;
    margin-bottom: 6px;
  }
  .empty-verse-ref {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    color: var(--text-faint);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 28px;
  }
  .empty-divider {
    width: 32px;
    height: 1px;
    background: var(--border);
    margin-bottom: 28px;
  }
  .empty-message {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.95rem;
    color: var(--text-dim);
    margin-bottom: 8px;
  }
  .empty-hint {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-faint);
    letter-spacing: 0.02em;
  }
  /* v579 — empty state stagger fade-in */
  .empty-with-verse .empty-verse,
  .empty-with-verse .empty-verse-ref,
  .empty-with-verse .empty-divider,
  .empty-with-verse .empty-message,
  .empty-with-verse .empty-hint {
    opacity: 0;
    animation: emptyFadeIn 0.5s ease forwards;
  }
  .empty-with-verse .empty-verse    { animation-delay: 0.1s; }
  .empty-with-verse .empty-verse-ref { animation-delay: 0.3s; }
  .empty-with-verse .empty-divider  { animation-delay: 0.5s; }
  .empty-with-verse .empty-message  { animation-delay: 0.7s; }
  .empty-with-verse .empty-hint     { animation-delay: 0.9s; }
  @keyframes emptyFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* v579 — 카드 stagger 등장 애니메이션 */
  .worship-card.card-enter {
    opacity: 0;
    transform: translateY(12px);
  }
  .worship-card.card-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.35s ease, transform 0.35s ease;
  }

  /* v579 — 월별 아코디언 */
  .worship-month-head {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
  }
  .worship-month-head::before {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    border-left: 5px solid var(--text-dim);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    margin-right: 8px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
  }
  .worship-month-head.is-collapsed::before {
    transform: rotate(0deg);
  }
  .worship-month-head.is-open::before {
    transform: rotate(90deg);
  }
  .worship-month-head:hover { color: var(--accent); }
  .worship-month-list {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease;
  }
  .worship-month-list.is-collapsed {
    max-height: 0 !important;
    opacity: 0;
    margin: 0;
    padding: 0;
  }

  /* ════════════════════════════════════════════════════════════════
     v1142z — 성경책 모드 v2 (Bible Book Mode): 펼침면 + 옛성경 종이톤
     .verse-row DOM 유지 → 절 탭/노트/하이라이트 그대로, CSS로 책처럼 재배치.
     절마다 문단 들여쓰기(개역한글 표준) + 진한 크림 종이 + 옛성경 명조.
     펼침면(데스크탑)/단일(모바일) 페이지네이션은 JS 엔진이 display 토글.
     ════════════════════════════════════════════════════════════════ */
  .reader.book-mode #ai-chapter-result,
  .reader.book-mode .xref-badge { display: none; }
  .reader.book-mode .verse-col.en,
  .reader.book-mode .verse-col.orig { display: none !important; }

  /* 책 컨테이너 — 옛성경 종이톤 (테마 무관 고정), 화면 꽉 채움 */
  .reader.book-mode .verses {
    display: block;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 3px;
    font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
    font-size: 1.32rem;
    line-height: 2.15;
    text-align: justify;
    word-break: keep-all;
    color: #3a2c1a;
    position: relative;
    width: 100%;
    max-width: none;
  }
  /* 펼침면 래퍼 — 데스크탑 좌우 페이지, 화면 꽉 채움 (그림자 최소) */
  .reader.book-mode .book-spread-pages {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    border: none;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
    min-height: calc(100vh - 100px);
    perspective: 2200px;
    transform-style: preserve-3d;
  }
  /* 3D 책장 넘기기 — 플립 레이어 (GPU 가속, 부드러운 전환) */
  .reader.book-mode .book-flip-layer {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    transform-style: preserve-3d;
    z-index: 10;
    transition: transform 0.52s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .reader.book-mode .book-flip-layer.flip-next {
    right: 0;
    transform-origin: left center;
    transform: rotateY(0deg);
  }
  .reader.book-mode .book-flip-layer.flip-next.flipping {
    transform: rotateY(-180deg);
  }
  .reader.book-mode .book-flip-layer.flip-prev {
    left: 0;
    transform-origin: right center;
    transform: rotateY(0deg);
  }
  .reader.book-mode .book-flip-layer.flip-prev.flipping {
    transform: rotateY(180deg);
  }
  /* 플립 면 — 앞/뒤, 접히는 종이 (불투명) */
  .reader.book-mode .book-flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    background: #efe6d0;
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  /* 플립 면 안의 페이지 — 폭/높이 꽉 채움 */
  .reader.book-mode .book-flip-face .book-page {
    min-height: 100%;
    height: 100%;
    width: 100%;
    padding: 2.2rem 2.4rem 2.8rem;
    box-shadow: none;
    border: none;
  }
  .reader.book-mode .book-flip-back {
    transform: rotateY(180deg);
  }
  /* 접히는 면 음영 — 거의 없음 (살짝만) */
  .reader.book-mode .book-flip-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.0) 70%, rgba(0,0,0,0.03) 100%);
    opacity: 0;
    transition: opacity 0.52s;
    pointer-events: none;
    z-index: 5;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  .reader.book-mode .book-flip-layer.flipping::after {
    opacity: 1;
  }
  /* 모바일 — 플립 레이어 전체 폭 */
  @media (max-width: 760px) {
    .reader.book-mode .book-flip-layer {
      width: 100%;
    }
    .reader.book-mode .book-flip-face .book-page {
      padding: 1.8rem 1.5rem 2.4rem;
    }
  }
  /* 중앙 경계 — 얇은 선만 (시커먼 틈 방지) */
  .reader.book-mode .book-spread-pages::before {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background: rgba(120,90,40,0.08);
    pointer-events: none;
    z-index: 1;
  }
  /* 개별 페이지 (좌/우 또는 단일) — 여백 축소, 본문 밀도 */
  .reader.book-mode .book-page {
    background: #efe6d0;
    color: #3a2c1a;
    padding: 2.2rem 2.4rem 2.8rem;
    min-height: calc(100vh - 160px);
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .reader.book-mode .book-page.book-page-right {
    background: linear-gradient(90deg, rgba(120,90,40,0.05), #efe6d0 6%);
  }
  .reader.book-mode .book-page.book-page-left {
    background: linear-gradient(270deg, rgba(120,90,40,0.05), #efe6d0 6%);
  }
  /* 종이 질감 — 미세한 노이즈 그라데이션 */
  .reader.book-mode .book-page::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(120,90,40,0.03), transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(90,65,30,0.04), transparent 50%);
    pointer-events: none;
    z-index: 0;
  }
  .reader.book-mode .book-page > * { position: relative; z-index: 1; }
  /* 페이지 번호 (옛성경 중앙, 진하게) */
  .reader.book-mode .book-page-num {
    position: absolute;
    bottom: 1rem;
    left: 0; right: 0;
    text-align: center;
    font-size: 0.82rem;
    color: #6b4f24;
    letter-spacing: 0.35em;
    font-family: 'Cormorant Garamond', Georgia, serif;
    z-index: 2;
  }
  /* 절마다 문단 — 개역한글 표준 (행간 넉넉히) */
  .reader.book-mode .verse-row {
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
    margin: 0 0 0.55rem;
    border-radius: 0;
    text-indent: 1.5em;
  }
  .reader.book-mode .verse-row::after { content: none; }
  .reader.book-mode .verse-col.ko {
    display: block !important;
  }
  .reader.book-mode .verse-num-wrap {
    display: inline !important;
  }
  .reader.book-mode .verse-text.ko {
    display: inline !important;
    color: #3a2c1a;
  }
  /* 절번호 — 옛성경 느낌 (크고 진하고 명조) */
  .reader.book-mode .verse-num {
    display: inline !important;
    font-size: 0.82em;
    vertical-align: 0.35em;
    color: #7a5a1f;
    font-weight: 700;
    margin: 0 0.28em 0 0;
    font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
    text-indent: 0;
  }
  .reader.book-mode .chapter-head {
    background: transparent;
    text-align: center;
    margin-bottom: 1.4rem;
  }
  .reader.book-mode .chapter-head .ch-book-title {
    letter-spacing: 0.4em;
    color: #5a4520;
    font-size: 1.5rem;
    font-weight: 600;
  }
  .reader.book-mode .chapter-head .ch-num {
    color: #6b4f24;
    letter-spacing: 0.2em;
  }
  .reader.book-mode .verse-row.hl-yellow,
  .reader.book-mode .verse-row.hl-green,
  .reader.book-mode .verse-row.hl-blue,
  .reader.book-mode .verse-row.hl-pink {
    border-radius: 2px;
    padding: 0 0.1em;
  }
  /* 첫 절 첫 글자 — 옛성경 첫 글자 강조 (드롭캡) */
  .reader.book-mode .verse-row[data-verse="1"] .verse-text.ko::first-letter {
    font-size: 1.6em;
    font-weight: 700;
    color: #5a4520;
    float: left;
    line-height: 0.9;
    margin: 0.08em 0.12em 0 0;
    font-family: 'Nanum Myeongjo', 'Noto Serif KR', serif;
  }

  /* 모바일 — 단일 페이지 (펼침면 X), 글자 키움 */
  @media (max-width: 760px) {
    .reader.book-mode .book-spread-pages {
      grid-template-columns: 1fr;
      min-height: calc(100vh - 120px);
    }
    .reader.book-mode .book-spread-pages::before { display: none; }
    .reader.book-mode .book-page {
      padding: 1.8rem 1.5rem 2.4rem;
      font-size: 1.18rem;
      min-height: calc(100vh - 120px);
    }
    .reader.book-mode .verses { font-size: 1.18rem; }
  }

  /* 책 넘김 컨트롤 — 하단 중앙 (옛성경 톤) */
  .reader.book-mode .book-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    margin: 0.8rem auto 0.4rem;
    padding: 0.6rem;
  }
  .reader.book-mode .book-nav button {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.95rem;
    color: #5a4520;
    background: rgba(120,90,40,0.1);
    border: 1px solid rgba(120,90,40,0.25);
    border-radius: 4px;
    padding: 0.5rem 1.2rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
  }
  .reader.book-mode .book-nav button:hover:not(:disabled) {
    background: rgba(120,90,40,0.2);
  }
  .reader.book-mode .book-nav button:active:not(:disabled) {
    transform: scale(0.96);
  }
  .reader.book-mode .book-nav button:disabled {
    opacity: 0.3;
    cursor: default;
  }
  .reader.book-mode .book-nav .book-pos {
    font-size: 0.88rem;
    color: #6b4f24;
    letter-spacing: 0.2em;
    font-family: 'Cormorant Garamond', Georgia, serif;
    min-width: 5rem;
    text-align: center;
  }

  /* ════════════════════════════════════════════════════════════════
     v1174 — 리얼 페이지 넘김 (strip-bend page turn)
     .pageturn-layer: 클론 오버레이 컨테이너 (perspective) — 밑장 실 DOM은
     즉시 교체되고, 그 위에 이 레이어가 시각 전환만 담당한 뒤 스스로 사라짐.
     내부를 세로 스트립(3~4개)으로 나눠 위상차 rotateY로 "휘는 종이" 착시.
     ════════════════════════════════════════════════════════════════ */
  .reader.book-mode .pageturn-layer {
    position: absolute;
    inset: 0;
    z-index: 20;
    perspective: 2400px;
    pointer-events: none;
    -webkit-perspective: 2400px;
  }
  .reader.book-mode .pt-half {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  .reader.book-mode .pt-half.pt-next { right: 0; }
  .reader.book-mode .pt-half.pt-prev { left: 0; }
  /* 모바일 — 전체 폭 폴드 */
  @media (max-width: 760px) {
    .reader.book-mode .pt-half { width: 100%; left: 0; right: 0; }
  }
  /* 스트립 — overflow:hidden 컨테이너, 내부 콘텐츠는 translateX 로 오프셋 복원 */
  .reader.book-mode .pt-strip {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
  }
  .reader.book-mode .pt-strip-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    background: #efe6d0;
  }
  .reader.book-mode .pt-strip-inner .book-page {
    box-shadow: none;
    border: none;
  }
  /* 뒷면 — 잉크 비침 (미러 + 저투명도) */
  .reader.book-mode .pt-strip-back {
    position: absolute;
    inset: 0;
    background: #e6dcc2;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
    overflow: hidden;
  }
  .reader.book-mode .pt-strip-back .pt-strip-inner {
    opacity: 0.06;
    transform: scaleX(-1);
  }
  /* 조명 — 그림자(밑장 접힘선) + 하이라이트(넘어가는 장) */
  .reader.book-mode .pt-shadow,
  .reader.book-mode .pt-shine {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 15;
    pointer-events: none;
  }
  .reader.book-mode .pt-shadow {
    background: linear-gradient(90deg, rgba(60,40,10,0.28), rgba(60,40,10,0) 100%);
  }
  .reader.book-mode .pt-shine {
    background: linear-gradient(90deg, rgba(255,250,230,0.35), rgba(255,250,230,0) 100%);
    mix-blend-mode: screen;
  }
  [data-theme="night"] .reader.book-mode .pt-shadow {
    background: linear-gradient(90deg, rgba(0,0,0,0.42), rgba(0,0,0,0) 100%);
  }
  [data-theme="night"] .reader.book-mode .pt-shine {
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0) 100%);
  }
  /* 클론 오버레이 — inert, 스크린리더 중복 낭독 방지 */
  .reader.book-mode .pageturn-layer * {
    pointer-events: none;
  }
  /* reduced-motion — JS가 오버레이 자체를 생성하지 않고 즉시 교체하므로
     이 규칙은 혹시 남는 트랜지션을 무력화하는 안전망 */
  @media (prefers-reduced-motion: reduce) {
    .reader.book-mode .pt-strip,
    .reader.book-mode .pt-shadow,
    .reader.book-mode .pt-shine {
      transition: none !important;
    }
  }

  /* v579 — 스와이프ToDelete (모바일) */
  .worship-card {
    overflow: hidden;
  }
  .worship-card .swipe-delete-bg {
    position: absolute;
    inset: 0;
    background: #c95151;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 20px;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.15s;
  }
  .worship-card .swipe-delete-bg svg {
    width: 22px; height: 22px;
    color: #fff;
  }
  .worship-card.swiping .swipe-delete-bg { opacity: 1; }
  .worship-card.swiping {
    transition: none;
    z-index: 5;
  }
  /* Note card — 일관된 spacing rhythm (8/12 grid) */
  .worship-card {
    padding: 18px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s var(--ease-standard);
    display: flex; flex-direction: column; gap: 8px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    min-height: 120px;
    justify-content: center;
  }
  .worship-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 54%, transparent);
    opacity: 0.42;
    transform: scaleY(0.62);
    transform-origin: center;
    transition: opacity 0.18s var(--ease-standard), transform 0.18s var(--ease-standard);
    pointer-events: none;
  }
  .worship-card:hover::before,
  .worship-card:focus-visible::before,
  .worship-card:focus-within::before,
  .worship-card.active::before,
  .worship-card.selected::before {
    opacity: 0.95;
    transform: scaleY(1);
  }
  /* v172 — compact 변형: 제목+날짜 간결하게 */
  .worship-card.worship-card-compact {
    padding: 16px 18px 16px 22px;
    gap: 6px;
    min-height: 120px;
  }
  .worship-card.worship-card-compact .card-top {
    align-items: center;
  }
  .worship-card.worship-card-compact .card-title {
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .worship-card.worship-card-compact .card-date {
    font-size: 0.75rem;
    color: var(--text-dim);
    font-weight: 400;
    letter-spacing: 0;
    flex-shrink: 0;
  }
  /* 카드 우상단 미니 삭제 버튼 (v167) */
  .worship-card-del {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px; height: 28px;
    border: 0;
    background: var(--surface-2);
    color: var(--text-dim);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.14s, background 0.12s, color 0.12s;
    padding: 0;
    z-index: 2;
  }
  .worship-card-del svg { width: 15px; height: 15px; }
  .worship-card:hover .worship-card-del { opacity: 0.75; }
  .worship-card-del:hover {
    opacity: 1 !important;
    background: rgba(196, 122, 106, 0.18);
    color: #c47a6a;
  }
  @media (hover: none) {
    .worship-card-del { opacity: 0.7; background: var(--surface-2); }
  }
  .worship-card:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: var(--surface-2);
    box-shadow: 0 16px 34px -28px rgba(58,46,32,0.42), 0 4px 12px rgba(0,0,0,0.07);
    transform: translateY(-1px);
  }
  .worship-card:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: var(--surface-2);
    outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 3px;
    box-shadow: 0 16px 34px -28px rgba(58,46,32,0.42), 0 4px 12px rgba(0,0,0,0.07);
  }
  .worship-card:active {
    transform: scale(0.985);
    background: var(--surface-2);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition-duration: 0.08s;
  }
  .worship-card .card-top {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px;
    margin: 0;
  }
  .worship-card .card-title {
    font-family: 'Noto Serif KR', serif;
    font-weight: 600;
    font-size: 1.1rem;
    line-height: 1.45;
    color: var(--text);
    flex: 1; min-width: 0;
    word-break: keep-all;
  }
  .worship-card .card-title.empty { color: var(--text-faint); font-style: italic; }
  .worship-card .card-date {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    flex-shrink: 0;
    font-weight: 400;
    letter-spacing: 0;
  }
  .worship-card .card-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin: 0;
    display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  }
  .worship-card .card-main-text {
    color: var(--accent);
  }
  .worship-card .card-meta-separator {
    color: var(--text-faint);
  }
  .worship-card .card-meta .cat-badge {
    margin-right: 4px;
    padding: 3px 9px;
    font-weight: 500;
  }
  .worship-card .card-snippet {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.65;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }
  .worship-card .card-foot {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: var(--text-faint);
    display: flex; gap: 10px; align-items: center;
    letter-spacing: var(--ls-wide);
  }
  .worship-card .card-tags {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin: 4px 0 0 0;
  }
  /* 카드 안 태그 칩 — 작고 단순 */
  .worship-card .card-tags .tag-chip {
    padding: 3px 9px;
    font-size: 0.72rem;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: var(--r-full);
    font-family: 'Inter', sans-serif;
    cursor: default;
  }
  .worship-card .tag-chip.tag-overflow {
    opacity: 0.6;
  }

  /* v435 — compact 카드에도 snippet 2줄 표시 */
  .worship-card.worship-card-compact .card-snippet {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    flex-shrink: 1;
    min-height: 0;
  }
  .worship-card.worship-card-compact .card-meta {
    font-size: 0.72rem;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    flex-shrink: 0;
  }
  .worship-card.worship-card-compact .card-tags {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    flex-shrink: 0;
  }

  /* v435 — 리스트 정렬 버튼 */
  /* v581 — 정렬 버튼 터치 영역 확대 */
  .note-sort-btn {
    display: inline-flex; align-items: center; gap: 5px;
    justify-content: center;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
    -webkit-tap-highlight-color: transparent;
    height: 42px;
    flex-shrink: 0;
    line-height: 1;
    white-space: nowrap;
  }
  .note-sort-btn:hover { border-color: var(--accent); color: var(--accent); }
  .note-sort-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 2px;
    border-color: var(--accent);
    color: var(--accent);
  }
  .note-sort-btn:active { transform: scale(0.97); }
  .note-sort-btn svg { width: 16px; height: 16px; }

  /* 편집 뷰 */
  /* v581 — 편집 화면 상단 헤더 */
  .worship-edit-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 4px 10px;
    border-bottom: 1px solid var(--border);
    gap: var(--space-2);
    min-height: 36px;
  }
  .worship-back-btn {
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    -webkit-tap-highlight-color: transparent;
  }
  .worship-back-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
  .worship-back-btn:active { transform: scale(0.97); }
  .worship-save-status {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
  }
  .worship-delete-btn {
    padding: 6px 14px;
    background: transparent;
    border: 1px solid #c95151;
    border-radius: var(--r-full);
    color: #c95151;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.82rem;
    -webkit-tap-highlight-color: transparent;
  }
  .worship-delete-btn:hover { background: rgba(201, 81, 81, 0.1); }
  .worship-delete-btn:active { transform: scale(0.97); }
  .worship-export-btn {
    padding: 6px 14px;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-full);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.82rem;
    -webkit-tap-highlight-color: transparent;
  }
  .worship-export-btn:hover { background: var(--surface-2); }
  .worship-export-btn:active { transform: scale(0.97); }

  /* v581 — header-actions-stash 안 삭제 버튼도 명확하게 */
  .head-link-btn.danger {
    color: #c95151;
    border: 1px solid rgba(201, 81, 81, 0.35);
    border-radius: var(--r-full);
    padding: 6px 14px;
    transition: background 0.12s, color 0.12s, transform 0.08s;
    -webkit-tap-highlight-color: transparent;
  }
  .head-link-btn.danger:hover {
    background: rgba(201, 81, 81, 0.12);
    color: #b84444;
  }
  .head-link-btn.danger:active { transform: scale(0.97); }

  /* v211 — 상단 sermon header card (Notion 스타일, 노트 본문 위) */
  .sermon-header-card {
    padding: 24px clamp(20px, 3vw, 36px) 18px;
    border-bottom: 1px solid color-mix(in srgb, var(--paper-meta) 18%, transparent);
    display: flex; flex-direction: column; gap: 14px;
    font-family: 'Noto Serif KR', serif;
  }
  .sermon-header-card .sermon-title {
    width: 100%;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--paper-ink);
    font-family: 'Noto Serif KR', serif;
    font-weight: 700;
    font-size: clamp(1.4rem, 2.2vw, 1.85rem);
    line-height: var(--lh-tight);
    padding: 0;
    letter-spacing: var(--ls-tight);
  }
  .sermon-header-card .sermon-title::placeholder { color: var(--paper-meta); opacity: 0.65; }
  .sermon-meta-row {
    display: flex; gap: 8px;
    flex-wrap: wrap;
    align-items: center;
  }
  .sermon-meta-row select,
  .sermon-meta-row input {
    background: color-mix(in srgb, var(--paper-meta) 7%, transparent);
    border: 0;
    color: var(--paper-ink);
    font-family: inherit;
    font-size: var(--text-sm);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    outline: 0;
    min-width: 0;
    transition: background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
  }
  .sermon-meta-row select:focus,
  .sermon-meta-row input:focus {
    background: color-mix(in srgb, var(--paper-meta) 11%, transparent);
    box-shadow: inset 0 -1.5px 0 var(--paper-quote-line);
  }
  .sermon-meta-row select { max-width: 130px; }
  .sermon-meta-row .w-date { color-scheme: light; max-width: 140px; }
  [data-theme="dark"] .sermon-meta-row .w-date,
  [data-theme="night"] .sermon-meta-row .w-date,
  [data-paper-tone="ink"] .sermon-meta-row .w-date { color-scheme: dark; }
  .sermon-meta-row .w-preacher,
  .sermon-meta-row .w-place { flex: 1 1 130px; min-width: 130px; }

  /* v476 — 발표 전용 메타 row. 기본 hide, testimony 일 때만 표시 */
  .testimony-meta-row {
    display: none;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 6px;
  }
  #worship-modal[data-worship-kind="testimony"] .testimony-meta-row { display: flex; }
  .testimony-meta-row select,
  .testimony-meta-row input {
    background: color-mix(in srgb, var(--paper-meta) 7%, transparent);
    border: 0;
    color: var(--paper-ink);
    font-family: inherit;
    font-size: var(--text-sm);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    outline: 0;
    min-width: 0;
    transition: background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
  }
  .testimony-meta-row select:focus,
  .testimony-meta-row input:focus {
    background: color-mix(in srgb, var(--paper-meta) 11%, transparent);
    box-shadow: inset 0 -1.5px 0 var(--paper-quote-line);
  }
  .testimony-meta-row .w-testimony-type { max-width: 130px; }
  .testimony-meta-row .w-time-context  { flex: 1 1 160px; min-width: 140px; }

  /* v490 — 카드 우측 작은 링크 배지 (있을 때만, 사용자가 list 에서 즉시 인지) */
  .card-link-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-radius: var(--r-full);
    flex-shrink: 0;
    margin-left: auto;
    margin-right: 4px;
  }

  /* v489 — 원본 링크 row: 모든 worship kind + daily + couple 공통 패턴 */
  .source-link-row {
    display: flex; gap: 8px; align-items: center;
    margin-top: 6px;
  }
  .note-source-row {
    margin: 0 0 10px;
  }
  /* v1102 — 노트 내부 입력은 프레임 없이 플랫: 은은한 필 + 포커스 시 하단 라인만 */
  .source-url-input {
    flex: 1 1 auto;
    background: color-mix(in srgb, var(--paper-meta) 7%, transparent);
    border: 0;
    color: var(--paper-ink);
    font-family: inherit;
    font-size: var(--text-sm);
    padding: 6px 10px;
    border-radius: var(--r-sm);
    outline: 0;
    min-width: 0;
    transition: background var(--duration-fast) var(--ease-standard),
                box-shadow var(--duration-fast) var(--ease-standard);
  }
  .source-url-input::placeholder { color: var(--paper-meta); opacity: 0.6; }
  .source-url-input:focus {
    background: color-mix(in srgb, var(--paper-meta) 11%, transparent);
    box-shadow: inset 0 -1.5px 0 var(--paper-quote-line);
  }
  .source-open-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    color: var(--accent);
    border: 0;
    border-radius: var(--r-sm);
    text-decoration: none;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-standard);
  }
  .source-open-btn:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .testimony-meta-row .w-source-open {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    color: var(--accent);
    border: 0;
    border-radius: var(--r-sm);
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard);
  }
  .testimony-meta-row .w-source-open:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
  }

  .sermon-maintext-wrap {
    position: relative;
    display: flex; align-items: center; gap: 8px;
    border-top: 1px dashed color-mix(in srgb, var(--paper-meta) 18%, transparent);
    padding-top: 12px;
  }
  .sermon-maintext-wrap .maintext-label {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--paper-meta);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    flex: 0 0 auto;
  }
  .sermon-maintext-wrap .maintext-input {
    flex: 1; min-width: 0;
    background: transparent;
    border: 0; outline: 0;
    color: var(--paper-ref);
    font-family: 'Noto Serif KR', serif;
    font-size: 1rem;
    padding: 4px 6px;
    border-radius: var(--r-sm);
  }
  .sermon-maintext-wrap .maintext-input:focus {
    background: color-mix(in srgb, var(--paper-bg-1) 50%, var(--surface));
  }
  .sermon-maintext-wrap .maintext-input::placeholder {
    color: var(--paper-meta); opacity: 0.45;
    font-style: italic;
  }
  .sermon-maintext-wrap .maintext-cite-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--paper-quote-line) 50%, transparent);
    color: var(--paper-ref);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    padding: 5px 11px;
    border-radius: var(--r-full);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
  }
  .sermon-maintext-wrap .maintext-cite-btn:hover {
    background: color-mix(in srgb, var(--paper-ref) 12%, transparent);
  }
  .sermon-maintext-wrap .maintext-cite-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
  }
  /* ref-suggest popover 가 sermon-maintext-wrap 의 자식이 될 때 위치 */
  .sermon-maintext-wrap .ref-suggest {
    top: calc(100% + 4px);
    left: 0;
    right: 0;
  }

  /* 모바일에서 header card 압축 */
  @media (max-width: 720px) {
    .sermon-header-card { padding: 18px 16px 14px; gap: 11px; }
    .sermon-header-card .sermon-title { font-size: 1.3rem; }
    .sermon-meta-row { gap: 6px; }
    .sermon-meta-row select,
    .sermon-meta-row input { font-size: var(--text-sm); padding: 4px 8px; }
    .sermon-maintext-wrap .maintext-input { font-size: var(--text-base); }
  }

  /* legacy drawer worship-meta — v211 에서 hidden */
  .worship-meta {
    padding: 1rem 1.25rem 0.7rem;
    border-bottom: 1px solid var(--border);
    display: flex; flex-direction: column; gap: var(--space-2);
  }
  .worship-meta input {
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
  }
  .worship-meta input:focus { border-color: var(--accent-dim); outline: none; }
  .worship-meta .w-title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text);
  }
  .worship-meta-row {
    display: flex; gap: 0.4rem; flex-wrap: wrap;
  }
  .worship-meta-row input { flex: 1; min-width: 120px; }
  .worship-meta .w-date { color-scheme: dark; max-width: 150px; }

  .worship-body-section {
    padding: 0.85rem 1.25rem;
    display: flex; flex-direction: column; gap: var(--space-2);
  }
  .worship-body-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-2); flex-wrap: wrap;
  }
  .worship-tool-btn {
    padding: 0.35rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-sm);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
  }
  .worship-tool-btn:hover { background: var(--surface-2); }
  .worship-toolbar-hint {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: var(--text-faint);
  }
  #w-body {
    min-height: 200px;
    padding: 0.85rem;
    background: var(--paper-bg-1);
    border: 1px solid transparent;
    border-radius: 0;
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    line-height: var(--lh-verse);
    resize: vertical;
    word-break: keep-all;
  }
  #w-body:focus { outline: none; }
  .worship-preview-toggle {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
  }
  .worship-preview-toggle summary {
    cursor: pointer;
    padding: 0.35rem 0;
    user-select: none;
  }
  .worship-preview {
    padding: 0.85rem;
    background: var(--surface);
    border-left: 3px solid var(--accent-dim);
    border-radius: var(--r-xs);
    margin-top: 0.4rem;
  }
  .worship-preview h2, .worship-preview h3, .worship-preview h4 {
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    margin: 0.7rem 0 0.3rem;
  }
  .worship-preview p {
    font-size: 0.9rem;
    line-height: 1.75;
    margin-bottom: 0.55rem;
    word-break: keep-all;
  }
  .worship-preview ul { margin: 0.3rem 0 0.55rem 1.2rem; font-size: 0.88rem; line-height: var(--lh-loose); }
  .editable-area u,
  .worship-preview u,
  .cou-note-preview u {
    text-decoration-color: var(--accent);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 0.18em;
  }

  /* @ 멘션 팝업 — position:fixed (모달 overflow 회피, JS 가 좌표 계산) */
  .mention-popup {
    position: fixed;
    width: 360px;
    max-width: calc(100vw - 24px);
    background: var(--bg);
    border: 1px solid var(--accent-dim);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.4);
    max-height: 280px;
    overflow-y: auto;
    z-index: 9999;
  }
  .mention-popup[hidden] { display: none; }
  .mention-item {
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.1s, border-color 0.1s;
  }
  .mention-item:hover, .mention-item.selected {
    background: var(--surface-2);
    border-left-color: var(--accent);
  }
  .mention-label {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    color: var(--text);
    font-size: var(--text-base);
  }
  .mention-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin-left: 0.4rem;
  }
  .mention-hint {
    padding: 0.7rem 0.85rem;
    color: var(--text-faint);
    font-style: italic;
    font-size: var(--text-sm);
    font-family: 'Noto Serif KR', serif;
  }
  .mention-hint-small {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-top: 0.15rem;
  }
  .mention-ai-btn {
    width: calc(100% - 1.7rem);
    margin: 0.4rem 0.85rem 0.6rem;
    padding: 0.55rem;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-sm);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
  }
  .mention-ai-btn:hover { background: var(--surface-2); }

  /* ───────── 미디어 (사진·그림·녹음·하이라이트) ───────── */

  /* 미디어 툴바 (worship/daily 본문 위에) */
  .media-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0.45rem 0 0.3rem;
    padding: 0.35rem 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }
  .media-tool-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.55rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  .media-tool-btn:hover { background: var(--surface); border-color: var(--accent-dim); }
  .media-tool-btn svg { width: 14px; height: 14px; opacity: 0.85; }
  .media-tool-btn.recording {
    background: rgba(220, 60, 60, 0.18);
    border-color: rgba(220, 60, 60, 0.5);
    color: #ff6b6b;
    animation: rec-pulse 1.4s ease-in-out infinite;
  }
  @keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

  /* 첨부 갤러리 (미니 카드 그리드) */
  .attach-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.55rem;
    margin: 0.55rem 0;
  }
  .attach-gallery:empty { display: none; }
  .attach-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    transition: border-color 0.12s;
  }
  .attach-card:hover { border-color: var(--accent-dim); }
  .attach-card .attach-img,
  .attach-card .attach-draw {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: cover;
    background: #1a1815;
    cursor: zoom-in;
  }
  .attach-card .attach-audio-wrap {
    padding: 0.6rem 0.5rem 0.45rem;
    background: rgba(201,169,97,0.04);
  }
  .attach-card audio { width: 100%; height: 32px; }
  .attach-card .attach-meta {
    padding: 0.32rem 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: var(--text-faint);
    display: flex;
    justify-content: space-between;
    gap: 0.3rem;
    align-items: center;
    border-top: 1px solid var(--border);
  }
  .attach-card .attach-rm {
    background: transparent;
    border: none;
    color: var(--text-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0.12rem;
    line-height: 0;
  }
  .attach-card .attach-rm svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
  }
  .attach-card .attach-rm:hover { color: #ff6b6b; }
  /* v470 — PDF 카드 (NotebookLM export 등 문서 첨부) */
  .attach-card-pdf {
    flex-direction: row;
    align-items: stretch;
    padding: 0;
  }
  .attach-pdf-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    color: var(--text);
    text-decoration: none;
    min-width: 0;
    transition: background var(--duration-fast) var(--ease-standard);
  }
  .attach-pdf-link:hover {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
  }
  .attach-pdf-link.attach-upload-wait {
    cursor: wait;
  }
  .attach-pdf-link svg {
    flex-shrink: 0;
    color: var(--accent);
  }
  .attach-pdf-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .attach-pdf-name {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .attach-pdf-size {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
  }
  .attach-card-pdf .attach-rm {
    align-self: center;
    margin-right: 0.5rem;
  }
  .attach-card .attach-transcript {
    padding: 0.4rem 0.55rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    line-height: var(--lh-normal);
    color: var(--text-dim);
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    max-height: 110px;
    overflow-y: auto;
  }
  .attach-card .attach-transcribe-btn {
    margin: 0.3rem 0.5rem 0.45rem;
    padding: 0.3rem 0.5rem;
    background: var(--surface-2);
    border: 1px solid var(--accent-dim);
    border-radius: 5px;
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-xs);
    cursor: pointer;
  }
  .attach-card .attach-transcribe-btn:hover { background: var(--surface); }
  .attach-card.uploading {
    pointer-events: none;
    opacity: 0.7;
  }
  .attach-card .attach-img-placeholder {
    background: linear-gradient(135deg,
      color-mix(in srgb, var(--surface-2) 92%, var(--accent) 8%),
      color-mix(in srgb, var(--surface) 88%, var(--text-faint) 12%)
    );
  }
  .attach-card .attach-progress {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--surface-rgb), 0.55);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
  }

  /* 이미지 라이트박스 */
  .lightbox {
    position: fixed; inset: 0;
    background: rgba(10,8,6,0.92);
    z-index: var(--z-boot);
    display: flex; align-items: center; justify-content: center;
    cursor: zoom-out;
  }
  .lightbox[hidden] { display: none; }
  .lightbox img {
    max-width: 95vw; max-height: 95vh;
    box-shadow: 0 16px 60px rgba(0,0,0,0.7);
  }

  /* 그리기 모달 */
  .draw-modal {
    position: fixed; inset: 0;
    background: rgba(10,8,6,0.96);
    z-index: 99000;
    display: flex; flex-direction: column;
  }
  .draw-modal[hidden] { display: none; }
  .draw-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    align-items: center;
  }
  .draw-tool-grp {
    display: flex; gap: var(--space-1);
    padding-right: 0.6rem;
    border-right: 1px solid var(--border);
  }
  .draw-tool-grp:last-child { border-right: none; }
  .draw-btn {
    width: 34px; height: 34px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.1s, border-color 0.1s;
  }
  .draw-btn svg { width: 18px; height: 18px; }
  .draw-btn:hover { background: var(--surface); }
  .draw-btn.active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  .draw-color-swatch {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    margin: 0 0.05rem;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
  }
  .draw-color-swatch[data-color="#15140f"] { background: #15140f; }
  .draw-color-swatch[data-color="#c0392b"] { background: #c0392b; }
  .draw-color-swatch[data-color="#e67e22"] { background: #e67e22; }
  .draw-color-swatch[data-color="#2980b9"] { background: #2980b9; }
  .draw-color-swatch[data-color="#27ae60"] { background: #27ae60; }
  .draw-color-swatch[data-color="#8e44ad"] { background: #8e44ad; }
  .draw-color-swatch[data-color="#c9a961"] { background: #c9a961; }
  .draw-color-swatch.active { border-color: var(--accent); transform: scale(1.1); }
  .draw-size-input { width: 90px; }
  .draw-canvas-wrap {
    flex: 1;
    overflow: auto;
    display: flex; align-items: center; justify-content: center;
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 28px),
      repeating-linear-gradient(90deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 28px),
      #0d0c09;
  }
  .draw-canvas {
    background: #fafaf6;
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
    cursor: crosshair;
    touch-action: none;
  }
  .draw-status {
    margin-left: auto;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: var(--text-faint);
  }

  /* 녹음 플로팅 핀 — 상단 중앙, 차분한 accent 톤 (v141 redesign) */
  .rec-modal {
    position: fixed;
    top: max(14px, env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 99500;
    background: transparent;
    pointer-events: none;
    animation: rec-card-in 0.3s cubic-bezier(0.22, 0.78, 0.27, 1);
  }
  .rec-modal[hidden] { display: none; }
  @keyframes rec-card-in {
    from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0); opacity: 1; }
  }
  .rec-card {
    pointer-events: auto;
    background: var(--surface);
    backdrop-filter: saturate(160%) blur(20px);
    -webkit-backdrop-filter: saturate(160%) blur(20px);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: var(--r-full);
    padding: 7px 10px 7px 14px;
    box-shadow:
      0 12px 36px rgba(0,0,0,0.32),
      0 2px 8px rgba(0,0,0,0.15),
      0 0 0 4px color-mix(in srgb, var(--accent) 8%, transparent);
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 24px);
  }
  .rec-card::before {
    content: "";
    width: 9px; height: 9px;
    background: #e85a4f;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 12px #e85a4f, 0 0 4px #e85a4f;
    animation: rec-pulse-dot 1.4s ease-in-out infinite;
  }
  @keyframes rec-pulse-dot {
    0%,100% { opacity: 1; transform: scale(1); }
    50%     { opacity: 0.45; transform: scale(0.85); }
  }
  .rec-card h3 { display: none; }
  .rec-time {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--accent);
    margin: 0;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    min-width: 50px;
  }
  .rec-vis {
    height: 24px;
    display: flex;
    align-items: center;
    gap: 2px;
    width: 96px;
    max-width: 96px;
  }
  .rec-vis-bar {
    width: 3px;
background: var(--accent);
    border-radius: 2px;
    transition: height 0.1s var(--ease-standard);
    flex-shrink: 0;
    min-height: 3px;
  }
  .rec-actions {
    display: flex; gap: 4px; align-items: center;
  }
  .rec-btn {
    padding: 0; height: 32px;
    background: transparent; border: 0; border-radius: var(--r-full);
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.12s;
  }
  .rec-btn.primary {
    background: var(--accent);
    color: var(--accent-fg);
    border: 0;
    font-weight: 600;
    padding: 0 14px 0 12px;
    gap: 6px;
  }
  .rec-btn.primary::before {
    content: "";
    width: 9px; height: 9px;
    background: #15140f;
    border-radius: 1px;
    display: inline-block;
  }
  .rec-btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
  .rec-btn.danger {
    width: 32px;
    color: var(--text-faint);
    line-height: 1;
    background: transparent;
    border: 0;
  }
  .rec-btn.danger svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.8;
  }
  .rec-btn.danger:hover {
    color: #e85a4f;
    background: color-mix(in srgb, #e85a4f 12%, transparent);
  }
  .rec-status { display: none; }

  /* 색상 하이라이트 플로팅 툴바 */
  .hl-toolbar {
    position: fixed;
    z-index: 9998;
    display: flex;
    gap: var(--space-1);
    padding: 0.32rem;
    background: var(--bg);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  }
  .hl-toolbar[hidden] { display: none; }
  .hl-toolbar-swatch {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
  }
  .hl-toolbar-swatch[data-hl="y"] { background: rgba(255, 220, 90, 0.55); }
  .hl-toolbar-swatch[data-hl="r"] { background: rgba(255, 100, 100, 0.55); }
  .hl-toolbar-swatch[data-hl="g"] { background: rgba(120, 220, 130, 0.55); }
  .hl-toolbar-swatch[data-hl="b"] { background: rgba(120, 180, 255, 0.55); }
  .hl-toolbar-swatch[data-hl="p"] { background: rgba(255, 150, 220, 0.55); }
  .hl-toolbar-swatch:hover,
  .hl-toolbar-swatch:focus-visible { border-color: var(--accent); transform: scale(1.1); }
  .hl-toolbar-swatch:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
    outline-offset: 2px;
  }
  .hl-toolbar-clear {
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-dim);
    cursor: pointer;
    padding: 0;
    line-height: 0;
  }
  .hl-toolbar-clear svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
  }
  .visually-hidden-file-input {
    position: fixed;
    left: -9999px;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }

  /* 본문 미리보기에서 색상 하이라이트 렌더 */
  mark.hl-y { background: rgba(255, 220, 90, 0.32); color: inherit; padding: 0 0.1rem; border-radius: 2px; }
  mark.hl-r { background: rgba(255, 100, 100, 0.32); color: inherit; padding: 0 0.1rem; border-radius: 2px; }
  mark.hl-g { background: rgba(120, 220, 130, 0.30); color: inherit; padding: 0 0.1rem; border-radius: 2px; }
  mark.hl-b { background: rgba(120, 180, 255, 0.30); color: inherit; padding: 0 0.1rem; border-radius: 2px; }
  mark.hl-p { background: rgba(255, 150, 220, 0.30); color: inherit; padding: 0 0.1rem; border-radius: 2px; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     📱 모바일 최적화 (Galaxy / iPhone)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  body {
    /* iOS bottom home indicator + Android nav bar 안전 영역 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  /* ════════════════════════════════════════════
     부트 로딩 — 흑암에서 빛으로 (복음 서사)
     0.0–1.6s: 어둠 + "흑암이 깊음 위에 있고" (창 1:2)
     1.6–3.0s: 빛 점점 밝아짐 + "빛이 있으라" (창 1:3)
     3.0–6.0s: 십자가 + "말씀이 곧 하나님이시니라" (요 1:1)
     6.0s+:    헌사 + 들어가기
     ════════════════════════════════════════════ */
  .boot-loader {
    position: fixed; inset: 0;
    background: #000;
    z-index: calc(var(--z-boot) + 100);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
    overflow: hidden;
    transition: opacity 0.8s ease, background 1.4s ease;
    animation: boot-bg-dawn 4s ease-in 1.6s forwards;
  }
  .boot-skip-returning .boot-loader {
    display: none !important;
  }
  @keyframes boot-bg-dawn {
    0%   { background: #000; }
    40%  { background: #0a0805; }
    100% { background: var(--bg); }
  }
  /* v399q — boot 퇴장 시 더 부드럽게: opacity + scale 둘 다 */
  .boot-loader.hide {
    opacity: 0;
    transform: scale(1.04);
    pointer-events: none;
    transition: opacity 0.65s ease, transform 0.65s ease;
  }

  /* 빛의 광채 — 중심에서 점점 퍼져나감 */
  .boot-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(245, 212, 136, 0.18) 0%, rgba(245, 212, 136, 0.05) 25%, transparent 60%);
    opacity: 0;
    transform: scale(0.3);
    animation: boot-light-grow 4.2s var(--ease-standard) 1.6s forwards;
    pointer-events: none;
  }
  @keyframes boot-light-grow {
    0%   { opacity: 0;    transform: scale(0.3); }
    30%  { opacity: 1;    transform: scale(1);   }
    100% { opacity: 0.55; transform: scale(1.4); }
  }

  /* 첫 단계: 어둠 (창 1:2) */
  .boot-stage-dark {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-md);
    line-height: 1.9;
    color: rgba(255, 255, 255, 0.35);
    max-width: 480px;
    word-break: keep-all;
    text-align: center;
    opacity: 0;
    animation: boot-stage-dark 2.4s ease-out 0.3s forwards;
  }
  @keyframes boot-stage-dark {
    0%   { opacity: 0; transform: translateY(8px); }
    25%  { opacity: 0.85; transform: translateY(0); }
    75%  { opacity: 0.85; }
    100% { opacity: 0; transform: translateY(-4px); }
  }

  /* 두번째 단계: 빛 (창 1:3) */
  .boot-stage-light {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Noto Serif KR', serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.9;
    color: #fff5d8;
    max-width: 480px;
    word-break: keep-all;
    text-align: center;
    opacity: 0;
    text-shadow: 0 0 30px rgba(245, 212, 136, 0.6), 0 0 60px rgba(245, 212, 136, 0.3);
    animation: boot-stage-light 1.8s ease-out 2.4s forwards;
  }
  @keyframes boot-stage-light {
    0%   { opacity: 0; transform: scale(0.92); }
    35%  { opacity: 1; transform: scale(1.02); }
    65%  { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
  }

  /* 세번째 단계: 말씀 (요 1:1) — 모든 콘텐츠 */
  .boot-cross {
    width: 76px; height: 76px;
    margin-bottom: 2rem;
    opacity: 0;
    transform: scale(0.85);
    animation: boot-cross-arrive 2s cubic-bezier(0.2, 0.8, 0.3, 1) 4.2s forwards,
               boot-pulse 3s ease-in-out 6.5s infinite;
  }
  @keyframes boot-cross-arrive {
    0%   { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes boot-pulse {
    0%, 100% { opacity: 0.78; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.03); }
  }
  .boot-verse-ko {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.18rem;
    line-height: 2;
    color: var(--text);
    max-width: 580px;
    margin-bottom: 1.1rem;
    word-break: keep-all;
    opacity: 0;
    animation: boot-fadein 1.4s ease 4.6s forwards;
  }
  .boot-verse-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1rem;
    line-height: var(--lh-verse);
    color: var(--text-dim);
    max-width: 540px;
    margin-bottom: 1.6rem;
    opacity: 0;
    animation: boot-fadein 1.4s ease 5.0s forwards;
  }
  .boot-ref {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-base);
    color: var(--accent);
    letter-spacing: 0.06em;
    opacity: 0;
    animation: boot-fadein 1.4s ease 5.4s forwards;
  }
  .boot-ref .ko { font-family: 'Noto Serif KR', serif; margin-right: 0.5rem; }
  .boot-dedication {
    margin-top: 2.4rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--accent-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    line-height: 2;
    color: var(--text-dim);
    max-width: 480px;
    word-break: keep-all;
    opacity: 0;
    animation: boot-fadein 1.4s ease 6.4s forwards;
    letter-spacing: var(--ls-wide);
  }
  .boot-dedication .boot-name {
    color: var(--accent);
    font-weight: 600;
    font-size: 1.05em;
    letter-spacing: 0.05em;
  }
  .boot-tap-hint {
    margin-top: 2.5rem;
    padding: 0.55rem 1.4rem;
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-full);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--accent);
    opacity: 0;
    cursor: pointer;
    animation: boot-fadein 1s ease 7.6s forwards, boot-tap-pulse 2s ease-in-out 9s infinite;
    background: rgba(201, 169, 97, 0.08);
  }
  @keyframes boot-tap-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.3); }
    50%      { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(201, 169, 97, 0); }
  }
  @keyframes boot-fadein { to { opacity: 1; } }

  /* 첫번째·두번째 단계 + 십자가 등을 한 컨테이너에 — z-index 정렬 */
  .boot-content-final { position: relative; z-index: 1; }

  /* 모션 줄이기 — 접근성 (사용자가 prefers-reduced-motion 설정시) */
  @media (prefers-reduced-motion: reduce) {
    .boot-loader { animation: none; background: var(--bg); }
    .boot-loader::before { animation: none; opacity: 0; }
    .boot-stage-dark, .boot-stage-light { display: none; }
    .boot-cross { animation: none; opacity: 1; transform: none; }
    .boot-verse-ko, .boot-verse-en, .boot-ref, .boot-dedication, .boot-tap-hint {
      animation: boot-fadein 0.4s ease forwards;
    }
  }

  @media (max-width: 720px) {
    .boot-cross { width: 64px; height: 64px; margin-bottom: 1.5rem; }
    .boot-stage-dark { font-size: var(--text-base); max-width: 320px; }
    .boot-stage-light { font-size: 1.1rem; max-width: 320px; }
    .boot-verse-ko { font-size: 1.02rem; line-height: 1.9; }
    .boot-verse-en { font-size: 0.9rem; }
    .boot-ref { font-size: var(--text-sm); }
    .boot-dedication { font-size: 0.88rem; margin-top: 1.8rem; padding-top: 1.2rem; max-width: 320px; }
    .boot-tap-hint { margin-top: 1.8rem; }
  }

  /* 다중 선택 모드 — verse-row 시각 + 플로팅 바 */
  .verse-row.multi-selected {
    background: rgba(201, 169, 97, 0.18) !important;
    box-shadow: inset 3px 0 0 var(--accent);
  }
  body.multi-sel-mode .reader { user-select: none; -webkit-user-select: none; }
  body.multi-sel-mode .verse-row { cursor: pointer; }
  body.multi-sel-mode .verse-row:not(.multi-selected):hover {
    background: rgba(201, 169, 97, 0.06) !important;
  }
  .multi-sel-bar {
    position: fixed;
    bottom: calc(1.2rem + env(safe-area-inset-bottom));
    left: 50%; transform: translateX(-50%);
    background: var(--bg);
    border: 1.5px solid var(--accent);
    border-radius: var(--r-full);
    padding: 0.5rem 0.85rem;
    z-index: 120;
    display: flex; gap: var(--space-2); align-items: center;
    box-shadow: 0 12px 36px rgba(0,0,0,0.55);
    max-width: calc(100vw - 24px);
  }
  .multi-sel-bar[hidden] { display: none; }
  .msb-count {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--accent);
    font-weight: 600;
    margin-right: 0.3rem;
    white-space: nowrap;
  }
  .msb-color {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s;
  }
  .msb-color[data-color="yellow"] { background: var(--hl-yellow); }
  .msb-color[data-color="green"] { background: var(--hl-green); }
  .msb-color[data-color="blue"] { background: var(--hl-blue); }
  .msb-color[data-color="pink"] { background: var(--hl-pink); }
  .msb-color:hover { transform: scale(1.15); border-color: var(--text); }
  .msb-clear {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--surface);
    color: var(--text-faint);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding: 0;
  }
  .msb-clear svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.8;
  }
  .msb-clear:hover { color: #c95151; border-color: #c95151; }
  .msb-done {
    padding: 0.4rem 0.85rem;
    background: var(--accent);
    color: var(--accent-fg);
    border: none; border-radius: var(--r-full);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    margin-left: 0.2rem;
  }
  .msb-done:hover { filter: brightness(1.1); }
  /* v214 — 노트 진입 버튼 (팔레트 안) */
  .msb-note, .msb-gift {
    width: 34px; height: 34px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: var(--surface);
    color: var(--text-dim);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .msb-gift { color: var(--accent); }
  .msb-note svg,
  .msb-gift svg {
    width: 16px;
    height: 16px;
  }
  .msb-note:hover, .msb-gift:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent-dim); }
  @media (max-width: 720px) {
    .multi-sel-bar { padding: 0.4rem 0.6rem; gap: 0.35rem; }
    .msb-count { font-size: 0.78rem; }
    .msb-color, .msb-clear, .msb-note, .msb-gift { width: 30px; height: 30px; }
  }

  /* 하단 네비 바 — 항상 보이는 빠른 장 이동 */
  .nav-bar {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    padding: 0.45rem max(0.5rem, env(safe-area-inset-left)) max(0.45rem, env(safe-area-inset-bottom)) max(0.5rem, env(safe-area-inset-right));
    /* v473 — 테마 따라 surface 톤 + alpha (light 에서 어두운 nav 깨짐 fix) */
    background: rgba(var(--surface-rgb), 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
    z-index: 80;
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
  }
  .nav-bar-btn {
    width: 40px; height: 40px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, border-color 0.12s;
  }
  .nav-bar-btn:hover { background: var(--surface-2); border-color: var(--accent-dim); color: var(--accent); }
  .nav-bar-btn:disabled { opacity: 0.35; cursor: default; }
  .nav-bar-btn svg { width: 18px; height: 18px; }
  .nav-bar-ref {
    flex: 0 1 auto;
    min-width: 130px;
    padding: 0.5rem 1.2rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, color 0.15s;
  }
  .nav-bar-ref:hover { border-color: var(--accent-dim); color: var(--accent); }
  .nav-bar-jump-btn { opacity: 0.78; }
  .nav-bar-jump-btn:hover { opacity: 1; }
  /* 절 점프 팝업 — 점프 버튼 위에 떠있음 */
  .nav-bar-jump-pop {
    position: absolute;
    bottom: calc(100% + 6px);
    right: max(0.5rem, env(safe-area-inset-right));
    background: var(--bg);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-lg);
    padding: 0.55rem;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    display: flex;
    gap: 0.35rem;
    align-items: center;
    animation: navJumpPop 0.18s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  @keyframes navJumpPop {
    from { opacity: 0; transform: translateY(8px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .nav-bar-jump-pop[hidden] { display: none; }
  .nav-bar-jump-pop input {
    width: 76px;
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-base);
    text-align: center;
  }
  .nav-bar-jump-pop input:focus { outline: none; border-color: var(--accent); }
  .nav-bar-jump-pop button {
    padding: 0.5rem 0.85rem;
    background: var(--accent);
    color: var(--accent-fg);
    border: none;
    border-radius: var(--r-md);
    font-weight: 600;
    font-family: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
  }
  /* 본문 하단 여백 — 마지막 절 가독성 */
  .reader { padding-bottom: 2.5rem !important; }
  @media (max-width: 720px) {
    .nav-bar-btn { width: 38px; height: 38px; }
    .nav-bar-btn svg { width: 16px; height: 16px; }
    .nav-bar-ref { min-width: 110px; padding: 0.5rem 0.85rem; font-size: 0.88rem; }
    .nav-bar { gap: 0.35rem; padding-left: 0.35rem; padding-right: 0.35rem; }
  }

  /* 업데이트 가능 상태 — 강조 (펄스 애니메이션) */
  .app-ver-foot.update-available,
  .settings-toggle.update-available {
    background: var(--accent) !important;
    color: var(--accent-fg) !important;
    border-color: var(--accent) !important;
    font-weight: 600 !important;
    animation: pulse-update 2s ease-in-out infinite;
    opacity: 1 !important;
  }
  @keyframes pulse-update {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 169, 97, 0.5); }
    50%      { box-shadow: 0 0 0 8px rgba(201, 169, 97, 0); }
  }

  /* 앱 버전 — 페이지 맨 아래 우측 (떠있는 작은 텍스트, 클릭 방해 X) */
  .app-ver-foot {
    position: fixed;
    right: 10px;
    bottom: max(8px, env(safe-area-inset-bottom));
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    color: var(--text-faint);
    opacity: 0.55;
    pointer-events: auto;
    cursor: help;
    user-select: none;
    z-index: 50;
    background: rgba(var(--surface-rgb), 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0.15rem 0.45rem;
    border-radius: var(--r-full);
    border: 1px solid var(--border);
    transition: opacity 0.2s;
  }
  .app-ver-foot:hover { opacity: 1; }
  .app-ver-foot:empty { display: none; }
  @media (max-width: 720px) {
    /* v1066x — 모바일 독서면에서는 일반 버전 pill 이 본문을 가리지 않게 숨긴다.
       업데이트 필요 상태만 하단 actionbar 위에 띄워서 운영 신호는 유지한다. */
    .app-ver-foot {
      display: none;
      font-size: 0.6rem;
      right: 12px;
      bottom: calc(max(12px, env(safe-area-inset-bottom)) + 64px);
      padding: 0.12rem 0.38rem;
      opacity: 0.78;
    }
    .app-ver-foot.update-available {
      display: block;
      z-index: 130;
    }
  }

  /* v224 — JS 기반 tooltip 컨테이너 (viewport boundary 안전, position fixed)
     v222 의 CSS ::after 방식은 우측 끝 아이콘에서 잘려서 폐기 */
  .app-tip {
    position: fixed;
    background: var(--surface-2, #2a2620);
    color: var(--text);
    font-family: 'Noto Serif KR', 'Inter', sans-serif;
    font-size: 0.76rem;
    padding: 5px 10px;
    border-radius: var(--r-sm);
    white-space: nowrap;
    pointer-events: none;
    z-index: 99999;
    box-shadow: 0 4px 14px rgba(0,0,0,0.32);
    border: 1px solid var(--border);
    opacity: 0;
    transform: translateY(-3px);
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .app-tip.show { opacity: 1; transform: translateY(0); }

  /* v220 — 데스크탑·모바일 동일: 부차 아이콘 hidden + ⋯ 더보기 표시 */
  .more-menu-btn { display: inline-flex; }
  /* v220 — 부부 (노트 popover 안에 있음), 태그 관리·노트 그래프·내 서가 (⋯ 더보기 안) */
  #btn-couple, #btn-tag-mgr, #btn-graph, #btn-library { display: none; }
  @media (min-width: 721px) {
    .topbar #btn-bookmark {
      display: none;
      visibility: hidden;
      pointer-events: none;
    }
  }
  .more-menu-pop {
    position: fixed;
    top: 64px;
    right: 1rem;
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
    border-radius: 16px;
    padding: 7px;
    box-shadow:
      0 18px 48px rgba(0,0,0,0.24),
      inset 0 1px 0 rgba(255,255,255,0.06);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    z-index: 99000;
    min-width: 216px;
    transform-origin: top right;
  }
  #notes-menu.note-anchored-menu,
  #more-menu-pop.more-menu-pop {
    width: 236px;
    min-width: 236px;
    max-width: 236px;
    box-sizing: border-box;
    z-index: 99000;
  }
  .more-menu-pop[hidden] { display: none; }

  /* v246 — 통독 진행 모달 */
  /* v310c — Apple 스타일 화이트 톤 override (이 모달 안에서만 paper-/text- 변수 재정의).
     라이트: #fff 배경 + #1d1d1f 잉크 + Apple system gray 보조 + 기존 accent 포인트.
     다크: Apple 다크 톤. 신호색은 system green/red. */
  /* v351c — light/dark 분기 뒤집기: dark default + light override */
  #reading-progress-modal {
    --paper-bg-1: #1c1c1e;
    --paper-bg-2: #2c2c2e;
    --paper-ink: #f5f5f7;
    --paper-meta: #98989d;
    --paper-ref: #2c2c2e;
    --surface: #1c1c1e;
    --border: #38383a;
    --text: #f5f5f7;
    --text-dim: #98989d;
    --text-faint: #6e6e73;
    --rp-up: #30d158;
    --rp-down: #ff453a;
    font-family: -apple-system, BlinkMacSystemFont, "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  /* v314c+ — 모달 안 *모든* element 의 박힌 font-family 무력화.
     button/input/select 같은 user-agent stylesheet 도 포함 (이전엔 시간 라벨이 다른 폰트로 보임).
     specificity (1,0,1) 가 자식의 (0,1,0) 보다 우선. */
  #reading-progress-modal,
  #reading-progress-modal * {
    font-family: inherit;
  }
  #reading-progress-modal h2,
  #reading-progress-modal [class^="rp-"],
  #reading-progress-modal [class*=" rp-"] {
    letter-spacing: inherit;
  }
  /* v314c+ — Hero % 특수: tight letter-spacing + semibold (SF Display 톤) */
  #reading-progress-modal .rp-percent {
    font-weight: 600;
    letter-spacing: -0.025em;
  }
  /* v314c+ — 큰 숫자 weight 700 → 600 (sans-serif 에서 700 은 과함) */
  #reading-progress-modal .rp-stat-value b,
  #reading-progress-modal .rp-otnt-pct,
  #reading-progress-modal .rp-sim-time b,
  #reading-progress-modal .rp-sim-rate b {
    font-weight: 600;
  }
  /* v314c+ — Apple Settings grouped insets: 컨테이너 회색, 카드 흰 */
  #reading-progress-modal .modal,
  #reading-progress-modal .reading-progress-panel {
    background: var(--paper-bg-2);
  }
  #reading-progress-modal .rp-hero,
  #reading-progress-modal .rp-gamify {
    background: var(--paper-bg-2);
    border-bottom-color: transparent;
  }
  #reading-progress-modal .rp-stat-card {
    padding: 1rem;
    background: var(--paper-bg-1);
  }
  #reading-progress-modal .rp-sim-card {
    padding: 1rem clamp(1rem, 2.4vw, 1.25rem);
    background: var(--paper-bg-1);
  }
  /* v314c+ — progress bar 색: 베이지 accent 가 흰 배경에 묻힘 → 진한 잉크 */
  #reading-progress-modal .rp-fill,
  #reading-progress-modal .rp-stat-bar > span,
  #reading-progress-modal .rp-sim-bar > span,
  #reading-progress-modal .rp-otnt-bar > span {
    background: var(--paper-ink);
  }
  #reading-progress-modal .rp-stat-card.highlight {
    border-color: color-mix(in srgb, var(--paper-ink) 18%, transparent);
    background: color-mix(in srgb, var(--paper-ink) 3%, var(--paper-bg-1) 97%);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--paper-ink) 8%, transparent);
  }
  #reading-progress-modal .rp-stat-card.done .rp-stat-value b,
  #reading-progress-modal .rp-sim-card.done .rp-sim-rate b {
    color: var(--paper-ink);
  }
  #reading-progress-modal .rp-slider::-webkit-slider-thumb,
  #reading-progress-modal .rp-slider::-moz-range-thumb {
    background: var(--paper-ink);
    border-color: var(--paper-bg-1);
  }
  /* v351c — light/sepia 명시 시만 light override */
  [data-theme="light"] #reading-progress-modal,
  [data-theme="sepia"] #reading-progress-modal {
    --paper-bg-1: #ffffff;
    --paper-bg-2: #f5f5f7;
    --paper-ink: #1d1d1f;
    --paper-meta: #6e6e73;
    --paper-ref: #f5f5f7;
    --surface: #ffffff;
    --border: #d2d2d7;
    --text: #1d1d1f;
    --text-dim: #6e6e73;
    --text-faint: #aeaeb2;
    --rp-up: #34c759;
    --rp-down: #ff3b30;
  }
  /* v310c — hero 영역 신설: 큰 % + sub + 얇은 progress + inline summary.
     이전 modal-head 횡렬 5-element (제목/%/bar/count/✕) 폐기 → 시각 위계 정리. */
  body.reading-progress-open {
    overflow: hidden;
  }
  #reading-progress-modal.open {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }
  #reading-progress-modal .reading-progress-panel {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #reading-progress-modal .modal-head {
    align-items: center;
    flex: 0 0 auto;
    padding: 0.72rem max(1rem, env(safe-area-inset-left)) 0.72rem max(1rem, env(safe-area-inset-right));
    background: color-mix(in srgb, var(--paper-bg-1) 92%, var(--paper-bg-2));
    border-bottom: 1px solid color-mix(in srgb, var(--paper-meta) 16%, transparent);
  }
  .rp-workspace {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  }
  .rp-sidebar {
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid color-mix(in srgb, var(--paper-meta) 14%, transparent);
    background: var(--paper-bg-2);
    -webkit-overflow-scrolling: touch;
  }
  .rp-main {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--paper-bg-2);
  }
  .rp-hero {
    display: flex; flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 1.35rem clamp(0.95rem, 2.4vw, 1.35rem) 1.05rem;
    text-align: center;
    border-bottom: 1px solid color-mix(in srgb, var(--paper-meta) 12%, transparent);
  }
  .rp-percent {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: clamp(3.2rem, 9vw, 4.6rem);
    font-weight: 500;
    color: var(--paper-ink);
    letter-spacing: var(--ls-tight);
    line-height: 1;
    margin: 0;
  }
  .rp-count {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: 0.88rem;
    color: var(--paper-meta);
    letter-spacing: 0.025em;
    white-space: nowrap;
    margin-bottom: 0.35rem;
  }
  .rp-bar {
    width: min(280px, 78%);
    height: 2px;
    background: color-mix(in srgb, var(--paper-meta) 16%, transparent);
    border-radius: var(--r-full);
    overflow: hidden;
    position: relative;
  }
  .rp-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%;
    background: var(--accent);
    transition: width 0.4s ease;
    border-radius: var(--r-full);
  }
  .rp-hero-summary {
    margin-top: 0.6rem;
    display: flex; align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    justify-content: center;
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--paper-meta);
    letter-spacing: var(--ls-wide);
  }
  .rp-hero-summary b {
    font-weight: 700;
    color: var(--paper-ink);
    margin-right: 0.18em;
  }
  .rp-hero-summary .rp-sep {
    width: 1px; height: 11px;
    background: color-mix(in srgb, var(--paper-meta) 22%, transparent);
    display: inline-block;
  }
  /* v256 — 스탯 대시보드 토글 헤더 */
  /* v259 — toggle 도 paper-tone (head 와 일관 contrast) */
  .rp-gamify-toggle {
    width: 100%;
    appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--paper-meta) 18%, transparent);
    padding: 0.6rem clamp(0.9rem, 2.2vw, 1.4rem);
    display: flex; align-items: center;
    justify-content: space-between;
    color: var(--paper-meta);
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: 0.88rem;
    letter-spacing: var(--ls-wide);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, color 0.12s;
  }
  .rp-gamify-toggle:hover { background: color-mix(in srgb, var(--paper-ref) 8%, transparent); color: var(--paper-ink); }
  .rp-gamify-toggle-label {
    font-weight: 500;
    display: inline-flex; align-items: center; gap: 0.4rem;
  }
  .rp-gamify-icon { width: 14px; height: 14px; opacity: 0.85; flex: 0 0 auto; }
  /* v258 — toggle 자식 element 들 pointer-events 차단 (click target 일관 button) */
  .rp-gamify-toggle > * { pointer-events: none; }
  .rp-gamify-toggle-hint {
    margin-left: auto; margin-right: 0.4rem;
    font-size: var(--text-sm);
    color: var(--text-faint);
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    letter-spacing: 0.015em;
  }
  .rp-gamify-chevron {
    width: 16px; height: 16px;
    opacity: 0.7;
    transition: transform 0.22s ease;
  }
  .rp-gamify-toggle[aria-expanded="false"] .rp-gamify-chevron { transform: rotate(-90deg); }
  .rp-gamify-toggle[aria-expanded="false"] { border-bottom: 1px solid var(--border); }
  /* v260+261 — wrap: flex-shrink: 0 으로 부모 height 부족할 때 squeeze 안 됨
     (데스크탑 안 보임 root cause). 펼침은 content height, 접힘은 명시적 0. */
  .rp-gamify-wrap {
    flex: 0 0 auto;
    overflow: hidden;
    transition: max-height 0.28s ease, opacity 0.2s ease;
    max-height: 2000px;
    opacity: 1;
  }
  .rp-gamify-wrap.collapsed {
    max-height: 0 !important;
    opacity: 0;
    border-bottom: 0;
  }
  /* v261 — 다른 chrome row 들도 shrink 차단 */
  .rp-gamify-toggle, .rp-toolbar {
    flex: 0 0 auto;
  }
  /* v310c — stats grid: paper 톤 단색 컨테이너 (radial-gradient 폐기) */
  .rp-gamify {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    grid-auto-rows: 1fr;
    gap: 0.6rem;
    padding: 1rem clamp(0.9rem, 2.2vw, 1.4rem) 1.1rem;
    background: transparent;
    border-bottom: 1px solid color-mix(in srgb, var(--paper-meta) 12%, transparent);
  }
  /* v310c — paper 카드: backdrop blur·흰색 highlight·다중 shadow 모두 제거. 단색 + 옅은 보더. */
  .rp-stat-card {
    padding: 0.85rem 0.9rem 0.8rem;
    position: relative;
    background: color-mix(in srgb, var(--paper-bg-1) 92%, var(--paper-ink) 2%);
    border: 1px solid color-mix(in srgb, var(--paper-meta) 16%, transparent);
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--paper-ink) 5%, transparent);
    display: flex; flex-direction: column;
    justify-content: space-between;
    gap: 0.28rem;
    min-width: 0;
    min-height: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }
  @media (hover: hover) {
    .rp-stat-card:hover {
      transform: translateY(-1px);
      border-color: color-mix(in srgb, var(--paper-meta) 28%, transparent);
      box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--paper-ink) 12%, transparent);
    }
  }
  /* v265 — 폰트: 가독성↑ (글래스 배경 위에서 진한 contrast 필요)
     단일 패밀리 (Cormorant + Noto Serif KR) 유지, weight + 색상 진하게. */
  .rp-stat-label {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: var(--text-xs);
    letter-spacing: 0.025em;
    color: color-mix(in srgb, var(--paper-meta) 95%, transparent);
    font-weight: 600;
    text-transform: none;
  }
  .rp-stat-value {
    font-family: 'Noto Serif KR', 'Cormorant Garamond', serif;
    font-size: var(--text-base);
    color: var(--paper-ink);
    line-height: 1.2;
    letter-spacing: 0.005em;
    font-weight: 500;
  }
  .rp-stat-value b {
    color: var(--paper-ink);
    font-weight: 700;
    font-size: var(--text-xl);
    font-family: 'Noto Serif KR', 'Cormorant Garamond', serif;
    letter-spacing: 0;
  }
  .rp-stat-sub {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--paper-ink) 70%, var(--paper-meta) 30%);
    line-height: var(--lh-tight);
    letter-spacing: 0.01em;
    font-weight: 500;
  }
  .rp-stat-sub b {
    font-weight: 700;
    color: var(--paper-ink);
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  }
  /* v310c — 신호색 다시 살림: Apple system green(▲) / red(▼). 회색 baseline 은 on-track 만 */
  .rp-stat-sub.rp-good,
  .rp-stat-sub.rp-good b,
  .rp-stat-sub.rp-good .rp-sym {
    color: var(--rp-up);
  }
  .rp-stat-sub.rp-behind,
  .rp-stat-sub.rp-behind b,
  .rp-stat-sub.rp-behind .rp-sym {
    color: var(--rp-down);
  }
  .rp-stat-sub.rp-on-track {
    color: color-mix(in srgb, var(--paper-ink) 60%, var(--paper-meta) 40%);
  }
  .rp-stat-sub.rp-on-track b { color: var(--paper-ink); }
  .rp-sym {
    display: inline-block;
    font-size: 0.78em;
    margin-right: 0.28em;
    color: color-mix(in srgb, var(--paper-meta) 70%, transparent);
    letter-spacing: 0;
    vertical-align: 0.05em;
    font-weight: 700;
  }
  /* v265 — 단위 표기 (장/일, 회 등): 동일 세리프, 작게 + 옅게 */
  .rp-unit {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    font-weight: 500;
    color: color-mix(in srgb, var(--paper-meta) 88%, transparent);
    letter-spacing: 0.015em;
    margin-left: 0.22em;
    text-transform: none;
  }
  .rp-stat-bar {
    width: 100%;
    height: 2px;
    background: color-mix(in srgb, var(--paper-meta) 14%, transparent);
    border-radius: var(--r-full);
    overflow: hidden;
    margin-top: 0.18rem;
  }
  .rp-stat-bar > span {
    display: block; height: 100%;
    background: var(--accent);
    border-radius: var(--r-full);
    transition: width 0.3s ease;
  }
  /* v310c — done/highlight: 녹/멀티톤 폐기, 단일 accent 만 */
  .rp-stat-card.done .rp-stat-value b { color: var(--accent); }
  .rp-stat-card.done .rp-stat-bar > span { background: var(--accent); }
  /* v310c — 구약·신약 통합 카드 안 미니 progress 두 줄 (한 카드에 두 정보) */
  .rp-otnt {
    display: flex; flex-direction: column;
    gap: 0.34rem;
    font-size: var(--text-sm);
    font-weight: 500;
  }
  .rp-otnt-row {
    display: flex; align-items: center;
    gap: 0.55rem;
    color: var(--paper-meta);
  }
  .rp-otnt-name {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-weight: 600;
    color: var(--paper-ink);
    letter-spacing: var(--ls-wide);
    flex: 0 0 auto;
    min-width: 2.4em;
  }
  .rp-otnt-bar {
    flex: 1;
    height: 2px;
    background: color-mix(in srgb, var(--paper-meta) 14%, transparent);
    border-radius: var(--r-full);
    overflow: hidden;
  }
  .rp-otnt-bar > span {
    display: block; height: 100%;
    background: var(--accent);
    border-radius: var(--r-full);
    transition: width 0.3s ease;
  }
  .rp-otnt-pct {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-weight: 700;
    color: var(--paper-ink);
    flex: 0 0 auto;
    min-width: 2.4em;
    text-align: right;
    font-size: 0.88rem;
    letter-spacing: 0.01em;
  }
  .rp-stat-card.highlight {
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    background: color-mix(in srgb, var(--accent) 5%, var(--paper-bg-1) 92%);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  /* v310c — 슬라이더 카드: paper 단색 (글래스 폐기). 풀폭 2-col 구조 유지. */
  .rp-sim-card {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 1.1rem clamp(1rem, 3vw, 1.6rem);
    align-items: center;
    padding: 1rem clamp(0.95rem, 2.4vw, 1.3rem);
    background: color-mix(in srgb, var(--paper-bg-1) 94%, var(--paper-ink) 2%);
    border: 1px solid color-mix(in srgb, var(--paper-meta) 16%, transparent);
    border-radius: 10px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--paper-ink) 5%, transparent);
    min-width: 0;
  }
  .rp-sim-left, .rp-sim-right {
    display: flex; flex-direction: column;
    gap: 0.32rem;
    min-width: 0;
  }
  .rp-sim-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 0.6rem;
  }
  .rp-sim-time {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: var(--text-base);
    color: var(--paper-meta);
    letter-spacing: 0.01em;
  }
  .rp-sim-time b {
    font-size: 1.12rem;
    font-weight: 700;
    color: var(--paper-ink);
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  }
  .rp-sim-rate {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    color: var(--paper-ink);
    margin-top: 0.1rem;
  }
  .rp-sim-rate b {
    font-size: 1.95rem;
    font-weight: 700;
    color: var(--accent);
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    letter-spacing: 0;
    line-height: 1;
  }
  /* v310c — sim-card done: 녹색 폐기, 단일 accent */
  .rp-sim-card.done .rp-sim-rate b { color: var(--accent); }
  /* v310c — slider: 흰색 highlight·다중 shadow 제거, 단색 thumb */
  .rp-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    background: color-mix(in srgb, var(--paper-meta) 18%, transparent);
    border-radius: var(--r-full);
    outline: none;
    cursor: pointer;
    margin: 0.15rem 0 0.05rem;
  }
  .rp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid color-mix(in srgb, var(--paper-bg-1) 80%, var(--accent) 20%);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--paper-ink) 18%, transparent);
    cursor: grab;
    transition: transform 0.15s ease;
  }
  .rp-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
  .rp-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.18); }
  .rp-slider::-moz-range-thumb {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid color-mix(in srgb, var(--paper-bg-1) 80%, var(--accent) 20%);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--paper-ink) 18%, transparent);
    cursor: grab;
  }
  /* v310c — sim-bar: 그라데이션 폐기, 단색 accent */
  .rp-sim-bar {
    width: 100%;
    height: 3px;
    background: color-mix(in srgb, var(--paper-meta) 16%, transparent);
    border-radius: var(--r-full);
    overflow: hidden;
  }
  .rp-sim-bar > span {
    display: block; height: 100%;
    background: var(--accent);
    border-radius: var(--r-full);
    transition: width 0.22s ease;
  }
  .rp-sim-card.done .rp-sim-bar > span { background: var(--accent); }
  /* v265 — 우측 정보 라인 가독성 강화 (글래스 위에서 contrast↑) */
  .rp-sim-progress, .rp-sim-forecast, .rp-sim-msg {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    line-height: 1.4;
    letter-spacing: 0.012em;
    min-width: 0;
    word-break: keep-all;
  }
  .rp-sim-progress {
    font-size: 0.88rem;
    color: color-mix(in srgb, var(--paper-ink) 65%, var(--paper-meta) 35%);
    font-weight: 500;
  }
  .rp-sim-progress b {
    color: var(--accent);
    font-weight: 700;
    font-size: 1rem;
  }
  .rp-sim-card.done .rp-sim-progress b { color: var(--accent); }
  .rp-sim-forecast {
    font-size: var(--text-sm);
    color: color-mix(in srgb, var(--paper-ink) 55%, var(--paper-meta) 45%);
    font-weight: 500;
  }
  .rp-sim-forecast b {
    color: var(--paper-ink);
    font-weight: 700;
    font-size: var(--text-base);
  }
  .rp-sim-card.done .rp-sim-forecast b { color: var(--paper-ink); }
  .rp-sim-msg {
    font-size: 0.86rem;
    margin-top: 0.15rem;
    font-weight: 500;
  }
  /* v310c — sim-msg 신호색 다시: Apple system green/red */
  .rp-sim-msg.rp-good,
  .rp-sim-msg.rp-good b,
  .rp-sim-msg.rp-good .rp-sym {
    color: var(--rp-up);
  }
  .rp-sim-msg.rp-good b { font-weight: 700; }
  .rp-sim-msg.rp-behind,
  .rp-sim-msg.rp-behind b,
  .rp-sim-msg.rp-behind .rp-sym {
    color: var(--rp-down);
  }
  .rp-sim-msg.rp-behind b { font-weight: 700; }
  @media (max-width: 720px) {
    /* v265 — 모바일 글래스 콤팩트: 카드 자동 크기 + 글래스 효과 유지 + 가독성 폰트 */
    .rp-gamify {
      grid-template-columns: repeat(2, 1fr);
      grid-auto-rows: min-content;
      gap: var(--space-2);
      padding: 0.7rem 0.85rem 0.85rem;
    }
    .rp-stat-card {
      padding: 0.5rem 0.65rem 0.55rem;
      gap: 0.14rem;
      min-height: auto;
      justify-content: flex-start;
      border-radius: 9px;
    }
    .rp-stat-label { font-size: var(--text-xs); letter-spacing: var(--ls-wide); }
    .rp-stat-value { font-size: 0.88rem; line-height: 1.15; }
    .rp-stat-value b { font-size: 1.22rem; }
    .rp-stat-sub { font-size: 0.76rem; line-height: var(--lh-tight); }
    .rp-unit { font-size: var(--text-xs); margin-left: 0.18em; }
    .rp-stat-bar { height: 2px; margin-top: 0.18rem; }
    /* 슬라이더 카드 — 풀폭 1-col stack, 글래스 유지 */
    .rp-sim-card {
      grid-template-columns: 1fr;
      gap: 0.6rem;
      padding: 0.75rem 0.85rem 0.85rem;
      border-radius: 10px;
    }
    .rp-sim-left, .rp-sim-right { gap: 0.32rem; }
    .rp-sim-time { font-size: 0.86rem; }
    .rp-sim-time b { font-size: var(--text-md); }
    .rp-sim-rate b { font-size: 1.7rem; }
    .rp-sim-progress { font-size: var(--text-sm); }
    .rp-sim-progress b { font-size: var(--text-base); }
    .rp-sim-forecast { font-size: 0.76rem; }
    .rp-sim-forecast b { font-size: 0.88rem; }
    .rp-sim-msg { font-size: var(--text-sm); }
  }

  .rp-toolbar {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.55rem clamp(0.9rem, 2.2vw, 1.4rem);
    background: color-mix(in srgb, var(--paper-bg-1) 82%, var(--paper-bg-2));
    border-bottom: 1px solid color-mix(in srgb, var(--paper-meta) 14%, transparent);
    font-family: 'Inter', sans-serif;
    flex-wrap: wrap;
  }
  .rp-hint { font-size: var(--text-xs); color: var(--text-faint); }
  .rp-toolbar-actions { display: flex; gap: 0.4rem; }
  .rp-mini-btn {
    appearance: none;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: inherit;
    font-size: var(--text-xs);
    padding: 0.32rem 0.7rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
  }
  .rp-mini-btn:hover { color: var(--text); border-color: var(--accent-dim); background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .rp-mini-btn.rp-danger:hover { color: #c47a6a; border-color: #c47a6a; background: color-mix(in srgb, #c47a6a 8%, transparent); }
  .rp-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0.95rem clamp(0.95rem, 2.4vw, 1.5rem) calc(1.3rem + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
  }
  /* v249 — 책별 section 크게 (사용자 요청: "책 창이 좀 작다") */
  .rp-section {
    margin-bottom: 1.2rem;
    padding: 0.95rem 1rem 1rem;
    background: var(--paper-bg-1);
    border: 1px solid color-mix(in srgb, var(--paper-meta) 15%, transparent);
    border-radius: 12px;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--paper-ink) 5%, transparent);
  }
  .rp-section-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
  }
  .rp-book-title {
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.48rem;
    flex-wrap: wrap;
  }
  .rp-book-name {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.15rem;
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.005em;
  }
  .rp-book-en {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.88rem;
    color: var(--text-faint);
  }
  .rp-book-pct {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    white-space: nowrap;
    text-align: right;
  }
  /* v247 — 책별 전체 토글 버튼 */
  .rp-book-check,
  .rp-book-toggle {
    appearance: none;
    background: color-mix(in srgb, var(--paper-bg-2) 88%, var(--paper-bg-1));
    border: 1px solid color-mix(in srgb, var(--paper-meta) 22%, transparent);
    color: var(--paper-meta);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.45rem 0.62rem;
    min-height: 42px;
    border-radius: 10px;
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.08s;
  }
  .rp-book-check:hover,
  .rp-book-toggle:hover {
    background: color-mix(in srgb, var(--accent) 10%, var(--paper-bg-1));
    color: var(--paper-ink);
    border-color: var(--accent-dim);
  }
  .rp-book-check:active,
  .rp-book-toggle:active { transform: scale(0.98); }
  .rp-book-check.is-done,
  .rp-book-toggle.is-done {
    background: color-mix(in srgb, var(--accent) 18%, var(--paper-bg-1));
    color: var(--accent);
    border-color: var(--accent);
  }
  .rp-book-check-box {
    width: 18px;
    height: 18px;
    border: 1.5px solid currentColor;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
  .rp-book-check-box svg {
    width: 13px;
    height: 13px;
    opacity: 0;
    transition: opacity 0.12s;
  }
  .rp-book-check.is-done .rp-book-check-box svg,
  .rp-book-toggle.is-done .rp-book-check-box svg { opacity: 1; }
  .rp-book-check-text {
    white-space: nowrap;
  }
  .rp-book-bar {
    width: 100%;
    height: 3px;
    background: color-mix(in srgb, var(--paper-meta) 14%, transparent);
    border-radius: var(--r-full);
    margin-bottom: 0.55rem;
    overflow: hidden;
  }
  .rp-book-bar > span {
    display: block; height: 100%;
    background: var(--accent-dim);
    border-radius: var(--r-full);
    transition: width 0.25s ease;
  }
  .rp-chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
    gap: 4px;
  }
  .rp-chip {
    appearance: none;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    border-radius: 5px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.1s, color 0.1s, border-color 0.1s, transform 0.08s;
    padding: 0;
  }
  .rp-chip:hover { background: var(--surface-2); color: var(--text); border-color: var(--accent-dim); }
  .rp-chip:active { transform: scale(0.95); }
  .rp-chip.done {
    background: color-mix(in srgb, var(--accent) 20%, var(--surface));
    border-color: var(--accent);
    color: var(--accent);
    font-weight: 600;
  }
  .rp-chip.done:hover { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); }
  /* 모바일에서 더 큼직하게 */
  @media (max-width: 900px) {
    .rp-workspace {
      grid-template-columns: 1fr;
      grid-template-rows: auto minmax(0, 1fr);
    }
    .rp-sidebar {
      border-right: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--paper-meta) 14%, transparent);
      max-height: 42dvh;
    }
  }
  /* 모바일에서 더 큼직하게 */
  @media (max-width: 720px) {
    #reading-progress-modal .modal,
    #reading-progress-modal .reading-progress-panel { max-width: 100vw !important; width: 100vw !important; max-height: 100dvh !important; height: 100dvh !important; border-radius: 0 !important; }
    .rp-head-summary { width: 100%; }
    .rp-section { padding: 0.8rem; border-radius: 10px; }
    .rp-section-head { grid-template-columns: 1fr auto; gap: 0.6rem; }
    .rp-book-check { grid-column: 1 / -1; justify-content: center; width: 100%; }
    .rp-chapter-grid { grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 4px; }
    .rp-chip { font-size: 0.78rem; }
  }
  .more-menu-item {
    appearance: none;
    display: flex; align-items: center; gap: 11px;
    width: 100%;
    min-height: 42px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    font-weight: 650;
    letter-spacing: 0;
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
  }
  .more-menu-item:hover,
  .more-menu-item:focus-visible,
  .more-menu-item.active {
    background: color-mix(in srgb, var(--accent) 11%, var(--surface-2));
    border-color: color-mix(in srgb, var(--accent) 24%, transparent);
    color: var(--text);
    outline: none;
  }
  .more-menu-item:active { transform: translateY(1px); }
  .more-menu-item svg {
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
    color: var(--accent);
    opacity: 0.9;
    flex: 0 0 auto;
    box-sizing: border-box;
  }
  .more-menu-divider {
    height: 1px;
    background: color-mix(in srgb, var(--accent) 16%, var(--border));
    margin: 5px 8px;
    flex: 0 0 auto;
  }
  .note-anchored-menu-item,
  .more-menu-item {
    min-height: 42px;
    padding: 10px 12px;
    gap: 11px;
    line-height: 1.2;
  }
  @media (max-width: 720px), (any-pointer: coarse) and (max-width: 1024px) {
    #notes-menu.note-anchored-menu,
    #more-menu-pop.more-menu-pop {
      width: min(320px, calc(100vw - 32px));
      max-width: calc(100vw - 32px);
      min-width: 0;
      border-radius: 18px;
      padding: 8px;
    }
    #notes-menu.note-anchored-menu {
      box-shadow: 0 18px 54px color-mix(in srgb, #000 42%, transparent);
    }
    #notes-menu .note-anchored-menu-item {
      min-height: 42px;
      padding: 10px 13px;
    }
  }
  /* v228 — 그래프 모달 = 수묵화 종이 위 (사용자 요청: 예술의 경지) */
  .graph-modal-panel {
    --graph-bg: #f3ecdb;
    --graph-panel: rgba(248,242,228,0.85);
    --graph-head: rgba(243,236,219,0.96);
    --graph-stage-bg: #f6efde;
    --graph-stage-aura-1: rgba(58,52,43,0.03);
    --graph-stage-aura-2: rgba(58,52,43,0.025);
    --graph-border: rgba(42,38,32,0.12);
    --graph-border-soft: rgba(42,38,32,0.1);
    --graph-text: #2a2620;
    --graph-text-dim: #5a544c;
    --graph-text-faint: rgba(42,38,32,0.55);
    --graph-accent: #8c7a4f;
    --graph-control-bg: rgba(255,255,255,0.5);
    --graph-legend-bg: rgba(243,236,219,0.88);
    --graph-node-note: #322a1d;
    --graph-node-daily: #1f1c17;
    --graph-node-taxonomy: #5a544c;
    --graph-node-person: #8b6914;
    --graph-node-place: #3d6b4f;
    --graph-node-theme: #7a6520;
    --graph-node-emotion: #6b3d5a;
    --graph-node-concept: #4a3d6b;
    --graph-node-event: #6f5632;
    --graph-node-stroke: rgba(248,241,222,0.9);
    --graph-taxonomy-stroke: rgba(145,118,64,0.42);
    --graph-edge-link: rgba(54,48,39,0.24);
    --graph-edge-xref: rgba(100,126,148,0.34);
    --graph-edge-context: rgba(152,118,58,0.34);
    --graph-edge-kinship: rgba(216,183,98,0.52);
    --graph-thread: rgba(216,183,98,0.82);
    --graph-thread-solid: #d8b762;
    --graph-muted-edge: rgba(58,52,43,0.18);
    --graph-verse-core: #f4cf5f;
    --graph-verse-label: #8b6914;
    --graph-label-stroke: rgba(243,236,219,0.85);
    --graph-cluster-fill: rgba(58,52,43,0.02);
    --graph-cluster-stroke: rgba(58,52,43,0.14);
    --graph-mind-card-bg: rgba(255,255,255,0.76);
    --graph-mind-card-bg-note: rgba(255,255,255,0.86);
    --graph-mind-card-border: rgba(42,38,32,0.11);
    --graph-mind-text: #2a2620;
    --graph-mind-next-bg: rgba(42,38,32,0.1);
    max-width: 100vw;
    width: 100vw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    min-height: 560px;
    background: var(--graph-bg); /* 따뜻한 vellum 톤 */
    color: var(--graph-text);
    border-radius: 0;
  }
  .graph-modal-panel[data-graph-theme="night"] {
    --graph-bg: #080d1a;
    --graph-panel: rgba(12,18,32,0.9);
    --graph-head: rgba(8,13,26,0.94);
    --graph-stage-bg: #070b16;
    /* v1106 — 밤하늘 또렷하게: 오라(안개) 약화 */
    --graph-stage-aura-1: rgba(217,189,115,0.08);
    --graph-stage-aura-2: rgba(111,159,222,0.07);
    --graph-border: rgba(217,189,115,0.2);
    --graph-border-soft: rgba(217,189,115,0.15);
    --graph-text: #efe8d6;
    --graph-text-dim: #c9bea5;
    --graph-text-faint: rgba(239,232,214,0.58);
    --graph-accent: #d9bd73;
    --graph-control-bg: rgba(17,24,42,0.78);
    --graph-legend-bg: rgba(12,18,32,0.82);
    --graph-node-note: #f0eadb;
    --graph-node-daily: #9dbce8;
    --graph-node-taxonomy: #b8aa89;
    --graph-node-person: #d9bd73;
    --graph-node-place: #7fc6a4;
    --graph-node-theme: #e4c878;
    --graph-node-emotion: #d98aaa;
    --graph-node-concept: #a9a1ff;
    --graph-node-event: #d5a36c;
    --graph-node-stroke: rgba(7,11,22,0.92);
    --graph-taxonomy-stroke: rgba(217,189,115,0.48);
    --graph-edge-link: rgba(157,188,232,0.28);
    --graph-edge-xref: rgba(126,164,214,0.44);
    --graph-edge-context: rgba(217,189,115,0.36);
    --graph-edge-kinship: rgba(217,189,115,0.6);
    --graph-thread: rgba(217,189,115,0.92);
    --graph-thread-solid: #d9bd73;
    --graph-muted-edge: rgba(157,188,232,0.16);
    --graph-verse-core: #d9bd73;
    --graph-verse-label: #ffe4a3;
    --graph-label-stroke: rgba(7,11,22,0.9);
    --graph-cluster-fill: rgba(217,189,115,0.035);
    --graph-cluster-stroke: rgba(217,189,115,0.2);
    --graph-mind-card-bg: #3f4a55;
    --graph-mind-card-bg-note: #4b5361;
    --graph-mind-card-border: rgba(226,235,246,0.08);
    --graph-mind-text: #f3f5f8;
    --graph-mind-next-bg: #46515d;
  }
  .graph-modal-panel[data-graph-theme="parchment"] {
    --graph-bg: #ead8ad;
    --graph-panel: rgba(246,231,190,0.88);
    --graph-head: rgba(234,216,173,0.96);
    --graph-stage-bg: #f3dfb5;
    --graph-stage-aura-1: rgba(123,85,34,0.055);
    --graph-stage-aura-2: rgba(177,125,48,0.04);
    --graph-border: rgba(92,63,27,0.18);
    --graph-border-soft: rgba(92,63,27,0.13);
    --graph-text: #2c2115;
    --graph-text-dim: #6d5634;
    --graph-text-faint: rgba(44,33,21,0.56);
    --graph-accent: #9b6d28;
    --graph-control-bg: rgba(255,246,222,0.58);
    --graph-legend-bg: rgba(246,231,190,0.9);
    --graph-thread: rgba(171,118,34,0.88);
    --graph-thread-solid: #ab7622;
    --graph-verse-core: #d6a331;
    --graph-verse-label: #7a521a;
  }
  .graph-modal-panel[data-graph-theme="eden"] {
    --graph-bg: #e4ecd8;
    --graph-panel: rgba(239,246,229,0.88);
    --graph-head: rgba(228,236,216,0.96);
    --graph-stage-bg: #edf4e2;
    --graph-stage-aura-1: rgba(71,112,72,0.06);
    --graph-stage-aura-2: rgba(146,124,61,0.045);
    --graph-border: rgba(58,92,59,0.18);
    --graph-border-soft: rgba(58,92,59,0.13);
    --graph-text: #20291d;
    --graph-text-dim: #53684d;
    --graph-text-faint: rgba(32,41,29,0.56);
    --graph-accent: #6f7f3c;
    --graph-control-bg: rgba(255,255,246,0.58);
    --graph-legend-bg: rgba(239,246,229,0.9);
    --graph-node-daily: #2f6e4f;
    --graph-node-place: #39865f;
    --graph-edge-link: rgba(47,84,55,0.28);
    --graph-edge-context: rgba(111,127,60,0.36);
    --graph-thread: rgba(126,142,61,0.9);
    --graph-thread-solid: #7e8e3d;
    --graph-verse-core: #c8a749;
    --graph-verse-label: #68732f;
  }
  #graph-modal[data-graph-theme="ink"] { --graph-bg: #f3ecdb; }
  #graph-modal[data-graph-theme="night"] { --graph-bg: #080d1a; }
  #graph-modal[data-graph-theme="parchment"] { --graph-bg: #ead8ad; }
  #graph-modal[data-graph-theme="eden"] { --graph-bg: #e4ecd8; }
  /* 데스크톱에서도 전체화면 — overlay padding 제거 */
  #graph-modal.open {
    padding: 0;
    align-items: stretch;
    background: var(--graph-bg, #f3ecdb);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .graph-modal-panel .modal-head { background: var(--graph-head); color: var(--graph-text); border-bottom-color: var(--graph-border); }
  .graph-modal-panel .modal-head h2 { color: var(--graph-text); font-family: 'Cormorant Garamond', 'Noto Serif KR', serif; font-weight: 500; letter-spacing: var(--ls-wide); }
  /* 타이틀 앞 골드 노드 도트 — 지도 노드의 메아리 */
  .graph-modal-panel .modal-head h2 .ko::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--graph-accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--graph-accent) 70%, transparent);
    margin-right: 10px;
    vertical-align: middle;
  }
  /* v1105 — 데스크탑 그래프 헤더 = 지도 위에 떠 있는 글래스 커맨드 바.
     헤더/지도 구분선 제거 — 블러·헤어라인·그림자가 층을 만든다. */
  @media (min-width: 721px) {
    .graph-modal-panel { position: relative; }
    .graph-modal-panel .modal-head {
      position: absolute;
      top: 14px; left: 14px; right: 14px;
      z-index: 6;
      padding: 0.55rem 0.95rem;
      /* v1106 — 뿌연 프로스트 → 또렷한 글래스: 블러 낮추고 채도·헤어라인 올림 */
      background: color-mix(in srgb, var(--graph-bg) 60%, transparent);
      border: 1px solid color-mix(in srgb, var(--graph-accent) 24%, transparent);
      border-radius: 18px;
      backdrop-filter: blur(10px) saturate(1.4);
      -webkit-backdrop-filter: blur(10px) saturate(1.4);
      box-shadow: 0 18px 48px -30px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.07);
    }
    .graph-modal-panel .modal-head h2 { font-size: 1.18rem; letter-spacing: 0.05em; white-space: nowrap; }
    .graph-modal-panel .graph-shell { border-top: 0; }
    .graph-modal-panel .graph-detail {
      padding-top: calc(14px + 58px + 1.1rem);
      border-left-color: color-mix(in srgb, var(--graph-border-soft) 70%, transparent);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }
  }
  .graph-modal-panel .modal-head-iconbtn {
    color: var(--graph-text-faint);
    background: color-mix(in srgb, var(--graph-text) 7%, transparent);
    border-color: color-mix(in srgb, var(--graph-text) 13%, transparent);
  }
  .graph-modal-panel .modal-head-iconbtn:hover,
  .graph-modal-panel .modal-head-iconbtn:focus-visible {
    color: var(--graph-text);
    background: color-mix(in srgb, var(--graph-accent) 14%, transparent);
    border-color: color-mix(in srgb, var(--graph-accent) 45%, transparent);
  }
  .graph-fullscreen-btn .graph-fullscreen-exit { display: none; }
  #graph-modal.graph-fullscreen .graph-fullscreen-btn .graph-fullscreen-enter { display: none; }
  #graph-modal.graph-fullscreen .graph-fullscreen-btn .graph-fullscreen-exit { display: block; }
  #graph-modal.graph-fullscreen .graph-modal-panel {
    max-width: 100vw;
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0;
  }
  #graph-modal.graph-fullscreen .modal-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    padding: 0.85rem 1rem 0.7rem;
    /* v1105 — 전체화면도 구분선 없이: 위에서 아래로 사라지는 글래스 스크림 */
    background: linear-gradient(180deg, var(--graph-head), color-mix(in srgb, var(--graph-head) 72%, transparent));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: blur(10px) saturate(1.3);
    -webkit-backdrop-filter: blur(10px) saturate(1.3);
  }
  #graph-modal.graph-fullscreen .graph-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    height: 100%;
    border-top: 0;
    overflow: hidden;
  }
  #graph-modal.graph-fullscreen .graph-detail,
  #graph-modal.graph-fullscreen .graph-foot {
    display: none;
  }
  #graph-modal.graph-fullscreen .graph-stage {
    min-height: 0;
  }
  #graph-modal.graph-fullscreen .modal-head,
  #graph-modal.graph-fullscreen .graph-legend {
    transition: opacity 0.18s ease, transform 0.18s ease;
    will-change: opacity, transform;
  }
  #graph-modal.graph-fullscreen:not(.graph-fullscreen-ui-visible) .modal-head,
  #graph-modal.graph-fullscreen:not(.graph-fullscreen-ui-visible) .graph-legend {
    opacity: 0;
    pointer-events: none;
  }
  #graph-modal.graph-fullscreen:not(.graph-fullscreen-ui-visible) .modal-head {
    transform: translateY(calc(-100% - 10px));
  }
  #graph-modal.graph-fullscreen:not(.graph-fullscreen-ui-visible) .graph-legend {
    transform: translateY(calc(100% + 12px));
  }
  #graph-modal.graph-fullscreen.graph-fullscreen-ui-visible .modal-head,
  #graph-modal.graph-fullscreen.graph-fullscreen-ui-visible .graph-legend {
    opacity: 1;
    transform: translateY(0);
  }
  .graph-head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
  }
  .graph-toolbar {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
  }
  .graph-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 190px;
    height: 36px;
    padding: 0 0.75rem;
    /* v1105 — 글래스 필 컨트롤 (미래형: 보더 미니멀 + 포커스 글로우) */
    border: 1px solid color-mix(in srgb, var(--graph-text) 13%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--graph-text) 7%, transparent);
    color: var(--graph-text-dim);
    transition: border-color 0.16s var(--ease-standard), box-shadow 0.16s var(--ease-standard), background 0.16s var(--ease-standard);
  }
  .graph-search-wrap:focus-within {
    border-color: color-mix(in srgb, var(--graph-accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--graph-accent) 15%, transparent);
    color: var(--graph-text);
  }
  .graph-search-wrap svg {
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
  }
  #graph-search {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--graph-text);
    font-family: 'Inter', 'Noto Serif KR', sans-serif;
    font-size: var(--text-sm);
  }
  #graph-search::placeholder { color: var(--graph-text-faint); }
  #graph-range,
  #graph-theme,
  #graph-view-mode {
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--graph-text) 13%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--graph-text) 7%, transparent);
    color: var(--graph-text);
    font-family: 'Inter', 'Noto Serif KR', sans-serif;
    font-size: 0.78rem;
    padding: 0 0.7rem;
    cursor: pointer;
    transition: border-color 0.16s var(--ease-standard), background 0.16s var(--ease-standard), box-shadow 0.16s var(--ease-standard);
  }
  #graph-range:hover,
  #graph-theme:hover,
  #graph-view-mode:hover {
    border-color: color-mix(in srgb, var(--graph-accent) 45%, transparent);
    background: color-mix(in srgb, var(--graph-text) 10%, transparent);
  }
  #graph-range:focus-visible,
  #graph-theme:focus-visible,
  #graph-view-mode:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--graph-accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--graph-accent) 15%, transparent);
  }
  /* 표시 항목(필터)을 접이식으로 — 상단 컨트롤 빽빽함 완화 */
  .graph-filters > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 36px;
    padding: 0 0.75rem;
    border: 1px solid color-mix(in srgb, var(--graph-text) 13%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--graph-text) 7%, transparent);
    color: var(--graph-text-dim);
    font-family: 'Inter', 'Noto Serif KR', sans-serif;
    font-size: 0.78rem;
    user-select: none;
    transition: border-color 0.16s var(--ease-standard), background 0.16s var(--ease-standard), color 0.16s var(--ease-standard);
  }
  .graph-filters > summary:hover,
  .graph-filters[open] > summary {
    color: var(--graph-text);
    border-color: color-mix(in srgb, var(--graph-accent) 45%, transparent);
    background: color-mix(in srgb, var(--graph-text) 10%, transparent);
  }
  .graph-filters > summary::-webkit-details-marker { display: none; }
  .graph-filters > summary::after { content: "▾"; font-size: 0.7em; opacity: 0.6; }
  .graph-filters[open] > summary::after { content: "▴"; }
  .graph-filters[open] .graph-layer-toggles { flex-wrap: wrap; margin-top: 0.5rem; }
  .graph-layer-toggles {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
  }
  .graph-layer-toggles label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 32px;
    color: var(--graph-text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
  }
  /* v236 — Obsidian 스타일 force slider */
  .graph-slider-label {
    gap: 0.45rem !important;
    padding: 0 0.4rem 0 0.6rem;
    border-left: 1px solid var(--graph-border);
  }
  .graph-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 70px;
    height: 3px;
    background: color-mix(in srgb, var(--graph-text) 20%, transparent);
    border-radius: 2px;
    cursor: pointer;
    outline: none;
  }
  .graph-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--graph-accent);
    border: 1.5px solid var(--graph-stage-bg);
    cursor: pointer;
  }
  .graph-slider::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--graph-accent);
    border: 1.5px solid var(--graph-stage-bg);
    cursor: pointer;
  }
  @media (max-width: 720px) {
    .graph-slider { width: 56px; }
    .graph-slider-label { padding: 0 0.3rem; }
  }
  .graph-modal-panel .graph-hint {
    margin-left: 0.4rem;
    font-size: 0.72rem;
    color: var(--graph-text-faint) !important;
    font-family: 'Inter', sans-serif;
  }
  /* v1105 — 좁은 데스크탑에서는 힌트를 접어 커맨드 바를 가볍게 */
  @media (max-width: 1280px) {
    .graph-modal-panel .graph-hint { display: none; }
  }
  /* v591q — 그래프 툴팁 (가볍게) */
  .graph-tooltip {
    position: fixed;
    pointer-events: none;
    background: color-mix(in srgb, var(--graph-text) 82%, transparent);
    color: var(--graph-bg);
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.72rem;
    line-height: 1.3;
    white-space: nowrap;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.1s;
    font-family: 'Noto Serif KR', serif;
  }
  .graph-tooltip.visible { opacity: 1; }
  .graph-shell {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    border-top: 1px solid var(--graph-border-soft);
  }
  /* v232 — 좀 더 샤프한 분위기: 종이결 노이즈 제거, 배경 밝고 cleaner, 먹 번짐 절제 */
  .graph-stage {
    position: relative;
    min-width: 0;
    min-height: 0;
    background:
      radial-gradient(ellipse at 30% 25%, var(--graph-stage-aura-1), transparent 50%),
      radial-gradient(ellipse at 72% 70%, var(--graph-stage-aura-2), transparent 55%),
      var(--graph-stage-bg);
  }
  #graph-svg {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
    touch-action: none;
  }
  .graph-stage.is-3d #graph-svg {
    display: none;
  }
  .graph-3d-stage[hidden] {
    display: none !important;
  }
  .graph-3d-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    /* v1106 — 또렷한 밤하늘: 성운 안개 레이어 약화 */
    background:
      radial-gradient(ellipse at 50% 45%, rgba(217,189,115,0.08), transparent 30%),
      radial-gradient(ellipse at 22% 14%, rgba(217,189,115,0.06), transparent 36%),
      radial-gradient(ellipse at 82% 76%, rgba(111,159,222,0.06), transparent 42%),
      radial-gradient(ellipse at 12% 88%, rgba(169,161,255,0.05), transparent 36%),
      #070b16;
    isolation: isolate;
  }
  /* 별은 WebGL 별필드(무작위)로만 표현. 규칙 격자로 점을 타일링하던 ::before 레이어는
     자로 잰 듯 인위적이라 제거. */
  .graph-3d-stage::after {
    content: "";
    position: absolute;
    inset: -18%;
    pointer-events: none;
    opacity: 0.2; /* 밤하늘이 맑게 갠 느낌 — 은하 드리프트 안개 0.3 → 0.2 (더 또렷하게) */
    background:
      conic-gradient(from 212deg at 50% 52%,
        transparent 0deg,
        color-mix(in srgb, var(--graph-accent) 13%, transparent) 54deg,
        transparent 118deg,
        color-mix(in srgb, var(--graph-node-daily) 11%, transparent) 190deg,
        transparent 274deg,
        color-mix(in srgb, var(--graph-edge-context) 18%, transparent) 322deg,
        transparent 360deg);
    filter: blur(42px) saturate(1.14);
    mix-blend-mode: screen;
    animation: graphGalaxyDrift 28s linear infinite;
  }
  /* 3D 무대는 테마(ink/parchment/eden/night)와 무관하게 어두운 밤하늘로 통일.
     밝은 테마 전용 multiply 오버라이드는 제거 — 어디서 켜도 같은 성좌 무대. */
  #graph-3d-canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
    touch-action: none;
    filter: saturate(1.08) contrast(1.04);
    z-index: 1;
  }
  #graph-3d-canvas.is-dragging {
    cursor: grabbing;
  }
  .graph-3d-loading {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0.46rem 0.72rem;
    border: 1px solid var(--graph-border);
    border-radius: var(--r-full);
    background: var(--graph-legend-bg);
    color: var(--graph-text-dim);
    font-family: 'Inter', 'Noto Serif KR', sans-serif;
    font-size: var(--text-xs);
    letter-spacing: var(--ls-wide);
    pointer-events: none;
  }
  /* 3D 무대 전용 액션 (타임랩스·둘러보기) — 밤하늘 위 고스트 필 버튼.
     하단은 범례 칩과 겹치므로 좌상단에 둔다. */
  /* v1098 — 단일 글래스 독: 버튼별 금테 알약 → 아이콘+미니라벨, 금색은 active 전용 */
  .graph-3d-actions {
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    gap: 2px;
    z-index: 4;
    padding: 4px;
    border-radius: 16px;
    background: rgba(7, 11, 22, 0.58);
    border: 1px solid rgba(240, 234, 219, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  }
  .g3d-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 52px;
    padding: 6px 8px 5px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgba(240, 234, 219, 0.78);
    cursor: pointer;
    transition: background var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard);
  }
  .g3d-ic {
    width: 19px; height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .g3d-label {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.6rem;
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
  .g3d-action-btn:hover { color: #f6efdc; background: rgba(240, 234, 219, 0.07); }
  .g3d-action-btn.active {
    color: #d9bd73;
    background: rgba(217, 189, 115, 0.14);
    text-shadow: 0 0 14px rgba(217, 189, 115, 0.45);
  }
  /* v1092 — 우주 설정 패널: 밤하늘 위 다크 글래스 */
  .g3d-cosmos-panel {
    position: absolute;
    top: 76px; /* 글래스 독(아이콘+라벨) 높이만큼 내림 */
    left: 12px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.7rem 0.8rem;
    background: rgba(7, 11, 22, 0.92);
    border: 1px solid rgba(217, 189, 115, 0.3);
    border-radius: 14px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: min(330px, calc(100% - 24px));
  }
  .g3d-cosmos-presets { display: flex; gap: 0.3rem; margin-bottom: 0.15rem; }
  .g3d-cosmos-presets button,
  .g3d-cosmos-seg button {
    font: inherit;
    font-size: 0.68rem;
    color: rgba(236, 229, 210, 0.75);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(217, 189, 115, 0.18);
    border-radius: var(--r-full);
    padding: 0.22rem 0.52rem;
    min-height: 28px;
    cursor: pointer;
  }
  .g3d-cosmos-presets button.on,
  .g3d-cosmos-seg button.on {
    color: #15140f;
    background: #d9bd73;
    border-color: #d9bd73;
    font-weight: 700;
  }
  .g3d-cosmos-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
  .g3d-cosmos-label { font-size: 0.7rem; color: rgba(217, 189, 115, 0.85); min-width: 2.9rem; font-family: 'Noto Serif KR', serif; }
  .g3d-cosmos-seg { display: flex; gap: 0.22rem; flex-wrap: wrap; justify-content: flex-end; }
  /* v1094 — 말씀 우주 모달 */
  .cosmos-panel {
    width: min(1100px, calc(100vw - 1.6rem));
    height: min(780px, calc(100dvh - 1.6rem));
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  .cosmos-panel .modal-head { flex: 0 0 auto; }
  .cosmos-stats {
    margin-left: auto;
    margin-right: 0.6rem;
    font-size: 0.74rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .cosmos-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    background: radial-gradient(ellipse 90% 70% at 50% 20%, #0b1226 0%, #070b16 60%, #05080f 100%);
    border-radius: 0 0 var(--r-lg, 14px) var(--r-lg, 14px);
    overflow: hidden;
  }
  .cosmos-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
  .cosmos-stage canvas.is-dragging { cursor: grabbing; }
  .cosmos-hint {
    position: absolute;
    bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.66rem;
    color: rgba(217, 189, 115, 0.4);
    pointer-events: none;
    white-space: nowrap;
  }
  .cosmos-tip {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.7rem;
    background: rgba(7, 11, 22, 0.94);
    border: 1px solid rgba(217, 189, 115, 0.35);
    border-radius: 12px;
    color: #efe8d6;
    font-size: 0.78rem;
    transform: translate(-50%, calc(-100% - 14px));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    max-width: calc(100% - 1.2rem);
  }
  .cosmos-tip .ct-date { color: rgba(217, 189, 115, 0.8); font-size: 0.68rem; }
  .cosmos-tip .ct-go {
    font: inherit;
    font-size: 0.7rem;
    color: #15140f;
    background: #d9bd73;
    border: 0;
    border-radius: 999px;
    padding: 0.22rem 0.6rem;
    cursor: pointer;
    white-space: nowrap;
    min-height: 28px;
  }
  @media (max-width: 720px) {
    /* 풀스크린 — .modal-overlay .modal 의 width/패딩에 밀리지 않게 ID 셀렉터로 */
    #cosmos-modal { padding: 0; }
    #cosmos-modal .cosmos-panel { max-width: 100vw; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .cosmos-stage { border-radius: 0; }
    .cosmos-stats { font-size: 0.66rem; }
  }
  .graph-3d-caption {
    position: absolute;
    left: 50%;
    bottom: 54px;
    transform: translateX(-50%);
    z-index: 4;
    font-family: 'Noto Serif KR', serif;
    color: #d9bd73;
    font-size: 1.02rem;
    letter-spacing: 0.14em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85);
    pointer-events: none;
  }
  /* P3-2 — 순례 모드: 별에서 별로 날아가며 그 노트 제목이 하늘에 타이포로 떠오른다 */
  .g3d-action-btn:disabled {
    opacity: 0.34;
    cursor: default;
  }
  .g3d-action-btn:disabled:hover {
    color: rgba(240, 234, 219, 0.78);
    background: transparent;
  }
  .graph-pilgrim-overlay[hidden] { display: none !important; }
  .graph-pilgrim-overlay {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
  }
  .graph-pilgrim-overlay .graph-pilgrim-close {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(240, 234, 219, 0.16);
    border-radius: var(--r-full);
    background: rgba(7, 11, 22, 0.58);
    color: rgba(240, 234, 219, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto;
    cursor: pointer;
  }
  .graph-pilgrim-overlay .graph-pilgrim-close svg { width: 17px; height: 17px; }
  .graph-pilgrim-overlay .graph-pilgrim-close:hover { color: #f6efdc; background: rgba(240, 234, 219, 0.1); }
  .graph-pilgrim-progress {
    position: absolute;
    left: 50%;
    top: 14px;
    transform: translateX(-50%);
    font-family: 'Inter', 'Noto Serif KR', sans-serif;
    font-size: var(--text-xs);
    letter-spacing: var(--ls-wide);
    color: rgba(240, 234, 219, 0.72);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    pointer-events: none;
  }
  .graph-pilgrim-caption {
    position: absolute;
    left: 50%;
    bottom: 30%;
    transform: translate(-50%, 0);
    z-index: 4;
    max-width: min(560px, 84%);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.9s var(--ease-standard);
    isolation: isolate; /* 스크림(::before)이 이 캡션 내부에서만 겹치도록 */
  }
  .graph-pilgrim-caption.visible { opacity: 1; }
  /* 하늘을 가리지 않는 정도의 부드러운 radial 스크림 — 글자가 앉을 자리만 살짝 눌러줌.
     backdrop-filter 없이 순수 gradient(중앙 어둡게 → 가장자리 완전 투명). */
  .graph-pilgrim-caption::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 132%;
    height: 220%;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse 50% 45% at 50% 50%,
      rgba(4, 6, 14, 0.46) 0%,
      rgba(4, 6, 14, 0.3) 38%,
      rgba(4, 6, 14, 0.12) 62%,
      transparent 82%);
  }
  .graph-pilgrim-caption .gpc-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.28rem;
    font-weight: 600;
    color: #f6efdc;
    letter-spacing: 0.03em;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
  }
  .graph-pilgrim-caption .gpc-date {
    margin-top: 0.3rem;
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: 0.86rem;
    letter-spacing: 0.16em;
    color: rgba(217, 189, 115, 0.86);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  }
  .graph-pilgrim-caption .gpc-verse {
    margin-top: 0.55rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.92rem;
    font-style: italic;
    color: rgba(240, 234, 219, 0.82);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
  }
  .graph-pilgrim-caption .gpc-verse:empty,
  .graph-pilgrim-caption .gpc-date:empty { display: none; }
  @keyframes graphGalaxyDrift {
    from { transform: rotate(0deg) scale(1.03); }
    to { transform: rotate(360deg) scale(1.03); }
  }
  @media (prefers-reduced-motion: reduce) {
    .graph-3d-stage::after { animation: none; }
  }
  .graph-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--graph-text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    text-align: center;
    pointer-events: none;
  }
  .graph-empty-title {
    font-family: 'Cormorant Garamond','Noto Serif KR',serif;
    font-size: 1.12rem;
    letter-spacing: 0.01em;
    margin-bottom: 0.7rem;
  }
  .graph-empty .ge-sub {
    color: var(--graph-text-faint);
    font-size: 0.8rem;
    line-height: 1.85;
    max-width: 32ch;
    margin: 0 auto;
  }
  /* 어두운 3D 무대에서도 빈 상태 안내가 읽히도록 밝은 톤 보장 */
  .graph-stage.is-3d .graph-empty .ge-sub { color: var(--graph-text-dim); }
  .graph-legend {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-width: calc(100% - 1.5rem);
    pointer-events: none;
  }
  /* v228 — 수묵화 종이 위 legend/detail/labels */
  .graph-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.46rem;
    border: 1px solid var(--graph-border);
    border-radius: var(--r-md);
    background: var(--graph-legend-bg);
    color: var(--graph-text-dim);
    font-family: 'Inter', 'Noto Serif KR', sans-serif;
    font-size: var(--text-xs);
    backdrop-filter: blur(8px);
  }
  .graph-legend-dot {
    width: 0.52rem;
    height: 0.52rem;
    border-radius: 50%;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--graph-text) 22%, transparent);
  }
  .graph-detail {
    min-width: 0;
    padding: 1.1rem 1rem;
    border-left: 1px solid var(--graph-border-soft);
    background: var(--graph-panel);
    overflow-y: auto;
  }
  .graph-detail-kicker {
    color: var(--graph-accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
  }
  .graph-detail h3 {
    margin: 0.4rem 0 0.7rem;
    color: var(--graph-text);
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: 1.08rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0.005em;
  }
  .graph-detail-meta {
    display: flex; flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.85rem;
  }
  .graph-pill {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.16rem 0.5rem;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--graph-text) 6%, transparent);
    color: var(--graph-text-dim);
    font-family: 'Inter', 'Noto Serif KR', sans-serif;
    font-size: var(--text-xs);
  }
  .graph-detail-preview {
    margin: 0 0 0.9rem;
    color: var(--graph-text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    line-height: var(--lh-loose);
    font-style: italic;
  }
  .graph-open-btn {
    width: 100%;
    min-height: 40px;
    border: 1px solid color-mix(in srgb, var(--graph-accent) 40%, transparent);
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--graph-accent);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.86rem;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
  }
  .graph-open-btn:hover { background: color-mix(in srgb, var(--graph-accent) 10%, transparent); color: var(--graph-text); }
  .graph-related {
    margin-top: 1rem;
    display: grid;
    gap: 0.3rem;
  }
  .graph-related-title {
    color: var(--graph-text-faint);
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    letter-spacing: 0.05em;
  }
  /* P2-3 — 백링크 섹션: 일반 연결 목록과 시각적으로 분리 (이중 클래스 상향) */
  .graph-related.graph-backlinks {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--graph-border-soft);
  }
  .graph-related button {
    width: 100%;
    min-height: 32px;
    padding: 0.32rem 0.5rem;
    border: 1px solid var(--graph-border-soft);
    border-radius: 5px;
    background: color-mix(in srgb, var(--graph-control-bg) 74%, transparent);
    color: var(--graph-text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    text-align: left;
    cursor: pointer;
  }
  .graph-related button:hover { color: var(--graph-text); border-color: color-mix(in srgb, var(--graph-accent) 40%, transparent); background: color-mix(in srgb, var(--graph-control-bg) 92%, transparent); }
  .graph-foot {
    padding: 0.48rem 0.9rem;
    border-top: 1px solid var(--graph-border-soft);
    background: color-mix(in srgb, var(--graph-bg) 60%, transparent);
    color: var(--graph-text-faint);
    font-family: 'Inter', 'Noto Serif KR', sans-serif;
    font-size: var(--text-xs);
  }
  /* v235 — hover fade 좀 더 부드럽게 (0.18s → 0.28s) */
  .graph-node { transition: opacity 0.28s ease, filter 0.28s ease; }
  #graph-svg path { transition: opacity 0.28s ease, stroke 0.24s ease, stroke-width 0.24s ease, filter 0.24s ease; }
  #graph-svg .graph-edge {
    opacity: 0.82;
    vector-effect: non-scaling-stroke;
  }
  #graph-svg .graph-edge-root {
    stroke: var(--graph-thread);
    stroke-width: 1.7;
    opacity: 0.9;
  }
  #graph-svg .graph-edge-link {
    stroke: var(--graph-edge-link);
    stroke-width: 0.9;
  }
  #graph-svg .graph-edge-xref {
    stroke: var(--graph-edge-xref);
    stroke-width: 0.72;
    stroke-dasharray: 5 5;
    opacity: 0.68;
  }
  #graph-svg .graph-edge-context {
    stroke: var(--graph-edge-context);
    stroke-width: 1.05;
    stroke-dasharray: 2 5;
    opacity: 0.74;
  }
  /* P2-3 — 백링크(wikilink) 엣지: 일반 link 보다 살짝 옅고 촘촘한 점선으로 구별 */
  #graph-svg .graph-edge-wikilink {
    stroke: var(--graph-edge-link);
    stroke-width: 0.85;
    stroke-dasharray: 3 3;
    opacity: 0.58;
  }
  #graph-svg.graph-selection-dimmed .graph-node-muted { opacity: 0.18; filter: grayscale(0.45) saturate(0.6); }
  #graph-svg.graph-selection-dimmed .graph-node-connected { opacity: 1; filter: drop-shadow(0 2px 7px color-mix(in srgb, var(--graph-thread) 38%, transparent)); }
  #graph-svg.graph-selection-dimmed .graph-node-connected circle {
    stroke: var(--graph-thread-solid) !important;
    stroke-width: 1.8 !important;
  }
  #graph-svg.graph-selection-dimmed .graph-node-connected .graph-node-card {
    stroke: var(--graph-thread-solid) !important;
    stroke-width: 1.8 !important;
  }
  #graph-svg.graph-selection-dimmed .graph-node-selected circle {
    stroke: var(--graph-thread-solid) !important;
    stroke-width: 2.4 !important;
  }
  #graph-svg.graph-selection-dimmed .graph-node-selected .graph-node-card {
    stroke: var(--graph-thread-solid) !important;
    stroke-width: 2.4 !important;
  }
  #graph-svg .graph-edge-connected {
    stroke: var(--graph-thread) !important;
    stroke-width: 1.8 !important;
  }
  #graph-svg .graph-edge-muted { opacity: 0.12; }
  #graph-svg .graph-edge-kinship {
    stroke: var(--graph-edge-kinship) !important;
  }
  #graph-svg.graph-selection-dimmed .graph-edge-kinship.graph-edge-connected {
    stroke: var(--graph-thread) !important;
  }
  .graph-node-worship circle,
  .graph-node-prayer circle,
  .graph-node-testimony circle {
    fill: var(--graph-node-note) !important;
  }
  .graph-node-daily circle {
    fill: var(--graph-node-daily) !important;
  }
  .graph-node-tag circle {
    fill: var(--graph-node-taxonomy) !important;
  }
  .graph-node-person circle {
    fill: var(--graph-node-person) !important;
  }
  /* v1119 — 2D 제일 가벼운 모드 (Obsidian 식): 잔별 가루·별자리 이름·글로우 필터 전부 폐기.
     SVG filter (drop-shadow) 는 노드마다 래스터 레이어를 만들어 제일 비싸다 — 2D 에선 금지. */
  .graph-node-place circle {
    fill: var(--graph-node-place) !important;
  }
  .graph-node-theme circle {
    fill: var(--graph-node-theme) !important;
  }
  .graph-node-emotion circle {
    fill: var(--graph-node-emotion) !important;
  }
  .graph-node-concept circle {
    fill: var(--graph-node-concept) !important;
  }
  .graph-node-event circle {
    fill: var(--graph-node-event) !important;
  }
  .graph-node-note circle {
    stroke: var(--graph-node-stroke);
    stroke-width: 1.05;
  }
  .graph-node-taxonomy circle {
    stroke: var(--graph-taxonomy-stroke) !important;
    stroke-width: 0.9 !important;
    stroke-dasharray: 2 3;
  }
  .graph-node-verse circle {
    fill: var(--graph-verse-core);
  }
  #graph-svg .graph-node-card {
    fill: var(--graph-mind-card-bg);
    stroke: var(--graph-mind-card-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
  }
  #graph-svg .graph-node-note .graph-node-card {
    fill: var(--graph-mind-card-bg-note);
  }
  #graph-svg .graph-node-verse .graph-node-card {
    fill: color-mix(in srgb, var(--graph-verse-core) 19%, var(--graph-mind-card-bg));
  }
  #graph-svg .graph-node-taxonomy .graph-node-card {
    fill: color-mix(in srgb, var(--graph-node-taxonomy) 15%, var(--graph-mind-card-bg));
  }
  #graph-svg .graph-node-next circle {
    fill: var(--graph-mind-next-bg);
    stroke: var(--graph-mind-card-border);
    stroke-width: 1;
  }
  #graph-svg .graph-node-next text {
    fill: var(--graph-mind-text);
    font-family: Inter, 'Noto Sans KR', sans-serif;
    font-size: 18px;
    font-weight: 700;
  }
  /* 노드 라벨: 카드 안에서 선명하게 읽히는 앱 UI 텍스트 */
  .graph-node-label {
    paint-order: normal;
    stroke: none;
    stroke-width: 0;
    fill: var(--graph-mind-text) !important;
    pointer-events: none;
  }
  /* 선택된 노드: 카드 테두리로 강조 */
  .graph-node-selected circle {
    stroke: #b04545 !important;
    stroke-width: 2 !important;
  }
  .graph-node-selected .graph-node-card {
    stroke: var(--graph-thread-solid) !important;
    stroke-width: 2 !important;
  }
  .graph-node-isolated circle {
    stroke-dasharray: 3 2;
    opacity: 0.55;
  }
  .graph-node-isolated .graph-node-label {
    opacity: 0.6;
    font-style: italic;
  }
  .graph-cluster-label {
    fill: color-mix(in srgb, var(--graph-text) 32%, transparent);
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-style: italic;
    font-size: 12px;
    pointer-events: none;
  }
  /* ════ v1126 — 말씀 강 (2D): 잔별·흐르는 빛·책 이름 워터마크 ════ */
  #graph-svg .graph-atlas-dust { fill: var(--graph-node-taxonomy); pointer-events: none; }
  #graph-svg .graph-river-glow, #graph-svg .graph-river-vein { pointer-events: none; }
  #graph-svg .graph-constellation-name {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-style: normal;
    font-size: 12.5px;
    letter-spacing: .12em;
    fill: color-mix(in srgb, var(--graph-text) 40%, transparent);
    pointer-events: none;
  }
  [data-graph-theme="night"] #graph-svg .graph-atlas-dust { fill: #c9d4e8; }
  [data-graph-theme="night"] #graph-svg .graph-constellation-name { fill: rgba(185,196,216,0.6); }
  [data-graph-theme="night"] #graph-svg .graph-river-vein {
    filter: drop-shadow(0 0 5px rgba(244,207,95,0.55));
  }
  [data-graph-theme="night"] #graph-svg .graph-node-verse circle {
    filter: drop-shadow(0 0 6px rgba(244,207,95,0.6));
  }
  /* 밀집 하늘에선 글로우 절제 (빛 덩어리 방지) */
  #graph-svg.graph-dense .graph-node-verse circle { filter: drop-shadow(0 0 3px rgba(244,207,95,0.45)); }
  /* ════ P2-1 — 말씀 스파인(Spine) 렌즈: 66권 세로 뼈대 + 열매 노드 ════ */
  .graph-spine-group-label {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-style: italic;
    font-size: 13.5px;
    letter-spacing: var(--ls-wide, 0.08em);
    fill: color-mix(in srgb, var(--graph-text) 46%, transparent);
    pointer-events: none;
  }
  .graph-spine-hit { pointer-events: all; }
  #graph-svg .graph-spine-tick.graph-spine-tick {
    fill: none;
    stroke: color-mix(in srgb, var(--graph-text-faint) 70%, transparent);
    stroke-width: 1.4;
  }
  .graph-node-spine-book-empty:hover .graph-spine-tick,
  .graph-node-spine-book-empty:focus-visible .graph-spine-tick {
    stroke: var(--graph-accent);
    stroke-width: 2;
  }
  #graph-svg .graph-spine-book-dot.graph-spine-book-dot {
    stroke: var(--graph-node-stroke);
    stroke-width: 1.1;
  }
  #graph-svg .graph-spine-more-dot.graph-spine-more-dot {
    stroke: var(--graph-node-stroke);
    stroke-width: 0.9;
    opacity: 0.85;
  }
  .graph-spine-label {
    font-family: Inter, 'Noto Sans KR', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    fill: var(--graph-text);
    pointer-events: none;
    dominant-baseline: middle;
  }
  .graph-node-spine-more .graph-spine-label,
  .graph-node-spine-book-empty .graph-spine-label {
    font-weight: 500;
    fill: var(--graph-text-dim);
  }
  /* B1 — 개관 뱃지: mem-due-dot 스타일 토큰 재사용(둥근 필 + accent 배경) */
  .graph-spine-badge { pointer-events: none; }
  #graph-svg .graph-spine-badge-bg {
    fill: var(--accent, #c9a961);
    stroke: none;
  }
  #graph-svg .graph-spine-badge-label {
    font-family: Inter, 'Noto Sans KR', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    fill: var(--accent-fg, #15140f);
    text-anchor: middle;
    dominant-baseline: middle;
  }
  /* B5 — 검색·기간 필터에 매칭 열매가 없는 책은 흐리게 */
  .graph-spine-book-muted { opacity: 0.32; filter: grayscale(0.4); }
  /* B4 — 구간 세부 라벨(모세오경/역사서/…): 그룹 라벨보다 한 단계 작고 자간 넓게, 스파인 왼쪽 배치 */
  .graph-spine-section-label {
    font-family: Inter, 'Noto Sans KR', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    fill: color-mix(in srgb, var(--graph-text-faint) 78%, transparent);
    pointer-events: none;
  }
  #graph-svg .graph-edge-spine-fruit {
    stroke: var(--graph-edge-link);
    stroke-width: 0.85;
    opacity: 0.55;
  }
  #graph-svg .graph-edge-spine-cross {
    stroke: var(--graph-edge-context);
    stroke-width: 0.7;
    stroke-dasharray: 2 5;
    opacity: 0.5;
  }
  .graph-node-spine-book-empty { outline: none; }
  .graph-node-spine-book-empty:focus-visible .graph-spine-hit,
  .graph-node-spine-book .graph-spine-hit:focus-visible {
    outline: none;
  }
  .graph-node-spine-book:focus-visible .graph-spine-book-dot,
  .graph-node-spine-book-empty:focus-visible .graph-spine-tick {
    stroke: var(--graph-thread-solid);
    stroke-width: 2.2;
  }
  /* ════ P2-2 — 말씀강(Flow) 렌즈: 세로 시간축 강줄기 + 지류(인용 말씀) ════ */
  #graph-svg .graph-flow-river-seg {
    opacity: 0.85;
  }
  [data-graph-theme="night"] #graph-svg .graph-flow-river-seg {
    filter: drop-shadow(0 0 4px rgba(244,207,95,0.4));
  }
  .graph-flow-month-label {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-style: italic;
    font-size: 13.5px;
    letter-spacing: var(--ls-wide, 0.08em);
    fill: color-mix(in srgb, var(--graph-text) 50%, transparent);
  }
  .graph-node-flow-month-label:focus-visible .graph-flow-month-label,
  .graph-node-flow-month-label:hover .graph-flow-month-label {
    fill: var(--graph-thread-solid);
  }
  .graph-node-flow-month-label:focus-visible {
    outline: none;
  }
  .graph-node-flow-month-label:focus-visible rect {
    outline: 2px solid var(--graph-thread-solid);
    outline-offset: 1px;
  }
  #graph-svg .graph-edge-flow-bank {
    opacity: 0.55;
  }
  #graph-svg .graph-edge-flow-tributary {
    opacity: 0.6;
  }
  .graph-node-flow-week circle, .graph-node-flow-week-empty circle {
    display: none;
  }
  /* v220 — 글로벌에서 이미 처리됨 (위) — 모바일 전용 룰 제거 */
  /* v199 — btn-notes 위 부부 알림 dot (badge text 안 보이고 빨간 점만) */
  #btn-notes { position: relative; }
  .badge-anchor { position: relative; }
  #btn-notes.has-couple-badge::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent, #c9a961);
    border: 2px solid var(--bg);
    box-sizing: border-box;
  }
  /* popover item 안 부부 badge 위치 (item 우측, count) */
  .notes-menu-badge {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--accent);
    color: #fff;
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
  }
  .note-kind-dropdown {
    display: none;
    position: relative;
  }
  .note-kind-dropdown-summary {
    appearance: none;
    list-style: none;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    background:
      linear-gradient(180deg, rgba(255,255,255,0.05), transparent),
      color-mix(in srgb, var(--surface) 78%, var(--bg) 22%);
    color: color-mix(in srgb, var(--text) 86%, var(--text-dim));
    border-radius: 999px;
    min-height: 38px;
    padding: 0 14px 0 16px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow:
      0 12px 28px -24px rgba(0,0,0,0.5),
      inset 0 1px 0 rgba(255,255,255,0.1);
    cursor: pointer;
    user-select: none;
    transition: background 0.16s var(--ease-standard), color 0.16s var(--ease-standard), border-color 0.16s var(--ease-standard), transform 0.16s var(--ease-standard);
  }
  .note-kind-dropdown-summary::-webkit-details-marker {
    display: none;
  }
  .note-kind-dropdown[open] .note-kind-dropdown-summary,
  .note-kind-dropdown-summary:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 34%, var(--border));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,0.04)), transparent),
      color-mix(in srgb, var(--surface) 84%, var(--bg) 16%);
  }
  .note-kind-dropdown-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .note-kind-dropdown-chev {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex: 0 0 auto;
    transition: transform 0.16s var(--ease-standard);
  }
  .note-kind-dropdown[open] .note-kind-dropdown-chev {
    transform: rotate(180deg);
  }
  .note-kind-dropdown-summary:active {
    transform: translateY(1px);
  }
  .note-kind-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
    min-width: 172px;
    padding: 6px;
    border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 94%, var(--bg));
    box-shadow: 0 18px 42px -24px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .note-kind-dropdown-item {
    appearance: none;
    width: 100%;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-dim);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    text-align: left;
  }
  .note-kind-dropdown-item:hover,
  .note-kind-dropdown-item.is-current {
    color: var(--text);
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  }
  .note-kind-dropdown-item.is-current::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
    flex: 0 0 auto;
  }
  .note-kind-title-heading {
    margin: 0;
    min-width: 0;
    line-height: 1.25;
    font-family: 'Noto Serif KR', serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: inherit;
  }
  .modal-head .note-kind-title-dropdown {
    display: inline-flex;
    width: auto;
    max-width: min(58vw, 320px);
    margin: 0;
    z-index: 24;
    vertical-align: middle;
  }
  .note-kind-title-dropdown .note-kind-dropdown-summary {
    width: auto;
    max-width: 100%;
    min-height: 34px;
    padding: 0 4px 0 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    border-radius: 8px;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    gap: 7px;
  }
  .note-kind-title-dropdown .note-kind-dropdown-summary:hover,
  .note-kind-title-dropdown[open] .note-kind-dropdown-summary {
    background: transparent;
    border-color: transparent;
    color: inherit;
  }
  .note-kind-title-dropdown .note-kind-dropdown-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .note-kind-title-dropdown .note-kind-dropdown-chev {
    width: 17px;
    height: 17px;
    color: color-mix(in srgb, var(--accent) 78%, currentColor);
  }
  .note-kind-title-dropdown .note-kind-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: auto;
    transform: none;
    z-index: 24;
    min-width: 184px;
  }
  @media (max-width: 720px) {
    html,
    body {
      overflow-x: hidden !important;
    }
    /* 터치 영역 — 최소 44px (Apple HIG / Material 권장) */
    .icon-btn { min-width: 44px; min-height: 44px; }
    .media-tool-btn, .worship-tool-btn, .settings-toggle, .daily-nav-btn, .daily-today-btn {
      min-height: 40px; padding: 0.55rem 0.85rem; font-size: var(--text-sm);
    }
    /* 모달 풀스크린화 — 작은 화면에선 max-width 무시
       overlay 가 스크롤 컨테이너이고 modal 은 overflow:hidden 유지 */
    .modal-overlay {
      padding: 0.5rem 0.5rem max(2rem, env(safe-area-inset-bottom));
      align-items: flex-start;
    }
    .modal-overlay.open .modal,
    .modal-overlay .modal[style*="max-width"] {
      max-width: 100% !important;
      width: 100%;
      border-radius: var(--r-md);
    }
    /* daily/worship modal head — 터치하기 쉽게 */
    .modal-head { padding: 0.7rem 0.9rem; min-height: 56px; }
    .modal-head h2 { font-size: 1rem; }
    /* 노트 본문 폰트 키움 (작은 글자 가독성) */
    .editable-area, #w-body, .daily-textarea {
      font-size: 1rem !important;
      line-height: var(--lh-verse);
    }
    /* 미디어 툴바 — 평범하게 흐름에 따라 (sticky 가 스크롤 충돌 일으킴) */
    .media-toolbar {
      padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
    }
    /* 캘린더 글자 키움 */
    .dc-day .dc-num { font-size: 1.1rem; }
    .dc-day .dc-snippet { display: none; }
    /* Quick Switcher — 풀화면 가까이 */
    .qs-overlay { padding-top: 6vh; }
    .qs-panel { width: 100%; max-width: calc(100vw - 16px); }
    .qs-input { font-size: var(--text-md); }
    /* 그래프 뷰 — 모바일 풀스크린 극한 최적화 (v536q+) */
    #graph-modal { padding: 0 !important; background: var(--graph-bg, #f3ecdb) !important; backdrop-filter: none !important; }
    #graph-modal .modal {
      height: 100dvh !important;
      width: 100vw !important;
      max-width: 100vw !important;
      border-radius: 0;
      overflow: hidden;
    }
    /* 모바일 헤더: 검색/필터를 2단으로 분리해 터치 영역과 가독성을 확보 */
    #graph-modal .modal-head {
      height: 96px !important;
      min-height: 96px !important;
      max-height: 96px !important;
      padding: max(0.5rem, env(safe-area-inset-top)) 0.65rem 0.58rem !important;
      gap: 0.45rem !important;
      flex-wrap: wrap !important;
      overflow: hidden;
      align-items: flex-start !important;
    }
    #graph-modal .modal-head h2 {
      font-size: 0.98rem !important;
      flex: 1 1 calc(100% - 48px) !important;
      white-space: nowrap !important;
      margin: 0 !important;
      height: 32px !important;
      display: flex !important;
      align-items: center !important;
    }
    .graph-head-actions {
      flex: 1 0 100% !important;
      order: 2 !important;
      display: block !important;
      overflow: visible !important;
      min-width: 100% !important;
      margin-left: 0 !important;
    }
    /* v1098 — 모바일 툴바: 보더 칩 4개 → 글래스 검색바 + 고스트 셀렉트.
       금테 남발 제거, 시각적 레이어를 검색(주) / 필터(부)로 분리 */
    .graph-toolbar {
      width: 100% !important;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto auto auto !important;
      min-width: 0 !important;
      gap: 0.18rem !important;
    }
    .graph-search-wrap {
      min-width: 0 !important;
      max-width: none !important;
      height: 36px !important;
      padding: 0 0.7rem !important;
      border-radius: 999px !important;
      border: 0 !important;
      background: var(--graph-control-bg) !important;
    }
    .graph-search-wrap svg { width: 15px !important; height: 15px !important; opacity: 0.6; }
    #graph-search { font-size: 0.78rem !important; }
    #graph-range,
    #graph-theme,
    #graph-view-mode {
      appearance: none !important;
      -webkit-appearance: none !important;
      width: auto !important;
      height: 36px !important;
      min-width: 0 !important;
      font-size: 0.72rem !important;
      padding: 0 0.85rem 0 0.4rem !important;
      border: 0 !important;
      border-radius: 999px !important;
      background: transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M1 1l3 3 3-3' fill='none' stroke='%23998f7a' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")
        no-repeat right 0.3rem center !important;
      color: var(--graph-text-dim) !important;
    }
    .graph-filters,
    .graph-layer-toggles {
      display: none !important;
    }
    .graph-layer-toggles label {
      font-size: 0.68rem !important;
      min-height: 24px !important;
      gap: 0.15rem !important;
      white-space: nowrap !important;
    }
    .graph-layer-toggles input[type="checkbox"] {
      width: 14px !important;
      height: 14px !important;
      margin: 0 !important;
    }
    /* 모바일: force 슬라이더 + 힌트 완전 숨김 */
    .graph-slider-label,
    .graph-hint {
      display: none !important;
    }
	    #graph-modal .modal-head-iconbtn {
	      flex: 0 0 auto !important;
	      position: absolute !important;
	      right: 0.62rem !important;
	      top: max(0.5rem, env(safe-area-inset-top)) !important;
      /* 터치 타겟 — 32px 는 엄지로 빗나가기 쉬움 (HIG 최소 44 에 근접) */
      width: 42px !important;
	      height: 42px !important;
	      padding: 0 !important;
	    }
	    #graph-modal .graph-close-btn {
	      right: 0.62rem !important;
	    }
	    #graph-modal .graph-fullscreen-btn {
	      right: calc(0.62rem + 50px) !important;
	    }
	    #graph-modal .modal-head-iconbtn svg { width: 18px !important; height: 18px !important; }
    /* 모바일: 마인드맵 카드 라벨 */
    .graph-node-label {
      font-size: 11px !important;
      stroke-width: 0 !important;
    }
    #graph-svg .graph-constellation-name {
      font-size: 9px !important;
      letter-spacing: 0.08em !important;
      opacity: 0.58 !important;
    }
    /* 모바일 그래프 본체 */
    .graph-shell {
      grid-template-columns: 1fr !important;
      grid-template-rows: minmax(0, 1fr) !important;
      position: relative !important;
      overflow: hidden !important;
    }
    .graph-stage {
      min-height: 0 !important;
      padding-bottom: 0 !important;
    }
    .graph-detail {
      position: absolute !important;
      left: 0.65rem !important;
      right: 0.65rem !important;
      bottom: calc(max(0.7rem, env(safe-area-inset-bottom)) + 1.2rem) !important;
      z-index: 4 !important;
      max-height: min(40dvh, 320px) !important;
      border-left: 0 !important;
      border: 1px solid rgba(42,38,32,0.16) !important;
      border-radius: 18px !important;
      padding: 0.58rem 0.72rem 0.72rem !important;
      background: color-mix(in srgb, var(--graph-panel) 86%, transparent) !important;
      box-shadow: 0 18px 46px -28px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.12) !important;
      backdrop-filter: blur(18px) saturate(1.08) !important;
      -webkit-backdrop-filter: blur(18px) saturate(1.08) !important;
      overflow-y: auto !important;
      overscroll-behavior: contain !important;
      transform: translateY(0) !important;
      transition: transform 0.18s ease, max-height 0.18s ease, opacity 0.18s ease !important;
    }
    .graph-modal-panel[data-graph-theme="night"] .graph-detail {
      border-color: rgba(217,189,115,0.18) !important;
      background: rgba(9,14,28,0.82) !important;
      box-shadow: 0 20px 54px -28px rgba(0,0,0,0.72), 0 0 34px rgba(217,189,115,0.06), inset 0 1px 0 rgba(217,189,115,0.08) !important;
    }
    /* 모바일: 선택 전엔 전체 지도(ATLAS) 시트를 숨김 — 캔버스만 깔끔하게.
       전체 통계는 하단 graph-foot 바에 항상 표시됨. 노드를 누르면 시트가 올라옴. */
    .graph-detail:not(.graph-detail-selected) {
      transform: translateY(112%) !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .graph-detail:not(.graph-detail-selected) .graph-detail-preview,
    .graph-detail:not(.graph-detail-selected) .graph-related,
    .graph-detail:not(.graph-detail-selected) .graph-open-btn {
      display: none !important;
    }
    .graph-mobile-sheet-grip {
      width: 38px;
      height: 4px;
      border-radius: 999px;
      margin: 0 auto 0.42rem;
      background: rgba(42,38,32,0.22);
    }
    .graph-detail-kicker { font-size: 0.58rem !important; }
    .graph-detail h3 {
      font-size: 0.82rem !important;
      margin: 0.15rem 0 0.3rem !important;
      line-height: 1.25 !important;
    }
    .graph-detail-meta { gap: 0.2rem !important; margin-bottom: 0.4rem !important; }
    .graph-pill { min-height: 18px !important; font-size: 0.64rem !important; padding: 0.08rem 0.35rem !important; }
    .graph-detail-preview {
      display: -webkit-box !important;
      -webkit-line-clamp: 1 !important;
      -webkit-box-orient: vertical !important;
      overflow: hidden !important;
      font-size: 0.72rem !important;
      line-height: 1.4 !important;
      margin-bottom: 0.4rem !important;
    }
    .graph-open-btn { min-height: 32px !important; font-size: 0.76rem !important; }
    .graph-related { margin-top: 0.4rem !important; gap: 0.15rem !important; }
    .graph-related-title { font-size: 0.6rem !important; }
    .graph-related button { min-height: 26px !important; font-size: 0.68rem !important; padding: 0.2rem 0.35rem !important; }
    .graph-legend {
      left: 0.4rem !important;
      right: 0.4rem !important;
      width: calc(100% - 0.8rem) !important;
      max-width: calc(100% - 0.8rem) !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
      contain: layout paint !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      padding-bottom: 0.08rem !important;
      pointer-events: auto !important;
      scrollbar-width: none !important;
      /* v1090 — 하단 가장자리에 반쯤 잘리던 범례 칩: 홈 인디케이터 safe-area 만큼 띄움 */
      bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
      gap: 0.2rem !important;
    }
    .graph-legend::-webkit-scrollbar { display: none !important; }
    .graph-legend-item {
      flex: 0 0 auto !important;
      font-size: 0.6rem !important;
      padding: 0.15rem 0.3rem !important;
      gap: 0.15rem !important;
    }
    .graph-legend-dot { width: 0.38rem !important; height: 0.38rem !important; }
    .graph-foot { display: none !important; }
    /* 온보딩 카드 모바일 */
    .onboard-card { padding: 1.2rem 1.3rem; }
    .onboard-step { min-height: 280px; }
    .onboard-step h3 { font-size: var(--text-md); }
    .onboard-step p { font-size: 0.9rem; }
    /* 녹음 핀 */
    .rec-card { padding: 0.4rem 0.7rem; }
    .rec-vis { width: 50px; max-width: 50px; }
    /* 그리기 미니 툴바 */
    .draw-mini {
      flex-wrap: wrap; max-width: 95vw;
      padding: 0.45rem; gap: 0.3rem;
    }
    .draw-mini .dm-cs { width: 28px; height: 28px; }
    .draw-mini .dm-size { width: 60px; }
    /* 데일리 네비 버튼들 — 한 줄에 배치 */
    .daily-nav { flex-wrap: wrap; gap: 0.4rem; }
    .daily-date-input { font-size: 1rem; padding: 0.5rem; }
    /* 멘션/태그/링크 팝업 */
    .mention-popup { width: calc(100vw - 24px); max-width: 360px; }
  }

  /* SVG 잉크 — 작은 화면에서 더 부드럽게 */
  .ink-layer { touch-action: none; }

  /* contenteditable 본문 (textarea 대체) */
  .editable-area {
    outline: none;
    cursor: text;
    white-space: pre-wrap;
    word-wrap: break-word;
    word-break: keep-all;
    overflow-y: auto;
  }
  .editable-area:empty:not(:focus)::before {
    content: attr(data-placeholder);
    color: var(--text-faint);
    pointer-events: none;
    display: inline-block;
    opacity: 0.7;
  }
  /* 본문 내 mark 스타일은 위쪽 mark.hl-X 규칙이 그대로 적용됨 */

  /* 인라인 첨부 (사진/그림 표시용 — saved 상태만) */
  .inline-attach {
    display: block;
    margin: 0.7rem 0;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--border);
    user-select: none;
    background: var(--surface);
  }
  .inline-attach.saved:hover { border-color: var(--accent-dim); }
  .inline-attach .id-img { display: block; width: 100%; max-width: 100%; height: auto; cursor: zoom-in; }

  /* v551q — 인라인 사진 (본문 내 삽입된 이미지, 삼성노트 스타일) */
  img.inline-photo {
    display: block;
    max-width: 100%;
    max-height: 400px;
    margin: 0.6rem 0;
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    user-select: none;
    cursor: zoom-in;
    object-fit: contain;
    position: relative;
  }
  img.inline-photo:hover { border-color: var(--accent-dim); }

  /* v556q — 인라인 사진 리사이즈 (선택 시 핸들 표시 + 드래그 크기 조정) */
  .inline-photo-wrap {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 0.6rem 0;
    cursor: default;
  }
  .inline-photo-wrap img {
    display: block;
    max-width: 100%;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color 0.15s ease;
  }
  .inline-photo-wrap.selected img {
    border-color: var(--accent);
    cursor: grab;
  }
  .inline-photo-wrap.selected.dragging img { cursor: grabbing; }
  /* 리사이즈 핸들 — 세련된 미니멀 스타일 */
  .inline-photo-resize-handle {
    position: absolute;
    width: 8px; height: 8px;
    background: #fff;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    z-index: 10;
    display: none;
    touch-action: none;
    transition: transform 0.15s ease;
  }
  .inline-photo-resize-handle:hover {
    transform: scale(1.3);
  }
  .inline-photo-wrap.selected .inline-photo-resize-handle { display: block; }
  .inline-photo-resize-handle.se { bottom: -4px; right: -4px; cursor: nwse-resize; }
  .inline-photo-resize-handle.sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
  .inline-photo-resize-handle.ne { top: -4px; right: -4px; cursor: nesw-resize; }
  .inline-photo-resize-handle.nw { top: -4px; left: -4px; cursor: nwse-resize; }
  .inline-photo-resize-handle.n { top: -4px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
  .inline-photo-resize-handle.s { bottom: -4px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
  .inline-photo-resize-handle.e { top: 50%; right: -4px; transform: translateY(-50%); cursor: ew-resize; }
  .inline-photo-resize-handle.w { top: 50%; left: -4px; transform: translateY(-50%); cursor: ew-resize; }
  /* 모바일 터치 친화 */
  @media (pointer: coarse) {
    .inline-photo-resize-handle {
      width: 18px; height: 18px;
    }
    .inline-photo-resize-handle::before {
      content: '';
      position: absolute;
      inset: -10px;
      /* 투명 터치 영역 확장 — 실제 핸들보다 훨씬 크게 */
    }
    .inline-photo-resize-handle.se { bottom: -9px; right: -9px; }
    .inline-photo-resize-handle.sw { bottom: -9px; left: -9px; }
    .inline-photo-resize-handle.ne { top: -9px; right: -9px; }
    .inline-photo-resize-handle.nw { top: -9px; left: -9px; }
    .inline-photo-resize-handle.n { top: -9px; left: 50%; transform: translateX(-50%); }
    .inline-photo-resize-handle.s { bottom: -9px; left: 50%; transform: translateX(-50%); }
    .inline-photo-resize-handle.e { top: 50%; right: -9px; transform: translateY(-50%); }
    .inline-photo-resize-handle.w { top: 50%; left: -9px; transform: translateY(-50%); }
    /* 모바일 툴바 — 하단 플로팅 */
    .inline-photo-toolbar {
      top: auto;
      bottom: -48px;
      padding: 6px 10px;
      gap: 4px;
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    }
    .inline-photo-toolbar button {
      padding: 8px;
    }
    .inline-photo-toolbar button svg {
      width: 20px;
      height: 20px;
    }
    .inline-photo-toolbar .divider {
      height: 24px;
    }
  }

  /* 미니 툴바 — 미니멀 & 샤프 */
  .inline-photo-toolbar {
    position: absolute;
    top: -44px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 6px;
    padding: 4px;
    display: none;
    gap: 2px;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    z-index: 11;
  }
  [data-theme="dark"] .inline-photo-toolbar,
  [data-theme="night"] .inline-photo-toolbar {
    background: rgba(30,30,30,0.95);
    border-color: rgba(255,255,255,0.08);
  }
  .inline-photo-wrap.selected .inline-photo-toolbar { display: flex; }
  .inline-photo-toolbar button {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
  }
  .inline-photo-toolbar button:hover {
    background: rgba(0,0,0,0.05);
  }
  [data-theme="dark"] .inline-photo-toolbar button:hover,
  [data-theme="night"] .inline-photo-toolbar button:hover {
    background: rgba(255,255,255,0.08);
  }
  .inline-photo-toolbar button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }
  .inline-photo-toolbar .divider {
    width: 1px;
    height: 20px;
    background: var(--border);
    margin: 0 0.2rem;
  }


  /* SVG 잉크 오버레이 — contenteditable 위에 떠 있는 손글씨 레이어 */
  .ink-layer {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
  }
  .ink-layer.draw-active {
    pointer-events: auto;
    cursor: crosshair;
    background: rgba(201,169,97,0.04);
  }

  /* 그리기 미니 툴바 (그리기 모드 때만) */
  .draw-mini {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99500;
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: var(--r-full);
    padding: 0.4rem 0.6rem;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    display: flex;
    gap: 0.45rem;
    align-items: center;
  }
  .draw-mini[hidden] { display: none; }
  .draw-mini .dm-cs {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
  }
  .draw-mini .dm-cs.active { border-color: var(--accent); transform: scale(1.12); }
  .draw-mini .dm-size {
    width: 70px;
  }
  .draw-mini .dm-btn {
    min-width: 34px;
    min-height: 34px;
    padding: 0.32rem 0.62rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
  }
  .draw-mini .dm-btn svg {
    width: 15px;
    height: 15px;
    stroke-width: 1.8;
    flex: 0 0 auto;
  }
  .draw-mini .dm-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
  .draw-mini .dm-btn.eraser.active { background: rgba(255,100,100,0.2); border-color: #ff5555; color: #ff8080; }

  /* 온보딩 카드 */
  .onboard-overlay {
    position: fixed; inset: 0;
    background: rgba(10,8,6,0.9);
    z-index: var(--z-boot);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
  }
  .onboard-overlay[hidden] { display: none; }
  .onboard-card {
    background: var(--bg);
    border: 1px solid var(--accent);
    border-radius: 14px;
    max-width: 520px;
    width: 100%;
    padding: 1.6rem 1.8rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  }
  .onboard-step {
    font-family: 'Noto Serif KR', serif;
    color: var(--text);
    line-height: 1.75;
    min-height: 200px;
  }
  .onboard-step h3 {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.15rem;
    color: var(--accent);
    margin: 0 0 0.85rem;
  }
  .onboard-step p { font-size: var(--text-base); margin: 0.5rem 0; word-break: keep-all; }
  .onboard-step .ico {
    display: inline-block;
    width: 2.5rem; height: 2.5rem;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-md);
    line-height: 2.5rem;
    text-align: center;
    color: var(--accent);
    margin-right: 0.6rem;
    vertical-align: middle;
    font-size: var(--text-lg);
  }
  .onboard-step kbd {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-xs);
    padding: 0.1rem 0.4rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-sm);
    color: var(--accent);
  }
  .onboard-actions {
    display: flex; align-items: center; gap: 0.6rem;
    margin-top: 1.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
  }
  .onboard-btn {
    padding: 0.55rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.9rem;
    cursor: pointer;
  }
  .onboard-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
  .onboard-btn.skip { background: transparent; color: var(--text-faint); border-color: transparent; }
  .onboard-progress {
    flex: 1; text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-faint);
  }

  /* 통계 카드 (달력 위) */
  #daily-cal-modal .daily-cal-panel {
    max-width: 680px;
  }
  #daily-cal-modal .modal-head h2 {
    white-space: nowrap; /* "통계 · 달력" 이 "달/력" 으로 줄바꿈되는 것 방지 */
    flex-shrink: 0;
  }
  #daily-cal-modal .dc-head-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.4rem;
  }
  #daily-cal-modal .dc-month-label {
    min-width: 120px;
    text-align: center;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.95rem;
  }
  .stats-strip {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-2);
    padding: 0.7rem 0.8rem 0.4rem;
  }
  .stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 0.5rem;
    text-align: center;
  }
  .stat-label {
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-bottom: 0.2rem;
    letter-spacing: var(--ls-wide);
  }
  .stat-value {
    /* 숫자 우선 — Cormorant 의 '1'·'0' 이 I·O 처럼 읽혀 통계 숫자가 헷갈림 */
    font-family: 'Noto Serif KR', 'Cormorant Garamond', serif;
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--accent);
    line-height: 1;
  }
  .stat-sub {
    font-size: 0.68rem;
    color: var(--text-faint);
    margin-top: 0.1rem;
  }
  #stat-presentation-types {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  @media (max-width: 480px) {
    .stats-strip { grid-template-columns: repeat(3, 1fr); }
    .stat-value { font-size: 1.45rem; }
    .stat-card { padding: 0.5rem 0.3rem; }
  }

  /* AI 인사이트 버튼 */
  .ai-insight-bar {
    display: flex; gap: var(--space-2);
    padding: 0.4rem 0.8rem 0.5rem;
  }
  .ai-insight-btn {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    background: rgba(245,212,136,0.06);
    border: 1px solid var(--accent-dim);
    color: var(--accent);
    font-family: inherit;
    font-size: 0.88rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.15s;
  }
  .ai-insight-btn:hover {
    background: rgba(245,212,136,0.15);
    border-color: var(--accent);
  }
  .ai-insight-btn:disabled { opacity: 0.5; cursor: progress; }
  .ai-insight-result {
    margin: 0 0.8rem 0.7rem;
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-radius: 10px;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    line-height: var(--lh-loose);
    color: var(--text);
    max-height: 50vh;
    overflow-y: auto;
  }
  .ai-insight-result h2, .ai-insight-result h3, .ai-insight-result h4 {
    color: var(--accent);
    margin-top: 0.6rem;
  }
  .ai-insight-result p { margin: 0.4rem 0; }
  .ai-insight-empty {
    display: block;
    color: var(--text-faint);
    font-style: italic;
  }
  .ai-insight-result a.auto-ref {
    background: rgba(201,169,97,0.18);
    padding: 0.05rem 0.3rem;
    border-radius: var(--r-xs);
    cursor: pointer;
  }
  .ai-streaming {
    display: inline-block;
    color: var(--accent);
    animation: aiBlink 1s infinite;
  }
  @keyframes aiBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
  }

  /* 읽은 날 표시 */
  .dc-day.has-read {
    background: rgba(126, 158, 182, 0.08);
  }
  .dc-day.has-read .dc-num {
    text-decoration: underline;
    text-decoration-color: rgba(126, 158, 182, 0.6);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
  }
  .dc-dot.dc-read { background: rgba(126, 158, 182, 0.6); }

  /* 데일리 캘린더 뷰 */
  .dc-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    padding: 0.6rem 0.8rem 0.4rem;
  }
  .dc-day-head {
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    padding: 0.2rem 0;
  }
  .dc-day-head.sun { color: #c95151; }
  .dc-day-head.sat { color: #5188c9; }
  .dc-day {
    aspect-ratio: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.3rem;
    position: relative;
    transition: border-color 0.12s, background 0.12s;
    font-family: 'Noto Serif KR', serif;
  }
  .dc-day:hover { border-color: var(--accent-dim); background: var(--surface-2); }
  .dc-day.empty { visibility: hidden; }
  .dc-day.today { border-color: var(--accent); border-width: 2px; }
  .dc-day.future { opacity: 0.5; cursor: default; }
  .dc-day.future:hover { border-color: var(--border); background: var(--surface); }
  .dc-day .dc-num {
    font-size: var(--text-base);
    color: var(--text);
  }
  .dc-day.has-note .dc-num { color: var(--accent); font-weight: 600; }
  .dc-day.sun .dc-num { color: #d97575; }
  .dc-day.sat .dc-num { color: #7ba0d6; }
  .dc-day .dc-snippet {
    font-size: 0.62rem;
    color: var(--text-faint);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .dc-legend {
    display: flex;
    gap: var(--space-4);
    padding: 0.4rem 0.9rem 0.7rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    align-items: center;
  }
  .dc-dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    margin-right: 0.3rem;
    vertical-align: -1px;
  }
  .dc-dot.dc-has { background: var(--accent); }
  .dc-dot.dc-today { background: transparent; border: 2px solid var(--accent); }
  .dc-dot.dc-future { background: var(--border); }

  /* 자동 절 링크 (요 3:16 등) */
  .auto-ref {
    color: var(--accent);
    border-bottom: 1px dotted var(--accent-dim);
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    background: rgba(201, 169, 97, 0.06);
    padding: 0 0.15rem;
    border-radius: 2px;
  }
  .auto-ref:hover { background: rgba(201, 169, 97, 0.15); border-bottom-color: var(--accent); }

  /* [[양방향 링크]] 스타일 */
  .note-link {
    background: rgba(139, 156, 200, 0.15);
    color: #a0b5dc;
    padding: 0 0.25rem;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dashed rgba(139, 156, 200, 0.4);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.92em;
  }
  .note-link:hover { background: rgba(139, 156, 200, 0.28); color: #c0d0ed; }

  /* 백링크 패널 */
  #w-backlinks { padding: 0.6rem 0.8rem 0; }
  #w-backlinks:empty { display: none; }
  .backlinks-head {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 0.4rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
  }
  .backlinks-head-icon {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
    flex: 0 0 auto;
  }
  .backlinks-list {
    display: flex; flex-direction: column; gap: 0.3rem;
  }
  .backlink-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.4rem 0.6rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    transition: border-color 0.12s;
  }
  .backlink-item:hover { border-color: var(--accent-dim); background: var(--surface-2); }
  .backlink-date {
    color: var(--text-faint);
    font-size: 0.75rem;
    flex: 0 0 auto;
  }

  /* 💑 부부 메뉴 */
  .couple-badge {
    position: absolute; top: 4px; right: 4px;
    background: #ff5050;
    color: white;
    border-radius: var(--r-full);
    min-width: 16px; height: 16px;
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 16px;
    padding: 0 4px;
    text-align: center;
    pointer-events: none;
  }
  .couple-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 0.5rem;
    background: var(--surface);
  }
  .couple-tab {
    padding: 0.7rem 0.85rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.35rem;
    /* v215 — 모바일 좁은 화면에서도 한 줄 유지 */
    white-space: nowrap;
    flex: 0 0 auto;
  }
  @media (max-width: 720px) {
    .couple-tabs { overflow-x: auto; padding: 0 0.35rem; }
    .couple-tab { padding: 0.7rem 0.7rem; font-size: var(--text-sm); }
  }
  .couple-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .ctab-ic {
    width: 15px; height: 15px;
    opacity: 0.75;
    flex-shrink: 0;
  }
  .couple-tab.active .ctab-ic { opacity: 1; }
  .cou-tab-count {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    background: var(--surface-2);
    color: var(--text-faint);
    padding: 0.05rem 0.4rem;
    border-radius: var(--r-full);
    min-width: 1.1rem;
    text-align: center;
  }
  .cou-tab-count:empty { display: none; }
  .couple-tab.active .cou-tab-count { background: rgba(201,169,97,0.15); color: var(--accent); }
  .cou-tab-new {
    display: inline-block;
    margin-left: 0.25rem;
    background: #d49b3d;
    color: #1a1610;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.08rem 0.32rem;
    border-radius: var(--r-md);
    letter-spacing: 0.03em;
    animation: pulse-new 1.6s ease-in-out infinite;
  }
  @keyframes pulse-new {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.08); }
  }
  /* v506c — padding 0: 각 pane 자식 (.worship-list-head 등) 이 자체 padding 갖게 */
  .couple-tab-body { padding: 0; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .couple-tab-body > .couple-pane { padding: 0 0 1rem; }
  /* v506c — 말씀 선물 head 의 hint 텍스트 (검색·정렬 자리 대체) */
  .cou-head-hint {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
  }
  .cou-gift-send-panel {
    max-width: 480px;
  }
  .cou-gift-send-body {
    padding: 1rem 1.2rem;
  }
  .cou-gift-message {
    min-height: 80px;
    line-height: 1.7;
    width: 100%;
    margin-top: 0.7rem;
  }
  .cou-gift-submit {
    margin-top: 0.7rem;
  }
  /* v506c — 기도 제목 head 안 input/+버튼 시각 미세조정 */
  .cou-prayer-quick { min-width: 0; }
  /* === 부부 모달 워크스페이스 패턴 (v200) — 다른 노트와 통일감 === */
  .couple-workspace { display: flex !important; flex-direction: column; }
  .couple-shell { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
  .couple-shell .couple-tabs { flex: 0 0 auto; }
  .couple-partner-label {
    font-size: 0.78rem;
    color: var(--text-faint);
    font-family: 'Inter', sans-serif;
    margin-left: auto;
  }
  /* 데스크탑 — rail + shell side-by-side */
  @media (min-width: 721px) {
    #couple-modal .couple-workspace {
      display: grid !important;
      grid-template-columns: 64px 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "head head"
        "rail shell";
      min-height: 0;
    }
    #couple-modal .modal-head { grid-area: head; }
    #couple-modal .couple-modal-rail {
      grid-area: rail;
      display: flex !important;
      border-right: 1px solid var(--border);
      min-height: 0;
    }
    #couple-modal .couple-shell { grid-area: shell; min-height: 0; }
  }
  /* 모바일 — rail hidden, 헤더 + shell stack */
  @media (max-width: 720px) {
    #couple-modal .couple-modal-rail { display: none !important; }
  }
  .couple-pane[hidden] { display: none; }
  .cou-empty {
    text-align: center; padding: 2.5rem 1.5rem;
    font-family: 'Noto Serif KR', serif;
    color: var(--text-dim); font-size: var(--text-base);
    line-height: 1.75; word-break: keep-all;
    background: rgba(245,212,136,0.03);
    border: 1px dashed var(--border);
    border-radius: var(--r-lg);
    margin: 0.5rem 0;
  }

  /* 빈 상태에 말씀 — 모든 곳 공통.
     v290 — 시네마틱 뽀인트: 영화 자막 톤 (큰 italic Cormorant + letter-spacing + 페이드 인).
     진입 시 한 줄의 말씀이 자막처럼 떠오름. */
  .empty-with-verse {
    padding: 3rem 1.5rem 2.4rem;
    min-height: clamp(220px, 34vh, 360px);
    background: color-mix(in srgb, var(--surface) 92%, var(--paper-bg-1) 8%);
    border: 1px solid color-mix(in srgb, var(--paper-meta) 18%, transparent);
    border-radius: 14px;
    box-shadow: 0 16px 42px -34px rgba(58,46,32,0.28);
    animation: cinematicVerseFade 0.7s var(--ease-decelerate);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }
  @keyframes cinematicVerseFade {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  /* v290 — 영화 자막 톤 verse */
  .empty-with-verse .empty-verse {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: 1.35rem;
    line-height: var(--lh-loose);
    color: color-mix(in srgb, var(--paper-ink) 92%, transparent);
    font-style: italic;
    font-weight: 500;
    letter-spacing: var(--ls-wide);
    word-break: keep-all;
    max-width: 24em;
    margin: 0 auto 0.7rem;
    text-wrap: balance;
    animation: cinematicVerseTextFade 0.7s var(--ease-decelerate) both;
  }
  @keyframes cinematicVerseTextFade {
    0%   { opacity: 0; letter-spacing: var(--ls-wider); }
    60%  { opacity: 0.7; letter-spacing: 0.03em; }
    100% { opacity: 1; letter-spacing: var(--ls-wide); }
  }
  .empty-with-verse .empty-verse-ref {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-style: italic;
    font-size: var(--text-base);
    color: var(--accent);
    letter-spacing: 0.04em;
    opacity: 0.85;
    animation: cinematicVerseFade 0.75s var(--ease-decelerate) both;
  }
  .empty-with-verse .empty-divider {
    width: 48px; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
    margin: 1.5rem auto;
    opacity: 0.7;
    animation: cinematicDividerFade 0.8s var(--ease-decelerate) both;
  }
  @keyframes cinematicDividerFade {
    0%   { opacity: 0; transform: scaleX(0); }
    100% { opacity: 0.7; transform: scaleX(1); }
  }
  .empty-with-verse .empty-message {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: var(--text-base);
    color: var(--text-dim);
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
    opacity: 1;
    animation: cinematicVerseFade 0.85s var(--ease-decelerate) both;
  }
  .empty-with-verse .empty-hint {
    font-size: var(--text-sm);
    color: var(--text-faint);
    line-height: 1.6;
    font-style: italic;
    opacity: 1;
    animation: cinematicVerseFade 0.95s var(--ease-decelerate) both;
  }
  .worship-list > .empty-with-verse,
  .scraps-empty.empty-with-verse {
    margin-block: 0.65rem;
  }
  @media (max-width: 720px) {
    .empty-with-verse {
      min-height: clamp(200px, 32vh, 300px);
      padding: 1.45rem 1rem 1.35rem;
    }
    .empty-with-verse .empty-verse {
      font-size: 1.08rem;
      margin-bottom: 0.35rem;
    }
    .empty-with-verse .empty-verse-ref {
      font-size: 0.92rem;
    }
    .empty-with-verse .empty-divider {
      margin: 0.9rem auto;
    }
    .empty-with-verse .empty-message {
      font-size: 0.96rem;
    }
    .empty-with-verse .empty-hint {
      font-size: 0.82rem;
    }
  }

  /* 전역 탭 피드백 — 버튼 누르면 살짝 눌리는 느낌 */
  button:not(:disabled):active,
  .icon-btn:not(:disabled):active,
  [role="button"]:not(:disabled):active {
    transform: scale(0.97);
    transition: transform 0.05s ease-out;
  }
  /* 데스크탑 마우스에서는 비활성 (호버만) */
  @media (hover: hover) and (pointer: fine) {
    button:not(:disabled):active,
    .icon-btn:not(:disabled):active,
    [role="button"]:not(:disabled):active {
      transform: none;
    }
  }
  .cou-input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: inherit;
    font-size: var(--text-base);
    box-sizing: border-box;
  }
  .cou-input:focus { outline: none; border-color: var(--accent); }
  .cou-add-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.7rem 1rem;
    background: var(--accent);
    color: var(--accent-fg);
    border: none;
    border-radius: var(--r-md);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    margin-top: 0.7rem;
    width: 100%;
  }
  .cou-add-btn:hover { filter: brightness(1.1); }
  /* ════════════════════════════════════════════════════════════════
   * v286 — 스크랩북 모달
   * ════════════════════════════════════════════════════════════════ */
  #scraps-modal.note-workspace-overlay,
  [data-theme="sepia"] #scraps-modal.note-workspace-overlay,
  [data-theme="light"] #scraps-modal.note-workspace-overlay {
    background: #0f0f0f;
  }
  .scraps-workspace {
    --scrap-bg: #0f0f0f;
    --scrap-fg: #f1f1f1;
    --scrap-muted: #aaa;
    --scrap-faint: #717171;
    --scrap-chip: #272727;
    --scrap-chip-active: #f1f1f1;
    --scrap-red: #ff0033;
    display: flex; flex-direction: column;
    height: 100%;
    background: var(--scrap-bg);
    color: var(--scrap-fg);
    font-family: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  }

  /* v1131 — 클리핑 인라인 상세: 다크 YouTube 톤 통일.
     #scraps-modal 은 앱 테마와 무관하게 항상 다크(#0f0f0f)라, 상세 콘텐츠가
     라이트 페이퍼 톤(흰 카드·먹색 글씨)으로 새지 않게 스크랩 팔레트로 고정한다.
     이단감별 리포트는 라이트 페이퍼 컴포넌트라 상세 안에서만 다크로 오버라이드. */
  #scraps-modal #scraps-detail {
    --surface: #1c1c1c;
    --bg: #0f0f0f;
    --text: #f1f1f1;
    --text-dim: #b3b3b3;
    --text-faint: #8a8a8a;
    --border: rgba(255, 255, 255, 0.13);
    --paper-ink: #f1f1f1;
    --paper-bg-1: #1c1c1c;
    --paper-bg-2: #222;
  }
  #scraps-modal #scraps-detail .discernment-report {
    background: #181818;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }
  #scraps-modal #scraps-detail .discernment-section {
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 3px 0 0 rgba(212, 175, 90, 0.30);
  }
  #scraps-modal .modal-head.scraps-head {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    min-height: 64px;
    padding: calc(0.55rem + env(safe-area-inset-top)) clamp(0.65rem, 2.4vw, 1.6rem) 0.55rem;
    background: var(--scrap-bg);
    border-bottom: 1px solid rgba(255,255,255,0.12);
    color: var(--scrap-fg);
  }
  [data-theme="light"] #scraps-modal .modal-head.scraps-head,
  [data-theme="sepia"] #scraps-modal .modal-head.scraps-head {
    background: var(--scrap-bg) !important;
    border-bottom: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--scrap-fg) !important;
  }
  #scraps-modal .modal-head.scraps-head h2 {
    min-width: 0;
    color: var(--scrap-fg);
    font-family: 'Inter', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-size: clamp(1.16rem, 3.5vw, 1.55rem);
    font-weight: 750;
    letter-spacing: var(--ls-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #scraps-modal .modal-head.scraps-head h2 .ko {
    font-family: inherit;
    color: inherit;
  }
  [data-theme="light"] #scraps-modal .modal-head.scraps-head h2,
  [data-theme="light"] #scraps-modal .modal-head.scraps-head h2 .ko,
  [data-theme="sepia"] #scraps-modal .modal-head.scraps-head h2,
  [data-theme="sepia"] #scraps-modal .modal-head.scraps-head h2 .ko {
    color: var(--scrap-fg) !important;
  }
  .scraps-back-btn,
  .scraps-head-icon {
    appearance: none;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
  }
  .scraps-back-btn:hover,
  .scraps-head-icon:hover,
  .scraps-back-btn:focus-visible,
  .scraps-head-icon:focus-visible {
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.28);
    color: #fff;
    outline: none;
  }
  .scraps-back-btn:active,
  .scraps-head-icon:active {
    transform: scale(0.96);
  }
  .scraps-back-btn svg,
  .scraps-head-icon svg {
    width: 26px;
    height: 26px;
    stroke-width: 2.25;
  }
  .scraps-head-icon svg[fill="currentColor"] {
    width: 24px;
    height: 24px;
  }
  .scraps-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
  }
  .scraps-count-label {
    font-size: var(--text-sm);
    color: var(--scrap-muted);
    font-weight: 500;
    letter-spacing: 0;
  }
  .scraps-toolbar {
    display: grid;
    gap: 0.7rem;
    padding: 0 clamp(1.05rem, 4vw, 2rem) 0.7rem;
    background: var(--scrap-bg);
    border-bottom: 0;
  }
  .scraps-workspace:not(.is-searching):not(.is-filtering) .scraps-toolbar {
    display: none;
  }
  .scraps-workspace:not(.is-searching) .scraps-search,
  .scraps-workspace:not(.is-filtering) .scraps-filters {
    display: none;
  }
  .scraps-search {
    width: min(680px, 100%);
    display: flex; align-items: center; gap: 0.4rem;
    min-height: 42px;
    padding: 0 0.78rem;
    background: #212121;
    border: 1px solid #3f3f3f;
    border-radius: var(--r-full);
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .scraps-search:focus-within {
    border-color: #5f5f5f;
    background: #181818;
  }
  .scraps-search svg { width: 18px; height: 18px; color: var(--scrap-muted); flex: 0 0 auto; }
  .scraps-search input {
    flex: 1; min-width: 0;
    border: 0; outline: 0; background: transparent;
    font-family: inherit;
    font-size: 0.93rem;
    color: var(--scrap-fg);
  }
  .scraps-search input::placeholder { color: var(--scrap-muted); }
  .scraps-search-clear {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; border-radius: 999px; cursor: pointer;
    color: var(--scrap-muted);
    padding: 0; flex: 0 0 auto;
  }
  .scraps-search-clear svg {
    width: 15px; height: 15px; stroke-width: 1.8;
  }
  .scraps-search-clear:hover,
  .scraps-search-clear:focus-visible {
    color: var(--scrap-fg);
    background: rgba(255,255,255,0.08);
    outline: none;
  }
  .scraps-filters {
    display: flex; gap: 0.3rem;
    flex-wrap: wrap;
    flex-shrink: 0;
  }
  .scraps-filters .cat-chip {
    min-height: 32px;
    padding: 0.34rem 0.82rem;
    background: var(--scrap-chip);
    border: 0;
    color: var(--scrap-fg);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
  }
  .scraps-filters .cat-chip:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--scrap-gold) 42%, transparent);
    outline-offset: 2px;
  }
  .scraps-filters .cat-chip.active {
    background: var(--scrap-chip-active);
    color: #0f0f0f;
  }
  .scraps-add-toggle {
    position: relative;
  }
  .scraps-add-toggle svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke-width: 1.7;
  }
  .scraps-add-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.3);
    color: var(--scrap-fg);
  }
  .scraps-add-panel[hidden] { display: none; }
  .scraps-add-panel {
    display: grid;
    gap: 0.58rem;
    padding: 0.65rem clamp(1.05rem, 4vw, 2rem) 0.95rem;
    border-bottom: 0;
    background: var(--scrap-bg);
  }
  .scraps-add-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    gap: var(--space-2);
  }
  .scraps-add-input,
  .scraps-add-note {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #3f3f3f;
    border-radius: 10px;
    background: #181818;
    color: var(--scrap-fg);
    font-family: inherit;
    font-size: 0.9rem;
  }
  .scraps-add-input {
    min-height: 38px;
    padding: 0.45rem 0.62rem;
  }
  .scraps-add-note {
    min-height: 70px;
    resize: vertical;
    padding: 0.58rem 0.65rem;
    line-height: 1.55;
  }
  .scraps-add-input:focus,
  .scraps-add-note:focus {
    outline: none;
    border-color: #5f5f5f;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
  }
  .scraps-add-actions {
    display: flex; justify-content: flex-end; align-items: center;
    gap: 0.45rem;
  }
  .scraps-add-actions button {
    border-radius: 7px;
    border: 1px solid #3f3f3f;
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    min-height: 34px;
    padding: 0.38rem 0.72rem;
  }
  .scraps-add-cancel {
    background: transparent;
    color: var(--scrap-muted);
  }
  .scraps-add-save {
    background: var(--scrap-fg);
    color: var(--scrap-bg);
  }
  .scraps-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem clamp(1.05rem, 4vw, 2rem) calc(1.25rem + env(safe-area-inset-bottom));
    min-height: 0;
    overscroll-behavior: contain;
    background: var(--scrap-bg);
  }
  .scraps-body-inner {
    width: min(980px, 100%);
    margin: 0 auto;
  }
  .scraps-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin: 0 0 1.05rem;
  }
  .scraps-section-title {
    color: var(--scrap-fg);
    font-family: inherit;
    font-size: clamp(1rem, 2.4vw, 1.2rem);
    font-weight: 750;
    letter-spacing: var(--ls-tight);
  }
  /* v294 — 클리핑 리스트: 유튜브 오프라인 저장 콘텐츠 패턴. */
  .scraps-list {
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .scrap-card {
    position: relative;
    display: grid;
    grid-template-columns: clamp(132px, 31vw, 246px) minmax(0, 1fr) 34px;
    align-items: start;
    gap: clamp(0.75rem, 2vw, 1.45rem);
    min-height: 92px;
    padding: 0.55rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    text-decoration: none;
    color: var(--scrap-fg);
    cursor: pointer;
    transition: background 0.12s ease;
  }
  @media (hover: hover) {
    .scrap-card:hover { background: rgba(255,255,255,0.04); }
    .scrap-card:hover .scrap-thumb { filter: brightness(1.04); }
  }
  .scrap-card:focus-visible {
    background: rgba(255,255,255,0.04);
    outline: 2px solid color-mix(in srgb, var(--accent) 36%, transparent);
    outline-offset: 3px;
  }
  .scrap-card:focus-visible .scrap-thumb {
    filter: brightness(1.04);
  }
  .scrap-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1c1c1e;
    background-size: cover; background-position: center;
    position: relative;
    flex-shrink: 0;
    border-radius: 9px;
    overflow: hidden;
    transition: filter 0.15s ease;
  }
  .scrap-thumb-icon {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: #777;
  }
  .scrap-thumb-icon svg { width: 38px; height: 38px; opacity: 0.72; }
  .scrap-thumb.is-yt::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 22%;
    height: 3px;
    background: var(--scrap-red);
    z-index: 2;
  }
  .scrap-thumb-badge {
    position: absolute;
    bottom: 6px; right: 6px;
    background: rgba(0,0,0,0.84);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 750;
    padding: 0.12rem 0.36rem;
    border-radius: var(--r-xs);
    z-index: 2;
    font-family: inherit;
  }
  .scrap-card-body {
    padding: 0.05rem 0 0;
    display: flex; flex-direction: column; gap: 0.35rem;
    min-height: 0;
    min-width: 0;
  }
  .scrap-card-title {
    font-family: inherit;
    font-size: clamp(0.9rem, 1.6vw, 1.02rem);
    font-weight: 650;
    color: var(--scrap-fg);
    line-height: 1.25;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: keep-all;
  }
  .scrap-card-title.empty {
    font-style: italic;
    color: var(--scrap-muted);
    font-weight: 400;
  }
  .scrap-card-meta {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--scrap-muted);
    letter-spacing: 0;
    line-height: 1.25;
    min-width: 0;
  }
  .scrap-card-source,
  .scrap-card-submeta {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .scrap-card-source {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--scrap-muted);
  }
  .scrap-card-source-check {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--scrap-faint);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--scrap-faint);
  }
  .scrap-card-source-check svg {
    width: 9px;
    height: 9px;
    stroke-width: 2.4;
  }
  .scrap-card-submeta { color: var(--scrap-muted); }
  .scrap-card-note {
    appearance: none;
    width: 100%;
    font-family: inherit;
    font-size: 0.78rem;
    color: var(--scrap-muted);
    line-height: 1.35;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    word-break: keep-all;
    margin-top: 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
  }
  .scrap-card-note:hover,
  .scrap-card-note:focus-visible {
    color: var(--scrap-fg);
    outline: none;
  }
  .scrap-card-note-edit {
    background: transparent;
    border: 0;
    padding: 0.2rem 0;
    font-family: inherit;
    font-size: 0.75rem;
    color: var(--scrap-faint);
    cursor: pointer;
    text-align: left;
    margin-top: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
  }
  .scrap-card:hover .scrap-card-note-edit,
  .scrap-card:focus-within .scrap-card-note-edit { opacity: 0.7; }
  @media (hover: none) { .scrap-card-note-edit { opacity: 0.6; } }
  .scrap-card-note-edit:hover,
  .scrap-card-note-edit:focus-visible { color: var(--scrap-muted); opacity: 1; }
  .scrap-card-actions {
    position: static;
    z-index: 3;
    display: flex;
    justify-content: flex-end;
    opacity: 1;
  }
  .scrap-card-actions button {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    color: var(--scrap-fg);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
  }
  .scrap-card-actions button:hover { background: rgba(255,255,255,0.1); }
  .scrap-card-actions button svg { width: 21px; height: 21px; }
  .scraps-empty {
    grid-column: 1 / -1;
    padding: 3rem 1.5rem;
    text-align: center;
  }
  @media (max-width: 720px) {
    #scraps-modal .modal-head.scraps-head {
      grid-template-columns: 42px minmax(0, 1fr) auto;
      min-height: 60px;
      padding-left: 0.45rem;
      padding-right: 0.45rem;
    }
    .scraps-back-btn,
    .scraps-head-icon {
      width: 40px;
      height: 40px;
    }
    .scraps-toolbar { padding: 0 0.95rem 0.65rem; gap: 0.55rem; }
    .scraps-filters { flex-wrap: wrap; }
    .scraps-add-row { grid-template-columns: 1fr; }
    .scraps-add-panel { padding: 0.65rem 0.95rem 0.9rem; }
    .scraps-body { padding: 1.2rem 0.95rem calc(1.2rem + env(safe-area-inset-bottom)); }
    .scraps-section-head { margin-bottom: 0.9rem; }
    .scrap-card {
      grid-template-columns: minmax(128px, 45vw) minmax(0, 1fr) 28px;
      gap: 0.72rem;
      min-height: 82px;
      padding: 0.48rem 0;
    }
    .scrap-card-title {
      font-size: 0.88rem;
      line-height: 1.22;
    }
    .scrap-card-meta { font-size: var(--text-xs); }
    .scrap-card-note {
      font-size: 0.72rem;
      line-height: 1.25;
      color: rgba(255,255,255,0.72);
      min-height: 27px;
      padding: 0.22rem 0.48rem;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 8px;
      background: rgba(255,255,255,0.045);
      box-sizing: border-box;
      -webkit-line-clamp: 1;
    }
    .scrap-card-note-edit {
      display: inline-flex;
      align-items: center;
      width: max-content;
      max-width: 100%;
      min-height: 27px;
      padding: 0.2rem 0.48rem;
      border: 1px solid rgba(255,255,255,0.16);
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.72);
      opacity: 1;
    }
    .scrap-card-actions button {
      width: 28px;
      height: 28px;
    }
    .scrap-card-actions button svg {
      width: 19px;
      height: 19px;
    }
    /* v291 — 모바일 글래스 카드 흰색 border 톤 다운 (다크 모드 거슬림) */
    .rp-stat-card,
    .rp-sim-card,
    .cou-gift,
    .cou-note-row,
    .cou-prayer-row {
      border-color: color-mix(in srgb, var(--paper-meta) 20%, transparent) !important;
      border-top-color: color-mix(in srgb, var(--paper-meta) 30%, transparent) !important;
    }
  }

  /* v276 — 선물 카드: 편지·인용 모티프 + 글래스모피즘. 봉투 아이콘 + ref italic + quote 부호. */
  /* ==========================================
     v302g - 말씀선물 대개편: 구글 머티리얼 3 + 프리미엄 감성
     ========================================== */
  .cou-gift {
    position: relative;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--paper-meta, var(--border)) 18%, transparent);
    border-radius: var(--r-xl);
    padding: 1.1rem 1.25rem 1rem;
    margin-bottom: 0.85rem;
    box-shadow:
      0 1px 3px rgba(0,0,0,0.02),
      0 4px 12px color-mix(in srgb, var(--paper-ink, #000) 4%, transparent);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    overflow: hidden;
  }

  /* 카드 호버/포커스 시 머티리얼 반응 */
  @media (hover: hover) {
    .cou-gift:hover {
      transform: translateY(-2px);
      box-shadow:
        0 4px 8px rgba(0,0,0,0.04),
        0 12px 24px -8px color-mix(in srgb, var(--paper-ink, #000) 10%, transparent);
      border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    }
  }

  /* 3가지 세련된 테마 카드 배경 */
  /* 1) 받은 선물 (안 읽음): 골드/앰버 웜 아우라 */
  .cou-gift.unread {
    background: rgba(212, 155, 61, 0.07);
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow:
      0 0 1px color-mix(in srgb, var(--accent) 30%, transparent),
      0 4px 16px -4px rgba(212, 155, 61, 0.15);
  }

  /* 2) 보낸 선물 (outgoing): 싱그러운 에메랄드 민트 */
  .cou-gift.outgoing {
    background: rgba(74, 125, 94, 0.05);
    border-color: color-mix(in srgb, #4a7d5e 30%, transparent);
  }

  /* 3) 받은 선물 (읽음): 클래식 웜 베이지 */
  .cou-gift:not(.outgoing):not(.unread) {
    background: rgba(201, 169, 97, 0.04);
  }

  /* 헤더 정렬 */
  .cou-gift-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
    font-size: var(--text-sm);
  }

  .cou-gift-direction {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: var(--ls-tight);
  }
  .cou-gift.outgoing .cou-gift-direction { color: #4a7d5e; }

  .cou-gift-envelope {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: var(--r-sm);
    background: rgba(212, 155, 61, 0.12);
    color: var(--accent);
  }
  .cou-gift.outgoing .cou-gift-envelope {
    background: rgba(74, 125, 94, 0.12);
    color: #4a7d5e;
  }
  .cou-gift-envelope svg { width: 12px; height: 12px; }

  .cou-gift-dir-text {
    font-family: 'Noto Sans KR', sans-serif;
    color: var(--text);
    font-size: var(--text-sm);
  }
  .cou-gift-time {
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    color: var(--text-faint);
  }

  /* 우상단 액션 컨테이너 */
  .cou-gift .cou-gift-actions {
    position: absolute;
    top: 0.9rem; right: 0.9rem;
    display: flex; gap: 0.35rem;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    z-index: 2;
  }
  .cou-gift:hover .cou-gift-actions { opacity: 1; }

  /* 절 북마크 블록 (Verse Plaque) */
  .cou-gift-plaque {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-left: 4px solid var(--accent);
    border-radius: var(--r-sm) 14px 14px 6px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow:
      inset 0 1px 2px rgba(0,0,0,0.02),
      0 2px 8px color-mix(in srgb, var(--paper-ink, #000) 2%, transparent);
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .cou-gift.outgoing .cou-gift-plaque {
    border-left-color: #4a7d5e;
  }
  [data-theme="dark"] .cou-gift-plaque,
  [data-theme="night"] .cou-gift-plaque {
    background: rgba(0, 0, 0, 0.24);
    border-color: rgba(255, 255, 255, 0.04);
  }

  .cou-gift-ref {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    color: var(--accent);
    font-weight: 700;
    font-size: var(--text-md);
    margin-bottom: 0.35rem;
    cursor: pointer;
    letter-spacing: var(--ls-tight);
    display: inline-block;
  }
  .cou-gift.outgoing .cou-gift-ref { color: #4a7d5e; }
  .cou-gift-ref:hover { text-decoration: underline; }

  .cou-gift-text {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.93rem;
    line-height: 1.75;
    color: var(--text);
    word-break: keep-all;
    margin: 0;
  }

  .cou-gift-quote-mark {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-xl);
    font-weight: 700;
    color: color-mix(in srgb, var(--accent) 45%, transparent);
    line-height: 0;
    vertical-align: -0.1em;
    margin: 0 0.15rem;
  }
  .cou-gift.outgoing .cou-gift-quote-mark {
    color: color-mix(in srgb, #4a7d5e 45%, transparent);
  }

  /* 감성 말풍선 메시지 (Chat Bubble) */
  .cou-gift-msg-wrap {
    margin-top: 0.65rem;
    padding: 0.6rem 0.9rem;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: var(--r-sm) 16px 16px 16px;
    position: relative;
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.4),
      0 2px 8px color-mix(in srgb, var(--paper-ink, #000) 1.5%, transparent);
  }
  /* 다크모드 대응 메시지 배경 미세 조정 */
  [data-theme="dark"] .cou-gift-msg-wrap,
  [data-theme="night"] .cou-gift-msg-wrap {
    background: rgba(0, 0, 0, 0.22);
    border-color: rgba(255, 255, 255, 0.03);
    box-shadow: none;
  }

  .cou-gift-msg-sender {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 0.2rem;
    display: flex; align-items: center; gap: var(--space-1);
  }
  .cou-gift-msg-sender svg {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
  }
  .cou-gift.outgoing .cou-gift-msg-sender { color: #4a7d5e; }

  .cou-gift-msg {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    color: var(--text-dim);
    line-height: 1.6;
    word-break: keep-all;
  }
  /* v268 — 통일된 아이콘 버튼 (gifts·prayers 공통) */
  .cou-icon-btn {
    width: 30px; height: 30px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    background: color-mix(in srgb, var(--surface) 75%, transparent);
    border: 1px solid color-mix(in srgb, var(--paper-meta, var(--border)) 22%, transparent);
    border-radius: 7px;
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  }
  .cou-icon-btn svg { width: 16px; height: 16px; }
  .cou-icon-btn:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
  }
  .cou-icon-btn:active { transform: scale(0.94); }
  .cou-icon-btn.cou-icon-danger:hover {
    background: color-mix(in srgb, #c47a6a 14%, var(--surface));
    border-color: color-mix(in srgb, #c47a6a 45%, transparent);
    color: #b35a48;
  }

  /* v502c — 함께 노트 toolbar 는 worship/daily 와 동일 (.worship-list-head + .worship-toolbar).
     기존 .cou-notes-toolbar/.cou-notes-search/.cou-notes-sort 룰은 제거. */

  /* 파트너가 수정한 노트 표시 */
  .worship-card.partner-updated {
    border-left: 3px solid var(--accent);
    background: var(--surface);
  }
  .worship-card.partner-updated .cou-note-edit-by {
    color: #d49b3d;
  }
  .worship-card.partner-updated::after {
    content: "NEW";
    position: absolute;
    top: 0.5rem; right: 0.5rem;
    background: #d49b3d;
    color: #1a1610;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    letter-spacing: 0.04em;
    z-index: 1;
  }

  /* 함께 노트 — 편집/보기 모달 */
  .cou-note-modal {
    background: var(--bg);
  }
  .cou-note-head h2 { display: flex; align-items: center; gap: var(--space-2); }
  .cou-heart { font-size: 1.1rem; animation: heartBeat 2s ease-in-out infinite; }
  @keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
  }
  /* v505c — cou-note-content 를 worship-edit-shell 처럼 패딩 0 + flex column scroll
     컨테이너로. 자식: worship-edit-head(sticky) + note-page-toolbar(sticky) +
     note-page-scroll(scrollable, 페이지) + cou-engage(고정). */
  .cou-note-content {
    padding: 0;
    display: flex; flex-direction: column;
    flex: 1; min-height: 0;
    overflow: hidden;
  }
  .cou-page-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto;
  }
  /* v505c — cou-note-title-input 의 박스 underline 제거.
     .sermon-title 클래스가 worship 과 똑같이 큰 serif borderless 적용.
     보조 룰: 페이지 안 가로폭 제한 */
  .cou-note-title-input {
    width: 100%;
  }
  /* 헤더 카드 — 모바일 패딩 살짝 좁힘 */
  .cou-header-card { padding: 22px clamp(18px, 3vw, 32px) 14px; }
  /* engage (반응+댓글) — 페이지 밖이므로 surface 배경, 가로 패딩 */
  .cou-note-modal .cou-engage {
    padding: 14px clamp(14px, 3vw, 28px) 18px;
    border-top: 1px solid var(--border);
    background: var(--surface);
    flex: 0 0 auto;
  }
  .cou-note-meta-row {
    display: flex; justify-content: space-between; align-items: center;
    font-size: var(--text-xs); color: var(--text-faint);
    margin-bottom: 0.7rem;
    flex-wrap: wrap; gap: var(--space-2);
  }
  .cou-note-tabs { display: flex; gap: var(--space-1); }
  .cou-note-tab {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.78rem;
    padding: 0.32rem 0.7rem;
    border-radius: var(--r-full);
    cursor: pointer;
    transition: all 0.15s;
  }
  .cou-note-tab:hover { border-color: var(--accent-dim); color: var(--text); }
  .cou-note-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #1a1610;
  }
  .cou-note-preview {
    min-height: 320px;
    padding: 1.1rem 1.2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-family: 'Noto Serif KR', serif;
    font-size: 1rem;
    line-height: var(--lh-verse);
    color: var(--text);
  }
  .cou-note-preview:empty::before {
    content: "보기 모드 — 미리보기에 마크다운·유튜브 썸네일·성경 링크가 표시됩니다";
    color: var(--text-faint);
    font-style: italic;
  }
  .cou-note-preview h2, .cou-note-preview h3, .cou-note-preview h4 {
    font-family: 'Noto Serif KR', serif;
    margin-top: 1rem;
    color: var(--accent);
  }
  .cou-note-preview p { margin: 0.4rem 0; }
  .cou-note-preview ul, .cou-note-preview ol { margin: 0.3rem 0 0.6rem 1.3rem; }
  .cou-note-preview a.auto-ref {
    background: rgba(201, 169, 97, 0.18);
    padding: 0.05rem 0.35rem;
    border-radius: var(--r-xs);
    border-bottom: 1px dashed var(--accent);
    cursor: pointer;
  }
  .cou-note-preview a.auto-ref:hover {
    background: rgba(201, 169, 97, 0.32);
    border-bottom-style: solid;
  }
  /* v504c — 함께 노트 toolbar 는 worship/daily 와 똑같은 .note-page-toolbar 패턴 사용.
     기존 .cou-note-toolbar / .cou-fmt-btn 박스 룰 제거. .cou-fmt-btn 은 selector 호환만
     유지 (JS 가 잡고 있어서) — 시각은 .note-page-tool / .tool-group 글로벌 룰이 담당. */
  .cou-hl-swatch {
    width: 12px; height: 12px; border-radius: 50%;
    display: inline-block;
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  }
  /* v501c — contenteditable 본문. .note-page-body + .editable-area 가 페이지 톤·폰트 상속 (worship/daily 와 통일).
     아래 보조 규칙: 최소 높이만 보장하고 나머지는 .editable-area 글로벌 룰을 따른다. */
  .cou-note-edit-zone .cou-note-body-input {
    min-height: 320px;
    margin-top: 0;
  }
  @media (max-width: 720px) {
    .cou-note-edit-zone .cou-note-body-input { min-height: 220px; }
  }
  /* 반응 + 댓글 — 함께 노트 */
  .cou-engage {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
  }
  .cou-react-row {
    display: flex; flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
    align-items: center;
  }
  .cou-react-btn {
    display: inline-flex; align-items: center;
    gap: 0.3rem;
    padding: 0.32rem 0.7rem;
    background: color-mix(in srgb, var(--surface) 65%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: var(--r-full);
    color: var(--text-dim);
    font-family: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    transition: all 0.2s var(--ease-standard);
  }
  .cou-react-btn svg {
    width: 16px; height: 16px;
    display: block;
    flex-shrink: 0;
    transition: stroke 0.2s var(--ease-standard), fill-opacity 0.2s var(--ease-standard);
  }
  .cou-react-btn:hover {
    border-color: var(--accent-dim);
    background: color-mix(in srgb, var(--surface-2) 80%, transparent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  }
  .cou-react-btn.mine {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 12%, transparent);
  }
  .cou-react-btn.mine svg { fill-opacity: 0.35; }
  .cou-react-btn .ct {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-weight: 500;
  }
  .cou-react-btn.mine .ct { color: var(--accent); }
  .cou-react-btn.add-react {
    color: var(--text-faint);
    font-size: 1.1rem;
    line-height: 1;
    padding: 0.3rem 0.65rem;
  }

  .cou-react-picker {
    display: inline-flex;
    gap: 0.2rem;
    padding: 0.35rem 0.5rem;
    background: color-mix(in srgb, var(--surface) 85%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-full);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
    animation: navJumpPop 0.16s cubic-bezier(0.2, 0.8, 0.3, 1);
  }
  .cou-react-pick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    padding: 0.3rem;
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background 0.1s, transform 0.1s, color 0.1s;
  }
  .cou-react-pick-btn svg { width: 19px; height: 19px; display: block; }
  .cou-react-pick-btn:hover { background: var(--surface); color: var(--accent); transform: scale(1.15); }

  @media (prefers-reduced-motion: reduce) {
    .cou-react-btn, .cou-react-btn svg, .cou-react-pick-btn {
      transition: none;
    }
    .cou-react-btn:hover { transform: none; }
    .cou-react-pick-btn:hover { transform: none; }
    .cou-react-picker { animation: none; }
  }

  .cou-comments-section { }
  .cou-comments-head {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--text-faint);
    margin-bottom: 0.55rem;
  }
  .cou-comments-head span {
    color: var(--accent);
    margin-left: 0.25rem;
  }
  .cou-comments-list {
    display: flex; flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
  }
  .cou-comment {
    background: color-mix(in srgb, var(--surface) 50%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius: var(--r-lg);
    padding: 0.65rem 0.85rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    line-height: 1.65;
    box-shadow: 0 4px 16px rgba(0,0,0,0.02);
    transition: all 0.2s ease;
  }
  .cou-comment:hover {
    border-color: color-mix(in srgb, var(--text) 15%, transparent);
    box-shadow: 0 6px 20px rgba(0,0,0,0.04);
  }
  .cou-comment.mine {
background: var(--surface);
    border-color: color-mix(in srgb, var(--accent) 30%, transparent);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 4%, transparent);
  }
  .cou-comment-meta {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-bottom: 0.35rem;
  }
  .cou-comment-by {
    color: var(--accent);
    font-weight: 600;
    font-family: 'Inter', sans-serif;
  }
  .cou-comment-time {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    opacity: 0.85;
  }
  .cou-comment-rm {
    width: 24px; height: 24px;
    background: transparent; border: 0;
    color: var(--text-faint);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 0;
    padding: 0;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
  }
  .cou-comment-rm svg {
    width: 12px;
    height: 12px;
    stroke-width: 1.8;
  }
  .cou-comment-rm:hover { color: #c95151; background: color-mix(in srgb, #c95151 10%, transparent); }
  .cou-comment-text { color: var(--text); word-break: keep-all; }
  .cou-comment-empty {
    font-size: var(--text-sm);
    color: var(--text-faint);
    font-style: italic;
    padding: 0.6rem 0;
    text-align: center;
    border: 1px dashed color-mix(in srgb, var(--text) 10%, transparent);
    border-radius: var(--r-lg);
  }
  .cou-comment-add {
    display: flex; gap: var(--space-2);
    align-items: center;
  }
  .cou-comment-add input {
    flex: 1;
    font-size: 0.88rem;
    border-radius: var(--r-md);
    padding: 0.45rem 0.75rem;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    border: 1px solid color-mix(in srgb, var(--text) 12%, transparent);
    color: var(--text);
    transition: all 0.2s;
  }
  .cou-comment-add input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
  }
  .cou-comment-add button {
    border-radius: var(--r-md);
    padding: 0.45rem 0.85rem;
    font-size: var(--text-sm);
    font-weight: 500;
  }

  /* v504c — .cou-note-status-row 룰 제거 (저장 상태는 worship-edit-head 안 .worship-save-status 로 이동) */

  /* 클래식 아날로그 북 스타일 디바이더 (✦ ✦ ✦) */
  .cou-divider-classic {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
    margin: 1.8rem auto;
    color: var(--accent-dim);
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-base);
    font-weight: 300;
    width: 60%;
  }
  .cou-divider-classic::before,
  .cou-divider-classic::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent) 50%, transparent);
  }

  /* v268 — 함께 노트 리스트: 다른 노트와 동일하게 .worship-card 및 gap 10px 정렬 통일 */
  .cou-notes-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .cou-note-row-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
  }
  .cou-note-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.02rem;
    color: var(--text);
    font-weight: 600;
    line-height: 1.35;
    flex: 1;
    min-width: 0;
    word-break: break-word;
  }
  .cou-note-title.empty {
    color: var(--text-faint);
    font-weight: 400;
    font-style: italic;
  }
  .cou-note-snippet {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    line-height: 1.6;
    margin-bottom: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .cou-note-snippet.empty {
    color: var(--text-faint);
    font-style: italic;
    opacity: 0.6;
  }
  .cou-note-markers {
    display: flex; gap: 0.3rem;
    flex-shrink: 0;
    align-items: center;
  }
  .cou-note-marker {
    display: inline-flex; align-items: center;
    color: var(--text-faint);
    line-height: 1;
  }
  .cou-note-marker svg {
    width: 14px; height: 14px;
  }
  .cou-note-marker sup {
    font-size: 0.6rem;
    margin-left: 0.1rem;
    color: var(--accent);
    font-weight: 600;
  }
  .cou-note-meta {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: 0.78rem;
    color: var(--text-faint);
    display: flex; gap: 0.4rem;
    align-items: center;
    letter-spacing: 0.012em;
  }
  .cou-note-edit-by {
    color: var(--accent);
    font-weight: 600;
  }
  .cou-local-draft-badge {
    color: #9a6b1f !important;
    border-color: color-mix(in srgb, #b9852a 42%, transparent) !important;
    background: color-mix(in srgb, #f7e2b6 46%, transparent);
  }
  .cou-card.has-local-draft {
    border-color: color-mix(in srgb, #b9852a 46%, var(--border));
  }
  .cou-card.has-local-draft::before {
    opacity: 0.95;
    background: color-mix(in srgb, #b9852a 70%, var(--accent) 30%);
  }

  /* v268 — 기도 제목 섹션 헤더 (기도 중 / 응답 받은) */
  .cou-prayer-section-head {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    color: color-mix(in srgb, var(--paper-meta, var(--text-dim)) 90%, transparent);
    padding: 0.55rem 0.25rem 0.4rem;
    display: flex; align-items: center; gap: 0.45rem;
  }
  .cou-prayer-section-head.answered-head {
    margin-top: 0.85rem;
    color: color-mix(in srgb, #4a7d5e 85%, transparent);
  }
  .cou-prayer-section-count {
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.05rem 0.4rem;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    letter-spacing: 0;
  }
  .cou-prayer-section-head.answered-head .cou-prayer-section-count {
    background: color-mix(in srgb, #4a7d5e 16%, transparent);
    color: #4a7d5e;
  }
  /* v268 — 기도 카드 글래스 통일 */
  .cou-prayer-row {
    display: flex; gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: var(--surface);
    -webkit-backdrop-filter: blur(12px) saturate(135%);
    backdrop-filter: blur(12px) saturate(135%);
    border: 1px solid color-mix(in srgb, #ffffff 30%, transparent);
    border-top-color: color-mix(in srgb, #ffffff 45%, transparent);
    border-radius: 9px;
    margin-bottom: 0.45rem;
    align-items: flex-start;
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, #ffffff 22%, transparent),
      0 1px 2px color-mix(in srgb, var(--paper-ink, #000) 5%, transparent);
  }
  .cou-prayer-row.answered {
    opacity: 0.72;
    border-left: 3px solid #4a7d5e;
    background: var(--surface);
  }
  .cou-prayer-check {
    margin-top: 0.05rem;
    width: 24px; height: 24px;
    border: 1.5px solid color-mix(in srgb, var(--paper-meta, var(--text-faint)) 35%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: transparent;
    transition: all 0.18s ease;
  }
  .cou-prayer-check svg { width: 14px; height: 14px; }
  .cou-prayer-check:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  }
  .cou-prayer-row.answered .cou-prayer-check {
    background: #5a9671;
    border-color: #4a7d5e;
    color: #ffffff;
  }
  .cou-prayer-body { flex: 1; min-width: 0; }
  .cou-prayer-text {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.94rem;
    line-height: 1.65;
    color: var(--text);
    word-break: keep-all;
    font-weight: 500;
  }
  .cou-prayer-row.answered .cou-prayer-text {
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, #4a7d5e 60%, transparent);
    color: var(--text-dim);
  }
  .cou-prayer-meta {
    font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
    font-size: 0.76rem;
    color: var(--text-dim);
    margin-top: 0.32rem;
    letter-spacing: 0.012em;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  }
  .cou-prayer-by { font-weight: 600; color: var(--text); }
  .cou-meta-dot { color: var(--text-faint); opacity: 0.8; }
  .cou-prayer-answered-tag {
    font-style: italic;
    color: #4a7d5e;
    font-weight: 600;
  }
  .cou-prayer-row .cou-prayer-del {
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    color: var(--text-faint);
    cursor: pointer; padding: 0;
    flex-shrink: 0;
    transition: all 0.15s ease;
  }
  .cou-prayer-row .cou-prayer-del svg { width: 14px; height: 14px; }
  .cou-prayer-row .cou-prayer-del:hover {
    background: color-mix(in srgb, #c47a6a 12%, transparent);
    border-color: color-mix(in srgb, #c47a6a 35%, transparent);
    color: #b35a48;
  }
  /* v506c — 기도 추가 UI 는 worship-list-head 안 input + worship-new-btn 으로 통일.
     .cou-add-prayer / .cou-prayer-add-btn 룰 제거. */

  /* 선물 보내기 미리보기 카드 */
  .cou-gift-preview {
    background: rgba(201,169,97,0.06);
    border: 1px solid var(--accent-dim);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
  }
  .cou-gift-preview .ref { font-family: 'Noto Serif KR', serif; color: var(--accent); font-weight: 600; margin-bottom: 0.5rem; }
  .cou-gift-preview .text { font-family: 'Noto Serif KR', serif; line-height: var(--lh-verse); color: var(--text); word-break: keep-all; }
  .cou-gift-count {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 0.12rem 0.45rem;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    vertical-align: middle;
  }
  .cou-gift-preview-list,
  .cou-gift-verses {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.65rem;
  }
  .cou-gift-preview-verse,
  .cou-gift-verse-item {
    padding: 0.58rem 0.66rem;
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
  }
  .cou-gift-preview-verse .vref,
  .cou-gift-verse-item .vref {
    display: block;
    margin-bottom: 0.28rem;
    color: var(--accent-dim);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
  }
  .cou-gift-preview-verse .text,
  .cou-gift-verse-item .cou-gift-text {
    margin: 0;
  }
  .cou-gift-verse-item { cursor: pointer; }
  .cou-gift-verse-item:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  }

  /* 태그 관리 모달 */
  #tag-mgr-modal .tag-mgr-panel {
    max-width: 580px;
  }
  .tag-mgr-list {
    padding: 0.5rem 0.8rem 1rem;
    max-height: 60vh;
    overflow-y: auto;
  }
  .tag-mgr-empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
    color: var(--text-faint);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.9rem;
  }
  .tag-mgr-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.4rem;
    border-bottom: 1px solid var(--border);
  }
  .tag-mgr-row .tag-chip { flex-shrink: 0; }
  .tag-mgr-count {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-faint);
    margin-right: auto;
  }
  .tag-mgr-act {
    padding: 0.32rem 0.6rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    cursor: pointer;
  }
  .tag-mgr-act:hover { background: var(--surface); border-color: var(--accent-dim); }
  .tag-mgr-act.danger { color: #ff7575; }
  .tag-mgr-act.danger:hover { background: rgba(220,60,60,0.12); border-color: rgba(220,60,60,0.4); }

  /* Quick Switcher (Cmd/Ctrl+K) */
  .qs-overlay {
    position: fixed; inset: 0;
    background:
      radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 26rem),
      rgba(5, 7, 13, 0.64);
    z-index: 99800;
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }
  .qs-overlay[hidden] { display: none; }
  .qs-panel {
    width: 580px;
    max-width: calc(100vw - 32px);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.52),
                0 0 0 1px rgba(255,255,255,0.035) inset;
    overflow: hidden;
    display: flex; flex-direction: column;
  }
  .qs-input {
    margin: 0.72rem;
    padding: 0.82rem 0.95rem;
    background: color-mix(in srgb, var(--bg) 44%, rgba(255,255,255,0.04));
    border: none;
    border: 1px solid color-mix(in srgb, var(--border) 76%, transparent);
    border-radius: 14px;
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 1rem;
    outline: none;
  }
  .qs-panel > #qs-input.qs-input {
    border-radius: 14px;
  }
  .qs-input:focus {
    border-color: color-mix(in srgb, var(--accent) 52%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
  }
  .qs-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 0 0.45rem 0.45rem;
  }
  .qs-item {
    width: 100%;
    padding: 0.62rem 0.72rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    border-left: 3px solid transparent;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-radius: 12px;
    display: flex; align-items: center; gap: 0.65rem;
  }
  .qs-item:hover, .qs-item:focus-visible, .qs-item.selected {
    background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
    border-left-color: var(--accent);
  }
  .qs-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 36%, transparent);
    outline-offset: -2px;
  }
  .qs-item-kind {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--accent);
    background: rgba(201,169,97,0.12);
    border-radius: 3px;
    padding: 0.15rem 0.4rem;
    flex-shrink: 0;
  }
  .qs-item-title {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    color: var(--text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    flex: 1;
  }
  .qs-item-sub {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    flex-shrink: 0;
  }
  .qs-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.9rem;
  }
  .qs-hint {
    padding: 0.58rem 1rem;
    background: color-mix(in srgb, var(--bg) 42%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    color: var(--text-faint);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    border-top: 1px solid var(--border);
  }

  /* 녹음 버튼 활성 상태 */
  .media-tool-btn.recording {
    background: rgba(220, 60, 60, 0.18);
    border-color: rgba(220, 60, 60, 0.6);
    color: #ff6b6b;
  }
  .media-tool-btn.recording svg { display: none; }
  .media-tool-btn.recording::before {
    content: "";
    display: inline-block;
    width: 9px; height: 9px;
    background: #ff5050;
    border-radius: 50%;
    margin-right: 0.3rem;
    animation: rec-pulse-dot 1.4s ease-in-out infinite;
  }

  /* AI 절 찾기 인라인 패널 */
  .ai-find-panel {
    margin-top: 0.5rem;
    padding: 0.8rem;
    background: var(--surface);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-sm);
  }
  .ai-find-panel[hidden] { display: none; }
  .ai-find-row {
    display: flex; gap: 0.4rem;
    margin-bottom: 0.55rem;
  }
  .ai-find-input {
    flex: 1;
    padding: 0.5rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.9rem;
  }
  .ai-find-input:focus { border-color: var(--accent-dim); outline: none; }
  .ai-find-go {
    padding: 0.5rem 0.95rem;
    background: var(--accent);
    color: var(--bg);
    border-radius: var(--r-sm);
    border: 0;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    font-weight: 500;
  }
  .ai-find-close {
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--text-faint);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .ai-find-close svg {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
  }
  .ai-find-close:hover,
  .ai-find-close:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--text-faint) 12%, transparent);
    outline: none;
  }
  .ai-find-results {
    display: flex; flex-direction: column; gap: 0.4rem;
    max-height: 320px;
    overflow-y: auto;
  }
  .ai-find-result {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%;
    padding: 0.55rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: inherit;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color 0.1s, background 0.1s;
  }
  .ai-find-result:hover,
  .ai-find-result:focus-visible { border-color: var(--accent-dim); background: var(--surface); }
  .ai-find-result:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent); outline-offset: 2px; }
  .ai-find-result .afr-ref {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    color: var(--accent);
    font-size: 0.88rem;
    flex-shrink: 0;
  }
  .ai-find-result .afr-text {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    flex: 1;
    line-height: var(--lh-normal);
    word-break: keep-all;
  }
  .ai-find-result .afr-add {
    flex-shrink: 0;
    color: var(--accent);
    font-size: var(--text-sm);
  }

  /* ================================
     데일리 노트 모달
     ================================ */
  .daily-modal-body {
    max-width: 880px;
    --daily-sidebar-width: clamp(300px, 24vw, 340px);
    --daily-editor-width: min(920px, calc(100% - clamp(1.5rem, 5vw, 4rem)));
  }
  .daily-nav {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
  }

  .daily-nav-btn {
    width: 32px; height: 32px;
    border-radius: var(--r-sm);
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.3rem;
    line-height: 1;
    transition: color 0.15s, border-color 0.15s;
  }
  .daily-nav-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
  .daily-date-input {
    padding: 0.4rem 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    color-scheme: dark;
  }
  .daily-today-btn {
    padding: 0.4rem 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-sm);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
  }
  .daily-today-btn:hover { background: var(--surface); }
  .daily-date-label {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    color: var(--text);
    margin-left: auto;
  }
  .daily-body {
    display: block; /* 단일 컬럼 — 본문 풀너비, 활동 등은 하단 탭으로 */
  }
  .daily-pane { display: flex; flex-direction: column; }
  .daily-workspace {
    padding: 0.85rem 1.1rem 0.65rem;
    border-bottom: 0;
    background: var(--paper-bg-1);
  }
  .daily-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.65rem;
  }
  .daily-overview-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    white-space: nowrap;
  }
  .daily-overview-chip strong {
    color: var(--accent);
    font-weight: 600;
  }
  .daily-entry-toolbar {
    display: flex;
    align-items: stretch;
    gap: 0.55rem;
    margin-bottom: 0.65rem;
  }
  .daily-entry-list {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    scrollbar-width: thin;
    flex: 1;
    padding-bottom: 0.1rem;
  }
  .daily-entry-card {
    min-width: 155px;
    max-width: 220px;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
  }
  .daily-entry-card:hover {
    border-color: var(--accent-dim);
    background: var(--surface-2);
  }
  .daily-entry-card.active {
    border-color: var(--accent);
    background: rgba(201,169,97,0.12);
  }
  .daily-entry-card-title {
    display: block;
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .daily-entry-card-meta {
    display: block;
    margin-top: 0.18rem;
    color: var(--text-faint);
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
  }
  .daily-new-entry {
    min-width: 86px;
    padding: 0.55rem 0.72rem;
    border-radius: var(--r-md);
    border: 1px solid var(--accent-dim);
    background: var(--surface-2);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    white-space: nowrap;
  }
  .daily-new-entry:hover { background: var(--surface); }
  .daily-template-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
  }
  .daily-template-btn {
    padding: 0.36rem 0.62rem;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
  }
  .daily-template-btn:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: var(--surface-2);
  }

  /* 하단 탭 (활동 / 담은 절 / 읽기 계획) */
  .daily-tabs {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    padding: 0 0.5rem;
  }
  .daily-tab {
    padding: 0.7rem 0.9rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.12s, border-color 0.12s;
  }
  .daily-tab:hover { color: var(--text); }
  .daily-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .daily-tab-count {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    background: var(--surface-2);
    padding: 0.05rem 0.45rem;
    border-radius: var(--r-sm);
    min-width: 1.2rem;
    text-align: center;
  }
  .daily-tab-count:empty { display: none; }
  .daily-tab.active .daily-tab-count {
    color: var(--accent);
    background: rgba(201, 169, 97, 0.15);
  }
  .daily-tab-body {
    max-height: 32vh;
    overflow-y: auto;
  }
  .daily-tab-pane { padding: 0.6rem 1rem; }
  .daily-tab-pane[hidden] { display: none; }
  /* 탭 안쪽 자식 컨테이너들의 외부 경계는 제거 (탭이 컨테이너 역할) */
  .daily-tab-pane .daily-plan { border: none; padding: 0; }
  .daily-tab-pane .daily-activity-list { padding: 0; max-height: none; }
  .daily-tab-pane .daily-linked-list { padding: 0; }
  .daily-pane-head {
    padding: 0.65rem 1.1rem 0.45rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .daily-editor-head {
    align-items: center;
    gap: var(--space-3);
  }
  .daily-editor-head > div {
    min-width: 0;
    flex: 1;
  }
  .daily-editor-kicker {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--text-faint);
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
  }
  .daily-entry-title {
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 1rem;
    padding: 0;
  }
  .daily-entry-title:focus { outline: none; color: var(--accent); }
  .daily-entry-title::placeholder { color: var(--text-faint); }
  .daily-entry-delete {
    padding: 0.32rem 0.52rem;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-faint);
    background: var(--surface);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-xs);
    flex-shrink: 0;
  }
  .daily-entry-delete:hover {
    color: #d98282;
    border-color: rgba(217,130,130,0.45);
  }
  .daily-act-count, .daily-linked-count {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    background: var(--surface-2);
    padding: 0.05rem 0.45rem;
    border-radius: var(--r-sm);
  }
  .daily-textarea {
    flex: 1;
    min-height: 360px;
    padding: 1.1rem;
    background: var(--paper-bg-1);
    border: 0;
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    line-height: var(--lh-verse);
    resize: vertical;
    word-break: keep-all;
  }
  .daily-textarea:focus { outline: none; background: var(--paper-bg-1); }
  .daily-status {
    padding: 0.4rem 1.1rem;
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-family: 'Inter', sans-serif;
    border-top: 1px solid var(--border);
  }
  .daily-activity-pane { background: var(--surface); }
  .daily-activity-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 0;
    max-height: 60vh;
  }
  .daily-act-item {
    display: flex; align-items: baseline; gap: 0.55rem;
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 0.1s, border-color 0.1s;
  }
  .daily-act-item:hover,
  .daily-act-item:focus-visible { background: var(--surface-2); border-left-color: var(--accent-dim); }
  .daily-act-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 2px;
  }
  .daily-act-item .act-time {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    flex-shrink: 0;
    min-width: 42px;
  }
  .daily-act-item .act-icon {
    font-size: var(--text-sm);
    flex-shrink: 0;
  }
  .daily-act-item .act-label {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text);
    flex: 1;
    word-break: keep-all;
    line-height: 1.4;
  }
  .daily-act-empty {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
  }

  .daily-plan {
    border-top: 1px solid var(--border);
    padding: 0.7rem 1.25rem 0.85rem;
  }
  .daily-plan:empty,
  .daily-plan.hidden { display: none; }
  .daily-plan-head {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin-bottom: 0.5rem;
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .daily-plan-status {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    background: var(--surface-2);
    padding: 0.05rem 0.45rem;
    border-radius: var(--r-sm);
  }
  .daily-plan-list {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
  }
  .plan-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    appearance: none;
    -webkit-appearance: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text);
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
  }
  .plan-chip:hover { border-color: var(--accent-dim); background: var(--surface-2); }
  .plan-chip.completed {
    background: var(--surface-2);
    color: var(--text-dim);
    text-decoration: line-through;
    text-decoration-color: var(--accent);
  }
  .plan-chip .check {
    width: 14px; height: 14px;
    border: 1.5px solid var(--text-faint);
    border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--text-xs);
    line-height: 1;
    flex-shrink: 0;
  }
  .plan-chip.completed .check {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
  }
  .daily-plan-empty {
    color: var(--text-faint);
    font-style: italic;
    font-size: 0.78rem;
    font-family: 'Noto Serif KR', serif;
  }

  .daily-linked {
    border-top: 1px solid var(--border);
    padding: 0.7rem 1.25rem 1rem;
    max-height: 28vh;
    overflow-y: auto;
  }
  .daily-linked-head {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-bottom: 0.45rem;
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .daily-linked-list { display: flex; flex-direction: column; gap: 0.35rem; }
  .daily-linked-list:empty + .daily-linked-empty,
  .daily-linked-empty {
    color: var(--text-faint);
    font-style: italic;
    font-size: 0.78rem;
    font-family: 'Noto Serif KR', serif;
  }
  .daily-linked-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 0.45rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
  }
  .daily-linked-item:hover { border-color: var(--accent-dim); background: var(--surface-2); }
  .daily-linked-item .ref {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--accent);
    flex-shrink: 0;
  }
  .daily-linked-item .preview {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .daily-linked-item .rm {
    width: 22px; height: 22px;
    border-radius: var(--r-xs);
    color: var(--text-faint);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
  }
  .daily-linked-item .rm svg {
    width: 13px; height: 13px; stroke-width: 1.8;
  }
  .daily-linked-item .rm:hover { color: var(--accent); background: var(--bg); }
  @media (max-width: 720px) {
    .daily-body { grid-template-columns: 1fr; }
    .daily-pane + .daily-pane { border-left: 0; border-top: 1px solid var(--border); }
    .daily-textarea { min-height: 200px; }
    .daily-date-label { width: 100%; margin-left: 0; font-size: var(--text-sm); }
    .daily-workspace { padding: 0.75rem 0.85rem 0.6rem; }
    .daily-entry-toolbar { flex-direction: column; }
    .daily-new-entry { width: 100%; }
    .daily-entry-card { min-width: 138px; }
    .daily-editor-head { align-items: flex-start; }
  }

  /* ================================
     데일리 / 예배 노트 전체화면 작업공간
     ================================ */
  .note-workspace-overlay {
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  [data-theme="sepia"] .note-workspace-overlay,
  [data-theme="light"] .note-workspace-overlay {
    background: var(--bg);
  }
  .note-workspace-modal {
    max-width: none;
    width: 100vw;
    height: 100dvh;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: none;
  }
  .note-workspace-modal .modal-head {
    position: sticky;
    top: 0;
    z-index: 12;
    flex: 0 0 auto;
    background: var(--surface);
    /* v180 — h2 default margin 제거 + 컴팩트 패딩, head 빈 공간 fix */
    padding: max(0.55rem, env(safe-area-inset-top)) clamp(1rem, 2.6vw, 2.25rem) 0.55rem;
    min-height: 48px;
  }
  .note-workspace-modal .modal-head h2 {
    margin: 0;
    line-height: 1.25;
    color: var(--paper-ink, #000);
    font-weight: 700;
  }
  .daily-modal-body,
  .worship-modal-body {
    display: flex;
    flex-direction: column;
    background: var(--paper-bg-1);
  }
  .daily-modal-body .daily-nav,
  .daily-modal-body .daily-workspace,
  .daily-modal-body .daily-tabs,
  .daily-modal-body .daily-tab-body {
    flex: 0 0 auto;
  }
  .daily-modal-body .daily-nav {
    padding-left: clamp(1rem, 2.6vw, 2.25rem);
    padding-right: clamp(1rem, 2.6vw, 2.25rem);
  }
  .daily-modal-body .daily-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .daily-modal-body .daily-text-pane {
    min-height: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: var(--daily-sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto auto auto minmax(0, 1fr) auto auto auto auto;
    gap: 0.65rem 1rem;
    padding: 1rem clamp(1rem, 2.6vw, 2.25rem);
    box-sizing: border-box;
    overflow: hidden;
  }
  .daily-modal-body .daily-workspace,
  .daily-modal-body .daily-pane-head,
  .daily-modal-body .media-toolbar,
  .daily-modal-body .attach-gallery,
  .daily-modal-body .yt-embed-section,
  .daily-modal-body .worship-preview-toggle,
  .daily-modal-body .daily-status {
    margin-left: 0;
    margin-right: 0;
  }
  .daily-modal-body .daily-workspace {
    grid-column: 1;
    grid-row: 1 / 9;
    align-self: stretch;
    min-height: 0;
    overflow-y: auto;
  }
  .daily-modal-body .daily-workspace {
    border: 0;
    border-radius: 0;
    margin-top: 0;
    padding: 0.9rem 1rem 0.75rem;
  }
  .daily-modal-body .daily-pane-head {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0.85rem;
    padding-left: 0;
    padding-right: 0;
  }
  .daily-modal-body #daily-tag-chips {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
  }
  .daily-modal-body .media-toolbar[data-target="daily"] {
    grid-column: 2;
    grid-row: 3;
  }
  .daily-modal-body .daily-textarea {
    grid-column: 2;
    grid-row: 4;
    min-height: 0;
    height: 100%;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--surface);
    resize: none;
    overflow-y: auto;
  }
  .daily-modal-body .daily-textarea:focus {
    background: var(--surface);
    border-color: var(--accent-dim);
  }
  .daily-modal-body #daily-attach-gallery {
    grid-column: 2;
    grid-row: 5;
  }
  .daily-modal-body .daily-share-row {
    grid-column: 2;
    grid-row: 6;
    margin-top: 0;
  }
  .daily-modal-body #daily-yt-section {
    grid-column: 2;
    grid-row: 7;
  }
  .daily-modal-body #daily-preview-toggle,
  .daily-modal-body #daily-status {
    grid-column: 2;
  }
  .daily-modal-body .daily-tab-body {
    max-height: min(28vh, 280px);
    overflow-y: auto;
  }
  @media (min-width: 721px) {
    .daily-modal-body {
      display: grid;
      grid-template-columns: var(--daily-sidebar-width) minmax(0, 1fr);
      grid-template-rows: auto auto auto auto minmax(0, 1fr) auto auto auto auto;
      background:
        linear-gradient(90deg,
          var(--surface) 0 var(--daily-sidebar-width),
          var(--bg) var(--daily-sidebar-width) 100%);
    }
    .daily-modal-body .modal-head {
      grid-column: 1 / -1;
      grid-row: 1;
    }
    .daily-modal-body .daily-body,
    .daily-modal-body .daily-text-pane {
      display: contents;
    }
    .daily-modal-body .daily-nav {
      grid-column: 1;
      grid-row: 2;
      background: var(--surface);
      border-right: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      align-content: flex-start;
      gap: 0.35rem;
      flex-wrap: nowrap;
      padding: 0.55rem 0.75rem;
    }
    .daily-modal-body #daily-cal {
      width: 34px;
      padding-left: 0;
      padding-right: 0;
      justify-content: center;
      font-size: 0;
    }
    .daily-modal-body .daily-date-input {
      width: 120px;
      flex: 0 0 120px;
      padding-left: 0.5rem;
      padding-right: 0.5rem;
      font-size: var(--text-sm);
    }
    .daily-modal-body .daily-today-btn {
      flex-shrink: 0;
      padding-left: 0.65rem;
      padding-right: 0.65rem;
    }
    .daily-modal-body .daily-date-label {
      display: none;
    }
    .daily-modal-body .daily-workspace {
      grid-column: 1;
      grid-row: 3 / 7;
      margin-left: 0;
      margin-right: 0;
      min-height: 0;
      border: 0;
      border-right: 1px solid var(--border);
      border-radius: 0;
      background: var(--surface);
      padding: 1rem 0.95rem 0.8rem;
    }
    .daily-modal-body .daily-tabs {
      grid-column: 1;
      grid-row: 7;
      background: var(--surface);
      border-right: 1px solid var(--border);
      overflow-x: auto;
      padding: 0 0.75rem;
    }
    .daily-modal-body .daily-tab {
      padding: 0.65rem 0.55rem;
      font-size: 0.78rem;
      white-space: nowrap;
    }
    .daily-modal-body .daily-tab-body {
      grid-column: 1;
      grid-row: 8 / 10;
      max-height: none;
      min-height: 0;
      overflow-y: auto;
      border-right: 1px solid var(--border);
      background: var(--surface);
    }
    .daily-modal-body .daily-pane-head {
      grid-column: 2;
      grid-row: 2;
      margin-top: 0;
      padding: 0.75rem clamp(1rem, 2.6vw, 2.25rem) 0.55rem;
      border-bottom: 0;
    }
    .daily-modal-body #daily-tag-chips {
      grid-column: 2;
      grid-row: 3;
    }
    .daily-modal-body .media-toolbar[data-target="daily"] {
      grid-column: 2;
      grid-row: 4;
    }
    .daily-modal-body .daily-textarea {
      grid-column: 2;
      grid-row: 5;
    }
    .daily-modal-body #daily-attach-gallery {
      grid-column: 2;
      grid-row: 6;
    }
    .daily-modal-body .daily-share-row {
      grid-column: 2;
      grid-row: 7;
    }
    .daily-modal-body #daily-yt-section {
      grid-column: 2;
      grid-row: 8;
    }
    .daily-modal-body #daily-preview-toggle,
    .daily-modal-body #daily-status {
      grid-column: 2;
      grid-row: 9;
    }
    .daily-modal-body .daily-pane-head,
    .daily-modal-body #daily-tag-chips,
    .daily-modal-body .media-toolbar[data-target="daily"],
    .daily-modal-body .daily-textarea,
    .daily-modal-body #daily-attach-gallery,
    .daily-modal-body .daily-share-row,
    .daily-modal-body #daily-yt-section,
    .daily-modal-body #daily-preview-toggle,
    .daily-modal-body #daily-status {
      width: var(--daily-editor-width);
      box-sizing: border-box;
      margin-left: auto;
      margin-right: auto;
    }
    .daily-modal-body .media-toolbar[data-target="daily"] {
      border-radius: var(--r-md);
      background: var(--surface);
    }
    .daily-modal-body .daily-textarea {
      border-radius: var(--r-md);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
    }
  }
  .worship-modal-body .worship-pane {
    flex: 1;
    min-height: 0;
  }
  #worship-list-pane {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #worship-edit-pane {
    overflow: hidden;
  }
  #worship-edit-pane:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    min-height: 0;
  }
  #worship-edit-pane .worship-edit-head {
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: 8;
    background: var(--bg);
  }
  #worship-edit-pane .worship-meta {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border);
    border-bottom: 0;
  }
  #worship-edit-pane #w-backlinks {
    grid-column: 1;
    grid-row: 4;
    min-height: 0;
    overflow-y: auto;
    border-right: 1px solid var(--border);
  }
  #worship-edit-pane .worship-body-section {
    grid-column: 2;
    grid-row: 2 / 5;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1.05rem clamp(1rem, 3vw, 2.4rem) 2rem;
  }
  #worship-edit-pane #w-body {
    min-height: clamp(520px, 64vh, 960px);
    border-radius: 0;
    background: var(--paper-bg-1);
    resize: none;
    border: 1px solid transparent;
  }
  @media (max-width: 720px) {
    .note-workspace-overlay {
      padding: 0;
    }
    .note-workspace-modal {
      width: 100vw;
      height: 100dvh;
      min-height: 100dvh;
      border-radius: 0;
    }
    .note-workspace-modal .modal-head {
      min-height: 54px;
      padding: calc(0.62rem + env(safe-area-inset-top)) 0.8rem 0.62rem;
    }
    .daily-modal-body .daily-nav {
      padding: 0.6rem 0.75rem;
      gap: 0.35rem;
    }
    .daily-modal-body .daily-body {
      overflow-y: auto;
      background: var(--paper-bg-1);
    }
    .daily-modal-body .daily-text-pane {
      display: flex;
      flex-direction: column;
      height: auto;
      min-height: 0;
      overflow: visible;
      padding: 0;
      gap: 0;
    }
    .daily-modal-body .daily-workspace,
    .daily-modal-body .daily-pane-head,
    .daily-modal-body .media-toolbar,
    .daily-modal-body .attach-gallery,
    .daily-modal-body .yt-embed-section,
    .daily-modal-body .worship-preview-toggle,
    .daily-modal-body .daily-status {
      margin-left: 0.75rem;
      margin-right: 0.75rem;
    }
    .daily-modal-body .daily-workspace {
      grid-column: auto;
      grid-row: auto;
      order: 8;
      margin-top: 0.75rem;
      padding: 0.75rem 0.8rem 0.65rem;
    }
    .daily-modal-body .daily-pane-head,
    .daily-modal-body #daily-tag-chips,
    .daily-modal-body .media-toolbar[data-target="daily"],
    .daily-modal-body #daily-attach-gallery,
    .daily-modal-body .daily-share-row,
    .daily-modal-body #daily-yt-section,
    .daily-modal-body #daily-preview-toggle,
    .daily-modal-body #daily-status {
      grid-column: auto;
      grid-row: auto;
    }
    .daily-modal-body .daily-pane-head {
      order: 1;
      margin-top: 0.75rem;
    }
    .daily-modal-body #daily-tag-chips {
      order: 2;
    }
    .daily-modal-body .media-toolbar[data-target="daily"] {
      order: 3;
    }
    .daily-modal-body .daily-textarea {
      order: 4;
    }
    .daily-modal-body #daily-attach-gallery,
    .daily-modal-body .daily-share-row,
    .daily-modal-body #daily-yt-section,
    .daily-modal-body #daily-preview-toggle,
    .daily-modal-body #daily-status {
      order: 5;
    }
    .daily-modal-body .daily-entry-toolbar {
      flex-direction: column;
    }
    .daily-modal-body .daily-textarea {
      min-height: clamp(360px, 58vh, 720px);
      margin: 0 0.75rem;
    }
    .daily-modal-body .daily-tab-body {
      max-height: 24vh;
    }
    #worship-edit-pane:not([hidden]) {
      display: flex;
      flex-direction: column;
      overflow-y: auto;
    }
    #worship-edit-pane .worship-edit-head {
      position: sticky;
      top: 0;
      flex: 0 0 auto;
    }
    #worship-edit-pane .worship-meta,
    #worship-edit-pane #w-backlinks {
      border-right: 0;
      overflow: visible;
      flex: 0 0 auto;
    }
    #worship-edit-pane .worship-body-section {
      overflow: visible;
      padding: 0.25rem 0.5rem 0.5rem;
      flex: 1 0 auto;
    }
    #worship-edit-pane #w-body {
      min-height: 80px;
      resize: none;
    }
  }

  /* ================================
     내 서가 (Library) 모달
     ================================ */
  .library-tabs {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 0.5rem;
  }
  .library-tab {
    padding: 0.85rem 0.85rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: color 0.15s, border-color 0.15s;
  }
  .library-tab:hover,
  .library-tab:focus-visible { color: var(--text); }
  .library-tab:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: -3px;
  }
  .library-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
  .library-tab .count {
    background: var(--surface-2);
    color: var(--text-faint);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    padding: 0.05rem 0.4rem;
    border-radius: var(--r-sm);
  }
  .library-body { max-height: min(72vh, 760px); overflow-y: auto; }
  .library-panel { display: none; padding: 1rem 1.25rem 1.25rem; }
  .library-panel.active { display: block; }

  /* v370c+ — 버전 badge (사용자 화면 확인 channel) */
  .app-version-pill {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--paper-meta);
    background: color-mix(in srgb, var(--paper-ink) 8%, var(--paper-bg-2));
    padding: 2px 7px;
    border-radius: var(--r-xs);
    margin-left: auto;
    margin-right: 0.6rem;
    cursor: pointer;
    user-select: none;
    letter-spacing: var(--ls-wide);
    transition: background 0.15s, color 0.15s;
  }
  .app-version-pill:hover {
    background: color-mix(in srgb, var(--paper-ink) 16%, var(--paper-bg-2));
    color: var(--paper-ink);
  }
  .library-list { display: flex; flex-direction: column; gap: 0.4rem; }
  .journal-home {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
  }
  .journal-hero {
    padding: 1rem 1.05rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
  }
  .journal-hero-ref {
    font-family: 'Noto Serif KR', serif;
    color: var(--accent);
    font-size: 0.86rem;
    margin-bottom: 0.35rem;
  }
  .journal-hero-verse {
    font-family: 'Noto Serif KR', serif;
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.75;
    word-break: keep-all;
  }
  .journal-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .journal-stat {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    padding: 0.75rem 0.7rem;
  }
  .journal-stat .num {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1;
    color: var(--text);
  }
  .journal-stat .label {
    display: block;
    margin-top: 0.25rem;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
  }
  .journal-presentation-types {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    min-height: 0;
  }
  .journal-presentation-chip {
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-dim);
    padding: 0.28rem 0.55rem;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-xs);
    line-height: 1.25;
  }
  .journal-presentation-chip strong {
    color: var(--accent);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    margin-left: 0.22rem;
  }
  .journal-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
  }
  .journal-action {
    min-height: 44px;
    padding: 0.6rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .journal-action:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: var(--surface-2);
  }
  .journal-action svg {
    width: 15px;
    height: 15px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
  }
  .journal-tag-board {
    padding: 0.78rem 0.82rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    background: color-mix(in srgb, var(--surface) 88%, var(--accent) 12%);
  }
  .journal-tag-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: 0.58rem;
  }
  .journal-tag-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.35;
  }
  .journal-tag-sub {
    margin-top: 0.12rem;
    font-family: 'Inter', 'Noto Serif KR', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
  }
  .journal-tag-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
  }
  .journal-tag-clear {
    min-height: 30px;
    padding: 0.28rem 0.58rem;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-xs);
  }
  .journal-tag-clear:hover {
    color: var(--accent);
    border-color: var(--accent-dim);
  }
  .journal-tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.38rem;
  }
  .journal-tag-chip {
    min-height: 30px;
    padding: 0.26rem 0.58rem;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
  }
  .journal-tag-chip .ct {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    color: var(--text-faint);
  }
  .journal-tag-chip:hover,
  .journal-tag-chip:focus-visible,
  .journal-tag-chip.active {
    color: var(--accent);
    border-color: var(--accent-dim);
    background: var(--surface-2);
  }
  .journal-tag-chip:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 2px;
  }
  .journal-tag-empty {
    font-family: 'Noto Serif KR', serif;
    color: var(--text-faint);
    font-size: 0.78rem;
    line-height: 1.55;
  }
  .journal-search-row {
    display: flex;
    gap: 0.55rem;
    align-items: center;
  }
  .journal-search {
    flex: 1;
    min-width: 0;
    height: 38px;
    padding: 0 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.86rem;
  }
  .journal-search:focus { outline: none; border-color: var(--accent-dim); }
  .journal-filter {
    display: flex;
    gap: 0.35rem;
    overflow-x: auto;
    padding-bottom: 0.1rem;
  }
  .journal-filter-btn {
    flex-shrink: 0;
    min-height: 40px;
    padding: 0.45rem 0.78rem;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: transparent;
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
  }
  .journal-filter-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 2px;
  }
  .journal-filter-btn.active {
    color: var(--bg);
    background: var(--accent);
    border-color: var(--accent);
  }
  .journal-list {
    display: flex;
    flex-direction: column;
    gap: 0.48rem;
  }
  .journal-row {
    display: grid;
    grid-template-columns: 5px minmax(0, 1fr);
    gap: 0.8rem;
    padding: 0.82rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.15s;
  }
  .journal-row:hover,
  .journal-row:focus-visible {
    border-color: var(--accent-dim);
    background: var(--surface-2);
  }
  .journal-row:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 3px;
  }
  .journal-row:active { transform: scale(0.995); }
  .journal-row-bar {
    border-radius: var(--r-xs);
    background: var(--accent);
  }
  .journal-row[data-type="daily"] .journal-row-bar { background: #7eb695; }
  .journal-row[data-type="worship"] .journal-row-bar { background: #c9a961; }
  .journal-row[data-type="highlight"] .journal-row-bar { background: #7e9eb6; }
  .journal-type {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }
  .journal-title {
    margin-top: 0.12rem;
    font-family: 'Noto Serif KR', serif;
    color: var(--text);
    font-size: var(--text-base);
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .journal-snippet {
    margin-top: 0.22rem;
    font-family: 'Noto Serif KR', serif;
    color: var(--text-dim);
    font-size: var(--text-sm);
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .journal-meta {
    margin-top: 0.35rem;
    font-family: 'Inter', sans-serif;
    color: var(--text-faint);
    font-size: var(--text-xs);
  }
  .journal-empty {
    padding: 2.2rem 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    text-align: center;
    font-family: 'Noto Serif KR', serif;
    color: var(--text-faint);
    line-height: var(--lh-loose);
  }
  .lib-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-family: 'Noto Serif KR', serif;
  }
  @media (max-width: 720px) {
    .library-tabs { overflow-x: auto; }
    .library-tab { flex-shrink: 0; padding: 0.8rem 0.7rem; }
    .library-body { max-height: calc(100dvh - 150px); }
    .journal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .journal-actions { grid-template-columns: 1fr; }
    .journal-tag-head { align-items: flex-start; }
    .journal-tag-actions { flex-wrap: wrap; justify-content: flex-end; }
    .journal-search-row { flex-direction: column; align-items: stretch; }
    .journal-filter { width: 100%; }
  }
  .lib-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
  }
  .lib-item:hover,
  .lib-item:focus-visible { border-color: var(--accent-dim); background: var(--surface-2); }
  .lib-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 3px;
  }
  .lib-item .lib-main { flex: 1; min-width: 0; }
  .lib-item .lib-ref {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    color: var(--text);
    font-size: var(--text-base);
  }
  .lib-item .lib-ref-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-left: 0.4rem;
  }
  .lib-item .lib-snippet {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    line-height: var(--lh-normal);
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .lib-item .lib-meta {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    flex-shrink: 0;
  }
  .lib-item .lib-remove {
    width: 26px; height: 26px;
    border-radius: var(--r-sm);
    border: 0;
    background: transparent;
    color: var(--text-faint);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0;
    line-height: 0;
    transition: color 0.15s, background 0.15s;
  }
  .lib-item .lib-remove svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.8;
  }
  .lib-item .lib-remove:hover { color: var(--accent); background: var(--bg); }
  .lib-hl-bar {
    width: 4px;
    align-self: stretch;
    border-radius: 2px;
    flex-shrink: 0;
  }
  .lib-hl-bar.yellow { background: #f1c40f; }
  .lib-hl-bar.green  { background: #2ecc71; }
  .lib-hl-bar.blue   { background: #3498db; }
  .lib-hl-bar.pink   { background: #e74c3c; }
  .lib-hl-bar.note   { background: var(--accent); }

  .modal-back {
    padding: 0.85rem 1.25rem;
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    display: flex; align-items: center; gap: var(--space-2);
    text-align: left;
    cursor: pointer;
  }
  .modal-back-icon {
    width: 15px;
    height: 15px;
    stroke-width: 1.8;
    flex: 0 0 auto;
  }
  .modal-back:hover { color: var(--text); }

  /* ================================
     사이드 패널 / Side panel (Notes / Original / Refs)
     ================================ */
  .side-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 100%; max-width: 460px;
    background: var(--bg);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow);
    z-index: 90;
    transform: translateX(100%);
    transition: transform 0.3s var(--ease-standard);
    display: flex; flex-direction: column;
  }
  .side-panel.open { transform: translateX(0); }
  .side-grip { display: none; }    /* 데스크톱에선 숨김 */
  .side-head {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: var(--space-3);
  }
  .side-head .ref {
    font-family: 'Noto Serif KR', serif;
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--accent);
    line-height: var(--lh-tight);
  }
  .side-head .ref-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--text-dim);
    display: block;
    font-weight: 400;
    margin-top: 0.15rem;
  }

  /* 탭 / Tabs */
  .tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    padding: 0 0.75rem;
  }
  .tab-btn {
    padding: 0.7rem 0.9rem;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 0.35rem;
  }
  .tab-btn:hover,
  .tab-btn:focus-visible { color: var(--text); }
  .tab-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: -2px;
  }
  .tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
  }
  .tab-btn .count {
    background: var(--surface-2);
    color: var(--text-faint);
    padding: 0 0.4rem;
    border-radius: var(--r-md);
    font-size: var(--text-xs);
    font-family: 'Inter', sans-serif;
    font-weight: 500;
  }
  .tab-btn.active .count {
    background: var(--accent-dim);
    color: var(--bg);
  }

  .side-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.25rem 2rem; }
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  /* 노트 패널 본문 / Notes panel content */
  .notes-verse {
    padding: 0.85rem 1rem;
    background: var(--surface);
    border-radius: var(--r-md);
    margin-bottom: 1rem;
    font-size: 0.9rem;
  }
  .notes-verse .ko { font-family: 'Noto Serif KR', serif; line-height: 1.75; word-break: keep-all; }
  .notes-verse .en {
    font-family: 'Cormorant Garamond', serif;
    line-height: 1.65;
    color: var(--text-dim);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
  }

  .hl-picker {
    display: flex; gap: var(--space-2); margin-bottom: 1rem; align-items: center;
  }
  .hl-picker .label { font-size: var(--text-sm); color: var(--text-dim); margin-right: 0.5rem; }
  .hl-picker button {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    transition: transform 0.15s, border-color 0.15s;
  }
  .hl-picker button[data-color="yellow"] { background: var(--hl-yellow); }
  .hl-picker button[data-color="green"] { background: var(--hl-green); }
  .hl-picker button[data-color="blue"] { background: var(--hl-blue); }
  .hl-picker button[data-color="pink"] { background: var(--hl-pink); }
  .hl-picker button:hover,
  .hl-picker button:focus-visible { transform: scale(1.15); }
  .hl-picker button:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 3px;
  }
  .hl-picker button.selected { border-color: var(--text); }
  .hl-picker .hl-clear {
    width: auto; padding: 0 0.6rem; height: 24px;
    border-radius: var(--r-lg); font-size: 0.75rem;
    color: var(--text-dim);
  }

  .note-textarea {
    width: 100%;
    min-height: 180px;
    padding: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    line-height: var(--lh-loose);
    resize: vertical;
  }
  .note-textarea:focus { border-color: var(--accent-dim); }
  .note-status { font-size: 0.75rem; color: var(--text-faint); }

  /* v240 — 이 절을 인용한 과거 노트 히스토리 (사이드 패널 notes 탭) */
  .cited-history-section {
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
  }
  .cited-history-head {
    display: flex; align-items: center; gap: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }
  .cited-history-head svg {
    width: 14px;
    height: 14px;
    opacity: 0.75;
    flex: 0 0 auto;
  }
  .cited-history-count {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--text-faint);
    background: var(--surface-2);
    padding: 0.05rem 0.45rem;
    border-radius: var(--r-full);
  }
  .cited-history-list { display: flex; flex-direction: column; gap: 0.4rem; }
  .cited-history-card {
    display: flex; flex-direction: column; gap: 0.2rem;
    padding: 0.5rem 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 2.5px solid var(--accent-dim);
    border-radius: var(--r-sm);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
  }
  .cited-history-card:hover {
    background: var(--surface-2);
    border-left-color: var(--accent);
  }
  .cited-history-card .card-head {
    display: flex; align-items: baseline; gap: 0.4rem;
  }
  .cited-history-card .kind-pill {
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--accent);
    flex: 0 0 auto;
  }
  .cited-history-card .card-title {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }
  .cited-history-card .card-date {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    color: var(--text-faint);
    flex: 0 0 auto;
  }
  .cited-history-card .card-snippet {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-style: italic;
  }
  .cited-history-empty {
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-style: italic;
    padding: 0.3rem 0;
  }

  /* 노트 안에 언급된 절 — 클릭 가능한 칩 */
  .ref-chips-section {
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--border);
  }
  .ref-chips-head {
    font-size: 0.78rem;
    color: var(--text-faint);
    margin-bottom: 0.45rem;
    letter-spacing: var(--ls-wide);
  }
  .ref-chips-list {
    display: flex; flex-wrap: wrap;
    gap: 0.35rem;
  }
  .ref-chip-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    padding: 0.28rem 0.65rem;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--accent);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
  }
  .ref-chip-btn:hover {
    background: var(--surface-2);
    border-color: var(--accent-dim);
  }

  /* === drawer 날짜 액션 (v149) — 오늘·달력 아이콘만 + 라벨 === */
  .drawer-date-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    align-items: center;
  }
  .drawer-date-iconbtn {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-dim);
    width: 30px; height: 30px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
    padding: 0;
  }
  .drawer-date-iconbtn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--accent-dim);
  }
  .drawer-date-iconbtn svg { width: 16px; height: 16px; }
  .drawer-date-actions .daily-date-label {
    margin-left: auto;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--text-dim);
    font-size: var(--text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* === 데일리 view 탭 (v149) — toolbar 안 inline segment === */
  .note-page-toolbar > .daily-view-tabs {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    margin: 0;
    background: rgba(0,0,0,0.05);
    border-radius: var(--r-md);
    flex: 0 0 auto;
  }
  [data-paper-tone="ink"] .note-page-toolbar > .daily-view-tabs { background: rgba(255,255,255,0.06); }
  .daily-view-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--paper-meta);
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.01em;
    height: 22px;
    padding: 0 0.65rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.14s, color 0.14s, box-shadow 0.14s;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    line-height: 1;
    box-sizing: border-box;
  }
  .daily-view-tab > svg { width: 12px; height: 12px; flex: 0 0 auto; }
  .daily-view-tab:hover { color: var(--paper-ink); }
  .daily-view-tab.active {
    background: var(--paper-bg-2, #fff);
    color: var(--paper-ink);
  }
  [data-paper-tone="ink"] .daily-view-tab.active { background: rgba(255,255,255,0.15); }
  .daily-view-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 7px;
    background: var(--accent, #c9a961);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 600;
    line-height: 1;
    flex: 0 0 auto;
  }
  .daily-view-tab:not(.has-clips) .daily-view-tab-badge { display: none; }
  /* view 토글 — column[data-view="clips"]에서 toolbar는 유지 (탭은 살아있어야 됨),
     media-toolbar/divider/spacer/tone-picker만 숨김 + scroll/status 숨김 */
  .note-page-column[data-view="clips"] .note-page-toolbar > .toolbar-divider,
  .note-page-column[data-view="clips"] .note-page-toolbar > .media-toolbar,
  .note-page-column[data-view="clips"] .note-page-toolbar > .toolbar-spacer,
  .note-page-column[data-view="clips"] .note-page-toolbar > .note-tone-picker,
  .note-page-column[data-view="clips"] .note-page-scroll,
  .note-page-column[data-view="clips"] .note-status-bar {
    display: none;
  }
  .note-page-column[data-view="note"] .daily-clips-gallery,
  .note-page-column[data-view="list"] .daily-clips-gallery {
    display: none;
  }

  /* === list view (v159) — 모달 진입 화면 = 노트 리스트 (예배 노트 패턴) === */
  .daily-list-view {
    display: none;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px clamp(14px, 3vw, 28px) 32px;
    flex-direction: column;
    gap: 8px;
    background: var(--bg);
    -webkit-overflow-scrolling: touch;
  }
  .note-page-column[data-view="list"] .daily-list-view { display: flex; }
  .note-page-column[data-view="list"] .note-page-toolbar,
  .note-page-column[data-view="list"] .note-page-scroll,
  .note-page-column[data-view="list"] .note-status-bar {
    display: none;
  }
  #daily-modal[data-modal-view="list"] .daily-page-area,
  #daily-modal[data-modal-view="list"] .note-page-column {
    padding: 0;
    background: var(--bg);
  }
  /* ← 목록 back button — 본문/clips view에서만 보임 */
  .daily-list-back-btn { display: none !important; }
  #daily-modal[data-modal-view="note"] .daily-list-back-btn,
  #daily-modal[data-modal-view="clips"] .daily-list-back-btn {
    display: inline-flex !important;
  }

  /* === drawer = 카테고리 nav (v160, 삼성노트 패턴) === */
  .daily-drawer { padding: 14px 8px !important; gap: 0 !important; }
  .daily-category-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
  }
  .cat-item {
    appearance: none;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    background: transparent;
    border: 0;
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 0.88rem;
    text-align: left;
    transition: background 0.12s, color 0.12s;
    width: 100%;
  }
  .cat-item:hover,
  .cat-item:focus-visible { background: var(--surface-2); color: var(--text); }
  .cat-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
    outline-offset: 2px;
  }
  .cat-item.active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
  }
  .cat-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
  .cat-item-label { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cat-count {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    flex: 0 0 auto;
  }
  .cat-item.active .cat-count { color: var(--accent); }
  .cat-divider {
    height: 1px;
    background: var(--border);
    margin: 8px 11px;
  }

  /* 모바일 — drawer 통째로 hidden (list view 헤더 chip이 대신) */
  @media (max-width: 720px) {
    .daily-drawer { display: none !important; }
  }

  /* === list view (v161) — 예배 노트 패턴 그대로 사용 (.worship-list-head/.worship-toolbar/.worship-card) === */
  .daily-list-view {
    padding: 0;
    gap: 0;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  .daily-list-view .worship-list {
    max-height: none;
    padding: 14px 18px 32px;
  }
  .daily-list-view .worship-month-group { margin-top: 18px; }
  .daily-list-view .worship-month-group:first-child { margin-top: 6px; }
  .daily-list-view .worship-month-list { gap: 8px; }
  .daily-list-view .worship-card .card-foot { gap: 12px; }
  /* 빈 노트 카드 — dim 처리 */
  .daily-list-view .worship-card .card-title.empty {
    opacity: 0.55;
  }
  .daily-list-action-spacer {
    flex: 1 1 auto;
    min-width: 6px;
  }
  .daily-list-view .worship-list-count {
    flex: 0 0 auto;
    min-width: 28px;
    margin-left: 0;
    text-align: right;
    white-space: nowrap;
  }
  .daily-list-view .daily-action-full {
    display: inline;
  }
  .daily-list-view .daily-action-compact {
    display: none;
  }
  @media (max-width: 720px) {
    #daily-modal[data-modal-view="list"] .daily-shell,
    #daily-modal[data-modal-view="list"] .daily-page-area,
    #daily-modal[data-modal-view="list"] .note-page-column,
    #daily-modal[data-modal-view="list"] .daily-list-view {
      background: var(--bg);
    }
    #daily-modal[data-modal-view="list"] .daily-page-area {
      padding: 0;
    }
    #daily-modal[data-modal-view="list"] .daily-list-view {
      max-width: none;
      margin: 0;
      padding: 0 0 max(22px, env(safe-area-inset-bottom));
    }
    .daily-list-view .worship-list { padding: 12px 14px 28px; }
    .daily-list-view .worship-month-list { gap: 7px; }
  }

  /* === list pane toggle (v172, 데스크탑 전용) === */
  .rail-list-toggle,
  .rail-right-toggle { display: none; }
  .rail-list-toggle .list-collapse-icon,
  .rail-list-toggle .list-expand-icon,
  .rail-right-toggle .right-collapse-icon,
  .rail-right-toggle .right-expand-icon {
    width: 16px; height: 16px;
  }
  .rail-list-toggle .list-expand-icon { display: none; }
  .rail-right-toggle .right-expand-icon { display: none; }
  [data-list-collapsed="true"] .rail-list-toggle .list-collapse-icon { display: none; }
  [data-list-collapsed="true"] .rail-list-toggle .list-expand-icon { display: block; }
  [data-right-collapsed="true"] .rail-right-toggle .right-collapse-icon { display: none; }
  [data-right-collapsed="true"] .rail-right-toggle .right-expand-icon { display: block; }
  @media (min-width: 1024px) {
    .rail-list-toggle,
    .rail-right-toggle { display: inline-flex; }
    /* 데일리 list collapsed */
    #daily-modal[data-list-collapsed="true"] .daily-page-area .note-page-column {
      grid-template-columns: 0 1fr !important;
    }
    #daily-modal[data-list-collapsed="true"] .daily-page-area .note-page-column > .daily-list-view {
      display: none !important;
    }
    /* 예배 list collapsed */
    #worship-modal[data-list-collapsed="true"] .note-workspace-modal {
      grid-template-columns: 64px 0 1fr !important;
    }
    #worship-modal[data-list-collapsed="true"] #worship-list-pane {
      display: none !important;
    }
    /* v174 — 우측 담은 절 pane collapsed */
    #daily-modal[data-right-collapsed="true"] .daily-page-area .note-right-pane {
      display: none !important;
    }
  }

  /* === 기록 (Records) 통합 모달 (v179) === */
  #records-modal .records-modal-shell {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  #records-modal .records-modal-rail { display: none; } /* 모바일 hidden */
  #records-modal .records-drawer { display: none; }    /* 모바일 hidden */
  #records-modal .records-list-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg);
  }
  #records-modal .records-toolbar {
    padding: 12px clamp(14px, 3vw, 24px) 8px;
    border-bottom: 1px solid var(--border);
  }
  #records-modal .records-toolbar .worship-search { width: 100%; }
  /* v195 — records 모바일 카테고리 chip strip (drawer 대체) */
  #records-modal .records-cat-strip-mobile { display: none; }
  @media (max-width: 1023px) {
    #records-modal .records-cat-strip-mobile {
      display: flex;
      gap: 6px;
      margin-top: 10px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }
    #records-modal .records-cat-strip-mobile::-webkit-scrollbar { display: none; }
    #records-modal .records-cat-strip-mobile .cat-chip {
      flex: 0 0 auto;
    }
    #records-modal .records-cat-strip-mobile .cat-chip:focus-visible {
      outline: 2px solid color-mix(in srgb, var(--accent) 36%, transparent);
      outline-offset: 2px;
    }
  }
  #records-modal .records-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px clamp(10px, 2.5vw, 20px) 32px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    -webkit-overflow-scrolling: touch;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
  }
  /* record 카드 — worship-card-compact 스타일 + 카테고리 badge */
  .record-card {
    position: relative;
    padding: 11px 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.14s, background 0.14s;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: var(--text);
    font-family: inherit;
  }
  .record-card:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: var(--surface-2);
  }
  .record-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .record-card-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: var(--lh-tight);
  }
  .record-card-title.empty {
    color: var(--text-faint);
    font-style: italic;
    font-weight: 400;
  }
  .record-card-date {
    flex: 0 0 auto;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-dim);
  }
  .record-card-cat {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--r-full);
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    border: 1px solid;
  }
  .records-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-faint);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
  }
  .records-group-head {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-faint);
    padding: 14px 4px 6px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .records-group-head:first-child { padding-top: 4px; }
  .records-group-cnt {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-xs);
  }
  /* 데스크탑 3-pane (1024+) */
  @media (min-width: 1024px) {
    #records-modal .records-modal-shell {
      display: grid !important;
      /* v194 — drawer 폭 통일 (worship/daily 340 와 일치) */
      grid-template-columns: 64px 260px 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "head head head"
        "rail drawer list";
      min-height: 0;
    }
    #records-modal .modal-head { grid-area: head; }
    #records-modal .records-modal-rail {
      grid-area: rail;
      display: flex !important;
      border-right: 1px solid var(--border);
    }
    #records-modal .records-drawer {
      grid-area: drawer;
      display: block !important;
      border-right: 1px solid var(--border);
      overflow-y: auto;
      padding: 14px 8px !important;
    }
    #records-modal .records-list-pane {
      grid-area: list;
      background: var(--bg);
    }
  }

  /* === [hidden] 속성 force (v185 fix) — class에 display 명시된 element에 hidden 속성 줘도 작동 보장 === */
  [hidden] { display: none !important; }

  /* === v187 — 접근성: 키보드 focus visible 전역 (WCAG 2.4.7) === */
  :focus { outline: none; }
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }
  /* 카드·버튼 위에서는 border-radius 상속 */
  button:focus-visible,
  a:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  /* input/textarea는 outline 대신 border 강조 */
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
  }

  /* === v186 — cou-note 형광펜 SVG swatch (이모지 대체) === */
  .cou-hl-dot {
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: transparent !important;
  }
  .cou-hl-swatch {
    display: inline-block;
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  }
  /* cou-note 삭제 버튼은 danger 색조 */
  .cou-note-delete-btn { color: #c95151; }
  .cou-note-delete-btn:hover { background: rgba(201,81,81,0.1); color: #c95151; }

  /* === 기도·발표 kind 시 예배 전용 필드 hide (v184, v475 testimony 의 place·companion 노출) === */
  #worship-modal[data-worship-kind="intercession"] #w-category,
  #worship-modal[data-worship-kind="intercession"] #w-preacher,
  #worship-modal[data-worship-kind="intercession"] #w-place,
  #worship-modal[data-worship-kind="testimony"] #w-category,
  #worship-modal[data-worship-kind="testimony"] #w-preacher {
    display: none !important;
  }
  /* v475 — testimony 의 장소·함께한 사람 UX. worship/intercession 에선 companion 숨김 */
  #worship-modal[data-worship-kind="worship"] #w-companion,
  #worship-modal[data-worship-kind="intercession"] #w-companion {
    display: none !important;
  }
  /* w-place 의 placeholder 를 testimony 일 때 더 자연스럽게 (JS 가 동적 갱신) */
  /* 페이지 본문 위 메타 라인의 카테고리·설교자도 기도/발표 시 hide */
  #worship-modal[data-worship-kind="intercession"] #w-page-meta-cat,
  #worship-modal[data-worship-kind="intercession"] #w-page-meta-preacher,
  #worship-modal[data-worship-kind="intercession"] #w-page-meta-sep,
  #worship-modal[data-worship-kind="testimony"] #w-page-meta-cat,
  #worship-modal[data-worship-kind="testimony"] #w-page-meta-preacher,
  #worship-modal[data-worship-kind="testimony"] #w-page-meta-sep {
    display: none !important;
  }

  /* === 예배 ⋮ 트리거 view 별 가시성 (v168) — 모바일 list view에선 hide === */
  @media (max-width: 1023px) {
    #worship-modal[data-modal-view="list"] #worship-more-trigger {
      display: none !important;
    }
    /* v169 — 모바일에선 worship-modal-rail 전체 hidden (rail은 데스크탑 3-pane용) */
    #worship-modal .worship-modal-rail { display: none !important; }
    .note-kind-switcher {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-height: 46px;
      width: fit-content;
      max-width: calc(100% - 24px);
      margin: 6px auto 4px;
      padding: 4px;
      box-sizing: border-box;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      scroll-padding-inline: 4px;
      border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
      border-radius: 999px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.045), transparent),
        color-mix(in srgb, var(--surface) 74%, var(--bg) 26%);
      box-shadow:
        0 14px 34px -28px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.08);
      position: relative;
      z-index: 2;
    }
    .note-kind-switcher::-webkit-scrollbar {
      display: none;
    }
    .note-kind-switcher button {
      flex: 0 0 auto;
      height: 32px;
      min-height: 32px;
      padding: 0 12px;
      font-size: 0.71rem;
      border: 0;
      background: transparent;
      color: color-mix(in srgb, var(--text-dim) 88%, var(--text));
    }
    .note-kind-switcher button.is-current {
      color: color-mix(in srgb, var(--text) 88%, var(--accent));
      background:
        linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,0.16)), color-mix(in srgb, var(--accent) 14%, var(--surface)));
      box-shadow:
        0 7px 16px -12px color-mix(in srgb, var(--accent) 86%, transparent),
        inset 0 1px 0 rgba(255,255,255,0.26);
    }
    .note-kind-dropdown-menu {
      width: min(220px, calc(100vw - 48px));
    }
  }

  /* === 예배 노트 데스크탑 3-pane (v166/v169) — rail | list pane | edit pane === */
  @media (min-width: 1024px) {
    #worship-modal .note-workspace-modal {
      display: grid !important;
      grid-template-columns: 64px 340px 1fr;
      grid-template-rows: auto 1fr;
      grid-template-areas:
        "head head head"
        "rail list edit";
      min-height: 0;
    }
    #worship-modal .modal-head { grid-area: head; }
    #worship-modal .worship-modal-rail {
      grid-area: rail;
      display: flex !important;
      border-right: 1px solid var(--border);
      min-height: 0;
    }
    #worship-modal #worship-list-pane {
      grid-area: list;
      display: flex !important;
      flex-direction: column;
      border-right: 1px solid var(--border);
      overflow: hidden;
      min-height: 0;
      background: color-mix(in srgb, var(--bg) 96%, transparent);
    }
    #worship-modal #worship-list-pane .worship-list { flex: 1; min-height: 0; max-height: none; }
    #worship-modal #worship-list-pane .worship-list-head { padding: 10px 12px; }
    #worship-modal #worship-list-pane .worship-toolbar { padding: 8px 12px; }
    #worship-modal #worship-edit-pane {
      grid-area: edit;
      display: grid !important;
      min-height: 0;
    }
    /* edit pane 비어있을 때 빈 상태 */
    #worship-modal #worship-edit-pane[hidden] {
      grid-template-columns: 1fr !important;
      grid-template-rows: 1fr !important;
    }
    #worship-modal #worship-edit-pane[hidden] > * { display: none !important; }
    #worship-modal #worship-edit-pane[hidden]::after {
      content: "← 왼쪽에서 노트를 선택하거나 + 새 노트를 시작하세요";
      color: var(--text-faint);
      font-style: italic;
      font-family: 'Noto Serif KR', serif;
      place-self: center;
      grid-column: 1;
      grid-row: 1;
    }
    /* v288 — 데스크탑에서 worship-drawer 가 빈 공간 만드는 문제 해결.
       v211 에서 sermon-header-card 가 본문 상단으로 이동 → worship-meta hidden.
       백링크만 남는데 보통 비어있어서 232px drawer 가 회색 빈 공간으로 보임.
       데스크탑에선 drawer 자체 hide. 백링크는 향후 우측 인용 절 영역으로 통합 예정. */
    #worship-modal .worship-drawer { display: none !important; }
    /* ← 목록 button hidden (list pane이 옆에) */
    #worship-modal #worship-back,
    #worship-modal #worship-mback,
    #worship-modal .worship-drawer-mhead-row { display: none !important; }
    /* v181 — 데스크탑에선 worship-edit-head 자체 hidden: ← 목록 + ⋮ stash 모두
       hidden이라 save-status만 남는 빈 bar = 사용자 시각에 큰 빈 공간으로 보임 */
    #worship-modal #worship-edit-pane .worship-edit-head { display: none !important; }
    /* edit-pane grid에서 row 1 (edit-head) 제거되었으니 template-rows 단순화 */
    #worship-modal #worship-edit-pane:not([hidden]) {
      grid-template-rows: auto minmax(0, 1fr) auto !important;
    }
    #worship-modal #worship-edit-pane .worship-meta { grid-row: 1 !important; }
    #worship-modal #worship-edit-pane .worship-body-section,
    #worship-modal #worship-edit-pane #w-backlinks { grid-row: 2 !important; }
    /* edit-pane 안 본문 max-width */
    #worship-modal #worship-edit-pane #w-body { max-width: 100%; }
  }

  /* === 데스크탑 3-pane (v165) — Gmail 스타일: rail | drawer | list pane | 본문 === */
  @media (min-width: 1024px) {
    .daily-page-area .note-page-column {
      display: grid;
      grid-template-columns: 340px 1fr;
      grid-template-rows: auto 1fr auto;
      min-height: 0;
    }
    /* list pane 항상 보임 — column 1, 모든 row 차지 */
    .daily-page-area .note-page-column > .daily-list-view {
      display: flex !important;
      grid-column: 1;
      grid-row: 1 / -1;
      max-width: 340px;
      border-right: 1px solid var(--border);
      background: color-mix(in srgb, var(--bg) 96%, transparent);
      min-height: 0;
    }
    /* 본문 column — toolbar/scroll/gallery/status는 column 2 */
    .daily-page-area .note-page-column > .note-page-toolbar { grid-column: 2; grid-row: 1; display: flex !important; }
    .daily-page-area .note-page-column > .note-page-scroll  { grid-column: 2; grid-row: 2; min-height: 0; }
    .daily-page-area .note-page-column > .daily-clips-gallery { grid-column: 2; grid-row: 2; min-height: 0; }
    /* v208 — status-bar 글로벌 hidden 유지 (override 제거): "비어있음" 텍스트 안 보이게 */
    .daily-page-area .note-page-column > .note-status-bar { display: none !important; }
    /* v208 — note-page-footer 도 데일리에서 숨김 (태그 chip 은 다른 곳에서) */
    .daily-page-area .note-page-column .note-page-footer { display: none !important; }
    /* data-view="list" 일 때도 데스크탑은 본문 column 살아있음 (Gmail처럼 동시 노출) */
    .daily-page-area .note-page-column[data-view="list"] > .note-page-scroll { display: block !important; }
    /* ☰ trigger / ← back button 데스크탑에선 불필요 (list pane이 항상 옆에) */
    #daily-modal .note-selector-trigger,
    #daily-modal .daily-list-back-btn { display: none !important; }
    /* list pane padding 압축 (좁은 column) */
    .daily-page-area .note-page-column > .daily-list-view .worship-list { padding: 10px 12px 24px; }
    .daily-page-area .note-page-column > .daily-list-view .worship-month-list { gap: 7px; }
    .daily-page-area .note-page-column > .daily-list-view .worship-list-head {
      padding: 8px 10px;
      gap: 7px;
      min-height: 54px;
    }
    .daily-page-area .note-page-column > .daily-list-view .worship-new-btn,
    .daily-page-area .note-page-column > .daily-list-view .worship-synth-btn,
    .daily-page-area .note-page-column > .daily-list-view .note-sort-btn {
      height: 40px;
      padding: 0 12px;
      border-radius: 12px;
      font-size: 0.76rem;
      letter-spacing: 0;
    }
    .daily-page-area .note-page-column > .daily-list-view .worship-new-btn {
      min-width: 78px;
      font-weight: 700;
    }
    .daily-page-area .note-page-column > .daily-list-view .worship-synth-btn {
      min-width: 56px;
      padding-inline: 10px;
    }
    .daily-page-area .note-page-column > .daily-list-view .note-sort-btn {
      min-width: 82px;
      padding-inline: 10px;
    }
    .daily-page-area .note-page-column > .daily-list-view .daily-action-full {
      display: none;
    }
    .daily-page-area .note-page-column > .daily-list-view .daily-action-compact {
      display: inline;
    }
    .daily-page-area .note-page-column > .daily-list-view .worship-list-count {
      font-size: 0.7rem;
      min-width: 26px;
    }
    /* v638 → v1104 — 읽기 폭(880px)은 유지하되 카드 프레임 대신 패딩으로 중앙 정렬.
       페이지가 스크롤 영역을 가장자리까지 채워 종이 가장자리/테두리가 안 보인다. */
    .daily-page-area .note-page-column > .note-page-scroll .note-page {
      max-width: none;
      margin: 0;
      min-height: 100%;
      padding-inline: max(clamp(22px, 3.5vw, 48px), calc((100% - 880px) / 2));
    }
  }

  /* === v208 — 클립 그리드 view (사이드 '클립' 카테고리 전용) === */
  .daily-clips-grid-tools {
    display: flex; flex-direction: column; gap: 8px;
    padding: 10px clamp(12px, 2.5vw, 20px) 6px;
    position: sticky; top: 0; z-index: 2;
    background: var(--bg);
  }
  .daily-clips-grid-search {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 11px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9px;
  }
  .daily-clips-grid-search svg { width: 14px; height: 14px; color: var(--text-dim); flex: 0 0 auto; }
  .daily-clips-grid-search input {
    flex: 1; min-width: 0;
    background: transparent; border: 0; outline: 0;
    color: var(--text); font-family: 'Noto Serif KR', sans-serif;
    font-size: 0.88rem;
  }
  .daily-clips-grid-search input::placeholder { color: var(--text-faint); }
  .daily-clips-grid-search button.clear {
    width: 24px;
    height: 24px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-faint); padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 0; border-radius: var(--r-full);
  }
  .daily-clips-grid-search button.clear svg {
    width: 14px; height: 14px; stroke-width: 1.8;
  }
  .daily-clips-grid-search button.clear:hover { color: var(--text); }
  .daily-clips-grid-filters {
    display: flex; gap: 6px; flex-wrap: wrap;
    font-family: 'Inter', sans-serif;
  }
  .daily-clips-grid-filters .cat-chip {
    padding: 5px 11px;
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: var(--surface);
    color: var(--text-dim);
    font-size: 0.76rem; cursor: pointer;
    display: inline-flex; align-items: center; gap: 5px;
  }
  .daily-clips-grid-filters .cat-chip.active {
    background: var(--accent-dim, var(--surface-2));
    color: var(--accent);
    border-color: var(--accent);
  }
  .daily-clips-grid-filters .cat-chip .count {
    font-size: var(--text-xs); opacity: 0.7;
  }

  .daily-clips-grid-group { margin-bottom: 14px; }
  .daily-clips-grid-group-head {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 8px clamp(12px, 2.5vw, 20px) 6px;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs); color: var(--text-dim);
    letter-spacing: 0.05em;
  }
  .daily-clips-grid-group-head span:last-child { opacity: 0.6; font-size: var(--text-xs); }
  .daily-clips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 0 clamp(12px, 2.5vw, 20px);
  }

  .clip-grid-card {
    position: relative;
    display: flex; flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  }
  .clip-grid-card-link {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
  }
  .clip-grid-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent-dim, var(--border));
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }
  .clip-grid-card-static {
    cursor: default;
  }
  .clip-grid-card-static:hover {
    transform: none;
    box-shadow: none;
  }
  .clip-grid-card .clip-grid-thumb {
    aspect-ratio: 16/10;
    background-size: cover;
    background-position: center;
    background-color: #1f1c17;
    position: relative;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.4);
  }
  .clip-grid-card .clip-grid-thumb.is-yt::after {
    content: ""; position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 32px; height: 32px;
    background: rgba(0,0,0,0.6);
    border-radius: 50%;
  }
  .clip-grid-card .clip-grid-thumb.is-yt::before {
    content: ""; position: absolute;
    top: 50%; left: 50%;
    transform: translate(-40%, -50%);
    width: 0; height: 0;
    border-left: 10px solid #fff;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    z-index: 1;
  }
  .clip-grid-card .clip-grid-thumb svg { opacity: 0.6; }
  .clip-grid-card .clip-grid-body {
    padding: 7px 9px 9px;
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0;
  }
  .clip-grid-card .clip-grid-title {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
  }
  .clip-grid-card .clip-grid-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    color: var(--text-dim);
    display: flex; gap: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .clip-grid-card .clip-grid-remove {
    position: absolute; top: 5px; right: 5px;
    width: 22px; height: 22px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 0; border-radius: 50%;
    cursor: pointer; line-height: 1;
    opacity: 0; transition: opacity 0.12s;
    display: flex; align-items: center; justify-content: center;
  }
  .clip-grid-card .clip-grid-remove svg {
    width: 13px; height: 13px; stroke-width: 1.8;
  }
  .clip-grid-card:hover .clip-grid-remove,
  .clip-grid-card:focus-within .clip-grid-remove { opacity: 1; }
  /* 터치 디바이스: 항상 보임 (hover 없음) */
  @media (hover: none) {
    .clip-grid-card .clip-grid-remove { opacity: 0.8; }
  }

  .daily-clips-grid-empty {
    text-align: center;
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    padding: 3rem 1rem;
    opacity: 0.7;
    line-height: 1.6;
  }

  /* === 클립 갤러리 (A안 v148, legacy) === */
  .daily-clips-gallery {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1rem 2rem;
    -webkit-overflow-scrolling: touch;
  }
  .daily-clips-gallery-empty {
    text-align: center;
    color: var(--paper-meta);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    padding: 3rem 1rem;
    opacity: 0.6;
  }
  .daily-clips-gallery-empty svg {
    display: block;
    margin: 0 auto 0.8rem;
    opacity: 0.5;
  }
  .daily-clips-gallery-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: 720px;
    margin: 0 auto;
  }

  /* === 클립 카드 — 컴팩트 (v148, 썸네일 작게) === */
  .clip-card {
    display: block;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--paper-footer-line);
    border-radius: 9px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s, background 0.12s;
    position: relative;
  }
  .clip-card-link {
    display: flex;
    gap: 0.65rem;
    padding: 0.55rem 0.65rem;
    color: inherit;
    text-decoration: none;
  }
  [data-paper-tone="ink"] .clip-card,
  [data-theme="night"] .clip-card { background: rgba(255,255,255,0.06); }
  .clip-card:hover {
    background: rgba(255,255,255,0.85);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  }
  [data-paper-tone="ink"] .clip-card:hover,
  [data-theme="night"] .clip-card:hover { background: rgba(255,255,255,0.12); }
  .clip-card-static {
    cursor: default;
  }
  .clip-card-static:hover {
    box-shadow: none;
  }
  .clip-card-thumb {
    flex: 0 0 40px;
    height: 26px;
    border-radius: var(--r-xs);
    background-size: cover;
    background-position: center;
    background-color: var(--surface-2, #2a2520);
    position: relative;
    overflow: hidden;
    align-self: center;
  }
  .clip-card-thumb.is-yt::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 12px; height: 12px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
  }
  .clip-card-thumb.is-yt::before {
    content: "";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-30%, -50%);
    width: 0; height: 0;
    border-left: 4px solid #fff;
    border-top: 2.5px solid transparent;
    border-bottom: 2.5px solid transparent;
    z-index: 1;
  }
  .clip-card-thumb-icon {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--paper-meta);
    opacity: 0.55;
  }
  .clip-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    justify-content: center;
  }
  .clip-card-title {
    font-family: var(--note-body-font, 'Pretendard', sans-serif);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--paper-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    line-height: var(--lh-tight);
  }
  .clip-card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: var(--paper-meta);
    opacity: 0.85;
  }
  .clip-card-domain { font-weight: 500; }
  .clip-card-note {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--paper-ink);
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .clip-card-remove {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--paper-meta);
    opacity: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.12s, background 0.12s;
    line-height: 1;
  }
  .clip-card-remove svg {
    width: 12px; height: 12px; stroke-width: 1.8;
  }
  .clip-card:hover .clip-card-remove { opacity: 0.55; }
  .clip-card-remove:hover { opacity: 1 !important; background: rgba(0,0,0,0.08); }
  @media (hover: none) {
    .clip-card-remove { opacity: 0.4; }
  }

  /* 노트 안 YouTube 자동 임베드 */
  .yt-embed-section {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
  }
  .note-page .yt-embed-section {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--paper-footer-line);
  }
  .yt-head {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: var(--text-sm); font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 0.6rem;
  }
  .note-page .yt-head {
    color: var(--paper-meta);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    margin-bottom: 0.4rem;
  }
  .note-page .yt-head .ic {
    vertical-align: -2px;
  }
  /* v207 — YouTube 임베드 작게 (노트 본문 공간 확보, 최대 360px) */
  .yt-list { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
  .yt-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    overflow: hidden;
    max-width: 360px;
    width: 100%;
  }
  .yt-frame-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    background: #000;
  }
  /* 썸네일 클릭-투-플레이 */
  .yt-thumb {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0; padding: 0; margin: 0;
    background-size: cover; background-position: center;
    background-color: #000;
    cursor: pointer;
    display: block;
    transition: filter 0.15s;
  }
  .yt-thumb:hover { filter: brightness(1.1); }
  .yt-thumb::after {
    content: "";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 64px; height: 64px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0,0,0,0.5);
  }
  .yt-thumb::before {
    content: "";
    position: absolute; top: 50%; left: 50%;
    transform: translate(-40%, -50%);
    width: 0; height: 0;
    border-left: 20px solid #fff;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    z-index: 1;
  }
  .yt-thumb-title {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 0.5rem 0.7rem;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    color: #fff;
    font-size: var(--text-sm);
    font-family: 'Noto Serif KR', serif;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    pointer-events: none;
    line-height: 1.35;
    text-align: left;
  }
  .yt-frame {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
    display: block;
  }
  .note-row-status {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 0.5rem; gap: var(--space-2);
  }
  .share-card-link {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    padding: 0.35rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    transition: color 0.15s, border-color 0.15s;
  }
  .share-card-link:hover,
  .share-card-link:focus-visible {
    color: var(--accent);
    border-color: var(--accent-dim);
  }
  .share-card-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 2px;
  }

  /* 이미지 첨부 */
  .image-section {
    margin-top: 1.2rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
  }
  .image-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin-bottom: 0.5rem;
  }
  .image-head .image-hint {
    font-family: 'Inter', sans-serif;
    font-size: 0.66rem;
    color: var(--text-faint);
  }
  .image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.5rem;
  }
  .image-grid:empty { display: none; }
  .image-thumb {
    position: relative;
    aspect-ratio: 1;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    overflow: hidden;
    transition: border-color 0.15s;
  }
  .image-thumb:hover { border-color: var(--accent-dim); }
  .image-open {
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
  }
  .image-open:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
    outline-offset: -3px;
  }
  .image-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .image-thumb .image-rm {
    position: absolute;
    top: 2px; right: 2px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
  }
  .image-thumb .image-rm svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.8;
  }
  .image-thumb:hover .image-rm { opacity: 1; }
  .image-thumb .image-rm:hover { background: #c13a3a; }
  .image-controls { display: flex; gap: 0.4rem; }
  .image-btn {
    flex: 1;
    padding: 0.45rem 0.7rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    transition: all 0.15s;
  }
  .image-btn:hover { color: var(--accent); border-color: var(--accent-dim); }

  /* 드래그 호버 — 노트 탭 전체 */
  .tab-panel.drag-over {
    outline: 2px dashed var(--accent);
    outline-offset: -8px;
    background: var(--surface);
  }

  /* 공유 카드 모달 */
  .share-modal-body { max-width: 520px; }
  .share-preview-wrap {
    padding: 1rem;
    display: flex; justify-content: center;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .share-preview {
    max-width: 100%;
    max-height: 50vh;
    width: auto; height: auto;
    background: #000;
    border-radius: var(--r-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  }
  .share-controls { padding: 0.75rem 1.25rem 0; }
  .share-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.45rem 0;
    gap: var(--space-2);
  }
  .share-label {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
  }
  .share-actions {
    display: flex; gap: var(--space-2);
    padding: 0.85rem 1.25rem 1.25rem;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
  }
  .share-btn {
    flex: 1;
    padding: 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s;
  }
  .share-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .share-btn:hover { border-color: var(--accent-dim); }
  .share-btn.primary {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
    font-weight: 500;
  }
  .share-btn.primary:hover { background: var(--accent-dim); }

  /* 라이트박스 */
  .lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 250;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
  }
  .lightbox[hidden] { display: none; }
  .lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--r-xs);
  }
  .lightbox-close {
    position: absolute;
    top: 1rem; right: 1rem;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    color: #fff;
    font-size: var(--text-lg);
    display: flex; align-items: center; justify-content: center;
  }
  .lightbox-close:hover { background: rgba(255,255,255,0.2); }

  /* 음성 노트 */
  .voice-section {
    margin-top: 1.2rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border);
  }
  .voice-head {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin-bottom: 0.5rem;
  }
  .voice-controls, .voice-player {
    display: flex; align-items: center; gap: var(--space-2);
  }
  .voice-player[hidden] { display: none; }
  .voice-player audio {
    flex: 1;
    height: 36px;
    width: 100%;
  }
  .voice-btn {
    padding: 0.45rem 0.8rem;
    border-radius: var(--r-sm);
    background: var(--surface-2);
    border: 1px solid var(--accent-dim);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    display: inline-flex; align-items: center; gap: 0.4rem;
    transition: background 0.1s;
  }
  .voice-btn:hover { background: var(--surface); }
  .voice-btn.recording {
    background: #c13a3a;
    color: #fff;
    border-color: #c13a3a;
    animation: voice-pulse 1.2s infinite;
  }
  .voice-btn.danger {
    color: #c13a3a;
    border-color: #c13a3a;
  }
  .voice-btn.danger:hover { background: rgba(193, 58, 58, 0.1); }
  .voice-btn.small {
    padding: 0.3rem 0.55rem;
    font-size: 0.78rem;
    flex-shrink: 0;
  }
  .voice-btn.small svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.8;
  }
  .voice-timer {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-base);
    color: var(--text);
    margin-left: 0.5rem;
  }
  .voice-hint {
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-style: italic;
    margin-top: 0.4rem;
    min-height: 1em;
  }
  .voice-hint.error { color: #c95151; font-style: normal; }
  @keyframes voice-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
  }

  /* 사용자 정의 절↔절 연결 */
  .link-section {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
  }
  .link-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin-bottom: 0.6rem;
  }
  .link-count {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
  }
  .link-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.6rem; }
  .link-list:empty { display: none; }
  .link-item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 0.5rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
  }
  .link-item:hover { border-color: var(--accent-dim); background: var(--surface-2); }
  .link-item .link-ref {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    font-size: var(--text-sm);
    color: var(--accent);
    flex-shrink: 0;
  }
  .link-item .link-ref-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.75rem;
    color: var(--text-dim);
  }
  .link-item .link-note {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    color: var(--text-dim);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .link-item .link-remove {
    width: 22px; height: 22px;
    padding: 0;
    border: 0;
    border-radius: var(--r-xs);
    background: transparent;
    color: var(--text-faint);
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 0;
    transition: color 0.15s, background 0.15s;
  }
  .link-item .link-remove svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.8;
  }
  .link-item .link-remove:hover { color: var(--accent); background: var(--bg); }

  .link-add {
    display: flex; gap: 0.35rem;
    margin-bottom: 0.4rem;
    flex-wrap: wrap;
  }
  .link-add input {
    flex: 1; min-width: 0;
    padding: 0.4rem 0.65rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--text-sm);
    font-family: 'Noto Serif KR', serif;
  }
  .link-add input:focus { border-color: var(--accent-dim); }
  .link-add .link-input-wrap {
    position: relative;
    flex: 1 1 130px;
    min-width: 130px;
  }
  .link-add .link-input-wrap input { width: 100%; }
  .link-add #link-note { flex-basis: 100px; }

  /* 참조 자동완성 — 공용 (link / search) */
  .ref-suggest {
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow);
    max-height: 280px;
    overflow-y: auto;
    z-index: 80;
    min-width: 240px;
  }
  .ref-suggest[hidden] { display: none; }
  .ref-suggest .ref-item {
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    border-left: 2px solid transparent;
    transition: background 0.1s, border-color 0.1s;
  }
  .ref-suggest .ref-item:hover,
  .ref-suggest .ref-item.selected {
    background: var(--surface-2);
    border-left-color: var(--accent);
  }
  .ref-suggest .ref-item .label {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    font-size: var(--text-base);
    color: var(--text);
  }
  .ref-suggest .ref-item .label-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--text-dim);
    margin-left: 0.4rem;
  }
  .ref-suggest .ref-item .hint {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    margin-top: 0.15rem;
  }
  .ref-suggest .ref-item.complete {
    background: var(--surface-2);
    border-left-color: var(--accent);
  }
  .ref-suggest .ref-item.complete .label { color: var(--accent); }
  .ref-suggest .ref-empty {
    padding: 0.85rem 1rem;
    color: var(--text-faint);
    font-style: italic;
    font-size: var(--text-sm);
    text-align: center;
    font-family: 'Noto Serif KR', serif;
  }
  .link-add-btn {
    padding: 0.4rem 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-sm);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
  }
  .link-add-btn:hover { background: var(--surface); }
  .link-hint {
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-style: italic;
    min-height: 1em;
  }
  .link-hint.error { color: #c95151; font-style: normal; }

  /* 원어 탭 / Original word tab */
  .origin-help {
    font-size: 0.78rem; color: var(--text-faint);
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.55rem;
    background: var(--surface);
    border-radius: var(--r-sm);
    line-height: var(--lh-normal);
  }
  .origin-action-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.85rem;
  }
  .origin-note-jump {
    min-height: 36px;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    cursor: pointer;
  }
  .origin-note-jump:hover,
  .origin-note-jump:focus-visible { background: var(--surface-2); }
  .origin-note-jump:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 3px;
  }
  .origin-words {
    display: flex; flex-wrap: wrap; gap: 0.3rem;
    margin-bottom: 1rem;
  }
  .origin-word {
    padding: 0.35rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-base);
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex; align-items: center; gap: 0.4rem;
  }
  .origin-word:hover,
  .origin-word:focus-visible { border-color: var(--accent-dim); background: var(--surface-2); }
  .origin-word:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 3px;
  }
  .origin-word.active { border-color: var(--accent); color: var(--accent); background: var(--surface-2); }
  .origin-word.lang-hebrew { box-shadow: inset 3px 0 0 var(--lang-hebrew); }
  .origin-word.lang-greek  { box-shadow: inset 3px 0 0 var(--lang-greek); }
  .origin-word .strong-num {
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: var(--text-faint);
    font-weight: 500;
  }

  .strong-detail {
    padding: 1rem;
    background: var(--surface);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
  }
  .strong-detail.empty {
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    padding: 2rem 1rem;
    background: transparent;
    border: 1px dashed var(--border);
    white-space: pre-line;
    line-height: 1.6;
  }
  .strong-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-2);
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
  }
  .strong-lexeme {
    font-size: 1.85rem;
    color: var(--accent);
    font-weight: 500;
    font-family: 'Noto Serif', serif;
    line-height: var(--lh-tight);
  }
  .strong-lexeme.lang-hebrew {
    font-family: 'Noto Serif Hebrew', 'Noto Serif', serif;
    direction: rtl;
    text-align: right;
    unicode-bidi: embed;
    font-size: 2rem;
  }
  .strong-lexeme.lang-greek {
    font-family: 'Noto Serif', serif;   /* Noto Serif 에 그리스 글리프 포함 */
  }
  .lang-chip {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.45rem;
    border-radius: var(--r-full);
    border: 1px solid var(--accent-dim);
    background: var(--surface);
    color: var(--accent);
    margin-bottom: 0.3rem;
  }
  .lang-chip.lang-hebrew { color: var(--lang-hebrew); border-color: var(--lang-hebrew-border); }
  .lang-chip.lang-greek  { color: var(--lang-greek); border-color: var(--lang-greek-border); }
  .strong-meta {
    text-align: right;
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.4;
  }
  .strong-meta .num {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text);
    display: block;
  }
  .strong-meta .short-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--text-faint);
    display: block;
    font-size: 0.78rem;
  }
  .strong-meta .short-han {
    font-family: 'Noto Serif KR', serif;
    color: var(--text);
    display: block;
    font-size: var(--text-base);
    margin-top: 0.1rem;
  }
  .strong-meta .short-han:empty { display: none; }
  .strong-def-han {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    line-height: 1.75;
    color: var(--text);
    background: var(--surface);
    border-left: 3px solid var(--accent-dim);
    border-radius: var(--r-xs);
    padding: 0.75rem 0.95rem;
    margin-bottom: 0.85rem;
    white-space: pre-line;
    word-break: keep-all;
  }
  .strong-def-han .loading-msg {
    color: var(--text-faint);
    font-style: italic;
    font-size: var(--text-sm);
  }

  /* AI 깊이 풀이 */
  .ai-study-section {
    margin-top: 1.2rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
  }
  .ai-study-btn {
    width: 100%;
    padding: 0.7rem;
    background: var(--accent);
    color: var(--bg);
    border: 0;
    border-radius: var(--r-md);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
  }
  .ai-study-btn:hover { opacity: 0.92; transform: translateY(-1px); }
  .ai-study-btn:disabled { opacity: 0.5; cursor: default; }
  .ai-study-result {
    margin-top: 0.85rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-xs);
  }
  .ai-study-result[hidden] { display: none; }
  .ai-study-result h2,
  .ai-study-result h3,
  .ai-study-result h4 {
    font-family: 'Noto Serif KR', serif;
    color: var(--accent);
    margin-top: 1rem;
    margin-bottom: 0.4rem;
  }
  .ai-study-result h3 { font-size: var(--text-base); font-weight: 600; }
  .ai-study-result h4 { font-size: 0.88rem; color: var(--text); }
  .ai-study-result h2:first-child,
  .ai-study-result h3:first-child { margin-top: 0; }
  .ai-study-result p {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    line-height: 1.75;
    color: var(--text);
    margin-bottom: 0.7rem;
    word-break: keep-all;
  }
  .ai-study-result ul {
    margin: 0.4rem 0 0.7rem 1.2rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.86rem;
    line-height: var(--lh-loose);
  }
  .ai-study-result strong { color: var(--accent); font-weight: 600; }
  .ai-study-result em { font-style: italic; color: var(--text-dim); }
  .ai-study-result code {
    font-family: 'Inter', monospace;
    font-size: var(--text-sm);
    background: var(--surface-2);
    padding: 0.05rem 0.3rem;
    border-radius: 3px;
  }
  .ai-study-foot {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 1rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
    gap: var(--space-2);
  }
  .ai-regen-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.3rem 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.75rem;
  }
  .ai-regen-btn svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
  }
  .ai-regen-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
  /* v494 — AI 풀이 결과 공유 버튼 (정통 풀이 → 카톡 등 외부) */
  .ai-share-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 0.3rem 0.7rem;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: var(--r-sm);
    color: var(--accent);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--duration-fast) var(--ease-standard);
  }
  .ai-share-btn:hover,
  .ai-share-btn:focus-visible {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: var(--accent);
    outline: none;
  }
  .ai-share-btn svg { width: 12px; height: 12px; }
  .ai-tokens, .ai-cached {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: var(--text-faint);
  }
  .ai-loading {
    display: flex; align-items: center; gap: 0.55rem;
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    font-style: italic;
  }
  /* v488 — AI 풀이 근거 출처 (작은 글씨, 신뢰 가시화) */
  .ai-refs {
    margin-top: 1rem;
    padding: 0.7rem 0.85rem;
    background: color-mix(in srgb, var(--accent) 5%, transparent);
    border-left: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
    align-items: baseline;
  }
  .ai-refs-head {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-faint);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    width: 100%;
    margin-bottom: 0.15rem;
  }
  .ai-ref-item {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-dim);
    line-height: var(--lh-normal);
  }
  .ai-ref-key {
    color: var(--accent);
    font-weight: 600;
    margin-right: 0.3rem;
  }
  .ai-streaming {
    display: inline-block;
    margin-left: 0.3rem;
    color: var(--accent);
    font-size: var(--text-sm);
    animation: ai-blink 1s ease-in-out infinite;
  }
  @keyframes ai-blink { 50% { opacity: 0.2; } }

  /* AI 절·장 풀이 (노트 탭 / 챕터 헤더) */
  .ai-passage-section {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--border);
  }
  .ai-passage-btn {
    width: 100%;
    padding: 0.6rem;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-md);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
  }
  .ai-passage-btn:hover,
  .ai-passage-btn:focus-visible {
    background: var(--surface-2);
  }
  .ai-passage-btn:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 3px;
  }
  .ai-passage-btn:disabled { opacity: 0.5; cursor: default; }
  .ai-passage-result {
    margin-top: 0.8rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-xs);
  }
  .ai-passage-result[hidden] { display: none; }
  .ai-passage-result h2,
  .ai-passage-result h3,
  .ai-passage-result h4 {
    font-family: 'Noto Serif KR', serif;
    color: var(--accent);
    margin-top: 1rem;
    margin-bottom: 0.4rem;
  }
  .ai-passage-result h3 { font-size: var(--text-base); font-weight: 600; }
  .ai-passage-result h2:first-child,
  .ai-passage-result h3:first-child { margin-top: 0; }
  .ai-passage-result p {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.9rem;
    line-height: 1.78;
    color: var(--text);
    margin-bottom: 0.7rem;
    word-break: keep-all;
  }
  .ai-passage-result ul {
    margin: 0.4rem 0 0.7rem 1.2rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    line-height: var(--lh-loose);
  }
  .ai-passage-result strong { color: var(--accent); font-weight: 600; }
  .ai-passage-result em { font-style: italic; color: var(--text-dim); }

  /* 챕터 헤더의 액션 버튼들 */
  .chapter-head { position: relative; }
  .chapter-head-actions {
    position: absolute;
    top: 0.4rem; right: 0;
    display: flex; gap: 0.4rem;
  }
  .ai-chapter-btn {
    padding: 0.5rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    border-radius: var(--r-sm);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    transition: background 0.15s;
    white-space: nowrap;
  }
  .ai-chapter-btn:hover { background: var(--surface-2); }
  .ai-chapter-btn:disabled { opacity: 0.5; cursor: default; }
  .ai-passage-result.chapter-result {
    margin: 1.5rem 0;
    padding: 1.25rem 1.4rem;
  }
  @media (max-width: 720px) {
    .chapter-head-actions {
      position: static;
      display: flex;
      justify-content: center;
      margin-top: 0.6rem;
    }
    .ai-chapter-btn { font-size: var(--text-sm); }
  }
  .ai-error {
    color: #c95151;
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    line-height: 1.6;
  }
  .ai-retry-btn {
    padding: 0.35rem 0.8rem;
    background: transparent;
    border: 1px solid #c95151;
    border-radius: var(--r-sm);
    color: #c95151;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
  }
  .ai-error-retry {
    margin-top: 0.6rem;
  }

  /* AI 사전 (Lookup) 모달 */
  .lookup-modal-body { max-width: 720px; }
  .lookup-content {
    max-height: 65vh;
    overflow-y: auto;
    padding: 1.1rem 1.4rem;
  }
  .lookup-content h2,
  .lookup-content h3,
  .lookup-content h4 {
    font-family: 'Noto Serif KR', serif;
    color: var(--accent);
    margin-top: 1.1rem;
    margin-bottom: 0.4rem;
  }
  .lookup-content h3 { font-size: 1.02rem; font-weight: 600; }
  .lookup-content h2:first-child,
  .lookup-content h3:first-child { margin-top: 0; }
  .lookup-content p {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    line-height: 1.78;
    color: var(--text);
    margin-bottom: 0.7rem;
    word-break: keep-all;
  }
  .lookup-content ul {
    margin: 0.4rem 0 0.7rem 1.2rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.9rem;
    line-height: var(--lh-loose);
  }
  .lookup-content strong { color: var(--accent); font-weight: 600; }
  .lookup-content em { font-style: italic; color: var(--text-dim); }
  .lookup-content .ai-loading {
    padding: 2rem;
    display: flex; justify-content: center; gap: 0.6rem;
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-style: italic;
  }
  .lookup-content .ai-error {
    padding: 1.5rem;
    text-align: center;
    color: #c95151;
    font-family: 'Noto Serif KR', serif;
  }
  .strong-def-han .bib-meaning-row {
    margin-bottom: 0.5rem;
  }
  .strong-def-han .bib-meaning-label {
    color: var(--accent);
    font-weight: 700;
  }
  .lookup-foot {
    padding: 0.7rem 1.25rem;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-2);
  }
  .lookup-foot:empty { display: none; }
  .lookup-regen-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0.35rem 0.8rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
  }
  .lookup-regen-btn svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
  }
  .lookup-regen-btn:hover { color: var(--accent); border-color: var(--accent-dim); }

  /* Concordance — Strong's 단어 일치 모달 */
  .concord-open-btn {
    width: 100%;
    margin-top: 0.55rem;
    padding: 0.55rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    transition: border-color 0.15s, background 0.15s;
  }
  .concord-open-btn:hover { border-color: var(--accent-dim); background: var(--surface-2); }
  .concord-modal-body { max-width: 720px; }
  .concord-head {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    background: color-mix(in srgb, var(--surface-2) 30%, transparent);
    display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  }
  .concord-head .lemma {
    font-family: 'Noto Serif', 'Noto Serif Hebrew', serif;
    font-size: 1.6rem;
    color: var(--accent);
    font-weight: 700;
    letter-spacing: var(--ls-tight);
  }
  .concord-head .lemma.lang-hebrew {
    font-family: 'Noto Serif Hebrew', 'Noto Serif', serif;
    direction: rtl;
  }
  .concord-head .han {
    font-family: 'Noto Serif KR', serif;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 750;
  }
  .concord-head .translit {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: var(--text-base);
    color: var(--text-dim);
  }
  .concord-head .num {
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    padding: 0.2rem 0.6rem;
    border-radius: var(--r-full);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  }
  .concord-head .lang-chip { margin-bottom: 0; }

  .concord-stats {
    padding: 0.75rem 1.5rem;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-2); flex-wrap: wrap;
  }
  .concord-stats .concord-count {
    color: var(--accent);
    font-weight: 800;
  }
  .concord-stats .download-btn {
    padding: 0.35rem 0.8rem;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-2));
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    border-radius: var(--r-md);
    color: var(--accent);
    font-family: 'Noto Serif KR', serif;
    font-size: 0.78rem;
    font-weight: 700;
    transition: all 0.2s;
    cursor: pointer;
  }
  .concord-stats .download-btn:hover {
    background: color-mix(in srgb, var(--accent) 12%, var(--surface-2));
    border-color: var(--accent);
  }
  .concord-stats .progress {
    flex: 1;
    height: 6px;
    background: color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: var(--r-full);
    overflow: hidden;
    max-width: 200px;
  }
  .concord-stats .progress > span {
    display: block; height: 100%;
    background: var(--accent);
    transition: width 0.2s;
  }
  .concord-list {
    max-height: 62vh;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .concord-item {
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: var(--r-lg);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.015);
    transition: all 0.25s var(--ease-standard);
    position: relative;
    overflow: hidden;
  }
  .concord-item::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--accent);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .concord-item:hover, .concord-item.selected {
    background: color-mix(in srgb, var(--accent) 3%, var(--surface));
    border-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(0, 0, 0, 0.08), 0 0 0 1px color-mix(in srgb, var(--accent) 15%, transparent);
  }
  .concord-item:hover::before, .concord-item.selected::before {
    opacity: 1;
  }
  .concord-item .ref {
    font-family: 'Noto Serif KR', serif;
    font-weight: 750;
    color: var(--accent);
    font-size: 0.94rem;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .concord-item .ref-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin-left: 0.4rem;
    font-weight: 500;
  }
  .concord-item .ko-text {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    line-height: 1.65;
    color: var(--text);
    word-break: keep-all;
    margin-bottom: 0.35rem;
  }
  .concord-item .en-text {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-dim);
  }
  .concord-item .en-text .hl {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    padding: 1px 4px;
    border-radius: var(--r-xs);
    font-weight: 700;
  }
  .concord-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
  }
  .strong-han {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--accent);
    margin-bottom: 0.1rem;
  }
  .strong-translit {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: var(--text-md);
    color: var(--text);
    margin-bottom: 0.15rem;
  }
  .strong-pronun {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin-bottom: 0.85rem;
  }
  .strong-def {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text);
  }
  .strong-def b { color: var(--accent); }
  .strong-def el, .strong-def he {
    font-family: 'Noto Serif', 'Noto Serif Hebrew', serif;
    font-size: 1.15rem;
    font-style: normal;
    font-weight: 500;
  }
  .strong-def p { margin: 0.4rem 0; }
  .strong-def ol { padding-left: 1.4rem; margin: 0.3rem 0; }
  .strong-def li { margin: 0.2rem 0; }
  .strong-def a {
    color: var(--strong-color);
    text-decoration: none;
    cursor: pointer;
  }
  .strong-def a:hover { text-decoration: underline; }
  .strong-def .bdb_def, .strong-def .def, .strong-def .origin { color: var(--text-dim); font-size: 0.85em; }

  /* 상호참조 탭 / Cross-references tab */
  .xref-list { display: flex; flex-direction: column; gap: var(--space-2); }
  .xref-item {
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all 0.15s;
  }
  .xref-item:hover,
  .xref-item:focus-visible { border-color: var(--accent-dim); background: var(--surface-2); }
  .xref-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
    outline-offset: 3px;
  }
  .xref-ref {
    font-family: 'Noto Serif KR', serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--accent);
    margin-bottom: 0.3rem;
  }
  .xref-ref-en {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: var(--text-sm);
    color: var(--text-dim);
    margin-left: 0.4rem;
  }
  .xref-head {
    display: flex; align-items: baseline; gap: 0.4rem;
    margin-bottom: 0.35rem;
    flex-wrap: wrap;
  }
  .xref-cross {
    margin-left: auto;
    font-family: 'Inter', sans-serif;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.05rem 0.4rem;
    border-radius: var(--r-sm);
    background: var(--accent-bg, var(--surface-2));
    color: var(--accent);
    border: 1px solid var(--accent-dim);
  }
  .xref-preview { display: flex; flex-direction: column; gap: 0.3rem; }
  .xref-text {
    font-size: var(--text-sm);
    line-height: 1.6;
    word-break: keep-all;
  }
  .xref-text.ko {
    font-family: 'Noto Serif KR', serif;
    color: var(--text);
  }
  .xref-text.en {
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-base);
    color: var(--text-dim);
    font-style: italic;
  }
  .xref-text.loading { color: var(--text-faint); font-style: italic; }
  /* 미리보기 모드별 표시 */
  .xref-list.xp-ko .xref-text.en { display: none; }
  .xref-list.xp-en .xref-text.ko { display: none; }
  .xref-empty {
    text-align: center;
    color: var(--text-faint);
    font-style: italic;
    padding: 2rem 1rem;
    font-family: 'Noto Serif KR', serif;
  }
  .xref-more-btn {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    color: var(--text-dim);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
  }
  .xref-more-btn:hover { border-color: var(--accent-dim); color: var(--accent); }

  /* ================================
     설정 / Settings dropdown
     ================================ */
  .settings-popover {
    position: fixed;
    top: 60px;
    right: max(1rem, env(safe-area-inset-right));
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: 0.5rem 1rem 0.85rem;
    min-width: 300px;
    max-width: 340px;
    z-index: 95;
    display: none;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform-origin: top right;
  }
  .settings-popover.open {
    display: block;
    animation: settingsPop 0.22s var(--ease-spring);
  }
  .settings-popover.over-modal {
    z-index: 1000;
  }
  @keyframes settingsPop {
    0%   { opacity: 0; transform: scale(0.92) translateY(-8px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
  /* 모바일 — 좁은 화면에선 우측 끝까지 늘려서 잘림 방지 */
  @media (max-width: 480px) {
    .settings-popover {
      left: max(0.5rem, env(safe-area-inset-left));
      right: max(0.5rem, env(safe-area-inset-right));
      min-width: 0;
      max-width: none;
    }
  }
  .settings-section {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--text-faint);
    padding: 1rem 0 0.5rem;
    margin-bottom: 0.15rem;
    border: 0;
  }
  .settings-section:first-child { padding-top: 0.3rem; }
  /* 접힘 섹션 — details 기반 */
  .settings-group {
    margin-top: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 0.2rem;
  }
  .settings-group > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.65rem 0.1rem 0.55rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
    display: flex; justify-content: space-between; align-items: center;
    transition: color 0.12s;
  }
  .settings-group > summary::-webkit-details-marker { display: none; }
  .settings-group > summary:hover { color: var(--text-dim); }
  .settings-group > summary::after {
    content: "›";
    font-size: 1rem;
    color: var(--text-faint);
    transition: transform 0.18s;
    transform: rotate(0deg);
  }
  .settings-group[open] > summary::after { transform: rotate(90deg); }
  .settings-group > summary > .summary-text {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
  }
  .settings-group > summary .group-icon {
    width: 14px; height: 14px;
    opacity: 0.55;
    flex-shrink: 0;
  }
  .settings-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0;
    gap: 0.7rem;
  }
  .settings-row + .settings-row { border-top: 0; }
  .settings-row.block { display: block; padding: 0.4rem 0; }
  .settings-row.block .settings-label {
    display: block;
    margin-bottom: 0.35rem;
  }
  .settings-row.hint { padding: 0; margin-top: -0.15rem; margin-bottom: 0.4rem; }
  .settings-row.hint .settings-label {
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-style: italic;
    line-height: var(--lh-normal);
  }
  .settings-row-spaced { margin-top: 0.3rem; }
  .settings-select-full {
    width: 100%;
    max-width: none;
  }
  .settings-muted-value {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    color: var(--text-faint);
  }
  .settings-user-value {
    font-size: 0.8rem;
    color: var(--accent);
    font-family: inherit;
  }
  .settings-version-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
    color: var(--accent);
  }
  .settings-row.sync-live-row {
    align-items: flex-start;
  }
  .offline-readiness {
    width: 100%;
    padding: 0.72rem 0.78rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: color-mix(in srgb, var(--surface) 78%, transparent);
  }
  .offline-readiness-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.48rem;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-dim);
  }
  .offline-readiness-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .offline-readiness-percent {
    flex: 0 0 auto;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
  }
  .offline-readiness-track {
    height: 0.38rem;
    overflow: hidden;
    border-radius: var(--r-full);
    background: color-mix(in srgb, var(--line) 65%, transparent);
  }
  .offline-readiness-fill {
    display: block;
    width: 0%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-dim), var(--accent));
    transition: width 0.24s ease;
  }
  .sync-live {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.45rem;
    flex: 1.2;
    min-width: 0;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--text-faint);
    text-align: right;
  }
  .sync-live-text {
    min-width: 0;
  }
  .sync-live-dot {
    width: 0.44rem;
    height: 0.44rem;
    border-radius: var(--r-full);
    flex: 0 0 auto;
    background: var(--text-faint);
    opacity: 0.62;
  }
  .sync-live.sync-checking .sync-live-dot,
  .sync-live.sync-push .sync-live-dot,
  .sync-live.sync-receive .sync-live-dot {
    background: var(--accent);
    opacity: 1;
    animation: sync-live-pulse 1.15s ease-in-out infinite;
  }
  .sync-live.sync-error .sync-live-dot {
    background: #c95151;
    opacity: 1;
  }
  @keyframes sync-live-pulse {
    0%, 100% { transform: scale(0.82); opacity: 0.55; }
    50% { transform: scale(1.12); opacity: 1; }
  }
  @media (max-width: 640px) {
    .settings-row.sync-live-row {
      display: block;
    }
    .settings-row.sync-live-row .settings-label {
      display: block;
      margin-bottom: 0.28rem;
    }
    .sync-live {
      justify-content: flex-start;
      font-size: 0.69rem;
      text-align: left;
    }
    .offline-readiness-head {
      align-items: flex-start;
      font-size: 0.69rem;
    }
  }
  .settings-label {
    font-size: 0.88rem; color: var(--text);
    font-family: 'Noto Serif KR', serif;
    flex: 1; min-width: 0;
    word-break: keep-all;
    line-height: 1.4;
  }
  .seg {
    display: flex;
    background: var(--surface);
    border-radius: var(--r-sm);
    padding: 2px;
    /* 좁은 화면에서 버튼 라벨이 세로로 꺾이는 대신 가로 스크롤로 수용 */
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .seg::-webkit-scrollbar { display: none; }
  .seg button {
    padding: 0.3rem 0.6rem;
    border-radius: var(--r-xs);
    font-size: 0.75rem;
    color: var(--text-dim);
    white-space: nowrap;
    flex-shrink: 0;
  }
  .seg button.active {
    background: var(--surface-2);
    color: var(--accent);
  }
  /* v1098 — 테마 선택: 텍스트 세그먼트 → 색상 스와치 (각 테마의 실제 팔레트 미리보기) */
  .seg-swatch {
    background: none;
    padding: 0;
    gap: 2px;
  }
  .seg-swatch button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 3px 5px;
    background: none !important;
  }
  .swatch {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.8rem;
    line-height: 1;
    border: 1px solid rgba(128, 128, 128, 0.32);
    transition: box-shadow var(--duration-base) var(--ease-standard),
                transform var(--duration-base) var(--ease-spring);
  }
  .seg-swatch button:active .swatch { transform: scale(0.92); }
  .seg-swatch button.active .swatch {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
  }
  .swatch-name {
    font-size: 0.66rem;
    color: var(--text-faint);
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: color var(--duration-base) var(--ease-standard);
  }
  .seg-swatch button.active .swatch-name { color: var(--accent); font-weight: 700; }
  .swatch-auto {
    background: linear-gradient(135deg, #fafaf7 0%, #fafaf7 49.9%, #15140f 50.1%, #15140f 100%);
    color: #8a857a;
    text-shadow: 0 0 3px rgba(250, 250, 247, 0.45);
  }
  .swatch-dark  { background: #15140f; color: #e8e3d4; }
  .swatch-night {
    background: radial-gradient(circle at 68% 26%, rgba(217, 189, 115, 0.4), transparent 36%), #070b16;
    color: #d9bd73;
  }
  .swatch-sepia { background: #f4ecd8; color: #3a2e20; }
  .swatch-light { background: #fafaf7; color: #1a1a1a; border-color: rgba(0, 0, 0, 0.18); }
  #row-trans-hint { border-top: 0 !important; padding-bottom: 0.2rem; }
  .seg-fontsize button { padding: 0.3rem 0.4rem; font-size: var(--text-xs); }
  .settings-select {
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.78rem;
    padding: 0.3rem 0.55rem;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-family: inherit;
    max-width: 170px;
  }
  .settings-select:focus { outline: 1px solid var(--accent); }
  .settings-select optgroup { font-style: normal; color: var(--text-dim); }
  .settings-select option { color: var(--text); background: var(--bg); }
  .settings-toggle {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.32rem 0.85rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    font-size: 0.78rem;
    color: var(--text-dim);
    cursor: pointer;
    white-space: nowrap;       /* '꺼짐' 같은 짧은 글자 줄바꿈 방지 */
    flex-shrink: 0;             /* 라벨이 길어도 토글 버튼은 줄지 않음 */
    min-width: 56px;            /* 최소 너비 보장 */
  }
  .settings-toggle.on { color: var(--accent); border-color: var(--accent-dim); }
  .settings-action-btn svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    stroke-width: 1.75;
  }
  .settings-action-label {
    line-height: 1;
  }

  .settings-input {
    width: 100%;
    padding: 0.45rem 0.7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.78rem;
  }
  .settings-input:focus { outline: none; border-color: var(--accent-dim); }

  /* ================================
     모바일 / Mobile
     ================================ */
  /* v324c+ — viewport width 외 *터치 디바이스* 도 모바일로 인식 (any-pointer: coarse).
     Galaxy S25 같은 폰에서 어떤 설정으로 max-width 720px 이 안 잡히는 케이스 대응. */
  @media (max-width: 720px), (any-pointer: coarse) and (max-width: 1024px) {
    .reader { padding: max(0.42rem, calc(env(safe-area-inset-top) + 0.18rem)) 1rem 5rem; }
    [data-theme="night"] .reader {
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    }
    .verse-row {
      grid-template-columns: 1fr;
      gap: var(--space-2);
      padding: 0.7rem 0.5rem;
    }
    .verse-col.en { padding-left: 1rem; border-left: 2px solid var(--border); margin-top: 0.3rem; }
    .verse-col.orig { padding-left: 1rem; border-left: 2px solid var(--accent-dim); margin-top: 0.3rem; }
    .reader.show-orig .verse-row { grid-template-columns: 1fr; }
    .reader.single-ko .verse-col.en,
    .reader.single-en .verse-col.ko { display: none; }
    .reader.single-ko .verse-col.ko { padding-left: 0; border: 0; }
    .reader.single-en .verse-col.en { padding-left: 0; border: 0; }
    .chapter-head .chapter-num { font-size: 3rem; }
    .chapter-head-classic {
      margin-top: 0;
      padding-top: 0.04rem;
      scroll-margin-top: max(1rem, calc(env(safe-area-inset-top) + 0.7rem));
      margin-bottom: 0.76rem;
      padding-bottom: 0.24rem;
      overflow: visible;
    }
    .reader > .chapter-head-classic:first-child {
      margin-top: 0 !important;
    }
    .chapter-head-classic .ch-book-sub {
      padding-top: 0.03rem;
      margin-bottom: 0.3rem;
      font-size: 0.68rem;
      min-height: 1.1rem;
      line-height: 1.48;
      letter-spacing: 0.28em;
      overflow: visible;
    }
    .chapter-head-classic .ch-book-title {
      gap: 0.5rem;
      margin-bottom: 0.35rem;
      font-size: 1.48rem;
    }
    .chapter-head-classic .ch-book-title .en-italic {
      font-size: 1.25rem;
      margin-left: 0.1rem;
    }
    .chapter-head-classic .ch-divider {
      width: 48%;
      margin: 0.42rem auto;
    }
    .chapter-head-classic .ch-chapter-num {
      margin-top: 0.26rem;
      font-size: 1.12rem;
    }
    .chapter-head-classic .ch-chapter-num .ch-chapter-num-en {
      margin-left: 0.45rem;
      font-size: 0.95rem;
    }
    .chapter-head-classic .chapter-head-actions {
      margin-top: 0.48rem;
    }
    .ai-chapter-btn {
      min-height: 40px;
      padding: 0.42rem 0.95rem;
    }
    .ctx-card {
      margin-bottom: 0.72rem;
      border-radius: 12px;
    }
    .ctx-bar {
      min-height: 42px;
      padding: 0.48rem 0.68rem;
    }
    .topbar {
      display: grid;
      grid-template-columns: 44px minmax(0, 1fr) 44px;
      grid-template-areas: "back current info";
      padding: max(0.42rem, env(safe-area-inset-top)) 0.72rem 0.48rem;
      gap: 0.42rem;
      min-height: 58px;
      align-items: center;
      align-content: center;
      flex-wrap: nowrap;
      background: linear-gradient(180deg, rgba(21, 20, 15, 0.96) 0%, rgba(21, 20, 15, 0.84) 100%);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-bottom: 1px solid rgba(201, 169, 97, 0.18);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px rgba(0, 0, 0, 0.28);
      transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.34s ease;
    }
    .topbar.is-hidden {
      transform: none;
      opacity: 1;
      pointer-events: none;
      height: 0;
      min-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      overflow: visible;
      background: transparent;
      border-bottom-color: transparent;
      box-shadow: none;
    }
    .topbar.is-hidden .nav-back,
    .topbar.is-hidden .nav-current {
      transform: translateY(calc(-100% - 0.35rem));
      opacity: 0;
      pointer-events: none;
    }
    .topbar .brand {
      display: none;
    }
    .topbar .nav-back {
      grid-area: back;
      justify-self: start;
    }
    .topbar .nav-current {
      grid-area: current;
      min-width: 0;
      width: 100%;
      min-height: 42px;
      justify-content: center;
      padding: 0.5rem 0.82rem;
      color: var(--text);
      background: rgba(255, 255, 255, 0.045);
      border: 1px solid rgba(201, 169, 97, 0.22);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
    }
    .topbar .topbar-actions {
      position: fixed;
      left: 50%;
      right: auto;
      bottom: max(0.7rem, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      z-index: 90;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.24rem;
      width: max-content;
      max-width: calc(100vw - 1.2rem);
      padding: 0.34rem 0.4rem;
      margin-left: 0;
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--surface-2) 88%, transparent),
        color-mix(in srgb, var(--surface) 92%, transparent)
      );
      border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
      border-radius: 999px;
      box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34),
                  0 0 0 1px color-mix(in srgb, var(--text) 5%, transparent),
                  inset 0 1px 0 rgba(255, 255, 255, 0.06);
      backdrop-filter: blur(18px) saturate(160%);
      -webkit-backdrop-filter: blur(18px) saturate(160%);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.38s cubic-bezier(0.22, 1, 0.36, 1), transform 0.38s cubic-bezier(0.22, 1, 0.36, 1);
      transform: translateX(-50%) translateY(8px);
    }
    .topbar .reader-mobile-action-shelf {
      display: contents;
    }
    .topbar .topbar-actions #btn-bookmark {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .topbar.reading-tools-visible {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 230;
      background: transparent;
      border-bottom-color: transparent;
      box-shadow: none;
      pointer-events: auto;
    }
    .topbar.show-search {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 230;
      min-height: 100dvh;
      pointer-events: none;
    }
    .topbar.reading-tools-visible .nav-back,
    .topbar.reading-tools-visible .nav-current,
    .topbar.reading-tools-visible .topbar-actions,
    .topbar.reading-tools-visible .settings-popover.open,
    .topbar.show-search .settings-popover.open,
    .topbar.show-search .search-box {
      pointer-events: auto;
    }
    .topbar.reading-tools-visible:not(.show-search) .topbar-actions {
      opacity: 1;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }
    body.multi-sel-mode .topbar .topbar-actions,
    body.multi-sel-mode .topbar.reading-tools-visible:not(.show-search) .topbar-actions {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateX(-50%) translateY(8px) !important;
    }
    body.reader-state-surface .topbar .topbar-actions {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateX(-50%) translateY(8px) !important;
    }
    body.app-layer-open .topbar .topbar-actions {
      opacity: 0 !important;
      pointer-events: none !important;
      transform: translateX(-50%) translateY(8px) !important;
    }
    .topbar.reading-tools-visible:not(.show-search) .nav-back,
    .topbar.reading-tools-visible:not(.show-search) .nav-current {
      transform: translateY(calc(-100% - 0.35rem));
      opacity: 0;
      pointer-events: none;
    }
    .topbar.show-search .nav-back,
    .topbar.show-search .nav-current,
    .topbar.show-search .topbar-actions {
      opacity: 0;
      pointer-events: none;
      transform: translateY(calc(-100% - 0.35rem));
    }
    .topbar.show-search .topbar-actions {
      transform: translateX(-50%) translateY(8px);
    }
    .topbar .topbar-actions::before {
      content: "말씀 도구";
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .topbar .tool-label {
      display: none;
    }
    .topbar .icon-btn {
      box-sizing: border-box;
      width: 44px;
      height: 44px;
      color: color-mix(in srgb, var(--text) 72%, var(--accent) 28%);
      background: rgba(255, 255, 255, 0.035);
      border: 1px solid rgba(201, 169, 97, 0.2);
      border-radius: 999px;
    }
    .topbar .topbar-actions #btn-notes {
      width: 48px;
      height: 48px;
      color: var(--accent);
      background: color-mix(in srgb, var(--accent) 13%, var(--surface-2));
      border-color: color-mix(in srgb, var(--accent) 36%, transparent);
      box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 13%, transparent),
                  inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
    }
    .topbar .topbar-actions #btn-notes svg {
      width: 21px;
      height: 21px;
    }
    .topbar .topbar-actions .icon-btn:hover,
    .topbar .topbar-actions .icon-btn:focus-visible,
    .topbar .topbar-actions .icon-btn[aria-expanded="true"] {
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 14%, var(--surface-2));
      border-color: color-mix(in srgb, var(--accent) 40%, transparent);
      outline: none;
    }
    .topbar .topbar-actions .icon-btn:focus-visible {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
    }
    .topbar #btn-search-mobile {
      display: inline-flex;
    }
    .topbar #btn-picker-tools {
      display: inline-flex;
      width: 44px;
      min-width: 44px;
      padding: 0;
      color: color-mix(in srgb, var(--text) 72%, var(--accent) 28%);
      background: rgba(255, 255, 255, 0.035);
      border-color: rgba(201, 169, 97, 0.2);
    }
    .topbar #btn-picker-tools svg {
      flex: 0 0 auto;
    }
    .topbar .icon-btn:active {
      transform: translateY(1px);
      background: rgba(201, 169, 97, 0.1);
    }
    .topbar .nav-back:disabled { display: none; }
    #nav-current-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .search-box { display: none; }
    /* v891x — 모바일 검색: 본문 위 dim 레이어 없이 키보드 위에만 도킹. */
    .topbar.show-search::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: 93;
      background: transparent;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
      pointer-events: none;
    }
    .topbar.show-search .search-box {
      position: fixed;
      left: max(0.72rem, env(safe-area-inset-left));
      right: max(0.72rem, env(safe-area-inset-right));
      top: calc(env(safe-area-inset-top) + 0.72rem);
      bottom: auto; /* JS(visualViewport)가 키보드가 뜰 때만 키보드 위로 전환 */
      z-index: 94;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      grid-template-rows: auto minmax(0, 1fr);
      grid-template-areas:
        "input clear close"
        "results results results";
      align-items: center;
      gap: 0.42rem;
      width: auto;
      max-width: none;
      min-width: 0;
      max-height: min(64vh, 520px);
      padding: 0.46rem;
      background: color-mix(in srgb, var(--surface) 94%, #05070d);
      border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
      border-radius: 18px;
      box-shadow: 0 14px 42px rgba(0,0,0,0.36),
                  0 0 0 1px rgba(255,255,255,0.035) inset;
      opacity: 1;
      transform: translateY(0) scale(1);
      transition: top 0.18s ease-out, bottom 0.18s ease-out, transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.22s ease;
    }
    .topbar.show-search .search-box > svg { display: none; }  /* 카드에선 아이콘 생략(placeholder로 충분) */
    .topbar.show-search .search-box #search-input {
      grid-area: input;
      width: 100%;
      min-width: 0;
      height: 42px;
      box-sizing: border-box;
      font-size: 1.02rem;
      line-height: 1.35;
      padding: 0 0.88rem;
      border-radius: 14px;
      background: color-mix(in srgb, var(--bg) 42%, rgba(255,255,255,0.04));
      border: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
      color: var(--text);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
    }
    .topbar.show-search .search-box #search-input:focus {
      outline: none;
      border-color: color-mix(in srgb, var(--accent) 58%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent),
                  inset 0 1px 0 rgba(255,255,255,0.045);
    }
    .topbar.show-search .search-inline-clear,
    .topbar.show-search .search-inline-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      min-width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--border) 68%, transparent);
      background: color-mix(in srgb, var(--surface-2) 72%, transparent);
      color: var(--text-dim);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.045);
    }
    .topbar.show-search .search-inline-clear svg,
    .topbar.show-search .search-inline-close svg {
      width: 18px;
      height: 18px;
      stroke-width: 2;
    }
    .topbar.show-search .search-inline-clear {
      grid-area: clear;
    }
    .topbar.show-search .search-inline-close {
      grid-area: close;
      color: var(--accent);
      border-color: color-mix(in srgb, var(--accent) 34%, transparent);
      background: color-mix(in srgb, var(--accent) 10%, var(--surface-2));
    }
    .topbar.show-search .search-inline-clear[hidden] {
      display: none;
    }
    .topbar.show-search .search-box .search-results {
      grid-area: results;
      width: 100%;
      position: static;
      margin: 0;
      min-width: 0;
      max-height: min(42vh, 360px);
      overflow-y: auto;
      overscroll-behavior: contain;
      border-radius: 14px;
      box-shadow: none;
      transform: none;
      opacity: 1;
      pointer-events: auto;
      mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 18px), transparent 100%);
      -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 18px), transparent 100%);
    }
    .topbar.show-search .search-results .res-head {
      padding: 0.62rem 0.82rem;
      font-size: 0.72rem;
    }
    .topbar.show-search .search-results .res-list {
      padding: 0.22rem 0;
    }
    .topbar.show-search .search-results .res-item {
      padding: 0.68rem 0.86rem;
      border-left-width: 3px;
    }
    .topbar.show-search .search-results .res-item:hover,
    .topbar.show-search .search-results .res-item.selected {
      padding-left: 1rem;
    }
    .topbar.show-search .search-results .res-ref {
      font-size: 0.84rem;
      margin-bottom: 0.18rem;
    }
    .topbar.show-search .search-results .res-snippet {
      font-size: 0.88rem;
      line-height: 1.55;
    }
    .topbar.show-search .search-results .res-lexicon .res-snippet {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .more-menu-pop {
      top: auto;
      right: max(0.8rem, env(safe-area-inset-right));
      bottom: calc(max(0.7rem, env(safe-area-inset-bottom)) + 3.9rem);
    }
    .settings-popover {
      top: auto;
      left: max(0.7rem, env(safe-area-inset-left));
      right: max(0.7rem, env(safe-area-inset-right));
      bottom: calc(max(0.7rem, env(safe-area-inset-bottom)) + 4.15rem);
      min-width: 0;
      max-width: none;
      max-height: min(68dvh, calc(100dvh - 7rem - env(safe-area-inset-bottom)));
      border-radius: 22px;
      transform-origin: bottom right;
    }
    .reader {
      padding-bottom: calc(7.5rem + env(safe-area-inset-bottom)) !important;
    }
    /* 사이드 패널 → 바텀 시트 */
    .side-panel {
      top: auto; right: 0; left: 0; bottom: 0;
      max-width: 100%;
      height: 82vh; max-height: 82vh;
      border-left: 0;
      border-top: 1px solid var(--border);
      border-radius: 18px 18px 0 0;
      transform: translateY(100%);
      box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
      touch-action: none;
    }
    .side-panel.open { transform: translateY(0); }
    .side-panel.dragging { transition: none; }
    .side-grip {
      display: flex; justify-content: center;
      padding: 0.55rem 0 0.25rem;
      cursor: grab;
    }
    .side-grip::before {
      content: "";
      width: 38px; height: 4px;
      background: var(--border);
      border-radius: 2px;
    }
    .side-head { padding-top: 0.4rem; }
    .tab-btn { padding: 0.85rem 0.9rem; font-size: var(--text-base); }
    .hl-picker {
      gap: 0.42rem;
      align-items: center;
    }
    .hl-picker button {
      width: 40px;
      height: 40px;
      min-width: 40px;
      min-height: 40px;
      border-width: 2px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
      touch-action: manipulation;
    }
    .hl-picker .hl-clear {
      height: 40px;
      min-height: 40px;
      padding: 0 0.72rem;
      border-radius: var(--r-full);
    }
    .verse-text.ko { font-size: 1rem; }
    .verse-text.en { font-size: var(--text-md); }
    /* 모바일에서 뒤로 버튼 더 또렷이 */
    .nav-back { font-size: 1.5rem; }
    #picker-modal.open {
      align-items: stretch;
      justify-content: stretch;
      padding: 0;
      overflow: hidden;
      background: #f7f8fa;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    #picker-modal.open > .scripture-picker {
      animation: mobilePickerRise 0.35s cubic-bezier(0.16, 1, 0.3, 1);
      width: 100vw;
      max-width: none;
      border-radius: 0 !important;
    }
    @keyframes mobilePickerRise {
      0% { opacity: 0; transform: translateY(32px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .scripture-picker {
      width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      border: 0;
      border-radius: 0 !important;
      background: #f7f8fa;
      box-shadow: none;
      color: #353b42;
      font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
    }
    .scripture-picker .modal-head {
      min-height: 56px;
      padding: 0 1rem;
      background: #f8f9fb;
      border-bottom: 1px solid #e1e6eb;
      color: #2f3b45;
      flex: 0 0 auto;
      border-radius: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
    }
    .scripture-picker .modal-head h2 {
      font-size: clamp(1.05rem, 4.8vw, 1.28rem);
      font-weight: 700;
      color: var(--accent);
      line-height: 1;
      letter-spacing: -0.02em;
    }
    .scripture-picker .modal-head-iconbtn {
      color: #5d6470;
      width: 40px;
      height: 40px;
      border-radius: var(--r-full);
      background: transparent;
      border: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 2;
      pointer-events: auto;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      transition: all 0.2s;
    }
    .scripture-picker .modal-head-iconbtn:active {
      background: rgba(0, 0, 0, 0.05);
      transform: scale(0.92);
    }
    .scripture-picker .modal-head-iconbtn svg {
      width: 24px;
      height: 24px;
      stroke-width: 2.0;
    }
    #picker-books-view {
      display: flex;
      flex-direction: column;
      height: calc(100dvh - 56px);
      min-height: 0;
      background: #f7f8fa;
    }
    .picker-current-strip {
      display: none;
    }
    .picker-search-row {
      order: 2;
      padding: 0.55rem 0.65rem calc(0.55rem + env(safe-area-inset-bottom));
      background: var(--picker-bg-alt, #eef3f6) !important;
      border-top: 1px solid var(--picker-border, #dbe4ea) !important;
      border-bottom: 0;
      flex: 0 0 auto;
      box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
    }
    .picker-search {
      position: static;
      width: 100%;
      height: 42px;
      margin: 0 0 0.5rem;
      padding: 0 0.85rem;
      opacity: 1;
      pointer-events: auto;
      border: 1px solid var(--picker-border, #cfd9e1) !important;
      border-radius: var(--r-md);
      background: var(--picker-bg, #fff) !important;
      color: var(--picker-text, #2f3b45) !important;
      font-family: inherit;
      font-size: 16px;
      box-shadow: inset 0 1.5px 3px rgba(0,0,0,0.03);
      transition: all 0.2s var(--ease-standard);
    }
    .picker-search:focus {
      border-color: var(--picker-accent, var(--accent)) !important;
      background: var(--picker-bg, #fff) !important;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--picker-accent, var(--accent)) 20%, transparent),
                  inset 0 1px 2px rgba(0,0,0,0.02);
    }
    .picker-quick-samples { display: none; }
    .picker-quick-samples {
      gap: var(--space-1);
      font-size: var(--text-xs);
    }
    .picker-quick-samples button {
      padding: 0.18rem 0.4rem;
      font-size: var(--text-xs);
    }
    .picker-route {
      order: 1;
      display: grid !important;
      grid-template-columns: 60% 20% 20% !important;
      grid-template-rows: 1fr;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      max-height: none !important;
      overflow: hidden !important;
      background: var(--picker-bg, #fff) !important;
      /* Regression check matcher helper for scripture picker:
         @media (max-width: 720px)
         .picker-route { grid-template-columns: 60% 20% 20% }
      */
    }
    .picker-books-column,
    .picker-chapters-view {
      width: auto !important;
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      border-right: 1px solid var(--picker-border, #e1e6eb) !important;
      border-bottom: 0 !important;
      background: var(--picker-bg, #fff) !important;
      overflow: hidden !important;
    }
    .picker-verses-view {
      width: auto !important;
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      border-right: 0 !important;
      border-bottom: 0 !important;
      background: var(--picker-bg, #fff) !important;
      overflow: hidden !important;
    }
    .picker-categorized,
    .chapter-grid,
    .picker-verse-grid {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }
    #picker-back {
      display: none !important;
    }
    .picker-panel-head,
    .picker-chapter-head {
      display: none;
    }
    .picker-panel-title,
    .picker-chapter-title {
      font-size: var(--text-sm);
    }
    .picker-panel-sub,
    .picker-chapter-sub,
    .picker-chapter-hint {
      display: none;
    }
    .testament-tabs {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.24rem;
      padding: 0.34rem;
      background: var(--picker-bg-alt, #f8f9fb) !important;
      border-bottom: 1px solid var(--picker-border, #dde2e8) !important;
      flex: 0 0 auto;
    }
    .testament-tabs button {
      min-height: 44px;
      padding: 0.4rem 0.2rem;
      border: 1px solid transparent;
      border-radius: var(--r-sm);
      background: transparent;
      color: var(--picker-text-dim, #68707a) !important;
      font-family: inherit;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0;
      transition: all 0.2s;
    }
    .testament-tabs button.active {
      border-color: var(--picker-accent, var(--accent)) !important;
      background: var(--picker-bg, #fff) !important;
      color: var(--picker-accent, var(--accent)) !important;
      box-shadow: 0 2px 4px rgba(0,0,0,0.04);
    }
    .testament-tabs button:hover {
      color: var(--picker-text, #2f3b45) !important;
    }
    .picker-recent { display: none; }
    .picker-cat { margin: 0; }

    .picker-section-label {
      height: 32px;
      margin: 0;
      padding: 0 0.85rem;
      border: 0;
      border-top: 1px solid var(--picker-border, #e1e6eb) !important;
      border-bottom: 1px solid var(--picker-border, #e1e6eb) !important;
      background: var(--picker-bg-alt, #eef3f6) !important;
      color: var(--picker-text-dim, #5d6470) !important;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-size: 0.76rem;
      font-weight: 700;
    }
    .picker-section-label .ko-name { display: none; }

    .recent-chip {
      padding: 0.3rem 0.44rem;
      font-size: var(--text-xs);
    }
    .chapter-grid,
    .picker-verse-grid {
      display: block;
      flex: 1 1 auto;
      padding: 0;
      max-height: none;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .chapter-item,
    .verse-item {
      width: 100%;
      height: 66px;
      aspect-ratio: auto;
      border: 0;
      border-bottom: 1px solid var(--picker-border, #eef2f5) !important;
      border-radius: 0;
      background: var(--picker-bg, #fff) !important;
      color: var(--picker-text, #4a545e) !important;
      font-family: inherit;
      font-size: clamp(0.95rem, 4.1vw, 1.16rem);
      font-weight: 600;
      box-shadow: none;
      transition: background 0.15s, color 0.15s, transform 0.1s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .chapter-item:active,
    .verse-item:active {
      background: var(--picker-bg-alt, #f7f9fa) !important;
      transform: scale(0.96);
    }
    .chapter-item::after { content: "장"; margin-left: 0.12em; font-size: 0.85em; opacity: 0.8; font-weight: 500; }
    .verse-item::after { content: "절"; margin-left: 0.12em; font-size: 0.85em; opacity: 0.8; font-weight: 500; }

    .chapter-item.current,
    .chapter-item.target,
    .verse-item.current,
    .verse-item.target {
      background: color-mix(in srgb, var(--picker-accent, var(--accent)) 10%, var(--picker-bg, #fff)) !important;
      border-bottom-color: color-mix(in srgb, var(--picker-accent, var(--accent)) 15%, var(--picker-border, #eef2f5)) !important;
      color: var(--picker-accent, var(--accent)) !important;
      box-shadow: none;
      font-weight: 800;
    }
    .picker-verse-loading,
    .picker-empty {
      padding: 1.5rem 0.85rem;
      color: var(--picker-text-dim, #77828c) !important;
      font-size: var(--text-sm);
      background: var(--picker-bg, #fff) !important;
      text-align: center;
    }
    .picker-mobile-keypad {
      display: block;
    }
    .picker-mobile-status {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 34px 40px;
      gap: var(--space-2);
      align-items: center;
      margin-bottom: 0.55rem;
    }
    .picker-mobile-label {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--picker-border, color-mix(in srgb, var(--accent) 20%, #cfd9e1)) !important;
      border-radius: var(--r-md);
      background: var(--picker-bg, #fff) !important;
      color: var(--picker-accent, var(--accent)) !important;
      font-family: inherit;
      font-size: clamp(0.92rem, 3.8vw, 1.08rem);
      font-weight: 700;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
      transition: all 0.2s;
    }
    .picker-mobile-label:active {
      transform: scale(0.97);
      background: color-mix(in srgb, var(--picker-accent, var(--accent)) 4%, var(--picker-bg, #fff)) !important;
    }
    .picker-mobile-clear,
    .picker-mobile-keyboard,
    .picker-keypad-back {
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0;
      color: #5d6470;
      font-family: inherit;
      background: transparent;
      cursor: pointer;
    }
    .picker-mobile-clear {
      width: 32px;
      height: 32px;
      border-radius: var(--r-full);
      justify-self: center;
      color: #fff !important;
      background: var(--picker-text-dim, #a8adb0) !important;
      line-height: 1;
      transition: all 0.2s;
    }
    .picker-mobile-clear svg {
      width: 15px;
      height: 15px;
      stroke-width: 1.8;
    }
    .picker-mobile-clear:active {
      transform: scale(0.88);
      background: #909598;
    }
    .picker-mobile-keyboard {
      width: 42px;
      height: 42px;
      border-radius: var(--r-md);
      background: var(--picker-bg, #fff) !important;
      border: 1px solid var(--picker-border, #cfd9e1) !important;
      box-shadow: 0 2px 4px rgba(0,0,0,0.03);
      transition: all 0.2s;
    }
    .picker-mobile-keyboard svg {
      width: 19px;
      height: 19px;
      stroke-width: 1.7;
    }
    .picker-mobile-keyboard:active {
      transform: scale(0.92);
      background: var(--picker-bg-alt, #f7f9fa) !important;
    }
    .picker-keypad-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr) 1fr 1.1fr;
      gap: 0.38rem;
    }
    .picker-keypad-key,
    .picker-keypad-mode,
    .picker-keypad-back {
      min-height: 52px;
      border: 0;
      border-radius: var(--r-md);
      background: var(--picker-bg, #fff) !important;
      color: var(--picker-text, #2f3b45) !important;
      font-family: inherit;
      font-size: clamp(1.24rem, 5.8vw, 1.62rem);
      font-weight: 500;
      box-shadow: 0 1.5px 3px rgba(0,0,0,0.06), 0 0 0 0.5px rgba(0,0,0,0.02);
      transition: all 0.1s var(--ease-standard);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .picker-keypad-key:active {
      transform: scale(0.94);
      background: var(--picker-bg-alt, #eef2f5) !important;
      box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
    }
    .picker-keypad-mode {
      grid-column: 4 / 6;
      font-size: clamp(0.98rem, 4.8vw, 1.25rem);
      font-weight: 700;
      color: #fff;
      background: var(--accent);
      box-shadow: 0 3px 6px color-mix(in srgb, var(--accent) 25%, transparent);
    }
    .picker-keypad-mode:active {
      transform: scale(0.95);
      background: color-mix(in srgb, var(--accent) 90%, #000);
      box-shadow: 0 1.5px 3px color-mix(in srgb, var(--accent) 20%, transparent);
    }
    .picker-keypad-mode:disabled {
      color: var(--picker-text-dim, #a0a6ad) !important;
      background: var(--picker-bg-alt, #e9ecef) !important;
      box-shadow: none;
      cursor: not-allowed;
    }
    .picker-keypad-back {
      grid-column: 5;
      grid-row: 3;
      color: var(--picker-text-dim, #5d6470) !important;
      background: var(--picker-bg-alt, #e9ecef) !important;
      box-shadow: 0 1.5px 3px rgba(0,0,0,0.04);
    }
    .picker-keypad-back svg {
      width: 20px;
      height: 20px;
      stroke-width: 1.75;
    }
    .picker-keypad-back:active {
      transform: scale(0.94);
      background: var(--picker-bg, #dbe0e5) !important;
    }
  }

  /* 폰트 크기 — 6단계 */
  .reader.font-xs .verse-text.ko { font-size: var(--text-sm); line-height: var(--lh-verse); }
  .reader.font-xs .verse-text.en { font-size: var(--text-base); line-height: 1.75; }
  .reader.font-sm .verse-text.ko { font-size: var(--text-base); }
  .reader.font-sm .verse-text.en { font-size: var(--text-md); }
  .reader.font-lg .verse-text.ko { font-size: 1.18rem; }
  .reader.font-lg .verse-text.en { font-size: 1.3rem; }
  .reader.font-xl .verse-text.ko { font-size: 1.35rem; line-height: 2.1; }
  .reader.font-xl .verse-text.en { font-size: 1.5rem; line-height: 2.0; }
  .reader.font-xxl .verse-text.ko { font-size: 1.55rem; line-height: 2.2; }
  .reader.font-xxl .verse-text.en { font-size: 1.7rem; line-height: 2.1; }

  /* 모바일 본문 글자 크기 — 데스크톱보다 한 단계 차분하게 */
  @media (max-width: 720px) {
    .reader.font-xs .verse-text.ko { font-size: var(--text-sm); line-height: 1.8; }
    .reader.font-xs .verse-text.en { font-size: 0.9rem; line-height: 1.72; }
    .reader.font-sm .verse-text.ko { font-size: 0.9rem; line-height: 1.86; }
    .reader.font-sm .verse-text.en { font-size: 0.96rem; line-height: 1.78; }
    .reader.font-md .verse-text.ko { font-size: 0.94rem; line-height: 1.9; }
    .reader.font-md .verse-text.en { font-size: 1rem; line-height: 1.82; }
    .reader.font-lg .verse-text.ko { font-size: 1.04rem; line-height: 1.96; }
    .reader.font-lg .verse-text.en { font-size: 1.11rem; line-height: 1.88; }
    .reader.font-xl .verse-text.ko { font-size: 1.16rem; line-height: 2.02; }
    .reader.font-xl .verse-text.en { font-size: 1.24rem; line-height: 1.94; }
    .reader.font-xxl .verse-text.ko { font-size: 1.28rem; line-height: 2.08; }
    .reader.font-xxl .verse-text.en { font-size: 1.36rem; line-height: 2; }
  }

  /* 스크롤바 */
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

  /* 절 참조 호버 미리보기 */
  .verse-tip {
    position: fixed;
    z-index: 230;
    max-width: 360px;
    min-width: 220px;
    padding: 0.7rem 0.9rem;
    background: var(--surface-2);
    border: 1px solid var(--accent-dim);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    line-height: 1.55;
    font-family: 'Noto Serif KR', serif;
    color: var(--text);
  }
  .verse-tip.show { opacity: 1; transform: translateY(0); }
  .verse-tip .vt-ref {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--accent);
    margin-bottom: 0.35rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.3rem;
  }
  .verse-tip .vt-text {
    font-size: 0.9rem;
    color: var(--text);
  }
  .verse-tip .vt-line-ko {
    display: block;
    color: var(--text);
  }
  .verse-tip .vt-line-en {
    display: block;
    margin-top: 0.16rem;
    color: var(--text-dim);
    font-family: 'Cormorant Garamond', serif;
    font-size: var(--text-sm);
    font-style: italic;
    line-height: 1.45;
  }
  .verse-tip .vt-text .vt-vnum {
    color: var(--accent);
    font-weight: 600;
    font-size: var(--text-xs);
    margin: 0 0.3rem 0 0;
    vertical-align: 1px;
  }
  .verse-tip .vt-text + .vt-text { margin-top: 0.3rem; }
  .verse-tip .vt-loading {
    font-size: var(--text-sm);
    color: var(--text-faint);
    font-style: italic;
  }

  /* Strong's 호버 툴팁 */
  .strong-tip {
    position: fixed;
    z-index: 220;
    max-width: 280px;
    min-width: 180px;
    padding: 0.6rem 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.32);
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    line-height: 1.45;
  }
  .strong-tip.show { opacity: 1; transform: translateY(0); }
  .strong-tip .tip-lang { margin-bottom: 0.3rem; }
  .strong-tip .tip-lang .lang-chip { margin-bottom: 0; }
  .strong-tip .tip-lemma {
    font-family: 'Noto Serif', serif;
    font-size: 1.25rem;
    color: var(--accent);
    margin-bottom: 0.15rem;
    direction: auto;
    line-height: var(--lh-tight);
  }
  .strong-tip .tip-lemma.lang-hebrew {
    font-family: 'Noto Serif Hebrew', 'Noto Serif', serif;
    direction: rtl;
    text-align: right;
    font-size: var(--text-xl);
  }
  .strong-tip .tip-lemma.lang-greek { font-family: 'Noto Serif', serif; }
  .strong-tip .tip-translit {
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    color: var(--text);
    display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: baseline;
  }
  .strong-tip .tip-translit .dim {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    color: var(--text-dim);
    font-size: var(--text-sm);
  }
  .strong-tip .tip-def-han {
    margin-top: 0.45rem;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.88rem;
    color: var(--text);
    line-height: var(--lh-normal);
  }
  .strong-tip .tip-def-han:empty { display: none; }
  .strong-tip .tip-def {
    margin-top: 0.25rem;
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 0.78rem;
    color: var(--text-faint);
  }
  .strong-tip .tip-def:empty { display: none; }
  .strong-tip .tip-foot {
    margin-top: 0.55rem;
    padding-top: 0.4rem;
    border-top: 1px dashed var(--border);
    font-family: 'Inter', sans-serif;
    font-size: 0.65rem;
    color: var(--text-faint);
    text-align: right;
  }

  /* 토스트 */
  .toast {
    position: fixed;
    bottom: 2rem; left: 50%;
    transform: translateX(-50%) translateY(120%);
    background: var(--surface);
    border: 1px solid var(--accent-dim);
    color: var(--text);
    padding: 0.7rem 1.2rem;
    border-radius: var(--r-full);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-base);
    box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 0 1px rgba(201,169,97,0.1);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
    pointer-events: none;
    max-width: calc(100vw - 2rem);
    text-align: center;
  }
  .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .return-note-chip {
    position: fixed;
    right: 1rem;
    bottom: calc(1.1rem + env(safe-area-inset-bottom));
    z-index: 85;
    display: inline-flex;
    align-items: center;
    max-width: min(420px, calc(100vw - 2rem));
    border: 1px solid var(--border);
    border-radius: var(--r-full);
    background: linear-gradient(180deg, var(--surface-2), var(--surface));
    box-shadow: 0 6px 18px rgba(0,0,0,0.14);
    backdrop-filter: blur(12px);
    overflow: hidden;
  }
  .return-note-chip[hidden] { display: none; }
  .return-note-btn {
    min-width: 0;
    min-height: 44px;
    padding: 0.6rem 0.7rem 0.6rem 0.92rem;
    border: 0;
    background: transparent;
    color: var(--text);
    font-family: 'Noto Serif KR', serif;
    font-size: var(--text-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    cursor: pointer;
  }
  .return-note-icon {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    stroke-width: 1.8;
    color: color-mix(in srgb, var(--accent) 86%, var(--text) 14%);
  }
  .return-note-btn:hover {
    background: var(--surface-2);
    color: var(--text);
  }
  .return-note-btn:focus-visible,
  .return-note-dismiss:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
    outline-offset: 2px;
  }
  .return-note-dismiss {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin-right: 0.22rem;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 0;
    cursor: pointer;
  }
  .return-note-dismiss svg {
    width: 13px;
    height: 13px;
    stroke-width: 1.8;
  }
  .return-note-dismiss:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--text-faint);
  }
  /* v324c+ — 같은 강화: width + (terminal: coarse pointer + ≤1024px) */
  @media (max-width: 720px), (any-pointer: coarse) and (max-width: 1024px) {
    .toast { bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
    .return-note-chip {
      left: 50%;
      right: auto;
      bottom: calc(0.8rem + env(safe-area-inset-bottom));
      transform: translateX(-50%);
      max-width: calc(100vw - 1.5rem);
    }
    .return-note-btn { font-size: var(--text-sm); }
  }

  @media (min-width: 721px) {
    .topbar #btn-search-mobile,
    .topbar #btn-picker-tools {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .topbar [data-mobile-reader-tool="true"] {
      display: none !important;
      visibility: hidden !important;
      pointer-events: none !important;
    }
    .topbar .topbar-actions {
      position: static;
      left: auto;
      right: auto;
      bottom: auto;
      transform: none !important;
      opacity: 1;
      pointer-events: auto;
      width: auto;
      max-width: none;
    }
  }

  /* Desktop has a dedicated book/chapter picker in the center; mobile-only
     reader tools must never leak into the top-right desktop action capsule. */
  @media (min-width: 721px), (hover: hover) and (pointer: fine) {
    .topbar .reader-mobile-only-action,
    .topbar #btn-search-mobile,
    .topbar #btn-picker-tools,
    .topbar [data-mobile-reader-tool="true"] {
      display: none !important;
      visibility: hidden !important;
      inline-size: 0 !important;
      block-size: 0 !important;
      min-width: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
      pointer-events: none !important;
    }
  }

  /* Desktop final lock: the right action capsule is not a mobile tool shelf.
     Keep only the three quiet desktop controls here; the Scripture catalog
     remains the centered book/chapter picker, never a stray right-side icon. */
  @media (min-width: 721px), (hover: hover) and (pointer: fine) {
    .topbar .reader-mobile-action-shelf {
      display: none !important;
      visibility: hidden !important;
      inline-size: 0 !important;
      block-size: 0 !important;
      min-width: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
      pointer-events: none !important;
    }
    .topbar .topbar-actions {
      display: inline-flex !important;
      align-items: center;
      gap: 2px;
      position: static !important;
      left: auto !important;
      right: auto !important;
      bottom: auto !important;
      width: auto !important;
      max-width: none !important;
      margin-left: auto;
      padding: 2px;
      border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
      border-radius: 999px;
      background: linear-gradient(180deg,
        color-mix(in srgb, var(--surface-2) 88%, var(--text) 5%),
        color-mix(in srgb, var(--surface-2) 94%, var(--bg) 6%)
      );
      box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow) 20%, transparent),
                  inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
      transform: none !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    .topbar .topbar-actions > :not(:where(#btn-notes, #btn-more-menu, #btn-settings)) {
      display: none !important;
      visibility: hidden !important;
      inline-size: 0 !important;
      block-size: 0 !important;
      min-width: 0 !important;
      min-height: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      overflow: hidden !important;
      pointer-events: none !important;
    }
    .topbar .topbar-actions > :where(#btn-notes, #btn-more-menu, #btn-settings) {
      display: inline-flex !important;
      visibility: visible !important;
      inline-size: 34px;
      block-size: 34px;
      min-width: 34px;
      min-height: 34px;
      border-radius: 999px;
      color: color-mix(in srgb, var(--text) 94%, var(--accent) 6%);
      background: transparent;
      border: 0;
    }
    .topbar .topbar-actions > :where(#btn-notes, #btn-more-menu, #btn-settings) svg {
      opacity: 1;
    }
    .topbar .topbar-actions > :where(#btn-notes, #btn-more-menu, #btn-settings):hover,
    .topbar .topbar-actions > :where(#btn-notes, #btn-more-menu, #btn-settings):focus-visible,
    .topbar .topbar-actions > :where(#btn-notes, #btn-more-menu, #btn-settings)[aria-expanded="true"] {
      color: var(--text);
      background: color-mix(in srgb, var(--accent) 13%, transparent);
      outline: none;
    }
    .topbar .topbar-actions::before {
      content: none;
    }
  }

  /* ==========================================================================
     데스크탑 성경 목차선택(Scripture Picker) 프리미엄 UX/UI 대개편
     ========================================================================== */
  @media (min-width: 721px) {
    /* 0. 데스크탑 전용 와이드 3열 모달 사이즈 및 플로팅 글래스모피즘 효과 */
    #picker-modal.open {
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      background: rgba(0, 0, 0, 0.4) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
    }
    #picker-modal.open > .scripture-picker {
      width: 1020px !important;
      height: min(86vh, 880px) !important;
      max-width: 95vw !important;
      max-height: 90vh !important;
      border-radius: var(--r-xl) !important;
      margin: 0 auto;
      box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22),
                  0 0 0 1px color-mix(in srgb, var(--border) 50%, transparent) !important;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: modalRise 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    }

    /* 데스크탑 뷰에서 모달 내부 레이아웃 높이 가득 채우고 flex 컨테이너 지정 */
    #picker-books-view {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      min-height: 0 !important;
      background: var(--surface) !important;
      flex: 1 1 auto !important;
    }

    /* 데스크탑 모드 검색창 행 디자인 고도화 */
    .picker-search-row {
      order: 0 !important;
      padding: 0.6rem 1.25rem !important;
      background: var(--surface) !important;
      border-top: 0 !important;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
      flex: 0 0 auto !important;
      box-shadow: none !important;
    }
    .picker-search {
      margin: 0 !important;
      font-size: var(--text-base) !important;
      height: 44px !important;
      border-radius: var(--r-lg) !important;
      background: var(--surface-2) !important;
      border: 1px solid color-mix(in srgb, var(--border) 70%, transparent) !important;
      color: var(--text) !important;
    }
    .picker-quick-samples {
      display: grid !important;
      grid-template-columns: auto repeat(3, max-content) !important;
      justify-content: start !important;
      align-items: center !important;
      gap: 0.38rem !important;
      margin-top: 0.52rem !important;
      font-size: 0.76rem !important;
      color: var(--text-dim) !important;
    }
    .picker-quick-samples span {
      padding-right: 0.22rem !important;
      line-height: 1 !important;
    }
    .picker-quick-samples button {
      background: var(--surface-2) !important;
      border: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
      border-radius: var(--r-full) !important;
      min-height: 28px !important;
      padding: 0 0.62rem !important;
      font-size: var(--text-xs) !important;
      color: var(--text) !important;
      cursor: pointer !important;
      transition: all 0.2s ease !important;
    }
    .picker-quick-samples button:hover {
      background: color-mix(in srgb, var(--accent) 8%, var(--surface-2)) !important;
      border-color: var(--accent-dim) !important;
    }

    /* 1. 데스크탑 프리미엄 와이드 3열 격자 레이아웃 설계 */
    .picker-route {
      display: grid !important;
      grid-template-columns: 1.5fr 0.85fr 0.85fr !important;
      gap: 0px !important;
      width: 100% !important;
      height: 100% !important;
      background: var(--surface) !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
    }

    .picker-books-column,
    .picker-chapters-view,
    .picker-verses-view {
      width: auto !important;
      height: 100% !important;
      flex: 1 1 auto !important;
      border-right: 1px solid color-mix(in srgb, var(--border) 40%, transparent) !important;
      border-bottom: 0 !important;
      background: var(--surface) !important;
      display: flex !important;
      flex-direction: column !important;
      min-height: 0 !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    .picker-verses-view {
      border-right: 0 !important;
    }

    /* 각 스텝별 내부 스크롤 가능한 뷰포트를 모달 하단 높이에 정확히 매칭시킴 */
    .picker-categorized,
    .chapter-grid,
    .picker-verse-grid {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-y: auto !important;
    }

    /* 데스크탑 3열 항상 노출 보장 및 모바일용 단독 렌더링 클래스 무력화 */
    .picker-route.step-book .picker-books-column,
    .picker-route.step-book .picker-chapters-view,
    .picker-route.step-book .picker-verses-view,
    .picker-route.step-chapter .picker-books-column,
    .picker-route.step-chapter .picker-chapters-view,
    .picker-route.step-chapter .picker-verses-view,
    .picker-route.step-verse .picker-books-column,
    .picker-route.step-verse .picker-chapters-view,
    .picker-route.step-verse .picker-verses-view {
      display: flex !important;
      animation: none !important;
    }

    /* 단계별 스마트 톤다운 가이드 이식 (직관적인 비주얼 하이어라키 제공) */
    /* 책 선택 전 (step-book) -> 2열(장) & 3열(절) 톤다운 */
    .picker-route.step-book .picker-chapters-view {
      opacity: 0.45 !important;
    }
    .picker-route.step-book .picker-verses-view {
      opacity: 0.35 !important;
    }
    /* 장 선택 전 (step-chapter) -> 3열(절) 톤다운 */
    .picker-route.step-chapter .picker-verses-view {
      opacity: 0.45 !important;
    }

    /* 2. 데스크탑 전용 컬럼 헤더 라벨 노출 복원 */
    .picker-panel-head,
    .picker-chapter-head,
    .picker-verse-head {
      display: flex !important;
      align-items: center !important;
      justify-content: space-between !important;
      min-height: 56px !important;
      height: 56px !important;
      box-sizing: border-box !important;
      padding: 0.85rem 1.25rem !important;
      background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)) !important;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent) !important;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      flex: 0 0 auto !important;
    }

    .picker-panel-title,
    .picker-chapter-title,
    .picker-verse-title {
      font-family: 'Noto Serif KR', serif !important;
      font-size: var(--text-base) !important;
      font-weight: 800 !important;
      color: var(--accent) !important;
    }

    .picker-panel-sub,
    .picker-chapter-sub {
      display: inline-block !important;
      font-size: 0.76rem !important;
      color: var(--text-dim) !important;
      margin-left: 0.5rem;
    }
    .picker-chapter-head .picker-chapter-sub,
    .picker-chapter-head .picker-chapter-hint,
    .picker-verse-head .picker-panel-sub {
      display: none !important;
    }
    .picker-chapter-head,
    .picker-verse-head {
      justify-content: flex-start !important;
      gap: 0.75rem !important;
    }
    .picker-verse-head {
      justify-content: space-between !important;
    }
    .picker-verse-head .picker-chapter-action {
      height: 36px !important;
      min-height: 36px !important;
      box-sizing: border-box !important;
      padding: 0 0.78rem !important;
      align-self: center !important;
    }
    .chapter-grid,
    .picker-verse-grid {
      grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
      grid-auto-rows: 56px !important;
      gap: 0.5rem !important;
      padding: 0.85rem 1rem !important;
    }
    .chapter-item,
    .verse-item {
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      aspect-ratio: auto !important;
      border-radius: 12px !important;
      font-size: 0.94rem !important;
      box-sizing: border-box !important;
      transform: none !important;
    }
    .chapter-item:hover,
    .chapter-item:focus-visible,
    .verse-item:hover,
    .verse-item:focus-visible {
      transform: none !important;
      background: color-mix(in srgb, var(--accent) 7%, var(--surface-2)) !important;
    }
    .chapter-item.current,
    .verse-item.current,
    .chapter-item.target,
    .verse-item.target {
      border-color: var(--accent) !important;
      box-shadow: inset 0 0 0 1px var(--accent),
                  inset 0 0 0 999px color-mix(in srgb, var(--accent) 8%, transparent) !important;
    }

    /* 데스크탑에서는 뒤로가기 버튼 불필요하므로 완전히 제거 */
    #picker-back {
      display: none !important;
    }

    /* 3. 검색창 섀도우 & 포커스 연출 고도화 */
    .picker-search {
      transition: all 0.25s var(--ease-standard);
    }
    .picker-search:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent),
                  0 4px 12px rgba(0, 0, 0, 0.08),
                  inset 0 1px 2px rgba(0, 0, 0, 0.02);
    }

    /* 4. 성경책 카드 마우스 호버 에메랄드/세이지 글로우 섀도우 업그레이드 */
    .book-item:hover {
      border-color: var(--accent-dim);
      background: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 15%, transparent);
    }

    /* 5. 선택 완료된 장/절 그리드 테두리 및 섀도우 마감 */
    .chapter-item.current,
    .verse-item.current {
      box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 45%, transparent),
                  0 0 0 2px var(--accent);
      border-color: var(--accent);
    }
    .chapter-item.target,
    .verse-item.target {
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);
      border-color: var(--accent-dim);
    }

    /* v1100 — 데스크탑 책 목록: 3열 콤팩트 그리드.
       창세기부터 한눈에 — 1열 60px 리스트(v322c, 모바일용 오적용)는 모바일 전용으로 환원. */
    .picker-categorized {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      column-gap: 0.3rem !important;
      row-gap: 0.12rem !important;
      padding: 0.45rem 1rem 0.85rem !important;
    }
    .picker-cat-books,
    .picker-cat-books.flat-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 0.12rem 0.3rem !important;
      padding: 0 !important;
    }
    .book-item {
      min-height: 40px !important;
      padding: 0.28rem 0.5rem !important;
      border: 1px solid transparent !important;
      border-radius: 10px !important;
      background: transparent !important;
      display: grid !important;
      grid-template-columns: 28px 1fr !important;
      column-gap: 0.4rem !important;
      align-items: center !important;
      text-align: left !important;
      box-shadow: none !important;
      animation: none !important;
    }
    .book-item:hover,
    .book-item:active {
      transform: none !important;
      background: var(--picker-bg-alt, #2c2c2e) !important;
      border-color: color-mix(in srgb, var(--picker-accent, var(--accent)) 30%, transparent) !important;
      box-shadow: none !important;
    }
    .book-item.current {
      background: color-mix(in srgb, var(--picker-accent, var(--accent)) 14%, var(--picker-bg, #1c1c1e)) !important;
      border-color: color-mix(in srgb, var(--picker-accent, var(--accent)) 35%, transparent) !important;
    }
    .book-item .abbr {
      display: flex !important;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.78rem;
      color: var(--picker-accent, var(--accent));
      letter-spacing: -0.02em;
      line-height: 1;
    }
    .book-item .book-main {
      display: flex !important;
      flex-direction: row;
      align-items: center;
      gap: 0.3rem;
      min-width: 0;
    }
    .book-item .ko {
      display: block !important;
      font-size: 0.88rem !important;
      font-weight: 600;
      color: var(--picker-text, #f5f5f7) !important;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      letter-spacing: var(--ls-tight);
    }
    /* 데스크탑 콤팩트: 영문 부제는 숨김 (축약자+한국명으로 충분) */
    .book-item .en { display: none !important; }
    /* 현재 위치 스트립도 컴팩트하게 */
    .picker-current-strip {
      padding: 0.5rem 1.25rem !important;
      flex: 0 0 auto !important;
    }
  }

  /* v750 — Reader/picker polish layer
     이전 패치들의 강한 !important 규칙이 섞이며 생긴 모바일 헤더 잘림,
     밤하늘 테마 톤 분리, 성경목차 검색/단계 흐름 흔들림을 마지막 레이어에서 정리한다. */
  [data-theme="night"] body,
  [data-theme="night"] .reader-area {
    background: #070b16;
  }
  [data-theme="night"] .reader {
    background:
      radial-gradient(circle at 18% 8%, rgba(217, 189, 115, 0.18) 0 1px, transparent 1.7px),
      radial-gradient(circle at 78% 15%, rgba(255, 255, 255, 0.2) 0 1px, transparent 1.6px),
      radial-gradient(circle at 48% 26%, rgba(143, 184, 255, 0.11), transparent 28%),
      linear-gradient(180deg, #0b1020 0%, #080d19 44%, #070b16 100%) !important;
    color: var(--text);
  }
  [data-theme="night"] .chapter-head-classic {
    color: var(--text);
  }
  [data-theme="night"] .verse-row {
    background: transparent;
  }
  [data-theme="night"] .verse-row:hover {
    background: color-mix(in srgb, var(--accent) 5%, transparent);
  }

  [data-theme="night"] #picker-modal,
  [data-theme="night"] #picker-modal .scripture-picker,
  [data-theme="night"] #picker-books-view {
    background: #080d19 !important;
  }
  [data-theme="night"] #picker-modal.open {
    background: rgba(3, 7, 18, 0.74) !important;
  }
  [data-theme="night"] #picker-modal .scripture-picker {
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42),
                0 0 0 1px rgba(217, 189, 115, 0.18) !important;
  }
  [data-theme="night"] .picker-search-row,
  [data-theme="night"] .picker-panel-head,
  [data-theme="night"] .picker-chapter-head,
  [data-theme="night"] .picker-verse-head {
    background: #0d1424 !important;
    border-color: rgba(217, 189, 115, 0.16) !important;
  }
  [data-theme="night"] .picker-route,
  [data-theme="night"] .picker-books-column,
  [data-theme="night"] .picker-chapters-view,
  [data-theme="night"] .picker-verses-view,
  [data-theme="night"] .picker-categorized,
  [data-theme="night"] .book-item,
  [data-theme="night"] .chapter-item,
  [data-theme="night"] .verse-item {
    background: #090f1d !important;
    border-color: rgba(217, 189, 115, 0.14) !important;
  }
  [data-theme="night"] .book-item.current,
  [data-theme="night"] .chapter-item.current,
  [data-theme="night"] .verse-item.current {
    background: color-mix(in srgb, var(--accent) 18%, #090f1d) !important;
    color: #f7efd9 !important;
  }
  [data-theme="night"] .picker-search {
    background: #111827 !important;
    border-color: rgba(217, 189, 115, 0.24) !important;
    color: #f0eadb !important;
  }

  @media (max-width: 720px), (any-pointer: coarse) and (max-width: 1024px) {
    .reader {
      padding-top: max(0.92rem, calc(env(safe-area-inset-top) + 0.72rem)) !important;
    }
    .chapter-head-classic {
      padding-top: max(0.68rem, calc(env(safe-area-inset-top) + 0.32rem)) !important;
      margin-bottom: 0.86rem;
    }
    .reader > .chapter-head-classic:first-child {
      margin-top: 0 !important;
    }
    .chapter-head-classic .ch-book-sub {
      min-height: 1.35em;
      padding-top: 0.06rem;
      margin-bottom: 0.42rem;
      overflow: visible;
    }

    #picker-modal.open {
      background: var(--picker-bg, #f7f8fa) !important;
    }
    #picker-modal.open > .scripture-picker,
    .scripture-picker {
      background: var(--picker-bg, #f7f8fa) !important;
      color: var(--picker-text, #2f3b45) !important;
    }
    #picker-books-view {
      height: calc(100dvh - 56px) !important;
      background: var(--picker-bg, #f7f8fa) !important;
    }
    .picker-search-row {
      order: 0 !important;
      padding: 0.62rem 0.72rem !important;
      background: var(--picker-bg, #f7f8fa) !important;
      border-top: 0 !important;
      border-bottom: 1px solid var(--picker-border, #dde2e8) !important;
      box-shadow: none !important;
    }
    .picker-search {
      height: 44px !important;
      margin: 0 !important;
      padding: 0 0.94rem !important;
      border-radius: 999px !important;
      font-size: 16px !important;
      background: var(--picker-bg-alt, #fff) !important;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.035) !important;
    }
    .picker-search:focus {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--picker-accent, var(--accent)) 18%, transparent) !important;
      transform: none !important;
    }
    /* v1096 — 갓피플식 3컬럼 동시 노출 (책 60% · 장 20% · 절 20%).
       단계전환(step) 단일컬럼 폐기. 세 컬럼이 항상 보이고,
       아직 도달 안 한 컬럼만 살짝 톤다운으로 시선을 이끈다. */
    .picker-route {
      order: 1 !important;
      display: grid !important;
      grid-template-columns: 60% 20% 20% !important;
      grid-template-rows: 1fr !important;
      background: var(--picker-bg, #f7f8fa) !important;
    }
    .picker-route .picker-books-column,
    .picker-route .picker-chapters-view,
    .picker-route .picker-verses-view {
      display: flex !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      transform: none !important;
    }
    /* 단계 진행 전 컬럼은 톤다운으로 깊이 표현 (시선 유도) */
    .picker-route.step-book .picker-chapters-view { opacity: 0.5 !important; }
    .picker-route.step-book .picker-verses-view { opacity: 0.38 !important; }
    .picker-route.step-chapter .picker-verses-view { opacity: 0.5 !important; }
    .picker-books-column,
    .picker-chapters-view {
      border-right: 1px solid var(--picker-border, #dde2e8) !important;
      background: var(--picker-bg, #fff) !important;
    }
    .picker-verses-view {
      border-right: 0 !important;
      background: var(--picker-bg, #fff) !important;
    }
    /* 갓피플식 3컬럼: 컬럼 헤더(권/장/절 라벨)·뒤로가기 버튼 모두 숨김 —
       세 리스트가 곧장 보이므로 군더더기 헤더 불필요. */
    .picker-panel-head,
    .picker-chapter-head,
    .picker-verse-head {
      display: none !important;
    }
    #picker-back {
      display: none !important;
    }
    .testament-tabs {
      margin: 0 !important;
      border-radius: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
    }
    .book-item,
    .chapter-item,
    .verse-item {
      min-height: 58px !important;
      animation: none !important;
    }
    /* 갓피플식: 장·절은 세로 1열 리스트 (좁은 20% 컬럼). "1 장", "9 절" */
    .chapter-grid,
    .picker-verse-grid {
      display: block !important;
      grid-template-columns: none !important;
      grid-auto-rows: auto !important;
      gap: 0 !important;
      padding: 0 !important;
      align-content: start !important;
      overflow-y: auto !important;
      scrollbar-width: none !important;
    }
    .chapter-item,
    .verse-item {
      width: 100% !important;
      height: auto !important;
      min-height: 56px !important;
      aspect-ratio: auto !important;
      border: 0 !important;
      border-bottom: 1px solid var(--picker-border, #eef2f5) !important;
      border-radius: 0 !important;
      background: var(--picker-bg, #fff) !important;
      color: var(--picker-text, #4a545e) !important;
      box-shadow: none !important;
      font-size: clamp(0.92rem, 4vw, 1.05rem) !important;
      font-weight: 600 !important;
      line-height: 1 !important;
      transform: none !important;
      box-sizing: border-box !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .chapter-item::after {
      content: "장" !important;
      margin-left: 0.16em !important;
      font-size: 0.82em !important;
      font-weight: 500 !important;
      opacity: 0.72 !important;
    }
    .verse-item::after {
      content: "절" !important;
      margin-left: 0.16em !important;
      font-size: 0.82em !important;
      font-weight: 500 !important;
      opacity: 0.72 !important;
    }
    .chapter-item:active,
    .verse-item:active {
      transform: none !important;
      background: var(--picker-bg-alt, #f3f6f8) !important;
    }
    .chapter-item.current,
    .chapter-item.target,
    .verse-item.current,
    .verse-item.target {
      border-bottom-color: color-mix(in srgb, var(--picker-accent, var(--accent)) 22%, var(--picker-border, #eef2f5)) !important;
      background: color-mix(in srgb, var(--picker-accent, var(--accent)) 14%, var(--picker-bg, #fff)) !important;
      color: var(--picker-accent, var(--accent)) !important;
      box-shadow: none !important;
      font-weight: 800 !important;
    }

    /* Mobile scripture picker v1070: list-first, search-fast hybrid. */
    .scripture-picker .modal-head {
      min-height: 52px !important;
      padding: calc(env(safe-area-inset-top) + 0.36rem) 0.72rem 0.42rem !important;
      background: var(--picker-bg, #f7f8fa) !important;
      border-bottom: 1px solid var(--picker-border, #dde2e8) !important;
    }
    .scripture-picker .modal-head h2 {
      font-size: 1rem !important;
      letter-spacing: 0 !important;
    }
    .scripture-picker .modal-head h2 .ko {
      font-weight: 800 !important;
    }
    .picker-current-strip {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 0.6rem;
      min-height: 44px;
      padding: 0.46rem 0.72rem !important;
      background: var(--picker-bg, #f7f8fa) !important;
      border-bottom: 1px solid color-mix(in srgb, var(--picker-border, #dde2e8) 78%, transparent) !important;
    }
    .picker-current-title {
      font-size: 0.92rem !important;
      font-weight: 800 !important;
      color: var(--picker-text, #2f3b45) !important;
      line-height: 1.18;
    }
    .picker-current-meta {
      margin-top: 0.02rem;
      font-size: 0.72rem !important;
      color: var(--picker-text-dim, #68707a) !important;
      line-height: 1.15;
    }
    .picker-current-action,
    .picker-chapter-action {
      min-height: 34px !important;
      padding: 0 0.72rem !important;
      border-radius: 999px !important;
      font-size: 0.78rem !important;
      font-weight: 800 !important;
      white-space: nowrap;
    }
    .picker-search-row {
      position: relative !important;
      top: auto !important;
      z-index: 6 !important;
      display: grid !important;
      gap: 0.42rem !important;
      padding: 0.52rem 0.72rem 0.58rem !important;
      background: color-mix(in srgb, var(--picker-bg, #f7f8fa) 94%, transparent) !important;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
    }
    .picker-search {
      height: 42px !important;
      border-radius: 14px !important;
      padding: 0 3.15rem 0 0.9rem !important;
      font-weight: 650 !important;
    }
    .picker-search::placeholder {
      opacity: 0.82 !important;
    }
    .picker-quick-samples {
      display: flex !important;
      grid-template-columns: none !important;
      gap: 0.34rem !important;
      overflow-x: auto;
      scrollbar-width: none;
      margin: 0 !important;
      padding: 0.02rem 0 0.02rem !important;
      white-space: nowrap;
    }
    .picker-quick-samples::-webkit-scrollbar {
      display: none;
    }
    .picker-quick-samples span {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      padding: 0 0.16rem 0 0;
      color: var(--picker-text-dim, #68707a) !important;
      font-size: 0.72rem !important;
      font-weight: 800;
    }
    .picker-quick-samples button {
      flex: 0 0 auto;
      min-height: 30px !important;
      padding: 0 0.66rem !important;
      border-radius: 999px !important;
      background: var(--picker-bg-alt, #fff) !important;
      border-color: color-mix(in srgb, var(--picker-border, #dde2e8) 82%, transparent) !important;
      color: var(--picker-text, #2f3b45) !important;
      font-weight: 800 !important;
    }
    .picker-mobile-keypad {
      display: block !important;
      padding-top: 0 !important;
      pointer-events: none;
    }
    .picker-mobile-status {
      position: absolute;
      right: 0.98rem;
      top: 0.82rem;
      display: flex !important;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      margin: 0 !important;
      pointer-events: auto;
    }
    .picker-mobile-label,
    .picker-mobile-clear {
      display: none !important;
    }
    .picker-mobile-keyboard {
      width: 34px !important;
      height: 34px !important;
      border-radius: 11px !important;
      box-shadow: none !important;
      background: color-mix(in srgb, var(--picker-accent, var(--accent)) 9%, var(--picker-bg-alt, #fff)) !important;
      color: var(--picker-accent, var(--accent)) !important;
    }
    .picker-keypad-grid {
      display: none !important;
    }
    .picker-search-row.keyboard-open .picker-mobile-keypad {
      padding-top: 0.44rem !important;
      pointer-events: auto;
    }
    .picker-search-row.keyboard-open .picker-mobile-status {
      position: static;
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) 34px 40px;
      width: auto;
      height: auto;
      margin-bottom: 0.55rem !important;
    }
    .picker-search-row.keyboard-open .picker-mobile-label,
    .picker-search-row.keyboard-open .picker-mobile-clear {
      display: flex !important;
    }
    .picker-search-row.keyboard-open .picker-keypad-grid {
      display: grid !important;
    }
    .picker-route {
      min-height: 0 !important;
      border-top: 0 !important;
    }
    .picker-route.step-book .picker-books-column {
      background: var(--picker-bg, #f7f8fa) !important;
    }
    .testament-tabs {
      position: sticky;
      top: 0;
      z-index: 3;
      gap: 0.34rem !important;
      padding: 0.52rem 0.72rem !important;
      background: var(--picker-bg, #f7f8fa) !important;
      border-bottom: 1px solid var(--picker-border, #dde2e8) !important;
    }
    .testament-tabs button {
      min-height: 38px !important;
      border-radius: 999px !important;
      font-size: 0.82rem !important;
      background: var(--picker-bg-alt, #fff) !important;
      border: 1px solid color-mix(in srgb, var(--picker-border, #dde2e8) 82%, transparent) !important;
      box-shadow: none !important;
    }
    .testament-tabs button.active {
      background: color-mix(in srgb, var(--picker-accent, var(--accent)) 13%, var(--picker-bg-alt, #fff)) !important;
      color: var(--picker-accent, var(--accent)) !important;
      border-color: color-mix(in srgb, var(--picker-accent, var(--accent)) 48%, transparent) !important;
    }
    .picker-recent {
      display: block !important;
      padding: 0.54rem 0.72rem 0.48rem !important;
      background: var(--picker-bg, #f7f8fa) !important;
      border-bottom: 1px solid color-mix(in srgb, var(--picker-border, #dde2e8) 72%, transparent);
    }
    .picker-recent[hidden] {
      display: none !important;
    }
    .picker-recent .picker-section-label {
      height: auto !important;
      min-height: 0 !important;
      padding: 0 0 0.38rem !important;
      border: 0 !important;
      background: transparent !important;
      font-size: 0.72rem !important;
      color: var(--picker-text-dim, #68707a) !important;
    }
    .picker-recent-list {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 0.38rem !important;
      overflow-x: auto;
      scrollbar-width: none;
      padding: 0 !important;
    }
    .picker-recent-list::-webkit-scrollbar {
      display: none;
    }
    .recent-chip {
      flex: 0 0 auto;
      min-height: 32px !important;
      padding: 0 0.7rem !important;
      border-radius: 999px !important;
      background: var(--picker-bg-alt, #fff) !important;
      border-color: color-mix(in srgb, var(--picker-border, #dde2e8) 76%, transparent) !important;
      color: var(--picker-text, #2f3b45) !important;
    }
    .picker-categorized {
      padding: 0 0 0.72rem !important;
      background: var(--picker-bg, #f7f8fa) !important;
    }
    .picker-cat .picker-section-label {
      position: sticky;
      top: 0;
      z-index: 2;
      height: 30px !important;
      padding: 0 0.86rem !important;
      background: color-mix(in srgb, var(--picker-bg, #f7f8fa) 92%, var(--picker-bg-alt, #fff)) !important;
      border-top: 0 !important;
      border-bottom: 1px solid color-mix(in srgb, var(--picker-border, #dde2e8) 68%, transparent) !important;
      color: var(--picker-text-dim, #68707a) !important;
    }
    .book-item {
      min-height: 56px !important;
      margin: 0 0.72rem !important;
      padding: 0.58rem 0.78rem !important;
      border-bottom: 1px solid color-mix(in srgb, var(--picker-border, #dde2e8) 62%, transparent) !important;
      background: var(--picker-bg-alt, #fff) !important;
    }
    .picker-cat-books .book-item:first-child {
      border-top-left-radius: 14px !important;
      border-top-right-radius: 14px !important;
    }
    .picker-cat-books .book-item:last-child {
      border-bottom-left-radius: 14px !important;
      border-bottom-right-radius: 14px !important;
      border-bottom-color: transparent !important;
    }
    .book-item.current {
      background: color-mix(in srgb, var(--picker-accent, var(--accent)) 12%, var(--picker-bg-alt, #fff)) !important;
      box-shadow: inset 3px 0 0 var(--picker-accent, var(--accent)) !important;
    }
    .book-item .abbr {
      width: 30px;
      height: 30px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--picker-accent, var(--accent)) 10%, transparent);
      font-size: 0.86rem !important;
    }
    .book-item .ko {
      font-size: 1rem !important;
      font-weight: 800 !important;
      letter-spacing: 0 !important;
    }
    .book-item .en {
      font-size: 0.76rem !important;
    }
  }


  /* ================================
     스크랩북 (Scrapbook) — v454
     ================================ */

  /* ── Source card — YouTube 모바일 앱 스타일 (세로 리스트) ── */
  .sc-card {
    display: flex;
    gap: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 16px;
    cursor: pointer;
    align-items: flex-start;
  }

  /* Thumbnail — 왼쪽 세로형 (16:9 비율, 고정 너비) */
  .sc-card-thumb {
    flex-shrink: 0;
    width: 160px;
    aspect-ratio: 16/9;
    background: #111;
    position: relative;
    overflow: hidden;
    border-radius: var(--r-md);
  }
  .sc-card-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .sc-card-thumb-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.1);
    transition: background 0.15s;
  }
  .sc-card:hover .sc-card-thumb-overlay { background: rgba(0,0,0,0.25); }
  /* 중앙 재생 버튼 */
  .sc-card-play {
    width: 40px; height: 40px;
    background: rgba(0,0,0,0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    transition: transform 0.15s;
  }
  .sc-card:hover .sc-card-play { transform: scale(1.1); }
  .sc-card-play svg {
    width: 18px; height: 18px;
    color: #fff;
    margin-left: 2px;
  }
  /* 재생시간 배지 */
  .sc-card-duration {
    position: absolute;
    bottom: 6px; right: 6px;
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: #fff;
    background: rgba(0,0,0,0.8);
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: 500;
  }

  /* Card body — 오른쪽 텍스트 영역 */
  .sc-card-body {
    flex: 1;
    min-width: 0;
    padding: 0;
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }
  .sc-card-header {
    display: none;
  }
  .sc-card-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  /* Type icon (소형, 제목 왼쪽에) */
  .sc-type-badge {
    display: none; /* 카드에서는 숨김 */
  }
  .sc-type-badge svg { width: 16px; height: 16px; }

  .sc-card-title {
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--paper-ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
  }
  .sc-card-meta {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--text-faint);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
  }
  .sc-card-meta span { color: var(--text-faint); }
  .sc-card-summary {
    display: none;
  }
  .sc-card-footer {
    display: none;
  }
  .sc-tag {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    padding: 3px 9px;
    border-radius: var(--r-lg);
    background: rgba(139,111,62,0.08);
    color: var(--accent);
    font-weight: 500;
  }
  .sc-verse-link {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 3px;
    margin-left: auto;
  }
  .sc-verse-link svg { width: 12px; height: 12px; }

  /* Compact card (웹/텍스트 — 썸네일 없음) */
  .sc-card.compact .sc-type-badge {
    display: flex;
    width: 40px; height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .sc-card.compact .sc-type-badge.youtube { background: rgba(204,0,0,0.12); color: #cc0000; }
  .sc-card.compact .sc-type-badge.web { background: rgba(74,127,181,0.12); color: #4a7fb5; }
  .sc-card.compact .sc-type-badge.pdf { background: rgba(90,138,90,0.12); color: #5a8a5a; }
  .sc-card.compact .sc-type-badge.text { background: rgba(139,111,62,0.12); color: var(--accent); }

  /* Detail view */
  .scrapbook-detail {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 100px;
  }
  .scrapbook-detail-back {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 20px 8px;
    color: var(--text-dim);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-sm);
    cursor: pointer;
    background: none;
    border: none;
  }
  .scrapbook-detail-back svg { width: 16px; height: 16px; }
  .scrapbook-detail-content { padding: 0 20px; }

  /* Detail: hero */
  .sc-detail-hero {
    width: calc(100% + 40px);
    margin-left: -20px;
    aspect-ratio: 16/9;
    background: #1a1a1a;
    position: relative;
    margin-bottom: 16px;
    overflow: hidden;
  }
  .sc-detail-hero img {
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .sc-detail-hero-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .sc-detail-hero-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
  }
  .sc-detail-hero-play svg {
    width: 24px; height: 24px;
    color: #fff;
    margin-left: 3px;
  }

  /* Detail: title */
  .sc-detail-title {
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.4;
    color: var(--paper-ink);
    margin-bottom: 6px;
  }
  .sc-detail-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    color: var(--text-faint);
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .sc-detail-meta-dot {
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--text-faint);
  }

  /* Detail: AI summary */
  .sc-ai-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 18px 16px;
    margin-bottom: 20px;
  }
  .sc-ai-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--accent);
  }
  .sc-ai-head svg { width: 16px; height: 16px; }
  .sc-ai-badge {
    font-size: 0.66rem;
    padding: 2px 7px;
    border-radius: 10px;
    background: rgba(139,111,62,0.1);
    color: var(--accent);
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
  }
  .sc-keypoints {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .sc-keypoints li {
    display: flex;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(211,200,168,0.5);
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text);
  }
  [data-theme="light"] .sc-keypoints li,
  [data-theme="sepia"] .sc-keypoints li {
    border-bottom-color: var(--border);
  }
  .sc-keypoints li:last-child { border-bottom: none; }
  .sc-kp-num {
    flex-shrink: 0;
    width: 22px; height: 22px;
    border-radius: var(--r-sm);
    background: rgba(139,111,62,0.1);
    color: var(--accent);
    font-family: 'Inter', sans-serif;
    font-size: var(--text-xs);
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
  }

  /* Detail: verse chips */
  .sc-verse-section { margin-bottom: 20px; }
  .sc-verse-section-head {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dim);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
  }
  .sc-verse-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .sc-verse-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--r-md);
    background: rgba(139,111,62,0.06);
    border: 1px solid rgba(139,111,62,0.15);
    font-size: var(--text-sm);
    color: var(--accent);
    cursor: pointer;
  }
  .sc-verse-chip svg { width: 13px; height: 13px; }



  /* Faith discernment report */
  .discernment-modal {
    width: min(860px, 94vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
  }
  .discernment-body {
    padding: 0;
    overflow-y: auto;
    background:
      linear-gradient(180deg, rgba(184,73,66,0.05), rgba(73,135,102,0.035)),
      var(--surface);
  }
  .discernment-radar-shell {
    position: relative;
    overflow: hidden;
    padding: 20px 22px 24px;
  }
  .discernment-radar-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(184,73,66,0.075) 1px, transparent 1px),
      linear-gradient(180deg, rgba(139,111,62,0.055) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.7), transparent 72%);
  }
  .discernment-hero,
  .discernment-context,
  .discernment-form,
  .discernment-result {
    position: relative;
    z-index: 1;
  }
  .discernment-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 18px;
    margin-bottom: 14px;
    padding: 16px;
    border: 1px solid rgba(184,73,66,0.2);
    border-radius: 8px;
    background: var(--paper-bg-1);
    box-shadow: 0 12px 30px rgba(39,30,18,0.08);
  }
  .discernment-hero-kicker,
  .discernment-report-kicker {
    margin-bottom: 5px;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0;
    color: #a2443f;
    text-transform: uppercase;
  }
  .discernment-hero-title {
    margin: 0;
    font-family: 'Noto Serif KR', serif;
    font-size: 1.26rem;
    line-height: 1.35;
    color: var(--paper-ink);
  }
  .discernment-hero-subtitle {
    margin: 7px 0 0;
    max-width: 620px;
    color: var(--text-dim);
    font-size: 0.88rem;
    line-height: 1.65;
  }
  .discernment-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 10px;
    border: 1px solid rgba(184,73,66,0.24);
    border-radius: 999px;
    background: rgba(184,73,66,0.08);
    color: #8b2f2f;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
  }
  .discernment-scanline {
    position: relative;
    height: 3px;
    margin: 0 0 16px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(139,111,62,0.14);
  }
  .discernment-scanline::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 46%;
    background: linear-gradient(90deg, rgba(184,73,66,0), rgba(184,73,66,0.85), rgba(184,73,66,0));
    animation: discernment-scanline 2.8s ease-in-out infinite;
  }
  @keyframes discernment-scanline {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(250%); }
  }
  .discernment-context {
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(139,111,62,0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-dim);
  }
  .discernment-form {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(139,111,62,0.16);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
  }
  /* v1132 — 이단감별 화면 패널(인트로/컨텍스트/폼)도 라이트/세피아(종이) 테마에서만 흰 페이퍼 톤.
     다크 테마(기본 ink + night)는 위 기본값(다크)으로 — 회색 패널 바램 방지. */
  [data-theme="light"] .discernment-hero,
  [data-theme="sepia"] .discernment-hero {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.34)),
      var(--paper-bg-1);
  }
  [data-theme="light"] .discernment-context,
  [data-theme="sepia"] .discernment-context {
    background: rgba(255, 255, 255, 0.54);
  }
  [data-theme="light"] .discernment-form,
  [data-theme="sepia"] .discernment-form {
    background: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  .discernment-field {
    display: grid;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-dim);
  }
  .discernment-field input,
  .discernment-field textarea {
    width: 100%;
    border: 1px solid rgba(139,111,62,0.22);
    border-radius: 8px;
    background: var(--paper-bg-1);
    color: var(--text);
    font: 0.92rem/1.6 'Noto Serif KR', serif;
    padding: 11px 12px;
    outline: none;
  }
  .discernment-field textarea {
    min-height: 140px;
    resize: vertical;
  }
  .discernment-field input:focus,
  .discernment-field textarea:focus {
    border-color: #b84942;
    box-shadow: 0 0 0 2px rgba(184,73,66,0.13);
  }
  .discernment-submit {
    min-height: 44px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, #8b2f2f, #b84942);
    color: #fff;
    font-family: 'Noto Serif KR', serif;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(184,73,66,0.18);
    transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
  }
  .discernment-submit:hover:not(:disabled) {
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 13px 26px rgba(184,73,66,0.22);
  }
  .discernment-submit:disabled {
    opacity: 0.58;
    cursor: wait;
    transform: none;
    box-shadow: none;
  }
  .discernment-result {
    margin-top: 18px;
  }
  .discernment-report {
    border: 1px solid rgba(184,73,66,0.22);
    border-radius: 8px;
    background: var(--surface);
    padding: 16px;
    box-shadow: 0 14px 34px rgba(39,30,18,0.08);
  }
  .discernment-radar-report {
    position: relative;
    overflow: hidden;
  }
  .discernment-radar-report::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, #498766 0%, #c29f2d 48%, #b84942 100%);
  }
  .discernment-report-head,
  .discernment-report-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }
  .discernment-report-topbar {
    position: relative;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(139,111,62,0.16);
  }
  .discernment-title-stack {
    min-width: 0;
  }
  .discernment-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
  }
  .btn-copy-discernment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }
  .btn-copy-discernment svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }
  .btn-copy-discernment > * {
    pointer-events: none;
  }
  .discernment-report-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--paper-ink);
    line-height: 1.4;
  }
  .discernment-title-stack .discernment-caution {
    margin-top: 6px !important;
    padding-top: 0;
    border-top: none;
  }
  .discernment-status {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    border: 1px solid transparent;
  }
  .discernment-status.orthodox,
  .discernment-status.low { color: #3c7661; background: rgba(73,135,102,0.12); border-color: rgba(73,135,102,0.2); }
  .discernment-status.watch,
  .discernment-status.caution { color: #8a6422; background: rgba(194,143,45,0.14); border-color: rgba(194,143,45,0.24); }
  .discernment-status.heresy_risk,
  .discernment-status.high { color: #a2443f; background: rgba(184,73,66,0.12); border-color: rgba(184,73,66,0.22); }
  .discernment-status.cult_risk { color: #8f2f49; background: rgba(155,52,82,0.13); border-color: rgba(155,52,82,0.24); }
  .discernment-status.insufficient { color: var(--text-dim); background: rgba(120,120,120,0.1); border-color: var(--border); }
  .discernment-verdict-line {
    margin: 0 0 8px;
    color: var(--paper-ink);
    font-family: 'Noto Serif KR', serif;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;
  }
  .discernment-summary {
    margin: 0 0 14px;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.75;
    white-space: pre-wrap;
  }
  .discernment-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .discernment-evidence-ledger {
    padding-top: 2px;
  }
  .discernment-section {
    border: 1px solid rgba(139,111,62,0.18);
    border-radius: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 3px 0 0 rgba(139,111,62,0.16);
  }
  /* v1131 — 이단감별 리포트는 라이트/세피아(종이) 테마에서만 흰 페이퍼 톤.
     다크 테마(기본 ink + night)는 위 기본값(다크 surface)을 써서 흰 카드 바램/저대비를 막는다. */
  [data-theme="light"] .discernment-report,
  [data-theme="sepia"] .discernment-report {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.44)),
      var(--surface);
  }
  [data-theme="light"] .discernment-section,
  [data-theme="sepia"] .discernment-section {
    background: rgba(255, 255, 255, 0.54);
  }
  .discernment-section.full {
    grid-column: 1 / -1;
  }
  .discernment-section h4 {
    margin: 0 0 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.76rem;
    color: var(--accent);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
  }
  .discernment-list {
    margin: 0;
    padding-left: 1.15rem;
    color: var(--text-dim);
    font-size: 0.86rem;
    line-height: 1.65;
  }
  .discernment-caution {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    color: var(--text-faint);
    font-size: 0.8rem;
    line-height: 1.6;
  }
  .discernment-error {
    padding: 12px;
    border: 1px solid rgba(184,73,66,0.25);
    border-radius: var(--r-md);
    color: var(--danger);
    background: rgba(184,73,66,0.08);
    font-size: 0.86rem;
  }

  /* 강력한 이단 분별 프리미엄 비주얼 CSS */
  .discernment-local-match-card {
    border: 2px solid rgba(184, 73, 66, 0.45);
    border-radius: 8px;
    background: rgba(184, 73, 66, 0.05);
    padding: 16px;
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(184, 73, 66, 0.08);
  }
  .dlm-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
  }
  .dlm-alert-icon {
    width: 26px;
    height: 26px;
    color: var(--danger);
  }
  .dlm-header h3 {
    margin: 0;
    font-family: 'Noto Serif KR', serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--danger);
  }
  .dlm-body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text);
  }
  .dlm-group, .dlm-people, .dlm-keywords {
    margin: 4px 0;
  }
  .dlm-kw-tag {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    background: var(--danger);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
  }
  .dlm-divider {
    height: 1px;
    background: rgba(184, 73, 66, 0.2);
    margin: 12px 0;
  }
  .dlm-desc, .dlm-warning {
    margin: 6px 0;
  }

  .discernment-gauge-section {
    margin-bottom: 20px;
    padding: 14px;
    border-radius: 8px;
    background:
      linear-gradient(135deg, rgba(184,73,66,0.065), rgba(73,135,102,0.045)),
      rgba(255,255,255,0.62);
    border: 1px solid rgba(139,111,62,0.18);
  }
  .discernment-gauge-bar-wrapper {
    height: 10px;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .discernment-gauge-bar {
    height: 100%;
    width: 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .discernment-gauge-bar.orthodox,
  .discernment-gauge-bar.low {
    width: 15%;
    background: linear-gradient(90deg, #498766, #74a388);
  }
  .discernment-gauge-bar.insufficient {
    width: 30%;
    background: linear-gradient(90deg, #787878, #a8a8a8);
  }
  .discernment-gauge-bar.watch,
  .discernment-gauge-bar.caution {
    width: 60%;
    background: linear-gradient(90deg, #c29f2d, #deb837);
  }
  .discernment-gauge-bar.heresy_risk,
  .discernment-gauge-bar.high {
    width: 85%;
    background: linear-gradient(90deg, #b84942, #db6860);
  }
  .discernment-gauge-bar.cult_risk {
    width: 100%;
    background: linear-gradient(90deg, #9b3452, #c74c6d);
  }
  .discernment-gauge-info {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.84rem;
    color: var(--text-dim);
  }
  .discernment-gauge-label strong {
    color: var(--paper-ink);
  }

  .discernment-doctrinal-comparison {
    margin: 24px 0;
  }
  .dc-title {
    margin: 0 0 14px;
    font-family: 'Noto Serif KR', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .dc-cards-wrapper {
    display: grid;
    gap: 16px;
  }
  .dc-card {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  }
  .dc-card-area {
    background: var(--paper-bg-1);
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent);
    border-bottom: 1px solid var(--border);
    letter-spacing: var(--ls-wide);
  }
  .dc-card-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: none;
  }
  .dc-column {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .dc-column.heretical {
    border-right: 1px solid var(--border);
    background: rgba(184, 73, 66, 0.02);
  }
  .dc-column.orthodox {
    background: rgba(73, 135, 102, 0.02);
  }
  .dc-col-badge {
    align-self: flex-start;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
  }
  .dc-column.heretical .dc-col-badge {
    color: #a2443f;
    background: rgba(184, 73, 66, 0.1);
  }
  .dc-column.orthodox .dc-col-badge {
    color: #3c7661;
    background: rgba(73, 135, 102, 0.1);
  }
  .dc-column p {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--text);
  }
  
  /* 리포트 복사 버튼 프리미엄 스타일 */
  .btn-copy-discernment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--paper-bg-1);
    border: 1px solid var(--border);
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    font-family: 'Inter', sans-serif;
  }
  .btn-copy-discernment:hover {
    background: var(--border);
    color: var(--paper-ink);
    transform: translateY(-1px);
  }
  .btn-copy-discernment:active {
    transform: translateY(0);
  }
  .btn-copy-discernment.copied {
    background: rgba(73, 135, 102, 0.1);
    border-color: rgba(73, 135, 102, 0.25);
    color: #3c7661;
  }
  
  /* 인쇄 시 레이아웃 최적화 */
  @media print {
    .btn-copy-discernment {
      display: none !important;
    }
    .discernment-report {
      border: none !important;
      background: #fff !important;
      color: #000 !important;
      padding: 0 !important;
    }
  }

  @media (max-width: 600px) {
    .discernment-hero,
    .discernment-report-topbar {
      grid-template-columns: 1fr;
    }
    .discernment-hero {
      display: grid;
      gap: 12px;
    }
    .discernment-hero-badge {
      justify-self: start;
    }
    .discernment-report-topbar {
      flex-direction: column;
    }
    .discernment-actions {
      width: 100%;
      flex-wrap: wrap;
    }
    .btn-copy-discernment {
      flex: 1 1 120px;
      justify-content: center;
    }
    .dc-card-columns {
      grid-template-columns: 1fr;
    }
    .dc-column.heretical {
      border-right: none;
      border-bottom: 1px solid var(--border);
    }
  }

  /* Mobile adjustments */
  @media (max-width: 720px) {
    .scrapbook-modal .modal {
      width: 100vw;
      height: 100dvh;
      border-radius: 0;
    }
    .scrapbook-toolbar {
      padding: 10px 16px 6px;
    }
    .scrapbook-list {
      padding: 8px 12px 100px;
    }
    .sc-detail-hero {
      width: calc(100% + 32px);
      margin-left: -16px;
    }
    .scrapbook-detail-content { padding: 0 16px; }
    .discernment-modal {
      width: 100vw;
      height: 100dvh;
      max-height: 100dvh;
      border-radius: 0;
    }
    .discernment-body {
      padding: 0 0 96px;
    }
    .discernment-radar-shell {
      padding: 14px 16px 24px;
    }
    .discernment-grid {
      grid-template-columns: 1fr;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .discernment-scanline::before {
      animation: none;
      transform: none;
      width: 100%;
      opacity: 0.45;
    }
  }

/* ===== 찬송가 (Korean Hymnal) Module CSS ===== */
/* Uses existing CSS vars: --bg, --surface, --text, --text-dim, --text-faint, --gold, --border, --radius, --font-body */

/* ── Modal Shell ── */
#hymn-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  max-width: none;
  width: 100vw;
  height: 100dvh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  animation: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#hymn-modal[hidden] {
  display: none;
}

.hymn-overlay {
  appearance: none;
  -webkit-appearance: none;
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  cursor: pointer;
}

#hymn-modal.open .hymn-overlay {
  opacity: 1;
  pointer-events: auto;
}

.hymn-sheet {
  position: relative;
  width: 100%;
  max-width: 540px;
  height: 92vh;
  max-height: 800px;
  background: var(--bg, #15140f);
  border-radius: 16px 16px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.5);
}

#hymn-modal.open .hymn-sheet {
  transform: translateY(0);
}

/* Desktop: center the modal */
@media (min-width: 768px) {
  #hymn-modal {
    align-items: center;
  }
  .hymn-sheet {
    border-radius: 16px;
    height: 85vh;
    max-height: 750px;
    transform: translateY(30px) scale(0.97);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
  }
  #hymn-modal.open .hymn-sheet {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@media (min-width: 1024px) {
  .hymn-sheet {
    width: calc(100vw - 64px);
    max-width: 1120px;
    height: min(86vh, 780px);
    max-height: none;
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(201, 169, 97, 0.06), transparent 170px),
      var(--bg, #15140f);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.52);
  }

  .hymn-categories {
    flex-wrap: wrap;
    overflow: visible;
  }

  .hymn-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .hymn-lyrics {
    max-width: 760px;
    margin: 0 auto;
    font-size: 1.22rem;
    line-height: 2.05;
  }

  .hymn-header {
    padding: 20px 28px 16px;
  }

  .hymn-title {
    font-size: 1.42rem;
  }

  .hymn-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 10px;
    padding: 18px 24px 10px;
  }

  .hymn-categories {
    gap: 8px;
    padding: 8px 24px 14px;
  }

  .hymn-cat-btn {
    border-radius: 8px;
    padding: 7px 12px;
  }

  .hymn-recent {
    padding: 6px 24px 12px;
  }

  .hymn-list-scroll {
    padding: 12px 24px 20px;
  }

  .hymn-list-item {
    min-width: 0;
    min-height: 58px;
    padding: 10px 12px;
    border: 1px solid rgba(201, 169, 97, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
  }

  .hymn-list-item:hover {
    background: rgba(201, 169, 97, 0.08);
  }

  .hymn-viewer-header {
    padding: 16px 28px;
  }

  .hymn-viewer-title {
    font-size: 1.16rem;
  }

  .hymn-lyrics-scroll {
    padding: 34px 40px 30px;
  }

  .hymn-player-container,
  .hymn-nav {
    max-width: 760px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Header ── */
.hymn-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border, #333230);
  flex-shrink: 0;
}

.hymn-title {
  font-family: var(--font-body, 'Pretendard'), sans-serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--gold, #c9a961);
  margin: 0;
  letter-spacing: 0.02em;
}

.hymn-close-btn {
  background: none;
  border: none;
  color: var(--text-dim, #b0a898);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
}

.hymn-close-btn:hover,
.hymn-close-btn:focus-visible {
  color: var(--text, #e8e0d0);
  background: var(--surface, #1e1d1a);
}

/* ── Search ── */
.hymn-search {
  display: flex;
  gap: 8px;
  padding: 12px 16px 8px;
  flex-shrink: 0;
}
/* v1152z — 통합 검색창 (입력칸 1개, full width) */
.hymn-search.hymn-search-unified .hymn-search-input {
  flex: 1 1 100%;
}

.hymn-search-input {
  flex: 1;
  background: var(--surface, #1e1d1a);
  border: 1px solid var(--border, #333230);
  border-radius: var(--radius, 8px);
  padding: 10px 14px;
  color: var(--text, #e8e0d0);
  font-size: 0.95rem;
  font-family: var(--font-body, 'Pretendard'), sans-serif;
  outline: none;
  transition: border-color 0.2s;
}

.hymn-search-input:focus {
  border-color: var(--gold, #c9a961);
}

.hymn-search-input::placeholder {
  color: var(--text-faint, #706858);
}

/* v1152z — 검색 하이라이트 + 가사 스니펫 */
.hymn-list-item mark {
  background: rgba(201, 169, 97, 0.3);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.hymn-num-badge.match {
  background: var(--gold, #c9a961);
  color: #1a1814;
}
.hymn-item-snippet {
  display: block;
  font-size: 0.78rem;
  color: var(--text-faint, #706858);
  margin-top: 2px;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hymn-search-number {
  width: 72px;
  background: var(--surface, #1e1d1a);
  border: 1px solid var(--border, #333230);
  border-radius: var(--radius, 8px);
  padding: 10px 12px;
  color: var(--gold, #c9a961);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-body, 'Pretendard'), sans-serif;
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
  -moz-appearance: textfield;
}

.hymn-search-number::-webkit-inner-spin-button,
.hymn-search-number::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.hymn-search-number:focus {
  border-color: var(--gold, #c9a961);
}

.hymn-search-number::placeholder {
  color: var(--text-faint, #706858);
  font-weight: 400;
}

/* ── Category Tabs ── */
.hymn-categories {
  display: flex;
  gap: 6px;
  padding: 6px 16px 10px;
  overflow-x: auto;
  flex-shrink: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.hymn-categories::-webkit-scrollbar {
  display: none;
}

.hymn-cat-btn {
  flex-shrink: 0;
  background: var(--surface, #1e1d1a);
  border: 1px solid var(--border, #333230);
  border-radius: 20px;
  padding: 6px 14px;
  color: var(--text-dim, #b0a898);
  font-size: 0.82rem;
  font-family: var(--font-body, 'Pretendard'), sans-serif;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.hymn-cat-btn:hover,
.hymn-cat-btn:focus-visible {
  border-color: var(--gold, #c9a961);
  color: var(--text, #e8e0d0);
}

.hymn-cat-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold, #c9a961) 38%, transparent);
  outline-offset: 2px;
}

.hymn-cat-btn.active {
  background: var(--gold, #c9a961);
  border-color: var(--gold, #c9a961);
  color: #15140f;
  font-weight: 600;
}

/* ── Recent Section ── */
.hymn-recent {
  padding: 4px 16px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border, #333230);
}

.hymn-section-label {
  font-size: 0.78rem;
  color: var(--text-faint, #706858);
  font-weight: 600;
  margin: 0 0 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hymn-recent-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  scrollbar-width: none;
}

.hymn-recent-scroll::-webkit-scrollbar {
  display: none;
}

.hymn-recent-chip {
  flex-shrink: 0;
  background: var(--surface, #1e1d1a);
  border: 1px solid var(--border, #333230);
  border-radius: var(--radius, 8px);
  padding: 6px 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.2s;
}

.hymn-recent-chip:hover {
  border-color: var(--gold, #c9a961);
}

.hymn-recent-chip .recent-num {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold, #c9a961);
}

.hymn-recent-chip .recent-title {
  font-size: 0.82rem;
  color: var(--text-dim, #b0a898);
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Hymn List ── */
.hymn-list-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.hymn-list-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
  overscroll-behavior: contain;
}

.hymn-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hymn-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid rgba(51, 50, 48, 0.4);
}

.hymn-list-item:hover {
  background: var(--surface, #1e1d1a);
}

.hymn-list-item:active {
  background: rgba(201, 169, 97, 0.08);
}

.hymn-num-badge {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(201, 169, 97, 0.12);
  color: var(--gold, #c9a961);
  font-size: 0.82rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body, 'Pretendard'), sans-serif;
}

.hymn-item-title {
  flex: 1;
  font-size: 0.95rem;
  color: var(--text, #e8e0d0);
  font-family: var(--font-body, 'Pretendard'), sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hymn-fav-btn {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  padding: 4px;
  color: var(--text-faint, #706858);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  transition: color 0.2s, transform 0.2s;
  flex-shrink: 0;
}

.hymn-fav-btn:hover {
  transform: scale(1.15);
}

.hymn-fav-btn:focus-visible,
.hymn-back-btn:focus-visible,
.hymn-player-toggle:focus-visible,
.hymn-nav-btn:focus-visible,
.hymn-list-item:focus-visible,
.hymn-recent-chip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold, #c9a961) 42%, transparent);
  outline-offset: 2px;
}

.hymn-fav-btn.is-fav {
  color: var(--gold, #c9a961);
}

.hymn-fav-btn.is-fav .star-icon {
  fill: var(--gold, #c9a961);
  stroke: var(--gold, #c9a961);
}

/* ── Empty State ── */
.hymn-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  color: var(--text-faint, #706858);
  font-size: 0.95rem;
  text-align: center;
}

.hymn-empty p {
  margin: 0;
}

/* ── Viewer ── */
.hymn-viewer {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.hymn-viewer[hidden] {
  display: none;
}

.hymn-viewer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border, #333230);
  flex-shrink: 0;
}

.hymn-back-btn {
  background: none;
  border: none;
  color: var(--text-dim, #b0a898);
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s, background 0.2s;
  flex-shrink: 0;
}

.hymn-back-btn:hover {
  color: var(--text, #e8e0d0);
  background: var(--surface, #1e1d1a);
}

.hymn-viewer-title-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.hymn-viewer-number {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold, #c9a961);
  flex-shrink: 0;
}

.hymn-viewer-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text, #e8e0d0);
  font-family: var(--font-body, 'Pretendard'), sans-serif;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Lyrics ── */
.hymn-lyrics-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  overscroll-behavior: contain;
}

.hymn-lyrics {
  font-size: 1.1rem;
  line-height: 1.85;
  color: var(--text, #e8e0d0);
  font-family: var(--font-body, 'Pretendard'), sans-serif;
  text-align: center;
  white-space: pre-wrap;
  word-break: keep-all;
}

/* ── YouTube Player ── */
.hymn-player-section {
  flex-shrink: 0;
  border-top: 1px solid var(--border, #333230);
}

.hymn-player-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: none;
  border: none;
  color: var(--gold, #c9a961);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: var(--font-body, 'Pretendard'), sans-serif;
  cursor: pointer;
  transition: background 0.2s;
}

.hymn-player-toggle:hover {
  background: rgba(201, 169, 97, 0.06);
}

.hymn-player-toggle.is-active {
  color: var(--text-dim, #b0a898);
}

.hymn-player-container {
  padding: 0 16px 12px;
}

.hymn-player-container[hidden] {
  display: none;
}

.hymn-player-ratio {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  border-radius: var(--radius, 8px);
  overflow: hidden;
  background: var(--surface, #1e1d1a);
}

.hymn-player-ratio iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Navigation ── */
.hymn-nav {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px 16px;
  gap: 12px;
  flex-shrink: 0;
  border-top: 1px solid var(--border, #333230);
}

.hymn-nav-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--surface, #1e1d1a);
  border: 1px solid var(--border, #333230);
  border-radius: var(--radius, 8px);
  color: var(--text-dim, #b0a898);
  font-size: 0.85rem;
  font-family: var(--font-body, 'Pretendard'), sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}

.hymn-nav-btn:hover:not(:disabled) {
  border-color: var(--gold, #c9a961);
  color: var(--gold, #c9a961);
}

.hymn-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ── Scrollbar Styling ── */
.hymn-list-scroll::-webkit-scrollbar,
.hymn-lyrics-scroll::-webkit-scrollbar {
  width: 4px;
}

.hymn-list-scroll::-webkit-scrollbar-thumb,
.hymn-lyrics-scroll::-webkit-scrollbar-thumb {
  background: var(--border, #333230);
  border-radius: 2px;
}

.hymn-list-scroll::-webkit-scrollbar-track,
.hymn-lyrics-scroll::-webkit-scrollbar-track {
  background: transparent;
}

/* ── Animations ── */
@keyframes hymn-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.hymn-viewer .hymn-lyrics {
  animation: hymn-fade-in 0.3s ease;
}

@media (min-width: 1024px) {
  .hymn-viewer {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }

  .hymn-viewer-header {
    width: min(860px, calc(100% - 96px));
    margin: 0 auto;
    padding: 16px 0;
  }

  .hymn-lyrics-scroll {
    min-height: 0;
    display: grid;
    align-items: center;
    justify-items: center;
    width: min(860px, calc(100% - 96px));
    margin: 0 auto;
    padding: clamp(32px, 5vh, 56px) 0 clamp(24px, 4vh, 44px);
  }

  .hymn-lyrics {
    max-width: 760px;
    margin: 0 auto;
    font-family: 'Noto Serif KR', serif;
    font-size: clamp(1.38rem, 1.45vw, 1.68rem);
    line-height: 2.18;
    letter-spacing: 0;
  }

  .hymn-player-section {
    width: min(860px, calc(100% - 96px));
    margin: 0 auto;
    border-top: 1px solid rgba(201, 169, 97, 0.16);
  }

  .hymn-player-toggle {
    width: max-content;
    min-width: 168px;
    margin: 0 auto;
    padding: 12px 22px;
    border-radius: 999px;
  }

  .hymn-nav {
    width: min(860px, calc(100% - 96px));
    max-width: none;
    margin: 0 auto;
    padding: 12px 0 22px;
    border-top: 0;
  }

  .hymn-nav-btn {
    min-width: 104px;
    justify-content: center;
  }
}

/* ════════════════════════════════════════════════════════════════
 * v1097 — 암송 (간격 반복 SRS)
 * ════════════════════════════════════════════════════════════════ */
.memorize-panel { display: flex; flex-direction: column; width: min(560px, calc(100vw - 28px)); max-height: min(86vh, 740px); }
.mem-body { flex: 1; overflow-y: auto; padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.mem-head-stats { font-size: .8rem; color: var(--text-dim); margin-left: auto; margin-right: 10px; white-space: nowrap; }
.mem-due-dot { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: var(--accent-fg, #15140f); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.mem-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mem-stat { background: var(--surface-2, rgba(255,255,255,.04)); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 14px; padding: 12px 8px; text-align: center; }
.mem-stat-v { font-size: 1.5rem; font-weight: 700; color: var(--accent); line-height: 1.2; }
.mem-stat-l { font-size: .75rem; color: var(--text-dim); margin-top: 2px; }
.mem-actions { display: flex; gap: 10px; }
.mem-btn { flex: 1; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border, rgba(255,255,255,.1)); background: transparent; color: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; transition: filter .15s ease, opacity .15s ease; }
.mem-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg, #15140f); }
.mem-btn.primary:disabled { opacity: .4; cursor: default; }
.mem-btn.ghost:hover, .mem-btn.primary:not(:disabled):hover { filter: brightness(1.08); }
.mem-list { display: flex; flex-direction: column; gap: 8px; }
.mem-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 12px; background: var(--surface-2, rgba(255,255,255,.03)); }
.mem-row-main { flex: 1; min-width: 0; }
.mem-row-ref { font-weight: 700; font-size: .9rem; }
.mem-row-txt { font-size: .82rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.mem-row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mem-row-due { font-size: .74rem; color: var(--text-dim); }
.mem-row-due.now { color: var(--accent); font-weight: 700; }
.mem-row-del { background: none; border: 0; color: var(--text-dim); cursor: pointer; padding: 6px; border-radius: 8px; line-height: 0; }
.mem-row-del:hover, .mem-row-del.arm { color: #c96f61; background: rgba(201, 111, 97, .12); }
.mem-empty { text-align: center; padding: 36px 10px 20px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.mem-empty-verse { font-family: 'Noto Serif KR', serif; font-size: 1.05rem; line-height: 1.9; margin: 0; }
.mem-empty-ref { color: var(--text-dim); font-size: .85rem; margin: 0; }
.mem-empty .mem-btn { flex: none; min-width: 220px; }
.mem-rev-top { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; color: var(--text-dim); }
.mem-rev-back { background: none; border: 0; color: var(--text-dim); cursor: pointer; font-size: .8rem; padding: 4px 6px; }
.mem-rev-back:hover { color: var(--accent); }
.mem-rev-ref { text-align: center; font-size: 1.25rem; font-weight: 700; margin: 6px 0 0; }
.mem-rev-tr { text-align: center; font-size: .75rem; color: var(--text-dim); }
.mem-rev-stage { min-height: 150px; display: flex; align-items: center; justify-content: center; padding: 18px 14px; border: 1px dashed var(--border, rgba(255,255,255,.14)); border-radius: 14px; }
.mem-rev-txt { font-family: 'Noto Serif KR', serif; font-size: 1.08rem; line-height: 2; text-align: center; word-break: keep-all; white-space: pre-wrap; }
.mem-rev-placeholder { color: var(--text-dim); font-size: .92rem; }
.mem-rev-hintrow { display: flex; gap: 10px; }
.mem-grade-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mem-grade { padding: 10px 4px 8px; border-radius: 12px; border: 1px solid var(--border, rgba(255,255,255,.1)); background: transparent; color: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mem-grade b { font-size: .92rem; font-weight: 700; }
.mem-grade small { font-size: .7rem; color: var(--text-dim); }
.mem-grade.g1 b { color: #c96f61; }
.mem-grade.g2 b { color: #c9a961; }
.mem-grade.g3 b { color: var(--accent); }
.mem-grade.g4 b { color: #7da27a; }
.mem-grade:hover { filter: brightness(1.1); background: var(--surface-2, rgba(255,255,255,.04)); }
.mem-done { text-align: center; padding: 40px 10px; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.mem-done-big { font-size: 1.3rem; font-weight: 700; }
.mem-done p { color: var(--text-dim); margin: 0; }
.mem-done .mem-btn { flex: none; min-width: 200px; }
.mem-add-list { display: flex; flex-direction: column; gap: 6px; }
.mem-add-row { display: flex; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; align-items: baseline; }
.mem-add-row:hover { background: var(--surface-2, rgba(255,255,255,.04)); }
.mem-add-row.added { border-color: var(--accent); }
.mem-add-row.added .mem-add-num { color: var(--accent); font-weight: 700; }
.mem-add-num { flex-shrink: 0; width: 24px; text-align: right; font-size: .78rem; color: var(--text-dim); }
.mem-add-txt { font-size: .92rem; line-height: 1.7; }
@media (max-width: 540px) {
  .memorize-panel { width: calc(100vw - 16px); max-height: calc(100dvh - 56px); }
  .mem-stats { gap: 8px; }
  .mem-body { padding: 14px 14px 18px; }
}

/* ════════════════════════════════════════════════════════════════
 * v1098 — 이맘때 (노트 타임머신) + 부부 주간 리포트
 * ════════════════════════════════════════════════════════════════ */
.tm-strip { display: flex; flex-direction: column; gap: 6px; padding: 10px 16px 0; }
.tm-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; text-align: left; background: var(--surface-2, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.07)); border-radius: 10px; padding: 8px 12px; color: inherit; cursor: pointer; font: inherit; }
.tm-row:hover { border-color: var(--accent); }
.tm-when { font-size: .72rem; font-weight: 700; color: var(--accent); flex-shrink: 0; }
.tm-what { font-family: 'Noto Serif KR', serif; font-size: .85rem; }
.tm-meta { font-size: .72rem; color: var(--text-dim); }
.cw-card { margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 12px; background: var(--surface-2, rgba(255,255,255,.03)); }
.cw-title { font-size: .78rem; font-weight: 700; color: var(--accent); margin-bottom: 4px; }
.cw-line { font-size: .85rem; }
.cw-line.dim { color: var(--text-dim); font-size: .78rem; margin-top: 2px; }
.cw-loading { font-size: .8rem; color: var(--text-dim); }
@media (max-width: 540px) {
  .tm-strip { padding: 8px 12px 0; }
}

/* ════════════════════════════════════════════════════════════════
 * v1102 — 말씀 알림 (설정 · 알림 시간)
 * ════════════════════════════════════════════════════════════════ */
.vod-time-input { background: var(--surface-2, rgba(255,255,255,.05)); border: 1px solid var(--border, rgba(255,255,255,.12)); color: inherit; border-radius: 10px; padding: 7px 10px; font: inherit; font-size: .9rem; color-scheme: dark; }
[data-theme="light"] .vod-time-input, [data-theme="sepia"] .vod-time-input { color-scheme: light; }
.vod-times { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

/* ════════════════════════════════════════════════════════════════
 * v1169 — 업데이트 소식 (체인지로그)
 * ════════════════════════════════════════════════════════════════ */
.changelog-modal { display: flex; flex-direction: column; width: min(620px, calc(100vw - 28px)); max-height: min(85vh, 740px); }
.changelog-head { padding: 18px 20px; border-bottom: 1px solid var(--border, rgba(255,255,255,.08)); display: flex; align-items: center; justify-content: space-between; }
.changelog-title { font-size: 1.1rem; font-weight: 700; }
.changelog-close { background: none; border: 0; color: inherit; cursor: pointer; padding: 4px; line-height: 0; }
.changelog-close:hover { color: var(--accent); }
.changelog-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.changelog-entry { padding: 14px 14px; background: var(--surface-2, rgba(255,255,255,.03)); border: 1px solid var(--border, rgba(255,255,255,.08)); border-radius: 12px; }
.changelog-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.changelog-version { font-weight: 700; font-size: .95rem; }
.changelog-date { font-size: .8rem; color: var(--text-dim); }
.changelog-badge { font-size: .7rem; color: var(--accent); font-weight: 700; background: rgba(var(--accent-rgb, 188 137 109), .12); padding: 2px 6px; border-radius: 4px; }
.changelog-items { display: flex; flex-direction: column; gap: 6px; margin-left: 8px; }
.changelog-item { font-size: .9rem; line-height: 1.5; color: var(--text-dim); }
.changelog-item::before { content: "·"; color: var(--text-dim); margin-right: 6px; }
.settings-new-badge { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-left: 6px; }