/* ===== Color System — Refined Clarity (Light Theme) =====
 * Phase A2 (2026-04-27): 8개 의미 토큰 (--bg, --surface, --surface-2, --text,
 * --text-muted, --text-faint, --border-new, --border-strong) 은 아래 신 시스템
 * (line ~80) 으로 일괄 마이그레이션됨. 여기엔 BC/D 단계까지 보존되는 보조
 * 토큰만 남는다.
 */
:root {
    /* ── 보조 배경 (BC/D 단계까지 유지, 의미 매핑 추후) ── */
    --bg-hover:       #e8ebf2;
    --bg-inset:       #f7f8fb;

    /* ── 브랜드 (Brand Accent) — DESIGN.md brand-earth 일원화 ── */
    --accent:         var(--brand-earth);          /* alias → 라이트 #602800 / 다크 #C49570 */
    --accent-end:     var(--brand-earth-deep);     /* alias → 라이트 #380000 / 다크 #E4B894 */

    /* ── 상태 시맨틱 (Semantic Status) ── */
    --status-danger:  #e5484d;
    --status-warning: #d97706;
    --status-success: #18a058;
    --status-info:    #3b7ddd;
    --status-purple:  #7c5cfc;
    --status-neutral: #8b919e;

    /* ── 상태 배경 (Status Backgrounds) ── */
    --status-danger-bg:  rgba(229, 72, 77, 0.08);
    --status-warning-bg: rgba(217, 119, 6, 0.08);
    --status-success-bg: rgba(24, 160, 88, 0.08);
    --status-info-bg:    rgba(59, 125, 221, 0.08);
    --status-purple-bg:  rgba(124, 92, 252, 0.08);

    /* ── 등급 (Grade) ── */
    --grade-A: #18a058;
    --grade-B: #3b7ddd;
    --grade-C: #8b919e;
    --grade-D: #d97706;
    --grade-E: #e5484d;

    /* ── 차트 (Chart) — JS 의 cssVar('--chart-grid') 로 사용 ── */
    --chart-grid:        rgba(0, 0, 0, 0.08);
    /* Phase F: 차트 색 토큰화 (Chart.defaults + chartTheme() 헬퍼) */
    --chart-tooltip-bg:    rgba(26, 29, 38, 0.92);
    --chart-tooltip-color: #ffffff;
    --chart-point-bg:      #ffffff;
    --chart-line-axis:     #8b919e;
    /* 카테고리 팔레트 (Tableau 10 톤, rgba 0.8 alpha) — 다크에서도 충분히 대비 */
    --chart-cat-1:  rgba(78, 121, 167, 0.8);
    --chart-cat-2:  rgba(242, 142, 43, 0.8);
    --chart-cat-3:  rgba(225, 87, 89, 0.8);
    --chart-cat-4:  rgba(118, 183, 178, 0.8);
    --chart-cat-5:  rgba(89, 161, 79, 0.8);
    --chart-cat-6:  rgba(237, 201, 72, 0.8);
    --chart-cat-7:  rgba(176, 122, 161, 0.8);
    --chart-cat-8:  rgba(255, 157, 167, 0.8);
    --chart-cat-9:  rgba(156, 117, 95, 0.8);
    --chart-cat-10: rgba(186, 176, 172, 0.8);

    /* ── 그림자 (Shadow) ── */
    --shadow-card:  0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 8px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);

    /* ── 타이포그래피 (Typography) ── */
    --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --text-xs:   0.72rem;   /* 뱃지, 메타 */
    --text-sm:   0.82rem;   /* 테이블, 라벨 */
    --text-base: 0.9rem;    /* 본문 */
    --text-lg:   1.05rem;   /* 소제목 */
    --text-xl:   1.25rem;   /* 페이지 제목 */

    /* ── 기타 ── */
    --drop-zone-active:   rgba(233, 69, 96, 0.06);
    --drop-zone-selected: rgba(24, 160, 88, 0.06);
    --code-bg:            #f0f2f7;
}

/* ===== Phase BC: Design System Tokens — DESIGN.md 최종값 발현 (2026-04-27) =====
 * BC 단계: 신 토큰 *값* 을 DESIGN.md 최종값으로 일괄 전환. memorable thing
 * (cream bg + warm gray + new border + serif page-header) 동시 발현.
 * RISK 1+2 통합 발현 — uncanny valley 회피.
 */
:root {
    /* ── 배경 / Surface (DESIGN.md Section 5.1) ── */
    --bg:               #F6F4EE;            /* warm cream — body bg */
    --surface:          #FFFFFF;            /* 카드, 모달, 테이블 row */
    --surface-2:        #FBFAF7;            /* hover row, code block, nested */
    --bg-hover:         #ECE7DA;            /* cream 5% darken — warm hover (default light-cream) */

    /* ── 테두리 (rgba 기반, contrast 일관) ── */
    --border-new:       rgba(0, 0, 0, 0.08);   /* hairline divider */
    --border:           rgba(0, 0, 0, 0.08);   /* preview.html 호환 alias (= --border-new) */
    --border-strong:    rgba(0, 0, 0, 0.16);   /* input border */

    /* ── 텍스트 (warm tone, brand 일관) ── */
    --text:             #1A1A1A;            /* 본문, 데이터 */
    --text-muted:       #6B6157;            /* secondary, label (warm gray) */
    --text-faint:       #7A6B5C;            /* tertiary, placeholder — BC P0 fallback (small text WCAG AA, cream 4.67:1) */

    /* ── Brand: True Friend (한국투자증권 그룹 정체성, 로고에서 정확 hex 추출) ── */
    --brand-earth:      #602800;            /* primary CTA, active nav, heading accent (10% 사용) */
    --brand-earth-soft: #8B5E3C;
    --brand-earth-light:#B89878;
    --brand-earth-deep: #380000;
    --brand-sky:        #6098D0;            /* secondary CTA, link, info badge (20% 사용) */
    --brand-sky-soft:   #B8D4ED;
    --brand-sky-deep:   #356491;            /* ~5% darken — cream 위 4.78:1, 흰 카드 위 5.27:1 (Task 08) */

    /* ── Data: 한국 금융 관습 (보존). BC P0 fallback (plan 권장):
       --data-negative 4.78:1 on cream (3B7DDD 3.70 → 2E6BC2 4.78). data-positive 는 14px 이하 셀에선 굵게 (font-weight ≥600) 처리해 large text 분류로 통과. ── */
    --data-positive:    #E5484D;            /* 양수, 상승 */
    --data-negative:    #2E6BC2;            /* 음수, 하락 — BC: cream contrast 4.78:1 */
    --data-neutral:     #6B6157;            /* 0, 변동 없음 */

    /* ── 새 Semantic (채도 낮춤, brand 톤 일치). 기존 --status-* 와 alias ── */
    --success:          #2D7A4F;
    --warning:          #B8860B;
    --error:            #B91C1C;
    --info:             #2A6F97;

    /* ── 새 Typography (font 토큰만, size 는 A2 에서 통합) ── */
    --font-serif:       "Source Serif 4", "Noto Serif KR", "Noto Serif SC", Georgia, serif;
    --font-mono:        "JetBrains Mono", "SF Mono", Consolas, monospace;
    /* --font-sans 는 기존 변수 (Pretendard) 그대로 사용 */

    /* 새 px 기반 size scale (기존 rem 과 별도, A2 에서 통합) */
    --text-12:          12px;
    --text-14:          14px;
    --text-16:          16px;
    --text-18:          18px;
    --text-24:          24px;
    --text-32:          32px;
    --text-48:          48px;
    --text-64:          64px;

    /* ── Spacing (8 unit) ── */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;
    --space-24: 96px;
    --space-32: 128px;

    /* ── Border Radius ── */
    --radius-card:   4px;
    --radius-button: 6px;
    --radius-pill:   9999px;

    /* ── Motion ── */
    --easing:           cubic-bezier(0.16, 1, 0.3, 1);
    --duration-micro:   80ms;
    --duration-short:   200ms;
    --duration-medium:  320ms;
    --duration-long:    600ms;
}

/* ===== Phase E: Light-White (legacy 호환 모드) ===========================
 * cream 톤이 부담스러운 사용자용. BC 이전의 회색 배경 + 흰색 카드 패턴
 * 그대로 복원. Brand (갈색·하늘색) 는 D 단계 그대로 유지 — cream 만 끄는
 * 토글이지 brand 정체성까지 되돌리진 않는다.
 */
[data-theme="light-white"] {
    --bg:               #f4f6fa;
    --surface:          #ffffff;
    --surface-2:        #f0f2f7;
    --border-new:       #e2e6ef;
    --border:           #e2e6ef;
    --border-strong:    #d0d5e0;
    --text:             #1a1d26;
    --text-muted:       #5c6370;
    --text-faint:       #8b919e;
    --bg-hover:         #e8ebf2;
    --bg-inset:         #f7f8fb;
}

/* ===== Phase E: Dark Mode (DESIGN.md Section 5.6, 2026-04-26) ============
 * 다크는 옵션 — 라이트가 main. 사용자 명시 토글 (theme_preference='dark') 필수.
 * 라이트 :root 토큰을 [data-theme="dark"] 블록이 override.
 */
[data-theme="dark"] {
    /* ── 배경 / Surface ── */
    --bg:               #1A1714;            /* 다크 warm bg */
    --surface:          #252119;            /* 카드 */
    --surface-2:        #2D2820;            /* hover, code */

    /* ── 테두리 (rgba 흰색 기반) ── */
    --border-new:       rgba(255, 255, 255, 0.08);
    --border:           rgba(255, 255, 255, 0.08);
    --border-strong:    rgba(255, 255, 255, 0.16);

    /* ── 텍스트 (warm tone, brand 일관) ── */
    --text:             #F0EBDC;
    --text-muted:       #B5A993;
    --text-faint:       #A09588;            /* 다크 input/placeholder small text 통과 (5.46:1) */

    /* ── Brand: 다크에서 lighter (가독성 보정) ── */
    --brand-earth:      #C49570;
    --brand-earth-soft: #A0764B;
    --brand-earth-light:#6B5037;
    --brand-earth-deep: #E4B894;            /* 다크 hover 가 lighter */
    --brand-sky:        #80B4DC;
    --brand-sky-soft:   #2D4759;
    --brand-sky-deep:   #B0D4F0;            /* 다크 link */

    /* ── Data: 한국 금융 관습 + 다크 채도 보정 ── */
    --data-positive:    #FF6B70;
    --data-negative:    #5E9CE6;
    --data-neutral:     #B5A993;

    /* ── Phase F: 차트 토큰 다크 override (palette 는 0.8 alpha 라 다크 통과) ── */
    --chart-tooltip-bg:    rgba(245, 245, 245, 0.95);
    --chart-tooltip-color: #1A1714;
    --chart-point-bg:      #252119;
    --chart-line-axis:     #B5A993;

    /* ── Phase F.6.3: 등급 배지 다크 보정 (lighter 채도, 흰 글자 contrast 향상) ── */
    --grade-A: #2EBF77;
    --grade-B: #5C9CE5;
    --grade-C: #A6ABB7;
    --grade-D: #E89732;
    --grade-E: #F26568;

    /* ── Semantic 다크 보정 ── */
    --success:          #58C089;
    --warning:          #E5B642;
    --error:            #F87474;
    --info:             #75A7D5;

    /* ── Bootstrap --bs-* 다크 재매핑 (D phase override 위에 덮어씀) ── */
    --bs-body-bg:                 var(--bg);
    --bs-body-color:              var(--text);
    --bs-secondary-color:         var(--text-muted);
    --bs-tertiary-color:          var(--text-faint);
    --bs-emphasis-color:          var(--text);
    --bs-border-color:            var(--border-new);
    --bs-border-color-translucent: var(--border-new);
    --bs-link-color:              var(--brand-sky-deep);
    --bs-link-hover-color:        var(--brand-earth);
    --bs-link-color-rgb:          176, 212, 240;
    --bs-link-hover-color-rgb:    196, 149, 112;
    --bs-card-bg:                 var(--surface);
    --bs-card-color:              var(--text);
    --bs-card-border-color:       var(--border-new);
    --bs-modal-bg:                var(--surface);
    --bs-modal-color:             var(--text);
    --bs-modal-border-color:      var(--border-new);
    --bs-dropdown-bg:             var(--surface);
    --bs-dropdown-color:          var(--text);
    --bs-dropdown-border-color:   var(--border-new);
    --bs-dropdown-link-color:     var(--text);
    --bs-dropdown-link-hover-bg:  var(--surface-2);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-form-control-bg:         var(--surface);
    --bs-form-control-color:      var(--text);
    --bs-form-control-border-color: var(--border-strong);
    --bs-tooltip-bg:              var(--text);
    --bs-tooltip-color:           var(--bg);
    --bs-popover-bg:              var(--surface);
    --bs-popover-border-color:    var(--border-new);

    /* legacy 보조 토큰 다크 변형 (BC 보존 토큰) */
    --bg-hover:    rgba(255, 255, 255, 0.06);
    --bg-inset:    var(--surface-2);

    /* Chart 토큰 다크 — JS cssVar 자동 반응 */
    --chart-grid:       rgba(255, 255, 255, 0.08);
}

/* 다크 모드 btn-primary — brand-earth 가 라이트 톤이므로 글자색 dark bg */
[data-theme="dark"] .btn-primary {
    --bs-btn-bg:           var(--brand-earth);
    --bs-btn-color:        var(--bg);
    --bs-btn-border-color: var(--brand-earth);
    --bs-btn-hover-bg:     var(--brand-earth-deep);
    --bs-btn-hover-border-color: var(--brand-earth-deep);
    --bs-btn-active-bg:    var(--brand-earth-deep);
}
[data-theme="dark"] .btn-info {
    --bs-btn-bg:           var(--brand-sky-deep);
    --bs-btn-color:        var(--bg);
    --bs-btn-border-color: var(--brand-sky-deep);
    --bs-btn-hover-bg:     var(--brand-earth);
    --bs-btn-hover-color:  var(--bg);
    --bs-btn-hover-border-color: var(--brand-earth);
}
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    border-color: var(--brand-earth);
    box-shadow: 0 0 0 3px rgba(196, 149, 112, 0.25);
}
[data-theme="dark"] .alert-primary {
    --bs-alert-bg:           rgba(196, 149, 112, 0.10);
    --bs-alert-color:        var(--brand-earth-deep);
    --bs-alert-border-color: rgba(196, 149, 112, 0.30);
}
[data-theme="dark"] .alert-info {
    --bs-alert-bg:           rgba(176, 212, 240, 0.10);
    --bs-alert-color:        var(--brand-sky-deep);
    --bs-alert-border-color: rgba(176, 212, 240, 0.30);
}
[data-theme="dark"] .alert-success {
    --bs-alert-bg:           rgba(88, 192, 137, 0.10);
    --bs-alert-color:        var(--success);
    --bs-alert-border-color: rgba(88, 192, 137, 0.30);
}
[data-theme="dark"] .alert-warning {
    --bs-alert-bg:           rgba(229, 182, 66, 0.10);
    --bs-alert-color:        var(--warning);
    --bs-alert-border-color: rgba(229, 182, 66, 0.30);
}
[data-theme="dark"] .alert-danger {
    --bs-alert-bg:           rgba(248, 116, 116, 0.10);
    --bs-alert-color:        var(--error);
    --bs-alert-border-color: rgba(248, 116, 116, 0.30);
}

/* ===== Phase D: Bootstrap --bs-* override (DESIGN.md 2026-04-26) ==========
 * Bootstrap 5.3.3 의 컴포넌트 색을 brand 토큰으로 일괄 통합. RISK 3 발현
 * (갈색·하늘색 brand). cascade order 검증: base.html 의 style.css 가 Bootstrap
 * CDN 다음 로드 → !important 거의 불필요.
 */
:root {
    /* Theme baseline */
    --bs-body-bg:                 var(--bg);
    --bs-body-color:              var(--text);
    --bs-secondary-color:         var(--text-muted);
    --bs-tertiary-color:          var(--text-faint);
    --bs-emphasis-color:          var(--text);
    --bs-border-color:            var(--border-new);
    --bs-border-color-translucent: var(--border-new);
    --bs-link-color:              var(--brand-sky-deep);
    --bs-link-hover-color:        var(--brand-earth);
    --bs-link-color-rgb:          64, 120, 168;
    --bs-link-hover-color-rgb:    96, 40, 0;

    /* Component bg */
    --bs-card-bg:                 var(--surface);
    --bs-card-color:              var(--text);
    --bs-card-border-color:       var(--border-new);
    --bs-modal-bg:                var(--surface);
    --bs-modal-color:             var(--text);
    --bs-modal-border-color:      var(--border-new);
    --bs-dropdown-bg:             var(--surface);
    --bs-dropdown-color:          var(--text);
    --bs-dropdown-border-color:   var(--border-new);
    --bs-dropdown-link-color:     var(--text);
    --bs-dropdown-link-hover-bg:  var(--surface-2);
    --bs-dropdown-link-hover-color: var(--text);
    --bs-form-control-bg:         var(--surface);
    --bs-form-control-color:      var(--text);
    --bs-form-control-border-color: var(--border-strong);
    --bs-tooltip-bg:              var(--text);
    --bs-tooltip-color:           var(--surface);
    --bs-popover-bg:              var(--surface);
    --bs-popover-border-color:    var(--border-new);
}

/* Primary button → brand-earth (10% 사용 — primary CTA) */
.btn-primary {
    --bs-btn-bg:           var(--brand-earth);
    --bs-btn-color:        var(--surface);
    --bs-btn-border-color: var(--brand-earth);
    --bs-btn-hover-bg:     var(--brand-earth-deep);
    --bs-btn-hover-color:  var(--surface);
    --bs-btn-hover-border-color: var(--brand-earth-deep);
    --bs-btn-active-bg:    var(--brand-earth-deep);
    --bs-btn-active-color: var(--surface);
    --bs-btn-active-border-color: var(--brand-earth-deep);
    --bs-btn-disabled-bg:  var(--brand-earth-light);
    --bs-btn-disabled-color: var(--surface);
    --bs-btn-disabled-border-color: var(--brand-earth-light);
    --bs-btn-focus-shadow-rgb: 96, 40, 0;
}

/* Secondary / Outline-secondary → muted */
.btn-secondary {
    --bs-btn-bg:           var(--text-muted);
    --bs-btn-color:        var(--surface);
    --bs-btn-border-color: var(--text-muted);
    --bs-btn-hover-bg:     var(--text);
    --bs-btn-hover-color:  var(--surface);
    --bs-btn-hover-border-color: var(--text);
    --bs-btn-active-bg:    var(--text);
    --bs-btn-active-color: var(--surface);
    --bs-btn-active-border-color: var(--text);
}
.btn-outline-secondary {
    --bs-btn-color:        var(--text-muted);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg:     var(--surface-2);
    --bs-btn-hover-color:  var(--text);
    --bs-btn-hover-border-color: var(--text-muted);
    /* active (btn-check 체크 시 포함) — light earth 결, 라디오/chip-toggle 와 통일. 텍스트는 흰색. */
    --bs-btn-active-bg:    var(--brand-earth-light);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-border-color: var(--brand-earth-soft);
}

/* Info → brand-sky (20% 사용 — secondary CTA, badge) */
.btn-info {
    --bs-btn-bg:           var(--brand-sky-deep);
    --bs-btn-color:        var(--surface);
    --bs-btn-border-color: var(--brand-sky-deep);
    --bs-btn-hover-bg:     var(--brand-earth);
    --bs-btn-hover-color:  var(--surface);
    --bs-btn-hover-border-color: var(--brand-earth);
    --bs-btn-active-bg:    var(--brand-earth);
    --bs-btn-active-color: var(--surface);
    --bs-btn-active-border-color: var(--brand-earth);
}

/* Alert variants (cream bg 위 가독성) */
.alert-primary {
    --bs-alert-bg:           rgba(96, 40, 0, 0.06);
    --bs-alert-color:        var(--brand-earth-deep);
    --bs-alert-border-color: rgba(96, 40, 0, 0.2);
    --bs-alert-link-color:   var(--brand-earth);
}
.alert-info {
    --bs-alert-bg:           rgba(64, 120, 168, 0.08);
    --bs-alert-color:        var(--brand-sky-deep);
    --bs-alert-border-color: rgba(64, 120, 168, 0.25);
    --bs-alert-link-color:   var(--brand-sky-deep);
}
.alert-success {
    --bs-alert-bg:           rgba(45, 122, 79, 0.08);
    --bs-alert-color:        var(--success);
    --bs-alert-border-color: rgba(45, 122, 79, 0.25);
}
.alert-warning {
    --bs-alert-bg:           rgba(184, 134, 11, 0.08);
    --bs-alert-color:        var(--warning);
    --bs-alert-border-color: rgba(184, 134, 11, 0.25);
}
.alert-danger {
    --bs-alert-bg:           rgba(185, 28, 28, 0.08);
    --bs-alert-color:        var(--error);
    --bs-alert-border-color: rgba(185, 28, 28, 0.25);
}

/* nav-link active: brand-earth underline (정확한 brand 정체성) */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    --bs-nav-pills-link-active-bg: var(--brand-earth);
    --bs-nav-pills-link-active-color: var(--surface);
}

/* Accordion → cream/warm gray + earth focus (Bootstrap default 파랑 제거) */
.accordion {
    --bs-accordion-color:        var(--text);
    --bs-accordion-bg:           var(--surface);
    --bs-accordion-border-color: var(--border-new);
    --bs-accordion-btn-color:    var(--text);
    --bs-accordion-btn-bg:       var(--surface);
    --bs-accordion-active-color: var(--brand-earth);
    --bs-accordion-active-bg:    var(--surface-2);
    --bs-accordion-btn-focus-border-color: var(--brand-earth);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(96, 40, 0, 0.12);
}

/* ===== card hover scale (memory rule: 카드 리스트 기본 애니메이션) =====
 * Bootstrap .card 는 제외 — 큰 컨테이너 (테이블/차트 wrap) 까지 scale 되면
 * 사용자 혼란. 작은 list-item 카드 / 예시 질문 chip 등 명시 클래스에만 적용.
 */
.project-card,
.summary-card,
.skill-card,
.suggestion-chip {
    transition: transform var(--duration-short) var(--easing),
                box-shadow var(--duration-short) var(--easing);
}
.project-card:hover,
.summary-card:hover,
.skill-card:hover,
.suggestion-chip:hover {
    transform: scale(1.02);
    box-shadow: var(--shadow-hover);
}

/* ===== Form input focus ring — earth tinted ===== */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--brand-earth);
    box-shadow: 0 0 0 3px rgba(96, 40, 0, 0.12);
    outline: none;
}

/* ===== Radio button + form-switch (DESIGN.md 표준) — light earth 결 (사용자 명시 2026-05-02) =====
 * 체크박스(brand-earth fill, primary CTA) 와 분리해 라디오·스위치는 light earth tint.
 * 강조색 안의 마크(dot/knob)·텍스트는 흰색 (사용자 명시 2026-05-02 후속). */
.form-check-input[type="radio"]:checked {
    background-color: var(--brand-earth-light);
    border-color: var(--brand-earth-soft);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='%23ffffff'/></svg>");
}
.form-check-input[type="radio"]:focus {
    border-color: var(--brand-earth-soft);
    box-shadow: 0 0 0 3px rgba(96, 40, 0, 0.2);
}
/* form-switch (Bootstrap toggle switch) — track + knob 모두 light earth 결, knob 은 흰색 */
.form-switch .form-check-input:checked {
    background-color: var(--brand-earth-light);
    border-color: var(--brand-earth-soft);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23ffffff'/></svg>");
}
.form-switch .form-check-input:focus {
    border-color: var(--brand-earth-soft);
    box-shadow: 0 0 0 3px rgba(96, 40, 0, 0.2);
}

/* ===== Light Theme Overrides (legacy 보정, 위 --bs-* override 와 중복 가능) ===== */
.table-light {
    --bs-table-bg: var(--surface-2) !important;
    --bs-table-color: var(--text) !important;
    --bs-table-border-color: var(--border-new) !important;
}
.bg-light {
    background-color: var(--surface-2) !important;
    color: var(--text) !important;
}
/* Phase F.7: `.table` 자체를 preview.html `.data-table` 처럼 시각.
 * 카드 wrapping 없이도 테이블이 자체 surface/border/radius/cell padding/hover 갖도록.
 * preview.html line 255-284 패턴 글로벌화.
 */
.table {
    /* Phase F.7.3: Bootstrap --bs-table-* override — 기본 cream(body bg) 이 셀에 새는 것 차단 */
    --bs-table-bg: var(--surface);             /* 셀 bg = 흰색 (cream 새지 않게) */
    --bs-table-color: var(--text);             /* 셀 글자색 */
    --bs-table-hover-bg: var(--surface-2);     /* hover 시 cream 살짝 어둡게 */
    --bs-table-hover-color: var(--text);
    --bs-table-striped-bg: transparent;        /* zebra striping off (preview 패턴) */
    --bs-table-striped-color: var(--text);
    --bs-table-border-color: var(--border-new);

    background-color: var(--surface);
    border: 1px solid var(--border-new);
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-bottom: 0;
    border-collapse: separate;  /* radius 가 셀 border 에 잘리지 않도록 */
    border-spacing: 0;
}
/* 테이블 헤더 — preview .data-table thead th 패턴 (12px uppercase 0.06em surface-2 bg). `class="table"` 22 페이지 자동 발현
 * Phase F.7.13: padding 14px 16px → 14px 0.5rem (사용자 요청) */
.table thead th,
.table > thead {
    background-color: var(--surface-2);
    color: var(--text-muted);
    font-weight: 600;
    font-size: var(--text-12);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 14px 0.5rem;
    border-bottom: 1px solid var(--border-strong);
    vertical-align: middle;  /* Phase F.7.8: 헤더 세로 중앙정렬 */
}
/* 헤더의 .text-end 는 본문(우측)과 동일한 우측 정렬 — valuation 페이지 디자인 reference 표준
 * (2026-05-01). Phase F.7.13 의 center 결정은 sort 화살표 겹침 우려에서 나왔지만 실제로는
 * 화살표 ::after 가 텍스트 옆 inline-block 으로 붙어 겹치지 않는 것이 valuation 에서 검증됨.
 * 헤더와 본문 정렬 일치가 가독성에 우월. */
.table thead th.text-end {
    text-align: right !important;
}

/* 셀 — preview .data-table tbody td 패턴 (F.7.5: 13px → 라운드 1 14px 가독성 우선).
 * F.7.14: !important 로 .ps-3 (Bootstrap padding-left: 1rem !important) 무력화 — 모든 셀 0.5rem. */
.table tbody td {
    padding: 14px 0.5rem !important;
    font-size: 14px;
    border-bottom: 1px solid var(--border-new);
    font-feature-settings: "tnum";
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background-color: var(--surface-2); }
/* tfoot 도 동일 패턴 (합계 행). F.7.6: 13px → 라운드 1 14px (tbody 와 일치).
 * F.7.14: !important 로 .ps-3 무력화. */
.table tfoot td {
    padding: 14px 0.5rem !important;
    font-size: 14px;
    font-weight: 600;
    background-color: var(--surface-2);
    border-top: 2px solid var(--border-strong);
    font-feature-settings: "tnum";
}
/* table-responsive (가로 스크롤 wrapper) — preview .data-table 패턴 따라 외곽 흰색 border 발현.
 * wrapper 가 border + bg + radius 가짐, 자식 .table 은 border:none + radius:0 으로 위임
 * (radius 가 셀 모서리에 잘리지 않게 wrapper 에서만 처리). */
.table-responsive {
    background: var(--surface);
    border: 1px solid var(--border-new);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.table-responsive > .table {
    border: none;
    border-radius: 0;
}

/* project-card — 카드 그리드 페이지 (notebooks / ai-icm) 표준 카드 (라운드 3, 2026-05-02 글로벌 승격).
 * preview .notebook-card 결 — surface bg + border 1px + radius-card + padding 24px + hover scale + brand-earth-light border.
 * cardIn 애니메이션 보존 (.anim-done 가 끝나면 hover/active transform 활성화). */
.project-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 1.25rem;
    cursor: pointer;
    background: var(--surface);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.2s;
    opacity: 0;
    transform: translateY(16px);
    animation: cardIn 0.4s var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)) both;
}
.project-card.anim-done { animation: none; opacity: 1; transform: none; }
/* hover border 색은 anim-done 제약 없이 즉시 적용 (preview .stat-card 결).
 * scale/box-shadow 만 anim-done 클래스 후 활성화 (cardIn 애니메이션과 transform 충돌 방지). */
.project-card:hover { border-color: var(--brand-earth-light); }
.project-card.anim-done:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transform: scale(1.02);
}
.project-card.anim-done:active {
    transform: scale(0.97);
    transition: transform 0.08s ease-out;
}
@keyframes cardIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .project-card { opacity: 1; transform: none; animation: none; }
}
/* 카드 title — preview .notebook-card .title 결 통일 (라운드 3 후속 2026-05-02).
 * .project-card 안 h6/h5 와 .skill-card 안 .skill-name 모두 serif 22px fw 400. */
.project-card .title,
.project-card h5,
.project-card h6,
.skill-card .skill-name {
    font-family: var(--font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--text);
    margin: 0;
}

/* row-meta — 회사 셀 2단 sub-line 표준 (valuation reference, 2026-05-02 글로벌 승격).
 * 본문 셀의 회사명/주요 텍스트 아래에 회사코드·프로젝트명 등 부가 정보를 작게 표시.
 * 사용 예: <td>회사명<div class="row-meta">코드 · 프로젝트</div></td> */
.row-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 2px;
}
.row-meta .row-project {
    color: var(--brand-earth);
    font-weight: 500;
}

/* col-stack — 테이블 셀 내 2단 (stack-top + stack-bot) 표준.
 * 라운드 1 (2026-05-02): valuation 로컬 정의를 글로벌 승격. 투자방법/주수, 유형/금액 등 묶음.
 * 사용 예: <td class="col-stack"><div class="stack-top">투자방법</div><div class="stack-bot">구주신주</div></td>
 * stack-bot 값 없으면 col-stack-single 으로 단일 줄 세로 중앙. */
.table td.col-stack { white-space: normal; line-height: 1.3; }
.table td.col-stack .stack-top { color: var(--text); }
.table td.col-stack .stack-bot {
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    text-align: left;
    margin-top: 2px;
    font-size: 0.75rem;
}
.table td.col-stack-single .stack-top { display: flex; align-items: center; height: 100%; }

/* th-stack — 테이블 헤더 2단 (br 분리) 표준.
 * 사용 예: <th class="th-stack">대표이사<br>사업자번호</th>
 *         또는 행별 정렬용:
 *         <th class="th-stack"><span data-sort-key="A">..</span><br><span data-sort-key="B">..</span></th>
 * 두 줄 모두 동일 스타일(폰트·색)로 표시. line-height 만 압축. */
.table thead th.th-stack { line-height: 1.25; }
.table thead th.th-stack .th-sortable {
    cursor: pointer;
    user-select: none;
}
.table thead th.th-stack .th-sortable:hover {
    color: var(--brand-sky-deep, var(--status-info));
}
.table thead th.th-stack .th-sortable::after {
    content: '';
    display: inline-block;
    margin-left: 4px;
    color: var(--text-faint);
    font-size: 0.7rem;
}
.table thead th.th-stack .th-sortable:not(.sort-asc):not(.sort-desc):hover::after {
    content: '↕';
    opacity: 0.5;
}
.table thead th.th-stack .sort-asc::after { content: '▲'; }
.table thead th.th-stack .sort-desc::after { content: '▼'; }

/* KPI 인라인 요약 — 사후관리 담당자 .stat-inline 결 글로벌화 (라운드 1 후속, 2026-05-02).
 * 사용자 결정: 모든 페이지의 인라인 요약 폰트·weight·색을 단일 표준으로.
 * 12 페이지 .stat-inline 과 valuation .val-stat 도 alias 로 즉시 통일 (markup 무수정).
 * 컨테이너 .kpi-bar + 카드 .kpi-inline + 큰 | 구분자 .kpi-sep. */
.kpi-bar,
.stat-inline,
.val-stat,
.tp-stat {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 1rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding: 0.5rem 0;
}
.kpi-inline,
.stat-inline-item,
.val-stat > div,
.tp-stat > div {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap;
}
.kpi-inline .label,
.stat-inline-label {
    color: var(--text-faint);
    font-weight: 500;
    font-size: var(--text-sm);
}
.kpi-inline .value,
.stat-inline-value,
.val-stat b,
.tp-stat b {
    color: var(--text);
    font-weight: 700;
    font-size: 1.1rem;
    font-variant-numeric: tabular-nums;
}
/* .kpi-inline 안 보조 텍스트 (예: '잔액(감액미반영)') */
.kpi-inline small,
.kpi-inline .kpi-sub {
    font-size: var(--text-sm);
    color: var(--text-faint);
    font-weight: 400;
}
/* 같은 그룹 안 sibling 사이 가는 점 (자동) */
.kpi-inline + .kpi-inline,
.stat-inline-item + .stat-inline-item {
    margin-left: 0.4rem;
    padding-left: 0.7rem;
    position: relative;
}
.kpi-inline + .kpi-inline::before,
.stat-inline-item + .stat-inline-item::before {
    content: '·';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--border-strong);
    font-size: 1.1em;
    line-height: 1;
    user-select: none;
}
/* 명시적 그룹 구분자 (큰 |) — 인접 .kpi-inline 자동 점 무시 */
.kpi-bar .kpi-sep,
.stat-inline-sep,
.val-stat-sep,
.tp-stat-sep {
    display: inline-block;
    margin: 0 0.5rem;
    color: var(--border-strong);
    font-weight: 400;
    user-select: none;
}
.kpi-sep + .kpi-inline,
.stat-inline-sep + .stat-inline-item {
    margin-left: 0;
    padding-left: 0;
}
.kpi-sep + .kpi-inline::before,
.stat-inline-sep + .stat-inline-item::before { content: none; }

/* chip-toggle 안 i 정보 아이콘 — popover trigger nested span (button-in-button 회피).
 * tabindex/role=button 으로 키보드 접근. parent chip-toggle click handler 가 e.target 검사로 토글 무시. */
.chip-toggle .chip-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    border-radius: 50%;
    color: inherit;
    opacity: 0.7;
    cursor: help;
    transition: opacity 150ms ease;
}
.chip-toggle .chip-info:hover { opacity: 1; }
.chip-toggle[aria-pressed="true"] .chip-info { opacity: 0.85; }

/* KPI 큰 카드 — preview.html .stat-card 결 (보존, 라운드 1 에서 stat_card macro 는
 * 인라인을 채택. 큰 카드가 어울리는 페이지는 직접 .kpi-card 사용 가능). */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 24px;
    transition: transform 200ms var(--easing),
                border-color 200ms var(--easing);
}
.kpi-card:hover {
    transform: scale(1.02);
    border-color: var(--brand-earth-light);
}
.kpi-card .label {
    font-size: var(--text-12);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}
.kpi-card .value {
    font-family: var(--font-serif);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--text);
    font-feature-settings: "tnum";
    line-height: 1.1;
}
.kpi-card .delta {
    margin-top: 8px;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-feature-settings: "tnum";
}
.kpi-card .delta.positive { color: var(--data-positive); }
.kpi-card .delta.negative { color: var(--data-negative); }
.kpi-card .delta.neutral { color: var(--text-muted); }
@media (max-width: 900px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-card { padding: 16px; }
    .kpi-card .value { font-size: 28px; }
}

/* === Phase F: .data-table 표준 (preview.html 255-284 패턴) ===
 * `<table class="data-table">` 로 적용. 자체 surface bg + border + radius 까지 부착.
 * `.table` 와 헤더 typography 동일, 추가로 cell tabular-nums + .num/.pos/.neg/.badge-grade-* 유틸 제공.
 */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border-new);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.data-table thead th {
    background: var(--surface-2);
    padding: 14px 16px;
    font-size: var(--text-12);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border-strong);
    text-align: left;
}
.data-table tbody td {
    padding: 14px 16px;
    font-size: var(--text-14);
    border-bottom: 1px solid var(--border-new);
    font-feature-settings: "tnum";
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--surface-2); }
/* `.num` 은 기존 `.text-end` 와 호환 (둘 다 우측 정렬 + tnum). 기존 `.text-end` 보존, `.num` 은 추가만. */
.data-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.data-table .pos { color: var(--data-positive); }
.data-table .neg { color: var(--data-negative); }
/* Phase F.6.2: 글로벌 utility — 모든 테이블에서 손익/등락 셀에 사용. .data-table 안 .pos/.neg 와 동일 색.
 * !important: Bootstrap `.table > :not(caption) > * > * { color: var(--bs-table-color) }` (specificity 0,2,0)
 * 이 utility class (0,1,0) 를 이기는 것 차단. 토큰 기반이라 다크 자동 반응 보존. */
.data-positive { color: var(--data-positive) !important; }
.data-negative { color: var(--data-negative) !important; }

/* Phase F.7.4: 숫자 셀 우측정렬 + tabular-nums 강제 (preview .num 패턴 글로벌화).
 * Bootstrap .text-end 와 호환 — 둘 다 부착 OK.
 * F.7.13: padding-right 별도 override 제거 (모든 셀 0.5rem 통일). */
.table tbody .text-end,
.table tbody .text-right,
.table tbody .num,
.table tfoot .text-end,
.table tfoot .num,
.num {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
.data-table .badge-grade-a { background: var(--brand-sky-soft); color: var(--brand-sky-deep); padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.data-table .badge-grade-b { background: rgba(96, 40, 0, 0.08); color: var(--brand-earth); padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.data-table .badge-grade-c { background: rgba(184, 134, 11, 0.12); color: var(--warning); padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.data-table .badge-grade-d { background: rgba(217, 119, 6, 0.12); color: var(--warning); padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }
.data-table .badge-grade-e { background: rgba(229, 72, 77, 0.12); color: var(--data-positive); padding: 2px 8px; border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; }

/* === Phase F: .field-group 표준 라벨 (preview.html 322-337) === */
.field-group { display: flex; flex-direction: column; gap: 6px; }
.field-group > label,
.field-group > .form-label {
    font-size: var(--text-12);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0;
}

/* === filter-bar 글로벌 (valuation reference, 2026-05-02 라운드 1 승격, 라운드 4 높이 32px 강제) ===
 * 한 줄 inline 필터 컨테이너. 라벨 없이 placeholder/select default 만으로 식별. */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.filter-bar select,
.filter-bar input,
.filter-bar .form-control,
.filter-bar .form-select,
.filter-bar .btn,
.filter-bar .multi-select-wrap > .form-select,
.filter-bar .chip-toggle {
    font-size: 0.84rem;
    height: 32px;
    width: auto;
    box-sizing: border-box;
}
.filter-bar select,
.filter-bar .form-select {
    min-width: 140px;
    max-width: 240px;
    flex: 0 0 auto;
}
.filter-bar input[type="search"],
.filter-bar input[type="text"] {
    min-width: 160px;
    flex: 0 0 auto;
}
.filter-bar .chip-toggle { flex: 0 0 auto; }
/* form-switch 높이 통일 */
.filter-bar .form-check.form-switch {
    height: 32px;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}
.filter-bar .form-check.form-switch .form-check-input {
    margin-top: 0;
    height: 18px;
}
.filter-bar .btn-group { height: 32px; }
.filter-bar .btn-group .btn {
    height: 32px;
    --bs-btn-border-radius: 12px;  /* chip-toggle 과 동일 곡률, 사용자 명시 2026-05-02 */
    /* Bootstrap py-0 + line-height 1.5 가 32px height 안에서 텍스트가 위로 6.25px 치우침 회귀.
       inline-flex + align-items: center 로 box 중앙 강제. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* action-bar — 검색옵션 행 아래 별도 행 (라운드 4 사용자 사양 7) */
.action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.action-bar .btn { height: 32px; }

/* page-bar — n건 보기 + 페이지네이션 표준 (라운드 4 사용자 사양 4)
 * 행 우측 (.ms-auto) inline. valuation reference 결. */
.page-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.84rem;
}
.page-bar .form-select {
    width: auto;
    height: 32px;
}
.page-bar .btn {
    height: 32px;
    min-width: 32px;
    padding: 0 0.5rem;
}

/* hr 글로벌 — preview.html 의 hairline divider 결.
 * Bootstrap 기본 (currentColor opacity 0.25) 은 본문색이라 너무 진함.
 * --border (rgba(0,0,0,0.08)) 로 옅게 + opacity 1 로 색 보존. */
hr {
    border: 0;
    border-top: 1px solid var(--border);
    opacity: 1;
    background: transparent;
}

/* section-divider — 섹션 사이 충분한 여백 (상장·등급·데이터관리·overview 등 다중 섹션 페이지).
 * preview hairline + spacious gap. */
.section-divider {
    margin: 3.5rem 0;
}

/* section-title — 카드 wrap 안에 있던 의미 있는 섹션 title 보존용 (사용자 사양 11)
 * 카드 제거 후에도 .table-responsive 위에 살림. */
.section-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text);
    margin: 0.5rem 0 0.5rem 0;
    letter-spacing: -0.01em;
}

/* sortable — 글로벌 .table thead th.sortable (valuation 라인 42-47 글로벌화, 라운드 4) */
.table thead th.sortable {
    cursor: pointer;
    user-select: none;
}
.table thead th.sortable:hover {
    background-color: var(--surface-3, var(--surface-2));
}
.table thead th.sortable::after {
    content: '';
    display: inline-block;
    margin-left: 4px;
    color: var(--text-faint);
    font-size: 0.7rem;
}
.table thead th.sortable:not(.sort-asc):not(.sort-desc):hover::after {
    content: '↕';
    opacity: 0.5;
}
.table thead th.sort-asc::after { content: '▲'; }
.table thead th.sort-desc::after { content: '▼'; }

.filter-bar .ac-wrap {
    position: relative;
}
.filter-bar .ac-wrap input[type="text"] {
    padding-right: 24px;
    min-width: 160px;
}

/* === Phase F: .chip-toggle 글로벌 (third_party_transactions.html 인라인 → 글로벌 SSOT) ===
 * 이진 필터 토글. <button class="chip-toggle" aria-pressed="true|false">. 활성 시 brand-earth fill + white dot.
 */
.chip-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-strong);
    border-radius: 12px;  /* 라디오 버튼과 동일 곡률, 사용자 명시 2026-05-02 (조금 더 크게) */
    color: var(--text-muted);
    background: var(--surface);
    cursor: pointer;
    transition: all var(--duration-short) var(--easing);
    font-size: var(--text-sm);
    font-family: inherit;
    line-height: 1.5;  /* Bootstrap btn 과 동일 — 한글 baseline 이 line-box 중앙에 자연 정렬 */
    vertical-align: middle;
}
.chip-toggle::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--border-strong);
    transition: background var(--duration-short) var(--easing);
}
.chip-toggle:hover { border-color: var(--brand-earth); color: var(--text); }
.chip-toggle:hover::before { background: var(--brand-earth-soft); }
/* 활성 fill — light earth 결 (사용자 명시 2026-05-02 후속: 라디오/스위치 결과 동일, brand-earth-light bg + 흰색 텍스트·dot) */
.chip-toggle[aria-pressed="true"] {
    background: var(--brand-earth-light);
    border-color: var(--brand-earth-soft);
    color: #ffffff;
    font-weight: 600;
}
.chip-toggle[aria-pressed="true"]::before { background: #ffffff; }
.chip-toggle[aria-pressed="true"]:hover { filter: brightness(0.97); }
.chip-toggle:focus-visible { outline: 2px solid var(--brand-earth-soft); outline-offset: 2px; }
[data-theme="dark"] .chip-toggle[aria-pressed="true"] { color: #ffffff; }
[data-theme="dark"] .chip-toggle[aria-pressed="true"]::before { background: #ffffff; }
.dataTables_wrapper .table thead th {
    background-color: var(--surface-2) !important;
}
/* Bootstrap 컴포넌트 라이트 테마 보정 */
.table { color: var(--text); }
.table > :not(caption) > * > * { border-bottom-color: var(--border-new); }
.modal-content { background-color: var(--surface); border: 1px solid var(--border-new); }
.dropdown-menu { background-color: var(--bg); border: 1px solid var(--border-strong); box-shadow: var(--shadow-hover); }
.dropdown-item { color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--bg-hover); color: var(--text); }
.form-control, .form-select { background-color: var(--surface); border-color: var(--border-strong); color: var(--text); }
/* Phase D: form focus ring 은 위 .form-control:focus brand-earth 룰이 처리. 여기 색 override 제거. */
.form-control::placeholder { color: var(--text-faint); }

/* Disabled form-control — 라이트/다크 모두 가독 (Bootstrap default 가 다크 환경
 * 미보정이라 cream/light bg 가 강제 적용되는 회귀 방지) */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--surface-2) !important;
    color: var(--text-muted) !important;
    border-color: var(--border-new) !important;
    opacity: 0.7;
    cursor: not-allowed;
}
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly],
[data-theme="dark"] .form-select:disabled {
    background-color: var(--surface-2) !important;
    color: var(--text-muted) !important;
    opacity: 0.6;
}
/* input[type="date"]/[time] 의 webkit datetime-edit placeholder 색은 form-control color 를 자동 상속 안 함 — 명시 보강 */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
    color: var(--text);
    color-scheme: light;
}
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
    color: var(--text);
}
input[type="date"]:invalid::-webkit-datetime-edit,
input[type="time"]:invalid::-webkit-datetime-edit {
    color: var(--text-faint);
}
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"] {
    color-scheme: dark;
}

/* ===== Global ===== */
html {
    background-color: var(--bg);
}

body {
    background-color: var(--bg);
    font-family: var(--font-sans);
    color: var(--text);
    font-size: var(--text-base);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
}

/* 숫자 데이터 정렬 — 테이블/카드의 수치가 열 기준으로 정렬됨 */
.table td, .table th, .summary-card .fw-bold, .fs-4, .fs-3, .fs-2 {
    font-variant-numeric: tabular-nums;
}

/* 페이지 제목 (legacy h5 패턴, BC 후 page-header macro 로 점진 교체) */
h5.fw-bold { font-size: var(--text-xl); letter-spacing: -0.3px; }

/* ===== Phase BC: page-header macro 컴포넌트 (DESIGN.md Section 8) =====
 * Editorial Data Tool — serif title + warm cream bg + ample whitespace.
 * 반응형: 1600px↓ 80px, 768px↓ 64px (모바일).
 */
.page-header {
    padding: 96px 0 0;
    padding-bottom: 3.5rem;
    margin-bottom: 3.5rem;
    border-bottom: 1px solid var(--border);
}
.page-header-meta {
    font-family: var(--font-mono);
    font-size: var(--text-12);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-faint);
    margin-bottom: 12px;
}
.page-header-title {
    font-family: var(--font-serif);
    font-weight: 400;
    font-size: var(--text-48);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}
.page-header-subtitle {
    font-family: var(--font-sans);
    font-size: var(--text-18);
    line-height: 1.5;
    color: var(--text-muted);
    margin: 16px 0 0;
    max-width: 60ch;
}
.page-header-actions {
    margin-top: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}
@media (max-width: 1600px) {
    .page-header { padding: 80px 0 0; padding-bottom: 3rem; margin-bottom: 3rem; }
    .page-header-title { font-size: var(--text-32); }
}
@media (max-width: 768px) {
    .page-header { padding: 64px 0 0; padding-bottom: 2rem; margin-bottom: 2rem; }
    .page-header-title { font-size: var(--text-32); }
    .page-header-subtitle { font-size: var(--text-16); }
}

.body-wrapper { width: 100%; background-color: var(--bg); min-height: 100vh; }
.content-area { margin: 0 auto; }
.content-area.xwide { max-width: 2400px; }
.content-area.wide  { max-width: 2000px; }
.content-area.large { max-width: 1700px; }
.content-area.mid   { max-width: 1400px; }
.content-area.narrow { max-width: 1200px; }
.content-area.small { max-width: 1000px; }

/* ===== Navbar ===== */
.main-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--bg);
    border-bottom: 1px solid var(--border-new);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: none;
    padding: 0.5rem 0;
}

.main-navbar .navbar-brand {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text);
    letter-spacing: -0.02em;
    padding: 0.5rem 0;
}

.main-navbar .navbar-brand:hover {
    color: var(--accent);
}

.brand-text {
    color: inherit;
    -webkit-text-fill-color: inherit;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
}

/* ── Nav groups (default / desktop) ─────────────────────────────── */
.nav-pills-custom {
    gap: 0.25rem;
    align-items: center;
}

.nav-group {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-group-divider {
    display: none;  /* YC-style: 그룹 간 구분 라벨 자체로 충분, divider 불필요 */
}

/* 그룹 라벨 = hover 트리거 (preview type-meta 결: mono + 12px + uppercase + 0.08em) */
.nav-group-label {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    cursor: default;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s var(--ease-out-quart), background 0.15s var(--ease-out-quart);
}

.nav-group:hover .nav-group-label,
.nav-group:focus-within .nav-group-label {
    color: var(--text);
    background: var(--bg-hover);
}

/* 그룹 안에 활성 페이지가 있으면 라벨에 brand 밑줄 (텍스트 폭만큼, preview 결) */
.nav-group:has(.nav-link.active) .nav-group-label {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 12px;
}

/* hover 영역 끊김 방지 — 라벨과 드롭다운 사이 보이지 않는 다리 */
.nav-group::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 8px;
}

/* 드롭다운 패널 */
.nav-group-items {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 180px;
    padding: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border-new);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s var(--ease-out-quart), transform 0.15s var(--ease-out-quart);
    z-index: 1040;
}

.nav-group:hover .nav-group-items,
.nav-group:focus-within .nav-group-items {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* 드롭다운 안의 링크 */
.nav-pills-custom .nav-link {
    color: var(--text-muted);
    font-size: 0.88rem;
    font-weight: 500;
    padding: 0.45rem 0.7rem;
    border-radius: 6px;
    white-space: nowrap;
    transition: color 0.15s var(--ease-out-quart), background 0.15s var(--ease-out-quart);
    display: flex;
    align-items: center;
}

.nav-pills-custom .nav-link:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.nav-pills-custom .nav-link.active {
    color: var(--text);
    background: transparent;
    font-weight: 500;
}

/* ── 좁은 화면 (<768px): 라벨/패딩만 살짝 축소 (햄버거 없이 inline 유지) ─ */
@media (max-width: 767.98px) {
    .main-navbar {
        padding: 0.3rem 0;
    }
    .main-navbar .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    .nav-pills-custom {
        gap: 0;
    }
    .nav-group-label {
        font-size: 0.82rem;
        padding: 0.35rem 0.55rem;
    }
    .main-navbar .navbar-brand {
        font-size: 1.1rem;
    }
}

/* ===== File History ===== */
.history-item {
    border-left: 3px solid transparent;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.history-item:hover {
    border-left-color: var(--accent);
    background-color: var(--bg-hover);
}

/* ===== Upload page ===== */
.drop-zone {
    border: 2px dashed var(--border-strong);
    border-radius: 12px;
    padding: 3rem 2rem;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-faint);
    background: var(--bg-inset);
}

.drop-zone:hover,
.drop-zone-active {
    border-color: var(--accent);
    background-color: var(--drop-zone-active);
    color: var(--accent);
}

.drop-zone-selected {
    border-color: var(--status-success);
    background-color: var(--drop-zone-selected);
    color: var(--status-success);
}

/* ===== Dashboard ===== */
.summary-card {
    border: 1px solid var(--border-new);
    box-shadow: var(--shadow-card);
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    background: var(--surface);
    min-height: 82px; /* CLS 방지 */
}

.summary-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* DataTable 검색창 focus shadow 잘림 방지 */
.dataTables_wrapper { padding: 12px; }

/* ===== Phase D: DataTables 1.13.6 brand 톤 통합 ===== */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    color: var(--text-muted);
    font-size: var(--text-14);
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: var(--radius-button);
    padding: 4px 10px;
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--brand-earth);
    box-shadow: 0 0 0 3px rgba(96, 40, 0, 0.12);
    outline: none;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-muted) !important;
    background: var(--surface);
    border: 1px solid var(--border-new);
    border-radius: var(--radius-button);
    margin: 0 2px;
    padding: 4px 10px;
    transition: background var(--duration-short) var(--easing),
                color var(--duration-short) var(--easing);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--surface-2) !important;
    color: var(--brand-earth) !important;
    border-color: var(--brand-earth);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--brand-earth) !important;
    color: var(--surface) !important;
    border-color: var(--brand-earth);
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--text-faint) !important;
    background: var(--surface);
    border-color: var(--border-new);
    cursor: not-allowed;
}
/* Sort header — earth-tinted 화살표 */
.table thead th.sorting,
.table thead th.sorting_asc,
.table thead th.sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: 24px;
}
.table thead th.sorting::after,
.table thead th.sorting_asc::after,
.table thead th.sorting_desc::after {
    color: var(--text-faint);
    opacity: 0.7;
}
.table thead th.sorting_asc::after,
.table thead th.sorting_desc::after {
    color: var(--brand-earth);
    opacity: 1;
}
/* row hover (cream 위 surface-2) */
.table tbody tr:hover {
    background-color: var(--surface-2);
}

/* Returns */
.return-positive {
    color: var(--status-danger);
    font-weight: 600;
}

.return-negative {
    color: var(--status-info);
    font-weight: 600;
}

.return-zero {
    color: var(--status-neutral);
}

/* ===== Tables ===== */
#mainTable th,
#ipoTable th {
    font-size: 0.85rem;
    white-space: nowrap;
    background-color: var(--surface-2);
}

#mainTable td,
#ipoTable td {
    font-size: 0.85rem;
    vertical-align: middle;
}

/* ===== Cards ===== */
.card {
    border: 1px solid var(--border-new);
    box-shadow: var(--shadow-card);
    border-radius: 12px;
    transition: box-shadow 0.15s ease;
    background: var(--surface);
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

.card-header {
    background-color: var(--surface-2);
    border-bottom: 1px solid var(--border-new);
    border-radius: 12px 12px 0 0 !important;
}

/* ===== Charts ===== */
#marketChart,
#returnChart {
    max-height: 350px;
}

/* ===== Placeholder pages ===== */
.placeholder-page h2 {
    color: var(--text);
    font-weight: 700;
}

.placeholder-page .text-muted {
    font-size: 1.05rem;
}

/* ===== Watchlist: Traffic Lights ===== */
.traffic-light {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: middle;
}

.traffic-danger { background-color: var(--status-danger); }
.traffic-warning { background-color: var(--status-warning); }
.traffic-safe { background-color: var(--status-success); }
.traffic-unknown { background-color: var(--status-neutral); }

.traffic-lights-group {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* ===== Watchlist: Status Indicator ===== */
.status-indicator {
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-indicator.traffic-danger {
    background: radial-gradient(circle at 35% 35%, #ff8a8a, var(--status-danger));
    box-shadow: 0 0 6px rgba(229, 72, 77, 0.3);
}

.status-indicator.traffic-warning {
    background: radial-gradient(circle at 35% 35%, #fbbf24, var(--status-warning));
    box-shadow: 0 0 6px rgba(217, 119, 6, 0.3);
}

.status-indicator.traffic-safe {
    background: radial-gradient(circle at 35% 35%, #6ee7a0, var(--status-success));
    box-shadow: 0 0 6px rgba(24, 160, 88, 0.25);
}

.status-indicator.traffic-unknown {
    background: radial-gradient(circle at 35% 35%, #d1d5db, var(--status-neutral));
    box-shadow: 0 0 6px rgba(139, 145, 158, 0.25);
}

/* ===== Watchlist: Company Check Row (kpi-card 결 차용 — surface bg, 1px border, radius-card, hover scale + brand-earth-light, status border-left 4px 유지) ===== */
.company-check-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    margin-bottom: 8px;
    overflow: hidden;
    transition: transform 200ms var(--easing),
                border-color 200ms var(--easing),
                box-shadow 200ms var(--easing);
    border-left: 4px solid var(--status-neutral);
}

.company-check-row:hover {
    transform: scale(1.01);
    border-color: var(--brand-earth-light);
}

/* Segmented tab group — 노트북 ctx-mode-group 결을 글로벌 탭 UI 로 차용
   (watchlist 시장 탭, notebooks/ai_committee 상태 필터 등 공용).
   세로 크기는 form-control-sm 와 동일 (~31px) 로 정렬. */
.seg-tab-group {
    display: inline-flex;
    background: var(--surface-2);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.seg-tab-group .seg-tab-btn {
    border: none;
    background: transparent;
    color: var(--text-faint);
    font-size: 0.82rem;
    font-weight: 500;
    padding: 3px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.5;
}
.seg-tab-group .seg-tab-btn:hover { color: var(--text-muted); }
.seg-tab-group .seg-tab-btn.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-card);
}

/* status border-left 색은 hover 시에도 보존 (시각 식별 우선) */
.company-check-row.status-border-danger { border-left-color: var(--status-danger); }
.company-check-row.status-border-danger:hover { border-left-color: var(--status-danger); }
.company-check-row.status-border-warning { border-left-color: var(--status-warning); }
.company-check-row.status-border-warning:hover { border-left-color: var(--status-warning); }
.company-check-row.status-border-safe { border-left-color: var(--status-success); }
.company-check-row.status-border-safe:hover { border-left-color: var(--status-success); }
.company-check-row.status-border-unknown { border-left-color: var(--status-neutral); }
.company-check-row.status-border-unknown:hover { border-left-color: var(--status-neutral); }

.company-check-header {
    padding: 12px 16px;
    cursor: pointer;
    background-color: var(--surface);
}

/* 세부 테이블 — 세로 구분선 제거 (가로선만 유지) */
.company-check-detail .table th,
.company-check-detail .table td {
    border-left: 0;
    border-right: 0;
}

/* Collapse arrow rotation */
.collapse-arrow {
    transition: transform 0.25s ease;
    color: var(--text-faint);
}

.company-check-header[aria-expanded="true"] .collapse-arrow {
    transform: rotate(180deg);
}

/* Detail section — 홈 배경색과 동일 (펼친 영역 시각적으로 페이지 배경에 녹아듦) */
.company-check-detail {
    padding: 0 16px 16px;
    background-color: var(--bg);
    border-top: 1px solid var(--border-new);
}

.company-check-detail .table {
    font-size: 0.85rem;
}

.company-check-detail .table th {
    background-color: var(--surface-2);
    font-weight: 600;
    white-space: nowrap;
}

/* Check row status highlights */
.check-row-danger { background-color: var(--status-danger-bg); }
.check-row-warning { background-color: var(--status-warning-bg); }
.check-row-exempt { background-color: var(--status-info-bg); }

/* Exempt (유예) styles */
.traffic-exempt {
    position: relative;
    opacity: 0.5;
}
.traffic-exempt::after {
    content: '';
    position: absolute;
    top: 50%; left: -1px; right: -1px;
    height: 2px;
    background: var(--surface);
    transform: rotate(-45deg);
}

.badge-exempt {
    background-color: var(--status-info);
    font-size: 0.7em;
}

.badge-division {
    background-color: #2563eb;
    font-size: 0.75em;
    font-weight: 500;
}
.badge-profit-unrealized {
    background-color: #20c997;
}

.badge-desig-admin {
    background-color: var(--status-danger);
    color: #fff;
    font-size: 0.72em;
    font-weight: 600;
}
.badge-desig-caution {
    background-color: var(--status-warning);
    color: #212529;
    font-size: 0.72em;
    font-weight: 600;
}
.badge-desig-review {
    background-color: var(--status-purple);
    color: #fff;
    font-size: 0.72em;
    font-weight: 600;
}

/* ===== Watchlist: Regulation Info Button ===== */
.btn-reg-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-faint);
    cursor: pointer;
    vertical-align: middle;
    margin-left: 4px;
    border-radius: 50%;
    transition: color 0.15s ease;
}

.btn-reg-info:hover,
.btn-reg-info:focus {
    color: var(--status-info);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59, 125, 221, 0.3);
}

.popover {
    max-width: 400px;
}

.popover-body {
    font-size: 0.82rem;
    line-height: 1.55;
    white-space: pre-line;
}

/* ===== Watchlist: Tabs ===== */
#marketTabs .nav-link {
    font-size: 0.9rem;
    color: var(--text-muted);
}

#marketTabs .nav-link.active {
    font-weight: 600;
}

/* ===== Watchlist: AI Commentary ===== */
.btn-ai-comment {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #fff;
    background-color: var(--status-purple);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    line-height: 1.4;
    vertical-align: middle;
}

.btn-ai-comment:hover {
    background-color: #8b5cf6;
}

.btn-ai-comment:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ai-commentary-box {
    background-color: var(--status-purple-bg);
    border: 1px solid rgba(124, 92, 252, 0.2);
    border-radius: 6px;
    padding: 8px 12px;
    margin-top: 8px;
    margin-bottom: 12px;
    font-size: 0.83rem;
    line-height: 1.5;
    color: #5b46b5;
}

.ai-commentary-box.ai-commentary-error {
    background-color: var(--status-danger-bg);
    border-color: rgba(229, 72, 77, 0.2);
    color: var(--status-danger);
}

.ai-commentary-label {
    display: inline-block;
    background-color: var(--status-purple);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0px 5px;
    border-radius: 3px;
    margin-right: 4px;
    vertical-align: middle;
}

.ai-commentary-loading {
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 0.83rem;
    color: var(--text-faint);
}

/* ===== Watchlist: Adhoc Search Dropdown ===== */
.adhoc-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--surface);
    border: 1px solid var(--border-new);
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: var(--shadow-hover);
    max-height: 300px;
    overflow-y: auto;
}

.adhoc-dropdown-item {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-new);
    font-size: 0.9rem;
}

.adhoc-dropdown-item:last-child {
    border-bottom: none;
}

.adhoc-dropdown-item:hover,
.adhoc-dropdown-item.adhoc-dropdown-active {
    background-color: var(--bg-hover);
}

/* ===== Watchlist: Adhoc History ===== */
.adhoc-history-item {
    position: relative;
}

.adhoc-delete-btn {
    position: absolute;
    top: -7px;
    right: -7px;
    z-index: 10;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--border-new);
    background: var(--surface);
    color: var(--text-faint);
    font-size: 0.85rem;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow: var(--shadow-card);
}

.adhoc-delete-btn:hover {
    background: var(--status-danger);
    border-color: var(--status-danger);
    color: #fff;
}

/* ===== User Menu Button ===== */
.btn-user-menu {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    background: transparent;
}

.btn-user-menu:hover,
.btn-user-menu:focus,
.btn-user-menu.show {
    color: var(--text);
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

/* Avatar variant (desktop user button — preview style: 원형 + 성 1글자) */
.btn-user-avatar {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    background: var(--brand-earth-soft, var(--accent));
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0;
    border: 1px solid transparent;
    line-height: 1;
}

.btn-user-avatar:hover,
.btn-user-avatar:focus,
.btn-user-avatar.show {
    background: var(--accent);
    color: #fff;
    border-color: transparent;
}

/* Bootstrap dropdown caret 제거 (avatar 모드) */
.btn-user-avatar::after {
    display: none !important;
}

/* ===== Auth Brand Button ===== */
.btn-brand {
    background: linear-gradient(135deg, var(--accent), var(--accent-end));
    border: none;
    color: #fff;
}
.btn-brand:hover {
    opacity: 0.9;
    color: #fff;
}

/* ===== 검색 input X(초기화) 버튼 ===== */
.input-clear-wrap { position: relative; display: inline-block; }
.input-clear-wrap > input { padding-right: 24px !important; }
.input-clear-btn {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 0; line-height: 1;
    color: var(--text-faint); font-size: 14px; cursor: pointer; display: none;
}
.input-clear-btn:hover { color: var(--text-muted); }
/* 파일 검색 툴바 내부에서는 래퍼가 flex item 으로 동작해야 함 */
.file-search-toolbar > .input-clear-wrap { display: block; flex: 1 1 0%; min-width: 0; }

/* ===== Animation System ===== */

/* Easing tokens */
:root {
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
}

/* Keyframes */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

/* Reveal class — elements start hidden, animate when .is-visible is added */
.reveal {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.45s var(--ease-out-quart), transform 0.45s var(--ease-out-quart);
}
.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children — add stagger-N class or use CSS custom property */
.reveal.stagger-1 { transition-delay: 0.04s; }
.reveal.stagger-2 { transition-delay: 0.08s; }
.reveal.stagger-3 { transition-delay: 0.12s; }
.reveal.stagger-4 { transition-delay: 0.16s; }
.reveal.stagger-5 { transition-delay: 0.20s; }
.reveal.stagger-6 { transition-delay: 0.24s; }

/* Enhanced hover — cards */
.summary-card {
    transition: transform 0.2s var(--ease-out-quart), box-shadow 0.2s var(--ease-out-quart);
}
.summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}

.card {
    transition: box-shadow 0.2s var(--ease-out-quart), transform 0.2s var(--ease-out-quart);
}
.card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* DataTable row fade-in */
.dataTable tbody tr {
    animation: fadeInUp 0.35s var(--ease-out-quart) both;
}
.dataTable tbody tr:nth-child(1)  { animation-delay: 0s; }
.dataTable tbody tr:nth-child(2)  { animation-delay: 0.02s; }
.dataTable tbody tr:nth-child(3)  { animation-delay: 0.04s; }
.dataTable tbody tr:nth-child(4)  { animation-delay: 0.06s; }
.dataTable tbody tr:nth-child(5)  { animation-delay: 0.08s; }
.dataTable tbody tr:nth-child(6)  { animation-delay: 0.1s; }
.dataTable tbody tr:nth-child(7)  { animation-delay: 0.12s; }
.dataTable tbody tr:nth-child(8)  { animation-delay: 0.14s; }
.dataTable tbody tr:nth-child(9)  { animation-delay: 0.16s; }
.dataTable tbody tr:nth-child(10) { animation-delay: 0.18s; }

/* Button press effect */
.btn-brand:active, .btn:active {
    transform: scale(0.97);
}
.btn {
    transition: all 0.15s var(--ease-out-quart);
}

/* Nav link transition */
.nav-pills-custom .nav-link {
    transition: all 0.15s var(--ease-out-quart);
}

/* Collapse smooth transition (Bootstrap override) */
.collapsing {
    transition: height 0.3s var(--ease-out-quart);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .dataTable tbody tr { animation: none; }
    .summary-card, .card { transition: none; }
    .collapsing { transition: none; }
    .skeleton { animation: none; }
}

/* ===== Skeleton Loading ===== */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--bg-hover) 37%, var(--surface-2) 63%);
    background-size: 800px 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 6px;
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

/* Skeleton stat card value */
.skeleton-value {
    display: inline-block;
    height: 1.6em;
    width: 70%;
    border-radius: 4px;
}

.progress-subtle .progress-bar.indeterminate {
    width: 30%;
    animation: indeterminate 1.5s ease infinite;
}
@keyframes indeterminate {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ===== Inline Stats =====
 * 라운드 1 후속 (2026-05-02): .stat-inline / .val-stat / .kpi-bar 글로벌 alias 통합 (위 .kpi-bar 섹션).
 * 단일 진실 공급원 한 곳에서 정의. 본 섹션은 의도적 비움. */

/* ===== Empty State ===== */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--text-faint);
}
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--surface-2);
    margin-bottom: 1rem;
    color: var(--text-faint);
}
.empty-state-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}
.empty-state-desc {
    font-size: 0.84rem;
    color: var(--text-faint);
    margin-bottom: 0;
    line-height: 1.5;
}

/* DataTables empty override */
.dataTables_empty {
    padding: 2.5rem 1rem !important;
    color: var(--text-faint) !important;
    font-size: 0.88rem;
}

/* ===== Mobile Adaptation (≤768px) ===== */
@media (max-width: 768px) {
    /* ── 드래그앤드롭 업로드존 숨김 (테이블 페이지 전용, 노트북 사이드바의 .nb-drop-zone 은 제외) ── */
    .drop-zone, .upload-area,
    #uploadZone { display: none !important; }

    /* ── 필터 모바일 숨김 ── */
    .mob-hide { display: none !important; }

    /* ── 컨테이너 패딩 축소 ── */
    .container-fluid { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }

    /* ── 요약 카드 + 액션 버튼 그룹 숨김 ── */
    .summary-card,
    .d-flex:has(> .summary-card) { display: none !important; }

    /* ── DataTables 건수 선택 + 페이지네이션 간소화 ── */
    .dataTables_length { display: none !important; }
    .dataTables_paginate .page-item.previous,
    .dataTables_paginate .page-item.next { display: none !important; }

    /* ── 모바일 테이블 공통 ── */
    .table { font-size: 0.75rem !important; }
    .table th { text-align: center; }
    .table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* 빈 상태 colspan이 칼럼 레이아웃 깨뜨리는 것 방지 */
    td:has(> .empty-state) { display: none !important; }
    /* colgroup 제거 → fixed layout에서 th 기반 균등 분배 */
    #balTable colgroup, #txTable colgroup, #companiesTable colgroup,
    #fundsTable colgroup, #imTable colgroup, #pmTable colgroup { display: none; }

    /* ── 문서 + 지식베이스: 문서명(1)만 ── */
    .doc-table th:nth-child(n+2),
    .doc-table td:nth-child(n+2) { display: none !important; }

    /* ── 액션 버튼 그룹 숨김 (admin 페이지들의 상단 버튼 행) ── */
    .d-flex.gap-2.mb-3.flex-wrap { display: none !important; }

    /* ── 등급 분포: 등급 + 최근 분기만 ── */
    #summaryTable th:nth-child(n+2):nth-last-child(n+2),
    #summaryTable td:nth-child(n+2):nth-last-child(n+2) { display: none !important; }
    #summaryTable th:first-child { text-align: left !important; }

    /* ── 등급: 등급(1), 업체명(2)만 ── */
    #gradesTable { table-layout: fixed !important; width: 100% !important; }
    #gradesTable th:nth-child(n+3),
    #gradesTable td:nth-child(n+3) { display: none !important; width: 0 !important; }
    #gradesTable th:nth-child(1) { width: 15% !important; }
    #gradesTable th:nth-child(2) { width: 85% !important; }

    /* ── 투자현황: 재원(1), 투자원금(8), 회수총액(9), 감액금액(11), 투자잔액(12)만 ──
     * Phase F.7.7: 프로젝트명 칼럼 (was idx 3) 삭제 → 후속 인덱스 -1.
     */
    #balTable thead th:nth-child(n+2):nth-child(-n+7),
    #balTable tbody td:nth-child(n+2):nth-child(-n+7),
    #balTable thead th:nth-child(10),
    #balTable tbody td:nth-child(10),
    #balTable thead th:nth-child(n+13),
    #balTable tbody td:nth-child(n+13) { display: none !important; }
    /* tfoot: 숨길 셀 (colspan은 JS에서 조정). 인덱스 매핑은 프로젝트 칼럼 빠져도 동일. */
    #balTable tfoot td:nth-child(4),
    #balTable tfoot td:nth-child(n+7) { display: none !important; }

    /* ── 거래내역: 거래일자(2), 재원(3), 거래구분(10), 거래원금(11), 투자잔액(12)만 ── */
    #txTable thead th:nth-child(1),
    #txTable tbody td:nth-child(1),
    #txTable thead th:nth-child(n+4):nth-child(-n+9),
    #txTable tbody td:nth-child(n+4):nth-child(-n+9),
    #txTable thead th:nth-child(n+13),
    #txTable tbody td:nth-child(n+13) { display: none !important; }

    /* ── 피투자사: 기준일자 숨김 + 검색 50:50 ── */
    #refDateGroup { display: none !important; }
    #companiesTable_wrapper > div:first-child { flex-wrap: nowrap !important; gap: 0.5rem; }
    #companiesTable_wrapper .dataTables_filter { flex: 1 1 0 !important; min-width: 0 !important; }
    #companiesTable_wrapper .dataTables_filter label { display: flex !important; align-items: center; }
    #companiesTable_wrapper .dataTables_filter label > span,
    #companiesTable_wrapper .dataTables_filter label::before { display: none !important; }
    #companiesTable_wrapper .dataTables_filter input { width: 100% !important; margin: 0 !important; }
    #tagSearchWrapper { flex: 1 1 0 !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; }

    /* ── 피투자사: 회사명(1), 주요제품(7)만 ── */
    #companiesTable th:nth-child(n+2):nth-child(-n+6),
    #companiesTable td:nth-child(n+2):nth-child(-n+6),
    #companiesTable th:nth-child(n+8),
    #companiesTable td:nth-child(n+8) { display: none !important; }

    /* ── 펀드: 닉네임(3), 결성일자(5), 만기일자(6), 대펀(8), 결성총액(10)만 ── */
    #fundsTable th:nth-child(-n+2),
    #fundsTable td:nth-child(-n+2),
    #fundsTable th:nth-child(4),
    #fundsTable td:nth-child(4),
    #fundsTable th:nth-child(7),
    #fundsTable td:nth-child(7),
    #fundsTable th:nth-child(9),
    #fundsTable td:nth-child(9),
    #fundsTable th:nth-child(n+11),
    #fundsTable td:nth-child(n+11) { display: none !important; }

    /* ── 투자비율: 인라인 요약 숨김 + 투자기업(2), 재원(4), 발굴담당자(8), 투자담당자(9)만 ── */
    #statsCards { display: none !important; }
    #imTable th:nth-child(1),
    #imTable td:nth-child(1),
    #imTable th:nth-child(3),
    #imTable td:nth-child(3),
    #imTable th:nth-child(n+5):nth-child(-n+7),
    #imTable td:nth-child(n+5):nth-child(-n+7),
    #imTable th:nth-child(10),
    #imTable td:nth-child(10) { display: none !important; }
    #imTable th:nth-child(2) { width: 30% !important; }
    #imTable th:nth-child(4) { width: 14% !important; }
    #imTable th:nth-child(8) { width: 28% !important; }
    #imTable th:nth-child(9) { width: 28% !important; }

    /* ── 담당자: 회사명(2), 담당자정(3), 담당자부(4)만 ── */
    #pmTable th:nth-child(1),
    #pmTable td:nth-child(1),
    #pmTable th:nth-child(5),
    #pmTable td:nth-child(5) { display: none !important; }

    /* ── 임직원/펀드 등: #statsCards 모바일 — 라운드 1 후속에서 .summary-card → .kpi-inline 으로 변경되어
       옛 selector dead. .stat-filter-card 만 남기는 룰은 stat-filter-card extra_class 가 .kpi-inline 에 그대로 부여되므로 유지. ── */
    #statsCards .kpi-inline:not(.stat-filter-card),
    #statsCards .stat-filter-card[data-country=""] { display: none !important; }

    /* ── 임직원: 이름(2), 직급/직위(5), 전화번호(10) (이름 클릭→mailto) ── */
    #contactsTable { table-layout: fixed !important; width: 100% !important; }
    #contactsTable th:nth-child(1),
    #contactsTable td:nth-child(1),
    #contactsTable th:nth-child(n+3):nth-child(-n+4),
    #contactsTable td:nth-child(n+3):nth-child(-n+4),
    #contactsTable th:nth-child(n+6):nth-child(-n+9),
    #contactsTable td:nth-child(n+6):nth-child(-n+9),
    #contactsTable th:nth-child(11),
    #contactsTable td:nth-child(11) { display: none !important; }
    #contactsTable th:nth-child(2) { width: 30% !important; }
    #contactsTable th:nth-child(5) { width: 30% !important; }
    #contactsTable th:nth-child(10) { width: 40% !important; }

    /* ── 사용자관리: 이름(2), 리스크(7), MCP(8), 마지막접속(10) ── */
    #userTable { table-layout: fixed !important; width: 100% !important; }
    #userTable th:nth-child(1),
    #userTable td:nth-child(1),
    #userTable th:nth-child(n+3):nth-child(-n+6),
    #userTable td:nth-child(n+3):nth-child(-n+6),
    #userTable th:nth-child(9),
    #userTable td:nth-child(9),
    #userTable th:nth-child(11),
    #userTable td:nth-child(11) { display: none !important; }

    /* ── 시장조치: 점검항목(1), 판정(2), 상세(5) — 실제값(3), 기준(4) 숨김 ── */
    #marketTabContent .table th:nth-child(n+3):nth-child(-n+4),
    #marketTabContent .table td:nth-child(n+3):nth-child(-n+4),
    #adhocResult .table th:nth-child(n+3):nth-child(-n+4),
    #adhocResult .table td:nth-child(n+3):nth-child(-n+4) { display: none !important; }
    #marketTabContent .table td:nth-child(5),
    #adhocResult .table td:nth-child(5) { white-space: normal !important; word-break: break-word; }

    /* ── AI 채팅: 모델 설명 아이콘 숨김 ── */
    #modelInfoIcon { display: none !important; }
}

/* ===== Card Grid — 카드 목록 반응형 (Skills / Notebooks / ICM) ===== */
/* Bootstrap row g-3 내에서 사용. padding은 row g-3이 처리. */
.card-grid-col, .card-grid-col-lg { flex: 0 0 auto; padding: calc(var(--bs-gutter-y) * .5) calc(var(--bs-gutter-x) * .5); }
/* Notebooks / ICM: 2→3→4열 */
.card-grid-col { width: 50%; }
@media (min-width: 800px)  { .card-grid-col { width: 33.333%; } }
@media (min-width: 1000px) { .card-grid-col { width: 25%; } }
@media (max-width: 500px)  { .card-grid-col { width: 100%; } }
/* Skills: 2→3열 (카드가 넓으므로 4열 불필요) */
.card-grid-col-lg { width: 50%; }
@media (min-width: 800px)  { .card-grid-col-lg { width: 33.333%; } }
@media (max-width: 500px)  { .card-grid-col-lg { width: 100%; } }