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

:root {
    /* ── Surface (Light) ──
       종이 노트북 같은 따뜻한 오프화이트. 한국식 차분함. */
    --surface-canvas:   #FAFAF7;
    --surface-card:     #FFFFFF;
    --surface-elevated: #F4F4F0;

    /* ── Ink (Light) ── */
    --ink-primary:   #2C2C2E;
    --ink-secondary: #6B6B70;
    --ink-tertiary:  #9A9A9F;

    /* ── Brand ──
       Sanctum Blue — 차분한 슬레이트 청. 트렌디 SaaS 그라데이션 금지. */
    --brand-primary: #3E5C76;
    --brand-soft:    rgba(62, 92, 118, 0.10);

    /* ── Line ── */
    --line:  #E8E8E5;
    --hover: rgba(55, 53, 47, 0.05);

    /* ── Legacy alias (기존 클래스 호환) ── */
    --bg:             var(--surface-canvas);
    --bg-card:        var(--surface-card);
    --bg-elev:        var(--surface-elevated);
    --text-primary:   var(--ink-primary);
    --text-secondary: var(--ink-secondary);
    --accent:         var(--brand-primary);
    --accent-soft:    var(--brand-soft);
    --border:         var(--line);

    /* ── Dot Semantic Palette (theme-invariant) ──
       6색은 의미. 평가/판단을 위한 시멘틱 컬러 — 사실 진술의 색. */
    --dot-gray:   #C7CDD3;  /* 미평가 — 아직 보지 않은 시간 */
    --dot-yellow: #F5C84B;  /* 보통 — 그저 흐른 시간 */
    --dot-green:  #6BBF7B;  /* 잘됨 — 마음에 머문 시간 */
    --dot-orange: #F0935A;  /* 아쉬움 — 다른 길이 있었던 시간 */
    --dot-red:    #E5654A;  /* 흘림 — 손가락 사이로 빠진 시간 */
    --dot-purple: #9B7ED9;  /* 특별 — 표시해 두고 싶은 시간 */

    /* ── Typography ──
       Pretendard Variable. 한글·영문·숫자 한 폰트.
       굵기 4단계만: 400(본문) / 500(라벨) / 600(소제목) / 700(제목). */
    --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
            system-ui, "Noto Sans KR", sans-serif;

    --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;
    /* legacy alias */
    --lh: var(--lh-body);

    /* ── Spacing scale (7단) ── */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 40px; --sp-7: 64px;

    /* ── Radius ──
       sm 8px (작은 칩·인풋 보조), 12px (기본), lg 16px (큰 카드·모달), pill (필터 칩). */
    --radius-sm:   8px;
    --radius:      12px;
    --radius-lg:   16px;
    --radius-pill: 9999px;

    /* ── Shadow ── 두 단계만. inner shadow / glow / neon 없음. */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

    /* ── Motion — single token ── */
    --ease: 200ms ease-out;
}

[data-theme="dark"] {
    /* 라이트와 다크 모두 동등하게 아름다워야 함. 다크가 곁다리 아님. */
    --surface-canvas:   #1A1A1C;
    --surface-card:     #232325;
    --surface-elevated: #2A2A2D;

    --ink-primary:   #ECECEE;
    --ink-secondary: #9A9A9F;
    --ink-tertiary:  #6B6B70;

    --brand-primary: #6B8AA8;
    --brand-soft:    rgba(107, 138, 168, 0.18);

    --line:  #2E2E32;
    --hover: rgba(255, 255, 255, 0.05);

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* ═══ 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; }
.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;
}

/* ── 빈 상태 컴포넌트 (모든 뷰 공통) ── */
.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;
}
.view { animation: fadeIn var(--ease); }
.hidden { display: none !important; }
@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 {
    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; }

/* ── 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);
}
/* 카드 호버 — 디자인 시스템 표준: 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; }

/* 페이지 헤더의 우측 액션 묶음 (날짜 입력 + 전체 접기 버튼) */
.page-header-actions {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ── 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;
}
.verse-text { flex: 1; }
.verse-item.selected { color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: 2px 4px; }

/* 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 {
    min-height: 100px; padding: var(--sp-4);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh);
    outline: none; transition: border-color var(--ease);
    background: var(--bg-elev); color: var(--text-primary);
}
.note-editor:focus { border-color: var(--accent); background: var(--bg-card); }
.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;
}
.utl-body {
    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: grid;
    grid-auto-rows: 16px;  /* 15분 = 16px → 1시간 = 64px */
    position: relative;
}
.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 {
    width: 26px; height: 26px;
    border: 1px solid transparent;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px; line-height: 1;
    padding: 0;
    transition: background var(--ease), border-color var(--ease), transform var(--ease);
}
.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 ═══ */
.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;
}
.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);
    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); }
.qr-status-row {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-2); margin-bottom: var(--sp-4);
}
.qr-status-btn {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: var(--sp-3) var(--sp-2);
    border: 2px solid var(--border); border-radius: var(--radius);
    background: var(--bg-elev); cursor: pointer;
    transition: all var(--ease);
}
.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: 26px; line-height: 1; }
.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); }

/* ── Buttons ── */
.text-btn {
    background: none; border: none; cursor: pointer;
    color: var(--accent); font-size: 14px;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--radius);
}
.text-btn:hover { background: var(--hover); }
.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: 600; cursor: pointer;
    transition: opacity var(--ease);
}
.primary-btn:hover { opacity: 0.9; }
.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;
}
.lock-screen-box { text-align: center; max-width: 340px; width: 90%; }
.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) */
.pw-policy-hint {
    display: flex; flex-wrap: wrap; gap: 6px 12px;
    margin: -8px 0 12px 0;
    padding: 8px 12px;
    background: var(--bg-elev);
    border-radius: var(--radius);
    text-align: left;
}
.pw-policy-hint:empty { display: none; }
.pw-policy-item {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; line-height: 1.4;
    transition: color 0.15s 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: 13px; min-width: 12px; text-align: center; }

/* 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;
}
.sanctum-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══ 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; }

/* 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); }
.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; }
.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; }
.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);
}

/* 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; }

.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);
}
.qna-input {
    flex: 1;
    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 {
    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.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);
}
.newplan-group { margin-bottom: var(--sp-3); }
.newplan-group:last-child { margin-bottom: 0; }
.newplan-group-title {
    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;
}
.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;
}

.newplan-summary {
    margin-top: var(--sp-2);
    font-size: 12px; color: var(--text-secondary);
    text-align: right;
}

/* 매일성경 인라인 링크 행 (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);
}

/* ═══ 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 ═══ */
.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; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 6px 10px;
    font-size: 18px; cursor: pointer; box-shadow: var(--shadow-sm);
}

@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%); }
    .sidebar.open { transform: translateX(0); box-shadow: var(--shadow-lg); }
    .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: var(--sp-3);
    }
    .utl-axis-col, .utl-plan-col, .utl-actual-col {
        display: none;
    }
    .utl-mobile-list {
        display: flex; flex-direction: column; gap: var(--sp-2);
    }
    /* 워크플로우 트랙 STEP 2 (2026-05-13) — 모바일 계획/실제 탭 + 스와이프 */
    .utl-mobile-tabs {
        display: flex; gap: var(--sp-2); padding-bottom: var(--sp-2);
        border-bottom: 1px solid var(--border);
        margin-bottom: var(--sp-2);
    }
    .utl-mobile-tab {
        flex: 1; padding: var(--sp-2) var(--sp-3);
        border: none; background: var(--bg-quiet, rgba(0,0,0,0.03));
        border-radius: var(--radius);
        font-size: 13px; color: var(--ink-secondary, var(--text-secondary));
        cursor: pointer;
        transition: all var(--ease);
    }
    .utl-mobile-tab.active {
        background: var(--brand-soft, rgba(91, 141, 239, 0.1));
        color: var(--brand-primary, var(--accent-primary));
        font-weight: 600;
    }
    .utl-mobile-body-wrap {
        display: flex; flex-direction: column; gap: var(--sp-2);
        touch-action: pan-y;  /* 가로 스와이프 방해 안 받게 */
    }
    .utl-mobile-card {
        background: var(--bg-card); border: 1px solid var(--border);
        border-left: 4px solid var(--dot-gray);
        border-radius: var(--radius); padding: var(--sp-3);
        display: flex; gap: var(--sp-3); align-items: center;
    }
    /* 워크플로우-발 도트는 모바일에서도 시각 구별 */
    .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: 11px; 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: 12px; color: var(--text-secondary);
        font-variant-numeric: tabular-nums; min-width: 64px;
    }
    .utl-mobile-body { flex: 1; min-width: 0; }
    .utl-mobile-plan { font-size: 13px; font-weight: 500; }
    .utl-mobile-actual { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
}

@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;
}
.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;
}
.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;
}
.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;
}
.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;
}
@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));
    /* 알람 종(38px wide, right 18px)의 왼쪽으로 8px gap */
    right: calc(64px + 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;
}
.reminder-text {
    font-size: 12px; color: var(--text-secondary);
    margin-top: 4px;
    word-break: keep-all;
}

.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) {
    .reminder-bell-wrap { top: 10px; right: 12px; }
    .manual-lock-wrap { top: 10px; right: 58px; }
    .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: #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);
}
.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 {
    display: flex; align-items: center; gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    color: var(--ink-tertiary);
    font-size: var(--fs-caption);
}
.dg-socratic-loading.hidden { display: none; }
.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 {
    position: fixed; top: var(--sp-3); right: 56px;
    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: 56px; top: var(--sp-2); }
    .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-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: 200px;
    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;
}
.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;
}
.md-menu-sep {
    height: 1px;
    background: var(--border, #d8d3c8);
    margin: 4px 6px;
}