/* ═══════════════════════════════════════════════════════════════
   Sanctum OS — Design Token System
   브랜드: 비교의 도구가 아니라 거울.
   원칙: 절제 · 차분 · 거울 · 약속 · 보관함
   토큰 명명: surface-* / ink-* / brand-* / line — 기존 별칭(--bg / --text-* / --accent / --border)은
   하위 호환을 위해 alias로 유지함.
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ════════════════════════════════════════════════════════════
       디자인 시스템 v1 — 전면 적용 (2026-05-16)
       산출물: docs/backlog/디자인_시스템_결과_v1.md
       기존 변수는 모두 새 토큰을 가리키도록 alias 매핑 — 기존 CSS 호환.
       ════════════════════════════════════════════════════════════ */

    /* form 요소(input·textarea·select·scrollbar)가 OS 다크 모드에 자동 적응되도록.
       이 한 줄 없으면 브라우저가 폼 요소를 라이트 디폴트로 고정해요. */
    color-scheme: light dark;

    /* ── Color (Light) — warm beige 결 ── */
    --color-bg:               #F7F5F2;
    --color-surface:          #FFFFFF;
    --color-surface-elevated: #F4F1ED;
    --color-surface-quiet:    rgba(120,100,80,0.03);
    --color-border:           #E8E3DC;
    --color-ink-primary:      #1A1A1A;       /* 대비 16.4:1 AAA */
    --color-ink-secondary:    #76706A;       /* 대비 7.2:1 AA */
    --color-ink-tertiary:     #A39E97;       /* 대비 4.5:1 AA, 큰 텍스트만 */
    --color-success:          #4A7B5C;
    --color-warn:             #A6864C;
    --color-danger:           #9B5555;

    /* ── Brand accent — Muted Olive 디폴트 + 변주 3종 ──
       3색 카드 자리: 사용자가 설정에서 자유 선택. [data-accent] 분기는 :root 아래. */
    --brand-olive:           #5F6F4A;        /* 대비 6.1:1 AA (산출물 1 spec) */
    --brand-olive-soft:      rgba(95,111,74,0.08);
    --brand-olive-strong:    #4F5D3D;
    --brand-olive-border:    rgba(95,111,74,0.25);

    --brand-beige:           #B89E78;
    --brand-beige-soft:      rgba(184,158,120,0.10);
    --brand-beige-strong:    #8E7855;
    --brand-beige-border:    rgba(184,158,120,0.25);

    --brand-lavender:        #8F86A6;
    --brand-lavender-soft:   rgba(143,134,166,0.10);
    --brand-lavender-strong: #6B6388;
    --brand-lavender-border: rgba(143,134,166,0.25);

    /* 기본 accent = Muted Olive. [data-accent="beige|lavender"] 로 자연 분기. */
    --brand-primary: var(--brand-olive);
    --brand-soft:    var(--brand-olive-soft);
    --brand-strong:  var(--brand-olive-strong);
    --brand-border:  var(--brand-olive-border);

    --accent:        var(--brand-primary);
    --accent-hover:  var(--brand-strong);
    --accent-soft:   var(--brand-soft);
    --accent-border: var(--brand-border);
    --color-info:    var(--accent);

    /* ── Legacy alias 매핑 — 기존 클래스 호환 (전면 적용 전엔 따로 자리해 있던 자리) ── */
    --surface-canvas:   var(--color-bg);
    --surface-card:     var(--color-surface);
    --surface:          var(--color-surface);             /* admin·tier-chip 옛 토큰명 호환 — 다크 자동 적응 */
    --surface-elevated: var(--color-surface-elevated);
    --surface-elev:     var(--color-surface-elevated);   /* (2026-05-18) 미션 추천 카드 등 옛 이름 호환 */
    --ink-primary:      var(--color-ink-primary);
    --ink:              var(--color-ink-primary);         /* admin·tier-chip 옛 토큰명 호환 — 다크 자동 적응 */
    --ink-secondary:    var(--color-ink-secondary);
    --ink-tertiary:     var(--color-ink-tertiary);
    --line:             var(--color-border);
    --hover:            var(--color-surface-quiet);
    --bg:               var(--color-bg);
    --bg-card:          var(--color-surface);
    --bg-elev:          var(--color-surface-elevated);
    --bg-soft:          var(--color-surface-quiet);
    --bg-quiet:         var(--color-surface-quiet);
    --text-primary:     var(--color-ink-primary);
    --text-secondary:   var(--color-ink-secondary);
    --border:           var(--color-border);
    --surface-quiet:    var(--color-surface-quiet);
    --brand-primary-soft: var(--brand-soft);   /* 일부 컴포넌트가 -soft 별칭 사용 */

    /* ── Dot Semantic Palette (theme-invariant) ──
       사실 진술 색 — 평가가 아닌 시간의 결. */
    --dot-gray:   #C7CDD3;
    --dot-yellow: #F5C84B;
    --dot-green:  #6BBF7B;
    --dot-orange: #F0935A;
    --dot-red:    #E5654A;
    --dot-purple: #9B7ED9;

    /* ── Typography (산출물 1) ──
       Serif (Noto Serif KR) = 영적·헤더 자리. Sans (Pretendard) = 본문·생산성.
       굵기 4단계: 400 본문 / 500 라벨 / 600 소제목 / 700 제목. */
    --font-serif: 'Noto Serif KR', 'Nanum Myeongjo', serif;
    --font-sans:  'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                  system-ui, 'Noto Sans KR', sans-serif;
    --font-mono:  ui-monospace, 'Cascadia Code', Menlo, monospace;

    /* legacy alias */
    --font: var(--font-sans);

    /* 1.125 ratio 8단 — rem 기반 (정식 산출물) */
    --text-xs:   0.72rem;
    --text-sm:   0.81rem;
    --text-base: 0.92rem;
    --text-md:   1.03rem;
    --text-lg:   1.16rem;
    --text-xl:   1.31rem;
    --text-2xl:  1.47rem;
    --text-3xl:  1.66rem;

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --leading-tight:   1.3;
    --leading-normal:  1.55;
    --leading-relaxed: 1.7;

    /* 기존 px 기반 7단 — 시스템 폰트 4단계 동작 그대로 살림 */
    --fs-hero:    30px;
    --fs-display: 24px;
    --fs-heading: 22px;
    --fs-modal:   18px;
    --fs-body:    15px;
    --fs-small:   13px;
    --fs-caption: 11px;

    --lh-body:    1.65;
    --lh-heading: 1.25;
    --ls-heading: -0.01em;
    --ls-body:    0;
    --lh:         var(--lh-body);

    /* ── Spacing — 간격 자 (단일 출처 = --sp, px) ──
       (B4 토큰 통일 2026-05-22, "px 유지" 결정)
       이 앱의 실제 간격은 전부 --sp-* (px·고정) 를 써요 (약 590곳). 이게 캐논.
       아래 --space-* (rem) 는 디자인 시스템 산출물 1 의 예약 스케일 — 현재 코드 미사용.
       ⚠️ rem/em 으로 된 자리(글자 크기 슬라이더 따라 자동 확대)는 px 로 바꾸지 말 것.
          여백까지 글자 따라 키우려면 별도 접근성 트랙에서 --sp→rem 전수 검증 후. */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 40px; --sp-7: 64px;

    /* (예약·미사용) 디자인 시스템 rem 스케일. 값 정렬: --sp-1~4 = --space-1~4,
       --sp-5(24px)=--space-6, --sp-7(64px)=--space-16. (--sp-6 40px 는 rem 등가 없음) */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ── Radius (5단 + full) ── */
    --radius-xs:   0.25rem;
    --radius-sm:   0.5rem;
    --radius-md:   0.65rem;
    --radius-lg:   0.85rem;
    --radius-xl:   1.2rem;
    --radius-full: 9999px;

    /* legacy */
    --radius:      var(--radius-md);
    --radius-pill: var(--radius-full);

    /* ── Shadow (절제, 4종) ── */
    --shadow-none:     none;
    --shadow-soft:     0 1px 2px rgba(0,0,0,0.04);
    --shadow-elevated: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-focus:    0 0 0 3px var(--accent-soft);

    /* legacy */
    --shadow-sm: var(--shadow-soft);
    --shadow-lg: var(--shadow-elevated);

    /* ── z-index (100 단위, 8단) ── */
    --z-base:           0;
    --z-sticky:         100;
    --z-dropdown:       200;
    --z-tooltip:        300;
    --z-modal-backdrop: 900;
    --z-modal:          1000;
    --z-modal-nested:   1100;
    --z-toast:          1200;

    /* ── Motion ── */
    --motion-fast:   150ms;
    --motion-normal: 250ms;
    --motion-slow:   400ms;
    --motion-pulse:  2400ms;
    --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:    cubic-bezier(0.4, 0, 1, 1);
    --ease-pulse: ease-in-out;

    /* legacy single token */
    --ease: var(--motion-normal) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-fast:   0ms;
        --motion-normal: 0ms;
        --motion-slow:   0ms;
        --motion-pulse:  0ms;
    }
}

/* ── System Font Scale (4단계) ──
   <html data-system-font="sm|md|lg|xl"> 로 :root 폰트 변수 override + 모달용 scale.
   md 는 디폴트라 :root 그대로. 다른 단계만 카드/헤더/본문 일괄 갱신.
   디자인 토큰 시스템과 일관 — 곱셈이 아니라 픽셀 직접 넣어 두 디자인 사이 점프 자연스러움.
   --system-font-scale 는 em 기반 자식 트리(예: .onboarding-modal)에 곱셈 결로 반영. */
html { 
    --system-font-scale: 1; 
    font-size: 100%;
}
html[data-system-font="sm"] {
    font-size: 87.5%;
    --fs-hero:    26px;
    --fs-display: 21px;
    --fs-heading: 19px;
    --fs-modal:   16px;
    --fs-body:    14px;
    --fs-small:   12px;
    --fs-caption: 10px;
    --system-font-scale: 0.92;
}
html[data-system-font="md"] { 
    font-size: 100%;
    --system-font-scale: 1; 
}
html[data-system-font="lg"] {
    font-size: 112.5%;
    --fs-hero:    34px;
    --fs-display: 27px;
    --fs-heading: 25px;
    --fs-modal:   21px;
    --fs-body:    17px;
    --fs-small:   15px;
    --fs-caption: 13px;
    --system-font-scale: 1.12;
}
html[data-system-font="xl"] {
    font-size: 125%;
    --fs-hero:    38px;
    --fs-display: 30px;
    --fs-heading: 28px;
    --fs-modal:   23px;
    --fs-body:    19px;
    --fs-small:   17px;
    --fs-caption: 14px;
    --system-font-scale: 1.25;
}

[data-theme="dark"] {
    /* 라이트와 다크 모두 동등하게 아름다워야 함. 다크가 곁다리 아님. */
    /* (디자인 시스템 v1 2026-05-16) warm dark — 정 가운데 따뜻한 톤 */
    --color-bg:               #1A1815;
    --color-surface:          #221F1B;
    --color-surface-elevated: #2A2722;
    --color-surface-quiet:    rgba(255,250,240,0.04);
    --color-border:           #3A352F;
    --color-ink-primary:      #F0EBE0;       /* 대비 12.6:1 AAA */
    --color-ink-secondary:    #B8B0A6;       /* 대비 7.0:1 AA */
    --color-ink-tertiary:     #807870;       /* 대비 4.6:1 AA */
    --color-success:          #6FA384;
    --color-warn:             #D4A86C;
    --color-danger:           #D48282;

    /* 다크모드 전용 도트 세만틱 팔레트 재정의 */
    --dot-gray:   #4E4942;
    --dot-yellow: #E2B538;
    --dot-green:  #58A768;
    --dot-orange: #D77A42;
    --dot-red:    #C85038;
    --dot-purple: #8265BE;

    /* Brand Accent 다크 변주 — 채도 살짝 낮추고 명도 올림 */
    --brand-olive:           #8FA078;        /* 대비 5.4:1 AA (산출물 1 dark spec) */
    --brand-olive-soft:      rgba(143,160,120,0.12);
    --brand-olive-strong:    #A0B089;
    --brand-olive-border:    rgba(143,160,120,0.30);

    --brand-beige:           #D4BA90;
    --brand-beige-soft:      rgba(212,186,144,0.14);
    --brand-beige-strong:    #E9D2A8;
    --brand-beige-border:    rgba(212,186,144,0.30);

    --brand-lavender:        #B0A6CC;
    --brand-lavender-soft:   rgba(176,166,204,0.14);
    --brand-lavender-strong: #C9C0E0;
    --brand-lavender-border: rgba(176,166,204,0.30);

    --brand-primary: var(--brand-olive);
    --brand-soft:    var(--brand-olive-soft);
    --brand-strong:  var(--brand-olive-strong);
    --brand-border:  var(--brand-olive-border);

    /* shadow 보강 — 다크 모드는 더 진하게 */
    --shadow-soft:     0 1px 2px rgba(0,0,0,0.4);
    --shadow-elevated: 0 4px 12px rgba(0,0,0,0.5);
    --shadow-sm: var(--shadow-soft);
    --shadow-lg: var(--shadow-elevated);
}

/* ── Accent 변주 데이터 속성 (UI 라이브 전환) ──
   디자인 시스템 v1 — 사용자가 설정에서 자유 선택. 라이트·다크 둘 다 자연 적응. */
[data-accent="beige"] {
    --brand-primary: var(--brand-beige);
    --brand-soft:    var(--brand-beige-soft);
    --brand-strong:  var(--brand-beige-strong);
    --brand-border:  var(--brand-beige-border);
}
[data-accent="lavender"] {
    --brand-primary: var(--brand-lavender);
    --brand-soft:    var(--brand-lavender-soft);
    --brand-strong:  var(--brand-lavender-strong);
    --brand-border:  var(--brand-lavender-border);
}
/* [data-accent="olive"] 또는 미지정 = 디폴트 :root 자리 자연 적용 (별도 분기 X) */

/* ═══ Reset ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Phase E-9/M-2: iOS Safari 100vh 버그 가드 + 노치·홈 인디케이터 safe-area.
   - 100vh는 iOS에서 주소 표시줄을 무시한 값이라 화면보다 크게 잡힘 → 100dvh로.
   - env(safe-area-inset-*)는 viewport-fit=cover 일 때만 의미 있음 (index.html에 적용됨). */
html, body {
    min-height: 100vh;
    min-height: 100dvh;
}
body {
    font-family: var(--font);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--ink-primary);
    background: var(--surface-canvas);
    -webkit-font-smoothing: antialiased;
    letter-spacing: var(--ls-body);
    /* PWA standalone 시 노치·홈 인디케이터를 피해 본문이 잘리지 않도록 */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}
button, input, textarea { font-family: var(--font); color: inherit; }
a { color: var(--brand-primary); text-decoration: none; }
a:hover { opacity: 0.85; }

/* ═══ Typography — element defaults + utility classes ═══
   디자인 시스템 스펙(README, colors_and_type.css)에 정합.
   .s-* 유틸리티는 일관된 텍스트 위계가 필요한 곳에서 직접 사용. */
h1 { font-size: var(--fs-hero);    font-weight: 700; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
h2 { font-size: var(--fs-heading); font-weight: 700; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
h3 { font-size: var(--fs-modal);   font-weight: 600; line-height: 1.4; }
h4 { font-size: var(--fs-body);    font-weight: 600; line-height: 1.4; }
p  { font-size: var(--fs-body);    line-height: var(--lh-body); }
small { font-size: var(--fs-small); color: var(--ink-secondary); }

.s-hero    { font-size: var(--fs-hero);    font-weight: 700; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.s-display { font-size: var(--fs-display); font-weight: 700; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.s-heading { font-size: var(--fs-heading); font-weight: 600; letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.s-modal   { font-size: var(--fs-modal);   font-weight: 600; line-height: 1.4; }
.s-body    { font-size: var(--fs-body);    font-weight: 400; line-height: var(--lh-body); }
.s-small   { font-size: var(--fs-small);   font-weight: 400; line-height: 1.55; color: var(--ink-secondary); }
.s-caption { font-size: var(--fs-caption); font-weight: 500; line-height: 1.4;
             color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: 0.04em; }

/* ═══ Layout ═══ */
.main-layout { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
    width: 240px; min-height: 100vh;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    padding: var(--sp-4);
    position: fixed; left: 0; top: 0; bottom: 0;
    z-index: 100;
    transition: transform var(--ease), background var(--ease);
}
.sidebar-header { padding: var(--sp-4) var(--sp-2) var(--sp-5); }
.logo {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    font-size: 18px; font-weight: 700; color: var(--brand-primary);
    letter-spacing: -0.01em; text-decoration: none;
}
.logo-mark { width: 22px; height: 23px; flex-shrink: 0; }
.logo-text { line-height: 1; }

/* (2026-05-22) 로고 텍스트 세로 쌓기 — "Sanctum OS" 아래 "(BETA)". */
.logo-textwrap {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1;
}
/* (2026-05-22) BETA 배지 pill 폐기 — 칸 나누지 않고 작은 회색 글자로. */
.sidebar-beta-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink-tertiary);
    line-height: 1;
}
.sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.sidebar-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3);
    border: none; background: none; cursor: pointer;
    font-size: 14px; color: var(--ink-secondary);
    border-radius: var(--radius); transition: all var(--ease);
    width: 100%; text-align: left; position: relative;
}
.sidebar-item:hover { background: var(--hover); color: var(--ink-primary); }
.sidebar-item.active { background: var(--brand-soft); color: var(--brand-primary); font-weight: 600; }
/* Lucide stroke 1.5 round. 사이드바 메뉴 아이콘은 22×22 슬롯에 18×18 글리프.
   .icon이 비어있을 때(레거시 이모지 텍스트 한 글자)에도 폭을 유지하기 위해 inline-flex로. */
.sidebar-item .icon {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 16px; line-height: 1;
}
.sidebar-item .icon svg { width: 18px; height: 18px; stroke-width: 1.75; }
.nav-divider { border: none; border-top: 1px solid var(--border); margin: var(--sp-2) 0; }
/* (2026-05-13) 프로필을 로고 아래로 옮김 — margin-top: auto 제거.
   .sidebar-nav 가 flex:1 이라 자연스럽게 위쪽 묶음 + 하단 묶음으로 분리됨. */
.sidebar-profile {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3);
    margin-bottom: var(--sp-2);
    border-radius: var(--radius); transition: background var(--ease);
}
/* (2026-05-13 #30) 사이드바 상시 날짜 라벨 — 어느 화면에 있어도 현재 작업 날짜 식별 */
.sidebar-current-date {
    padding: 4px var(--sp-3);
    margin: 0 var(--sp-2) var(--sp-3);
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-secondary, transparent);
    border-radius: 6px;
    text-align: center;
    border: 1px dashed var(--border);
}
.sidebar-current-date.is-other-day {
    color: var(--dot-orange, #d97706);
    border-style: solid;
    border-color: var(--dot-orange, #d97706);
    font-weight: 600;
}
.sidebar-profile:hover { background: var(--hover); }
/* (2026-05-13) 하단 고정 묶음 — 설정 + boot-status */
.sidebar-bottom {
    margin-top: var(--sp-2);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-2);
}
.sidebar-footer {
    display: flex; align-items: center; gap: var(--sp-2);
    padding-top: var(--sp-3); border-top: 1px solid var(--border);
    margin-top: var(--sp-3);
}
.sidebar-footer button {
    background: none; border: none; cursor: pointer;
    font-size: 16px; padding: var(--sp-2);
    border-radius: var(--radius); color: var(--ink-secondary);
    transition: background var(--ease);
    display: inline-flex; align-items: center; justify-content: center;
}
.sidebar-footer button:hover { background: var(--hover); color: var(--ink-primary); }
.sidebar-footer button svg { width: 18px; height: 18px; stroke-width: 1.75; }
.lock-timer {
    font-size: 11px; color: var(--ink-secondary); margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
}
.lock-timer-icon { width: 12px; height: 12px; stroke-width: 1.75; }

.boot-status {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
    padding: 6px 10px;
    margin: 8px 0 0;
    text-align: center;
    border-top: 1px solid var(--border);
    border-radius: 0 0 8px 8px;
    transition: color 200ms ease, background 200ms ease;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* ── 빈 상태 컴포넌트 (모든 뷰 공통) ── */
.empty-state {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-7) var(--sp-5);
    text-align: center;
    box-shadow: var(--shadow-sm);
}
.empty-state-icon {
    width: 48px; height: 48px; stroke-width: 1.5;
    color: var(--ink-tertiary);
    margin: 0 auto var(--sp-3);
    display: block;
}
.empty-state h3 {
    font-size: var(--fs-modal);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--sp-3);
}
.empty-state-desc {
    color: var(--text-secondary);
    line-height: 1.7;
    max-width: 420px;
    margin: 0 auto var(--sp-5);
}
.empty-state-hint {
    background: var(--bg-elev);
    border-radius: var(--radius);
    padding: var(--sp-4) var(--sp-5);
    text-align: left;
    max-width: 460px;
    margin: 0 auto;
    font-size: var(--fs-small);
}
.empty-state-hint strong {
    display: block;
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}
.empty-state-hint ol {
    padding-left: var(--sp-5);
    color: var(--text-secondary);
    line-height: 1.9;
}

/* ── Content ── */
.content-area {
    flex: 1; margin-left: 240px;
    padding: var(--sp-6) var(--sp-7);
    max-width: 1080px;
}
/* (S-F1 2026-05-15) DEV 환경 배지 — dev.sanctumos.kr 일 때만 노출.
   사용자가 어느 환경에 있는지 한 눈에 알게. 빨간 톤으로 메인과 구분. */
.dev-env-badge {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    background: #c94a3a;
    color: #fbfaf6;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border-radius: 0 0 8px 8px;
    z-index: 10000;
    pointer-events: none;
    user-select: none;
    box-shadow: 0 2px 8px rgba(36, 36, 32, 0.18);
}
@media (max-width: 640px) {
    .dev-env-badge {
        font-size: 10px;
        padding: 3px 10px;
    }
}

/* (S-E6.2 2026-05-15) 카드 등장 애니메이션 — .view 한 자리만.
   사용자 피드백 "뜨는 속도가 제각각" — 카드별 개별 애니메이션은 비동기 데이터 로드 시점이 달라
   각자 따로 등장. .view 단일 애니메이션이면 그 안 카드는 한 덩어리로 함께 fade·lift. */
.view {
    animation: viewLift 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes viewLift {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .view { animation: none; }
}
.hidden { display: none !important; }
/* 다른 자리에서 참조하는 fadeIn 보존 (헤더 dropdown 등). */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ═══ Page Elements ═══ */
.page-header {
    margin-bottom: var(--sp-5);
    display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
    flex-wrap: wrap;
}
.page-header h1 {
    /* (디자인 시스템 v1 2026-05-16) 큰 페이지 헤더 = 영적·헤더 자리 → serif */
    font-family: var(--font-serif);
    font-size: var(--fs-hero); font-weight: 700; letter-spacing: -0.01em;
    display: inline-flex; align-items: center; gap: var(--sp-3);
}
.page-header h1 .page-icon {
    width: 26px; height: 26px; stroke-width: 1.75;
    color: var(--brand-primary); flex-shrink: 0;
}
/* 섹션 카드 안의 헤더 아이콘 — 18×18, brand-primary, stroke 1.75 */
.section-title .section-icon {
    width: 18px; height: 18px; stroke-width: 1.75;
    color: var(--brand-primary); flex-shrink: 0;
}
/* 버튼 안 인라인 아이콘 — 14×14, currentColor 따라감 */
.btn-icon {
    width: 14px; height: 14px; stroke-width: 1.75;
    display: inline-block; vertical-align: -2px; margin-right: 2px;
}
button .btn-icon { vertical-align: text-bottom; }
.subtitle { color: var(--ink-secondary); margin-top: var(--sp-2); }

/* ── Pinned principle banner (always-on) ── */
.pinned-banner {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: var(--fs-small); color: var(--text-primary);
    margin-bottom: var(--sp-4);
}
.pinned-banner .pin-icon {
    width: 16px; height: 16px; stroke-width: 1.75;
    color: var(--brand-primary); flex-shrink: 0;
}

/* 저녁 배너 (묵상 Phase B 2026-05-13) — 18시 이후 권유형. 닫기 버튼 1개. */
.evening-banner {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    font-size: var(--fs-small); color: var(--text-primary);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-sm);
}
.evening-banner-icon {
    width: 18px; height: 18px; stroke-width: 1.75;
    color: var(--accent); flex-shrink: 0;
}
.evening-banner-text { flex: 1; }
.evening-banner-dismiss {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: transparent; border: none; border-radius: var(--radius);
    color: var(--ink-secondary); cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.evening-banner-dismiss:hover { background: var(--surface-soft, var(--hover)); color: var(--text-primary); }
.evening-banner-dismiss i { width: 16px; height: 16px; stroke-width: 1.75; }

/* ── Settings 카테고리 묶음 (2026-05-18) ──
 * 한 화면 안에서 7개 카테고리로 시각 분리 (옵션 A).
 * 슬림 모드는 [data-slim="hidden"] 그룹/nav 항목만 자동 숨김. */
.settings-group {
    margin-top: var(--sp-6);
}
.settings-group:first-of-type { margin-top: var(--sp-3); }
.settings-group-title {
    display: flex; align-items: baseline; gap: var(--sp-2);
    font-family: var(--font-serif);
    font-size: var(--fs-modal);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--sp-3);
    padding: 0 0 var(--sp-2);
    border-bottom: 1px solid var(--line);
    letter-spacing: -0.01em;
}
.settings-group-title .group-emoji {
    font-size: 1.05em; line-height: 1;
    transform: translateY(1px);
}
.settings-group-title .group-hint {
    margin-left: auto;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 400;
    color: var(--ink-secondary);
    letter-spacing: 0;
}
/* 그룹 안의 카드 — 외부 간격이 그룹 단위로 잡혀있어서 하단 여백만 살짝 */
.settings-group .card-section { margin-bottom: var(--sp-3); }
.settings-group .card-section:last-child { margin-bottom: 0; }

/* ── 설정 모드 = 사이드바 변신 (2026-05-18 v69) ──
 * 사용자 명시: 우측 별도 nav 폐기. [설정] 진입 시 사이드바 자체가 설정 nav 으로 변신.
 * 사이드바 맨 위 "설정" 제목 + 카테고리 8개 (아이콘 X, 텍스트만, 윈도우 톤 단순 라벨)
 *   + 맨 아래 [← 돌아가기] (눌리면 이전 화면 자연 복원).
 * 우측은 선택된 카테고리만 노출. data-mode="settings" attribute 로 분기. */
.sidebar-settings-nav {
    display: none;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.sidebar-settings-title {
    font-family: var(--font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    padding: var(--sp-4) var(--sp-4) var(--sp-3);
    margin: 0;
    letter-spacing: -0.01em;
}
.sidebar-settings-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 0 var(--sp-2) var(--sp-3);
}
.sidebar-settings-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    border-radius: var(--radius);
    text-align: left;
    font-family: var(--font-sans);
    font-size: 14px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.sidebar-settings-item .icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
    flex-shrink: 0;
}
.sidebar-settings-back .icon {
    width: 14px;
    height: 14px;
    stroke-width: 1.75;
    flex-shrink: 0;
}
.sidebar-settings-item:hover {
    background: var(--accent-soft);
    color: var(--text-primary);
}
.sidebar-settings-item.active {
    background: var(--accent-soft);
    color: var(--text-primary);
    font-weight: 600;
}
.sidebar-settings-divider {
    height: 1px;
    background: var(--line);
    margin: 6px var(--sp-3);
    border: 0;
}
.sidebar-settings-back {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    width: 100%;
    /* (2026-05-20 v92 fix) 갤럭시 안드로이드 푸터 자리 자리해 가려지는 자리 자연 자리 — safe-area + 자리 여유 */
    padding: 14px var(--sp-4) calc(env(safe-area-inset-bottom, 0px) + 18px);
    margin: 0;
    background: transparent;
    border: none;
    border-top: 1px solid var(--line);
    color: var(--text-secondary);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 14px;
    text-align: left;
    transition: background var(--ease), color var(--ease);
}
.sidebar-settings-back:hover {
    background: var(--accent-soft);
    color: var(--text-primary);
}
.sidebar-settings-back .back-arrow {
    font-size: 16px;
    line-height: 1;
}

/* data-mode="settings" 분기 — 사이드바 자연 변신 */
html[data-mode="settings"] .sidebar-profile,
html[data-mode="settings"] .sidebar-current-date,
html[data-mode="settings"] .slim-mode-badge,
html[data-mode="settings"] .admin-quick-tools,
html[data-mode="settings"] .sidebar-nav,
html[data-mode="settings"] .sidebar-bottom {
    display: none;
}
html[data-mode="settings"] .sidebar-settings-nav {
    display: flex;
}
/* 설정 모드에서는 우측 페이지 헤더(⚙️ 설정)도 잉여 — 사이드바 가 이미 자리 */
html[data-mode="settings"] #view-settings > .page-header { display: none; }

/* ── 설정 2단계 드릴다운 (설정 직관화 ④ 2026-05-22) ──
 * v69 사이드바 변신 폐기. 설정 뷰가 스스로 [목록]↔[상세].
 *   pane[data-level="list"]   → 카테고리 목록만 (각 줄 ›)
 *   pane[data-level="detail"] → ← 설정 + 선택한 그룹만 */
.settings-pane { min-width: 0; }

/* 카테고리 목록 (1단계) */
.settings-menu {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    max-width: 560px;
}
.settings-menu-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: left;
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}
.settings-menu-row:hover {
    background: var(--accent-soft);
    border-color: var(--accent-border);
}
.settings-menu-row[hidden] { display: none; }
.settings-menu-icon {
    width: 18px; height: 18px; stroke-width: 1.75;
    flex-shrink: 0; color: var(--accent);
}
.settings-menu-label { flex: 1; min-width: 0; }
.settings-menu-chev {
    width: 16px; height: 16px; stroke-width: 1.75;
    flex-shrink: 0; color: var(--ink-tertiary);
}

/* ← 설정 뒤로 (2단계 상단) */
.settings-detail-back {
    display: none;
    align-items: center;
    gap: var(--sp-1);
    margin: 0 0 var(--sp-4);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) 0;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--motion-fast) var(--ease-out);
}
.settings-detail-back:hover { color: var(--accent); }
.settings-detail-back .icon { width: 18px; height: 18px; stroke-width: 2; }

/* level 분기 — 상태는 #view-settings[data-level] */
#view-settings[data-level="detail"] .settings-menu { display: none; }
#view-settings[data-level="detail"] .settings-detail-back { display: inline-flex; }
#view-settings[data-level="detail"] > .page-header { display: none; }
.settings-pane .settings-group { display: none; margin-top: 0; }
#view-settings[data-level="detail"] .settings-group.active { display: block; }
#view-settings[data-level="detail"] .settings-group.active > .settings-group-body > :first-child { margin-top: 0; }
.settings-pane .settings-group > .settings-group-title { display: flex; }

/* (설정 직관화 ④ 후속 2026-05-22) 모바일: 설정 상세에선 떠 있는 햄버거를 숨기고
   "← 설정" 뒤로가 그 자리를 차지 — 위아래 겹침 제거. (level 은 html 에도 미러) */
html[data-settings-level="detail"] .menu-toggle-btn { display: none; }
@media (max-width: 768px) {
    html[data-settings-level="detail"] .content-area {
        padding-top: calc(var(--sp-3) + env(safe-area-inset-top, 0));
    }
}

/* ── Card section ── */
.card-section {
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-sm);
    transition: transform var(--ease), box-shadow var(--ease);
}

/* (2026-05-23) 묵상+기도 한 카드 — 안에 두 작성 구역(묵상 노트 / 기도). 카드 안 하얀 작성칸. */
.note-sub + .note-sub {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}
.note-sub-head {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-2);
}
.note-sub-label {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-small); font-weight: var(--font-weight-semibold);
    color: var(--ink-secondary);
}
.note-sub-icon { width: 14px; height: 14px; stroke-width: 1.75; }
.note-save-status { font-size: var(--fs-caption); color: var(--ink-tertiary); margin-left: auto; }

/* (2026-05-23 v2) 시간표를 "오늘의 목표" 카드 안으로 흡수 — 목표 리스트 아래 한 흐름. */
.timeline-merged {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
}
.timeline-sub-label {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--fs-small); font-weight: var(--font-weight-semibold);
    color: var(--ink-secondary);
    margin-bottom: var(--sp-2);
}

/* (2026-05-23) 날짜 + 어제 질문 = 한 묶음 — 날짜 아래 "확인하기" 한 줄로 자연 연결. */
.today-head { margin-bottom: var(--sp-5); }
.today-head .page-header { margin-bottom: 0; }
.today-head-yq {
    margin-top: var(--sp-3);
    /* (2026-05-23) 산문화 — 사용자 명시 "카드가 아니라 산문처럼".
       좌우 padding·radius 제거해 날짜 제목과 왼쪽 정렬 맞춤. 배경·세로선은 아래에서 함께 벗김. */
}
.today-head-yq .yq-title {
    font-size: var(--fs-base); font-weight: var(--font-weight-semibold);
    color: var(--ink-secondary);
}
.today-head-yq .yq-title .section-icon { width: 15px; height: 15px; color: var(--accent); }
/* 카드 호버 — 디자인 시스템 표준: 1px만 들어 올림. 컬러·스케일 변화 없음. */
.card-section:hover { transform: translateY(-1px); }
.section-title {
    font-size: var(--fs-modal); font-weight: 600;
    margin-bottom: var(--sp-3); color: var(--text-primary);
    display: flex; align-items: center; gap: var(--sp-2);
}
.section-desc {
    font-size: var(--fs-small); color: var(--text-secondary);
    margin-top: -8px; margin-bottom: var(--sp-3);
}
.section-header-flex {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--sp-3); gap: var(--sp-3); flex-wrap: wrap;
}
.collapsible-toggle {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 12px; padding: 4px 8px;
}
.collapsible-toggle:hover { color: var(--accent); }
/* 카드 본문 접기 — collapsible-body 클래스 가진 요소가 .collapsed 되면 숨김 */
.collapsible-body.collapsed { display: none; }
#meditation-content.collapsed { display: none; }

/* 페이지 헤더의 우측 액션 묶음 (날짜 입력 + 전체 접기 버튼) */
/* (2026-05-20 v101 fix) 사용자 점검 "펼치기가 저기로 가야 한다니까" — 우측 끝 강제. */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

/* ── Date picker ── */
.date-picker {
    font-family: var(--font); font-size: var(--fs-small);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); color: var(--text-primary);
    cursor: pointer;
}

/* ── Scripture rendering ── */
.meditation-box { min-height: 60px; }
.meditation-error {
    padding: var(--sp-4); text-align: center;
    color: var(--dot-red); font-size: var(--fs-small);
    background: rgba(229, 101, 74, 0.08); border-radius: var(--radius);
}
.scripture-toolbar {
    display: flex; justify-content: flex-end; gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
/* 묵상 노트 카드 안 하단에 붙어 같이 스크롤되는 복사 바 */
#section-meditation { position: relative; }
.scripture-copy-bar {
    position: sticky; bottom: 0;
    margin: var(--sp-3) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
    padding: var(--sp-3) var(--sp-4);
    background: linear-gradient(180deg, transparent, var(--bg-card) 40%);
    z-index: 5;
    display: flex; justify-content: flex-end;
    pointer-events: none; /* 그라데이션 영역은 통과, 버튼만 활성 */
}
.scripture-copy-bar > button { pointer-events: auto; }
.scripture-copy-bar .primary-btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.reading-part { margin-bottom: var(--sp-4); }
.passage-container {
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; background: var(--bg-card);
}
.passage-header {
    padding: var(--sp-3) var(--sp-4); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    user-select: none;
}
.passage-header::after {
    content: '▾'; margin-left: var(--sp-2);
    color: var(--text-secondary); font-size: 11px;
    transition: transform var(--ease);
}
.passage-header:hover { background: var(--hover); }
.passage-title { font-size: 14px; font-weight: 600; color: var(--accent); flex: 1; }
.passage-meta { font-size: 11px; color: var(--text-secondary); margin-left: auto; }
/* (2026-05-13) manual 모드 자동 롤오버 어긋났을 때 사용자 직접 다음 장 진입 */
.passage-jump-next,
.passage-jump-pick {
    margin-left: var(--sp-2); padding: 2px 8px;
    font-size: 11px; color: var(--accent);
    background: transparent; border: 1px solid var(--border);
    border-radius: 6px; cursor: pointer;
}
.passage-jump-next:hover,
.passage-jump-pick:hover { background: var(--hover); }
.passage-container.collapsed .verse-list { display: none; }
.passage-container.collapsed .passage-header { border-bottom: none; }
.passage-container.collapsed .passage-header::after { transform: rotate(-90deg); }
.verse-list { padding: var(--sp-3) var(--sp-4); background: var(--bg-card); }
.verse-item {
    display: flex; gap: var(--sp-3); padding: var(--sp-1) 0;
    font-size: var(--scripture-fs, 15px);
    line-height: var(--scripture-lh, 1.75);
    cursor: pointer;
}
.verse-item:hover { color: var(--accent); }
.verse-num {
    flex-shrink: 0; min-width: 24px;
    font-size: 11px; color: var(--text-secondary);
    font-variant-numeric: tabular-nums; padding-top: 4px;
}
/* (v143) 한글 단어가 줄바꿈에서 잘리지 않게 — keep-all. 아주 긴 토큰만 예외로 줄바꿈. */
.verse-text { flex: 1; word-break: keep-all; overflow-wrap: break-word; }
.verse-item.selected { color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 2px 4px; }

/* (v143) 모바일 — 절 번호와 본문 사이 간격을 좁혀요. */
@media (max-width: 480px) {
    .verse-item { gap: var(--sp-2); }
    .verse-num { min-width: 18px; }
}

/* Phase E-8/E: 수동 진행 모드 — passage 카드 아래 "이 장 다 읽었어요" 버튼 */
.passage-footer {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px dashed var(--border);
    background: var(--bg-card);
}
.passage-container.collapsed .passage-footer { display: none; }
.passage-read-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-elev); color: var(--text-primary);
    font-size: 12px; font-weight: 500; cursor: pointer;
    transition: all var(--ease);
}
.passage-read-btn:hover {
    border-color: var(--accent); color: var(--accent); background: var(--accent-soft);
}
.passage-read-btn:disabled,
.passage-read-btn.done {
    cursor: default;
    border-color: var(--dot-green, #6BBF7B);
    color: var(--dot-green, #6BBF7B);
    background: rgba(107, 191, 123, 0.10);
}
.passage-read-btn:disabled:hover,
.passage-read-btn.done:hover {
    border-color: var(--dot-green, #6BBF7B);
    color: var(--dot-green, #6BBF7B);
    background: rgba(107, 191, 123, 0.10);
}
.passage-read-btn-icon { width: 14px; height: 14px; }
.passage-read-hint { font-size: 11px; color: var(--text-secondary); }

/* ── Meditation note ── */
.note-editor {
    /* (2026-05-20 v92) 본문 = Pretendard(--font-sans), 헤딩만 Noto Serif.
       사용자 합의 — 일상 생산성 톤 + 헤딩만 영적 자리. v62 디자인 시스템 v1 Phase A 결 갈아끼움.
       (v93) data-note-font 분기 — 사용자가 설정에서 자유 선택 가능. */
    /* (2026-05-23 v2) 종이처럼 — 테두리·배경 없이 페이지에 바로 쓰는 작성칸.
       사용자 명시: "작성칸 테두리 아예 없애줘 + 에디터 영역 더 늘려줘". */
    min-height: 140px; padding: var(--sp-2) 0;
    border: none; border-radius: 0;
    font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--leading-relaxed);
    outline: none;
    background: transparent; color: var(--text-primary);
}
/* 묵상 노트 = 주 작성 공간이라 더 넓게. 기도는 위 기본(140px). */
#meditation-note { min-height: 260px; }
/* (2026-05-20 v93) 사용자 노트 폰트 선택 — html[data-note-font="serif"] 분기.
   디폴트(pretendard)는 위 .note-editor 자리 그대로.
   (v99) system 옵션 자리 폐기 — 사용자 점검 "어차피 프리텐다드인데". */
html[data-note-font="serif"] .note-editor {
    font-family: var(--font-serif);
}
html[data-note-font="serif"] .note-editor h1,
html[data-note-font="serif"] .note-editor h2,
html[data-note-font="serif"] .note-editor h3 {
    font-family: var(--font-serif);
}
/* (2026-05-20 v94) 노트 폰트 칩 라벨 자체를 그 폰트로 노출 — 사용자 점검
   "노토 세리프라고 써있으니까 좀 이상함". 직접 그 폰트로 보여야 어떤 결인지 가늠 가능. */
.settings-font-chip[data-note-font="pretendard"] .settings-font-chip-label,
.settings-font-chip[data-note-font="pretendard"] .settings-font-chip-desc {
    font-family: var(--font-sans);
}
.settings-font-chip[data-note-font="serif"] .settings-font-chip-label,
.settings-font-chip[data-note-font="serif"] .settings-font-chip-desc {
    font-family: var(--font-serif);
}
/* (2026-05-23 v2) focus 테두리 없앰 — 종이처럼. 커서·라벨로 충분. */
.note-editor:focus { border: none; background: transparent; }
.note-editor:empty::before {
    content: attr(data-placeholder); color: var(--text-secondary); pointer-events: none;
}

/* ═══ Decisions panel ═══ */
.decisions-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.decision-card {
    transition:
        opacity 160ms ease,
        transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 160ms ease;
}
.decision-card {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3); border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-elev);
    transition: all var(--ease);
}
.decision-card.placed {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.decision-card.dragging {
    opacity: 0.55;
    transform: scale(0.97);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.decision-handle {
    font-size: 14px; color: var(--text-secondary); cursor: grab;
    padding: 0 var(--sp-1); user-select: none;
}
.decision-handle:active { cursor: grabbing; }
.decision-text {
    flex: 1; border: none; background: transparent;
    font-family: var(--font); font-size: var(--fs-body);
    color: var(--text-primary); outline: none; min-width: 0;
}
.decision-text::placeholder { color: var(--text-secondary); }
.decision-slot {
    font-size: 11px; color: var(--text-secondary);
    padding: 2px 6px; border-radius: 4px;
    background: var(--hover); white-space: nowrap;
}
.decision-card.placed .decision-slot {
    background: var(--accent); color: white;
}
.decision-action {
    background: none; border: none; cursor: pointer;
    font-size: 14px; color: var(--text-secondary);
    padding: var(--sp-1); border-radius: 4px;
}
.decision-action:hover { background: var(--hover); color: var(--text-primary); }
.decision-add-btn {
    margin-top: var(--sp-3); padding: var(--sp-2) var(--sp-3);
    background: none; border: 1px dashed var(--border); border-radius: var(--radius);
    color: var(--text-secondary); cursor: pointer; width: 100%;
    transition: all var(--ease);
}
.decision-add-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ═══ Unified timeline ═══ */
.timeline-toolbar {
    display: flex; justify-content: flex-end; gap: var(--sp-2);
    margin-bottom: var(--sp-3); flex-wrap: wrap;
}
.timeline-toolbar button {
    font-size: 12px; padding: var(--sp-1) var(--sp-3);
    background: var(--bg-elev); border: 1px solid var(--border);
    color: var(--text-secondary); border-radius: var(--radius);
    cursor: pointer; transition: all var(--ease);
}
.timeline-toolbar button:hover { border-color: var(--accent); color: var(--accent); }
.timeline-toolbar button:disabled { opacity: 0.5; cursor: not-allowed; }

.unified-timeline {
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; background: var(--bg-card);
    position: relative;
}
.utl-header {
    display: grid; grid-template-columns: 60px 1fr 1fr;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-elev); border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
}
/* (v115) 데스크탑 부분 통일 — 헤더 + scroll 분리. 72시간 + 줌 + 드롭다운 자리합 */
.utl-body {
    display: block;
    position: relative;
}
.utl-desktop-header {
    display: flex;
    justify-content: flex-end;
    padding: 6px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
}
.utl-desktop-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.utl-desktop-zoom-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}
.utl-desktop-zoom-btn:hover { background: var(--accent-soft); }
.utl-desktop-zoom-label {
    min-width: 42px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.utl-desktop-scroll {
    display: grid;
    grid-template-columns: 60px 1fr 1fr;
    position: relative;
    max-height: 70vh;
    overflow-y: auto;
}
.utl-axis-col, .utl-plan-col, .utl-actual-col {
    display: block;  /* (v115) grid 결 자리함 X — inline height 자리합 */
    position: relative;
}
/* (🕛 자정 넘나듦 Phase 4) 기록 칸을 자정 구분선(z-index 4) 위로 올림 — 묶음 조각이
   점선을 가려 한 덩어리로 보이게. 빈 칸은 배경이 투명해 점선이 그대로 비쳐 보임. */
.utl-actual-col { z-index: 5; }
/* 날짜 구분선 (어제·오늘·내일) */
.utl-desktop-day-divider {
    position: absolute;
    left: 60px;
    right: 0;
    height: 0;
    border-top: 2px dashed var(--accent);
    opacity: 0.45;
    pointer-events: none;
    z-index: 4;
}
.utl-desktop-day-divider:first-of-type { border-top: none; }
.utl-desktop-day-label {
    position: absolute;
    top: -10px;
    left: 8px;
    background: var(--bg-card);
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
/* 어제·내일 자리 = 흐릿 */
.utl-cell.day-yesterday, .utl-cell.day-tomorrow { opacity: 0.7; }
.utl-slot.day-yesterday, .utl-slot.day-tomorrow {
    opacity: 0.65;
    cursor: default;
}
/* (🕛 자정 넘나듦 Phase 4) 자정 넘긴 한 활동이 어제·오늘 두 조각으로 나뉠 때
   맞닿은 모서리를 평평하게 이어 붙이고, 어제 조각도 또렷하게 통일해 한 덩어리로 보이게. */
.utl-slot.span-start { border-bottom-left-radius: 0; border-bottom-right-radius: 0; margin-bottom: -2px; }
.utl-slot.span-mid   { border-radius: 0; margin-bottom: -2px; }
.utl-slot.span-end   { border-top-left-radius: 0; border-top-right-radius: 0; }
.utl-slot.day-yesterday.span-start,
.utl-slot.day-yesterday.span-mid,
.utl-slot.day-yesterday.span-end { opacity: 1; cursor: default; }
/* (🕛 자정 넘나듦) 모바일 묶음 조각 — 모서리 이어 붙이고 어제 조각도 또렷하게. */
.utl-mg-slot.mg-span-start { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.utl-mg-slot.mg-span-mid   { border-radius: 0; }
.utl-mg-slot.mg-span-end   { border-top-left-radius: 0; border-top-right-radius: 0; }
.utl-mg-slot.day-yesterday.mg-span-start,
.utl-mg-slot.day-yesterday.mg-span-mid,
.utl-mg-slot.day-yesterday.mg-span-end { opacity: 1; }
/* 인라인 4상태 평가 (actual 슬롯) */
.slot-quick-eval {
    display: flex;
    gap: 3px;
    padding: 2px 4px 3px;
    margin-top: auto;
}
.slot-eval-btn {
    flex: 1;
    min-width: 0;
    min-height: 30px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    line-height: 1;
    padding: 2px 0;
    /* (2026-05-23) 4상태 = 중립 기호 + 라벨. 모노톤, 선택 시 올리브(인라인 style). */
    color: var(--ink-secondary);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.slot-eval-btn .ev-i { font-size: 15px; line-height: 1; }
.slot-eval-btn .ev-l { font-size: 8px; line-height: 1; letter-spacing: -0.02em; opacity: 0.55; }
.slot-eval-btn:hover { background: var(--accent-soft); }
/* (v117) 데스크탑 드롭다운 — modal overlay 결 자리합 (body 자리한 자리 + position fixed) */
.utl-desktop-dd-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 999;
}
.utl-desktop-dropdown {
    position: fixed;
    z-index: 1000;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.24);
    max-height: 320px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 1;
}
.utl-desktop-dd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-elev);
}
.utl-desktop-dd-time { font-size: 13px; font-weight: 600; color: var(--accent); }
.utl-desktop-dd-close {
    background: none;
    border: none;
    font-size: 16px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.utl-desktop-dd-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    max-height: 160px;
}
.utl-desktop-dd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary);
}
.utl-desktop-dd-item:hover { background: var(--accent-soft); }
.utl-desktop-dd-icon { color: var(--accent); font-size: 14px; flex-shrink: 0; }
.utl-desktop-dd-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.utl-desktop-dd-empty {
    padding: 16px 14px;
    text-align: center;
    font-size: 13px;
    color: var(--text-secondary);
}
.utl-desktop-dd-divider { height: 1px; background: var(--border); margin: 0; }
.utl-desktop-dd-form {
    display: flex;
    gap: 6px;
    padding: 10px 12px;
    background: var(--bg);
}
.utl-desktop-dd-input {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
}
.utl-desktop-dd-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.utl-desktop-dd-submit {
    padding: 8px 14px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}
/* 빈 셀 hover — 클릭 가능 표시 */
.utl-cell.day-today { cursor: pointer; }
.utl-cell.day-today:hover { background: var(--accent-soft); }
.utl-cell.day-tomorrow { cursor: pointer; }
.utl-cell.day-tomorrow:hover { background: var(--accent-soft); opacity: 0.85; }
.utl-time-tick {
    font-size: 10px; color: var(--text-secondary);
    text-align: right; padding-right: 6px;
    border-top: 1px solid var(--border);
    font-variant-numeric: tabular-nums;
    line-height: 16px; position: relative;
}
.utl-time-tick.minor { color: transparent; border-top-color: transparent; }
.utl-time-tick.half { color: var(--text-secondary); opacity: 0.4; }
.utl-cell {
    border-top: 1px dotted color-mix(in srgb, var(--border) 35%, transparent);
    position: relative; cursor: pointer;
    transition: background var(--ease);
}
.utl-cell.hour-mark { border-top: 1px solid var(--border); }
.utl-cell.half-mark { border-top: 1px dashed var(--border); }
.utl-cell:hover { background: var(--hover); }
/* 현재 시간 표시 — 디자인 시스템: 그라데이션 금지. 단색 보더로 표시. */
.utl-cell.now-line {
    background: rgba(229, 101, 74, 0.08);
    border-top: 1px solid var(--dot-red);
}
.utl-cell.drop-target {
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
    transition: background 120ms ease, box-shadow 120ms ease;
}
.utl-actual-col .utl-cell:hover::after {
    content: '+ 지금 뭐 했어요?';
    position: absolute; left: 6px; top: 50%; transform: translateY(-50%);
    font-size: 10px; color: var(--accent);
    pointer-events: none;
}
/* 인라인 평가 패널이 열려 있는 동안엔 빈 셀의 호버 가이드 라벨을 숨김 */
.utl-actual-col:has(.utl-inline-panel) .utl-cell:hover::after { display: none; }

.utl-now-line {
    position: absolute; left: 0; right: 0; height: 2px;
    background: var(--dot-red); z-index: 5; pointer-events: none;
}
.utl-now-line::before {
    content: ''; position: absolute; left: -4px; top: -3px;
    width: 8px; height: 8px; border-radius: 50%; background: var(--dot-red);
}

.utl-slot {
    position: absolute; left: 4px; right: 4px;
    border-radius: 6px;
    padding: 2px 6px 2px 10px;
    font-size: 11px; line-height: 1.3;
    overflow: hidden; cursor: pointer;
    background: var(--bg-elev); border: 1px solid var(--border);
    transition:
        box-shadow 160ms ease,
        transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 160ms ease,
        top 180ms cubic-bezier(0.2, 0.8, 0.2, 1),
        height 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
    user-select: none;
    will-change: transform;
}
.utl-slot:hover { box-shadow: var(--shadow-sm); }
.utl-slot.dragging {
    opacity: 0.5;
    transform: scale(0.97);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
    transition-duration: 80ms;
}
.utl-slot::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--dot-gray); border-radius: 6px 0 0 6px;
}
.utl-slot.dot-gray::before { background: var(--dot-gray); }
.utl-slot.dot-yellow::before { background: var(--dot-yellow); }
.utl-slot.dot-green::before { background: var(--dot-green); }
.utl-slot.dot-orange::before { background: var(--dot-orange); }
.utl-slot.dot-red::before { background: var(--dot-red); }
.utl-slot.dot-purple::before { background: var(--dot-purple); }
.utl-slot.dot-yellow { animation: pendingPulse 2.4s ease-in-out infinite; }
@keyframes pendingPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 200, 75, 0.0); }
    50% { box-shadow: 0 0 0 3px rgba(245, 200, 75, 0.20); }
}
.utl-slot .slot-time { font-size: 10px; color: var(--text-secondary); display: block; }
.utl-slot .slot-title { font-weight: 500; color: var(--text-primary); display: block; }
/* 슬롯 하단 리사이즈 핸들 — 그라데이션 대신 단순 단색 라인 + hover에서만 노출. */
.utl-slot .slot-resize {
    position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    cursor: ns-resize;
    background: var(--brand-soft);
    border-top: 1px solid var(--brand-primary);
    opacity: 0; transition: opacity var(--ease);
}
.utl-slot:hover .slot-resize { opacity: 1; }
.utl-slot.resizing { box-shadow: 0 0 0 2px var(--accent-soft); }
.utl-slot.gcal-source { background: var(--bg-card); }
.utl-slot.gcal-source::before { background: var(--accent); }

/* 계획 vs 실제 시각 구분 — 계획 슬롯은 점선 보더로 "의도"임을 표시.
   실제 슬롯은 실선(기본) — 실제로 일어난 일임. */
.utl-plan-col .utl-slot:not(.gcal-source) {
    border-style: dashed;
    background: color-mix(in srgb, var(--bg-elev) 94%, transparent);
}
.utl-plan-col .utl-slot:not(.gcal-source) .slot-title { opacity: 0.92; }

/* 슬롯 우상단 삭제 버튼 — 호버 시에만 노출. plan에선 unplace, actual에선 도트 삭제. */
.utl-slot .slot-delete {
    position: absolute; top: 2px; right: 2px;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: rgba(0,0,0,0.06); color: var(--text-secondary);
    border-radius: 50%; cursor: pointer;
    font-size: 14px; line-height: 1; padding: 0;
    opacity: 0; transition: opacity var(--ease), background var(--ease), color var(--ease);
}
.utl-slot:hover .slot-delete { opacity: 1; }
.utl-slot .slot-delete:hover { background: var(--dot-red); color: #fff; }

/* 실제 레인 드래그-생성 중 임시 박스. pointer-events:none — hit-test에 안 잡혀야
   elementFromPoint가 아래 셀을 찾을 수 있다. */
.utl-slot.utl-ghost {
    pointer-events: none;
    background: var(--accent-soft);
    border: 1px dashed var(--accent);
    opacity: 0.85;
}
.utl-slot.utl-ghost::before { display: none; }
.utl-slot.utl-ghost .slot-time { color: var(--accent); font-weight: 600; }

/* Empty-state guide */
.utl-empty-card {
    grid-column: 1 / -1;
    padding: var(--sp-5);
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    background: var(--bg-elev);
    border-bottom: 1px solid var(--border);
}
.utl-empty-card h4 { color: var(--text-primary); margin-bottom: var(--sp-2); font-size: 14px; }
.utl-empty-card ol { text-align: left; max-width: 380px; margin: var(--sp-3) auto 0; padding-left: var(--sp-5); line-height: 1.9; }

/* ── 실제 레인 인라인 평가 패널 (드래그 끝나면 펼쳐짐) ──
   드래그 범위 전체에 absolute로 떠서 그 자리에서 텍스트+상태버튼+저장 한 줄로.
   actualCol 안에 absolute로 띄움 (positionSlot과 같은 좌표계). */
.utl-inline-panel {
    position: absolute;
    left: 4px; right: 4px;
    background: var(--bg-card);
    border: 2px solid var(--accent);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    z-index: 5;
    overflow: hidden;
    display: flex; align-items: center;
    padding: 0 var(--sp-3);
    animation: inlinePanelIn 120ms ease-out;
}
@keyframes inlinePanelIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.utl-inline-row {
    display: flex; align-items: center; gap: var(--sp-2);
    width: 100%;
}
.utl-inline-time {
    flex-shrink: 0;
    font-size: 11px; font-weight: 600;
    color: var(--accent);
    padding: 2px 6px;
    background: var(--accent-soft);
    border-radius: 4px;
    white-space: nowrap;
}
.utl-inline-text {
    flex: 1; min-width: 0;
    border: none; outline: none; background: transparent;
    font-size: 13px; color: var(--text-primary);
    padding: 4px 0;
}
.utl-inline-status {
    display: flex; gap: 2px;
    flex-shrink: 0;
}
.utl-inline-status-btn {
    display: inline-flex; align-items: center; gap: 3px;
    height: 26px; padding: 0 7px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink-secondary);
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.utl-inline-status-btn .ev-i { font-size: 14px; line-height: 1; }
.utl-inline-status-btn .ev-l { font-size: 10px; line-height: 1; opacity: 0.55; }
.utl-inline-status-btn:hover {
    background: var(--bg-elev);
    border-color: var(--border);
    transform: scale(1.08);
}
.utl-inline-save {
    flex-shrink: 0;
    background: var(--accent); color: white; border: none;
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    font-size: 12px; font-weight: 600;
}
.utl-inline-save:hover { filter: brightness(1.05); }

/* 패널 높이가 좁을 때(1슬롯=16px) row가 절대 안 잘리도록 최소 높이 보장 */
.utl-inline-panel { min-height: 36px; }

/* ═══ Quick review modal ═══ */
/* (2026-05-20 v94 fix) 사용자 점검 "실제 모달 왜 좌하단으로 쏠리니? 중앙에 뜨게" — 강제 center */
/* (2026-05-20 v98 fix) 사용자 점검 "닫기 작동 X · 시작부터 모달 자리함" —
 *   v94 !important 자리해 .hidden 자리 자리하지 못함. !important 자리 자리하지 X.
 *   .hidden 자리 display: none !important 자리하기. */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.45); backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.modal-overlay.hidden {
    display: none !important;
}
.modal-content {
    background: var(--bg-card); border-radius: var(--radius-lg);
    padding: var(--sp-5); max-width: 460px; width: 90%;
    box-shadow: var(--shadow-lg);
    margin: auto;     /* 강제 center 안전 자리 */
    color: var(--text-primary);
    /* 모달이 화면보다 길 때 — 모달 자체가 스크롤되도록.
       overlay는 flex로 정렬되어 있어 이 max-height + overflow-y가 작동함. */
    max-height: 90vh;
    overflow-y: auto;
    /* iOS 등에서 부드러운 스크롤 */
    -webkit-overflow-scrolling: touch;
}
.qr-modal-content { max-width: 480px; }
.qr-header { margin-bottom: var(--sp-4); }
.qr-header h3 { font-size: var(--fs-modal); font-weight: 600; }
.qr-planned-label { font-size: var(--fs-small); color: var(--text-secondary); display: block; margin-top: var(--sp-1); }

/* 시간 입력 행 — "+ 추가" 흐름에서만 보임. 기존 슬롯 진입 시엔 .hidden 으로 숨김. */
.qr-time-row {
    margin-bottom: var(--sp-4);
    padding: var(--sp-3); background: var(--bg-elev); border-radius: var(--radius);
    border: 1px solid var(--border);
}
.qr-time-row > label {
    display: block; font-size: var(--fs-small); color: var(--text-secondary);
    margin-bottom: var(--sp-2);
}
.qr-time-inputs { display: flex; gap: var(--sp-2); align-items: center; }
.qr-time-inputs input[type="time"],
.qr-time-inputs select {
    flex: 1; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); color: var(--text-primary);
    font-size: 14px;
}

.qr-status-row {
    /* (2026-05-23) 평가 3상태 — 3등분 그리드라 가로 꽉 차고 정렬 맞음 (옛 4열에 3버튼이라 한 칸 비어 어긋났음) */
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.qr-status-btn {
    /* (2026-05-23) 정사각형 — aspect-ratio 1:1 + 3등분 너비라 셋 다 같은 정사각형으로 정렬.
       가운데 '중간쯤 했어요'가 두 줄이어도 높이는 그대로(정사각). 내용은 중앙 정렬. */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    aspect-ratio: 1 / 1;
    padding: var(--sp-2);
    border: 2px solid var(--border); border-radius: var(--radius);
    background: var(--bg-elev); cursor: pointer;
    transition: all var(--ease);
    text-align: center;
}
.qr-status-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.qr-status-btn.selected {
    border-color: var(--accent); background: var(--accent-soft);
}
.qr-status-emoji { font-size: 24px; line-height: 1; color: var(--ink-secondary); }
.qr-status-btn.selected .qr-status-emoji { color: var(--accent); }
.qr-status-text { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.qr-status-key {
    font-size: 9px; color: var(--text-secondary);
    background: var(--hover); padding: 1px 4px; border-radius: 3px;
}
.qr-slider-row {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.qr-slider-row label { font-size: var(--fs-small); color: var(--text-secondary); min-width: 60px; }
.qr-slider-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.qr-sat-display {
    font-weight: 700; font-size: 18px; min-width: 24px; text-align: center;
    color: var(--accent);
}
.qr-labels-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-3); }
.qr-label-chip {
    padding: 4px 10px; border: 1px solid var(--border);
    border-radius: 16px; background: var(--bg-elev); cursor: pointer;
    font-size: 12px; transition: all var(--ease); color: var(--text-secondary);
}
.qr-label-chip:hover { border-color: var(--accent); }
.qr-label-chip.selected { background: var(--accent); color: white; border-color: var(--accent); }
.qr-toggle-btn {
    width: 100%; text-align: center; padding: var(--sp-2);
    border: none; background: none; cursor: pointer;
    font-size: 12px; color: var(--text-secondary);
}
.qr-toggle-btn:hover { color: var(--accent); }
.qr-detail { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-3); }
.qr-field { display: flex; flex-direction: column; gap: var(--sp-1); }
.qr-field label { font-size: 12px; color: var(--text-secondary); }
.qr-text-input {
    width: 100%; padding: var(--sp-3);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: var(--fs-body); background: var(--bg-elev);
    color: var(--text-primary);
}
.qr-text-input:focus { outline: none; border-color: var(--accent); }
.qr-actions { display: flex; justify-content: flex-end; gap: var(--sp-2); margin-top: var(--sp-4); }

/* (2026-05-20 v105) 화면 모드 커스텀 드롭다운 — 디자인 시스템 정합 + 부드러운 애니메이션.
   기본 <select> 펼친 자리 OS 색(파란 자리) 갈음 어려워 커스텀 결로 자리함. */
.theme-dropdown {
    position: relative;
    display: inline-block;
    min-width: 140px;
}
.theme-dropdown-trigger {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 160ms ease-out, background 160ms ease-out;
}
.theme-dropdown-trigger:hover { border-color: var(--accent); }
.theme-dropdown-trigger:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft, rgba(95, 111, 74, 0.12));
}
.theme-dropdown-caret {
    width: 12px; height: 12px;
    color: var(--text-secondary);
    transition: transform 200ms ease-out;
}
.theme-dropdown[data-open="true"] .theme-dropdown-caret {
    transform: rotate(180deg);
}
.theme-dropdown[data-open="true"] .theme-dropdown-trigger {
    border-color: var(--accent);
}
.theme-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 100%;
    margin: 0; padding: 4px;
    list-style: none;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.08));
    z-index: 100;

    /* 부드러운 열림 애니메이션 — fade + slide */
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 180ms ease-out, transform 180ms ease-out;
}
.theme-dropdown[data-open="true"] .theme-dropdown-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.theme-dropdown-option {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 120ms ease-out;
    white-space: nowrap;
}
.theme-dropdown-option:hover {
    background: var(--accent-soft, var(--bg-elev));
}
.theme-dropdown-option.selected {
    background: var(--accent-soft, var(--bg-elev));
    color: var(--accent);
    font-weight: 600;
}
.theme-dropdown-option.selected::after {
    content: '✓';
    margin-left: 8px;
    font-size: 11px;
}
@media (prefers-reduced-motion: reduce) {
    .theme-dropdown-panel,
    .theme-dropdown-caret,
    .theme-dropdown-trigger,
    .theme-dropdown-option { transition: none; }
}

/* ── Buttons ── */
/* (2026-05-20 v91 fix) 사용자 점검 "모바일 자리에서 안 보임" — 배경·테두리 자리해 자연 자리. */
.text-btn {
    background: var(--surface-elev, rgba(0,0,0,0.04));
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    cursor: pointer;
    color: var(--accent);
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.text-btn:hover {
    background: var(--accent-soft, rgba(124,139,111,0.10));
    border-color: var(--accent);
}
.text-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.text-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.text-btn .btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
/* 모바일 자리 자리해 더 자연 자리 */
@media (max-width: 640px) {
    .text-btn {
        font-size: 13px;
        padding: 8px 12px;
        min-height: 36px;
    }
}
/* ── 버튼 통합 (B4 2026-05-22) — 공용 3 변종: primary / secondary(.text-btn) / icon(.icon-btn).
   쉬는 모습은 유지하고 focus 링·비활성·모션 토큰만 일관 적용. swan 버튼(.swan-*)은 SWAN 세션이 같은 결로. */
.primary-btn {
    background: var(--accent); color: white; border: none;
    padding: var(--sp-2) var(--sp-4); border-radius: var(--radius);
    font-size: 14px; font-weight: var(--font-weight-semibold); cursor: pointer;
    transition: opacity var(--motion-fast) var(--ease-out);
}
.primary-btn:hover { opacity: 0.9; }
.primary-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.primary-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ═══ Lock screen ═══ */
.lock-screen-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: var(--bg); display: flex;
    align-items: center; justify-content: center;
    /* (S-E5 2026-05-15) 부드러운 등장 — 갑자기 나오던 느낌 해소.
       .is-visible 일 때만 opacity 1 + interactive. 진입 280ms / 소멸 220ms. */
    opacity: 0;
    pointer-events: none;
    transition: opacity 280ms ease-out;
}
.lock-screen-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.lock-screen-box {
    text-align: center; max-width: 340px; width: 90%;
    /* 살짝 아래에서 올라오는 진입 — 디자인 톤 따라 미미하게 (8px). */
    transform: translateY(8px);
    transition: transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.lock-screen-overlay.is-visible .lock-screen-box {
    transform: translateY(0);
}
.lock-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 56px; height: 56px;
    margin: 0 auto var(--sp-4);
    border-radius: 50%;
    background: var(--brand-soft);
    color: var(--brand-primary, var(--accent));
}
.lock-icon svg { width: 28px; height: 28px; stroke-width: 1.75; }
.lock-screen-box h2 { font-size: var(--fs-heading); margin-bottom: var(--sp-2); font-weight: 600; }
.lock-subtitle { color: var(--text-secondary); margin-bottom: var(--sp-5); font-size: 13px; }
.lock-input {
    width: 100%; padding: 12px 14px;
    border: 1px solid var(--border, var(--line));
    border-radius: 10px;
    font-size: 14px; text-align: left;
    background: var(--bg-card, var(--surface-card));
    color: var(--text-primary, var(--ink-primary));
    margin-bottom: var(--sp-3);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.lock-input::placeholder { color: var(--text-tertiary, var(--ink-tertiary)); }
.lock-input:focus {
    outline: none;
    border-color: var(--brand-primary, var(--accent));
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.lock-btn {
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    font-size: 14px; font-weight: 600;
    margin-bottom: var(--sp-3);
}
.lock-btn .btn-icon { width: 16px; height: 16px; }
.lock-link-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 12px;
    padding: 4px 8px;
}
.lock-link-btn:hover { color: var(--text-primary); }
.lock-error { color: var(--dot-red); font-size: 13px; margin-bottom: var(--sp-3); }

/* 비밀번호 정책 힌트 (Phase 1) */
/* (설정 직관화 ②) 요건 한 줄 — 작은 폰트·좁은 간격·항목별 nowrap.
   데스크탑은 한 줄, 좁은 모바일에선 자연 줄바꿈. 가입(setup-pwd-hint)·비번 바꾸기 공용.
   (2026-05-22 후속) 회색 박스 폐기 — 이미 카드 안이라 글자만. 흰 바탕 위 텍스트. */
.pw-policy-hint {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--sp-1) var(--sp-2);
    margin: -2px 0 4px 2px;
    padding: 0;
    background: transparent;
    text-align: left;
}
.pw-policy-hint:empty { display: none; }
.pw-policy-item {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    font-size: var(--fs-caption); line-height: 1.3; white-space: nowrap;
    transition: color var(--motion-fast) ease;
}
.pw-policy-item.pw-pending { color: var(--text-secondary); }
.pw-policy-item.pw-passed { color: var(--dot-green); }
.pw-policy-icon { font-weight: bold; font-size: var(--fs-small); min-width: 10px; text-align: center; }

/* (2026-05-21 v120 묵상 시점 루프 시작점 다이어트) .loop-start-* 토큰 통째 폐기.
 *   사용자 명시 "시스템에서만 인식되면 되는거 아닐까" — 사용자 노출 자리 자체 없음.
 */

/* Setup screen */
.recovery-words-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2);
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--sp-3); margin-bottom: var(--sp-4); text-align: left;
}
.word-chip { font-size: 12px; padding: 4px; background: var(--bg-card); border-radius: 4px; text-align: center; border: 1px solid var(--border); }
.word-chip .w-num { color: var(--text-secondary); font-size: 10px; margin-right: 2px; }
.confirm-checkbox {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: 13px; color: var(--text-secondary); cursor: pointer;
    margin-bottom: var(--sp-4); text-align: left;
}
.confirm-checkbox input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* 온보딩 단계 3: 샘플 목표 미리보기 */
.setup-sample-preview {
    text-align: left;
    background: var(--bg-elev);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin-top: var(--sp-3);
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.setup-sample-item {
    font-size: 12px; color: var(--text-secondary); line-height: 1.6;
}
.setup-sample-item strong { color: var(--text-primary); }

/* ═══ Toast ═══ */
.sanctum-toast {
    position: fixed; bottom: 30px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--accent); color: white;
    padding: var(--sp-3) var(--sp-5); border-radius: var(--radius);
    font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg);
    opacity: 0; transition: all var(--ease); z-index: 3000;
    /* (v136 2026-05-22) 사용자 명시 — 중앙정렬 + 한국어 단어 절대 안 끊김 + 모바일 폭 가드 */
    text-align: center;
    word-break: keep-all;
    overflow-wrap: break-word;
    max-width: calc(100vw - 32px);
}
.sanctum-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* (v109 #7) action 옵션이 있을 때 — 인라인 CTA 버튼 자리 */
.sanctum-toast.with-action {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: 10px 14px 10px 18px;
}
.sanctum-toast-msg { flex: 1; }
.sanctum-toast-action {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: inherit;
    padding: 5px 12px;
    font-size: 13px; font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ease), border-color var(--ease);
}
.sanctum-toast-action:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}
/* (2026-05-22) 세로 배치 — 메시지(2줄) 위, 버튼 아래 가운데. 로그아웃 확인 등 가독성. */
.sanctum-toast.with-action-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
    padding: 28px 18px 16px;   /* 위 여백은 닫기 X 자리 */
    max-width: min(340px, calc(100vw - 32px));
}
/* (2026-05-22) 닫기 X — 토스트 우상단. 액션 안 눌러도 바로 닫기. */
.sanctum-toast-close {
    position: absolute; top: 6px; right: 8px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; padding: 0;
    color: rgba(255, 255, 255, 0.75); font-size: 20px; line-height: 1;
    border-radius: 6px; cursor: pointer;
}
.sanctum-toast-close:hover { color: #fff; background: rgba(255, 255, 255, 0.18); }
.sanctum-toast.with-action-stacked .sanctum-toast-msg {
    flex: none;
    text-align: center;
    line-height: 1.65;
    white-space: pre-line;
}
.sanctum-toast.with-action-stacked .sanctum-toast-action {
    align-self: center;
    min-width: 140px;
    padding: 9px 16px;
    font-size: 14px;
}

/* ═══ Evening loop — 스크롤 방식 ═══ */

/* Sticky 진행 인디케이터 (상단 고정) */
.el-sticky-indicator {
    position: sticky; top: 0; z-index: 20;
    background: var(--bg);
    padding: var(--sp-3) 0;
    margin-bottom: var(--sp-5);
    display: flex; flex-wrap: nowrap; gap: var(--sp-2);
    overflow-x: auto;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
[data-theme="dark"] .el-sticky-indicator {
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

.el-indicator-dot {
    flex-shrink: 0;
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px; text-decoration: none;
    transition: all var(--ease);
    white-space: nowrap;
}
.el-indicator-dot:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.el-indicator-dot.active {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
    transform: scale(1.05);
}
.el-indicator-dot.bonus {
    border-style: dashed;
}
.el-indicator-num {
    background: var(--hover);
    border-radius: 50%;
    width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 600;
}
.el-indicator-dot.active .el-indicator-num {
    background: rgba(255,255,255,0.25);
    color: white;
}
.el-indicator-title { font-weight: 500; }

/* 섹션 카드 */
.el-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-bottom: var(--sp-4);
    box-shadow: var(--shadow-sm);
    scroll-margin-top: 80px;  /* sticky 인디케이터 높이만큼 anchor 보정 */
}
.el-section-finish {
    background: linear-gradient(135deg, var(--accent-soft), var(--bg-card));
    text-align: center;
    padding: var(--sp-7) var(--sp-5);
}

.el-section-header {
    display: flex; align-items: center; gap: var(--sp-3);
    margin-bottom: var(--sp-2);
}
.el-section-icon {
    width: 24px; height: 24px; stroke-width: 1.75;
    color: var(--brand-primary); flex-shrink: 0;
}
.el-indicator-icon {
    width: 14px; height: 14px; stroke-width: 1.75;
    display: inline-block; vertical-align: -2px; margin-right: 4px;
}
.el-section-title {
    font-size: var(--fs-modal);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    flex: 1;
}
.el-section-bonus {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}
.el-section-desc {
    color: var(--text-secondary);
    font-size: var(--fs-small);
    margin-bottom: var(--sp-4);
    line-height: 1.7;
}
.el-section-loading {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    padding: var(--sp-5);
}

/* 섹션 안의 통계 row */
.el-stat-row {
    display: flex; gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
.el-stat {
    flex: 1; min-width: 100px;
    background: var(--bg-elev);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    text-align: center;
}
.el-stat-num {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.2;
}
.el-stat-num small { font-size: 14px; color: var(--text-secondary); font-weight: 400; }
.el-stat-lbl {
    display: block;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* 섹션 안의 안내 팁 */
.el-tip {
    background: var(--bg-elev);
    border-left: 3px solid var(--accent);
    padding: var(--sp-3) var(--sp-4);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: var(--fs-small);
    color: var(--text-primary);
    line-height: 1.7;
    margin-bottom: var(--sp-3);
}

/* AI 요약 카드 (저녁 루프 안에서도 사용) */
.ai-summary-card {
    padding: var(--sp-4); background: var(--bg-elev);
    border-radius: var(--radius); border-left: 3px solid var(--accent);
    margin-bottom: var(--sp-3);
    line-height: 1.7;
}

/* 저녁 회고: 평일 진입 시 안내 카드 */
.el-empty-card {
    text-align: center;
    padding: var(--sp-6) var(--sp-4);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    max-width: 480px; margin: 24px auto;
}
.el-empty-card h3 {
    color: var(--text-primary);
    margin-bottom: var(--sp-3);
}
.el-empty-card p {
    color: var(--text-secondary);
    margin-bottom: var(--sp-4);
    line-height: 1.7; font-size: 14px;
}

/* 오늘 화면 하단 [내일 묵상 시작하기] 버튼 + 저녁 회고 끝 버튼 */
.next-day-cta {
    display: flex; justify-content: center;
    margin: var(--sp-5) 0 var(--sp-6);
}
.next-day-cta .primary-btn {
    padding: var(--sp-3) var(--sp-5);
    font-size: 15px;
}

/* ═══ Reports ═══ */
.report-tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5); overflow-x: auto; }
.tab-btn {
    padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--bg-card);
    font-size: 13px; cursor: pointer; transition: all var(--ease);
    color: var(--text-secondary);
}
.tab-btn.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* (B4 리포트 슬림 2026-05-22) 기본은 하루·한 주만. 한 달·분기·한 해는 "더 보기" 뒤로. */
.report-tabs .tab-btn--more { display: none; }
.report-tabs.show-more .tab-btn--more { display: inline-block; }
.report-tabs.show-more .report-more-btn { display: none; }
.report-more-btn {
    padding: var(--sp-2) var(--sp-3); border: none; background: none;
    border-radius: var(--radius); cursor: pointer; white-space: nowrap;
    color: var(--ink-secondary); font-size: var(--fs-small);
    transition: color var(--motion-fast) var(--ease-out);
}
.report-more-btn:hover { color: var(--accent); }
.report-more-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Phase E-5-A: 리포트 카드 새 spec (사실/관찰/묵상 질문) */
.reports-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.report-card { display: flex; flex-direction: column; gap: var(--sp-3); }

/* (2026-05-18 v73) 주간 탭 가장 위 [이번 주 리포트 만들기] — 토요일 자리와 같은 회로 진입 자리 */
.reports-week-generate-row {
    padding: var(--sp-4);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}
.reports-week-generate-hint {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
}
.report-card-header {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-3);
}
.report-card-header h3 {
    font-size: 16px; font-weight: 600;
    color: var(--text-primary);
}
.report-card-meta {
    font-size: 12px; color: var(--text-secondary);
}
.report-stats-row {
    display: flex; flex-wrap: wrap; gap: var(--sp-4);
    padding: var(--sp-3) 0;
    border-top: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    font-size: 13px; color: var(--text-secondary);
}
.report-stat strong {
    font-size: 18px; font-weight: 700;
    color: var(--text-primary);
    margin-right: 4px;
}
.report-stat small {
    font-size: 11px; color: var(--text-secondary);
    margin-left: 2px;
}
.report-summary p {
    font-size: 14px; line-height: 1.7;
    color: var(--text-primary);
    white-space: pre-wrap;
    margin: 0;
}
.report-summary-empty p {
    color: var(--text-secondary);
    font-style: italic;
}
.report-observation,
.report-questions {
    padding: var(--sp-3);
    background: var(--bg-elev);
    border-radius: 10px;
    border-left: 3px solid var(--accent);
}
.report-questions { border-left-color: var(--brand-primary, var(--accent)); }
.report-section-label {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11px; font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.report-section-icon { width: 13px; height: 13px; }

/* (2026-05-23 베타 리포트 · v217 손질) '오늘의 모양' 밝기 리본 — 하루를 한 그림으로.
   좋음=환하게(진한 accent), 중간=옅게, 못함=더 옅게, 빈 시간(기록 없음)=빗금 바탕이 그대로 보임.
   v218: 빈 칸이 뭔지 잘 보이게 — 키 키우고, 빈 시간 빗금 바탕 + 시간 격자 + 범례 추가. */
.day-shape { margin: 4px 0 14px; }
.day-shape-label {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    margin-bottom: 6px; letter-spacing: 0.02em;
}
.day-shape-track {
    position: relative; height: 22px; border-radius: 6px; overflow: hidden;
    /* 빈 시간(기록 없음) = 이 빗금 바탕이 그대로 보이는 자리 */
    background-color: var(--bg-quiet, rgba(0,0,0,0.04));
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0, transparent 5px,
        rgba(0,0,0,0.05) 5px, rgba(0,0,0,0.05) 6px
    );
    border: 1px solid var(--border, rgba(0,0,0,0.10));
}
/* 시간 격자 — 6/12/18시 세로선이라 빈 구간이 어디인지 한눈에 */
.day-shape-grid {
    position: absolute; top: 0; bottom: 0; width: 1px;
    background: var(--border, rgba(0,0,0,0.12));
}
.day-shape-seg { position: absolute; top: 2px; bottom: 2px; border-radius: 3px; }
.day-shape-seg.seg-good { background: var(--accent, #5F6F4A); }
.day-shape-seg.seg-mid  { background: var(--accent, #5F6F4A); opacity: 0.5; }
.day-shape-seg.seg-bad  { background: var(--accent, #5F6F4A); opacity: 0.22; }
.day-shape-seg.seg-none { background: var(--bg-card, #fff); border: 1px dashed var(--accent, #5F6F4A); opacity: 0.6; }
.day-shape-axis { position: relative; height: 13px; margin-top: 3px; }
.day-shape-tick {
    position: absolute; transform: translateX(-50%);
    font-size: 10px; color: var(--text-muted, var(--text-secondary));
}
.day-shape-tick:first-child { transform: translateX(0); }
.day-shape-tick:last-child  { transform: translateX(-100%); }
/* 범례 — "빈 칸이 뭔지" 바로 알 수 있게 */
.day-shape-legend {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px;
    font-size: 10.5px; color: var(--text-secondary);
}
.day-shape-legend .dsl-item { display: inline-flex; align-items: center; gap: 4px; }
.day-shape-legend .dsl {
    display: inline-block; width: 12px; height: 12px; border-radius: 3px;
    background: var(--accent, #5F6F4A);
}
.day-shape-legend .dsl-mid  { opacity: 0.5; }
.day-shape-legend .dsl-bad  { opacity: 0.22; }
.day-shape-legend .dsl-empty {
    background-color: var(--bg-quiet, rgba(0,0,0,0.04));
    background-image: repeating-linear-gradient(
        45deg, transparent 0, transparent 3px,
        rgba(0,0,0,0.10) 3px, rgba(0,0,0,0.10) 4px
    );
    border: 1px solid var(--border, rgba(0,0,0,0.15));
}

/* (2026-05-24 베타 주간 리포트) '이번 주 모양' — 요일 7칸 밝기. 빈 날(기록 없음)=빗금. */
.week-shape-track { display: flex; gap: 4px; }
.week-shape-cell {
    flex: 1; height: 30px; border-radius: 5px;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 3px;
    background: var(--accent, #5F6F4A);
}
.week-shape-cell.seg-good { background: var(--accent, #5F6F4A); }
.week-shape-cell.seg-mid  { background: var(--accent, #5F6F4A); opacity: 0.5; }
.week-shape-cell.seg-bad  { background: var(--accent, #5F6F4A); opacity: 0.22; }
.week-shape-cell.seg-none {
    background-color: var(--bg-quiet, rgba(0,0,0,0.04));
    background-image: repeating-linear-gradient(
        45deg, transparent 0, transparent 4px,
        rgba(0,0,0,0.07) 4px, rgba(0,0,0,0.07) 5px
    );
    border: 1px solid var(--border, rgba(0,0,0,0.12));
}
.week-shape-dow {
    font-size: 10px; font-weight: 600;
    color: var(--bg-card, #fff); opacity: 0.95;
}
.week-shape-cell.seg-bad .week-shape-dow,
.week-shape-cell.seg-none .week-shape-dow { color: var(--text-secondary); }

/* 묵상 질문 앞 경계선 — "여기까지가 데이터예요. 다음은 하나님 앞에서." */
.report-boundary {
    text-align: center; font-size: 11px; color: var(--text-muted, var(--text-secondary));
    margin: 16px 0 10px; padding-top: 12px;
    border-top: 1px solid var(--border, rgba(0,0,0,0.08));
}

.report-observation p,
.report-questions ul {
    margin: 0;
    font-size: 13px; line-height: 1.6;
    color: var(--text-primary);
}
.report-questions ul {
    padding-left: 1.2em;
}
.report-questions li { margin: 2px 0; }

/* (2026-05-24) 리포트 본문 읽기 편하게 — 행간 넉넉히, 한글 단어 안 깨지게(keep-all),
   양끝 맞춤(justify)으로 끝선 정돈. 한글은 글자 사이로 고르게 벌어지게(inter-character)
   해서 단어만 뚝뚝 떨어지지 않게. 일간·주간 리포트 본문 공통. */
.report-story p,
.report-summary p,
.report-observation p,
.report-questions li,
.ai-summary-card p {
    line-height: 1.85;
    letter-spacing: 0.01em;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: justify;
    text-justify: inter-character;
}
/* 묵상 질문은 목록이라 한 줄씩은 왼쪽 정렬이 자연스러워요(양끝 맞춤 제외). */
.report-questions li { text-align: left; margin-bottom: 7px; }
.report-story p { font-size: 14px; }
.report-card-foot {
    font-size: 11px; color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--border);
}
/* (v143) 문구를 비운 푸터는 Q&A 입력창 앵커로만 남아요 — 점선·여백 없이 숨김. */
.report-card-foot:empty { display: none; }

/* STEP A-6 (17 흡수): 시간순 도트 펼치기 — 산문 아래 raw 투명성 */
.report-timeline {
    margin-top: 10px;
    padding: 10px 12px;
    background: var(--bg-quiet, rgba(0,0,0,0.025));
    border-radius: 8px;
    border: 1px solid var(--border, rgba(0,0,0,0.06));
}
.report-timeline > summary {
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    list-style: none;
    user-select: none;
}
.report-timeline > summary::-webkit-details-marker { display: none; }
.report-timeline > summary::before {
    content: "▸ ";
    display: inline-block;
    transition: transform 0.15s ease;
}
.report-timeline[open] > summary::before { content: "▾ "; }
.report-timeline .dot-timeline-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}
.report-timeline .dot-row {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px dashed var(--border, rgba(0,0,0,0.05));
    font-size: 12px;
    line-height: 1.5;
}
.report-timeline .dot-row:first-child { border-top: 0; }
.report-timeline .dot-row-time {
    flex: 0 0 96px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.report-timeline .dot-row-body { flex: 1; min-width: 0; }
.report-timeline .dot-row-title { color: var(--text-primary); }
.report-timeline .dot-row-reason {
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 2px;
}
.report-timeline .dot-row-meta {
    color: var(--text-secondary);
    font-size: 11px;
    margin-top: 2px;
}

/* ═══ Drill-down (Phase E-9/R-DD) — 리포트 카드 2층 ═══ */
.drill-section { /* 본문 섹션 한 묶음 */ }
.drill-group { margin-top: var(--sp-3); }
.drill-group:first-child { margin-top: var(--sp-2); }
.drill-group-label {
    display: block;
    font-size: 11px; font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}
.drill-chip-row {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.drill-chip {
    display: inline-flex; align-items: center;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.drill-chip:hover,
.drill-chip:focus {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}
.drill-trigger.drill-open,
.drill-chip.drill-open {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.drill-link {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--ease);
}
.drill-link:hover,
.drill-link:focus {
    border-color: var(--accent);
    color: var(--accent);
    outline: none;
}
.drill-link.drill-open {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}

.drill-drawer {
    margin: var(--sp-2) 0 var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-elev);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    animation: drillFadeIn 0.15s ease-out;
}
@keyframes drillFadeIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: none; }
}
.drill-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.drill-drawer-label {
    font-size: 12px; font-weight: 600;
    color: var(--accent);
}
.drill-drawer-close {
    background: none; border: none; cursor: pointer;
    font-size: 18px; line-height: 1;
    color: var(--text-secondary);
    padding: 0 6px;
}
.drill-drawer-close:hover { color: var(--text-primary); }
.drill-drawer-body { font-size: 13px; color: var(--text-primary); }
.drill-loading,
.drill-empty,
.drill-error {
    font-size: 12px; color: var(--text-secondary);
    padding: 8px 0; text-align: center; font-style: italic;
}
.drill-error { color: var(--dot-orange); }
.drill-summary {
    margin: 0 0 var(--sp-2);
    font-size: 12px; color: var(--text-secondary);
}

.drill-dot-list,
.drill-decision-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column;
    border-radius: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    max-height: 320px; overflow-y: auto;
}
.drill-dot-row,
.drill-decision-row {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.5;
}
.drill-dot-row:last-child,
.drill-decision-row:last-child { border-bottom: none; }

.drill-dot-row {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 10px;
    align-items: baseline;
}
.drill-dot-when {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    white-space: nowrap;
}
.drill-dot-title {
    color: var(--text-primary);
    font-weight: 500;
}
.drill-dot-meta {
    color: var(--text-secondary);
    font-size: 11.5px;
    white-space: nowrap;
}

.drill-decision-head {
    display: flex; justify-content: space-between; gap: 10px;
    align-items: baseline;
}
.drill-decision-title { font-weight: 500; }
.drill-decision-meta {
    color: var(--text-secondary);
    font-size: 11.5px; white-space: nowrap;
}
.drill-decision-sub {
    margin-top: 2px;
    color: var(--text-secondary); font-size: 11.5px;
}

.drill-overflow {
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
    text-align: right;
}

/* 모바일 — drill-dot-row 가 좁아서 grid 무너지지 않게 세로 스택 */
@media (max-width: 640px) {
    .drill-dot-row {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .drill-dot-meta { white-space: normal; }
}

/* ═══ Report card 라디오 패턴 (Phase E-9/R-FIX) ═══
   처음엔 헤더(제목 + 미리보기 한 줄)만 보이고, 클릭하면 본문 펼침. */
.report-card { transition: box-shadow var(--ease); }
.report-card[data-collapsed] .report-card-body { display: none; }
.report-card[data-collapsed] .report-card-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.report-card[data-expanded] .report-card-chev { transform: rotate(180deg); }
.report-card-header {
    position: relative;
    cursor: pointer;
    padding-right: 32px; /* chevron 공간 */
    user-select: none;
}
.report-card-header:hover { color: var(--accent); }
.report-card-header:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
.report-card-header h3 {
    margin: 0 0 4px;
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.report-day-of-week {
    font-size: 12px; font-weight: 400;
    color: var(--text-secondary);
}
.report-preview {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.55;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.report-card-chev {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--text-secondary);
    transition: transform 0.18s ease;
    pointer-events: none;
}
.report-card[data-expanded] .report-card-chev {
    transform: translateY(-50%) rotate(180deg);
}
.report-card-body {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}

/* ═══ Q&A (Phase E-9/R-QA) — 리포트 카드 3층 ═══ */
.qna-wrap {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
}
.qna-history { display: flex; flex-direction: column; gap: var(--sp-3); }
.qna-history[data-empty="true"] { display: none; }

.qna-card {
    padding: var(--sp-3) var(--sp-4);
    background: var(--bg-elev);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
}
.qna-card-pending { opacity: 0.7; }

/* (2026-05-14 정책 C) 재작성으로 archive 된 이전 Q&A — 옅은 톤으로 구분 */
.qna-archive-row { margin: var(--sp-3) 0; }
.qna-archive-row[data-mounted="false"] { display: none; }
.qna-archive-toggle {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
}
.qna-archive-toggle:hover { background: var(--bg-quiet, rgba(0,0,0,0.03)); }
.qna-archive-toggle[aria-expanded="true"] { background: var(--bg-quiet, rgba(0,0,0,0.03)); }
.qna-archive-list { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-3); }
.qna-archive-list.hidden { display: none; }
.qna-archive-empty {
    font-size: 12px; color: var(--text-secondary); font-style: italic;
    margin: 0; padding: var(--sp-3);
}
.qna-card-archived {
    opacity: 0.7;
    border-left-color: var(--border);
    background: var(--bg-quiet, rgba(0,0,0,0.02));
}

.qna-question {
    margin: 0 0 8px;
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
}
.qna-question::before { content: '"'; }
.qna-question::after  { content: '"'; }
.qna-answer { font-size: 13px; line-height: 1.65; color: var(--text-primary); }
.qna-flow { white-space: pre-wrap; }
.qna-tail {
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border);
    font-size: 12.5px;
    color: var(--text-secondary);
    font-style: italic;
    white-space: pre-wrap;
}
.qna-loading {
    font-size: 12px; color: var(--text-secondary); font-style: italic;
    margin: 0;
}
.qna-error { color: var(--dot-orange); font-size: 12.5px; margin: 0; }

.qna-form {
    margin-top: var(--sp-3);
    display: flex; flex-direction: column; gap: 6px;
}
.qna-label {
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary);
}
.qna-input-row {
    display: flex; gap: var(--sp-2);
    width: 100%;
}
.qna-input {
    flex: 1 1 auto;
    min-width: 0; /* (v141) flex 수축 허용 — 긴 placeholder가 행 밀어내 묻기 버튼 카드 밖 나가던 자리 fix */
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-primary);
    font-size: 13px;
}
.qna-input:focus { outline: none; border-color: var(--accent); }
.qna-submit {
    flex: 0 0 auto; /* (v141) 버튼은 안 줄어듦 — 입력칸만 수축 */
    padding: 0 16px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--accent);
    color: var(--bg);
    font-size: 13px; font-weight: 600;
    cursor: pointer;
    min-width: 64px;
}
.qna-submit:disabled { opacity: 0.5; cursor: default; }
.qna-hint {
    margin: 0; font-size: 11px; color: var(--text-secondary);
}

/* 대시보드 today-start 안의 미열람 Q&A (3세) */
.today-start-qna-wrap {
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border);
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.today-start-qna-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
}
.today-start-qna-card {
    padding: var(--sp-3);
    background: var(--bg-elev);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
}
.today-start-qna-q {
    margin: 0 0 6px;
    font-size: 13px; font-weight: 500;
    color: var(--text-primary);
}
.today-start-qna-tail {
    margin: 0; font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.55;
}

/* ═══ Dashboard ═══ */
/* 대시보드 안의 큰 섹션 단위 (나의 목표 / 이번 주 흐름 등). 메뉴 통합 후 도입. */
.dash-section {
    margin-bottom: var(--sp-6);
}
.dash-section > .section-header-flex {
    margin-bottom: var(--sp-3);
    align-items: baseline;
}
.section-desc-inline {
    font-size: 12px; color: var(--text-secondary); font-weight: 400;
    margin-left: var(--sp-3);
}
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
.dash-grid.hidden { display: none; }

/* ── D-2: 오늘의 시작 카드 (대시보드 최상단, 인사 + 핀 원칙 + 어제 묵상 질문) ── */
.today-start-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-primary, var(--accent));
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.today-start-greeting {
    font-size: 18px; font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}
.today-start-line {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    font-size: 13px; line-height: 1.55;
    padding-top: var(--sp-2);
    border-top: 1px dashed var(--border);
}
.today-start-line:first-of-type { border-top: none; padding-top: 0; }
.today-start-icon {
    flex-shrink: 0; width: 14px; height: 14px;
    color: var(--brand-primary, var(--accent));
    margin-top: 3px;
}
.today-start-label {
    flex-shrink: 0;
    font-size: 11px; color: var(--text-secondary);
    font-weight: 600;
    margin-right: var(--sp-2);
    padding-top: 1px;
}
.today-start-text {
    color: var(--text-primary);
    font-weight: 500;
}
.today-start-line-quiet .today-start-text {
    color: var(--text-secondary);
    font-style: italic;
    font-weight: 400;
}
.today-start-empty {
    font-size: 12px; color: var(--text-secondary);
    line-height: 1.6;
}

/* ── D-1: 이번 주의 결 — 산문 한 줄 + 조용한 닫는 말 ── */
.dash-prose {
    font-size: 15px; line-height: 1.7;
    color: var(--text-primary);
    margin: 0;
}
.dash-prose strong {
    font-weight: 600;
    color: var(--text-primary);
}
.dash-prose-quiet {
    margin-top: var(--sp-2);
    font-size: 12px; color: var(--text-secondary);
    font-style: italic;
}

/* ── E-2: 대시보드 AI 한 단락 듣기 ── */
.dash-ai-row {
    margin-top: var(--sp-3);
}
.dash-ai-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    background: transparent;
    border: 1px dashed var(--accent);
    border-radius: 999px;
    color: var(--accent);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
    font-family: inherit;
}
.dash-ai-toggle:hover {
    background: var(--accent-soft);
}
.dash-ai-toggle:disabled {
    opacity: 0.55; cursor: progress;
}
.dash-ai-toggle .dash-icon { width: 14px; height: 14px; }

.dash-ai-panel {
    margin-top: var(--sp-3);
    padding: var(--sp-4);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    animation: aiPanelIn 200ms ease-out;
}
@keyframes aiPanelIn {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}
.dash-ai-text {
    margin: 0;
    font-size: 14px; line-height: 1.7;
    color: var(--text-primary);
    white-space: pre-wrap;
}
.dash-ai-text + .dash-prose-quiet { margin-top: var(--sp-2); }
.dash-ai-loading {
    margin: 0; padding: var(--sp-2) 0;
    font-size: 13px; color: var(--text-secondary);
    text-align: center;
    font-style: italic;
}
.dash-ai-fallback-tag {
    display: inline-block;
    font-size: 11px; color: var(--dot-orange);
    margin-bottom: var(--sp-2);
}

/* ── D-1: 숫자로 보기 토글 ── */
.dash-section-numbers { margin-top: var(--sp-2); }
.dash-numbers-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px dashed var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    margin-bottom: var(--sp-3);
    transition: background var(--ease), color var(--ease), border-color var(--ease);
}
.dash-numbers-toggle:hover {
    background: var(--bg-elev);
    color: var(--text-primary);
    border-color: var(--accent);
}

/* ── D-1: 7계층 탭 "더 멀리 보기" 토글 ── */
.goal-tab.goal-tab-far-toggle {
    border-style: dashed;
    opacity: 0.85;
    background: transparent;
}
.goal-tab.goal-tab-far-toggle:hover { opacity: 1; }

/* ── D-3: 이번 주 관계의 결 — 인물·조직 위젯 ── */
.dash-people-avatars {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.dash-person-chip {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: 6px 10px 6px 6px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
    color: var(--text-primary);
    font-family: inherit;
}
.dash-person-chip:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.dash-person-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    color: rgba(0, 0, 0, 0.7);
    flex-shrink: 0;
}
.dash-person-meta {
    display: flex; flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}
.dash-person-name {
    font-size: 13px; font-weight: 600;
    color: var(--text-primary);
    max-width: 100px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-person-stats {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--text-secondary);
}
.dash-person-count { font-variant-numeric: tabular-nums; }

.dash-orgs-row {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    margin-top: var(--sp-3);
}
.dash-org-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-elev);
    cursor: pointer;
    font-size: 12px; font-weight: 500;
    color: var(--text-primary);
    transition: border-color var(--ease), background var(--ease);
    font-family: inherit;
}
.dash-org-chip:hover {
    border-color: var(--accent);
    background: var(--bg-card);
}
.dash-org-icon {
    width: 14px; height: 14px;
    color: var(--text-secondary);
}
.dash-org-count {
    color: var(--text-secondary);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

/* ── D-4: 토요일 회고 CTA + 빈 상태 가이드 ── */
.dash-call-card {
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-4) var(--sp-5);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.dash-call-card.dash-call-saturday {
    border-left: 3px solid var(--brand-primary, var(--accent));
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--accent) 6%, var(--bg-card)) 0%,
        var(--bg-card) 60%
    );
}
.dash-call-card.dash-call-empty {
    border-left: 3px solid var(--dot-yellow, #F5C84B);
}
.dash-call-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    color: var(--brand-primary, var(--accent));
}
.dash-call-empty .dash-call-icon { color: var(--dot-yellow, #F5C84B); }
.dash-call-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.dash-call-body h3 {
    font-size: 15px; font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.dash-call-body p {
    font-size: 13px; color: var(--text-secondary);
    margin: 0; line-height: 1.5;
}
.dash-call-btn { flex-shrink: 0; }

/* 모바일 — 세로로 */
@media (max-width: 640px) {
    .dash-call-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .dash-call-btn { align-self: stretch; }
}
.dash-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--sp-5);
    box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--sp-2);
}
.dash-card h3 { font-size: 14px; color: var(--text-secondary); font-weight: 500; }
.dash-value { font-size: 32px; font-weight: 700; color: var(--text-primary); }
.dash-value.highlight { color: var(--accent); }
.dash-desc { font-size: 12px; color: var(--text-secondary); margin-top: auto; }

/* Phase E-4: dash-card 안의 deep link 버튼 (예: 통독 카드의 [오늘의 말씀으로]) */
.dash-card-action {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: var(--sp-2);
    padding: 4px 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 11px; font-weight: 500;
    cursor: pointer;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
    font-family: inherit;
}
.dash-card-action:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--bg-elev);
}
.dash-card-action .btn-icon { width: 12px; height: 12px; }

/* ═══ Principles ═══ */
.principles-toolbar { display: flex; justify-content: flex-end; margin-bottom: var(--sp-4); }
.principles-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.principle-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: var(--sp-4);
    box-shadow: var(--shadow-sm); transition: border-color var(--ease);
}
.principle-card:focus-within { border-color: var(--accent); }
.principle-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.principle-title-input {
    flex: 1; border: none; background: transparent;
    font-size: 16px; font-weight: 600; color: var(--text-primary); outline: none;
}
.principle-title-input::placeholder { color: var(--text-secondary); font-weight: 500; }
.principle-body-input {
    width: 100%; border: none; background: transparent;
    font-size: var(--fs-body); line-height: var(--lh); color: var(--text-primary);
    outline: none; resize: vertical; min-height: 70px;
}
.principle-actions { display: flex; gap: var(--sp-1); }
.icon-btn {
    background: none; border: none; cursor: pointer; padding: var(--sp-1);
    font-size: 16px; border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-secondary);
    filter: grayscale(1); opacity: 0.5; transition: all var(--ease);
}
.icon-btn:hover { background: var(--hover); color: var(--ink-primary); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.icon-btn.active { color: var(--brand-primary); background: var(--brand-soft); }
.icon-btn svg { width: 16px; height: 16px; stroke-width: 1.75; }

/* ═══ Goals (7계층 탭) ═══ */
.goal-tabs {
    display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5);
    overflow-x: auto; padding-bottom: 4px;
}
.goal-tab {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
    padding: var(--sp-2) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 13px; cursor: pointer;
    transition: all var(--ease);
}
.goal-tab:hover { border-color: var(--accent); color: var(--accent); }
.goal-tab.active {
    border-color: var(--accent); background: var(--accent-soft);
    color: var(--accent); font-weight: 600;
}
.goal-tab-icon {
    width: 16px; height: 16px; stroke-width: 1.75;
    color: currentColor; flex-shrink: 0;
}
.goal-panel-icon {
    width: 22px; height: 22px; stroke-width: 1.75;
    color: var(--brand-primary); flex-shrink: 0;
    vertical-align: -3px; margin-right: 6px;
}
.principle-tab-icon {
    width: 14px; height: 14px; stroke-width: 1.75;
    display: inline-block; vertical-align: -2px; margin-right: 4px;
}
.dash-icon {
    width: 16px; height: 16px; stroke-width: 1.75;
    color: var(--brand-primary); flex-shrink: 0;
    display: inline-block; vertical-align: -2px; margin-right: 4px;
}
/* quickReview 라벨 안 아이콘 */
.qr-link-field label .label-icon {
    width: 14px; height: 14px; stroke-width: 1.75;
    display: inline-block; vertical-align: -2px; margin-right: 4px;
    color: var(--brand-primary);
}
.goal-tab-count {
    font-size: 10px; padding: 2px 6px;
    border-radius: 999px; background: var(--accent); color: white;
    font-weight: 600;
}

.goal-panel-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: var(--sp-4); gap: var(--sp-3);
    flex-wrap: wrap;
}
.goal-panel-title {
    font-size: var(--fs-heading); font-weight: 700;
    margin-bottom: 4px;
}
.goal-panel-desc { color: var(--text-secondary); font-size: var(--fs-small); }

.goal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--sp-3);
}
.goal-card-v2 {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    display: flex; flex-direction: column; gap: var(--sp-2);
    transition: border-color var(--ease);
}
.goal-card-v2:focus-within { border-color: var(--accent); }
.goal-title-input {
    border: none; background: transparent;
    font-size: 16px; font-weight: 600; color: var(--text-primary);
    outline: none;
}
.goal-title-input::placeholder { color: var(--text-secondary); font-weight: 500; }
.goal-desc-input {
    border: none; background: transparent;
    font-family: var(--font); font-size: var(--fs-small);
    color: var(--text-primary); line-height: 1.6;
    outline: none; resize: vertical; min-height: 50px;
}
.goal-desc-input::placeholder { color: var(--text-secondary); }
.goal-card-footer {
    display: flex; justify-content: space-between; align-items: center;
    border-top: 1px solid var(--border);
    padding-top: var(--sp-2); margin-top: var(--sp-2);
}
.goal-card-meta { font-size: 11px; color: var(--text-secondary); }
/* (2026-05-13 HC#1 추모비) 목표 카드 액션 — 그만두기 🪦 + 완전 삭제 🗑 */
.goal-card-actions {
    display: flex; gap: 4px; align-items: center;
}
.goal-card-actions .icon-btn {
    font-size: 14px; opacity: 0.7;
    transition: opacity 0.15s;
}
.goal-card-actions .icon-btn:hover { opacity: 1; }
.goal-panel-actions {
    display: flex; gap: var(--sp-2); align-items: center;
}

/* (2026-05-13 HC#1 추모비) 추모비 목록 모달 */
.memorials-card { max-width: 640px; }
.memorials-hint {
    color: var(--text-secondary, var(--ink-secondary));
    font-size: 13px; line-height: 1.5;
    padding: var(--sp-3); margin-bottom: var(--sp-3);
    background: var(--surface-soft, var(--hover));
    border-radius: var(--radius);
    border-left: 2px solid var(--accent, var(--brand, #6f8fff));
}
.memorial-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    background: var(--surface-card, var(--bg-card));
}
.memorial-title {
    font-size: 15px; font-weight: 600;
    color: var(--text-primary, var(--ink-primary));
    margin-bottom: 4px;
}
.memorial-meta {
    font-size: 12px;
    color: var(--text-secondary, var(--ink-secondary));
    display: flex; gap: 6px; margin-bottom: 6px;
}
.memorial-stats {
    font-size: 13px;
    color: var(--text-primary, var(--ink-primary));
    padding: 6px 0;
}
.memorial-stats-empty {
    color: var(--text-secondary, var(--ink-secondary));
    font-style: italic;
}
.memorial-note {
    margin-top: 6px;
    font-size: 13px; font-style: italic;
    color: var(--text-secondary, var(--ink-secondary));
    padding: 6px 10px;
    background: var(--surface-soft, var(--hover));
    border-radius: 6px;
}

/* ═══ Principles (카테고리 탭) ═══ */
.principle-tabs {
    display: flex; gap: var(--sp-2); margin-bottom: var(--sp-5);
    overflow-x: auto; padding-bottom: 4px;
}
.principle-tab {
    flex-shrink: 0;
    display: flex; align-items: center; gap: 6px;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 12px; cursor: pointer;
    transition: all var(--ease);
}
.principle-tab:hover { border-color: var(--accent); color: var(--accent); }
.principle-tab.active {
    border-color: var(--accent); background: var(--accent);
    color: white; font-weight: 600;
}
.principle-tab-count {
    font-size: 10px; padding: 1px 5px;
    border-radius: 999px;
    background: var(--hover); color: var(--text-secondary);
    font-weight: 600;
}
.principle-tab.active .principle-tab-count {
    background: rgba(255,255,255,0.25);
    color: white;
}

.principle-card-footer {
    display: flex; justify-content: flex-end;
    margin-top: var(--sp-2);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--border);
}
.principle-cat-select {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px 8px;
    background: var(--bg-elev);
    color: var(--text-secondary);
    font-size: 12px; font-family: var(--font);
    cursor: pointer;
}
.principle-cat-select:focus { outline: none; border-color: var(--accent); }

/* ═══ 지난 묵상 ═══ */
.past-toolbar {
    display: flex; gap: var(--sp-2);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
    align-items: center;
}
.past-search {
    flex: 1; min-width: 200px;
    padding: var(--sp-3); border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--bg-card);
    color: var(--text-primary); font-size: var(--fs-small);
}
.past-search:focus { outline: none; border-color: var(--accent); }
.past-date-input {
    padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--bg-card);
    color: var(--text-primary); font-size: var(--fs-small);
    cursor: pointer;
}

/* 주간 히트맵 */
.heatmap-wrap { overflow-x: auto; padding: var(--sp-2) 0; }
.heatmap-grid {
    display: grid;
    grid-template-columns: 60px repeat(24, 14px);
    gap: 2px;
    align-items: center;
}
.heatmap-corner { width: 60px; height: 14px; }
.heatmap-hour-label {
    font-size: 9px; color: var(--text-secondary);
    text-align: center; line-height: 14px;
}
.heatmap-day-label {
    font-size: 11px; color: var(--text-secondary);
    text-align: right; padding-right: var(--sp-2);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.heatmap-cell {
    width: 14px; height: 14px;
    border-radius: 3px;
    background: var(--bg-elev);
    cursor: help;
    transition: transform 100ms ease;
}
.heatmap-cell:hover { transform: scale(1.4); z-index: 1; }
.heatmap-cell.empty { background: var(--bg-elev); opacity: 0.5; }
.heatmap-cell.lvl-1 { background: rgba(229, 101, 74, 0.6); }
.heatmap-cell.lvl-2 { background: rgba(240, 147, 90, 0.6); }
.heatmap-cell.lvl-3 { background: rgba(245, 200, 75, 0.7); }
.heatmap-cell.lvl-4 { background: rgba(107, 191, 123, 0.85); }

.past-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.past-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-4);
    cursor: pointer; transition: all var(--ease);
}
.past-card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.past-card-header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: var(--sp-2);
}
.past-card-date { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.past-card-day { font-size: 12px; color: var(--text-secondary); }
.past-card-preview {
    font-size: 13px; color: var(--text-secondary); line-height: 1.65;
    white-space: pre-wrap;
}
.past-card.expanded .past-card-preview { color: var(--text-primary); }

/* Phase E-8/A: 라이브러리/게시판 스타일 — 날짜·요일만, 한 줄 한 묵상 */
.past-board {
    list-style: none; margin: 0; padding: 0;
    border-top: 1px solid var(--border);
}
.past-row {
    display: grid;
    grid-template-columns: 1fr auto 24px;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--ease);
}
.past-row:hover, .past-row:focus { background: var(--bg-elev); outline: none; }
.past-row:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.past-row-date {
    font-size: 14px; font-weight: 500; color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.past-row-day { font-size: 12px; color: var(--text-secondary); }
.past-row-chev {
    width: 16px; height: 16px; color: var(--text-secondary);
    transition: transform var(--ease), color var(--ease);
}
.past-row:hover .past-row-chev { color: var(--accent); transform: translateX(2px); }

/* ═══ 설정 — 말씀 본문 (Phase E-8/A) ═══ */
.setting-block { margin-top: var(--sp-2); }
.setting-label {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    margin-bottom: var(--sp-2);
}
.setting-hint {
    font-size: 12px; color: var(--text-secondary);
    margin: 0 0 var(--sp-3); line-height: 1.5;
}
.setting-warn {
    margin-top: var(--sp-2);
    font-size: 12px; color: var(--dot-orange);
}

/* 폰트 크기 세그먼트 — 라디오를 시각적 버튼으로 위장 */
.seg-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.seg-option {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); cursor: pointer;
    transition: border-color var(--ease), background var(--ease);
    min-width: 64px;
}
.seg-option:hover { border-color: var(--accent); }
.seg-option input[type="radio"] { display: none; }
.seg-option:has(input:checked) {
    border-color: var(--accent); background: var(--accent-soft);
}
.seg-option-label { font-size: 11px; color: var(--text-secondary); }
.seg-option:has(input:checked) .seg-option-label { color: var(--accent); font-weight: 600; }

/* 묵상 계획 프리셋 — 각 계획이 한 줄 라디오 카드 (Phase E-8/B-1) */
.plan-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.plan-option {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); cursor: pointer;
    transition: border-color var(--ease), background var(--ease);
}
.plan-option:hover { border-color: var(--accent); }
.plan-option:has(input:checked) {
    border-color: var(--accent); background: var(--accent-soft);
}
.plan-option input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--accent);
    cursor: pointer;
}
.plan-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.plan-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.plan-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.plan-chip {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10.5px; font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 999px;
}
.plan-option:has(input:checked) .plan-chip {
    color: var(--accent); border-color: var(--accent);
    background: var(--bg-card);
}

/* user plan 카드 (Phase E-8/B-2) */
.plan-user-header {
    display: flex; align-items: center; justify-content: space-between;
    margin: var(--sp-3) 0 var(--sp-2);
    padding-top: var(--sp-3);
    border-top: 1px dashed var(--border);
}
.plan-user-title {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.plan-list--user { gap: var(--sp-2); }
.plan-option--user { position: relative; padding-right: 44px; }
.plan-delete-btn {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 6px;
    background: transparent; cursor: pointer;
    color: var(--text-secondary);
    transition: all var(--ease);
}
.plan-delete-btn:hover {
    color: var(--dot-red);
    border-color: var(--dot-red);
    background: var(--bg-card);
}
.plan-delete-btn i { width: 14px; height: 14px; }

/* 새 계획 만들기 모달 (head/body/foot 패턴, 재사용 가능) */
.modal-box {
    background: var(--bg-card); border-radius: var(--radius-lg);
    width: 90%; max-width: 520px; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    overflow: hidden;
}
.modal-box--wide { max-width: 720px; }
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: var(--fs-modal); font-weight: 600; margin: 0; }
.modal-close-btn {
    width: 32px; height: 32px;
    font-size: 22px; line-height: 1;
    background: transparent; border: none; cursor: pointer;
    color: var(--text-secondary);
    border-radius: 6px;
}
.modal-close-btn:hover { background: var(--bg-elev); color: var(--text-primary); }
.modal-body {
    padding: var(--sp-4) var(--sp-5);
    overflow-y: auto;
    flex: 1 1 auto;
}
.modal-foot {
    display: flex; gap: var(--sp-2); justify-content: flex-end;
    padding: var(--sp-3) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
}

/* 새 계획 모달 안의 입력 */
.newplan-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.newplan-field > span {
    font-size: 12px; font-weight: 600; color: var(--text-primary);
}
.newplan-field input[type="text"] {
    padding: 10px 12px; font-size: 14px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text-primary);
}
.newplan-field input[type="text"]:focus { outline: none; border-color: var(--accent); }

.newplan-books {
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg);
    max-height: 360px; overflow-y: auto;
    padding: var(--sp-2);
}
/* (2026-05-20 v107) 구약·신약 자리 헤더 */
.newplan-testament {
    margin-bottom: var(--sp-4);
}
.newplan-testament:last-child { margin-bottom: 0; }
.newplan-testament-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    padding: 8px 4px;
    border-bottom: 2px solid var(--accent);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}
.newplan-book-chapters {
    font-size: 11px;
    color: var(--text-secondary);
    font-weight: 400;
    margin-left: 2px;
}
.newplan-book:has(input:checked) .newplan-book-chapters {
    color: var(--accent);
}
.newplan-group { margin-bottom: var(--sp-3); }
.newplan-group:last-child { margin-bottom: 0; }
.newplan-group-title {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-2);
    font-size: 11px; font-weight: 600; color: var(--accent);
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 4px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 6px;
}
.newplan-group-desc {
    font-size: 11px; font-weight: 400; color: var(--text-secondary);
    text-transform: none; letter-spacing: 0;
    margin-left: 6px;
}
/* (v111) 온보딩 backdrop(9500) 위에 띄우기 — 온보딩 안 [직접 만들기] 자리 */
#new-plan-modal { z-index: 10000; }
/* (v111) 시작일 자리 숨김 + 진행 속도만 한 줄 — hideStartDate 모드 */
.newplan-options-row-single .newplan-field-inline { flex: 1 1 100%; }

/* (v109 결 C #3) 그룹 단위 전체 선택 토글 */
.newplan-group-toggle {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 11px; font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    text-transform: none; letter-spacing: 0;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.newplan-group-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.newplan-group-books {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 4px;
    padding: 4px;
}
.newplan-book {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 12.5px;
    cursor: pointer;
    transition: background var(--ease);
}
.newplan-book:hover { background: var(--bg-elev); }
.newplan-book input { accent-color: var(--accent); cursor: pointer; }
.newplan-book:has(input:checked) {
    background: var(--accent-soft); color: var(--accent); font-weight: 600;
}

/* (v109 결 C #5·#6) 시작일·진행 속도 — 한 줄 인라인 */
.newplan-options-row {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}
.newplan-field-inline {
    flex: 1 1 160px;
    min-width: 0;
    margin-bottom: 0;
}
.newplan-field-inline input[type="date"],
.newplan-field-inline select {
    padding: 10px 12px; font-size: 14px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text-primary);
    width: 100%;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    cursor: pointer;
    font-family: inherit;
}
.newplan-field-inline input[type="date"]:focus,
.newplan-field-inline select:focus {
    outline: none; border-color: var(--accent);
}
.newplan-field-inline select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* (v109 결 C #1·#2) 하단 요약 — 선택 권수 + 총 분량 + 선택한 책 목록 */
.newplan-summary {
    margin-top: var(--sp-2);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    font-size: 12px; color: var(--text-secondary);
}
.newplan-summary-row {
    display: flex; align-items: baseline;
    gap: var(--sp-2);
    flex-wrap: wrap;
}
.newplan-summary-row > #newplan-count {
    font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.newplan-summary-sub {
    font-size: 12px; color: var(--text-secondary);
    font-weight: 400;
}
.newplan-selected-list {
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--text-primary);
    line-height: 1.55;
    word-break: keep-all;
}
.newplan-selected-list:empty { display: none; }
.newplan-selected-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 4px;
}

/* 매일성경 인라인 링크 행 (Phase E-8/C) — 통독 본문 카드 맨 아래 */
.daily-bible-link {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: var(--bg-elev);
    color: var(--text-primary);
    font-size: 13px;
    text-decoration: none;
    transition: border-color var(--ease), color var(--ease), background var(--ease);
}
.daily-bible-link:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.daily-bible-link-text { font-weight: 500; }
.daily-bible-link-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* 시작점 패널 (Phase E-8/B-3) — 활성 plan의 파트별 anchor 편집 */
.anchor-panel { display: flex; flex-direction: column; gap: var(--sp-2); }
.anchor-row {
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg-card); overflow: hidden;
}
.anchor-head {
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3) var(--sp-4);
    transition: background var(--ease);
}
.anchor-head.open { background: var(--bg-elev); }
.anchor-part-label {
    font-size: 12px; font-weight: 600; color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.anchor-current { font-size: 13px; color: var(--text-primary); }
.anchor-since { font-size: 11px; color: var(--text-secondary); margin-left: 4px; }
.anchor-default { font-size: 12px; color: var(--text-secondary); font-style: italic; }
.anchor-actions { display: flex; gap: var(--sp-2); }

.anchor-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4) var(--sp-4);
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
}
.anchor-form.hidden { display: none; }
.anchor-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-secondary); }
.anchor-field select,
.anchor-field input[type="number"],
.anchor-field input[type="date"] {
    padding: 6px 10px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-card); color: var(--text-primary);
}
.anchor-form-actions {
    grid-column: 1 / -1;
    display: flex; gap: var(--sp-2); justify-content: flex-end;
    margin-top: var(--sp-1);
}

/* ── 말씀 본문 "고급 설정" 토글 (설정 직관화 ③-a) ──
   summary 인라인 스타일을 토큰 기반 CSS로 정식화. ▸ 마커 회전 + accent. */
.scripture-advanced {
    margin-top: var(--sp-4);
    border-top: 1px solid var(--border);
    padding-top: var(--sp-3);
}
.scripture-advanced > summary {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    cursor: pointer;
    user-select: none;
    list-style: none;
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text-secondary);
    padding: var(--sp-2) 0;
    transition: color var(--motion-fast) var(--ease-out);
}
.scripture-advanced > summary::-webkit-details-marker { display: none; }
.scripture-advanced > summary::before {
    content: "▸";
    display: inline-block;
    color: var(--accent);
    transition: transform var(--motion-fast) var(--ease-out);
}
.scripture-advanced[open] > summary::before { transform: rotate(90deg); }
.scripture-advanced > summary:hover { color: var(--accent); }
.scripture-advanced > summary:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
    border-radius: var(--radius-sm);
}
.scripture-advanced-summary-hint {
    font-weight: var(--font-weight-regular);
    font-size: var(--fs-caption);
    color: var(--ink-tertiary);
}

/* ── "?" 도움말 툴팁 공용 컴포넌트 (설정 직관화 ③-b) ──
   데스크탑=hover/focus (CSS), 모바일=탭 토글(.is-open, helpTip.js). */
.help-tip {
    position: relative;
    display: inline-flex;
    vertical-align: middle;
    margin-left: var(--sp-1);
}
.help-tip-btn {
    width: 17px;
    height: 17px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-soft);
    color: var(--ink-secondary);
    font-size: var(--fs-caption);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}
.help-tip-btn:hover,
.help-tip-btn:focus-visible {
    color: var(--accent);
    border-color: var(--accent-border);
    outline: none;
}
.help-tip-bubble {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 7px);
    transform: translateX(-50%);
    width: max-content;
    max-width: min(260px, 72vw);
    padding: var(--sp-2) var(--sp-3);
    background: var(--color-ink-primary);
    color: var(--color-surface);
    font-size: var(--fs-caption);
    font-weight: var(--font-weight-regular);
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-elevated);
    z-index: var(--z-tooltip);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--motion-fast) var(--ease-out);
}
.help-tip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-ink-primary);
}
.help-tip.is-open .help-tip-bubble {
    opacity: 1;
    visibility: visible;
}
@media (hover: hover) and (pointer: fine) {
    .help-tip:hover .help-tip-bubble,
    .help-tip-btn:focus-visible + .help-tip-bubble {
        opacity: 1;
        visibility: visible;
    }
}

/* ═══ Sensitive mode ═══ */
.sensitive-masked .sensitive { filter: blur(6px); cursor: pointer; transition: filter 0.2s ease; user-select: none; }
.sensitive-masked .sensitive.revealed { filter: none; }

/* ═══ Loading ═══ */
.loading-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: var(--bg); display: flex; align-items: center; justify-content: center;
}
.loading-box { text-align: center; max-width: 400px; padding: var(--sp-6); }
.spinner {
    width: 40px; height: 40px; border: 3px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin 1s linear infinite; margin: 0 auto var(--sp-4);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══ Mobile ═══ */
.sidebar-close-btn {
    display: none;
}
.menu-toggle-btn {
    display: none; position: fixed;
    /* Phase E-9/M-2: 노치/펀치홀 영역 피하기 (env가 없으면 0으로 폴백) */
    top: calc(var(--sp-3) + env(safe-area-inset-top, 0));
    left: calc(var(--sp-3) + env(safe-area-inset-left, 0));
    z-index: 200;
    /* (2026-05-22) 박스 폐기 — 테두리·배경·그림자 빼고 납작 아이콘만. */
    background: transparent; border: none; box-shadow: none;
    border-radius: var(--radius); padding: 6px 8px;
    color: var(--ink-primary);
    font-size: 18px; cursor: pointer;
}
/* (2026-05-22) 서랍 열리면 햄버거 숨김 — 로고 가림 방지. 닫기는 ✕·바깥 탭. */
body.sidebar-open .menu-toggle-btn { display: none; }

@media (max-width: 900px) {
    .content-area { max-width: 100%; padding: var(--sp-5) var(--sp-4); }
    .utl-body { max-height: 60vh; }
}

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); padding-top: calc(var(--sp-4) + env(safe-area-inset-top, 0)); }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    /* (2026-05-22) 모바일 서랍: 로고를 살짝 내리고 ✕ 자리 확보 → 로고·✕ 한 줄로 보기 좋게 */
    .sidebar-header { padding-top: var(--sp-5); padding-right: 44px; }
    .sidebar-close-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: calc(env(safe-area-inset-top, 0) + 24px);
        right: 12px;
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        color: var(--color-ink-primary, var(--text-primary, #111));
        font-size: 20px;
        cursor: pointer;
        z-index: 101;
        border-radius: var(--radius, 8px);
        transition: background-color var(--ease);
    }
    .sidebar-close-btn:hover,
    .sidebar-close-btn:active {
        background-color: var(--bg-elev, rgba(0,0,0,0.05));
    }
    .menu-toggle-btn { display: block; min-width: 44px; min-height: 44px; }
    .content-area { margin-left: 0; padding: var(--sp-4); padding-top: 56px; }

    /* 모바일 사이드바 백드롭 */
    body.sidebar-open::after {
        content: '';
        position: fixed; inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: 99;
        animation: fadeIn var(--ease);
    }

    /* 모달은 화면 하단 sheet 형태 (60vh) */
    .modal-content {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        position: fixed; bottom: 0; left: 0; right: 0;
        max-width: 100%; max-height: 70vh; overflow-y: auto;
    }

    /* 터치 영역 44x44px 최소 확보 */
    .sidebar-item { min-height: 44px; }
    .sidebar-footer button { min-width: 44px; min-height: 44px; }
    .icon-btn { min-width: 36px; min-height: 36px; }
    .qr-status-btn { min-height: 80px; }
    .primary-btn, .text-btn { min-height: 44px; }
    .tab-btn, .goal-tab, .principle-tab, .el-indicator-dot { min-height: 40px; }

    /* 모바일 통합 타임라인: 슬롯 카드 세로 스크롤 */
    .utl-header { display: none; }
    .utl-body {
        display: block; max-height: none; padding: 0; /* 카드 안 padding 자리 자리해 X — 시간표 자리 자연 차지 */
    }
    .unified-timeline { padding: 0; }
    /* 모바일에선 데스크탑 시간표(헤더 줌 + 3열 그리드) 통째 숨김 — 모바일 전용 줌만 남김 */
    .utl-desktop-header,
    .utl-axis-col, .utl-plan-col, .utl-actual-col {
        display: none;
    }
    /* 핀치 줌 대응 폰트 및 패딩 크기 가변화 */
    #utl-mobile-list {
        /* 실시간 핀치 줌을 위한 CSS 변수 폰트 베이스 */
        --zoom: var(--mobile-zoom-scale, 1.0);
        font-size: calc(1rem * var(--zoom));
    }
    .utl-mobile-list {
        display: flex; flex-direction: column; gap: calc(var(--sp-2) * var(--zoom));
    }

    /* 1. 상단 탭 스타일 및 언더라인 인디케이터 */
    .utl-mobile-tabs {
        display: flex;
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        position: sticky;
        top: 0;
        z-index: 15;
        padding-top: env(safe-area-inset-top, 0px); /* PWA Standalone 상단 노치 영역 가드 */
    }
    .utl-mobile-tab {
        flex: 1;
        padding: calc(var(--sp-3) * var(--zoom)) calc(var(--sp-2) * var(--zoom));
        font-size: calc(0.875rem * var(--zoom)); /* rem 적용 */
        color: var(--ink-secondary, var(--text-secondary));
        background: transparent;
        border: none;
        font-weight: 500;
        cursor: pointer;
        position: relative;
        text-align: center;
        transition: all var(--ease);
    }
    .utl-mobile-tab.active {
        color: var(--accent);
        font-weight: 600;
    }
    .utl-mobile-tab.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 20%;
        right: 20%;
        height: calc(3px * var(--zoom));
        background: var(--accent);
        border-radius: 99px;
    }

    /* 2. 스마트 가이드 캐러셀 컨테이너 */
    .utl-mobile-guide-container {
        padding: calc(var(--sp-3) * var(--zoom)) calc(var(--sp-4) * var(--zoom)) calc(var(--sp-2) * var(--zoom)) calc(var(--sp-4) * var(--zoom));
        background: var(--bg-elev);
        border-bottom: 1px solid var(--border);
        margin-bottom: calc(var(--sp-2) * var(--zoom));
    }
    .utl-mobile-guide-title {
        font-size: calc(0.6875rem * var(--zoom));
        font-weight: 700;
        color: var(--accent);
        margin-bottom: calc(var(--sp-2) * var(--zoom));
        letter-spacing: 0.3px;
        text-transform: uppercase;
    }
    .utl-mobile-guide-carousel {
        display: flex;
        gap: calc(var(--sp-3) * var(--zoom));
        overflow-x: auto;
        padding-bottom: calc(var(--sp-2) * var(--zoom));
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .utl-mobile-guide-carousel::-webkit-scrollbar {
        display: none;
    }

    /* 3. 가이드 카드 디자인 (글래스모피즘 + 줌 배율 대응) */
    .utl-mobile-guide-card {
        flex: 0 0 calc(160px * var(--zoom));
        scroll-snap-align: start;
        background: linear-gradient(135deg, var(--bg) 0%, var(--bg-elev) 100%);
        border: 1px solid var(--border);
        border-radius: calc(var(--radius-lg, 12px) * var(--zoom));
        padding: calc(var(--sp-3) * var(--zoom));
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: calc(90px * var(--zoom));
        box-shadow: var(--shadow-sm);
        transition: transform 0.15s ease, border-color 0.15s ease;
    }
    .utl-mobile-guide-card:active {
        transform: scale(0.95);
        border-color: var(--accent-soft);
    }
    .utl-mobile-guide-card-time {
        font-size: calc(0.625rem * var(--zoom));
        font-weight: 700;
        color: var(--ink-secondary, var(--text-secondary));
    }
    .utl-mobile-guide-card-label {
        font-size: calc(0.8125rem * var(--zoom));
        font-weight: 500;
        color: var(--text-primary);
        margin: calc(var(--sp-1) * var(--zoom)) 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.3;
        word-break: break-all;
    }
    .utl-mobile-guide-card-cta {
        font-size: calc(0.656rem * var(--zoom));
        font-weight: 600;
        color: var(--accent);
        text-align: right;
    }

    /* 4. 본문 피드 카드 폰트 줌 대응 */
    .utl-mobile-body-wrap {
        display: flex; flex-direction: column; gap: calc(var(--sp-2) * var(--zoom));
        touch-action: pan-y;  /* 가로 스와이프 방해 안 받게 */
    }
    .utl-mobile-card {
        background: var(--bg-card); border: 1px solid var(--border);
        border-left: calc(4px * var(--zoom)) solid var(--dot-gray);
        border-radius: calc(var(--radius-lg, 12px) * var(--zoom)); 
        padding: calc(var(--sp-3) * var(--zoom)) calc(var(--sp-4) * var(--zoom));
        margin-bottom: calc(var(--sp-2) * var(--zoom));
        display: flex; gap: calc(var(--sp-3) * var(--zoom)); align-items: center;
        transition: transform 0.1s ease, background-color 0.1s ease;
    }
    .utl-mobile-card:active {
        transform: scale(0.98);
        background: var(--bg-elev);
    }
    
    /* 워크플로우-발 도트는 모바일에서도 시각 구별 */
    .utl-mobile-card.from-workflow {
        border-left-color: var(--brand-primary, var(--accent-primary));
    }
    .utl-mobile-card.from-workflow .utl-mobile-plan::before {
        content: '🪜 '; font-size: calc(11px * var(--zoom)); opacity: 0.7;
    }
    .utl-mobile-card.dot-gray { border-left-color: var(--dot-gray); }
    .utl-mobile-card.dot-yellow { border-left-color: var(--dot-yellow); }
    .utl-mobile-card.dot-green { border-left-color: var(--dot-green); }
    .utl-mobile-card.dot-orange { border-left-color: var(--dot-orange); }
    .utl-mobile-card.dot-red { border-left-color: var(--dot-red); }
    .utl-mobile-card.dot-purple { border-left-color: var(--dot-purple); }

    /* 모바일에서도 타임박싱 딱 보이도록 시간 크기 줌 대응 */
    .utl-mobile-time {
        font-size: calc(0.875rem * var(--zoom)); /* 14px */
        font-weight: 600;
        color: var(--accent, var(--text-primary));
        font-variant-numeric: tabular-nums;
        min-width: calc(72px * var(--zoom));
        line-height: 1.2;
        letter-spacing: -0.02em;
    }
    /* 시간 강조 — workflow-발 카드 */
    .utl-mobile-card.from-workflow .utl-mobile-time {
        background: var(--accent-soft, rgba(124,139,111,0.10));
        padding: calc(4px * var(--zoom)) calc(8px * var(--zoom));
        border-radius: calc(6px * var(--zoom));
        min-width: 0;
    }
    
    .utl-mobile-body { flex: 1; min-width: 0; }
    .utl-mobile-plan { 
        font-size: calc(0.8125rem * var(--zoom)); /* 13px */
        font-weight: 500; 
        line-height: 1.4;
        word-break: break-all;
    }
    .utl-mobile-actual { 
        font-size: calc(0.75rem * var(--zoom)); /* 12px */
        color: var(--ink-secondary, var(--text-secondary)); 
        margin-top: calc(2px * var(--zoom)); 
    }

    /* 5. 실제 카드 하단 출처 표기 */
    .utl-mobile-plan-origin {
        font-size: calc(0.6875rem * var(--zoom));
        color: var(--ink-secondary, var(--text-secondary));
        margin-top: calc(5px * var(--zoom));
        border-top: 1px dashed var(--border);
        padding-top: calc(4px * var(--zoom));
        font-style: italic;
    }

    /* 6. sticky + 추가 버튼 */
    .utl-mobile-add-btn {
        position: sticky;
        bottom: calc(env(safe-area-inset-bottom, 0px) + calc(var(--sp-3) * var(--zoom)));
        margin: calc(var(--sp-3) * var(--zoom)) calc(var(--sp-4) * var(--zoom));
        padding: calc(var(--sp-3) * var(--zoom));
        background: var(--bg-card); color: var(--text-primary);
        border: 1px dashed var(--border);
        border-radius: calc(var(--radius-lg, 12px) * var(--zoom));
        font-size: calc(0.9375rem * var(--zoom));
        font-weight: 500;
        cursor: pointer;
        transition: all var(--ease);
        box-shadow: var(--shadow-sm);
    }
    .utl-mobile-add-btn:active {
        background: var(--bg-quiet, rgba(0,0,0,0.03));
    }

    /* ═══════════════════════════════════════════════════════
       (v108 Phase 1+2 통합 2026-05-20) 모바일 시간축 그리드 — Guided Actual UX
       사용자 7건 신고 정합:
         1) 카드 폭 꽉 (시간 라벨 자리 좁힘)
         2) 빈 자리 톡 = 드롭다운 (인라인)
         3) 슬라이드 3단 토글 (계획만/둘 다/실제만)
         4) 카드 톡 = 인라인 4상태 + 길게 누름 = 모달
         5) 카드 하단 모서리 드래그 = 길이 자리 (15분 스냅)
         6) 줌 [-][100%][+] (ROW_HEIGHT 가변, localStorage 보존)
         7) + FAB 자리 폐기 (SWAN 톡 자리와 충돌)
       기존 utl-mobile-tabs·utl-mobile-card·utl-mobile-guide-* CSS dead — 1.3차에 정리
       ═══════════════════════════════════════════════════════ */
    /* (v134 2026-05-22) 사용자 보고: 모바일에서 카드 안 읽고 쓰는 공간이 답답 + 시간표만 폭 다름.
       모든 #view-today 카드 padding을 시간표와 동일하게(var(--sp-2)) 통일. */
    #view-today .card-section { padding: var(--sp-2); }
    #view-today .card-section .section-header-flex { padding: 0 var(--sp-2); margin-bottom: var(--sp-2); }
    /* (2026-05-23 v2) 시간표는 "오늘의 목표" 카드 안으로 흡수 — #view-today .card-section 규칙으로 자연 정렬.
       옛 #section-timeline 명시 규칙 제거(섹션 자체 사라짐). 합친 뒤에도 카드 패딩(sp-2)만큼 들여써져 기존과 동일. */
    .utl-mobile-list {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 0;
        background: var(--bg);
        height: 65vh; /* 페이지 자리한 자리 자연 — 시간표 안에서만 스크롤 */
        max-height: calc(100vh - 180px);
        overflow: hidden;
        border-radius: 8px;
    }
    /* 컨트롤 헤더 — 레이어 인디케이터 + 줌. sticky 자리합 — 스크롤 시 따라옴 */
    .utl-mg-controls {
        position: sticky;
        top: 0;
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-3);
        border-bottom: 1px solid var(--border);
        background: var(--bg);
        flex-shrink: 0;
    }
    .utl-mg-layer-status {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.75rem;
        color: var(--text-secondary);
    }
    .utl-mg-layer-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--border);
        transition: background 0.15s ease;
    }
    .utl-mg-layer-dot.on {
        background: var(--accent);
    }
    .utl-mg-layer-label {
        margin-left: 6px;
        font-weight: 500;
        color: var(--text-primary);
    }
    .utl-mg-zoom {
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .utl-mg-zoom-btn {
        width: 28px;
        height: 28px;
        border-radius: 6px;
        background: var(--bg-elev);
        border: 1px solid var(--border);
        color: var(--text-primary);
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        line-height: 1;
        padding: 0;
    }
    .utl-mg-zoom-btn:active {
        background: var(--accent-soft);
    }
    .utl-mg-zoom-label {
        min-width: 38px;
        text-align: center;
        font-size: 0.6875rem;
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
    }
    .utl-mg-layer-hint {
        font-size: 0.625rem;
        color: var(--text-secondary);
        text-align: center;
        padding: 4px var(--sp-3);
        opacity: 0.7;
        flex-shrink: 0;
    }
    /* 스크롤 영역 — 헤더 분리, 시간축만 자체 스크롤 */
    .utl-mg-scroll {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        position: relative;
    }
    .utl-mg-container {
        position: relative;
        margin-left: 44px; /* 시간 라벨 자리 좁힘 — 카드 자리 자연 차지 */
        background: var(--bg);
    }
    .utl-mg-time {
        position: absolute;
        left: -44px;
        width: 40px;
        font-size: 0.625rem; /* 10px — 좁은 자리 정합 */
        color: var(--text-secondary);
        font-variant-numeric: tabular-nums;
        transform: translateY(-50%);
        text-align: right;
        padding-right: 4px;
        white-space: nowrap;
        pointer-events: none;
        z-index: 0;
        line-height: 1.2;
    }
    .utl-mg-line {
        position: absolute;
        left: 0;
        right: 0;
        height: 1px;
        background: var(--border);
        opacity: 0.5;
        pointer-events: none;
        z-index: 0;
    }
    .utl-mg-now {
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--accent);
        z-index: 5;
        pointer-events: none;
    }
    /* (v111) 72시간 결 — 날짜 구분선 (어제·오늘·내일) */
    .utl-mg-day-divider {
        position: absolute;
        left: 0;
        right: 0;
        height: 0;
        border-top: 2px dashed var(--accent);
        opacity: 0.45;
        pointer-events: none;
        z-index: 4;
    }
    .utl-mg-day-divider:first-of-type {
        border-top: none;
    }
    .utl-mg-day-label {
        position: absolute;
        top: -10px;
        left: 8px;
        background: var(--bg-card);
        border: 1px solid var(--accent);
        color: var(--accent);
        padding: 2px 10px;
        border-radius: 999px;
        font-size: 0.6875rem;
        font-weight: 600;
        white-space: nowrap;
    }
    /* 어제·내일 자리 슬롯 — 자연 흐릿하게 */
    .utl-mg-slot.day-yesterday,
    .utl-mg-slot.day-tomorrow {
        opacity: 0.65;
    }
    .utl-mg-now::before {
        content: '';
        position: absolute;
        left: -4px;
        top: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--accent);
    }
    .utl-mg-slot {
        position: absolute;
        left: 2px;
        right: 2px;
        border-radius: 6px;
        padding: 3px 6px;
        font-size: 0.75rem;
        line-height: 1.25;
        overflow: hidden;
        cursor: pointer;
        box-sizing: border-box;
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }
    .utl-mg-slot:active { transform: scale(0.98); }
    /* 계획 = 옅은 띠 */
    .utl-mg-slot-plan {
        background: var(--accent-soft);
        color: var(--text-secondary);
        border-left: 2px solid var(--accent-soft);
        z-index: 1;
        opacity: 0.6;
        font-weight: 400;
    }
    .utl-mg-slot-plan.gcal-source {
        background: rgba(124, 139, 111, 0.08);
        border-left-color: var(--accent);
    }
    /* 실제 = 만족도 색 카드 */
    .utl-mg-slot-actual {
        background: var(--bg-card);
        color: var(--text-primary);
        border-left: 4px solid var(--dot-gray);
        z-index: 2;
        font-weight: 500;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
    .utl-mg-slot-actual.dot-gray { border-left-color: var(--dot-gray); }
    .utl-mg-slot-actual.dot-yellow { border-left-color: var(--dot-yellow); }
    .utl-mg-slot-actual.dot-green { border-left-color: var(--dot-green); }
    .utl-mg-slot-actual.dot-orange { border-left-color: var(--dot-orange); }
    .utl-mg-slot-actual.dot-red { border-left-color: var(--dot-red); }
    .utl-mg-slot-actual.dot-purple { border-left-color: var(--dot-purple); }
    .utl-mg-slot-actual.from-workflow { border-left-color: var(--brand-primary, var(--accent)); }
    .utl-mg-slot-actual.evaluated { opacity: 0.9; }
    .utl-mg-slot-label {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-shrink: 0;
    }
    /* 인라인 4상태 빠른 평가 자리 — 한 톡으로 평가 마침 */
    .utl-mg-quick-eval {
        display: flex;
        gap: 4px;
        margin-top: 2px;
        align-items: center;
        flex-shrink: 0;
    }
    .utl-mg-eval-btn {
        flex: 1;
        min-width: 0;
        min-height: 30px;
        border: 1px solid var(--border);
        background: var(--bg);
        border-radius: 4px;
        cursor: pointer;
        line-height: 1;
        padding: 2px 0;
        color: var(--ink-secondary);
        transition: background 0.1s ease, transform 0.1s ease;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }
    .utl-mg-eval-btn .ev-i { font-size: 15px; line-height: 1; }
    .utl-mg-eval-btn .ev-l { font-size: 8px; line-height: 1; letter-spacing: -0.02em; opacity: 0.55; }
    .utl-mg-eval-btn:active {
        background: var(--accent-soft);
        transform: scale(0.94);
    }
    /* (v113) 카드 우상단 "×" 톡 삭제 — 길게 누름 안내 X 자리 해소 */
    .utl-mg-del {
        position: absolute;
        top: 2px;
        right: 4px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: transparent;
        border: none;
        color: var(--text-secondary);
        font-size: 14px;
        font-weight: 500;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        z-index: 3;
        opacity: 0.55;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.1s ease, background 0.1s ease;
    }
    .utl-mg-del:hover,
    .utl-mg-del:active {
        opacity: 1;
        background: var(--bg-elev);
    }
    /* 리사이즈 핸들 — 카드 하단 모서리 드래그 */
    .utl-mg-resize {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 8px;
        cursor: ns-resize;
        touch-action: none;
        z-index: 3;
    }
    .utl-mg-resize::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 2px;
        transform: translateX(-50%);
        width: 24px;
        height: 2px;
        border-radius: 1px;
        background: var(--text-secondary);
        opacity: 0.3;
    }
    .utl-mg-slot-actual:active .utl-mg-resize::after { opacity: 0.6; }
    /* 빈 자리 톡 드롭다운 — 미배치 목표 + 직접 입력 */
    .utl-mg-dropdown {
        position: absolute;
        left: 8px;
        right: 8px;
        z-index: 100;
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
        max-height: 280px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: utl-mg-dd-slide 180ms ease-out;
    }
    @keyframes utl-mg-dd-slide {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .utl-mg-dd-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border);
        background: var(--bg-elev);
    }
    .utl-mg-dd-time {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--accent);
    }
    .utl-mg-dd-close {
        background: none;
        border: none;
        font-size: 16px;
        color: var(--text-secondary);
        cursor: pointer;
        padding: 0 4px;
        line-height: 1;
    }
    .utl-mg-dd-list {
        list-style: none;
        margin: 0;
        padding: 4px 0;
        overflow-y: auto;
        max-height: 160px;
    }
    .utl-mg-dd-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        cursor: pointer;
        font-size: 0.875rem;
        color: var(--text-primary);
        transition: background 0.1s ease;
    }
    .utl-mg-dd-item:active { background: var(--accent-soft); }
    .utl-mg-dd-icon {
        color: var(--accent);
        font-size: 14px;
        flex-shrink: 0;
    }
    .utl-mg-dd-text {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .utl-mg-dd-empty {
        padding: 16px 14px;
        text-align: center;
        font-size: 0.8125rem;
        color: var(--text-secondary);
    }
    .utl-mg-dd-divider {
        height: 1px;
        background: var(--border);
        margin: 0;
    }
    .utl-mg-dd-form {
        display: flex;
        gap: 6px;
        padding: 10px 12px;
        background: var(--bg);
    }
    .utl-mg-dd-input {
        flex: 1;
        min-width: 0;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--bg-card);
        color: var(--text-primary);
        font-size: 0.875rem;
        font-family: inherit;
    }
    .utl-mg-dd-input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .utl-mg-dd-submit {
        padding: 8px 14px;
        background: var(--accent);
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 0.8125rem;
        font-weight: 600;
        cursor: pointer;
        flex-shrink: 0;
    }
    .utl-mg-dd-submit:active { transform: scale(0.95); }

    /* 시간표 카드 안 자리한 자리 — utl-body·utl-header 자리 모바일 자리해 X (그리드 결만 자리합) */
    .timeline-toolbar { display: none; }
}

@media (min-width: 769px) {
    .utl-mobile-list { display: none; }
}

/* ═══════════════════════════════════════
   v3-①-B — 인물 카드 (목록 + 상세 모달 + Big Five 레이더)
   ═══════════════════════════════════════ */

/* ── 툴바 ── */
.persons-toolbar {
    display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4);
    grid-template-columns: 1fr auto auto; align-items: center;
}
.persons-search input {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text-primary);
    font-size: 14px;
}
.persons-search input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.persons-filter-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.persons-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--bg-elev); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 13px; cursor: pointer;
    transition: all var(--ease);
}
.persons-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.persons-chip.active {
    background: var(--accent); color: white; border-color: var(--accent);
}
.persons-chip-count {
    background: rgba(255,255,255,0.2);
    padding: 1px 7px; border-radius: 999px; font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.persons-chip:not(.active) .persons-chip-count {
    background: var(--bg-card); color: var(--text-secondary);
}
.persons-add-btn { white-space: nowrap; }

/* ── 카드 그리드 ── */
.persons-grid {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.person-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-4);
    cursor: pointer; transition: all var(--ease);
    display: flex; flex-direction: column; gap: var(--sp-3);
    position: relative;
}
.person-card:hover {
    border-color: var(--accent); transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.person-card.is-fallback { opacity: 0.75; }
.person-card-head {
    display: grid; grid-template-columns: 40px 1fr auto;
    gap: var(--sp-3); align-items: center;
}
.person-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; color: #2C2C2E; font-size: 16px;
}
.person-card-meta { min-width: 0; }
.person-card-name {
    font-weight: 600; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.person-card-sub {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    font-size: 11px; color: var(--text-secondary); margin-top: 2px;
}
.person-inner {
    background: var(--accent-soft); color: var(--accent);
    padding: 1px 7px; border-radius: 999px; font-weight: 500;
}
.person-relation {
    background: var(--bg-elev);
    padding: 1px 7px; border-radius: 999px;
}
.person-stance-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
}
.person-stance-pill.big { padding: 6px 14px; font-size: 14px; }

.person-card-mini { display: flex; flex-direction: column; gap: 4px; }
.mini-bar-row {
    display: grid; grid-template-columns: 16px 1fr; gap: 8px; align-items: center;
}
.mini-bar-label {
    font-size: 10px; color: var(--text-secondary);
    font-weight: 600; text-align: center;
}
.mini-bar-track {
    height: 6px; background: var(--bg-elev); border-radius: 3px; overflow: hidden;
}
.mini-bar-fill {
    display: block; height: 100%; background: var(--accent);
    transition: width var(--ease);
}
.mini-bar-fill.mini-bar-dim {
    background: var(--border);
}
.person-fallback-tag {
    position: absolute; top: 8px; right: 8px;
    background: var(--bg-elev); color: var(--text-secondary);
    padding: 2px 8px; border-radius: 999px; font-size: 10px;
}

/* ═══ 함께한 흔적 — 인물/조직 공용 ═══
   카드 그리드의 미니 통계 한 줄 + 모달의 큰 통계 섹션.
   메모리: project_person_card_policy.md — 자동 조정 X, 두 면 나란히. */

/* (1) 그리드 카드 하단 미니 통계 — "●●●○○ 12번 · 8h45m" */
.card-mini-stats {
    display: flex; align-items: center; gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 11px; color: var(--text-secondary);
}
.card-mini-stat { font-weight: 500; color: var(--text-primary); }
.card-mini-sep { opacity: 0.5; }

/* (2) 공용 5도트 인디케이터 — 카드/모달 어디서나 .rating-dots 로 노출 */
.rating-dots {
    display: inline-flex; gap: 2px; align-items: center;
}
.rating-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.rating-dot.filled {
    background: var(--accent);
    border-color: var(--accent);
}
.rating-dots-empty {
    font-size: 10px; color: var(--text-secondary); font-style: italic;
}

/* (3) 모달의 함께한 흔적 섹션 */
.footprint-section .person-layer-hint,
.footprint-section .org-layer-hint {
    font-size: 11px; color: var(--text-secondary); margin-bottom: 8px;
}
.footprint-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}
@media (min-width: 768px) {
    .footprint-grid { grid-template-columns: repeat(4, 1fr); }
}
.footprint-cell {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 4px;
}
.footprint-cell-label {
    font-size: 10px; color: var(--text-secondary);
    font-weight: 600; letter-spacing: 0.02em;
}

/* 조용한 함께한 흔적 (22번 재설계) — 큰 4분할 그리드 대신 한 줄 요약 + details 펼치기 */
.footprint-quiet {
    background: var(--bg-elev, var(--surface-elevated));
    border: 1px solid var(--border, var(--line));
    border-radius: 10px;
    padding: 12px 14px;
}
.footprint-quiet .org-layer-title { margin: 0 0 4px 0; }
.footprint-summary {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 12px; flex-wrap: wrap;
}
.footprint-summary-stats {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--text-secondary);
    flex-wrap: wrap;
}
.footprint-stat { display: inline-flex; align-items: baseline; gap: 4px; }
.footprint-stat-num { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.footprint-stat-unit { font-size: 12px; color: var(--text-secondary); }
.footprint-stat-divider { color: var(--text-tertiary, var(--ink-tertiary)); }
.footprint-trend-line {
    font-size: 12px; color: var(--text-secondary);
    margin: 6px 0 0; line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.footprint-recent-details { margin-top: 8px; }
.footprint-recent-details > summary {
    cursor: pointer; font-size: 12px; color: var(--text-secondary);
    padding: 6px 0; list-style: none;
}
.footprint-recent-details > summary::-webkit-details-marker { display: none; }
.footprint-recent-details > summary::before {
    content: '▸ '; transition: transform 160ms ease;
    display: inline-block;
}
.footprint-recent-details[open] > summary::before {
    content: '▾ ';
}
.footprint-cell-value {
    font-size: 18px; font-weight: 600; color: var(--text-primary);
    display: flex; align-items: center; gap: 6px;
}
.footprint-cell-value small {
    font-size: 11px; color: var(--text-secondary); font-weight: 400;
}
.footprint-cell.footprint-trend {
    grid-column: span 2;
}
@media (min-width: 768px) {
    .footprint-cell.footprint-trend { grid-column: span 1; }
}
.footprint-trend-note {
    font-size: 12px; font-weight: 500; color: var(--text-primary);
    line-height: 1.4;
}
.footprint-empty {
    font-size: 12px; color: var(--text-secondary); font-style: italic;
}

/* 최근 만남 3개 리스트 */
.footprint-recent {
    margin-top: var(--sp-3);
}
.footprint-recent-title {
    font-size: 11px; color: var(--text-secondary);
    font-weight: 600; margin-bottom: 6px; letter-spacing: 0.02em;
}
.footprint-recent-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.footprint-recent-item {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 8px; align-items: center;
    padding: 6px 8px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 12px;
}
.footprint-recent-when {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.footprint-recent-task {
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.footprint-recent-rating { flex-shrink: 0; }

/* Phase E-3: 만족도 추세 변화가 명확할 때 stance 재검토 관찰 안내.
   "주의" 톤 X — 차분한 관찰 톤. 자동 변경은 없고 안내만. */
.footprint-stance-hint {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    padding: var(--sp-3);
    border-radius: 10px;
    margin-bottom: var(--sp-3);
    font-size: 12px; line-height: 1.5;
    border: 1px solid var(--border);
    background: var(--bg-elev);
}
.footprint-stance-hint.hint-down {
    border-left: 3px solid var(--dot-orange);
}
.footprint-stance-hint.hint-up {
    border-left: 3px solid var(--dot-green);
}
.footprint-stance-icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 1px;
    color: var(--text-secondary);
}
.hint-down .footprint-stance-icon { color: var(--dot-orange); }
.hint-up .footprint-stance-icon { color: var(--dot-green); }
.footprint-stance-body { flex: 1; min-width: 0; }
.footprint-stance-line {
    color: var(--text-primary);
    font-weight: 500;
}
.footprint-stance-quiet {
    color: var(--text-secondary);
    font-style: italic;
    margin-top: 3px;
}

/* 모바일 — 최근 만남 한 칸에 세로로 */
@media (max-width: 640px) {
    .footprint-recent-item {
        grid-template-columns: 1fr;
        gap: 2px;
    }
    .footprint-recent-rating { justify-self: start; }
}

/* ── 모달 ── */
.person-modal-overlay { z-index: 900; }
.person-modal {
    max-width: 880px; width: 92%; max-height: 90vh;
    padding: 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.person-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--border);
}
.person-modal-header h3 { font-size: 18px; font-weight: 600; }
.person-modal-close {
    background: transparent; border: none; cursor: pointer;
    width: 32px; height: 32px; border-radius: 50%;
    color: var(--text-secondary); font-size: 16px;
}
.person-modal-close:hover { background: var(--hover); color: var(--text-primary); }
.person-fallback-banner {
    background: rgba(245, 200, 75, 0.12);
    color: #8B6F1B;
    padding: 10px var(--sp-5); font-size: 13px;
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .person-fallback-banner { color: #E8C765; }
.person-modal-body {
    display: grid; grid-template-columns: 240px 1fr;
    gap: var(--sp-5); padding: var(--sp-5);
    overflow-y: auto; flex: 1;
}
.person-detail-left {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--sp-3); position: sticky; top: 0; align-self: start;
}
.person-radar-wrap {
    background: var(--bg-elev); border-radius: var(--radius);
    padding: var(--sp-2);
}
svg.person-radar { display: block; }
.person-radar-caption {
    font-size: 12px; color: var(--text-secondary);
}
.person-stance-display {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--sp-2); margin-top: var(--sp-3);
}
.person-stance-change-btn {
    background: transparent; border: 1px dashed var(--border);
    color: var(--text-secondary);
    padding: 6px 12px; border-radius: var(--radius);
    font-size: 11px; cursor: not-allowed;
}
.person-detail-right {
    display: flex; flex-direction: column; gap: var(--sp-4);
    min-width: 0;
}
.person-layer {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-4);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.person-layer-title {
    font-size: 13px; font-weight: 600;
    color: var(--accent); letter-spacing: 0.02em;
}
.person-layer-hint {
    font-size: 12px; color: var(--text-secondary);
    background: var(--bg-elev); padding: 8px 10px; border-radius: 8px;
}

/* form rows */
.person-row {
    display: grid; grid-template-columns: 100px 1fr; gap: var(--sp-3);
    align-items: center;
}
.person-row > label {
    font-size: 13px; color: var(--text-secondary);
}
.person-row input[type="text"],
.person-row input[type="search"],
.person-row select,
.person-row textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text-primary);
    font-size: 14px; font-family: var(--font);
}
.person-row textarea { resize: vertical; }
.person-row input:disabled {
    background: var(--bg-elev); color: var(--text-secondary); cursor: not-allowed;
}
.person-toggle {
    display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-size: 13px; color: var(--text-primary);
}
.person-toggle input { width: 16px; height: 16px; cursor: pointer; }

/* Big Five row */
.bf-row { display: flex; flex-direction: column; gap: 6px; }
.bf-row-head {
    display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap;
}
.bf-row-label { font-size: 13px; font-weight: 500; }
.bf-row-hint { font-size: 11px; color: var(--text-secondary); flex: 1; }
.bf-row-unknown {
    font-size: 11px; color: var(--text-secondary);
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
.bf-row-unknown input { width: 13px; height: 13px; cursor: pointer; }
.bf-row-steps {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.bf-step {
    background: var(--bg-elev); border: 1px solid var(--border);
    color: var(--text-secondary);
    padding: 6px 0; border-radius: 6px;
    cursor: pointer; font-size: 12px;
    font-variant-numeric: tabular-nums;
    transition: all var(--ease);
}
.bf-step:hover { border-color: var(--accent); color: var(--text-primary); }
.bf-step.active {
    background: var(--accent); color: white; border-color: var(--accent);
    font-weight: 600;
}
.bf-row-steps.disabled { opacity: 0.4; pointer-events: none; }

/* 능력 스탯 */
.comp-list { display: flex; flex-direction: column; gap: 8px; }
.comp-row {
    display: grid;
    grid-template-columns: 80px 1fr 36px 24px auto;
    gap: 8px; align-items: center;
}
.comp-label { font-size: 13px; }
.comp-slider {
    width: 100%; height: 4px;
    -webkit-appearance: none; appearance: none;
    background: var(--bg-elev); border-radius: 2px;
    outline: none;
}
.comp-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 1px var(--accent);
}
.comp-slider::-moz-range-thumb {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--accent); cursor: pointer;
    border: 2px solid var(--bg-card);
    box-shadow: 0 0 0 1px var(--accent);
}
.comp-row.is-null .comp-slider {
    opacity: 0.35;
}
.comp-row.is-null .comp-slider::-webkit-slider-thumb {
    background: var(--border); box-shadow: 0 0 0 1px var(--border);
}
.comp-value {
    font-size: 12px; color: var(--text-secondary);
    text-align: right; font-variant-numeric: tabular-nums;
}
.comp-clear, .comp-remove {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 12px;
    width: 24px; height: 24px; border-radius: 4px;
}
.comp-clear:hover, .comp-remove:hover {
    background: var(--hover); color: var(--text-primary);
}
.comp-add-row {
    display: flex; gap: 8px; margin-top: var(--sp-2);
    padding-top: var(--sp-2); border-top: 1px dashed var(--border);
}
.comp-add-row input {
    flex: 1; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg); color: var(--text-primary); font-size: 13px;
}

/* 관계 별점 */
.rel-row {
    display: grid; grid-template-columns: 80px 1fr;
    gap: var(--sp-3); align-items: center;
}
.rel-label { font-size: 13px; }
.rel-stars { display: flex; gap: 2px; align-items: center; }
.rel-star {
    background: transparent; border: none; cursor: pointer;
    color: var(--border); font-size: 20px; padding: 2px 4px;
    transition: color var(--ease);
}
.rel-star:hover { color: var(--dot-yellow); }
.rel-star.active { color: var(--dot-yellow); }
.rel-clear {
    background: transparent; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 11px;
    margin-left: 8px; padding: 2px 6px; border-radius: 4px;
}
.rel-clear:hover { background: var(--hover); }

/* 모달 푸터 */
.person-modal-footer {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border);
    background: var(--bg-elev);
}
.person-modal-actions { display: flex; gap: var(--sp-2); }
.person-delete-btn { color: var(--dot-red); }

/* 모바일 */
@media (max-width: 768px) {
    .persons-toolbar {
        grid-template-columns: 1fr;
    }
    .persons-add-btn { justify-self: stretch; }
    .person-modal {
        width: 100%; max-width: 100%; max-height: 100vh; height: 100vh;
        border-radius: 0;
    }
    .person-modal-body {
        grid-template-columns: 1fr;
        padding: var(--sp-4);
        gap: var(--sp-4);
    }
    .person-detail-left {
        position: static; flex-direction: row; gap: var(--sp-4);
        flex-wrap: wrap; justify-content: center;
    }
    .person-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }
    .comp-row {
        grid-template-columns: 64px 1fr 30px 24px auto;
    }
    .rel-row {
        grid-template-columns: 60px 1fr;
    }
}

/* ═══════════════════════════════════════
   v3-①-C — 조직 카드 (목록 + 상세 모달 + 멤버 관리)
   ═══════════════════════════════════════ */

/* ── 툴바 ── */
.orgs-toolbar {
    display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4);
    grid-template-columns: 1fr auto auto; align-items: center;
}
.orgs-search input {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--text-primary);
    font-size: 14px;
}
.orgs-search input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.orgs-filter-chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.orgs-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 999px;
    background: var(--bg-elev); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 13px; cursor: pointer;
    transition: all var(--ease);
}
.orgs-chip:hover { border-color: var(--accent); color: var(--text-primary); }
.orgs-chip.active {
    background: var(--accent); color: white; border-color: var(--accent);
}
.orgs-chip-count {
    background: rgba(255,255,255,0.2);
    padding: 1px 7px; border-radius: 999px; font-size: 11px;
    font-variant-numeric: tabular-nums;
}
.orgs-chip:not(.active) .orgs-chip-count {
    background: var(--bg-card); color: var(--text-secondary);
}
.orgs-add-btn { white-space: nowrap; }

/* ── 카드 그리드 ── */
.orgs-grid {
    display: grid; gap: var(--sp-3);
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.org-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-4);
    cursor: pointer; transition: all var(--ease);
    display: flex; flex-direction: column; gap: var(--sp-3);
}
.org-card:hover {
    border-color: var(--accent); transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.org-card-head {
    display: grid; grid-template-columns: 40px 1fr auto;
    gap: var(--sp-3); align-items: center;
}
.org-type-badge {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; background: var(--bg-elev);
}
.org-card-meta { min-width: 0; }
.org-card-name {
    font-weight: 600; font-size: 15px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-card-sub {
    display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
    font-size: 11px; color: var(--text-secondary); margin-top: 2px;
}
.org-type-label, .org-member-count {
    background: var(--bg-elev);
    padding: 1px 7px; border-radius: 999px;
}
.org-stance-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
}
.org-stance-pill.big { padding: 6px 14px; font-size: 14px; }

.org-card-mini { display: flex; flex-direction: column; gap: 4px; }
.risk-mini-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
    justify-self: start;
}

/* ── 모달 ── */
.org-modal-overlay { z-index: 900; }
.org-modal {
    max-width: 880px; width: 92%; max-height: 90vh;
    padding: 0; overflow: hidden;
    display: flex; flex-direction: column;
}
.org-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border);
}
.org-modal-header h3 { font-size: 18px; font-weight: 600; }
.org-modal-close {
    background: transparent; border: 0; font-size: 18px;
    color: var(--text-secondary); cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.org-modal-close:hover { background: var(--hover); color: var(--text-primary); }
.org-modal-body {
    display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--sp-5);
    padding: var(--sp-5); overflow-y: auto; overflow-x: hidden;
    flex: 1;
}
.org-modal-body > * { min-width: 0; }

/* 좌측 패널 */
.org-detail-left {
    display: flex; flex-direction: column; gap: var(--sp-4);
    align-items: center;
    position: sticky; top: 0;
}
.org-type-display {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: var(--sp-4); width: 100%;
    background: var(--bg-elev); border-radius: var(--radius);
}
.org-type-display-icon { font-size: 56px; line-height: 1; }
.org-type-display-label {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
}
.org-stance-display {
    display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%;
}
.org-stance-change-btn {
    background: transparent; border: 1px dashed var(--border);
    color: var(--text-secondary); padding: 6px 12px; border-radius: 8px;
    font-size: 11px; cursor: not-allowed;
}
.org-member-mini {
    width: 100%; display: flex; flex-direction: column; gap: 6px;
    padding: var(--sp-3); background: var(--bg-elev); border-radius: var(--radius);
}
.org-member-mini-title {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
}
.org-member-mini-empty {
    font-size: 12px; color: var(--text-secondary); font-style: italic;
}
.org-member-mini-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-primary);
    overflow: hidden;
}
.org-member-mini-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.org-member-mini-more {
    font-size: 11px; color: var(--text-secondary);
    padding-left: 26px;
}

/* 우측 편집 영역 */
.org-detail-right {
    display: flex; flex-direction: column; gap: var(--sp-4);
}
.org-layer {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--sp-4);
}
.org-layer-title {
    font-size: 14px; font-weight: 600; margin-bottom: 6px;
    color: var(--text-primary);
}
.org-layer-hint {
    font-size: 12px; color: var(--text-secondary); margin-bottom: var(--sp-3);
    line-height: 1.5;
}
.org-row {
    display: grid; grid-template-columns: 100px 1fr; gap: var(--sp-3);
    align-items: center; margin-bottom: var(--sp-2);
}
.org-row label {
    font-size: 12px; color: var(--text-secondary); font-weight: 500;
}
.org-row input[type="text"], .org-row select, .org-row textarea {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text-primary);
    font-size: 13px; font-family: inherit;
}
.org-row textarea { resize: vertical; min-height: 60px; }
.org-row input:focus, .org-row select:focus, .org-row textarea:focus {
    outline: 2px solid var(--accent-soft); border-color: var(--accent);
}

/* ── Layer 3 위험도 칩 ── */
.risk-chips {
    display: flex; gap: var(--sp-2); flex-wrap: wrap;
}
.risk-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    background: var(--bg-elev); border: 1px solid var(--border);
    color: var(--text-secondary); font-size: 13px; cursor: pointer;
    transition: all var(--ease);
}
.risk-chip:hover { border-color: var(--risk-color, var(--accent)); color: var(--text-primary); }
.risk-chip.active {
    background: var(--risk-color, var(--accent)); color: white;
    border-color: var(--risk-color, var(--accent));
}
.risk-chip-unknown.active {
    background: var(--text-secondary); border-color: var(--text-secondary);
}

/* ── Layer 4 멤버 관리 ── */
.member-add-row {
    display: grid; grid-template-columns: 1fr auto;
    gap: var(--sp-2); margin-bottom: var(--sp-3);
    position: relative;
    align-items: stretch;
}
.member-add-row input {
    padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text-primary); font-size: 13px;
}
.member-add-row input:focus {
    outline: 2px solid var(--accent-soft); border-color: var(--accent);
}
.member-add-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 0 14px;
    font-size: 13px; font-weight: 500;
    white-space: nowrap;
}
.member-add-btn .btn-icon { width: 14px; height: 14px; }

/* 도트 평가 활동 카테고리 (2026-05-12) */
.qr-category-row {
    margin: 12px 0;
    padding: 12px;
    border: 1px solid var(--border, var(--line));
    border-radius: 10px;
    background: var(--bg-elev, var(--surface-elevated));
}
.qr-category-label {
    font-size: 12px; font-weight: 600;
    color: var(--text-secondary, var(--ink-secondary));
    margin-bottom: 8px;
}
.qr-category-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 8px;
}
.qr-category-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 10px;
    border: 1px solid var(--border, var(--line));
    background: var(--bg-card, var(--surface-card));
    border-radius: 999px;
    font-size: 12px; cursor: pointer;
    color: var(--text-primary, var(--ink-primary));
    transition: all 160ms ease;
}
.qr-category-chip:hover { border-color: var(--brand-primary, var(--accent)); }
.qr-category-chip.selected {
    background: var(--brand-primary, var(--accent));
    color: #fff;
    border-color: var(--brand-primary, var(--accent));
}
.qr-cat-icon { font-size: 14px; line-height: 1; }
.qr-category-add-row {
    display: flex; gap: 6px; align-items: center;
}
.qr-category-add-row .qr-text-input { flex: 1; font-size: 12px; padding: 6px 10px; }

/* '어떤 일을 많이 했나' 인사이트 블록 — 대시보드 주간 / 오늘 리포트 공용 */
.dash-insights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 14px 0;
    padding: 14px;
    background: var(--bg-elev, var(--surface-elevated));
    border-radius: 10px;
}
@media (max-width: 640px) {
    .dash-insights { grid-template-columns: 1fr; }
}
.dash-insight-col { min-width: 0; }
.dash-insight-title {
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--text-secondary, var(--ink-secondary));
    margin-bottom: 6px;
}
.dash-insight-list {
    list-style: decimal; padding-left: 18px; margin: 0;
    font-size: 13px; color: var(--text-primary, var(--ink-primary));
    display: flex; flex-direction: column; gap: 2px;
}
.dash-insight-list li {
    line-height: 1.4; word-break: keep-all;
}
.dash-insight-meta {
    color: var(--text-secondary, var(--ink-secondary));
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.dash-insight-empty {
    color: var(--text-tertiary, var(--ink-tertiary));
    font-size: 12px; list-style: none; margin-left: -18px;
}

/* 조직 카드 v5 — 1차 분류 multi-select 체크박스 그리드 */
.org-row-vertical {
    display: flex; flex-direction: column;
    gap: 8px;
    grid-template-columns: 1fr;
}
.org-role-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
@media (max-width: 640px) {
    .org-role-grid { grid-template-columns: 1fr; }
}
.org-role-chip {
    display: flex; flex-direction: column; gap: 4px;
    padding: 10px 12px;
    border: 1px solid var(--border, var(--line));
    border-radius: 10px;
    background: var(--bg-card, var(--surface-card));
    cursor: pointer;
    transition: all 160ms ease;
    position: relative;
}
.org-role-chip:hover { border-color: var(--brand-primary, var(--accent)); }
.org-role-chip input[type="checkbox"] {
    position: absolute; opacity: 0; pointer-events: none;
}
.org-role-chip.checked {
    background: var(--brand-soft);
    border-color: var(--brand-primary, var(--accent));
}
.org-role-chip-head {
    font-size: 13px; color: var(--text-primary, var(--ink-primary));
}
.org-role-chip-head b { font-weight: 600; margin-left: 2px; }
.org-role-chip-hint {
    font-size: 11px;
    color: var(--text-secondary, var(--ink-secondary));
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.org-role-chip.checked .org-role-chip-head::after {
    content: '✓';
    margin-left: 6px;
    color: var(--brand-primary, var(--accent));
    font-weight: 700;
}

/* 조직 카드 v4 — 2차 분류 칩 + 모달 select 행 숨김 */
.org-secondary-chip {
    display: inline-flex; align-items: center;
    padding: 1px 8px;
    font-size: 11px;
    border-radius: 999px;
    background: var(--bg-elev, var(--surface-elevated));
    color: var(--text-secondary, var(--ink-secondary));
    margin-left: 4px;
}
.org-row.hidden { display: none; }

/* 인물 모달 자동 분석 섹션 (정책 v3 / 5번) */
.person-ai-analysis {
    border-left: 3px solid var(--brand-primary, var(--accent));
}
.person-ai-analysis .ai-oneline {
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary, var(--ink-primary));
    background: var(--bg-elev, var(--surface-elevated));
    padding: 10px 12px;
    border-radius: 10px;
    margin-bottom: 12px;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.ai-analysis-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}
@media (max-width: 640px) {
    .ai-analysis-grid { grid-template-columns: 1fr; }
}
.ai-analysis-cell {
    background: var(--bg-card, var(--surface-card));
    border: 1px solid var(--border, var(--line));
    border-radius: 8px;
    padding: 8px 10px;
    display: flex; flex-direction: column; gap: 6px;
    min-width: 0;
}
.ai-analysis-cell-label {
    font-size: 11px; font-weight: 600;
    color: var(--text-secondary, var(--ink-secondary));
    letter-spacing: 0.02em;
}
.ai-analysis-cell-body {
    display: flex; flex-wrap: wrap; gap: 4px;
}
.ai-tag {
    display: inline-block;
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 999px;
    background: var(--bg-elev, var(--surface-elevated));
    color: var(--text-primary, var(--ink-primary));
}
.ai-empty {
    font-size: 11px;
    color: var(--text-tertiary, var(--ink-tertiary));
}

/* 도트 평가 모달 — 인물 칩 wrap + 카테고리별 5축 평가 라벨 (정책 v3) */
.qr-link-chip-wrap {
    display: flex; flex-direction: column;
    gap: 4px;
}
.qr-chip-rating-labels {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding-left: 8px;
}
.qr-rating-label-chip {
    padding: 3px 9px;
    font-size: 11px; line-height: 1.3;
    border-radius: 999px;
    border: 1px solid var(--border, var(--line));
    background: var(--bg-card, var(--surface-card));
    color: var(--text-secondary, var(--ink-secondary));
    cursor: pointer;
    transition: all 160ms ease;
}
.qr-rating-label-chip:hover {
    color: var(--text-primary, var(--ink-primary));
    border-color: var(--brand-primary, var(--accent));
}
.qr-rating-label-chip.selected {
    background: var(--brand-primary, var(--accent));
    color: #fff;
    border-color: var(--brand-primary, var(--accent));
}

/* 첫인상 비교 표기 (정책 v3) */
.bf-current {
    display: inline-block;
    min-width: 28px; text-align: right;
    font-size: 13px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary, var(--ink-primary));
}
.bf-first {
    font-size: 11px; color: var(--text-secondary, var(--ink-secondary));
    background: var(--bg-elev, var(--surface-elevated));
    padding: 1px 6px; border-radius: 999px;
    margin-left: 4px;
}
.bf-delta {
    font-size: 11px; margin-left: 4px;
    font-variant-numeric: tabular-nums;
    color: var(--text-tertiary, var(--ink-tertiary));
}
.bf-delta.up   { color: var(--dot-green); }
.bf-delta.down { color: var(--dot-orange); }

/* 능력 행 읽기 전용 (정책 v3) */
.comp-row-readonly {
    display: grid;
    grid-template-columns: 70px 1fr 36px auto auto;
    gap: 8px; align-items: center;
    padding: 4px 0;
}
.comp-readonly-bar {
    height: 6px;
    background: var(--bg-elev, var(--surface-elevated));
    border-radius: 999px; overflow: hidden;
    border: 1px solid var(--border, var(--line));
}
.comp-readonly-fill {
    display: block; height: 100%;
    background: var(--brand-primary, var(--accent));
    border-radius: 999px;
    transition: width 300ms ease;
}

/* 관계 별 읽기 전용 */
.rel-row-readonly .rel-star {
    background: transparent; border: none; padding: 0;
    color: var(--ink-tertiary, #C0BFB7);
    font-size: 16px;
}
.rel-row-readonly .rel-star.active {
    color: var(--brand-primary, var(--accent));
}

/* 위험도 chips 읽기 전용 */
.risk-chips.is-readonly .risk-chip {
    cursor: default; opacity: 0.6;
}
.risk-chips.is-readonly .risk-chip.active {
    opacity: 1;
}

/* 도트 평가 마이크로 confirm (26번 — 새 멤버 연결 묻기) */
.qr-mini-confirm-overlay {
    position: fixed; inset: 0; z-index: 1100;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(2px);
}
.qr-mini-confirm-box {
    background: var(--bg-card, var(--surface-card));
    border: 1px solid var(--border, var(--line));
    border-radius: 12px;
    padding: 20px 22px;
    width: min(420px, calc(100vw - 32px));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
}
.qr-mini-confirm-title {
    font-size: 15px; font-weight: 600;
    color: var(--text-primary, var(--ink-primary));
    margin: 0 0 8px;
}
.qr-mini-confirm-body {
    font-size: 13px; color: var(--text-secondary, var(--ink-secondary));
    line-height: 1.5; margin: 0 0 16px;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.qr-mini-confirm-actions {
    display: flex; justify-content: flex-end; gap: 8px;
}

/* 점수 축 lock 배지 + 되돌리기 버튼 (인물·조직 공용) */
.axis-lock-badge {
    display: inline-flex; align-items: center;
    padding: 2px 6px;
    font-size: 10px; line-height: 1.2;
    border-radius: 999px;
    border: 1px solid transparent;
    white-space: nowrap;
    margin-left: 4px;
    vertical-align: middle;
}
.axis-lock-badge.axis-locked {
    background: var(--brand-soft);
    color: var(--brand-primary, var(--accent));
    border-color: var(--brand-primary, var(--accent));
}
.axis-lock-badge.axis-derived {
    background: var(--bg-elev, var(--surface-elevated));
    color: var(--text-secondary, var(--ink-secondary));
    border-color: var(--border, var(--line));
}
.axis-unlock-btn {
    margin-left: 4px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border, var(--line));
    color: var(--text-secondary, var(--ink-secondary));
    cursor: pointer; padding: 0;
    font-size: 12px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 160ms ease;
}
.axis-unlock-btn:hover {
    background: var(--brand-soft);
    color: var(--brand-primary, var(--accent));
    border-color: var(--brand-primary, var(--accent));
}
/* 조직 위험도 헤더 안 lock 슬롯 — 제목 옆에 inline */
.risk-lock-slot { display: inline-flex; align-items: center; gap: 4px; }

/* ═══════════════════════════════════════════════════════════════
   인물 프로필 좌측 — 능력 미니 막대 (3번)
   ═══════════════════════════════════════════════════════════════ */
.profile-comp-mini {
    width: 100%;
    background: var(--bg-elev, var(--surface-elevated));
    border-radius: 10px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 5px;
}
.profile-comp-mini-title {
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    color: var(--text-secondary, var(--ink-secondary));
    margin-bottom: 3px;
}
.profile-comp-mini-row {
    display: grid;
    grid-template-columns: 42px 1fr 28px;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}
.profile-comp-mini-label {
    color: var(--text-secondary, var(--ink-secondary));
}
.profile-comp-mini-bar {
    height: 4px; background: var(--bg-card, var(--surface-card));
    border-radius: 999px; overflow: hidden;
    border: 1px solid var(--border, var(--line));
}
.profile-comp-mini-fill {
    display: block; height: 100%;
    background: var(--brand-primary, var(--accent));
    transition: width 300ms ease;
}
.profile-comp-mini-value {
    text-align: right;
    color: var(--text-primary, var(--ink-primary));
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.profile-comp-mini-row.is-null .profile-comp-mini-fill {
    background: var(--ink-tertiary, #C0BFB7);
}
.profile-comp-mini-row.is-null .profile-comp-mini-value {
    color: var(--text-tertiary, var(--ink-tertiary));
}

/* ═══════════════════════════════════════════════════════════════
   함께한 흔적 — 레벨 / XP (4번)
   ═══════════════════════════════════════════════════════════════ */

/* 좌측 프로필 영역의 작은 게이지 */
.rel-level-mini {
    width: 100%;
    background: var(--bg-elev, var(--surface-elevated));
    border-radius: 10px;
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.rel-level-mini-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px;
}
.rel-level-mini-lv {
    font-weight: 700;
    color: var(--brand-primary, var(--accent));
    font-size: 14px;
}
.rel-level-mini-xp {
    color: var(--text-secondary, var(--ink-secondary));
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}

/* 흔적 카드 안에 자리한 더 큰 블록 */
.rel-level-block {
    margin: 10px 0;
    padding: 10px 12px;
    background: var(--bg-card, var(--surface-card));
    border: 1px solid var(--border, var(--line));
    border-radius: 10px;
    display: flex; flex-direction: column; gap: 6px;
}
.rel-level-block-head {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px;
}
.rel-level-block-lv {
    font-weight: 700;
    color: var(--brand-primary, var(--accent));
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.rel-level-block-total {
    color: var(--text-secondary, var(--ink-secondary));
    font-size: 11px;
}

.rel-level-bar {
    height: 6px;
    background: var(--bg-elev, var(--surface-elevated));
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid var(--border, var(--line));
}
.rel-level-bar-fill {
    display: block; height: 100%;
    background: var(--brand-primary, var(--accent));
    border-radius: 999px;
    transition: width 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Big5 — derived 상태일 때 클릭 버튼 대신 숫자만 톤 다운으로 노출 */
.bf-derived-value {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    min-width: 32px; justify-content: center;
    font-variant-numeric: tabular-nums;
    font-size: 13px; font-weight: 500;
    color: var(--text-primary, var(--ink-primary));
    background: var(--bg-elev, var(--surface-elevated));
    border-radius: 6px;
    margin-left: 4px;
}

/* 별명 마크 — "큰형 (별명)" 형식에서 (별명) 부분 톤 다운 */
.nick-mark {
    font-size: 0.78em;
    color: var(--text-secondary, var(--ink-secondary));
    margin-left: 3px;
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* 생일·기념일 행 (인물·조직 공용) */
.anniv-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.anniv-row {
    display: grid; grid-template-columns: 140px 1fr auto;
    gap: 6px; align-items: center;
}
.anniv-row input[type="date"], .anniv-row input[type="text"] {
    padding: 7px 10px;
    border: 1px solid var(--border, var(--line));
    border-radius: 8px;
    background: var(--bg);
    color: var(--text-primary, var(--ink-primary));
    font-size: 13px;
}
.anniv-row input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.anniv-remove {
    padding: 4px 8px;
    color: var(--text-secondary, var(--ink-secondary));
}
@media (max-width: 520px) {
    .anniv-row { grid-template-columns: 1fr 1fr auto; }
}

/* 조직 종류 선택 옆 가이드 한 줄 (23번) */
.org-type-guide {
    font-size: 11px; color: var(--text-secondary, var(--ink-secondary));
    margin: 6px 0 0; padding-left: 108px; /* org-row의 label width(100)+gap에 정렬 */
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: break-word;
}
@media (max-width: 640px) {
    .org-type-guide { padding-left: 0; }
}
.member-list {
    display: flex; gap: var(--sp-2); flex-wrap: wrap;
    min-height: 36px;
}
.member-empty {
    font-size: 12px; color: var(--text-secondary); font-style: italic;
}
.member-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px 4px 4px; border-radius: 999px;
    background: var(--bg-elev); border: 1px solid var(--border);
    font-size: 12px;
}
.member-avatar {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; color: #2C2C2E; font-size: 12px;
    flex-shrink: 0;
}
.member-name {
    color: var(--text-primary);
    max-width: 140px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.member-remove {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-secondary); font-size: 12px;
    padding: 0 4px; border-radius: 999px;
}
.member-remove:hover { color: var(--dot-red); background: var(--hover); }

/* ── 모달 푸터 ── */
.org-modal-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--border);
}
.org-modal-actions { display: flex; gap: var(--sp-2); }
.org-delete-btn { color: var(--dot-red); }
.org-delete-btn:hover { background: var(--hover); }

/* ── 모바일 ── */
@media (max-width: 820px) {
    .orgs-toolbar {
        grid-template-columns: 1fr;
    }
    .org-modal {
        width: 100%; max-width: 100%; max-height: 100vh; height: 100vh;
        border-radius: 0;
    }
    .org-modal-body {
        grid-template-columns: 1fr; padding: var(--sp-4); gap: var(--sp-4);
    }
    .org-detail-left {
        position: static; flex-direction: row; gap: var(--sp-3);
        flex-wrap: wrap; justify-content: center; align-items: center;
    }
    .org-type-display { flex: 1 1 120px; padding: var(--sp-3); }
    .org-type-display-icon { font-size: 36px; }
    .org-member-mini { flex: 1 1 200px; }
    .org-row {
        grid-template-columns: 1fr; gap: 4px;
    }
    .member-add-row {
        grid-template-columns: 1fr;
    }
}

/* ── 인물 모달의 "소속 조직" 섹션 (v3-①-C) ── */
.person-belongs-list {
    display: flex; gap: var(--sp-2); flex-wrap: wrap;
    margin-top: 6px;
}
.person-belongs-empty {
    font-size: 12px; color: var(--text-secondary); font-style: italic;
}
.person-belongs-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px;
    background: var(--bg-elev); border: 1px solid var(--border);
    font-size: 12px; color: var(--text-primary);
    cursor: pointer; transition: all var(--ease);
}
.person-belongs-chip:hover { border-color: var(--accent); }

/* ═══════════════════════════════════════════════════════════════
   v3-①-E — QuickEvalV3 (👥🏢 칩) + AIBriefingPanel 4섹션
   ═══════════════════════════════════════════════════════════════ */

/* 인물·조직 칩 영역 */
.qr-link-field {
    margin-top: var(--sp-3);
    display: flex; flex-direction: column; gap: var(--sp-1);
}
.qr-link-field > label {
    font-size: 12px; color: var(--text-secondary); font-weight: 600;
}
.qr-link-add-row {
    display: flex; gap: var(--sp-2); align-items: center;
}
.qr-link-add-row .qr-text-input { flex: 1; }

/* 자동완성 패널 — 입력값이 비어 있으면 .hidden, 있으면 input 아래에 떠 있는 카드.
   클릭/터치로 인물·조직 선택. native datalist 대체. */
.qr-ac-wrap { position: relative; }
.qr-ac-panel {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px);
    z-index: 30;
    background: var(--bg-card, var(--surface-card));
    border: 1px solid var(--border, var(--line));
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    padding: 4px;
    display: flex; flex-direction: column;
    max-height: 260px; overflow-y: auto;
}
.qr-ac-panel.hidden { display: none; }
.qr-ac-item {
    background: transparent; border: none; cursor: pointer;
    text-align: left; padding: 8px 10px; border-radius: 6px;
    color: var(--text-primary, var(--ink-primary));
    font-size: 13px; line-height: 1.3;
    display: flex; align-items: baseline; gap: 6px;
}
.qr-ac-item:hover, .qr-ac-item:focus-visible {
    background: var(--hover);
    outline: none;
}
/* (2026-05-13 P3) Enter 키 자동 선택 대상 — 첫 후보 시각 강조.
   "엔터 누르면 이게 선택돼요" 를 사용자가 미리 알 수 있게. */
.qr-ac-item.qr-ac-first {
    background: var(--hover);
    border-left: 2px solid var(--accent, var(--brand, #6f8fff));
    padding-left: 8px;
}
.qr-ac-item .qr-ac-sub {
    color: var(--text-secondary, var(--ink-secondary));
    font-size: 12px;
}
.qr-chip-row {
    display: flex; flex-wrap: wrap; gap: 6px;
    min-height: 4px;
}
.qr-link-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 4px 4px 10px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent);
    font-size: 12px; font-weight: 500;
    border: 1px solid var(--accent);
    max-width: 100%;
}
.qr-link-chip-icon { font-size: 13px; }
.qr-link-chip-name {
    max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qr-chip-remove {
    width: 18px; height: 18px; border-radius: 50%;
    background: transparent; border: none; color: inherit;
    cursor: pointer; padding: 0; font-size: 11px;
    display: inline-flex; align-items: center; justify-content: center;
}
.qr-chip-remove:hover { background: rgba(0,0,0,0.08); }
.qr-link-hint {
    font-size: 11px; color: var(--text-secondary);
}

/* 칩 안 만족도 5도트 — 시각적으로 도트 시스템과 통일.
   같은 점수를 다시 누르면 0(미평가)로 해제. */
.qr-chip-rating {
    display: inline-flex; gap: 3px; padding: 0 4px;
    border-left: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    margin: 0 2px;
}
.qr-chip-rating-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--accent) 55%, transparent);
    cursor: pointer; padding: 0;
    transition: transform var(--ease), background var(--ease), border-color var(--ease);
}
.qr-chip-rating-dot:hover {
    transform: scale(1.25);
    border-color: var(--accent);
}
.qr-chip-rating-dot.filled {
    background: var(--accent);
    border-color: var(--accent);
}

/* AI 브리핑 패널 */
.qr-briefing-field {
    margin-top: var(--sp-3);
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.qr-briefing-btn {
    align-self: flex-start;
    padding: 6px 14px; border-radius: 999px;
    background: var(--bg-elev); border: 1px dashed var(--accent);
    color: var(--accent); font-weight: 600;
}
.qr-briefing-btn:hover { background: var(--accent-soft); }
.qr-briefing-panel {
    padding: var(--sp-2); border-radius: 12px;
    background: var(--bg-elev); border: 1px solid var(--border);
}
.qr-briefing-loading {
    text-align: center; padding: var(--sp-3);
    color: var(--text-secondary); font-size: 13px;
}
.qr-briefing-fallback-tag {
    font-size: 11px; color: var(--dot-orange);
    margin-bottom: var(--sp-2);
}
.qr-briefing-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2);
}
@media (max-width: 720px) {
    .qr-briefing-grid { grid-template-columns: 1fr; }
}
.qr-briefing-card {
    padding: var(--sp-2); border-radius: 10px;
    background: var(--bg); border: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 4px;
}
.qr-briefing-card-head {
    display: flex; align-items: center; gap: 6px;
    font-weight: 600; color: var(--text-primary);
}
.qr-briefing-icon {
    width: 18px; height: 18px; stroke-width: 1.75;
    color: var(--brand-primary); flex-shrink: 0;
}
.qr-briefing-title { font-size: 13px; }
.qr-briefing-body {
    font-size: 12px; color: var(--text-secondary);
    line-height: 1.5; white-space: pre-wrap;
}

/* ═══════════════════════════════════════════════════════════════
   v3-①-F — Stance 30초 기도 게이트 (인물·조직 공용)
   ═══════════════════════════════════════════════════════════════ */
.stance-gate-overlay {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0,0,0,0.55);
    display: flex; align-items: center; justify-content: center;
    padding: var(--sp-3);
}
.stance-gate-modal {
    width: min(440px, 100%);
    background: var(--bg); border-radius: 16px;
    padding: var(--sp-3);
    display: flex; flex-direction: column; gap: var(--sp-2);
    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
.stance-gate-header {
    display: flex; align-items: center; gap: var(--sp-2);
}
.stance-gate-header h3 {
    margin: 0; font-size: 16px; color: var(--text-primary);
}
.stance-gate-body p {
    margin: 0 0 var(--sp-1) 0;
    font-size: 13px; color: var(--text-secondary); line-height: 1.6;
}
.stance-gate-target {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2); border-radius: 10px;
    background: var(--bg-elev); border: 1px solid var(--border);
}
.stance-gate-target-arrow {
    color: var(--text-secondary); font-size: 14px;
}
.stance-gate-reason {
    width: 100%; min-height: 80px;
    padding: var(--sp-2); border-radius: 10px;
    border: 1px solid var(--border); background: var(--bg);
    font-family: inherit; font-size: 13px; color: var(--text-primary);
    resize: vertical;
}
.stance-gate-prayer-row {
    display: flex; align-items: center; gap: var(--sp-2);
}
.stance-gate-prayer-bar {
    flex: 1; height: 8px; border-radius: 999px;
    background: var(--bg-elev); overflow: hidden;
}
.stance-gate-prayer-fill {
    height: 100%; background: var(--accent);
    transition: width 0.5s linear;
}
.stance-gate-prayer-label {
    font-size: 12px; color: var(--text-secondary); min-width: 60px; text-align: right;
}
.stance-gate-footer {
    display: flex; justify-content: space-between; gap: var(--sp-2);
    margin-top: var(--sp-1);
}
.stance-gate-confirm-btn:disabled {
    opacity: 0.4; cursor: not-allowed;
}
.stance-gate-quote {
    font-size: 12px; color: var(--text-secondary); font-style: italic;
    padding: var(--sp-1) var(--sp-2);
    border-left: 3px solid var(--accent);
    margin: 0;
}
.stance-pill-mini {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
}

/* stance 변경 칩 (인물·조직 공용) */
.person-stance-change-row,
.org-stance-change-row {
    display: flex; flex-direction: column; gap: 6px;
    margin-top: var(--sp-2);
    padding: var(--sp-2);
    border-radius: 10px;
    background: var(--bg-elev);
    border: 1px dashed var(--border);
}
.person-stance-change-label,
.org-stance-change-label {
    font-size: 11px; color: var(--text-secondary); font-weight: 600;
}
.person-stance-change-chips,
.org-stance-change-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.person-stance-change-chip,
.org-stance-change-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 999px;
    font-size: 12px; font-weight: 600;
    background: var(--bg); border: 1px solid;
    cursor: pointer; transition: all var(--ease);
}
.person-stance-change-chip:hover,
.org-stance-change-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}
.person-stance-change-hint,
.org-stance-change-hint {
    font-size: 11px; color: var(--text-secondary);
}
.person-stance-locked-hint,
.org-stance-locked-hint {
    font-size: 11px; color: var(--text-secondary);
    margin-top: 4px; font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════
   수동 잠금 버튼 — 우측 상단, 알람 종 왼쪽
   ═══════════════════════════════════════════════════════════════ */
.manual-lock-wrap {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0));
    /* (S-E6 2026-05-15) 종(38px @ right 18px) 왼쪽으로 14px gap → right 70px.
       이전 64px 은 시각적으로 너무 붙어 사용자가 "겹쳐있다" 느꼈음. */
    right: calc(70px + env(safe-area-inset-right, 0));
    z-index: 100;
}
.manual-lock-wrap.hidden { display: none; }
.manual-lock-btn {
    position: relative;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    background: var(--surface-card, var(--bg-card));
    color: var(--text-primary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s, box-shadow 0.15s;
}
.manual-lock-btn:hover {
    background: var(--hover, rgba(0,0,0,0.04));
}
.manual-lock-btn:active {
    transform: scale(0.96);
}
.manual-lock-btn i { width: 18px; height: 18px; }

/* ═══════════════════════════════════════════════════════════════
   Phase E-7 — 우측 상단 알람 종 + dropdown 패널
   ═══════════════════════════════════════════════════════════════ */
.reminder-bell-wrap {
    position: fixed;
    /* Phase E-9/M-2: 노치/펀치홀 영역 피하기 */
    top: calc(14px + env(safe-area-inset-top, 0));
    right: calc(18px + env(safe-area-inset-right, 0));
    z-index: 100;
}
.reminder-bell-wrap.hidden { display: none; }

.reminder-bell-btn {
    position: relative;
    width: 38px; height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border, rgba(0,0,0,0.08));
    background: var(--surface-card, var(--bg-card));
    color: var(--text-primary);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-sm);
    transition: background 0.15s, box-shadow 0.15s;
}
.reminder-bell-btn:hover {
    background: var(--hover, rgba(0,0,0,0.04));
}
.reminder-bell-btn i { width: 18px; height: 18px; }

.reminder-bell-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px;
    background: var(--dot-red, #d04a3f);
    color: #fff;
    font-size: 11px; font-weight: 600; line-height: 18px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.reminder-bell-badge.hidden { display: none; }

.reminder-panel {
    position: absolute;
    top: 48px; right: 0;
    width: 360px; max-width: calc(100vw - 32px);
    max-height: 70vh;
    background: var(--surface-card, var(--bg-card));
    border: 1px solid var(--border, rgba(0,0,0,0.1));
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
    display: flex; flex-direction: column;
}
.reminder-panel.hidden { display: none; }

.reminder-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.reminder-panel-head h3 { margin: 0; font-size: 14px; color: var(--text-primary); }
.reminder-close-btn {
    background: none; border: none; cursor: pointer;
    font-size: 20px; color: var(--text-secondary); padding: 0 4px;
    line-height: 1;
}

.reminder-manual-input {
    display: flex; gap: 6px; padding: 10px 14px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
}
.reminder-manual-input input {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 6px;
    background: var(--surface-canvas, var(--bg));
    color: var(--text-primary);
    font-size: 13px;
}
.reminder-manual-input button { padding: 6px 12px; font-size: 14px; }

.reminder-list {
    list-style: none; padding: 0; margin: 0;
    overflow-y: auto;
    flex: 1;
}
.reminder-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 13px;
}

.reminder-item {
    display: flex; gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.05));
}
.reminder-item:last-child { border-bottom: none; }
.reminder-item.reminder-read {
    opacity: 0.5;
}
.reminder-check { flex-shrink: 0; padding-top: 3px; }
.reminder-check input { cursor: pointer; }

.reminder-body { flex: 1; min-width: 0; }
.reminder-type {
    display: flex; align-items: center; gap: 4px;
    font-size: 11px; color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.reminder-type-icon { width: 12px; height: 12px; }
.reminder-title {
    font-size: 13px; color: var(--text-primary);
    font-weight: 500;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.reminder-text {
    font-size: 12px; color: var(--text-secondary);
    margin-top: 4px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.reminder-actions {
    display: flex; flex-direction: column; gap: 4px;
    flex-shrink: 0;
}
.reminder-go-btn, .reminder-delete-btn {
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary);
    width: 24px; height: 24px;
    border-radius: 4px;
    font-size: 14px;
    display: flex; align-items: center; justify-content: center;
}
.reminder-go-btn:hover, .reminder-delete-btn:hover {
    background: var(--hover, rgba(0,0,0,0.05));
    color: var(--text-primary);
}

/* 모바일 — 패널이 더 좁게 */
@media (max-width: 480px) {
    /* (S-E6 2026-05-15) 모바일도 14px 갭으로 일관성. */
    .reminder-bell-wrap { top: 10px; right: 12px; }
    .manual-lock-wrap { top: 10px; right: 64px; }
    .reminder-panel {
        width: calc(100vw - 24px);
        right: 0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   설정 카드 — 토글 스위치 · 인라인 입력
   ═══════════════════════════════════════════════════════════════ */

.settings-row {
    display: flex; align-items: center; gap: var(--sp-4);
    justify-content: space-between;
}
.settings-row-text { flex: 1; min-width: 0; }
.settings-row-text .section-title { margin-bottom: 4px; }
.settings-row-text .section-desc { margin: 0; }

.settings-inline {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.settings-number-input {
    width: 80px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg); color: var(--text-primary);
    font-size: 14px;
}
.settings-unit {
    font-size: 13px; color: var(--text-secondary);
}
.settings-status {
    font-size: 12px; color: var(--text-secondary); margin-left: 4px;
}
.lock-timer-inline {
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* iOS 스타일 토글 스위치 */
.switch {
    position: relative; display: inline-block;
    width: 44px; height: 26px; flex-shrink: 0;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
    position: absolute; inset: 0; cursor: pointer;
    background: var(--ink-tertiary, #9A9A9F);
    border-radius: 26px;
    transition: background 200ms ease;
}
.switch-slider::before {
    content: '';
    position: absolute; left: 3px; top: 3px;
    width: 20px; height: 20px; background: var(--color-surface, #fff);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 200ms ease;
}
.switch input:checked + .switch-slider {
    background: var(--brand-primary);
}
.switch input:checked + .switch-slider::before {
    transform: translateX(18px);
}
.switch input:focus-visible + .switch-slider {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   대시보드 — 통독 진도 카드 (전체 % + 파트별 막대)
   ═══════════════════════════════════════════════════════════════ */

.bible-progress-head {
    display: flex; align-items: baseline; gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.bible-progress-head .dash-value { margin: 0; }
.bible-progress-head .dash-desc { margin: 0; }

.bible-parts-list {
    display: grid; gap: 10px;
}
.bible-part-row { display: flex; flex-direction: column; gap: 4px; }
.bible-part-row-head {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 13px; gap: 8px;
}
.bible-part-name { color: var(--text-primary, var(--ink-primary)); font-weight: 500; }
.bible-part-stat {
    color: var(--text-secondary, var(--ink-secondary));
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}
.bible-part-bar {
    height: 6px; width: 100%;
    background: var(--surface-elevated, rgba(0,0,0,0.06));
    border-radius: 999px; overflow: hidden;
}
.bible-part-bar-fill {
    height: 100%; background: var(--brand-primary);
    border-radius: 999px;
    transition: width 300ms ease;
}

/* ── 단축키 도움말 모달 ─────────────────────────────────── */
.shortcut-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    padding: 24px;
    animation: shortcutHelpFade 120ms ease-out;
}
.shortcut-help-overlay.hidden { display: none; }

@keyframes shortcutHelpFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.shortcut-help-card {
    background: var(--surface, #fff);
    color: var(--ink-primary, #1a1a1a);
    border-radius: 16px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25);
    width: min(720px, 100%);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.shortcut-help-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
}
.shortcut-help-head h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.shortcut-help-close {
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-secondary, #6b6b6b);
    padding: 6px 10px;
    border-radius: 8px;
}
.shortcut-help-close:hover { background: var(--surface-elevated, rgba(0, 0, 0, 0.05)); }

.shortcut-help-search {
    padding: 12px 24px;
    border-bottom: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
}
.shortcut-help-search input {
    width: 100%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
    background: var(--surface-elevated, rgba(0, 0, 0, 0.03));
    font: inherit;
    color: inherit;
}
.shortcut-help-search input:focus {
    outline: none;
    border-color: var(--brand-primary, #5b8def);
    box-shadow: 0 0 0 3px rgba(91, 141, 239, 0.15);
}

.shortcut-help-body {
    overflow-y: auto;
    padding: 8px 24px 16px;
    flex: 1;
}

.shortcut-group { margin: 16px 0 8px; }
.shortcut-group-title {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-secondary, #6b6b6b);
}

.shortcut-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.shortcut-row {
    display: grid;
    grid-template-columns: minmax(140px, 200px) 1fr;
    gap: 16px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
}
.shortcut-row:hover { background: var(--surface-elevated, rgba(0, 0, 0, 0.03)); }

.shortcut-row-keys {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.shortcut-row-label {
    font-size: 14px;
    font-weight: 500;
}
.shortcut-row-desc {
    font-size: 12px;
    color: var(--ink-secondary, #6b6b6b);
    margin-top: 2px;
}

.kbd {
    display: inline-block;
    padding: 2px 7px;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ink-primary, #1a1a1a);
    background: var(--surface-elevated, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
    border-bottom-width: 2px;
    border-radius: 5px;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    white-space: nowrap;
}
.kbd-plus {
    margin: 0 2px;
    font-size: 10px;
    color: var(--ink-secondary, #6b6b6b);
}
.kbd-or {
    margin: 0 6px;
    font-size: 10px;
    color: var(--ink-secondary, #6b6b6b);
}

.shortcut-help-foot {
    padding: 12px 24px;
    border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06));
    display: flex;
    gap: 16px;
    font-size: 11px;
    color: var(--ink-secondary, #6b6b6b);
}
.shortcut-help-foot kbd {
    display: inline-block;
    padding: 1px 6px;
    font-family: ui-monospace, monospace;
    font-size: 10px;
    background: var(--surface-elevated, rgba(0, 0, 0, 0.05));
    border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
    border-radius: 4px;
}

.shortcut-empty {
    padding: 24px 0;
    text-align: center;
    color: var(--ink-secondary, #6b6b6b);
    font-size: 13px;
}

/* 다크 모드 */
[data-theme="dark"] .shortcut-help-card {
    background: var(--surface, #1f1f23);
    color: var(--ink-primary, #f0f0f0);
}
[data-theme="dark"] .kbd {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

/* 모바일 */
@media (max-width: 600px) {
    .shortcut-help-overlay { padding: 12px; }
    .shortcut-help-card { max-height: 90vh; }
    .shortcut-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* 설정 화면의 단축키 영역 */
.settings-shortcuts-help-btn {
    margin-top: 8px;
}

/* 설정 화면의 경제 임계값 카드 */
.econ-thr-presets {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 12px 0;
}
.econ-thr-preset-btn {
    flex: 1 1 auto;
    min-width: 120px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-primary);
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    text-align: center;
    line-height: 1.4;
}
.econ-thr-preset-btn:hover {
    background: var(--surface-elevated, rgba(0,0,0,0.03));
    border-color: var(--brand-primary);
}
.econ-thr-form {
    display: flex; flex-direction: column; gap: 8px;
    margin: 12px 0;
}
.econ-thr-row {
    display: grid;
    grid-template-columns: 1fr 140px auto;
    gap: 8px;
    align-items: center;
}
.econ-thr-row label {
    font-size: 13px;
    color: var(--ink-secondary);
}
.econ-thr-row label em {
    font-style: normal;
    font-weight: 600;
    color: var(--brand-primary);
}
.econ-thr-row input {
    padding: 8px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-primary);
    border-radius: 8px;
    font: inherit;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.econ-thr-huge span {
    color: var(--ink-secondary);
    font-size: 13px;
    grid-column: 2 / span 2;
}
@media (max-width: 600px) {
    .econ-thr-row { grid-template-columns: 1fr; gap: 4px; }
    .econ-thr-huge span { grid-column: 1; }
}

/* ═══════════════════════════════════════════════════
   경제 모듈 (Phase F)
   ─ bucket / 카드 / 통계 / 빠른 추가 모달
   ─ .sensitive 마스킹 활용 (기존 sensitiveMode.js 정책)
   ═══════════════════════════════════════════════════ */

/* 메인 뷰 — 마법사 */
.econ-wizard {
    max-width: 560px;
}
.econ-wizard-step {
    margin: 16px 0;
    padding: 12px;
    background: var(--surface-elevated, rgba(0,0,0,0.03));
    border-radius: 10px;
}
.econ-wizard-step h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
}
.econ-form-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.econ-wizard input,
.econ-wizard select,
.econ-form-card input,
.econ-form-card select,
.econ-form-card textarea {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    background: var(--surface, #fff);
    color: var(--ink-primary);
    font: inherit;
    flex: 1;
    min-width: 0;
}

/* 탭 바 */
.econ-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.08));
    margin: 0 0 16px;
    overflow-x: auto;
}
.econ-tab-btn {
    background: transparent;
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    font: inherit;
    color: var(--ink-secondary);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.econ-tab-btn.active {
    color: var(--ink-primary);
    border-bottom-color: var(--brand-primary);
    font-weight: 600;
}
.econ-tab-body {
    padding: 0 4px;
}

/* 툴바 */
.econ-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    align-items: center;
}
.econ-toolbar-spacer { flex: 1; }

/* bucket 색상 — bucket-{small|medium|large|huge} */
.econ-bucket-small  { background: rgba(107, 191, 123, 0.15); color: #4a8a55; }
.econ-bucket-medium { background: rgba(245, 200, 75, 0.18); color: #a07e10; }
.econ-bucket-large  { background: rgba(245, 158, 75, 0.18); color: #b76b1d; }
.econ-bucket-huge   { background: rgba(229, 101, 74, 0.18); color: #b73d20; }
[data-theme="dark"] .econ-bucket-small  { background: rgba(107, 191, 123, 0.25); color: #7fc890; }
[data-theme="dark"] .econ-bucket-medium { background: rgba(245, 200, 75, 0.25); color: #f0d97c; }
[data-theme="dark"] .econ-bucket-large  { background: rgba(245, 158, 75, 0.25); color: #f5b378; }
[data-theme="dark"] .econ-bucket-huge   { background: rgba(229, 101, 74, 0.30); color: #ea8c75; }

/* 거래 리스트 */
.econ-tx-list { display: flex; flex-direction: column; gap: 16px; }
.econ-tx-day { }
.econ-tx-day-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 4px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
    margin-bottom: 6px;
}
.econ-tx-day-date { font-weight: 600; font-size: 13px; }
.econ-tx-day-count { font-size: 11px; color: var(--ink-secondary); }

.econ-tx-card {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-elevated, rgba(0,0,0,0.03));
    margin-bottom: 6px;
    align-items: center;
}
.econ-tx-card.econ-tx-in {
    border-left: 3px solid var(--dot-green, #6BBF7B);
}
.econ-tx-card.econ-tx-out {
    border-left: 3px solid var(--ink-secondary, #6b6b6b);
}
.econ-tx-card.econ-tx-giving {
    background: linear-gradient(0deg, rgba(91,141,239,0.06), rgba(91,141,239,0.06)), var(--surface-elevated, rgba(0,0,0,0.03));
    border-left-color: var(--brand-primary);
}
.econ-tx-icon { font-size: 18px; }
.econ-tx-main { min-width: 0; }
.econ-tx-top {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}
.econ-tx-cat { font-size: 13px; font-weight: 600; }
.econ-tx-tag-giving {
    font-size: 10px;
    color: var(--brand-primary);
    background: rgba(91,141,239,0.12);
    padding: 1px 6px;
    border-radius: 999px;
}
.econ-tx-bucket {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
    font-weight: 500;
}
.econ-tx-desc { font-size: 12px; color: var(--ink-secondary); margin-top: 2px; }
.econ-tx-right { display: flex; align-items: center; gap: 6px; }
.econ-tx-exact {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    font-weight: 600;
}
.econ-tx-del-btn {
    padding: 2px 8px;
    font-size: 14px;
    line-height: 1;
}

/* 자산 / 부채 그리드 */
.econ-asset-grid, .econ-liab-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.econ-asset-group { }
.econ-asset-group-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06));
    margin-bottom: 8px;
}
.econ-asset-group-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.econ-asset-count { font-size: 11px; color: var(--ink-secondary); }
.econ-asset-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}
.econ-asset-card, .econ-liab-card {
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-elevated, rgba(0,0,0,0.03));
    cursor: pointer;
    transition: background 120ms ease;
}
.econ-asset-card:hover, .econ-liab-card:hover {
    background: var(--surface-hover, rgba(0,0,0,0.05));
}
.econ-asset-label, .econ-liab-type { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.econ-asset-bucket, .econ-liab-bucket {
    display: inline-block;
    font-size: 10px;
    padding: 2px 7px;
    border-radius: 999px;
}
.econ-asset-exact, .econ-liab-exact {
    font-size: 12px;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-secondary);
}
.econ-empty {
    padding: 24px 12px;
    color: var(--ink-secondary);
    font-size: 13px;
    text-align: center;
}
.econ-empty-small {
    padding: 8px;
    color: var(--ink-secondary);
    font-size: 12px;
    text-align: center;
}

/* 폼 모달 (자산·부채·분류·통장 공용) */
.econ-form-card {
    width: min(440px, 100%);
}
.econ-form-card .modal-body label {
    display: block;
    margin: 10px 0 4px;
    font-size: 12px;
    color: var(--ink-secondary);
}
.modal-head, .modal-foot {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
}
.modal-head { border-bottom: 1px solid var(--border-subtle, rgba(0,0,0,0.06)); }
.modal-foot { border-top: 1px solid var(--border-subtle, rgba(0,0,0,0.06)); }
.modal-body { padding: 12px 16px; max-height: 70vh; overflow-y: auto; }
.modal-card {
    background: var(--surface, #fff);
    border-radius: 14px;
    box-shadow: 0 24px 48px rgba(0,0,0,0.25);
    width: min(560px, 100%);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
[data-theme="dark"] .modal-card {
    background: var(--surface, #1f1f23);
    color: var(--ink-primary);
}
.modal-close {
    background: transparent; border: none;
    font-size: 22px; line-height: 1; cursor: pointer;
    color: var(--ink-secondary);
    margin-left: auto;
    padding: 4px 8px; border-radius: 6px;
}
.modal-close:hover { background: var(--surface-elevated, rgba(0,0,0,0.05)); }

/* 빠른 거래 입력 모달 */
.econ-quickadd-card { width: min(520px, 100%); }
.econ-qa-row { margin: 10px 0; }
.econ-qa-row > label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--ink-secondary);
    font-weight: 600;
}
.econ-qa-dir { display: flex; gap: 6px; }
.econ-qa-dir-btn {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-primary);
    border-radius: 10px;
    cursor: pointer;
    font: inherit;
}
.econ-qa-dir-btn.active {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
.econ-qa-buckets {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}
.econ-qa-bucket-btn {
    padding: 12px 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-primary);
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    font: inherit;
    line-height: 1.4;
}
.econ-qa-bucket-btn.active {
    border-color: var(--brand-primary);
    background: rgba(91,141,239,0.12);
}
.econ-qa-bucket-desc {
    font-size: 10px;
    color: var(--ink-secondary);
}
.econ-qa-hint {
    font-weight: 400;
    color: var(--ink-secondary);
    font-size: 11px;
}
.econ-qa-extype { display: flex; gap: 6px; }
.econ-qa-extype-btn {
    flex: 1;
    padding: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-primary);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
}
.econ-qa-extype-btn.active {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

/* (경제 트랙 1.a 2026-05-14) 수입 종류 3종 — 활성/비활성/매매 */
.econ-qa-income-types {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.econ-qa-income-type-btn {
    padding: 10px 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-primary);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.econ-qa-income-type-btn:hover { border-color: var(--brand-primary); }
.econ-qa-income-type-btn.active {
    background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
}

/* (경제 트랙 1.a) 매매 의사결정 흔적 — 두 textarea 세로 묶음 */
.econ-qa-trade-row textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-primary);
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
}
.econ-qa-trade-row textarea + textarea { margin-top: 6px; }

/* (경제 트랙 1.a) 이체 받는 곳 힌트 */
.econ-qa-recipient-hint {
    margin-top: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--bg-quiet, rgba(0,0,0,0.03));
    color: var(--ink-secondary);
    font-size: 12px;
    line-height: 1.4;
}

/* (경제 트랙 1.a 2026-05-14) 이벤트 도트 입력 모달 */
.event-dot-card { max-width: 480px; }
.evt-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.evt-row > label { font-size: 13px; color: var(--ink-secondary); font-weight: 500; }
.evt-row > input,
.evt-row > textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink-primary);
    font-family: inherit;
    font-size: 14px;
}
.evt-type-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.evt-type-btn {
    padding: 12px 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-primary);
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    transition: border-color .15s, background .15s;
}
.evt-type-btn:hover { border-color: var(--brand-primary); }
.evt-type-btn.active {
    background: var(--brand-primary); color: #fff; border-color: var(--brand-primary);
}
.evt-type-label { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.evt-type-desc { font-size: 11px; opacity: 0.8; line-height: 1.3; }
@media (max-width: 480px) {
    .evt-type-grid { grid-template-columns: 1fr; }
    .econ-qa-income-types { grid-template-columns: 1fr; }
}

.econ-qa-cats {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.econ-qa-cat-btn {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-primary);
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
}
.econ-qa-cat-btn.active {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}
.econ-qa-giving-note,
.econ-qa-huge-note {
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    margin-top: 8px;
}
.econ-qa-giving-note {
    background: rgba(91,141,239,0.10);
    color: var(--brand-primary);
}
.econ-qa-huge-note {
    background: rgba(229, 101, 74, 0.10);
    color: #b73d20;
}
[data-theme="dark"] .econ-qa-huge-note { color: #ea8c75; }

/* quickReview 안의 "💰 거래 한 건 적기" 줄 + 추가된 거래 리스트 */
.qr-link-section {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--border-subtle, rgba(0,0,0,0.08));
}
.qr-link-label {
    display: block;
    font-size: 12px;
    color: var(--ink-secondary);
    margin-bottom: 6px;
}
.qr-tx-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.qr-tx-item {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    gap: 6px;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--surface-elevated, rgba(0,0,0,0.03));
    font-size: 12px;
}
.qr-tx-item .qr-tx-bucket {
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 999px;
}
.qr-tx-item .qr-tx-cat { font-weight: 500; }
.qr-tx-item .qr-tx-desc {
    color: var(--ink-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qr-tx-item .qr-tx-exact {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.qr-tx-del-btn {
    padding: 0 6px;
    font-size: 14px;
    line-height: 1;
    color: var(--ink-secondary);
}
.qr-tx-del-btn:hover { color: var(--dot-red, #E5654A); }

/* "오늘" 화면 거래 행의 X 버튼 */
.today-tx-del-btn {
    padding: 0 6px;
    font-size: 14px;
    line-height: 1;
    color: var(--ink-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
}
.today-tx-del-btn:hover { color: var(--dot-red, #E5654A); }

/* "오늘" 뷰의 경제 빠른 카드 */
.today-tx-list { display: flex; flex-direction: column; gap: 4px; }
.today-tx-row {
    display: grid;
    grid-template-columns: auto auto 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--surface-elevated, rgba(0,0,0,0.03));
    font-size: 13px;
}
.today-tx-row.econ-tx-in    { border-left: 3px solid var(--dot-green, #6BBF7B); }
.today-tx-row.econ-tx-out   { border-left: 3px solid var(--ink-secondary, #6b6b6b); }
.today-tx-bucket {
    font-size: 10px; padding: 1px 6px; border-radius: 999px;
    background: var(--surface);
    color: var(--ink-secondary);
}
.today-tx-cat { font-weight: 500; }
.today-tx-desc {
    color: var(--ink-secondary);
    font-size: 12px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.today-tx-exact { font-variant-numeric: tabular-nums; font-weight: 600; }

/* 모바일 */
@media (max-width: 600px) {
    .econ-qa-buckets { grid-template-columns: 1fr 1fr; }
    .econ-asset-cards { grid-template-columns: 1fr; }
    .today-tx-row { grid-template-columns: auto 1fr auto auto; }
    .today-tx-cat { display: none; }
}

/* ════════════════════════════════════════════════════════════
   분별의 자리 (B-1 의사결정 시스템, 2026-05-13)
   모노톤 베이스 + brand 단일 톤 accent. 강한 색 충돌 금지.
   reference_design_tone_2026_05.md 원칙 적용.
   ════════════════════════════════════════════════════════════ */

body.dg-open { overflow: hidden; }

.dg-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(40, 40, 35, 0.4);
    display: flex;
    transition: opacity var(--ease);
}
.dg-overlay.hidden { display: none; }

/* 자유 모드 — 우측 슬라이드 패널 */
.dg-overlay.dg-mode-free { justify-content: flex-end; }
.dg-overlay.dg-mode-free .dg-panel {
    width: 480px;
    max-width: 100%;
    height: 100vh;
    border-radius: 0;
    border-left: 1px solid var(--line);
    animation: dg-slide-in var(--ease);
}
@keyframes dg-slide-in {
    from { transform: translateX(40px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

/* 목표 수정 모드 — 풀스크린 중앙 모달 (강제감) */
.dg-overlay.dg-mode-goal-edit { justify-content: center; align-items: center; padding: var(--sp-5); }
.dg-overlay.dg-mode-goal-edit .dg-panel {
    width: 620px;
    max-width: 100%;
    max-height: calc(100vh - var(--sp-6));
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
}

.dg-panel {
    background: var(--surface-card);
    color: var(--ink-primary);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.dg-head {
    position: relative;
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    border-bottom: 1px solid var(--line);
}
.dg-mode-chip {
    display: inline-block;
    font-size: var(--fs-caption);
    color: var(--accent);
    background: var(--accent-soft);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-pill);
    margin-bottom: var(--sp-2);
    letter-spacing: 0.02em;
}
.dg-head h2 {
    font-family: "Noto Serif KR", "Pretendard Variable", serif;
    font-size: var(--fs-display);
    font-weight: 400;
    line-height: var(--lh-heading);
    margin: 0 0 var(--sp-2);
}
.dg-sub {
    font-size: var(--fs-small);
    color: var(--ink-secondary);
    margin: 0;
    line-height: var(--lh-body);
}
.dg-close-btn {
    position: absolute; top: var(--sp-3); right: var(--sp-3);
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: var(--ink-secondary);
    font-size: 22px; line-height: 1; cursor: pointer;
    border-radius: var(--radius-sm);
}
.dg-close-btn:hover { background: var(--hover); color: var(--ink-primary); }

.dg-section {
    padding: var(--sp-4) var(--sp-5);
    border-bottom: 1px solid var(--line);
}
.dg-section:last-of-type { border-bottom: none; }

.dg-section-title {
    font-size: var(--fs-body);
    font-weight: 600;
    margin: 0 0 var(--sp-2);
    color: var(--ink-primary);
}
.dg-section-desc {
    font-size: var(--fs-small);
    color: var(--ink-secondary);
    margin: 0 0 var(--sp-3);
}
.dg-field-label {
    display: block;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--ink-secondary);
    margin-bottom: var(--sp-2);
}
.dg-textarea {
    width: 100%;
    padding: var(--sp-3);
    font-family: var(--font);
    font-size: var(--fs-body);
    color: var(--ink-primary);
    background: var(--surface-canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    resize: vertical;
    line-height: var(--lh-body);
}
.dg-textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface-card);
}

/* 원칙 카드 — soft chip 톤 */
.dg-principles-list {
    display: flex; flex-direction: column; gap: var(--sp-2);
}
.dg-principle-card {
    text-align: left;
    padding: var(--sp-3);
    background: var(--surface-canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--ease), border-color var(--ease);
    font-family: inherit;
}
.dg-principle-card:hover {
    border-color: var(--accent);
    background: var(--surface-card);
}
.dg-principle-card.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
    padding-left: calc(var(--sp-3) - 2px);
}
.dg-principle-head {
    display: flex; align-items: center; gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}
.dg-principle-title {
    font-size: var(--fs-body);
    font-weight: 500;
    flex: 1;
    color: var(--ink-primary);
}
.dg-strength-chip {
    font-size: var(--fs-caption);
    padding: 2px var(--sp-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    color: var(--ink-secondary);
    background: var(--surface-card);
    white-space: nowrap;
}
.dg-strength-chip.dg-strength-core {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.dg-strength-chip.dg-strength-primary {
    color: var(--ink-secondary);
    border-color: var(--line);
}
.dg-strength-chip.dg-strength-reference {
    color: var(--ink-tertiary);
    border-style: dashed;
}
.dg-principle-meta {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-small);
    color: var(--ink-secondary);
}
.dg-cat-chip {
    font-size: var(--fs-caption);
    color: var(--ink-tertiary);
    padding: 1px var(--sp-2);
    background: var(--surface-elevated);
    border-radius: var(--radius-sm);
}
.dg-principle-body { color: var(--ink-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* 판례 카드 */
.dg-precedents-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.dg-precedent-card {
    text-align: left;
    padding: var(--sp-3);
    background: var(--surface-canvas);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
}
.dg-precedent-card:hover { border-color: var(--accent); }
.dg-precedent-card.attached {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.dg-precedent-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--sp-1);
}
.dg-precedent-date { font-size: var(--fs-caption); color: var(--ink-tertiary); }
.dg-attached-mark { font-size: var(--fs-caption); color: var(--accent); }
.dg-precedent-situation {
    font-size: var(--fs-small); color: var(--ink-secondary);
    margin-bottom: var(--sp-1); line-height: var(--lh-body);
}
.dg-precedent-decision {
    font-size: var(--fs-small); color: var(--ink-primary);
    line-height: var(--lh-body);
}

.dg-empty, .dg-empty-soft {
    text-align: center;
    padding: var(--sp-4);
    color: var(--ink-secondary);
    font-size: var(--fs-small);
    background: var(--surface-canvas);
    border: 1px dashed var(--line);
    border-radius: var(--radius);
    margin: 0;
}
.dg-empty-soft { background: transparent; border: none; padding: var(--sp-3) 0; }
.dg-empty a { color: var(--accent); text-decoration: underline; }

/* 기도/묵상 훅 */
.dg-prayer-row { background: var(--surface-canvas); }
.dg-checkbox-label {
    display: flex; align-items: center; gap: var(--sp-2);
    font-size: var(--fs-small); color: var(--ink-primary);
    cursor: pointer;
}
.dg-prayer-hint {
    margin: var(--sp-2) 0 0;
    font-size: var(--fs-caption);
    color: var(--ink-tertiary);
    line-height: var(--lh-body);
}

/* 푸터 */
.dg-foot {
    position: sticky; bottom: 0;
    display: flex; justify-content: flex-end; gap: var(--sp-2);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-card);
    border-top: 1px solid var(--line);
}
.dg-text-btn {
    padding: var(--sp-2) var(--sp-3);
    background: transparent;
    color: var(--ink-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit; font-size: var(--fs-small);
}
.dg-text-btn:hover { color: var(--ink-primary); }
.dg-primary-btn {
    padding: var(--sp-2) var(--sp-4);
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit; font-size: var(--fs-small); font-weight: 500;
}
.dg-primary-btn:hover { background: var(--accent); color: white; }
.dg-primary-btn:disabled { opacity: 0.5; cursor: wait; }

/* ═══ (B-2 트랙 2026-05-13) 소크라테스 흐름 섹션 ═══
   분별의 자리 안에서 AI가 답을 주지 않고 질문만 던지는 영역.
   톤: 모노톤 + brand accent 단일, 외치는 색 X, 차분.
*/
.dg-socratic-section {
    background: var(--surface-canvas);
    margin: 0 calc(var(--sp-5) * -1);
    padding: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.dg-socratic-intro {
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    background: var(--accent-soft);
    border-left: 2px solid var(--accent);
    border-radius: var(--radius-sm);
    font-size: var(--fs-caption);
    color: var(--ink-secondary);
    line-height: 1.5;
}
.dg-socratic-intro.hidden { display: none; }
.dg-socratic-intro button {
    background: transparent; border: none; cursor: pointer;
    color: var(--ink-tertiary); font-size: 16px; line-height: 1;
    padding: 0 var(--sp-1); flex-shrink: 0;
}
.dg-socratic-intro button:hover { color: var(--ink-primary); }

.dg-socratic-history {
    display: flex; flex-direction: column; gap: var(--sp-3);
    margin-bottom: var(--sp-3);
}
.dg-socratic-history:empty { display: none; }

.dg-socratic-turn {
    padding: var(--sp-3) var(--sp-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface-card);
    line-height: 1.6;
}
.dg-socratic-turn-ai {
    border-left: 3px solid var(--accent);
}
.dg-socratic-turn-user {
    background: transparent;
    border-left: 3px solid var(--ink-tertiary);
}
.dg-socratic-turn-label {
    display: block;
    font-size: var(--fs-caption);
    color: var(--ink-tertiary);
    margin-bottom: var(--sp-1);
    letter-spacing: 0.02em;
}
.dg-socratic-turn-ai .dg-socratic-turn-label { color: var(--accent); }
.dg-socratic-turn-text {
    font-size: var(--fs-body);
    color: var(--ink-primary);
    font-family: 'Noto Serif KR', serif;
    font-weight: 400;
}
.dg-socratic-turn-user .dg-socratic-turn-text {
    font-family: inherit;
    color: var(--ink-secondary);
}

.dg-socratic-loading {
    /* (디자인 시스템 v1 Phase C 2026-05-16) 단계 라벨 회전 + 가짜 progress bar */
    position: relative;
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    color: var(--color-ink-secondary, var(--ink-tertiary));
    font-size: var(--fs-caption);
    border-radius: var(--radius-sm);
    overflow: hidden;
    min-height: 28px;
}
.dg-socratic-loading.hidden { display: none; }
.dg-socratic-loading-text {
    transition: opacity var(--motion-fast, 150ms) var(--ease-out);
}
.dg-socratic-progress {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--accent-soft);
    overflow: hidden;
    pointer-events: none;
}
.dg-socratic-progress::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(0);
    animation: thinking-progress 8000ms cubic-bezier(0.16, 0.8, 0.4, 1) forwards;
}
.dg-socratic-loading.is-done .dg-socratic-progress::after {
    animation: none;
    transform: scaleX(1);
    transition: transform var(--motion-fast, 150ms) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
    .dg-socratic-progress::after { animation: none; transform: scaleX(0.6); }
}
.dg-socratic-dots { display: inline-flex; gap: 4px; }
.dg-socratic-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.4;
    animation: dgSocraticPulse 1.4s ease-in-out infinite;
}
.dg-socratic-dots span:nth-child(2) { animation-delay: 0.2s; }
.dg-socratic-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dgSocraticPulse {
    0%, 80%, 100% { opacity: 0.2; }
    40% { opacity: 1; }
}

.dg-socratic-input-wrap { margin-bottom: var(--sp-3); }
.dg-socratic-input-wrap.hidden { display: none; }
.dg-socratic-answer {
    background: var(--surface-card);
}

.dg-socratic-controls {
    display: flex; flex-wrap: wrap; gap: var(--sp-2);
    align-items: center;
}

.dg-soft-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-card);
    color: var(--ink-primary);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
    font-size: var(--fs-small);
    font-weight: 500;
    transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.dg-soft-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.dg-soft-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.dg-soft-btn.hidden { display: none; }
.dg-soft-btn-icon { font-size: 14px; }

.dg-soft-btn-quiet {
    color: var(--ink-secondary);
    background: transparent;
    border-color: var(--line);
}
.dg-soft-btn-quiet:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* 모바일에서 socratic-section 풀폭 — dg-mode-free 우측 패널 안 */
@media (max-width: 640px) {
    .dg-socratic-section {
        margin: 0 calc(var(--sp-4) * -1);
        padding: var(--sp-3) var(--sp-4);
    }
    .dg-socratic-controls { gap: var(--sp-1); }
    .dg-soft-btn { font-size: var(--fs-caption); padding: var(--sp-1) var(--sp-2); }
}

/* ── 헤더 바로가기 아이콘 (분별의 펜) ── */
.dg-shortcut-wrap {
    /* (S-E6 2026-05-15) 자물쇠(38px @ right 70px) 왼쪽으로 14px gap → right 122px.
       이전 56px 은 자물쇠 자리(64px)와 30px 침범해 시각적으로 겹쳐있었음.
       top 도 자물쇠·종과 같게 14px (--sp-3 = 12px) 맞춤. */
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0));
    right: calc(122px + env(safe-area-inset-right, 0));
    z-index: 90;
}
.dg-shortcut-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink-secondary);
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease);
}
.dg-shortcut-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.dg-shortcut-btn i { width: 18px; height: 18px; }

/* ── view-today 안 카드 (분별의 자리 카드) ── */
.dg-today-card {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-3) 0;
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--ease), background var(--ease);
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.dg-today-card:hover {
    border-left: 3px solid var(--accent);
    padding-left: calc(var(--sp-4) - 2px);
    background: var(--surface-canvas);
}
.dg-today-card-icon {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.dg-today-card-icon i { width: 18px; height: 18px; }
.dg-today-card-body { flex: 1; }
.dg-today-card-title {
    font-size: var(--fs-body);
    font-weight: 500;
    color: var(--ink-primary);
    margin: 0 0 2px;
}
.dg-today-card-sub {
    font-size: var(--fs-small);
    color: var(--ink-secondary);
    margin: 0;
}
.dg-today-card-arrow {
    color: var(--ink-tertiary);
    font-size: 18px;
}

/* ── 목표 카드 안 "분별의 자리" 명시 진입 버튼 ── */
.goal-discernment-btn {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 4px var(--sp-2);
    font-size: var(--fs-caption);
    background: transparent;
    color: var(--ink-secondary);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
}
.goal-discernment-btn:hover { color: var(--accent); border-color: var(--accent); }
.goal-discernment-btn i { width: 14px; height: 14px; }

/* 모바일 — 슬라이드 패널을 풀폭으로, 모달도 거의 풀폭으로 */
@media (max-width: 600px) {
    .dg-overlay.dg-mode-free .dg-panel { width: 100%; }
    .dg-overlay.dg-mode-goal-edit { padding: var(--sp-3); }
    .dg-shortcut-wrap { right: 116px; top: 10px; }
    .dg-shortcut-btn { width: 32px; height: 32px; }
}

/* ═══════════════════════════════════════
   워크플로우 트랙 STEP 2 — 등산로 카드 (2026-05-13)
   디자인 디테일은 디자인 시스템 점검 세션에서 일괄 정리 예정. 여기선 기본만.
   ═══════════════════════════════════════ */

.section-desc-foot {
    font-size: 12px; color: var(--ink-secondary, var(--text-secondary));
    margin-top: var(--sp-3); padding-top: var(--sp-2);
    border-top: 1px dashed var(--border);
}

.workflows-list {
    display: flex; flex-direction: column; gap: var(--sp-3);
}

.wf-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3);
}

.wf-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--sp-2); margin-bottom: var(--sp-2);
}
.wf-card-title-row { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.wf-card-goal {
    font-size: 11px; color: var(--ink-secondary, var(--text-secondary));
    text-transform: uppercase; letter-spacing: 0.04em;
}
.wf-card-title {
    font-size: 15px; font-weight: 600; margin: 0;
    color: var(--ink-primary, var(--text-primary));
}
.wf-progress-chip {
    flex-shrink: 0;
    font-size: 11px; font-weight: 600;
    background: var(--brand-soft, rgba(91, 141, 239, 0.1));
    color: var(--brand-primary, var(--accent-primary));
    padding: 2px 8px; border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.wf-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.wf-step {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-2);
    border-radius: var(--radius);
    font-size: 13px;
    transition: background var(--ease);
}
.wf-step:hover { background: var(--hover); }
.wf-step-status {
    width: 16px; height: 16px; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 13px; color: var(--ink-secondary, var(--text-secondary));
    flex-shrink: 0;
}
.wf-step-order {
    font-variant-numeric: tabular-nums;
    color: var(--ink-secondary, var(--text-secondary));
    font-size: 12px;
    min-width: 18px;
}
.wf-step-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-step-executor {
    font-size: 10px; color: var(--ink-secondary, var(--text-secondary));
    background: var(--bg-quiet, rgba(0,0,0,0.03));
    padding: 1px 6px; border-radius: 999px;
}
.wf-step-dot-count {
    font-size: 11px; color: var(--ink-secondary, var(--text-secondary));
    font-variant-numeric: tabular-nums;
}

/* 완료 스텝 — 옅게 + 가로줄 */
.wf-step-done .wf-step-title { color: var(--ink-secondary, var(--text-secondary)); text-decoration: line-through; }
.wf-step-done .wf-step-status { color: var(--dot-green, #5fa572); }

/* 진행 중 — 미세 accent 보더 */
.wf-step-in-progress { background: var(--brand-soft, rgba(91, 141, 239, 0.06)); }
.wf-step-in-progress .wf-step-status { color: var(--brand-primary, var(--accent-primary)); }

/* 폐기 스텝 — 옅게 + 취소선 (강한 X 표시 X) */
.wf-step-abandoned .wf-step-title { color: var(--ink-tertiary, var(--text-tertiary)); text-decoration: line-through; opacity: 0.6; }

/* 데스크탑 드래그 핸들 — 결단 카드 패턴 그대로 */
.wf-step-handle {
    cursor: grab; user-select: none;
    color: var(--ink-tertiary, var(--text-tertiary));
    font-size: 14px; line-height: 1;
    padding: 0 var(--sp-1);
    flex-shrink: 0;
}
.wf-step-handle:hover { color: var(--brand-primary, var(--accent-primary)); }
.wf-step-handle.dragging { cursor: grabbing; opacity: 0.5; }

/* 모바일 [+ 넣기] 버튼 */
.wf-step-mobile-add {
    flex-shrink: 0;
    font-size: 11px;
    background: var(--bg-quiet, rgba(0,0,0,0.03));
    color: var(--brand-primary, var(--accent-primary));
    border: 1px solid var(--border);
    padding: 4px 8px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--ease);
}
.wf-step-mobile-add:hover { background: var(--hover); }

/* 빈 상태 */
.wf-empty-card {
    text-align: center;
    padding: var(--sp-4);
    background: var(--bg-quiet, rgba(0,0,0,0.02));
    border-radius: var(--radius);
}
.wf-empty-card .primary-btn { margin-top: var(--sp-3); }

/* (B-5 트랙 Phase 1 2026-05-14) 회복의 자리 모달 — 톤 분기 (cute / calm) */
.recovery-gate-card { max-width: 520px; width: 100%; }
.recovery-intro {
    margin: 0 0 16px;
    font-size: 13px; line-height: 1.6;
    color: var(--ink-secondary);
}
.recovery-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.recovery-row > label {
    font-size: 12px; color: var(--ink-secondary); font-weight: 500;
}
.recovery-row > textarea {
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--surface); color: var(--ink-primary);
    font-family: inherit; font-size: 14px;
    line-height: 1.5; resize: vertical;
}

/* (B-5 Phase 1.c 2026-05-15) 연관 도트 리스트 — 알람에서 들어왔을 때 어떤 어김이 보였는지 */
.recovery-linked-dots {
    background: var(--bg-quiet, rgba(0,0,0,0.03));
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 2px solid var(--ink-tertiary);
}
.recovery-dots-list {
    list-style: none; padding: 0;
    margin: 6px 0 10px;
    display: flex; flex-direction: column; gap: 4px;
}
.recovery-dots-list li {
    font-size: 12px;
    color: var(--ink-secondary);
    display: flex; gap: 8px; align-items: baseline;
}
.recovery-dot-date {
    color: var(--ink-primary);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.recovery-dot-slot {
    color: var(--ink-tertiary);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.recovery-dot-state {
    margin-left: auto;
    font-size: 11px;
    color: var(--ink-tertiary);
    font-style: italic;
}
.recovery-dots-note {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--ink-tertiary);
    line-height: 1.5;
}
.recovery-cute .recovery-linked-dots {
    background: rgba(255, 245, 220, 0.4);
    border-left-color: var(--brand-primary);
    border-radius: 12px;
}
.recovery-calm .recovery-linked-dots {
    font-family: 'Noto Serif KR', serif;
}

/* cute 톤 — 부드러운 둥근 모서리 + 따뜻한 배경 + 큰 행간 */
.recovery-cute .modal-head h3 {
    font-family: var(--font-display, inherit);
    color: var(--ink-primary);
}
.recovery-cute .recovery-intro {
    background: var(--bg-quiet, rgba(255, 235, 200, 0.3));
    padding: 12px 14px;
    border-radius: 12px;
    border-left: 3px solid var(--brand-primary);
}
.recovery-cute textarea {
    border-radius: 12px;
    background: rgba(255, 250, 240, 0.5);
}
/* calm 톤 — 모노톤 + Noto Serif 본문 + 절제된 보더 */
.recovery-calm .modal-head h3 {
    font-family: 'Noto Serif KR', serif;
    color: var(--ink-primary);
    font-weight: 500;
}
.recovery-calm .recovery-intro {
    font-family: 'Noto Serif KR', serif;
    color: var(--ink-primary);
    line-height: 1.7;
}
.recovery-calm textarea {
    font-family: 'Noto Serif KR', serif;
    line-height: 1.7;
}

/* (워크플로우 STEP 3 2026-05-14) 섹션 상단 [+ 새 등산로] 버튼 */
.wf-header-actions {
    display: flex; justify-content: flex-end; margin-bottom: var(--sp-2);
}
.wf-new-btn {
    padding: 6px 12px;
    border: 1px dashed var(--border);
    background: var(--surface);
    color: var(--ink-primary);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.wf-new-btn:hover { border-color: var(--brand-primary); border-style: solid; color: var(--brand-primary); }

/* (워크플로우 STEP 3) 카드 헤더 우측 — 진척 칩 + 편집 버튼 */
.wf-card-head-right { display: flex; align-items: center; gap: 6px; }
.wf-card-edit-btn {
    padding: 4px 6px;
    border: none; background: transparent;
    color: var(--ink-tertiary); cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.wf-card-edit-btn:hover { background: var(--bg-quiet); color: var(--ink-primary); }

/* (워크플로우 STEP 3) 목표 카드 옆 [🛤️ 등산로 만들기] 버튼 */
.goal-add-workflow-btn {
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-secondary);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.goal-add-workflow-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }

/* (워크플로우 가벼운 손질 2026-05-15) [+ 지금] 버튼 — 데스크탑·모바일 통일 */
.wf-step-add-now {
    padding: 4px 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-secondary);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    margin-left: auto;
    transition: border-color .15s, color .15s, background .15s;
}
.wf-step-add-now:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    background: var(--bg-quiet, rgba(0,0,0,0.02));
}

/* (워크플로우 가벼운 손질 2026-05-15) 진척 바 — 스텝별 도트 N/M 시각 */
.wf-step-progress {
    display: inline-flex; align-items: center; gap: 6px;
    margin-left: 8px;
}
.wf-step-progress-text {
    font-size: 11px; color: var(--ink-tertiary);
    min-width: 28px;
}
.wf-step-progress-bar {
    width: 50px; height: 4px;
    background: var(--bg-quiet, rgba(0,0,0,0.06));
    border-radius: 2px; overflow: hidden;
}
.wf-step-progress-fill {
    height: 100%;
    background: var(--brand-primary);
    border-radius: 2px;
    transition: width .3s;
}

/* (워크플로우 가벼운 손질 2026-05-15) 첫 워크플로우 만들기 안내 모달 */
.wfe-guide-card { max-width: 480px; }
.wfe-guide-intro {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-primary);
}
.wfe-guide-steps {
    margin: 0 0 16px;
    padding-left: 22px;
    line-height: 1.8;
    color: var(--ink-primary);
    font-size: 13px;
}
.wfe-guide-steps li { margin-bottom: 6px; }
.wfe-guide-steps li b { color: var(--brand-primary); }
.wfe-guide-note {
    margin: 16px 0 0;
    padding: 10px 12px;
    background: var(--bg-quiet, rgba(0,0,0,0.03));
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-secondary);
}

/* (워크플로우 STEP 3) workflowEdit 모달 */
.wfe-card { max-width: 600px; width: 100%; }
.wfe-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.wfe-row > label { font-size: 13px; color: var(--ink-secondary); font-weight: 500; }
.wfe-hint { font-weight: 400; opacity: 0.7; font-size: 11px; }
.wfe-row > select,
.wfe-row > input[type="text"] {
    width: 100%; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--ink-primary);
    font-family: inherit; font-size: 14px;
}
.wfe-steps-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.wfe-step-row {
    display: flex; gap: 8px;
    padding: 10px; border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-quiet, rgba(0,0,0,0.02));
}
.wfe-step-order { font-weight: 600; color: var(--ink-tertiary); margin-top: 6px; min-width: 20px; }
.wfe-step-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.wfe-step-title {
    width: 100%; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); font-size: 13px;
}
.wfe-exec-row { display: flex; gap: 4px; align-items: center; }
.wfe-exec-btn {
    padding: 4px 10px;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--ink-primary); border-radius: 6px;
    font-size: 12px; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.wfe-exec-btn:hover { border-color: var(--brand-primary); }
.wfe-exec-btn.active { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.wfe-est-dots {
    width: 60px; padding: 4px 8px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); font-size: 12px;
    margin-left: auto;
}
.wfe-step-del {
    padding: 2px 6px; border: none; background: transparent;
    color: var(--ink-tertiary); cursor: pointer; font-size: 14px;
}
.wfe-step-del:hover { color: var(--dot-red, #d33); }
.wfe-helper-row { position: relative; margin-top: 4px; }
.wfe-helper-input {
    width: 100%; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); font-size: 12px;
}
.wfe-helper-ac { position: absolute; top: 100%; left: 0; right: 0; z-index: 1; }
.wfe-add-step-btn {
    width: 100%; padding: 10px;
    border: 1px dashed var(--border);
    background: transparent; color: var(--ink-tertiary);
    border-radius: 6px; cursor: pointer;
    font-size: 13px; margin-top: 8px;
    transition: border-color .15s, color .15s;
}
.wfe-add-step-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); border-style: solid; }
@media (max-width: 480px) {
    .wfe-exec-row { flex-wrap: wrap; }
    .wfe-est-dots { margin-left: 0; }
}
.wf-empty-title { font-size: 14px; font-weight: 600; margin: 0 0 var(--sp-2); }
.wf-empty-body {
    font-size: 12px; color: var(--ink-secondary, var(--text-secondary));
    line-height: 1.6; margin: 0;
}
.wf-empty-step { color: var(--ink-tertiary, var(--text-tertiary)); font-size: 12px; padding: var(--sp-2); }

/* 데스크탑/모바일 분기 — 결단 카드와 동일 breakpoint */
.desktop-only { display: inline-block; }
.mobile-only { display: none; }
@media (max-width: 768px) {
    .desktop-only { display: none; }
    .mobile-only { display: inline-block; }
}

/* 시간표 슬롯에서 워크플로우-발 도트 시각 구별 — 좌측 얇은 accent 보더 */
.utl-slot.from-workflow {
    border-left: 3px solid var(--brand-primary, var(--accent-primary));
}
.utl-slot.from-workflow .slot-title::before {
    content: '🪜 ';
    font-size: 10px;
    opacity: 0.7;
}

/* ═══════════════════════════════════════
   대시보드 재기획 (2026-05-13) — "관제탑"
   디자인 디테일은 디자인 시스템 점검 세션에서 일괄 정리 예정.
   ═══════════════════════════════════════ */

.dash-card-quicknav {
    display: inline-flex; align-items: center; gap: 2px;
    background: none; border: none; cursor: pointer;
    font-size: 12px; color: var(--ink-secondary, var(--text-secondary));
    padding: 4px 8px; border-radius: 999px;
    transition: all var(--ease);
}
.dash-card-quicknav:hover {
    color: var(--brand-primary, var(--accent-primary));
    background: var(--hover);
}
.dash-card-quicknav-icon { width: 14px; height: 14px; stroke-width: 1.75; }
@media (max-width: 600px) {
    .dash-card-quicknav-text { display: none; }
    .dash-card-quicknav {
        min-width: 44px; min-height: 44px; justify-content: center;
    }
    .dash-card-quicknav-icon { width: 18px; height: 18px; }
}

.dash-section-sub {
    font-size: 12px; color: var(--ink-secondary, var(--text-secondary));
    margin-left: auto;
}

/* S4 활성 등산로 진척 */
.dash-wf-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.dash-wf-row {
    display: grid;
    grid-template-columns: 120px auto 1fr;
    gap: var(--sp-2);
    align-items: center;
    padding: var(--sp-2) var(--sp-3);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.dash-wf-bar {
    width: 100%; height: 8px;
    background: var(--bg-quiet, rgba(0,0,0,0.05));
    border-radius: 999px; overflow: hidden;
}
.dash-wf-bar-fill {
    height: 100%; background: var(--brand-primary, var(--accent-primary));
    transition: width 280ms var(--ease);
}
.dash-wf-progress {
    font-size: 12px; font-weight: 600;
    color: var(--ink-secondary, var(--text-secondary));
    font-variant-numeric: tabular-nums;
}
.dash-wf-title {
    font-size: 13px;
    color: var(--ink-primary, var(--text-primary));
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 600px) {
    .dash-wf-row { grid-template-columns: 80px auto 1fr; }
}

/* S5 다음 회고 안내 */
.dash-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-next-row {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-3); border-radius: var(--radius);
    cursor: pointer;
    transition: background var(--ease);
}
.dash-next-row:hover { background: var(--hover); }
.dash-next-row-soon {
    border-left: 3px solid var(--brand-primary, var(--accent-primary));
    background: var(--brand-soft, rgba(91, 141, 239, 0.04));
}
.dash-next-icon {
    width: 16px; height: 16px;
    color: var(--ink-secondary, var(--text-secondary));
    flex-shrink: 0;
}
.dash-next-layer {
    font-size: 13px; font-weight: 500;
    color: var(--ink-primary, var(--text-primary));
    min-width: 80px;
}
.dash-next-date {
    font-size: 12px;
    color: var(--ink-secondary, var(--text-secondary));
    font-variant-numeric: tabular-nums;
}
.dash-next-meta {
    margin-left: auto;
    font-size: 11px;
    color: var(--brand-primary, var(--accent-primary));
}

/* S6 묵상의 결 */
.dash-medit-row {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-2) 0;
}
.dash-medit-line {
    font-size: 14px;
    color: var(--ink-primary, var(--text-primary));
}
.dash-medit-dots {
    display: inline-flex; gap: 6px;
    margin-left: auto;
}
.dash-medit-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: transparent;
    border: 1px solid var(--border);
    transition: all var(--ease);
}
.dash-medit-dot.filled {
    background: var(--brand-primary, var(--accent-primary));
    border-color: var(--brand-primary, var(--accent-primary));
}
.dash-medit-quiet {
    font-size: 12px;
    color: var(--ink-secondary, var(--text-secondary));
    margin: var(--sp-2) 0 0;
}


/* ═══════════════════════════════════════════════════════════════
   (2026-05-13 #23) 묵상·기도 노트 마크다운 에디터 — 갈래 C 1차
   인라인 + 헤딩 + hr + 우클릭 컨텍스트 메뉴
   ═══════════════════════════════════════════════════════════════ */

/* 노트 본문 안 포맷 — meditation-note / prayer-note 의 contenteditable 결과물 */
.note-editor h1,
.note-editor h2,
.note-editor h3 {
    font-family: var(--font-serif, 'Noto Serif KR', serif);
    font-weight: 600;
    color: var(--ink-primary, var(--text-primary, #1a1814));
    margin: var(--sp-3, 12px) 0 var(--sp-2, 8px);
    line-height: 1.35;
}
.note-editor h1 { font-size: 22px; }
.note-editor h2 { font-size: 18px; }
.note-editor h3 { font-size: 16px; }
.note-editor strong { font-weight: 700; color: var(--ink-primary, var(--text-primary, #1a1814)); }
.note-editor em     { font-style: italic; }
.note-editor s,
.note-editor strike,
.note-editor del    { text-decoration: line-through; color: var(--ink-secondary, var(--text-secondary, #5d5a52)); }
.note-editor hr {
    border: none;
    border-top: 1px solid var(--border, #d8d3c8);
    margin: var(--sp-4, 16px) 0;
}
.note-editor div  { line-height: 1.65; }
.note-editor p    { margin: 0 0 var(--sp-2, 8px); line-height: 1.65; }

/* 우클릭 컨텍스트 메뉴 */
.md-context-menu {
    position: fixed;
    z-index: 9999;
    background: var(--bg-card, var(--bg, #faf7f2));
    border: 1px solid var(--border, #d8d3c8);
    border-radius: 10px;
    padding: 6px;
    min-width: 220px;
    /* (2026-05-20 v92) 사용자 보고 "/ 메뉴 7~8개는 보여야" — 180 → 280px.
       한 항목 ~32px 결로 7~8 항목 + 다음 줄 끄트머리. 나머지는 자체 스크롤. */
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-size: 13px;
    color: var(--ink-primary, var(--text-primary, #1a1814));
    user-select: none;
}
/* (2026-05-20) 붙여넣기 권한 막힘 안내 토스트 — 메뉴 닫힌 자리에 살짝. */
.md-copy-hint {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 10px 16px;
    background: var(--ink-primary, #1a1814);
    color: var(--bg-card, #faf7f2);
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    animation: mdCopyHintIn 160ms ease-out;
    pointer-events: none;
    max-width: calc(100vw - 32px);
}
@keyframes mdCopyHintIn {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.md-context-menu button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
}
.md-context-menu button:hover {
    background: var(--hover, rgba(0, 0, 0, 0.04));
}
.md-context-menu .md-mi-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-secondary, var(--text-secondary, #5d5a52));
    flex-shrink: 0;
}
.md-context-menu kbd {
    margin-left: auto;
    padding: 1px 6px;
    font-family: ui-monospace, 'SF Mono', Consolas, monospace;
    font-size: 10px;
    color: var(--ink-secondary, var(--text-secondary, #5d5a52));
    background: var(--bg-secondary, transparent);
    border: 1px solid var(--border, #d8d3c8);
    border-radius: 4px;
}
/* (2026-05-22 설정 직관화 ②) 터치 기기에선 단축키(Ctrl+X 등) 라벨 숨김 — 모바일엔 무의미해 혼란만 줘요.
   메뉴의 잘라내기·복사·붙여넣기·서식 버튼은 그대로 (모바일에선 오히려 탭 메뉴가 유용). */
@media (pointer: coarse) {
    .md-context-menu kbd { display: none; }
}
.md-menu-sep {
    height: 1px;
    background: var(--border, #d8d3c8);
    margin: 4px 6px;
}

/* (2026-05-14 #23 후속) 묵상 템플릿 마커 칩 — {{scripture}} 시각화 */
.md-marker-scripture {
    display: inline-block;
    padding: 2px 8px;
    margin: 0 2px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--border, #d8d3c8);
    border-radius: 6px;
    color: var(--brand-primary, var(--accent, #6d7666));
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    user-select: none;
    cursor: default;
    vertical-align: baseline;
    white-space: nowrap;
}
.md-marker-scripture:hover {
    background: var(--hover, rgba(0, 0, 0, 0.06));
}

/* 설정의 묵상 템플릿 에디터 — 노트와 같은 톤 */
.settings-template-editor {
    min-height: 240px;
    padding: 12px 16px;
    border: 1px solid var(--border, #d8d3c8);
    border-radius: 10px;
    background: var(--bg-card, var(--bg, #faf7f2));
    color: var(--text-primary, #1a1814);
    font-size: 15px;
    line-height: 1.7;
    overflow-y: auto;
}
.settings-template-editor:focus {
    outline: none;
    border-color: var(--brand-primary, var(--accent, #6d7666));
}
.settings-template-editor:empty::before {
    content: attr(data-placeholder);
    color: var(--ink-secondary, var(--text-secondary, #5d5a52));
    pointer-events: none;
}

/* (2026-05-14 #23 2차) 노트 본문 — 리스트·토글 */
.note-editor ul,
.note-editor ol {
    margin: var(--sp-2, 8px) 0;
    padding-left: 1.6em;
    line-height: 1.7;
}
.note-editor ul { list-style: disc; }
.note-editor ol { list-style: decimal; }
.note-editor li {
    margin: 2px 0;
    padding-left: 4px;
}
.note-editor li::marker {
    color: var(--ink-secondary, var(--text-secondary, #5d5a52));
}
/* 토글 — <details> */
.note-editor details {
    margin: var(--sp-2, 8px) 0;
    padding: 8px 12px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.02));
    border-left: 3px solid var(--border, #d8d3c8);
    border-radius: 4px;
}
.note-editor details > summary {
    cursor: pointer;
    font-weight: 500;
    color: var(--ink-primary, var(--text-primary, #1a1814));
    list-style: none;
    padding: 2px 0;
    user-select: none;
}
.note-editor details > summary::-webkit-details-marker { display: none; }
.note-editor details > summary::before {
    content: '▸';
    display: inline-block;
    margin-right: 6px;
    color: var(--ink-secondary, var(--text-secondary, #5d5a52));
    transition: transform 150ms;
}
.note-editor details[open] > summary::before {
    transform: rotate(90deg);
}
.note-editor details > *:not(summary) {
    margin-top: 6px;
    color: var(--ink-secondary, var(--text-secondary, #5d5a52));
}

/* ═══ (#58 2026-05-14) 생일 음력/양력 토글 — 글로벌 (본인 카드 + 인물 카드 공용) ═══ */
.birthday-cal-toggle {
    display: inline-flex;
    gap: 4px;
    margin-top: 6px;
}
.birthday-cal-toggle .bcal-chip {
    padding: 4px 10px;
    border: 1px solid var(--border, #d8d3c8);
    background: transparent;
    border-radius: 999px;
    font-size: 12px;
    color: var(--ink-secondary, #5d5a52);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.birthday-cal-toggle .bcal-chip:hover {
    border-color: var(--accent, #6d7666);
    color: var(--ink-primary, #1a1814);
}
.birthday-cal-toggle .bcal-chip.active {
    background: var(--accent-soft, #f0ece4);
    border-color: var(--accent, #6d7666);
    color: var(--accent, #6d7666);
    font-weight: 500;
}
.person-birthday-row {
    flex-wrap: wrap;
}
.birthday-solar-hint {
    margin-top: 4px;
    font-size: 11px;
    color: var(--ink-tertiary, #a8a499);
    line-height: 1.4;
    font-family: inherit;
}
.birthday-solar-hint:empty { display: none; }

/* (2026-05-14 #23 2차) 리스트 들여쓰기 단계별 마커 — 옵션 C (1./a./i. + •/◦/▪)
   사용자 결정: 노션·국제 호환 표준 (ASCII 안전, 다국어 OK) */
.note-editor ol             { list-style-type: decimal; }
.note-editor ol ol          { list-style-type: lower-alpha; }
.note-editor ol ol ol       { list-style-type: lower-roman; }
.note-editor ol ol ol ol    { list-style-type: lower-roman; }  /* 4+ 단계 — 같은 마커 */

.note-editor ul             { list-style-type: disc; }
.note-editor ul ul          { list-style-type: circle; }
.note-editor ul ul ul       { list-style-type: square; }
.note-editor ul ul ul ul    { list-style-type: square; }  /* 4+ 단계 — 같은 마커 */

/* nested 들여쓰기 폭 — 깊어질수록 자연스럽게 */
.note-editor ol ol,
.note-editor ul ul,
.note-editor ol ul,
.note-editor ul ol {
    margin-top: 2px;
    margin-bottom: 2px;
}

/* ═══ (#58 후속 2026-05-14) 생일 알람 토글 + 설정 카드 ═══ */

/* 인물 카드 — 생일 알람 명시 토글 row */
.birthday-alert-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: var(--ink-secondary, #5d5a52);
    cursor: pointer;
}
.birthday-alert-row em.birthday-alert-auto {
    color: var(--ink-tertiary, #a8a499);
    font-style: normal;
    font-size: 11px;
    margin-left: 2px;
}

/* 설정 — 생일 알람 일수 체크박스 그리드 */
.birthday-alarm-day-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}
.birthday-alarm-day-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border, #d8d3c8);
    border-radius: 999px;
    background: transparent;
    font-size: 13px;
    color: var(--ink-secondary, #5d5a52);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.birthday-alarm-day-chip:hover {
    border-color: var(--accent, #6d7666);
}
.birthday-alarm-day-chip input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
}
.birthday-alarm-day-chip:has(input[type="checkbox"]:checked) {
    background: var(--accent-soft, #f0ece4);
    border-color: var(--accent, #6d7666);
    color: var(--accent, #6d7666);
    font-weight: 500;
}

/* ────────────────────────────────────────────────────────────────
   (본인 프로필 재기획 트랙 2026-05-14 S-C) 미션 게이트 UI
   - 사이드바 잠금 회색 톤 (자물쇠 아이콘 X, 톤만)
   - 미션 안내 모달 (잠긴 모듈 클릭 시)
   - 진행도 도트 블록 (view-today 머리말)
   디자인 톤 노트 2026-05: 모노톤 + soft accent + 절제 여백
   ──────────────────────────────────────────────────────────────── */

/* ─ 사이드바 잠금 회색 톤 ─ */
.sidebar-item.nav-locked {
    color: var(--ink-tertiary, #a8a8a3);
    opacity: 0.72;
}
.sidebar-item.nav-locked .icon {
    opacity: 0.55;
}
.sidebar-item.nav-locked:hover {
    /* 잠긴 모듈도 클릭은 가능 — hover 시 살짝 톤 올림으로 "눌 수 있음" 안내 */
    color: var(--ink-secondary, #6f7068);
    opacity: 0.9;
}

/* ─ 미션 안내 모달 ─ */
.mission-gate-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(36, 36, 32, 0.42);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 24px;
    animation: missionGateFade 180ms ease-out;
}
@keyframes missionGateFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mission-gate-modal {
    background: var(--surface, #fbfaf6);
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(36, 36, 32, 0.18);
    padding: 32px 28px 24px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    animation: missionGateLift 220ms ease-out;
}
@keyframes missionGateLift {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
.mission-gate-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 12px;
}
/* (v128 아이콘 통일) 모든 미션 아이콘 = lucide. 사이즈는 부모 컨테이너에서 결정 */
.mission-gate-icon svg { width: 36px; height: 36px; stroke-width: 1.5; }
.mission-rc-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.mission-rc-card-sm .mission-rc-icon svg { width: 18px; height: 18px; }
.sidebar-mission-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
.mission-hub-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.mission-achievement-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.mission-gate-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-primary, #2a2a26);
    margin: 0 0 8px;
}
.mission-gate-hint {
    font-size: 14px;
    color: var(--ink-secondary, #6f7068);
    margin: 0 0 16px;
    line-height: 1.55;
}
.mission-gate-foot {
    font-size: 13px;
    color: var(--ink-tertiary, #a8a8a3);
    margin: 0 0 20px;
}
.mission-gate-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.mission-gate-btn {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms, border 120ms, color 120ms;
}
.mission-gate-btn-secondary {
    background: transparent;
    color: var(--ink-secondary, #6f7068);
    border-color: var(--border-soft, #e3e1d8);
}
.mission-gate-btn-secondary:hover {
    background: var(--surface-elev, #f4f1ea);
}
.mission-gate-btn-primary {
    background: var(--accent, #6d7666);
    color: var(--surface, #fbfaf6);
}
.mission-gate-btn-primary:hover {
    background: var(--accent-deep, #5a6354);
}

/* ─ 진행도 도트 블록 ─ */
.mission-progress-block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;                /* (2026-05-20 fix) 15 미션 자리 한 줄 자리하지 못함 → 자연 줄바꿈 */
    gap: 10px 12px;                 /* row-gap·column-gap 자리 */
    padding: 10px 14px;
    margin: 0 0 14px;
    background: var(--surface-elev, #f4f1ea);
    border-radius: 10px;
    font-size: 13px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid transparent;
    text-align: left;
    font-family: inherit;
    cursor: default;
    transition: border-color 160ms, background 160ms;
    overflow: hidden;               /* 자리 자리한 결 안전 자리 */
}
button.mission-progress-block {
    cursor: pointer;
}
button.mission-progress-block:hover {
    border-color: var(--accent, #6d7666);
    background: var(--surface, #fbfaf6);
}
.mission-progress-cta {
    margin-left: auto;
    color: var(--accent, #6d7666);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.mission-progress-graduated .mission-progress-label {
    color: var(--ink-primary, #2c2c28);
    font-weight: 600;
}
.mission-progress-label {
    color: var(--ink-secondary, #6f7068);
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
}
.mission-progress-dots {
    display: flex;
    flex-wrap: wrap;                /* (2026-05-20 fix) 15 도트 자리 자연 줄바꿈 */
    gap: 5px;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;                   /* flex 자리 자리해 안 잘림 */
}
.mission-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid var(--ink-tertiary, #a8a8a3);
    transition: background 180ms, border-color 180ms, transform 120ms;
    flex-shrink: 0;                 /* 도트 자리 안 줄어듦 */
}
/* 모바일 자리에서 도트 약간 더 작게 */
@media (max-width: 640px) {
    .mission-dot {
        width: 8px;
        height: 8px;
    }
    .mission-progress-dots {
        gap: 4px;
    }
}
.mission-dot:hover {
    transform: scale(1.18);
}
.mission-dot-done {
    background: var(--accent, #6d7666);
    border-color: var(--accent, #6d7666);
}

/* 모바일 */
@media (max-width: 640px) {
    .mission-gate-modal {
        padding: 24px 20px 18px;
    }
    .mission-gate-icon {
        font-size: 36px;
    }
    .mission-progress-block {
        padding: 8px 12px;
        font-size: 12px;
        gap: 10px;
    }
    .mission-dot {
        width: 9px;
        height: 9px;
    }
}

/* ─────────────────────────────────────────────────────────────
   (S-E 2026-05-15) "다음 해볼 만한 미션" 추천 카드 — 3-자리
   ① 대시보드 도트 바로 아래 (.mission-recommend-wrap)
   ② 잠긴 모듈 모달 안 (.mission-gate-recommend, .mission-rc-card-sm)
   ③ 사이드바 하단 미니 풋터 (.sidebar-mission-footer)
   디자인: 모노톤 + soft accent + 절제 여백
   ───────────────────────────────────────────────────────────── */

/* ─ ① 대시보드 추천 카드 영역 ─ */
.mission-recommend-wrap {
    margin: 0 0 18px;
}
.mission-recommend-head {
    color: var(--ink-secondary, #6f7068);
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 8px 2px;
    letter-spacing: 0.02em;
}
.mission-recommend-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

/* 개별 카드 */
.mission-rc-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 14px 12px;
    background: var(--surface-elev, #f4f1ea);
    border: 1px solid transparent;
    border-radius: 12px;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms, transform 120ms, background 160ms;
    font-family: inherit;
    min-height: 116px;
    position: relative;
}
.mission-rc-card:hover {
    border-color: var(--accent, #6d7666);
    transform: translateY(-1px);
    /* (2026-05-20 v96) 사용자 명시 "다크모드에서 미션에 마우스 올려두면 하얘지는거 수정".
       button user-agent default 가 hover 시 라이트 회색 자리하는 자리 → 카드 자체 background 명시. */
    background: var(--surface-elev, #f4f1ea);
}
.mission-rc-card:active {
    transform: translateY(0);
}
.mission-rc-icon {
    font-size: 22px;
    line-height: 1;
}
.mission-rc-title {
    color: var(--ink-primary, #2c2c28);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
}
.mission-rc-hint {
    color: var(--ink-secondary, #6f7068);
    font-size: 11.5px;
    line-height: 1.5;
    margin-bottom: 6px;
}
/* streak 미션 진행도 라벨 — N/M일 자리. accent-soft 톤. */
.mission-rc-progress {
    display: inline-block;
    margin-top: 2px;
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 9999px;
    background: var(--accent-soft, rgba(95, 111, 74, 0.08));
    color: var(--accent, #5F6F4A);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    align-self: flex-start;
}
.mission-rc-cta {
    margin-top: auto;
    align-self: flex-end;
    color: var(--accent, #6d7666);
    font-size: 12px;
    font-weight: 600;
}

/* ─ ② 모달 안 추천 (작은 카드 2개) ─ */
.mission-gate-recommend {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-soft, #e3e1d8);
}
.mission-gate-rec-head {
    color: var(--ink-secondary, #6f7068);
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 8px;
    letter-spacing: 0.02em;
}
.mission-gate-rec-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.mission-rc-card-sm {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    min-height: 0;
    background: var(--surface, #fbfaf6);
    border: 1px solid var(--border-soft, #e3e1d8);
    border-radius: 10px;
}
.mission-rc-card-sm .mission-rc-icon {
    font-size: 18px;
}
.mission-rc-card-sm .mission-rc-title {
    font-size: 12.5px;
    font-weight: 500;
}

/* ─ (2026-05-21 v116) 오늘 뷰 초대 카드 — 미션 추천 바로 아래 ─ */
.invite-today-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin: 0 0 18px;
    background: var(--surface-elev, #f4f1ea);
    border: 1px solid var(--line, #e3e1d8);
    border-radius: 12px;
    transition: border-color 160ms;
}
.invite-today-card:hover {
    border-color: var(--accent, #6d7666);
}
.invite-today-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.invite-today-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.invite-today-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.invite-today-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-primary, #2c2c28);
    line-height: 1.3;
}
.invite-today-count {
    font-size: 11.5px;
    color: var(--text-secondary, #6f7068);
    line-height: 1.3;
}
.invite-today-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.invite-today-copy {
    padding: 7px 12px;
    background: var(--accent, #6d7666);
    color: #fff;
    border: 1px solid var(--accent, #6d7666);
    border-radius: var(--radius, 8px);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--ease, 160ms);
}
.invite-today-copy:hover { opacity: 0.9; }
.invite-today-share {
    padding: 7px 12px;
    background: transparent;
    color: var(--accent, #6d7666);
    border: 1px solid var(--accent, #6d7666);
    border-radius: var(--radius, 8px);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--ease, 160ms), color var(--ease, 160ms);
}
.invite-today-share:hover {
    background: var(--accent, #6d7666);
    color: #fff;
}
@media (max-width: 480px) {
    .invite-today-card {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .invite-today-actions {
        justify-content: flex-end;
    }
}

/* ─ ③ 사이드바 미니 풋터 ─ */
.sidebar-mission-footer {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 0 10px;
    margin-bottom: 6px;
    border-top: 1px solid var(--border-soft, #e3e1d8);
}
.sidebar-mission-head {
    color: var(--ink-tertiary, #a8a8a3);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    margin: 8px 0 4px 14px;
    text-transform: uppercase;
}
.sidebar-mission-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 6px 14px;
    background: transparent;
    border: 0;
    color: var(--ink-secondary, #6f7068);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 140ms, color 140ms;
    border-radius: 6px;
}
.sidebar-mission-item:hover {
    background: var(--surface-elev, #f4f1ea);
    color: var(--ink-primary, #2c2c28);
}
.sidebar-mission-icon {
    font-size: 14px;
    line-height: 1;
    width: 16px;
    text-align: center;
}
.sidebar-mission-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─ 모바일: 대시보드 카드 가로 스와이프 캐러셀 ─ */
@media (max-width: 640px) {
    .mission-recommend-cards {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .mission-recommend-cards::-webkit-scrollbar { display: none; }
    .mission-rc-card {
        flex: 0 0 78%;
        scroll-snap-align: start;
        min-height: 104px;
    }
    .mission-gate-rec-cards {
        grid-template-columns: 1fr;
    }
    /* 사이드바 풋터는 모바일에선 자리 부족 — 숨김. 대시보드 카드 / 모달 카드로 충분 커버. */
    .sidebar-mission-footer {
        display: none;
    }
}

/* ─────────────────────────────────────────────────────────────
   (S-E2 2026-05-15) 미션 허브 모달 — 회고 자리
   도트 진행도 클릭 / 수료 카드 클릭 시 펼침.
   완료한 미션(클리어 날짜) + 남은 미션([시작]) 한 자리.
   ───────────────────────────────────────────────────────────── */

.mission-hub-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(36, 36, 32, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 9100;       /* 미션 게이트 모달(9000)보다 위 */
    animation: missionHubFade 200ms ease-out;
    overflow-y: auto;
}
@keyframes missionHubFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.mission-hub-modal {
    /* (2026-05-20 v92 fix) 다크모드 자리 토큰 자리하기 */
    background: var(--color-surface, #fbfaf6);
    border: 1px solid var(--color-border, #e3e1d8);
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.20);
    width: 100%;
    max-width: 440px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 22px 22px 18px;
    animation: missionHubLift 240ms ease-out;
}
@keyframes missionHubLift {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

.mission-hub-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.mission-hub-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ink-primary, #2c2c28);
    margin: 0;
}
.mission-hub-close {
    background: transparent;
    border: 0;
    font-size: 22px;
    color: var(--ink-tertiary, #a8a8a3);
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 140ms, color 140ms;
}
.mission-hub-close:hover {
    background: var(--surface-elev, #f4f1ea);
    color: var(--ink-primary, #2c2c28);
}
.mission-hub-graduated {
    margin: 0 0 14px;
    padding: 10px 12px;
    background: var(--surface-elev, #f4f1ea);
    border-radius: 8px;
    color: var(--ink-secondary, #6f7068);
    font-size: 13px;
}
.mission-hub-empty {
    color: var(--ink-secondary, #6f7068);
    font-size: 13px;
    text-align: center;
    padding: 24px 0;
}

.mission-hub-section {
    margin-bottom: 16px;
}
.mission-hub-section:last-child {
    margin-bottom: 0;
}
.mission-hub-section-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-tertiary, #a8a8a3);
    margin: 0 0 8px;
    letter-spacing: 0.02em;
    text-transform: none;
}

.mission-hub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.mission-hub-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-elev, #f4f1ea);
    border-radius: 10px;
}
.mission-hub-icon {
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}
.mission-hub-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.mission-hub-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink-primary, #2c2c28);
}
.mission-hub-hint {
    font-size: 11.5px;
    color: var(--ink-secondary, #6f7068);
    line-height: 1.5;
}
.mission-hub-start {
    margin-left: auto;
    background: var(--accent, #6d7666);
    color: var(--surface, #fbfaf6);
    border: 0;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 140ms;
    flex: 0 0 auto;
}
.mission-hub-start:hover {
    background: var(--accent-deep, #5a6354);
}

/* 완료 미션은 더 차분한 톤 */
.mission-hub-item-done {
    background: transparent;
    padding: 6px 12px;
    color: var(--ink-secondary, #6f7068);
}
.mission-hub-item-done .mission-hub-title {
    font-weight: 500;
    color: var(--ink-secondary, #6f7068);
}
.mission-hub-item-done .mission-hub-title::before {
    content: '✓  ';
    color: var(--accent, #6d7666);
    font-weight: 600;
}
.mission-hub-date {
    margin-left: auto;
    font-size: 11.5px;
    color: var(--ink-tertiary, #a8a8a3);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .mission-hub-modal {
        padding: 18px 16px 14px;
        max-height: 88vh;
    }
    .mission-hub-title {
        font-size: 15px;
    }
}

/* ─────────────────────────────────────────────────────────────
   (S-E3 2026-05-15) 미션 클리어 중간 카드 알림 — 토스트 대체
   화면 위 중앙. 3초 자동 / X 버튼 / 진입·소멸 부드러운 transition.
   사용자 명시 "분명하게 알 수 있는 장치"
   ───────────────────────────────────────────────────────────── */

.mission-achievement {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-12px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 280px;
    max-width: 380px;
    padding: 18px 20px 16px;
    /* (2026-05-20 v92 fix) 다크모드 자리 토큰 자리하기 — var(--color-surface) 자리 */
    background: var(--color-surface, #fbfaf6);
    border: 1px solid var(--color-border, #e3e1d8);
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    z-index: 9200;
    opacity: 0;
    transition: opacity 220ms ease-out, transform 240ms ease-out;
    pointer-events: auto;
}
.mission-achievement-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.mission-achievement.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.mission-achievement-icon {
    font-size: 28px;
    line-height: 1;
    flex: 0 0 auto;
    margin-top: 2px;
}
.mission-achievement-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.mission-achievement-head {
    color: var(--accent, #6d7666);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.mission-achievement-title {
    color: var(--color-ink-primary, var(--ink-primary, #2c2c28));
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
}
.mission-achievement-hint {
    color: var(--color-ink-secondary, var(--ink-secondary, #6f7068));
    font-size: 13px;
    line-height: 1.6;
}
.mission-achievement-close {
    background: transparent;
    border: 0;
    font-size: 20px;
    line-height: 1;
    color: var(--color-ink-tertiary, var(--ink-tertiary, #a8a8a3));
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 140ms, color 140ms;
    flex: 0 0 auto;
}
.mission-achievement-close:hover {
    background: var(--color-surface-elevated, var(--surface-elev, #f4f1ea));
    color: var(--color-ink-primary, var(--ink-primary, #2c2c28));
}
/* (2026-05-20 v92 신규) 확인 버튼 — 자동 닫힘 X, 사용자가 직접 눌러 닫는 자리 */
.mission-achievement-ok {
    align-self: flex-end;
    background: var(--accent, #6d7666);
    color: var(--color-surface, #fff);
    border: 0;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 160ms, transform 100ms;
}
.mission-achievement-ok:hover {
    opacity: 0.92;
}
.mission-achievement-ok:active {
    transform: scale(0.97);
}

@media (max-width: 640px) {
    .mission-achievement {
        left: 12px;
        right: 12px;
        transform: translateY(-12px);
        min-width: 0;
        max-width: none;
    }
    .mission-achievement.show {
        transform: translateY(0);
    }
}

/* (2026-05-21 v116) 미션 바로가기 → 카드 스크롤 후 하이라이트 펄스 */
.mission-route-highlight {
    animation: missionHighlightPulse 1.5s ease-out;
}
@keyframes missionHighlightPulse {
    0%   { box-shadow: 0 0 0 0 var(--accent); }
    30%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 35%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ────────────────────────────────────────────────────────────────
   (본인 프로필 재기획 트랙 2026-05-14 S-D) 온보딩 모달 — Day 0 첫 진입
   - 풀스크린 모달 + 4 stepper + 카드 안 한 흐름
   - 어체 클래스 (age-tone-young/middle/senior) 로 폰트·여백 변동
   - rem 기반 — 사용자 폰트 조정해도 UI 안 깨짐
   디자인 톤: 모노톤 + soft accent + 절제 여백
   ──────────────────────────────────────────────────────────────── */

.onboarding-backdrop {
    position: fixed;
    inset: 0;
    background: var(--surface, #fbfaf6);
    z-index: 9500;  /* 미션 게이트 모달(9000)보다 위 — 온보딩 끝나기 전엔 다른 모달 X */
    display: flex;
    /* (2026-05-18 후속) 마침 카드처럼 큰 컨텐츠는 align center 일 때 *위쪽이 잘림*.
       flex-start 로 자리하고 modal 에 margin: auto — 짧으면 가운데, 길면 위에서 스크롤. */
    align-items: flex-start;
    justify-content: center;
    padding: 1.5rem;
    overflow-y: auto;
    animation: onboardingFade 240ms ease-out;
}
@keyframes onboardingFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.onboarding-modal {
    width: 100%;
    max-width: 32rem;       /* rem 기반 — 사용자 폰트 키워도 비율 유지 */
    /* (2026-05-18 후속) 짧으면 가운데, 길면 위에서 스크롤 — backdrop flex-start 정합 */
    margin: auto;
    background: var(--surface, #fbfaf6);
    border-radius: 1rem;
    box-shadow: 0 1rem 3rem rgba(36, 36, 32, 0.08);
    padding: 2.5rem 2rem 2rem;
    /* 어체별 기본 폰트 크기 × 시스템 폰트 스케일 — sub-tree 전체에 상속 */
    font-size: calc(var(--onboarding-base-font, 1rem) * var(--system-font-scale, 1));
    line-height: 1.6;
    animation: onboardingLift 320ms ease-out;
}
@keyframes onboardingLift {
    from { transform: translateY(0.6rem); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}

/* 어체별 폰트 변수 — rem 기반이라 UI 안 깨짐 */
.onboarding-modal.age-tone-young  { --onboarding-base-font: 1rem;     /* 16px 디폴트 */ }
.onboarding-modal.age-tone-middle { --onboarding-base-font: 1.08rem;  /* 약 17px */ }
.onboarding-modal.age-tone-senior { --onboarding-base-font: 1.2rem;   /* 약 19px — 노년 더 크게 */ }

/* ─ 4 stepper ─ */
.onboarding-stepper {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
}
.onboarding-step-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--border-soft, #e3e1d8);
    transition: background 240ms, transform 240ms;
}
.onboarding-step-dot.active {
    background: var(--accent, #6d7666);
    transform: scale(1.4);
}
.onboarding-step-dot.done {
    background: var(--accent-soft, #b5bcae);
}

/* ─ 카드 본문 ─ */
.onboarding-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.onboarding-greeting {
    font-size: 1em;
    color: var(--ink-secondary, #6f7068);
    margin: 0;
}
.onboarding-sub {
    font-size: 0.9em;
    color: var(--ink-secondary, #6f7068);
    margin: 0;
    line-height: 1.5;
}
.onboarding-title {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--ink-primary, #2a2a26);
    margin: 0.5rem 0 0.5rem;
    line-height: 1.4;
    word-break: keep-all;   /* 한글 단어 단위 줄바꿈 — 어체 폰트 커져도 자연 */
}
.onboarding-label {
    font-size: 0.85em;
    color: var(--ink-tertiary, #a8a8a3);
    margin-top: 0.25rem;
}
.onboarding-input {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-soft, #e3e1d8);
    background: var(--surface-elev, #f4f1ea);
    color: var(--ink-primary, #2a2a26);
    font-size: 1em;          /* 부모 상속 — 어체 따라 자동 확대 */
    line-height: 1.5;
    transition: border-color 120ms, background 120ms;
}
.onboarding-input:focus {
    outline: none;
    border-color: var(--accent, #6d7666);
    background: var(--surface, #fbfaf6);
}

/* ─ 큐티 수준 3장 카드 ─ */
.onboarding-cuti-cards {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0.5rem 0;
}
.onboarding-cuti-card {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
        "icon title"
        "icon sub"
        "icon rec";
    gap: 0.125rem 0.75rem;
    padding: 1rem 1rem;
    border-radius: 0.625rem;
    border: 1.5px solid var(--border-soft, #e3e1d8);
    background: var(--surface, #fbfaf6);
    cursor: pointer;
    text-align: left;
    transition: border-color 140ms, background 140ms, transform 100ms;
    font-family: inherit;
    font-size: 1em;
}
.onboarding-cuti-card:hover {
    border-color: var(--accent-soft, #b5bcae);
    background: var(--surface-elev, #f4f1ea);
}
.onboarding-cuti-card.selected {
    border-color: var(--accent, #6d7666);
    background: var(--accent-bg, #eef0ea);
}
.onboarding-cuti-icon {
    grid-area: icon;
    font-size: 1.6em;
    line-height: 1;
    align-self: center;
    text-align: center;
}
.onboarding-cuti-title {
    grid-area: title;
    font-size: 1.05em;
    font-weight: 600;
    color: var(--ink-primary, #2a2a26);
}
.onboarding-cuti-sub {
    grid-area: sub;
    font-size: 0.88em;
    color: var(--ink-secondary, #6f7068);
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.onboarding-cuti-rec {
    grid-area: rec;
    font-size: 0.78em;
    color: var(--ink-tertiary, #a8a8a3);
    margin-top: 0.25rem;
}

/* ─────────────────────────────────────────────────────────
   (S-E7 2026-05-15) [6/9] 묵상 트랙 step — 큐티 수준별 추천
   큰 카드 1 + 작은 옵션 카드 + 한 권 통독 책 picker
   ───────────────────────────────────────────────────────── */
.onboarding-card-track .onboarding-track-primary {
    margin-bottom: 1rem;
}
.onboarding-track-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.9rem 1rem;
    background: var(--surface-elev, #f4f1ea);
    border: 1.5px solid transparent;
    border-radius: 0.7rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 160ms, background 160ms, transform 120ms;
    font-family: inherit;
    width: 100%;
    position: relative;
}
.onboarding-track-card:hover {
    border-color: var(--accent-soft, #b5bcae);
    transform: translateY(-1px);
}
.onboarding-track-card.selected {
    border-color: var(--accent, #6d7666);
    background: var(--accent-bg, #eef0ea);
}
.onboarding-track-card-primary {
    padding: 1.1rem 1.2rem;
    background: var(--surface, #fbfaf6);
    border-color: var(--accent-soft, #b5bcae);
}
.onboarding-track-card-primary.selected {
    border-color: var(--accent, #6d7666);
    background: var(--accent-bg, #eef0ea);
}
.onboarding-track-badge {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    font-size: 0.7em;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    background: var(--accent, #6d7666);
    color: var(--surface, #fbfaf6);
    border-radius: 0.4rem;
    letter-spacing: 0.04em;
}
.onboarding-track-icon {
    font-size: 1.4em;
    line-height: 1;
    display: inline-flex; align-items: center;
}
/* (v128 아이콘 통일) lucide svg 크기 */
.onboarding-track-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.onboarding-track-card-primary .onboarding-track-icon {
    font-size: 1.7em;
}
.onboarding-track-card-primary .onboarding-track-icon svg { width: 26px; height: 26px; }
.onboarding-track-label {
    font-size: 0.95em;
    font-weight: 600;
    color: var(--ink-primary, #2a2a26);
}
.onboarding-track-card-primary .onboarding-track-label {
    font-size: 1.1em;
}
.onboarding-track-desc {
    font-size: 0.82em;
    color: var(--ink-secondary, #6f7068);
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.onboarding-track-others-head {
    margin: 0.5rem 0;
    font-size: 0.85em;
    color: var(--ink-tertiary, #a8a8a3);
}
.onboarding-track-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.onboarding-track-card-highlight {
    border-color: var(--accent-soft, #b5bcae);
    background: var(--surface, #fbfaf6);
}

/* (v111) [직접 만들기] 카드 — 모달 띄우는 자리. dashed border 톤으로 "내가 만든다" 결 강조 */
.onboarding-track-card-custom {
    grid-column: 1 / -1;
    border-style: dashed;
    border-color: var(--accent-soft, #b5bcae);
    background: transparent;
}
.onboarding-track-card-custom:hover {
    border-color: var(--accent, #6d7666);
    border-style: dashed;
    background: var(--surface-elev, #f4f1ea);
}
.onboarding-track-card-custom.selected {
    border-style: solid;
    border-color: var(--accent, #6d7666);
    background: var(--accent-bg, #eef0ea);
}
.onboarding-track-card-custom.selected .onboarding-track-desc {
    color: var(--accent, #6d7666);
    font-weight: 500;
}

/* (S-E7.2) "곧 열려요" — 1차 베타 후 풀릴 자리 (예: 직접 만들기) */
.onboarding-track-card.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--surface-elev, #f4f1ea);
}
.onboarding-track-card.disabled:hover {
    border-color: transparent;
    transform: none;
}
.onboarding-track-chip-coming {
    display: inline-block;
    margin-left: 0.4em;
    padding: 0.1rem 0.45rem;
    background: var(--surface-elev, #f4f1ea);
    color: var(--ink-tertiary, #a8a8a3);
    border-radius: 0.35rem;
    font-size: 0.7em;
    font-weight: 500;
    letter-spacing: 0.02em;
    vertical-align: middle;
}
.onboarding-track-card.disabled .onboarding-track-chip-coming {
    background: var(--surface, #fbfaf6);
}
.onboarding-track-coming-foot {
    margin-top: 0.35rem;
    font-size: 0.74em;
    color: var(--ink-tertiary, #a8a8a3);
    font-style: italic;
}

/* ─ 한 권 통독 책 picker ─ */
.onboarding-book-picker {
    margin-top: 1rem;
    padding: 0.9rem;
    background: var(--surface-elev, #f4f1ea);
    border-radius: 0.7rem;
    animation: cardLift 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.onboarding-book-picker-head {
    margin: 0 0 0.6rem;
    font-size: 0.9em;
    font-weight: 500;
    color: var(--ink-secondary, #6f7068);
}
.onboarding-book-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
}
.onboarding-book-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.6rem 0.4rem;
    background: var(--surface, #fbfaf6);
    border: 1.5px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 140ms, transform 120ms;
    font-family: inherit;
}
.onboarding-book-card:hover { border-color: var(--accent-soft, #b5bcae); }
.onboarding-book-card.selected {
    border-color: var(--accent, #6d7666);
    background: var(--accent-bg, #eef0ea);
}
.onboarding-book-icon { font-size: 1.2em; line-height: 1; display: inline-flex; align-items: center; }
.onboarding-book-icon svg { width: 18px; height: 18px; stroke-width: 1.5; }
.onboarding-book-label {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--ink-primary, #2a2a26);
}
.onboarding-book-desc {
    font-size: 0.72em;
    color: var(--ink-tertiary, #a8a8a3);
}

/* ─────────────────────────────────────────────────────────
   (S-E7) [9/9] 본문 카드 — 클릭해서 에디터로 옮기기
   ───────────────────────────────────────────────────────── */
.onboarding-verse-card-interactive {
    cursor: default;
}
.onboarding-verse-insert-btn {
    margin-top: 0.6rem;
    padding: 0.55rem 0.9rem;
    background: var(--accent, #6d7666);
    color: var(--surface, #fbfaf6);
    border: 0;
    border-radius: 0.5rem;
    font-size: 0.88em;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 140ms, transform 120ms;
    align-self: flex-start;
}
.onboarding-verse-insert-btn:hover {
    background: var(--accent-deep, #5a6354);
    transform: translateY(-1px);
}
.onboarding-verse-insert-btn.inserted {
    background: var(--surface-elev, #f4f1ea);
    color: var(--accent, #6d7666);
    cursor: default;
}
.onboarding-verse-insert-btn.inserted:hover {
    transform: none;
}
.onboarding-meditation-textarea {
    font-family: 'SF Mono', Monaco, Menlo, Consolas, 'Courier New', monospace;
    font-size: 0.88em;
    line-height: 1.6;
    background: var(--surface-elev, #f4f1ea);
}

/* 모바일 */
@media (max-width: 640px) {
    .onboarding-track-options {
        grid-template-columns: 1fr;
    }
    .onboarding-book-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ─ 도트 시연 마지막 카드 ─ */
.onboarding-card-demo {
    text-align: center;
    align-items: center;
    padding: 1rem 0;
}
.onboarding-demo-icon {
    font-size: 3.2em;
    line-height: 1;
    margin-bottom: 0.5rem;
}
.onboarding-foot {
    margin: 0.75rem 0 0;
    font-size: 1em;
    color: var(--ink-secondary, #6f7068);
    font-style: italic;
}

/* ─ 액션 버튼 ─ */
.onboarding-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 1.25rem;
}
.onboarding-actions-split {
    justify-content: space-between;
}
.onboarding-actions-right {
    display: flex;
    gap: 0.5rem;
}
.onboarding-btn {
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    font-size: 1em;
    font-weight: 500;
    font-family: inherit;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms, border 120ms, color 120ms, opacity 120ms;
    white-space: nowrap;
}
.onboarding-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.onboarding-btn-primary {
    background: var(--accent, #6d7666);
    color: var(--surface, #fbfaf6);
}
.onboarding-btn-primary:hover:not(:disabled) {
    background: var(--accent-deep, #5a6354);
}
.onboarding-btn-secondary {
    background: transparent;
    color: var(--ink-secondary, #6f7068);
    border-color: var(--border-soft, #e3e1d8);
}
.onboarding-btn-secondary:hover {
    background: var(--surface-elev, #f4f1ea);
}
.onboarding-btn-text {
    background: transparent;
    color: var(--ink-tertiary, #a8a8a3);
}
.onboarding-btn-text:hover {
    color: var(--ink-secondary, #6f7068);
}

/* 모바일 — 화면 작아져도 안 깨짐 */
@media (max-width: 640px) {
    .onboarding-backdrop {
        padding: 1rem;
        align-items: flex-start;
    }
    .onboarding-modal {
        padding: 2rem 1.25rem 1.5rem;
        margin-top: 1rem;
        max-width: 100%;
    }
    .onboarding-actions-split {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }
    .onboarding-actions-right {
        justify-content: flex-end;
    }
    .onboarding-btn {
        flex: 1;
        text-align: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   온보딩 S-D 후속 (2026-05-15) — 번역본·폰트·원칙·묵상·마침 카드
   ═══════════════════════════════════════════════════════════════ */

/* Step 5: 성경 번역본 */
.onboarding-bible-list {
    display: flex; flex-direction: column;
    gap: 0.6rem;
    margin: 0.6rem 0 1.4rem;
}
.onboarding-bible-card {
    text-align: left;
    padding: 0.9rem 1rem;
    border: 1px solid var(--line, #e8e8e5);
    border-radius: 0.6rem;
    background: var(--surface-card, #fff);
    color: var(--ink-primary);
    cursor: pointer;
    transition: border 120ms, background 120ms;
    display: flex; flex-direction: column; gap: 0.25rem;
}
.onboarding-bible-card:hover:not(.disabled) { border-color: var(--brand-primary); }
.onboarding-bible-card.selected {
    border-color: var(--brand-primary);
    background: var(--brand-soft);
}
.onboarding-bible-card.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.onboarding-bible-name {
    font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
}
.onboarding-bible-desc {
    font-size: 0.9em;
    color: var(--ink-secondary);
}
.onboarding-chip {
    font-size: 0.7em;
    font-weight: 500;
    color: var(--ink-secondary);
    background: var(--surface-elevated);
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    letter-spacing: 0.02em;
}

/* Step 6: 폰트 크기 두 묶음 */
.onboarding-font-group {
    margin: 0.4rem 0 1.2rem;
}
.onboarding-font-group .onboarding-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--ink-secondary);
}
.onboarding-font-row {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.onboarding-font-chip {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 110px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line, #e8e8e5);
    border-radius: 0.5rem;
    background: var(--surface-card);
    cursor: pointer;
    text-align: left;
    display: flex; flex-direction: column; gap: 0.2rem;
    transition: border 120ms, background 120ms;
}
.onboarding-font-chip:hover { border-color: var(--brand-primary); }
.onboarding-font-chip.selected {
    border-color: var(--brand-primary);
    background: var(--brand-soft);
}
.onboarding-font-label { font-weight: 600; }
.onboarding-font-desc { color: var(--ink-secondary); }
.onboarding-font-sample {
    margin-top: 0.3rem;
    color: var(--ink-secondary);
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* 시스템 폰트 4단계 칩 — 라벨·설명을 실제 그 단계 크기로.
   data-system 속성은 onboarding.js 에서 'sm|md|lg|xl' 로 자리함. */
.onboarding-font-chip[data-system="sm"] .onboarding-font-label { font-size: 13px; }
.onboarding-font-chip[data-system="sm"] .onboarding-font-desc  { font-size: 11px; }
.onboarding-font-chip[data-system="md"] .onboarding-font-label { font-size: 16px; }
.onboarding-font-chip[data-system="md"] .onboarding-font-desc  { font-size: 12px; }
.onboarding-font-chip[data-system="lg"] .onboarding-font-label { font-size: 19px; }
.onboarding-font-chip[data-system="lg"] .onboarding-font-desc  { font-size: 14px; }
.onboarding-font-chip[data-system="xl"] .onboarding-font-label { font-size: 23px; }
.onboarding-font-chip[data-system="xl"] .onboarding-font-desc  { font-size: 17px; }

/* Step 7: 원칙 — 큰 textarea */
.onboarding-textarea {
    width: 100%;
    margin: 0.4rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--surface-card);
    color: var(--ink-primary);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.6;
    resize: vertical;
    min-height: 80px;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.onboarding-textarea:focus {
    outline: none;
    border-color: var(--brand-primary);
}
/* 제목용 — 짧게 시작해서 내용 따라 자연스럽게 길어짐 */
.onboarding-textarea-compact {
    min-height: 2.6em;
    line-height: 1.5;
    font-weight: 500;
}

/* Step 8: 묵상 본문 카드 */
.onboarding-card-meditation { gap: 0.8rem; }
.onboarding-verse-card {
    margin: 0.4rem 0 1rem;
    padding: 1rem 1.2rem;
    border-left: 3px solid var(--brand-primary);
    background: var(--surface-elevated);
    border-radius: 0.4rem;
    display: flex; flex-direction: column; gap: 0.3rem;
}
.onboarding-verse-ref {
    font-size: 0.85em;
    color: var(--brand-primary);
    font-weight: 600;
    letter-spacing: 0.02em;
}
.onboarding-verse-text {
    /* 성경 본문 폰트 변수(--scripture-fs) 즉시 반영 — step 6 폰트 칩 미리보기 */
    font-size: var(--scripture-fs, 1.05em);
    line-height: var(--scripture-lh, 1.75);
    color: var(--ink-primary);
    word-break: keep-all;
    overflow-wrap: break-word;
    user-select: text;
}
.onboarding-existing-notice {
    margin: 0.3rem 0 0.6rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.5rem;
    background: var(--brand-soft);
    border-left: 3px solid var(--brand-primary);
    color: var(--ink-secondary);
    font-size: 0.88em;
    line-height: 1.55;
}
.onboarding-existing-notice strong {
    color: var(--ink-primary);
    font-weight: 600;
}

/* 마침 카드 */
.onboarding-card-finish { gap: 0.8rem; text-align: center; }
.onboarding-finish-celebrate {
    font-size: 2.5em;
    margin-bottom: 0.2rem;
}
.onboarding-finish-missions {
    margin: 1rem 0;
    padding: 1rem;
    background: var(--surface-elevated);
    border-radius: 0.6rem;
    text-align: left;
}
.onboarding-finish-missions-title {
    font-weight: 600;
    margin-bottom: 0.2rem;
}
.onboarding-finish-missions-sub {
    font-size: 0.9em;
    color: var(--ink-secondary);
    margin-bottom: 0.7rem;
}
.onboarding-finish-missions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.5rem;
}
.onboarding-mission-mini {
    display: flex; gap: 0.5rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 0.45rem;
    background: var(--surface-card);
}
.onboarding-mission-icon { font-size: 1.2em; line-height: 1.2; }
.onboarding-mission-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.onboarding-mission-title { font-weight: 600; font-size: 0.9em; }
.onboarding-mission-hint {
    font-size: 0.78em;
    color: var(--ink-secondary);
    word-break: keep-all;
    overflow-wrap: break-word;
}
.onboarding-finish-cta {
    margin-top: 0.5rem;
    color: var(--ink-secondary);
}

/* ═══ 설정 화면 — 시스템 폰트 칩 + 번역본 카드 ═══ */
.settings-font-chip-row {
    display: flex; gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.settings-font-chip {
    flex: 1 1 calc(50% - 0.25rem);
    min-width: 110px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--surface-card);
    cursor: pointer;
    text-align: left;
    display: flex; flex-direction: column; gap: 0.2rem;
    color: var(--ink-primary);
}
.settings-font-chip:hover { border-color: var(--brand-primary); }
.settings-font-chip.selected {
    border-color: var(--brand-primary);
    background: var(--brand-soft);
}
.settings-font-chip-label { font-weight: 600; }
.settings-font-chip-desc { color: var(--ink-secondary); }
/* 4단계 칩 라벨·설명을 실제 그 단계의 폰트 크기로 보여주기 —
   사용자가 칩만 봐도 시각 차이를 즉시 알 수 있도록.
   sm(작게) ~ xl(매우 크게) 약 1.8배 비례. */
.settings-font-chip[data-system-font="sm"] .settings-font-chip-label { font-size: 13px; }
.settings-font-chip[data-system-font="sm"] .settings-font-chip-desc  { font-size: 11px; }
.settings-font-chip[data-system-font="md"] .settings-font-chip-label { font-size: 16px; }
.settings-font-chip[data-system-font="md"] .settings-font-chip-desc  { font-size: 12px; }
.settings-font-chip[data-system-font="lg"] .settings-font-chip-label { font-size: 19px; }
.settings-font-chip[data-system-font="lg"] .settings-font-chip-desc  { font-size: 14px; }
.settings-font-chip[data-system-font="xl"] .settings-font-chip-label { font-size: 23px; }
.settings-font-chip[data-system-font="xl"] .settings-font-chip-desc  { font-size: 17px; }

.settings-bible-list {
    display: flex; flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.settings-bible-card {
    text-align: left;
    padding: 0.8rem 1rem;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
    background: var(--surface-card);
    color: var(--ink-primary);
    cursor: pointer;
    display: flex; flex-direction: column; gap: 0.2rem;
}
.settings-bible-card:hover:not(.disabled) { border-color: var(--brand-primary); }
.settings-bible-card.selected {
    border-color: var(--brand-primary);
    background: var(--brand-soft);
}
.settings-bible-card.disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.settings-bible-name {
    font-weight: 600;
    display: flex; align-items: center; gap: 0.5rem;
}
.settings-bible-desc {
    font-size: 0.9em;
    color: var(--ink-secondary);
}
.settings-bible-chip {
    font-size: 0.7em;
    color: var(--ink-secondary);
    background: var(--surface-elevated);
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
}


/* ─────────────────────────────────────────────────────────
   히든 미션 트랙 v1 (2026-05-15) — 베타 + 14일 100% 클리어자 전용 만렙 시스템
   - 진입 자리(설정 카드): 잠금 상태 = 매우 절제, 잠금해제 = ✨ 활성
   - 모달: 모노톤 + ✨ 별 + 회고·간증 톤
   ───────────────────────────────────────────────────────── */

/* 설정 안 진입 카드 */
.hm-settings-card {
    transition: opacity 0.2s ease, background-color 0.2s ease;
}
.hm-settings-card.hm-locked {
    opacity: 0.55;
    background: var(--surface-quiet, var(--bg-quiet));
}
.hm-settings-card.hm-unlocked {
    opacity: 1;
    background: var(--surface-elevated);
    border-color: var(--brand-accent);
}
.hm-card-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.hm-card-row.hm-card-clickable:hover {
    background: var(--surface-hover, rgba(0,0,0,0.02));
    border-radius: 0.5rem;
}
.hm-card-sparkle {
    font-size: 1.4rem;
    flex-shrink: 0;
    filter: grayscale(0.5);
}
.hm-card-sparkle.hm-sparkle-active {
    filter: none;
    animation: hm-sparkle-pulse 2.4s ease-in-out infinite;
}
.hm-card-sparkle.hm-sparkle-celebrate {
    filter: none;
}
.hm-card-body { flex: 1; min-width: 0; }
.hm-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink-primary);
    margin-bottom: 0.15rem;
}
.hm-card-hint {
    font-size: 0.78rem;
    color: var(--ink-secondary);
}

@keyframes hm-sparkle-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

/* 모달 — 인트로 / 질문 / 클리어 후 */
.hm-overlay {
    /* modal-overlay 기본 톤 그대로 사용 */
}
.hm-modal {
    max-width: 520px;
    background: var(--surface);
    border-radius: 0.85rem;
    padding: 2rem 1.75rem;
    position: relative;
    font-family: 'Noto Serif KR', 'Pretendard', serif;
}
.hm-modal .hm-modal-close {
    position: absolute;
    top: 0.85rem;
    right: 1rem;
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    color: var(--ink-tertiary);
    cursor: pointer;
    line-height: 1;
}
.hm-modal .hm-sparkle {
    font-size: 2rem;
    text-align: center;
    margin-bottom: 0.5rem;
    animation: hm-sparkle-pulse 2.4s ease-in-out infinite;
}
.hm-modal .hm-sparkle-large {
    font-size: 2.6rem;
    margin-bottom: 0.85rem;
}
.hm-modal .hm-headline {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: var(--ink-primary);
    margin-bottom: 0.5rem;
    line-height: 1.4;
}
.hm-modal .hm-subtitle {
    text-align: center;
    color: var(--ink-secondary);
    font-size: 0.92rem;
    margin-bottom: 1rem;
}
.hm-modal .hm-body {
    color: var(--ink-primary);
    font-size: 0.95rem;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 1.25rem;
}
.hm-modal .hm-meta {
    display: flex;
    justify-content: center;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
    font-size: 0.82rem;
    color: var(--ink-secondary);
}
.hm-modal .hm-tag {
    background: var(--surface-elevated);
    padding: 0.15rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
}
.hm-modal .hm-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    margin-top: 1.5rem;
}

/* 질문 단계 */
.hm-modal.hm-questions {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}
.hm-q-header {
    margin-bottom: 1.25rem;
}
.hm-q-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink-primary);
    margin-bottom: 0.3rem;
}
.hm-q-subtitle {
    font-size: 0.85rem;
    color: var(--ink-secondary);
}
.hm-questions-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}
.hm-question { display: flex; flex-direction: column; gap: 0.45rem; }
.hm-q-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink-primary);
    line-height: 1.5;
}
.hm-q-input,
.hm-q-textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    background: var(--bg);
    color: var(--ink-primary);
    font-size: 0.92rem;
    font-family: inherit;
    box-sizing: border-box;
}
.hm-q-textarea {
    resize: vertical;
    min-height: 5.5rem;
    line-height: 1.6;
}
.hm-q-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.hm-radio {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: 9999px;
    cursor: pointer;
    font-size: 0.88rem;
}
.hm-radio input { margin: 0; }

/* 익명 토글·공개 동의 */
.hm-anonymous,
.hm-sharing {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    background: var(--surface-quiet, rgba(0,0,0,0.02));
    border-radius: 0.5rem;
}
.hm-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-size: 0.9rem;
}
.hm-toggle input { margin: 0; }
.hm-anon-desc,
.hm-share-note {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--ink-secondary);
    line-height: 1.5;
}
.hm-share-options { margin-top: 0.75rem; }
.hm-share-options.hidden { display: none; }
.hm-share-radios {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* 클리어 후 보상 */
.hm-reward {
    text-align: center;
    margin: 1rem 0;
    padding: 1.25rem 1rem;
    background: var(--surface-elevated);
    border-radius: 0.65rem;
}
.hm-reward-icon {
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}
.hm-reward-badge {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-primary);
    margin-bottom: 0.4rem;
}
.hm-reward-copy {
    font-size: 0.85rem;
    color: var(--ink-secondary);
    line-height: 1.6;
}
.hm-future-reward {
    margin-top: 0.85rem;
    padding: 0.85rem 1rem;
    border: 1px dashed var(--border);
    border-radius: 0.5rem;
    text-align: center;
}
.hm-future-tag {
    display: inline-block;
    font-size: 0.7rem;
    color: var(--ink-tertiary);
    background: var(--surface-quiet, rgba(0,0,0,0.04));
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    margin-bottom: 0.4rem;
}
.hm-future-feature {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink-primary);
    margin-bottom: 0.3rem;
}
.hm-future-copy {
    font-size: 0.78rem;
    color: var(--ink-secondary);
    line-height: 1.5;
}

@media (max-width: 600px) {
    .hm-modal {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        overflow-y: auto;
    }
}

/* ─── CS AI 트랙 §9 — SWAN 풍선 피드백 (2026-05-15) ──────────────── */
.swan-balloon {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--accent, #1a1814);
    color: var(--bg-card, #fff);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    z-index: 90;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.swan-balloon:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}
.swan-balloon:active {
    transform: translateY(0);
}
.swan-balloon i {
    width: 22px;
    height: 22px;
    stroke-width: 1.7;
}

.swan-overlay {
    position: fixed;
    inset: 0;
    z-index: 1500;
    /* (v137 2026-05-22) 데스크탑 비차단 패널 — 사용자 명시 "모달 바깥 조작도 되어야".
       배경 dim 없애고 pointer-events 통과 → 메인 화면 클릭·스크롤 가능. 모달 자체만 조작 결. */
    background: transparent;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    /* (v133 2026-05-22) 사용자 점검 "맨 위에 짤린다" — overlay padding-top 자리 넓혀 모달 위 헤더가 브라우저 가장자리에 안 닿게 */
    padding: 60px 24px 24px;
    /* (2026-05-20 v89 fix) 모바일 키보드 자리 자리해 자연 — dvh 자리 */
    height: 100dvh;
    max-height: 100dvh;
}
.swan-overlay.hidden { display: none; }

.swan-modal {
    width: 100%;
    max-width: 420px;
    /* (2026-05-22) "맨 위가 화면 밖으로 잘림" 수정 — 옛 calc 가 vh(=URL바 포함 큰 값) 라
       overlay(100dvh)보다 모달이 커져, align-items:flex-end 가 위쪽을 화면 밖으로 밀어 헤더가 잘렸음.
       overlay 와 같은 dvh 기준으로 맞추고 max-height 도 같은 식으로 캡 → 절대 화면을 안 넘어요. */
    height: min(640px, calc(100dvh - 84px));
    max-height: calc(100dvh - 84px);
    background: var(--bg-card, #fff);
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* (2026-05-20 v89 fix) min-height 0 — flex 자식 자리 자연 자리 */
    min-height: 0;
    /* (v137 2026-05-22) overlay 가 pointer-events:none 결이라 모달만 다시 켜 줌 — 모달 안은 자연 조작 */
    pointer-events: auto;
}

.swan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
    background: var(--bg-card, #fff);
}

/* (2026-05-22) SWAN 허브 메뉴 바 — 헤더 아래, 채팅 turns 위. 옛 FAQ 칩 바를 교체.
 * 사용자 명시: 칩 X → 두꺼운 글자. 4개 메뉴(FAQ·미션·공지·피드백)라 한 줄에 자연 들어가요(스크롤 X). */
.swan-menu-bar {
    /* (2026-05-23) 위아래 넉넉하게 — 공지 숫자 배지가 떠도 답답하지 않게 */
    padding: 12px 16px 14px;
    border-bottom: 1px solid var(--line, rgba(0,0,0,0.06));
    background: var(--surface-soft, var(--accent-soft, #f5f3ee));
    flex-shrink: 0;
}
.swan-menu-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.02em;
    margin-bottom: 10px;
    text-transform: none;
}
.swan-menu-chips {
    display: flex;
    flex-wrap: wrap;
    /* (2026-05-23) 간격 넉넉히 — 공지 위 떠 있는 숫자 배지가 옆 메뉴와 안 겹치게 */
    column-gap: 24px;
    row-gap: 12px;
    align-items: center;
    /* 배지(흐름 밖)가 떠도 줄 높이가 안 변하게 고정 — 채팅이 위아래로 안 밀려요 */
    min-height: 22px;
}
.swan-menu-chip {
    position: relative;        /* 공지 숫자 배지(absolute) 기준점 */
    padding: 2px 0;
    background: none;
    border: none;
    font-size: 15px;
    font-weight: 700;          /* 두꺼운 글자 */
    color: var(--text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--ease);
    font-family: inherit;
    line-height: 1.3;
}
.swan-menu-chip:hover,
.swan-menu-chip:focus-visible {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 4px;
    outline: none;
}

/* (2026-05-18 v73) 설정 [안내] 안 FAQ 아코디언 카드 */
.settings-faq-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.settings-faq-item {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.settings-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 12px 14px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    color: var(--text-primary);
    transition: background var(--ease);
}
.settings-faq-question:hover {
    background: var(--accent-soft);
}
.settings-faq-question.is-open {
    background: var(--accent-soft);
    font-weight: 600;
}
.settings-faq-chevron {
    width: 16px;
    height: 16px;
    stroke-width: 1.75;
    color: var(--text-secondary);
    transition: transform var(--ease);
    flex-shrink: 0;
}
.settings-faq-question.is-open .settings-faq-chevron {
    transform: rotate(180deg);
}
.settings-faq-answer {
    padding: 0 14px 14px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* (v75 2026-05-18) 설정 [안내] 추천 링크 카드 톤 — selfProfile 카드와 일관 */
.settings-referral-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 8px 0 12px;
}
.settings-referral-url {
    flex: 1;
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text-primary);
    font-family: inherit;
    min-width: 0;
}
.settings-referral-copy {
    padding: 8px 14px;
    background: var(--accent);
    color: var(--surface-card, #fff);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity var(--ease);
}
.settings-referral-copy:hover { opacity: 0.9; }
.settings-referral-share {
    padding: 8px 14px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--ease), color var(--ease);
}
.settings-referral-share:hover {
    background: var(--accent);
    color: var(--surface-card, #fff);
}
.settings-referral-count {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
}
.settings-referral-count strong {
    color: var(--text-primary);
    font-weight: 600;
}

.swan-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink-primary, #1a1814);
}
.swan-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dot-green, #6BBF7B);
    display: inline-block;
}
/* (B4 2026-05-22) icon 결 — 투명 배경 + 아이콘만 + hover 시 --hover. 토큰화 + focus 링 + disabled. */
.swan-close-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    border: none;
    background: transparent;
    color: var(--ink-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--motion-fast) var(--ease-out);
}
.swan-close-btn:hover {
    background: var(--hover);
}
.swan-close-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.swan-close-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.swan-close-btn i {
    width: 18px;
    height: 18px;
}

.swan-turns {
    flex: 1 1 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-soft, rgba(0,0,0,0.02));
    /* (2026-05-20 v89 fix) flex 자리 자연 자리 — 키보드 자리 자리해도 자리함 */
    min-height: 0;
}
.swan-turn {
    max-width: 80%;
    padding: 9px 13px;
    border-radius: 12px;
    /* (v133 2026-05-22) 사용자 점검 "폰트 크기 선택하면 채팅에도 폰트 크기가 따라와야" — 시스템 폰트 토큰 결로 갈음 */
    font-size: var(--fs-body, 14px);
    line-height: 1.5;
    word-wrap: break-word;
    white-space: pre-wrap;
}
.swan-turn-swan {
    align-self: flex-start;
    background: var(--bg-card, #fff);
    color: var(--ink-primary, #1a1814);
    border-bottom-left-radius: 4px;
    border: 1px solid var(--border, rgba(0,0,0,0.06));
}
.swan-turn-user {
    align-self: flex-end;
    background: var(--accent, #1a1814);
    color: var(--bg-card, #fff);
    border-bottom-right-radius: 4px;
}

/* (v127 2026-05-21) SWAN 채팅 안 quick reply 자리 — 첫 인사 후·예/아니오 결 질문 자리.
   사용자 명시: "선택지를 예 아니오 가 필요한 질문들은 타자 치지말고 그냥 선택하게."
   리스트 아이템 결로 자연 자리함 — 채팅 흐름 안 한 줄 차지. 클릭 한 번에 자연 사라짐. */
.swan-quick-reply-row {
    align-self: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 90%;
    padding: 0;
    background: transparent;
    list-style: none;
    justify-content: flex-end;
}
/* (B4 2026-05-22) secondary(chip) 결 — surface-elevated 배경 + border + accent 글자. 알약 라운드 유지. */
.swan-quick-reply-btn {
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-elevated);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--accent);
    cursor: pointer;
    line-height: 1.2;
    transition: background var(--motion-fast) var(--ease-out),
                border-color var(--motion-fast) var(--ease-out);
}
.swan-quick-reply-btn:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
}
.swan-quick-reply-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.swan-quick-reply-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.swan-thinking {
    /* (디자인 시스템 v1 Phase C 2026-05-16) 단계 라벨 + 도트 한 묶음 */
    padding: 10px 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.swan-thinking-label {
    font-size: 12px;
    color: var(--color-ink-secondary, var(--ink-secondary));
    transition: opacity var(--motion-fast, 150ms) var(--ease-out);
}
.swan-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}
.swan-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ink-tertiary, #9c9893);
    animation: swan-dot-bounce 1.2s infinite ease-in-out;
}
.swan-dots span:nth-child(2) { animation-delay: 0.15s; }
.swan-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes swan-dot-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

.swan-footer {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--border, rgba(0,0,0,0.08));
    background: var(--bg-card, #fff);
    align-items: flex-end;
    /* (2026-05-20 v89 fix) 키보드 자리 자리해도 자기 자리 자연 자리 */
    flex-shrink: 0;
}
.swan-input {
    flex: 1;
    resize: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    /* (v133 2026-05-22) 시스템 폰트 토큰 결로 갈음 */
    font-size: var(--fs-body, 14px);
    font-family: var(--font-sans);
    line-height: 1.5;
    background: var(--bg-card, #fff);
    color: var(--ink-primary, #1a1814);
    max-height: 120px;
    transition: border-color var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
}
.swan-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}
.swan-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* (B4 2026-05-22) primary 결 — 공용 .primary-btn 과 같은 토큰. */
.swan-send-btn {
    border: none;
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-4);
    background: var(--accent);
    color: white;
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--font-weight-semibold, 600);
    cursor: pointer;
    white-space: nowrap;
    align-self: stretch;
    transition: opacity var(--motion-fast) var(--ease-out);
}
.swan-send-btn:hover:not(:disabled) {
    opacity: 0.9;
}
.swan-send-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.swan-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .swan-balloon {
        right: 16px;
        bottom: 16px;
        width: 48px;
        height: 48px;
    }
    .swan-overlay {
        padding: 0;
        align-items: stretch;
        justify-content: stretch;
        /* (v137 2026-05-22) 모바일은 전체 화면 결 — 비차단 X. 배경 dim + pointer 차단 복원. */
        background: rgba(0, 0, 0, 0.4);
        pointer-events: auto;
    }
    .swan-modal {
        max-width: 100%;
        /* (2026-05-20 v89 fix) 모바일 자리 키보드 자리 자리해 자연 — dvh + JS visualViewport 자리 */
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }
    /* (2026-05-20 v89 fix) JS 자리에서 set 자리한 visualViewport 자리 — body 자리 data-vv-h 자리 */
    body[data-swan-open="true"] {
        overflow: hidden;
    }
}

/* ─── CS AI 트랙 §9-6·7·8 — 피드백 관리 페이지 (2026-05-15) ─────── */
#view-feedback-admin {
    padding: 24px;
    max-width: 1100px;
    margin: 0 auto;
}
.fbadmin-header {
    margin-bottom: 16px;
}
.fbadmin-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink-primary, #1a1814);
}
.fbadmin-subtitle {
    font-size: 13px;
    color: var(--ink-tertiary, #9c9893);
    margin: 0;
}

.fbadmin-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
    margin-bottom: 16px;
    /* 모바일 좁은 자리에서도 라벨이 한 글자씩 세로로 깨지지 않게 가로 스크롤 허용 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.fbadmin-tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-secondary, #6b6863);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* 라벨 줄바꿈 막기 — 좁은 자리면 fbadmin-tabs 가로 스크롤로 흘러감 */
    white-space: nowrap;
    flex-shrink: 0;
}
.fbadmin-tab:hover {
    color: var(--ink-primary, #1a1814);
}
.fbadmin-tab.active {
    color: var(--ink-primary, #1a1814);
    border-bottom-color: var(--accent, #1a1814);
}
.fbadmin-tab-count {
    font-size: 12px;
    background: var(--surface-quiet, rgba(0,0,0,0.04));
    border-radius: 9999px;
    padding: 1px 7px;
    font-weight: 500;
}

.fbadmin-toolbar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}
.fbadmin-search {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 8px;
    font-size: 14px;
    background: var(--bg-card, #fff);
    color: var(--ink-primary, #1a1814);
}
.fbadmin-select {
    padding: 7px 10px;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 8px;
    font-size: 13px;
    background: var(--bg-card, #fff);
    color: var(--ink-primary, #1a1814);
}
.fbadmin-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    background: var(--bg-card, #fff);
    color: var(--ink-primary, #1a1814);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}
.fbadmin-btn:hover {
    background: var(--surface-quiet, rgba(0,0,0,0.04));
}

/* (2026-05-18) 네이버 메일 톤 액션 줄 — 묶음 액션 버튼 한 줄 */
.fbadmin-action-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 4px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
    flex-wrap: wrap;
}
.fbadmin-select-all-box {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    cursor: pointer;
}
.fbadmin-select-all-box input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent, var(--brand-primary));
}
.fbadmin-action-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-secondary, #6b6863);
    transition: background var(--motion-fast, 150ms) var(--ease-out);
    white-space: nowrap;
}
.fbadmin-action-btn:hover {
    background: var(--surface-quiet, rgba(0,0,0,0.04));
    color: var(--ink-primary, #1a1814);
}
.fbadmin-action-danger {
    color: #B5523F;
}
.fbadmin-action-danger:hover {
    background: rgba(181, 82, 63, 0.06);
    color: #9B4234;
}
.fbadmin-action-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--accent, var(--brand-primary));
    font-weight: 600;
}

/* (2026-05-18) 삭제·복구 버튼 톤 + 분류 readonly */
.fbadmin-btn-danger {
    color: #B5523F;
    border-color: rgba(181, 82, 63, 0.3);
}
.fbadmin-btn-danger:hover {
    background: rgba(181, 82, 63, 0.06);
}
.fbadmin-btn-soft {
    color: var(--accent, var(--brand-primary));
    border-color: var(--accent-border, var(--brand-border));
}
.fbadmin-btn-soft:hover {
    background: var(--accent-soft, var(--brand-soft));
}
.fbadmin-category-readonly {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--surface-quiet, rgba(0,0,0,0.04));
    font-size: 13px;
    color: var(--ink-primary, #1a1814);
}

/* (2026-05-18) 전체 선택 체크박스 + 페이지 메타 */
.fbadmin-select-all-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    background: var(--bg-card, #fff);
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-primary, #1a1814);
    white-space: nowrap;
}
.fbadmin-select-all-row:hover {
    background: var(--surface-quiet, rgba(0,0,0,0.04));
}
.fbadmin-select-all-row input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    accent-color: var(--accent, var(--brand-primary));
}

.fbadmin-list-meta {
    font-size: 12px;
    color: var(--ink-tertiary, #9c9893);
    margin: 4px 0 8px;
    padding: 0 2px;
}

.fbadmin-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fbadmin-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-card, #fff);
    border: 1px solid var(--border, rgba(0,0,0,0.05));
    cursor: pointer;
    transition: background 0.1s ease;
}
.fbadmin-row:hover {
    background: var(--surface-quiet, rgba(0,0,0,0.03));
}
.fbadmin-row.is-unread .fbadmin-row-summary {
    color: var(--ink-primary, #1a1814);
    font-weight: 600;
}
.fbadmin-row.is-read .fbadmin-row-summary {
    color: var(--ink-tertiary, #9c9893);
    font-weight: 400;
}
.fbadmin-row.is-read .fbadmin-row-meta {
    opacity: 0.7;
}
.fbadmin-row-checkbox {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
.fbadmin-row-checkbox input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
/* 읽음 표시 동그라미는 폰트 굵기·색 차이로 대체 (사용자 명시 — 동그라미 안 띄움).
   .fbadmin-row-status 자리는 더 안 그림. is-read / is-unread 클래스가 본문 톤 결정. */
.fbadmin-row-body {
    flex: 1;
    min-width: 0;
}
.fbadmin-row-meta {
    font-size: 12px;
    color: var(--ink-tertiary, #9c9893);
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 3px;
}
.fbadmin-row-summary {
    font-size: 14px;
    color: var(--ink-primary, #1a1814);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}
.fbadmin-row-cat {
    font-size: 14px;
    flex: 0 0 auto;
}

.fbadmin-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-tertiary, #9c9893);
    font-size: 14px;
}

/* ─── 상세 페이지 ──────────────────────────────────────────── */
.fbadmin-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.08));
}
.fbadmin-back-btn {
    background: transparent;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--ink-secondary, #6b6863);
}
.fbadmin-back-btn:hover {
    background: var(--surface-quiet, rgba(0,0,0,0.04));
}
.fbadmin-detail-title {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}
.fbadmin-toggle-btn {
    background: transparent;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}
.fbadmin-toggle-btn:hover {
    background: var(--surface-quiet, rgba(0,0,0,0.04));
}

.fbadmin-meta {
    background: var(--bg-soft, rgba(0,0,0,0.02));
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 13px;
    color: var(--ink-secondary, #6b6863);
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.fbadmin-meta strong {
    color: var(--ink-primary, #1a1814);
    font-weight: 600;
    margin-right: 4px;
}
.fbadmin-meta code {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 12px;
    color: var(--ink-tertiary, #9c9893);
}
.fbadmin-errors {
    margin-top: 4px;
}
.fbadmin-errors summary {
    cursor: pointer;
    color: var(--dot-red, #E5654A);
}
.fbadmin-errors ul {
    margin: 6px 0 0 16px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
}

.fbadmin-section {
    margin-bottom: 20px;
}
.fbadmin-section-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--ink-primary, #1a1814);
}

.fbadmin-category-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}
.fbadmin-category-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-secondary, #6b6863);
}
.fbadmin-confidence {
    font-size: 12px;
    color: var(--ink-tertiary, #9c9893);
}

.fbadmin-summary {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-primary, #1a1814);
    margin: 0;
    padding: 12px 14px;
    background: var(--bg-soft, rgba(0,0,0,0.02));
    border-radius: 10px;
}

.fbadmin-turns {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fbadmin-turn {
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border, rgba(0,0,0,0.06));
}
.fbadmin-turn-swan {
    background: var(--bg-card, #fff);
}
.fbadmin-turn-user {
    background: var(--surface-quiet, rgba(0,0,0,0.04));
}
.fbadmin-turn-role {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-tertiary, #9c9893);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.fbadmin-turn p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-primary, #1a1814);
    white-space: pre-wrap;
    word-wrap: break-word;
}

.fbadmin-note {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--border, rgba(0,0,0,0.12));
    border-radius: 8px;
    font-family: inherit;
    font-size: 13px;
    background: var(--bg-card, #fff);
    color: var(--ink-primary, #1a1814);
    resize: vertical;
}

.fbadmin-detail-footer {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border, rgba(0,0,0,0.08));
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* ─── 설문 구조화 표 ──────────────────────────────────────── */
.fbadmin-survey-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.fbadmin-survey-table th,
.fbadmin-survey-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border, rgba(0,0,0,0.06));
    vertical-align: top;
}
.fbadmin-survey-table th {
    color: var(--ink-tertiary, #9c9893);
    font-weight: 500;
    width: 30%;
}
.fbadmin-survey-table td {
    color: var(--ink-primary, #1a1814);
    white-space: pre-wrap;
}
.fbadmin-survey-na {
    color: var(--ink-tertiary, #9c9893);
    font-style: italic;
}
.fbadmin-survey-raw {
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 12px;
    background: var(--bg-soft, rgba(0,0,0,0.02));
    border-radius: 8px;
    padding: 12px;
    overflow-x: auto;
    color: var(--ink-secondary, #6b6863);
}

@media (max-width: 600px) {
    #view-feedback-admin { padding: 12px; }
    .fbadmin-toolbar { flex-direction: column; align-items: stretch; }
    .fbadmin-toolbar .fbadmin-btn { width: 100%; }
    .fbadmin-row { padding: 10px; }
    .fbadmin-row-summary { white-space: normal; }
}

/* ─── 디자인 시스템 v1 Phase C — AI 로딩 보강 3종 (2026-05-16) ──────
   ui/aiThinking.js 와 짝꿍. 단계 라벨 회전 + 가짜 progress bar + typing breath.
   ─────────────────────────────────────────────────────────────────── */
.ai-thinking {
    position: relative;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface, var(--bg-card));
    border: 1px solid var(--color-border, var(--border));
    overflow: hidden;
    min-height: 36px;
    display: flex;
    align-items: center;
}
.ai-thinking-sm {
    padding: 8px 12px;
    min-height: 30px;
    font-size: 12px;
}
.ai-thinking-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--accent-soft);
    overflow: hidden;
    pointer-events: none;
}
.ai-thinking-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent);
    transform-origin: left center;
    transform: scaleX(0);
    animation: thinking-progress 8000ms cubic-bezier(0.16, 0.8, 0.4, 1) forwards;
}
@keyframes thinking-progress {
    0%   { transform: scaleX(0); }
    30%  { transform: scaleX(0.35); }
    60%  { transform: scaleX(0.65); }
    100% { transform: scaleX(0.85); }
}
.ai-thinking.is-done .ai-thinking-bar::after {
    animation: none;
    transform: scaleX(1);
    transition: transform var(--motion-fast) var(--ease-out);
}
.ai-thinking-label {
    font-size: 13px;
    color: var(--color-ink-secondary, var(--ink-secondary));
    transition: opacity var(--motion-fast) var(--ease-out);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ai-thinking-label::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    animation: thinking-pulse 1.2s ease-in-out infinite;
    flex: 0 0 auto;
}
@keyframes thinking-pulse {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.1); }
}

/* Typing breath — 글자 한 자씩 노출 중 깜빡이는 커서 */
.ai-typing::after {
    content: '▍';
    display: inline-block;
    margin-left: 2px;
    color: var(--accent);
    animation: typing-cursor 1s steps(2) infinite;
    font-weight: normal;
}
@keyframes typing-cursor {
    0%, 50%  { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* 모션 줄이기 자리한 사용자 — 모든 애니메이션 0 */
@media (prefers-reduced-motion: reduce) {
    .ai-thinking-bar::after,
    .ai-thinking-label::before,
    .ai-typing::after {
        animation: none;
    }
    .ai-thinking.is-done .ai-thinking-bar::after { transform: scaleX(1); }
    .ai-thinking-label::before { opacity: 0.7; }
    .ai-typing::after { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
 * 베타 슬림 모드 (config/featureFlags.js, 2026-05-18)
 *
 * <html data-tier="slim"> 일 때 [data-slim="hidden"] 메뉴 자동 숨김.
 * 6 화면 루프 (말씀 → 묵상 → 다짐 → 시간표 → 했/안함 → 주간 거울) 만 노출.
 * ───────────────────────────────────────────────────────────── */
html[data-tier="slim"] [data-slim="hidden"] {
    display: none !important;
}

/* 슬림 모드 사이드바 상단 배지 — 사용자가 지금 어느 모드인지 한눈에 보임 */
.slim-mode-badge {
    display: none;
    margin: 8px 12px 12px;
    padding: 6px 10px;
    border-radius: 8px;
    background: rgba(124, 139, 111, 0.12);
    color: var(--accent-strong, #5a6850);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.02em;
}
html[data-tier="slim"] .slim-mode-badge {
    display: block;
}
html[data-accent="lavender"] .slim-mode-badge {
    background: rgba(143, 134, 166, 0.14);
    color: var(--accent-strong, #6a6286);
}
html[data-accent="beige"] .slim-mode-badge {
    background: rgba(184, 158, 120, 0.16);
    color: var(--accent-strong, #7a6447);
}

/* ─── 온보딩 A 묶음 (베타 슬림 v1, 2026-05-18) ─────────────────
 * SWAN 말풍선 + 양/음력 토글 + 도시 칩 + 타임존 드롭다운 + Freemium 안내
 * ──────────────────────────────────────────────────────────── */

.onboarding-swan-bubble {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 0 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(124, 139, 111, 0.08);
    border-left: 3px solid var(--accent, #7c8b6f);
}
html[data-accent="lavender"] .onboarding-swan-bubble {
    background: rgba(143, 134, 166, 0.10);
}
html[data-accent="beige"] .onboarding-swan-bubble {
    background: rgba(184, 158, 120, 0.12);
}
.onboarding-swan-icon {
    flex: 0 0 auto;
    font-size: 20px;
    line-height: 1;
    color: var(--accent, #7c8b6f);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}
.onboarding-swan-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}
.onboarding-swan-text {
    flex: 1 1 auto;
    font-size: 0.95em;  /* (v83) px → em 결 — systemFont scale 자연 따라가요 */
    line-height: 1.55;
    color: var(--ink, #2a2a2a);
    /* (v134 2026-05-22) 한국어 단어 어색하게 끊기지 않게 — keep-all 결로 자연 줄바꿈 */
    word-break: keep-all;
    overflow-wrap: break-word;
}
.onboarding-swan-intro-meta {
    margin: 16px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--surface-soft, #f7f5f0);
    font-size: 12px;
    color: var(--ink-secondary, #6a6a6a);
    text-align: center;
    letter-spacing: 0.02em;
}

/* (2026-05-18 후속) SWAN 인사 큰 hero — step 1 전용. 사용자 명시: "큼지막하게 보여주고" */
.onboarding-card-swan-hero {
    padding-top: 28px;
    padding-bottom: 24px;
    text-align: center;
}
.onboarding-swan-hero-icon {
    font-size: 88px;
    line-height: 1;
    margin: 0 0 18px;
    animation: swan-hero-float 3.5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
    .onboarding-swan-hero-icon { animation: none; }
}
@keyframes swan-hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
.onboarding-swan-hero-greeting {
    font-family: 'Noto Serif KR', serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.55;
    margin: 0 0 24px;
    color: var(--ink, #2a2a2a);
    letter-spacing: -0.01em;
    /* (타이핑) 줄바꿈 \n 자연 반영 + 빈 상태 높이 보존 (3 줄 자리) */
    white-space: pre-line;
    min-height: 4.7em;
}

/* (2026-05-18 후속) 온보딩 큰 폰트 모드 — 누구나 편하게 읽으시도록.
 *   showOnboardingModal 에서 <html data-onboarding-large-font="true"> 자리함.
 *   step 9 (폰트 설정) 진입 시 또는 모달 닫힐 때 자연 해제.
 *   범위: .onboarding-modal 안만 — 사이드바·메인 영향 없음. */
html[data-onboarding-large-font="true"] .onboarding-modal { font-size: 17px; }
html[data-onboarding-large-font="true"] .onboarding-modal .onboarding-swan-text {
    font-size: 1em;
    line-height: 1.6;
}
html[data-onboarding-large-font="true"] .onboarding-modal .onboarding-swan-hero-greeting {
    font-size: 30px;
    line-height: 1.5;
}
@media (max-width: 480px) {
    html[data-onboarding-large-font="true"] .onboarding-modal .onboarding-swan-hero-greeting {
        font-size: 24px;
    }
}
html[data-onboarding-large-font="true"] .onboarding-modal .onboarding-title { font-size: 22px; }
html[data-onboarding-large-font="true"] .onboarding-modal .onboarding-sub {
    font-size: 15px;
    line-height: 1.65;
}
html[data-onboarding-large-font="true"] .onboarding-modal .onboarding-input,
html[data-onboarding-large-font="true"] .onboarding-modal .onboarding-textarea { font-size: 16px; }
html[data-onboarding-large-font="true"] .onboarding-modal .onboarding-btn {
    font-size: 15.5px;
    padding-top: 12px;
    padding-bottom: 12px;
}
html[data-onboarding-large-font="true"] .onboarding-modal .onboarding-label { font-size: 13.5px; }

/* (2026-05-18 후속) 슬림 모드 — quickReview 모달 자동 압축.
 *   사용자 명시 "이때 뭐 했는데 어땠어 정도만".
 *   slim mode면 자세히·라벨·인물·조직·AI 브리핑 자리 자동 숨김. */
html[data-tier="slim"] #qr-detail-toggle,
html[data-tier="slim"] #qr-detail-section,
html[data-tier="slim"] .qr-label-chips,
html[data-tier="slim"] .qr-labels-row,
html[data-tier="slim"] .qr-category-row,
html[data-tier="slim"] .qr-category-chips,
html[data-tier="slim"] .qr-person-section,
html[data-tier="slim"] .qr-org-section,
html[data-tier="slim"] #qr-ai-briefing-panel,
html[data-tier="slim"] .qr-rating-axes,
html[data-tier="slim"] .qr-tx-section {
    display: none !important;
}

/* (2026-05-18 후속) 운영자 페이지 — view-admin 카드 톤 */
#view-admin .admin-card {
    margin-bottom: 16px;
}
#view-admin .admin-card .section-desc {
    margin: 0 0 14px;
    color: var(--ink-secondary, #6a6a6a);
    line-height: 1.6;
}
#view-admin #admin-tier-row {
    margin-top: 0;
}
#view-admin .primary-btn {
    margin-top: 4px;
}

/* (2026-05-19 후속) 운영자 피드백 카드 안 4 버튼 자리 */
#view-admin .admin-feedback-btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}
#view-admin .admin-feedback-btn-row .secondary-btn {
    padding: 8px 14px;
    border: 1px solid var(--line, #e4e0d8);
    border-radius: 8px;
    background: var(--surface, #fff);
    font-size: 13px;
    cursor: pointer;
    color: var(--ink, #2a2a2a);
    transition: border-color 0.15s, background 0.15s;
}
#view-admin .admin-feedback-btn-row .secondary-btn:hover {
    border-color: var(--accent);
    background: var(--brand-soft);
}

/* (2026-05-19 후속) 신규 사용자 흐름 시연 6 버튼 — 운영자 페이지 안 */
.admin-flow-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 4px;
}
@media (max-width: 600px) {
    .admin-flow-grid { grid-template-columns: repeat(2, 1fr); }
}
.admin-flow-btn {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    padding: 18px 10px;
    border: 1px solid var(--line, #e4e0d8);
    border-radius: 12px;
    background: var(--surface, #fff);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.admin-flow-btn:hover {
    border-color: var(--accent);
    background: var(--brand-soft);
    transform: translateY(-1px);
}
.admin-flow-emoji {
    font-size: 26px;
    line-height: 1;
}
.admin-flow-label {
    font-size: 13px;
    color: var(--ink, #2a2a2a);
    text-align: center;
}

/* (2026-05-20 v93) 미확인 피드백 빨간 동그라미 — 3 자리 (사이드바·운영자 nav·피드백 관리 열기) 동일 톤 */
.feedback-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e53e3e;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
}
.feedback-unread-badge.hidden { display: none; }
/* 사이드바 [설정] 자리 — 텍스트 옆 자리 */
.sidebar-item .feedback-unread-badge.sidebar-badge {
    margin-left: 6px;
    vertical-align: middle;
}
/* 운영자 nav 자리 — 텍스트 옆 자리 */
.sidebar-settings-item .feedback-unread-badge.nav-badge {
    margin-left: auto;
}
/* 피드백 관리 열기 버튼 — 우측 상단 자리 */
.admin-flow-btn-with-badge {
    position: relative;
}
.admin-flow-btn .feedback-unread-badge.admin-flow-badge {
    position: absolute;
    top: 8px;
    right: 8px;
}

/* (2026-05-20 Phase 1) 피드백 도착 알림 카드 — 운영자 페이지 */
.admin-push-status {
    margin: 8px 0 12px;
    min-height: 28px;
}
.push-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    line-height: 1.4;
    font-weight: 500;
}
.push-badge-ok {
    background: rgba(124, 139, 111, 0.14);
    color: var(--accent, #7c8b6f);
    border: 1px solid rgba(124, 139, 111, 0.3);
}
.push-badge-warn {
    background: rgba(200, 110, 80, 0.10);
    color: #c45a3a;
    border: 1px solid rgba(196, 90, 58, 0.25);
}
.push-badge-info {
    background: rgba(120, 120, 120, 0.08);
    color: var(--ink-secondary, #666);
    border: 1px solid rgba(120, 120, 120, 0.2);
}
.admin-push-ios-hint {
    margin-top: 14px;
}
.ios-hint-inner {
    padding: 14px 16px;
    border-radius: 10px;
    background: rgba(124, 139, 111, 0.06);
    border: 1px solid rgba(124, 139, 111, 0.18);
    font-size: 13px;
    line-height: 1.7;
}
.ios-hint-ok {
    background: rgba(124, 139, 111, 0.10);
    color: var(--accent, #7c8b6f);
}
.ios-hint-title {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--ink, #2a2a2a);
}
.ios-hint-steps {
    margin: 0;
    padding-left: 22px;
    color: var(--ink-secondary, #555);
}
.ios-hint-steps li {
    margin: 4px 0;
}
.ios-hint-steps b {
    color: var(--ink, #2a2a2a);
}

/* (2026-05-18 후속) step 8 책 picker — 추천 5권 ↔ 66권 전체 토글 */
.onboarding-book-picker-head-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 12px 0 10px;
    gap: 12px;
    flex-wrap: wrap;
}
.onboarding-book-toggle-all {
    border: 1px solid var(--line, #e4e0d8);
    border-radius: 8px;
    background: var(--surface, #fff);
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    color: var(--ink-secondary, #6a6a6a);
    transition: border-color 0.15s, color 0.15s;
}
.onboarding-book-toggle-all:hover {
    border-color: var(--accent, #7c8b6f);
    color: var(--ink, #2a2a2a);
}
.onboarding-book-grid-all.hidden,
.onboarding-book-picker .onboarding-book-grid.hidden { display: none; }
.onboarding-book-testament-head {
    margin: 14px 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-secondary, #6a6a6a);
    letter-spacing: 0.02em;
}
.onboarding-book-testament-head:first-child { margin-top: 0; }
.onboarding-book-grid-compact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
@media (max-width: 480px) {
    .onboarding-book-grid-compact { grid-template-columns: repeat(3, 1fr); }
}
.onboarding-book-chip {
    border: 1px solid var(--line, #e4e0d8);
    border-radius: 8px;
    background: var(--surface, #fff);
    padding: 8px 6px;
    font-size: 13px;
    color: var(--ink, #2a2a2a);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.onboarding-book-chip:hover { border-color: var(--accent, #7c8b6f); }
.onboarding-book-chip.selected {
    border-color: var(--accent, #7c8b6f);
    background: rgba(124, 139, 111, 0.10);
    font-weight: 600;
}

/* (2단계 2026-05-18) step 11~13 — 결단·시간·알람 톤 */
.onboarding-sub-mini {
    font-size: 12px;
    color: var(--ink-secondary, #6a6a6a);
    margin: 6px 0 0;
}
.onboarding-toggle-row {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--line, #e4e0d8);
    border-radius: 10px;
    margin: 14px 0 16px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ink, #2a2a2a);
}
.onboarding-toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent, #7c8b6f);
    cursor: pointer;
}
.onboarding-alarm-time-wrap.hidden { display: none; }

/* (2026-05-19 fix) Step 13 — OS 알림 권한 카드 줄 */
.onboarding-notif-permission {
    margin: 14px 0 16px;
    padding: 14px 16px;
    background: var(--card-bg-soft, #fbf9f4);
    border: 1px solid var(--line, #e4e0d8);
    border-radius: 10px;
}
.onboarding-notif-permission-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.onboarding-notif-permission-icon {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border-radius: 50%;
    background: var(--accent-soft, #eee9de);
}
.onboarding-notif-permission-body {
    flex: 1 1 auto;
    min-width: 0;
}
.onboarding-notif-permission-title {
    margin: 0 0 2px;
    font-size: 14px;
    color: var(--ink, #2a2a2a);
    line-height: 1.4;
}
.onboarding-notif-permission-sub {
    margin: 0;
    font-size: 12px;
    color: var(--ink-secondary, #6a6a6a);
    line-height: 1.4;
}
.onboarding-notif-permission .onboarding-btn-sm {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 13px;
}

/* (2026-05-18 후속) 인트로 단순화 — 백조·서브·메타 제거, 인사 + [다음]만 */
.onboarding-card-swan-hero-simple {
    padding-top: 40px;
    padding-bottom: 32px;
    text-align: left;
}
.onboarding-card-swan-hero-simple .onboarding-swan-hero-greeting {
    text-align: left;
}
@media (max-width: 480px) {
    .onboarding-swan-hero-icon { font-size: 72px; margin-bottom: 14px; }
    .onboarding-swan-hero-greeting { font-size: 22px; }
}

/* SWAN 말풍선 본문 — 타이핑 자리 */
.onboarding-swan-text { white-space: pre-line; }
.onboarding-swan-text.ai-typing::after,
.onboarding-swan-hero-greeting.ai-typing::after {
    content: '▍';
    margin-left: 2px;
    color: var(--accent, #7c8b6f);
    animation: swan-typing-cursor 0.9s steps(2) infinite;
}
@keyframes swan-typing-cursor {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* 카드 enter — step 전환 시 부드럽게 등장 (사용자 결 천천히 통일, 2026-05-18 v77+) */
.onboarding-card-enter {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
}
.onboarding-card-enter.onboarding-card-enter-active {
    opacity: 1;
    transform: translateY(0);
}

/* 진행 dot — active 시 미세 grow + 발광 */
.onboarding-stepper .onboarding-step-dot {
    transition: transform 240ms ease-out, background 240ms ease-out, box-shadow 240ms ease-out;
}
.onboarding-stepper .onboarding-step-dot.active {
    transform: scale(1.35);
    box-shadow: 0 0 0 3px rgba(124, 139, 111, 0.15);
}

/* (2026-05-18 후속) SWAN 생각하는 척 dots — typing 직전 0.7~0.9s */
.swan-thinking-dots {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    vertical-align: middle;
    padding: 2px 0;
}
.swan-thinking-dots > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent, #7c8b6f);
    opacity: 0.35;
    animation: swan-thinking-bounce 1.3s ease-in-out infinite;
}
.swan-thinking-dots > span:nth-child(2) { animation-delay: 0.18s; }
.swan-thinking-dots > span:nth-child(3) { animation-delay: 0.36s; }
@keyframes swan-thinking-bounce {
    0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
    30%           { opacity: 1;   transform: translateY(-4px); }
}

/* (v143) AI가 말 끝나야 본문(옵션·입력·버튼) 등장 — 기본은 숨김, 타이핑 끝나면 등장.
   기본을 '숨김'으로 둬서 [다음] 누른 첫 프레임부터 본문이 안 보여요 → 미리 보였다 사라지는 깜빡임 제거. */
.onboarding-swan-bubble-typing ~ *,
.onboarding-swan-hero-greeting ~ * {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 360ms ease-out, transform 360ms ease-out;
}
.onboarding-card-swan-revealed .onboarding-swan-bubble-typing ~ *,
.onboarding-card-swan-revealed .onboarding-swan-hero-greeting ~ * {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
    /* 모션 줄임 — 타이핑 없이 처음부터 다 보이게. */
    .onboarding-swan-bubble-typing ~ *,
    .onboarding-swan-hero-greeting ~ * {
        opacity: 1; transform: none; pointer-events: auto; transition: none;
    }
    .swan-thinking-dots > span { animation: none; opacity: 0.6; }
}

/* 옵션 칩 클릭 시 미세 펄스 */
.onboarding-cuti-card:active,
.onboarding-city-chip:active,
.onboarding-bible-card:active,
.onboarding-track-card:active,
.onboarding-book-card:active,
.onboarding-toggle-chip:active,
.onboarding-font-chip:active {
    transform: scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-card-enter,
    .onboarding-card-enter.onboarding-card-enter-active { opacity: 1; transform: none; transition: none; }
    .onboarding-stepper .onboarding-step-dot,
    .onboarding-stepper .onboarding-step-dot.active { transition: none; transform: none; box-shadow: none; }
    .onboarding-swan-text.ai-typing::after,
    .onboarding-swan-hero-greeting.ai-typing::after { animation: none; }
}
.onboarding-swan-hero-sub {
    font-size: 14px;
    line-height: 1.65;
    color: var(--ink-secondary, #6a6a6a);
    margin: 0 0 4px;
}

/* (2026-05-18 후속) 다시보기 닫기 버튼 — 우상단 X
 * 신규 사용자는 안 보임. 재시청 시만 보여서 언제든 원래 화면으로 복귀 가능. */
.onboarding-modal {
    position: relative;
}
.onboarding-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--surface-soft, #f7f5f0);
    color: var(--ink-secondary, #6a6a6a);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    z-index: 5;
}
.onboarding-close-btn:hover {
    background: rgba(124, 139, 111, 0.14);
    color: var(--ink, #2a2a2a);
}
.onboarding-close-btn:active {
    transform: scale(0.94);
}
@media (max-width: 480px) {
    .onboarding-close-btn { width: 32px; height: 32px; font-size: 20px; top: 10px; right: 10px; }
}
.onboarding-btn-block {
    width: 100%;
}

.onboarding-birthday-toggle {
    display: flex;
    gap: 8px;
    margin: 12px 0;
}
.onboarding-toggle-chip {
    flex: 1 1 0;
    padding: 10px 14px;
    border: 1px solid var(--line, #e4e0d8);
    border-radius: 10px;
    background: var(--surface, #fff);
    cursor: pointer;
    font-size: 14px;
    color: var(--ink, #2a2a2a);
    transition: border-color 0.15s, background 0.15s;
}
.onboarding-toggle-chip:hover {
    border-color: var(--accent, #7c8b6f);
}
.onboarding-toggle-chip.selected {
    border-color: var(--accent, #7c8b6f);
    background: rgba(124, 139, 111, 0.08);
    font-weight: 600;
}

.onboarding-city-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}
@media (max-width: 480px) {
    .onboarding-city-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
.onboarding-city-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    padding: 14px 8px;
    border: 1px solid var(--line, #e4e0d8);
    border-radius: 12px;
    background: var(--surface, #fff);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.onboarding-city-chip:hover {
    border-color: var(--accent, #7c8b6f);
    transform: translateY(-1px);
}
.onboarding-city-chip.selected {
    border-color: var(--accent, #7c8b6f);
    background: rgba(124, 139, 111, 0.08);
}
.onboarding-city-flag {
    font-size: 22px;
    line-height: 1;
}
.onboarding-city-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink, #2a2a2a);
}
.onboarding-city-offset {
    font-size: 11px;
    color: var(--ink-secondary, #6a6a6a);
}

.onboarding-tz-wrap {
    margin: 12px 0 4px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--surface-soft, #f7f5f0);
}
.onboarding-tz-wrap.hidden {
    display: none;
}
.onboarding-tz-label {
    display: block;
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--ink-secondary, #6a6a6a);
}

.onboarding-finish-freemium {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 20px 0 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(124, 139, 111, 0.06);
    border: 1px solid rgba(124, 139, 111, 0.18);
}
.onboarding-finish-freemium-icon {
    flex: 0 0 auto;
    font-size: 22px;
    line-height: 1;
}
.onboarding-finish-freemium-body {
    flex: 1 1 auto;
}
.onboarding-finish-freemium-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink, #2a2a2a);
}
.onboarding-finish-freemium-sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-secondary, #6a6a6a);
}

/* 슬림 모드 토글 카드 (설정 화면) — accent 카드 패턴과 같은 결 */
#settings-tier-card .settings-tier-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}
.settings-tier-chip {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--line, #e4e0d8);
    border-radius: 10px;
    background: var(--surface, #fff);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.settings-tier-chip:hover {
    border-color: var(--accent);
}
.settings-tier-chip[aria-checked="true"] {
    border-color: var(--accent);
    background: var(--brand-soft);
}
.settings-tier-chip-label {
    font-weight: 600;
    color: var(--ink-primary);
}
.settings-tier-chip-desc {
    font-size: 12px;
    color: var(--ink-secondary);
    line-height: 1.5;
}

/* ─── (2026-05-23) 어제 묵상이 남긴 질문 — 산문 결 (액자 전부 벗김) ──────────────────
   사용자 명시 "카드가 아니라 산문처럼". 바깥 배경·좌측 세로선, 안쪽 질문 박스 모두 제거.
   "쓰는 곳은 종이처럼" 원칙(feedback_writing_surface_not_cards) 연장 — 읽고 기도하는 자리도 종이로. */
.yesterday-questions-section.hidden {
    display: none;
}
.yesterday-questions-intro {
    font-size: 13px;
    color: var(--color-ink-secondary, var(--ink-secondary));
    margin: 0 0 var(--sp-4, 16px);
    line-height: 1.55;
}
.yesterday-questions-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4, 16px); /* 산문 문단 간격 — 박스 없이 줄간격으로 질문 구분 */
}
.yesterday-question-item {
    font-family: var(--font-serif);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-ink-primary, var(--ink-primary));
    /* (2026-05-23) 산문화 — 배경·테두리·radius·padding 제거 */
}

/* 묵상 전 감사·회개 기도시간 체크박스 */
.prayer-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--sp-3, 12px);
    padding: 10px 14px;
    background: var(--color-surface, var(--bg-card));
    border-radius: var(--radius-md, 10px);
    border: 1px solid var(--color-border, var(--border));
    cursor: pointer;
    transition: background var(--motion-fast, 150ms) var(--ease-out);
    font-size: 14px;
    color: var(--color-ink-primary, var(--ink-primary));
}
.prayer-check-row:hover {
    background: var(--accent-soft, var(--brand-soft));
}
.prayer-check-row input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--accent, var(--brand-primary));
    cursor: pointer;
    flex-shrink: 0;
}
.prayer-check-row span {
    flex: 1;
}
/* (2026-05-23) 어제 질문 안의 기도 체크만 산문화 — 박스 벗고 줄로. 묵상 섹션 체크는 그대로. */
.yesterday-questions-section .prayer-check-row {
    background: transparent;
    border: none;
    padding: 0;
    margin-top: var(--sp-4, 16px);
}
.yesterday-questions-section .prayer-check-row:hover {
    background: transparent;
}

/* (2026-05-18) 사이드바 피드백 관리 미확인 뱃지 — 빨간 원 + 숫자 */
.feedback-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    margin-left: auto;
    border-radius: 9999px;
    background: #E5654A;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}
.feedback-unread-badge.hidden {
    display: none;
}

/* ──────────────────────────────────────────────────────
 * 사전 설문 풀스크린 카드 폼 (1차 베타 검증 시나리오 §1)
 *   2026-05-18 시안 v2: 12 카드 + 마침 1 카드.
 *   온보딩 결 정확 매칭 — .onboarding-card·.onboarding-card-enter·.onboarding-stepper 재활용.
 *   합의 결: 칩 위·자유 텍스트 아래·다중·필수 자유 3 자리.
 * ────────────────────────────────────────────────────── */
.presurvey-backdrop {
    position: fixed;
    inset: 0;
    background: var(--surface-base, var(--surface, #fbfaf6));
    z-index: 9600;  /* onboarding-backdrop(9500) 위로 — 폰트 후 자연 등장 결 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    animation: presurveyFadeIn 240ms ease-out;
}
@keyframes presurveyFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.presurvey-modal {
    position: relative;
    width: 100%;
    max-width: 620px;
    margin: auto 0;
    background: var(--surface, #fbfaf6);
    border-radius: 1rem;
    border: 1px solid var(--border-soft, #e3e1d8);
    padding: 2rem 1.75rem 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    /* 온보딩에서 고른 systemFont scale 자연 반영 — .onboarding-modal 결과 일관 */
    font-size: calc(1rem * var(--system-font-scale, 1));
}
.presurvey-close-temp {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 10px;
    background: var(--surface-soft, #f7f5f0);
    color: var(--ink-secondary, #6a6a6a);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s, transform 0.1s;
    z-index: 5;
}
.presurvey-close-temp:hover {
    background: rgba(124, 139, 111, 0.14);
    color: var(--ink, #2a2a2a);
}
.presurvey-close-temp:active {
    transform: scale(0.94);
}
.presurvey-stepper {
    margin-top: 0.25rem;
    margin-bottom: 1.5rem;
}
.presurvey-body {
    display: flex;
    flex-direction: column;
}
.presurvey-card-wrap {
    gap: 1rem;
}
.presurvey-step-count {
    font-size: 0.82em;
    color: var(--ink-tertiary, #a8a8a3);
    margin: 0 0 0.25rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}
.presurvey-rapport {
    font-size: 0.9em;
    color: var(--ink-secondary, #6f7068);
    line-height: 1.65;
    margin: 0;
    padding: 0.75rem 0.875rem;
    background: var(--surface-elev, #f4f1ea);
    border-radius: 0.5rem;
    border-left: 3px solid var(--accent-soft, #b5bcae);
}
.presurvey-question {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--ink-primary, var(--ink, #2a2a26));
    line-height: 1.5;
    word-break: keep-all;
    overflow-wrap: break-word;
    margin: 0.25rem 0 0.25rem;
    font-family: var(--font-serif, 'Noto Serif KR', serif);
}
.presurvey-block {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.presurvey-chip-hint {
    font-size: 0.88em;
    color: var(--ink-secondary, #6f7068);
    margin: 0;
}
.presurvey-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.presurvey-scale-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.82em;
    color: var(--ink-tertiary, #a8a8a3);
    padding: 0 0.2rem;
    margin: 0;
}
.presurvey-chip-grid--scale {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.4rem;
}
.presurvey-chip-scale {
    text-align: center;
    padding: 0.7rem 0;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.presurvey-chip {
    padding: 0.55rem 0.95rem;
    border-radius: 999px;
    border: 1.5px solid var(--border-soft, #e3e1d8);
    background: var(--surface, #fbfaf6);
    color: var(--ink-primary, var(--ink, #2a2a26));
    font-size: 0.92em;
    cursor: pointer;
    font-family: inherit;
    transition: all 140ms ease;
}
.presurvey-chip:hover {
    border-color: var(--accent-soft, #b5bcae);
    background: var(--surface-elev, #f4f1ea);
}
.presurvey-chip:active {
    transform: scale(0.97);
}
.presurvey-chip-active {
    background: rgba(124, 139, 111, 0.12);
    color: var(--ink-primary, var(--ink, #2a2a26));
    border-color: var(--accent, #7c8b6f);
    font-weight: 600;
}
.presurvey-chip-other {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 0.25rem;
}
.presurvey-chip-other-input {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-soft, #e3e1d8);
    background: var(--surface, #fbfaf6);
    color: var(--ink-primary, var(--ink, #2a2a26));
    font-size: 0.92em;
    font-family: inherit;
    min-width: 8rem;
    flex: 1 1 auto;
    box-sizing: border-box;
}
.presurvey-chip-other-input:focus {
    outline: none;
    border-color: var(--accent, #6d7666);
}
.presurvey-free-label {
    font-size: 0.9em;
    color: var(--ink-secondary, #6f7068);
    margin: 0;
}
.presurvey-free-required {
    color: var(--ink-primary, var(--ink, #2a2a26));
    font-weight: 500;
}
.presurvey-free-input {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-soft, #e3e1d8);
    background: var(--surface, #fbfaf6);
    color: var(--ink-primary, var(--ink, #2a2a26));
    font-size: 1em;
    line-height: 1.55;
    font-family: inherit;
    resize: vertical;
    min-height: 3rem;
    transition: border-color 120ms, background 120ms;
    box-sizing: border-box;
}
.presurvey-free-input:focus {
    outline: none;
    border-color: var(--accent, #6d7666);
    background: var(--surface-elev, #f4f1ea);
}
.presurvey-footer {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft, #e3e1d8);
}
.presurvey-question-pre {
    white-space: pre-line;
    min-height: 1.45em;
}
.presurvey-after-typing {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: opacity 480ms ease-out, transform 480ms ease-out;
}
.presurvey-card-typing-locked .presurvey-after-typing {
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
}
.presurvey-question.ai-typing::after {
    content: '|';
    margin-left: 2px;
    animation: presurveyCursorBlink 0.9s ease-in-out infinite;
    color: var(--accent, #7c8b6f);
    font-weight: 400;
}
@keyframes presurveyCursorBlink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .presurvey-after-typing { transition: none; }
    .presurvey-card-typing-locked .presurvey-after-typing {
        opacity: 1; transform: none; pointer-events: auto;
    }
    .presurvey-question.ai-typing::after { animation: none; }
}
.presurvey-loading-card {
    text-align: center;
    gap: 1.5rem;
    padding: 2rem 1rem;
}
.presurvey-loading-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
}
.presurvey-loading-text {
    font-size: 0.95em;
    color: var(--ink-secondary, #6f7068);
    margin: 0;
    line-height: 1.6;
}
.presurvey-finish-card {
    text-align: center;
}
.presurvey-finish-card .presurvey-rapport {
    text-align: left;
}
.presurvey-finish-footer {
    justify-content: center;
    gap: 0.75rem;
}
.presurvey-btn-prev,
.presurvey-btn-next,
.presurvey-btn-finish {
    padding: 0.65rem 1.4rem;
    border-radius: 0.5rem;
    border: 1.5px solid var(--border-soft, #e3e1d8);
    background: var(--surface, #fbfaf6);
    color: var(--ink-primary, var(--ink, #2a2a26));
    font-size: 0.95em;
    font-family: inherit;
    cursor: pointer;
    transition: all 140ms;
}
.presurvey-btn-prev:hover:not(:disabled),
.presurvey-btn-next:hover:not(:disabled),
.presurvey-btn-finish:hover:not(:disabled) {
    background: var(--surface-elev, #f4f1ea);
}
.presurvey-btn-prev:disabled,
.presurvey-btn-next:disabled,
.presurvey-btn-finish:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.presurvey-btn-next:not(:disabled),
.presurvey-btn-finish:not(:disabled) {
    background: var(--accent, #7c8b6f);
    color: #fff;
    border-color: var(--accent, #7c8b6f);
}
@media (max-width: 480px) {
    .presurvey-backdrop {
        padding: 1rem 0.75rem;
    }
    .presurvey-modal {
        padding: 1.5rem 1.25rem 1.25rem;
    }
    .presurvey-question {
        font-size: 1.2em;
    }
    .presurvey-stepper {
        gap: 0.3rem;
        margin-bottom: 1rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .presurvey-backdrop {
        animation: none;
    }
    .presurvey-chip,
    .presurvey-btn-prev,
    .presurvey-btn-next,
    .presurvey-btn-finish {
        transition: none;
    }
}

/* ── 법적 안내 (2026-05-18 v77) ───────────────────────────────
   privacy.html + terms.html 진입 자리.
   ① 사이드바 하단 푸터 — 매 화면에서 자연 노출
   ② 설정 > 안내 카테고리 안 카드 — 메뉴 결로 정식 진입 */

/* ① 사이드바 하단 푸터 */
.sidebar-legal-footer {
    margin-top: 6px;
    padding: 6px 12px 4px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--ink-tertiary, #8A857C);
    text-align: center;
    opacity: 0.7;
    transition: opacity 160ms ease;
}
.sidebar-legal-footer:hover {
    opacity: 1;
}
.sidebar-legal-footer a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 120ms ease, color 120ms ease;
}
.sidebar-legal-footer a:hover {
    color: var(--ink-secondary, #4A4640);
    border-bottom-color: currentColor;
}
.sidebar-legal-sep {
    margin: 0 6px;
    opacity: 0.5;
}

/* 설정 모드일 때 사이드바 푸터 숨김 (사이드바 자체가 변신) */
html[data-mode="settings"] .sidebar-legal-footer {
    display: none;
}

/* ② 설정 > 안내 카테고리 안 카드 */
.legal-card .legal-link-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 12px;
    border: 1px solid var(--border-color, #E8E2D6);
    border-radius: 8px;
    overflow: hidden;
    background: var(--surface-elev, #FFFFFF);
}
.legal-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: var(--ink-primary, #1A1814);
    text-decoration: none;
    background: var(--surface-elev, #FFFFFF);
    transition: background-color 120ms ease;
}
.legal-link-row + .legal-link-row {
    border-top: 1px solid var(--border-color, #E8E2D6);
}
.legal-link-row:hover {
    background: var(--surface-hover, #F4F1EA);
}
.legal-link-row .legal-link-label {
    font-size: 14.5px;
    font-weight: 500;
}
.legal-link-row .icon {
    width: 14px;
    height: 14px;
    color: var(--ink-tertiary, #8A857C);
    flex-shrink: 0;
}


/* ──────────────────────────────────────────────────────
 * 가입 동의 모달 (consentModal.js, 2026-05-18 v82)
 *   풀스크린 fixed 결 — 사전 설문(9600) 위 z-index 9700
 * ────────────────────────────────────────────────────── */
.consent-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 9700;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    animation: consentFadeIn 240ms ease-out;
}
@keyframes consentFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.consent-modal {
    width: 100%;
    max-width: 620px;
    margin: auto 0;
    background: var(--surface, #fbfaf6);
    border-radius: 1rem;
    border: 1px solid var(--border-soft, #e3e1d8);
    padding: 2rem 1.75rem 1.5rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
    font-size: calc(1rem * var(--system-font-scale, 1));
}
.consent-modal-open {
    overflow: hidden;
}
.consent-header {
    margin-bottom: 1.25rem;
}
.consent-title {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--ink-primary, var(--ink, #2a2a26));
    margin: 0 0 0.5rem;
    font-family: var(--font-serif, 'Noto Serif KR', serif);
    line-height: 1.45;
    word-break: keep-all;
}
.consent-subtitle {
    font-size: 0.95em;
    color: var(--ink-secondary, #6f7068);
    margin: 0;
    line-height: 1.6;
    word-break: keep-all;
}
.consent-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.consent-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.consent-group-title {
    font-size: 0.92em;
    color: var(--ink-secondary, #6f7068);
    margin: 0 0 0.25rem;
    font-weight: 600;
}
.consent-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.5rem;
    cursor: pointer;
    border-radius: 0.4rem;
    transition: background 140ms;
}
.consent-row:hover {
    background: var(--surface-elev, #f4f1ea);
}
.consent-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent, #7c8b6f);
    cursor: pointer;
    margin: 0;
    flex: 0 0 auto;
}
.consent-checkmark {
    display: none;
}
.consent-label {
    flex: 1 1 auto;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.95em;
    line-height: 1.5;
    color: var(--ink-primary, var(--ink, #2a2a26));
    word-break: keep-all;
}
.consent-required {
    color: var(--accent, #7c8b6f);
    font-weight: 600;
    font-size: 0.88em;
    flex: 0 0 auto;
}
.consent-text {
    flex: 1;
}
.consent-view-link {
    font-size: 0.82em;
    color: var(--accent, #7c8b6f);
    text-decoration: none;
    flex: 0 0 auto;
    padding: 0.2rem 0.4rem;
    border-radius: 0.3rem;
}
.consent-view-link:hover {
    background: rgba(124, 139, 111, 0.1);
    text-decoration: underline;
}
.consent-all-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
.consent-all-btn {
    padding: 0.5rem 1rem;
    background: var(--surface-elev, #f4f1ea);
    color: var(--ink-primary, var(--ink, #2a2a26));
    border: 1px solid var(--border-soft, #e3e1d8);
    border-radius: 0.4rem;
    font-family: inherit;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 140ms;
}
.consent-all-btn:hover {
    background: rgba(124, 139, 111, 0.12);
    border-color: var(--accent, #7c8b6f);
}
.consent-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft, #e3e1d8);
}
.consent-agree-btn {
    width: 100%;
    padding: 0.75rem 1.4rem;
    background: var(--accent, #7c8b6f);
    color: #fff;
    border: 1.5px solid var(--accent, #7c8b6f);
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.95em;
    font-weight: 600;
    cursor: pointer;
    transition: all 140ms;
}
.consent-agree-btn:hover:not(:disabled) {
    opacity: 0.92;
}
.consent-agree-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.consent-cancel-btn {
    width: 100%;
    padding: 0.65rem 1.4rem;
    background: transparent;
    color: var(--ink-tertiary, #a8a8a3);
    border: 1px solid var(--border-soft, #e3e1d8);
    border-radius: 0.5rem;
    font-family: inherit;
    font-size: 0.9em;
    cursor: pointer;
    transition: all 140ms;
}
.consent-cancel-btn:hover {
    background: var(--surface-elev, #f4f1ea);
    color: var(--ink-secondary, #6f7068);
}
@media (max-width: 480px) {
    .consent-overlay {
        padding: 1rem 0.75rem;
    }
    .consent-modal {
        padding: 1.5rem 1.25rem 1.25rem;
    }
    .consent-title {
        font-size: 1.25em;
    }
}
@media (prefers-reduced-motion: reduce) {
    .consent-overlay {
        animation: none;
    }
    .consent-row {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
 *  추천 링크 공유 시트 및 모달 (shareSheet.js)
 * ═══════════════════════════════════════════════════════════════════════ */
.share-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
    animation: shareFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shareFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.share-sheet-modal {
    background: var(--surface, rgba(255, 255, 255, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border-radius: 24px;
    width: 100%;
    max-width: 460px;
    padding: 24px;
    box-sizing: border-box;
    outline: none;
    transform: translateY(20px);
    animation: shareSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* 다크 모드 연동 */
body.dark-mode .share-sheet-modal {
    background: var(--surface, rgba(20, 20, 20, 0.85));
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
                inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

@keyframes shareSlideUp {
    to { transform: translateY(0); }
}

.share-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.share-sheet-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.share-sheet-close {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    transition: background-color var(--ease);
}
.share-sheet-close:hover {
    background: rgba(0, 0, 0, 0.06);
}
body.dark-mode .share-sheet-close:hover {
    background: rgba(255, 255, 255, 0.06);
}

.share-sheet-close-icon {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1;
}

.share-sheet-desc {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.share-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 8px 0;
}

.share-sheet-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 8px 4px;
    border-radius: 12px;
    transition: background-color var(--ease), color var(--ease);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.share-sheet-btn:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--text-primary);
}
body.dark-mode .share-sheet-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.share-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.share-sheet-btn:hover .share-icon-wrap {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.share-icon {
    font-size: 20px;
    line-height: 1;
}

.share-label {
    text-align: center;
    word-break: keep-all;
    font-weight: 500;
}

/* Gradients for UI Icons */
.bg-gradient-blue {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: #fff;
}
.bg-gradient-yellow {
    background: linear-gradient(135deg, #fede4f 0%, #fec24f 100%);
    color: #3e2723;
}
.bg-gradient-green {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: #fff;
}
.bg-gradient-purple {
    background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
    color: #fff;
}

.share-sheet-btn.copied .share-icon-wrap {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    animation: shareBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes shareBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.share-sheet-url-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.04);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 6px 6px 6px 12px;
    box-sizing: border-box;
    transition: border-color var(--ease);
}
body.dark-mode .share-sheet-url-bar {
    background: rgba(255, 255, 255, 0.02);
}

.share-url-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    color: var(--text-primary);
    font-family: inherit;
    min-width: 0;
    padding: 0;
}

.share-url-copy-btn {
    background: var(--accent);
    color: var(--surface-card, #fff);
    border: none;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 16px;
    cursor: pointer;
    font-family: inherit;
    transition: transform var(--ease), opacity var(--ease), background-color var(--ease);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.share-url-copy-btn:hover {
    opacity: 0.95;
    transform: scale(1.02);
}
.share-url-copy-btn.copied {
    background: #10b981;
    color: #fff;
    box-shadow: none;
}

/* ── [hidden] 속성 강제 숨김 ──
 * .sidebar-settings-item { display: flex } 같은 클래스 스타일이
 * HTML 기본 hidden 속성(display: none)보다 명시도(specificity)가 높아
 * 숨겨야 할 요소가 화면에 노출되는 버그를 방지합니다.
 * !important 로 어떤 클래스 스타일보다도 우선하여 숨김 처리합니다. */
[hidden] {
    display: none !important;
}

/* ════════════════════════════════════════════════════════════════════════
 * (졸업식 트랙 2026-05-25) 졸업식 풀스크린 카드 + 설정 다시 보기 카드
 *   합의: 정중·warm 톤, 절제 confetti(warm 2색), 자랑 톤 X.
 *   한 번만 자동 등장 → 이후 "졸업증 다시 보기"(설정)·"운영자 미리보기"로 재진입.
 * ════════════════════════════════════════════════════════════════════════ */

/* 풀스크린 backdrop — 어두운 wash 위로 warm beige 카드가 떠 있어요. */
.graduation-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 24, 21, 0.62);
    z-index: 9700; /* presurvey(9600)·onboarding(9500) 위. 졸업식이 가장 높음. */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 2rem 1rem;
    overflow-y: auto;
    animation: gradFadeIn 320ms ease-out;
}
@keyframes gradFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.graduation-backdrop.graduation-closing {
    animation: gradFadeOut 240ms ease-in forwards;
}
@keyframes gradFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* 카드 본체 */
.graduation-modal {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto 0;
    background: var(--surface-base, var(--surface, #fbfaf6));
    border-radius: 1.25rem;
    border: 1px solid var(--border-soft, #e3e1d8);
    padding: 2.5rem 2rem 1.75rem;
    box-shadow: 0 8px 32px rgba(58, 55, 39, 0.18);
    font-size: calc(1rem * var(--system-font-scale, 1));
    animation: gradModalIn 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes gradModalIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* 운영자 미리보기 태그 — 모서리 작게 */
.graduation-preview-tag {
    position: absolute;
    top: 12px;
    right: 14px;
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--accent, #a8a373);
    background: rgba(168, 163, 115, 0.08);
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid rgba(168, 163, 115, 0.3);
}

/* 헤더 */
.graduation-header {
    text-align: center;
    margin-bottom: 1.25rem;
}
.graduation-icon {
    display: block;
    font-size: 40px;
    line-height: 1;
    margin-bottom: 8px;
}
.graduation-title {
    margin: 0;
    font-family: var(--font-serif, 'Noto Serif KR', serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--color-ink-primary, #3a3727);
    letter-spacing: -0.2px;
}

/* 산문 단락 — 종이처럼, 카드 X (feedback_writing_surface_not_cards 결) */
.graduation-prose {
    font-family: var(--font-serif, 'Noto Serif KR', serif);
    font-size: 14.5px;
    line-height: 1.85;
    color: var(--color-ink-primary, #3a3727);
    margin: 0 0 1.75rem;
    padding: 0 0.25rem;
}
.graduation-prose p {
    margin: 0 0 0.85rem;
}
.graduation-prose p:last-child {
    margin-bottom: 0;
}

/* 보상 묶음 — 뱃지 + 졸업증 */
.graduation-rewards {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    justify-content: center;
    margin: 1rem 0 1.5rem;
    flex-wrap: wrap;
}
.graduation-reward-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.graduation-asset-frame {
    background: #fff;
    border: 1px solid var(--border-soft, #e3e1d8);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(58, 55, 39, 0.05);
}
.graduation-asset-frame.badge-frame {
    width: 140px;
    height: 140px;
}
.graduation-asset-frame.cert-frame {
    width: 160px;
    height: 226px;
}
.graduation-asset-frame svg {
    width: 100%;
    height: 100%;
    display: block;
}
.graduation-asset-label {
    font-size: 12px;
    color: var(--color-ink-secondary, #6b6740);
    text-align: center;
}

/* 졸업증 저장 버튼 — 작게, 절제 */
.graduation-download-btn {
    font-size: 12px;
    color: var(--accent, #a8a373);
    background: transparent;
    border: 1px solid var(--accent, #a8a373);
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 150ms ease-out;
}
.graduation-download-btn:hover {
    background: rgba(168, 163, 115, 0.1);
}

/* 푸터 */
.graduation-footer {
    text-align: center;
    margin-top: 0.5rem;
}
.graduation-continue-btn {
    font-family: var(--font-serif, 'Noto Serif KR', serif);
    font-size: 14px;
    color: #fff;
    background: var(--accent, #a8a373);
    border: none;
    padding: 11px 28px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 180ms ease-out, transform 180ms ease-out;
    letter-spacing: 0.3px;
}
.graduation-continue-btn:hover {
    background: #8e8a5f;
    transform: translateY(-1px);
}
.graduation-close-btn {
    font-size: 13px;
    color: var(--color-ink-secondary, #6b6740);
    background: transparent;
    border: 1px solid var(--border-soft, #e3e1d8);
    padding: 8px 22px;
    border-radius: 999px;
    cursor: pointer;
}
.graduation-close-btn:hover {
    background: var(--surface-hover, #f3f0e7);
}

/* ── confetti — 절제 warm 2색, 가볍게 떨어지는 결 ── */
.graduation-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
.graduation-confetti-piece {
    position: absolute;
    top: -10px;
    width: 6px;
    height: 12px;
    opacity: 0.7;
    border-radius: 1px;
    animation-name: gradConfettiFall;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}
@keyframes gradConfettiFall {
    0% {
        transform: translateY(-20px) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 0.7; }
    100% {
        transform: translateY(640px) rotate(540deg);
        opacity: 0;
    }
}

/* ── 모바일 — 카드 패딩 축소, 보상 세로 정렬 ── */
@media (max-width: 540px) {
    .graduation-modal {
        padding: 2rem 1.25rem 1.5rem;
        max-width: 100%;
    }
    .graduation-title {
        font-size: 20px;
    }
    .graduation-rewards {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
}

/* ════════════════════════════════════════════════════════════════════════
 * 설정 안 졸업증 카드 — 히든 미션 카드 결과 일관 (hm-settings-card 톤)
 * ════════════════════════════════════════════════════════════════════════ */
.graduation-settings-card {
    padding: 14px 16px;
    border-radius: 10px;
    transition: background 180ms ease-out;
}
.graduation-settings-card.graduation-locked {
    opacity: 0.55;
}
.graduation-settings-card.graduation-unlocked:hover {
    background: var(--surface-hover, rgba(168, 163, 115, 0.06));
}
.grad-card-row {
    display: flex;
    align-items: center;
    gap: 14px;
}
.grad-card-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.graduation-locked .grad-card-icon {
    filter: grayscale(1);
}
.grad-card-body {
    flex: 1;
    min-width: 0;
}
.grad-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink-primary, #3a3727);
    margin-bottom: 2px;
}
.grad-card-hint {
    font-size: 12px;
    color: var(--color-ink-secondary, #6b6740);
    line-height: 1.4;
}
.grad-card-clickable {
    cursor: pointer;
}