/* 뷰포트 높이: dvh 지원 시 가시 영역에 맞춤(창 모드·모바일 UI로 100vh만 쓸 때 생기는 어긋남 완화) */
    :root {
      --erp-visible-vh: 100vh;
    }
    @supports (height: 100dvh) {
      :root {
        --erp-visible-vh: 100dvh;
      }
    }

    /* 쿨톤(기본·data-theme=white): 스카이·아이스 */
    :root,
    body[data-theme="white"] {
      --bg: #e2f0fb;
      --bg-2: #cfe4f7;
      --bg-gradient-start: #f0f9ff;
      --bg-gradient-end: #dbeafe;
      --bg-glow-accent: rgba(14, 165, 233, 0.16);
      --bg-glow-warm: rgba(59, 130, 246, 0.12);
      --grid-line: rgba(125, 180, 220, 0.14);
      --panel: rgba(255, 255, 255, 0.94);
      --panel-strong: #f8fbff;
      --panel-shell: rgba(240, 249, 255, 0.72);
      --panel-shell-border: rgba(147, 197, 253, 0.45);
      --panel-border: rgba(148, 163, 184, 0.28);
      --panel-surface: rgba(255, 255, 255, 0.96);
      --line: rgba(15, 23, 42, 0.12);
      --line-2: rgba(15, 23, 42, 0.07);
      --line-soft: rgba(15, 23, 42, 0.05);
      --text: #0f172a;
      --title: #0f172a;
      --muted: #64748b;
      --muted-2: #475569;
      --primary: #2563eb;
      --primary-2: #3b82f6;
      --primary-3: #dbeafe;
      --primary-dark: #1d4ed8;
      --accent: #0ea5e9;
      --accent-strong: #0284c7;
      --accent-2: #6366f1;
      --accent-soft: #e0f2fe;
      --accent-soft-2: #bae6fd;
      --accent-warm: #7c3aed;
      --accent-warm-soft: #ede9fe;
      --accent-alert: #dc2626;
      --accent-alert-soft: #fee2e2;
      --ok: #059669;
      --warn: #d97706;
      --bad: #dc2626;
      --on-primary: #ffffff;
      --shadow: 0 18px 44px rgba(15, 40, 70, 0.08);
      --shadow-soft: 0 8px 24px rgba(15, 40, 70, 0.055);
      --shadow-card: 0 14px 36px rgba(15, 40, 70, 0.07);
      --accent-shadow: 0 12px 28px rgba(37, 99, 235, 0.2);
      --radius: 16px;
      --radius-lg: 24px;
      --gold-line: linear-gradient(90deg, #1d4ed8 0%, #38bdf8 100%);
      --hero-line: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.22), transparent);
      --hero-header-surface: linear-gradient(135deg, #0f172a 0%, #1e3a5f 52%, #1d4ed8 100%);
      --strip-accent: linear-gradient(90deg, #1d4ed8 0%, #38bdf8 100%);
      --utility-surface: rgba(255, 255, 255, 0.72);
      --utility-border: rgba(125, 180, 220, 0.32);
      --toolbar-surface: rgba(240, 249, 255, 0.62);
      --table-head-bg: #e0f2fe;
      --table-head-text: #334155;
      --chart-datalabel-bg: rgba(15, 23, 42, 0.90);
      --chart-datalabel-text: rgba(255, 255, 255, 0.98);
      --chart-goal-previous: #94a3b8;
      /* 계획=빨강(목표선), 실적=남보라(성과), 갭(−)=청록(미달)·갭(+)=적색 — 보고서 트렌드 범례에서 실적과 구분 */
      --chart-goal-plan: #dc2626;
      --chart-goal-actual: #4f46e5;
      --chart-goal-actual-over: #ef4444;
      --chart-goal-gap-neg: #0d9488;
      --teal: #0d9488;
      --navy: #0f172a;
      --berry: #64748b;
      --base-font-size: 17px;
      --content-zoom: 1;
      --top-chrome-offset: 160px;
      --grid-gap: 10px;
      /* index 뷰 섹션 스택·패널 간격 (erp-index-layout-extras 와 공유) */
      --view-section-gap: 8px;
      --view-panel-stack-gap: 8px;
      --view-panel-stack-gap-sm: 6px;
      --view-kpi-strip-gap: 12px;
      --view-kpi-strip-gap-sm: 10px;
      --panel-padding-x: 18px;
      --panel-padding-y: 16px;
      --kpi-strip-gap: 8px;
      --kpi-card-pad-y: 6px;
      --kpi-card-pad-x: 10px;
      --kpi-card-pad-left: 14px;
      --ui-section-title-gap: 18px;
      --ui-section-title-padding-y: 20px;
      --ui-section-kicker-size: 11px;
      --ui-section-title-size: clamp(21px, 1.55vw, 27px);
      --ui-section-desc-size: 13px;
      --ui-panel-head-padding-x: 20px;
      --ui-panel-head-padding-y: 16px;
      --ui-panel-title-size: 16px;
      --ui-panel-meta-size: 12px;
      --ui-table-head-size: 11px;
      --ui-table-cell-size: 13px;
      --ui-table-cell-padding-y: 12px;
      --ui-table-cell-padding-x: 14px;
      --ui-control-height: 40px;
      --ui-control-radius: 14px;
      --ui-control-font-size: 13px;
      --ui-chip-radius: 999px;
      --ui-chip-padding-y: 5px;
      --ui-chip-padding-x: 10px;
      --ui-empty-padding: 18px;
      --kpi-card-radius: 12px;
      --kpi-emoji-box: 38px;
      --kpi-emoji-radius: 10px;
      --kpi-emoji-fs: 18px;
      --kpi-grid-col-emoji: 38px;
      --kpi-grid-gap-row: 6px;
      --kpi-grid-gap-col: 10px;
      --kpi-accent-bar-inset: 4px;
      --kpi-body-gap: 2px;
      --kpi-label-fs: 11px;
      --kpi-label-lh: 1.2;
      --kpi-value-fs: clamp(17px, 1.55vw, 21px);
      --kpi-value-lh: 1.05;
      --kpi-sub-fs: 11px;
      --kpi-sub-lh: 1.28;
      /* 상단 헤더 띠·PNG 로고: 커버 / 메인요약 / 글로벌 헤더 / 뷰 로컬 헤더 공통 */
      --app-header-bar-height: 72px;
      --app-header-logo-height: 72px;
    }
    @media (max-width: 760px) {
      :root {
        --app-header-bar-height: 64px;
        --app-header-logo-height: 64px;
      }
    }
    /* 쿨톤·클래식 화이트: body에서 --content-zoom 고정 안 함 — html 상속 */
    body[data-theme="white"],
    body[data-theme="warm"] {
      --content-zoom: inherit;
    }

    * { box-sizing: border-box; }

    /* 키보드 포커스: 마우스 클릭 시 링 제거, Tab 시 명확한 링 */
    button:focus-visible,
    .tab:focus-visible,
    a:focus-visible,
    input:focus-visible,
    select:focus-visible,
    [tabindex="0"]:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    /* 애니메이션 축소 선호 시 전환만 유지 */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
      overflow-x: hidden;
    }
    *::-webkit-scrollbar {
      display: none !important;
    }
    * {
      -ms-overflow-style: none !important;
      scrollbar-width: none !important;
    }

    /* 고대비 모드: 스크롤 가능 영역 인지 — 얇은 스크롤바 표시 */
    @media (prefers-contrast: more) {
      html,
      body {
        -ms-overflow-style: auto !important;
        scrollbar-width: thin !important;
      }
      * {
        -ms-overflow-style: auto !important;
        scrollbar-width: thin !important;
      }
      *::-webkit-scrollbar {
        display: block !important;
        width: 10px;
        height: 10px;
      }
      *::-webkit-scrollbar-track {
        background: color-mix(in srgb, var(--muted) 12%, transparent);
        border-radius: 5px;
      }
      *::-webkit-scrollbar-thumb {
        background: color-mix(in srgb, var(--muted) 55%, var(--text));
        border-radius: 5px;
      }
    }

    body {
      font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: var(--base-font-size);
      line-height: 1.5;
      color: var(--text);
      background: var(--bg);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      background: linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: 24px 24px;
      opacity: 0.5;
    }

    /* HCT 배경 이미지 — assets/HCT_EN.png (Linux/Pages는 URL 대소문자 구분 → 파일명과 반드시 일치) */
    .app-brand-watermark {
      --wm-opacity: 0.14;
      position: fixed;
      inset: 0;
      z-index: 1100;
      pointer-events: none;
      background: url("/assets/HCT_EN.png") no-repeat center calc(50% - 100px);
      background-size: auto min(20vh, 250px);
      opacity: var(--wm-opacity);
      mix-blend-mode: multiply;
      filter: saturate(0.92) contrast(0.96);
    }
    body[data-theme="dark"] .app-brand-watermark {
      /* 어두운 배경: multiply는 로고가 묻히므로 screen + 밝기로 가시성 확보 */
      --wm-opacity: 0.22;
      mix-blend-mode: screen;
      filter: saturate(0.88) brightness(1.22);
    }
    body[data-theme="white"] .app-brand-watermark {
      --wm-opacity: 0.09;
      mix-blend-mode: multiply;
      filter: saturate(0.9) contrast(0.95);
    }
    body[data-theme="warm"] .app-brand-watermark {
      --wm-opacity: 0.11;
      mix-blend-mode: multiply;
      filter: sepia(0.12) saturate(0.9) contrast(0.94);
    }
    /* 맞춤·조직도·Q&A(WIP) 탭: 가운데 개발 중 문구만 — HCT 고정 워터마크 숨김(비 Atlas도 동일) */
    body:has(.view.view--wip-page.active) .app-brand-watermark {
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    @media (max-width: 720px) {
      .app-brand-watermark {
        background-position: center calc(50% - 100px);
      }
    }

    .shell {
      position: relative;
      z-index: 2;
      width: calc(100vw - 10px);
      max-width: 1950px;
      margin: 0 auto 24px;
      padding-top: var(--top-chrome-offset);
    }
    body.cover-mode .shell {
      width: 100vw !important;
      max-width: none !important;
      height: 100vh !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden !important;
    }
    .top-chrome {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 1200;
      display: grid;
      grid-template-rows: auto auto;
      pointer-events: none;
    }
    .top-chrome > * {
      pointer-events: auto;
    }
    .chrome-toolbar {
      display: grid;
      grid-template-rows: auto auto;
      row-gap: 0;
      background: var(--panel);
      border-bottom: 1px solid var(--line-2);
      box-shadow: var(--shadow-soft);
    }
    body.cover-mode main {
      width: 100vw;
      height: 100vh;
      min-height: 100dvh;
      padding: 0;
      margin: 0;
      overflow: hidden;
    }
    /* 커버: 본문 배경 그리드만 끔 — HCT 워터마크(HCT_EN)는 다른 뷰와 동일하게 표시 */
    body.cover-mode::before {
      opacity: 0 !important;
    }

    .page-header {
      position: fixed;
      top: 0; left: 0; right: 0; width: 100%;
      height: var(--app-header-bar-height); z-index: 1200; padding: 0;
      background: var(--hero-header-surface);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    }
    .page-header::after { display: none; }
    .page-header-inner {
      position: relative; width: 100%; height: var(--app-header-bar-height);
      display: grid;
      grid-template-columns: auto 1fr auto auto;
      align-items: center;
      padding: 0; margin: 0; box-sizing: border-box; gap: 0;
    }
    .page-header-logo {
      height: var(--app-header-logo-height); width: auto; max-height: var(--app-header-logo-height);
      object-fit: contain; object-position: center;
      opacity: 0.95; flex-shrink: 0; display: block;
    }
    .page-header-logo.left { grid-column: 1; }
    .page-header-logo.right { grid-column: 4; margin-left: 8px; }
    .header-left-nav-group {
      position: absolute;
      left: clamp(88px, 7.5vw, 136px);
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      z-index: 4;
    }
    .header-left-nav-btn {
      height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(15, 23, 42, 0.4);
      color: #f8fafc;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: -0.01em;
      cursor: pointer;
      font-family: "Sora", "Noto Sans KR", sans-serif;
      box-sizing: border-box;
    }
    .header-left-nav-btn:hover {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.38);
      color: #ffffff;
    }
    .page-header-copy {
      grid-column: 2;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      text-align: center; color: #ffffff;
      pointer-events: none;
    }
    .page-header-copy h1 {
      margin: 0; font-size: clamp(16px, 1.6vw, 20px);
      font-weight: 800; letter-spacing: -0.02em; color: #ffffff; white-space: nowrap;
    }
    .page-header-copy .page-header-eyebrow,
    .page-header-copy span.page-header-eyebrow {
      display: block; margin: 4px 0 0; font-size: 10px; font-weight: 700;
      letter-spacing: 0.16em; text-transform: uppercase;
      color: rgba(255,255,255,0.62);
    }
    .header-utility-box {
      grid-column: 3; flex-shrink: 0;
      display: flex; align-items: center; gap: 8px;
      padding: 0 10px;
    }
    .hero {
      position: relative;
      overflow: hidden;
      padding: 20px 24px;
      border-radius: var(--radius-lg);
      background: var(--panel);
      color: var(--text);
      box-shadow: var(--shadow-card);
      border: 1px solid var(--line-2);
    }

    .hero::after, .hero::before { display: none; }

    
    .toolbar,
    .filters,
    .tabbar,
    .grid,
    .kpi-grid,
    .insight-grid,
    .legend,
    .org-map,
    .metric-strip {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    
    .hero p,
    .hero > .kpi-grid {
      display: none;
    }
    .hero h1 {
      margin: 4px 0 0;
      font-size: clamp(18px, 2.2vw, 24px);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #ffffff;
    }
    .hero p {
      margin: 6px auto 0;
      color: var(--muted);
      max-width: 900px;
      line-height: 1.5;
      font-size: 13px;
      text-align: center;
    }
    .hero-top .right-tools .btn {
      min-width: 116px;
    }

    .badge,
    .btn,
    select,
    .chip {
      border-radius: 999px;
      border: 1px solid transparent;
    }

    .badge {
      padding: 8px 14px;
      background: var(--panel-surface);
      color: var(--primary-dark);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
      backdrop-filter: blur(10px);
      border-color: var(--line);
      box-shadow: var(--shadow-soft);
    }

    .toolbar,
    .filters,
    .tabbar,
    .panel,
    .kpi,
    .insight,
    .record-table {
      background: var(--panel);
      backdrop-filter: blur(20px);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow);
    }

    .toolbar,
    .filters,
    .tabbar {
      padding: 12px 20px;
      border-radius: 0;
      margin-top: 0;
      align-items: center;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      background: var(--toolbar-surface);
      border: none;
      border-bottom: 1px solid var(--line-2);
      box-shadow: none;
    }
    .toolbar.nav-combined {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .nav-left,
    .nav-right {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    .nav-left {
      flex: 1 1 auto;
      min-width: 0;
    }
    .nav-right {
      margin-left: auto;
      justify-content: flex-end;
    }
    .nav-right .mini-note {
      white-space: nowrap;
    }

    .filter-strip {
      margin-top: 0;
      padding: 4px 10px;
      border-radius: 14px;
      background: var(--utility-surface);
      border: 1px solid var(--utility-border);
      box-shadow: var(--accent-shadow);
      backdrop-filter: blur(16px);
      position: relative;
      overflow: hidden;
    }
    .toolbar::after,
    .filter-strip::after {
      content: "";
      position: absolute;
      left: 16px;
      right: 16px;
      top: 0;
      height: 4px;
      border-radius: 999px;
      background: var(--strip-accent);
      opacity: 0.92;
    }
    /* 탭 툴바(nav-combined): 상단 파란 띠 없음 — 헤더와의 경계는 구분만 (테두리 아님) */
    .toolbar.nav-combined::after {
      display: none;
    }
    .tabbar::after {
      content: none;
      display: none;
    }

    .filter-strip-head,
    .filter-strip-body {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: nowrap;
      justify-content: space-between;
    }

    .filter-strip-head {
      padding: 4px 0 10px;
      margin-bottom: 10px;
      border-bottom: 1px solid var(--line);
    }

    .filter-strip-copy {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }

    .filter-strip-title {
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted-2);
    }

    .filter-strip-note {
      display: block;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.5;
    }

    .filter-strip-row {
      display: flex;
      align-items: center;
      gap: 10px 14px;
      flex-wrap: nowrap;
      min-height: 28px;
    }
    .filter-strip[data-collapsed="true"] .filter-groups-inline { display: none; }
    /* 필터 토글 제거 후: 인라인 필터(매출단위 등) 항상 표시 */
    body:not(.cover-mode) #filterStrip .filter-groups-inline { display: flex !important; }
    .filter-strip-toggle {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 3px 6px;
      border-radius: 6px;
      border: 1px solid var(--line);
      background: var(--panel);
      font-size: 15px;
      font-weight: 700;
      color: var(--muted);
      cursor: pointer;
    }
    .filter-strip-toggle:hover { background: var(--bg-2); }
    .filter-strip-toggle-icon { transition: transform 0.2s ease; font-size: 14px; }
    .filter-strip[data-collapsed="true"] .filter-strip-toggle-icon { transform: rotate(-90deg); }
    .filter-groups,
    .filter-groups-inline {
      display: flex;
      flex-wrap: nowrap;
      gap: 0 16px;
      align-items: center;
      flex: 1;
      min-width: 0;
    }
    .filter-groups-inline .filter-group {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
    }
    .filter-groups-inline .filter-group-label {
      width: auto;
      margin-bottom: 0;
      margin-right: 2px;
      font-size: 15px;
      white-space: nowrap;
    }
    .filter-groups-inline .filter-group label {
      flex-direction: row;
      align-items: center;
      gap: 4px;
      margin: 0;
      min-width: 0;
    }
    .filter-groups {
      display: flex;
      flex-wrap: wrap;
      gap: 20px 24px;
      align-items: flex-end;
    }
    .filter-group {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 8px 12px;
    }
    .filter-group-label {
      width: 100%;
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted-2);
      margin-bottom: 2px;
    }
    .filter-group label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
      font-size: 15px;
      font-weight: 700;
      color: var(--muted);
      letter-spacing: 0.05em;
    }
    .filter-group select {
      min-width: 72px;
      max-width: 200px;
      height: 34px;
      padding: 0 10px;
      border-radius: 10px;
      border: 1px solid var(--line);
      font-size: 15px;
      background: var(--panel);
      color: var(--text);
    }
    .filter-groups-inline .filter-group select {
      min-width: 60px;
      max-width: 160px;
      height: 28px;
      padding: 0 6px;
      border-radius: 6px;
      font-size: 14px;
    }
    /* 상단 툴바 #filterStrip: 필터 적용 여부를 칩·점·대비로 즉시 구분 */
    #filterStrip .filter-group label {
      display: inline-flex;
      align-items: center;
      flex-direction: row;
      flex-wrap: nowrap;
      gap: 4px;
      position: relative;
      border-radius: 999px;
      border: 1px solid var(--line-2);
      background: color-mix(in srgb, var(--panel) 94%, var(--bg-2) 6%);
      padding: 3px 8px 3px 6px;
      transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
    }
    #filterStrip .filter-group label:hover {
      border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
    }
    #filterStrip .filter-group label.is-active {
      color: var(--primary);
      border-color: color-mix(in srgb, var(--primary) 52%, var(--line));
      background: color-mix(in srgb, var(--primary) 13%, var(--panel));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent),
        0 2px 10px color-mix(in srgb, var(--primary) 14%, transparent);
    }
    /* #filterBox는 파일 하단 PHASE 4 블록(html body #filterBox)이 분할 UI·테마별 강조 담당 — 여기서 ::before 점은 쓰지 않음 */
    #filterStrip .filter-group select.is-filtered {
      border-color: var(--primary);
      background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 96%, #fff 4%) 0%, var(--primary) 100%);
      color: #ffffff;
      font-weight: 700;
      box-shadow: 0 2px 12px color-mix(in srgb, var(--primary) 38%, transparent);
    }
    .filter-strip-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      margin-left: auto;
    }
    .filter-strip-actions .btn { padding: 6px 14px; font-size: 16px; height: 36px; }
    .content-zoom-control {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin-right: 4px;
    }
    .content-zoom-label { font-size: 16px; color: var(--muted); margin-right: 2px; }
    .content-zoom-label[role="button"] { cursor: pointer; user-select: none; }
    .content-zoom-label[role="button"]:hover { color: var(--text); }
    .content-zoom-label.is-disabled { cursor: default; opacity: 0.45; pointer-events: none; }
    .content-zoom-value { min-width: 36px; font-size: 16px; font-weight: 700; text-align: center; color: var(--text); }
    .content-zoom-btn {
      width: 26px; height: 26px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      font-size: 16px;
      line-height: 1;
      cursor: pointer;
    }
    .content-zoom-btn:hover { background: var(--bg-2); }
    @media (max-width: 1100px) {
      .filter-strip-row { flex-wrap: wrap; }
      .filter-groups-inline { flex-wrap: wrap; gap: 8px 12px; }
    }
    .active-filter-label { font-size: 16px; font-weight: 800; color: var(--muted-2); margin-right: 4px; }
    .active-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 8px;
      background: var(--primary-3);
      border: 1px solid var(--line);
      font-size: 14px;
      color: var(--primary-dark);
    }
    .active-filter-chip button {
      padding: 0 2px;
      border: 0;
      background: none;
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      color: var(--muted);
    }
    .active-filter-chip button:hover { color: var(--bad); }

    .inline-filter-box {
      display: flex;
      gap: 8px;
      align-items: end;
      flex-wrap: nowrap;
      flex: 1 1 auto;
      min-width: 0;
      overflow-x: auto;
      padding-bottom: 2px;
      scrollbar-width: thin;
    }

    .inline-filter-box label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 84px;
      font-size: 13px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 6px 7px 6px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--panel);
      transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
      flex: 0 0 auto;
    }

    .inline-filter-box select {
      min-width: 0;
      width: 100%;
      height: 34px;
      padding: 0 8px;
      border-radius: 10px;
      background: var(--panel);
      color: var(--text);
      font-size: 14px;
    }
    .inline-filter-box label.is-active {
      border-color: var(--primary);
      background: var(--primary-3);
      box-shadow: var(--shadow-soft);
      color: var(--primary);
    }
    .inline-filter-box select.is-filtered {
      color: #ffffff;
      border-color: var(--primary);
      background: var(--primary);
      font-weight: 700;
      box-shadow: none;
    }
    .filter-utility-box {
      display: flex;
      gap: 8px;
      align-items: end;
      flex: 0 0 auto;
      flex-wrap: nowrap;
    }
    .theme-picker.compact {
      padding: 4px 6px 4px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--panel);
      min-width: 88px;
    }
    .theme-picker.compact select {
      min-width: 0;
      width: 100%;
      height: 32px;
      font-size: 11px;
    }
    .tooltip-toggle-btn {
      height: 32px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--panel) 92%, transparent);
      color: var(--text);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
      white-space: nowrap;
      box-shadow: none;
    }
    .tooltip-toggle-btn:hover {
      transform: translateY(-1px);
    }
    .tooltip-toggle-btn .tooltip-toggle-mark {
      width: auto;
      height: auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 800;
      line-height: 1;
      background: transparent;
      color: inherit;
      flex-shrink: 0;
    }
    .tooltip-toggle-btn .tooltip-toggle-state {
      min-width: 50px;
      text-align: left;
    }
    .tooltip-toggle-btn.is-on {
      border-color: color-mix(in srgb, var(--primary) 46%, var(--line));
      background: color-mix(in srgb, var(--primary) 14%, var(--panel));
      color: var(--primary-dark);
    }
    .tooltip-toggle-btn.is-off {
      border-color: color-mix(in srgb, var(--line) 92%, transparent);
      background: color-mix(in srgb, var(--panel) 82%, transparent);
      color: var(--muted);
      opacity: 0.92;
    }
    .filter-utility-box .btn {
      height: 32px;
      padding: 0 10px;
      font-size: 11px;
      white-space: nowrap;
    }

    .toolbar::before,
    .filters::before,
    .tabbar::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0.06));
      pointer-events: none;
    }

    .theme-picker {
      display: flex;
      flex-direction: column;
      gap: 5px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted);
    }

    #themeSelector {
      min-width: 0;
    }

    .btn,
    select {
      background: var(--panel);
      color: var(--text);
      border: 1px solid var(--line);
      height: 40px;
      padding: 0 15px;
      font-size: 13px;
      font-weight: 700;
      box-shadow: none;
    }

    .btn {
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    }

    .btn:hover,
    .mode-btn:hover,
    .tab:hover,
    select:hover,
    .modal-close:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }

    .btn.primary,
    .mode-btn.active {
      color: var(--on-primary);
      background: var(--primary);
      border-color: var(--primary);
      box-shadow: var(--shadow-soft);
    }
    .btn.secondary {
      background: var(--panel);
      border: 1px solid var(--line);
      color: var(--primary-dark);
    }

    .mode-btn,
    .tab {
      padding: 8px 14px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      color: var(--muted);
      transition: all 0.15s ease;
    }
    .tab {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-width: 110px;
    }
    .tab:hover {
      color: var(--text);
      background: var(--primary-3);
      border-color: var(--primary);
    }

    .panel,
    .kpi,
    .insight,
    .summary-box,
    .metric-pill,
    .record-table,
    .modal-mini {
      transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    }

    .panel:hover,
    .kpi:hover,
    .insight:hover,
    .summary-box:hover,
    .metric-pill:hover,
    .record-table:hover,
    .modal-mini:hover {
      box-shadow: var(--shadow);
    }

    .filters label {
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 14px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }

    .filters select { min-width: 140px; }
    .tabbar { padding: 10px; justify-content: flex-start; }
    .toolbar .tabbar {
      margin-top: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      backdrop-filter: none;
      overflow: visible;
      flex: 1 1 auto;
      min-width: 0;
    }
    .toolbar .tabbar::before,
    .toolbar .tabbar::after {
      display: none;
    }
    .tab.active {
      color: var(--on-primary);
      background: var(--primary);
      border: 2px solid var(--primary);
      box-shadow: var(--shadow);
      font-size: 18px;
      font-weight: 800;
      transform: scale(1.02);
      position: relative;
      z-index: 1;
    }
    .tab.active .tab-emoji {
      font-size: 20px;
    }

    .view { display: none; }
    .view.active { display: block; }
    #view-qa.active { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }

    .kpi-grid {
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }

    .kpi {
      min-height: 100px;
      padding: 16px;
      border-radius: var(--radius);
      position: relative;
      overflow: hidden;
      background: var(--panel);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-card);
      transition: box-shadow 0.2s ease, transform 0.2s ease;
    }

    .kpi:hover {
      box-shadow: 0 8px 16px -4px rgba(0,0,0,0.1);
      transform: translateY(-1px);
    }

    .kpi::before { display: none; }

    .kpi .eyebrow {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted-2);
      font-weight: 600;
    }

    .kpi .value {
      font-size: clamp(22px, 2vw, 28px);
      margin-top: 6px;
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--text);
    }

    .kpi .sub {
      margin-top: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.4;
    }

    .spark {
      margin-top: 14px;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 4px;
      align-items: end;
      height: 40px;
    }

    .spark span {
      border-radius: 4px 4px 0 0;
      background: var(--primary);
      opacity: 0.85;
    }

    .section { margin-top: 6px; }
    .view > .section:first-child { margin-top: 0; }
    /* 각 뷰의 첫 번째 섹션 타이틀: 크롬과 확실히 분리 */
    .view > .section:first-child > .section-title:first-child,
    .view > .section:first-child > div > .section-title:first-child,
    .view > .section:first-child > .view-wip-watermark-full + .section-title,
    .view > .section:first-child > div > .view-wip-watermark-full + .section-title {
      padding-top: 4px;
    }

    /* 맞춤·조직도·Q&A — 페이지 전역 개발 중 워터마크 (블러/딤 없음, 가운데 큰 문구 1덩어리만) */
    .view.view--wip-page > .section {
      position: relative;
      isolation: isolate;
      min-height: min(920px, calc(var(--erp-visible-vh, 100vh) - var(--top-chrome-offset, 108px)));
    }
    .view.view--wip-page > .section::before {
      display: none;
    }
    .view.view--wip-page > .section > .view-wip-watermark-full {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      overflow: hidden;
    }
    .view.view--wip-page > .section > *:not(.view-wip-watermark-full) {
      position: relative;
      z-index: 0;
    }
    .view-wip-watermark-full__rot {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.2em;
      transform: rotate(-14deg);
      pointer-events: none;
    }
    .view-wip-watermark-full__line--hero {
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      font-size: clamp(2.75rem, 9vw, 6.5rem);
      font-weight: 800;
      letter-spacing: 0.12em;
      color: color-mix(in srgb, var(--bad) 72%, var(--muted) 28%);
      opacity: 0.4;
      white-space: nowrap;
      user-select: none;
      text-align: center;
      text-shadow:
        0 0 0.35em color-mix(in srgb, var(--panel-surface, #fff) 80%, transparent),
        0 1px 2px color-mix(in srgb, var(--text) 12%, transparent);
    }
    .view-wip-watermark-full__line--hero-en {
      position: relative;
      left: auto;
      top: auto;
      transform: none;
      font-size: clamp(0.85rem, 2.5vw, 1.35rem);
      font-weight: 700;
      letter-spacing: 0.28em;
      color: color-mix(in srgb, var(--warn) 65%, var(--muted) 35%);
      opacity: 0.34;
      white-space: nowrap;
      user-select: none;
      text-align: center;
      text-shadow: 0 0 0.28em color-mix(in srgb, var(--panel-surface, #fff) 78%, transparent);
    }
    body[data-theme="dark"] .view.view--wip-page .view-wip-watermark-full__line--hero {
      opacity: 0.46;
      text-shadow:
        0 0 0.4em rgba(255, 255, 255, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.4);
    }
    body[data-theme="dark"] .view.view--wip-page .view-wip-watermark-full__line--hero-en {
      opacity: 0.38;
      text-shadow: 0 0 0.35em rgba(255, 255, 255, 0.1);
    }
    #view-qa .section { margin: 0; padding: 0; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
    #view-qa .section .qa-layout { flex: 1 1 0; min-height: 0; overflow: hidden; display: grid; }
    #view-qa .section-title {
      margin: 0 0 6px 0;
      flex-shrink: 0;
      padding: 0 2px;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 12px;
    }
    /* P0: 한 줄 과밀 방지 — 1행(타이틀·설명) / 2행(튜토리얼·NLP·실행·AI) */
    #view-qa .section-title.qa-title-one-line {
      flex-wrap: wrap;
      align-items: flex-start;
      /* 헤더가 2줄로 넘어갈 때 추천질의 패널까지 밀리지 않게 */
      row-gap: 6px;
      column-gap: 12px;
      /* 추천질의 행(#qaNlpBar) 상단 여백이 과도하게 커지는 현상 보정 */
      margin-bottom: 1px;
      padding-bottom: 2px;
      border-bottom: 1px solid var(--line-2);
    }
    #view-qa .section-title > div { flex-wrap: nowrap; flex-shrink: 0; }
    #view-qa .section-title p {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      min-width: 0;
      max-width: none;
      font-size: var(--ds-font-md);
      margin: 0;
    }
    #view-qa .section-title.qa-title-one-line > p.qa-title-desc {
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      flex: 1 1 220px;
      min-width: 0;
      line-height: 1.45;
      color: var(--muted);
      font-size: var(--ds-font-md);
    }
    #view-qa .qa-title-one-line .qa-title-block { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
    #view-qa .qa-title-one-line .qa-title-block .section-kicker,
    #view-qa .qa-title-one-line .qa-title-block h2 { margin: 0; font-size: var(--ds-font-2xl); line-height: 1.25; }
    #view-qa .qa-title-one-line .qa-title-actions {
      flex: 1 1 100%;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      min-width: 0;
    }
    #view-qa .qa-title-one-line .qa-tutorial-btn { flex-shrink: 0; padding: 8px 14px; font-size: var(--ds-font-md); }
    #view-qa .qa-title-one-line .qa-nlp-input-wrap {
      /* 입력란 폭 과하게 큼 → 반으로 축소 */
      flex: 1 1 200px;
      min-width: min(100%, 160px);
      min-height: 40px;
      padding: 0 12px;
    }
    #view-qa .qa-title-one-line .qa-nlp-input {
      padding: 10px 0;
      font-size: var(--ds-font-md);
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    #view-qa .qa-title-one-line .qa-nlp-submit-btn { flex-shrink: 0; min-height: 40px; padding: 0 20px; font-size: var(--ds-font-md); }
    .section-title {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      margin: 2px 4px 8px;
    }
    .section-title > div {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 0;
      color: var(--primary);
      font-size: 12px;
      font-weight: 900;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .section-kicker::before {
      content: "";
      width: 18px;
      height: 2px;
      border-radius: 999px;
      background: var(--gold-line);
    }
    #view-qa .section-title .section-kicker,
    #view-qa .section-title h2 {
      font-size: var(--ds-font-2xl);
      line-height: 1.25;
      margin: 0;
      font-weight: 700;
    }
    #view-qa .section-title .section-kicker { font-weight: 800; letter-spacing: 0.04em; }
    #view-qa .section-title > div { align-items: center; }
    #view-qa .section-title p { font-size: var(--ds-font-md); }
    #view-qa .section-title .qa-section-actions { flex-shrink: 0; margin-left: 8px; }
    .section-title h2 { margin: 0; font-size: 21px; letter-spacing: -0.02em; font-weight: 700; }
    .section-title p { margin: 0; color: var(--muted); font-size: 16px; }

    /* 페이지 로컬 헤더(요약·조직·거래처 등): 상단 글로벌 헤더·메인요약과 같이 타이틀을 뷰포트 가로 기준 정중앙
       — 전역 .page-header-inner { grid } 가 동일 클래스(.page-local-header-inner)에도 먹어 1fr 칸 안만 중앙 정렬되던 문제 보정 */
    body:not(.cover-mode) .section-title.page-local-header {
      position: relative;
      width: 100vw;
      max-width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-right: calc(50% - 50vw);
      left: 0;
      box-sizing: border-box;
      overflow: visible;
    }
    /* 메인요약 .main-summary-header-inner 과 동일: 패딩 6px, 로고 absolute 좌우 0·상단 0, 타이틀 박스 규격 동일 */
    html body:not(.cover-mode) .page-header-inner.page-local-header-inner {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-start !important;
      grid-template-columns: none !important;
      min-height: var(--app-header-bar-height) !important;
      height: var(--app-header-bar-height) !important;
      width: 100% !important;
      max-width: none !important;
      padding: 0 6px !important;
      box-sizing: border-box !important;
      gap: 0 !important;
      position: relative !important;
    }
    html body:not(.cover-mode) .page-local-header-inner > .cover-corner-logo.left,
    html body:not(.cover-mode) .page-local-header-inner > .cover-corner-logo.right {
      position: absolute !important;
      top: 0 !important;
      height: var(--app-header-logo-height) !important;
      max-height: var(--app-header-logo-height) !important;
      width: auto !important;
      object-fit: contain !important;
      z-index: 2 !important;
      pointer-events: none !important;
      margin: 0 !important;
    }
    html body:not(.cover-mode) .page-local-header-inner > .cover-corner-logo.left {
      left: 0 !important;
    }
    html body:not(.cover-mode) .page-local-header-inner > .cover-corner-logo.right {
      right: 0 !important;
    }
    html body:not(.cover-mode) .page-local-header-inner > .page-local-title-center {
      position: absolute !important;
      left: 50% !important;
      top: 50% !important;
      transform: translate(-50%, -50%) !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 4px !important;
      text-align: center !important;
      width: max-content !important;
      max-width: min(92vw, 720px) !important;
      z-index: 1 !important;
      pointer-events: none !important;
    }
    html body:not(.cover-mode) .page-local-header-inner .page-local-title-block,
    html body:not(.cover-mode) .page-local-header-inner .page-local-title-sub {
      margin: 0 !important;
    }
    html body:not(.cover-mode) .page-local-header-inner .page-local-title-block {
      font-size: clamp(18px, 1.7vw, 22px) !important;
      font-weight: 800 !important;
      letter-spacing: -0.02em !important;
      line-height: 1.2 !important;
      white-space: nowrap !important;
      color: #ffffff !important;
      font-family: "Sora", "Noto Sans KR", sans-serif !important;
    }
    html body:not(.cover-mode) .page-local-header-inner .page-local-title-sub {
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
      line-height: 1.25 !important;
      color: rgba(255, 255, 255, 0.82) !important;
      margin: 4px 0 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      max-width: min(80vw, 720px) !important;
      font-family: "Sora", "Noto Sans KR", sans-serif !important;
    }
    html body:not(.cover-mode) .page-local-header-inner > .page-local-header-tools {
      position: absolute !important;
      right: clamp(200px, 16vw + 120px, 280px) !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      margin: 0 !important;
      flex: 0 0 auto !important;
      display: inline-flex !important;
      align-items: center !important;
      flex-wrap: nowrap !important;
      gap: 8px !important;
      z-index: 3;
      pointer-events: auto;
    }
    @media (max-width: 960px) {
      html body:not(.cover-mode) .page-local-header-inner > .page-local-title-center {
        max-width: calc(100vw - 120px) !important;
      }
      html body:not(.cover-mode) .page-local-header-inner .page-local-title-block {
        white-space: normal !important;
      }
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: var(--grid-gap, 10px);
    }

    .panel {
      border-radius: var(--radius);
      padding: var(--panel-padding-y, 16px) var(--panel-padding-x, 18px);
      min-height: 72px;
      position: relative;
      overflow: hidden;
      background: var(--panel);
      border: 1px solid var(--panel-border);
      box-shadow: var(--shadow-card);
      transition: box-shadow 0.22s ease, border-color 0.2s ease;
    }
    .panel.panel-main::before {
      content: "";
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--primary);
      border-radius: var(--radius) 0 0 var(--radius);
      opacity: 0.85;
    }
    /* panel-main: 상단 stripe 숨김 (좌측 stripe만 표시) */
    .panel.panel-main::after {
      display: none;
    }

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

    .panel.panel-finance::after { background: var(--primary); }
    .panel.panel-customer::after { background: var(--teal); }
    .panel.panel-ops::after { background: var(--primary-2); }
    .panel.panel-risk::after { background: var(--warn); }
    .panel.panel-report::after { background: var(--muted-2); }

    .panel::before { display: none; }

    .panel::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: var(--radius) var(--radius) 0 0;
      background: var(--primary);
      opacity: 1;
    }

    .span-12 { grid-column: span 12; }
    .span-8 { grid-column: span 8; }
    .span-7 { grid-column: span 7; }
    .span-5 { grid-column: span 5; }
    .span-4 { grid-column: span 4; }

    .panel-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: baseline;
      margin-bottom: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--line-soft);
    }
    .panel-head-left {
      display: flex;
      align-items: center;
      gap: 10px;
      position: relative;
      z-index: 1;
    }
    .panel-icon {
      width: 34px;
      height: 34px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      background: var(--primary-3);
      border: 1px solid var(--line);
      box-shadow: var(--shadow-soft);
    }
    .panel-icon.icon-finance { background: var(--primary-3); color: var(--primary); }
    .panel-icon.icon-customer { background: var(--primary-3); color: var(--teal); }
    .panel-icon.icon-ops { background: var(--primary-3); color: var(--primary-2); }
    .panel-icon.icon-risk { background: var(--primary-3); color: var(--warn); }
    .panel-icon.icon-report { background: var(--primary-3); color: var(--berry); }
    .panel-head h3 {
      margin: 0;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: -0.01em;
      position: relative;
      z-index: 1;
      color: var(--text);
    }
    .panel-head .meta {
      color: var(--muted-2);
      font-size: 13px;
      font-weight: 700;
      position: relative;
      z-index: 1;
    }
    .receipt-head-one-line {
      flex-wrap: nowrap;
      align-items: center;
      gap: 12px;
    }
    .receipt-head-one-line .meta { flex-shrink: 0; white-space: nowrap; }
    .receipt-status-filter-group {
      display: inline-flex;
      align-items: center;
      gap: 8px 10px;
      flex-wrap: wrap;
    }
    .receipt-status-filter-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid var(--line-soft);
      background: color-mix(in srgb, var(--panel-strong) 82%, transparent);
      color: var(--muted-2);
      font-size: 15px;
      font-weight: 800;
      line-height: 1.15;
      white-space: nowrap;
      cursor: pointer;
      transition: 0.16s ease;
    }
    .receipt-status-filter-btn:hover {
      border-color: var(--line);
      color: var(--text-1);
    }
    .receipt-status-filter-btn.is-active {
      border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
      background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel-strong));
      color: color-mix(in srgb, var(--accent) 72%, var(--text-1));
    }
    .receipt-status-filter-btn.is-pending {
      border-color: color-mix(in srgb, var(--warn) 34%, var(--line-soft));
      background: color-mix(in srgb, var(--warn) 12%, var(--panel));
      color: color-mix(in srgb, var(--warn) 80%, var(--text));
    }
    .receipt-status-filter-btn.is-working {
      border-color: color-mix(in srgb, var(--accent) 30%, var(--line-soft));
      background: color-mix(in srgb, var(--accent) 12%, var(--panel));
      color: color-mix(in srgb, var(--accent) 84%, var(--text));
    }
    .receipt-status-filter-btn.is-done {
      border-color: color-mix(in srgb, var(--ok) 34%, var(--line-soft));
      background: color-mix(in srgb, var(--ok) 12%, var(--panel));
      color: color-mix(in srgb, var(--ok) 84%, var(--text));
    }
    .receipt-status-filter-btn.is-alert {
      border-color: color-mix(in srgb, var(--bad) 32%, var(--line-soft));
      background: color-mix(in srgb, var(--bad) 10%, var(--panel));
      color: color-mix(in srgb, var(--bad) 84%, var(--text));
    }
    .receipt-status-filter-btn.is-neutral {
      border-color: color-mix(in srgb, var(--panel-border) 58%, var(--line-soft));
      background: color-mix(in srgb, var(--table-head-bg) 66%, var(--panel));
      color: var(--table-head-text);
    }
    .receipt-summary-inline {
      margin-left: auto;
      font-size: 14px;
      color: var(--muted);
      font-weight: 700;
    }
    .receipt-summary-inline:empty { display: none; }
    .org-kpi-split {
      display: grid;
      grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
      gap: 12px;
      margin-top: 10px;
      align-items: stretch;
    }
    .org-kpi-pane {
      border: 1px solid var(--line-soft);
      border-radius: 14px;
      background: var(--panel-surface);
      padding: 10px;
      min-height: 260px;
    }
    .org-kpi-pane .mini-note {
      margin-bottom: 8px;
      font-weight: 700;
      color: var(--muted-2);
    }
    .org-kpi-pane .record-table {
      margin-top: 0;
    }
    .panel-tools {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      position: relative;
      z-index: 1;
    }
    .summary-goal-head-toolbar {
      justify-content: flex-end;
      margin-left: auto;
    }
    .summary-goal-selects {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .summary-goal-viz-toggle {
      display: inline-flex;
      border: 1px solid var(--line);
      border-radius: 10px;
      overflow: hidden;
      background: color-mix(in srgb, var(--panel) 80%, var(--bg) 20%);
      white-space: nowrap;
    }
    .summary-goal-viz-toggle .btn-mini {
      border: 0;
      border-radius: 0;
      padding: 6px 12px;
      font-size: 15px;
      font-weight: 700;
      background: transparent;
      color: var(--muted);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      white-space: nowrap;
    }
    .summary-goal-viz-toggle .btn-mini.is-active {
      background: var(--primary-3);
      color: var(--primary-dark);
    }
    .summary-goal-viz-toggle .btn-mini:disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }
    .compact-field {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--muted-2);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }
    .compact-field select {
      min-width: 116px;
      height: 36px;
      padding: 0 12px;
      font-size: 12px;
      font-weight: 800;
    }

    .chart-box {
      background: var(--panel);
      border-radius: var(--radius);
      padding: 10px 12px;
      border: 1px solid var(--line-2);
      min-height: 140px;
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
    }
    .chart-box > svg,
    .chart-box > div:not([class]) {
      flex: 1;
      min-height: 0;
    }
    .chart-box.compact { min-height: 100px; }
    .line-chart-shell {
      display: grid;
      gap: 8px;
      height: 100%;
    }
    /* 타이틀 행 아래: 범례·툴바 → 플롯이 남은 높이를 채움 (목표대비 브리핑과 동일 패턴) */
    .line-chart-shell.line-chart-shell--top-legend {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 0;
    }
    .line-chart-shell--top-legend .chart-inline-top-row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px 12px;
      flex-shrink: 0;
    }
    .line-chart-shell--top-legend .chart-inline-legend .legend {
      margin-top: 0;
    }
    .line-chart-shell--top-legend .line-chart-toolbar {
      flex-shrink: 0;
      margin-left: auto;
    }
    .line-chart-shell--top-legend .line-chart-plot-area {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .line-chart-shell--top-legend.line-chart-shell--org-fill .line-chart-plot-area {
      min-height: 140px;
    }
    /* 기간 세그먼트(월·분기·반기·연): #view-main-summary .main-summary-goal-period-toggle 과 동일 패턴 */
    .line-chart-toolbar {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 2px;
      padding: 2px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
      box-sizing: border-box;
    }
    .org-compare-period-toolbar {
      display: inline-flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 2px;
      padding: 2px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
      box-sizing: border-box;
    }
    .gran-btn {
      border: 0;
      background: transparent;
      color: var(--muted-2);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 5px 10px;
      line-height: 1.25;
      border-radius: 999px;
      cursor: pointer;
      box-sizing: border-box;
      transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    }
    .gran-btn:hover {
      transform: none;
      box-shadow: none;
      color: var(--text);
    }
    .gran-btn.active {
      background: linear-gradient(135deg, color-mix(in srgb, var(--primary-2) 20%, transparent), color-mix(in srgb, var(--primary) 20%, transparent));
      color: var(--text);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
    }
    .org-compare-period-btn {
      border: 0;
      background: transparent;
      color: var(--muted-2);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 5px 10px;
      line-height: 1.25;
      border-radius: 999px;
      cursor: pointer;
      box-sizing: border-box;
      transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    }
    .org-compare-period-btn:hover {
      color: var(--text);
    }
    .org-compare-period-btn.is-active {
      background: linear-gradient(135deg, color-mix(in srgb, var(--primary-2) 20%, transparent), color-mix(in srgb, var(--primary) 20%, transparent));
      color: var(--text);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
    }
    .org-compare-period-detail {
      margin: 0;
      min-height: 32px;
      height: auto;
      padding: 5px 12px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--panel) 86%, transparent);
      color: var(--text);
      font-size: 18px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      outline: none;
      box-sizing: border-box;
    }
    .chart-card-with-switcher { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 0; }
    .chart-viz-switcher {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      gap: 2px;
      flex-wrap: wrap;
      flex-shrink: 0;
      padding: 2px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
      box-sizing: border-box;
    }
    .viz-switcher-btn {
      border: 0;
      background: transparent;
      color: var(--muted-2);
      font-size: 18px;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 5px 10px;
      line-height: 1.25;
      border-radius: 999px;
      cursor: pointer;
      box-sizing: border-box;
      transition: transform 0.16s ease, background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    }
    .viz-switcher-btn:hover {
      transform: translateY(-1px);
      color: var(--text);
      box-shadow: none;
    }
    .viz-switcher-btn.active {
      background: linear-gradient(135deg, color-mix(in srgb, var(--primary-2) 20%, transparent), color-mix(in srgb, var(--primary) 20%, transparent));
      color: var(--text);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
    }
    .chart-viz-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
    .chart-viz-body > div { flex: 1; min-height: 80px; }
    #view-qa .chart-viz-body > div { min-height: 280px; }

    svg { width: 100%; height: 100%; overflow: visible; }
    .axis text, .label { fill: var(--muted); font-size: 13px; font-weight: 500; }
    .chart-datalabel { font-weight: 600; font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; fill: var(--chart-datalabel-text); }
    .chart-datalabel-bg { fill: var(--chart-datalabel-bg); stroke: var(--line); stroke-width: 1; }
    body[data-theme="dark"] .chart-datalabel-bg { fill: rgba(11, 17, 32, 0.95); }
    body[data-theme="dark"] .chart-datalabel,
    body[data-theme="dark"] svg .chart-datalabel { fill: rgba(241, 245, 249, 0.98) !important; }
    body[data-theme="dark"] svg .axis text { fill: var(--text) !important; }
    body[data-theme="warm"] .chart-datalabel-bg { fill: rgba(41, 32, 25, 0.92); }
    body[data-theme="warm"] .chart-datalabel,
    body[data-theme="warm"] svg .chart-datalabel { fill: rgba(255, 252, 248, 0.98) !important; }
    /* 스택 막대 등: 범례(시리즈)색·합계 레이블용 — 인라인 --dl-* 로 색 지정 */
    svg g.chart-datalabel-wrap--themed .chart-datalabel-bg--themed {
      fill: var(--dl-bg) !important;
      stroke: var(--dl-stroke, rgba(255, 255, 255, 0.22));
      stroke-width: 1;
    }
    svg g.chart-datalabel-wrap--themed .chart-datalabel--themed {
      fill: var(--dl-fg) !important;
    }
    /* 데이터 레이블에 data-tip이 있으면 막대와 동일하게 호버 툴팁 히트 */
    svg g.chart-datalabel-wrap[data-tip] {
      pointer-events: all;
    }
    .chart-box svg text, .line-chart-shell svg text { font-family: "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
    .axis line, .axis path { stroke: var(--line); stroke-width: 1; }
    .legend { margin-top: 8px; }
    .legend-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 18px; font-weight: 700; }
    .legend-swatch { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; }
    .legend-swatch.legend-swatch-line { width: 18px; height: 3px; border-radius: 0; }
    /* 선·막대 차트: 클릭 가능 범례 — 시리즈명만 취소선(스와치는 별도 톤) */
    .legend-item.legend-toggle .legend-series-label {
      min-width: 0;
      line-height: 1.25;
    }
    .legend-item.legend-toggle.legend-series-hidden {
      opacity: 1;
      color: color-mix(in srgb, var(--muted) 82%, var(--text));
      font-weight: 600;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--muted) 38%, transparent);
      background: color-mix(in srgb, var(--panel-strong) 52%, transparent);
    }
    .legend-item.legend-toggle.legend-series-hidden .legend-swatch {
      filter: grayscale(0.9);
      opacity: 0.48;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-2) 70%, transparent);
    }
    .legend-item.legend-toggle.legend-series-hidden .legend-swatch.legend-swatch-line {
      filter: grayscale(0.9);
      opacity: 0.48;
    }
    .legend-item.legend-toggle.legend-series-hidden .legend-series-label {
      text-decoration: line-through;
      text-decoration-thickness: 1px;
      text-underline-offset: 0.2em;
    }
    body[data-theme="dark"] .legend-item.legend-toggle.legend-series-hidden {
      color: color-mix(in srgb, var(--muted) 75%, #e2e8f0);
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.32);
      background: rgba(15, 23, 42, 0.42);
    }
    body[data-theme="dark"] .legend-item.legend-toggle.legend-series-hidden .legend-swatch {
      box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.38);
    }
    body[data-theme="warm"] .legend-item.legend-toggle.legend-series-hidden {
      box-shadow: inset 0 0 0 1px rgba(120, 53, 15, 0.24);
      background: color-mix(in srgb, var(--panel-strong) 65%, rgba(254, 243, 199, 0.35));
    }
    /* 범례 3열 고정 레이아웃: 이름(flex) | 값(고정) | 비중%(고정) */
    .legend-label-text {
      flex: 1 1 auto; min-width: 0;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .legend-value {
      flex: 0 0 auto; white-space: nowrap; text-align: right; margin-left: 4px;
    }
    .legend-pct {
      flex: 0 0 40px; text-align: right; white-space: nowrap;
    }
    /* legend를 display:grid로 정렬하면 모든 항목의 열이 딱 맞음 */
    .donut-wrap .legend {
      display: flex !important;
      flex-direction: column !important;
    }
    .donut-wrap .legend-item {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      cursor: default;
    }
    .donut-wrap .legend-item .legend-swatch { flex: 0 0 auto !important; }
    .donut-wrap .legend-item .legend-label-text {
      flex: 1 1 auto !important; min-width: 0 !important;
      overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
    }
    .donut-wrap .legend-item .legend-value {
      flex: 0 0 auto !important; white-space: nowrap !important; margin-left: 0 !important;
    }
    .donut-wrap .legend-item .legend-pct {
      flex: 0 0 40px !important; text-align: right !important;
      white-space: nowrap !important; width: 40px !important;
    }
    .legend-swatch.legend-swatch-line { width: 18px; height: 3px; border-radius: 0; }
    .legend-item.interactive {
      cursor: pointer;
      padding: 6px 10px;
      border-radius: 999px;
      transition: background 0.18s ease, transform 0.18s ease;
    }
    .legend-item.interactive:hover {
      background: rgba(255,255,255,0.52);
      transform: translateY(-1px);
    }
    body[data-theme="dark"] .legend-item.interactive:hover {
      background: rgba(99, 102, 241, 0.18);
    }
    body[data-theme="warm"] .legend-item.interactive:hover {
      background: rgba(180, 83, 9, 0.12);
    }
    #summaryGoalChart .chart-top-row {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
      gap: 8px 12px;
      flex-shrink: 0;
      min-height: 36px;
    }
    #summaryGoalChart .chart-top-row .line-chart-toolbar {
      justify-self: end;
    }
    #summaryGoalChart .chart-top-row .legend-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    #summaryGoalChart .legend,
    #summaryGoalLegendHost .legend {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px 14px;
      margin: 0;
      padding: 0;
    }
    #summaryGoalLegendHost.summary-goal-legend-host .legend {
      justify-content: flex-end;
    }
    #summaryGoalChart .legend-item.legend-toggle,
    #summaryGoalLegendHost .legend-item.legend-toggle {
      cursor: pointer;
      padding: 4px 10px;
      border-radius: 999px;
      transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
    }
    #summaryGoalChart .legend-item.legend-toggle:hover,
    #summaryGoalLegendHost .legend-item.legend-toggle:hover {
      background: rgba(0,0,0,0.06);
    }
    .line-chart-shell .legend-item.legend-toggle {
      cursor: pointer;
      padding: 3px 8px;
      border-radius: 999px;
      transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
      user-select: none;
    }
    .line-chart-shell .legend-item.legend-toggle:hover {
      background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
    }
    /* 보고서(admin2) ② Trend: 범례가 차트 밖(admin2BriefingLegendHost)에 있어도 토글·호버 동일 */
    .admin2-trend-legend-host .legend-item.legend-toggle {
      cursor: pointer;
      padding: 3px 8px;
      border-radius: 999px;
      transition: background 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
      user-select: none;
    }
    .admin2-trend-legend-host .legend-item.legend-toggle:hover {
      background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
    }
    .line-chart-shell [data-series].series-hidden {
      opacity: 0;
      pointer-events: none;
    }
    #summaryGoalChart [data-series="0"].series-hidden,
    #summaryGoalChart [data-series="1"].series-hidden,
    #summaryGoalChart [data-series="2"].series-hidden {
      opacity: 0;
      pointer-events: none;
    }

    .metric-strip { margin-top: 6px; gap: 6px; }
    .metric-pill {
      flex: 1 1 140px;
      background: var(--panel);
      border: 1px solid var(--line-2);
      border-radius: var(--radius);
      padding: 10px 12px;
      box-shadow: var(--shadow-soft);
      position: relative;
      overflow: hidden;
    }
    /* 메트릭 필: 전 항목 동일 좌측 룰(3px), 강조만 굵기·색상 상향 */
    .metric-pill::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--line-2);
      border-radius: 18px 0 0 18px;
    }
    .metric-pill.is-primary::before {
      width: 4px;
      background: var(--primary);
    }
    .metric-pill.is-primary {
      background: linear-gradient(90deg, rgba(59, 130, 246, 0.08), var(--panel) 12px);
      border-color: rgba(59, 130, 246, 0.22);
    }
    .metric-pill strong { display: block; font-size: 26px; margin-top: 6px; letter-spacing: -0.04em; font-weight: 800; }
    .metric-pill span { color: var(--muted); font-size: 15px; font-weight: 800; text-transform: uppercase; }

    .donut-wrap {
      display: grid;
      grid-template-columns: min(220px, 40%) 1fr;
      gap: 18px;
      align-items: center;
    }
    .donut {
      width: min(200px, 100%);
      aspect-ratio: 1;
      border-radius: 50%;
      position: relative;
      margin: 0 auto;
    }
    .donut::after {
      content: attr(data-center);
      position: absolute;
      inset: 28px;
      border-radius: 50%;
      background: var(--panel);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      white-space: pre-line;
      font-size: 13px;
      font-weight: 900;
      color: var(--text);
      box-shadow: inset 0 0 0 1px var(--line-2), 0 4px 12px rgba(0,0,0,0.08);
    }

    .ranking-table,
    .record-table table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    th, td {
      padding: 11px 12px;
      border-bottom: 1px solid var(--line-2);
      text-align: left;
      vertical-align: middle;
      position: relative;
      z-index: 1;
    }
    th {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--table-head-text);
      background: var(--table-head-bg);
      border-bottom: 1px solid var(--line-2);
    }
    td.num, th.num { text-align: right; }

    th.table-sortable-th {
      cursor: pointer;
      user-select: none;
    }
    th.table-sortable-th:hover {
      background: color-mix(in srgb, var(--primary) 8%, var(--table-head-bg));
    }
    .table-sort-indicator {
      display: inline-block;
      font-size: 0.72em;
      margin-left: 3px;
      min-width: 0.65em;
      font-weight: 800;
      vertical-align: middle;
      color: var(--muted);
    }
    th.table-sortable-th.is-sorted-asc .table-sort-indicator,
    th.table-sortable-th.is-sorted-desc .table-sort-indicator {
      color: var(--primary);
    }

    .insight-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .insight {
      padding: 12px 14px;
      border-radius: var(--radius);
      min-height: 80px;
      background: var(--panel);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-soft);
    }
    .insight h4 { margin: 0; font-size: 16px; font-weight: 700; }
    .insight p, .insight ul { color: var(--muted); font-size: 15px; line-height: 1.5; }
    .insight ul { margin: 8px 0 0; padding-left: 16px; }

    .heat-grid {
      display: grid;
      gap: 6px;
      overflow-x: auto;
      max-height: min(400px, 48vh);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .heat-row { display: grid; gap: 6px; align-items: center; }
    .heat-header {
      background: var(--table-head-bg);
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 800;
      color: var(--table-head-text);
    }
    .heatmap-legend {
      margin: 0 0 8px 0;
      font-size: 12px;
      color: var(--muted);
    }

     .org-map {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
     .record-table {
      border-radius: var(--radius);
      padding: 16px 18px;
      background: var(--panel);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-soft);
    }
    .record-table {
      overflow-x: auto;
      overflow-y: auto;
      max-height: min(380px, 45vh);
      -webkit-overflow-scrolling: touch;
      /* 테이블 끝까지 스크롤한 뒤 휠이 상위(페이지)로 이어지지 않게 */
      overscroll-behavior-y: contain;
    }
    /* 단일 테이블 자식: 세로 스크롤은 tbody에만 (헤더 고정, 1행 스냅) */
    .record-table:has(> table:only-child) {
      overflow-y: hidden;
    }
    .panel:has(.record-table) {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .panel:has(.record-table) .record-table {
      flex: 1 1 auto;
      min-height: 0;
      max-height: min(380px, 45vh);
    }
    /* ══ 표준: .record-table > table 1개 — 헤더 고정, tbody만 세로 스크롤(1행 스냅) ══ */
    /* 루트 table을 block으로 두어야 thead(display:table) + tbody(display:flex) + tr(display:table) 조합에서
       열 너비가 헤더/데이터 행에 공유된다. block 없이 tbody만 flex면 열이 밀리는 테이블이 생김(부록 인원·투자 등). */
    .record-table:has(> table:only-child) > table {
      display: block;
      width: 100%;
      min-width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
    }
    .record-table:has(> table:only-child) > table thead {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    .record-table:has(> table:only-child) > table thead th {
      position: static !important;
      top: auto !important;
    }
    .record-table:has(> table:only-child) > table tbody {
      display: flex;
      flex-direction: column;
      gap: 0;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-gutter: stable;
      scroll-snap-type: y mandatory;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      max-height: min(332px, calc(45vh - 52px));
    }
    #view-summary .panel .record-table:has(> table:only-child) > table tbody {
      max-height: min(272px, calc(38vh - 52px));
    }
    /* 조직 전년비교 패널(.org-panel-compare)은 아래 전용 규칙으로 tbody 높이를 씀 — 여기 272px가 더 구체적이라 덮어써 6행이 잘렸음 */
    #view-organization .org-four-rows .panel:not(.org-panel-compare) .record-table:has(> table:only-child) > table tbody {
      max-height: min(272px, calc(40vh - 52px));
    }
    .record-table:has(> table:only-child) > table tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
      flex-shrink: 0;
      scroll-snap-align: start;
      scroll-snap-stop: normal;
    }
    .mini-note { color: var(--muted); font-size: 14px; line-height: 1.5; }

    /* Q&A NLP (Chat-to-Chart) bar — 레이아웃·힌트 칩 스타일은 아래 "Q&A 수정" 블록 */
    .qa-nlp-row {
      display: flex;
      align-items: stretch;
      gap: 10px;
      width: 100%;
    }
    .qa-nlp-input-wrap {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 16px;
      min-height: 52px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel);
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .qa-nlp-input-wrap:focus-within {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .qa-nlp-input-icon {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      color: var(--primary);
      opacity: 0.9;
    }
    .qa-nlp-input-icon svg { width: 100%; height: 100%; }
    .qa-nlp-input {
      flex: 1;
      min-width: 0;
      padding: 14px 0;
      border: none;
      background: transparent;
      font-size: var(--ds-font-md);
      line-height: 1.4;
      color: var(--text);
      font-family: inherit;
    }
    .qa-nlp-input::placeholder { color: var(--muted); }
    .qa-nlp-input:focus { outline: none; }
    .qa-nlp-submit-btn {
      flex-shrink: 0;
      min-height: 52px;
      padding: 0 24px;
      border: none;
      border-radius: 10px;
      font-size: var(--ds-font-md);
      font-weight: 700;
      color: var(--on-primary);
      background: var(--primary);
      cursor: pointer;
      box-shadow: var(--accent-shadow);
      transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    }
    .qa-nlp-submit-btn:hover {
      background: var(--primary-dark);
      box-shadow: var(--shadow);
    }
    .qa-nlp-submit-btn:active { transform: scale(0.98); }
    .qa-nlp-hints-label {
      font-size: var(--ds-font-md);
      font-weight: 600;
      color: var(--muted);
      flex-shrink: 0;
    }

    /* Q&A 관리자 로그 (qa_logs=1 시 표시) */
    .qa-admin-log-wrap {
      margin-top: 20px;
      padding: 16px;
      border: 1px solid var(--line-2);
      border-radius: 10px;
      background: var(--panel-surface);
    }
    .qa-admin-log-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 16px;
      margin-bottom: 12px;
    }
    .qa-admin-log-head .mini-note { flex: 1; min-width: 200px; }
    .qa-admin-log-actions { display: flex; gap: 8px; }
    .qa-admin-log-table-wrap {
      max-height: 360px;
      overflow-x: auto;
      overflow-y: hidden;
    }
    .qa-admin-log-table-wrap > table.qa-admin-log-table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
      table-layout: fixed;
    }
    .qa-admin-log-table-wrap > table.qa-admin-log-table thead {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    .qa-admin-log-table-wrap > table.qa-admin-log-table thead th {
      position: static;
    }
    .qa-admin-log-table-wrap > table.qa-admin-log-table tbody {
      display: flex;
      flex-direction: column;
      gap: 0;
      max-height: calc(360px - 44px);
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-gutter: stable;
      scroll-snap-type: y mandatory;
      -webkit-overflow-scrolling: touch;
    }
    .qa-admin-log-table-wrap > table.qa-admin-log-table tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
      flex-shrink: 0;
      scroll-snap-align: start;
    }
    .qa-admin-log-table { font-size: var(--ds-font-base); }
    .qa-admin-log-table .qa-log-query { max-width: 320px; word-break: break-word; }
    #qaAdminLogEmpty { margin-top: 8px; color: var(--muted); }

    /* ─── Q&A 수정: 추천질의 패널 최소화 ─── */
    /* ─── 1. 추천질의 패널 한 줄 최소화 ─── */
    .qa-nlp-bar {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      padding: 3px 0;
      margin-bottom: 3px;
      border-bottom: 1px solid var(--line);
      flex-shrink: 0;
    }
    .qa-nlp-hints-row {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 6px;
      padding-left: 4px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      flex: 1;
    }
    .qa-nlp-hints {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 6px;
    }
    .qa-nlp-hint {
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--panel);
      font-size: var(--ds-font-sm);
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s, border-color 0.15s;
    }
    .qa-nlp-hint:hover {
      background: var(--primary-3, var(--line-2));
      border-color: var(--primary);
      color: var(--primary);
    }

    /* ─── 2. Q&A 3열 레이아웃: 2 : 5 : 3 ─── */
    #view-qa .qa-layout {
      /* qa-layout(질문/옵션/원인 설명) 본문이 너무 작아지는 문제 보정 */
      --ds-font-md: 12px;
      --ds-font-base: 12px;
      flex: 1;
      min-height: 0;
      display: grid;
      grid-template-columns: 2fr 5fr 3fr;
      grid-template-rows: minmax(0, 1fr);
      gap: 12px;
      align-items: stretch;
      margin-top: 0;
      overflow: hidden;
    }

    /* qa-main(중앙 열): 아래쪽 #view-qa .qa-main + .qa-main-stack 규칙 참고 */

    /* qa-output-two-col: 중앙이 단독 열이므로 전체 사용 */
    #view-qa .qa-output-two-col {
      flex: 1 1 0;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 6px;
      height: 100%;
    }

    /* qa-output-viz: 차트 위 / 테이블 아래 */
    .qa-output-viz {
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow: hidden;
      flex: 1 1 0;
    }
    .qa-output-viz .qa-summary-card { flex-shrink: 0; }
    #view-qa .qa-output-viz > .qa-summary {
      flex-shrink: 0;
      min-height: 0;
    }
    .qa-output-viz .qa-chart {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .qa-output-viz .chart-box.qa-chart {
      margin-bottom: 0;
      min-height: 300px;
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .qa-output-viz .qa-chart svg,
    .qa-output-viz .qa-chart .qa-chart-svg-stretch {
      flex: 1 1 0;
      min-height: 0;
      width: 100%;
      height: 100%;
      display: block;
    }
    #view-qa .chart-box.qa-chart .chart-viz-body .donut-wrap {
      flex: 1 1 0;
      min-height: 0;
      width: 100%;
      grid-template-columns: minmax(120px, min(30vw, 200px)) minmax(0, 1fr);
      gap: 12px 16px;
      align-items: center;
      align-content: center;
    }
    #view-qa .chart-box.qa-chart .chart-viz-body .donut {
      width: min(168px, 100%);
      max-width: 100%;
    }
    .qa-output-viz .qa-table {
      flex: 1 1 0;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      display: flex;
      flex-direction: column;
    }
    .qa-output-viz .qa-table .record-table {
      max-height: none;
      flex: 1;
      min-height: 0;
      overflow-x: auto;
      overflow-y: auto;
      padding: 0;
      border-radius: var(--radius);
      background: var(--panel);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-soft);
    }
    .qa-output-viz .qa-table .record-table:has(> table:only-child) {
      overflow-y: hidden;
    }
    .qa-output-viz .qa-table .record-table:has(> table:only-child) > table tbody {
      max-height: min(52vh, 560px);
    }

    /* ─── 중앙 테이블: 균등 분배 + 모두 가운데 정렬 ─── */
    #view-qa .qa-table .ranking-table,
    #view-qa .qa-table .record-table table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--ds-font-md);
      table-layout: fixed;
    }
    #view-qa .qa-table .record-table:has(> table:only-child) > table {
      border-collapse: separate !important;
      border-spacing: 0 !important;
    }
    #view-qa .qa-table .ranking-table th,
    #view-qa .qa-table .record-table th {
      font-size: var(--ds-font-xs);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--table-head-text);
      background: var(--table-head-bg);
      padding: 10px 8px;
      border-bottom: 1px solid var(--line-2);
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #view-qa .qa-table .ranking-table td,
    #view-qa .qa-table .record-table td {
      padding: 9px 8px;
      border-bottom: 1px solid var(--line-2);
      font-size: var(--ds-font-md);
      font-weight: 500;
      color: var(--text);
      vertical-align: middle;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ─── 원인설명 테이블: 구분(2):내용(8) + 가운데 정렬 ─── */
    #view-qa .qa-cause-table-wrap .ranking-table { width: 100%; border-collapse: collapse; font-size: var(--ds-font-md); table-layout: fixed; }
    #view-qa .qa-cause-table-wrap:has(> table:only-child) > table {
      border-collapse: separate !important;
      border-spacing: 0 !important;
    }
    #view-qa .qa-cause-table-wrap .ranking-table th:first-child,
    #view-qa .qa-cause-table-wrap .ranking-table td:first-child { width: 20%; }
    #view-qa .qa-cause-table-wrap .ranking-table th:not(:first-child),
    #view-qa .qa-cause-table-wrap .ranking-table td:not(:first-child) { width: 80%; }
    #view-qa .qa-cause-table-wrap .ranking-table th {
      font-size: var(--ds-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
      color: var(--table-head-text); background: var(--table-head-bg);
      padding: 10px 10px; border-bottom: 1px solid var(--line-2);
      text-align: center; vertical-align: middle;
    }
    #view-qa .qa-cause-table-wrap .ranking-table td {
      padding: 9px 10px; border-bottom: 1px solid var(--line-2);
      font-size: var(--ds-font-md); font-weight: 600; color: var(--text);
      vertical-align: middle; text-align: center;
      word-break: keep-all; white-space: normal; line-height: 1.55;
    }
    #view-qa .qa-cause-table-wrap .ranking-table td:not(:first-child) {
      text-align: left;
    }

    /* chart-card-with-switcher 내부 채우기 */
    #view-qa .qa-output-viz .chart-card-with-switcher,
    #view-qa .qa-output-viz .chart-viz-body,
    #view-qa .qa-output-viz .line-chart-shell {
      min-height: 0;
      flex: 1 1 0;
      height: 100%;
      overflow: hidden;
    }
    #view-qa .qa-output-viz .chart-viz-body > div {
      min-height: 0;
      flex: 1 1 0;
      height: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #view-qa .qa-output-viz .line-chart-shell {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
    }
    /* Q&A 선그래프: #view-qa의 grid display가 --top-legend의 flex를 덮어써 플롯 높이가 죽고 X축이 잘리는 문제 → flex로 복원 */
    #view-qa .qa-output-viz .line-chart-shell.line-chart-shell--top-legend.line-chart-shell--qa-line {
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 0;
    }
    /* Q&A 선그래프: 플롯이 범례 아래 남는 높이를 채움 */
    #view-qa .qa-output-viz .line-chart-shell--qa-line.line-chart-shell--top-legend .line-chart-plot-area {
      flex: 1 1 0;
      /* 카드 높이에 맞춰 줄어들 수 있게(카드 초과 방지) */
      min-height: 0 !important;
    }
    #view-qa .qa-output-viz .line-chart-shell--qa-line .chart-inline-top-row {
      flex-wrap: wrap;
      gap: 4px 8px;
      margin-bottom: 2px;
    }
    /* Q&A 선차트: 전역 .axis 13px보다 크게 보이도록(인라인 style과 보조) */
    #view-qa .qa-output-viz .line-chart-svg--qa .axis text {
      font-size: var(--ds-font-sm) !important;
      font-weight: 600 !important;
      fill: var(--text) !important;
    }
    #view-qa .qa-output-viz .line-chart-svg--qa text.label {
      font-size: var(--ds-font-sm) !important;
      font-weight: 600 !important;
      fill: var(--text) !important;
    }
    .qa-options,
    .qa-summary-card {
      border-radius: 10px;
      background: var(--panel);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-soft);
    }
    /* 질문 열: 바깥은 트랙만 — 실제 카드는 .qa-questions-card */
    .qa-questions {
      padding: 0;
      margin-top: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      background: transparent;
      border: none;
      box-shadow: none;
      overflow: hidden;
    }
    .qa-questions-card {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      padding: 12px 12px 10px;
      border-radius: 16px;
      background: var(--panel-surface);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
    }
    .qa-questions-card .qa-questions-head {
      flex-shrink: 0;
      padding: 2px 2px 12px;
      margin-bottom: 0;
      border-bottom: 2px solid color-mix(in srgb, var(--line-2) 88%, var(--primary) 12%);
      min-width: 0;
      box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 5%, transparent);
    }
    /* 질문 버튼 영역: 카드 헤더와 시각적으로 분리된 스크롤 트랙 */
    .qa-questions-card .qa-question-list {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      text-align: center;
      box-sizing: border-box;
      margin-top: 10px;
      padding: 12px 10px 14px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--line-2) 92%, var(--primary) 8%);
      background: color-mix(in srgb, var(--panel) 88%, var(--line-soft) 12%);
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 55%, transparent),
        inset 0 -1px 0 color-mix(in srgb, var(--text) 6%, transparent);
    }
    #view-qa .qa-main {
      margin-top: 0;
      padding-top: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      flex: 1 1 0;
      gap: 10px;
    }
    /* 중앙: 옵션(상단 바) + 시각화(하단 카드) 구분 */
    #view-qa .qa-main-stack {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      overflow: hidden;
    }
    #view-qa .qa-main-stack .qa-options {
      flex-shrink: 0;
      border-radius: 14px;
      padding: 10px 12px;
      background: var(--panel-surface);
      border: 1px solid var(--line-2);
      box-shadow: 0 1px 0 color-mix(in srgb, white 40%, transparent);
    }
    #view-qa .qa-main-stack .qa-output-viz {
      flex: 1 1 0;
      min-height: 0;
      border-radius: 16px;
      padding: 4px 6px 8px;
      background: var(--panel);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-soft);
    }
    #view-qa .qa-options { flex-shrink: 0; }
    /* qa-output-cause: 원인 설명 패널 */
    .qa-questions-head {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px 10px;
      margin-bottom: 2px;
      text-align: center;
      min-width: 0;
    }
    .qa-questions-head strong {
      font-size: var(--ds-font-lg);
      white-space: nowrap;
      font-weight: 800;
      color: var(--text);
      flex-shrink: 0;
      text-align: center;
    }
    #view-qa .qa-questions-head .mini-note {
      font-size: 11px !important;
      white-space: normal;
      flex: 1 1 140px;
      min-width: 0;
      line-height: 1.35;
      color: var(--muted);
      text-align: center;
    }
    .qa-question-list {
      margin-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      align-items: stretch;
      width: 100%;
    }
    .qa-question-btn {
      border: 1px solid var(--line-2);
      border-radius: 10px;
      padding: 8px 10px;
      text-align: center;
      /* 질문 리스트(qa-layout) 텍스트는 10px로 낮추면 너무 작아져 보임 */
      font-size: 12px !important;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      font-weight: 700;
      line-height: 1.45;
      color: var(--muted);
      background: color-mix(in srgb, var(--panel-surface) 94%, white 6%);
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
      word-break: keep-all;
      overflow-wrap: anywhere;
      box-shadow: 0 1px 0 color-mix(in srgb, white 70%, transparent);
    }
    .qa-question-btn > div {
      text-align: center;
    }
    .qa-question-btn .mini-note {
      font-size: 11px !important;
      line-height: 1.35;
      margin-top: 4px;
      display: block;
      text-align: center;
      font-weight: 500;
      color: var(--muted);
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    .qa-question-btn .qa-question-emoji {
      margin-right: 4px;
      flex-shrink: 0;
    }
    .qa-question-btn.active {
      color: #fff;
      background: var(--primary);
      border-color: var(--primary);
      box-shadow: var(--shadow-soft);
    }
    .qa-question-btn.active .mini-note {
      color: rgba(255, 255, 255, 0.9);
    }
    .qa-options {
      padding: 4px 8px 6px;
      margin-bottom: 4px;
    }
    .qa-options strong { font-size: var(--ds-font-lg); margin-bottom: 0; font-weight: 800; color: var(--text); line-height: 1.3; }
    #view-qa .qa-options .mini-note { font-size: 11px !important; }
    .qa-options-row {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 0;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }
    .qa-options-row strong { flex-shrink: 0; }
    #view-qa .qa-options .qa-options-one-line {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 8px 12px;
      margin-bottom: 0;
      min-width: 0;
    }
    #view-qa .qa-options .qa-options-one-line .qa-options-title {
      flex: 1 1 200px;
      min-width: min(100%, 160px);
      white-space: normal;
      overflow: visible;
      text-overflow: unset;
      line-height: 1.4;
      font-size: var(--ds-font-lg);
      font-weight: 800;
      color: var(--text);
    }
    #view-qa .qa-options .qa-options-one-line .qa-options-filter-hint {
      flex: 0 0 auto;
      max-width: 10.5rem;
      white-space: normal;
      font-size: var(--ds-font-sm) !important;
      font-weight: 700 !important;
      line-height: 1.25;
      letter-spacing: 0.02em;
      padding: 5px 10px;
      margin: 0;
      border-radius: 999px;
      color: var(--muted) !important;
      background: color-mix(in srgb, var(--panel-strong) 88%, var(--primary) 6%) !important;
      border: 1px solid color-mix(in srgb, var(--line-2) 90%, var(--primary) 10%) !important;
      box-shadow: none !important;
    }
    #view-qa .qa-options .qa-options-one-line .qa-options-grid {
      margin: 4px 0 0;
      flex: 1 1 100%;
      width: 100%;
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
    }
    #view-qa .qa-options .qa-options-grid { margin-top: 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #view-qa .qa-options .qa-option { flex-shrink: 0; }
    .qa-options-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 4px 8px;
      align-items: center;
    }
    .qa-option {
      flex: 0 1 auto;
      min-width: 0;
    }
    .qa-option label {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      font-size: var(--ds-font-md);
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.02em;
      margin: 0;
      white-space: nowrap;
    }
    .qa-option label input,
    .qa-option label select {
      flex: 0 0 auto;
      width: 100px;
      min-width: 0;
    }
    .qa-option select,
    .qa-option input {
      padding: 3px 6px;
      border-radius: 6px;
      border: 1px solid rgba(108, 127, 148, 0.32);
      background: var(--panel-strong);
      color: var(--text);
      font-size: var(--ds-font-md);
      font-weight: 700;
    }
    .qa-summary-card {
      padding: 4px 8px 6px;
      margin-bottom: 4px;
      flex-shrink: 0;
    }
    .qa-summary-head {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: baseline;
      gap: 8px;
    }
    .qa-summary-head-left {
      display: flex;
      flex-wrap: nowrap;
      align-items: baseline;
      gap: 6px;
      min-width: 0;
      flex: 1;
    }
    .qa-summary-head .section-kicker { margin: 0; font-size: var(--ds-font-lg); flex-shrink: 0; font-weight: 800; color: var(--primary); }
    .qa-summary-head h3 {
      margin: 0;
      font-size: var(--ds-font-lg);
      font-weight: 800;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .qa-summary-value {
      font-size: var(--ds-font-xl);
      font-weight: 900;
      color: var(--primary);
      white-space: nowrap;
      flex-shrink: 0;
    }
    .qa-summary-list {
      margin: 2px 0 0;
      padding: 0;
      list-style: none;
      color: var(--muted);
      font-size: var(--ds-font-md);
      line-height: 1.3;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0 8px;
    }
    .qa-summary-list li { margin: 0; display: inline; }
    .qa-summary-list li::after { content: " · "; color: var(--muted); }
    .qa-summary-list li:last-child::after { content: none; }
    .qa-summary-oneline {
      margin: 4px 0 0;
      font-size: var(--ds-font-md);
      line-height: 1.5;
      color: var(--text);
      font-weight: 600;
    }
    #view-qa .qa-keyword { color: var(--primary); font-weight: 800; }
    #view-qa .qa-cause-explanation .qa-keyword,
    #view-qa .qa-cause-chart-hint .qa-keyword {
      font-weight: 900;
      letter-spacing: -0.02em;
    }
    .qa-output-cause .qa-cause-panel-head { flex: 0 0 auto; }
    .qa-output-cause .qa-cause-explanation { flex: 0 0 auto; overflow-y: auto; }
    .qa-output-cause .qa-cause-chart-hint { flex: 0 0 auto; }
    .qa-output-cause .qa-cause-table-wrap { flex: 1; min-height: 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; }
    /* ── 원인설명 패널 내부 비율: 이유(3) : 내용(2) : 테이블(5) ── */
    .qa-output-cause {
      display: flex;
      flex-direction: column;
      border-radius: 10px;
      padding: 6px 8px 8px;
      background: var(--panel);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      min-height: 0;
      height: 100%;
      gap: 4px;
    }
    .qa-output-cause > .qa-cause-panel-head {
      flex: 0 0 auto;
      font-size: var(--ds-font-lg);
      font-weight: 800;
      color: var(--primary);
      padding-bottom: 4px;
      border-bottom: 1px solid rgba(59, 130, 246, 0.2);
    }
    .qa-output-cause > .qa-cause-mid-wrap {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .qa-output-cause > .qa-cause-table-wrap {
      flex: 1 1 0;
      min-height: 120px;
      overflow-x: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 0;
    }
    .qa-cause-panel-head {
      font-size: var(--ds-font-lg);
      font-weight: 700;
      color: var(--primary, #1e3a5f);
    }
    #view-qa .qa-output-viz .legend { margin-top: 4px; }
    .qa-cause-explanation { margin-bottom: 0; }
    .qa-cause-explanation .qa-cause-p {
      margin: 4px 0;
      line-height: 1.55;
      font-size: var(--ds-font-md);
      color: var(--text);
      font-weight: 600;
    }
    .qa-cause-explanation .qa-cause-inline { font-size: var(--ds-font-md); line-height: 1.55; color: var(--text); font-weight: 600; }
    .qa-cause-explanation .qa-cause-list { margin-top: 4px; }
    .qa-cause-explanation .qa-cause-list .qa-cause-p { margin: 10px 0; }
    .qa-cause-explanation .qa-cause-list .qa-cause-p:first-child { margin-top: 0; }
    .qa-cause-chart-hint {
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(59, 130, 246, 0.08);
      border: 1px solid rgba(59, 130, 246, 0.2);
      margin-bottom: 0;
      font-size: var(--ds-font-md);
      line-height: 1.5;
      color: var(--text);
      font-weight: 600;
    }
    .qa-cause-chart-hint strong {
      font-weight: 800;
      color: var(--text);
    }
    #view-qa .qa-output-viz .qa-table { flex: 1; min-height: 0; }
    #view-qa .qa-output-cause .qa-cause-table-wrap.record-table:has(> table:only-child) > table tbody {
      max-height: min(42vh, 480px);
    }
    .qa-summary-explanation { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
    .qa-summary-explanation strong { display: inline; margin-right: 6px; font-size: var(--ds-font-md); color: var(--muted); }
    .qa-explanation-p { margin: 1px 0; font-size: var(--ds-font-md); line-height: 1.45; color: var(--muted); }

    /* Issue Center */
    .issue-center-filters {
      display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px;
      padding: 12px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
    }
    .issue-center-filters .compact-field { display: inline-flex; align-items: center; gap: 6px; }
    .issue-center-filters input[type="date"],
    .issue-center-filters input[type="number"] { width: 120px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--text); }
    .issue-center-layout {
      display: grid; grid-template-columns: minmax(0, 380px) 1fr; gap: 20px; align-items: start;
    }
    .issue-center-cards {
      display: flex; flex-direction: column; gap: 10px;
    }
    .issue-card {
      border-radius: 12px; padding: 12px 14px; border: 1px solid var(--line);
      background: var(--panel); box-shadow: var(--shadow-soft); cursor: pointer;
      transition: box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .issue-card:hover { box-shadow: var(--shadow); border-color: var(--line-2); }
    .issue-card.selected { border-color: var(--primary); box-shadow: var(--accent-shadow); }
    .issue-card-severity { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
    .issue-card-severity.high { color: var(--bad); }
    .issue-card-severity.medium { color: var(--warn); }
    .issue-card-severity.low { color: var(--ok); }
    .issue-card-title { font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--text); margin-bottom: 6px; }
    .issue-card-summary { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
    .issue-card-impact { font-size: 12px; color: var(--muted-2); }
    .issue-center-drilldown {
      position: sticky; top: 100px; border-radius: 16px; padding: 16px;
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      min-height: 280px;
    }
    .issue-drilldown-placeholder { font-size: 15px; color: var(--muted); padding: 18px; text-align: center; line-height: 1.5; }
    .issue-drilldown-content h4 { margin: 0 0 14px; font-size: 17px; font-weight: 800; color: var(--text); }
    .issue-drilldown-explanation { margin-bottom: 14px; padding: 12px 14px; background: var(--panel); border-radius: 10px; border-left: 4px solid var(--primary); }
    .issue-drilldown-explanation .issue-cause-p { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--text); }
    .issue-drilldown-explanation .issue-cause-p:last-child { margin-bottom: 0; }
    .issue-drilldown-content {
      max-height: min(380px, 45vh);
      overflow-y: auto;
      overflow-x: auto;
    }
    .issue-drilldown-content .ranking-table { font-size: 14px; }
    .issue-drilldown-content .ranking-table th,
    .issue-drilldown-content .ranking-table td { padding: 10px 12px; }
    #issueDrilldownChart { min-height: 180px; margin-bottom: 12px; }
    @media (max-width: 900px) {
      .issue-center-layout { grid-template-columns: 1fr; }
      .issue-center-drilldown { position: static; min-height: 280px; }
    }
    .active-filter-label {
      font-size: 15px;
      font-weight: 900;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--muted-2);
    }
    .active-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--primary-3);
      border: 1px solid var(--line);
      color: var(--primary-dark);
      font-size: 15px;
      font-weight: 800;
    }
    .active-filter-chip button {
      width: 20px;
      height: 20px;
      border: none;
      border-radius: 999px;
      background: var(--line-2);
      color: var(--muted);
      font-size: 14px;
      cursor: pointer;
    }
    .interactive-card {
      cursor: pointer;
      transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    }
    .interactive-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--accent-shadow);
      border-color: var(--primary);
    }
    .ui-tooltip {
      position: fixed;
      z-index: 10000;
      max-width: 440px;
      padding: 12px 14px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--panel-strong) 96%, transparent) !important;
      border: 1px solid color-mix(in srgb, var(--line) 90%, transparent) !important;
      color: var(--text) !important;
      font-size: 15px;
      line-height: 1.5;
      box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16) !important;
      opacity: 0;
      pointer-events: none;
      transform: translateY(4px);
      transition: opacity 0.14s ease, transform 0.14s ease;
    }
    .ui-tooltip.open {
      opacity: 1;
      transform: translateY(0);
    }
    /* 메인 튜토리얼 · 툴팁 체험 단계: 후버 툴팁만 직관적으로 강조 */
    body.main-tutorial-tooltip-spotlight .ui-tooltip.open {
      z-index: 100005;
      border: 2px solid color-mix(in srgb, var(--primary) 72%, var(--line)) !important;
      box-shadow:
        0 0 0 3px color-mix(in srgb, var(--primary) 28%, transparent),
        0 12px 32px color-mix(in srgb, var(--primary) 22%, rgba(15, 23, 42, 0.2)),
        0 22px 48px rgba(15, 23, 42, 0.18) !important;
      transform: translateY(0);
      animation: main-tutorial-tooltip-spotlight-pulse 1.35s ease-in-out infinite;
    }
    body.main-tutorial-tooltip-spotlight .ui-tooltip.open::before {
      content: "💡 마우스 후버 툴팁";
      display: block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: var(--primary);
      margin: -4px -6px 8px;
      padding: 6px 8px 8px;
      border-radius: 10px 10px 0 0;
      background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary) 18%, transparent),
        color-mix(in srgb, var(--accent-soft) 35%, transparent)
      );
      border-bottom: 1px dashed color-mix(in srgb, var(--primary) 45%, transparent);
    }
    body[data-theme="dark"].main-tutorial-tooltip-spotlight .ui-tooltip.open {
      border-color: color-mix(in srgb, var(--primary-2) 65%, #334155) !important;
      box-shadow:
        0 0 0 3px color-mix(in srgb, var(--primary-2) 22%, transparent),
        0 12px 36px rgba(0, 0, 0, 0.45),
        0 0 40px color-mix(in srgb, var(--primary-2) 15%, transparent) !important;
    }
    body[data-theme="dark"].main-tutorial-tooltip-spotlight .ui-tooltip.open::before {
      color: #93c5fd;
      background: linear-gradient(
        135deg,
        color-mix(in srgb, var(--primary) 25%, rgba(15, 23, 42, 0.95)),
        color-mix(in srgb, var(--primary-2) 12%, rgba(15, 23, 42, 0.9))
      );
      border-bottom-color: color-mix(in srgb, var(--primary-2) 40%, transparent);
    }
    @keyframes main-tutorial-tooltip-spotlight-pulse {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-4px) scale(1.02); }
    }
    @media (prefers-reduced-motion: reduce) {
      body.main-tutorial-tooltip-spotlight .ui-tooltip.open {
        animation: none;
      }
    }
    .ui-tooltip .tooltip-body {
      display: grid;
      gap: 8px;
    }
    .ui-tooltip .tooltip-desc {
      color: inherit;
      font-weight: 600;
      font-size: 1em;
    }
    .ui-tooltip .tooltip-evidence {
      display: grid;
      gap: 4px;
      padding-top: 8px;
      border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      color: var(--muted);
    }
    .ui-tooltip .tooltip-evidence-label {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: var(--primary-2);
      text-transform: uppercase;
    }
    .ui-tooltip .tooltip-evidence-line {
      font-size: 13px;
      color: var(--muted);
    }
    .footer-note {
      margin-top: 18px;
      padding: 14px 18px;
      border-radius: 18px;
      background: var(--panel-surface);
      border: 1px solid var(--line-2);
      color: var(--muted);
      font-size: 12px;
      line-height: 1.6;
    }

    /* 대시보드 빈 상태: 아이콘 + 메시지 + (선택) CTA */
    .dashboard-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 32px 24px;
      text-align: center;
      color: var(--muted);
      min-height: 120px;
    }
    .dashboard-empty-state .empty-state-icon {
      font-size: 32px;
      margin-bottom: 12px;
      opacity: 0.7;
    }
    .dashboard-empty-state .empty-state-message {
      font-size: 14px;
      font-weight: 600;
      color: var(--muted-2);
      margin: 0 0 4px;
    }
    .dashboard-empty-state .empty-state-sub {
      font-size: 12px;
      margin: 0 0 12px;
      line-height: 1.5;
    }
    .dashboard-empty-state .empty-state-cta {
      margin-top: 8px;
    }

    /* 토스트/스낵바: 작업 완료 등 피드백 */
    .dashboard-toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(100px);
      z-index: 9000;
      padding: 12px 20px;
      border-radius: 12px;
      background: var(--navy);
      color: #fff;
      font-size: 13px;
      font-weight: 600;
      box-shadow: 0 8px 24px rgba(0,0,0,0.2);
      opacity: 0;
      transition: transform 0.25s ease, opacity 0.25s ease;
      pointer-events: none;
    }
    .dashboard-toast.is-visible {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
    }
    .dashboard-toast.success { background: var(--ok); }
    .dashboard-toast.error { background: var(--bad); }

    /* 의견 알림: 우측 상단·크게·클릭 가능(이동·닫기), 자동 숨김 없음 — JS에서 타이머 미사용 */
    .dashboard-toast.dashboard-toast--feedback {
      bottom: auto;
      top: 88px;
      left: auto;
      right: 20px;
      transform: translateX(16px) translateY(-10px);
      min-width: 300px;
      max-width: min(92vw, 440px);
      padding: 16px 18px;
      font-size: 14px;
      line-height: 1.45;
      pointer-events: auto;
      text-align: left;
    }
    .dashboard-toast.dashboard-toast--feedback.is-visible {
      transform: translateX(0) translateY(0);
    }
    .dashboard-toast__inner {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .dashboard-toast__msg {
      margin: 0;
      font-weight: 650;
    }
    .dashboard-toast__actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }
    .dashboard-toast__nav {
      cursor: pointer;
      border: none;
      border-radius: 8px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 700;
      background: rgba(255, 255, 255, 0.22);
      color: inherit;
    }
    .dashboard-toast__nav:hover {
      background: rgba(255, 255, 255, 0.32);
    }
    .dashboard-toast.dashboard-toast--feedback.success .dashboard-toast__nav {
      background: color-mix(in srgb, #0f172a 10%, transparent);
    }
    .dashboard-toast.dashboard-toast--feedback.success .dashboard-toast__nav:hover {
      background: color-mix(in srgb, #0f172a 16%, transparent);
    }
    .dashboard-toast__close {
      cursor: pointer;
      border: none;
      background: transparent;
      font-size: 22px;
      line-height: 1;
      padding: 2px 6px;
      opacity: 0.85;
      color: inherit;
    }
    .dashboard-toast__close:hover {
      opacity: 1;
    }

    /* 커버「대시보드 시작하기」→ 메인 진입 시 튜토리얼 필수 안내(강조 CTA·보조 링크) */
    @keyframes fullscreen-exit-hint-cta-glow {
      0%,
      100% {
        box-shadow:
          0 0 0 0 color-mix(in srgb, var(--primary) 55%, transparent),
          0 6px 0 color-mix(in srgb, var(--primary) 50%, #0f172a 50%),
          0 14px 36px color-mix(in srgb, var(--primary) 42%, transparent);
      }
      50% {
        box-shadow:
          0 0 0 6px color-mix(in srgb, var(--primary) 28%, transparent),
          0 6px 0 color-mix(in srgb, var(--primary) 50%, #0f172a 50%),
          0 18px 44px color-mix(in srgb, var(--primary) 55%, transparent);
      }
    }
    @keyframes fullscreen-exit-hint-card-ring {
      0%,
      100% {
        border-color: color-mix(in srgb, var(--primary) 55%, var(--line-2));
      }
      50% {
        border-color: color-mix(in srgb, var(--primary) 88%, #60a5fa);
      }
    }
    .fullscreen-exit-hint {
      position: fixed;
      inset: 0;
      z-index: 10020;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.28s ease;
    }
    .fullscreen-exit-hint.is-visible {
      pointer-events: auto;
      opacity: 1;
    }
    .fullscreen-exit-hint__backdrop {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 85% 65% at 50% 45%, rgba(30, 58, 138, 0.42) 0%, rgba(15, 23, 42, 0.82) 55%, rgba(15, 23, 42, 0.92) 100%);
      backdrop-filter: blur(10px);
      cursor: default;
    }
    .fullscreen-exit-hint__close {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      width: 34px;
      height: 34px;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 10px;
      background: transparent;
      color: var(--muted-2);
      font-size: 1.35rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.55;
      transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease;
    }
    .fullscreen-exit-hint__close:hover {
      opacity: 1;
      color: var(--text);
      background: color-mix(in srgb, var(--panel) 75%, transparent);
    }
    .fullscreen-exit-hint__ribbon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 14px;
      padding: 6px 14px;
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #fff;
      background: linear-gradient(135deg, #dc2626 0%, #b91c1c 50%, #991b1b 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 4px 14px rgba(185, 28, 28, 0.45);
    }
    .fullscreen-exit-hint__actions {
      margin-top: 22px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 14px;
    }
    .fullscreen-exit-hint__tutorial {
      width: 100%;
      margin: 0;
      padding: 18px 20px 16px;
      border-radius: 14px;
      border: 2px solid color-mix(in srgb, #fff 35%, transparent);
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--primary) 88%, #38bdf8 12%) 0%,
        color-mix(in srgb, var(--primary) 100%, #1e3a8a) 100%
      );
      color: #fff;
      font-size: inherit;
      font-weight: inherit;
      font-family: inherit;
      cursor: pointer;
      transition: filter 0.15s ease, transform 0.12s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      line-height: 1.25;
      animation: fullscreen-exit-hint-cta-glow 2.2s ease-in-out infinite;
    }
    .fullscreen-exit-hint__tutorial-label {
      font-size: 1.08rem;
      font-weight: 800;
      letter-spacing: -0.02em;
    }
    .fullscreen-exit-hint__tutorial-hint {
      font-size: 0.82rem;
      font-weight: 600;
      opacity: 0.92;
      letter-spacing: 0.02em;
    }
    .fullscreen-exit-hint__tutorial:hover {
      filter: brightness(1.08) saturate(1.05);
    }
    .fullscreen-exit-hint__tutorial:active {
      transform: translateY(2px);
      animation: none;
    }
    .fullscreen-exit-hint__snooze {
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-size: 0.8rem;
      font-weight: 500;
      font-family: inherit;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 3px;
      transition: color 0.15s ease;
    }
    .fullscreen-exit-hint__snooze:hover {
      color: var(--text);
    }
    .fullscreen-exit-hint__card {
      position: relative;
      width: min(480px, 100%);
      padding: 34px 28px 26px;
      border-radius: 22px;
      background: linear-gradient(
        165deg,
        #fff 0%,
        color-mix(in srgb, var(--panel-strong) 94%, #eff6ff) 38%,
        color-mix(in srgb, var(--panel-strong) 100%, #dbeafe) 100%
      );
      border: 2px solid color-mix(in srgb, var(--primary) 55%, var(--line-2));
      box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.65) inset,
        0 32px 80px rgba(0, 0, 0, 0.35),
        0 16px 40px rgba(37, 99, 235, 0.22);
      text-align: center;
      animation: fullscreen-exit-hint-card-ring 3s ease-in-out infinite;
    }
    .fullscreen-exit-hint__title {
      margin: 0 0 10px;
      padding: 0 36px;
      font-size: 1.35rem;
      font-weight: 900;
      letter-spacing: -0.03em;
      line-height: 1.25;
      color: var(--title);
    }
    .fullscreen-exit-hint__subtitle {
      margin: 0 0 12px;
      padding: 0 8px;
      font-size: 1.02rem;
      line-height: 1.45;
      font-weight: 700;
      color: color-mix(in srgb, var(--title) 92%, var(--primary));
    }
    .fullscreen-exit-hint__subtitle strong {
      color: color-mix(in srgb, #b91c1c 55%, var(--title));
      font-weight: 900;
    }
    .fullscreen-exit-hint__body {
      margin: 0;
      font-size: 0.9rem;
      line-height: 1.65;
      font-weight: 500;
      color: var(--muted);
    }
    @media (prefers-reduced-motion: reduce) {
      .fullscreen-exit-hint__tutorial {
        animation: none;
        box-shadow:
          0 6px 0 color-mix(in srgb, var(--primary) 50%, #0f172a 50%),
          0 14px 36px color-mix(in srgb, var(--primary) 38%, transparent);
      }
      .fullscreen-exit-hint__card {
        animation: none;
      }
    }

    .data-freshness {
      font-size: 11px;
      color: var(--muted-2);
      margin-right: 8px;
    }

    .search-inline {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
      margin-bottom: 14px;
    }

    .search-inline input {
      height: 40px;
      min-width: 220px;
      padding: 0 14px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      box-shadow: none;
    }

    .clickable-row {
      cursor: pointer;
      transition: background 0.16s ease;
    }

    .clickable-row:hover {
      background: var(--primary-3);
    }

    .report-hero {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 10px;
      align-items: start;
    }
    .briefing-metric {
      padding: 14px;
      border-radius: 18px;
      background: var(--panel-surface);
      border: 1px solid var(--line-2);
    }
    .briefing-metric span {
      display: block;
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted-2);
      font-weight: 800;
    }
    .briefing-metric strong {
      display: block;
      margin-top: 8px;
      font-size: 22px;
      color: var(--navy);
      letter-spacing: -0.04em;
    }

    /* 탭/필터바(.chrome-toolbar)와 좌우 라인을 정확히 맞추기 위해,
       요약·조직·조직도·거래처·제품·보고서·Q&A·맞춤 리포트·컬럼·이슈 센터의
       메인 섹션 그리드를 동일하게 좌우로 17px씩 확장 */
    #view-summary .section,
    #view-organization .section,
    #view-org-chart .section,
    #view-customer .section,
    #view-product .section,
    #view-report .section,
    #view-qa .section,
    #view-custom-report .section,
    #view-dictionary .section,
    #view-issue-center .section {
      margin: 0 -17px 10px -17px;
    }
    #view-summary .section .grid,
    #view-organization .section .grid,
    #view-org-chart .section .grid,
    #view-customer .section .grid,
    #view-product .section .grid,
    #view-report .section .grid,
    #view-qa .section .grid,
    #view-custom-report .section .grid,
    #view-dictionary .section .grid,
    #view-issue-center .section .grid {
      max-width: none;
      width: calc(100% + 34px);
    }

    #view-summary .section-title {
      margin: 6px 2px 10px;
    }

    /* 모든 뷰: 첫 번째 섹션 타이틀 상단 여백 명시 (크롬과 겹침 방지) */
    #view-summary > .section:first-child,
    #view-customer > .section:first-child,
    #view-organization > .section:first-child,
    #view-org-chart > .section:first-child,
    #view-product > .section:first-child,
    #view-report > .section:first-child,
    #view-feedback > .section:first-child,
    #view-custom-report > .section:first-child,
    #view-dictionary > .section:first-child,
    #view-issue-center > .section:first-child {
      margin-top: 4px;
    }

    /* 이슈 센터 타이틀 라인 상단 여백 */
    #view-issue-center .section-title,
    #view-customer .section-title.customer-title-one-line,
    #view-organization .section-title,
    #view-product .section-title,
    #view-report .section-title,
    #view-feedback .section-title,
    #view-dictionary .section-title,
    #view-custom-report .section-title {
      padding-top: 2px;
      margin-top: 4px;
    }

    #view-summary > .section:first-child,
    #view-customer > .section:first-child,
    #view-organization > .section:first-child,
    #view-org-chart > .section:first-child,
    #view-product > .section:first-child,
    #view-report > .section:first-child,
    #view-feedback > .section:first-child,
    #view-qa > .section:first-child,
    #view-custom-report > .section:first-child,
    #view-dictionary > .section:first-child,
    #view-issue-center > .section:first-child {
      margin-top: 0;
    }

    #view-summary > .section:first-child > .section-title,
    #view-customer > .section:first-child > .section-title,
    #view-organization > .section:first-child > .section-title,
    #view-org-chart > .section:first-child > .section-title,
    #view-product > .section:first-child > .section-title,
    #view-report > .section:first-child > .section-title,
    #view-feedback > .section:first-child > .section-title,
    #view-qa > .section:first-child > .section-title,
    #view-custom-report > .section:first-child > .section-title,
    #view-dictionary > .section:first-child > .section-title,
    #view-issue-center > .section:first-child > .section-title {
      margin-top: 0;
      padding-top: 0;
    }

    #view-summary .summary-secondary {
      display: none;
    }
    /* 요약·조직·조직도·거래처·제품 등: 우측 잘림 방지 — 섹션·그리드를 뷰포트 안으로 */
    #view-summary .section,
    #view-organization .section,
    #view-org-chart .section,
    #view-customer .section,
    #view-product .section,
    #view-service-type .section,
    #view-report .section,
    #view-qa .section,
    #view-custom-report .section,
    #view-dictionary .section,
    #view-issue-center .section {
      margin-left: 0;
      margin-right: 0;
    }
    #view-summary .section .grid,
    #view-organization .section .grid,
    #view-org-chart .section .grid,
    #view-customer .section .grid,
    #view-product .section .grid,
    #view-service-type .section .grid,
    #view-report .section .grid,
    #view-qa .section .grid,
    #view-custom-report .section .grid,
    #view-dictionary .section .grid,
    #view-issue-center .section .grid {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    #view-summary .panel:has(#contractExpiryBody),
    #view-summary .panel:has(#shipToBody) {
      display: none;
    }
    /* 조직·조직도·거래처·제품·보고서·Q&A·맞춤리포트·컬럼·이슈: 그리드·패널 우측 잘림 방지 */
    #view-organization .section .grid,
    #view-org-chart .section .grid,
    #view-customer .section .grid,
    #view-product .section .grid,
    #view-report .section .grid,
    #view-qa .section .grid,
    #view-custom-report .section .grid,
    #view-dictionary .section .grid,
    #view-issue-center .section .grid {
      min-width: 0;
    }
    #view-organization .section .grid > *,
    #view-org-chart .section .grid > *,
    #view-customer .section .grid > *,
    #view-product .section .grid > *,
    #view-report .section .grid > *,
    #view-qa .section .grid > *,
    #view-custom-report .section .grid > *,
    #view-dictionary .section .grid > *,
    #view-issue-center .section .grid > * {
      min-width: 0;
    }
    #view-organization .panel,
    #view-org-chart .panel,
    #view-customer .panel,
    #view-product .panel,
    #view-report .panel,
    #view-qa .panel,
    #view-custom-report .panel,
    #view-dictionary .panel,
    #view-issue-center .panel {
      min-width: 0;
    }
    #view-organization .chart-box,
    #view-org-chart .chart-box,
    #view-customer .chart-box,
    #view-product .chart-box,
    #view-report .chart-box,
    #view-qa .chart-box {
      min-width: 0;
    }
    #view-org-chart .org-chart-layout,
    #view-org-chart .org-chart-section {
      min-width: 0;
      max-width: 100%;
    }
    #view-issue-center .issue-center-layout,
    #view-issue-center .issue-center-cards {
      min-width: 0;
      max-width: 100%;
    }
    #view-custom-report .section > *,
    #view-dictionary .section > * {
      min-width: 0;
      max-width: 100%;
    }

    .cover-stage {
      position: relative;
      overflow: hidden;
      padding: 48px 40px;
      border-radius: var(--radius-lg);
      background: var(--hero-header-surface);
      color: #ffffff;
      box-shadow: var(--shadow-card);
      border: 1px solid rgba(255,255,255,0.1);
      min-height: 480px;
      display: flex;
      align-items: center;
    }
    .cover-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 70% 50% at 78% 12%, rgba(255, 255, 255, 0.07), transparent 45%),
        radial-gradient(circle at 18% 78%, rgba(30, 58, 138, 0.2), transparent 42%),
        linear-gradient(125deg, rgba(255, 255, 255, 0.05), transparent 40%);
      pointer-events: none;
      z-index: 1;
    }
    .cover-media-art {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }
    .cover-ma-gradient {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.22;
    }
    .cover-ma-gradient-1 {
      width: min(90vw, 720px);
      height: min(90vw, 720px);
      background: radial-gradient(circle, rgba(30, 58, 138, 0.5) 0%, transparent 70%);
      top: -20%;
      left: -10%;
      animation: cover-ma-float 24s ease-in-out infinite;
    }
    .cover-ma-gradient-2 {
      width: min(70vw, 520px);
      height: min(70vw, 520px);
      background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, transparent 65%);
      bottom: -15%;
      right: -5%;
      animation: cover-ma-float 20s ease-in-out infinite reverse;
      animation-delay: -5s;
    }
    .cover-ma-gradient-3 {
      width: min(50vw, 380px);
      height: min(50vw, 380px);
      background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 60%);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: cover-ma-pulse 16s ease-in-out infinite;
    }
    @keyframes cover-ma-float {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(3%, 4%) scale(1.05); }
      66% { transform: translate(-2%, -3%) scale(0.98); }
    }
    @keyframes cover-ma-pulse {
      0%, 100% { opacity: 0.22; transform: translate(-50%, -50%) scale(1); }
      50% { opacity: 0.32; transform: translate(-50%, -50%) scale(1.08); }
    }
    .cover-ma-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
      background-size: 48px 48px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 75%);
      opacity: 0.6;
    }
    .cover-ma-vignette {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 45%, rgba(2, 6, 23, 0.5) 100%);
      opacity: 0.7;
    }
    .cover-hero-kicker {
      display: inline-block;
      margin-bottom: 20px;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.76);
    }
    .cover-hero-headline {
      margin: 0;
      font-size: clamp(44px, 5.8vw, 74px);
      line-height: 1.08;
      font-weight: 700;
      letter-spacing: -0.04em;
      color: #ffffff;
      text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    }
    .cover-hero-desc {
      margin-top: 22px;
      font-size: clamp(18px, 2vw, 23px);
      line-height: 1.6;
      color: rgba(236, 244, 252, 0.9);
      max-width: 560px;
      font-weight: 500;
    }
    .cover-hero-line {
      width: 48px;
      height: 2px;
      margin: 22px auto 0;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
      border-radius: 2px;
    }
    .cover-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
      align-items: center;
      justify-items: center;
      width: 100%;
    }
    .cover-main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-right: 0;
      text-align: center;
      max-width: 860px;
    }
    .cover-main h2 {
      margin: 0;
      font-size: clamp(28px, 3.5vw, 42px);
      line-height: 1.2;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: #ffffff;
    }
    .cover-main p {
      display: block;
      margin: 18px 0 0;
      max-width: 720px;
      color: rgba(236, 244, 252, 0.88);
      font-size: 16px;
      line-height: 1.8;
      text-align: center;
    }
    .cover-kicker {
      display: inline-flex;
      margin-bottom: 14px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.18);
      color: rgba(233, 243, 252, 0.92);
      font-size: 11px;
      font-weight: 900;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }
    .cover-metrics {
      margin-top: 26px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
    }
    .cover-metric {
      padding: 16px 16px 14px;
      border-radius: 20px;
      background: linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.08));
      border: 1px solid rgba(255,255,255,0.16);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }
    .cover-metric span {
      display: block;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.10em;
      text-transform: uppercase;
      color: rgba(220, 234, 248, 0.76);
    }
    .cover-metric strong {
      display: block;
      margin-top: 8px;
      font-size: 28px;
      letter-spacing: -0.04em;
      color: #ffffff;
    }
    .cover-slide-actions {
      margin-top: 34px;
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 18px;
    }
    .cover-enter-btn {
      min-width: 260px;
      min-height: 60px;
      height: auto;
      padding: 16px 36px;
      border-radius: var(--radius);
      border: none;
      background: var(--primary);
      color: #fff;
      font-size: 19px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: var(--shadow-card);
      transition: all 0.2s ease;
    }
    .cover-enter-btn:hover {
      background: var(--primary-dark);
      box-shadow: 0 8px 16px -4px rgba(14,165,233,0.3);
    }
    .cover-footer-bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      gap: 12px 16px;
      align-items: center;
      padding: 14px max(22px, env(safe-area-inset-left)) calc(16px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-right));
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.04em;
      line-height: 1.45;
      color: rgba(232, 241, 251, 0.9);
      pointer-events: none;
    }
    .cover-footer-left {
      justify-self: start;
      text-align: left;
      text-transform: uppercase;
    }
    .cover-footer-center {
      justify-self: center;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 0.06em;
    }
    .cover-footer-right {
      justify-self: end;
      text-align: right;
      letter-spacing: 0.02em;
      text-transform: none;
      font-weight: 700;
    }
    @media (max-width: 720px) {
      .cover-footer-bar {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 8px;
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
      }
      .cover-footer-left,
      .cover-footer-center,
      .cover-footer-right {
        justify-self: center;
        text-align: center;
      }
    }
    .cover-corner-logo {
      position: absolute;
      top: 0;
      z-index: 2;
      height: var(--app-header-logo-height);
      max-height: var(--app-header-logo-height);
      width: auto;
      object-fit: contain;
      filter: drop-shadow(0 10px 20px rgba(11, 26, 44, 0.22));
    }
    .cover-corner-logo.left {
      left: 0;
    }
    .cover-corner-logo.right {
      right: 0;
    }
    #view-cover {
      background: var(--hero-header-surface);
      min-height: 100vh;
      min-height: 100dvh;
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      position: relative;
    }
    /* 패딩은 .cover-grid에만 — 스테이지 전체는 배경이 끝까지 깔리도록 0
       row 플렉스+단일 자식이면 width:100% 그리드가 콘텐츠 폭(~900px)으로 수축할 수 있음 → column+stretch */
    #view-cover .cover-stage {
      padding: 0;
      min-height: 100vh;
      min-height: 100dvh;
      width: 100%;
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
      overflow: hidden;
    }
    #view-cover .cover-stage::before {
      display: none;
    }
    /* 메인요약 헤더 로고와 동일: 뷰(스테이지) 좌우·상단 모서리 기준 — 노치만 env로 보정 */
    #view-cover .cover-corner-logo {
      top: env(safe-area-inset-top, 0px);
    }
    #view-cover .cover-corner-logo.left {
      left: env(safe-area-inset-left, 0px);
    }
    #view-cover .cover-corner-logo.right {
      right: env(safe-area-inset-right, 0px);
    }
    #view-cover .section {
      margin-top: 0;
      margin-bottom: 0;
      width: 100%;
      max-width: none;
      box-sizing: border-box;
    }
    #view-cover .cover-grid {
      grid-template-columns: 1fr;
      justify-items: center;
      gap: 30px;
    }
    #view-cover .cover-main {
      align-items: center;
      padding-right: 0;
      text-align: center;
    }
    #view-cover .cover-hero-kicker {
      font-size: 16px;
      letter-spacing: 0.22em;
    }
    #view-cover .cover-main h2.cover-hero-headline {
      font-size: clamp(44px, 5.8vw, 74px);
      letter-spacing: -0.04em;
      text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
    }
    #view-cover .cover-main p.cover-hero-desc {
      max-width: 580px;
      margin-top: 22px;
      font-size: clamp(18px, 2vw, 23px);
      text-align: center;
    }
    #view-cover .cover-metrics {
      display: none;
    }
    #view-cover .cover-kicker:not(.cover-hero-kicker),
    #view-cover .cover-metrics {
      display: none;
    }
    #view-cover .cover-enter-btn {
      min-width: 280px;
      min-height: 60px;
      height: auto;
      padding: 18px 40px;
      font-size: 19px;
      font-weight: 700;
      letter-spacing: 0.04em;
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    #view-cover .cover-enter-btn:hover {
      border-color: rgba(255, 255, 255, 0.4);
      box-shadow: 0 6px 28px rgba(14, 165, 233, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    }
    @media (prefers-reduced-motion: reduce) {
      .cover-ma-gradient-1, .cover-ma-gradient-2, .cover-ma-gradient-3 { animation: none; opacity: 0.2; }
    }
    body.cover-mode .page-header,
    body.cover-mode .toolbar,
    body.cover-mode .tabbar,
    body.cover-mode .filter-strip,
    body.cover-mode .unified-toolbar,
    body.cover-mode .active-filter-bar {
      display: none;
    }
    body.app-loading #view-cover .cover-main,
    body.app-loading #view-cover .cover-slide-actions {
      opacity: 0;
      transform: translateY(12px);
    }
    #view-cover .cover-main,
    #view-cover .cover-slide-actions {
      transition: opacity 0.55s ease-out, transform 0.55s ease-out;
    }
    #view-cover .cover-slide-actions {
      transition-delay: 0.08s;
    }

    #view-summary .grid {
      /* 요약 뷰는 10열 CSS Grid를 사용하고, 7+3 컬럼이 정확히 전체 폭을 채우도록 구성 */
      display: grid;
      width: 100%;
      max-width: 100%;
      grid-template-columns: repeat(10, minmax(0, 1fr));
      gap: 8px;
    }
    #view-summary .grid > * { min-width: 0; }
    #view-summary .grid > .summary-goal-panel { grid-column: span 7; }
    #view-summary .grid > .summary-snapshot-panel { grid-column: span 3; }
    /* span-12 패널은 요약 그리드 전체 폭(12컬럼)을 가득 사용 */
    #view-summary .grid > .panel.span-12 { grid-column: 1 / -1; }
    #view-summary .grid > .panel.span-6 { grid-column: span 5; }
    #view-summary .grid > .summary-goal-panel,
    #view-summary .grid > .summary-snapshot-panel {
      /* 상단 행: 경영 한눈 요약 2×2 카드(최소 높이) + 헤더·여백이 잘리지 않을 정도로만 상한 */
      max-height: min(50vh, 55vmin, 432px);
    }
    #view-summary .grid > .summary-snapshot-panel {
      max-height: none;
    }
    #view-summary .grid > .summary-bottom-row {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      align-items: stretch;
      min-width: 0;
    }
    #view-summary .summary-bottom-card--receipt {
      grid-column: 1 / -1;
      min-height: 420px;
    }
    #view-summary .summary-bottom-card {
      height: 100%;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }
    #view-summary .summary-bottom-card .chart-box,
    #view-summary .summary-bottom-card .record-table,
    #view-summary .summary-bottom-card .receipt-board {
      flex: 1;
      min-height: 0;
    }

    #view-summary .panel {
      padding: 10px 12px;
      min-height: 72px;
    }

    #view-summary .chart-box {
      min-height: 120px;
      padding: 8px 10px;
    }
    #view-summary .summary-goal-panel {
      display: flex;
      flex-direction: column;
      min-height: 0;
      overflow: hidden;
    }
    #view-summary .summary-goal-panel .chart-box {
      flex: 1 1 auto;
      min-height: 0;
      /* 막대/선이 패널·뷰포트에서 잘리지 않도록 높이를 살짝만 제한 */
      max-height: min(41vh, 48vmin, 328px);
      padding: 2px 2px 4px;
      display: flex;
      flex-direction: column;
    }
    /* 목표대비: 그리드(shell) 대신 플렉스로 SVG가 남은 높이를 전부 사용 */
    #view-summary .summary-goal-panel .chart-box .line-chart-shell.summary-goal-chart-only {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      gap: 0;
    }
    #view-summary .summary-goal-panel .chart-box .line-chart-shell {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    #view-summary .summary-goal-panel .chart-box .summary-goal-svg-fill {
      flex: 1 1 auto;
      min-height: 108px;
      width: 100%;
      max-width: 100%;
      height: 100%;
      display: block;
    }
    #view-summary .summary-goal-panel .chart-box .line-chart-shell svg,
    #view-summary .summary-goal-panel .chart-box > svg {
      flex: 1;
      min-height: 0;
      width: 100%;
      max-width: 100%;
      display: block;
    }
    #view-summary .summary-goal-panel .chart-box,
    #view-summary .summary-goal-panel .chart-box .line-chart-shell {
      min-width: 0;
      /* SVG 뷰박스 안 여백으로 대부분 해결; 살짝만 넘치는 레이블이 패널에서 잘리지 않도록 */
      overflow: visible;
    }

    /* 요약 상단 2패널: 큰 카드는 상단 컬러 스트립만 통일 (좌측 바는 panel-main 전용이라 한쪽만 생김 → 제거) */
    #view-summary .summary-goal-panel.panel.panel-main {
      border-left: none !important;
      position: relative;
    }
    #view-summary .summary-goal-panel.panel.panel-main::before {
      content: "";
      display: block !important;
      position: absolute;
      left: 14px;
      right: 14px;
      top: 0;
      height: 4px;
      border-radius: 0 0 999px 999px;
      background: linear-gradient(90deg, var(--primary), var(--accent, #0ea5e9));
      box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 28%, transparent);
      z-index: 2;
      pointer-events: none;
    }
    #view-summary .summary-snapshot-panel {
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
      overflow: hidden;
    }
    #view-summary .summary-snapshot-panel .summary-snapshot-body {
      flex: 1 1 auto;
      min-height: auto;
      min-width: 0;
      overflow: visible;
      -webkit-overflow-scrolling: auto;
    }

    #view-summary .chart-box.compact {
      min-height: 88px;
    }

    #view-summary .panel-head {
      margin-bottom: 4px;
      padding-bottom: 4px;
      border-bottom: 1px solid var(--line-2);
    }
    /* 목표대비 브리핑: 타이틀 행 1줄 — 범례·집계·차트 옵션은 같은 행에서 가로 스크롤 */
    #view-summary .summary-goal-panel .panel-head {
      flex-wrap: nowrap;
      align-items: center;
      gap: 6px;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
    #view-summary .summary-goal-panel .panel-head h3 {
      flex-shrink: 0;
    }
    .summary-goal-head-toolbar {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 8px;
      flex: 1;
      min-width: 0;
      justify-content: flex-end;
      margin-right: 0;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
    #view-summary .summary-goal-panel-head {
      align-items: center;
    }
    .summary-goal-legend-host {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      overflow: hidden;
    }
    .summary-goal-legend-host .legend-wrap {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      min-width: 0;
    }
    .summary-goal-legend-host .legend {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 6px 10px;
      margin: 0;
      padding: 0;
    }
    .summary-goal-granularity-host {
      flex-shrink: 0;
    }
    .summary-goal-granularity-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      max-width: 100%;
    }
    #view-summary .summary-goal-brief-detail-host {
      flex-shrink: 0;
    }
    #view-summary .summary-goal-brief-detail-host select {
      height: 32px;
      min-height: 32px;
      border-radius: 10px;
      border: 1px solid var(--line-2);
      background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
      color: var(--text);
      font-size: 13px;
      font-weight: 700;
      padding: 0 28px 0 10px;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.1 6 7.9l3.8-3.8' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
    }
    #view-summary .summary-goal-brief-detail-host select:focus {
      border-color: color-mix(in srgb, var(--primary) 50%, var(--line-2));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
    }
    .summary-goal-viz-toggle {
      flex-shrink: 0;
      white-space: nowrap;
      width: max-content;
      min-width: max-content;
      overflow: visible;
    }
    #view-summary .summary-goal-viz-toggle .btn-mini {
      width: auto !important;
      min-width: 52px !important;
      height: auto !important;
      min-height: 38px !important;
      padding: 0 14px !important;
      flex: 0 0 auto;
    }

    /* #view-summary panel-head h3 — Phase 5 통일 */
    /* #view-summary panel-head meta — Phase 5 통일 */

    #view-summary .insight-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      max-height: min(320px, 38vh);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    #view-summary .insight {
      min-height: 64px;
      padding: 8px 10px;
      border-radius: 12px;
    }
    #view-summary .insight h4 { font-size: 16px; font-weight: 800; }
    #view-summary .insight p, #view-summary .insight ul { font-size: 16px; }

    #view-summary .panel .record-table { font-size: 16px; padding: 6px 10px; border-radius: 10px; min-height: 0; max-height: min(320px, 38vh); overflow-x: auto; overflow-y: auto; overscroll-behavior-y: contain; }
    #view-summary .panel .record-table:has(> table:only-child) { overflow-y: hidden; }
    #view-summary .panel .record-table th,
    #view-summary .panel .record-table td { padding: 5px 8px; }
    #view-summary .manager-grid { gap: 8px; }
    #view-summary .manager-summary-flow {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    #view-summary .manager-summary-flow .summary-box:first-of-type { margin: 0; padding: 6px 10px; }
    #view-summary .manager-summary-flow .metric-strip {
      margin: 0;
      gap: var(--kpi-strip-gap);
      flex-direction: column;
      flex-wrap: nowrap;
      justify-content: center;
      align-items: stretch;
      overflow-x: visible;
    }
    #view-summary .manager-metric-groups {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 16px 24px;
      width: 100%;
      justify-content: center;
      align-items: stretch;
    }
    #view-summary .manager-metric-group {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      flex: 1 1 0;
      min-width: 0;
      max-width: 100%;
      gap: var(--kpi-strip-gap);
      align-items: stretch;
      padding: 0;
      border: none;
      background: transparent;
      box-shadow: none;
    }
    @media (max-width: 640px) {
      #view-summary .manager-metric-group {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    #view-summary .manager-summary-flow .manager-signals-actions {
      margin: 0;
      padding: 6px 10px;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto;
      gap: 8px 16px;
      align-items: start;
    }
    #view-summary .manager-signals-actions .manager-signals-title { grid-column: 1 / span 2; grid-row: 1; margin: 0 0 4px; font-size: 18px; font-weight: 700; }
    #view-summary .manager-signals-actions .manager-actions-title { grid-column: 3; grid-row: 1; margin: 0 0 4px; font-size: 18px; font-weight: 700; }
    #view-summary .manager-signals-actions .signal-list-col1 { grid-column: 1; grid-row: 2; margin: 0 0 0 0.75em; padding-left: 0.35em; line-height: 1.5; font-size: 18px; }
    #view-summary .manager-signals-actions .signal-list-col2 { grid-column: 2; grid-row: 2; margin: 0 0 0 0.75em; padding-left: 0.35em; line-height: 1.5; font-size: 18px; }
    #view-summary .manager-signals-actions .action-list { grid-column: 3; grid-row: 2; margin: 0 0 0 0.75em; padding-left: 0.35em; line-height: 1.5; font-size: 18px; }
    #view-summary .manager-signals-actions .signal-list li,
    #view-summary .manager-signals-actions .action-list li { margin-bottom: 4px; font-size: inherit; }
    #view-summary .metric-strip { margin-top: 6px; gap: var(--kpi-strip-gap); justify-content: center; }
    #view-summary .metric-strip .metric-pill { padding: 6px 10px; flex: 0 1 auto; min-width: 0; }

    #view-report #reportMetricStrip.metric-strip {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--kpi-strip-gap);
      flex-wrap: unset;
      align-items: stretch;
    }
    @media (max-width: 900px) {
      #view-report #reportMetricStrip.metric-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    .metric-strip#achievementStrip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--kpi-strip-gap);
      flex-wrap: unset;
      align-items: stretch;
    }
    @media (max-width: 720px) {
      .metric-strip#achievementStrip {
        grid-template-columns: 1fr;
      }
    }
    #view-summary .receipt-board { gap: 8px; }

    /* ═══════════════════════════════════════════════════════════
       PREMIUM ORG CHART DASHBOARD
    ═══════════════════════════════════════════════════════════ */
    #view-org-chart > .section { padding: 0; background: none; border: none; box-shadow: none; }
    #view-org-chart .oc-page {
      display: flex;
      flex-direction: column;
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow);
      min-height: calc(var(--erp-visible-vh, 100vh) - var(--top-chrome-offset) - 52px);
    }
    /* ── HEADER ── */
    #view-org-chart .oc-header {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f2044 100%);
      padding: 22px 28px 18px;
      display: flex;
      align-items: center;
      gap: 20px;
      flex-wrap: wrap;
      position: relative;
      overflow: hidden;
    }
    #view-org-chart .oc-header::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 80% 50%, rgba(37,99,235,0.18) 0%, transparent 60%);
      pointer-events: none;
    }
    #view-org-chart .oc-header-title { position: relative; flex: 1; min-width: 180px; }
    #view-org-chart .oc-kicker {
      font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
      text-transform: uppercase; color: rgba(148,163,184,0.85); margin-bottom: 3px;
    }
    #view-org-chart .oc-title {
      margin: 0; font-size: clamp(17px, 2vw, 22px); font-weight: 800;
      color: #fff; letter-spacing: -0.025em;
    }
    /* 통계: 필터 줄 우측 인라인 (다크 헤더용 구 스타일은 미사용) */
    #view-org-chart .oc-stats {
      position: relative;
      display: flex;
      gap: 1px;
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
    }
    #view-org-chart .oc-stats--inline {
      background: var(--bg);
      border: 1px solid var(--line-2);
      border-radius: 10px;
      flex-shrink: 0;
      gap: 0;
    }
    #view-org-chart .oc-stats--inline .oc-stat {
      padding: 6px 12px;
      background: var(--panel);
      border-right: 1px solid var(--line-soft);
    }
    #view-org-chart .oc-stats--inline .oc-stat:last-child { border-right: none; }
    #view-org-chart .oc-stats--inline .oc-stat:hover { background: var(--primary-3); }
    #view-org-chart .oc-stats--inline .oc-stat-val {
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
    }
    #view-org-chart .oc-stats--inline .oc-stat-lbl {
      font-size: 9px;
      color: var(--muted);
    }
    #view-org-chart .oc-stat {
      padding: 11px 20px;
      display: flex; flex-direction: column; align-items: center; gap: 2px;
      background: rgba(255,255,255,0.04);
      transition: background 0.2s;
    }
    #view-org-chart .oc-stat:hover { background: rgba(255,255,255,0.09); }
    #view-org-chart .oc-stat-dot {
      width: 7px; height: 7px; border-radius: 50%; margin-bottom: 1px;
    }
    #view-org-chart .oc-stat-val {
      font-size: 20px; font-weight: 800; color: #fff; line-height: 1; letter-spacing: -0.03em;
    }
    #view-org-chart .oc-stat-lbl {
      font-size: 10px; font-weight: 600; color: rgba(148,163,184,0.75);
      letter-spacing: 0.05em; white-space: nowrap;
    }
    /* ── TOOLBAR: 타이틀 + 검색·트리·범례·요약·기간 한 줄(래핑) ── */
    #view-org-chart .oc-toolbar {
      background: var(--panel);
      border-bottom: 1px solid var(--line-2);
      padding: 8px 14px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px 14px;
    }
    #view-org-chart .oc-toolbar-title {
      display: flex;
      align-items: baseline;
      gap: 10px;
      flex-shrink: 0;
    }
    #view-org-chart .oc-toolbar-title .section-kicker {
      margin: 0;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
    }
    #view-org-chart .oc-toolbar-title h2 {
      margin: 0;
      font-size: clamp(16px, 1.55vw, 20px);
      font-weight: 800;
      color: var(--title);
      letter-spacing: -0.02em;
      white-space: nowrap;
    }
    #view-org-chart .oc-toolbar-main {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      flex: 1 1 auto;
      min-width: 0;
    }
    #view-org-chart .oc-month-wrap--toolbar {
      flex-shrink: 0;
    }
    #view-org-chart .oc-search-wrap { position: relative; flex: 0 1 200px; min-width: 120px; max-width: 240px; }
    #view-org-chart .oc-search-icon {
      position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
      pointer-events: none; color: var(--muted); font-size: 13px;
    }
    #view-org-chart .oc-search {
      width: 100%;
      padding: 7px 10px 7px 30px;
      font-size: 13px; font-family: inherit;
      border: 1.5px solid var(--line-2); border-radius: 9px;
      background: var(--bg); color: var(--text);
      transition: border-color 0.18s, box-shadow 0.18s;
    }
    #view-org-chart .oc-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37,99,235,0.12); outline: none; }
    #view-org-chart .oc-ctrl-btn {
      padding: 6px 13px; font-size: 12px; font-weight: 600; font-family: inherit;
      border-radius: 8px; border: 1.5px solid var(--line-2);
      background: var(--panel); color: var(--muted-2); cursor: pointer;
      transition: all 0.15s; white-space: nowrap;
    }
    #view-org-chart .oc-ctrl-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-3); }
    #view-org-chart .oc-legend {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    }
    #view-org-chart .oc-legend-item {
      display: flex; align-items: center; gap: 5px;
      font-size: 11px; font-weight: 600; color: var(--muted-2);
    }
    #view-org-chart .oc-legend-dot { width: 9px; height: 9px; border-radius: 3px; }
    /* ── BODY: 그리드로 상세 패널 폭 고정(조직도가 침범하지 않음) ── */
    #view-org-chart .oc-body {
      flex: 1;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(280px, min(36vw, 380px));
      grid-template-rows: minmax(0, 1fr);
      min-height: 0;
      overflow: hidden;
      background: var(--bg);
      position: relative;
    }
    #view-org-chart .oc-canvas-wrap {
      position: relative;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 14px 16px 20px;
      border-right: 1px solid var(--line-2);
      background: var(--panel);
    }
    #view-org-chart .oc-canvas-wrap.oc-pan-active { cursor: grabbing; }
    #view-org-chart .oc-pan-hint {
      position: absolute;
      top: 10px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      font-size: 10px;
      font-weight: 600;
      color: var(--muted);
      pointer-events: none;
      opacity: 0.85;
      letter-spacing: 0.02em;
    }
    #view-org-chart .oc-tree-pan {
      display: inline-block;
      transform: translate(0, 0);
      transform-origin: 0 0;
      will-change: transform;
      cursor: grab;
      touch-action: none;
    }
    #view-org-chart .oc-tree-pan--d3 {
      display: flex;
      flex: 1 1 0;
      min-height: 0;
      width: 100%;
      align-self: stretch;
      cursor: default;
      touch-action: manipulation;
    }
    #view-org-chart .oc-canvas-wrap.oc-pan-active .oc-tree-pan { cursor: grabbing; }
    #view-org-chart .oc-tree {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      min-width: min-content;
      padding-bottom: 24px;
    }

    /* ── NODE CARDS (컴팩트) ── */
    #view-org-chart .oc-node { display: flex; flex-direction: column; align-items: center; }
    #view-org-chart .oc-card {
      display: flex; align-items: center; gap: 6px;
      padding: 7px 10px; border-radius: 10px; cursor: pointer; user-select: none;
      border: 2px solid transparent; white-space: nowrap;
      min-width: 96px; max-width: 168px;
      transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.2s, opacity 0.2s;
      position: relative;
    }
    #view-org-chart .oc-card:hover { transform: translateY(-2px) scale(1.02); }
    #view-org-chart .oc-card-icon {
      width: 24px; height: 24px; border-radius: 6px; display: flex;
      align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0;
      background: rgba(255,255,255,0.2);
    }
    #view-org-chart .oc-card-body { flex: 1; min-width: 0; }
    #view-org-chart .oc-card-name {
      font-size: 11px; font-weight: 700; line-height: 1.25;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    #view-org-chart .oc-card-row { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
    #view-org-chart .oc-card-badge {
      font-size: 9px; font-weight: 700; padding: 1px 5px;
      border-radius: 4px; letter-spacing: 0.05em;
      background: rgba(255,255,255,0.22); color: rgba(255,255,255,0.95);
    }
    #view-org-chart .oc-card-count { font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.75); }
    #view-org-chart .oc-chevron {
      font-size: 9px; flex-shrink: 0; opacity: 0.6;
      transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), opacity 0.2s;
    }
    #view-org-chart .oc-node:not(.oc-collapsed) > .oc-card .oc-chevron { transform: rotate(90deg); opacity: 1; }
    #view-org-chart .oc-node.oc-leaf > .oc-card .oc-chevron { display: none; }

    /* Level Colors: 그룹 남색 · 센터 진한 파랑 · 실 주황 · 팀 초록 · 파트 노랑 */
    #view-org-chart .oc-card[data-level="group"] {
      background: linear-gradient(135deg, #0f2744 0%, #1a3a5c 100%);
      box-shadow: 0 4px 20px rgba(15, 39, 68, 0.42); color: #fff;
    }
    #view-org-chart .oc-card[data-level="group"]:hover { box-shadow: 0 10px 30px rgba(15, 39, 68, 0.55); }
    #view-org-chart .oc-card[data-level="center"] {
      background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%);
      box-shadow: 0 4px 16px rgba(37, 99, 235, 0.38); color: #fff;
    }
    #view-org-chart .oc-card[data-level="center"]:hover { box-shadow: 0 9px 26px rgba(37, 99, 235, 0.5); }
    #view-org-chart .oc-card[data-level="office"] {
      background: linear-gradient(135deg, #ea580c 0%, #fb923c 100%);
      box-shadow: 0 4px 16px rgba(249, 115, 22, 0.32); color: #fff;
    }
    #view-org-chart .oc-card[data-level="office"]:hover { box-shadow: 0 9px 26px rgba(249, 115, 22, 0.44); }
    #view-org-chart .oc-card[data-level="team"] {
      background: linear-gradient(135deg, #15803d 0%, #22c55e 100%);
      box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3); color: #fff;
    }
    #view-org-chart .oc-card[data-level="team"]:hover { box-shadow: 0 9px 26px rgba(34, 197, 94, 0.42); }
    #view-org-chart .oc-card[data-level="part"] {
      background: linear-gradient(135deg, #fde047 0%, #facc15 100%);
      box-shadow: 0 4px 16px rgba(234, 179, 8, 0.35); color: #422006;
    }
    #view-org-chart .oc-card[data-level="part"]:hover { box-shadow: 0 9px 26px rgba(202, 138, 4, 0.42); }
    #view-org-chart .oc-card[data-level="part"] .oc-card-count { color: rgba(66, 32, 6, 0.72); }
    #view-org-chart .oc-card[data-level="part"] .oc-card-badge {
      background: rgba(66, 32, 6, 0.12); color: #422006;
    }
    #view-org-chart .oc-card[data-level="part"] .oc-card-icon { background: rgba(66, 32, 6, 0.12); }

    /* Selected & search */
    #view-org-chart .oc-node.oc-selected > .oc-card { outline: 2px solid rgba(255,255,255,0.95); outline-offset: 1px; transform: scale(1.03); z-index: 2; }
    #view-org-chart .oc-node.oc-search-match > .oc-card { outline: 3px solid #fbbf24; outline-offset: 2px; }

    /* ── CONNECTOR LINES ── */
    #view-org-chart .oc-vtick { width: 2px; flex-shrink: 0; background: rgba(148,163,184,0.4); }
    #view-org-chart .oc-children-wrap {
      display: flex; flex-direction: column; align-items: center;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.3s;
    }
    #view-org-chart .oc-node.oc-collapsed > .oc-children-wrap { max-height: 0 !important; opacity: 0; }
    #view-org-chart .oc-children-row {
      display: flex; flex-direction: row; align-items: flex-start;
      justify-content: center;
    }
    #view-org-chart .oc-child-col {
      display: flex; flex-direction: column; align-items: center;
      padding: 0 10px; position: relative;
    }
    /* Horizontal connector: each child-col uses border-top */
    #view-org-chart .oc-child-col { border-top: 2px solid rgba(148,163,184,0.38); }
    #view-org-chart .oc-child-col:first-child { border-top-left-radius: 0; border-left: none; border-top-color: transparent; }
    #view-org-chart .oc-child-col:last-child { border-top-color: transparent; }
    #view-org-chart .oc-child-col:first-child::before, #view-org-chart .oc-child-col:last-child::before {
      content: ""; position: absolute; top: -2px;
      height: 2px; background: rgba(148,163,184,0.38);
    }
    #view-org-chart .oc-child-col:first-child::before { left: 50%; right: 0; }
    #view-org-chart .oc-child-col:last-child::before { left: 0; right: 50%; }
    #view-org-chart .oc-child-col:only-child { border-top-color: transparent; }
    #view-org-chart .oc-child-col:only-child::before { display: none; }

    /* ── 상세 패널 (항상 표시) ── */
    #view-org-chart .oc-drawer {
      width: 100%;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      background: var(--panel-strong);
      display: flex;
      flex-direction: column;
      flex-shrink: 0;
      position: relative;
    }
    #view-org-chart .oc-drawer--persistent {
      border-left: none;
    }
    #view-org-chart .oc-drawer-inner {
      width: 100%;
      box-sizing: border-box;
      padding: 16px 16px 18px;
      flex: 1;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-height: 0;
    }
    #view-org-chart .oc-drawer-close {
      position: absolute; top: 14px; right: 14px;
      width: 28px; height: 28px; border-radius: 8px;
      border: 1.5px solid var(--line-2); background: var(--bg);
      color: var(--muted); cursor: pointer; font-size: 15px;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s; z-index: 10; font-family: inherit;
    }
    #view-org-chart .oc-drawer-close:hover { background: #fee2e2; border-color: #dc2626; color: #dc2626; }
    #view-org-chart .oc-drawer-label {
      font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
      text-transform: uppercase; color: var(--muted); margin-bottom: 2px;
    }
    #view-org-chart .oc-drawer-heading { margin: 0; font-size: 18px; font-weight: 800; color: var(--title); letter-spacing: -0.02em; }
    #view-org-chart .oc-drawer-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
    #view-org-chart .oc-breadcrumb { display: flex; flex-wrap: wrap; gap: 2px 4px; font-size: 12px; }
    #view-org-chart .oc-breadcrumb .crumb { color: var(--text); font-weight: 600; }
    #view-org-chart .oc-breadcrumb .sep { color: var(--muted); }
    #view-org-chart .oc-sparkline-wrap { min-height: 0; }
    #view-org-chart .oc-sparkline-wrap:not(:empty) { min-height: 92px; }
    #view-org-chart .oc-sparkline-wrap svg { display: block; max-width: 100%; }
    #view-org-chart .org-chart-sparkline-caption {
      fill: var(--muted);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
    }
    #view-org-chart .org-chart-sparkline-ytick {
      fill: var(--muted);
      font-size: 11px;
      font-weight: 600;
    }
    #view-org-chart .org-chart-sparkline-xtick {
      fill: var(--text);
      font-size: 10px;
      font-weight: 600;
    }
    #view-org-chart .oc-members-scroll {
      max-height: min(45vh, 380px);
      overflow: auto;
      border-radius: 10px;
      border: 1px solid var(--line-2);
      -webkit-overflow-scrolling: touch;
    }
    #view-org-chart .oc-members-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 13px;
      table-layout: fixed;
    }
    #view-org-chart .oc-members-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      box-shadow: 0 1px 0 var(--line-2);
    }
    #view-org-chart .oc-members-table th {
      padding: 8px 10px;
      font-size: 10px;
      font-weight: 700;
      color: var(--table-head-text);
      background: var(--table-head-bg);
      text-align: center;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--line-2);
      vertical-align: middle;
    }
    /* 소속·이름·직급 열 비율 5:2:3 (이름은 짧게 가정) */
    #view-org-chart .oc-members-col-affil { width: 50%; min-width: 0; }
    #view-org-chart .oc-members-col-name { width: 20%; min-width: 0; }
    #view-org-chart .oc-members-col-rank { width: 30%; min-width: 0; }
    #view-org-chart .oc-members-table th:nth-child(1),
    #view-org-chart .oc-members-table td:nth-child(1) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
    #view-org-chart .oc-members-table th:nth-child(2),
    #view-org-chart .oc-members-table td:nth-child(2) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: center;
    }
    #view-org-chart .oc-members-table th:nth-child(3),
    #view-org-chart .oc-members-table td:nth-child(3) {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      text-align: center;
    }
    #view-org-chart .oc-members-table td {
      padding: 7px 10px;
      border-bottom: 1px solid var(--line-soft);
      color: var(--text);
      text-align: center;
      vertical-align: middle;
    }
    #view-org-chart .oc-members-table tr:last-child td { border-bottom: none; }
    #view-org-chart .oc-members-table tbody tr:hover td { background: var(--bg); }
    /* 직급 뱃지: 색상 구분 명확(차장=주황, 과장=청록·녹, 부장=파랑, 준임원·위원=로즈) */
    #view-org-chart .oc-rank-pill {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 8px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1.25;
      border: 1px solid transparent;
      white-space: nowrap;
      max-width: 100%;
      box-sizing: border-box;
    }
    #view-org-chart .oc-rank-pill--other {
      background: color-mix(in srgb, var(--muted) 14%, var(--panel));
      color: var(--muted);
      border-color: color-mix(in srgb, var(--line-2) 70%, transparent);
    }
    #view-org-chart .oc-rank-pill--executive {
      background: linear-gradient(135deg, #ede9fe 0%, #e9d5ff 100%);
      color: #5b21b6;
      border-color: rgba(91, 33, 182, 0.28);
    }
    /* 준임원·위원·연구위원 — 동일 특수 톤 */
    #view-org-chart .oc-rank-pill--junimwon {
      background: color-mix(in srgb, #fce7f3 92%, var(--panel));
      color: #9f1239;
      border-color: rgba(159, 18, 57, 0.32);
    }
    #view-org-chart .oc-rank-pill--bujang {
      background: color-mix(in srgb, #dbeafe 90%, var(--panel));
      color: #1d4ed8;
      border-color: rgba(29, 78, 216, 0.35);
    }
    /* 차장: 주황 계열(과장 청록·녹과 대비) */
    #view-org-chart .oc-rank-pill--chajang {
      background: color-mix(in srgb, #ffedd5 92%, var(--panel));
      color: #c2410c;
      border-color: rgba(194, 65, 12, 0.38);
    }
    /* 과장: 청록(차장과 색상 거리 확보) */
    #view-org-chart .oc-rank-pill--gwajang {
      background: color-mix(in srgb, #cffafe 90%, var(--panel));
      color: #0e7490;
      border-color: rgba(14, 116, 144, 0.38);
    }
    #view-org-chart .oc-rank-pill--daeri {
      background: color-mix(in srgb, #fef9c3 92%, var(--panel));
      color: #a16207;
      border-color: rgba(161, 98, 7, 0.34);
    }
    #view-org-chart .oc-rank-pill--sawon {
      background: color-mix(in srgb, #e2e8f0 92%, var(--panel));
      color: #475569;
      border-color: rgba(71, 85, 105, 0.28);
    }
    body[data-theme="dark"] #view-org-chart .oc-rank-pill--executive {
      background: color-mix(in srgb, #5b21b6 32%, var(--panel-strong));
      color: #e9d5ff;
      border-color: rgba(233, 213, 255, 0.35);
    }
    body[data-theme="dark"] #view-org-chart .oc-rank-pill--junimwon {
      background: color-mix(in srgb, #be185d 26%, var(--panel-strong));
      color: #fbcfe8;
      border-color: rgba(251, 207, 232, 0.38);
    }
    body[data-theme="dark"] #view-org-chart .oc-rank-pill--bujang {
      background: color-mix(in srgb, #2563eb 30%, var(--panel-strong));
      color: #bfdbfe;
      border-color: rgba(147, 197, 253, 0.38);
    }
    body[data-theme="dark"] #view-org-chart .oc-rank-pill--chajang {
      background: color-mix(in srgb, #ea580c 28%, var(--panel-strong));
      color: #fed7aa;
      border-color: rgba(254, 215, 170, 0.4);
    }
    body[data-theme="dark"] #view-org-chart .oc-rank-pill--gwajang {
      background: color-mix(in srgb, #0891b2 26%, var(--panel-strong));
      color: #a5f3fc;
      border-color: rgba(34, 211, 238, 0.35);
    }
    body[data-theme="dark"] #view-org-chart .oc-rank-pill--daeri {
      background: color-mix(in srgb, #ca8a04 24%, var(--panel-strong));
      color: #fef08a;
      border-color: rgba(254, 240, 138, 0.32);
    }
    body[data-theme="dark"] #view-org-chart .oc-rank-pill--sawon {
      background: color-mix(in srgb, var(--muted) 22%, var(--panel-strong));
      color: #e2e8f0;
      border-color: rgba(148, 163, 184, 0.35);
    }
    body[data-theme="dark"] #view-org-chart .oc-rank-pill--other {
      background: color-mix(in srgb, var(--muted) 18%, var(--panel-strong));
      color: var(--muted-2);
      border-color: rgba(148, 163, 184, 0.25);
    }
    #view-org-chart .oc-notes-box { background: var(--bg); border-radius: 10px; padding: 12px 14px; border: 1px solid var(--line-2); font-size: 13px; color: var(--text); }
    #view-org-chart .oc-notes-box ul { margin: 6px 0 0; padding-left: 16px; line-height: 1.75; }
    #view-org-chart .oc-notes-box li { margin: 1px 0; }
    #view-org-chart .oc-notes-title { font-weight: 700; font-size: 12px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.07em; }
    #view-org-chart .oc-drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-2); margin-top: auto; }
    #view-org-chart .oc-month-wrap { display: flex; align-items: center; gap: 6px; }
    #view-org-chart .oc-month-lbl { font-size: 11px; font-weight: 600; color: var(--muted); }
    #view-org-chart .oc-month-select { padding: 5px 8px; font-size: 12px; border: 1.5px solid var(--line-2); border-radius: 7px; background: var(--panel); color: var(--text); font-family: inherit; }
    #view-org-chart .oc-export-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; align-items: center; }
    #view-org-chart .oc-export-actions .oc-export-btn { margin-left: 0; }
    #view-org-chart .oc-export-btn { padding: 7px 14px; font-size: 12px; font-weight: 600; font-family: inherit; border-radius: 8px; border: 1.5px solid var(--primary); background: var(--primary-3); color: var(--primary); cursor: pointer; transition: all 0.15s; margin-left: auto; }
    #view-org-chart .oc-export-btn:hover { background: var(--primary); color: #fff; }
    #view-org-chart .oc-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 24px; color: var(--muted); font-size: 14px; text-align: center; }
    #view-org-chart .oc-empty-icon { font-size: 40px; opacity: 0.25; }
    #view-org-chart .oc-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 40px 24px; color: var(--muted); font-size: 13px; text-align: center; }
    #view-org-chart .oc-placeholder-icon { font-size: 32px; opacity: 0.2; }
    /* Entrance animation */
    @keyframes oc-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    #view-org-chart .oc-node { animation: oc-fade-in 0.3s ease both; }
    @media (max-width: 1024px) {
      #view-org-chart .oc-body {
        grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
      }
      #view-org-chart .oc-stats--inline .oc-stat { padding: 5px 8px; }
      #view-org-chart .oc-stats--inline .oc-stat-val { font-size: 14px; }
    }
    @media (max-width: 768px) {
      #view-org-chart .oc-body {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(240px, 50vh) auto;
      }
      #view-org-chart .oc-canvas-wrap { border-right: none; border-bottom: 1px solid var(--line-2); }
      #view-org-chart .oc-drawer { min-height: 280px; max-height: 55vh; }
      #view-org-chart .oc-drawer-inner { max-height: none; }
      #view-org-chart .oc-toolbar { flex-direction: column; align-items: stretch; }
      #view-org-chart .oc-toolbar-title { flex-wrap: wrap; }
      #view-org-chart .oc-toolbar-title h2 { white-space: normal; }
      #view-org-chart .oc-toolbar-main { justify-content: flex-start; }
      #view-org-chart .oc-stats--inline { width: 100%; justify-content: stretch; }
      #view-org-chart .oc-stats--inline .oc-stat { flex: 1 1 0; }
      #view-org-chart .oc-header { padding: 16px 18px; gap: 12px; }
    }

    /* 인쇄: 상단 크롬·필터 숨기고 본문만 */
    @media print {
      .top-chrome, .loading-overlay, .filter-strip-toggle, .tabbar, .page-header .header-utility-box,
      .filter-strip-actions, .dashboard-toast, .theme-picker, #dataSourceSelector, #themeSelector { display: none !important; }
      body { background: #fff; }
      .shell { padding-top: 12px; width: 100%; }
      .panel, .view { break-inside: avoid; }
      .view.active { display: block !important; }
    }

    #view-customer .grid,
    #view-organization .grid,
    #view-product .grid {
      gap: 6px;
      align-items: start;
    }
    /* ═══ CUSTOMER PAGE PREMIUM REDESIGN ═══ */
    #view-customer .customer-grid-cols { gap: 10px; align-items: stretch; }

    /* Row 1: 비중(도넛) 5 | 월별추이 7 */
    #view-customer .customer-row-1 {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 10px;
      align-items: stretch;
      min-width: 0;
    }
    #view-customer .customer-row-1 .customer-share-rank-panel,
    #view-customer .customer-row-1 .customer-trend-panel {
      display: flex; flex-direction: column;
      min-height: 380px; min-width: 0;
    }
    #view-customer .customer-row-1 .customer-share-rank-content {
      flex: 1; min-height: 0; position: relative;
    }
    #view-customer .customer-row-1 .chart-box.compact {
      flex: 1; min-height: 0; display: flex; flex-direction: column;
    }
    #view-customer .customer-row-1 .customer-share-tab,
    #view-customer .customer-row-1 .customer-rank-tab {
      position: absolute; inset: 0; flex: 1; min-height: 0;
      overflow: hidden; display: flex; flex-direction: column;
      visibility: hidden; pointer-events: none;
    }
    #view-customer .customer-row-1 .customer-share-tab[aria-hidden="false"],
    #view-customer .customer-row-1 .customer-rank-tab[aria-hidden="false"] {
      visibility: visible; pointer-events: auto;
    }
    #view-customer .customer-row-1 .customer-rank-tab .ranking-table { flex: 1; min-height: 0; }
    #view-customer .customer-row-1 .customer-rank-tab.record-table { overflow-x: auto; overflow-y: auto; overscroll-behavior-y: contain; }
    #view-customer .customer-row-1 .customer-rank-tab.record-table:has(> table:only-child) { overflow-y: hidden; }
    #view-customer .customer-row-1 .customer-rank-tab.record-table:has(> table:only-child) > table tbody {
      max-height: min(300px, calc(42vh - 52px));
    }
    /* 거래처 비중 도넛 — 상위 5+기타: 범례 폭·행간 축소, 카드 안 도넛+범례 가운데 정렬 */
    #view-customer #customerShareDonut .product-donut-redesign, #view-customer #customerOrgSplitChart .product-donut-redesign, #view-report-admin2 #admin2ChartCustomerMix .product-donut-redesign, #view-report-admin2 #admin2ChartOrgShare .product-donut-redesign {
      gap: 6px;
      justify-content: center;
    }
    #view-customer #customerShareDonut .product-donut-rd__legend, #view-customer #customerOrgSplitChart .product-donut-rd__legend, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__legend, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__legend {
      flex: 0 1 auto;
      min-width: 0;
      gap: 3px;
      padding: 0 0 0 1px;
      max-width: min(200px, 42%);
    }
    #view-customer #customerShareDonut .product-donut-rd-row, #view-customer #customerOrgSplitChart .product-donut-rd-row, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-row, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-row {
      padding: 3px 4px;
      gap: 4px;
      border-radius: 8px;
    }
    #view-customer #customerShareDonut .product-donut-rd-swatch, #view-customer #customerOrgSplitChart .product-donut-rd-swatch, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-swatch, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-swatch {
      flex: 0 0 9px;
      width: 9px;
      height: 9px;
      border-radius: 2px;
    }
    #view-customer #customerShareDonut .product-donut-rd-row__mid, #view-customer #customerOrgSplitChart .product-donut-rd-row__mid, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-row__mid, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-row__mid {
      gap: 3px;
    }
    #view-customer #customerShareDonut .product-donut-rd-row__line1, #view-customer #customerOrgSplitChart .product-donut-rd-row__line1, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-row__line1, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-row__line1 {
      gap: 4px;
    }
    #view-customer #customerShareDonut .product-donut-rd-label, #view-customer #customerOrgSplitChart .product-donut-rd-label, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-label, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-label {
      font-size: 12px;
      font-weight: 700;
    }
    #view-customer #customerShareDonut .product-donut-rd-amt, #view-customer #customerOrgSplitChart .product-donut-rd-amt, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-amt, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-amt {
      font-size: 11px;
      font-weight: 800;
    }
    #view-customer #customerShareDonut .product-donut-rd-pct, #view-customer #customerOrgSplitChart .product-donut-rd-pct, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-pct, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-pct {
      flex: 0 0 34px;
      width: 34px;
      font-size: 12px;
    }
    #view-customer #customerShareDonut .product-donut-rd-bar, #view-customer #customerOrgSplitChart .product-donut-rd-bar, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-bar, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-bar {
      height: 5px;
    }
    /* 거래처 월별 매출 추이: 카드 폭 활용 + Y축·SVG 축소 방지 */
    #view-customer .customer-row-1 .customer-trend-panel #customerTrendChart {
      flex: 1 1 0;
      min-height: 360px;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: visible;
    }
    #view-customer #customerTrendChart .chart-card-with-switcher {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #view-customer #customerTrendChart .chart-viz-body {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: visible;
    }
    #view-customer #customerTrendChart .line-chart-shell--org-fill {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: visible;
    }
    #view-customer #customerTrendChart .line-chart-shell--org-fill .line-chart-svg--fill {
      flex: 1 1 auto;
      width: 100%;
      min-height: 280px;
      height: 100%;
      max-height: 100%;
      display: block;
    }
    #view-customer #customerTrendChart .line-chart-toolbar {
      margin-bottom: 8px;
    }
    #view-customer #customerTrendChart .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      align-items: center;
      justify-content: flex-start;
      overflow: visible;
      padding-top: 8px;
      max-height: none;
      white-space: normal;
    }
    #view-customer #customerTrendChart .legend .legend-item {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.25;
    }
    /* 거래처 월별 추이: 헤더 1행 — 좌 제목·범례·기간, 우 meta */
    #view-customer .panel-head.customer-trend-panel-head {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
    }
    #view-customer .customer-trend-head-left {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px 12px;
      min-width: 0;
    }
    #view-customer .customer-trend-head-left .panel-head-left {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    #view-customer .customer-trend-head-tools {
      flex: 1 1 auto;
      min-width: 0;
    }
    #view-customer .panel-head.customer-trend-panel-head > .meta {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      text-align: right;
      white-space: normal !important;
      max-width: min(380px, 42vw);
    }
    #view-customer .line-chart-head-inline-tools,
    #view-product .line-chart-head-inline-tools,
    #view-service-type .line-chart-head-inline-tools {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px 10px;
      min-width: 0;
    }
    #view-customer .line-chart-head-inline-tools .line-chart-head-legend,
    #view-product .line-chart-head-inline-tools .line-chart-head-legend,
    #view-service-type .line-chart-head-inline-tools .line-chart-head-legend {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
    }
    #view-customer .line-chart-head-inline-tools .line-chart-head-legend .legend,
    #view-product .line-chart-head-inline-tools .line-chart-head-legend .legend,
    #view-service-type .line-chart-head-inline-tools .line-chart-head-legend .legend {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 10px;
      margin: 0;
      padding: 0;
    }
    #view-customer .line-chart-head-inline-tools .line-chart-toolbar,
    #view-product .line-chart-head-inline-tools .line-chart-toolbar,
    #view-service-type .line-chart-head-inline-tools .line-chart-toolbar {
      flex-shrink: 0;
    }
    #view-customer #customerTrendChart .line-chart-shell--plot-only,
    #view-product #productTrendChart .line-chart-shell--plot-only,
    #view-service-type #stTrendChart .line-chart-shell--plot-only,
    #view-organization #orgRateTrendChart .line-chart-shell--plot-only {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    #view-customer #customerTrendChart .line-chart-shell--plot-only .line-chart-plot-area {
      flex: 1 1 auto;
      min-height: 200px;
      display: flex;
      flex-direction: column;
    }
    /* Row 3: 제품군·TAT(6) | 매출 발생 조직 도넛(4) — 넓은 화면 6:4, 좁으면 1열 */
    #view-customer .customer-row-3-tat-org {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: 10px;
      align-items: stretch;
      min-width: 0;
    }
    #view-customer .customer-row-3-tat-org > .customer-tat-panel {
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
    }
    #view-customer .customer-row-3-tat-org > .customer-tat-panel > .customer-tat-panel-table {
      flex: 1 1 0;
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
    }
    /* 거래처별 제품군·TAT: 본문 가독 — 글자 확대, 헤더·데이터 가운데 정렬(.num 우측정렬 덮어씀) */
    #view-customer .customer-tat-panel-table table[data-table-id="customerTat"] {
      font-size: 16px;
    }
    #view-customer .customer-tat-panel-table table[data-table-id="customerTat"] th,
    #view-customer .customer-tat-panel-table table[data-table-id="customerTat"] td {
      text-align: center !important;
    }
    @media (max-width: 1280px) {
      #view-customer .customer-row-3-tat-org {
        grid-template-columns: 1fr;
      }
    }

    /* 거래처별 매출 발생 조직: 비중 도넛(리디자인) + 막대 트랙 범례 + 셀렉트 */
    #view-customer .customer-org-split-panel {
      display: flex;
      flex-direction: column;
      min-height: min(420px, 52vh);
      min-width: 0;
      height: 100%;
    }
    #view-customer .customer-org-split-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
      flex-shrink: 0;
    }
    #view-customer .customer-org-split-head-text { min-width: 0; flex: 1 1 200px; }
    #view-customer .customer-org-split-meta {
      display: block;
      margin-top: 2px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.4;
      color: var(--muted, #64748b);
      letter-spacing: -0.01em;
    }
    #view-customer .customer-org-split-select-label { flex: 0 0 auto; margin: 0; }
    #view-customer .customer-org-split-select {
      max-width: min(100%, 280px);
      min-width: 160px;
      padding: 6px 10px;
      font-size: 13px;
      border-radius: 8px;
      border: 1px solid var(--line-2, #cbd5e1);
      background: var(--bg, #fff);
      color: var(--text, #0f172a);
    }
    #view-customer .customer-org-split-chart-host {
      flex: 1 1 0;
      min-height: clamp(260px, 42vh, 580px);
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }
    #view-customer .cust-org-stack-wrap {
      display: flex;
      flex-direction: column;
      gap: 14px;
      flex: 1 1 0;
      min-height: 0;
      height: 100%;
    }
    #view-customer .cust-org-stack-track {
      display: flex;
      flex-direction: row;
      width: 100%;
      flex: 0 0 auto;
      height: clamp(44px, 7vmin, 72px);
      min-height: 44px;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(24, 59, 100, 0.12);
      background: var(--line-2, #e2e8f0);
    }
    #view-customer .cust-org-stack-seg {
      height: 100%;
      transition: filter 0.15s ease;
      box-sizing: border-box;
    }
    #view-customer .cust-org-stack-seg:hover { filter: brightness(1.08); }
    #view-customer .cust-org-stack-legend {
      display: flex;
      flex-direction: column;
      gap: 10px;
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 2px 6px 4px 0;
      scrollbar-gutter: stable;
    }
    #view-customer .cust-org-stack-legend-row {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 11px;
      background: color-mix(in srgb, var(--panel-surface, #f8fafc) 92%, var(--line, #e2e8f0));
      border: 1px solid color-mix(in srgb, var(--line, #cbd5e1) 88%, transparent);
      font-size: 13px;
      line-height: 1.35;
    }
    #view-customer .cust-org-stack-swatch {
      width: 12px;
      height: 12px;
      min-height: 12px;
      border-radius: 4px;
      flex-shrink: 0;
      margin-top: 3px;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
    }
    #view-customer .cust-org-stack-legend-body {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 7px;
    }
    #view-customer .cust-org-stack-legend-line {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: flex-end;
      gap: 8px 12px;
    }
    #view-customer .cust-org-stack-name {
      flex: 1 1 140px;
      min-width: 0;
      font-weight: 700;
      color: var(--text, #0f172a);
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    #view-customer .cust-org-stack-amt {
      font-variant-numeric: tabular-nums;
      font-weight: 800;
      color: var(--text, #0f172a);
      white-space: nowrap;
    }
    #view-customer .cust-org-stack-pct {
      font-variant-numeric: tabular-nums;
      min-width: 3.5rem;
      text-align: right;
      font-weight: 800;
      color: var(--primary, #2563eb);
      white-space: nowrap;
    }
    #view-customer .cust-org-stack-gauge {
      width: 100%;
      height: clamp(14px, 2.4vmin, 22px);
      min-height: 14px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--line, #e2e8f0) 75%, var(--panel, #fff));
      overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    }
    #view-customer .cust-org-stack-gauge-fill {
      height: 100%;
      min-width: 0;
      border-radius: inherit;
      transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25) inset;
    }
    #view-customer .customer-row-1 .customer-share-rank-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    #view-customer .customer-row-1 .customer-share-rank-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    #view-customer .customer-row-1 .customer-share-rank-title h3 {
      margin: 0;
      font-size: 18px;
      font-weight: 800;
      white-space: nowrap;
    }
    #view-customer .customer-row-1 .customer-share-rank-title .meta {
      font-size: 12px;
      color: var(--muted-2);
      font-weight: 700;
      white-space: nowrap;
    }
    #view-customer .customer-row-1 .customer-share-rank-toggle { display: flex; gap: 4px; }
    #view-customer .customer-row-1 .customer-share-rank-tab-btn {
      padding: 6px 14px; font-size: 13px; font-weight: 600;
      border-radius: var(--radius); border: 1px solid var(--line-2);
      background: var(--panel); color: var(--muted); cursor: pointer;
      transition: all 0.15s;
    }
    #view-customer .customer-row-1 .customer-share-rank-tab-btn.is-active {
      background: var(--primary); color: #fff; border-color: var(--primary);
    }
    #view-customer .customer-row-1 .customer-rank-tab.customer-rank-table {
      --customer-rank-wrap-border: color-mix(in srgb, var(--panel-border) 72%, var(--line-soft));
      --customer-rank-head-fill: var(--table-head-bg);
      --customer-rank-row-fill: color-mix(in srgb, var(--panel-surface) 92%, var(--panel));
      --customer-rank-row-fill-alt: color-mix(in srgb, var(--panel-surface) 84%, var(--panel));
      --customer-rank-row-hover: color-mix(in srgb, var(--panel-surface) 78%, var(--muted) 8%);
    }
    #view-customer .customer-row-1 .customer-rank-tab.customer-rank-table table.ranking-table {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
    }
    #view-customer .customer-row-1 .customer-rank-tab.customer-rank-table thead th {
      background: var(--customer-rank-head-fill) !important;
      border-top: 1px solid var(--customer-rank-wrap-border) !important;
      border-bottom: 1px solid var(--customer-rank-wrap-border) !important;
      font-size: 12px;
      font-weight: 800;
      color: var(--table-head-text);
      text-align: center;
      vertical-align: middle;
    }
    #view-customer .customer-row-1 .customer-rank-tab.customer-rank-table thead th:first-child,
    #view-customer .customer-row-1 .customer-rank-tab.customer-rank-table tbody td:first-child {
      border-left: 1px solid var(--customer-rank-wrap-border) !important;
    }
    #view-customer .customer-row-1 .customer-rank-tab.customer-rank-table thead th:last-child,
    #view-customer .customer-row-1 .customer-rank-tab.customer-rank-table tbody td:last-child {
      border-right: 1px solid var(--customer-rank-wrap-border) !important;
    }
    #view-customer .customer-row-1 .customer-rank-tab.customer-rank-table tbody td {
      background: var(--customer-rank-row-fill) !important;
      border-top: 1px solid var(--customer-rank-wrap-border) !important;
      border-bottom: 1px solid var(--customer-rank-wrap-border) !important;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      vertical-align: middle;
    }
    #view-customer .customer-row-1 .customer-rank-tab.customer-rank-table tbody tr:nth-child(even) td {
      background: var(--customer-rank-row-fill-alt) !important;
    }
    #view-customer .customer-row-1 .customer-rank-tab.customer-rank-table tbody tr:hover td {
      background: var(--customer-rank-row-hover) !important;
    }
    #view-customer .customer-row-1 .customer-rank-name-cell {
      text-align: center;
      max-width: 0;
    }
    #view-customer .customer-row-1 .customer-rank-name {
      display: inline-block;
      max-width: min(100%, 11.5rem);
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--line-2);
      background: var(--panel-surface);
      font-weight: 800;
      font-size: 12px;
      color: var(--table-head-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      line-height: 1.35;
      box-sizing: border-box;
    }
    #view-customer .customer-row-1 .customer-rank-major-cell {
      text-align: center;
      max-width: 9rem;
    }
    #view-customer .customer-row-1 .customer-rank-major-cell .customer-rank-pill {
      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
    #view-customer .customer-row-1 .customer-rank-share-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      width: 100%;
      max-width: 7.5rem;
      margin: 0 auto;
    }
    #view-customer .customer-row-1 .customer-rank-share-meter {
      width: 100%;
      height: 5px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--line) 72%, transparent);
      overflow: hidden;
    }
    #view-customer .customer-row-1 .customer-rank-share-meter > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      min-width: 3px;
    }
    #view-customer .customer-row-1 .customer-rank-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 54px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--panel-border) 62%, var(--line-soft));
      background: color-mix(in srgb, var(--panel-surface) 72%, var(--accent-soft) 28%);
      color: var(--table-head-text);
      font-size: 12px;
      font-weight: 800;
      padding: 3px 10px;
      line-height: 1.35;
    }
    #view-customer .customer-row-1 .customer-rank-pill.is-accent {
      border-color: color-mix(in srgb, var(--accent) 34%, var(--line-soft));
    }
    #view-customer .customer-row-1 .customer-rank-pill--segment {
      --cust-seg: #2563eb;
      min-width: 2.1rem;
      padding: 4px 9px;
      background: var(--cust-seg);
      border-color: color-mix(in srgb, var(--cust-seg) 38%, #0f172a);
      color: #fff;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    }
    #view-customer .customer-row-1 .customer-rank-pill--segment-muted {
      background: color-mix(in srgb, var(--cust-seg) 30%, var(--panel-surface));
      color: var(--table-head-text);
      border-color: color-mix(in srgb, var(--cust-seg) 42%, var(--line));
      text-shadow: none;
    }
    #view-customer .customer-row-1 .customer-rank-pill--sales {
      --cust-seg: #94a3b8;
      min-width: 3.2rem;
      background: color-mix(in srgb, var(--cust-seg) 16%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--cust-seg) 52%, var(--line));
      color: var(--table-head-text);
    }
    #view-customer .customer-row-1 .customer-rank-pill--muted-count {
      min-width: 2.4rem;
      background: color-mix(in srgb, var(--panel-surface) 86%, var(--muted) 14%);
      color: var(--muted);
      border-color: var(--line-2);
      font-weight: 700;
    }
    #view-customer .customer-row-1 .customer-rank-pill--share-pct {
      --cust-seg: #94a3b8;
      min-width: 3rem;
      background: color-mix(in srgb, var(--panel-surface) 78%, var(--cust-seg) 22%);
      border-color: color-mix(in srgb, var(--cust-seg) 40%, var(--line));
    }

    /* DONUT: full height — 자식은 가로로 stretch(100%)해야 도넛 width:min(68%,320px) % 기준이 카드 폭이 됨 */
    #view-customer #customerShareDonut, #view-customer #customerOrgSplitChart, #view-report-admin2 #admin2ChartCustomerMix, #view-report-admin2 #admin2ChartOrgShare {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      min-height: 0;
      flex: 1;
      overflow: hidden;
    }
    /* donut-wrap: flex row, 도넛 좌측 고정 + 범례 우측 나머지 */
    #view-customer #customerShareDonut .donut-wrap, #view-customer #customerOrgSplitChart .donut-wrap, #view-report-admin2 #admin2ChartCustomerMix .donut-wrap, #view-report-admin2 #admin2ChartOrgShare .donut-wrap {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 20px !important;
      width: 100% !important;
      height: 100% !important;
      padding: 12px !important;
      box-sizing: border-box !important;
      overflow: hidden !important;
    }
    /* 도넛: 높이 기준으로 정사각형, 최대 280px */
    #view-customer #customerShareDonut .donut, #view-customer #customerOrgSplitChart .donut, #view-report-admin2 #admin2ChartCustomerMix .donut, #view-report-admin2 #admin2ChartOrgShare .donut {
      flex: 0 0 auto !important;
      height: min(100%, 280px) !important;
      width: min(100%, 280px) !important;
      aspect-ratio: 1 !important;
      margin: 0 !important;
      cursor: pointer !important;
    }
    #view-customer #customerShareDonut .donut::after, #view-customer #customerOrgSplitChart .donut::after, #view-report-admin2 #admin2ChartCustomerMix .donut::after, #view-report-admin2 #admin2ChartOrgShare .donut::after { inset: 20% !important; }
    /* 범례: 고정 너비 — 이름/값/비중이 딱 맞게 */
    #view-customer #customerShareDonut .legend, #view-customer #customerOrgSplitChart .legend, #view-report-admin2 #admin2ChartCustomerMix .legend, #view-report-admin2 #admin2ChartOrgShare .legend {
      flex: 0 0 240px !important;
      width: 240px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 3px !important;
      overflow: hidden !important;
    }
    /* 범례 항목: 이름(고정80px) 값(고정46px) 비중(고정38px) */
    #view-customer #customerShareDonut .legend-item, #view-customer #customerOrgSplitChart .legend-item, #view-report-admin2 #admin2ChartCustomerMix .legend-item, #view-report-admin2 #admin2ChartOrgShare .legend-item {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      font-size: 15px !important; font-weight: 600 !important;
      padding: 4px 6px !important; border-radius: 7px !important;
      border: 1.5px solid transparent !important;
      cursor: pointer !important; transition: background 0.15s !important;
    }
    #view-customer #customerShareDonut .legend-item .legend-swatch, #view-customer #customerOrgSplitChart .legend-item .legend-swatch {
      flex: 0 0 10px !important; width: 10px !important; height: 10px !important;
    }
    #view-customer #customerShareDonut .legend-item .legend-label-text, #view-customer #customerOrgSplitChart .legend-item .legend-label-text {
      flex: 0 0 100px !important; width: 100px !important;
      overflow: hidden !important; text-overflow: ellipsis !important;
      white-space: nowrap !important; font-size: 15px !important;
    }
    #view-customer #customerShareDonut .legend-item .legend-value, #view-customer #customerOrgSplitChart .legend-item .legend-value {
      flex: 0 0 50px !important; text-align: right !important;
      font-size: 15px !important; font-weight: 700 !important;
      color: var(--text) !important; white-space: nowrap !important;
    }
    #view-customer #customerShareDonut .legend-item .legend-pct, #view-customer #customerOrgSplitChart .legend-item .legend-pct {
      flex: 0 0 42px !important; text-align: right !important;
      font-size: 13px !important; color: var(--muted) !important;
      white-space: nowrap !important;
    }
    #view-customer #customerShareDonut .legend-item:hover, #view-customer #customerOrgSplitChart .legend-item:hover { background: var(--bg) !important; border-color: var(--line-2) !important; }
    #view-customer #customerShareDonut .legend-item.cust-donut-active, #view-customer #customerOrgSplitChart .legend-item.cust-donut-active, #view-report-admin2 #admin2ChartCustomerMix .legend-item.cust-donut-active, #view-report-admin2 #admin2ChartOrgShare .legend-item.cust-donut-active { background: var(--bg) !important; border-color: var(--primary) !important; }
    #view-customer #customerShareDonut .legend-item.cust-donut-dimmed, #view-customer #customerOrgSplitChart .legend-item.cust-donut-dimmed, #view-report-admin2 #admin2ChartCustomerMix .legend-item.cust-donut-dimmed, #view-report-admin2 #admin2ChartOrgShare .legend-item.cust-donut-dimmed { opacity: 0.35 !important; }


        /* Lifecycle row 2: Briefing(5) | 누락(3.5) | 신규(3.5) */
    #view-customer .customer-lifecycle-row-wrap {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 5fr 3.5fr 3.5fr;
      gap: 10px;
      align-items: stretch;
      min-width: 0;
    }
    #view-customer .customer-lifecycle-briefing,
    #view-customer .customer-lifecycle-lost,
    #view-customer .customer-lifecycle-new {
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    #view-customer .customer-lifecycle-lost > .panel-head,
    #view-customer .customer-lifecycle-new > .panel-head {
      flex-shrink: 0;
    }
    /* 신규·누락 거래처 브리핑 레이아웃
       헤더 다음 1행: 그래프 전체
       2행: 워터폴
       3행: 좌 게이지 | 우 요약 테이블
       4행: 인사이트 텍스트 */
    #view-customer .customer-lifecycle-briefing {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto minmax(220px, auto) auto auto;
      column-gap: 10px;
      row-gap: 8px;
      align-items: stretch;
    }
    #view-customer .customer-lifecycle-briefing > .panel-head {
      grid-column: 1 / -1;
      grid-row: 1;
    }
    #view-customer .customer-lifecycle-briefing > .customer-lifecycle-briefing-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 8px 12px;
    }
    #view-customer .customer-lifecycle-briefing .customer-lifecycle-briefing-title-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      min-width: 0;
      flex: 1 1 auto;
    }
    #view-customer .customer-lifecycle-briefing .customer-lifecycle-briefing-title-row h3 {
      margin: 0;
    }
    #view-customer .customer-lifecycle-briefing .customer-lifecycle-cohort-basis-host {
      flex-shrink: 0;
    }
    #view-customer .customer-lifecycle-briefing > .customer-yoy-waterfall-wrap {
      grid-column: 1 / -1;
      grid-row: 2;
      min-height: 220px;
      max-height: 360px;
      height: 100%;
    }
    #view-customer .customer-lifecycle-briefing > #customerLifecycleGauge {
      grid-column: 1;
      grid-row: 3;
      margin: 0;
      align-self: stretch;
      height: 100%;
    }
    #view-customer .customer-lifecycle-briefing > .summary-box {
      grid-column: 1 / -1;
      grid-row: 4;
      margin: 0 !important;
      align-self: start;
    }
    #view-customer .customer-lifecycle-briefing > .record-table {
      grid-column: 2;
      grid-row: 3;
      max-height: none;
      height: 100%;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding: 0 !important;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* Tables inside lifecycle panels — 동일 표 내 thead·tfoot 고정, 데이터 tbody만 스크롤(tfoot 합계는 겹치지 않음) */
    #view-customer .customer-lifecycle-lost .customer-lifecycle-table,
    #view-customer .customer-lifecycle-new .customer-lifecycle-table {
      flex: 1 1 0;
      min-height: 0;
      max-height: none !important;
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding: 0 !important;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #view-customer .customer-lifecycle-lost .customer-lifecycle-table .ranking-table,
    #view-customer .customer-lifecycle-new .customer-lifecycle-table .ranking-table {
      display: flex;
      flex-direction: column;
      flex: 1 1 0;
      min-height: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
    }
    #view-customer .customer-lifecycle-lost .customer-lifecycle-table thead,
    #view-customer .customer-lifecycle-new .customer-lifecycle-table thead {
      flex: 0 0 auto;
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    #view-customer .customer-lifecycle-lost .customer-lifecycle-table thead th,
    #view-customer .customer-lifecycle-new .customer-lifecycle-table thead th {
      position: static;
      top: auto;
      z-index: auto;
      background: color-mix(in srgb, var(--table-head-bg, var(--panel)) 92%, white 8%);
      box-shadow: none;
    }
    #view-customer .customer-lifecycle-lost .customer-lifecycle-table tbody,
    #view-customer .customer-lifecycle-new .customer-lifecycle-table tbody {
      flex: 1 1 0;
      min-height: 0;
      max-height: none !important;
      display: block;
      overflow-x: auto;
      overflow-y: auto;
      scrollbar-gutter: stable;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
    }
    #view-customer .customer-lifecycle-lost .customer-lifecycle-table tbody tr,
    #view-customer .customer-lifecycle-new .customer-lifecycle-table tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    #view-customer .customer-lifecycle-lost .customer-lifecycle-table tfoot,
    #view-customer .customer-lifecycle-new .customer-lifecycle-table tfoot {
      flex: 0 0 auto;
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    #view-customer .customer-lifecycle-lost .customer-lifecycle-table tfoot td,
    #view-customer .customer-lifecycle-new .customer-lifecycle-table tfoot td {
      position: static;
      bottom: auto;
      z-index: auto;
      background: color-mix(in srgb, var(--table-head-bg, var(--panel)) 90%, var(--muted-2) 10%);
      box-shadow: none;
      border-top: 1px solid var(--line-2);
    }
    #view-customer .customer-lifecycle-lost .customer-lifecycle-table .customer-cohort-total-row td,
    #view-customer .customer-lifecycle-new .customer-lifecycle-table .customer-cohort-total-row td {
      font-weight: 600;
      color: inherit;
    }
    #view-customer .customer-lifecycle-lost .customer-lifecycle-table .customer-cohort-total-row td:first-child,
    #view-customer .customer-lifecycle-new .customer-lifecycle-table .customer-cohort-total-row td:first-child {
      letter-spacing: -0.01em;
    }
    /* Briefing panel table fixed */
    #view-customer .customer-lifecycle-briefing .record-table {
      max-height: 100%;
      overflow: hidden;
    }
    #view-customer .customer-lifecycle-briefing > .record-table .ranking-table {
      height: 100%;
      margin: 0;
    }

    /* 미니 막대 행 — 기본(다른 화면 재사용 시) */
    #view-customer .customer-mini-bar-row {
      display: grid;
      grid-template-columns: minmax(0, 1.1fr) 2.2fr auto;
      gap: 6px;
      align-items: center;
      font-size: 12px;
      margin-bottom: 6px;
    }
    #view-customer .customer-mini-bar-row .lbl {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 600;
    }
    #view-customer .customer-mini-bar-row .bar-track {
      height: 8px; background: var(--line-2); border-radius: 4px; overflow: hidden;
    }
    #view-customer .customer-mini-bar-row .bar-fill { height: 100%; border-radius: 4px; min-width: 2px; }
    #view-customer .customer-mini-bar-row .val { font-weight: 700; font-size: 11px; color: var(--muted); white-space: nowrap; }
    /* 누락·신규 카드: 게이지 박스는 7행 높이만 → 아래 여백 없이 테이블이 이어짐 */
    #view-customer .customer-lifecycle-lost .customer-cohort-mini-viz,
    #view-customer .customer-lifecycle-new .customer-cohort-mini-viz {
      flex: 0 0 auto;
      min-height: 0;
      padding: 8px 12px 10px;
      margin-bottom: 8px;
      border-radius: 10px;
      border: 1px solid var(--line-2);
      background: color-mix(in srgb, var(--panel) 94%, var(--muted-2));
      overflow: visible;
      box-sizing: border-box;
    }
    #view-customer .customer-lifecycle-lost .customer-mini-bar-row,
    #view-customer .customer-lifecycle-new .customer-mini-bar-row {
      grid-template-columns: minmax(0, 1.15fr) 2.35fr auto;
      gap: 8px;
      font-size: 13px;
      margin-bottom: 9px;
    }
    #view-customer .customer-lifecycle-lost .customer-mini-bar-row:last-child,
    #view-customer .customer-lifecycle-new .customer-mini-bar-row:last-child {
      margin-bottom: 0;
    }
    #view-customer .customer-lifecycle-lost .customer-mini-bar-row .bar-track,
    #view-customer .customer-lifecycle-new .customer-mini-bar-row .bar-track {
      height: 11px;
      border-radius: 5px;
    }
    #view-customer .customer-lifecycle-lost .customer-mini-bar-row .bar-fill,
    #view-customer .customer-lifecycle-new .customer-mini-bar-row .bar-fill {
      border-radius: 5px;
    }
    #view-customer .customer-lifecycle-lost .customer-mini-bar-row .val,
    #view-customer .customer-lifecycle-new .customer-mini-bar-row .val {
      font-size: 12px;
    }
    /* 누락/신규 거래처 엑셀 버튼: 눈에 띄는 초록색 */
    #view-customer #lostCustomerExportBtn,
    #view-customer #newCustomerExportBtn {
      background: linear-gradient(135deg, #16a34a, #15803d) !important;
      border-color: #166534 !important;
      color: #ffffff !important;
      box-shadow: 0 8px 16px rgba(22, 163, 74, 0.22) !important;
    }
    #view-customer #lostCustomerExportBtn:hover,
    #view-customer #newCustomerExportBtn:hover {
      background: linear-gradient(135deg, #22c55e, #16a34a) !important;
      border-color: #166534 !important;
      color: #ffffff !important;
    }

    /* Briefing waterfall */
    #view-customer .customer-yoy-waterfall-wrap {
      min-height: 160px; max-height: 200px; flex-shrink: 0; padding: 6px 4px;
    }
    #view-customer .customer-lifecycle-briefing > .customer-yoy-waterfall-wrap {
      min-height: 220px;
      max-height: 360px;
    }
    #view-customer .customer-yoy-waterfall-wrap svg { width: 100%; height: 100%; display: block; min-height: 230px; }

    /* Metric strip & insight in briefing */
    #view-customer .customer-lifecycle-briefing .metric-strip { flex-shrink: 0; }
    #view-customer .customer-lifecycle-briefing .summary-box { flex-shrink: 0; }
    #view-customer .customer-lifecycle-briefing .summary-box p { font-size: 14px; line-height: 1.72; color: var(--text); }

    /* Lifecycle table fonts */
    #view-customer .customer-lifecycle-table th { font-size: 11px; padding: 7px 8px; }
    #view-customer .customer-lifecycle-table td { font-size: 12px; padding: 6px 8px; }

    /* Summary table in briefing */
    #view-customer .customer-lifecycle-summary-table th { font-size: 11px; padding: 6px 8px; }
    #view-customer .customer-lifecycle-summary-table td { font-size: 13px; font-weight: 700; padding: 7px 8px; }

    /* Gauge bar for summary */
    #view-customer .cust-gauge-wrap { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
    /* 3행을 하나의 grid로 묶어 1열 너비 = 가장 긴 라벨 기준 → 트랙 시작선 정렬 */
    #view-customer .customer-lifecycle-briefing > #customerLifecycleGauge.cust-gauge-wrap {
      margin: 0;
      padding: 8px 4px;
      display: grid;
      grid-template-columns: max-content minmax(0, 1fr) max-content;
      column-gap: 12px;
      row-gap: 14px;
      align-items: center;
      min-height: 100%;
    }
    #view-customer .cust-gauge-row { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; }
    #view-customer .cust-gauge-label { font-size: 13px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 5px; min-width: 0; }
    #view-customer .cust-gauge-label-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    #view-customer .cust-gauge-track { height: 10px; background: var(--line-2); border-radius: 6px; overflow: hidden; }
    #view-customer .cust-gauge-fill { height: 100%; border-radius: 6px; transition: width 0.6s cubic-bezier(0.34,1.56,0.64,1); min-width: 4px; }
    #view-customer .cust-gauge-val { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
    /* 신규·누락 브리핑: 행 래퍼는 부모 grid 열에 흡수(display:contents) */
    #view-customer .customer-lifecycle-briefing .cust-gauge-row {
      display: contents;
    }
    #view-customer .customer-lifecycle-briefing .cust-gauge-label {
      font-size: 14px;
      justify-content: flex-start;
    }
    #view-customer .customer-lifecycle-briefing .cust-gauge-track {
      height: 17px;
      border-radius: 9px;
      min-width: 0;
    }
    #view-customer .customer-lifecycle-briefing .cust-gauge-fill {
      border-radius: 9px;
      min-width: 6px;
    }
    #view-customer .customer-lifecycle-briefing .cust-gauge-val {
      font-size: 14px;
      min-width: 4.5rem;
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    /* General panel padding */
    #view-customer .panel, #view-organization .panel, #view-product .panel { padding: 10px 12px; }
    #view-customer .chart-box, #view-organization .chart-box, #view-product .chart-box { min-height: 140px; }

    #view-customer .chart-box.compact,
    #view-organization .chart-box.compact,
    #view-product .chart-box.compact {
      min-height: 100px;
    }

    /* 제품 1행: 비중·추이 그리드 — 행 높이 확보 */
    #view-product .section > .grid:first-of-type {
      min-height: 460px;
      align-items: stretch;
    }
    #view-product .section > .grid:first-of-type > .panel {
      min-height: 0;
    }

    /* 제품 · 대분류별 월별 매출 추이: 플롯이 카드 폭·높이를 채움, 좌우 카드 패딩 없음(헤더만 유지) */
    #view-product .panel.span-8:has(#productTrendChart) {
      display: flex;
      flex-direction: column;
      min-height: 460px;
      min-width: 0;
      padding-left: 0;
      padding-right: 0;
    }
    #view-product .panel.span-8:has(#productTrendChart) .panel-head.org-panel-trend-head {
      padding-left: 12px;
      padding-right: 12px;
    }
    #view-product #productTrendChart.chart-box {
      padding-left: 0;
      padding-right: 0;
      padding-top: 2px;
      padding-bottom: 6px;
      border-left: none;
      border-right: none;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
    }
    #view-product #productTrendChart {
      flex: 1 1 0;
      min-height: 340px;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }
    #view-product #productTrendChart .line-chart-shell--org-fill {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #view-product #productTrendChart .line-chart-shell--plot-only .line-chart-plot-area {
      flex: 1 1 auto;
      min-height: 280px;
      display: flex;
      flex-direction: column;
    }
    /* 추이 카드 헤더: M/Q/H/Y 툴바(제품·거래처·조직·매출유형) */
    #view-product .panel.span-8:has(#productTrendChart) .product-trend-gran-host,
    #view-customer .customer-trend-panel:has(#customerTrendChart) .product-trend-gran-host,
    #view-organization .org-panel-trend:has(#orgRateTrendChart) .product-trend-gran-host,
    #view-service-type .panel.span-8:has(#stTrendChart) .product-trend-gran-host {
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
    #view-product .panel.span-8:has(#productTrendChart) .product-trend-gran-toolbar,
    #view-customer .customer-trend-panel:has(#customerTrendChart) .product-trend-gran-toolbar,
    #view-organization .org-panel-trend:has(#orgRateTrendChart) .product-trend-gran-toolbar,
    #view-service-type .panel.span-8:has(#stTrendChart) .product-trend-gran-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: 4px;
      margin: 0;
      padding: 0;
    }
    #view-product .panel.span-8:has(#productTrendChart) .product-trend-gran-toolbar .gran-btn,
    #view-customer .customer-trend-panel:has(#customerTrendChart) .product-trend-gran-toolbar .gran-btn,
    #view-organization .org-panel-trend:has(#orgRateTrendChart) .product-trend-gran-toolbar .gran-btn,
    #view-service-type .panel.span-8:has(#stTrendChart) .product-trend-gran-toolbar .gran-btn {
      padding: 4px 10px;
      font-size: 15px;
      font-weight: 600;
      line-height: 1.3;
      min-height: 28px;
      box-sizing: border-box;
    }
    /* 추이 패널 헤더: h3 제외 — 범례·M/Q/H/Y·시각화 15px/600 */
    #view-product .panel.span-8:has(#productTrendChart) .org-panel-trend-head .org-trend-viz-switcher-host .viz-switcher-btn,
    #view-product .panel.span-8:has(#productTrendChart) .org-panel-trend-head .chart-viz-switcher .viz-switcher-btn,
    #view-customer .customer-trend-panel:has(#customerTrendChart) .org-panel-trend-head .org-trend-viz-switcher-host .viz-switcher-btn,
    #view-customer .customer-trend-panel:has(#customerTrendChart) .org-panel-trend-head .chart-viz-switcher .viz-switcher-btn,
    #view-organization .org-panel-trend:has(#orgRateTrendChart) .org-panel-trend-head .org-trend-viz-switcher-host .viz-switcher-btn,
    #view-organization .org-panel-trend:has(#orgRateTrendChart) .org-panel-trend-head .chart-viz-switcher .viz-switcher-btn,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-panel-trend-head .org-trend-viz-switcher-host .viz-switcher-btn,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-panel-trend-head .chart-viz-switcher .viz-switcher-btn {
      font-size: 15px;
      font-weight: 600;
      line-height: 1.3;
      min-height: 28px;
      padding: 4px 10px;
      box-sizing: border-box;
    }
    #view-product .panel.span-8:has(#productTrendChart) .org-panel-trend-head .org-trend-legend-host .legend .legend-item,
    #view-product .panel.span-8:has(#productTrendChart) .org-panel-trend-head .org-trend-legend-host .legend .legend-series-label,
    #view-customer .customer-trend-panel:has(#customerTrendChart) .org-panel-trend-head .org-trend-legend-host .legend .legend-item,
    #view-customer .customer-trend-panel:has(#customerTrendChart) .org-panel-trend-head .org-trend-legend-host .legend .legend-series-label,
    #view-organization .org-panel-trend:has(#orgRateTrendChart) .org-panel-trend-head .org-trend-legend-host .legend .legend-item,
    #view-organization .org-panel-trend:has(#orgRateTrendChart) .org-panel-trend-head .org-trend-legend-host .legend .legend-series-label,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-panel-trend-head .org-trend-legend-host .legend .legend-item,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-panel-trend-head .org-trend-legend-host .legend .legend-series-label {
      font-size: 15px;
      font-weight: 600;
      line-height: 1.3;
    }
    #view-product #productTrendChart .line-chart-shell--org-fill .line-chart-svg--fill {
      flex: 1 1 auto;
      width: 100%;
      min-height: 260px;
      height: 100%;
      max-height: 100%;
      display: block;
    }
    /* 기간 범례(그룹 막대): 헤더 범례와 동일 15px/600 */
    #view-product .panel.span-8:has(#productTrendChart) .org-trend-legend-host .product-trend-legend-head-periods .legend .legend-item,
    #view-customer .customer-trend-panel:has(#customerTrendChart) .org-trend-legend-host .product-trend-legend-head-periods .legend .legend-item,
    #view-organization .org-panel-trend:has(#orgRateTrendChart) .org-trend-legend-host .product-trend-legend-head-periods .legend .legend-item,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-trend-legend-host .product-trend-legend-head-periods .legend .legend-item {
      font-weight: 600;
      color: var(--muted);
    }
    /* 제품·매출유형 월별 추이: 헤더 1행 — 좌 제목·범례·기간, 우 meta */
    #view-product .panel-head.product-trend-panel-head,
    #view-service-type .panel-head.product-trend-panel-head {
      display: grid !important;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 12px;
      align-items: center;
    }
    #view-product .product-trend-head-left,
    #view-service-type .product-trend-head-left {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px 12px;
      min-width: 0;
    }
    #view-product .product-trend-head-left .panel-head-left {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    #view-product .product-trend-head-tools,
    #view-service-type .product-trend-head-tools {
      flex: 1 1 auto;
      min-width: 0;
    }
    #view-product .panel-head.product-trend-panel-head > .meta,
    #view-service-type .panel-head.product-trend-panel-head > .meta {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      text-align: right;
      white-space: normal !important;
      max-width: min(400px, 48vw);
    }

    /* 제품 · 대분류 매출 성과 분석: 기간 툴바 배치(버튼·셀렉트는 공통 .org-compare-period-* 스타일) */
    #view-product #productComparePeriodToolbar {
      margin-left: auto;
    }

    /* 제품 2행: 대분류 매출·운영 통합 표(전폭) — 본문 약 7행 노출 후 세로 스크롤, 카드 높이 잘림 방지 */
    #view-product .grid.product-mid-tat-row {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
      align-items: stretch;
    }
    #view-product .grid.product-mid-tat-row > .panel {
      grid-column: span 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
      align-self: stretch;
    }
    #view-product .product-mid-tat-unified-wrap {
      flex: 0 1 auto;
      width: 100%;
      min-height: 0;
      overflow: auto;
      max-height: calc(7 * 2.75rem + 5.25rem);
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    #view-product .product-mid-tat-unified-table {
      min-width: 1040px;
    }
    #view-product .product-mid-tat-unified-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      background: color-mix(in srgb, var(--primary) 13%, var(--panel));
      box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--primary) 32%, var(--line-2));
      font-weight: 700;
      letter-spacing: 0.01em;
      white-space: nowrap;
    }
    #view-product .product-mid-tat-unified-table tbody td {
      border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 84%, transparent) !important;
      background: color-mix(in srgb, var(--panel) 96%, transparent);
      font-variant-numeric: tabular-nums;
    }
    #view-product .product-mid-tat-unified-table tbody tr:nth-child(even) td {
      background: color-mix(in srgb, var(--panel) 90%, var(--primary) 3%);
    }
    #view-product .product-mid-tat-unified-table tbody tr:hover td {
      background: color-mix(in srgb, var(--panel) 84%, var(--primary) 10%);
    }
    #view-product .product-mid-tat-unified-table tbody td:first-child {
      font-weight: 700;
    }
    #view-product .product-category-detail-subhead {
      margin: 0 0 8px;
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
    }

    /* 제품·매출유형 · 비중 도넛: 1행(span-8 추이 카드) 높이에 맞춰 영역 채움, 하단 빈 여백 제거 */
    #view-product .panel.span-4:has(#productDonut),
    #view-service-type .panel.span-4:has(#stDonut) {
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
      align-self: stretch;
    }
    #view-product .panel.span-4:has(#productDonut) > .chart-box#productDonut,
    #view-service-type .panel.span-4:has(#stDonut) > .chart-box#stDonut {
      flex: 1 1 0;
      min-height: 0;
    }
    #view-product #productDonut,
    #view-service-type #stDonut,
    #view-customer #customerShareDonut, #view-customer #customerOrgSplitChart, #view-report-admin2 #admin2ChartCustomerMix, #view-report-admin2 #admin2ChartOrgShare,
    #view-organization #orgShareDonut,
    #view-organization #orgManagerLoadChart {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }
    /* 대분류 비중 — 리디자인: 링 + 중앙 1위 KPI + 막대 트랙 범례 */
    #view-product #productDonut .product-donut-redesign, #view-service-type #stDonut .product-donut-redesign, #view-customer #customerShareDonut .product-donut-redesign, #view-customer #customerOrgSplitChart .product-donut-redesign, #view-report-admin2 #admin2ChartCustomerMix .product-donut-redesign, #view-report-admin2 #admin2ChartOrgShare .product-donut-redesign, #view-organization #orgShareDonut .product-donut-redesign, #view-organization #orgManagerLoadChart .product-donut-redesign {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: flex-start;
      gap: 8px;
      width: 100%;
      flex: 1 1 0;
      min-height: 0;
      padding: 2px 0 0;
      box-sizing: border-box;
    }
    /* 매출 발생 조직 카드: 뒤늦게 선언된 flex-start를 덮어 도넛+범례 묶음을 카드 가로 중앙에 */
    #view-customer #customerOrgSplitChart .product-donut-redesign {
      justify-content: center;
      width: 100%;
      max-width: 100%;
    }
    #view-product #productDonut .product-donut-rd__viz, #view-service-type #stDonut .product-donut-rd__viz, #view-customer #customerShareDonut .product-donut-rd__viz, #view-customer #customerOrgSplitChart .product-donut-rd__viz, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__viz, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__viz, #view-organization #orgShareDonut .product-donut-rd__viz, #view-organization #orgManagerLoadChart .product-donut-rd__viz {
      position: relative;
      flex: 0 0 auto;
      width: min(68%, 320px);
      max-width: min(320px, 100%);
      aspect-ratio: 1;
      align-self: center;
    }
    /* 조직 2행(하위조직 점유율·미매출 담당 비중): 링을 아주 소폭 축소해 범례 가로 여유 확보 — 다른 뷰 도넛 규격은 유지 */
    #view-organization #orgShareDonut .product-donut-rd__viz,
    #view-organization #orgManagerLoadChart .product-donut-rd__viz {
      width: min(63%, 300px);
      max-width: min(300px, 100%);
    }
    #view-product #productDonut .product-donut-rd__ring-shell, #view-service-type #stDonut .product-donut-rd__ring-shell, #view-customer #customerShareDonut .product-donut-rd__ring-shell, #view-customer #customerOrgSplitChart .product-donut-rd__ring-shell, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__ring-shell, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__ring-shell, #view-organization #orgShareDonut .product-donut-rd__ring-shell, #view-organization #orgManagerLoadChart .product-donut-rd__ring-shell {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      padding: 5px;
      background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 70%, var(--muted-2) 30%), var(--panel));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--line-2) 85%, transparent),
        0 14px 32px color-mix(in srgb, var(--text) 8%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
    }
    body[data-theme="dark"] #view-product #productDonut .product-donut-rd__ring-shell,
    body[data-theme="dark"] #view-service-type #stDonut .product-donut-rd__ring-shell,
    body[data-theme="dark"] #view-customer #customerShareDonut .product-donut-rd__ring-shell,
    body[data-theme="dark"] #view-customer #customerOrgSplitChart .product-donut-rd__ring-shell,
    body[data-theme="dark"] #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__ring-shell,
    body[data-theme="dark"] #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__ring-shell,
    body[data-theme="dark"] #view-organization #orgShareDonut .product-donut-rd__ring-shell,
    body[data-theme="dark"] #view-organization #orgManagerLoadChart .product-donut-rd__ring-shell {
      background: linear-gradient(165deg, color-mix(in srgb, var(--panel) 55%, #0f172a), var(--panel));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--line-2) 90%, transparent),
        0 16px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
    }
    #view-product #productDonut .product-donut-rd__ring-glow, #view-service-type #stDonut .product-donut-rd__ring-glow, #view-customer #customerShareDonut .product-donut-rd__ring-glow, #view-customer #customerOrgSplitChart .product-donut-rd__ring-glow, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__ring-glow, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__ring-glow, #view-organization #orgShareDonut .product-donut-rd__ring-glow, #view-organization #orgManagerLoadChart .product-donut-rd__ring-glow {
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 28%, transparent), transparent 72%);
      pointer-events: none;
      z-index: 0;
      opacity: 0.85;
    }
    #view-product #productDonut .product-donut-rd__ring, #view-service-type #stDonut .product-donut-rd__ring, #view-customer #customerShareDonut .product-donut-rd__ring, #view-customer #customerOrgSplitChart .product-donut-rd__ring, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__ring, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__ring, #view-organization #orgShareDonut .product-donut-rd__ring, #view-organization #orgManagerLoadChart .product-donut-rd__ring {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
    }
    #view-product #productDonut .product-donut-rd__core, #view-service-type #stDonut .product-donut-rd__core, #view-customer #customerShareDonut .product-donut-rd__core, #view-customer #customerOrgSplitChart .product-donut-rd__core, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__core, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__core, #view-organization #orgShareDonut .product-donut-rd__core, #view-organization #orgManagerLoadChart .product-donut-rd__core {
      position: absolute;
      inset: 21%;
      border-radius: 50%;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6px 8px;
      background: var(--panel);
      border: 1px solid color-mix(in srgb, var(--line-2) 92%, transparent);
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
        0 6px 18px color-mix(in srgb, var(--text) 7%, transparent);
    }
    body[data-theme="dark"] #view-product #productDonut .product-donut-rd__core,
    body[data-theme="dark"] #view-service-type #stDonut .product-donut-rd__core,
    body[data-theme="dark"] #view-customer #customerShareDonut .product-donut-rd__core,
    body[data-theme="dark"] #view-customer #customerOrgSplitChart .product-donut-rd__core,
    body[data-theme="dark"] #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__core,
    body[data-theme="dark"] #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__core,
    body[data-theme="dark"] #view-organization #orgShareDonut .product-donut-rd__core,
    body[data-theme="dark"] #view-organization #orgManagerLoadChart .product-donut-rd__core {
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
        0 8px 22px rgba(0, 0, 0, 0.35);
    }
    #view-product #productDonut .product-donut-rd__kicker, #view-service-type #stDonut .product-donut-rd__kicker, #view-customer #customerShareDonut .product-donut-rd__kicker, #view-customer #customerOrgSplitChart .product-donut-rd__kicker, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__kicker, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__kicker, #view-organization #orgShareDonut .product-donut-rd__kicker, #view-organization #orgManagerLoadChart .product-donut-rd__kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1.2;
    }
    #view-product #productDonut .product-donut-rd__pct, #view-service-type #stDonut .product-donut-rd__pct, #view-customer #customerShareDonut .product-donut-rd__pct, #view-customer #customerOrgSplitChart .product-donut-rd__pct, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__pct, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__pct, #view-organization #orgShareDonut .product-donut-rd__pct, #view-organization #orgManagerLoadChart .product-donut-rd__pct {
      font-size: clamp(26px, 6cqw, 36px);
      font-weight: 900;
      letter-spacing: -0.04em;
      color: var(--text);
      line-height: 1.05;
      margin: 2px 0 1px;
      font-variant-numeric: tabular-nums;
    }
    #view-product #productDonut .product-donut-rd__pct-unit, #view-service-type #stDonut .product-donut-rd__pct-unit, #view-customer #customerShareDonut .product-donut-rd__pct-unit, #view-customer #customerOrgSplitChart .product-donut-rd__pct-unit, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__pct-unit, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__pct-unit, #view-organization #orgShareDonut .product-donut-rd__pct-unit, #view-organization #orgManagerLoadChart .product-donut-rd__pct-unit {
      font-size: 0.55em;
      font-weight: 800;
      opacity: 0.75;
      margin-left: 1px;
    }
    #view-product #productDonut .product-donut-rd__name, #view-service-type #stDonut .product-donut-rd__name, #view-customer #customerShareDonut .product-donut-rd__name, #view-customer #customerOrgSplitChart .product-donut-rd__name, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__name, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__name, #view-organization #orgShareDonut .product-donut-rd__name, #view-organization #orgManagerLoadChart .product-donut-rd__name {
      font-size: 13px;
      font-weight: 700;
      color: color-mix(in srgb, var(--text) 88%, var(--primary) 12%);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.25;
    }
    #view-product #productDonut .product-donut-rd__foot, #view-service-type #stDonut .product-donut-rd__foot, #view-customer #customerShareDonut .product-donut-rd__foot, #view-customer #customerOrgSplitChart .product-donut-rd__foot, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__foot, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__foot, #view-organization #orgShareDonut .product-donut-rd__foot, #view-organization #orgManagerLoadChart .product-donut-rd__foot {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      margin-top: 4px;
      line-height: 1.35;
      max-width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    @supports (container-type: size) {
      #view-product #productDonut .product-donut-rd__viz, #view-service-type #stDonut .product-donut-rd__viz, #view-customer #customerShareDonut .product-donut-rd__viz, #view-customer #customerOrgSplitChart .product-donut-rd__viz, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__viz, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__viz, #view-organization #orgShareDonut .product-donut-rd__viz, #view-organization #orgManagerLoadChart .product-donut-rd__viz {
        container-type: size;
        container-name: product-donut-rd;
      }
    }
    #view-product #productDonut .product-donut-rd__legend, #view-service-type #stDonut .product-donut-rd__legend, #view-customer #customerShareDonut .product-donut-rd__legend, #view-customer #customerOrgSplitChart .product-donut-rd__legend, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__legend, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__legend, #view-organization #orgShareDonut .product-donut-rd__legend, #view-organization #orgManagerLoadChart .product-donut-rd__legend {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      justify-content: center;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 2px 0 2px 2px;
      max-height: 100%;
    }
    #view-product #productDonut .product-donut-rd-row, #view-service-type #stDonut .product-donut-rd-row, #view-customer #customerShareDonut .product-donut-rd-row, #view-customer #customerOrgSplitChart .product-donut-rd-row, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-row, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-row, #view-organization #orgShareDonut .product-donut-rd-row, #view-organization #orgManagerLoadChart .product-donut-rd-row {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      padding: 4px 6px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--panel) 92%, var(--muted-2) 8%);
      border: 1px solid color-mix(in srgb, var(--line-2) 80%, transparent);
      transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }
    /* 도넛 범례 행: 표시 전용(클릭·필터 비활성) — 호버 시 클릭 유도 효과 없음 */
    #view-product #productDonut .product-donut-rd__legend .product-donut-rd-row,
    #view-service-type #stDonut .product-donut-rd__legend .product-donut-rd-row,
    #view-customer #customerShareDonut .product-donut-rd__legend .product-donut-rd-row,
    #view-customer #customerOrgSplitChart .product-donut-rd__legend .product-donut-rd-row,
    #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__legend .product-donut-rd-row,
    #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__legend .product-donut-rd-row,
    #view-organization #orgShareDonut .product-donut-rd__legend .product-donut-rd-row,
    #view-organization #orgManagerLoadChart .product-donut-rd__legend .product-donut-rd-row {
      cursor: default;
    }
    #view-product #productDonut .product-donut-rd__legend .product-donut-rd-row:hover, #view-service-type #stDonut .product-donut-rd__legend .product-donut-rd-row:hover, #view-customer #customerShareDonut .product-donut-rd__legend .product-donut-rd-row:hover, #view-customer #customerOrgSplitChart .product-donut-rd__legend .product-donut-rd-row:hover, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__legend .product-donut-rd-row:hover, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__legend .product-donut-rd-row:hover, #view-organization #orgShareDonut .product-donut-rd__legend .product-donut-rd-row:hover, #view-organization #orgManagerLoadChart .product-donut-rd__legend .product-donut-rd-row:hover {
      border-color: color-mix(in srgb, var(--line-2) 80%, transparent);
      box-shadow: none;
    }
    #view-product #productDonut .product-donut-rd-row.is-focus-active, #view-service-type #stDonut .product-donut-rd-row.is-focus-active, #view-customer #customerShareDonut .product-donut-rd-row.is-focus-active, #view-customer #customerOrgSplitChart .product-donut-rd-row.is-focus-active, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-row.is-focus-active, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-row.is-focus-active, #view-organization #orgShareDonut .product-donut-rd-row.is-focus-active, #view-organization #orgManagerLoadChart .product-donut-rd-row.is-focus-active {
      border-color: color-mix(in srgb, var(--primary) 55%, var(--line-2));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
    }
    #view-product #productDonut .product-donut-rd-swatch, #view-service-type #stDonut .product-donut-rd-swatch, #view-customer #customerShareDonut .product-donut-rd-swatch, #view-customer #customerOrgSplitChart .product-donut-rd-swatch, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-swatch, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-swatch, #view-organization #orgShareDonut .product-donut-rd-swatch, #view-organization #orgManagerLoadChart .product-donut-rd-swatch {
      flex: 0 0 12px;
      width: 12px;
      height: 12px;
      border-radius: 3px;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
    }
    #view-product #productDonut .product-donut-rd-row__mid, #view-service-type #stDonut .product-donut-rd-row__mid, #view-customer #customerShareDonut .product-donut-rd-row__mid, #view-customer #customerOrgSplitChart .product-donut-rd-row__mid, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-row__mid, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-row__mid, #view-organization #orgShareDonut .product-donut-rd-row__mid, #view-organization #orgManagerLoadChart .product-donut-rd-row__mid {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    #view-product #productDonut .product-donut-rd-row__line1, #view-service-type #stDonut .product-donut-rd-row__line1, #view-customer #customerShareDonut .product-donut-rd-row__line1, #view-customer #customerOrgSplitChart .product-donut-rd-row__line1, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-row__line1, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-row__line1, #view-organization #orgShareDonut .product-donut-rd-row__line1, #view-organization #orgManagerLoadChart .product-donut-rd-row__line1 {
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 6px;
      min-width: 0;
    }
    #view-product #productDonut .product-donut-rd-label, #view-service-type #stDonut .product-donut-rd-label, #view-customer #customerShareDonut .product-donut-rd-label, #view-customer #customerOrgSplitChart .product-donut-rd-label, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-label, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-label, #view-organization #orgShareDonut .product-donut-rd-label, #view-organization #orgManagerLoadChart .product-donut-rd-label {
      flex: 0 1 auto;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #view-product #productDonut .product-donut-rd-amt, #view-service-type #stDonut .product-donut-rd-amt, #view-customer #customerShareDonut .product-donut-rd-amt, #view-customer #customerOrgSplitChart .product-donut-rd-amt, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-amt, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-amt, #view-organization #orgShareDonut .product-donut-rd-amt, #view-organization #orgManagerLoadChart .product-donut-rd-amt {
      flex: 0 0 auto;
      font-size: 13px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      opacity: 0.92;
    }
    #view-product #productDonut .product-donut-rd-bar, #view-service-type #stDonut .product-donut-rd-bar, #view-customer #customerShareDonut .product-donut-rd-bar, #view-customer #customerOrgSplitChart .product-donut-rd-bar, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-bar, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-bar, #view-organization #orgShareDonut .product-donut-rd-bar, #view-organization #orgManagerLoadChart .product-donut-rd-bar {
      height: 6px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--line-2) 55%, transparent);
      overflow: hidden;
    }
    #view-product #productDonut .product-donut-rd-bar > span, #view-service-type #stDonut .product-donut-rd-bar > span, #view-customer #customerShareDonut .product-donut-rd-bar > span, #view-customer #customerOrgSplitChart .product-donut-rd-bar > span, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-bar > span, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-bar > span, #view-organization #orgShareDonut .product-donut-rd-bar > span, #view-organization #orgManagerLoadChart .product-donut-rd-bar > span {
      display: block;
      height: 100%;
      border-radius: 999px;
      min-width: 2px;
      transition: width 0.35s ease;
    }
    #view-product #productDonut .product-donut-rd-pct, #view-service-type #stDonut .product-donut-rd-pct, #view-customer #customerShareDonut .product-donut-rd-pct, #view-customer #customerOrgSplitChart .product-donut-rd-pct, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd-pct, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd-pct, #view-organization #orgShareDonut .product-donut-rd-pct, #view-organization #orgManagerLoadChart .product-donut-rd-pct {
      flex: 0 0 44px;
      width: 44px;
      text-align: right;
      font-size: 14px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: var(--muted);
    }
    /* 제품 대분류 비중 도넛 — 범례 폭·행·라벨-값 간격 축소 (#productDonut만, 매출유형 #stDonut 제외) */
    #view-product #productDonut .product-donut-redesign {
      gap: 6px;
    }
    #view-product #productDonut .product-donut-rd__legend {
      max-width: min(228px, 42%);
      gap: 4px;
      padding: 2px 0 2px 1px;
    }
    #view-product #productDonut .product-donut-rd-row {
      padding: 3px 5px;
      gap: 5px;
      border-radius: 8px;
    }
    #view-product #productDonut .product-donut-rd-swatch {
      flex: 0 0 10px;
      width: 10px;
      height: 10px;
      border-radius: 2px;
    }
    #view-product #productDonut .product-donut-rd-row__mid {
      gap: 4px;
    }
    #view-product #productDonut .product-donut-rd-row__line1 {
      gap: 5px;
    }
    #view-product #productDonut .product-donut-rd-label {
      font-size: 13px;
    }
    #view-product #productDonut .product-donut-rd-amt {
      font-size: 12px;
    }
    #view-product #productDonut .product-donut-rd-pct {
      flex: 0 0 38px;
      width: 38px;
      font-size: 13px;
    }
    #view-product #productDonut .product-donut-rd-bar {
      height: 5px;
    }
    @media (max-width: 640px) {
      #view-product #productDonut .product-donut-redesign, #view-service-type #stDonut .product-donut-redesign, #view-organization #orgShareDonut .product-donut-redesign, #view-organization #orgManagerLoadChart .product-donut-redesign {
        flex-direction: column;
        align-items: stretch;
      }
      #view-customer #customerShareDonut .product-donut-redesign, #view-customer #customerOrgSplitChart .product-donut-redesign, #view-report-admin2 #admin2ChartCustomerMix .product-donut-redesign, #view-report-admin2 #admin2ChartOrgShare .product-donut-redesign {
        flex-direction: column;
        align-items: center;
      }
      #view-product #productDonut .product-donut-rd__viz, #view-service-type #stDonut .product-donut-rd__viz, #view-customer #customerShareDonut .product-donut-rd__viz, #view-customer #customerOrgSplitChart .product-donut-rd__viz, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__viz, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__viz, #view-organization #orgShareDonut .product-donut-rd__viz, #view-organization #orgManagerLoadChart .product-donut-rd__viz {
        width: min(260px, 88%);
        max-width: none;
        margin: 0 auto;
      }
      #view-product #productDonut .product-donut-rd__legend {
        max-width: none;
      }
    }

    /* 거래처 비중: max-content 쓰면 % 폭 기준이 붕괴해 도넛·cqw 글자가 깨짐 → 100% + 묶음만 center */
    #view-customer .customer-row-1 #customerShareDonut .product-donut-redesign {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      justify-content: center;
    }

    /* 통일 KPI 카드 — 스케일은 :root --kpi-* 토큰 */
    #view-product .product-kpi-strip,
    #view-service-type #stKpiStrip.product-kpi-strip,
    #customerTatDetailModal .customer-tat-detail-kpis {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: var(--kpi-strip-gap);
      margin-top: 6px;
      flex-wrap: unset;
      align-items: stretch;
    }
    @media (max-width: 1180px) {
      #view-product .product-kpi-strip,
      #view-service-type #stKpiStrip.product-kpi-strip,
      #customerTatDetailModal .customer-tat-detail-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 720px) {
      #view-product .product-kpi-strip,
      #view-service-type #stKpiStrip.product-kpi-strip,
      #customerTatDetailModal .customer-tat-detail-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 520px) {
      #view-product .product-kpi-strip,
      #view-service-type #stKpiStrip.product-kpi-strip,
      #customerTatDetailModal .customer-tat-detail-kpis { grid-template-columns: 1fr; }
    }

    .mini-kpi-card,
    #view-product .product-kpi-card,
    #view-service-type .product-kpi-card {
      position: relative;
      display: grid;
      grid-template-columns: var(--kpi-grid-col-emoji) minmax(0, 1fr);
      gap: var(--kpi-grid-gap-row) var(--kpi-grid-gap-col);
      align-items: start;
      padding: var(--kpi-card-pad-y) var(--kpi-card-pad-x) var(--kpi-card-pad-y) var(--kpi-card-pad-left);
      border-radius: var(--kpi-card-radius);
      border: 1px solid color-mix(in srgb, var(--kpi-accent, var(--primary)) 28%, var(--line-2));
      background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--kpi-accent, var(--primary)) 14%, var(--panel-surface)) 0%,
        var(--panel-surface) 48%,
        color-mix(in srgb, var(--kpi-accent, var(--primary)) 6%, var(--panel)) 100%
      );
      box-shadow:
        0 1px 0 color-mix(in srgb, white 55%, transparent),
        0 4px 14px rgba(15, 23, 42, 0.06);
      overflow: hidden;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }
    .mini-kpi-card:hover,
    #view-product .product-kpi-card:hover,
    #view-service-type .product-kpi-card:hover {
      transform: translateY(-2px);
      box-shadow:
        0 2px 0 color-mix(in srgb, white 40%, transparent),
        0 8px 20px rgba(15, 23, 42, 0.09);
    }
    .mini-kpi-card::before,
    #view-product .product-kpi-card::before,
    #view-service-type .product-kpi-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: var(--kpi-accent-bar-inset);
      bottom: var(--kpi-accent-bar-inset);
      width: 4px;
      border-radius: 0 6px 6px 0;
      background: linear-gradient(180deg, var(--kpi-accent, var(--primary)), color-mix(in srgb, var(--kpi-accent, var(--primary)) 45%, var(--panel)));
      box-shadow: 0 0 12px color-mix(in srgb, var(--kpi-accent, var(--primary)) 35%, transparent);
    }
    .mini-kpi-card--1,
    #view-product .product-kpi-card--1,
    #view-service-type .product-kpi-card--1 { --kpi-accent: #2563eb; }
    .mini-kpi-card--2,
    #view-product .product-kpi-card--2,
    #view-service-type .product-kpi-card--2 { --kpi-accent: #0d9488; }
    .mini-kpi-card--3,
    #view-product .product-kpi-card--3,
    #view-service-type .product-kpi-card--3 { --kpi-accent: #7c3aed; }
    .mini-kpi-card--4,
    #view-product .product-kpi-card--4,
    #view-service-type .product-kpi-card--4 { --kpi-accent: #ea580c; }
    .mini-kpi-card--5,
    #view-product .product-kpi-card--5,
    #view-service-type .product-kpi-card--5 { --kpi-accent: #db2777; }
    .mini-kpi-card--6,
    #view-product .product-kpi-card--6,
    #view-service-type .product-kpi-card--6 { --kpi-accent: #ca8a04; }
    .mini-kpi-card--7 { --kpi-accent: #2563eb; }
    .mini-kpi-card--8 { --kpi-accent: #0d9488; }
    .mini-kpi-card--alert,
    #view-product .product-kpi-card--alert,
    #view-service-type .product-kpi-card--alert {
      border-color: color-mix(in srgb, var(--warn) 42%, var(--line-2));
      background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--warn) 16%, var(--panel-surface)),
        var(--panel-surface) 55%,
        color-mix(in srgb, var(--warn) 8%, var(--panel))
      );
    }
    .mini-kpi-card--alert::before,
    #view-product .product-kpi-card--alert::before,
    #view-service-type .product-kpi-card--alert::before {
      background: linear-gradient(180deg, var(--warn), color-mix(in srgb, var(--warn) 50%, var(--panel)));
      box-shadow: 0 0 14px color-mix(in srgb, var(--warn) 42%, transparent);
    }
    .mini-kpi-card__emoji,
    #view-product .product-kpi-card__emoji,
    #view-service-type .product-kpi-card__emoji {
      align-self: start;
      width: var(--kpi-emoji-box);
      height: var(--kpi-emoji-box);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: var(--kpi-emoji-fs);
      line-height: 1;
      border-radius: var(--kpi-emoji-radius);
      background: color-mix(in srgb, var(--kpi-accent, var(--primary)) 18%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--kpi-accent, var(--primary)) 28%, var(--line-2));
      box-shadow: inset 0 1px 0 color-mix(in srgb, white 30%, transparent);
    }
    .mini-kpi-card--alert .mini-kpi-card__emoji,
    #view-product .product-kpi-card--alert .product-kpi-card__emoji,
    #view-service-type .product-kpi-card--alert .product-kpi-card__emoji {
      background: color-mix(in srgb, var(--warn) 22%, var(--panel));
      border-color: color-mix(in srgb, var(--warn) 35%, var(--line-2));
    }
    .mini-kpi-card__body,
    #view-product .product-kpi-card__body,
    #view-service-type .product-kpi-card__body {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }
    /* 2행: 부가설명 + 값 한 줄(줄바꿈 시 래핑), 값 강조 */
    .mini-kpi-card__row2 {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px 10px;
      min-width: 0;
    }
    .mini-kpi-card__label,
    #view-product .product-kpi-card__label,
    #view-service-type .product-kpi-card__label {
      font-size: var(--kpi-label-fs);
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--text);
      line-height: var(--kpi-label-lh);
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
    }
    .mini-kpi-card__value,
    #view-product .product-kpi-card__value,
    #view-service-type .product-kpi-card__value {
      display: block;
      font-size: var(--kpi-value-fs);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
      line-height: var(--kpi-value-lh);
      margin: 0;
      word-break: break-word;
    }
    .mini-kpi-card__sub,
    #view-product .product-kpi-card__sub,
    #view-service-type .product-kpi-card__sub {
      font-size: var(--kpi-sub-fs);
      font-weight: 600;
      color: var(--muted);
      line-height: var(--kpi-sub-lh);
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      min-height: 0;
    }
    .mini-kpi-card__sub:empty {
      display: none;
    }
    /* row2: 일반 .product-kpi-card__sub 규칙보다 나중에 두어 인라인+큰 값 유지 */
    .mini-kpi-card__row2 .mini-kpi-card__sub,
    .mini-kpi-card__row2 .product-kpi-card__sub,
    #view-product .product-kpi-card .mini-kpi-card__row2 .product-kpi-card__sub,
    #view-service-type .product-kpi-card .mini-kpi-card__row2 .product-kpi-card__sub {
      display: inline !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      color: var(--muted) !important;
      line-height: 1.35 !important;
      overflow: visible !important;
      -webkit-line-clamp: unset !important;
      line-clamp: unset !important;
      -webkit-box-orient: unset !important;
    }
    .mini-kpi-card__row2 .mini-kpi-card__value,
    #view-product .product-kpi-card .mini-kpi-card__row2 .product-kpi-card__value,
    #view-service-type .product-kpi-card .mini-kpi-card__row2 .product-kpi-card__value {
      display: inline !important;
      font-size: clamp(20px, 2.15vw, 26px) !important;
      font-weight: 800 !important;
      color: var(--text) !important;
      line-height: 1.12 !important;
      letter-spacing: -0.04em !important;
    }
    body[data-theme="dark"] .mini-kpi-card,
    body[data-theme="dark"] #view-product .product-kpi-card,
    body[data-theme="dark"] #view-service-type .product-kpi-card {
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
      border-color: color-mix(in srgb, var(--kpi-accent, var(--primary)) 22%, var(--line-2));
    }
    body[data-theme="dark"] .mini-kpi-card:hover,
    body[data-theme="dark"] #view-product .product-kpi-card:hover,
    body[data-theme="dark"] #view-service-type .product-kpi-card:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42);
    }
    body[data-theme="warm"] .mini-kpi-card,
    body[data-theme="warm"] #view-product .product-kpi-card,
    body[data-theme="warm"] #view-service-type .product-kpi-card {
      box-shadow: 0 4px 14px rgba(60, 40, 20, 0.11);
    }

    #view-customer .panel-head h3,
    #view-organization .panel-head h3,
    /* #view-product panel-head h3 — Phase 5 통일 */

    /* ── 매출유형(service-type) 페이지 CSS ── */
    /* #view-service-type panel-head h3 — Phase 5 통일 */
    #view-service-type > .section:first-child { margin-top: 4px; }
    /* 매출유형 · 조직별 믹스 집계 단위 툴바 */
    #view-service-type #stOrgMixLevelToolbar {
      margin-left: auto;
    }

    /* 매출유형 2행: 품목 유형 랭킹(4) · 품목×대분류 매트릭스(8) — 1행 span-4·span-8 과 동일 4:8 */
    #view-service-type .grid.grid--st-rank-matrix {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      align-items: stretch;
    }
    #view-service-type .grid.grid--st-rank-matrix > .panel {
      grid-column: auto;
      min-width: 0;
    }

    /* 매출유형 · 품목명×대분류 교차표(리디자인) */
    :is(#view-service-type #stCrossHeatmap, #stCrossExplainChart).st-cross-matrix {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: min(480px, 54vh);
      overflow: auto;
      padding: 4px 2px 8px;
      -webkit-overflow-scrolling: touch;
    }
    :is(#view-service-type #stCrossHeatmap, #stCrossExplainChart).st-cross-matrix .st-cross-matrix__rows {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 0;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-cross-matrix__intro {
      flex-shrink: 0;
      padding: 10px 12px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--primary) 9%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line-2));
      box-shadow: 0 1px 0 color-mix(in srgb, #fff 55%, transparent) inset;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-cross-matrix__intro-text {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      font-weight: 600;
      color: color-mix(in srgb, var(--text) 90%, var(--muted));
    }
    :is(#view-service-type, #stCrossExplainModal) .st-cross-matrix__header-row .st-matrix-corner {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2px 8px;
      align-content: center;
      min-height: 52px;
      padding: 8px 10px;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-corner__k {
      font-size: 11px;
      font-weight: 800;
      color: var(--table-head-text);
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-corner__sub {
      font-size: 10px;
      font-weight: 700;
      color: color-mix(in srgb, var(--table-head-text) 72%, var(--muted));
    }
    :is(#view-service-type, #stCrossExplainModal) .st-cross-matrix__header-row .st-matrix-col-head {
      text-align: center;
      font-size: 10px;
      line-height: 1.25;
      font-weight: 800;
      padding: 8px 6px;
      border-radius: 8px;
      word-break: break-word;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-row-label {
      --st-row: var(--primary);
      font-weight: 800;
      font-size: 12px;
      line-height: 1.25;
      color: var(--text);
      padding: 6px 8px;
      align-self: stretch;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border-right: 1px solid color-mix(in srgb, var(--line-2) 55%, var(--st-row) 45%);
      background: color-mix(in srgb, var(--panel-surface) 58%, var(--st-row) 42%);
      border-radius: 8px 0 0 8px;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-cell--fill {
      --st-row: var(--primary);
      min-height: 58px;
      border-radius: 10px;
      padding: 7px 8px 6px;
      display: flex;
      flex-direction: column;
      gap: 5px;
      justify-content: center;
      box-sizing: border-box;
      background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--panel) 78%, var(--st-row) 22%) 0%,
        var(--panel) 100%
      );
      border: 1px solid color-mix(in srgb, var(--line-2) 55%, var(--st-row) 45%);
      box-shadow:
        0 1px 0 color-mix(in srgb, #fff 38%, transparent) inset,
        0 4px 14px color-mix(in srgb, var(--text) 5%, transparent);
      align-items: center;
      text-align: center;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-cell__amount {
      font-size: 12px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      line-height: 1.2;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-cell__track {
      width: 100%;
      max-width: 100%;
      align-self: stretch;
      flex-shrink: 0;
      box-sizing: border-box;
      height: 8px;
      border-radius: 99px;
      background: color-mix(in srgb, var(--text) 9%, var(--panel-surface));
      overflow: hidden;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-cell__bar {
      display: block;
      height: 100%;
      min-width: 3px;
      border-radius: 99px;
      background: linear-gradient(90deg, color-mix(in srgb, var(--st-row) 72%, #000), var(--st-row));
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--st-row) 28%, transparent);
      transition: width 0.15s ease-out;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-cell__meta {
      font-size: 10px;
      font-weight: 600;
      color: var(--muted);
      line-height: 1.3;
      text-align: center;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-cell__meta strong {
      color: color-mix(in srgb, var(--st-row) 82%, var(--text));
      font-weight: 800;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-cell--empty {
      --st-row: var(--primary);
      min-height: 58px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: color-mix(in srgb, var(--panel-surface) 88%, var(--st-row) 12%);
      border: 1px dashed color-mix(in srgb, var(--muted) 22%, var(--st-row) 35%);
      color: var(--muted);
    }
    :is(#view-service-type, #stCrossExplainModal) .st-matrix-cell__dash {
      font-weight: 800;
      font-size: 14px;
      opacity: 0.55;
    }
    :is(#view-service-type, #stCrossExplainModal) .st-cross-matrix__foot {
      flex-shrink: 0;
      margin: 0;
      padding-top: 2px;
      border-top: 1px solid var(--line-2);
      font-size: 12px;
      line-height: 1.45;
      color: var(--muted);
    }

    /* 매출유형 1행: 비중(4) + 추이(8) — 추이 카드 전폭 활용 */
    #view-service-type .section > .grid:first-of-type {
      min-height: 460px;
      align-items: stretch;
    }
    #view-service-type .section > .grid:first-of-type > .panel {
      min-height: 0;
    }
    #view-service-type .panel.span-8:has(#stTrendChart) {
      display: flex;
      flex-direction: column;
      min-height: 460px;
      min-width: 0;
      padding-left: 0;
      padding-right: 0;
    }
    #view-service-type .panel.span-8:has(#stTrendChart) .panel-head.org-panel-trend-head {
      padding-left: 12px;
      padding-right: 12px;
    }
    #view-service-type #stTrendChart.chart-box {
      padding-left: 0;
      padding-right: 0;
      padding-top: 2px;
      padding-bottom: 6px;
      border-left: none;
      border-right: none;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
    }
    #view-service-type #stTrendChart {
      flex: 1 1 0;
      min-height: 340px;
      display: flex;
      flex-direction: column;
      min-width: 0;
      overflow: hidden;
    }
    #view-service-type #stTrendChart .line-chart-shell--org-fill {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #view-service-type #stTrendChart .line-chart-shell--plot-only .line-chart-plot-area {
      flex: 1 1 auto;
      min-height: 280px;
      display: flex;
      flex-direction: column;
    }
    #view-service-type #stTrendChart .line-chart-shell--org-fill .line-chart-svg--fill {
      flex: 1 1 auto;
      width: 100%;
      min-height: 260px;
      height: 100%;
      max-height: 100%;
      display: block;
    }
    .st-org-mix-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .st-org-mix-label {
      flex: 0 0 72px;
      font-size: 12px; font-weight: 700;
      color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .st-org-mix-bar {
      flex: 1;
      display: flex;
      height: 14px;
      border-radius: 999px;
      overflow: hidden;
    }
    .st-org-mix-segment {
      height: 100%;
      transition: width 0.3s ease;
    }
    .st-org-mix-total {
      flex: 0 0 52px;
      text-align: right;
      font-size: 11px; font-weight: 700;
      color: var(--muted);
    }
    .product-structure-card {
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 4px 0;
    }
    .product-structure-level {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--panel-surface);
      border: 1px solid var(--line-2);
    }
    .product-structure-level-icon {
      font-size: 18px;
      flex-shrink: 0;
    }
    .product-structure-level-info {
      flex: 1;
      min-width: 0;
    }
    .product-structure-level-label {
      font-size: 11px;
      font-weight: 800;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--muted);
    }
    .product-structure-level-count {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--text);
      line-height: 1.1;
    }
    .product-structure-level-count span {
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0;
    }
    .product-structure-arrow {
      color: var(--muted);
      font-size: 16px;
      text-align: center;
      opacity: 0.5;
    }
    /* TAT 시각화 바 */
    .product-tat-bar-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
    }
    .product-tat-bar-label {
      flex: 0 0 80px;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
    }
    .product-tat-bar-track {
      flex: 1;
      height: 8px;
      border-radius: 999px;
      background: var(--line-2);
      overflow: hidden;
    }
    .product-tat-bar-fill {
      height: 100%;
      border-radius: 999px;
      background: var(--primary);
      transition: width 0.4s ease;
    }
    .product-tat-bar-value {
      flex: 0 0 48px;
      text-align: right;
      color: var(--muted);
      font-weight: 700;
      font-size: 11px;
    }
    /* 제품군별 운영 지표: TAT일당 매출 막대(좌) · 상세 테이블(우) — 바 영역이 패널 높이에 맞게 분배 */
    #view-product .product-tat-split {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
      gap: 10px 14px;
      align-items: stretch;
    }
    #view-product #productTatViz.product-tat-split__gauges {
      display: flex;
      flex-direction: column;
      align-self: stretch;
      height: 100%;
      min-height: 0;
      min-width: 0;
      justify-content: space-between;
      gap: 2px;
    }
    #view-product #productTatViz .product-tat-bar-item {
      flex: 1 1 0;
      min-height: 24px;
      align-items: center;
    }
    #view-product #productTatViz .product-tat-bar-track {
      height: clamp(11px, 2.1vmin, 18px);
      min-height: 11px;
    }
    #view-product #productTatViz .product-tat-bar-label {
      flex: 0 0 min(92px, 34%);
    }
    #view-product .product-tat-split .product-tat-split__table {
      min-width: 0;
      margin-top: 0;
      flex: 1 1 0;
      min-height: 0;
      overflow: auto;
    }
    @media (max-width: 900px) {
      #view-product .product-tat-split {
        grid-template-columns: 1fr;
      }
    }
    /* 집중도 리스크 */
    .product-concentration-viz {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 4px 0;
    }

    #view-organization .org-signal-box,
    #view-organization #orgCustomerMix {
      min-height: 0;
      max-height: min(340px, 40vh);
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding: 10px;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
      align-content: start;
    }
    @media (max-width: 900px) {
      #view-organization #orgCustomerMix { grid-template-columns: 1fr; }
    }
    #view-organization .org-signal-item,
    #view-organization #orgCustomerMix > div.org-signal-item {
      padding: 12px 14px 12px 16px;
      font-size: 13px;
      line-height: 1.45;
      min-width: 0;
      max-width: none;
      border: 1px solid var(--line-2);
      border-radius: 12px;
      background: var(--panel);
      box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 6%, transparent);
      position: relative;
    }
    #view-organization .org-signal-item-head {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 4px;
    }
    #view-organization .org-signal-item-head strong {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 14px;
      font-weight: 800;
      color: var(--text);
    }
    #view-organization .org-signal-idx {
      font-size: 11px;
      font-weight: 800;
      color: var(--muted-2);
    }
    #view-organization .org-signal-chip {
      font-size: 10px;
      font-weight: 800;
      padding: 3px 8px;
      border-radius: 999px;
      letter-spacing: 0.02em;
      flex-shrink: 0;
    }
    #view-organization .org-signal-chip--up {
      background: color-mix(in srgb, var(--ok) 18%, var(--panel));
      color: var(--ok);
      border: 1px solid color-mix(in srgb, var(--ok) 35%, var(--line-2));
    }
    #view-organization .org-signal-chip--down {
      background: color-mix(in srgb, var(--bad) 14%, var(--panel));
      color: var(--bad);
      border: 1px solid color-mix(in srgb, var(--bad) 30%, var(--line-2));
    }
    #view-organization .org-signal-item .mini-note,
    #view-organization #orgCustomerMix .mini-note { margin-top: 6px; font-size: 12px; }
    #view-organization .org-share-panel .org-share-panel-body {
      display: flex;
      align-items: stretch;
      flex: 1 1 0;
      min-height: 0;
      gap: 0;
    }
    #view-organization .org-share-donut-wrap {
      min-height: 300px;
      min-width: 0;
      overflow: hidden;
      flex: 1 1 auto;
    }
    #view-organization #orgShareDonut .donut-wrap {
      grid-template-columns: minmax(130px, 36%) minmax(0, 1fr);
      align-items: start;
      gap: 10px;
      height: 100%;
    }
    #view-organization #orgShareDonut .donut {
      width: min(150px, 100%);
    }
    #view-organization #orgShareDonut .legend {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      margin: 0;
    }
    #view-organization #orgShareDonut .legend-item {
      font-size: 11px;
      gap: 6px;
      padding: 1px 0;
    }
    #view-organization #orgShareDonut .legend-item strong {
      font-size: 11px;
    }
    #view-organization .org-share-panel.panel.span-12 {
      min-height: 420px;
    }

    #view-organization .chart-box.compact:not(.org-signal-box):not(.org-trend-chart-wrap) {
      max-height: min(260px, 32vh);
      overflow: hidden;
    }
    /* 1행 조직별 매출액: 행 높이를 채우도록 compact 높이 제한 제외 */
    #view-organization .org-first-row .org-trend-chart-wrap.chart-box.compact {
      max-height: none;
      min-height: 0;
      flex: 1 1 0;
    }
    /* 하위조직 점유율 · 미매출 담당 비중 — 대분류 비중형 도넛: compact max-height 제외(카드 높이 활용) */
    #view-organization #orgShareDonut.chart-box.compact,
    #view-organization #orgManagerLoadChart.chart-box.compact {
      max-height: none;
      min-height: 280px;
      flex: 1 1 0;
    }
    /* 비중 도넛 공통 — 링 조각 데이터레이블(이름·%): core·링 위, 잘림 방지 */
    #view-organization #orgShareDonut .product-donut-rd__viz.product-donut-rd__viz--slice-labels,
    #view-organization #orgManagerLoadChart .product-donut-rd__viz.product-donut-rd__viz--slice-labels,
    #view-customer #customerShareDonut .product-donut-rd__viz.product-donut-rd__viz--slice-labels, #view-customer #customerOrgSplitChart .product-donut-rd__viz.product-donut-rd__viz--slice-labels, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__viz.product-donut-rd__viz--slice-labels, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__viz.product-donut-rd__viz--slice-labels,
    #view-product #productDonut .product-donut-rd__viz.product-donut-rd__viz--slice-labels,
    #view-service-type #stDonut .product-donut-rd__viz.product-donut-rd__viz--slice-labels {
      overflow: visible;
      z-index: 0;
    }
    #view-organization #orgShareDonut .product-donut-redesign:has(.product-donut-rd__viz--slice-labels),
    #view-organization #orgManagerLoadChart .product-donut-redesign:has(.product-donut-rd__viz--slice-labels),
    #view-customer #customerShareDonut .product-donut-redesign:has(.product-donut-rd__viz--slice-labels), #view-customer #customerOrgSplitChart .product-donut-redesign:has(.product-donut-rd__viz--slice-labels), #view-report-admin2 #admin2ChartCustomerMix .product-donut-redesign:has(.product-donut-rd__viz--slice-labels), #view-report-admin2 #admin2ChartOrgShare .product-donut-redesign:has(.product-donut-rd__viz--slice-labels),
    #view-product #productDonut .product-donut-redesign:has(.product-donut-rd__viz--slice-labels),
    #view-service-type #stDonut .product-donut-redesign:has(.product-donut-rd__viz--slice-labels) {
      overflow: visible;
    }
    #view-organization #orgShareDonut.chart-box.compact.org-share-donut-wrap {
      overflow: visible;
    }
    #view-organization .org-share-panel--redesign .org-share-donut-wrap.chart-box {
      overflow: visible !important;
    }
    #view-organization .org-share-panel--redesign .org-share-panel-body:has(#orgShareDonut) {
      overflow: visible !important;
    }
    #view-organization .org-share-panel--redesign.org-row2-col1:has(#orgShareDonut) {
      overflow: visible !important;
    }
    #view-organization #orgShareDonut .product-donut-rd__slice-svg,
    #view-organization #orgManagerLoadChart .product-donut-rd__slice-svg,
    #view-customer #customerShareDonut .product-donut-rd__slice-svg, #view-customer #customerOrgSplitChart .product-donut-rd__slice-svg, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__slice-svg, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__slice-svg,
    #view-product #productDonut .product-donut-rd__slice-svg,
    #view-service-type #stDonut .product-donut-rd__slice-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
      pointer-events: none;
      overflow: visible;
    }
    #view-organization #orgShareDonut .product-donut-rd__slice-text,
    #view-organization #orgManagerLoadChart .product-donut-rd__slice-text,
    #view-customer #customerShareDonut .product-donut-rd__slice-text, #view-customer #customerOrgSplitChart .product-donut-rd__slice-text, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__slice-text, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__slice-text,
    #view-product #productDonut .product-donut-rd__slice-text,
    #view-service-type #stDonut .product-donut-rd__slice-text {
      font-family: system-ui, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
      font-weight: 800;
    }
    #view-organization #orgShareDonut .product-donut-rd__slice-name,
    #view-organization #orgManagerLoadChart .product-donut-rd__slice-name,
    #view-customer #customerShareDonut .product-donut-rd__slice-name, #view-customer #customerOrgSplitChart .product-donut-rd__slice-name, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__slice-name, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__slice-name,
    #view-product #productDonut .product-donut-rd__slice-name,
    #view-service-type #stDonut .product-donut-rd__slice-name {
      font-size: 4.35px;
      fill: #fff;
      paint-order: stroke fill;
      stroke: rgba(0, 0, 0, 0.42);
      stroke-width: 0.45px;
    }
    #view-organization #orgShareDonut .product-donut-rd__slice-pct,
    #view-organization #orgManagerLoadChart .product-donut-rd__slice-pct,
    #view-customer #customerShareDonut .product-donut-rd__slice-pct, #view-customer #customerOrgSplitChart .product-donut-rd__slice-pct, #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__slice-pct, #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__slice-pct,
    #view-product #productDonut .product-donut-rd__slice-pct,
    #view-service-type #stDonut .product-donut-rd__slice-pct {
      font-size: 3.9px;
      fill: rgba(255, 255, 255, 0.98);
      paint-order: stroke fill;
      stroke: rgba(0, 0, 0, 0.38);
      stroke-width: 0.35px;
    }
    body[data-theme="dark"] #view-organization #orgShareDonut .product-donut-rd__slice-name,
    body[data-theme="dark"] #view-organization #orgShareDonut .product-donut-rd__slice-pct,
    body[data-theme="dark"] #view-organization #orgManagerLoadChart .product-donut-rd__slice-name,
    body[data-theme="dark"] #view-organization #orgManagerLoadChart .product-donut-rd__slice-pct,
    body[data-theme="dark"] #view-customer #customerShareDonut .product-donut-rd__slice-name, body[data-theme="dark"] #view-customer #customerOrgSplitChart .product-donut-rd__slice-name, body[data-theme="dark"] #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__slice-name, body[data-theme="dark"] #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__slice-name,
    body[data-theme="dark"] #view-customer #customerShareDonut .product-donut-rd__slice-pct, body[data-theme="dark"] #view-customer #customerOrgSplitChart .product-donut-rd__slice-pct,
    body[data-theme="dark"] #view-report-admin2 #admin2ChartCustomerMix .product-donut-rd__slice-pct, body[data-theme="dark"] #view-report-admin2 #admin2ChartOrgShare .product-donut-rd__slice-pct,
    body[data-theme="dark"] #view-product #productDonut .product-donut-rd__slice-name,
    body[data-theme="dark"] #view-product #productDonut .product-donut-rd__slice-pct,
    body[data-theme="dark"] #view-service-type #stDonut .product-donut-rd__slice-name,
    body[data-theme="dark"] #view-service-type #stDonut .product-donut-rd__slice-pct {
      stroke: rgba(0, 0, 0, 0.58);
    }
    #view-organization .record-table {
      max-height: min(320px, 40vh);
    }
    #view-organization .heat-grid {
      max-height: min(360px, 44vh);
      overflow-y: auto;
      overflow-x: auto;
      overscroll-behavior: contain;
    }
    #view-organization .panel .panel-head {
      padding-bottom: 6px;
      margin-bottom: 4px;
    }
    #view-organization .org-panel-trend-head,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-panel-trend-head,
    #view-customer .customer-trend-panel .org-panel-trend-head,
    #view-product .panel.span-8:has(#productTrendChart) .org-panel-trend-head {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px 10px;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
    }
    #view-organization .org-panel-trend-head h3,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-panel-trend-head h3,
    #view-customer .customer-trend-panel .org-panel-trend-head h3,
    #view-product .panel.span-8:has(#productTrendChart) .org-panel-trend-head h3 {
      flex-shrink: 0;
      margin: 0;
    }
    #view-organization .org-panel-trend-head .meta,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-panel-trend-head .meta,
    #view-customer .customer-trend-panel .org-panel-trend-head .meta,
    #view-product .panel.span-8:has(#productTrendChart) .org-panel-trend-head .meta {
      flex-shrink: 0;
      white-space: nowrap;
    }
    #view-organization .org-trend-legend-host,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-trend-legend-host,
    #view-customer .customer-trend-panel .org-trend-legend-host,
    #view-product .panel.span-8:has(#productTrendChart) .org-trend-legend-host {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      overflow: hidden;
    }
    #view-organization .org-trend-legend-host .legend-wrap,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-trend-legend-host .legend-wrap,
    #view-customer .customer-trend-panel .org-trend-legend-host .legend-wrap,
    #view-product .panel.span-8:has(#productTrendChart) .org-trend-legend-host .legend-wrap {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      min-width: 0;
      max-width: 100%;
    }
    #view-organization .org-trend-legend-host .legend,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-trend-legend-host .legend,
    #view-customer .customer-trend-panel .org-trend-legend-host .legend,
    #view-product .panel.span-8:has(#productTrendChart) .org-trend-legend-host .legend {
      display: flex;
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 4px 8px;
      margin: 0;
      padding: 0;
    }
    #view-organization .org-panel-trend-head .org-compare-period-toolbar,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-panel-trend-head .org-compare-period-toolbar,
    #view-customer .customer-trend-panel .org-panel-trend-head .org-compare-period-toolbar,
    #view-product .panel.span-8:has(#productTrendChart) .org-panel-trend-head .org-compare-period-toolbar {
      flex-shrink: 0;
      margin-left: 0;
    }
    #view-product .panel.span-8:has(#productTrendChart) .org-panel-trend-head .product-trend-gran-host,
    #view-customer .customer-trend-panel:has(#customerTrendChart) .org-panel-trend-head .product-trend-gran-host,
    #view-organization .org-panel-trend:has(#orgRateTrendChart) .org-panel-trend-head .product-trend-gran-host,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-panel-trend-head .product-trend-gran-host {
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
    #view-organization .org-trend-viz-switcher-host,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-trend-viz-switcher-host,
    #view-customer .customer-trend-panel .org-trend-viz-switcher-host,
    #view-product .panel.span-8:has(#productTrendChart) .org-trend-viz-switcher-host {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    #view-organization .org-trend-viz-switcher-host .chart-viz-switcher,
    #view-service-type .panel.span-8:has(#stTrendChart) .org-trend-viz-switcher-host .chart-viz-switcher,
    #view-customer .customer-trend-panel .org-trend-viz-switcher-host .chart-viz-switcher,
    #view-product .panel.span-8:has(#productTrendChart) .org-trend-viz-switcher-host .chart-viz-switcher {
      justify-content: flex-end;
      flex-wrap: wrap;
      gap: 4px;
    }

    .org-level-picker-wrap {
      margin-bottom: 10px;
    }
    #view-organization .section-title.org-title-one-line {
      flex-wrap: nowrap;
      align-items: center;
      gap: 16px;
    }
    /* 키커는 위 줄, 「조직 성과와 효율」+ 필터 기준 메타는 아래 한 줄(줄바꿈 없음) */
    #view-organization .section-title.org-title-one-line .org-title-main {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      gap: 0.75rem;
      min-width: 0;
    }
    #view-organization .section-title.org-title-one-line .org-title-row {
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: baseline;
      gap: 0.45em;
      min-width: 0;
      max-width: 100%;
    }
    #view-organization .section-title.org-title-one-line .section-kicker {
      white-space: nowrap;
      flex-shrink: 0;
    }
    #view-organization .section-title.org-title-one-line .org-title-row h2 {
      flex: 0 0 auto;
      min-width: 0;
      white-space: nowrap;
    }
    #view-organization .section-title.org-title-one-line .org-title-row .meta {
      flex: 0 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #view-organization .section-title.org-title-one-line > div:first-child {
      flex-shrink: 0;
      min-width: 0;
    }
    #view-organization .section-title.org-title-one-line .org-level-picker-wrap {
      margin-bottom: 0;
      flex-shrink: 0;
    }
    #view-organization .section-title.org-title-one-line > p {
      flex: 1;
      min-width: 0;
      margin: 0;
      text-align: right;
    }
    #view-customer .section-title.customer-title-one-line {
      flex-wrap: nowrap;
      align-items: center;
      gap: 16px;
    }
    #view-customer .section-title.customer-title-one-line > div:first-child {
      flex-shrink: 0;
      min-width: 0;
    }
    #view-customer .section-title.customer-title-one-line .search-inline {
      flex-shrink: 0;
      margin-bottom: 0;
    }
    #view-customer .section-title.customer-title-one-line .search-inline input {
      min-width: 180px;
    }
    #view-customer .section-title.customer-title-one-line > p {
      flex: 1;
      min-width: 0;
      margin: 0;
      text-align: right;
    }
    #view-product .section-title.product-title-one-line {
      flex-wrap: nowrap;
      align-items: center;
      gap: 16px;
    }
    #view-product .section-title.product-title-one-line > div:first-child {
      flex-shrink: 0;
      min-width: 0;
    }
    #view-product .section-title.product-title-one-line .search-inline {
      flex-shrink: 0;
      margin-bottom: 0;
    }
    #view-product .section-title.product-title-one-line .search-inline input {
      min-width: 220px;
    }
    #view-product .section-title.product-title-one-line > p {
      flex: 1;
      min-width: 0;
      margin: 0;
      text-align: right;
    }
    .org-level-picker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
    }
    .org-level-picker select {
      padding: 6px 10px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: var(--panel);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }

    #view-organization .org-four-rows {
      gap: 0;
      grid-auto-rows: minmax(340px, auto);
      align-items: stretch;
    }
    #view-organization .org-four-rows .org-first-row {
      grid-column: 1 / -1;
      display: grid;
      grid-template-columns: 6fr 4fr;
      gap: 0;
      min-height: 468px;
      align-items: stretch;
    }
    #view-organization .org-four-rows .org-first-row .panel {
      min-height: 468px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #view-organization .org-four-rows .org-first-row .org-trend-chart-wrap {
      flex: 1 1 0;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    /* 조직별 매출액: 제품·거래처·매출유형 추이와 동일 — 플롯·X축이 잘리지 않도록 최소 높이·플렉스 */
    #view-organization .org-four-rows .org-first-row #orgRateTrendChart {
      flex: 1 1 0;
      min-height: 320px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    #view-organization #orgRateTrendChart .line-chart-shell--org-fill {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #view-organization #orgRateTrendChart .line-chart-shell--plot-only .line-chart-plot-area {
      flex: 1 1 auto;
      min-height: 280px;
      display: flex;
      flex-direction: column;
    }
    #view-organization #orgRateTrendChart .line-chart-shell--org-fill .line-chart-svg--fill {
      flex: 1 1 auto;
      width: 100%;
      min-height: 260px;
      height: 100%;
      max-height: 100%;
      display: block;
    }
    #view-organization .org-four-rows #orgInvestmentChart .line-chart-shell--org-fill {
      flex: 1 1 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #view-organization .org-four-rows .line-chart-shell--org-fill .line-chart-svg--fill {
      flex: 1 1 auto;
      width: 100%;
      min-height: 200px;
      height: 100%;
      max-height: 100%;
      display: block;
    }
    #view-organization .org-first-row .line-chart-shell--org-fill .line-chart-svg--fill {
      min-height: 240px;
    }
    #view-organization .org-four-rows .panel.span-12 {
      min-height: 468px;
    }
    /* 성장/하락 시그널 · 거래처 TOP10 · 전체 거래처: 화면 비표시(DOM 유지 → 맞춤 리포트 복제용) */
    #view-organization .org-signals-panel,
    #view-organization .org-top-customer-panel,
    #view-organization .org-all-customers-panel {
      display: none !important;
    }
    #view-organization .org-four-rows .panel.span-12 .chart-box.compact,
    #view-organization .org-four-rows .panel.span-12 #orgInvestmentChart {
      min-height: 380px;
      flex: 1 1 0;
      display: flex;
      flex-direction: column;
      min-width: 0;
    }
    #view-organization .org-four-rows .panel {
      padding: 8px 10px;
      min-height: 0;
      height: 100%;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #view-organization .org-four-rows .panel-head {
      padding-bottom: 4px;
      margin-bottom: 4px;
      flex-shrink: 0;
    }
    #view-organization .org-four-rows .panel-head h3 {
      font-size: 15px;
      font-weight: 800;
    }
    #view-organization .org-four-rows .panel-head .meta {
      font-size: 12px;
    }
    #view-organization .org-four-rows .record-table {
      flex: 1 1 0;
      min-height: 0;
      overflow-y: auto;
      overflow-x: auto;
      font-size: 13px;
    }
    #view-organization .org-four-rows .record-table th,
    #view-organization .org-four-rows .record-table td {
      padding: 6px 8px;
    }
    #view-organization .org-panel-compare .record-table {
      --org-compare-wrap-bg: linear-gradient(180deg, color-mix(in srgb, var(--panel-surface) 94%, transparent), color-mix(in srgb, var(--panel) 88%, transparent));
      --org-compare-wrap-border: color-mix(in srgb, var(--panel-border) 76%, var(--line-soft));
      --org-compare-head-fill: linear-gradient(180deg, color-mix(in srgb, var(--table-head-bg) 88%, white), color-mix(in srgb, var(--table-head-bg) 100%, var(--panel-surface)));
      --org-compare-row-fill: color-mix(in srgb, var(--panel-surface) 92%, var(--panel));
      --org-compare-row-alt: color-mix(in srgb, var(--accent-soft) 10%, var(--panel-surface));
      --org-compare-row-hover: color-mix(in srgb, var(--accent-soft) 24%, var(--panel-surface));
      --org-compare-pill-bg: color-mix(in srgb, var(--panel-surface) 72%, var(--accent-soft) 28%);
      --org-compare-pill-border: color-mix(in srgb, var(--panel-border) 62%, var(--line-soft));
      --org-compare-pill-text: var(--table-head-text);
      box-sizing: border-box;
      flex: 1 1 0;
      min-height: 0;
      width: 100%;
      align-self: stretch;
      padding: 8px;
      padding-bottom: 14px;
      border-radius: 18px;
      background: var(--org-compare-wrap-bg) !important;
      border: 1px solid var(--org-compare-wrap-border);
      overflow-x: auto;
      /* tbody에 max-height:%를 두면 테이블(display:block) 높이 해석이 어긋나 하단이 잘림 → 이 박스만 스크롤 */
      overflow-y: auto;
      overscroll-behavior-y: contain;
      scrollbar-gutter: stable;
      max-height: none;
    }
    body[data-theme="dark"] #view-organization .org-panel-compare .record-table {
      --org-compare-wrap-bg: linear-gradient(180deg, color-mix(in srgb, var(--panel-surface) 96%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
      --org-compare-wrap-border: color-mix(in srgb, var(--panel-border) 84%, var(--line-soft));
      --org-compare-head-fill: linear-gradient(180deg, color-mix(in srgb, var(--table-head-bg) 94%, transparent), color-mix(in srgb, var(--panel) 78%, transparent));
      --org-compare-row-fill: color-mix(in srgb, var(--panel-surface) 96%, var(--panel));
      --org-compare-row-alt: color-mix(in srgb, var(--accent-soft) 12%, var(--panel-surface));
      --org-compare-row-hover: color-mix(in srgb, var(--accent-soft) 22%, var(--panel-surface));
    }
    body[data-theme="warm"] #view-organization .org-panel-compare .record-table {
      --org-compare-row-alt: color-mix(in srgb, var(--accent-soft) 15%, var(--panel-surface));
      --org-compare-row-hover: color-mix(in srgb, var(--accent-soft-2) 18%, var(--panel-surface));
    }
    /* 바깥 .record-table 스크롤. 전역 .record-table:has(>table:only-child) 가 table{display:block}+tbody{display:flex} 를 써 열 정렬이 깨짐 → org-compare만 표 모델로 덮어씀 */
    #view-organization .org-panel-compare .record-table > table.org-compare-table {
      display: table !important;
      width: 100%;
      min-width: 100%;
      table-layout: fixed !important;
      border-collapse: separate !important;
      border-spacing: 0 4px;
      font-size: 12px;
    }
    #view-organization .org-panel-compare .record-table > table.org-compare-table thead {
      display: table-header-group !important;
    }
    #view-organization .org-panel-compare .record-table > table.org-compare-table tbody {
      display: table-row-group !important;
      max-height: none !important;
      overflow: visible !important;
      flex-direction: unset !important;
      gap: unset !important;
      padding: 0 !important;
      scroll-snap-type: none !important;
      scrollbar-gutter: auto !important;
    }
    #view-organization .org-panel-compare .record-table > table.org-compare-table tbody tr {
      display: table-row !important;
      width: auto !important;
      table-layout: auto !important;
      flex-shrink: unset !important;
      scroll-snap-align: unset !important;
    }
    #view-organization .org-panel-compare .org-compare-table thead th:nth-child(1),
    #view-organization .org-panel-compare .org-compare-table tbody td:nth-child(1) { width: 24%; }
    #view-organization .org-panel-compare .org-compare-table thead th:nth-child(2),
    #view-organization .org-panel-compare .org-compare-table tbody td:nth-child(2) { width: 16%; }
    #view-organization .org-panel-compare .org-compare-table thead th:nth-child(3),
    #view-organization .org-panel-compare .org-compare-table tbody td:nth-child(3) { width: 16%; }
    #view-organization .org-panel-compare .org-compare-table thead th:nth-child(4),
    #view-organization .org-panel-compare .org-compare-table tbody td:nth-child(4) { width: 14%; }
    #view-organization .org-panel-compare .org-compare-table thead th:nth-child(5),
    #view-organization .org-panel-compare .org-compare-table tbody td:nth-child(5) { width: 12%; }
    #view-organization .org-panel-compare .org-compare-table thead th:nth-child(6),
    #view-organization .org-panel-compare .org-compare-table tbody td:nth-child(6) { width: 18%; }
    #view-organization .org-panel-compare .org-compare-table col.org-compare-col-unit { width: 24%; }
    #view-organization .org-panel-compare .org-compare-table col.org-compare-col-prev { width: 16%; }
    #view-organization .org-panel-compare .org-compare-table col.org-compare-col-current { width: 16%; }
    #view-organization .org-panel-compare .org-compare-table col.org-compare-col-yoy { width: 14%; }
    #view-organization .org-panel-compare .org-compare-table col.org-compare-col-head { width: 12%; }
    #view-organization .org-panel-compare .org-compare-table col.org-compare-col-percap { width: 18%; }
    #view-organization .org-compare-period-toolbar {
      margin-left: auto;
    }
    #view-organization .org-panel-compare .org-compare-table thead th {
      position: sticky !important;
      top: 0 !important;
      z-index: 2;
      padding: 7px 6px !important;
      background: var(--org-compare-head-fill) !important;
      color: var(--table-head-text) !important;
      border-top: 1px solid var(--org-compare-wrap-border) !important;
      border-bottom: 1px solid var(--org-compare-wrap-border) !important;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-align: center !important;
      box-shadow: 0 1px 0 color-mix(in srgb, var(--line-2) 85%, transparent);
    }
    #view-organization .org-panel-compare .org-compare-table thead th:first-child {
      border-left: 1px solid var(--org-compare-wrap-border) !important;
      border-radius: 12px 0 0 12px;
    }
    #view-organization .org-panel-compare .org-compare-table thead th:last-child {
      border-right: 1px solid var(--org-compare-wrap-border) !important;
      border-radius: 0 12px 12px 0;
    }
    #view-organization .org-panel-compare .org-compare-table tbody td {
      padding: 4px 6px !important;
      vertical-align: middle;
      text-align: center !important;
      border-top: 1px solid var(--org-compare-wrap-border) !important;
      border-bottom: 1px solid var(--org-compare-wrap-border) !important;
      background: var(--org-compare-row-fill) !important;
      color: var(--text) !important;
    }
    #view-organization .org-panel-compare .org-compare-table tbody tr:nth-child(even) td {
      background: var(--org-compare-row-alt) !important;
    }
    #view-organization .org-panel-compare .org-compare-table tbody tr:hover td {
      background: var(--org-compare-row-hover) !important;
    }
    #view-organization .org-panel-compare .org-compare-table tbody td:first-child {
      border-left: 1px solid var(--org-compare-wrap-border) !important;
      border-radius: 12px 0 0 12px;
    }
    #view-organization .org-panel-compare .org-compare-table tbody td:last-child {
      border-right: 1px solid var(--org-compare-wrap-border) !important;
      border-radius: 0 12px 12px 0;
    }
    #view-organization .org-panel-compare .org-compare-cell {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      width: 100%;
    }
    #view-organization .org-panel-compare .org-compare-cell-text {
      display: block;
      width: 100%;
      margin: 0 auto;
      line-height: 1.18;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #view-organization .org-panel-compare .org-compare-unit .org-compare-cell-text {
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      max-height: 2.2em;
      line-height: 1.12;
      font-weight: 700;
    }
    #view-organization .org-panel-compare .org-compare-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 22px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid var(--org-compare-pill-border);
      background: var(--org-compare-pill-bg);
      color: var(--org-compare-pill-text);
      font-size: 11px;
      font-weight: 800;
      line-height: 1;
      white-space: nowrap;
    }
    #view-organization .org-panel-compare .org-compare-pill.is-good {
      background: color-mix(in srgb, var(--ok) 14%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--ok) 34%, var(--org-compare-pill-border));
      color: color-mix(in srgb, var(--ok) 82%, var(--text));
    }
    #view-organization .org-panel-compare .org-compare-pill.is-bad {
      background: color-mix(in srgb, var(--bad) 12%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--bad) 34%, var(--org-compare-pill-border));
      color: color-mix(in srgb, var(--bad) 82%, var(--text));
    }
    #view-organization .org-panel-compare .org-compare-pill.is-neutral {
      background: color-mix(in srgb, var(--table-head-bg) 72%, var(--panel-surface));
      color: var(--table-head-text);
    }
    #view-organization .org-panel-compare .org-compare-pill.is-accent {
      background: color-mix(in srgb, var(--accent) 12%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--accent) 34%, var(--org-compare-pill-border));
      color: color-mix(in srgb, var(--accent) 82%, var(--text));
    }
    /* 2~6열(작년·올해·성장률·인원·인당): 1열 조직명은 기존 유지 */
    #view-organization .org-panel-compare .org-compare-table thead th:nth-child(n+2):nth-child(-n+6) {
      font-size: 13px !important;
      letter-spacing: 0.02em;
    }
    #view-organization .org-panel-compare .org-compare-table tbody td:nth-child(n+2):nth-child(-n+6) .org-compare-pill {
      font-size: 13px !important;
      min-height: 24px;
      padding: 4px 9px;
      line-height: 1.12;
    }
    #view-organization .org-four-rows .chart-box.compact,
    #view-organization .org-four-rows .org-signal-box,
    #view-organization .org-four-rows #orgCustomerMix {
      flex: 1 1 0;
      min-height: 0;
      max-height: none;
      overflow: hidden;
    }
    #view-organization .org-four-rows .chart-box.compact > div,
    #view-organization .org-four-rows .org-signal-box > div {
      min-height: 0;
      height: 100%;
    }
    #view-organization .org-four-rows .heat-grid {
      min-height: 0;
      max-height: none;
      flex: 1 1 0;
    }
    #view-organization .org-four-rows .heatmap-legend {
      margin: 0 0 4px 0;
      font-size: 12px;
    }
    #view-organization .org-four-rows .org-inner-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 6px;
      flex: 1 1 0;
      min-height: 0;
    }
    /* 담당자 업무비중 패널 내부: 12컬럼 무시하고 6:4 직접 지정 */
    #view-organization .org-manager-panel .org-inner-grid {
      grid-template-columns: 6fr 4fr !important;
    }
    #view-organization .org-four-rows .org-inner-grid .record-table {
      min-height: 0;
      overflow: auto;
    }
    #view-organization .org-four-rows .org-panel-trend.panel {
      min-height: 468px;
    }
    #view-organization .org-panel-trend #orgRateTrendChart {
      max-height: none;
    }
    #view-organization .org-panel-trend .chart-card-with-switcher {
      gap: 10px;
      min-height: 0;
    }
    #view-organization .org-panel-trend .chart-viz-body {
      min-height: 0;
    }
    #view-organization .org-panel-trend .chart-viz-body > div {
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
    }
    #view-organization .org-panel-trend .chart-viz-body .line-chart-shell {
      display: grid;
      grid-template-rows: minmax(0, 1fr) auto;
      gap: 8px;
      min-height: 0;
      height: 100%;
    }
    #view-organization .org-panel-trend .chart-viz-body svg {
      min-height: 0;
    }
    #view-organization .org-trend-level-select {
      margin-left: auto;
      height: 28px;
      min-width: 110px;
      border-radius: 999px;
      border: 1px solid var(--line-soft);
      background: color-mix(in srgb, var(--panel-strong) 84%, transparent);
      color: var(--text-2);
      font-size: 11px;
      font-weight: 700;
      padding: 0 12px;
    }
    #view-organization .org-level-picker-wrap {
      margin-left: auto;
    }
    #view-organization .org-four-rows .org-top-customer-panel.panel {
      min-height: 390px;
    }
    #view-organization .org-top-customer-panel #orgTopCustomerShareChart {
      flex: 0 0 192px;
      min-height: 192px;
      max-height: none;
    }
    #view-organization .org-top-customer-panel .chart-card-with-switcher {
      gap: 10px;
    }
    #view-organization .org-top-customer-panel .chart-viz-body {
      min-height: 0;
    }
    #view-organization .org-top-customer-panel .chart-viz-body > div {
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
    }
    #view-organization .org-top-customer-panel #orgTopCustomerShareChart .donut-wrap {
      grid-template-columns: minmax(128px, 30%) minmax(0, 1fr);
      gap: 12px;
      align-items: start;
      align-content: start;
      height: 100%;
    }
    #view-organization .org-top-customer-panel #orgTopCustomerShareChart .donut {
      width: min(148px, 100%);
    }
    #view-organization .org-top-customer-panel #orgTopCustomerShareChart .legend {
      margin: 0;
      gap: 6px;
      align-content: start;
    }
    #view-organization .org-top-customer-panel .record-table {
      min-height: 142px;
      max-height: none;
    }
    #view-organization .org-four-rows .org-investment-panel.panel.span-12 {
      min-height: 500px;
      display: flex;
      flex-direction: column;
    }
    #view-organization .org-investment-panel .panel-head {
      flex-shrink: 0;
    }
    /* 부록: 하단 split(3fr:2fr)과 열을 맞춤 — 좌측에 제목+범례+기간, 우측 열에 서브타이틀(meta) 우정렬 */
    #view-organization .org-investment-panel .panel-head.org-investment-panel-head {
      display: grid !important;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: 12px;
      align-items: center;
      flex-wrap: nowrap !important;
      grid-auto-flow: row;
    }
    #view-organization .org-investment-panel .panel-head.org-investment-panel-head .org-investment-head-left {
      grid-column: 1;
      grid-row: 1;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px 12px;
      min-width: 0;
    }
    #view-organization .org-investment-head-left .panel-head-left {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    #view-organization .org-investment-panel .panel-head.org-investment-panel-head .org-investment-head-left > h3 {
      flex-shrink: 0;
      margin: 0;
      white-space: nowrap;
    }
    #view-organization .org-investment-head-tools {
      flex: 1 1 auto;
      min-width: 0;
    }
    #view-organization .org-investment-head-tools-inner {
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 8px 10px;
      min-width: 0;
    }
    #view-organization .org-investment-head-legend {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
    }
    #view-organization .org-investment-head-legend .legend.org-investment-combo-legend {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 10px;
      margin: 0;
      padding: 0;
    }
    #view-organization .org-investment-head-tools-inner .line-chart-toolbar {
      flex-shrink: 0;
    }
    #view-organization .org-investment-panel .panel-head.org-investment-panel-head > .org-investment-head-right {
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      align-self: center;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: flex-end;
      gap: 10px 12px;
      min-width: 0;
      max-width: 100%;
    }
    #view-organization .org-investment-head-right .meta {
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      text-align: right;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.35;
    }
    #view-organization .org-investment-head-right .org-investment-export-host {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
    }
    .org-investment-split {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: 12px;
      align-items: stretch;
      flex: 1;
      min-height: 0;
    }
    .org-investment-chart-col {
      min-width: 0;
      display: flex;
      flex-direction: column;
      min-height: 300px;
    }
    .org-investment-table-col {
      min-width: 0;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }

    /* 부록 · 인원·투자·매출 — 개발 중(WIP): 본문 약한 블러 + 배경 워터마크 */
    #view-organization .org-investment-panel--wip .org-investment-wip-content {
      position: relative;
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #view-organization .org-investment-panel--wip .org-investment-wip-watermark {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.35em;
      pointer-events: none;
      overflow: hidden;
    }
    #view-organization .org-investment-panel--wip .org-investment-wip-watermark__line {
      font-size: clamp(1.4rem, 4vw, 2.5rem);
      font-weight: 800;
      letter-spacing: 0.1em;
      color: color-mix(in srgb, var(--bad) 72%, var(--muted) 28%);
      opacity: 0.4;
      transform: rotate(-14deg);
      white-space: nowrap;
      text-shadow:
        0 0 0.35em color-mix(in srgb, var(--panel-surface, #fff) 80%, transparent),
        0 1px 2px color-mix(in srgb, var(--text) 10%, transparent);
      user-select: none;
    }
    #view-organization .org-investment-panel--wip .org-investment-wip-watermark__line--alt {
      font-size: clamp(0.72rem, 1.85vw, 1.05rem);
      font-weight: 700;
      letter-spacing: 0.26em;
      color: color-mix(in srgb, var(--warn) 65%, var(--muted) 35%);
      opacity: 0.34;
      transform: rotate(-14deg) translateX(4%);
      text-shadow: 0 0 0.28em color-mix(in srgb, var(--panel-surface, #fff) 78%, transparent);
    }
    #view-organization .org-investment-panel--wip .org-investment-wip-blur-target.org-investment-split {
      position: relative;
      z-index: 0;
      flex: 1;
      min-height: 0;
      filter: blur(1.1px);
      opacity: 0.9;
    }
    #view-organization .org-investment-panel--wip .org-investment-wip-badge {
      display: inline-block;
      margin-left: 0.35em;
      padding: 0.18em 0.62em;
      font-size: 0.62em;
      font-weight: 800;
      letter-spacing: 0.06em;
      vertical-align: 0.2em;
      line-height: 1.2;
      color: #ffffff !important;
      background: #dc2626 !important;
      border-radius: 999px;
      border: 1px solid #b91c1c;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
    }
    body[data-theme="dark"] #view-organization .org-investment-panel--wip .org-investment-wip-badge {
      color: #ffffff !important;
      background: #dc2626 !important;
      border-color: #991b1b;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
    }
    #view-organization .org-investment-panel--wip .panel-head.org-investment-panel-head {
      filter: none;
      opacity: 1;
    }

    /* 다크 테마: 워터마크만 살짝 보강(과한 글로우는 제거) */
    body[data-theme="dark"] #view-organization .org-investment-panel--wip .org-investment-wip-watermark__line {
      opacity: 0.46;
      text-shadow:
        0 0 0.4em rgba(255, 255, 255, 0.12),
        0 1px 3px rgba(0, 0, 0, 0.4);
    }
    body[data-theme="dark"] #view-organization .org-investment-panel--wip .org-investment-wip-watermark__line--alt {
      opacity: 0.38;
      text-shadow: 0 0 0.35em rgba(255, 255, 255, 0.1);
    }

    #view-organization .org-investment-side-table.record-table {
      flex: 1;
      min-height: 0;
      max-height: min(440px, 52vh);
      font-size: 12px;
    }
    #view-organization .org-investment-side-table th,
    #view-organization .org-investment-side-table td {
      padding: 6px 8px;
      white-space: nowrap;
    }

    /* 부록 인원·투자·매출: 우측 좁은 열에서 tbody(display:flex) 분리 패턴이 헤더/데이터 열을 한 칸씩 밀어버리는
       브라우저가 있어, 이 표만 표준 table-row-group 스크롤 + sticky 헤더로 통일 */
    #view-organization .org-investment-side-table.record-table:has(> table:only-child) {
      overflow-x: auto !important;
      overflow-y: auto !important;
    }
    #view-organization .org-investment-side-table.record-table:has(> table:only-child) > table {
      display: table !important;
      width: 100% !important;
      max-width: 100%;
      min-width: 0;
      table-layout: fixed !important;
      border-collapse: separate;
      border-spacing: 0;
    }
    #view-organization .org-investment-side-table.record-table:has(> table:only-child) > table thead {
      display: table-header-group !important;
      width: auto !important;
      table-layout: fixed;
    }
    #view-organization .org-investment-side-table.record-table:has(> table:only-child) > table tbody {
      display: table-row-group !important;
      overflow: visible !important;
      max-height: none !important;
      scrollbar-gutter: auto !important;
      scroll-snap-type: none !important;
    }
    #view-organization .org-investment-side-table.record-table:has(> table:only-child) > table tbody tr {
      display: table-row !important;
      width: auto !important;
      scroll-snap-align: none !important;
    }
    #view-organization .org-investment-side-table.record-table:has(> table:only-child) > table thead th {
      position: sticky !important;
      top: 0;
      z-index: 2;
      background: var(--table-head-bg) !important;
      box-shadow: 0 1px 0 var(--line-2);
    }
    /* colgroup으로 열 폭 단일 정의 → thead/tbody 동일 열 맵 보장 */
    #view-organization .org-investment-side-table .org-investment-data-table col.org-inv-col-label {
      width: 16%;
    }
    #view-organization .org-investment-side-table .org-investment-data-table col.org-inv-col-headcount {
      width: 12%;
    }
    #view-organization .org-investment-side-table .org-investment-data-table col.org-inv-col-investment {
      width: 18%;
    }
    #view-organization .org-investment-side-table .org-investment-data-table col.org-inv-col-utilization {
      width: 14%;
    }
    #view-organization .org-investment-side-table .org-investment-data-table col.org-inv-col-sales {
      width: 20%;
    }
    #view-organization .org-investment-side-table .org-investment-data-table col.org-inv-col-percapita {
      width: 20%;
    }
    .org-investment-combo-shell.line-chart-shell--top-legend .legend {
      margin-top: 0;
    }
    #view-organization .org-investment-chart-col .org-investment-combo-shell {
      flex: 1;
      min-height: 0;
    }
    #view-organization .org-investment-combo-shell--plot-only {
      display: flex;
      flex-direction: column;
      gap: 0;
      min-height: 0;
      flex: 1;
    }
    #view-organization .org-investment-combo-shell--plot-only .line-chart-plot-area {
      flex: 1 1 auto;
      min-height: 140px;
      display: flex;
      flex-direction: column;
    }
    #view-organization .org-four-rows .org-investment-panel.panel.span-12 #orgInvestmentChart {
      min-height: 300px;
      max-height: none;
      flex: 1;
    }

    .panel .record-table { font-size: 15px; }
    .panel .record-table th,
    .panel .record-table td { padding: 6px 10px; }
    .panel .record-table th { font-weight: 800; }

    #view-summary .summary-box,
    #view-summary .metric-pill,
    #view-summary .receipt-item {
      padding-top: 8px;
      padding-bottom: 8px;
    }
    #view-summary .summary-box { padding: 10px 12px; }
    #view-summary .summary-box h4 { font-size: 17px; margin-bottom: 6px; font-weight: 800; }
    #view-summary .summary-box p { font-size: 16px; }
    #view-summary .metric-pill strong { font-size: 24px; margin-top: 6px; font-weight: 800; }
    #view-summary .metric-pill span { font-size: 16px; }
    .summary-overview-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 4px;
    }
    #view-summary .summary-overview-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      min-width: 0;
    }
    #view-summary .summary-snapshot-panel .summary-overview-card {
      padding: 14px 16px 14px 18px;
      min-height: 140px;
      min-width: 0;
      overflow: hidden;
    }
    #view-summary .summary-snapshot-panel .summary-overview-card .card-label {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      text-transform: none;
      letter-spacing: normal;
      color: var(--text);
    }
    #view-summary .summary-snapshot-panel .summary-overview-card .card-label__emoji {
      font-size: 22px;
      line-height: 1;
      flex-shrink: 0;
    }
    #view-summary .summary-snapshot-panel .summary-overview-card .card-label__text {
      font-size: 17px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.25;
      color: var(--text);
    }
    #view-summary .summary-snapshot-panel .summary-overview-card .card-value {
      font-size: 22px;
      font-weight: 800;
      margin: 0 0 12px;
      line-height: 1.25;
      text-align: center;
      color: var(--text);
    }
    #view-summary .summary-snapshot-panel .summary-overview-card .card-rows {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 8px;
      min-height: 0;
    }
    #view-summary .summary-snapshot-panel .summary-overview-card .card-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
    }
    #view-summary .summary-snapshot-panel .summary-overview-card .card-row-label {
      font-size: 15px;
      font-weight: 700;
      color: rgba(0,0,0,0.72);
      flex-shrink: 0;
    }
    #view-summary .summary-snapshot-panel .summary-overview-card .card-row-value {
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
      text-align: right;
      min-width: 0;
    }
    #view-summary .summary-snapshot-panel .summary-overview-card .card-sub {
      font-size: 12px;
      margin: 0;
      padding-top: 10px;
      margin-top: auto;
      border-top: 1px solid rgba(0,0,0,0.08);
      color: var(--muted-2);
      line-height: 1.45;
      text-align: center;
    }
    #view-summary .summary-snapshot-panel .summary-overview-note {
      font-size: 16px;
      font-weight: 600;
      color: var(--text);
      padding: 12px 14px;
      margin-top: 10px;
      line-height: 1.6;
    }
    .summary-overview-card {
      padding: 12px 14px 12px 16px;
      border-radius: var(--radius);
      background: var(--panel);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-soft);
      display: flex;
      flex-direction: column;
      min-height: 100px;
      position: relative;
      overflow: hidden;
    }
    /* 경영 한눈 요약 카드: 톤별 동일 규칙 — 좌측 4px 액센트 */
    .summary-overview-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      border-radius: 18px 0 0 18px;
      background: var(--line);
      z-index: 1;
      pointer-events: none;
    }
    .summary-overview-card.is-primary::before {
      background: var(--primary);
    }
    .summary-overview-card.is-alert::before {
      background: var(--bad);
    }
    .summary-overview-card.is-opportunity::before {
      background: var(--ok);
    }
    #view-summary .summary-overview-card { padding: 12px 14px 12px 18px; }
    #view-summary .summary-snapshot-panel .panel-head {
      display: flex;
      align-items: baseline;
      gap: 8px;
      flex-wrap: nowrap;
      justify-content: flex-start;
    }
    #view-summary .summary-snapshot-panel .panel-head h3 { font-size: 19px; font-weight: 800; margin: 0; flex-shrink: 0; white-space: normal; word-break: keep-all; min-width: 0; }
    #view-summary .summary-snapshot-panel .panel-head .meta { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; flex: 1; min-width: 0; }
    .summary-overview-card.is-primary {
      background: linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, var(--panel)) 0%, var(--panel) 100%);
      border-color: color-mix(in srgb, var(--primary) 28%, var(--line-2));
      box-shadow: var(--shadow-soft);
    }
    .summary-overview-card.is-primary strong {
      font-size: 1.15em;
      letter-spacing: -0.03em;
    }
    #view-summary .summary-overview-card.is-primary strong { font-size: 26px; }
    .summary-overview-card.is-alert {
      background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 8%, var(--panel)), var(--panel));
      border-color: color-mix(in srgb, var(--bad) 22%, var(--line-2));
    }
    .summary-overview-card.is-opportunity {
      background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 8%, var(--panel)), var(--panel));
      border-color: color-mix(in srgb, var(--ok) 20%, var(--line-2));
    }
    /* 경영 한눈 4카드: 슬롯별 구분 — 1번은 목표·경고 시 빨간 좌측 띠(4번 주황과 구분) */
    #view-summary .summary-overview-card--i1::before {
      width: 5px;
    }
    #view-summary .summary-overview-card--i1.is-alert::before {
      background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 88%, #450a0a), var(--bad));
      box-shadow: none;
    }
    #view-summary .summary-overview-card--i1.is-primary::before {
      background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--navy)));
    }
    #view-summary .summary-overview-card--i1.is-opportunity::before {
      background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 50%, var(--navy)));
    }
    #view-summary .summary-overview-card--i1.is-primary {
      background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--panel)) 0%, var(--panel) 55%, color-mix(in srgb, var(--primary) 6%, var(--panel)) 100%);
      border-color: color-mix(in srgb, var(--primary) 35%, var(--line-2));
      box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 12%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
    }
    #view-summary .summary-overview-card--i1.is-alert {
      background: linear-gradient(135deg, color-mix(in srgb, var(--bad) 12%, var(--panel)) 0%, var(--panel) 58%, color-mix(in srgb, var(--bad) 5%, var(--panel)) 100%);
      border-color: color-mix(in srgb, var(--bad) 34%, var(--line-2));
      box-shadow: 0 8px 20px color-mix(in srgb, var(--bad) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
    }
    #view-summary .summary-overview-card--i1.is-opportunity {
      background: linear-gradient(135deg, color-mix(in srgb, var(--ok) 12%, var(--panel)) 0%, var(--panel) 55%, color-mix(in srgb, var(--ok) 6%, var(--panel)) 100%);
      border-color: color-mix(in srgb, var(--ok) 28%, var(--line-2));
      box-shadow: 0 8px 18px color-mix(in srgb, var(--ok) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
    }
    #view-summary .summary-overview-card--i2::before {
      width: 5px;
      background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 50%, var(--navy)));
    }
    #view-summary .summary-overview-card--i2.is-primary {
      background: linear-gradient(160deg, color-mix(in srgb, var(--ok) 12%, var(--panel)) 0%, var(--panel) 50%, color-mix(in srgb, var(--accent, var(--primary)) 8%, var(--panel)) 100%);
      border-color: color-mix(in srgb, var(--ok) 28%, var(--line-2));
      box-shadow: 0 8px 18px color-mix(in srgb, var(--ok) 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
    }
    #view-summary .summary-overview-card--i3::before {
      width: 5px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--primary)) 80%, #6366f1), var(--accent, var(--primary)));
    }
    #view-summary .summary-overview-card--i3.is-primary {
      background: linear-gradient(125deg, color-mix(in srgb, var(--accent, var(--primary)) 11%, var(--panel)) 0%, var(--panel) 45%, color-mix(in srgb, #6366f1 7%, var(--panel)) 100%);
      border-color: color-mix(in srgb, var(--accent, var(--primary)) 30%, var(--line-2));
      box-shadow: 0 8px 18px color-mix(in srgb, #6366f1 10%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
    }
    #view-summary .summary-overview-card--i4 {
      border-width: 1px;
      border-style: solid;
    }
    #view-summary .summary-overview-card--i4::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      border-radius: var(--radius) var(--radius) 0 0;
      pointer-events: none;
      z-index: 1;
    }
    #view-summary .summary-overview-card--i4.is-alert::before {
      background: var(--bad);
    }
    #view-summary .summary-overview-card--i4.is-alert::after {
      background: linear-gradient(90deg, var(--bad), color-mix(in srgb, var(--bad) 60%, var(--warn)));
    }
    #view-summary .summary-overview-card--i4.is-alert {
      background: linear-gradient(180deg, color-mix(in srgb, var(--bad) 10%, var(--panel)), var(--panel));
      border-color: color-mix(in srgb, var(--bad) 32%, var(--line-2));
    }
    #view-summary .summary-overview-card--i4.is-opportunity::before {
      background: var(--ok);
    }
    #view-summary .summary-overview-card--i4.is-opportunity::after {
      background: linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 55%, var(--primary)));
    }
    #view-summary .summary-overview-card--i4.is-opportunity {
      background: linear-gradient(180deg, color-mix(in srgb, var(--ok) 10%, var(--panel)), var(--panel));
      border-color: color-mix(in srgb, var(--ok) 28%, var(--line-2));
    }
    .summary-overview-card span {
      display: block;
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--muted-2);
      font-weight: 800;
    }
    #view-summary .summary-overview-card span { font-size: 16px; font-weight: 800; }
    #view-summary .summary-overview-card .card-label {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 8px;
      text-transform: none;
      letter-spacing: normal;
      color: var(--text);
    }
    #view-summary .summary-overview-card .card-label__emoji {
      font-size: 24px;
      line-height: 1;
      flex-shrink: 0;
    }
    #view-summary .summary-overview-card .card-label__text {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.02em;
      text-transform: none;
      color: var(--text);
    }
    .summary-overview-card strong {
      display: block;
      margin-top: 2px;
      font-size: 16px;
      line-height: 1.2;
      color: var(--navy);
      letter-spacing: -0.04em;
    }
    #view-summary .summary-overview-card strong { font-size: 24px; margin-top: 6px; }
    .summary-overview-card p {
      margin: 4px 0 0;
      font-size: 14px;
      color: var(--muted);
      line-height: 1.45;
    }
    #view-summary .summary-overview-card p { font-size: 16px; margin-top: 8px; line-height: 1.5; }
    #view-summary .summary-snapshot-panel #summaryOverviewNote {
      display: none;
    }
    #view-summary .summary-overview-note {
      margin-top: 10px;
      padding: 12px 14px;
      border-radius: 10px;
      font-size: 15px;
      line-height: 1.6;
    }
    .summary-overview-note {
      margin-top: 12px;
      padding: 14px 16px;
      border-radius: 18px;
      background: var(--panel-surface);
      border: 1px solid var(--line-2);
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }
    .insight-emphasis {
      font-weight: 900;
    }
    .insight-emphasis.accent {
      color: var(--primary-dark);
    }
    .insight-emphasis.good {
      color: var(--ok);
    }
    .insight-emphasis.warn {
      color: var(--warn);
    }
    .insight-emphasis.bad {
      color: var(--bad);
    }
    .insight-emphasis.neutral {
      color: var(--muted);
    }
    .signal-list li strong,
    .action-list li strong,
    .report-list li strong,
    .summary-overview-note strong,
    .modal-note strong,
    .insight p strong {
      font-weight: 900;
      color: var(--primary-dark);
    }

    .report-stack {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      overflow-y: visible;
      gap: 8px;
    }

    .report-big {
      min-height: 180px;
    }

    #view-report { overflow: hidden !important; }
    .report-list {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.75;
    }

    .summary-box {
      padding: 14px 16px;
      border-radius: var(--radius);
      background: var(--panel);
      border: 1px solid var(--line-2);
      box-shadow: var(--shadow-soft);
    }

    .summary-box h4 {
      margin: 0 0 8px;
      font-size: 17px;
      font-weight: 800;
    }

    .summary-box p {
      margin: 0;
      color: var(--muted);
      font-size: 16px;
      line-height: 1.55;
    }

    /* 요약 > 미매출 접수 표: 열 너비 — No·구분은 최소, 접수번호는 가독 우선 */
    #view-summary {
      --receipt-col-no: 36px;
      --receipt-col-type: 58px;
      --receipt-col-receipt: 220px;
      --receipt-col-customer: 92px;
      --receipt-col-dept: 80px;
      --receipt-col-intake: 86px;
      --receipt-col-due: 90px;
      --receipt-col-status: 82px;
      --receipt-col-model: 64px;
      --receipt-col-product: 140px;
    }

    .signal-list,
    .action-list {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
      font-size: 15px;
      line-height: 1.6;
    }

    .receipt-board {
      display: flex;
      flex-direction: column;
      gap: 0;
      max-height: min(420px, 50vh);
      overflow: hidden;
      -webkit-overflow-scrolling: touch;
    }
    #view-summary .receipt-board.receipt-board--split {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
      gap: 10px;
      max-height: min(520px, 62vh);
      align-items: stretch;
    }
    #view-summary .receipt-panel-left,
    #view-summary .receipt-panel-right {
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line-soft);
      border-radius: 12px;
      background: color-mix(in srgb, var(--panel-surface) 92%, transparent);
      padding: 8px;
    }
    #view-summary .receipt-panel-right {
      padding-left: 8px;
    }
    #view-summary .receipt-donut-head {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 6px;
      margin-bottom: 8px;
    }
    #view-summary .receipt-donut-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: nowrap;
      white-space: nowrap;
      width: 100%;
    }
    #view-summary .receipt-donut-toggle .btn-mini {
      min-height: 30px;
      padding: 0 10px;
      font-weight: 700;
      flex: 1 1 0;
      min-width: 0;
      font-size: 14px;
    }
    #view-summary .receipt-donut-toggle .btn-mini.is-active {
      background: color-mix(in srgb, var(--accent-soft) 40%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--accent) 42%, var(--line-soft));
      color: var(--text);
    }
    #view-summary .receipt-donut-meta {
      font-size: 15px;
      color: var(--muted-2);
      font-weight: 800;
      letter-spacing: -0.02em;
      text-align: left;
    }
    #view-summary .receipt-donut-wrap {
      flex: 1;
      min-height: 0;
      min-width: 0;
      max-width: 100%;
      overflow: auto;
      box-sizing: border-box;
    }
    #view-summary #receiptStatusBoard .receipt-panel-right .receipt-table-wrap {
      max-height: 430px;
      overflow-x: auto;
      overflow-y: hidden;
    }
    #view-summary #receiptDonutChart {
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
      max-width: 100%;
      box-sizing: border-box;
    }
    #view-summary #receiptDonutChart .donut-wrap {
      flex: 1;
      min-height: 0;
      min-width: 0;
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 8px;
      align-items: center;
      justify-items: center;
    }
    #view-summary #receiptDonutChart .donut {
      width: min(235px, 100%);
      height: auto;
      aspect-ratio: 1 / 1;
      display: block;
      margin: 0 auto;
    }
    /* 범례: 1행에 2열(항목 2개씩) — 열 사이 간격 넓게, 항목 안에서는 이름·값 붙여 표시 */
    #view-summary #receiptDonutChart .legend {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 8px 22px !important;
      align-items: start !important;
      justify-items: stretch !important;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      margin: 0 !important;
      padding: 0 4px;
      box-sizing: border-box;
      max-height: none;
      overflow: visible;
    }
    #view-summary #receiptDonutChart .legend-item {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      justify-content: flex-start !important;
      font-size: 12px !important;
      gap: 4px 6px !important;
      padding: 2px 0;
      line-height: 1.25;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    /* 전역 .donut-wrap .legend-label-text { flex:1 } 때문에 이름↔숫자 사이가 과하게 벌어짐 → 라벨은 내용 너비만 */
    #view-summary #receiptDonutChart .donut-wrap .legend-item .legend-label-text {
      flex: 0 1 auto !important;
      max-width: 10.5em !important;
      margin-right: 2px !important;
    }
    #view-summary #receiptDonutChart .donut-wrap .legend-item .legend-value {
      flex: 0 0 auto !important;
      margin-left: 0 !important;
    }
    #view-summary #receiptDonutChart .donut-wrap .legend-item .legend-pct {
      flex: 0 0 auto !important;
      width: auto !important;
      min-width: 2.8em !important;
      padding-left: 2px !important;
    }
    #view-summary #receiptDonutChart .legend-item strong {
      font-size: 12px !important;
    }
    #receiptStatusBoard {
      --receipt-table-fs: 13px;
      --receipt-wrap-bg: linear-gradient(180deg, color-mix(in srgb, var(--panel-surface) 94%, transparent), color-mix(in srgb, var(--panel) 86%, transparent));
      --receipt-wrap-border: color-mix(in srgb, var(--panel-border) 72%, var(--line-soft));
      --receipt-head-fill: linear-gradient(180deg, color-mix(in srgb, var(--table-head-bg) 88%, white), color-mix(in srgb, var(--table-head-bg) 100%, var(--panel-surface)));
      --receipt-row-fill: color-mix(in srgb, var(--panel-surface) 92%, var(--panel));
      --receipt-row-fill-alt: color-mix(in srgb, var(--accent-soft) 10%, var(--panel-surface));
      --receipt-row-hover: color-mix(in srgb, var(--accent-soft) 22%, var(--panel-surface));
      --receipt-chip-bg: color-mix(in srgb, var(--panel-surface) 70%, var(--accent-soft) 30%);
      --receipt-chip-border: color-mix(in srgb, var(--panel-border) 58%, var(--line-soft));
      --receipt-chip-text: var(--table-head-text);
    }
    body[data-theme="dark"] #receiptStatusBoard {
      --receipt-wrap-bg: linear-gradient(180deg, color-mix(in srgb, var(--panel-surface) 96%, transparent), color-mix(in srgb, var(--panel) 92%, transparent));
      --receipt-wrap-border: color-mix(in srgb, var(--panel-border) 82%, var(--line-soft));
      --receipt-head-fill: linear-gradient(180deg, color-mix(in srgb, var(--table-head-bg) 92%, transparent), color-mix(in srgb, var(--panel) 78%, transparent));
      --receipt-row-fill: color-mix(in srgb, var(--panel-surface) 96%, var(--panel));
      --receipt-row-fill-alt: color-mix(in srgb, var(--accent-soft) 14%, var(--panel-surface));
      --receipt-row-hover: color-mix(in srgb, var(--accent-soft) 24%, var(--panel-surface));
    }
    body[data-theme="warm"] #receiptStatusBoard {
      --receipt-row-fill-alt: color-mix(in srgb, var(--accent-soft) 16%, var(--panel-surface));
      --receipt-row-hover: color-mix(in srgb, var(--accent-soft-2) 18%, var(--panel-surface));
    }
    .panel-receipt .receipt-table-wrap {
      flex: 1;
      min-height: 0;
      overflow: auto;
      border-radius: 10px;
      background: var(--panel);
      border: 1px solid var(--line-2);
    }
    #receiptStatusBoard .receipt-table-wrap {
      box-sizing: border-box;
      width: 100%;
      align-self: stretch;
      flex: 1;
      min-height: 0;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      padding: 8px;
      border-radius: 18px;
      background: var(--receipt-wrap-bg);
      border: 1px solid var(--receipt-wrap-border);
      box-shadow: inset 0 1px 0 color-mix(in srgb, white 32%, transparent);
    }
    .receipt-detail-table {
      width: 100%;
      font-size: 13px;
      border-collapse: collapse;
    }
    .receipt-detail-table {
      table-layout: fixed;
    }
    /* 루트 table을 block으로 두면 tbody flex여도 열 %·colgroup과 헤더/데이터 열 정렬이 유지됨 */
    #receiptStatusBoard .receipt-detail-table {
      display: block;
      width: 100%;
      min-width: 100%;
      table-layout: fixed !important;
      border-collapse: separate !important;
      border-spacing: 0 !important;
      font-size: var(--receipt-table-fs);
    }
    /* thead 고정 + tbody만 세로 스크롤(헤더 위로 행이 올라가지 않음), 1행 단위 스냅 */
    #receiptStatusBoard .receipt-detail-table thead {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    #receiptStatusBoard .receipt-detail-table tbody {
      display: flex;
      flex-direction: column;
      gap: 7px;
      padding-top: 7px;
      width: 100%;
      max-height: calc(430px - 72px);
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-gutter: stable;
      -webkit-overflow-scrolling: touch;
      scroll-snap-type: y mandatory;
    }
    #receiptStatusBoard .receipt-detail-table tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
      flex-shrink: 0;
      scroll-snap-align: start;
      scroll-snap-stop: normal;
    }
    #receiptStatusBoard .receipt-detail-table tbody tr.receipt-board-row {
      cursor: pointer;
    }
    #receiptStatusBoard .receipt-detail-table tbody tr.receipt-board-row:hover td {
      background: color-mix(in srgb, var(--accent-soft, rgba(37, 99, 235, 0.12)) 42%, transparent);
    }
    #receiptStatusBoard .receipt-detail-table tbody tr.receipt-board-row:focus-visible {
      outline: 2px solid var(--accent, #2563eb);
      outline-offset: -2px;
    }

    /* 거래처 > 신규·누락 브리핑 설명 모달 — 레이아웃·카드·백드롭은 #mainSummaryGrowthModal 과 동일(atlas-modal-shell) */
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-body {
      font-size: 16px;
      line-height: 1.55;
      color: var(--text);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 16px 20px 18px;
      gap: 0;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-layout {
      display: flex;
      flex-direction: column;
      flex: 1 1 0%;
      min-height: 0;
      gap: 0;
    }
    /* 본문 1행: 1) 데이터 기준 — 가로 전체, 4) 푸터와 동일한 구분선 */
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-intro {
      flex: 0 0 auto;
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 2px solid color-mix(in srgb, var(--line) 80%, transparent);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-intro h4 {
      margin: 0 0 12px;
      font-size: 21px;
      font-weight: 800;
      color: var(--text);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-intro .lc-explain-prose:last-of-type {
      margin-bottom: 0;
    }
    /* 본문 2행: 그래프 6 · 설명 4 */
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-split {
      display: flex;
      flex-direction: row;
      flex: 1 1 0%;
      min-height: 0;
      gap: 28px;
      align-items: stretch;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-chart-pane {
      flex: 1 1 60%;
      min-width: 0;
      max-width: none;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      padding: 4px 10px 8px 2px;
      box-sizing: border-box;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-chart-hint {
      margin: 0 0 14px;
      text-align: center;
      width: 100%;
      font-size: 15px;
      line-height: 1.5;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-chart {
      width: 100%;
      flex: 1 1 auto;
      min-height: 360px;
      margin: 0;
      padding: 16px 18px 14px;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
      background: color-mix(in srgb, var(--panel-surface) 92%, transparent);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-chart .yoy-waterfall-title {
      margin: 0 0 12px;
      width: 100%;
      font-size: 15px;
      line-height: 1.45;
      text-align: center;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-chart svg {
      width: 100%;
      height: auto;
      min-height: 420px;
      max-height: none;
      flex: 1 1 auto;
      display: block;
      margin: 0 auto;
    }
    /* 매출유형 교차 설명: 카드와 동일 매트릭스 — 스크롤 영역에 넣음 */
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-chart.st-cross-explain-modal-chart {
      min-height: 240px;
      max-height: min(58vh, 560px);
      height: auto;
      flex: 0 1 auto;
      overflow: auto;
      padding: 10px 12px 12px;
      -webkit-overflow-scrolling: touch;
    }
    /* 설명 모달 안 교차표: 카드(480px)보다 넉넉한 세로 */
    #stCrossExplainModal #stCrossExplainChart.st-cross-matrix {
      max-height: min(62vh, 620px);
    }
    #stCrossExplainModal .st-cross-explain-intro {
      margin-bottom: 10px;
      padding-bottom: 10px;
    }
    #stCrossExplainModal .st-cross-explain-intro h4 {
      margin-bottom: 6px;
    }
    #stCrossExplainModal .st-cross-explain-intro-line {
      margin: 0;
      font-size: 14px;
      line-height: 1.45;
      font-weight: 600;
    }
    #stCrossExplainModal .customer-lifecycle-explain-chart-pane {
      padding-top: 0;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-scroll-pane {
      flex: 1 1 40%;
      min-width: 280px;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding-right: 6px;
      box-sizing: border-box;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-scroll-pane h4 {
      margin: 16px 0 10px;
      font-size: 20px;
      font-weight: 800;
      color: var(--text);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-scroll-pane h4:first-child {
      margin-top: 0;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-meaning-footer {
      flex: 0 0 auto;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 2px solid color-mix(in srgb, var(--line) 80%, transparent);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-meaning-footer h4 {
      margin: 0 0 10px;
      font-size: 17px;
      font-weight: 800;
      color: var(--text);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-prose {
      margin: 0 0 12px;
      padding: 14px 16px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
      background: color-mix(in srgb, var(--panel-surface) 88%, var(--primary) 4%);
      box-shadow: 0 1px 0 color-mix(in srgb, var(--line) 40%, transparent);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-prose p {
      margin: 0;
      font-size: 19px;
      line-height: 1.68;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-step-card {
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
      background: color-mix(in srgb, var(--panel) 94%, transparent);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-step-head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px 8px;
      margin-bottom: 8px;
      font-weight: 700;
      font-size: 19px;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-step-eq {
      color: var(--muted);
      font-weight: 600;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-step-meta {
      font-size: 16px;
      font-weight: 600;
      color: var(--muted);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-step-desc {
      margin: 0;
      font-size: 18px;
      line-height: 1.62;
      color: var(--text);
      opacity: 0.95;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw {
      font-weight: 700;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw--pos {
      color: var(--ok, #059669);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw--neg {
      color: var(--bad, #dc2626);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw--accent {
      color: var(--primary, #2563eb);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw--metric {
      color: var(--accent-2, #7c3aed);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw--neutral {
      color: var(--accent, #0d9488);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-formula {
      margin-top: 8px;
      margin-bottom: 6px;
      font-size: 18px;
      line-height: 1.62;
      font-family: inherit;
      font-weight: 600;
      color: var(--text);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-meaning-list {
      margin: 0;
      padding-left: 1.2em;
      column-count: 2;
      column-gap: 28px;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-meaning-list li {
      margin-bottom: 8px;
      line-height: 1.55;
      font-size: 16px;
      break-inside: avoid;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-body .explain-formula {
      padding: 16px 18px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--panel-surface) 94%, var(--panel));
      border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
      font-family: inherit;
      font-size: 18px;
      font-weight: 600;
      line-height: 1.62;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-step-list {
      margin: 0 0 8px;
      padding-left: 1.15em;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-step-list li {
      margin-bottom: 12px;
      line-height: 1.58;
      font-size: 18px;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-step-list li::marker {
      font-weight: 800;
      color: var(--muted);
    }
    @media (max-width: 960px) {
      :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-split {
        flex-direction: column;
      }
      :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-chart-pane {
        flex: 0 0 auto;
        max-width: none;
        width: 100%;
      }
      :is(#customerLifecycleExplainModal, #stCrossExplainModal) .customer-lifecycle-explain-scroll-pane {
        flex: 1 1 auto;
        max-height: min(48vh, 480px);
        min-width: 0;
      }
      :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-meaning-list {
        column-count: 1;
      }
    }

    /* 요약 > 미매출 행 클릭 — 접수현황 원본 모달 (메인요약 성장 모달과 동일 계열 + 가로 스크롤바 표시) */
    #receiptRawModal {
      z-index: 10050;
      padding: 16px;
    }
    #receiptRawModal .modal-backdrop {
      backdrop-filter: blur(6px);
    }
    #receiptRawModal .receipt-raw-modal-card {
      width: min(1680px, calc(100vw - 24px));
      max-width: calc(100vw - 24px);
      max-height: min(90vh, 900px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 20px;
      border-width: 2px;
      box-shadow:
        0 28px 64px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    }
    #receiptRawModal .receipt-raw-modal-card::before {
      border-radius: inherit;
    }
    #receiptRawModal .modal-head {
      margin: 0;
      flex-shrink: 0;
      padding: 16px 20px 14px;
      border-bottom: 2px solid color-mix(in srgb, var(--line) 82%, transparent);
      background: color-mix(in srgb, var(--panel-strong) 92%, var(--bg) 8%);
      box-sizing: border-box;
    }
    #receiptRawModal .modal-head h3 {
      font-size: 1.2rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.25;
    }
    #receiptRawModal #receiptRawModalSubtitle {
      margin-top: 6px;
      font-size: 13px;
      line-height: 1.45;
    }
    #receiptRawModal .receipt-raw-modal-body {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      padding: 16px 18px 20px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #receiptRawModal .receipt-raw-modal-section {
      margin-top: 0;
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 14px 16px 16px;
    }
    #receiptRawModal .receipt-raw-modal-section h4 {
      margin: 0 0 6px;
      font-size: 15px;
      font-weight: 800;
      color: var(--text);
    }
    /* 스크롤 영역: 표 전체를 한 덩어리로 가로·세로 스크롤(헤더·본문 열 정렬 유지) */
    #receiptRawModal .receipt-raw-table-scroll {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      max-height: min(72vh, 720px);
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable both-edges;
      border-radius: 14px;
      border: 1px solid var(--line-2);
      background: color-mix(in srgb, var(--panel) 96%, transparent);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
      scrollbar-width: thin !important;
      -ms-overflow-style: auto !important;
    }
    #receiptRawModal .receipt-raw-table-scroll::-webkit-scrollbar {
      display: block !important;
      width: 10px;
      height: 10px;
    }
    #receiptRawModal .receipt-raw-table-scroll::-webkit-scrollbar-thumb {
      background: color-mix(in srgb, var(--muted) 55%, transparent);
      border-radius: 999px;
      border: 2px solid transparent;
      background-clip: padding-box;
    }
    #receiptRawModal .receipt-raw-table-scroll::-webkit-scrollbar-thumb:hover {
      background: color-mix(in srgb, var(--muted) 72%, transparent);
      background-clip: padding-box;
    }
    #receiptRawModal .receipt-raw-table-scroll::-webkit-scrollbar-corner {
      background: transparent;
    }
    #receiptRawModal .receipt-raw-modal-table {
      display: table;
      width: max-content;
      min-width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: auto;
      font-size: 13px;
    }
    #receiptRawModal .receipt-raw-modal-table thead th {
      position: sticky;
      top: 0;
      z-index: 2;
      white-space: nowrap;
      padding: 10px 12px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--table-head-text);
      background: var(--table-head-bg);
      border-bottom: 1px solid var(--line-2);
      box-shadow: 0 1px 0 var(--line-2);
    }
    #receiptRawModal .receipt-raw-modal-table tbody td {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line-2);
      white-space: nowrap;
      vertical-align: top;
      min-width: 5.5rem;
      max-width: none;
      background: var(--panel);
    }
    #receiptRawModal .receipt-raw-modal-table tbody tr:hover td {
      background: color-mix(in srgb, var(--accent-soft, rgba(37, 99, 235, 0.12)) 35%, var(--panel));
    }
    #receiptRawModal .receipt-raw-modal-table td.receipt-raw-modal-cell--wrap {
      white-space: normal;
      word-break: break-word;
      min-width: 12rem;
      max-width: min(28rem, 50vw);
    }

    /* 조직 > 미매출 접수 담당 비중: 버킷별 상세 목록 */
    #orgManagerLoadDetailModal {
      z-index: 10050;
      padding: 20px;
    }
    #orgManagerLoadDetailModal .modal-backdrop {
      backdrop-filter: blur(6px);
    }
    #orgManagerLoadDetailModal .receipt-raw-modal-card {
      width: min(1320px, calc(100vw - 32px));
      max-width: calc(100vw - 32px);
      max-height: min(90vh, 900px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 20px;
      border-width: 2px;
      box-shadow:
        0 28px 64px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    }
    #orgManagerLoadDetailModal .modal-head {
      margin: 0;
      flex-shrink: 0;
      padding: 16px 20px 14px;
      border-bottom: 2px solid color-mix(in srgb, var(--line) 82%, transparent);
      background: color-mix(in srgb, var(--panel-strong) 92%, var(--bg) 8%);
      box-sizing: border-box;
    }
    #orgManagerLoadDetailModal .receipt-raw-modal-body {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      padding: 16px 18px 20px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #orgManagerLoadDetailModal .receipt-raw-modal-section {
      margin-top: 0;
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 14px 16px 16px;
    }
    #orgManagerLoadDetailModal .org-manager-load-detail-table-scroll {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      max-height: min(60vh, 600px);
      overflow-x: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable both-edges;
      border-radius: 14px;
      border: 1px solid var(--line-2);
      background: color-mix(in srgb, var(--panel) 96%, transparent);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
      scrollbar-width: thin !important;
      -ms-overflow-style: auto !important;
    }
    #orgManagerLoadDetailModal .org-manager-load-detail-table-scroll::-webkit-scrollbar {
      display: block !important;
      width: 10px;
      height: 10px;
    }
    #view-organization .org-manager-load-summary-row {
      cursor: pointer;
    }
    #view-organization .org-manager-load-summary-row:hover td {
      background: color-mix(in srgb, var(--accent-soft, rgba(37, 99, 235, 0.12)) 28%, var(--panel));
    }

    /* 매출유형 > 품목 유형 랭킹·유형별 상위 거래처: 원장 상세 모달 */
    #serviceTypeDetailModal {
      z-index: 10050;
      padding: 20px;
    }
    #serviceTypeDetailModal .modal-backdrop {
      backdrop-filter: blur(6px);
    }
    #serviceTypeDetailModal .modal-card {
      width: min(1540px, calc(100vw - 16px));
      max-width: calc(100vw - 16px);
      max-height: min(90vh, 900px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 20px;
      border-width: 2px;
      box-shadow:
        0 28px 64px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    }
    #serviceTypeDetailModal .modal-head {
      margin: 0;
      flex-shrink: 0;
      padding: 16px 20px 14px;
      border-bottom: 2px solid color-mix(in srgb, var(--line) 82%, transparent);
      background: color-mix(in srgb, var(--panel-strong) 92%, var(--bg) 8%);
      box-sizing: border-box;
    }
    #serviceTypeDetailModal .receipt-raw-modal-body {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      padding: 16px 18px 20px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    #serviceTypeDetailModal .receipt-raw-modal-section {
      margin-top: 0;
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      padding: 14px 16px 16px;
    }
    #serviceTypeDetailModal .service-type-detail-table-scroll {
      flex: 1 1 auto;
      min-height: 0;
      min-width: 0;
      max-height: min(58vh, 620px);
      overflow-x: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable both-edges;
      border-radius: 14px;
      border: 1px solid var(--line-2);
      background: color-mix(in srgb, var(--panel) 96%, transparent);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
      scrollbar-width: thin !important;
      -ms-overflow-style: auto !important;
    }
    #serviceTypeDetailModal .service-type-detail-table-scroll::-webkit-scrollbar {
      display: block !important;
      width: 10px;
      height: 10px;
    }
    #view-service-type .st-service-type-rank-row,
    #view-service-type .st-service-type-topcust-row {
      cursor: pointer;
    }
    #view-service-type .st-service-type-rank-row:hover td,
    #view-service-type .st-service-type-topcust-row:hover td {
      background: color-mix(in srgb, var(--accent-soft, rgba(37, 99, 235, 0.12)) 28%, var(--panel));
    }

    /* 세부 모달 헤더: 타이틀 블록(.modal-head-primary) + 닫기·엑셀 — 세로 중앙 정렬 */
    #mainSummaryGrowthModal .modal-head,
    #detailModal .modal-head,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-head,
    #productCategoryDetailModal .modal-head,
    #customerTatDetailModal .modal-head,
    #orgCompareSalesModal .modal-head,
    #orgManagerLoadDetailModal .modal-head,
    #serviceTypeDetailModal .modal-head,
    #admin2KpiDetailModal .modal-head,
    #receiptRawModal .modal-head {
      flex-shrink: 0;
      align-items: center;
    }

    #mainSummaryGrowthModal .modal-close,
    #detailModal .modal-close,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-close,
    #productCategoryDetailModal .modal-close,
    #customerTatDetailModal .modal-close,
    #orgCompareSalesModal .modal-close,
    #orgManagerLoadDetailModal .modal-close,
    #serviceTypeDetailModal .modal-close,
    #admin2KpiDetailModal .modal-close,
    #receiptRawModal .modal-close {
      flex-shrink: 0;
    }

    /* 조직 전년비교 표 행 클릭 → 매출현황 상세 모달 */
    #orgCompareSalesModal {
      z-index: 10050;
      padding: 20px;
    }
    #orgCompareSalesModal .modal-backdrop {
      backdrop-filter: blur(6px);
    }
    #orgCompareSalesModal .org-compare-sales-modal-card {
      width: min(1920px, calc(100vw - 12px));
      max-width: calc(100vw - 12px);
      /* 세로 flex 체인(atlas-shell → 본문 → 표)에 확정 높이 전달 — auto만 두면 행 높이가 0에 가깝게 붕괴 */
      height: min(92vh, 920px);
      max-height: min(92vh, 920px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 20px;
      border-width: 2px;
      box-shadow:
        0 28px 64px rgba(15, 23, 42, 0.22),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
    }
    #orgCompareSalesModal .modal-head {
      padding: 16px 18px 14px 20px;
      margin-bottom: 0;
      box-sizing: border-box;
      border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    }

    #orgCompareSalesModal .org-compare-sales-modal-body {
      flex: 1 1 0%;
      min-height: 0;
      min-width: 0;
      padding: 14px 16px 18px;
      box-sizing: border-box;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      -webkit-overflow-scrolling: touch;
    }
    /* 조직 매출 상세: 열 → 값 드롭다운 → 검색 (한 줄 우선) */
    #orgCompareSalesModal .org-compare-modal-filter-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 10px 14px;
      margin-bottom: 12px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
      background: color-mix(in srgb, var(--panel-surface) 92%, var(--panel));
      box-sizing: border-box;
    }
    #orgCompareSalesModal .org-compare-modal-filter-field {
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-width: 0;
    }
    #orgCompareSalesModal .org-compare-modal-filter-field--grow {
      flex: 1 1 200px;
      min-width: min(100%, 220px);
    }
    #orgCompareSalesModal .org-compare-modal-filter-field__lbl {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-transform: uppercase;
      color: var(--muted, #64748b);
    }
    #orgCompareSalesModal .org-compare-filter-col {
      min-width: 132px;
      max-width: 100%;
    }
    #orgCompareSalesModal .org-compare-filter-money-unit {
      min-width: 100px;
      max-width: 100%;
    }
    #orgCompareSalesModal .org-compare-filter-val {
      min-width: min(280px, 32vw);
      max-width: min(400px, 48vw);
    }
    #orgCompareSalesModal .org-compare-filter-q {
      width: 100%;
      min-width: 160px;
    }
    #orgCompareSalesModal .org-compare-modal-filter-toolbar .btn.org-compare-filter-reset {
      flex: 0 0 auto;
      align-self: center;
      margin-bottom: 2px;
    }
    #orgCompareSalesModal .org-compare-sales-split {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 14px;
      flex: 1 1 0%;
      min-height: 0;
      min-width: 0;
    }
    #orgCompareSalesModal .org-compare-sales-split.is-single-pane--cy .org-compare-sales-pane--previous,
    #orgCompareSalesModal .org-compare-sales-split.is-single-pane--py .org-compare-sales-pane--current {
      display: none;
    }
    #orgCompareSalesModal .org-compare-sales-split.is-single-pane--cy .org-compare-sales-pane--current,
    #orgCompareSalesModal .org-compare-sales-split.is-single-pane--py .org-compare-sales-pane--previous {
      flex: 1 1 100%;
      max-width: 100%;
    }

    /* 긴 조직명이 좌측 스트립에서 잘리지 않도록 */
    #orgCompareSalesModal .atlas-modal-side-caption {
      white-space: normal;
      max-width: 100%;
      word-break: keep-all;
      overflow-wrap: break-word;
    }
    #orgCompareSalesModal .org-compare-sales-pane {
      flex: 1 1 0;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 10px 10px 8px;
      border-radius: 14px;
      border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
      background: color-mix(in srgb, var(--panel-surface) 94%, var(--panel));
      box-sizing: border-box;
    }
    #orgCompareSalesModal .org-compare-sales-pane__title {
      margin: 0;
      flex-shrink: 0;
      font-size: 14px;
      font-weight: 800;
      letter-spacing: -0.01em;
      color: var(--text);
      line-height: 1.45;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
    }
    #orgCompareSalesModal .org-compare-sales-pane__hint {
      display: inline-block;
      margin-left: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--muted, var(--text));
      opacity: 0.9;
    }
    #orgCompareSalesModal .org-compare-sales-pane__scroll {
      flex: 1 1 0;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    #orgCompareSalesModal .org-compare-sales-pane__scroll .org-compare-sales-table-scroll {
      flex: 1 1 0;
      min-height: 0;
      max-height: none;
    }
    @media (max-width: 900px) {
      #orgCompareSalesModal .org-compare-sales-split {
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
      #orgCompareSalesModal .org-compare-sales-pane {
        flex: 0 0 auto;
        min-height: min(42vh, 380px);
      }
      #orgCompareSalesModal .org-compare-sales-pane__scroll .org-compare-sales-table-scroll {
        max-height: none;
      }
    }
    #orgCompareSalesModal .org-compare-sales-table-scroll {
      overflow-x: auto;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable both-edges;
      scrollbar-width: thin !important;
    }
    #orgCompareSalesModal .org-compare-sales-modal-table {
      min-width: max(100%, 960px);
    }

    /* 메인요약 성장 모달 · KPI 모달: 스크롤 영역 높이만 (표 스타일은 erp-ui-polish 모달·org-compare 동기 블록) */
    #mainSummaryGrowthModal .ms-growth-modal-table-wrap {
      overflow-x: auto;
      overflow-y: auto;
      max-height: none;
      margin-top: 8px;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
    }
    #mainSummaryGrowthModal .ms-growth-modal-table-wrap .ranking-table {
      min-width: 760px;
    }

    #admin2KpiDetailModal .admin2-kpi-modal-table-scroll,
    #admin2KpiDetailModal .admin2-net-cohort-table-scroll {
      overflow-x: auto;
      overflow-y: auto;
      max-height: none;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
    }

    /* 세부 모달 표: tbody만 세로 스크롤 — 헤더는 고정 영역, 데이터 행만 스크롤( sticky+래퍼 스크롤 시 행이 헤더 위로 겹쳐 보임 방지 ) */
    #mainSummaryGrowthModal .ms-growth-modal-table-wrap > table.ranking-table,
    #orgCompareSalesModal .org-compare-sales-table-scroll > table.org-compare-sales-modal-table,
    #admin2KpiDetailModal .admin2-kpi-modal-table-scroll > table.ranking-table,
    #admin2KpiDetailModal .admin2-net-cohort-table-scroll > table.ranking-table {
      display: block;
      width: 100%;
      min-width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
    }
    #mainSummaryGrowthModal .ms-growth-modal-table-wrap > table.ranking-table thead,
    #orgCompareSalesModal .org-compare-sales-table-scroll > table.org-compare-sales-modal-table thead,
    #admin2KpiDetailModal .admin2-kpi-modal-table-scroll > table.ranking-table thead,
    #admin2KpiDetailModal .admin2-net-cohort-table-scroll > table.ranking-table thead {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    #mainSummaryGrowthModal .ms-growth-modal-table-wrap > table.ranking-table thead th,
    #orgCompareSalesModal .org-compare-sales-table-scroll > table.org-compare-sales-modal-table thead th,
    #admin2KpiDetailModal .admin2-kpi-modal-table-scroll > table.ranking-table thead th,
    #admin2KpiDetailModal .admin2-net-cohort-table-scroll > table.ranking-table thead th {
      position: static;
      top: auto;
    }
    #mainSummaryGrowthModal .ms-growth-modal-table-wrap > table.ranking-table tbody,
    #orgCompareSalesModal .org-compare-sales-table-scroll > table.org-compare-sales-modal-table tbody,
    #admin2KpiDetailModal .admin2-kpi-modal-table-scroll > table.ranking-table tbody,
    #admin2KpiDetailModal .admin2-net-cohort-table-scroll > table.ranking-table tbody {
      display: flex;
      flex-direction: column;
      gap: 6px;
      overflow-x: hidden;
      overflow-y: auto;
      scrollbar-gutter: stable;
      overscroll-behavior-y: contain;
      -webkit-overflow-scrolling: touch;
      max-height: none;
    }
    #mainSummaryGrowthModal .ms-growth-modal-table-wrap > table.ranking-table tbody tr,
    #orgCompareSalesModal .org-compare-sales-table-scroll > table.org-compare-sales-modal-table tbody tr,
    #admin2KpiDetailModal .admin2-kpi-modal-table-scroll > table.ranking-table tbody tr,
    #admin2KpiDetailModal .admin2-net-cohort-table-scroll > table.ranking-table tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
      flex-shrink: 0;
    }

    /* 열 너비: #view-summary 의 --receipt-col-* 만 조절 (colgroup과 동기) */
    #receiptStatusBoard .receipt-detail-table col.receipt-col-no {
      width: var(--receipt-col-no);
    }
    #receiptStatusBoard .receipt-detail-table col.receipt-col-type {
      width: var(--receipt-col-type);
    }
    #receiptStatusBoard .receipt-detail-table col.receipt-col-receipt {
      width: var(--receipt-col-receipt);
    }
    #receiptStatusBoard .receipt-detail-table col.receipt-col-customer {
      width: var(--receipt-col-customer);
    }
    #receiptStatusBoard .receipt-detail-table col.receipt-col-dept {
      width: var(--receipt-col-dept);
    }
    #receiptStatusBoard .receipt-detail-table col.receipt-col-intake {
      width: var(--receipt-col-intake);
    }
    #receiptStatusBoard .receipt-detail-table col.receipt-col-due {
      width: var(--receipt-col-due);
    }
    #receiptStatusBoard .receipt-detail-table col.receipt-col-status {
      width: var(--receipt-col-status);
    }
    #receiptStatusBoard .receipt-detail-table col.receipt-col-model {
      width: var(--receipt-col-model);
    }
    #receiptStatusBoard .receipt-detail-table col.receipt-col-product {
      width: var(--receipt-col-product);
    }
    /* thead/tbody가 분리 display:table 이라 colgroup만으로는 열이 흔들림 → NO·구분·접수번호 고정폭 */
    #receiptStatusBoard .receipt-detail-table thead th.receipt-cell-no,
    #receiptStatusBoard .receipt-detail-table tbody td.receipt-cell-no {
      width: var(--receipt-col-no);
      min-width: var(--receipt-col-no);
      max-width: var(--receipt-col-no);
      padding-left: 2px !important;
      padding-right: 2px !important;
      box-sizing: border-box;
    }
    #receiptStatusBoard .receipt-detail-table thead th.receipt-cell-type,
    #receiptStatusBoard .receipt-detail-table tbody td.receipt-cell-type {
      width: var(--receipt-col-type);
      min-width: var(--receipt-col-type);
      max-width: var(--receipt-col-type);
      padding-left: 3px !important;
      padding-right: 3px !important;
      box-sizing: border-box;
    }
    #receiptStatusBoard .receipt-detail-table thead th.receipt-cell-receipt,
    #receiptStatusBoard .receipt-detail-table tbody td.receipt-cell-receipt {
      width: var(--receipt-col-receipt);
      min-width: var(--receipt-col-receipt);
      box-sizing: border-box;
    }
    #receiptStatusBoard .receipt-detail-table th,
    #receiptStatusBoard .receipt-detail-table td {
      text-align: center !important;
      font-size: var(--receipt-table-fs) !important;
    }
    .receipt-detail-table th,
    .receipt-detail-table td {
      padding: 8px 10px;
      text-align: left;
      white-space: nowrap;
      border-bottom: 1px solid var(--line-2);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .receipt-detail-table th {
      background: var(--bg-2);
      font-weight: 700;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--muted);
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .receipt-detail-table td {
      background: var(--panel);
    }
    .receipt-detail-table tbody tr:nth-child(even) td {
      background: color-mix(in srgb, var(--bg-2) 20%, var(--panel));
    }
    .receipt-detail-table tbody tr:hover td {
      background: color-mix(in srgb, var(--primary) 8%, var(--panel));
    }
    .receipt-detail-table tbody tr:last-child td {
      border-bottom: none;
    }
    .receipt-detail-table td.num {
      text-align: right;
      font-variant-numeric: tabular-nums;
      color: var(--muted);
      font-weight: 600;
    }
    #receiptStatusBoard .receipt-detail-table td.num {
      text-align: center;
    }
    .receipt-detail-table td:first-of-type,
    .receipt-detail-table th:first-of-type {
      padding-left: 14px;
    }
    .receipt-detail-table td:last-of-type,
    .receipt-detail-table th:last-of-type {
      padding-right: 14px;
    }
    #receiptStatusBoard .receipt-detail-table thead th {
      position: static;
      padding: 10px 6px !important;
      border-top: 1px solid var(--receipt-wrap-border) !important;
      border-bottom: 1px solid var(--receipt-wrap-border) !important;
      background: var(--receipt-head-fill) !important;
      color: var(--table-head-text) !important;
      font-size: var(--receipt-table-fs) !important;
      font-weight: 800;
      text-transform: none;
      letter-spacing: 0.02em;
      line-height: 1.25;
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, white 24%, transparent),
        0 1px 0 color-mix(in srgb, var(--line-2) 85%, transparent);
    }
    /* 요약 > 미매출 접수 표: 헤더 정렬 클릭 + 열 너비 리사이즈 핸들 */
    #receiptStatusBoard .receipt-detail-table thead th.receipt-th-sortable {
      position: relative;
      cursor: pointer;
      user-select: none;
      padding-right: 12px !important;
    }
    #receiptStatusBoard .receipt-detail-table thead th.receipt-th-sortable:hover {
      background: color-mix(in srgb, var(--primary) 10%, var(--receipt-head-fill, var(--bg-2))) !important;
    }
    #receiptStatusBoard .receipt-th-inner {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      max-width: calc(100% - 12px);
      pointer-events: none;
    }
    #receiptStatusBoard .receipt-th-sort-indicator {
      font-size: 0.72em;
      opacity: 0.92;
      flex-shrink: 0;
      min-width: 0.9em;
      font-weight: 900;
    }
    #receiptStatusBoard .receipt-th-resize {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 10px;
      cursor: col-resize;
      z-index: 4;
      background: transparent;
      touch-action: none;
      pointer-events: auto;
    }
    #receiptStatusBoard .receipt-th-resize:hover {
      background: color-mix(in srgb, var(--primary) 20%, transparent);
    }
    #receiptStatusBoard thead th.is-sorted-asc .receipt-th-sort-indicator,
    #receiptStatusBoard thead th.is-sorted-desc .receipt-th-sort-indicator {
      color: var(--primary);
    }
    #receiptStatusBoard .receipt-detail-table thead th:first-child {
      border-left: 1px solid var(--receipt-wrap-border) !important;
      border-radius: 12px 0 0 12px;
    }
    #receiptStatusBoard .receipt-detail-table thead th:last-child {
      border-right: 1px solid var(--receipt-wrap-border) !important;
      border-radius: 0 12px 12px 0;
    }
    #receiptStatusBoard .receipt-detail-table tbody td {
      padding: 7px 6px !important;
      vertical-align: middle;
      border-top: 1px solid var(--receipt-wrap-border) !important;
      border-bottom: 1px solid var(--receipt-wrap-border) !important;
      background: var(--receipt-row-fill) !important;
      color: var(--text) !important;
      font-size: var(--receipt-table-fs) !important;
      font-weight: 600;
    }
    #receiptStatusBoard .receipt-detail-table tbody tr:nth-child(even) td {
      background: var(--receipt-row-fill-alt) !important;
    }
    #receiptStatusBoard .receipt-detail-table tbody tr:hover td {
      background: var(--receipt-row-hover) !important;
      border-color: color-mix(in srgb, var(--accent-soft-2) 55%, var(--receipt-wrap-border)) !important;
    }
    #receiptStatusBoard .receipt-detail-table tbody td:first-child {
      border-left: 1px solid var(--receipt-wrap-border) !important;
      border-radius: 12px 0 0 12px;
    }
    #receiptStatusBoard .receipt-detail-table tbody td:last-child {
      border-right: 1px solid var(--receipt-wrap-border) !important;
      border-radius: 0 12px 12px 0;
    }
    #receiptStatusBoard .receipt-detail-table td.num {
      color: var(--title) !important;
      font-weight: 800;
    }
    #receiptStatusBoard .receipt-cell-stack {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: 34px;
    }
    #receiptStatusBoard .receipt-cell-no .receipt-cell-stack {
      min-height: 28px;
      justify-content: center;
    }
    #receiptStatusBoard .receipt-cell-type .receipt-cell-stack,
    #receiptStatusBoard .receipt-cell-status .receipt-cell-stack {
      min-height: 32px;
    }
    #receiptStatusBoard .receipt-cell-type {
      overflow: visible;
      text-overflow: clip;
    }
    #receiptStatusBoard .receipt-cell-text {
      display: block;
      width: 100%;
      margin: 0 auto;
      font-size: inherit;
      line-height: 1.24;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: keep-all;
    }
    #receiptStatusBoard .receipt-cell-customer .receipt-cell-text,
    #receiptStatusBoard .receipt-cell-dept .receipt-cell-text,
    #receiptStatusBoard .receipt-cell-product .receipt-cell-text {
      white-space: normal;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      line-height: 1.16;
      max-height: 2.32em;
    }
    #receiptStatusBoard .receipt-cell-model .receipt-cell-text {
      max-width: 66px;
      letter-spacing: -0.02em;
    }
    #receiptStatusBoard .receipt-cell-date .receipt-cell-text,
    #receiptStatusBoard .receipt-cell-receipt .receipt-cell-text {
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
      max-width: none;
    }
    #receiptStatusBoard .receipt-chip,
    #receiptStatusBoard .receipt-status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 3px 8px;
      border-radius: 999px;
      border: 1px solid var(--receipt-chip-border);
      font-size: var(--receipt-table-fs) !important;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
      box-sizing: border-box;
    }
    #receiptStatusBoard .receipt-status-pill {
      min-height: 28px;
      padding: 4px 8px;
    }
    #receiptStatusBoard .receipt-chip--type {
      min-height: 26px !important;
      min-width: max-content !important;
      max-width: 100%;
      padding: 2px 8px !important;
      letter-spacing: -0.01em;
    }
    #receiptStatusBoard .receipt-chip {
      background: var(--receipt-chip-bg);
      color: var(--receipt-chip-text);
    }
    #receiptStatusBoard .receipt-chip--index {
      min-height: 22px !important;
      min-width: 0 !important;
      max-width: 100%;
      padding: 2px 4px !important;
      background: color-mix(in srgb, var(--accent-soft) 52%, var(--panel-surface));
      color: var(--title);
    }
    #receiptStatusBoard .receipt-chip--type.is-pending {
      background: color-mix(in srgb, var(--warn) 14%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--warn) 34%, var(--receipt-chip-border));
      color: color-mix(in srgb, var(--warn) 78%, var(--text));
    }
    #receiptStatusBoard .receipt-chip--type.is-working {
      background: color-mix(in srgb, var(--accent) 14%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--accent) 30%, var(--receipt-chip-border));
      color: color-mix(in srgb, var(--accent) 82%, var(--text));
    }
    #receiptStatusBoard .receipt-chip--type.is-done {
      background: color-mix(in srgb, var(--ok) 14%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--ok) 34%, var(--receipt-chip-border));
      color: color-mix(in srgb, var(--ok) 82%, var(--text));
    }
    #receiptStatusBoard .receipt-chip--type.is-alert {
      background: color-mix(in srgb, var(--bad) 12%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--bad) 32%, var(--receipt-chip-border));
      color: color-mix(in srgb, var(--bad) 82%, var(--text));
    }
    #receiptStatusBoard .receipt-chip--type.is-neutral {
      background: color-mix(in srgb, var(--table-head-bg) 72%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--panel-border) 58%, var(--receipt-chip-border));
      color: var(--table-head-text);
    }
    #receiptStatusBoard .receipt-status-pill.is-pending {
      background: color-mix(in srgb, var(--warn) 14%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--warn) 34%, var(--receipt-chip-border));
      color: color-mix(in srgb, var(--warn) 78%, var(--text));
    }
    #receiptStatusBoard .receipt-status-pill.is-working {
      background: color-mix(in srgb, var(--accent) 14%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--accent) 30%, var(--receipt-chip-border));
      color: color-mix(in srgb, var(--accent) 82%, var(--text));
    }
    #receiptStatusBoard .receipt-status-pill.is-done {
      background: color-mix(in srgb, var(--ok) 14%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--ok) 34%, var(--receipt-chip-border));
      color: color-mix(in srgb, var(--ok) 82%, var(--text));
    }
    #receiptStatusBoard .receipt-status-pill.is-alert {
      background: color-mix(in srgb, var(--bad) 12%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--bad) 32%, var(--receipt-chip-border));
      color: color-mix(in srgb, var(--bad) 82%, var(--text));
    }
    #receiptStatusBoard .receipt-status-pill.is-neutral {
      background: color-mix(in srgb, var(--table-head-bg) 72%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--panel-border) 58%, var(--receipt-chip-border));
      color: var(--table-head-text);
    }

    .receipt-item {
      display: grid;
      grid-template-columns: 1.2fr 0.9fr 0.9fr;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 14px;
      background: var(--panel-surface);
      border: 1px solid var(--line-2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
    }

    .receipt-item strong {
      font-size: 17px;
      font-weight: 800;
    }

    .receipt-item span,
    .receipt-item .num {
      font-size: 15px;
      color: var(--muted);
      font-weight: 800;
    }

    .modal {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      z-index: 9999;
    }

    .modal.open {
      display: flex;
    }

    /* 개발 중 안내: 맞춤(custom-report)·Q&A(qa)·조직도(org-chart) 공통 — 단일 모달·동일 타이포·너비 */
    #wipFeatureModal.modal .modal-card.wip-feature-modal-card {
      width: min(848px, calc(100vw - 28px)) !important;
      max-width: min(848px, calc(100vw - 28px)) !important;
    }

    .wip-feature-modal-card {
      position: relative;
      padding: 0 !important;
      overflow: hidden;
      border-radius: 14px !important;
      border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line));
      box-shadow:
        0 20px 40px rgba(15, 23, 42, 0.12),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset;
      background: var(--panel);
      max-height: 90vh;
    }

    /* 카드 배경 워터마크(본문 뒤) */
    .wip-feature-modal-bg-mark {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
      border-radius: inherit;
    }
    .wip-feature-modal-bg-mark__hero {
      position: absolute;
      left: 50%;
      top: 48%;
      transform: translate(-50%, -50%) rotate(-13deg);
      font-size: clamp(2.5rem, 11vw, 5.25rem);
      font-weight: 900;
      letter-spacing: 0.1em;
      color: color-mix(in srgb, var(--bad) 55%, var(--muted) 45%);
      opacity: 0.11;
      white-space: nowrap;
      user-select: none;
      text-shadow: 0 0 0.5em color-mix(in srgb, var(--panel) 70%, transparent);
    }
    .wip-feature-modal-bg-mark__en {
      position: absolute;
      left: 50%;
      top: 58%;
      transform: translate(-50%, -50%) rotate(-13deg);
      font-size: clamp(0.7rem, 2.2vw, 1rem);
      font-weight: 800;
      letter-spacing: 0.32em;
      color: color-mix(in srgb, var(--warn) 50%, var(--muted) 50%);
      opacity: 0.09;
      white-space: nowrap;
      user-select: none;
    }
    .wip-feature-modal-bg-mark__tile {
      position: absolute;
      left: var(--wmx);
      top: var(--wmy);
      transform: translate(-50%, -50%) rotate(-14deg);
      font-size: clamp(1rem, 3.2vw, 1.65rem);
      font-weight: 800;
      letter-spacing: 0.08em;
      color: color-mix(in srgb, var(--bad) 45%, var(--muted) 55%);
      opacity: 0.08;
      white-space: nowrap;
      user-select: none;
    }
    body[data-theme="dark"] .wip-feature-modal-bg-mark__hero {
      opacity: 0.14;
    }
    body[data-theme="dark"] .wip-feature-modal-bg-mark__en {
      opacity: 0.11;
    }
    body[data-theme="dark"] .wip-feature-modal-bg-mark__tile {
      opacity: 0.1;
    }

    .wip-feature-modal-shell,
    .atlas-modal-shell {
      display: flex;
      min-height: 0;
      position: relative;
      z-index: 1;
    }

    /* 메인요약·조직 매출·관리자 KPI·거래처 브리핑 설명: 카드 안에서 좌측 스트립 + 본문이 높이를 채움 (basis 0%로 남은 높이 확보) */
    #mainSummaryGrowthModal .modal-card > .atlas-modal-shell,
    #detailModal .modal-card > .atlas-modal-shell,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card > .atlas-modal-shell,
    #customerTatDetailModal .modal-card > .atlas-modal-shell,
    #productCategoryDetailModal .modal-card > .atlas-modal-shell,
    #orgCompareSalesModal .org-compare-sales-modal-card > .atlas-modal-shell,
    #admin2KpiDetailModal .admin2-kpi-detail-modal-card > .atlas-modal-shell {
      flex: 1 1 0%;
      min-height: 0;
      width: 100%;
      align-items: stretch;
    }

    #mainSummaryGrowthModal .atlas-modal-main,
    #detailModal .atlas-modal-main,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .atlas-modal-main,
    #customerTatDetailModal .atlas-modal-main,
    #productCategoryDetailModal .atlas-modal-main,
    #orgCompareSalesModal .atlas-modal-main,
    #admin2KpiDetailModal .atlas-modal-main {
      flex: 1 1 0%;
      min-height: 0;
      overflow: hidden;
    }

    .wip-feature-modal-side,
    .atlas-modal-side {
      flex: 0 0 184px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 20px 16px;
      background: linear-gradient(
        165deg,
        color-mix(in srgb, var(--primary) 28%, transparent) 0%,
        color-mix(in srgb, var(--primary) 8%, var(--panel)) 45%,
        var(--panel-2, var(--panel)) 100%
      );
      border-right: 1px solid var(--line);
      color: var(--primary);
    }

    .wip-feature-modal-side-badge,
    .atlas-modal-side-badge {
      font-size: 14px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      padding: 7px 14px;
      white-space: nowrap;
      border-radius: 999px;
      background: color-mix(in srgb, var(--primary) 18%, transparent);
      color: var(--primary);
      border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
    }
    #wipFeatureModal .wip-feature-modal-side-badge {
      font-size: 15px;
      letter-spacing: 0.12em;
      text-transform: none;
      background: color-mix(in srgb, var(--bad) 22%, transparent);
      color: color-mix(in srgb, var(--bad) 92%, var(--text) 8%);
      border-color: color-mix(in srgb, var(--bad) 40%, var(--line));
    }

    .wip-feature-modal-side-icon,
    .atlas-modal-side-icon {
      width: 72px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 16px;
      background: color-mix(in srgb, var(--panel) 70%, transparent);
      border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--line));
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    }

    .wip-feature-modal-svg {
      width: 42px;
      height: 42px;
      color: var(--primary);
    }

    .atlas-modal-side-icon--emoji {
      font-size: 2.125rem;
      line-height: 1;
      font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
    }

    .wip-feature-modal-side-caption,
    .atlas-modal-side-caption {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      text-align: center;
      line-height: 1.35;
      opacity: 0.9;
      white-space: nowrap;
    }

    .wip-feature-modal-content,
    .atlas-modal-main {
      flex: 1 1 0%;
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }

    /* 베타 안내(#wipFeatureModal)는 좌측 세로 유지 — 메인·매출·KPI 모달만 좁은 화면에서 상단 스트립 */
    @media (max-width: 600px) {
      #mainSummaryGrowthModal .atlas-modal-shell,
      #detailModal .atlas-modal-shell,
      :is(#customerLifecycleExplainModal, #stCrossExplainModal) .atlas-modal-shell,
      #customerTatDetailModal .atlas-modal-shell,
      #orgCompareSalesModal .atlas-modal-shell,
      #admin2KpiDetailModal .atlas-modal-shell {
        flex-direction: column;
      }
      #mainSummaryGrowthModal .atlas-modal-side,
      #detailModal .atlas-modal-side,
      :is(#customerLifecycleExplainModal, #stCrossExplainModal) .atlas-modal-side,
      #customerTatDetailModal .atlas-modal-side,
      #orgCompareSalesModal .atlas-modal-side,
      #admin2KpiDetailModal .atlas-modal-side {
        flex: 0 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-content: center;
        gap: 10px 14px;
        width: 100%;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 14px 12px 16px;
      }
      #mainSummaryGrowthModal .atlas-modal-side-caption,
      #detailModal .atlas-modal-side-caption,
      :is(#customerLifecycleExplainModal, #stCrossExplainModal) .atlas-modal-side-caption,
      #customerTatDetailModal .atlas-modal-side-caption,
      #orgCompareSalesModal .atlas-modal-side-caption,
      #admin2KpiDetailModal .atlas-modal-side-caption {
        width: 100%;
        text-align: center;
        white-space: normal;
      }
    }

    .wip-feature-modal-head.modal-head {
      padding: 18px 18px 14px 20px;
      border-bottom: 1px solid var(--line);
      align-items: flex-start;
      margin-bottom: 0;
    }

    .wip-feature-modal-head-text {
      min-width: 0;
      flex: 1 1 auto;
      padding-right: 8px;
    }

    .wip-feature-modal-head h3 {
      margin: 0 0 12px;
      font-size: clamp(2.125rem, 5.5vw, 3.15rem);
      font-weight: 900;
      letter-spacing: -0.04em;
      line-height: 1.12;
      color: color-mix(in srgb, var(--primary) 78%, var(--text) 22%);
      max-width: 100%;
      text-shadow: 0 1px 0 color-mix(in srgb, var(--panel-surface, #fff) 40%, transparent);
    }

    .wip-feature-modal-tagline {
      margin: 0;
      font-size: clamp(16px, 2.1vw, 20px);
      line-height: 1.45;
      color: color-mix(in srgb, var(--text) 88%, var(--muted) 12%);
      font-weight: 700;
      max-width: 100%;
    }

    .wip-feature-modal-body {
      padding: 18px 20px 20px;
      margin: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
      position: relative;
      z-index: 1;
    }

    .wip-feature-modal-points {
      margin: 0 0 16px;
      padding: 16px 18px 16px 1.5rem;
      font-size: clamp(15px, 1.85vw, 17px);
      font-weight: 600;
      line-height: 1.55;
      color: var(--text);
      background: color-mix(in srgb, var(--primary) 8%, var(--panel));
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--primary) 14%, var(--line));
    }

    .wip-feature-modal-points li {
      margin-bottom: 8px;
    }

    .wip-feature-modal-points li:last-child {
      margin-bottom: 0;
    }

    .wip-feature-modal-desc {
      margin: 0 0 18px;
      padding: 16px 18px;
      font-size: clamp(15px, 1.9vw, 18px);
      line-height: 1.55;
      color: color-mix(in srgb, var(--text) 55%, var(--muted) 45%);
      font-weight: 500;
      text-align: left;
      background: color-mix(in srgb, var(--panel-2, var(--panel)) 100%, transparent);
      border-radius: 10px;
      border: 1px solid var(--line);
      border-left: 4px solid var(--primary);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    }

    /* 체크박스 + 문구 + 알겠습니다 한 줄 */
    .wip-feature-modal-footer {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px 18px;
      margin: 0;
      padding-top: 4px;
    }

    .wip-feature-modal-snooze {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      margin: 0;
      min-width: 0;
      flex: 1 1 auto;
      font-size: clamp(14px, 1.75vw, 17px);
      line-height: 1.35;
      color: var(--text);
      font-weight: 600;
      cursor: pointer;
      user-select: none;
    }

    .wip-feature-modal-snooze input {
      margin: 0;
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      cursor: pointer;
    }

    .wip-feature-modal-snooze span {
      min-width: 0;
    }

    .wip-feature-modal-ok.btn-primary {
      flex-shrink: 0;
      min-width: 128px;
      padding: 12px 24px;
      font-weight: 800;
      font-size: clamp(15px, 1.8vw, 17px);
      border-radius: 12px;
    }

    @media (max-width: 480px) {
      .wip-feature-modal-footer {
        gap: 8px 10px;
      }
      .wip-feature-modal-snooze {
        font-size: 13px;
        gap: 8px;
      }
      .wip-feature-modal-snooze input {
        width: 20px;
        height: 20px;
      }
      .wip-feature-modal-ok.btn-primary {
        min-width: 104px;
        padding: 10px 14px;
        font-size: 14px;
      }
    }

    #wipFeatureModal .wip-feature-modal-head .modal-close {
      width: 48px;
      height: 48px;
      font-size: 28px;
      flex-shrink: 0;
    }

    @media (max-width: 480px) {
      .wip-feature-modal-shell {
        flex-direction: column;
      }
      .wip-feature-modal-side {
        flex: none;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        border-right: none;
        border-bottom: 1px solid var(--line);
        padding: 16px;
      }
      .wip-feature-modal-side-caption {
        width: 100%;
        order: 3;
      }
      .wip-feature-modal-head h3,
      .wip-feature-modal-tagline {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
      }
    }

    .modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.50);
      backdrop-filter: blur(6px);
    }

    /* WIP 안내 모달 딤 배경에도 문구 강조 */
    #wipFeatureModal .modal-backdrop.wip-feature-modal-backdrop {
      overflow: hidden;
    }
    #wipFeatureModal .modal-backdrop.wip-feature-modal-backdrop::after {
      content: "개발 중 · 업데이트 예정";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) rotate(-11deg);
      font-size: min(18vw, 7.5rem);
      font-weight: 900;
      letter-spacing: 0.1em;
      white-space: nowrap;
      pointer-events: none;
      user-select: none;
      color: rgba(255, 255, 255, 0.085);
      text-shadow: 0 0 0.75em rgba(255, 255, 255, 0.06);
    }

    .modal-card {
      position: relative;
      width: min(1120px, 100%);
      max-height: 88vh;
      overflow: auto;
      padding: 20px;
      border-radius: 32px;
      background: var(--panel-strong);
      box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
      border: 1px solid var(--panel-border);
    }

    .modal-card::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent 26%);
      pointer-events: none;
    }

    .modal-head {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      margin-bottom: 16px;
    }

    .modal-head h3 {
      margin: 0;
      font-size: 22px;
    }

    .modal-close {
      width: 40px;
      height: 40px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: var(--panel-surface);
      cursor: pointer;
      font-size: 22px;
      line-height: 1;
    }

    /* 새 모달 헤더: 타이틀 + 필터/부제 한 줄(필요 시 줄바꿈) — 세로 점유 최소화 */
    .modal-head-primary {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-items: baseline;
      column-gap: 10px;
      row-gap: 2px;
      flex: 1 1 auto;
      min-width: 0;
      overflow-wrap: anywhere;
      word-break: break-word;
    }
    .modal-head-primary > h3 {
      margin: 0;
      flex: 0 1 auto;
      min-width: 0;
    }
    .modal-head-primary > .mini-note {
      margin: 0 !important;
      flex: 1 1 12rem;
      min-width: min(12rem, 100%);
      max-width: 100%;
      font-size: 13px;
      line-height: 1.35;
      color: var(--muted);
      white-space: normal;
    }
    .modal-head-primary > .mini-note:not(:empty)::before {
      content: "·";
      margin-right: 0.35em;
      font-weight: 800;
      color: color-mix(in srgb, var(--muted) 55%, var(--line));
    }

    .modal-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 14px;
    }

    .modal-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 14px;
    }

    .modal-mini {
      padding: 14px;
      border-radius: 20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.88), rgba(245,240,232,0.94));
      border: 1px solid var(--line-2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
    }

    .modal-mini strong {
      display: block;
      margin-top: 8px;
      font-size: 22px;
      letter-spacing: -0.03em;
    }

    /* 거래처/모델 drill-down(#detailModal): KPI 4열 1행 · 시사점 전폭 · 차트 5:5 · 하단 테이블 */
    #detailModal .detail-modal-body {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    #detailModal .detail-modal-body > .modal-section,
    #detailModal .detail-modal-body > .detail-modal-chart-split {
      margin-top: 0;
    }
    #detailModal .modal-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 0;
      align-items: stretch;
      min-width: 0;
      --kpi-grid-col-emoji: 28px;
      --kpi-emoji-box: 28px;
      --kpi-emoji-fs: 0.95rem;
      --kpi-card-pad-x: 6px;
      --kpi-card-pad-left: 6px;
      --kpi-card-pad-y: 8px;
    }
    #detailModal .modal-kpis .mini-kpi-card {
      min-height: 0;
      min-width: 0;
    }
    #detailModal .modal-kpis .mini-kpi-card__value {
      font-size: clamp(13px, 1.05vw, 17px);
    }
    #detailModal .modal-kpis .mini-kpi-card__value select {
      width: 100%;
      max-width: 100%;
      margin-top: 2px;
      padding: 1px 8px 2px;
      font-size: 13px;
      font-weight: 700;
      line-height: 1.2;
      min-height: 0;
      height: auto;
      border-radius: 8px;
      border: 1px solid var(--line-2);
      background: var(--panel-surface);
      color: var(--text);
      box-sizing: border-box;
    }
    #detailModal .detail-modal-insight .modal-note {
      font-size: 17px;
      line-height: 1.65;
    }
    #detailModal .detail-modal-mix-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }
    #detailModal .detail-modal-mix-head h4 {
      margin: 0;
    }
    #detailModal .detail-modal-mix-toggle {
      display: inline-flex;
      gap: 6px;
      flex-shrink: 0;
    }
    #detailModal .detail-modal-mix-btn {
      padding: 4px 12px;
      font-size: 13px;
      font-weight: 700;
      border-radius: 999px;
      border: 1px solid var(--line-2);
      background: var(--panel-surface);
      color: var(--muted);
      cursor: pointer;
    }
    #detailModal .detail-modal-mix-btn.is-active {
      background: color-mix(in srgb, var(--primary) 18%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--primary) 42%, var(--line-2));
      color: var(--text);
    }
    /* 상세 모달 #modalMix: 거래처·제품 비중 — product-donut-redesign(거래처 탭과 동일) + 좁은 스택 범례 */
    #detailModal .detail-modal-mix-donut-host {
      flex: 1 1 0;
      min-height: 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      overflow: visible;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-redesign {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: flex-start;
      gap: 8px;
      width: 100%;
      flex: 1 1 0;
      min-height: 220px;
      max-height: 100%;
      padding: 2px 0 0;
      box-sizing: border-box;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-redesign:has(.product-donut-rd__viz--slice-labels) {
      overflow: visible;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__viz.product-donut-rd__viz--slice-labels {
      overflow: visible;
      z-index: 0;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__viz {
      position: relative;
      flex: 1 1 0;
      width: auto;
      min-width: 0;
      max-width: min(280px, 58%);
      aspect-ratio: 1;
      align-self: center;
    }
    @supports (container-type: size) {
      #detailModal .detail-modal-mix-donut-host .product-donut-rd__viz {
        container-type: size;
        container-name: product-donut-rd;
      }
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__ring-shell {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      padding: 5px;
      background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 70%, var(--muted-2) 30%), var(--panel));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--line-2) 85%, transparent),
        0 14px 32px color-mix(in srgb, var(--text) 8%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
    }
    body[data-theme="dark"] #detailModal .detail-modal-mix-donut-host .product-donut-rd__ring-shell {
      background: linear-gradient(165deg, color-mix(in srgb, var(--panel) 55%, #0f172a), var(--panel));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--line-2) 90%, transparent),
        0 16px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__ring-glow {
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 28%, transparent), transparent 72%);
      pointer-events: none;
      z-index: 0;
      opacity: 0.85;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__ring {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__core {
      position: absolute;
      inset: 21%;
      border-radius: 50%;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6px 8px;
      background: var(--panel);
      border: 1px solid color-mix(in srgb, var(--line-2) 92%, transparent);
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
        0 6px 18px color-mix(in srgb, var(--text) 7%, transparent);
    }
    body[data-theme="dark"] #detailModal .detail-modal-mix-donut-host .product-donut-rd__core {
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
        0 8px 22px rgba(0, 0, 0, 0.35);
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__kicker {
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1.2;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__pct {
      font-size: clamp(22px, 5.5cqw, 30px);
      font-weight: 900;
      letter-spacing: -0.04em;
      color: var(--text);
      line-height: 1.05;
      margin: 2px 0 1px;
      font-variant-numeric: tabular-nums;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__pct-unit {
      font-size: 0.55em;
      font-weight: 800;
      opacity: 0.75;
      margin-left: 1px;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__name {
      font-size: 12px;
      font-weight: 700;
      color: color-mix(in srgb, var(--text) 88%, var(--primary) 12%);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.25;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__foot {
      font-size: 10px;
      font-weight: 600;
      color: var(--muted);
      margin-top: 3px;
      line-height: 1.35;
      max-width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-redesign--legend-stack .product-donut-rd__legend {
      flex: 0 0 auto;
      width: min(160px, 32%);
      max-width: 160px;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      justify-content: center;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 2px 0 2px 2px;
      max-height: 100%;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd-row--stack {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 6px;
      min-width: 0;
      padding: 5px 6px;
      border-radius: 9px;
      background: color-mix(in srgb, var(--panel) 92%, var(--muted-2) 8%);
      border: 1px solid color-mix(in srgb, var(--line-2) 80%, transparent);
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd-row--stack .product-donut-rd-swatch {
      flex: 0 0 10px;
      width: 10px;
      height: 10px;
      border-radius: 3px;
      margin-top: 2px;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd-label--stack {
      flex: 1 1 0;
      min-width: 0;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.35;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd-stack-nums {
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      gap: 1px;
      text-align: right;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd-stack-nums .product-donut-rd-amt {
      font-size: 11px;
      font-weight: 800;
      line-height: 1.2;
      white-space: nowrap;
      color: var(--text);
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd-pct--stack {
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      line-height: 1.15;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__slice-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
      pointer-events: none;
      overflow: visible;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__slice-text {
      font-family: system-ui, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
      font-weight: 800;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__slice-name {
      font-size: 4.35px;
      fill: #fff;
      paint-order: stroke fill;
      stroke: rgba(0, 0, 0, 0.42);
      stroke-width: 0.45px;
    }
    #detailModal .detail-modal-mix-donut-host .product-donut-rd__slice-pct {
      font-size: 3.9px;
      fill: rgba(255, 255, 255, 0.98);
      paint-order: stroke fill;
      stroke: rgba(0, 0, 0, 0.38);
      stroke-width: 0.35px;
    }
    body[data-theme="dark"] #detailModal .detail-modal-mix-donut-host .product-donut-rd__slice-name,
    body[data-theme="dark"] #detailModal .detail-modal-mix-donut-host .product-donut-rd__slice-pct {
      stroke: rgba(0, 0, 0, 0.58);
    }
    #detailModal svg .chart-datalabel {
      font-size: 16px !important;
    }
    #detailModal svg .axis text {
      font-size: 17px !important;
    }
    #detailModal svg .label {
      font-size: 18px !important;
    }
    #detailModal .detail-modal-chart-split {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      align-items: stretch;
      min-width: 0;
    }
    #detailModal .detail-modal-chart-split .modal-section {
      margin-top: 0;
      min-width: 0;
    }
    #detailModal .detail-modal-chart-trend .chart-box.compact {
      min-height: 300px;
    }
    #detailModal .detail-modal-chart-mix #modalMix {
      min-height: 220px;
    }
    #detailModal .detail-modal-records .record-table {
      max-height: min(42vh, 420px);
      overflow: auto;
    }
    @media (max-width: 1100px) {
      #detailModal .modal-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      #detailModal .detail-modal-chart-split {
        grid-template-columns: 1fr;
      }
    }

    .modal-section {
      margin-top: 12px;
      padding: 16px;
      border-radius: 22px;
      background:
        linear-gradient(180deg, rgba(255,255,255,0.82), rgba(248,244,237,0.92));
      border: 1px solid var(--line-2);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
    }

    .modal-section h4 {
      margin: 0 0 10px;
      font-size: 15px;
    }

    .modal-note {
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      line-height: 1.7;
    }

    /* ========== 다크 테마 (Insight Overview 스타일: 딥 그레이 + 퍼플/그린 악센트) ========== */

    #view-main-summary {
      position: relative;
      padding: 0;
      background: #06131f;
      color: #e6eef8;
      overflow: hidden;
      /* 메인요약 뷰 전체 텍스트 기본 크기를 키워 가독성 강화 */
      font-size: 16px;
      line-height: 1.6;
    }
    #view-main-summary::before {
      content: none;
    }
    #view-main-summary .main-summary-shell {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto var(--ms-ticker-row);
      gap: var(--ms-shell-gap);
      width: 100%;
      height: var(--erp-visible-vh, 100vh);
      min-height: var(--erp-visible-vh, 100vh);
      padding: var(--ms-shell-pad-block) var(--ms-shell-pad-inline) var(--ms-shell-pad-bottom);
      box-sizing: border-box;
      background: transparent;
    }
    #view-main-summary .main-summary-bg {
      display: none;
    }
    #view-main-summary .main-summary-orb {
      display: none;
    }
    #view-main-summary .main-summary-orb.orb-a {
      width: 260px;
      height: 260px;
      left: -40px;
      top: 80px;
      background: radial-gradient(circle, rgba(16,185,129,0.34) 0%, rgba(16,185,129,0) 72%);
    }
    #view-main-summary .main-summary-orb.orb-b {
      width: 320px;
      height: 320px;
      right: -80px;
      top: 30px;
      background: radial-gradient(circle, rgba(56,189,248,0.32) 0%, rgba(56,189,248,0) 74%);
      animation-delay: -7s;
    }
    #view-main-summary .main-summary-bg-grid {
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(148,163,184,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148,163,184,0.05) 1px, transparent 1px);
      background-size: 24px 24px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.5), transparent 94%);
    }
    #view-main-summary {
      --ms-title: #f8fbff;
      --ms-sub: #9fb2c8;
      --ms-kicker: rgba(148, 163, 184, 0.74);
      --ms-panel-bg: #081320;
      --ms-panel-border: rgba(71, 85, 105, 0.44);
      --ms-surface: #0f172a;
      --ms-surface-strong: #09111d;
      --ms-surface-soft: rgba(15, 23, 42, 0.38);
      --ms-line: #334155;
      --ms-line-strong: #233244;
      --ms-accent: #38bdf8;
      --ms-accent-2: #22c55e;
      --ms-accent-soft: rgba(56, 189, 248, 0.18);
      --ms-text: #f8fbff;
      --ms-text-2: #e2e8f0;
      --ms-text-3: #bfd3ea;
      --ms-text-4: #93a8bc;
      --ms-risk: #fda4af;
      --ms-warn: #fbbf24;
      --ms-warn-soft: rgba(251, 191, 36, 0.18);
      --ms-org-hover-bg: rgba(15, 23, 42, 0.38);
      --ms-org-active-bg: rgba(14, 165, 233, 0.12);
      --ms-goal-toggle-bg: rgba(15, 23, 42, 0.52);
      --ms-goal-toggle-border: #334155;
      --ms-goal-select-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.80), rgba(30, 41, 59, 0.94));
      --ms-goal-select-hover-bg: linear-gradient(180deg, rgba(15, 23, 42, 0.86), rgba(30, 41, 59, 0.98));
      --ms-goal-select-text: #f8fbff;
      --ms-goal-select-icon: #cbd5e1;
      --ms-ref-label-text: #fecaca;
      --ms-ref-label-bg: rgba(127, 29, 29, 0.78);
      --ms-ref-label-border: rgba(248, 113, 113, 0.58);
      --ms-org-kind-bg: rgba(56, 189, 248, 0.18);
      --ms-org-kind-text: #bae6fd;
      --ms-customer-kind-bg: rgba(251, 191, 36, 0.18);
      --ms-customer-kind-text: #fde68a;
      --ms-period-badge-bg: rgba(51, 65, 85, 0.70);
      --ms-period-badge-text: #e2e8f0;
      --ms-ticker-bg: #08111b;
      --ms-ticker-text: #dbeafe;
      --ms-ticker-label: #7dd3fc;
      --ms-donut-rest: #334155;
      /* 하단 성장 카드 4슬롯: ①조직YoY ②거래처YoY ③외주시험비 ④D-1 매출 */
      --ms-gc1: #38bdf8;
      --ms-gc2: #fbbf24;
      --ms-gc3: #c084fc;
      --ms-gc4: #34d399;
      /* 스크롤 없는 메인 전용: 세로·가로 모두 줄면 패딩·간격·티커가 함께 축소 */
      --ms-shell-pad-block: clamp(8px, 2vmin, 18px);
      --ms-shell-pad-inline: clamp(10px, 2.2vmin, 18px);
      --ms-shell-pad-bottom: clamp(6px, 1.4vmin, 14px);
      --ms-shell-gap: clamp(6px, 1.5vmin, 14px);
      --ms-grid-gap: clamp(6px, 1.4vmin, 14px);
      --ms-panel-pad-x: clamp(10px, 2vmin, 16px);
      --ms-panel-pad-y: clamp(8px, 1.7vmin, 16px);
      --ms-panel-radius: clamp(14px, 2.2vmin, 22px);
      --ms-ticker-row: clamp(40px, min(7.5vh, 9vmin), 54px);
    }
    #view-main-summary .glass-panel {
      position: relative;
      border: 1px solid var(--ms-panel-border);
      background: var(--ms-panel-bg);
      box-shadow: none;
      backdrop-filter: none;
      overflow: hidden;
    }
    #view-main-summary .glass-panel::before {
      content: none;
    }
    body[data-theme="white"] #view-main-summary {
      background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 36%),
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.11), transparent 30%),
        radial-gradient(circle at 50% 100%, rgba(125, 211, 252, 0.09), transparent 45%),
        linear-gradient(180deg, #f0f9ff 0%, #dbeafe 100%);
    }
    body[data-theme="white"] #view-main-summary {
      --ms-title: #18324c;
      --ms-sub: #3f6281;
      --ms-kicker: rgba(60, 90, 116, 0.80);
      --ms-panel-bg: rgba(251, 253, 255, 0.96);
      --ms-panel-border: rgba(173, 193, 217, 0.60);
      --ms-surface: #eef5fb;
      --ms-surface-strong: #ffffff;
      --ms-surface-soft: rgba(220, 234, 247, 0.64);
      --ms-line: rgba(130, 160, 190, 0.80);
      --ms-line-strong: rgba(155, 180, 208, 0.86);
      --ms-text: #17324d;
      --ms-text-2: #244666;
      --ms-text-3: #45698d;
      --ms-text-4: #5a7a98;
      --ms-risk: #b91c1c;
      --ms-warn: #b45309;
      --ms-warn-soft: rgba(180, 83, 9, 0.12);
      --ms-org-hover-bg: rgba(220, 235, 248, 0.78);
      --ms-org-active-bg: rgba(14, 165, 233, 0.10);
      --ms-goal-toggle-bg: rgba(233, 242, 250, 0.96);
      --ms-goal-toggle-border: rgba(173, 193, 217, 0.78);
      --ms-goal-select-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(237,244,250,0.98));
      --ms-goal-select-hover-bg: linear-gradient(180deg, rgba(255,255,255,1), rgba(228,240,250,1));
      --ms-goal-select-text: #17324d;
      --ms-goal-select-icon: #3f6281;
      --ms-ref-label-text: #7f1d1d;
      --ms-ref-label-bg: rgba(254, 226, 226, 0.96);
      --ms-ref-label-border: rgba(248, 113, 113, 0.44);
      --ms-org-kind-bg: rgba(14, 165, 233, 0.12);
      --ms-org-kind-text: #0369a1;
      --ms-customer-kind-bg: rgba(217, 119, 6, 0.12);
      --ms-customer-kind-text: #78350f;
      --ms-period-badge-bg: rgba(220, 228, 238, 0.98);
      --ms-period-badge-text: #1e3a50;
      --ms-ticker-bg: #d8e9f5;
      --ms-ticker-text: #1a3a56;
      --ms-ticker-label: #025e8e;
      --ms-donut-rest: #b8ccde;
      --ms-gc1: #2563eb;
      --ms-gc2: #d97706;
      --ms-gc3: #0d9488;
      --ms-gc4: #7c3aed;
    }
    body[data-theme="dark"] #view-main-summary {
      background:
        radial-gradient(circle at top right, rgba(30, 64, 175, 0.24), transparent 34%),
        radial-gradient(circle at top left, rgba(2, 132, 199, 0.18), transparent 28%),
        linear-gradient(180deg, #020617 0%, #0f172a 100%);
    }
    body[data-theme="dark"] #view-main-summary .glass-panel {
      background: rgba(2, 6, 23, 0.94);
      border-color: rgba(51, 65, 85, 0.80);
    }
    body[data-theme="dark"] #view-main-summary .main-summary-title-heading,
    body[data-theme="dark"] #view-main-summary .main-summary-title-sub,
    body[data-theme="dark"] #view-main-summary .main-summary-header-tools label {
      color: #e2e8f0;
    }
    body[data-theme="dark"] #view-main-summary .main-summary-header-tools select {
      background: rgba(15, 23, 42, 0.96);
      border-color: rgba(71, 85, 105, 0.80);
      color: #f8fafc;
    }
    body[data-theme="dark"] #view-main-summary {
      --ms-gc1: #818cf8;
      --ms-gc2: #38bdf8;
      --ms-gc3: #f0abfc;
      --ms-gc4: #4ade80;
    }
    /* warm = UI 라벨「화이트」— 이전 쿨톤(white) 메인요약과 동일 */
    body[data-theme="warm"] #view-main-summary {
      background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.10), transparent 34%),
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 28%),
        linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    }
    body[data-theme="warm"] #view-main-summary {
      --ms-title: #18324c;
      --ms-sub: #3f6281;
      --ms-kicker: rgba(60, 90, 116, 0.80);
      --ms-panel-bg: rgba(251, 253, 255, 0.96);
      --ms-panel-border: rgba(173, 193, 217, 0.60);
      --ms-surface: #eef5fb;
      --ms-surface-strong: #ffffff;
      --ms-surface-soft: rgba(220, 234, 247, 0.64);
      --ms-line: rgba(130, 160, 190, 0.80);
      --ms-line-strong: rgba(155, 180, 208, 0.86);
      --ms-text: #17324d;
      --ms-text-2: #244666;
      --ms-text-3: #45698d;
      --ms-text-4: #5a7a98;
      --ms-risk: #b91c1c;
      --ms-warn: #b45309;
      --ms-warn-soft: rgba(180, 83, 9, 0.12);
      --ms-org-hover-bg: rgba(220, 235, 248, 0.78);
      --ms-org-active-bg: rgba(14, 165, 233, 0.10);
      --ms-goal-toggle-bg: rgba(233, 242, 250, 0.96);
      --ms-goal-toggle-border: rgba(173, 193, 217, 0.78);
      --ms-goal-select-bg: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(237,244,250,0.98));
      --ms-goal-select-hover-bg: linear-gradient(180deg, rgba(255,255,255,1), rgba(228,240,250,1));
      --ms-goal-select-text: #17324d;
      --ms-goal-select-icon: #3f6281;
      --ms-ref-label-text: #7f1d1d;
      --ms-ref-label-bg: rgba(254, 226, 226, 0.96);
      --ms-ref-label-border: rgba(248, 113, 113, 0.44);
      --ms-org-kind-bg: rgba(14, 165, 233, 0.12);
      --ms-org-kind-text: #0369a1;
      --ms-customer-kind-bg: rgba(217, 119, 6, 0.12);
      --ms-customer-kind-text: #78350f;
      --ms-period-badge-bg: rgba(220, 228, 238, 0.98);
      --ms-period-badge-text: #1e3a50;
      --ms-ticker-bg: #d8e9f5;
      --ms-ticker-text: #1a3a56;
      --ms-ticker-label: #025e8e;
      --ms-donut-rest: #b8ccde;
      --ms-gc1: #2563eb;
      --ms-gc2: #d97706;
      --ms-gc3: #0d9488;
      --ms-gc4: #7c3aed;
    }
    /* 화이트 테마: 메인요약 상단 헤더 — 상단 크롬과 동일한 다크 띠 + 흰색 타이틀 */
    body[data-theme="white"] #view-main-summary .main-summary-local-header {
      background: var(--hero-header-surface);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
    }
    body[data-theme="white"] #view-main-summary .main-summary-local-header .main-summary-title-heading {
      color: #ffffff !important;
      font-family: "Sora", "Noto Sans KR", sans-serif;
    }
    body[data-theme="white"] #view-main-summary .main-summary-local-header .main-summary-title-sub {
      color: rgba(255, 255, 255, 0.82) !important;
      font-family: "Sora", "Noto Sans KR", sans-serif;
    }
    body[data-theme="white"] #view-main-summary .main-summary-header-tools label {
      color: rgba(255, 255, 255, 0.9) !important;
    }
    body[data-theme="white"] #view-main-summary .main-summary-header-tools select,
    body[data-theme="white"] #view-main-summary .main-summary-header-tools .tooltip-toggle-btn {
      background: rgba(15, 23, 42, 0.4) !important;
      border-color: rgba(255, 255, 255, 0.22) !important;
      color: #f8fafc !important;
    }
    body[data-theme="white"] #view-main-summary .main-summary-header-tools .tooltip-toggle-btn.is-on {
      color: #93c5fd !important;
    }
    body[data-theme="warm"] #view-main-summary .main-summary-local-header {
      background: var(--hero-header-surface);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
    }
    body[data-theme="warm"] #view-main-summary .main-summary-local-header .main-summary-title-heading {
      color: #ffffff !important;
      font-family: "Sora", "Noto Sans KR", sans-serif;
    }
    body[data-theme="warm"] #view-main-summary .main-summary-local-header .main-summary-title-sub {
      color: rgba(255, 255, 255, 0.82) !important;
      font-family: "Sora", "Noto Sans KR", sans-serif;
    }
    body[data-theme="warm"] #view-main-summary .main-summary-header-tools label {
      color: rgba(255, 255, 255, 0.9) !important;
    }
    body[data-theme="warm"] #view-main-summary .main-summary-header-tools select,
    body[data-theme="warm"] #view-main-summary .main-summary-header-tools .tooltip-toggle-btn {
      background: rgba(15, 23, 42, 0.4) !important;
      border-color: rgba(255, 255, 255, 0.22) !important;
      color: #f8fafc !important;
    }
    body[data-theme="warm"] #view-main-summary .main-summary-header-tools .tooltip-toggle-btn.is-on {
      color: #93c5fd !important;
    }
    #view-main-summary .main-summary-header {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 8px 14px;
      min-height: var(--app-header-bar-height);
      /* 좌우 로고(HCT/INNO) 영역만큼 안쪽 여백을 넉넉하게 주고, 내용은 가운데 정렬 */
      padding: 10px 96px;
      text-align: center;
    }
    /* 메인요약 헤더는 카드 테두리 없이, 3페이지 이후 헤더처럼 로고가 모서리에 붙은 띠 형태로 보이게 오버라이드 */
    #view-main-summary .main-summary-header.glass-panel {
      border: none;
      border-radius: 0;
      box-shadow: none;
      background: transparent;
    }
    #view-main-summary .main-summary-brand-strip {
      display: contents;
    }
    #view-main-summary .main-summary-brand-inner {
      display: contents;
    }
    #view-main-summary .main-summary-brand-center {
      display: none;
    }
    #view-main-summary .main-summary-header .page-header-logo {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      pointer-events: none;
      height: var(--app-header-logo-height);
      max-height: var(--app-header-logo-height);
      width: auto;
      object-fit: contain;
    }
    #view-main-summary .main-summary-header .page-header-logo.left {
      left: 14px;
    }
    #view-main-summary .main-summary-header .page-header-logo.right {
      right: 14px;
    }
    #view-main-summary .main-summary-kicker,
    #view-main-summary .panel-eyebrow {
      margin: 0 0 6px;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--ms-kicker);
    }
    #view-main-summary .main-summary-sub {
      margin: 0;
      max-width: none;
      font-size: 11px;
      color: var(--ms-sub);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      grid-column: 1;
    }
    /* 메인요약 로컬 헤더: 뷰포트 가로 전체 기준(로고/버튼과 무관) 가운데 타이틀 정렬 */
    #view-main-summary .main-summary-local-header {
      width: 100vw;
      max-width: 100vw;
      margin: calc(-1 * var(--ms-shell-pad-block)) calc(50% - 50vw) 0;
      position: relative;
      min-height: var(--app-header-bar-height);
      left: 0;
      box-sizing: border-box;
    }
    #view-main-summary .main-summary-header-inner {
      display: flex;
      align-items: center;
      min-height: var(--app-header-bar-height);
      height: var(--app-header-bar-height);
      width: 100%;
      padding: 0 6px;
      box-sizing: border-box;
      position: relative;
    }
    #view-main-summary .main-summary-local-header .cover-corner-logo {
      pointer-events: none;
      z-index: 2;
    }
    #view-main-summary .main-summary-left-nav-group {
      position: absolute;
      left: clamp(88px, 7.5vw, 136px);
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      gap: 8px;
      z-index: 4;
    }
    #view-main-summary .main-summary-left-nav-btn {
      height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.22);
      background: rgba(15, 23, 42, 0.4);
      color: #f8fafc;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: -0.01em;
      cursor: pointer;
      font-family: "Sora", "Noto Sans KR", sans-serif;
      box-sizing: border-box;
    }
    #view-main-summary .main-summary-left-nav-btn:hover {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(255, 255, 255, 0.38);
      color: #ffffff;
    }
    #view-main-summary .main-summary-header-tools {
      position: absolute;
      right: clamp(200px, 16vw + 120px, 280px);
      top: 50%;
      transform: translateY(-50%);
      z-index: 3;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      margin: 0;
    }
    #view-main-summary .main-summary-header-tools label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 700;
      color: var(--ms-sub);
      white-space: nowrap;
    }
    #view-main-summary .main-summary-header-tools select {
      height: 30px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--ms-line) 70%, transparent);
      background: var(--ms-panel-bg);
      color: var(--ms-text);
      padding: 0 10px;
      font-size: 12px;
      font-weight: 700;
    }
    #view-main-summary .main-summary-header-tools .tooltip-toggle-btn {
      height: 30px;
      padding: 0 11px;
      border-color: color-mix(in srgb, var(--ms-line) 74%, transparent);
      background: var(--ms-panel-bg);
      color: var(--ms-text);
      font-size: 12px;
    }
    #view-main-summary .main-summary-header-tools .tooltip-toggle-btn.is-on {
      border-color: color-mix(in srgb, var(--primary) 36%, var(--ms-line));
      background: color-mix(in srgb, var(--primary) 12%, var(--ms-panel-bg));
      color: var(--primary);
    }
    #view-main-summary .main-summary-header-tools .tooltip-toggle-btn.is-off {
      color: var(--ms-sub);
    }
    #view-main-summary .main-summary-title-center {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      text-align: center;
      pointer-events: none;
      z-index: 1;
      width: max-content;
      max-width: min(92vw, 720px);
    }
    #view-main-summary .main-summary-title-heading {
      margin: 0;
      font-size: clamp(16px, min(1.7vw, 2.1vh, 2vmin), 22px);
      font-weight: 800;
      letter-spacing: -0.02em;
      color: var(--ms-title);
      line-height: 1.2;
    }
    #view-main-summary .main-summary-title-sub {
      margin: 4px 0 0;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--ms-sub);
      line-height: 1.25;
    }

    #view-main-summary .main-summary-status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 30px;
      padding: 0 12px;
      border-radius: 999px;
      border: 1px solid #1f6b48;
      background: #123223;
      color: #9ae6b4;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      box-shadow: none;
    }
    #view-main-summary .main-summary-grid {
      display: grid;
      /* 3 : 4 : 3 비율로 열을 나눠 가운데 Goal 시각화를 더 크게 강조 */
      grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
      grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
      gap: var(--ms-grid-gap);
      min-height: 0;
    }
    #view-main-summary .main-summary-panel {
      border-radius: var(--ms-panel-radius);
      padding: var(--ms-panel-pad-y) var(--ms-panel-pad-x) calc(var(--ms-panel-pad-y) - 2px);
      min-height: 0;
      min-width: 0;
    }
    /* 조직 위젯: 헤더 고정 + 목록만 남은 높이에서 세로 스크롤 */
    #view-main-summary .main-summary-panel-org {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      align-content: stretch;
      min-height: 0;
    }
    #view-main-summary .main-summary-panel-hero {
      display: grid;
      align-content: stretch;
      min-height: 0;
    }
    /* GOAL: 헤더·하단 2×2는 auto, 링만 남는 세로(minmax)를 사용 — 창 높이 축소 시 겹침 방지 */
    #view-main-summary .main-summary-panel-hero {
      grid-template-rows: auto minmax(0, 1fr) auto;
    }
    #view-main-summary .main-summary-panel-org { grid-column: 1; grid-row: 1 / span 2; }
    #view-main-summary .main-summary-panel-hero { grid-column: 2; grid-row: 1 / span 2; }
    /* 거래처 도넛 차트: 3열 1행 */
    #view-main-summary .main-summary-panel-share { grid-column: 3; grid-row: 1; }
    /* 신규·리스크 거래처 카드: 3열 2행 */
    #view-main-summary .main-summary-panel-customer { grid-column: 3; grid-row: 2; }
    #view-main-summary .main-summary-panel-customer {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
    }
    /* 신규·리스크: 타이틀은 패널 전체 너비 기준 가운데(우측 토글은 겹침 허용·클릭 유지) */
    #view-main-summary .main-summary-panel-customer .main-summary-panel-head.main-summary-cohort-panel-head {
      position: relative;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      flex-wrap: nowrap;
      min-width: 0;
    }
    #view-main-summary .main-summary-panel-customer .main-summary-cohort-panel-head .main-summary-panel-title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: max-content;
      max-width: min(100%, calc(100% - 7.5rem));
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      flex: none;
      min-width: 0;
    }
    #view-main-summary .main-summary-panel-customer .main-summary-cohort-panel-head .main-summary-panel-title h3 {
      text-align: center;
    }
    #view-main-summary .main-summary-cohort-basis-host {
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
      margin-left: auto;
    }
    #view-main-summary .main-summary-bottom { grid-column: 1 / -1; }
    #view-main-summary .main-summary-panel-head {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(6px, 1.2vmin, 10px);
      margin-bottom: clamp(6px, 1.2vmin, 12px);
      flex-wrap: nowrap;
      min-width: 0;
    }
    /* 위젯 타이틀: 헤더와 동일 — 한글(h3) 위 · 영문(.panel-eyebrow) 아래, 가운데 정렬 (추가 인사이트는 예외) */
    #view-main-summary .main-summary-panel-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-width: 0;
      flex: 1 1 auto;
      max-width: 100%;
      text-align: center;
    }
    #view-main-summary .main-summary-panel-title h3 {
      margin: 0;
      width: 100%;
      max-width: 100%;
      text-align: center;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
      font-size: clamp(15px, min(1.9vw, 2.2vh, 2vmin), 22px);
      font-weight: 800;
      line-height: 1.2;
      letter-spacing: -0.02em !important;
      color: var(--ms-title) !important;
    }
    #view-main-summary .main-summary-panel-title .panel-eyebrow {
      margin: 2px 0 0;
      flex-shrink: 0;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
      line-height: 1.25;
      text-align: center;
      /* 헤더 영문(.page-header-eyebrow)과 동일 계열: 그라데이션 텍스트 */
      color: transparent !important;
      background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(147, 210, 255, 0.95)) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
    body[data-theme="dark"] #view-main-summary .main-summary-panel-title .panel-eyebrow {
      background: linear-gradient(90deg, rgba(232, 160, 144, 0.95), rgba(196, 181, 253, 0.9)) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
    body[data-theme="white"] #view-main-summary .main-summary-panel-title .panel-eyebrow,
    body[data-theme="warm"] #view-main-summary .main-summary-panel-title .panel-eyebrow {
      background: linear-gradient(90deg, #0a4a6e, #0369a1, #0ea5e9) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      -webkit-text-fill-color: transparent !important;
    }
    #view-main-summary .main-summary-panel-share .main-summary-panel-title .main-summary-panel-title-row {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: auto;
      max-width: 100%;
    }
    #view-main-summary .main-summary-panel-share .main-summary-panel-title .main-summary-panel-title-row h3 {
      width: auto;
      text-align: center;
      white-space: nowrap;
    }
    #view-main-summary .main-summary-panel-share .main-summary-panel-title .main-summary-panel-subtitle-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--line), transparent 24%);
      background: color-mix(in srgb, var(--panel), transparent 10%);
      color: var(--ms-text-3, var(--muted));
      font-size: 11px;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -0.01em;
      white-space: nowrap;
    }
    /* 추가 인사이트: 한글 제목 + 영문 부제 한 줄 */
    #view-main-summary .main-summary-bottom .main-summary-panel-title {
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: baseline !important;
      justify-content: center !important;
      gap: 10px !important;
    }
    #view-main-summary .main-summary-bottom .main-summary-panel-title h3 {
      width: auto !important;
      flex-shrink: 0 !important;
      white-space: nowrap !important;
    }
    #view-main-summary .main-summary-bottom .main-summary-panel-title .panel-eyebrow {
      margin: 0 !important;
      flex-shrink: 0 !important;
      white-space: nowrap !important;
    }
    #view-main-summary .main-summary-panel-org .main-summary-panel-head,
    #view-main-summary .main-summary-panel-share .main-summary-panel-head,
    #view-main-summary .main-summary-panel-customer .main-summary-panel-head {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      text-align: center;
    }
    #view-main-summary .main-summary-panel-org .main-summary-panel-title,
    #view-main-summary .main-summary-panel-share .main-summary-panel-title,
    #view-main-summary .main-summary-panel-customer .main-summary-panel-title {
      flex: 0 1 auto;
      width: 100%;
    }
    #view-main-summary .main-summary-customer-share .main-summary-panel-head > .main-summary-bottom-meta {
      flex: 0 1 auto;
      margin: 0;
      max-width: min(320px, 88%);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 13px;
      font-weight: 700;
      color: var(--ms-text-3);
      align-self: center;
    }

    #view-main-summary .main-summary-panel-org .main-summary-panel-head.main-summary-org-headline {
      display: grid;
      grid-template-columns: 112px minmax(0, 1fr) 112px;
      align-items: center;
      gap: 10px 12px;
      text-align: center;
    }
    #view-main-summary .main-summary-panel-org .main-summary-org-headline .main-summary-panel-title {
      grid-column: 2;
      justify-content: center;
      flex: 0 1 auto;
      width: 100%;
      min-width: 0;
    }
    #view-main-summary .main-summary-panel-org .main-summary-org-headline .main-summary-panel-title h3 {
      text-align: center;
    }
    #view-main-summary .main-summary-panel-org .main-summary-org-headline .main-summary-org-toggle {
      grid-column: 3;
      justify-self: end;
      width: 112px;
      min-width: 112px;
      margin-left: 0;
    }

    #view-main-summary .main-summary-org-toggle {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px;
      border: 1px solid color-mix(in srgb, var(--ms-accent) 38%, transparent);
      border-radius: 999px;
      background: var(--ms-surface);
      flex-shrink: 0;
      margin-left: auto;
    }

    #view-main-summary .main-summary-org-toggle-btn {
      border: 0;
      background: transparent;
      color: var(--ms-text-3);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.06em;
      padding: 6px 10px;
      border-radius: 999px;
      cursor: pointer;
      transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    }

    #view-main-summary .main-summary-org-toggle-btn.is-active {
      background: linear-gradient(135deg, color-mix(in srgb, var(--ms-accent-2) 20%, transparent), color-mix(in srgb, var(--ms-accent) 20%, transparent));
      color: var(--ms-text);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-accent) 24%, transparent);
    }
    #view-main-summary .main-summary-goal-period-toggle {
      display: inline-flex;
      gap: 2px;
      padding: 2px;
      border-radius: 999px;
      background: var(--ms-goal-toggle-bg);
      border: 1px solid var(--ms-goal-toggle-border);
    }
    #view-main-summary .main-summary-goal-period-toggle .main-summary-org-toggle-btn {
      padding: 4px 10px;
      font-size: 12px;
    }
    #view-main-summary .main-summary-goal-controls {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    /* 메인·요약 목표: M 토글 옆 월 세부 — 라벨「월」+ 1월…12월 셀렉트 */
    .erp-goal-month-detail {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .erp-goal-month-detail__unit {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--muted, var(--ms-text-3, #64748b));
      line-height: 1;
      flex-shrink: 0;
    }
    #view-main-summary .erp-goal-month-detail__unit {
      color: var(--ms-text-3, var(--muted));
    }
    #view-main-summary .main-summary-goal-detail select {
      width: auto;
      min-width: 0;
      height: 32px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--ms-line) 70%, transparent);
      background: var(--ms-goal-select-bg);
      color: var(--ms-goal-select-text);
      font-size: 13px;
      font-weight: 700;
      padding: 0 28px 0 12px;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      background-image:
        var(--ms-goal-select-bg),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.1 6 7.9l3.8-3.8' fill='none' stroke='%23cbd5e1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, right 8px center;
      transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
    }
    #view-main-summary .main-summary-goal-detail select:hover {
      border-color: color-mix(in srgb, var(--ms-accent) 34%, transparent);
      background-image:
        var(--ms-goal-select-hover-bg),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.1 6 7.9l3.8-3.8' fill='none' stroke='%23e2e8f0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }
    #view-main-summary .main-summary-goal-detail select:focus {
      border-color: color-mix(in srgb, var(--ms-accent) 58%, transparent);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--ms-accent) 18%, transparent), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    }
    #view-main-summary .main-summary-panel-hero .main-summary-panel-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: clamp(4px, 1vmin, 8px);
      justify-content: stretch;
      align-items: center;
      margin-bottom: clamp(4px, 1vmin, 8px);
    }
    #view-main-summary .main-summary-panel-hero .main-summary-goal-controls {
      width: 100%;
      justify-content: flex-end;
      gap: 6px;
      margin-top: 0;
    }
    #view-main-summary .main-summary-link {
      border: 1px solid var(--ms-line);
      background: var(--ms-surface);
      color: var(--ms-text-3);
      font-size: 15px;
      font-weight: 700;
      padding: 8px 12px;
      border-radius: 999px;
      cursor: pointer;
    }
    #view-main-summary .main-summary-org-bars {
      display: grid;
      gap: clamp(6px, 1.2vmin, 10px);
      padding-top: 2px;
      /* 남는 세로 공간을 행 간격으로 늘리지 않음(그룹 4개만 있을 때 과도한 간격 방지) */
      align-content: start;
      min-height: 0;
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
      /* 스크롤은 되지만 트랙/썸 UI는 숨김 (오버레이 스크롤 느낌) */
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    #view-main-summary .main-summary-org-bars::-webkit-scrollbar {
      width: 0;
      height: 0;
      display: none;
      background: transparent;
    }
    #view-main-summary .main-summary-org-item {
      display: grid;
      gap: 6px;
      align-self: start;
      cursor: pointer;
      appearance: none;
      width: 100%;
      border: 1px solid transparent;
      border-radius: 14px;
      background: transparent;
      padding: 6px 8px;
      color: inherit;
      text-align: left;
      transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
    }
    #view-main-summary .main-summary-org-item:hover {
      border-color: var(--ms-line);
      background: var(--ms-org-hover-bg);
    }
    #view-main-summary .main-summary-org-item.is-active {
      border-color: var(--ms-accent);
      background: var(--ms-org-active-bg);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-accent) 20%, transparent);
    }
    #view-main-summary .main-summary-org-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      font-size: 16px;
    }
    #view-main-summary .main-summary-org-name {
      font-weight: 700;
      color: var(--ms-text-2);
      min-width: 0;
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #view-main-summary .main-summary-org-value {
      display: inline-flex;
      align-items: center;
      flex-shrink: 0;
      gap: 0;
      text-align: right;
      white-space: nowrap;
      line-height: 1.2;
      letter-spacing: -0.02em;
    }
    #view-main-summary .main-summary-org-ach {
      display: inline-block;
      padding: 3px 9px 4px;
      border-radius: 999px;
      font-size: clamp(12px, 1.95vw, 15px);
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--ms-title);
      background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--ms-accent) 38%, var(--ms-surface-strong)) 0%,
        color-mix(in srgb, var(--ms-accent-2) 26%, var(--ms-surface)) 100%
      );
      border: 1px solid color-mix(in srgb, var(--ms-accent) 52%, transparent);
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--ms-accent) 14%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
    }
    #view-main-summary .main-summary-org-item.is-active .main-summary-org-ach {
      border-color: color-mix(in srgb, var(--ms-accent) 68%, var(--ms-line-strong));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--ms-accent) 28%, transparent),
        0 2px 10px color-mix(in srgb, var(--ms-accent) 22%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 28%, transparent);
    }
    #view-main-summary .main-summary-org-tail {
      font-size: clamp(11px, 1.65vw, 13px);
      font-weight: 600;
      color: var(--ms-text-3);
    }
    #view-main-summary .main-summary-org-track {
      position: relative;
      height: 14px;
      margin-bottom: 18px;
      border-radius: 999px;
      background: var(--ms-surface);
      overflow: visible;
      border: 1px solid var(--ms-line-strong);
    }
    /* 2페이지 그룹/센터 게이지: 트랙 전체를 120% 스케일로 보고 100% 지점에 기준선 표시 */
    #view-main-summary .main-summary-org-ref-100 {
      position: absolute;
      left: 83.3333%;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--bad);
      z-index: 1;
      pointer-events: none;
      border-radius: 999px;
      box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.55);
    }
    #view-main-summary .main-summary-org-ref-label {
      position: absolute;
      left: 83.3333%;
      top: auto;
      bottom: -18px;
      transform: translateX(-50%);
      font-size: 10px;
      line-height: 1;
      font-weight: 800;
      color: var(--ms-ref-label-text);
      background: var(--ms-ref-label-bg);
      border: 1px solid var(--ms-ref-label-border);
      border-radius: 999px;
      padding: 2px 6px;
      white-space: nowrap;
      pointer-events: none;
      z-index: 2;
    }
    #view-main-summary .main-summary-org-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, color-mix(in srgb, var(--ms-accent) 94%, white 6%) 0%, var(--ms-accent) 34%, var(--ms-accent-2) 100%);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    }
    /* ── Hero Goal Ring (conic-gradient 복원 + 디자인 개선) ── */
    #view-main-summary .main-summary-hero-ring {
      box-sizing: border-box;
      width: min(340px, 90%, 42vmin, min(56vw, 48vh));
      max-width: 100%;
      max-height: 100%;
      min-height: 0;
      aspect-ratio: 1;
      border-radius: 50%;
      margin: 0 auto clamp(6px, 1.2vmin, 12px);
      padding: clamp(8px, 2.2vmin, 18px);
      display: grid;
      place-items: center;
      justify-self: center;
      align-self: center;
      /* JS가 conic-gradient로 덮어씀 — 초기 플레이스홀더 */
      background:
        radial-gradient(circle at center, var(--ms-surface-strong) 0 55%, transparent 56%),
        conic-gradient(var(--ms-accent) 0deg, var(--ms-accent-2) 180deg, var(--ms-donut-rest) 180deg 360deg);
      /* 다층 ring shadow로 두께감·깊이감 표현 */
      box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ms-accent) 18%, transparent),
        0 0 0 6px color-mix(in srgb, var(--ms-surface-strong) 60%, transparent),
        0 18px 44px rgba(0, 0, 0, 0.30);
      /* 게이지 각도는 JS(rAF)로만 갱신 — CSS transition과 이중 적용 방지 */
      transition: none;
    }
    #view-main-summary .main-summary-hero-core {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      display: grid;
      place-items: center;
      align-content: center;
      gap: 5px;
      background: var(--ms-surface-strong);
      box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--ms-line) 55%, transparent),
        inset 0 4px 14px rgba(0, 0, 0, 0.14);
      text-align: center;
    }
    #view-main-summary .main-summary-hero-core .hero-label {
      font-size: clamp(11px, min(1.9vmin, 2vh), 16px);
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ms-text-4);
      font-weight: 700;
    }
    #view-main-summary .main-summary-hero-core strong {
      font-size: clamp(28px, min(5.5vw, 7.5vh, 8vmin), 68px);
      line-height: 0.94;
      letter-spacing: -0.06em;
      color: var(--ms-title);
    }
    #view-main-summary .main-summary-hero-core .hero-sub {
      max-width: min(240px, 92%);
      font-size: clamp(12px, 1.65vmin, 15px);
      line-height: 1.4;
      color: var(--ms-text-3);
    }
    #view-main-summary .main-summary-hero-foot {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto auto;
      gap: 10px;
      width: 100%;
      margin-top: 0;
      margin-bottom: 0;
      align-items: stretch;
      justify-items: stretch;
      min-height: 0;
    }
    #view-main-summary .hero-metric {
      min-height: clamp(52px, 12vmin, 68px);
      border-radius: clamp(12px, 2vmin, 16px);
      padding: clamp(6px, 1.2vmin, 10px) clamp(8px, 1.4vmin, 12px) clamp(5px, 1vmin, 8px);
      background: var(--ms-surface);
      border: 1px solid var(--ms-line);
      display: grid;
      grid-template-rows: auto auto;
      align-content: center;
      justify-items: center;
      text-align: center;
      gap: clamp(4px, 1vmin, 6px);
    }
    #view-main-summary .hero-metric span {
      font-size: clamp(11px, 1.35vmin, 13px);
      line-height: 1.25;
      color: var(--ms-text-4);
    }
    #view-main-summary .hero-metric strong {
      font-size: clamp(17px, min(3.2vmin, 3.8vh), 24px);
      line-height: 1;
      color: var(--ms-title);
    }
    #view-main-summary .hero-metric-value-line {
      display: inline-flex;
      align-items: baseline;
      justify-content: center;
      gap: 6px;
      min-width: 0;
      white-space: nowrap;
    }
    #view-main-summary .hero-metric-gap-line {
      gap: 4px;
    }
    #view-main-summary .hero-metric-gap-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      line-height: 1;
      font-weight: 900;
      transform: translateY(-1px);
    }
    #view-main-summary .hero-metric-inline-name {
      max-width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
      font-weight: 700;
      color: var(--ms-text-3);
    }
    #view-main-summary .hero-metric-inline-name:not(:empty)::after {
      content: " -";
      color: var(--ms-text-4);
      margin-left: 2px;
    }
    #view-main-summary .hero-metric small {
      display: block;
      font-size: 12px;
      line-height: 1.3;
      color: var(--ms-text-3);
      font-weight: 600;
      word-break: keep-all;
    }
    #view-main-summary .main-summary-card-stack,
    #view-main-summary .main-summary-issue-list,
    #view-main-summary .main-summary-distribution {
      display: grid;
      gap: 10px;
      min-height: 0;
    }
    #view-main-summary .main-summary-panel-customer .main-summary-card-stack {
      height: 100%;
    }
    /* 분포 요약(main-summary-distribution)은 안쪽 그리드(main-summary-growth-grid)가
       4등분을 담당하므로, 자신은 블록 컨테이너로만 동작하게 강제 */
    #view-main-summary .main-summary-distribution {
      display: block;
      width: 100%;
    }
    #view-main-summary .main-summary-mini-card,
    #view-main-summary .main-summary-issue-item,
    #view-main-summary .main-summary-dist-item {
      border-radius: 16px;
      border: 1px solid var(--ms-line);
      background: var(--ms-surface);
      padding: 12px 14px;
      box-shadow: none;
    }
    #view-main-summary .main-summary-mini-card {
      display: grid;
      gap: 8px;
      cursor: pointer;
      text-align: left;
    }

    /* ── 신규·리스크 분할 카드 (전면 재설계) ── */
    .ms-customer-split-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
      width: 100%;
      height: 100%;
      min-height: 0;
      gap: 0;
    }
    .ms-customer-divider {
      background: var(--ms-line);
      margin: 0;
      align-self: stretch;
    }
    .ms-customer-half {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 10px 14px 14px;
      min-width: 0;
    }

    /* 신규·누락: TOP1 제외 상단 블록 전체 클릭 → 전체 원장 모달 */
    .ms-customer-cohort-all-hit {
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
    }

    /* 상단 헤더 레이블 */
    .ms-customer-half-head {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--ms-line);
      margin-bottom: 0;
    }
    .ms-customer-half-emoji { font-size: 16px; flex-shrink: 0; line-height: 1; }
    .ms-customer-half-head strong {
      font-size: 13px;
      font-weight: 800;
      color: var(--ms-text-4);
      letter-spacing: 0.12em;
      text-transform: uppercase;
      flex: 1;
      min-width: 0;
    }
    .ms-customer-half-badge {
      flex-shrink: 0;
      font-size: 12px;
      font-weight: 800;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid;
      line-height: 1.4;
    }
    .ms-badge-new {
      background: color-mix(in srgb, var(--ms-ok, #22c55e) 15%, var(--ms-surface-strong));
      color: color-mix(in srgb, var(--ms-ok, #22c55e) 80%, var(--ms-title));
      border-color: color-mix(in srgb, var(--ms-ok, #22c55e) 35%, transparent);
    }
    .ms-badge-risk {
      background: color-mix(in srgb, var(--ms-risk, #f87171) 15%, var(--ms-surface-strong));
      color: color-mix(in srgb, var(--ms-risk, #f87171) 80%, var(--ms-title));
      border-color: color-mix(in srgb, var(--ms-risk, #f87171) 35%, transparent);
    }

    .ms-cohort-clickable {
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.15s ease, box-shadow 0.15s ease;
    }
    .ms-cohort-clickable:hover {
      background: color-mix(in srgb, var(--ms-text-4) 10%, transparent);
    }
    .ms-cohort-clickable:focus-visible {
      outline: 2px solid var(--primary, #2563eb);
      outline-offset: 2px;
    }

    .ms-customer-hero {
      display: grid;
      gap: 8px;
    }
    .ms-customer-summary-line {
      display: flex;
      align-items: baseline;
      gap: 10px;
      min-width: 0;
      white-space: nowrap;
    }
    .ms-customer-summary-count,
    .ms-customer-summary-sales {
      font-size: 31px;
      font-weight: 800;
      line-height: 1;
      letter-spacing: -0.05em;
    }
    .ms-customer-summary-separator {
      font-size: 22px;
      font-weight: 700;
      color: var(--ms-text-4);
    }
    .ms-customer-summary-note {
      margin: 0;
      font-size: 13px;
      line-height: 1.4;
      color: var(--ms-text-3);
    }
    .ms-customer-new .ms-customer-summary-count,
    .ms-customer-new .ms-customer-summary-sales {
      color: color-mix(in srgb, var(--ms-ok, #22c55e) 90%, var(--ms-title));
    }
    .ms-customer-risk .ms-customer-summary-count,
    .ms-customer-risk .ms-customer-summary-sales {
      color: color-mix(in srgb, var(--ms-risk, #f87171) 90%, var(--ms-title));
    }

    /* 총계 행 */

    /* Top1 블록 */
    .ms-customer-top1 {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 12px 14px 13px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--ms-surface-strong) 70%, transparent);
      border: 1px solid var(--ms-line);
      min-width: 0;
      margin-top: auto;
      flex: 1 1 auto;
      justify-content: center;
    }
    .ms-customer-top1-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }
    .ms-customer-top1-label {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--ms-text-4);
      flex-shrink: 0;
      white-space: nowrap;
      line-height: 1.1;
    }
    .ms-customer-top1-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--ms-title);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
      flex: 1;
    }
    .ms-customer-top1-sales {
      font-size: 18px;
      font-weight: 800;
      white-space: nowrap;
    }
    .ms-customer-new .ms-customer-top1-sales {
      color: color-mix(in srgb, var(--ms-ok, #22c55e) 85%, var(--ms-title));
    }
    .ms-customer-risk .ms-customer-top1-sales {
      color: color-mix(in srgb, var(--ms-risk, #f87171) 85%, var(--ms-title));
    }
    .ms-customer-top1-org {
      font-size: 12px;
      font-weight: 600;
      color: var(--ms-text-4);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: right;
      flex: 1;
    }
    #view-main-summary .mini-card-head,
    #view-main-summary .issue-head,
    #view-main-summary .dist-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    #view-main-summary .mini-card-head strong,
    #view-main-summary .issue-head strong,
    #view-main-summary .dist-head strong {
      font-size: 17px;
      color: var(--ms-title);
      font-weight: 800;
    }
    #view-main-summary .mini-card-value,
    #view-main-summary .issue-value {
      font-size: 28px;
      line-height: 1;
      letter-spacing: -0.04em;
      color: color-mix(in srgb, var(--ms-accent-2) 54%, var(--ms-title) 46%);
      font-weight: 800;
    }
    #view-main-summary .main-summary-mini-card.is-risk .mini-card-value,
    #view-main-summary .main-summary-issue-item.is-risk .issue-value {
      color: var(--ms-risk);
    }
    #view-main-summary .mini-card-sub,
    #view-main-summary .issue-sub,
    #view-main-summary .dist-sub {
      font-size: 15px;
      line-height: 1.4;
      color: var(--ms-text-3);
    }
    #view-main-summary .issue-value {
      font-size: 21px;
      color: var(--ms-title);
    }
    #view-main-summary .main-summary-customer-share,
    #view-main-summary .main-summary-bottom {
      border-radius: var(--ms-panel-radius);
      padding: clamp(10px, 1.6vmin, 14px) var(--ms-panel-pad-x);
    }
    /* 도넛 영역은 별도 카드 안의 또 다른 카드가 아니라,
       바깥 glass-panel(main-summary-panel-share) 안에 내용만 들어가도록 최소화 */
    #view-main-summary .main-summary-customer-share {
      margin-top: 0;
      padding: 0;
      border-radius: 0;
      border: none;
      background: transparent;
    }
    #view-main-summary .main-summary-bottom-meta {
      font-size: 13px;
      color: var(--ms-text-4);
    }
    #view-main-summary .main-summary-growth-grid {
      display: grid;
      /* 1행 4열: 왼쪽 2장(조직), 오른쪽 2장(거래처) */
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: clamp(6px, 1.2vmin, 10px);
      align-items: stretch;
      width: 100%;
    }
    #view-main-summary .main-summary-growth-cell {
      min-width: 0;
      display: flex;
      align-items: stretch;
    }
    /* 가운데 그룹 경계: 2열과 3열 사이를 살짝 띄워서 좌/우 2장 구분 */
    #view-main-summary .main-summary-growth-cell:nth-child(3) {
      margin-left: 6px;
    }
    #view-main-summary .main-summary-growth-card {
      border-radius: clamp(12px, 2vmin, 16px);
      border: 1px solid var(--ms-line);
      background: color-mix(in srgb, var(--ms-surface) 92%, var(--ms-surface-strong) 8%);
      padding: clamp(6px, 1.2vmin, 10px) clamp(8px, 1.4vmin, 12px);
      display: grid;
      grid-template-rows: auto auto 1fr;
      gap: clamp(4px, 1vmin, 6px);
      min-height: clamp(72px, min(14vmin, 16vh), 90px);
      width: 100%;
      justify-items: center;
      text-align: center;
    }
    #view-main-summary .main-summary-growth-card .growth-emoji {
      font-size: 18px;
      line-height: 1;
      flex-shrink: 0;
    }
    #view-main-summary .main-summary-growth-card.growth-card-slot-1 {
      border-color: color-mix(in srgb, var(--ms-gc1) 42%, transparent);
      border-left: 5px solid var(--ms-gc1);
      background: linear-gradient(180deg, color-mix(in srgb, var(--ms-gc1) 16%, transparent), color-mix(in srgb, var(--ms-surface) 92%, var(--ms-surface-strong) 8%));
    }
    #view-main-summary .main-summary-growth-card.growth-card-slot-2 {
      border-color: color-mix(in srgb, var(--ms-gc2) 42%, transparent);
      border-left: 5px solid var(--ms-gc2);
      background: linear-gradient(180deg, color-mix(in srgb, var(--ms-gc2) 14%, transparent), color-mix(in srgb, var(--ms-surface) 92%, var(--ms-surface-strong) 8%));
    }
    #view-main-summary .main-summary-growth-card.growth-card-slot-3 {
      border-color: color-mix(in srgb, var(--ms-gc3) 42%, transparent);
      border-left: 5px solid var(--ms-gc3);
      background: linear-gradient(180deg, color-mix(in srgb, var(--ms-gc3) 14%, transparent), color-mix(in srgb, var(--ms-surface) 92%, var(--ms-surface-strong) 8%));
    }
    #view-main-summary .main-summary-growth-card.growth-card-slot-4 {
      border-color: color-mix(in srgb, var(--ms-gc4) 42%, transparent);
      border-left: 5px solid var(--ms-gc4);
      background: linear-gradient(180deg, color-mix(in srgb, var(--ms-gc4) 14%, transparent), color-mix(in srgb, var(--ms-surface) 92%, var(--ms-surface-strong) 8%));
    }
    #view-main-summary .growth-card-headline {
      display: grid;
      justify-items: center;
      gap: 6px;
      min-width: 0;
      width: 100%;
    }
    #view-main-summary .growth-card-headline .growth-meta {
      flex-shrink: 0;
      justify-content: center;
    }
    #view-main-summary .main-summary-growth-card .growth-label {
      font-size: clamp(11px, 1.45vmin, 14px);
      font-weight: 700;
      color: var(--ms-text-4);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
      width: 100%;
    }
    #view-main-summary .main-summary-growth-card .growth-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    #view-main-summary .main-summary-growth-card .growth-kind {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
    }
    #view-main-summary .main-summary-growth-card.growth-card-slot-1 .growth-kind {
      background: color-mix(in srgb, var(--ms-gc1) 20%, var(--ms-surface-strong));
      color: color-mix(in srgb, var(--ms-text) 78%, var(--ms-gc1) 22%);
      border: 1px solid color-mix(in srgb, var(--ms-gc1) 36%, transparent);
    }
    #view-main-summary .main-summary-growth-card.growth-card-slot-2 .growth-kind {
      background: color-mix(in srgb, var(--ms-gc2) 20%, var(--ms-surface-strong));
      color: color-mix(in srgb, var(--ms-text) 78%, var(--ms-gc2) 22%);
      border: 1px solid color-mix(in srgb, var(--ms-gc2) 36%, transparent);
    }
    #view-main-summary .main-summary-growth-card.growth-card-slot-3 .growth-kind {
      background: color-mix(in srgb, var(--ms-gc3) 20%, var(--ms-surface-strong));
      color: color-mix(in srgb, var(--ms-text) 78%, var(--ms-gc3) 22%);
      border: 1px solid color-mix(in srgb, var(--ms-gc3) 36%, transparent);
    }
    #view-main-summary .main-summary-growth-card.growth-card-slot-4 .growth-kind {
      background: color-mix(in srgb, var(--ms-gc4) 20%, var(--ms-surface-strong));
      color: color-mix(in srgb, var(--ms-text) 78%, var(--ms-gc4) 22%);
      border: 1px solid color-mix(in srgb, var(--ms-gc4) 36%, transparent);
    }
    #view-main-summary .main-summary-growth-card .growth-period-badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 3px 8px;
      font-size: 11px;
      font-weight: 800;
      color: var(--ms-period-badge-text);
      background: var(--ms-period-badge-bg);
      border: 1px solid color-mix(in srgb, var(--ms-line) 60%, transparent);
    }
    #view-main-summary .main-summary-growth-card .growth-main {
      display: flex;
      align-items: baseline;
      justify-content: center;
      gap: 4px;
      min-width: 0;
      white-space: nowrap;
      width: 100%;
    }
    #view-main-summary .main-summary-growth-card .growth-value {
      font-size: clamp(16px, min(3.5vmin, 4vh), 24px);
      font-weight: 800;
      color: var(--ms-title);
      letter-spacing: -0.02em;
      flex-shrink: 0;
    }
    #view-main-summary .main-summary-growth-card .growth-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--ms-title);
      min-width: 0;
      flex: 0 1 auto;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #view-main-summary .main-summary-growth-card .growth-sub {
      font-size: 15px;
      color: var(--ms-sub);
      text-align: center;
    }
    /* 전년동기 비교 줄 (조직/거래처 YoY 카드) — 이모지 + 부호% + vs 전년 동기 */
    #view-main-summary .main-summary-growth-card .growth-yoy-row {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px 8px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid color-mix(in srgb, var(--ms-line) 50%, transparent);
    }
    #view-main-summary .main-summary-growth-card .growth-yoy-emoji {
      font-size: 17px;
      line-height: 1;
      flex-shrink: 0;
    }
    #view-main-summary .main-summary-growth-card .growth-yoy-pct {
      font-size: 15px;
      font-weight: 800;
      letter-spacing: -0.02em;
      flex-shrink: 0;
    }
    #view-main-summary .main-summary-growth-card .growth-yoy-row.is-up .growth-yoy-pct {
      color: #0d9488;
    }
    #view-main-summary .main-summary-growth-card .growth-yoy-row.is-down .growth-yoy-pct {
      color: #e11d48;
    }
    #view-main-summary .main-summary-growth-card .growth-yoy-row.is-flat .growth-yoy-pct {
      color: var(--ms-text-3);
    }
    #view-main-summary .main-summary-growth-card .growth-yoy-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--ms-sub);
      letter-spacing: -0.01em;
    }
    #view-main-summary .main-summary-growth-card.is-positive {
      box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.22);
    }
    #view-main-summary .main-summary-growth-card.is-negative {
      box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.22);
    }
    #view-main-summary .main-summary-growth-card.is-neutral {
      opacity: 0.9;
    }
    #view-main-summary .main-summary-growth-card.is-empty {
      opacity: 0.7;
    }
    #view-main-summary .main-summary-growth-card.is-empty .growth-empty {
      font-size: 15px;
      color: var(--ms-text-4);
    }
    #view-main-summary .main-summary-growth-card--interactive {
      cursor: pointer;
      transition: transform 0.16s ease, box-shadow 0.16s ease;
    }
    #view-main-summary .main-summary-growth-card--interactive:hover {
      transform: translateY(-2px);
      box-shadow: 0 14px 32px rgba(15, 23, 42, 0.14);
    }
    #view-main-summary .main-summary-growth-card--interactive:focus-visible {
      outline: 2px solid var(--ms-accent);
      outline-offset: 3px;
    }
    #mainSummaryGrowthModal,
    #detailModal,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal),
    #customerTatDetailModal,
    #productCategoryDetailModal {
      z-index: 10050;
    }
    /* 메인요약 성장 카드 모달 · 거래처 브리핑 설명 모달: 블러 없음 · 헤더/본문 분리 · 테두리·팔레트 대비 */
    #mainSummaryGrowthModal .modal-backdrop,
    #detailModal .modal-backdrop,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-backdrop,
    #customerTatDetailModal .modal-backdrop,
    #productCategoryDetailModal .modal-backdrop {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    body[data-theme="white"] #mainSummaryGrowthModal .modal-backdrop,
    body[data-theme="white"] #detailModal .modal-backdrop,
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-backdrop,
    body[data-theme="white"] #customerTatDetailModal .modal-backdrop,
    body[data-theme="white"] #productCategoryDetailModal .modal-backdrop {
      background: linear-gradient(165deg, rgba(15, 23, 42, 0.62) 0%, rgba(30, 64, 175, 0.48) 50%, rgba(15, 23, 42, 0.58) 100%);
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .modal-backdrop,
    body[data-theme="dark"] #detailModal .modal-backdrop,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-backdrop,
    body[data-theme="dark"] #customerTatDetailModal .modal-backdrop,
    body[data-theme="dark"] #productCategoryDetailModal .modal-backdrop {
      background: radial-gradient(ellipse 140% 90% at 50% -20%, rgba(49, 46, 129, 0.6) 0%, rgba(0, 0, 0, 0.86) 50%, rgba(0, 0, 0, 0.94) 100%);
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .modal-backdrop,
    body[data-theme="warm"] #detailModal .modal-backdrop,
    body[data-theme="warm"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-backdrop,
    body[data-theme="warm"] #customerTatDetailModal .modal-backdrop,
    body[data-theme="warm"] #productCategoryDetailModal .modal-backdrop {
      background: linear-gradient(180deg, rgba(69, 42, 24, 0.62) 0%, rgba(41, 32, 25, 0.66) 50%, rgba(28, 20, 13, 0.72) 100%);
    }

    #mainSummaryGrowthModal .modal-card {
      width: min(1520px, calc(100vw - 16px));
      height: min(92vh, 920px);
      max-height: min(92vh, 920px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
      border-radius: 20px;
      border-width: 2px;
      border-style: solid;
    }
    #detailModal .modal-card {
      width: min(1180px, calc(100vw - 32px));
      height: min(90vh, 920px);
      max-height: min(90vh, 920px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
      border-radius: 20px;
      border-width: 2px;
      border-style: solid;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card {
      width: min(1580px, calc(100vw - 20px));
      height: min(94vh, 1000px);
      max-height: min(94vh, 1000px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
      border-radius: 20px;
      border-width: 2px;
      border-style: solid;
    }
    #customerTatDetailModal .modal-card,
    #productCategoryDetailModal .modal-card {
      width: min(1460px, calc(100vw - 20px));
      height: min(90vh, 880px);
      max-height: min(90vh, 880px);
      padding: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      min-height: 0;
      border-radius: 20px;
      border-width: 2px;
      border-style: solid;
    }
    #mainSummaryGrowthModal .modal-card::before,
    #detailModal .modal-card::before,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card::before,
    #customerTatDetailModal .modal-card::before,
    #productCategoryDetailModal .modal-card::before {
      border-radius: inherit;
    }
    body[data-theme="white"] #mainSummaryGrowthModal .modal-card::before,
    body[data-theme="white"] #detailModal .modal-card::before,
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card::before,
    body[data-theme="white"] #customerTatDetailModal .modal-card::before,
    body[data-theme="white"] #productCategoryDetailModal .modal-card::before {
      background: linear-gradient(180deg, rgba(239, 246, 255, 0.55), transparent 48%);
      opacity: 1;
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .modal-card::before,
    body[data-theme="dark"] #detailModal .modal-card::before,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card::before,
    body[data-theme="dark"] #customerTatDetailModal .modal-card::before,
    body[data-theme="dark"] #productCategoryDetailModal .modal-card::before {
      background: linear-gradient(180deg, rgba(99, 102, 241, 0.14), transparent 42%);
      opacity: 1;
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .modal-card::before,
    body[data-theme="warm"] #detailModal .modal-card::before,
    body[data-theme="warm"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card::before,
    body[data-theme="warm"] #customerTatDetailModal .modal-card::before,
    body[data-theme="warm"] #productCategoryDetailModal .modal-card::before {
      background: linear-gradient(180deg, rgba(254, 243, 199, 0.42), transparent 45%);
      opacity: 1;
    }
    #mainSummaryGrowthModal .modal-head,
    #detailModal .modal-head,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-head,
    #customerTatDetailModal .modal-head,
    #productCategoryDetailModal .modal-head {
      margin: 0;
      padding: 16px 18px 14px 20px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      border-bottom-width: 2px;
      border-bottom-style: solid;
      box-sizing: border-box;
      background: color-mix(in srgb, var(--panel, #ffffff) 88%, #0f172a 12%);
      border-bottom-color: color-mix(in srgb, var(--line, #cbd5e1) 76%, #0f172a 24%);
    }
    #mainSummaryGrowthModal .modal-head h3,
    #detailModal .modal-head h3,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-head h3,
    #customerTatDetailModal .modal-head h3,
    #productCategoryDetailModal .modal-head h3 {
      margin: 0;
      font-size: 1.22rem;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.2;
      /* 슬레이트(#0f172a 등)는 화면에서 회색으로 인지되는 경우多 → 라이트에서 순검에 가깝게 */
      color: #000000;
      text-shadow: none;
    }
    #mainSummaryGrowthModal #mainSummaryGrowthModalSubtitle,
    #detailModal #modalSubtitle,
    #customerLifecycleExplainModal #customerLifecycleExplainSubtitle,
    #stCrossExplainModal #stCrossExplainSubtitle,
    #customerTatDetailModal #customerTatDetailSubtitle,
    #productCategoryDetailModal #productCategoryDetailSubtitle {
      margin-top: 0;
      font-size: 13px;
      line-height: 1.35;
    }
    #mainSummaryGrowthModal .ms-growth-modal-body,
    #detailModal .ms-growth-modal-body,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .ms-growth-modal-body,
    #customerTatDetailModal .ms-growth-modal-body,
    #productCategoryDetailModal .ms-growth-modal-body {
      flex: 1 1 0%;
      min-height: 0;
      min-width: 0;
      padding: 18px 20px 22px;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .ms-growth-modal-body.customer-lifecycle-explain-body {
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    /* 브리핑 설명 전용: 타이틀·여백 확대(메인요약 성장·TAT 모달과 분리) */
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-head h3 {
      font-size: calc(1.22rem + 2px);
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) #customerLifecycleExplainSubtitle,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) #stCrossExplainSubtitle {
      font-size: 15px;
      line-height: 1.5;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .ms-growth-modal-body {
      padding: 20px 24px 26px;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .atlas-modal-side-badge {
      font-size: 16px;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .atlas-modal-side-caption {
      font-size: 15px;
      letter-spacing: 0.1em;
    }
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .atlas-modal-side-icon--emoji {
      font-size: calc(2.125rem + 2px);
    }
    #mainSummaryGrowthModal .ms-growth-modal-body > p.mini-note:first-child,
    #detailModal .ms-growth-modal-body > p.mini-note:first-child,
    :is(#customerLifecycleExplainModal, #stCrossExplainModal) .ms-growth-modal-body > p.mini-note:first-child,
    #customerTatDetailModal .ms-growth-modal-body > p.mini-note:first-child,
    #productCategoryDetailModal .ms-growth-modal-body > p.mini-note:first-child {
      margin-top: 0;
    }

    /* 제품 · 대분류 상세 모달 — KPI 2×4, 본문만 스크롤, 표는 .record-table(앱 공통) */
    #productCategoryDetailModal .product-category-detail-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #productCategoryDetailModal .product-category-detail-kpis {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--kpi-strip-gap, 10px);
      margin-top: 0;
      align-items: stretch;
    }
    @media (max-width: 900px) {
      #productCategoryDetailModal .product-category-detail-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 520px) {
      #productCategoryDetailModal .product-category-detail-kpis {
        grid-template-columns: 1fr;
      }
    }
    #productCategoryDetailModal .modal-section + .modal-section {
      margin-top: 14px;
    }
    #productCategoryDetailModal .modal-section + p.mini-note.product-category-detail-scope-note {
      margin-top: 12px;
    }
    #productCategoryDetailModal .modal-section .product-category-detail-subhead {
      margin: 0 0 8px;
    }
    #productCategoryDetailModal .record-table {
      max-height: min(320px, 38vh);
    }
    #productCategoryDetailModal .record-table:has(> table:only-child) > table tbody {
      max-height: min(260px, 32vh);
    }

    /* 거래처 · 제품군·TAT 상세 모달 본문 — KPI는 전역 .mini-kpi-card(제품·매출유형과 동일 토큰) */
    #customerTatDetailModal .customer-tat-detail-body {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #customerTatDetailModal .customer-tat-detail-kpi--wide {
      grid-column: 1 / -1;
    }
    #customerTatDetailModal .customer-tat-detail-tat--excluded {
      font-weight: 700;
      color: var(--muted, #64748b);
    }
    /* 접수 상세: 바깥은 고정, tbody만 세로 스크롤(헤더는 스크롤되지 않음) */
    #customerTatDetailModal .customer-tat-detail-table-wrap {
      flex: 1 1 auto;
      min-height: 0;
      max-height: min(52vh, 480px);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
      background: color-mix(in srgb, var(--panel) 96%, transparent);
    }
    #customerTatDetailModal .customer-tat-detail-table.ranking-table {
      width: max(1100px, 100%);
      min-width: 100%;
      font-size: 12px;
      table-layout: fixed !important;
      border-collapse: separate !important;
      border-spacing: 0;
      display: flex !important;
      flex-direction: column;
      flex: 1 1 auto;
      min-height: 0;
      max-height: 100%;
      margin: 0;
    }
    #customerTatDetailModal .customer-tat-detail-table thead th:nth-child(1),
    #customerTatDetailModal .customer-tat-detail-table tbody td:nth-child(1) { width: 10%; }
    #customerTatDetailModal .customer-tat-detail-table thead th:nth-child(2),
    #customerTatDetailModal .customer-tat-detail-table tbody td:nth-child(2) { width: 9%; }
    #customerTatDetailModal .customer-tat-detail-table thead th:nth-child(3),
    #customerTatDetailModal .customer-tat-detail-table tbody td:nth-child(3) { width: 14%; }
    #customerTatDetailModal .customer-tat-detail-table thead th:nth-child(4),
    #customerTatDetailModal .customer-tat-detail-table tbody td:nth-child(4),
    #customerTatDetailModal .customer-tat-detail-table thead th:nth-child(5),
    #customerTatDetailModal .customer-tat-detail-table tbody td:nth-child(5),
    #customerTatDetailModal .customer-tat-detail-table thead th:nth-child(6),
    #customerTatDetailModal .customer-tat-detail-table tbody td:nth-child(6) { width: 8%; }
    #customerTatDetailModal .customer-tat-detail-table thead th:nth-child(7),
    #customerTatDetailModal .customer-tat-detail-table tbody td:nth-child(7) { width: 8%; }
    #customerTatDetailModal .customer-tat-detail-table thead th:nth-child(8),
    #customerTatDetailModal .customer-tat-detail-table tbody td:nth-child(8) { width: 10%; }
    #customerTatDetailModal .customer-tat-detail-table thead th:nth-child(9),
    #customerTatDetailModal .customer-tat-detail-table tbody td:nth-child(9) { width: 11%; }
    #customerTatDetailModal .customer-tat-detail-table thead th:nth-child(10),
    #customerTatDetailModal .customer-tat-detail-table tbody td:nth-child(10) { width: 14%; }
    #customerTatDetailModal .customer-tat-detail-table thead {
      display: table;
      width: 100%;
      table-layout: fixed;
      flex-shrink: 0;
    }
    #customerTatDetailModal .customer-tat-detail-table tbody {
      display: block;
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-gutter: stable;
    }
    #customerTatDetailModal .customer-tat-detail-table thead tr {
      display: table-row;
      width: 100%;
    }
    #customerTatDetailModal .customer-tat-detail-table tbody tr {
      display: table;
      width: 100%;
      table-layout: fixed;
    }
    #customerTatDetailModal .customer-tat-detail-table.ranking-table th,
    #customerTatDetailModal .customer-tat-detail-table.ranking-table td {
      padding: 8px 10px !important;
      vertical-align: middle !important;
      text-align: center !important;
      word-break: break-word;
    }
    #customerTatDetailModal .customer-tat-detail-table.ranking-table thead th {
      font-size: calc(0.9rem + 2px) !important;
      font-weight: 800 !important;
      letter-spacing: -0.02em;
      background: color-mix(in srgb, var(--panel-2, var(--panel)) 94%, var(--primary) 6%) !important;
      box-shadow: 0 1px 0 var(--line);
    }

    /* ─── 화이트: 블루 액센트 테두리 · 헤더 슬레이트 · 모달 내 텍스트 전부 검정 ─── */
    body[data-theme="white"] #mainSummaryGrowthModal .modal-card,
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card,
    body[data-theme="white"] #customerTatDetailModal .modal-card,
    body[data-theme="white"] #productCategoryDetailModal .modal-card {
      background: #ffffff;
      border-color: rgba(37, 99, 235, 0.42);
      box-shadow:
        0 28px 64px rgba(15, 23, 42, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.95) inset;
    }
    body[data-theme="white"] #mainSummaryGrowthModal .modal-card,
    body[data-theme="white"] #mainSummaryGrowthModal .modal-card *,
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card,
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card *,
    body[data-theme="white"] #customerTatDetailModal .modal-card,
    body[data-theme="white"] #customerTatDetailModal .modal-card *,
    body[data-theme="white"] #productCategoryDetailModal .modal-card,
    body[data-theme="white"] #productCategoryDetailModal .modal-card * {
      color: #000000 !important;
    }
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw--pos {
      color: #15803d !important;
    }
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw--neg {
      color: #b91c1c !important;
    }
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw--accent {
      color: #1d4ed8 !important;
    }
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw--metric {
      color: #6d28d9 !important;
    }
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .lc-explain-kw--neutral {
      color: #0f766e !important;
    }
    /* 교차표: 행 색(--st-row) 반영 비중 — .modal-card * 검정보다 우선 */
    body[data-theme="white"] #stCrossExplainModal .st-cross-matrix .st-matrix-cell__meta strong {
      color: color-mix(in srgb, var(--st-row) 78%, #0f172a) !important;
    }
    body[data-theme="white"] #mainSummaryGrowthModal .modal-head,
    body[data-theme="white"] #detailModal .modal-head,
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-head,
    body[data-theme="white"] #customerTatDetailModal .modal-head {
      background: linear-gradient(180deg, #f1f5f9 0%, #e2e8f0 100%);
      border-bottom-color: rgba(37, 99, 235, 0.35);
      border-left: 4px solid #2563eb;
      padding-left: 16px;
    }
    body[data-theme="white"] #mainSummaryGrowthModal .modal-close,
    body[data-theme="white"] #detailModal .modal-close,
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-close,
    body[data-theme="white"] #customerTatDetailModal .modal-close {
      border: 2px solid rgba(148, 163, 184, 0.45);
      background: #ffffff;
      font-weight: 700;
    }
    body[data-theme="white"] #mainSummaryGrowthModal .modal-close:hover,
    body[data-theme="white"] #detailModal .modal-close:hover,
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-close:hover,
    body[data-theme="white"] #customerTatDetailModal .modal-close:hover {
      border-color: #2563eb;
    }
    body[data-theme="white"] #mainSummaryGrowthModal .ms-growth-modal-body,
    body[data-theme="white"] #detailModal .ms-growth-modal-body,
    body[data-theme="white"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .ms-growth-modal-body,
    body[data-theme="white"] #customerTatDetailModal .ms-growth-modal-body,
    body[data-theme="white"] #productCategoryDetailModal .ms-growth-modal-body {
      background: #ffffff;
      border-top: 1px solid rgba(226, 232, 240, 0.9);
    }
    body[data-theme="white"] #mainSummaryGrowthModal .ms-growth-yoy-track {
      background: #e2e8f0;
      border: 1px solid rgba(148, 163, 184, 0.5);
    }
    /* 막대 위 금액·지수 레이블: .modal-card * 의 검정보다 한 단계 특이도↑ — 진한 막대(fill) 위 가독성 */
    body[data-theme="white"] #mainSummaryGrowthModal .modal-card .ms-growth-yoy-track-label {
      color: #f8fafc !important;
      -webkit-text-fill-color: #f8fafc !important;
      text-shadow:
        0 1px 2px rgba(15, 23, 42, 0.92),
        0 0 1px rgba(15, 23, 42, 1);
    }

    /* ─── 다크: 밝은 타이틀 · 인디고 프레임 · 헤더 더 어두운 띠 ─── */
    body[data-theme="dark"] #mainSummaryGrowthModal .modal-card,
    body[data-theme="dark"] #detailModal .modal-card,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card,
    body[data-theme="dark"] #customerTatDetailModal .modal-card,
    body[data-theme="dark"] #productCategoryDetailModal .modal-card {
      background: #0f172a;
      border-color: rgba(129, 140, 248, 0.55);
      box-shadow:
        0 32px 72px rgba(0, 0, 0, 0.78),
        0 0 0 1px rgba(99, 102, 241, 0.2) inset;
      color: #e2e8f0;
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .modal-card::before,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card::before,
    body[data-theme="dark"] #customerTatDetailModal .modal-card::before,
    body[data-theme="dark"] #productCategoryDetailModal .modal-card::before {
      background: linear-gradient(180deg, rgba(99, 102, 241, 0.15), transparent 40%);
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .modal-head,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-head,
    body[data-theme="dark"] #customerTatDetailModal .modal-head,
    body[data-theme="dark"] #productCategoryDetailModal .modal-head {
      background: linear-gradient(180deg, #020617 0%, #0f172a 100%);
      border-bottom-color: rgba(129, 140, 248, 0.45);
      border-left: 4px solid #818cf8;
      padding-left: 16px;
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .modal-head h3,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-head h3,
    body[data-theme="dark"] #customerTatDetailModal .modal-head h3,
    body[data-theme="dark"] #productCategoryDetailModal .modal-head h3 {
      color: #f8fafc;
    }
    body[data-theme="dark"] #mainSummaryGrowthModal #mainSummaryGrowthModalSubtitle,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) #customerLifecycleExplainSubtitle,
    body[data-theme="dark"] #customerTatDetailModal #customerTatDetailSubtitle,
    body[data-theme="dark"] #productCategoryDetailModal #productCategoryDetailSubtitle {
      color: #94a3b8;
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .modal-close,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-close,
    body[data-theme="dark"] #customerTatDetailModal .modal-close,
    body[data-theme="dark"] #productCategoryDetailModal .modal-close {
      border: 2px solid rgba(148, 163, 184, 0.35);
      background: #1e293b;
      color: #f1f5f9;
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .modal-close:hover,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-close:hover,
    body[data-theme="dark"] #customerTatDetailModal .modal-close:hover,
    body[data-theme="dark"] #productCategoryDetailModal .modal-close:hover {
      border-color: #818cf8;
      color: #fff;
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .ms-growth-modal-body,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .ms-growth-modal-body,
    body[data-theme="dark"] #customerTatDetailModal .ms-growth-modal-body,
    body[data-theme="dark"] #productCategoryDetailModal .ms-growth-modal-body {
      background: #1e293b;
      border-top: 1px solid rgba(99, 102, 241, 0.22);
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .mini-note,
    body[data-theme="dark"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .mini-note,
    body[data-theme="dark"] #customerTatDetailModal .mini-note,
    body[data-theme="dark"] #productCategoryDetailModal .mini-note {
      color: #cbd5e1 !important;
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .ms-growth-yoy-label {
      color: #cbd5e1;
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .ms-growth-yoy-track {
      background: #0f172a;
      border: 1px solid rgba(148, 163, 184, 0.28);
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .ms-growth-yoy-track-label {
      color: #e2e8f0;
      text-shadow: 0 1px 0 rgba(2, 6, 23, 0.55);
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .ms-growth-yoy-baseline {
      background: rgba(226, 232, 240, 0.45);
    }
    body[data-theme="dark"] #mainSummaryGrowthModal .ms-growth-yoy-val {
      color: #f8fafc;
    }

    /* ─── 웜: 짙은 브라운 타이틀 · 앰버 테두리 · 크림 헤더 ─── */
    body[data-theme="warm"] #mainSummaryGrowthModal .modal-card,
    body[data-theme="warm"] #detailModal .modal-card,
    body[data-theme="warm"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card,
    body[data-theme="warm"] #customerTatDetailModal .modal-card,
    body[data-theme="warm"] #productCategoryDetailModal .modal-card {
      background: #fffdfb;
      border-color: rgba(180, 83, 9, 0.45);
      box-shadow:
        0 26px 56px rgba(120, 80, 30, 0.22),
        0 0 0 1px rgba(255, 252, 248, 0.9) inset;
      color: #292019;
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .modal-card::before,
    body[data-theme="warm"] #detailModal .modal-card::before,
    body[data-theme="warm"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-card::before,
    body[data-theme="warm"] #customerTatDetailModal .modal-card::before,
    body[data-theme="warm"] #productCategoryDetailModal .modal-card::before {
      background: linear-gradient(180deg, rgba(254, 243, 199, 0.5), transparent 42%);
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .modal-head,
    body[data-theme="warm"] #detailModal .modal-head,
    body[data-theme="warm"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-head,
    body[data-theme="warm"] #customerTatDetailModal .modal-head,
    body[data-theme="warm"] #productCategoryDetailModal .modal-head {
      background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%);
      border-bottom-color: rgba(217, 119, 6, 0.45);
      border-left: 4px solid #d97706;
      padding-left: 16px;
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .modal-head h3,
    body[data-theme="warm"] #detailModal .modal-head h3,
    body[data-theme="warm"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-head h3,
    body[data-theme="warm"] #customerTatDetailModal .modal-head h3,
    body[data-theme="warm"] #productCategoryDetailModal .modal-head h3 {
      color: #451a03;
    }
    body[data-theme="warm"] #mainSummaryGrowthModal #mainSummaryGrowthModalSubtitle,
    body[data-theme="warm"] #detailModal #modalSubtitle,
    body[data-theme="warm"] #customerLifecycleExplainModal #customerLifecycleExplainSubtitle,
    body[data-theme="warm"] #stCrossExplainModal #stCrossExplainSubtitle,
    body[data-theme="warm"] #customerTatDetailModal #customerTatDetailSubtitle,
    body[data-theme="warm"] #productCategoryDetailModal #productCategoryDetailSubtitle {
      color: #7c6a58;
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .modal-close,
    body[data-theme="warm"] #detailModal .modal-close,
    body[data-theme="warm"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-close,
    body[data-theme="warm"] #customerTatDetailModal .modal-close,
    body[data-theme="warm"] #productCategoryDetailModal .modal-close {
      border: 2px solid rgba(180, 120, 60, 0.4);
      background: #fffdfb;
      color: #451a03;
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .modal-close:hover,
    body[data-theme="warm"] #detailModal .modal-close:hover,
    body[data-theme="warm"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .modal-close:hover,
    body[data-theme="warm"] #customerTatDetailModal .modal-close:hover,
    body[data-theme="warm"] #productCategoryDetailModal .modal-close:hover {
      border-color: #d97706;
      color: #92400e;
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .ms-growth-modal-body,
    body[data-theme="warm"] #detailModal .ms-growth-modal-body,
    body[data-theme="warm"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .ms-growth-modal-body,
    body[data-theme="warm"] #customerTatDetailModal .ms-growth-modal-body,
    body[data-theme="warm"] #productCategoryDetailModal .ms-growth-modal-body {
      background: #fffdfb;
      border-top: 1px solid rgba(180, 120, 60, 0.28);
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .mini-note,
    body[data-theme="warm"] #detailModal .mini-note,
    body[data-theme="warm"] :is(#customerLifecycleExplainModal, #stCrossExplainModal) .mini-note,
    body[data-theme="warm"] #customerTatDetailModal .mini-note,
    body[data-theme="warm"] #productCategoryDetailModal .mini-note {
      color: #5e4d3c !important;
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .ms-growth-yoy-label {
      color: #5e4d3c;
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .ms-growth-yoy-track {
      background: #fff7ed;
      border: 1px solid rgba(217, 119, 6, 0.35);
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .ms-growth-yoy-track-label {
      color: #4a2209;
      text-shadow: 0 1px 0 rgba(255,255,255,0.45);
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .ms-growth-yoy-baseline {
      background: rgba(120, 53, 15, 0.38);
    }
    body[data-theme="warm"] #mainSummaryGrowthModal .ms-growth-yoy-val {
      color: #1c140d;
    }

    .ms-growth-yoy-shell {
      margin-top: 8px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }
    .ms-growth-yoy-headline {
      border: 1.5px solid var(--line-2);
      border-radius: 14px;
      padding: 12px 14px;
      background: color-mix(in srgb, var(--panel) 90%, var(--bg));
      box-shadow: 0 8px 18px color-mix(in srgb, var(--text) 8%, transparent);
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .ms-growth-yoy-headline .headline-title {
      font-size: 18px;
      font-weight: 900;
      color: var(--text);
      letter-spacing: -0.02em;
      line-height: 1.2;
    }
    .ms-growth-yoy-headline .headline-sub {
      font-size: 13px;
      font-weight: 700;
      color: var(--muted);
      line-height: 1.35;
    }
    .ms-growth-yoy-kpis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .ms-growth-yoy-kpi {
      border: 1.5px solid var(--line-2);
      border-radius: 14px;
      background: color-mix(in srgb, var(--panel) 88%, var(--bg));
      padding: 10px 12px;
      min-height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      box-shadow: 0 6px 14px color-mix(in srgb, var(--text) 6%, transparent);
    }
    .ms-growth-yoy-kpi .kpi-label {
      font-size: 12px;
      color: var(--muted);
      font-weight: 800;
    }
    .ms-growth-yoy-kpi .kpi-value {
      font-size: 24px;
      color: var(--text);
      font-weight: 900;
      line-height: 1.1;
      letter-spacing: -0.02em;
    }
    .ms-growth-yoy-kpi.is-up .kpi-value { color: var(--ok); }
    .ms-growth-yoy-kpi.is-down .kpi-value { color: var(--bad); }
    .ms-growth-yoy-scale {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: var(--muted);
      padding: 0 2px;
      font-weight: 800;
      letter-spacing: 0.01em;
    }
    .ms-growth-yoy-bars {
      display: flex;
      flex-direction: column;
      gap: 10px;
      width: 100%;
    }
    .ms-growth-table-toolbar {
      margin: 0 0 10px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
    }
    .ms-growth-table-toolbar label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }
    .ms-growth-table-toolbar select {
      min-width: 120px;
      font-weight: 700;
      padding-left: 10px;
      padding-right: 10px;
      outline: none;
    }
    .ms-growth-yoy-row {
      display: grid;
      grid-template-columns: minmax(160px, 200px) minmax(0, 1fr);
      align-items: center;
      gap: 12px;
    }
    .ms-growth-yoy-label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 15px;
      font-weight: 900;
      color: var(--text);
      text-align: left;
      line-height: 1.2;
    }
    .ms-growth-yoy-label-sub {
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: 0.02em;
    }
    .ms-growth-yoy-track {
      position: relative;
      height: 44px;
      border-radius: 12px;
      background: var(--line-2);
      overflow: hidden;
      border: 1.5px solid var(--line);
    }
    .ms-growth-yoy-baseline {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      background: color-mix(in srgb, var(--text) 35%, transparent);
      z-index: 2;
      pointer-events: none;
    }
    .ms-growth-yoy-track-label {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding: 0 12px;
      font-size: 15px;
      font-weight: 900;
      letter-spacing: -0.01em;
      color: var(--text);
      text-shadow: 0 1px 0 color-mix(in srgb, var(--panel) 55%, white);
      white-space: nowrap;
      pointer-events: none;
      z-index: 2;
      font-variant-numeric: tabular-nums;
    }
    .ms-growth-yoy-fill {
      height: 100%;
      border-radius: 11px;
      min-width: 4px;
      transition: width 0.35s ease;
    }
    .ms-growth-yoy-fill.is-prev {
      background: linear-gradient(90deg, var(--muted), color-mix(in srgb, var(--muted) 72%, var(--panel)));
    }
    .ms-growth-yoy-fill.is-curr {
      background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--accent, #38bdf8)));
    }
    #view-main-summary .main-summary-customer-share-layout {
      display: grid;
      /* 도넛을 더 키우고, 오른쪽 카드는 최소 정보만 담는 좁은 칼럼으로 축소 */
      grid-template-columns: 1.4fr 0.9fr;
      gap: clamp(6px, 1.2vmin, 8px);
      align-items: center;
    }
    #view-main-summary .main-summary-customer-donut {
      width: clamp(120px, min(28vmin, 36vw), 208px);
      height: clamp(120px, min(28vmin, 36vw), 208px);
      margin: 0 auto;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: conic-gradient(var(--ms-accent) 0deg 180deg, var(--ms-accent-2) 180deg 270deg, var(--ms-warn) 270deg 320deg, var(--ms-donut-rest) 320deg 360deg);
    }
    #view-main-summary .main-summary-customer-donut-core {
      width: min(132px, 63.5%);
      height: min(132px, 63.5%);
      border-radius: 50%;
      background: var(--ms-surface-strong);
      display: grid;
      place-items: center;
      align-content: center;
      gap: 4px;
      text-align: center;
      border: 1px solid var(--ms-line-strong);
    }
    #view-main-summary .main-summary-customer-donut-core span {
      font-size: 14px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ms-text-4);
      font-weight: 700;
    }
    #view-main-summary .main-summary-customer-donut-core strong {
      font-size: clamp(18px, min(4vmin, 5vh), 28px);
      line-height: 1;
      color: var(--ms-title);
      letter-spacing: -0.04em;
    }
    #view-main-summary .main-summary-customer-donut-core em {
      font-style: normal;
      font-size: 15px;
      font-weight: 700;
      color: var(--ms-text-3);
    }
    #view-main-summary .main-summary-customer-legend {
      display: grid;
      grid-template-columns: 1fr;
      gap: 5px;
      align-content: center;
    }
    #view-main-summary .main-summary-customer-item {
      padding: 6.5px 9px;
      border-radius: 12px;
      border: 1px solid var(--ms-line);
      background: var(--ms-surface);
    }
    #view-main-summary .main-summary-customer-item-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    #view-main-summary .main-summary-customer-item strong {
      font-size: 15px;
      color: var(--ms-title);
    }
    #view-main-summary .main-summary-customer-item-name {
      min-width: 0;
      flex: 1 1 auto;
      max-width: 14ch;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #view-main-summary .main-summary-customer-item-sales {
      flex: 0 0 auto;
      font-size: 15px;
      font-weight: 700;
      color: var(--ms-title);
      letter-spacing: -0.02em;
    }
    #view-main-summary .main-summary-customer-item .main-summary-customer-item-pct {
      font-size: 18px;
      font-weight: 800;
      color: var(--ms-title);
      letter-spacing: -0.02em;
      flex: 0 0 auto;
    }
    #view-main-summary .main-summary-customer-chip {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      display: inline-block;
      flex: 0 0 auto;
    }
    #view-main-summary .main-summary-customer-item-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
    }
    #view-main-summary .main-summary-bottom .main-summary-panel-head {
      margin-bottom: 5px;
      align-items: flex-start;
      justify-content: flex-start;
      gap: 8px;
    }
    #view-main-summary .main-summary-bottom .main-summary-panel-title {
      align-items: flex-start;
      text-align: left;
    }
    #view-main-summary .main-summary-bottom .main-summary-panel-title h3 {
      text-align: left;
      font-size: 16px;
      line-height: 1.2;
      color: var(--ms-title) !important;
    }
    #view-main-summary .main-summary-bottom .main-summary-panel-title .panel-eyebrow {
      margin: 4px 0 0;
      text-align: left;
      font-size: 11px !important;
      font-weight: 700 !important;
      letter-spacing: 0.12em !important;
      text-transform: uppercase !important;
      line-height: 1.25;
      color: var(--ms-sub) !important;
    }
    #view-main-summary .main-summary-distribution {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
    }
    #view-main-summary .main-summary-dist-item {
      display: grid;
      gap: 6px;
      min-height: 88px;
    }
    #view-main-summary .dist-share {
      font-size: 20px;
      font-weight: 800;
      color: var(--ms-title);
      letter-spacing: -0.04em;
    }
    #view-main-summary .dist-track {
      height: 8px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--ms-surface-strong) 88%, transparent);
      overflow: hidden;
    }
    #view-main-summary .dist-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--ms-accent-2), var(--ms-accent));
    }
    #view-main-summary .main-summary-ticker {
      position: relative;
      overflow: hidden;
      border-top: 1px solid var(--ms-line-strong);
      border-bottom: 1px solid var(--ms-line-strong);
      background: var(--ms-ticker-bg);
      min-height: var(--ms-ticker-row);
      display: flex;
      align-items: center;
      margin-top: 0;
    }
    #view-main-summary .main-summary-ticker::before {
      content: "트렌드";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 88px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: var(--ms-ticker-label);
      background: var(--ms-ticker-bg);
      z-index: 2;
    }
    #view-main-summary .main-summary-ticker-track {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      width: max-content;
      white-space: nowrap;
      padding-left: 102px;
      animation: mainSummaryTickerMove 52s linear infinite;
      will-change: transform;
      backface-visibility: hidden;
    }
    #view-main-summary .main-summary-ticker-group {
      display: inline-flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: center;
      flex: 0 0 auto;
      gap: 34px;
      padding-right: 34px;
      box-sizing: border-box;
    }
    #view-main-summary .main-summary-ticker-item {
      display: inline-flex;
      align-items: center;
      gap: clamp(6px, 1.2vmin, 10px);
      font-size: clamp(12px, 1.45vmin, 14px);
      font-weight: 600;
      color: var(--ms-ticker-text);
      letter-spacing: 0.01em;
    }
    #view-main-summary .main-summary-ticker-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--ms-accent-2);
      box-shadow: none;
      flex: 0 0 auto;
    }
    @media (max-width: 1280px) {
      #view-main-summary { overflow: auto; }
      #view-main-summary .main-summary-shell {
        grid-template-rows: auto auto auto var(--ms-ticker-row);
        height: auto;
      }
      #view-main-summary .main-summary-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        min-height: 0;
      }
      /* 그리드 행이 auto일 때도 조직 목록이 무한히 늘어나지 않도록 상한 */
      #view-main-summary .main-summary-org-bars {
        max-height: min(58vh, 520px);
      }
      #view-main-summary .main-summary-panel-org { grid-column: 1; grid-row: auto; }
      #view-main-summary .main-summary-panel-hero { grid-column: 2; grid-row: auto; }
      #view-main-summary .main-summary-panel-customer { grid-column: 1; grid-row: auto; }
      #view-main-summary .main-summary-panel-issue { grid-column: 2; grid-row: auto; }
      #view-main-summary .main-summary-bottom { grid-column: 1 / -1; }
      #view-main-summary .main-summary-distribution { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 860px) {
      #view-main-summary .main-summary-header {
        grid-template-columns: 1fr;
        align-items: stretch;
        min-height: var(--app-header-bar-height);
        padding: 10px 12px;
      }
      #view-main-summary .main-summary-header .page-header-logo {
        position: static;
        transform: none;
      }
      #view-main-summary .main-summary-brand-strip {
        display: block;
      }
      #view-main-summary .main-summary-brand-inner {
        display: flex;
      }
      #view-main-summary .main-summary-brand-inner {
        height: var(--app-header-bar-height);
        min-height: var(--app-header-bar-height);
        padding: 0 8px;
      }
      #view-main-summary .main-summary-status-block {
        width: 100%;
        justify-content: space-between;
        grid-column: auto;
        grid-row: auto;
      }
      #view-main-summary .main-summary-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        min-height: 0;
      }
      #view-main-summary .main-summary-panel-org,
      #view-main-summary .main-summary-panel-hero,
      #view-main-summary .main-summary-panel-customer,
      #view-main-summary .main-summary-panel-issue {
        grid-column: auto;
        grid-row: auto;
      }
      #view-main-summary .main-summary-hero-foot,
      #view-main-summary .main-summary-distribution {
        grid-template-columns: 1fr;
      }
    }
    @keyframes mainSummaryTickerMove {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); }
    }
@keyframes mainSummaryFloat {
      0%, 100% { transform: translate3d(0, 0, 0); }
      50% { transform: translate3d(0, -20px, 0); }
    }

    body[data-theme="dark"]::before {
      background:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      opacity: 0.48;
    }
    body[data-theme="dark"] .hero {
      background: var(--panel);
      border-color: var(--line);
      color: var(--text);
    }
    body[data-theme="dark"] .hero-header {
      border-color: var(--line);
    }
    body[data-theme="dark"] .hero-logo {
      filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.28));
    }
    body[data-theme="dark"] .toolbar,
    body[data-theme="dark"] .filters,
    body[data-theme="dark"] .filter-strip {
      background: var(--toolbar-surface) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }
    body[data-theme="dark"] .tabbar {
      background: transparent !important;
      border-color: var(--line);
      color: var(--text);
    }
    body[data-theme="dark"] .tab {
      background: var(--panel);
      border-color: var(--line);
      color: var(--muted);
    }
    body[data-theme="dark"] .tab.active {
      background: var(--primary) !important;
      color: var(--on-primary) !important;
      border-color: var(--primary);
    }
    body[data-theme="dark"] .grid {
      gap: 12px;
    }
    body[data-theme="dark"] .panel,
    body[data-theme="dark"] .chart-box,
    body[data-theme="dark"] .summary-box,
    body[data-theme="dark"] .metric-pill,
    body[data-theme="dark"] .dictionary-item,
    body[data-theme="dark"] .map-card,
    body[data-theme="dark"] .record-table,
    body[data-theme="dark"] .modal-card,
    body[data-theme="dark"] .modal-section,
    body[data-theme="dark"] .modal-mini,
    body[data-theme="dark"] .receipt-item,
    body[data-theme="dark"] .kpi,
    body[data-theme="dark"] .insight,
    body[data-theme="dark"] .manager-summary-flow,
    body[data-theme="dark"] .manager-signals-actions,
    body[data-theme="dark"] .summary-snapshot-panel,
    body[data-theme="dark"] .summary-goal-panel {
      background: var(--panel) !important;
      border: 1px solid var(--line-2) !important;
      box-shadow: var(--shadow-card) !important;
      color: var(--text) !important;
    }
    body[data-theme="dark"] .summary-overview-card,
    body[data-theme="dark"] .summary-overview-card.is-primary,
    body[data-theme="dark"] .summary-overview-card.is-alert,
    body[data-theme="dark"] .summary-overview-card.is-opportunity,
    body[data-theme="dark"] .metric-pill.is-primary {
      border-color: var(--line) !important;
    }
    body[data-theme="dark"] .summary-overview-card,
    body[data-theme="dark"] .summary-overview-card.is-primary,
    body[data-theme="dark"] .summary-overview-card.is-alert,
    body[data-theme="dark"] .summary-overview-card.is-opportunity {
      background: var(--panel) !important;
      box-shadow: var(--shadow-soft);
    }
    body[data-theme="dark"] .summary-overview-card::before {
      background: var(--line);
    }
    body[data-theme="dark"] .summary-overview-card.is-primary::before {
      background: var(--accent);
    }
    body[data-theme="dark"] .summary-overview-card.is-alert::before {
      background: var(--bad);
    }
    body[data-theme="dark"] .summary-overview-card.is-opportunity::before {
      background: var(--ok);
    }
    body[data-theme="dark"] .summary-overview-card .card-label,
    body[data-theme="dark"] .summary-overview-card .card-value,
    body[data-theme="dark"] .summary-overview-card .card-row-label,
    body[data-theme="dark"] .summary-overview-card .card-row-value,
    body[data-theme="dark"] .summary-overview-card .card-sub,
    body[data-theme="dark"] .summary-overview-card strong,
    body[data-theme="dark"] .summary-overview-card span,
    body[data-theme="dark"] .summary-overview-card p {
      color: var(--text) !important;
    }
    body[data-theme="dark"] .summary-overview-card .card-sub {
      border-top-color: var(--line) !important;
      color: var(--muted) !important;
    }
    body[data-theme="dark"] #view-summary .summary-snapshot-panel .summary-overview-card .card-row-label {
      color: var(--text) !important;
    }
    body[data-theme="dark"] .gran-btn:not(.active),
    body[data-theme="dark"] .viz-switcher-btn:not(.active) {
      border-color: transparent !important;
      background: transparent !important;
      color: var(--muted) !important;
    }
    body[data-theme="dark"] .modal-mini,
    body[data-theme="dark"] .modal-section {
      border-color: var(--line) !important;
      background: var(--panel) !important;
    }
    body[data-theme="dark"] .summary-overview-note,
    body[data-theme="dark"] .panel-receipt .receipt-table-wrap {
      border-color: var(--line) !important;
    }
    body[data-theme="dark"] .interactive-card,
    body[data-theme="dark"] .interactive-card:hover {
      border-color: var(--line) !important;
    }
    body[data-theme="dark"] .panel-head h3,
    body[data-theme="dark"] .section-title h2,
    body[data-theme="dark"] .section-title p,
    body[data-theme="dark"] .metric-pill span,
    body[data-theme="dark"] .signal-list li,
    body[data-theme="dark"] .action-list li,
    body[data-theme="dark"] .manager-signals-title,
    body[data-theme="dark"] .manager-actions-title,
    body[data-theme="dark"] .briefing-card h3,
    body[data-theme="dark"] .briefing-side h3,
    body[data-theme="dark"] .briefing-card p,
    body[data-theme="dark"] .briefing-side p,
    body[data-theme="dark"] .briefing-side ul,
    body[data-theme="dark"] .briefing-metric span,
    body[data-theme="dark"] .briefing-metric strong {
      color: var(--text) !important;
    }
    body[data-theme="dark"] .briefing-card,
    body[data-theme="dark"] .briefing-side,
    body[data-theme="dark"] .briefing-metric {
      background: var(--panel) !important;
      border-color: var(--line);
    }
    body[data-theme="dark"] .filter-group label,
    body[data-theme="dark"] .filter-group-label,
    body[data-theme="dark"] .filter-strip-title,
    body[data-theme="dark"] .filter-strip-note,
    body[data-theme="dark"] .inline-filter-box label,
    body[data-theme="dark"] .content-zoom-label,
    body[data-theme="dark"] .content-zoom-value {
      color: var(--text) !important;
    }
    body[data-theme="dark"] .filter-group select,
    body[data-theme="dark"] .inline-filter-box select,
    body[data-theme="dark"] select {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }
    body[data-theme="dark"] .record-table th,
    body[data-theme="dark"] .record-table td,
    body[data-theme="dark"] .record-table thead {
      color: var(--text);
      border-color: var(--line);
    }
    body[data-theme="dark"] .record-table thead {
      background: var(--table-head-bg);
    }
    body[data-theme="dark"] .legend-item,
    body[data-theme="dark"] .label {
      color: var(--text);
    }
    body[data-theme="dark"] svg .label {
      fill: var(--text);
    }
    body[data-theme="dark"] .toolbar::before,
    body[data-theme="dark"] .filters::before,
    body[data-theme="dark"] .tabbar::before,
    body[data-theme="dark"] .panel::before,
    body[data-theme="dark"] .modal-card::before {
      background: linear-gradient(180deg, var(--bg-glow-accent), transparent);
    }
    body[data-theme="dark"] .mini-note,
    body[data-theme="dark"] .insight p,
    body[data-theme="dark"] .insight ul,
    body[data-theme="dark"] .panel .record-table {
      color: var(--text);
    }
    body[data-theme="dark"] .chart-box,
    body[data-theme="dark"] #summaryGoalChart {
      background: var(--panel) !important;
    }

    body[data-theme="default"] .badge {
      background: var(--panel-surface);
      color: var(--primary-dark);
      border-color: var(--line);
    }
    body[data-theme="default"] .btn.primary,
    body[data-theme="default"] .mode-btn.active {
      background: linear-gradient(135deg, var(--primary) 0%, var(--primary-2) 100%);
      border-color: var(--primary);
      box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 24%, transparent 76%);
    }
    body[data-theme="default"] .btn.secondary {
      background: linear-gradient(135deg, color-mix(in srgb, var(--primary-2) 18%, white 82%), color-mix(in srgb, var(--navy) 10%, white 90%));
      color: var(--navy);
    }
    body[data-theme="default"] .tab.active {
      background: linear-gradient(135deg, color-mix(in srgb, var(--primary-2) 36%, white 64%), color-mix(in srgb, var(--primary) 28%, white 72%));
      color: var(--primary);
      border: 2px solid color-mix(in srgb, var(--primary) 60%, transparent 40%);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5), 0 6px 20px color-mix(in srgb, var(--primary-2) 28%, transparent 72%);
      font-size: 18px;
      font-weight: 800;
      transform: scale(1.02);
    }
    body[data-theme="default"] .tab.active .tab-emoji {
      font-size: 20px;
    }
    body[data-theme="dark"] .badge {
      background: var(--panel);
      color: var(--text);
      border-color: var(--line);
    }
    body[data-theme="dark"] .btn.primary,
    body[data-theme="dark"] .mode-btn.active {
      background: var(--primary);
      border-color: var(--primary);
      color: var(--on-primary);
    }
    body[data-theme="dark"] .btn.secondary {
      background: var(--panel);
      border-color: var(--line);
      color: var(--text);
    }
    body[data-theme="dark"] .clickable-row:hover {
      background: var(--primary-3);
    }
    body[data-theme="dark"] .inline-filter-box select {
      background: var(--panel) !important;
      border-color: var(--line);
      color: var(--text);
    }

    /* Fixed chrome override: header + page tabs + filters stay pinned, content scrolls */
    body:not(.cover-mode) {
      overflow: hidden;
    }
    body:not(.cover-mode) .shell {
      width: 100vw;
      height: var(--erp-visible-vh, 100vh);
      margin: 0;
      padding-top: var(--top-chrome-offset);
      overflow: hidden;
    }
    body:not(.cover-mode) main {
      /* 상단 크롬 높이는 실측(--chrome-height) 기준으로 통일 */
      width: 100vw;
      max-width: none;
      margin: 0;
      height: calc((var(--erp-visible-vh, 100vh) - var(--chrome-height)) / var(--content-zoom));
      overflow-y: auto;
      overflow-x: hidden;
      padding: 20px 0 32px;
      zoom: var(--content-zoom);
    }
    /* 메인요약도 다른 페이지와 동일하게 풀폭 사용 */
    main:has(#view-qa.active) { overflow: hidden; display: flex; flex-direction: column; padding: 8px 12px 12px; height: calc((var(--erp-visible-vh, 100vh) - var(--chrome-height)) / var(--content-zoom)); min-height: 0; }
    main:has(#view-qa.active) #view-qa { flex: 1 1 0; min-height: 0; height: 100%; overflow: hidden; display: flex; flex-direction: column; }
    .top-chrome {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 1400;
      display: grid;
      grid-template-rows: auto auto;
      pointer-events: none;
    }
    .top-chrome > * {
      pointer-events: auto;
    }
    .page-header {
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      border-radius: 0;
      border-left: 0;
      border-right: 0;
      border-top: 0;
      box-shadow: 0 12px 24px rgba(29, 42, 58, 0.16);
    }
    .page-header::after {
      left: 0;
      right: 0;
      border-radius: 0;
    }
    .page-header { height: var(--app-header-bar-height); }
    .page-header-inner { width: 100%; height: var(--app-header-bar-height); min-height: var(--app-header-bar-height); padding: 0; box-sizing: border-box; }
    body:not(.cover-mode) .page-header-logo { height: var(--app-header-logo-height) !important; max-height: var(--app-header-logo-height) !important; }
    /* 한글 메인 타이틀(위) + 영문 부제(아래) */
    body:not(.cover-mode) .page-header-copy { display: flex; flex-direction: column; align-items: center; justify-content: center; }
    /* 상단 헤더는 항상 다크 그라데이션 — 본문 --text(밝은 테마용 진회색)를 쓰면 글자가 묻힘 */
    body:not(.cover-mode) .page-header-copy h1 {
      font-size: clamp(16px, 1.55vw, 20px) !important;
      font-weight: 800 !important;
      letter-spacing: -0.02em !important;
      color: #ffffff !important;
      margin: 0 !important;
      line-height: 1.2 !important;
    }
    body:not(.cover-mode) .page-header-copy .page-header-eyebrow,
    body:not(.cover-mode) .page-header-copy span.page-header-eyebrow {
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: 0.16em !important;
      text-transform: uppercase !important;
      color: rgba(255, 255, 255, 0.76) !important;
      margin: 4px 0 0 !important;
      line-height: 1.25 !important;
    }
    .chrome-toolbar {
      display: grid;
      grid-template-rows: auto auto;
      row-gap: 0;
      background: var(--panel-shell);
      border-bottom: 1px solid var(--panel-shell-border);
      box-shadow: var(--shadow-soft);
    }
    .toolbar.nav-combined,
    .filter-strip {
      width: 100%;
      margin: 0;
      border-radius: 0;
      box-shadow: none;
      border-left: 0;
      border-right: 0;
    }
    .toolbar.nav-combined {
      padding: 8px var(--app-gutter, 12px);
      border-top: 0;
      border-bottom: 1px solid var(--line-2);
      background: var(--toolbar-surface);
    }
    .filter-strip {
      padding: 8px var(--app-gutter, 12px) 10px;
      border-top: 0;
      border-bottom: 0;
      background: var(--panel-shell);
    }
    .toolbar::after,
    .filter-strip::after {
      left: 0;
      right: 0;
      top: 0;
      height: 2px;
      border-radius: 0;
    }
    .filter-strip-head,
    .filter-strip-body {
      display: contents;
    }
    .filter-strip-grid {
      display: grid;
      grid-template-columns: auto minmax(240px, 1fr) minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px 12px;
    }
    .filter-inline-note {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }
    .filter-strip-title {
      font-size: 15px;
      letter-spacing: 0.12em;
    }
    .filter-strip-note {
      font-size: 15px;
      line-height: 1.3;
      white-space: nowrap;
    }
    .inline-filter-box {
      display: grid;
      grid-template-columns: repeat(7, minmax(92px, 1fr));
      gap: 8px;
      overflow: visible;
      padding-bottom: 0;
    }
    .inline-filter-box label {
      min-width: 0;
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
      gap: 4px;
    }
    .inline-filter-box select {
      height: 38px;
      padding: 0 14px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--panel);
      box-shadow: var(--shadow-soft);
      font-size: 15px;
      color: var(--text);
    }
    .inline-filter-box label.is-active {
      color: var(--primary);
    }
    .inline-filter-box label.is-active select,
    .inline-filter-box select.is-filtered {
      border-color: var(--primary);
      background: var(--primary);
      box-shadow: none;
      color: #ffffff;
      font-weight: 700;
    }
    .filter-utility-box {
      display: inline-flex;
      align-items: end;
      gap: 8px;
      flex-wrap: nowrap;
    }
    .theme-picker.compact {
      min-width: 74px;
      padding: 0;
      border: 0;
      background: transparent;
    }
    .theme-picker.compact select,
    .filter-utility-box .btn {
      height: 38px;
      border-radius: 12px;
    }

    body[data-theme="dark"] .utility-note,
    body[data-theme="dark"] .inline-filter-box label,
    body[data-theme="dark"] .theme-picker {
      color: var(--muted-2);
    }

    /* 다크 테마: cover-mode 아닐 때 필터/툴바 강제 오버라이드 (body:not(.cover-mode) !important 대응) */
    body[data-theme="dark"]:not(.cover-mode) .filter-strip,
    body[data-theme="dark"]:not(.cover-mode) .toolbar.nav-combined {
      background: var(--toolbar-surface) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .filter-strip .filter-strip-title,
    body[data-theme="dark"]:not(.cover-mode) .filter-strip .filter-strip-note,
    body[data-theme="dark"]:not(.cover-mode) .filter-group label,
    body[data-theme="dark"]:not(.cover-mode) .filter-group-label,
    body[data-theme="dark"]:not(.cover-mode) .inline-filter-box label {
      color: var(--text) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .filter-group select,
    body[data-theme="dark"]:not(.cover-mode) .inline-filter-box select,
    body[data-theme="dark"]:not(.cover-mode) .filter-strip select,
    body[data-theme="dark"]:not(.cover-mode) .filter-strip input {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .inline-filter-box label.is-active select,
    body[data-theme="dark"]:not(.cover-mode) .inline-filter-box select.is-filtered {
      border-color: #4338ca !important;
      background: #4f46e5 !important;
      color: #ffffff !important;
      font-weight: 700 !important;
    }
    /* 다크: 상단 #filterStrip .filter-group — 전역 label/select 색 덮어쓰기보다 우선 */
    body[data-theme="dark"]:not(.cover-mode) #filterStrip .filter-group label.is-active {
      color: #e0e7ff !important;
      border-color: rgba(129, 140, 248, 0.65) !important;
      background: rgba(79, 70, 229, 0.22) !important;
      box-shadow:
        0 0 0 1px rgba(99, 102, 241, 0.45),
        0 4px 18px rgba(0, 0, 0, 0.4) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) #filterStrip .filter-group select.is-filtered {
      border-color: #4338ca !important;
      background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      border-radius: 999px !important;
      box-shadow:
        0 2px 16px rgba(79, 70, 229, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .filter-strip-toggle {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .inline-filter-box label[data-filter-depth]::after {
      color: var(--muted) !important;
    }
    body[data-theme="dark"] .summary-goal-selects select,
    body[data-theme="dark"] .summary-goal-panel select,
    body[data-theme="dark"] .compact-top-filters select,
    body[data-theme="dark"] .compact-field select,
    body[data-theme="dark"] .panel-tools select,
    body[data-theme="dark"] .panel select,
    body[data-theme="dark"] .panel input[type="date"],
    body[data-theme="dark"] .panel input[type="number"],
    body[data-theme="dark"] .panel input[type="text"] {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }

    /* 다크 테마: Q&A 뷰 전체 */
    body[data-theme="dark"] #view-qa .qa-questions,
    body[data-theme="dark"] #view-qa .qa-options,
    body[data-theme="dark"] #view-qa .qa-summary-card {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text);
    }
    body[data-theme="dark"] #view-qa .qa-question-btn {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--muted) !important;
    }
    body[data-theme="dark"] #view-qa .qa-question-btn:hover {
      background: var(--bg-2) !important;
      color: var(--text) !important;
    }
    body[data-theme="dark"] #view-qa .qa-question-btn.active {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: var(--on-primary) !important;
    }
    body[data-theme="dark"] #view-qa .qa-output-cause,
    body[data-theme="dark"] #view-qa .qa-cause-panel-head,
    body[data-theme="dark"] #view-qa .qa-cause-explanation,
    body[data-theme="dark"] #view-qa .qa-cause-chart-hint,
    body[data-theme="dark"] #view-qa .qa-cause-table-wrap,
    body[data-theme="dark"] #view-qa .qa-cause-table-wrap .record-table {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }
    body[data-theme="dark"] #view-qa .qa-cause-panel-head {
      color: var(--text) !important;
      border-bottom-color: var(--line) !important;
    }
    body[data-theme="dark"] #view-qa .qa-cause-explanation .qa-cause-p,
    body[data-theme="dark"] #view-qa .qa-cause-explanation .qa-cause-inline,
    body[data-theme="dark"] #view-qa .qa-cause-chart-hint {
      color: var(--text) !important;
    }
    body[data-theme="dark"] #view-qa .qa-option select,
    body[data-theme="dark"] #view-qa .qa-option input[type="date"],
    body[data-theme="dark"] #view-qa .qa-option input[type="number"],
    body[data-theme="dark"] #view-qa .qa-nlp-input {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }
    body[data-theme="dark"] #view-qa .qa-output-viz .chart-box,
    body[data-theme="dark"] #view-qa .qa-output-viz .qa-table .record-table,
    body[data-theme="dark"] #view-qa .qa-output-viz .qa-summary {
      background: var(--panel) !important;
      border-color: var(--line);
      color: var(--text);
    }
    body[data-theme="dark"] #view-qa .qa-output-viz .record-table th,
    body[data-theme="dark"] #view-qa .qa-output-viz .record-table td,
    body[data-theme="dark"] #view-qa .qa-cause-table-wrap .record-table th,
    body[data-theme="dark"] #view-qa .qa-cause-table-wrap .record-table td {
      color: var(--text) !important;
      border-color: var(--line) !important;
    }
    body[data-theme="dark"] #view-qa .section-title .section-kicker,
    body[data-theme="dark"] #view-qa .section-title h2,
    body[data-theme="dark"] #view-qa .qa-questions-head strong,
    body[data-theme="dark"] #view-qa .qa-options strong {
      color: var(--text) !important;
    }
    body[data-theme="dark"] #view-qa .qa-nlp-input::placeholder {
      color: var(--muted);
    }

    /* ── Warm 테마: QA 뷰 패널 오버라이드 (dark 누락 보완) ── */
    body[data-theme="warm"] #view-qa .qa-questions,
    body[data-theme="warm"] #view-qa .qa-options,
    body[data-theme="warm"] #view-qa .qa-summary-card {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text);
    }
    body[data-theme="warm"] #view-qa .qa-question-btn {
      background: var(--panel-surface) !important;
      border-color: var(--line) !important;
      color: var(--muted) !important;
    }
    body[data-theme="warm"] #view-qa .qa-question-btn:hover {
      background: var(--bg-2) !important;
      color: var(--text) !important;
    }
    body[data-theme="warm"] #view-qa .qa-question-btn.active {
      background: var(--primary) !important;
      border-color: var(--primary) !important;
      color: var(--on-primary) !important;
    }
    body[data-theme="warm"] #view-qa .qa-option select,
    body[data-theme="warm"] #view-qa .qa-option input[type="date"],
    body[data-theme="warm"] #view-qa .qa-option input[type="number"],
    body[data-theme="warm"] #view-qa .qa-nlp-input {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }
    body[data-theme="warm"] #view-qa .qa-nlp-input::placeholder {
      color: var(--muted);
    }
    body[data-theme="warm"] #view-qa .qa-output-viz .chart-box,
    body[data-theme="warm"] #view-qa .qa-output-viz .qa-table .record-table,
    body[data-theme="warm"] #view-qa .qa-output-viz .qa-summary,
    body[data-theme="warm"] #view-qa .qa-output-cause,
    body[data-theme="warm"] #view-qa .qa-cause-panel-head,
    body[data-theme="warm"] #view-qa .qa-cause-explanation,
    body[data-theme="warm"] #view-qa .qa-cause-table-wrap .record-table {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }
    body[data-theme="warm"] #view-qa .qa-output-viz .record-table th,
    body[data-theme="warm"] #view-qa .qa-output-viz .record-table td,
    body[data-theme="warm"] #view-qa .qa-cause-table-wrap .record-table th,
    body[data-theme="warm"] #view-qa .qa-cause-table-wrap .record-table td {
      color: var(--text) !important;
      border-color: var(--line) !important;
    }
    body[data-theme="warm"] #view-qa .section-title .section-kicker,
    body[data-theme="warm"] #view-qa .section-title h2,
    body[data-theme="warm"] #view-qa .qa-questions-head strong,
    body[data-theme="warm"] #view-qa .qa-options strong {
      color: var(--text) !important;
    }

    /* ── Warm 테마: 필터/툴바 강제 오버라이드 ── */
    body[data-theme="warm"]:not(.cover-mode) .filter-strip,
    body[data-theme="warm"]:not(.cover-mode) .toolbar.nav-combined {
      background: var(--toolbar-surface) !important;
      border-color: var(--line) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .filter-strip .filter-strip-title,
    body[data-theme="warm"]:not(.cover-mode) .filter-strip .filter-strip-note,
    body[data-theme="warm"]:not(.cover-mode) .filter-group label,
    body[data-theme="warm"]:not(.cover-mode) .filter-group-label,
    body[data-theme="warm"]:not(.cover-mode) .inline-filter-box label {
      color: var(--text) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .filter-group select,
    body[data-theme="warm"]:not(.cover-mode) .inline-filter-box select,
    body[data-theme="warm"]:not(.cover-mode) .filter-strip select,
    body[data-theme="warm"]:not(.cover-mode) .filter-strip input {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .inline-filter-box label.is-active select,
    body[data-theme="warm"]:not(.cover-mode) .inline-filter-box select.is-filtered {
      border-color: #1d4ed8 !important;
      background: #2563eb !important;
      color: #ffffff !important;
      font-weight: 700 !important;
    }
    /* 웜: 상단 #filterStrip .filter-group — 블루 계열로 선택 강조(배경과 대비) */
    body[data-theme="warm"]:not(.cover-mode) #filterStrip .filter-group label.is-active {
      color: #1e3a8a !important;
      border-color: color-mix(in srgb, #2563eb 48%, var(--line)) !important;
      background: color-mix(in srgb, #2563eb 14%, var(--panel)) !important;
      box-shadow:
        0 0 0 1px color-mix(in srgb, #2563eb 30%, transparent),
        0 2px 12px color-mix(in srgb, #2563eb 22%, transparent) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) #filterStrip .filter-group select.is-filtered {
      border-color: #1d4ed8 !important;
      background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      border-radius: 999px !important;
      box-shadow: 0 2px 14px rgba(37, 99, 235, 0.45) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .filter-strip-toggle {
      background: var(--panel) !important;
      border-color: var(--line) !important;
      color: var(--text) !important;
    }

    @media (max-width: 1280px) {
      body:not(.cover-mode) .shell {
        padding-top: 160px;
      }
      body:not(.cover-mode) main {
        height: calc((var(--erp-visible-vh, 100vh) - 180px) / var(--content-zoom));
      }
      .filter-groups {
        flex-direction: column;
        align-items: stretch;
      }
      .filter-strip-row { flex-wrap: wrap; }
      .filter-utility-box { flex-wrap: wrap; }
      .cover-grid,
      .cover-metrics { grid-template-columns: 1fr; }
      .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .insight-grid, .org-map { grid-template-columns: 1fr 1fr; }
      .span-8, .span-7, .span-5, .span-4 { grid-column: span 12; }
      #view-product .grid.product-mid-tat-row {
        grid-template-columns: minmax(0, 1fr);
      }
      #view-service-type .grid.grid--st-rank-matrix {
        grid-template-columns: minmax(0, 1fr);
      }
      .report-hero,
      .modal-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 760px) {
      body:not(.cover-mode) .shell {
        padding-top: 200px;
      }
      body:not(.cover-mode) main {
        height: calc((var(--erp-visible-vh, 100vh) - 200px) / var(--content-zoom));
        padding: 16px 5px 28px;
      }
      .shell { width: calc(100vw - 10px); margin: 5px auto 20px; }
      .hero { padding: 20px; border-radius: 24px; }
      .page-header {
        width: calc(100vw - 10px);
        top: 5px;
        padding: 8px 12px 10px;
        border-radius: 18px;
      }
      .page-header-inner { padding: 0 8px; height: var(--app-header-bar-height); min-height: var(--app-header-bar-height); }
      .page-header-logo { height: var(--app-header-logo-height); max-height: var(--app-header-logo-height); }
      .toolbar, .filters, .tabbar { padding: 12px; border-radius: 0; }
      .toolbar.nav-combined,
      .nav-left,
      .nav-right { flex-direction: column; align-items: stretch; }
      .inline-filter-box,
      .filter-utility-box { flex-direction: column; }
      .cover-stage { padding: 22px; border-radius: 0; min-height: auto; }
      .cover-corner-logo {
        top: 0;
        height: var(--app-header-logo-height);
        max-height: var(--app-header-logo-height);
      }
      .cover-corner-logo.left { left: 0; }
      .cover-corner-logo.right { right: 0; }
      .kpi-grid, .insight-grid, .org-map { grid-template-columns: 1fr; }
      .donut-wrap { grid-template-columns: 1fr; }
      .donut { width: 170px; height: 170px; }
      .filters label, .filters select, .btn, .inline-filter-box label, .inline-filter-box select { width: 100%; }
      .inline-filter-box {
        display: grid;
        grid-template-columns: 1fr;
        overflow-x: visible;
      }
      .filter-strip-row { flex-wrap: wrap; }
      .filter-groups { flex-direction: column; }
      .filter-group { width: 100%; }
      .filter-group select { max-width: none; }
      .filter-strip-actions { margin-left: 0; justify-content: flex-end; }
      .filter-inline-note,
      .filter-strip-note { white-space: normal; }
      .report-stack,
      .modal-kpis,
      .summary-overview-grid { grid-template-columns: 1fr; }
      .search-inline input { min-width: 100%; }
      .receipt-item { grid-template-columns: 1fr; }
    }

    /* Layout stabilization for cover/main split and fixed top chrome */
    body.cover-mode .top-chrome {
      display: none !important;
    }
    body:not(.cover-mode) {
      /* 상단 크롬 높이는 JS 실측(--top-chrome-offset) 기준으로 통일 */
      --chrome-height: var(--top-chrome-offset);
      overflow: hidden;
    }
    body:not(.cover-mode) .top-chrome {
      display: grid !important;
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 1500;
      /* 헤더/툴바 실제 높이에 맞춰 자동 배치 (겹침 방지) */
      grid-template-rows: auto auto;
      pointer-events: none;
    }
    body:not(.cover-mode) .top-chrome > * {
      pointer-events: auto;
    }
    body:not(.cover-mode) .page-header {
      position: relative !important;
      top: auto !important; left: auto !important; right: auto !important;
      width: 100% !important; height: var(--app-header-bar-height) !important;
      transform: none !important; padding: 0 !important;
      border-radius: 0 !important;
      border-left: 0 !important; border-right: 0 !important; border-top: 0 !important;
      box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
    }
    body:not(.cover-mode) .page-header-inner {
      width: 100% !important; height: var(--app-header-bar-height) !important; min-height: var(--app-header-bar-height) !important;
      display: grid !important;
      grid-template-columns: auto 1fr auto auto !important;
      align-items: center !important; padding: 0 !important;
    }
    body:not(.cover-mode) .page-header-logo { height: var(--app-header-logo-height) !important; max-height: var(--app-header-logo-height) !important; }
    body:not(.cover-mode) .page-header-copy h1 {
      font-size: clamp(14px, 1.5vw, 19px) !important;
      line-height: 1.15 !important;
      margin: 0 !important;
    }
    body:not(.cover-mode) .page-header-copy .page-header-eyebrow,
    body:not(.cover-mode) .page-header-copy span.page-header-eyebrow {
      font-size: 10px !important;
      letter-spacing: 0.16em !important;
      margin-top: 3px !important;
    }
    body:not(.cover-mode) .header-utility-box {
      grid-column: 3;
      display: inline-flex; align-items: center; gap: 8px;
      padding: 0 10px; flex-shrink: 0;
    }
    body:not(.cover-mode) .header-utility-box .theme-picker.compact {
      min-width: auto;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
      color: rgba(238, 244, 250, 0.84);
      font-size: 11px;
      gap: 4px;
    }
    body:not(.cover-mode) .header-utility-box .theme-picker.compact select {
      min-width: 72px;
      height: 28px !important;
      padding: 0 22px 0 8px !important;
      border-radius: 10px !important;
      border: 1px solid rgba(255,255,255,0.18) !important;
      background: rgba(255,255,255,0.16) !important;
      color: #f5f8fb !important;
      box-shadow: none !important;
    }
    body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn {
      height: 28px;
      padding: 0 10px;
      border-radius: 10px;
      border-color: rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.16);
      color: #f5f8fb;
    }
    body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn.is-on {
      border-color: rgba(147,197,253,0.42);
      background: rgba(96,165,250,0.16);
      color: #dbeafe;
    }
    body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn.is-off {
      color: rgba(245,248,251,0.74);
      background: rgba(255,255,255,0.10);
    }
    /* 화이트/웜 테마에서는 툴팁 토글 대비를 강제해 텍스트가 묻히지 않게 한다 */
    body[data-theme="white"]:not(.cover-mode) .header-utility-box .tooltip-toggle-btn,
    body[data-theme="warm"]:not(.cover-mode) .header-utility-box .tooltip-toggle-btn {
      border-color: color-mix(in srgb, var(--line) 74%, transparent);
      background: color-mix(in srgb, var(--panel) 90%, transparent);
      color: var(--text);
    }
    body[data-theme="white"]:not(.cover-mode) .header-utility-box .tooltip-toggle-btn.is-on,
    body[data-theme="warm"]:not(.cover-mode) .header-utility-box .tooltip-toggle-btn.is-on {
      border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
      background: color-mix(in srgb, var(--primary) 14%, var(--panel));
      color: var(--primary-dark);
    }
    body[data-theme="white"]:not(.cover-mode) .header-utility-box .tooltip-toggle-btn.is-off,
    body[data-theme="warm"]:not(.cover-mode) .header-utility-box .tooltip-toggle-btn.is-off {
      border-color: color-mix(in srgb, var(--line) 78%, transparent);
      background: color-mix(in srgb, var(--panel) 88%, transparent);
      color: var(--muted-2);
      opacity: 1;
    }
    body:not(.cover-mode) .chrome-toolbar {
      display: grid !important;
      grid-template-rows: auto auto;
      background: var(--panel-shell) !important;
      border-bottom: 1px solid var(--panel-shell-border) !important;
      box-shadow: var(--shadow-soft) !important;
    }
    body:not(.cover-mode) .toolbar.nav-combined,
    body:not(.cover-mode) .filter-strip {
      width: 100% !important;
      margin: 0 !important;
      border-radius: 0 !important;
      border-left: 0 !important;
      border-right: 0 !important;
      box-shadow: none !important;
    }
    body:not(.cover-mode) .toolbar.nav-combined {
      padding: 6px 18px !important;
      background: var(--toolbar-surface) !important;
      border-top: 0 !important;
      border-bottom: 1px solid var(--line-2) !important;
    }
    .mode-cluster {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-right: 12px;
      flex-shrink: 0;
    }
    .compact-top-filters {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: flex-end;
      flex-wrap: wrap;
    }
    .compact-top-filters label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 800;
      color: var(--muted);
      white-space: nowrap;
    }
    .compact-top-filters select {
      min-width: 68px;
      max-width: 88px;
      height: 32px;
      padding: 0 22px 0 8px;
      border-radius: 10px;
      font-size: 14px;
    }
    body:not(.cover-mode) .filter-strip {
      padding: 8px 18px 10px !important;
      background: var(--panel-shell) !important;
      border-top: 0 !important;
      border-bottom: 0 !important;
    }
    body:not(.cover-mode) .toolbar::after,
    body:not(.cover-mode) .filter-strip::after {
      left: 0 !important;
      right: 0 !important;
      top: 0 !important;
      height: 2px !important;
      border-radius: 0 !important;
    }
    body:not(.cover-mode) .toolbar.nav-combined::after {
      display: none !important;
    }
    body:not(.cover-mode) .filter-groups {
      display: flex !important;
      flex-wrap: wrap;
      gap: 20px 24px;
      align-items: flex-end;
    }
    body:not(.cover-mode) .filter-group label {
      min-width: 0 !important;
      font-weight: 700 !important;
      color: var(--muted) !important;
    }
    body:not(.cover-mode) .filter-group select {
      height: 34px !important;
      padding: 0 12px !important;
      border-radius: 10px !important;
      border: 1px solid var(--line) !important;
      background: var(--panel) !important;
      box-shadow: var(--shadow-soft) !important;
      color: var(--text) !important;
    }
    /* 상단 툴바: atlas 레이아웃의 !important(muted)보다 선택 상태가 우선 */
    body:not(.cover-mode) #filterStrip .filter-group label.is-active {
      color: var(--primary) !important;
      border-color: color-mix(in srgb, var(--primary) 50%, var(--line)) !important;
      background: color-mix(in srgb, var(--primary) 12%, var(--panel)) !important;
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--primary) 26%, transparent),
        0 2px 12px color-mix(in srgb, var(--primary) 18%, transparent) !important;
    }
    body:not(.cover-mode) #filterStrip .filter-group select.is-filtered {
      border-color: var(--primary) !important;
      background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 94%, #fff 6%) 0%, var(--primary) 100%) !important;
      border-radius: 999px !important;
      box-shadow: 0 2px 14px color-mix(in srgb, var(--primary) 42%, transparent) !important;
      color: #ffffff !important;
      font-weight: 700 !important;
    }
    body:not(.cover-mode) .inline-filter-box label.is-active select,
    body:not(.cover-mode) .inline-filter-box select.is-filtered {
      border-color: var(--primary) !important;
      background: var(--primary) !important;
      box-shadow: none !important;
      color: #ffffff !important;
      font-weight: 700 !important;
    }
    body:not(.cover-mode) .inline-filter-box label[data-filter-depth] {
      position: relative;
    }
    body:not(.cover-mode) .inline-filter-box label[data-filter-depth]::after {
      content: attr(data-filter-depth);
      position: absolute;
      top: 5px;
      right: 8px;
      font-size: 9px;
      color: rgba(100, 116, 139, 0.72);
      letter-spacing: 0.08em;
      pointer-events: none;
    }
    body:not(.cover-mode) .inline-filter-box label[data-filter-depth] select {
      padding-top: 10px !important;
    }
    body:not(.cover-mode) .filter-utility-box {
      grid-area: utility;
      display: inline-flex !important;
      align-items: end;
      gap: 8px;
      flex-wrap: nowrap !important;
    }
    body:not(.cover-mode) .filter-utility-box .btn {
      height: 34px !important;
      border-radius: 10px !important;
    }
    .loading-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(241, 245, 249, 0.42);
      backdrop-filter: blur(3px);
      z-index: 2600;
    }
    /* 초기 로딩 시에는 화면보호기 이미지를 배경으로 사용 */
    body.app-loading-idle .loading-overlay {
      background: transparent;
      backdrop-filter: none;
    }
    .loading-overlay.is-active {
      display: flex;
    }
    .loading-card {
      display: grid;
      justify-items: center;
      gap: 14px;
      min-width: 420px;
      max-width: min(86vw, 680px);
      padding: 34px 44px;
      border-radius: 24px;
      border: 1px solid rgba(129, 144, 161, 0.22);
      background: var(--panel-strong);
      box-shadow: var(--shadow);
      text-align: center;
    }
    .loading-card strong {
      font-size: 24px;
      font-weight: 800;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }
    .loading-card p {
      margin: 0;
      color: color-mix(in srgb, var(--text) 88%, #000 12%);
      font-size: 18px;
      font-weight: 700;
      line-height: 1.5;
      max-width: 52ch;
      white-space: pre-line;
      text-align: center;
    }
    .loading-spinner {
      width: 68px;
      height: 68px;
      border-radius: 999px;
      border: 0;
      position: relative;
    }
    .loading-spinner-ring {
      position: absolute;
      inset: 0;
      border-radius: 999px;
      background: conic-gradient(
        #ff004c,
        #ff7a00,
        #ffd400,
        #2bdc6f,
        #00c2ff,
        #4b7bff,
        #b64bff,
        #ff004c
      );
      -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%);
      mask: radial-gradient(circle, transparent 58%, #000 60%);
      filter: saturate(1.15) contrast(1.05);
      box-shadow: 0 10px 22px rgba(29, 42, 58, 0.10);
      animation: spin 0.85s linear infinite;
      z-index: 1;
    }
    @media (max-width: 900px) {
      .loading-card {
        min-width: min(88vw, 480px);
        padding: 26px 24px;
      }
      .loading-card strong { font-size: 20px; }
      .loading-card p { font-size: 14px; }
      .loading-spinner { width: 56px; height: 56px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .loading-spinner-ring { animation-duration: 1.4s; }
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* 초기 로딩: 얇은 인디터민트 바 — 입체 트랙 + 무지개 슬립과 스피너 톤 맞춤 */
    .loading-progress-3d {
      width: 100%;
      max-width: min(420px, 78vw);
      margin: 4px 0 2px;
    }
    .loading-progress-3d__track {
      position: relative;
      height: 5px;
      border-radius: 999px;
      overflow: hidden;
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--panel-surface, #f8fafc) 55%, #64748b) 0%,
        color-mix(in srgb, var(--line, #e2e8f0) 70%, #475569) 100%
      );
      box-shadow:
        inset 0 2px 3px rgba(15, 23, 42, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.35),
        0 1px 2px rgba(15, 23, 42, 0.12);
    }
    .loading-progress-3d__fill {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 42%;
      border-radius: 999px;
      background: linear-gradient(
        90deg,
        rgba(255, 0, 76, 0.92) 0%,
        rgba(255, 122, 0, 0.95) 22%,
        rgba(255, 212, 0, 0.92) 44%,
        rgba(43, 220, 111, 0.9) 62%,
        rgba(0, 194, 255, 0.92) 80%,
        rgba(75, 123, 255, 0.95) 100%
      );
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0 10px rgba(0, 194, 255, 0.22);
      transform: translate3d(-120%, 0, 0);
      opacity: 0;
      will-change: transform;
    }
    .loading-progress-3d.is-running .loading-progress-3d__fill {
      opacity: 1;
      animation: loading-progress-sweep 2.05s cubic-bezier(0.45, 0, 0.2, 1) infinite;
    }
    .loading-progress-3d__gloss {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      height: 55%;
      border-radius: 999px 999px 0 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), transparent);
      pointer-events: none;
      z-index: 1;
    }
    @keyframes loading-progress-sweep {
      0% { transform: translate3d(-120%, 0, 0); }
      100% { transform: translate3d(260%, 0, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .loading-progress-3d.is-running .loading-progress-3d__fill {
        animation: loading-progress-pulse-bar 1.8s ease-in-out infinite;
        width: 100%;
        transform: none;
      }
    }
    @keyframes loading-progress-pulse-bar {
      0%, 100% { opacity: 0.55; }
      50% { opacity: 1; }
    }
    body:not(.cover-mode) .shell {
      width: 100vw !important;
      height: var(--erp-visible-vh, 100vh) !important;
      margin: 0 !important;
      padding-top: var(--chrome-height) !important;
      overflow: hidden !important;
    }
    body:not(.cover-mode) main {
      height: calc((var(--erp-visible-vh, 100vh) - var(--chrome-height)) / var(--content-zoom)) !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      /* 상단 여백: 크롬 경계선과 콘텐츠 사이 명확한 공간 확보 */
      padding: 16px 10px 16px !important;
      zoom: var(--content-zoom) !important;
    }
    /* 메인요약도 동일 거터 규칙 적용 */
    .report-builder-editor-wrap {
      position: relative;
      min-height: 0;
    }
    .report-builder-shell {
      width: 100%;
      overflow: auto;
      padding: 8px 0 4px;
    }
    .report-builder-canvas-title {
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 16px;
    }
    .report-builder-canvas-title .report-builder-title-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-left: auto;
    }
    .report-builder-canvas-title .report-builder-page-tabs {
      padding: 0;
    }
    .report-builder-canvas-panel-head {
      padding-bottom: 6px;
      min-height: 0;
    }
    .report-builder-canvas-panel-head h3 { display: none; }
    .report-builder-page-tabs {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 0 10px;
      flex-wrap: wrap;
    }
    .report-builder-page-tabs-list {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
    }
    .report-builder-page-tab {
      padding: 8px 14px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--panel);
      color: var(--primary-dark);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    }
    .report-builder-page-tab:hover {
      background: var(--bg-2);
      border-color: var(--primary);
    }
    .report-builder-page-tab.active {
      background: var(--primary);
      color: var(--on-primary);
      border-color: var(--primary);
      box-shadow: var(--shadow-soft);
    }
    .report-builder-page-tab-wrap {
      display: inline-flex;
      align-items: center;
      gap: 2px;
    }
    .report-builder-page-tab-remove {
      width: 20px;
      height: 20px;
      padding: 0;
      border: none;
      border-radius: 50%;
      background: var(--line);
      color: var(--muted);
      font-size: 14px;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .report-builder-page-tab-remove:hover {
      background: rgba(185, 28, 28, 0.2);
      color: #b91c1c;
    }
    .report-builder-add-page-btn {
      padding: 8px 14px;
      font-size: 13px;
      font-weight: 600;
    }

    .report-builder-stage {
      position: relative;
      width: min(100%, 1680px);
      margin: 0 auto;
      padding: 16px;
      border-radius: 36px;
      background:
        radial-gradient(circle at top right, rgba(125, 211, 252, 0.16), transparent 26%),
        radial-gradient(circle at bottom left, rgba(29, 79, 145, 0.14), transparent 22%),
        linear-gradient(180deg, rgba(237, 243, 249, 0.98), rgba(223, 231, 239, 0.96));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 26px 64px rgba(22, 37, 55, 0.14);
    }
    .report-builder-stage::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 28px;
      border: 1px solid rgba(111, 136, 162, 0.18);
      pointer-events: none;
    }
    .report-builder-stage::after {
      content: "ERP Executive Slide";
      position: absolute;
      top: 16px;
      right: 26px;
      color: var(--muted);
      font-size: 11px;
      letter-spacing: 0.18em;
      font-weight: 800;
      text-transform: uppercase;
      pointer-events: none;
    }
    .report-builder-canvas {
      position: relative;
      width: 100%;
      aspect-ratio: 16 / 9;
      min-height: 900px;
      border-radius: 28px;
      border: 1px solid rgba(71, 96, 122, 0.24);
      background:
        linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
        radial-gradient(circle at top right, rgba(74,111,152,0.14), transparent 26%),
        linear-gradient(180deg, rgba(250,252,255,0.99), rgba(233,239,246,0.97));
      background-size: 32px 32px, 32px 32px, auto, auto;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 18px 44px rgba(22, 37, 55, 0.12);
      overflow: hidden;
    }
    .report-builder-empty {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      padding: 28px;
      text-align: center;
      color: var(--muted);
      font-size: 15px;
      letter-spacing: 0.01em;
    }
    .report-builder-widget {
      position: absolute;
      display: flex;
      flex-direction: column;
      min-width: 220px;
      min-height: 140px;
      background: rgba(248, 251, 254, 0.94);
      border: 1px solid rgba(80, 103, 128, 0.22);
      border-radius: 20px;
      box-shadow: 0 18px 34px rgba(24, 37, 53, 0.14);
      overflow: hidden;
      user-select: none;
      backdrop-filter: blur(14px);
    }
    .report-builder-widget.is-selected {
      border-color: rgba(29, 79, 145, 0.58);
      box-shadow: 0 22px 42px rgba(19, 60, 112, 0.18), 0 0 0 2px rgba(61, 109, 177, 0.16);
    }
    .report-builder-widget-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 14px;
      background: linear-gradient(180deg, var(--primary-dark), var(--primary));
      color: #ffffff;
      cursor: grab;
    }
    .report-builder-widget-header:active {
      cursor: grabbing;
    }
    .report-builder-widget-title {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    .report-builder-widget-title strong {
      font-size: 13px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .report-builder-widget-title span {
      font-size: 11px;
      color: rgba(235, 241, 247, 0.72);
    }
    .report-builder-widget-actions {
      display: inline-flex;
      gap: 6px;
      flex-shrink: 0;
    }
    .report-builder-widget-actions button {
      width: 26px;
      height: 26px;
      border: none;
      border-radius: 999px;
      background: rgba(255,255,255,0.16);
      color: #f6f9fb;
      cursor: pointer;
      font-size: 12px;
    }
    .report-builder-widget-body {
      position: relative;
      flex: 1;
      overflow: auto;
      padding: 12px;
      background: var(--panel);
    }
    .report-builder-widget-body > * {
      max-width: 100%;
    }
    .report-builder-widget-body .panel,
    .report-builder-widget-body .record-table,
    .report-builder-widget-body .chart-box,
    .report-builder-widget-body .summary-box {
      box-shadow: none !important;
      border: none !important;
      background: transparent !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    .report-builder-widget-body .panel-head {
      display: none !important;
    }
    .report-builder-widget-body .record-table {
      max-height: none !important;
      overflow: visible !important;
    }
    .report-builder-widget-resize {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 18px;
      height: 18px;
      cursor: nwse-resize;
      background:
        linear-gradient(135deg, transparent 0 44%, rgba(29, 79, 145, 0.42) 45% 54%, transparent 55%),
        linear-gradient(135deg, transparent 0 68%, rgba(29, 79, 145, 0.72) 69% 78%, transparent 79%);
    }
    .report-builder-guides {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 40;
    }
    .report-builder-guide {
      position: absolute;
      background: rgba(37, 99, 235, 0.45);
      box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.16);
    }
    .report-builder-guide.is-vertical {
      width: 1px;
      top: 0;
      bottom: 0;
    }
    .report-builder-guide.is-horizontal {
      height: 1px;
      left: 0;
      right: 0;
    }
    .builder-modal {
      position: fixed;
      inset: 0;
      display: none;
      z-index: 99999;
      align-items: center;
      justify-content: center;
      padding: 24px;
      box-sizing: border-box;
    }
    .builder-modal.is-open {
      display: flex;
    }
    .builder-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(10, 20, 34, 0.48);
      backdrop-filter: blur(8px);
    }
    .builder-modal-dialog {
      position: relative;
      width: min(1200px, 96%);
      max-height: min(88vh, 800px);
      display: flex;
      flex-direction: column;
      padding: 0;
      border-radius: 20px;
      border: 1px solid var(--panel-border);
      background: var(--panel-strong);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .builder-modal-dialog .panel-head {
      flex-shrink: 0;
      padding: 20px 24px 12px;
      border-bottom: 1px solid var(--line-2);
    }
    .builder-modal-dialog .panel-head h3 { margin: 0 0 6px; font-size: 18px; }
    .builder-modal-dialog .panel-head .meta { font-size: 13px; color: var(--muted); }
    .builder-modal-actions {
      flex-shrink: 0;
      display: flex;
      gap: 12px;
      justify-content: flex-end;
      align-items: center;
      padding: 14px 24px;
      border-bottom: 1px solid var(--line-2);
      background: var(--panel-surface);
    }
    .builder-modal-actions .btn { font-weight: 700; }
    .builder-catalog-wrap {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      padding: 20px 24px 24px;
    }
    .builder-catalog {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }
    .builder-catalog-group {
      display: block;
    }
    .builder-catalog-group .panel-head {
      margin-bottom: 12px;
      padding: 0 0 8px;
      border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .builder-catalog-group .panel-head h3 { font-size: 14px; color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.06em; }
    .builder-catalog-group .panel-head .meta { font-size: 11px; }
    .builder-catalog-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
      gap: 12px;
    }
    .builder-catalog-card {
      border-radius: 14px;
      border: 1px solid var(--line-2);
      background: var(--panel);
      padding: 16px 18px;
      box-shadow: var(--shadow-soft);
      transition: border-color 0.2s ease, box-shadow 0.2s ease;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .builder-catalog-card:hover {
      border-color: var(--primary);
      box-shadow: var(--accent-shadow);
    }
    .builder-catalog-card[data-viz-type="line"] { border-left: 4px solid #0ea5e9; }
    .builder-catalog-card[data-viz-type="bar"] { border-left: 4px solid #f59e0b; }
    .builder-catalog-card[data-viz-type="donut"] { border-left: 4px solid #7c3aed; }
    .builder-catalog-card[data-viz-type="table"] { border-left: 4px solid #6366f1; }
    .builder-catalog-card[data-viz-type="list"] { border-left: 4px solid #ec4899; }
    .builder-catalog-card[data-viz-type="scatter"] { border-left: 4px solid #10b981; }
    .builder-catalog-card[data-viz-type="card"] { border-left: 4px solid #a855f7; }
    .builder-catalog-card[data-viz-type="panel"] { border-left: 4px solid #64748b; }
    .builder-mini-viz-donut .builder-mini-viz-label { color: #7c3aed; font-weight: 800; }
    .builder-mini-viz-line .builder-mini-viz-label { color: #0ea5e9; font-weight: 800; }
    .builder-mini-viz-bar .builder-mini-viz-label { color: #f59e0b; font-weight: 800; }
    .builder-mini-viz-table .builder-mini-viz-label { color: #6366f1; font-weight: 800; }
    .builder-mini-viz-list .builder-mini-viz-label { color: #ec4899; font-weight: 800; }
    .builder-mini-viz-scatter .builder-mini-viz-label { color: #10b981; font-weight: 800; }
    .builder-mini-viz-card .builder-mini-viz-label { color: #a855f7; font-weight: 800; }
    .builder-mini-viz-panel .builder-mini-viz-label { color: #64748b; font-weight: 800; }
    .builder-catalog-card-viz {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 6px 0;
      border-bottom: 1px solid rgba(0,0,0,0.06);
    }
    .builder-catalog-viz-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      width: 100%;
      min-width: 0;
    }
    .builder-catalog-viz-row .builder-mini-viz {
      min-width: 0;
    }
    .builder-catalog-live-pill {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--ok, #059669);
      padding: 4px 9px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--ok, #10b981) 14%, transparent);
      border: 1px solid color-mix(in srgb, var(--ok, #10b981) 38%, transparent);
    }
    .builder-catalog-live-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      animation: builder-catalog-live-pulse 1.5s ease-in-out infinite;
    }
    @keyframes builder-catalog-live-pulse {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.4; transform: scale(0.88); }
    }
    .builder-mini-viz {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 10px;
      color: var(--muted, #64748b);
      font-weight: 600;
    }
    .builder-mini-viz svg {
      flex-shrink: 0;
      display: block;
    }
    .builder-mini-viz-label {
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .builder-catalog-card h4 {
      margin: 0 0 8px;
      font-size: 14px;
      font-weight: 700;
      line-height: 1.35;
      color: var(--text);
    }
    .builder-catalog-card p {
      margin: 0;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.5;
    }
    .builder-catalog-card label {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
    }
    .builder-catalog-card input[type="checkbox"] {
      margin-top: 2px;
      flex-shrink: 0;
      width: 18px;
      height: 18px;
    }
    .builder-catalog-card.is-on-current-slide {
      opacity: 0.72;
      border-style: dashed;
    }
    .builder-catalog-card.is-on-current-slide:hover {
      border-color: var(--line-2);
      box-shadow: var(--shadow-soft);
    }
    .builder-catalog-card.is-on-current-slide label {
      cursor: not-allowed;
    }
    .builder-catalog-on-slide {
      font-style: normal;
      font-weight: 700;
      color: var(--primary, #2563eb);
    }
    /* ═══ REPORT BUILDER PREMIUM STUDIO ═══ */
    #view-custom-report { padding: 0; }
    #view-custom-report .section { padding: 0 !important; background: none; border: none; box-shadow: none; margin: 0 !important; }
    #view-custom-report .section .rb-studio { margin: 0; }

    /* Unified studio shell */
    .rb-studio {
      display: flex; flex-direction: column;
      min-height: calc(var(--erp-visible-vh, 100vh) - var(--top-chrome-offset) - 16px);
      border-radius: var(--radius-lg); overflow: hidden;
      box-shadow: var(--shadow); border: 1px solid var(--line-2);
      background: var(--panel);
    }

    /* Studio top bar */
    .rb-topbar {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 18px; flex-wrap: nowrap;
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      border-bottom: 1px solid rgba(255,255,255,0.08);
      position: relative; overflow: hidden;
    }
    .rb-topbar::before {
      content: ""; position: absolute; inset: 0;
      background: radial-gradient(ellipse at 60% 50%, rgba(37,99,235,0.14) 0%, transparent 65%);
      pointer-events: none;
    }
    .rb-pills { display: flex; gap: 6px; z-index: 1; }
    .rb-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.12); flex-shrink: 0; z-index: 1; margin: 0 2px; }
    .rb-actions { display: flex; align-items: center; gap: 6px; z-index: 1; flex-wrap: nowrap; }
    .rb-pill {
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 5px 12px; border-radius: 10px;
      background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1);
      gap: 1px; min-width: 80px;
    }
    .rb-pill span { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; color: rgba(255,255,255,0.45); text-transform: uppercase; }
    .rb-pill strong { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.9); }
    .rb-divider { width: 1px; height: 28px; background: rgba(255,255,255,0.1); flex-shrink: 0; z-index: 1; }
    .rb-actions { display: flex; align-items: center; gap: 6px; z-index: 1; }
    .rb-btn {
      display: flex; align-items: center; gap: 5px;
      padding: 6px 13px; border-radius: 9px; font-size: 12px; font-weight: 700;
      font-family: inherit; cursor: pointer; border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.88);
      transition: all 0.15s; white-space: nowrap;
    }
    .rb-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.25); }
    .rb-btn.rb-btn-primary {
      background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
      border-color: rgba(96,165,250,0.3);
      box-shadow: 0 4px 14px rgba(37,99,235,0.35);
      color: #fff;
    }
    .rb-btn.rb-btn-primary:hover { box-shadow: 0 6px 20px rgba(37,99,235,0.5); transform: translateY(-1px); }
    .rb-btn.rb-btn-green { background: linear-gradient(135deg, #059669,#10b981); border-color: rgba(16,185,129,0.3); color: #fff; box-shadow: 0 4px 12px rgba(5,150,105,0.25); }
    .rb-title-wrap { flex: 1; display: flex; justify-content: center; z-index: 1; }
    .rb-studio-title { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.6); letter-spacing: 0.06em; }

    /* Slide tabs bar */
    .rb-tabs-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 18px;
      background: var(--bg); border-bottom: 1px solid var(--line-2);
      overflow-x: auto;
    }
    .rb-tabs-bar .report-builder-page-tabs-list { display: flex; gap: 6px; flex-wrap: nowrap; }
    .rb-tabs-bar .report-builder-page-tab {
      padding: 6px 14px; border-radius: 9px; border: 1.5px solid var(--line-2);
      background: var(--panel); color: var(--muted-2); font-size: 12px; font-weight: 600;
      cursor: pointer; transition: all 0.15s; white-space: nowrap;
    }
    .rb-tabs-bar .report-builder-page-tab:hover { border-color: var(--primary); color: var(--primary); }
    .rb-tabs-bar .report-builder-page-tab.active {
      background: var(--primary); color: #fff; border-color: var(--primary);
      box-shadow: 0 4px 12px rgba(37,99,235,0.3);
    }
    .rb-tabs-bar .report-builder-add-page-btn {
      padding: 6px 13px; font-size: 12px; font-weight: 600; border-radius: 9px;
      border: 1.5px dashed var(--line); background: transparent; color: var(--muted);
      cursor: pointer; transition: all 0.15s; white-space: nowrap; font-family: inherit;
    }
    .rb-tabs-bar .report-builder-add-page-btn:hover { border-color: var(--primary); color: var(--primary); }
    .rb-meta { font-size: 11px; color: var(--muted); margin-left: auto; white-space: nowrap; flex-shrink: 0; }

    /* Canvas area */
    .rb-canvas-area {
      flex: 1; display: flex; align-items: flex-start; justify-content: center;
      padding: 28px 24px 32px;
      background:
        radial-gradient(circle at 20% 20%, rgba(37,99,235,0.04) 0%, transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(99,102,241,0.04) 0%, transparent 40%),
        var(--bg);
      overflow: auto;
    }
    .report-builder-editor-wrap { position: relative; min-height: 0; width: 100%; }
    .report-builder-shell { width: 100%; overflow: visible; padding: 0; }
    .report-builder-stage {
      position: relative;
      width: min(100%, 1680px);
      margin: 0 auto;
      padding: 20px;
      border-radius: 28px;
      background:
        radial-gradient(circle at top right, rgba(125,211,252,0.12), transparent 26%),
        radial-gradient(circle at bottom left, rgba(29,79,145,0.10), transparent 22%),
        linear-gradient(180deg, rgba(237,243,249,0.99), rgba(223,231,239,0.97));
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.78), 0 32px 72px rgba(22,37,55,0.16);
    }
    .report-builder-stage::before {
      content: ""; position: absolute; inset: 10px; border-radius: 20px;
      border: 1px solid rgba(111,136,162,0.15); pointer-events: none;
    }
    .report-builder-stage::after {
      content: "ERP EXECUTIVE SLIDE"; position: absolute; top: 14px; right: 22px;
      color: rgba(111,136,162,0.55); font-size: 10px; letter-spacing: 0.22em;
      font-weight: 800; text-transform: uppercase; pointer-events: none;
    }
    .report-builder-canvas {
      position: relative; width: 100%; aspect-ratio: 16/9; min-height: 600px;
      border-radius: 20px; border: 1px solid rgba(71,96,122,0.2);
      background:
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
        radial-gradient(circle at top right, rgba(74,111,152,0.10), transparent 26%),
        linear-gradient(180deg, rgba(250,252,255,0.99), rgba(233,239,246,0.97));
      background-size: 32px 32px, 32px 32px, auto, auto;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.88), 0 18px 44px rgba(22,37,55,0.10);
      overflow: hidden;
    }
    .report-builder-empty {
      position: absolute; inset: 0; display: grid; place-items: center;
      padding: 28px; text-align: center; color: var(--muted); font-size: 15px;
    }
    /* Keep existing widget styles */
    .report-builder-widget {
      position: absolute; display: flex; flex-direction: column;
      min-width: 220px; min-height: 140px;
      background: rgba(248,251,254,0.94); border: 1px solid rgba(80,103,128,0.22);
      border-radius: 18px; box-shadow: 0 18px 34px rgba(24,37,53,0.14);
      overflow: hidden; user-select: none; backdrop-filter: blur(14px);
    }
    .report-builder-widget.is-selected {
      border-color: rgba(29,79,145,0.58);
      box-shadow: 0 22px 42px rgba(19,60,112,0.18), 0 0 0 2px rgba(61,109,177,0.16);
    }
    .report-builder-widget-header {
      display: flex; align-items: center; justify-content: space-between;
      gap: 10px; padding: 10px 14px;
      background: linear-gradient(180deg, var(--primary-dark), var(--primary));
      color: #fff; cursor: grab;
    }
    .report-builder-widget-header:active { cursor: grabbing; }
    .report-builder-widget-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .report-builder-widget-title strong { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .report-builder-widget-title span { font-size: 11px; color: rgba(235,241,247,0.72); }
    .report-builder-widget-actions { display: inline-flex; gap: 6px; flex-shrink: 0; }
    .report-builder-widget-actions button {
      width: 26px; height: 26px; border: none; border-radius: 999px;
      background: rgba(255,255,255,0.16); color: #f6f9fb; cursor: pointer; font-size: 12px;
    }
    .report-builder-widget-body { position: relative; flex: 1; overflow: auto; padding: 12px; background: var(--panel); }
    .report-builder-widget-body > * { max-width: 100%; }
    .report-builder-widget-body .panel, .report-builder-widget-body .record-table,
    .report-builder-widget-body .chart-box, .report-builder-widget-body .summary-box {
      box-shadow: none !important; border: none !important;
      background: transparent !important; padding: 0 !important; margin: 0 !important;
    }
    .report-builder-widget-body .panel-head { display: none !important; }
    .report-builder-widget-body .record-table { max-height: none !important; overflow: visible !important; }
    .report-builder-widget-resize {
      position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
      cursor: nwse-resize;
      background:
        linear-gradient(135deg, transparent 0 44%, rgba(29,79,145,0.42) 45% 54%, transparent 55%),
        linear-gradient(135deg, transparent 0 68%, rgba(29,79,145,0.72) 69% 78%, transparent 79%);
    }
    .report-builder-guides { position: absolute; inset: 0; pointer-events: none; z-index: 40; }
    .report-builder-guide { position: absolute; background: rgba(37,99,235,0.45); box-shadow: 0 0 0 1px rgba(37,99,235,0.16); }
    .report-builder-guide.is-vertical { width: 1px; top: 0; bottom: 0; }
    .report-builder-guide.is-horizontal { height: 1px; left: 0; right: 0; }
    /* Keep remaining page-tab + existing classes for compatibility */
    .report-builder-page-tab-wrap { display: inline-flex; align-items: center; gap: 2px; }
    .report-builder-page-tab-remove {
      width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%;
      background: var(--line); color: var(--muted); font-size: 14px; line-height: 1;
      cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
      transition: background 0.15s, color 0.15s;
    }
    .report-builder-page-tab-remove:hover { background: rgba(185,28,28,0.2); color: #b91c1c; }
    .report-builder-toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0; }
    .report-builder-import-btn {
      background: linear-gradient(135deg, var(--primary) 0%, #1a3a52 100%) !important;
      color: #fff !important; font-weight: 800; font-size: 15px; padding: 10px 20px;
      border: none; border-radius: 12px; box-shadow: 0 4px 14px var(--accent-shadow);
      transition: transform 0.15s ease, box-shadow 0.2s ease;
    }
    .report-builder-import-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px var(--shadow); }
    .report-builder-import-btn:active { transform: translateY(0); }
    .report-builder-help-btn { white-space: nowrap; font-size: 14px; }
    .report-builder-tutorial-btn, .qa-tutorial-btn {
      white-space: nowrap; font-size: 14px; font-weight: 700;
      background: var(--ok) !important; color: #fff !important;
      border: 1px solid color-mix(in srgb, var(--ok) 70%, #000) !important;
      box-shadow: 0 2px 8px color-mix(in srgb, var(--ok) 35%, transparent);
    }
    .report-builder-tutorial-btn:hover,
    .qa-tutorial-btn:hover {
      background: color-mix(in srgb, var(--ok) 80%, #000) !important;
      color: #fff !important;
      border-color: color-mix(in srgb, var(--ok) 60%, #000) !important;
      box-shadow: 0 4px 12px color-mix(in srgb, var(--ok) 40%, transparent);
    }

    /* ═══ 맞춤 리포트(#view-custom-report) — 스튜디오·캔버스·위젯 타이포·버튼 전반 확대 ═══ */
    #view-custom-report .rb-pill {
      padding: 8px 14px !important;
      min-width: 96px !important;
      border-radius: 12px !important;
    }
    #view-custom-report .rb-pill span {
      font-size: 11px !important;
      letter-spacing: 0.08em !important;
    }
    #view-custom-report .rb-pill strong {
      font-size: 15px !important;
    }
    #view-custom-report .rb-topbar {
      padding: 12px 20px !important;
      gap: 12px !important;
    }
    #view-custom-report .rb-divider {
      height: 34px !important;
    }
    #view-custom-report .rb-btn {
      padding: 9px 16px !important;
      font-size: 14px !important;
      border-radius: 10px !important;
      gap: 6px !important;
    }
    #view-custom-report .rb-ppt-mode-label {
      font-size: 12px !important;
      font-weight: 700 !important;
      color: var(--muted-2, #64748b) !important;
      white-space: nowrap !important;
      margin: 0 2px 0 4px !important;
    }
    #view-custom-report .rb-ppt-mode-select {
      max-width: 220px !important;
      padding: 6px 10px !important;
      font-size: 12px !important;
      border-radius: 8px !important;
      border: 1px solid color-mix(in srgb, var(--line, #cbd5e1) 90%, transparent) !important;
      background: var(--panel, #fff) !important;
      color: var(--text, #0f172a) !important;
    }
    #view-custom-report .rb-studio-title {
      font-size: 16px !important;
      letter-spacing: 0.05em !important;
    }
    #view-custom-report .rb-tabs-bar {
      padding: 10px 18px !important;
      gap: 10px !important;
    }
    #view-custom-report .rb-tabs-bar .report-builder-page-tab {
      padding: 8px 16px !important;
      font-size: 14px !important;
      border-radius: 10px !important;
    }
    #view-custom-report .rb-tabs-bar .report-builder-add-page-btn {
      padding: 8px 14px !important;
      font-size: 14px !important;
      border-radius: 10px !important;
    }
    #view-custom-report .rb-meta {
      font-size: 13px !important;
    }
    #view-custom-report .report-builder-stage::after {
      font-size: 12px !important;
      top: 16px !important;
      right: 24px !important;
    }
    #view-custom-report .report-builder-empty {
      font-size: 17px !important;
      line-height: 1.6 !important;
    }
    #view-custom-report .report-builder-widget-header {
      padding: 12px 16px !important;
    }
    #view-custom-report .report-builder-widget-title strong {
      font-size: 15px !important;
    }
    #view-custom-report .report-builder-widget-title span {
      font-size: 13px !important;
    }
    #view-custom-report .report-builder-widget-actions button {
      width: 30px !important;
      height: 30px !important;
      font-size: 14px !important;
    }
    #view-custom-report .report-builder-widget-body {
      display: flex !important;
      flex-direction: column !important;
      flex: 1 1 auto !important;
      min-height: 0 !important;
      padding: 0 12px 10px !important;
      font-size: 12px !important;
      line-height: 1.45 !important;
    }
    #view-custom-report .report-builder-widget-body > .rb-widget-scale-holder {
      flex: 1 1 auto !important;
      width: 100% !important;
      min-height: 0 !important;
      max-width: none !important;
      align-self: stretch !important;
    }
    #view-custom-report .report-builder-widget-body > .rb-widget-scale-holder:has(.product-donut-rd__viz--slice-labels) {
      overflow: visible !important;
    }
    #view-custom-report .report-builder-widget:has(.product-donut-rd__viz--slice-labels) {
      overflow: visible;
    }
    #view-custom-report .report-builder-widget-body:has(.product-donut-rd__viz--slice-labels) {
      overflow: visible !important;
    }
    #view-custom-report .rb-widget-scale-inner {
      box-sizing: border-box;
    }
    #view-custom-report .rb-widget-scale-inner--stacked {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    #view-custom-report .rb-widget-scaled-chrome-slot {
      flex-shrink: 0;
      overflow: hidden;
      box-sizing: border-box;
    }
    #view-custom-report .rb-widget-scaled-chrome-slot .report-builder-widget-header {
      height: 100%;
      min-height: 0;
      box-sizing: border-box;
    }
    #view-custom-report .rb-widget-clone-pane {
      flex-shrink: 0;
      overflow: hidden;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      min-height: 0;
    }
    /* 클론 루트가 pane 높이(nh)를 실제로 채워 도넛 flex·% 폭이 0으로 붕괴되지 않게 함 */
    :is(#view-custom-report .rb-widget-clone-pane) > .rb-report-clone-donut-rd {
      flex: 1 1 auto;
      min-height: 0;
      width: 100%;
      height: 100%;
    }
    #view-custom-report .report-builder-widget-body .record-table table,
    #view-custom-report .report-builder-widget-body .record-table th,
    #view-custom-report .report-builder-widget-body .record-table td {
      font-size: 12px !important;
    }
    #view-custom-report .report-builder-widget-body .mini-note {
      font-size: 11px !important;
    }
    #view-custom-report .report-builder-widget-body .legend-item {
      font-size: 18px !important;
      font-weight: 700 !important;
      line-height: 1.25 !important;
    }
    #view-custom-report .report-builder-widget-body svg {
      max-width: 100%;
      height: auto;
    }
    /* 목표대비 브리핑: 요약 탭과 동일 툴바(월·분기·반기·연 / 막대·선·막대금액) 표시 */
    #view-custom-report .report-builder-widget[data-preserve-panel-head="true"] .report-builder-widget-body .panel-head {
      display: flex !important;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px;
      overflow: visible;
    }
    #view-custom-report .report-builder-widget[data-preserve-panel-head="true"] .report-builder-widget-body .panel-head h3 {
      flex-shrink: 0;
      margin: 0;
      font-size: 14px !important;
    }
    #view-custom-report .report-builder-widget[data-preserve-panel-head="true"] .report-builder-widget-body .summary-goal-panel-head {
      align-items: center;
    }
    #view-custom-report .report-builder-widget[data-preserve-panel-head="true"] .report-builder-widget-body .summary-goal-head-toolbar {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      flex: 1;
      min-width: 0;
      justify-content: flex-end;
      margin-right: 0;
      overflow: visible;
    }
    #view-custom-report .report-builder-widget[data-preserve-panel-head="true"] .report-builder-widget-body .summary-goal-brief-detail-host select {
      height: 32px;
      min-height: 32px;
      border-radius: 10px;
      border: 1px solid var(--line-2);
      background: color-mix(in srgb, var(--panel) 92%, var(--bg) 8%);
      color: var(--text);
      font-size: 12px;
      font-weight: 700;
      padding: 0 26px 0 8px;
      outline: none;
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 4.1 6 7.9l3.8-3.8' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
    }
    #view-custom-report .report-builder-widget[data-preserve-panel-head="true"] .report-builder-widget-body .summary-goal-viz-toggle .btn-mini {
      padding: 5px 10px;
      font-size: 12px;
    }
    #view-custom-report .report-builder-widget[data-preserve-panel-head="true"] .report-builder-widget-body .line-chart-toolbar .gran-btn {
      font-size: 18px;
      padding: 5px 10px;
    }
    #view-custom-report .report-builder-widget[data-preserve-panel-head="true"] .report-builder-widget-body .summary-goal-panel .chart-box {
      min-height: 180px;
    }
    /* 맞춤 위젯: #view-customer 전용 선택자 밖으로 나온 거래처 매출순위 표 — 원본과 동일 톤·레이아웃 */
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-tab.customer-rank-table {
      --customer-rank-wrap-border: color-mix(in srgb, var(--panel-border) 72%, var(--line-soft));
      --customer-rank-head-fill: var(--table-head-bg);
      --customer-rank-row-fill: color-mix(in srgb, var(--panel-surface) 92%, var(--panel));
      --customer-rank-row-fill-alt: color-mix(in srgb, var(--panel-surface) 84%, var(--panel));
      --customer-rank-row-hover: color-mix(in srgb, var(--panel-surface) 78%, var(--muted) 8%);
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-tab.customer-rank-table table.ranking-table {
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-tab.customer-rank-table thead th {
      background: var(--customer-rank-head-fill) !important;
      border-top: 1px solid var(--customer-rank-wrap-border) !important;
      border-bottom: 1px solid var(--customer-rank-wrap-border) !important;
      font-size: 12px;
      font-weight: 800;
      color: var(--table-head-text);
      text-align: center;
      vertical-align: middle;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-tab.customer-rank-table thead th:first-child,
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-tab.customer-rank-table tbody td:first-child {
      border-left: 1px solid var(--customer-rank-wrap-border) !important;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-tab.customer-rank-table thead th:last-child,
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-tab.customer-rank-table tbody td:last-child {
      border-right: 1px solid var(--customer-rank-wrap-border) !important;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-tab.customer-rank-table tbody td {
      background: var(--customer-rank-row-fill) !important;
      border-top: 1px solid var(--customer-rank-wrap-border) !important;
      border-bottom: 1px solid var(--customer-rank-wrap-border) !important;
      font-size: 12px;
      font-weight: 800;
      text-align: center;
      vertical-align: middle;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-tab.customer-rank-table tbody tr:nth-child(even) td {
      background: var(--customer-rank-row-fill-alt) !important;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-tab.customer-rank-table tbody tr:hover td {
      background: var(--customer-rank-row-hover) !important;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-name-cell {
      text-align: center;
      max-width: 0;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-name {
      display: inline-block;
      max-width: min(100%, 11.5rem);
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--line-2);
      background: var(--panel-surface);
      font-weight: 800;
      font-size: 12px;
      color: var(--table-head-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
      line-height: 1.35;
      box-sizing: border-box;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-major-cell {
      text-align: center;
      max-width: 9rem;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-major-cell .customer-rank-pill {
      display: inline-block;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: middle;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-share-stack {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 5px;
      width: 100%;
      max-width: 7.5rem;
      margin: 0 auto;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-share-meter {
      width: 100%;
      height: 5px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--line) 72%, transparent);
      overflow: hidden;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-share-meter > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      min-width: 3px;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 54px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--panel-border) 62%, var(--line-soft));
      background: color-mix(in srgb, var(--panel-surface) 72%, var(--accent-soft) 28%);
      color: var(--table-head-text);
      font-size: 12px;
      font-weight: 800;
      padding: 3px 10px;
      line-height: 1.35;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-pill.is-accent {
      border-color: color-mix(in srgb, var(--accent) 34%, var(--line-soft));
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-pill--segment {
      --cust-seg: #2563eb;
      min-width: 2.1rem;
      padding: 4px 9px;
      background: var(--cust-seg);
      border-color: color-mix(in srgb, var(--cust-seg) 38%, #0f172a);
      color: #fff;
      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-pill--segment-muted {
      background: color-mix(in srgb, var(--cust-seg) 30%, var(--panel-surface));
      color: var(--table-head-text);
      border-color: color-mix(in srgb, var(--cust-seg) 42%, var(--line));
      text-shadow: none;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-pill--sales {
      --cust-seg: #94a3b8;
      min-width: 3.2rem;
      background: color-mix(in srgb, var(--cust-seg) 16%, var(--panel-surface));
      border-color: color-mix(in srgb, var(--cust-seg) 52%, var(--line));
      color: var(--table-head-text);
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-pill--muted-count {
      min-width: 2.4rem;
      background: color-mix(in srgb, var(--panel-surface) 86%, var(--muted) 14%);
      color: var(--muted);
      border-color: var(--line-2);
      font-weight: 700;
    }
    #view-custom-report .report-builder-widget.rb-scope-customer .customer-rank-pill--share-pct {
      --cust-seg: #94a3b8;
      min-width: 3rem;
      background: color-mix(in srgb, var(--panel-surface) 78%, var(--cust-seg) 22%);
      border-color: color-mix(in srgb, var(--cust-seg) 40%, var(--line));
    }
    /* 맞춤·의견 미리보기 복제 도넛: .product-donut-redesign (#view-* …) 밖으로 나가면 기본 도넛 스타일이 안 먹어 여기서 flex·슬라이스 글자 크기 등 보강 */
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      min-height: 0;
      flex: 1;
      width: 100%;
      overflow: hidden;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-redesign {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: flex-start;
      gap: 8px;
      width: 100%;
      flex: 1 1 0;
      min-height: 0;
      padding: 2px 0 0;
      box-sizing: border-box;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__viz {
      position: relative;
      flex: 0 0 auto;
      width: min(320px, max(130px, 68%));
      max-width: 100%;
      aspect-ratio: 1;
      align-self: center;
      min-width: 130px;
      min-height: 130px;
    }
    /* 높이 0 컨테이너에서 size 쿼리가 깨지는 경우 방지 — 인라인 크기만 쿼리 */
    @supports (container-type: inline-size) {
      :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__viz {
        container-type: inline-size;
        container-name: product-donut-rd;
      }
    }
    /* 원본(#view-customer #customerShareDonut, #view-customer #customerOrgSplitChart …) 밖으로 복제되면 슬라이스 SVG 텍스트에 font-size 미적용 → 기본 16userUnit로 도넛 전체를 덮음 */
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__viz.product-donut-rd__viz--slice-labels {
      overflow: visible;
      z-index: 0;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-redesign:has(.product-donut-rd__viz--slice-labels) {
      overflow: visible;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd:has(.product-donut-rd__viz--slice-labels) {
      overflow: visible;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__slice-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
      pointer-events: none;
      overflow: visible;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__slice-text {
      font-family: system-ui, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
      font-weight: 800;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__slice-name {
      font-size: 4.35px;
      fill: #fff;
      paint-order: stroke fill;
      stroke: rgba(0, 0, 0, 0.42);
      stroke-width: 0.45px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__slice-pct {
      font-size: 3.9px;
      fill: rgba(255, 255, 255, 0.98);
      paint-order: stroke fill;
      stroke: rgba(0, 0, 0, 0.38);
      stroke-width: 0.35px;
    }
    body[data-theme="dark"] :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__slice-name,
    body[data-theme="dark"] :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__slice-pct {
      stroke: rgba(0, 0, 0, 0.58);
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__ring-shell {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      padding: 5px;
      background: linear-gradient(160deg, color-mix(in srgb, var(--panel) 70%, var(--muted-2) 30%), var(--panel));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--line-2) 85%, transparent),
        0 14px 32px color-mix(in srgb, var(--text) 8%, transparent),
        inset 0 1px 0 color-mix(in srgb, #fff 22%, transparent);
    }
    body[data-theme="dark"] :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__ring-shell {
      background: linear-gradient(165deg, color-mix(in srgb, var(--panel) 55%, #0f172a), var(--panel));
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--line-2) 90%, transparent),
        0 16px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__ring-glow {
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 28%, transparent), transparent 72%);
      pointer-events: none;
      z-index: 0;
      opacity: 0.85;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__ring {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 6%, transparent);
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__core {
      position: absolute;
      inset: 21%;
      border-radius: 50%;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6px 8px;
      background: var(--panel);
      border: 1px solid color-mix(in srgb, var(--line-2) 92%, transparent);
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
        0 6px 18px color-mix(in srgb, var(--text) 7%, transparent);
    }
    body[data-theme="dark"] :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__core {
      box-shadow:
        inset 0 1px 0 color-mix(in srgb, #fff 5%, transparent),
        0 8px 22px rgba(0, 0, 0, 0.35);
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__kicker {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--muted);
      line-height: 1.2;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__pct {
      font-size: clamp(22px, 6cqw, 34px);
      font-weight: 900;
      letter-spacing: -0.04em;
      color: var(--text);
      line-height: 1.05;
      margin: 2px 0 1px;
      font-variant-numeric: tabular-nums;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__pct-unit {
      font-size: 0.55em;
      font-weight: 800;
      opacity: 0.75;
      margin-left: 1px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__name {
      font-size: 13px;
      font-weight: 700;
      color: color-mix(in srgb, var(--text) 88%, var(--primary) 12%);
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.25;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__foot {
      font-size: 11px;
      font-weight: 600;
      color: var(--muted);
      margin-top: 4px;
      line-height: 1.35;
      max-width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__legend {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      justify-content: center;
      overflow-x: hidden;
      overflow-y: auto;
      padding: 2px 0 2px 2px;
      max-height: 100%;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd-row {
      display: flex;
      align-items: center;
      gap: 6px;
      min-width: 0;
      padding: 4px 6px;
      border-radius: 10px;
      background: color-mix(in srgb, var(--panel) 92%, var(--muted-2) 8%);
      border: 1px solid color-mix(in srgb, var(--line-2) 80%, transparent);
      transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__legend .product-donut-rd-row {
      cursor: default;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd__legend .product-donut-rd-row:hover {
      border-color: color-mix(in srgb, var(--line-2) 80%, transparent);
      box-shadow: none;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd-row.is-focus-active {
      border-color: color-mix(in srgb, var(--primary) 55%, var(--line-2));
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent);
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd-swatch {
      flex: 0 0 12px;
      width: 12px;
      height: 12px;
      border-radius: 3px;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 12%, transparent);
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd-row__mid {
      flex: 1 1 0;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd-row__line1 {
      display: flex;
      align-items: baseline;
      justify-content: flex-start;
      flex-wrap: nowrap;
      gap: 6px;
      min-width: 0;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd-label {
      flex: 0 1 auto;
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd-amt {
      flex: 0 0 auto;
      font-size: 13px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      opacity: 0.92;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd-bar {
      height: 6px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--line-2) 55%, transparent);
      overflow: hidden;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd-bar > span {
      display: block;
      height: 100%;
      border-radius: 999px;
      min-width: 2px;
      transition: width 0.35s ease;
    }
    /* 클론 루트에 원본과 동일 클래스 유지: 거래처 #customerShareDonut 전용 타이트 범례 */
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd.customer-share-tab .product-donut-redesign {
      gap: 6px;
      justify-content: center;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd.customer-share-tab .product-donut-rd__legend {
      flex: 0 1 auto;
      min-width: 0;
      gap: 3px;
      padding: 0 0 0 1px;
      max-width: min(200px, 42%);
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd.customer-share-tab .product-donut-rd-row {
      padding: 3px 4px;
      gap: 4px;
      border-radius: 8px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd.customer-share-tab .product-donut-rd-swatch {
      flex: 0 0 9px;
      width: 9px;
      height: 9px;
      border-radius: 2px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd.customer-share-tab .product-donut-rd-row__mid {
      gap: 3px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd.customer-share-tab .product-donut-rd-row__line1 {
      gap: 4px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd.customer-share-tab .product-donut-rd-label {
      font-size: 12px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd.customer-share-tab .product-donut-rd-amt {
      font-size: 11px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd.customer-share-tab .product-donut-rd-pct {
      flex: 0 0 34px;
      width: 34px;
      font-size: 12px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd.customer-share-tab .product-donut-rd-bar {
      height: 5px;
    }
    :is(#view-custom-report .report-builder-widget-body) .rb-report-clone-donut-rd .product-donut-rd-pct {
      flex: 0 0 44px;
      width: 44px;
      text-align: right;
      font-size: 14px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: var(--muted);
    }
    #view-custom-report .report-builder-widget-resize {
      width: 22px !important;
      height: 22px !important;
    }
    #view-custom-report .report-builder-page-tab-remove {
      width: 24px !important;
      height: 24px !important;
      font-size: 15px !important;
    }
    /* 요소 추가 모달: 카탈로그 가독성 */
    #reportBuilderModal .builder-modal-dialog .panel-head h3 {
      font-size: 21px !important;
    }
    #reportBuilderModal .builder-modal-dialog .panel-head .meta {
      font-size: 15px !important;
    }
    #reportBuilderModal .builder-catalog-group .panel-head h3 {
      font-size: 15px !important;
    }
    #reportBuilderModal .builder-catalog-group .panel-head .meta {
      font-size: 13px !important;
    }
    #reportBuilderModal .builder-catalog-card h4 {
      font-size: 17px !important;
    }
    #reportBuilderModal .builder-catalog-card p {
      font-size: 14px !important;
      line-height: 1.55 !important;
    }
    #reportBuilderModal .builder-mini-viz {
      font-size: 12px !important;
    }
    #reportBuilderModal .builder-modal-actions .btn {
      font-size: 15px !important;
      padding: 10px 18px !important;
      min-height: 42px !important;
    }

    .builder-help-modal .builder-modal-dialog { width: min(560px, 94%); max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; }
    .builder-help-modal .builder-help-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px 24px; }
    .builder-help-modal .help-section { margin-bottom: 20px; }
    .builder-help-modal .help-section h4 { margin: 0 0 8px; font-size: 15px; font-weight: 800; color: var(--primary); }
    .builder-help-modal .help-section ul { margin: 0; padding-left: 20px; }
    .builder-help-modal .help-section li { margin: 4px 0; font-size: 14px; line-height: 1.5; color: var(--text); }
    .builder-help-modal .help-dt { font-weight: 700; color: var(--text); margin-top: 8px; }
    .builder-help-modal .help-dd { margin: 2px 0 0 12px; font-size: 13px; color: var(--muted); line-height: 1.45; }
    .builder-help-modal { z-index: 100000; }
    .tutorial-overlay {
      position: fixed;
      inset: 0;
      z-index: 100002;
      display: none;
      /* 컨테이너는 통과: 스포트라이트 구멍으로 아래 버튼 클릭 가능. 딤·카드만 포인터 차단 */
      pointer-events: none;
    }
    .tutorial-overlay.is-active { display: block; }
    .tutorial-dim {
      position: fixed;
      background: rgba(10, 20, 34, 0.62);
      pointer-events: auto;
      transition: opacity 0.2s ease, background 0.2s ease;
    }
    /* 테마 단계: 메인 요약 전체는 밝게 두고, 바깥(글로벌 크롬 등)만 살짝 어둡게 */
    .tutorial-overlay.tutorial-dim-soft .tutorial-dim {
      background: rgba(10, 20, 34, 0.28);
    }
    body[data-theme="dark"] .tutorial-overlay.tutorial-dim-soft .tutorial-dim {
      background: rgba(2, 6, 14, 0.42);
    }
    .tutorial-pointer {
      position: fixed;
      z-index: 100006;
      display: none;
      width: 46px;
      height: 72px;
      pointer-events: none;
      transform: translate(-50%, 0);
      filter: drop-shadow(0 10px 16px rgba(127, 29, 29, 0.45));
    }
    .tutorial-pointer.is-visible {
      display: block;
      animation: tutorial-pointer-bounce 1s ease-in-out infinite;
    }
    .tutorial-pointer-dot {
      position: absolute;
      left: 13px;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: #fee2e2;
      border: 4px solid #dc2626;
      box-shadow: 0 0 0 8px rgba(220, 38, 38, 0.28);
    }
    .tutorial-pointer-stem {
      position: absolute;
      left: 20px;
      top: 18px;
      width: 6px;
      height: 34px;
      border-radius: 999px;
      background: linear-gradient(to bottom, #ef4444, #dc2626);
    }
    .tutorial-pointer-head {
      position: absolute;
      left: 11px;
      width: 0;
      height: 0;
      border-left: 12px solid transparent;
      border-right: 12px solid transparent;
    }
    .tutorial-pointer.is-downward .tutorial-pointer-dot { top: 0; }
    .tutorial-pointer.is-downward .tutorial-pointer-head {
      top: 50px;
      border-top: 18px solid #dc2626;
    }
    .tutorial-pointer.is-upward .tutorial-pointer-dot { top: 51px; }
    .tutorial-pointer.is-upward .tutorial-pointer-stem { top: 20px; }
    .tutorial-pointer.is-upward .tutorial-pointer-head {
      top: 0;
      border-bottom: 18px solid #dc2626;
    }
    @keyframes tutorial-pointer-bounce {
      0%, 100% { transform: translate(-50%, 0); }
      50% { transform: translate(-50%, 9px); }
    }
    @keyframes tutorial-card-enter {
      0% { opacity: 0; transform: scale(0.94) translateY(12px); }
      100% { opacity: 1; transform: scale(1) translateY(0); }
    }
    /* 단계 전환 시 본문만 살짝 이동+페이드(JS가 카드 transform 고정하므로 래퍼에만 애니메이션) */
    .tutorial-card-matter {
      min-height: 0;
    }
    @keyframes tutorial-card-matter-step-swap {
      0% { opacity: 0.38; transform: translateY(10px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    .tutorial-card-matter.tutorial-card-matter--step-swap {
      animation: tutorial-card-matter-step-swap 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    @keyframes tutorial-card-step-swap {
      0% { opacity: 0.42; }
      100% { opacity: 1; }
    }
    .tutorial-overlay.is-active .tutorial-card.tutorial-card--step-swap {
      animation: tutorial-card-step-swap 0.4s ease-out both;
    }
    @keyframes tutorial-deco-shimmer {
      0% { transform: translateX(-40%) skewX(-12deg); opacity: 0; }
      35% { opacity: 0.55; }
      100% { transform: translateX(180%) skewX(-12deg); opacity: 0; }
    }
    @keyframes tutorial-deco-glow-pulse {
      0%, 100% { opacity: 0.45; transform: scale(1); }
      50% { opacity: 0.85; transform: scale(1.03); }
    }
    @keyframes tutorial-deco-float {
      0%, 100% { transform: translateY(0) rotate(-4deg); }
      50% { transform: translateY(-6px) rotate(4deg); }
    }
    @keyframes tutorial-ig-fill {
      0% { transform: scaleX(0); transform-origin: left center; opacity: 0.5; }
      45% { opacity: 1; }
      100% { transform: scaleX(1); transform-origin: left center; opacity: 1; }
    }
    @keyframes tutorial-ig-pop {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.12); }
    }
    @keyframes tutorial-cta-ring {
      0% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.5) inset,
          0 2px 0 #1e40af,
          0 10px 24px rgba(0, 0, 0, 0.35),
          0 0 0 0 rgba(96, 165, 250, 0.55);
      }
      70% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.5) inset,
          0 2px 0 #1e40af,
          0 10px 24px rgba(0, 0, 0, 0.35),
          0 0 0 14px rgba(96, 165, 250, 0);
      }
      100% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.5) inset,
          0 2px 0 #1e40af,
          0 10px 24px rgba(0, 0, 0, 0.35),
          0 0 0 0 rgba(96, 165, 250, 0);
      }
    }
    @keyframes tutorial-cta-shine {
      0% { transform: translateX(-120%) skewX(-18deg); }
      100% { transform: translateX(220%) skewX(-18deg); }
    }
    .tutorial-card {
      position: fixed;
      z-index: 100003;
      width: min(560px, calc(100vw - 28px));
      max-width: min(560px, calc(100vw - 28px));
      min-height: 140px;
      padding: 20px 28px 24px;
      border-radius: 20px;
      background: var(--panel-strong);
      border: 2px solid color-mix(in srgb, var(--primary) 55%, var(--line));
      box-shadow:
        var(--shadow),
        0 0 0 1px color-mix(in srgb, var(--primary) 18%, transparent),
        0 20px 48px rgba(15, 23, 42, 0.14);
      pointer-events: auto;
      overflow: hidden;
    }
    .tutorial-card-deco {
      position: relative;
      margin: -4px -12px 18px;
      padding: 14px 14px 12px;
      border-radius: 14px;
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.14) 0%, rgba(147, 51, 234, 0.1) 45%, rgba(14, 165, 233, 0.12) 100%);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .tutorial-card-deco__glow {
      position: absolute;
      inset: -40% -20%;
      background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(96, 165, 250, 0.35), transparent 65%);
      pointer-events: none;
      animation: tutorial-deco-glow-pulse 3.2s ease-in-out infinite;
    }
    .tutorial-card-deco__shine {
      position: absolute;
      top: 0;
      left: 0;
      width: 42%;
      height: 100%;
      background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent);
      pointer-events: none;
      animation: tutorial-deco-shimmer 3.8s ease-in-out infinite;
    }
    .tutorial-card-deco__emoji-row {
      position: relative;
      display: flex;
      justify-content: center;
      gap: 18px;
      margin-bottom: 10px;
      font-size: 26px;
      line-height: 1;
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
    }
    .tutorial-deco-emoji {
      display: inline-block;
      animation: tutorial-deco-float 2.4s ease-in-out infinite;
    }
    .tutorial-deco-emoji--1 { animation-delay: 0s; }
    .tutorial-deco-emoji--2 { animation-delay: 0.35s; }
    .tutorial-deco-emoji--3 { animation-delay: 0.7s; }
    .tutorial-card-deco__infographic {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0;
      margin-bottom: 8px;
      padding: 6px 4px;
    }
    .tutorial-ig-step {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      min-width: 56px;
    }
    .tutorial-ig-bubble {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      font-size: 20px;
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06));
      border: 1px solid rgba(255, 255, 255, 0.28);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
      animation: tutorial-ig-pop 2.2s ease-in-out infinite;
    }
    .tutorial-ig-step:nth-child(3) .tutorial-ig-bubble { animation-delay: 0.25s; }
    .tutorial-ig-step:nth-child(5) .tutorial-ig-bubble { animation-delay: 0.5s; }
    .tutorial-ig-label {
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(226, 232, 240, 0.92);
    }
    .tutorial-ig-track {
      flex: 1;
      min-width: 28px;
      max-width: 56px;
      height: 5px;
      margin: 0 2px;
      margin-bottom: 22px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.45);
      overflow: hidden;
      align-self: center;
    }
    .tutorial-ig-track__fill {
      display: block;
      height: 100%;
      width: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #38bdf8, #a78bfa, #22d3ee);
      transform: scaleX(0);
      transform-origin: left center;
      animation: tutorial-ig-fill 2.4s ease-in-out infinite;
    }
    .tutorial-ig-track__fill--delay { animation-delay: 0.5s; }
    .tutorial-card-deco__tagline {
      position: relative;
      margin: 0;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      color: rgba(186, 230, 253, 0.95);
      letter-spacing: -0.01em;
    }
    /* 라이트(쿨) 테마일 때: 안내창은 어두운 판으로 대비 */
    .tutorial-overlay.is-active .tutorial-card {
      background: linear-gradient(165deg, #0f172a 0%, #1e293b 52%, #0f172a 100%);
      border-color: rgba(148, 163, 184, 0.45);
      box-shadow:
        0 0 0 2px rgba(15, 23, 42, 0.95),
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 24px 56px rgba(0, 0, 0, 0.45);
      animation: tutorial-card-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .tutorial-overlay.is-active .tutorial-card-title {
      color: #93c5fd;
    }
    .tutorial-overlay.is-active .tutorial-card-text {
      color: #e2e8f0;
    }
    .tutorial-overlay.is-active .tutorial-card-text strong {
      color: #fde68a;
      background: linear-gradient(transparent 58%, rgba(250, 204, 21, 0.22) 58%);
    }
    .tutorial-overlay.is-active .tutorial-inline-kbd {
      color: #e0f2fe !important;
      border-color: rgba(125, 211, 252, 0.45);
      background: rgba(30, 41, 59, 0.95);
      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
    }
    .tutorial-overlay.is-active .tutorial-skip-btn,
    .tutorial-overlay.is-active #tutorialSkipBtn {
      color: #f1f5f9 !important;
      -webkit-text-fill-color: #f1f5f9 !important;
      background: rgba(255, 255, 255, 0.12) !important;
      border: 1px solid rgba(255, 255, 255, 0.38) !important;
      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.22) inset !important;
    }
    /* 다크 테마일 때: 안내창은 밝은 판으로 대비 */
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card {
      background: linear-gradient(165deg, #f8fafc 0%, #ffffff 48%, #f1f5f9 100%);
      border-color: rgba(30, 41, 59, 0.28);
      box-shadow:
        0 0 0 2px rgba(255, 255, 255, 0.98),
        0 0 0 1px rgba(15, 23, 42, 0.08),
        0 24px 56px rgba(15, 23, 42, 0.18);
      animation: tutorial-card-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card .tutorial-card-deco {
      background: linear-gradient(135deg, rgba(37, 99, 235, 0.14) 0%, rgba(99, 102, 241, 0.12) 50%, rgba(14, 165, 233, 0.12) 100%);
      border-color: rgba(15, 23, 42, 0.1);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card .tutorial-card-deco__glow {
      background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(59, 130, 246, 0.28), transparent 65%);
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card .tutorial-ig-label {
      color: #475569;
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card .tutorial-ig-bubble {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(241, 245, 249, 0.9));
      border-color: rgba(148, 163, 184, 0.45);
      box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card .tutorial-ig-track {
      background: rgba(226, 232, 240, 0.95);
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card .tutorial-card-deco__tagline {
      color: #334155;
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card-title {
      color: #1d4ed8;
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card-text {
      color: #0f172a;
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card-text strong {
      color: #b45309;
      background: linear-gradient(transparent 58%, rgba(251, 191, 36, 0.35) 58%);
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-inline-kbd {
      color: #1e40af !important;
      border-color: rgba(37, 99, 235, 0.35);
      background: rgba(241, 245, 249, 0.98);
      box-shadow: 0 2px 0 rgba(148, 163, 184, 0.45);
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-skip-btn,
    body[data-theme="dark"] .tutorial-overlay.is-active #tutorialSkipBtn {
      color: #0f172a !important;
      -webkit-text-fill-color: #0f172a !important;
      background: rgba(15, 23, 42, 0.08) !important;
      border: 1px solid rgba(15, 23, 42, 0.28) !important;
      box-shadow: none !important;
    }
    .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn.tutorial-next-glow,
    .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn {
      position: relative;
      overflow: hidden;
      color: #0f172a !important;
      border-color: #60a5fa;
      background: linear-gradient(180deg, #e0f2fe 0%, #93c5fd 52%, #3b82f6 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 2px 0 #1e40af,
        0 10px 24px rgba(0, 0, 0, 0.35);
      animation: tutorial-cta-ring 2.4s ease-out infinite;
    }
    .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn.tutorial-next-arrow-cue {
      overflow: visible;
      border-color: #ef4444 !important;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.45) inset,
        0 2px 0 #b91c1c,
        0 0 0 0 rgba(239, 68, 68, 0.65),
        0 10px 24px rgba(0, 0, 0, 0.35);
      animation: tutorial-next-red-ring 1.25s ease-in-out infinite;
    }
    .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn.tutorial-complete-cue {
      overflow: visible;
      border-color: #22c55e !important;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 2px 0 #166534,
        0 0 0 0 rgba(34, 197, 94, 0.58),
        0 10px 24px rgba(0, 0, 0, 0.35);
      animation: tutorial-complete-ring 1.2s ease-in-out infinite;
    }
    @keyframes tutorial-complete-ring {
      0%, 100% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.5) inset,
          0 2px 0 #166534,
          0 0 0 0 rgba(34, 197, 94, 0.58),
          0 10px 24px rgba(0, 0, 0, 0.35);
      }
      60% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.5) inset,
          0 2px 0 #166534,
          0 0 0 10px rgba(34, 197, 94, 0),
          0 10px 24px rgba(0, 0, 0, 0.35);
      }
    }
    .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn.tutorial-next-glow::after,
    .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn::after {
      content: "";
      position: absolute;
      inset: 0;
      left: -50%;
      width: 45%;
      background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
      pointer-events: none;
      animation: tutorial-cta-shine 2.8s ease-in-out infinite;
    }
    .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn.tutorial-next-arrow-cue::before {
      content: "⬇";
      position: absolute;
      left: 50%;
      top: -28px;
      transform: translateX(-50%);
      color: #ef4444;
      font-size: 20px;
      font-weight: 900;
      text-shadow: 0 2px 8px rgba(127, 29, 29, 0.35);
      pointer-events: none;
      animation: tutorial-next-arrow-bounce 1s ease-in-out infinite;
    }
    @keyframes tutorial-next-red-ring {
      0%, 100% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.45) inset,
          0 2px 0 #b91c1c,
          0 0 0 0 rgba(239, 68, 68, 0.65),
          0 10px 24px rgba(0, 0, 0, 0.35);
      }
      60% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.45) inset,
          0 2px 0 #b91c1c,
          0 0 0 9px rgba(239, 68, 68, 0),
          0 10px 24px rgba(0, 0, 0, 0.35);
      }
    }
    @keyframes tutorial-next-arrow-bounce {
      0%, 100% { transform: translateX(-50%) translateY(0); }
      50% { transform: translateX(-50%) translateY(3px); }
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn.tutorial-next-glow,
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn {
      color: #f8fafc !important;
      border-color: #2563eb;
      background: linear-gradient(180deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 2px 0 #1e3a8a,
        0 10px 24px rgba(15, 23, 42, 0.2);
      animation: tutorial-cta-ring-dark 2.4s ease-out infinite;
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn.tutorial-next-arrow-cue {
      border-color: #f87171 !important;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 2px 0 #7f1d1d,
        0 0 0 0 rgba(248, 113, 113, 0.72),
        0 10px 24px rgba(15, 23, 42, 0.22);
      animation: tutorial-next-red-ring-dark 1.25s ease-in-out infinite;
    }
    body[data-theme="dark"] .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn.tutorial-complete-cue {
      border-color: #4ade80 !important;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 2px 0 #14532d,
        0 0 0 0 rgba(74, 222, 128, 0.68),
        0 10px 24px rgba(15, 23, 42, 0.22);
      animation: tutorial-complete-ring-dark 1.2s ease-in-out infinite;
    }
    @keyframes tutorial-complete-ring-dark {
      0%, 100% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.2) inset,
          0 2px 0 #14532d,
          0 0 0 0 rgba(74, 222, 128, 0.68),
          0 10px 24px rgba(15, 23, 42, 0.22);
      }
      60% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.2) inset,
          0 2px 0 #14532d,
          0 0 0 10px rgba(74, 222, 128, 0),
          0 10px 24px rgba(15, 23, 42, 0.22);
      }
    }
    @keyframes tutorial-next-red-ring-dark {
      0%, 100% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.18) inset,
          0 2px 0 #7f1d1d,
          0 0 0 0 rgba(248, 113, 113, 0.72),
          0 10px 24px rgba(15, 23, 42, 0.22);
      }
      60% {
        box-shadow:
          0 1px 0 rgba(255, 255, 255, 0.18) inset,
          0 2px 0 #7f1d1d,
          0 0 0 9px rgba(248, 113, 113, 0),
          0 10px 24px rgba(15, 23, 42, 0.22);
      }
    }
    @keyframes tutorial-cta-ring-dark {
      0% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 0 #1e3a8a, 0 10px 24px rgba(15, 23, 42, 0.2), 0 0 0 0 rgba(59, 130, 246, 0.5); }
      70% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 0 #1e3a8a, 0 10px 24px rgba(15, 23, 42, 0.2), 0 0 0 12px rgba(59, 130, 246, 0); }
      100% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset, 0 2px 0 #1e3a8a, 0 10px 24px rgba(15, 23, 42, 0.2), 0 0 0 0 rgba(59, 130, 246, 0); }
    }
    .tutorial-card-title {
      margin: 0 0 14px;
      font-size: clamp(17px, 2.1vw, 20px);
      font-weight: 900;
      letter-spacing: -0.02em;
      line-height: 1.35;
      color: var(--primary);
    }
    .tutorial-card-text {
      margin: 0 0 16px;
      font-size: clamp(15px, 1.9vw, 17px);
      line-height: 1.72;
      color: var(--text);
    }
    .tutorial-card-text strong {
      font-weight: 800;
      color: var(--primary-dark, var(--primary));
      background: linear-gradient(
        transparent 58%,
        color-mix(in srgb, var(--accent) 32%, transparent) 58%
      );
      padding: 0 3px;
      border-radius: 3px;
    }
    .tutorial-card-text .tutorial-action-callout {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 1px 8px 2px;
      margin: 0 1px;
      border-radius: 999px;
      font-weight: 900;
      letter-spacing: 0.01em;
      color: #111827;
      border: 2px solid #f59e0b;
      background: linear-gradient(135deg, #fff7cc 0%, #fde68a 58%, #fcd34d 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 8px rgba(245, 158, 11, 0.22);
      text-shadow: none;
    }
    body[data-theme="dark"] .tutorial-card-text strong {
      color: #93c5fd;
      background: linear-gradient(
        transparent 55%,
        color-mix(in srgb, var(--primary-2) 35%, transparent) 55%
      );
    }
    body[data-theme="dark"] .tutorial-card-text .tutorial-action-callout {
      color: #111827;
      border-color: #fbbf24;
      background: linear-gradient(135deg, #fef3c7 0%, #fcd34d 60%, #f59e0b 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.35) inset,
        0 2px 10px rgba(251, 191, 36, 0.34);
    }
    .tutorial-inline-kbd {
      display: inline-block;
      font-weight: 900 !important;
      font-size: 0.95em;
      padding: 2px 10px;
      margin: 0 1px;
      border-radius: 8px;
      background: color-mix(in srgb, var(--primary) 12%, var(--panel-surface));
      border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--line));
      color: var(--primary) !important;
      box-shadow: 0 2px 0 color-mix(in srgb, var(--muted) 45%, transparent);
      background-image: none !important;
    }
    body[data-theme="dark"] .tutorial-inline-kbd {
      color: #bfdbfe !important;
      border-color: color-mix(in srgb, var(--primary-2) 50%, transparent);
      background: color-mix(in srgb, var(--primary) 18%, rgba(15, 23, 42, 0.9));
    }
    .tutorial-card-visual {
      display: none;
      margin: 16px 0 18px;
      padding: 18px 16px;
      border-radius: 14px;
      border: 1px solid var(--line);
      background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel-surface));
    }
    .tutorial-card-visual.is-visible { display: flex; gap: 12px; justify-content: center; align-items: stretch; flex-wrap: wrap; }
    .tutorial-visual-block {
      flex: 1;
      min-width: 140px;
      max-width: 200px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 2px solid var(--line);
      background: var(--panel-surface);
      text-align: center;
      transition: border-color 0.2s, box-shadow 0.2s;
    }
    .tutorial-visual-block.highlight-live {
      border-color: var(--teal);
      box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
      background: linear-gradient(180deg, rgba(13, 148, 136, 0.08) 0%, var(--panel) 100%);
    }
    .tutorial-visual-block.highlight-snapshot {
      border-color: var(--accent-warm);
      box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
      background: linear-gradient(180deg, rgba(124, 58, 237, 0.08) 0%, var(--panel) 100%);
    }
    .tutorial-visual-icon {
      display: block;
      font-size: 28px;
      margin-bottom: 6px;
      line-height: 1;
    }
    .tutorial-visual-block.highlight-live .tutorial-visual-icon { animation: tutorial-pulse-live 2s ease-in-out infinite; }
    .tutorial-visual-block.highlight-snapshot .tutorial-visual-icon { animation: tutorial-pulse-snapshot 2.5s ease-in-out infinite; }
    @keyframes tutorial-pulse-live { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.05); } }
    @keyframes tutorial-pulse-snapshot { 0%, 100% { opacity: 1; } 50% { opacity: 0.9; } }
    .tutorial-visual-label { font-size: 14px; font-weight: 800; color: var(--primary); margin-bottom: 4px; }
    .tutorial-visual-desc { font-size: 12px; line-height: 1.45; color: var(--muted); }
    .tutorial-f11-key-stage {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
    }
    .tutorial-f11-key-row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-end;
      gap: 8px;
      padding: 14px 16px 18px;
      border-radius: 12px;
      background: linear-gradient(180deg, color-mix(in srgb, var(--muted) 8%, var(--panel)) 0%, color-mix(in srgb, var(--line) 30%, var(--panel)) 100%);
      border: 1px solid var(--line);
      box-shadow: inset 0 2px 6px rgba(15, 23, 42, 0.06);
    }
    body[data-theme="dark"] .tutorial-f11-key-row {
      background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
      border-color: rgba(148, 163, 184, 0.25);
      box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
    }
    .tutorial-f11-key-fake,
    .tutorial-f11-key-cap {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 48px;
      height: 44px;
      padding: 0 10px;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 700;
      font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
      color: #334155;
      background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 42%, #cbd5e1 100%);
      border: 1px solid #64748b;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75) inset,
        0 4px 0 #475569,
        0 6px 14px rgba(15, 23, 42, 0.2);
      user-select: none;
    }
    .tutorial-f11-key-fake {
      opacity: 0.55;
      transform: translateY(1px) scale(0.96);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 3px 0 #64748b,
        0 4px 8px rgba(15, 23, 42, 0.12);
    }
    .tutorial-f11-key-cap--primary {
      min-width: 64px;
      height: 52px;
      font-size: 17px;
      font-weight: 900;
      color: #0f172a;
      border-color: var(--primary);
      background: linear-gradient(180deg, #eff6ff 0%, #bfdbfe 45%, #93c5fd 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent),
        0 5px 0 var(--primary-dark, #1d4ed8),
        0 10px 22px color-mix(in srgb, var(--primary) 35%, transparent);
      transform: translateY(-2px);
      animation: tutorial-f11-key-pulse 2.2s ease-in-out infinite;
    }
    @keyframes tutorial-f11-key-pulse {
      0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent), 0 5px 0 var(--primary-dark, #1d4ed8), 0 10px 22px color-mix(in srgb, var(--primary) 35%, transparent); }
      50% { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), 0 5px 0 var(--primary-dark, #1d4ed8), 0 14px 28px color-mix(in srgb, var(--primary) 45%, transparent); }
    }
    @media (prefers-reduced-motion: reduce) {
      .tutorial-f11-key-cap--primary { animation: none; }
      .tutorial-overlay.is-active .tutorial-card { animation: none !important; }
      .tutorial-overlay.is-active .tutorial-card.tutorial-card--step-swap { animation: none !important; }
      .tutorial-card-matter.tutorial-card-matter--step-swap { animation: none !important; }
      .tutorial-card-deco__glow,
      .tutorial-card-deco__shine,
      .tutorial-deco-emoji,
      .tutorial-ig-bubble,
      .tutorial-ig-track__fill,
      .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn,
      .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn::after,
      .tutorial-overlay.is-active .tutorial-card-actions #tutorialNextBtn.tutorial-next-arrow-cue::before {
        animation: none !important;
      }
    }
    body[data-theme="dark"] .tutorial-f11-key-fake,
    body[data-theme="dark"] .tutorial-f11-key-cap:not(.tutorial-f11-key-cap--primary) {
      color: #cbd5e1;
      background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
      border-color: #64748b;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 4px 0 #0f172a,
        0 6px 12px rgba(0, 0, 0, 0.45);
    }
    body[data-theme="dark"] .tutorial-f11-key-cap--primary {
      color: #f8fafc;
      border-color: #60a5fa;
      background: linear-gradient(180deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.2) inset,
        0 0 0 2px rgba(96, 165, 250, 0.45),
        0 5px 0 #1e3a8a,
        0 12px 28px rgba(37, 99, 235, 0.45);
    }
    .tutorial-f11-key-hint {
      margin: 0;
      font-size: 14px;
      line-height: 1.65;
      color: var(--muted-2, var(--muted));
      text-align: center;
      max-width: 42em;
    }
    .tutorial-f11-key-em {
      font-weight: 800;
      color: var(--primary);
    }
    body[data-theme="dark"] .tutorial-f11-key-em {
      color: #93c5fd;
    }
    .tutorial-card-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 4px; }
    .tutorial-card-actions .btn {
      font-size: 15px !important;
      font-weight: 700;
      padding: 10px 18px !important;
      min-height: 44px;
    }
    .tutorial-skip-btn { font-size: 14px !important; color: var(--muted-2, var(--muted)); }
    .tutorial-highlight {
      position: relative;
      z-index: 100004 !important;
      outline: 5px solid #dc2626;
      outline-offset: 2px;
      box-shadow: 0 0 0 9px rgba(220, 38, 38, 0.34);
      border-radius: 8px;
      animation: tutorial-pulse 1.8s ease-in-out infinite;
    }
    /* 통신그룹 등: 메인 전체 변화를 보이게 행만 약하게 표시 */
    .tutorial-highlight--subtle {
      position: relative;
      z-index: 100004 !important;
      outline: 4px solid #ef4444;
      outline-offset: 1px;
      box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.2);
      background: color-mix(in srgb, #ef4444 12%, transparent);
      border-radius: 8px;
      animation: none;
    }
    body[data-theme="dark"] .tutorial-highlight--subtle {
      outline-color: #f87171;
      box-shadow: 0 0 0 6px rgba(248, 113, 113, 0.28);
      background: color-mix(in srgb, #ef4444 18%, rgba(15, 23, 42, 0.35));
    }
    @keyframes tutorial-pulse {
      0%, 100% { box-shadow: 0 0 0 9px rgba(220, 38, 38, 0.34); }
      50% { box-shadow: 0 0 0 16px rgba(220, 38, 38, 0.2); }
    }
    [data-focus-filter] {
      cursor: pointer;
      transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
    }
    [data-focus-filter]:hover {
      transform: translateY(-1px);
    }
    .legend-item.is-focus-active,
    .clickable-row.is-focus-active,
    .interactive-card.is-focus-active,
    .receipt-item.is-focus-active,
    .summary-overview-card.is-focus-active {
      outline: 2px solid var(--primary);
      outline-offset: -2px;
      background: var(--primary-3) !important;
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
    }
    .active-filter-chip.is-visual-focus {
      background: var(--primary-3);
      border-color: var(--primary);
    }
    @media (max-width: 1280px) {
      body:not(.cover-mode) .filter-groups {
        flex-direction: column;
        align-items: stretch;
      }
    }
    @media (max-width: 760px) {
      body:not(.cover-mode) .page-header {
        top: 0 !important;
        width: 100% !important;
        padding: 0 !important;
        border-radius: 0 !important;
        height: var(--app-header-bar-height) !important;
        min-height: var(--app-header-bar-height) !important;
      }
      body:not(.cover-mode) .page-header-inner {
        height: var(--app-header-bar-height) !important;
        min-height: var(--app-header-bar-height) !important;
        padding: 0 8px !important;
      }
      body:not(.cover-mode) .page-header-logo {
        height: var(--app-header-logo-height) !important;
        max-height: var(--app-header-logo-height) !important;
      }
      body:not(.cover-mode) .page-header-copy h1 {
        font-size: clamp(18px, 4.8vw, 24px) !important;
      }
      body:not(.cover-mode) .toolbar,
      body:not(.cover-mode) .tabbar,
      body:not(.cover-mode) .filter-strip {
        border-radius: 0 !important;
      }
      body:not(.cover-mode) main {
        padding: 16px 12px 28px !important;
      }
      body:not(.cover-mode) .inline-filter-box {
        grid-template-columns: 1fr !important;
      }
      body:not(.cover-mode) .filter-utility-box {
        flex-wrap: wrap !important;
      }
      .builder-modal {
        padding: 12px;
      }
      .builder-modal-dialog {
        max-height: 90vh;
      }
      .builder-catalog-wrap {
        padding: 14px 16px 20px;
      }
      .builder-catalog-grid {
        grid-template-columns: 1fr;
      }
    }

    /* ─── 대기화면 · 이미지 슬라이드 (1분 무입력 시 / Ctrl+Q, 5초마다 전환) ─── */
    #idleMediaArtOverlay {
      position: fixed;
      inset: 0;
      z-index: 20000;
      display: none;
      overflow: hidden;
      cursor: default;
      font-family: "Noto Sans KR", system-ui, sans-serif;
      background: #000;
      --idle-widget-shift-x: 0px;
      --idle-widget-shift-y: 0px;
    }
    #idleMediaArtOverlay.idle-open { display: block; }
    #idleMediaArtOverlay.loading-open { display: block; }
    #idleMediaArtOverlay.loading-open {
      z-index: 2550;
      pointer-events: none;
      cursor: default;
    }
    /* 초기 로딩 배경은 화면보호기처럼 이미지가 잘 보이도록 어두운 마스크를 약화 */
    body.app-loading-idle #idleMediaArtOverlay .idle-overlay-gradient {
      background: linear-gradient(
        135deg,
        rgba(2, 6, 23, 0.28) 0%,
        rgba(2, 6, 23, 0.08) 52%,
        rgba(2, 6, 23, 0.34) 100%
      ) !important;
    }
    body.app-loading-idle #idleMediaArtOverlay .idle-overlay-noise {
      opacity: 0.015 !important;
    }
    /* 초기 로딩: 화면보호기/digital2.png (스테이징 미리보기 실험은 preview-staging + 주입 CSS) */
    body.app-loading-idle #idleMediaArtOverlay.loading-open:not(.idle-open) .idle-media-container {
      background-image: linear-gradient(rgba(2, 6, 23, 0.45), rgba(2, 6, 23, 0.45)),
        url("../../assets/화면보호기/digital2.png") !important;
      background-size: cover, cover !important;
      background-position: center center, center center !important;
      background-repeat: no-repeat, no-repeat !important;
    }
    body.app-loading-idle #idleMediaArtOverlay.loading-open:not(.idle-open) .idle-overlay-gradient {
      opacity: 0 !important;
      background: transparent !important;
    }
    body.app-loading-idle #idleMediaArtOverlay.loading-open:not(.idle-open) .idle-overlay-noise {
      opacity: 0 !important;
    }
    body.app-loading-idle #idleMediaArtOverlay.loading-open:not(.idle-open) .idle-bg-layer {
      opacity: 0 !important;
      visibility: hidden !important;
      animation: none !important;
    }
    body.app-loading-idle #idleMediaArtOverlay.loading-open:not(.idle-open) .idle-bg-layer.active {
      opacity: 0 !important;
      visibility: hidden !important;
    }
    body.app-loading-idle #idleMediaArtOverlay .idle-ma-ui {
      display: none !important;
    }
    .idle-media-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      filter: none;
      transform: scale(1);
      transform-origin: center center;
    }
    .idle-bg-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0;
      transition: opacity 1.2s ease-in-out;
      animation: none;
      z-index: 0;
    }
    .idle-bg-layer.active {
      opacity: 1;
      z-index: 1;
    }
    @keyframes idle-kenBurns {
      0% { transform: scale(1); }
      100% { transform: scale(1.15); }
    }
    .idle-overlay-gradient {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(135deg, rgba(2, 6, 23, 0.85) 0%, rgba(2, 6, 23, 0.3) 50%, rgba(2, 6, 23, 0.9) 100%);
      z-index: 1;
    }
    .idle-overlay-noise {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)"/%3E%3C/svg%3E');
      opacity: 0.07;
      z-index: 2;
      pointer-events: none;
    }
    .idle-ma-ui {
      position: absolute;
      z-index: 6;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: grid;
      place-items: center;
      align-items: center;
      padding: clamp(28px, 4vw, 54px);
      pointer-events: none;
    }
    .idle-clock-widget {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0;
    }
    .idle-clock-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0;
      background: none;
      border: none;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      text-align: center;
    }
    .idle-clock-time {
      font-size: clamp(5rem, 15vw, 11rem);
      font-weight: 100;
      letter-spacing: -0.04em;
      line-height: 0.9;
      margin: 0;
      color: rgba(255,255,255,0.92);
      font-variant-numeric: tabular-nums;
      text-shadow: 0 0 80px rgba(59,130,246,0.35), 0 2px 32px rgba(0,0,0,0.6);
    }
    .idle-clock-date {
      font-size: clamp(1.05rem, 2.4vw, 1.45rem);
      font-weight: 600;
      letter-spacing: 0.18em;
      color: #ffffff;
      margin-top: 16px;
      text-transform: uppercase;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 0, 0, 0.45);
    }
    .idle-ma-bottom {
      margin-top: 28px;
      text-align: center;
      padding: 0;
      background: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .idle-ma-title {
      margin: 0 0 10px;
      font-size: clamp(13px, 1.5vw, 17px);
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #ffffff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 20px rgba(0, 0, 0, 0.4);
    }
    .idle-hint {
      margin: 0;
      font-size: clamp(15px, 1.75vw, 19px);
      font-weight: 500;
      color: rgba(255, 255, 255, 0.95);
      line-height: 1.55;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75), 0 0 18px rgba(0, 0, 0, 0.35);
    }
    .idle-hint kbd {
      display: inline-block; padding: 3px 9px; margin: 0 3px;
      border-radius: 5px; background: rgba(15, 23, 42, 0.85);
      border: 1px solid rgba(255, 255, 255, 0.25);
      font-size: clamp(12px, 1.2vw, 14px); font-family: inherit; color: #ffffff;
    }
    @media (prefers-reduced-motion: reduce) {
      .idle-bg-layer { animation: none !important; }
      .idle-clock-widget { transition: none !important; transform: translate(0,0) !important; }
    }
  
    body.main-summary-mode {
      overflow: hidden;
      background: #06131f !important;
    }
    body.main-summary-mode .top-chrome,
    body.main-summary-mode .page-header,
    body.main-summary-mode .chrome-toolbar,
    body.main-summary-mode .toolbar,
    body.main-summary-mode .filter-strip,
    body.main-summary-mode .unified-toolbar,
    body.main-summary-mode #filterStrip,
    body.main-summary-mode .tabbar,
    body.main-summary-mode .view:not(#view-main-summary),
    body.main-summary-mode #view-cover,
    body.main-summary-mode #view-summary,
    body.main-summary-mode #view-customer,
    body.main-summary-mode #view-organization,
    body.main-summary-mode #view-product,
    body.main-summary-mode #view-qa,
    body.main-summary-mode #view-report,
    body.main-summary-mode #view-org-chart {
      display: none !important;
    }
    body.main-summary-mode .views,
    body.main-summary-mode main,
    body.main-summary-mode .dashboard-shell,
    body.main-summary-mode .dashboard-content {
      margin: 0 !important;
      padding: 0 !important;
      max-width: none !important;
      width: 100% !important;
    }
    body.main-summary-mode #view-main-summary.active {
      display: block !important;
      position: fixed !important;
      inset: 0 !important;
      width: 100vw !important;
      height: var(--erp-visible-vh, 100vh) !important;
      min-height: var(--erp-visible-vh, 100vh) !important;
      margin: 0 !important;
      border-radius: 0 !important;
      z-index: 50;
      overflow: hidden;
    }
    body.main-summary-mode #view-main-summary,
    body.main-summary-mode #view-main-summary .main-summary-shell {
      height: var(--erp-visible-vh, 100vh) !important;
      min-height: var(--erp-visible-vh, 100vh) !important;
    }

  
    body.main-summary-mode::before,
    body.main-summary-mode::after {
      display: none !important;
      content: none !important;
    }
    body.main-summary-mode #view-main-summary .glass-panel,
    body.main-summary-mode #view-main-summary .hero-metric,
    body.main-summary-mode #view-main-summary .main-summary-mini-card,
    body.main-summary-mode #view-main-summary .main-summary-issue-item,
    body.main-summary-mode #view-main-summary .main-summary-dist-item,
    body.main-summary-mode #view-main-summary .main-summary-org-track,
    body.main-summary-mode #view-main-summary .main-summary-link,
    body.main-summary-mode #view-main-summary .main-summary-status-pill {
      background-image: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      filter: none !important;
      box-shadow: none !important;
    }
    body.main-summary-mode #view-main-summary .glass-panel {
      background: var(--ms-panel-bg) !important;
      border-color: var(--ms-line) !important;
    }
    body.main-summary-mode #view-main-summary .hero-metric,
    body.main-summary-mode #view-main-summary .main-summary-mini-card,
    body.main-summary-mode #view-main-summary .main-summary-issue-item,
    body.main-summary-mode #view-main-summary .main-summary-dist-item,
    body.main-summary-mode #view-main-summary .main-summary-org-track,
    body.main-summary-mode #view-main-summary .main-summary-link {
      background: var(--ms-surface) !important;
      border-color: var(--ms-line) !important;
    }
    body.main-summary-mode #view-main-summary .main-summary-status-pill {
      background: color-mix(in srgb, var(--ok) 18%, var(--ms-surface)) !important;
      border-color: color-mix(in srgb, var(--ok) 45%, var(--ms-line)) !important;
    }
    body.main-summary-mode #view-main-summary .main-summary-hero-core {
      background: var(--ms-surface-strong) !important;
    }
    body.main-summary-mode #view-main-summary .main-summary-hero-ring {
      box-shadow: none !important;
    }

    /* ═══════════════════════════════════════════════════════
       THEME: DARK (어둡고 세련된 네이비 + 인디고)
       ═══════════════════════════════════════════════════════ */
    body[data-theme="dark"] {
      --bg: #0b1120;
      --bg-2: #111827;
      --bg-gradient-start: #0f172a;
      --bg-gradient-end: #0b1120;
      --bg-glow-accent: rgba(99, 102, 241, 0.15);
      --bg-glow-warm: rgba(56, 189, 248, 0.10);
      --grid-line: rgba(148, 163, 184, 0.06);
      --panel: rgba(22, 33, 55, 0.92);
      --panel-strong: #1e293b;
      --panel-shell: rgba(15, 23, 42, 0.72);
      --panel-shell-border: rgba(99, 102, 241, 0.18);
      --panel-border: rgba(148, 163, 184, 0.14);
      --panel-surface: rgba(30, 41, 59, 0.94);
      --line: rgba(148, 163, 184, 0.16);
      --line-2: rgba(148, 163, 184, 0.10);
      --line-soft: rgba(148, 163, 184, 0.07);
      --text: #e2e8f0;
      --title: #f1f5f9;
      --muted: #94a3b8;
      --muted-2: #cbd5e1;
      --primary: #818cf8;
      --primary-2: #a5b4fc;
      --primary-3: rgba(99, 102, 241, 0.18);
      --primary-dark: #6366f1;
      --accent: #818cf8;
      --accent-strong: #6366f1;
      --accent-2: #38bdf8;
      --accent-soft: rgba(99, 102, 241, 0.18);
      --accent-soft-2: rgba(165, 180, 252, 0.20);
      --accent-warm: #38bdf8;
      --accent-warm-soft: rgba(56, 189, 248, 0.14);
      --accent-alert: #fca5a5;
      --accent-alert-soft: rgba(252, 165, 165, 0.14);
      --ok: #34d399;
      --warn: #fbbf24;
      --bad: #f87171;
      --on-primary: #ffffff;
      --shadow: 0 24px 56px rgba(0, 0, 0, 0.50);
      --shadow-soft: 0 16px 36px rgba(0, 0, 0, 0.30);
      --shadow-card: 0 20px 48px rgba(0, 0, 0, 0.40);
      --accent-shadow: 0 14px 32px rgba(99, 102, 241, 0.22);
      --gold-line: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
      --hero-line: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.22), transparent);
      --hero-header-surface: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
      --strip-accent: linear-gradient(90deg, #4f46e5 0%, #818cf8 100%);
      --utility-surface: rgba(15, 23, 42, 0.80);
      --utility-border: rgba(99, 102, 241, 0.15);
      --toolbar-surface: rgba(11, 17, 32, 0.72);
      --table-head-bg: rgba(30, 41, 59, 0.70);
      --table-head-text: #cbd5e1;
      --chart-datalabel-bg: rgba(11, 17, 32, 0.95);
      --chart-datalabel-text: rgba(241, 245, 249, 0.98);
      --chart-goal-previous: #64748b;
      --chart-goal-plan: #f87171;
      --chart-goal-actual: #a78bfa;
      --chart-goal-actual-over: #f87171;
      --chart-goal-gap-neg: #2dd4bf;
      --teal: #34d399;
      --navy: #e2e8f0;
      --berry: #a78bfa;
      --base-font-size: 17px;
      --grid-gap: 10px;
      --panel-padding-x: 18px;
      --panel-padding-y: 16px;
      background: #0b1120;
    }

    /* ═══════════════════════════════════════════════════════
       THEME: 화이트 (= data-theme warm — UI 라벨「화이트」, 이전 슬레이트·중립 화이트)
       ═══════════════════════════════════════════════════════ */
    body[data-theme="warm"] {
      --bg: #f0f4f8;
      --bg-2: #e1e8ef;
      --bg-gradient-start: #f4f7fb;
      --bg-gradient-end: #e3eaf2;
      --bg-glow-accent: rgba(59, 130, 246, 0.12);
      --bg-glow-warm: rgba(139, 92, 246, 0.08);
      --grid-line: rgba(148, 163, 184, 0.12);
      --panel: rgba(255, 255, 255, 0.92);
      --panel-strong: #ffffff;
      --panel-shell: rgba(255, 255, 255, 0.55);
      --panel-shell-border: rgba(255, 255, 255, 0.6);
      --panel-border: rgba(148, 163, 184, 0.28);
      --panel-surface: rgba(255, 255, 255, 0.96);
      --line: rgba(15, 23, 42, 0.12);
      --line-2: rgba(15, 23, 42, 0.07);
      --line-soft: rgba(15, 23, 42, 0.05);
      --text: #0f172a;
      --title: #0f172a;
      --muted: #64748b;
      --muted-2: #475569;
      --primary: #2563eb;
      --primary-2: #3b82f6;
      --primary-3: #dbeafe;
      --primary-dark: #1d4ed8;
      --accent: #2563eb;
      --accent-strong: #1d4ed8;
      --accent-2: #6366f1;
      --accent-soft: #dbeafe;
      --accent-soft-2: #bfdbfe;
      --accent-warm: #7c3aed;
      --accent-warm-soft: #ede9fe;
      --accent-alert: #dc2626;
      --accent-alert-soft: #fee2e2;
      --ok: #059669;
      --warn: #d97706;
      --bad: #dc2626;
      --on-primary: #ffffff;
      --shadow: 0 18px 44px rgba(15, 23, 42, 0.075);
      --shadow-soft: 0 8px 24px rgba(15, 23, 42, 0.055);
      --shadow-card: 0 14px 36px rgba(15, 23, 42, 0.065);
      --accent-shadow: 0 12px 28px rgba(37, 99, 235, 0.18);
      --gold-line: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 100%);
      --hero-line: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.2), transparent);
      --hero-header-surface: linear-gradient(135deg, #1e293b 0%, #334155 100%);
      --strip-accent: linear-gradient(90deg, #1d4ed8 0%, #60a5fa 100%);
      --utility-surface: rgba(255, 255, 255, 0.6);
      --utility-border: rgba(148, 163, 184, 0.25);
      --toolbar-surface: rgba(255, 255, 255, 0.5);
      --table-head-bg: #f1f5f9;
      --table-head-text: #334155;
      --chart-datalabel-bg: rgba(15, 23, 42, 0.90);
      --chart-datalabel-text: rgba(255, 255, 255, 0.98);
      --chart-goal-previous: #94a3b8;
      /* 계획=빨강(목표선), 실적=남보라(성과), 갭(−)=청록(미달)·갭(+)=적색 — 보고서 트렌드 범례에서 실적과 구분 */
      --chart-goal-plan: #dc2626;
      --chart-goal-actual: #4f46e5;
      --chart-goal-actual-over: #ef4444;
      --chart-goal-gap-neg: #0d9488;
      --teal: #0d9488;
      --navy: #0f172a;
      --berry: #64748b;
      --base-font-size: 17px;
      --grid-gap: 10px;
      --panel-padding-x: 18px;
      --panel-padding-y: 16px;
    }


    body {
      background:
        radial-gradient(circle at top left, var(--bg-glow-accent), transparent 28%),
        radial-gradient(circle at top right, var(--bg-glow-warm), transparent 22%),
        linear-gradient(145deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
      color: var(--text);
      transition: background 0.35s ease, color 0.35s ease;
    }

    body::before {
      background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
      background-size: 36px 36px;
      opacity: 1;
      mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), transparent 82%);
    }

    /* Full-width(1920) 레이아웃: 후반부 오버라이드로 생기는 좌우 여백 제거 */
    body:not(.cover-mode) .shell { width: 100vw; max-width: none; margin: 0; padding-top: var(--top-chrome-offset); padding-left: 0; padding-right: 0; }
    body:not(.cover-mode) .top-chrome { inset: 0 0 auto 0; gap: 0px; }
    /* 타이틀(.page-header-copy) absolute 기준을 잡기 위해 헤더만 relative — 툴바는 기존처럼 static */
    body:not(.cover-mode) .page-header {
      position: relative;
      width: 100%;
      max-width: none;
      margin: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
      border-top: none;
      border-bottom: 1px solid var(--panel-shell-border);
      background: var(--panel-shell);
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    body:not(.cover-mode) .chrome-toolbar {
      position: static;
      width: 100%;
      max-width: none;
      margin: 0;
      border-radius: 0;
      border-left: none;
      border-right: none;
      border-top: none;
      border-bottom: 1px solid var(--panel-shell-border);
      background: var(--panel-shell);
      backdrop-filter: blur(22px);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .page-header { min-height: var(--app-header-bar-height); height: var(--app-header-bar-height); padding: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--hero-header-surface) 92%, transparent), color-mix(in srgb, var(--accent) 22%, transparent)), var(--panel-shell); }
    .page-header-inner { min-height: var(--app-header-bar-height); height: var(--app-header-bar-height); padding: 0; gap: 0; }
    .page-header-logo { height: var(--app-header-logo-height); max-height: var(--app-header-logo-height); opacity: 0.98; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.16)); }
    .page-header-copy h1 { color: #ffffff; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.03em; font-weight: 800; }
    .page-header-copy .page-header-eyebrow,
    .page-header-copy span.page-header-eyebrow { color: rgba(255, 255, 255, 0.68); font-size: 10px; letter-spacing: 0.14em; font-weight: 700; text-transform: uppercase; margin-top: 4px; }
    .header-utility-box, .mode-cluster { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .chrome-toolbar { padding: 0 12px 12px; background: color-mix(in srgb, var(--panel-shell) 88%, transparent); }
    .toolbar, .toolbar.nav-combined, .filter-strip, .tabbar { background: transparent; border: none; box-shadow: none; backdrop-filter: none; }
    .toolbar.nav-combined { padding: 0; gap: 12px; align-items: flex-start; flex-direction: column; }
    .nav-left, .nav-right { width: 100%; justify-content: space-between; gap: 12px; }
    .tabbar { display: flex; gap: 8px; flex-wrap: wrap; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--panel-strong) 68%, transparent); border: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); }
    .tab { min-height: 42px; padding: 10px 16px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font-weight: 700; transition: all 0.2s ease; }
    .tab:hover, .mode-btn:hover, .btn:hover, .btn-mini:hover { transform: translateY(-1px); }
    .tab.active, .mode-btn.active, .btn.primary, .btn-mini.is-active { color: #ffffff !important; background: linear-gradient(135deg, var(--accent-strong), var(--accent)) !important; border-color: transparent !important; box-shadow: var(--accent-shadow) !important; }
    .mini-note, .content-zoom-label, .content-zoom-value, .filter-group label, .filter-group-label, .meta, .theme-picker { color: var(--muted) !important; }
    .filter-strip {
      width: 100%;
      margin-top: 0;
      padding: 8px 14px 10px;
      border-radius: 22px;
      background: color-mix(in srgb, var(--panel-strong) 66%, transparent);
      border: 1px solid var(--line-soft);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.06);
    }
    .filter-strip::after {
      left: 16px;
      right: 16px;
      height: 2px;
      border-radius: 999px;
      opacity: 0.72;
    }
    #filterStripBody {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas:
        "toggle toggle"
        "filters actions";
      align-items: start;
      column-gap: 18px;
      row-gap: 12px;
    }
    .filter-strip-row,
    .filter-strip-body {
      gap: 12px;
      align-items: center;
      flex-wrap: wrap;
    }
    #filterBox,
    .filter-groups-inline {
      display: flex;
      flex-wrap: wrap;
      gap: 12px 14px;
      align-items: center;
      min-width: 0;
      width: 100%;
      justify-content: flex-start;
    }
    #filterBox {
      grid-area: filters;
      align-self: start;
    }
    .filter-group,
    .inline-filter-box {
      gap: 10px 12px;
    }
    .filter-groups-inline .filter-group {
      display: inline-flex;
      align-items: center;
      flex-wrap: nowrap;
      gap: 8px;
      min-width: fit-content;
    }
    #filterBox .filter-group {
      display: inline-flex;
      flex-wrap: nowrap;
      align-items: center;
      gap: 10px;
      width: auto;
    }
    #filterBox .filter-group + .filter-group {
      margin-top: 0;
    }
    #filterBox .filter-group label {
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 10px !important;
      min-width: 0 !important;
      margin: 0 !important;
      white-space: nowrap !important;
      flex: 0 0 auto;
    }
    /* 필터 라벨 최소너비: 고정 ch 폭 규칙과 충돌하지 않도록 제한 없음 */
    #filterBox .filter-group:first-child label,
    #filterBox .filter-group:nth-child(2) label {
      min-width: 0 !important;
    }
    .filter-groups-inline .filter-group-label {
      width: auto !important;
      display: inline-flex !important;
      align-items: center !important;
      margin: 0 2px 0 0 !important;
      line-height: 1 !important;
      flex: 0 0 auto !important;
      white-space: nowrap !important;
    }
    .filter-groups-inline .filter-group label {
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 8px !important;
      min-width: 0 !important;
      margin: 0 !important;
      white-space: nowrap !important;
    }
    .filter-group label,
    .inline-filter-box label,
    .theme-picker.compact {
      padding: 7px 10px;
      border-radius: 14px;
      border: 1px solid var(--line-soft);
      background: color-mix(in srgb, var(--panel) 80%, transparent);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    }
    .filter-groups-inline .filter-group-label {
      font-size: 0.92rem;
      font-weight: 800;
      white-space: nowrap;
      color: var(--muted-2) !important;
      margin-right: 2px;
    }
    .filter-group select,
    .filter-groups-inline .filter-group select,
    .inline-filter-box select {
      min-width: 92px;
      max-width: 140px;
      height: 38px;
      padding: 0 12px;
    }
    .filter-groups-inline .filter-group select {
      min-width: 96px;
      max-width: 132px;
      height: 36px;
      font-size: 0.95rem;
    }
    /* #filterBox 셀렉트 폭은 하단 툴바(v5) + ID별 고정폭 규칙에 일임 (여기서 px 고정 시 레이아웃 흔들림) */
    .filter-strip-toggle {
      grid-area: toggle;
      align-self: flex-start;
      min-height: 38px;
      padding-inline: 12px;
      border-color: var(--line-soft) !important;
      margin-bottom: 2px;
    }
    .filter-strip-actions {
      grid-area: actions;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
      margin-left: 0;
      flex-shrink: 0;
      white-space: nowrap;
    }
    #filterStrip .filter-strip-toggle-text {
      font-weight: 800;
    }
    .content-zoom-control {
      padding: 6px 8px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel) 74%, transparent);
      border: 1px solid var(--line-soft);
    }
    select, .filter-group select, .inline-filter-box select, #themeSelector, #dataSourceSelector, input[type="date"], input[type="number"], input[type="text"], textarea { border-radius: 12px !important; border: 1px solid var(--line) !important; background: color-mix(in srgb, var(--panel-strong) 88%, transparent) !important; color: var(--text) !important; box-shadow: none !important; }
    .badge, .chip, .main-summary-status-pill, .receipt-summary-inline { background: color-mix(in srgb, var(--panel-strong) 82%, transparent); color: var(--muted-2); border: 1px solid var(--line); box-shadow: none; }
    .btn, .btn.secondary, .btn-mini, .mode-btn, .filter-strip-toggle, .content-zoom-btn { border-radius: 999px !important; border: 1px solid var(--line) !important; background: color-mix(in srgb, var(--panel) 86%, transparent) !important; color: var(--muted-2) !important; box-shadow: none !important; }
    .panel-head .table-export-tools,
    .modal-head .table-export-tools {
      margin-left: auto;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .btn-mini.excel-export-btn {
      background: linear-gradient(135deg, #16a34a, #15803d) !important;
      border-color: #166534 !important;
      color: #ffffff !important;
      box-shadow: 0 8px 16px rgba(22, 163, 74, 0.22) !important;
    }
    .btn-mini.excel-export-btn:hover {
      background: linear-gradient(135deg, #22c55e, #16a34a) !important;
      border-color: #166534 !important;
      color: #ffffff !important;
    }
    .panel, .glass-panel, .chart-box, .summary-box, .kpi, .insight, .record-table, .modal-card, .modal-section, .modal-mini, .receipt-item, .summary-snapshot-panel, .summary-goal-panel, .manager-summary-flow, .manager-signals-actions, .briefing-metric, .issue-card, .qa-questions, .qa-options, .qa-summary-card, .qa-output-cause, .qa-cause-panel-head, .qa-cause-explanation, .qa-cause-chart-hint, .qa-cause-table-wrap, .report-builder-widget, .builder-catalog-card { background: var(--panel) !important; border: 1px solid var(--panel-border) !important; border-radius: 22px !important; box-shadow: var(--shadow-soft) !important; backdrop-filter: blur(18px); }
    .panel-head h3, .section-title h2, .main-summary-panel-head h3, .qa-questions-head strong, .qa-options strong { color: var(--title) !important; letter-spacing: -0.02em; }
    .panel-eyebrow, .section-kicker { color: var(--muted) !important; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; font-size: 0.74rem; }
    /* 1960×1080: 위젯 간격 과대(18px) → 12px로 타이트닝 */
    .grid, .main-summary-grid, .summary-overview-grid, .metric-strip, .issue-center-layout, .builder-catalog-grid { gap: 12px !important; }
    #view-cover .cover-stage { position: relative; overflow: hidden; min-height: 100vh !important; min-height: 100dvh !important; width: 100% !important; max-width: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; border: none !important; border-radius: 0 !important; background:
      radial-gradient(110% 68% at 50% 100%, rgba(118, 214, 255, 0.42) 0%, rgba(95, 180, 243, 0.2) 28%, rgba(22, 60, 116, 0.08) 50%, transparent 72%),
      radial-gradient(56% 36% at 79% 70%, rgba(153, 236, 255, 0.2) 0%, transparent 72%),
      linear-gradient(180deg, #081226 0%, #0d2245 45%, #122f59 72%, #1a3f68 100%);
      box-shadow: none !important; margin: 0 !important; padding: 0 !important; }
    #view-cover .cover-stage::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.015) 20%, transparent 32%),
        radial-gradient(66% 58% at 50% 48%, rgba(255, 255, 255, 0.06) 0%, transparent 66%);
      opacity: 0.75;
    }
    #view-cover .cover-media-art {
      background:
        radial-gradient(52% 14% at 50% 63%, rgba(183, 236, 255, 0.28) 0%, transparent 100%),
        radial-gradient(38% 26% at 50% 66%, rgba(94, 173, 255, 0.2) 0%, transparent 74%);
    }
    #view-cover .cover-media-art::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 50% 74%, rgba(180, 233, 255, 0.45) 0 1.2px, transparent 1.7px),
        radial-gradient(circle at 43% 76%, rgba(165, 222, 255, 0.42) 0 1px, transparent 1.5px),
        radial-gradient(circle at 57% 77%, rgba(165, 222, 255, 0.36) 0 0.9px, transparent 1.4px);
      background-size: 28px 16px, 34px 18px, 22px 14px;
      background-position: 0 0, 7px 10px, 14px 4px;
      mask-image: radial-gradient(120% 66% at 50% 76%, black 18%, transparent 86%);
      -webkit-mask-image: radial-gradient(120% 66% at 50% 76%, black 18%, transparent 86%);
      opacity: 0.72;
      z-index: 0;
    }
    #view-cover .cover-media-art::after {
      content: "";
      position: absolute;
      inset: 16% 8% 14%;
      pointer-events: none;
      background:
        repeating-linear-gradient(90deg, rgba(176, 213, 255, 0.1) 0 1px, transparent 1px 130px),
        repeating-linear-gradient(0deg, rgba(176, 213, 255, 0.08) 0 1px, transparent 1px 118px);
      mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.9) 72%, transparent 100%);
      -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.9) 72%, transparent 100%);
      opacity: 0.3;
      z-index: 0;
    }
    #view-cover .cover-ma-gradient-1 {
      width: min(92vw, 760px);
      height: min(92vw, 760px);
      background: radial-gradient(circle, rgba(45, 112, 255, 0.34) 0%, transparent 72%);
      top: -22%;
      left: -12%;
    }
    #view-cover .cover-ma-gradient-2 {
      width: min(72vw, 560px);
      height: min(72vw, 560px);
      background: radial-gradient(circle, rgba(102, 220, 255, 0.22) 0%, transparent 68%);
      bottom: -15%;
      right: -7%;
    }
    #view-cover .cover-ma-gradient-3 {
      width: min(56vw, 430px);
      height: min(56vw, 430px);
      background: radial-gradient(circle, rgba(125, 171, 255, 0.2) 0%, transparent 64%);
      top: 52%;
      left: 50%;
    }
    #view-cover .cover-ma-grid {
      background-image:
        linear-gradient(rgba(211, 238, 255, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(211, 238, 255, 0.055) 1px, transparent 1px);
      background-size: 56px 56px;
      mask-image: radial-gradient(ellipse 98% 66% at 50% 68%, black 18%, transparent 82%);
      -webkit-mask-image: radial-gradient(ellipse 98% 66% at 50% 68%, black 18%, transparent 82%);
      opacity: 0.58;
    }
    #view-cover .cover-ma-vignette {
      background:
        radial-gradient(ellipse 126% 108% at 50% 56%, rgba(8, 20, 42, 0) 38%, rgba(8, 20, 42, 0.44) 78%, rgba(4, 10, 23, 0.75) 100%);
      opacity: 0.88;
    }
    body[data-theme="dark"] #view-cover .cover-stage {
      background:
        radial-gradient(116% 70% at 50% 100%, rgba(102, 182, 255, 0.3) 0%, rgba(76, 145, 230, 0.17) 30%, rgba(30, 62, 112, 0.08) 52%, transparent 74%),
        radial-gradient(52% 34% at 79% 70%, rgba(128, 191, 255, 0.14) 0%, transparent 74%),
        linear-gradient(180deg, #050b19 0%, #09162d 45%, #102344 72%, #163055 100%);
    }
    body[data-theme="dark"] #view-cover .cover-media-art::before { opacity: 0.52; }
    body[data-theme="dark"] #view-cover .cover-ma-grid { opacity: 0.42; }
    body[data-theme="dark"] #view-cover .cover-ma-vignette {
      background:
        radial-gradient(ellipse 126% 108% at 50% 56%, rgba(2, 8, 18, 0) 34%, rgba(2, 8, 18, 0.52) 76%, rgba(2, 8, 18, 0.82) 100%);
    }
    body[data-theme="white"] #view-cover .cover-stage {
      background:
        radial-gradient(108% 66% at 50% 100%, rgba(188, 239, 255, 0.56) 0%, rgba(126, 208, 255, 0.26) 30%, rgba(38, 89, 152, 0.1) 53%, transparent 75%),
        radial-gradient(56% 34% at 79% 69%, rgba(176, 239, 255, 0.26) 0%, transparent 74%),
        linear-gradient(180deg, #0b1630 0%, #12305e 44%, #1a4f7f 74%, #2c618d 100%);
    }
    body[data-theme="white"] #view-cover .cover-media-art::before { opacity: 0.8; }
    #view-cover .cover-grid { display: grid; gap: 26px; align-items: end; padding: max(28px, env(safe-area-inset-top, 0px)) max(40px, env(safe-area-inset-right, 0px)) max(108px, calc(40px + env(safe-area-inset-bottom, 0px))) max(40px, env(safe-area-inset-left, 0px)); width: 100%; max-width: none; box-sizing: border-box; }
    .cover-main { max-width: 900px; }
    .cover-hero-headline { font-size: clamp(3.4rem, 7vw, 7.5rem); line-height: 1.02; letter-spacing: -0.04em; color: #ffffff; }
    .cover-hero-desc { color: rgba(255, 255, 255, 0.9); font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
    .cover-footer-bar { color: rgba(255, 255, 255, 0.86); font-size: 0.98rem; }
    .cover-enter-btn { min-height: 62px; padding: 18px 36px; border-radius: 999px; border: none; color: #ffffff; font-size: 1.2rem; font-weight: 800; background: linear-gradient(135deg, var(--accent-strong), var(--accent)); box-shadow: var(--accent-shadow); }
    .main-summary-shell { padding: 18px 0 0; }
    .main-summary-header { padding: 20px 22px; border-radius: 30px !important; background: linear-gradient(135deg, color-mix(in srgb, var(--hero-header-surface) 92%, transparent), color-mix(in srgb, var(--accent) 16%, transparent)), var(--panel) !important; color: #ffffff; }
    .main-summary-clock strong, .main-summary-status-pill { color: #ffffff !important; }
    .main-summary-panel, .main-summary-bottom { padding: 20px !important; }
    .main-summary-org-toggle, .summary-goal-viz-toggle { display: inline-flex; gap: 8px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--panel-strong) 68%, transparent); border: 1px solid var(--line); }
    .main-summary-customer-donut, .main-summary-hero-ring { box-shadow: inset 0 0 0 1px var(--line-soft), var(--shadow-soft); background: radial-gradient(circle at center, color-mix(in srgb, var(--panel-strong) 92%, transparent) 0 34%, transparent 34% 100%), conic-gradient(var(--accent) 0 62%, var(--accent-warm) 62% 84%, color-mix(in srgb, var(--line) 60%, transparent) 84% 100%); }
    .main-summary-card-stack, .main-summary-issue-list, .main-summary-distribution, .receipt-board, .signal-list, .action-list { display: grid; gap: 12px; }
    .summary-overview-card, .interactive-card, .receipt-item, .issue-card, .metric-pill { border-radius: 18px !important; background: var(--panel-surface) !important; border: 1px solid var(--line-soft) !important; box-shadow: none !important; }
    .summary-overview-card.is-primary, .metric-pill.is-primary { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 85%, white), color-mix(in srgb, var(--accent-soft) 56%, transparent)) !important; }
    .summary-overview-card.is-alert, .issue-card.high, .issue-card-severity.high { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-alert-soft) 88%, white), color-mix(in srgb, var(--accent-alert-soft) 66%, transparent)) !important; color: var(--bad) !important; }
    .summary-overview-card.is-opportunity, .issue-card-severity.low { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 76%, white), color-mix(in srgb, var(--accent-soft) 58%, transparent)) !important; color: var(--ok) !important; }
    .issue-card-severity.medium { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-warm-soft) 88%, white), color-mix(in srgb, var(--accent-warm-soft) 64%, transparent)) !important; color: var(--warn) !important; }
    .issue-card.selected { border-color: color-mix(in srgb, var(--accent) 65%, white) !important; box-shadow: var(--accent-shadow) !important; transform: translateY(-2px); }
    .record-table { padding: 8px; background: color-mix(in srgb, var(--panel) 90%, transparent) !important; }
    .record-table table, .ranking-table { width: 100%; border-collapse: collapse; }
    .record-table thead, .ranking-table thead { background: var(--table-head-bg) !important; }
    .record-table th, .record-table td, .ranking-table th, .ranking-table td { padding: 12px 10px !important; border-bottom: 1px solid var(--line-soft) !important; }
    .record-table th, .ranking-table th { color: var(--table-head-text) !important; font-weight: 700; }
    .record-table tbody tr:hover, .clickable-row:hover { background: color-mix(in srgb, var(--accent-soft) 18%, transparent) !important; }
    .modal-card, .dashboard-toast, .loading-card { border-radius: 24px !important; border: 1px solid var(--panel-shell-border) !important; background: var(--panel-shell) !important; box-shadow: var(--shadow) !important; backdrop-filter: blur(24px); }
    .ui-tooltip { backdrop-filter: blur(24px); }
    .loading-spinner-ring { filter: saturate(1.15) contrast(1.05) drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 25%, transparent)); }
    svg .axis text, svg .label, .legend-item, .label { fill: var(--muted) !important; color: var(--muted) !important; }
    .chart-datalabel-bg { fill: var(--chart-datalabel-bg); }
    .chart-datalabel, svg .chart-datalabel { fill: var(--chart-datalabel-text) !important; }
    @media (max-width: 1280px) {
      body:not(.cover-mode):not(.main-summary-mode) .shell { width: calc(100% - 10px); padding-top: 204px; }
      .page-header, .chrome-toolbar { width: calc(100% - 10px); }
      .page-header-copy { max-width: calc(100% - 220px); }
      #filterStripBody { grid-template-columns: 1fr; }
      #filterStripBody { grid-template-areas: "toggle" "filters" "actions"; }
      .filter-strip-actions { justify-content: flex-start; }
    }
    @media (max-width: 960px) {
      body:not(.cover-mode):not(.main-summary-mode) .shell { width: calc(100% - 10px); padding-top: 236px; }
      .top-chrome { inset: 5px 5px auto 5px; }
      .page-header, .chrome-toolbar { width: calc(100% - 10px); border-radius: 22px; }
      .page-header-inner, .nav-left, .nav-right { flex-wrap: wrap; }
      .page-header-copy { position: static; transform: none; order: 3; width: 100%; max-width: 100%; margin-top: 8px; }
      #view-cover .cover-grid, .main-summary-grid, .grid { grid-template-columns: 1fr !important; }
      .filter-groups-inline .filter-group { flex-wrap: wrap; }
    }
    @media (max-width: 720px) {
      body:not(.cover-mode):not(.main-summary-mode) .shell { padding-top: 262px; }
      .tabbar, .main-summary-org-toggle, .summary-goal-viz-toggle { overflow-x: auto; flex-wrap: nowrap; }
      #view-cover .cover-grid { padding: max(22px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) max(100px, calc(28px + env(safe-area-inset-bottom, 0px))) max(18px, env(safe-area-inset-left, 0px)); }
      .cover-hero-headline { font-size: clamp(2.6rem, 10vw, 4.25rem); }
      .filter-strip-actions { width: 100%; justify-content: space-between; flex-wrap: wrap; }
      .filter-group select,
      .filter-groups-inline .filter-group select,
      .inline-filter-box select { min-width: 84px; max-width: 120px; }
    }

    body:not(.cover-mode) .top-chrome {
      inset: 0 0 auto 0 !important;
      gap: 0 !important;
    }
    body:not(.cover-mode) .page-header,
    body:not(.cover-mode) .chrome-toolbar {
      width: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      border-radius: 0 !important;
    }
    /* 툴바 '죽소(컴팩트)' 버전:
       - 헤더(72px) 바로 아래에 붙도록 padding/gap/border 최소화
       - 필터 영역은 제거(#filterStrip 숨김)
       - 페이지 탭(tabbar)만 최소 높이로 표시
    */
    body:not(.cover-mode) .chrome-toolbar {
      height: auto !important;
      min-height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: hidden !important;
      border: 0 !important;
      box-shadow: none !important;
      background: transparent !important;
      display: block !important;
    }
    /* 필터는 보이되 '죽소(컴팩트)'로: 기본은 토글만 보이게(아래 JS가 data-collapsed=true 세팅) */
    body:not(.cover-mode) .chrome-toolbar #filterStrip {
      display: block !important;
      padding: 0 !important;
      margin: 0 !important;
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
    }

    /* collapsed 상태: actions 자체는 유지, export버튼만 숨김 */
    body:not(.cover-mode) .chrome-toolbar #filterStrip[data-collapsed="true"] .filter-strip-actions {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      margin-left: auto !important;
    }
    body:not(.cover-mode) .chrome-toolbar #filterStrip[data-collapsed="true"] .filter-strip-actions .content-zoom-control {
      display: inline-flex !important;
      margin-left: 0 !important;
      flex-shrink: 0 !important;
    }
    body:not(.cover-mode) .chrome-toolbar #filterStrip[data-collapsed="true"] .filter-strip-actions #exportSummaryBtn {
      display: none !important;
    }
    body:not(.cover-mode) .toolbar.nav-combined {
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 0 !important;
      padding: 0 !important;
      border-bottom: 0 !important;
      background: transparent !important;
    }
    body:not(.cover-mode) .toolbar.nav-combined .nav-right {
      display: none !important;
    }
    body:not(.cover-mode) .tabbar {
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: 4px !important;
      overflow-x: auto !important;
      padding: 0 8px !important;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
      align-items: center !important;
    }
    body:not(.cover-mode) .tabbar::-webkit-scrollbar {
      height: 6px;
    }
    body:not(.cover-mode) .tabbar::-webkit-scrollbar-thumb {
      border-radius: 999px;
      background: color-mix(in srgb, var(--muted) 28%, transparent);
    }
    body:not(.cover-mode) .tab {
      flex: 0 0 auto !important;
      min-height: 28px !important;
      padding: 0 10px !important;
      font-size: 0.86rem !important;
      line-height: 28px !important;
      cursor: pointer !important;
    }

    /* 필터 툴바(토글/셀렉트)도 탭과 동일한 높이/폰트/커서로 통일 */
    body:not(.cover-mode) #filterStrip .filter-strip-toggle {
      display: none !important;
    }
    body:not(.cover-mode) #filterStrip .filter-strip-toggle * { cursor: pointer !important; }
    body:not(.cover-mode) #filterStrip select,
    body:not(.cover-mode) #filterStrip .filter-group select,
    body:not(.cover-mode) #filterStrip .inline-filter-box select {
      height: 28px !important;
      min-height: 28px !important;
      font-size: 0.86rem !important;
      border-radius: 7px !important;
    }
    body:not(.cover-mode) #filterStrip .filter-group-label,
    body:not(.cover-mode) #filterStrip .filter-group label {
      font-size: var(--flt-fs) !important;
      line-height: 1.1 !important;
    }

    /* 가로 공간을 더 '골고루' 사용(큰 화면에서만 균등 분배) */
    @media (min-width: 1100px) {
      body:not(.cover-mode) .tabbar {
        justify-content: space-between !important;
        gap: 8px !important;
      }
      body:not(.cover-mode) .tab {
        flex: 1 1 0 !important;
        justify-content: center !important;
        padding: 0 12px !important;
      }
    }
    body:not(.cover-mode) .filter-strip {
      margin-top: 0 !important;
      padding: 2px 4px !important;
      border-radius: 0 !important;
      border: none !important;
      box-shadow: none !important;
      background: transparent !important;
    }
    body:not(.cover-mode) .filter-strip::after {
      display: none !important;
    }
    body:not(.cover-mode) #filterStripBody {
      display: grid !important;
      grid-template-areas: "filters actions" !important;
      grid-template-columns: minmax(0, 1fr) auto !important;
      align-items: center !important;
      column-gap: clamp(10px, 0.9vw, 18px) !important;
      row-gap: 0 !important;
    }
    body:not(.cover-mode) #filterStripBody > .filter-strip-toggle {
      display: none !important;
    }
    body:not(.cover-mode) #filterBox {
      grid-area: filters !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      gap: clamp(10px, 0.8vw, 16px) !important;
      align-items: center !important;
      width: 100% !important;
      min-width: 0 !important;
      justify-content: flex-start !important;
      overflow: hidden !important;
    }
    body:not(.cover-mode) #filterBox > .filter-group {
      display: inline-flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 10px !important;
      width: auto !important;
      min-width: 0 !important;
      margin: 0 !important;
      flex: 0 0 auto !important;
    }
    body:not(.cover-mode) #filterBox > .filter-group:first-child {
      display: inline-flex !important;
      align-items: center !important;
      gap: 10px !important;
      flex-shrink: 0 !important;
    }
    body:not(.cover-mode) #filterBox > .filter-group + .filter-group {
      margin-top: 0 !important;
    }
    body:not(.cover-mode) #filterBox > .filter-group .filter-group-label {
      flex: 0 0 auto !important;
      margin-right: 4px !important;
      font-weight: 800 !important;
      color: var(--muted-2) !important;
      white-space: nowrap !important;
      font-size: 0.95rem !important;
    }
    body:not(.cover-mode) #filterBox > .filter-group label {
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: clamp(4px, 0.35vw, 8px) !important;
      flex: 0 0 auto !important;
      min-height: 34px !important;
      width: auto !important;
      min-width: 0 !important;
      max-width: none !important;
      padding: 0 !important;
      white-space: nowrap !important;
      color: var(--muted-2) !important;
      background: transparent !important;
      border: 0 !important;
      box-shadow: none !important;
      font-size: 0.92rem !important;
    }
    body:not(.cover-mode) #filterBox > .filter-group label select {
      min-width: clamp(72px, 4.3vw, 90px) !important;
      width: clamp(72px, 4.3vw, 90px) !important;
      max-width: clamp(72px, 4.3vw, 90px) !important;
      height: 34px !important;
      min-height: 34px !important;
      padding-left: 9px !important;
      padding-right: 24px !important;
      font-size: 0.9rem !important;
      border-radius: 10px !important;
    }
    body:not(.cover-mode) .filter-strip-actions {
      grid-area: actions !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      gap: clamp(4px, 0.35vw, 8px) !important;
      margin: 0 !important;
      white-space: nowrap !important;
      flex: 0 0 auto !important;
      min-width: fit-content !important;
    }
    body:not(.cover-mode) .content-zoom-control {
      gap: clamp(2px, 0.25vw, 6px) !important;
      padding: 0 !important;
    }
    body:not(.cover-mode) .content-zoom-label,
    body:not(.cover-mode) .content-zoom-value {
      font-size: 0.9rem !important;
    }
    body:not(.cover-mode) .btn,
    body:not(.cover-mode) .btn.secondary,
    body:not(.cover-mode) .btn-mini,
    body:not(.cover-mode) .mode-btn,
    body:not(.cover-mode) .filter-strip-toggle,
    body:not(.cover-mode) .content-zoom-btn,
    body:not(.cover-mode) .page-mark-next {
      border: 1px solid color-mix(in srgb, var(--line-soft) 72%, transparent) !important;
      box-shadow: none !important;
    }
    /* 너비 30px 고정은 ± 줌 버튼만 — 일반 .btn-mini(라벨 토글 등)는 글자 폭 필요 */
    body:not(.cover-mode) .content-zoom-btn {
      min-height: 30px !important;
      width: 30px !important;
      padding: 0 !important;
    }
    body:not(.cover-mode) #exportSummaryBtn {
      min-height: 34px !important;
      padding: 7px 14px !important;
      font-size: 0.94rem !important;
    }
    body[data-theme="white"]:not(.cover-mode) .tabbar,
    body[data-theme="white"]:not(.cover-mode) .filter-strip {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(241, 245, 249, 0.92)) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .tabbar,
    body[data-theme="dark"]:not(.cover-mode) .filter-strip {
      background: linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(11, 17, 32, 0.96)) !important;
      border-color: rgba(99, 102, 241, 0.16) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) #filterBox > .filter-group .filter-group-label,
    body[data-theme="dark"]:not(.cover-mode) #filterBox > .filter-group label,
    body[data-theme="dark"]:not(.cover-mode) .content-zoom-label,
    body[data-theme="dark"]:not(.cover-mode) .content-zoom-value,
    body[data-theme="dark"]:not(.cover-mode) .filter-strip-toggle,
    body[data-theme="dark"]:not(.cover-mode) .tab {
      color: rgba(226, 232, 240, 0.92) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) #filterBox > .filter-group label select,
    body[data-theme="dark"]:not(.cover-mode) #themeSelector,
    body[data-theme="dark"]:not(.cover-mode) #dataSourceSelector {
      background: rgba(15, 23, 42, 0.96) !important;
      border-color: rgba(99, 102, 241, 0.18) !important;
      color: #e2e8f0 !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .tabbar,
    body[data-theme="warm"]:not(.cover-mode) .filter-strip {
      background: linear-gradient(180deg, rgba(255, 252, 248, 0.82), rgba(250, 246, 241, 0.92)) !important;
    }
    @media (max-width: 1400px) {
      body:not(.cover-mode) #filterStripBody {
        grid-template-areas:
          "filters"
          "actions actions" !important;
        grid-template-columns: 1fr !important;
        row-gap: 8px !important;
      }
      body:not(.cover-mode) #filterBox {
        gap: 8px !important;
        flex-wrap: nowrap !important;
      }
      body:not(.cover-mode) .filter-strip-actions {
        justify-content: flex-start !important;
      }
    }
    @media (max-width: 960px) {
      body:not(.cover-mode) #filterStripBody {
        grid-template-areas:
          "filters"
          "actions" !important;
        grid-template-columns: 1fr !important;
        row-gap: 12px !important;
      }
      body:not(.cover-mode) #filterBox {
        gap: 8px !important;
      }
      body:not(.cover-mode) #filterBox > .filter-group {
        flex-wrap: wrap !important;
      }
      body:not(.cover-mode) .filter-strip-actions {
        width: 100% !important;
        justify-content: space-between !important;
        flex-wrap: wrap !important;
      }
    }
  /*
   * ═══════════════════════════════════════════════════════════════
   *  ERP DESIGN SYSTEM v4 — CHROME OVERHAUL
   *  전략: html body:not(.cover-mode) 셀렉터 (specificity 0,2,2)
   *        → 기존 body:not(.cover-mode) (0,2,1) 완전 우선
   *        + --chrome-height 변수 재정의 → 전체 레이아웃 자동 정렬
   * ═══════════════════════════════════════════════════════════════
   */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     1. --chrome-height 재정의 (가장 중요)
        이 변수를 바꾸면 shell padding-top / main height 자동 수정
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  body:not(.cover-mode) {
    /* 상단 크롬 높이는 JS 실측(--top-chrome-offset)을 그대로 사용 */
    --chrome-height: var(--top-chrome-offset);
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     2. top-chrome grid: 72px header + auto chrome-toolbar
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  html body:not(.cover-mode) .top-chrome { grid-template-rows: auto auto !important; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     3. 헤더 — 72px 통일
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 글로벌·로컬·메인요약 상단 띠: 동일 토큰 (--hero-header-surface) */
  html body:not(.cover-mode) .page-header {
    position: relative !important;
    height: var(--app-header-bar-height) !important;
    min-height: var(--app-header-bar-height) !important;
    background: var(--hero-header-surface) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 2px 14px rgba(0,0,0,.18) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body:not(.cover-mode) #view-main-summary .main-summary-local-header,
  html body:not(.cover-mode) .section-title.page-local-header {
    height: var(--app-header-bar-height) !important;
    min-height: var(--app-header-bar-height) !important;
    max-height: var(--app-header-bar-height) !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    background: var(--hero-header-surface) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.07), 0 2px 14px rgba(0,0,0,.18) !important;
    color: #ffffff !important;
    overflow: hidden !important;
  }
  html body:not(.cover-mode) .page-header-inner {
    position: relative !important;
    height: var(--app-header-bar-height) !important;
    min-height: var(--app-header-bar-height) !important;
    padding: 0 !important;
  }
  /* 메인요약·로컬 페이지 헤더: 상단 글로벌 .atlas-page-header-inner 과 동일 좌우 6px */
  html body:not(.cover-mode) #view-main-summary .main-summary-header-inner,
  html body:not(.cover-mode) .page-header-inner.page-local-header-inner {
    height: var(--app-header-bar-height) !important;
    min-height: var(--app-header-bar-height) !important;
    padding: 0 6px !important;
    box-sizing: border-box !important;
  }
  /* 타이틀은 헤더 내부 요소와 완전히 분리: 뷰포트(100vw) 기준 절대 중앙 */
  html body:not(.cover-mode) .page-header-copy {
    position: fixed !important;
    left: 50vw !important;
    top: calc(var(--app-header-bar-height) / 2) !important; /* 헤더 띠 세로 중앙 */
    transform: translate(-50%, -50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    pointer-events: none !important;
    z-index: 1201 !important;
  }
  html body:not(.cover-mode) .page-header-copy h1,
  html body:not(.cover-mode) .page-header-copy .page-header-eyebrow,
  html body:not(.cover-mode) .page-header-copy span.page-header-eyebrow {
    white-space: nowrap !important;
  }
  html body:not(.cover-mode) .page-header-logo {
    height: var(--app-header-logo-height) !important;
    max-height: var(--app-header-logo-height) !important;
    align-self: flex-start !important;
    object-position: top center !important;
    margin-top: 0 !important;
  }
  html body:not(.cover-mode) .cover-corner-logo,
  html body:not(.cover-mode) #view-main-summary .main-summary-local-header .cover-corner-logo,
  html body:not(.cover-mode) .page-local-header-inner > .cover-corner-logo.left,
  html body:not(.cover-mode) .page-local-header-inner > .cover-corner-logo.right {
    height: var(--app-header-logo-height) !important;
    max-height: var(--app-header-logo-height) !important;
    width: auto !important;
    object-fit: contain !important;
    margin-top: 0 !important;
  }
  /* 상단 글로벌 헤더 타이포: 메인요약 .main-summary-title-* 과 동일 스케일 */
  html body:not(.cover-mode) .page-header-copy h1 {
    color: #ffffff !important;
    font-size: clamp(18px, 1.7vw, 22px) !important;
    letter-spacing: -0.02em !important;
    font-family: "Sora", "Noto Sans KR", sans-serif !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    font-weight: 800 !important;
  }
  html body:not(.cover-mode) .page-header-copy .page-header-eyebrow,
  html body:not(.cover-mode) .page-header-copy span.page-header-eyebrow {
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 11px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    font-family: "Sora", "Noto Sans KR", sans-serif !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 4px 0 0 !important;
    opacity: 1 !important;
  }
  /* 메인요약·페이지 로컬 헤더 타이틀/배치는 #view-main-summary 전용 규칙 및 .page-local-header-inner 규칙에만 둠 */
  html body:not(.cover-mode) .header-utility-box {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-right: 0 !important;
  }
  html body:not(.cover-mode) .page-header-inner {
    position: relative !important;
  }
  html body:not(.cover-mode) .header-left-nav-group {
    left: clamp(88px, 7.5vw, 136px) !important;
    z-index: 4 !important;
  }
  /* 우측 유틸: 메인요약 .main-summary-header-tools 과 동일 오프셋 */
  html body:not(.cover-mode) .page-header .header-utility-box {
    position: absolute !important;
    right: clamp(200px, 16vw + 120px, 280px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    z-index: 3 !important;
  }
  /* 헤더 띠 안 모드 버튼 — 메인요약 유틸(30px 필)과 동일 */
  html body:not(.cover-mode) .page-header .mode-btn,
  html body:not(.cover-mode) .section-title.page-local-header .mode-btn {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    background: rgba(15, 23, 42, 0.4) !important;
    color: #f8fafc !important;
    font-family: "Sora", "Noto Sans KR", sans-serif !important;
    box-shadow: none !important;
    transform: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  html body:not(.cover-mode) .page-header .mode-btn:hover,
  html body:not(.cover-mode) .section-title.page-local-header .mode-btn:hover {
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.38) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: none !important;
  }
  html body:not(.cover-mode) .page-header .mode-btn.active,
  html body:not(.cover-mode) .section-title.page-local-header .mode-btn.active {
    background: var(--primary, #2563eb) !important;
    border-color: var(--primary, #2563eb) !important;
    color: #fff !important;
    box-shadow: none !important;
  }
  /* theme/data selects in header */
  html body:not(.cover-mode) .header-utility-box .theme-picker.compact {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 0 !important;
    min-width: 0 !important;
    gap: 0 !important;
  }
  html body:not(.cover-mode) .header-utility-box .theme-picker.compact select {
    height: 26px !important;
    padding: 0 20px 0 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 7px !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    background: rgba(255,255,255,.10)
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.6)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
      no-repeat right 5px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: rgba(255,255,255,.85) !important;
    box-shadow: none !important;
    transform: none !important;
    min-width: 68px !important;
  }
  html body:not(.cover-mode) .header-utility-box .theme-picker.compact select:hover {
    background-color: rgba(255,255,255,.18) !important;
    transform: none !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     4. chrome-toolbar — 하나의 순수한 블록
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 고정 크롬(헤더+탭+필터) 하단: 본문과 구분 — 다크 등 모든 테마에서 대비 유지 */
  html body:not(.cover-mode) .chrome-toolbar {
    background: var(--toolbar-surface) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--line-2) 88%, var(--muted) 12%) !important;
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--line) 52%, transparent),
      0 4px 16px rgba(0, 0, 0, 0.14) !important;
    backdrop-filter: none !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     5. 탭 ROW — chrome 내부 콘텐츠를 shell과 동일 max-width로 정렬
        padding: vertical  horizontal(shell alignment)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  html body:not(.cover-mode) .toolbar.nav-combined {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    /* 1960×1080 기준: 좌우 고정 거터(12px) */
    padding: 4px var(--app-gutter, 12px) !important;
    background: var(--toolbar-surface) !important;
    border-top: none !important;
    border-bottom: none !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }
  html body:not(.cover-mode) .toolbar.nav-combined::before,
  html body:not(.cover-mode) .toolbar.nav-combined::after { display: none !important; }
  html body:not(.cover-mode) .toolbar::before { display: none !important; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     6. 탭 버튼 — compact, 테두리·그림자·scale 제거
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  html body:not(.cover-mode) .tab {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 0 13px !important;
    height: 28px !important;
    min-width: 0 !important;
    border-radius: 7px !important;
    border: 1px solid var(--line) !important;
    background: var(--panel-surface) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--muted-2) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    letter-spacing: -0.01em !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background .15s, color .15s, border-color .15s !important;
  }
  html body:not(.cover-mode) .tab:hover {
    background: var(--primary-3) !important;
    border-color: var(--primary) !important;
    color: var(--primary-dark) !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body:not(.cover-mode) .tab.active {
    background: var(--primary-3) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    box-shadow: none !important;
    transform: none !important;
  }
  html body:not(.cover-mode) .tab .tab-emoji,
  html body:not(.cover-mode) .tab.active .tab-emoji {
    font-size: 14px !important;
  }
  /* nav-right */
  html body:not(.cover-mode) .nav-right { gap: 8px !important; flex-shrink: 0 !important; }
  html body:not(.cover-mode) .nav-right .mini-note,
  html body:not(.cover-mode) .data-freshness { font-size: 11px !important; white-space: nowrap !important; color: var(--muted) !important; }
  html body:not(.cover-mode) #modeDescription { font-size: 11px !important; font-weight: 600 !important; color: var(--primary) !important; }
  html body:not(.cover-mode) .compact-top-filters { display: flex !important; gap: 4px !important; align-items: center !important; }
  html body:not(.cover-mode) .compact-top-filters select { height: 24px !important; padding: 0 16px 0 6px !important; font-size: 11px !important; border-radius: 6px !important; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     7. 필터 STRIP — 탭row와 같은 좌우 정렬, 사이에 얇은 선 하나
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  html body:not(.cover-mode) .filter-strip {
    padding: 5px max(16px, calc((100vw - 1950px) / 2 + 5px)) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: var(--toolbar-surface) !important;
    border: none !important;
    border-top: 1px solid var(--line-2) !important;
    border-bottom: 1px solid var(--line-2) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
  }
  html body:not(.cover-mode) .filter-strip::before,
  html body:not(.cover-mode) .filter-strip::after { display: none !important; }

  /* filter-strip-row */
  html body:not(.cover-mode) .filter-strip-row {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  html body:not(.cover-mode) .filter-strip-row::-webkit-scrollbar { display: none !important; }

  /* toggle button */
  html body:not(.cover-mode) .filter-strip-toggle {
    display: none !important;
  }
  html body:not(.cover-mode) .filter-strip-toggle:hover { background: var(--bg-2) !important; transform: none !important; }
  html body:not(.cover-mode) .filter-strip-toggle-icon { font-size: 11px !important; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     8. 필터 인라인 셀렉트 & 라벨 — compact
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  html body:not(.cover-mode) .inline-filter-box {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    align-items: center !important;
    flex: 1 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    padding-bottom: 0 !important;
  }
  html body:not(.cover-mode) .inline-filter-box::-webkit-scrollbar { display: none !important; }
  html body:not(.cover-mode) .inline-filter-box label {
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--muted) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
  }
  html body:not(.cover-mode) .inline-filter-box label.is-active { color: var(--primary) !important; background: none !important; border: none !important; }
  html body:not(.cover-mode) .inline-filter-box select {
    height: 26px !important;
    padding: 0 18px 0 7px !important;
    border-radius: 6px !important;
    border: 1px solid var(--line) !important;
    background-color: var(--panel-surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 4px center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    min-width: 54px !important;
    max-width: 116px !important;
    box-shadow: none !important;
  }
  html body:not(.cover-mode) .inline-filter-box select:focus { border-color: var(--primary) !important; outline: none !important; box-shadow: 0 0 0 2px var(--accent-soft) !important; }
  html body:not(.cover-mode) .inline-filter-box select.is-filtered {
    border-color: var(--primary) !important;
    background-color: var(--primary) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }
  /* also cover filter-groups-inline selects */
  html body:not(.cover-mode) .filter-groups-inline .filter-group select {
    height: 26px !important; padding: 0 18px 0 7px !important; border-radius: 6px !important;
    border: 1px solid var(--line) !important; background-color: var(--panel-surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important; background-position: right 4px center !important;
    -webkit-appearance: none !important; appearance: none !important;
    color: var(--text) !important; font-size: 12px !important; min-width: 54px !important;
    max-width: 116px !important; box-shadow: none !important;
  }
  html body:not(.cover-mode) .filter-groups-inline .filter-group label {
    font-size: 11px !important; font-weight: 700 !important; color: var(--muted) !important;
    letter-spacing: 0.02em !important; text-transform: none !important; padding: 0 !important;
    border: none !important; background: none !important; box-shadow: none !important;
    flex-direction: row !important; gap: 4px !important;
  }
  html body:not(.cover-mode) .filter-groups-inline .filter-group-label {
    font-size: 11px !important; font-weight: 700 !important; color: var(--muted) !important;
    text-transform: none !important; letter-spacing: 0.02em !important; white-space: nowrap !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     9. 필터 우측 액션
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  html body:not(.cover-mode) .filter-strip-actions { display: flex !important; align-items: center !important; gap: 5px !important; margin-left: auto !important; flex-shrink: 0 !important; }
  html body:not(.cover-mode) .filter-utility-box { display: flex !important; align-items: center !important; gap: 5px !important; flex-shrink: 0 !important; }
  html body:not(.cover-mode) .filter-strip-actions .btn,
  html body:not(.cover-mode) .filter-utility-box .btn {
    height: 26px !important; padding: 0 10px !important; font-size: 11px !important; font-weight: 600 !important;
    border-radius: 6px !important; box-shadow: none !important; transform: none !important;
  }
  html body:not(.cover-mode) .filter-strip-actions .btn:hover,
  html body:not(.cover-mode) .filter-utility-box .btn:hover { transform: none !important; box-shadow: none !important; }
  /* theme select inside filter utility */
  html body:not(.cover-mode) .filter-utility-box .theme-picker.compact { padding: 0 !important; border: none !important; background: transparent !important; font-size: 0 !important; }
  html body:not(.cover-mode) .filter-utility-box .theme-picker.compact select { height: 26px !important; border-radius: 6px !important; font-size: 11px !important; }

  /* zoom control */
  html body:not(.cover-mode) .content-zoom-label { font-size: 11px !important; }
  html body:not(.cover-mode) .content-zoom-value { font-size: 11px !important; font-weight: 700 !important; min-width: 28px !important; }
  html body:not(.cover-mode) .content-zoom-btn { width: 20px !important; height: 20px !important; font-size: 12px !important; border-radius: 5px !important; box-shadow: none !important; }
  html body:not(.cover-mode) .content-zoom-btn:hover { transform: none !important; box-shadow: none !important; }

  /* ════════════════════════════════════════════════════════════════
     TOOLBAR v5 — 최종 확정판
     구조: nth(1)=연도·분기 → 숨김
           nth(2)=조직5개 → 왼쪽정렬
           nth(3)=거래처·품목 → 오른쪽정렬
           .filter-strip-actions → 최우측
     ════════════════════════════════════════════════════════════════ */

  /* ── 토큰 ─────────────────────────────────────────────────────── */
  :root {
    --bar-h:   46px;
    --item-h:  28px;
    --bar-px:  16px;
    --tab-fs:  15px;   /* 페이지 탭 라벨 */
    --flt-fs:  15px;   /* 필터 폰트 +2 */
  }

  /* ══ 탭 바 ══════════════════════════════════════════════════════ */
  html body:not(.cover-mode) .toolbar.nav-combined {
    height: var(--bar-h) !important;
    min-height: var(--bar-h) !important;
    max-height: var(--bar-h) !important;
    padding: 0 var(--bar-px) !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid var(--line-2) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  html body:not(.cover-mode) .toolbar.nav-combined .nav-left {
    flex: 1 1 auto !important; min-width: 0 !important;
    height: var(--bar-h) !important;
    display: flex !important; align-items: center !important; overflow: hidden !important;
  }
  html body:not(.cover-mode) .toolbar.nav-combined .nav-right { display: none !important; }
  html body:not(.cover-mode) .toolbar.nav-combined .tabbar {
    display: flex !important; align-items: center !important;
    gap: 6px !important; flex-wrap: nowrap !important;
    height: var(--bar-h) !important; padding: 0 !important;
    background: transparent !important; border: none !important;
    box-shadow: none !important; overflow: hidden !important;
  }

  /* 탭 버튼 — 개별 테두리로 구분 (크기·높이 유지) */
  html body:not(.cover-mode) .toolbar.nav-combined .tab {
    height: var(--item-h) !important;
    min-height: var(--item-h) !important; max-height: var(--item-h) !important;
    padding: 0 13px !important;
    display: inline-flex !important; align-items: center !important;
    justify-content: center !important; gap: 5px !important;
    font-size: var(--tab-fs) !important; font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    border-radius: 8px !important;
    border: 1px solid var(--line-2) !important;
    background: color-mix(in srgb, var(--panel-strong) 64%, transparent) !important;
    color: var(--muted) !important;
    white-space: nowrap !important; cursor: pointer !important;
    flex-shrink: 0 !important; transform: none !important;
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 14%, transparent) !important;
    transition: background 0.13s, color 0.13s, border-color 0.13s, box-shadow 0.13s !important;
  }
  html body:not(.cover-mode) .toolbar.nav-combined .tab-emoji {
    font-size: 13px !important; line-height: 1 !important; flex-shrink: 0 !important;
  }
  html body:not(.cover-mode) .toolbar.nav-combined .tab:hover {
    transform: none !important;
    border-color: color-mix(in srgb, var(--primary) 38%, var(--line-2)) !important;
    background: color-mix(in srgb, var(--panel) 88%, transparent) !important;
    color: var(--text) !important;
  }
  html body:not(.cover-mode) .toolbar.nav-combined .tab.active {
    height: var(--item-h) !important; font-size: var(--tab-fs) !important;
    font-weight: 800 !important; transform: none !important;
    border: 1px solid color-mix(in srgb, var(--accent) 52%, rgba(0, 0, 0, 0.12)) !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, var(--accent-strong), var(--accent)) !important;
    box-shadow: 0 1px 0 color-mix(in srgb, #fff 22%, transparent), var(--accent-shadow) !important;
  }

  /* ══ 필터 바 컨테이너 ════════════════════════════════════════════ */
  html body:not(.cover-mode) .filter-strip {
    height: var(--bar-h) !important;
    min-height: var(--bar-h) !important; max-height: var(--bar-h) !important;
    padding: 0 var(--bar-px) !important;
    display: flex !important; align-items: center !important;
    border-top: none !important; border-bottom: 1px solid var(--line-2) !important;
    box-sizing: border-box !important; overflow: hidden !important;
  }
  html body:not(.cover-mode) .filter-strip-row {
    width: 100% !important; height: var(--bar-h) !important;
    display: flex !important; align-items: center !important;
    gap: 0 !important; flex-wrap: nowrap !important; overflow: hidden !important;
  }

  /* 토글 버튼 */
  html body:not(.cover-mode) .filter-strip-toggle {
    display: none !important;
  }
  html body:not(.cover-mode) .filter-strip-toggle-icon { font-size: 8px !important; }
  html body:not(.cover-mode) .filter-strip-toggle-text { font-size: 11px !important; font-weight: 800 !important; }

  /* ══ filterBox 레이아웃 ══════════════════════════════════════════
     전체를 flex row: 조직(왼쪽) flex-start, entity(오른쪽) margin-left:auto
     ══════════════════════════════════════════════════════════════ */
  html body:not(.cover-mode) #filterBox {
    flex: 1 1 auto !important; min-width: 0 !important;
    height: var(--bar-h) !important;
    display: flex !important; align-items: center !important;
    flex-wrap: nowrap !important; overflow: hidden !important;
    gap: 12px !important;
    width: auto !important;
  }

  /* nth(1) 조직 5개 — 그룹 박스(조직) */
  html body:not(.cover-mode) #filterBox > .filter-group:nth-child(1) {
    display: inline-flex !important; align-items: center !important;
    gap: 10px !important; flex-shrink: 0 !important;
    width: auto !important;
    position: relative !important;
    padding: 0 12px 0 10px !important;
    margin: 0 !important;
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line-2)) !important;
    background: color-mix(in srgb, var(--primary) 10%, var(--table-head-bg)) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent) !important;
  }
  html body:not(.cover-mode) #filterBox > .filter-group:nth-child(1)::before {
    content: "조직" !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: color-mix(in srgb, var(--primary) 72%, var(--muted-2)) !important;
    margin-right: 2px !important;
    padding-right: 4px !important;
    border-right: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line-2)) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* nth(2) 거래처·대분류·매출구분·매출단위·초기화 — 그룹 박스(거래·매출) */
  html body:not(.cover-mode) #filterBox > .filter-group:nth-child(2) {
    display: inline-flex !important; align-items: center !important;
    gap: 10px !important; flex-shrink: 0 !important;
    margin-left: auto !important;
    padding: 0 12px 0 10px !important;
    border-left: none !important;
    width: auto !important;
    position: relative !important;
    border-radius: 10px !important;
    border: 1px solid color-mix(in srgb, var(--line) 88%, var(--line-2)) !important;
    background: color-mix(in srgb, var(--panel) 94%, var(--bg)) !important;
    box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--teal) 55%, var(--line-2)) !important;
  }
  html body:not(.cover-mode) #filterBox > .filter-group:nth-child(2)::before {
    content: "거래·매출" !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--muted-2) !important;
    margin-right: 2px !important;
    padding-right: 4px !important;
    border-right: 1px solid var(--line-2) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* label wrapper */
  html body:not(.cover-mode) #filterBox .filter-group label {
    display: inline-flex !important; align-items: stretch !important;
    height: var(--item-h) !important;
    padding: 0 !important; margin: 0 !important;
    border: 1px solid var(--line-2) !important; border-radius: 6px !important;
    overflow: hidden !important; flex-shrink: 0 !important;
    background: var(--table-head-bg) !important;
    font-size: var(--flt-fs) !important; font-weight: 700 !important;
    color: var(--muted-2) !important; letter-spacing: 0 !important;
    padding-left: 11px !important; gap: 0 !important;
    white-space: nowrap !important; cursor: pointer !important;
    box-shadow: none !important;
    transition: border-color 0.13s !important;
  }

  /* select */
  html body:not(.cover-mode) #filterBox .filter-group label select {
    height: 100% !important;
    padding: 0 20px 0 8px !important;
    font-size: var(--flt-fs) !important; font-weight: 600 !important;
    border: none !important; border-left: 1px solid var(--line-2) !important;
    border-radius: 0 6px 6px 0 !important;
    background: var(--panel) !important; color: var(--text) !important;
    box-shadow: none !important; min-width: 56px !important; max-width: 115px !important;
    margin-left: 9px !important;
    cursor: pointer !important; transform: none !important;
    -webkit-appearance: auto !important; appearance: auto !important;
    transition: background 0.13s, color 0.13s !important;
  }

  /* 거래처: 폭 약 15px 축소 */
  html body:not(.cover-mode) #filterStrip #filterBox #filterCustomer {
    min-width: calc(13ch - 15px) !important;
    max-width: calc(13ch - 15px) !important;
    width: calc(13ch - 15px) !important;
    flex: 0 0 calc(13ch - 15px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  html body:not(.cover-mode) #filterStrip #filterBox label:has(#filterCustomer) {
    flex: 0 0 auto !important;
    width: fit-content !important;
    max-width: calc(5.5em + 13ch + 7px) !important;
  }

  /* 대분류: 폭 약 15px 축소 */
  html body:not(.cover-mode) #filterStrip #filterBox #filterProduct {
    min-width: calc(10ch - 15px) !important; max-width: calc(10ch - 15px) !important; width: calc(10ch - 15px) !important; flex: 0 0 calc(10ch - 15px) !important;
    box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  /* 품목명: 전용 폭(기존 상한 115px 대비 약 15px 축소) */
  html body:not(.cover-mode) #filterStrip #filterBox #filterItem {
    min-width: calc(12ch - 15px) !important;
    max-width: calc(12ch - 15px) !important;
    width: calc(12ch - 15px) !important;
    flex: 0 0 calc(12ch - 15px) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* 매출구분: 8ch (13ch 대비 5ch 축소) */
  html body:not(.cover-mode) #filterStrip #filterBox #filterSalesType {
    min-width: 8ch !important; max-width: 8ch !important; width: 8ch !important; flex: 0 0 8ch !important;
    box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  /* 매출단위: 옵션 억원·백만원 */
  html body:not(.cover-mode) #filterStrip #filterBox #filterMoneyUnit {
    min-width: 9ch !important; max-width: 9ch !important; width: 9ch !important; flex: 0 0 9ch !important;
    box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  /* 소숫점(라벨): 옵션 1자리·2자리 전체 표시 */
  html body:not(.cover-mode) #filterStrip #filterBox #filterSalesFraction {
    min-width: 12ch !important;
    max-width: 12ch !important;
    width: 12ch !important;
    flex: 0 0 12ch !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  /* 매출단위 오른쪽: 필터 초기화 — 보조 버튼 스타일(테두리·색 구분) */
  html body:not(.cover-mode) #filterStrip #filterBox #resetBtn.filter-toolbar-reset-btn {
    height: var(--item-h) !important;
    min-height: var(--item-h) !important;
    margin-left: 8px !important;
    padding: 0 14px !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    border-radius: 8px !important;
    border: 2px dashed color-mix(in srgb, var(--primary) 55%, var(--line-2)) !important;
    background: color-mix(in srgb, var(--primary) 12%, var(--panel)) !important;
    color: color-mix(in srgb, var(--primary-dark) 70%, var(--text)) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset !important;
    transition: background 0.13s, border-color 0.13s, color 0.13s !important;
  }
  html body:not(.cover-mode) #filterStrip #filterBox #resetBtn.filter-toolbar-reset-btn:hover {
    background: color-mix(in srgb, var(--primary) 22%, var(--panel)) !important;
    border-color: color-mix(in srgb, var(--primary) 75%, var(--line-2)) !important;
    border-style: solid !important;
    color: var(--primary-dark) !important;
  }

  /* 조직: 그룹·센터·실·팀 — 각 폭 약 15px 축소(한 줄에서 균형 유지) */
  html body:not(.cover-mode) #filterStrip #filterBox #filterGroup,
  html body:not(.cover-mode) #filterStrip #filterBox #filterCenter,
  html body:not(.cover-mode) #filterStrip #filterBox #filterOffice,
  html body:not(.cover-mode) #filterStrip #filterBox #filterTeam {
    min-width: calc(12ch - 15px) !important; max-width: calc(12ch - 15px) !important; width: calc(12ch - 15px) !important; flex: 0 0 calc(12ch - 15px) !important;
    box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }
  html body:not(.cover-mode) #filterStrip #filterBox #filterPart {
    min-width: calc(10ch - 15px) !important; max-width: calc(10ch - 15px) !important; width: calc(10ch - 15px) !important; flex: 0 0 calc(10ch - 15px) !important;
    box-sizing: border-box !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important;
  }

  /* 활성 필터 스타일은 테마별 블록 끝(드롭다운만 파란 배경)에서 통일 */

  /* ══ 우측 액션 ══════════════════════════════════════════════════ */
  html body:not(.cover-mode) .filter-strip-actions {
    display: flex !important; align-items: center !important; gap: 6px !important;
    margin-left: 14px !important; flex-shrink: 0 !important;
    padding-left: 14px !important; border-left: 1px solid var(--line-2) !important;
    height: var(--bar-h) !important;
  }
  html body:not(.cover-mode) #filterStrip[data-collapsed="true"] .filter-strip-actions {
    display: flex !important; visibility: visible !important;
  }
  html body:not(.cover-mode) #filterStrip[data-collapsed="true"] #exportSummaryBtn {
    display: none !important;
  }

  /* 확대·축소 */
  html body:not(.cover-mode) .content-zoom-control {
    display: inline-flex !important; align-items: center !important;
    gap: 2px !important; height: var(--item-h) !important;
    padding: 0 6px !important;
    background: var(--table-head-bg) !important;
    border: 1px solid var(--line-2) !important; border-radius: 6px !important;
    box-sizing: border-box !important;
  }
  html body:not(.cover-mode) .content-zoom-label {
    font-size: 11px !important; font-weight: 800 !important;
    color: var(--muted) !important; padding: 0 2px !important; white-space: nowrap !important;
  }
  html body:not(.cover-mode) .content-zoom-value {
    font-size: 12px !important; font-weight: 800 !important;
    min-width: 30px !important; text-align: center !important; color: var(--text) !important;
  }
  html body:not(.cover-mode) .content-zoom-btn {
    width: 20px !important; height: 20px !important; padding: 0 !important;
    border-radius: 4px !important; border: 1px solid var(--line-2) !important;
    background: var(--panel) !important; color: var(--text) !important;
    font-size: 15px !important; font-weight: 700 !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    cursor: pointer !important; transform: none !important; box-shadow: none !important;
    transition: background 0.13s, border-color 0.13s !important;
  }
  html body:not(.cover-mode) .content-zoom-btn:hover {
    background: color-mix(in srgb, var(--primary) 12%, var(--panel)) !important;
    border-color: var(--primary) !important; color: var(--primary-dark) !important;
    transform: none !important; box-shadow: none !important;
  }
  html body:not(.cover-mode) #exportSummaryBtn {
    height: var(--item-h) !important; padding: 0 12px !important;
    font-size: 12px !important; font-weight: 700 !important;
    border-radius: 6px !important; white-space: nowrap !important;
    transform: none !important; box-shadow: none !important;
  }

  /* ══ 테마별 색상 ══════════════════════════════════════════════════ */

  /* WHITE */
  html body[data-theme="white"]:not(.cover-mode) .toolbar.nav-combined,
  html body:not([data-theme]):not(.cover-mode) .toolbar.nav-combined {
    background: #f8fafc !important; border-color: rgba(148,163,184,0.22) !important;
  }
  html body[data-theme="white"]:not(.cover-mode) .filter-strip,
  html body:not([data-theme]):not(.cover-mode) .filter-strip {
    background: #f1f5f9 !important; border-color: rgba(148,163,184,0.20) !important;
  }
  html body[data-theme="white"]:not(.cover-mode) .tab,
  html body:not([data-theme]):not(.cover-mode) .tab { color: #64748b !important; }
  html body[data-theme="white"]:not(.cover-mode) .tab:hover,
  html body:not([data-theme]):not(.cover-mode) .tab:hover {
    background: rgba(37,99,235,0.08) !important; color: #1e40af !important;
    border-color: rgba(37,99,235,0.20) !important; transform: none !important;
  }
  html body[data-theme="white"]:not(.cover-mode) .tab.active,
  html body:not([data-theme]):not(.cover-mode) .tab.active {
    background: #2563eb !important; color: #fff !important;
    border-color: #2563eb !important; box-shadow: 0 2px 8px rgba(37,99,235,0.25) !important;
  }
  html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label,
  html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label {
    background: #eef2f7 !important; border-color: rgba(148,163,184,0.30) !important; color: #475569 !important;
  }
  html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label select,
  html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label select {
    background: #fff !important; border-left-color: rgba(148,163,184,0.30) !important; color: #1e293b !important;
  }
  html body[data-theme="white"]:not(.cover-mode) #filterBox > .filter-group:nth-child(2),
  html body:not([data-theme]):not(.cover-mode) #filterBox > .filter-group:nth-child(2) {
    border-left-color: rgba(148,163,184,0.22) !important;
  }
  html body[data-theme="white"]:not(.cover-mode) .filter-strip-actions,
  html body:not([data-theme]):not(.cover-mode) .filter-strip-actions {
    border-left-color: rgba(148,163,184,0.22) !important;
  }
  html body[data-theme="white"]:not(.cover-mode) .filter-strip-toggle,
  html body:not([data-theme]):not(.cover-mode) .filter-strip-toggle {
    border-color: rgba(148,163,184,0.26) !important; color: #64748b !important;
  }

  /* DARK */
  html body[data-theme="dark"]:not(.cover-mode) .toolbar.nav-combined {
    background: #0d1117 !important; border-color: rgba(99,102,241,0.16) !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) .filter-strip {
    background: #090d16 !important; border-color: rgba(99,102,241,0.14) !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) .tab { color: #8b95a8 !important; }
  html body[data-theme="dark"]:not(.cover-mode) .tab:hover {
    background: rgba(99,102,241,0.12) !important; color: #e2e8f0 !important;
    border-color: rgba(129,140,248,0.22) !important; transform: none !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) .tab.active {
    background: #4f46e5 !important; color: #fff !important;
    border-color: #4f46e5 !important; box-shadow: 0 2px 8px rgba(79,70,229,0.35) !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label {
    background: rgba(22,33,55,0.90) !important; border-color: rgba(99,102,241,0.18) !important; color: #94a3b8 !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label select {
    background: rgba(13,17,27,0.95) !important; border-left-color: rgba(99,102,241,0.18) !important; color: #e2e8f0 !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) #filterBox > .filter-group:nth-child(2) { border-left-color: rgba(99,102,241,0.14) !important; }
  html body[data-theme="dark"]:not(.cover-mode) .filter-strip-actions { border-left-color: rgba(99,102,241,0.14) !important; }
  html body[data-theme="dark"]:not(.cover-mode) .content-zoom-control {
    background: rgba(22,33,55,0.80) !important; border-color: rgba(99,102,241,0.16) !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) .content-zoom-label,
  html body[data-theme="dark"]:not(.cover-mode) .content-zoom-value { color: #94a3b8 !important; }
  html body[data-theme="dark"]:not(.cover-mode) .content-zoom-btn {
    background: rgba(22,33,55,0.85) !important; border-color: rgba(99,102,241,0.16) !important; color: #e2e8f0 !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) .content-zoom-btn:hover {
    background: rgba(99,102,241,0.20) !important; border-color: #818cf8 !important; color: #a5b4fc !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) .filter-strip-toggle {
    border-color: rgba(99,102,241,0.18) !important; color: #94a3b8 !important;
  }

  /* WARM */
  html body[data-theme="warm"]:not(.cover-mode) .toolbar.nav-combined {
    background: #fffaf3 !important; border-color: rgba(180,83,9,0.18) !important;
  }
  html body[data-theme="warm"]:not(.cover-mode) .filter-strip {
    background: #fdf6ec !important; border-color: rgba(180,83,9,0.16) !important;
  }
  html body[data-theme="warm"]:not(.cover-mode) .tab { color: #92400e !important; }
  html body[data-theme="warm"]:not(.cover-mode) .tab:hover {
    background: rgba(254,243,199,0.70) !important; color: #78350f !important;
    border-color: rgba(180,83,9,0.24) !important; transform: none !important;
  }
  html body[data-theme="warm"]:not(.cover-mode) .tab.active {
    background: #b45309 !important; color: #fff !important;
    border-color: #b45309 !important; box-shadow: 0 2px 8px rgba(180,83,9,0.28) !important;
  }
  html body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label {
    background: rgba(254,243,199,0.60) !important; border-color: rgba(180,83,9,0.22) !important; color: #92400e !important;
  }
  html body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label select {
    background: #fffcf8 !important; border-left-color: rgba(180,83,9,0.22) !important; color: #292019 !important;
  }

  /* 필터 적용됨: 라벨 래퍼 + 셀렉트 모두 «선택됨»이 한눈에 보이도록 (테마별) */
  html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label.is-active,
  html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label.is-active,
  html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label.is-active,
  html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered),
  html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered),
  html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered) {
    background: linear-gradient(180deg, rgba(219, 234, 254, 0.98) 0%, rgba(239, 246, 255, 0.99) 100%) !important;
    border-color: rgba(37, 99, 235, 0.45) !important;
    color: #1e3a8a !important;
    box-shadow:
      inset 3px 0 0 #2563eb,
      0 0 0 1px rgba(37, 99, 235, 0.12),
      0 2px 12px rgba(37, 99, 235, 0.14) !important;
  }
  html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label select.is-filtered,
  html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label select.is-filtered,
  html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label select.is-filtered {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
    border-left-color: #1d4ed8 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label.is-active,
  html body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered) {
    background: linear-gradient(180deg, rgba(67, 56, 202, 0.42) 0%, rgba(30, 27, 75, 0.72) 100%) !important;
    border-color: rgba(129, 140, 248, 0.55) !important;
    color: #e0e7ff !important;
    box-shadow:
      inset 3px 0 0 #818cf8,
      0 0 0 1px rgba(99, 102, 241, 0.35),
      0 4px 18px rgba(0, 0, 0, 0.45) !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label select.is-filtered {
    background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important;
    border-left-color: #4338ca !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }
  html body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label.is-active,
  html body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered) {
    background: linear-gradient(180deg, rgba(254, 243, 199, 0.95) 0%, rgba(255, 251, 235, 0.98) 100%) !important;
    border-color: rgba(37, 99, 235, 0.38) !important;
    color: #1e3a8a !important;
    box-shadow:
      inset 3px 0 0 #2563eb,
      0 0 0 1px rgba(37, 99, 235, 0.14),
      0 2px 12px rgba(37, 99, 235, 0.12) !important;
  }
  html body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label select.is-filtered {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
    border-left-color: #1d4ed8 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  }

  html body[data-theme="warm"]:not(.cover-mode) #filterBox > .filter-group:nth-child(2) { border-left-color: rgba(180,83,9,0.16) !important; }
  html body[data-theme="warm"]:not(.cover-mode) .filter-strip-actions { border-left-color: rgba(180,83,9,0.16) !important; }
  html body[data-theme="warm"]:not(.cover-mode) .content-zoom-control {
    background: rgba(254,243,199,0.55) !important; border-color: rgba(180,83,9,0.20) !important;
  }
  html body[data-theme="warm"]:not(.cover-mode) .content-zoom-label,
  html body[data-theme="warm"]:not(.cover-mode) .content-zoom-value { color: #92400e !important; }
  html body[data-theme="warm"]:not(.cover-mode) .content-zoom-btn {
    background: #fffcf8 !important; border-color: rgba(180,83,9,0.20) !important; color: #292019 !important;
  }
  html body[data-theme="warm"]:not(.cover-mode) .content-zoom-btn:hover {
    background: #fef3c7 !important; border-color: #d97706 !important; color: #92400e !important;
  }
  html body[data-theme="warm"]:not(.cover-mode) .filter-strip-toggle {
    border-color: rgba(180,83,9,0.20) !important; color: #92400e !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     10. 전역 btn/select 사이즈 리셋 (크롬 외부 패널용)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  html body .btn { box-shadow: none !important; }
  html body .btn:hover, html body select:hover { transform: none !important; box-shadow: none !important; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     11. 다크/슬레이트/네이비/웜 테마 크롬 색상
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  /* 공통: 탭 패널(toolbar.nav-combined)이 테마 분위기와 폰트 톤에 맞게 보이도록 */
  html body:not(.cover-mode) .toolbar.nav-combined {
    border-bottom: 1px solid var(--line-2);
    color: var(--text);
    letter-spacing: -0.01em;
  }
  html body:not(.cover-mode) .toolbar.nav-combined .tabbar {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 2px;
    gap: 4px;
  }
  html body:not(.cover-mode) .toolbar.nav-combined .tab {
    font-weight: 650;
    letter-spacing: -0.01em;
  }
  html body:not(.cover-mode) .toolbar.nav-combined .tab-emoji { font-size: 14px !important; }

  /* WHITE */
  html body[data-theme="white"]:not(.cover-mode) .chrome-toolbar,
  html body[data-theme="white"]:not(.cover-mode) .toolbar.nav-combined {
    background: color-mix(in srgb, rgba(255, 255, 255, 0.76) 86%, var(--primary-3)) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    backdrop-filter: blur(18px) saturate(1.05);
  }
  html body[data-theme="white"]:not(.cover-mode) .tab:hover { background: rgba(37,99,235,.08) !important; border-color: rgba(37,99,235,.30) !important; }
  /* .tab.active — 상단 §9(솔리드 강조) 유지; 여기서 연한 그라데이션으로 덮어쓰지 않음 */

  /* DARK */
  html body[data-theme="dark"]:not(.cover-mode) .chrome-toolbar,
  html body[data-theme="dark"]:not(.cover-mode) .toolbar.nav-combined {
    background: linear-gradient(180deg, rgba(26, 29, 38, 0.92), rgba(26, 29, 38, 0.76)) !important;
    border-color: rgba(46, 51, 72, 0.72) !important;
    backdrop-filter: blur(18px) saturate(1.08);
  }
  html body[data-theme="dark"]:not(.cover-mode) .filter-strip {
    background: rgba(26, 29, 38, 0.86) !important;
    border-top-color: rgba(46,51,72,.72) !important;
    border-bottom-color: rgba(46,51,72,.72) !important;
  }
  html body[data-theme="dark"]:not(.cover-mode) .tab { background: rgba(34, 38, 58, 0.68) !important; border-color: rgba(46,51,72,.72) !important; color: rgba(232, 234, 239, 0.86) !important; }
  html body[data-theme="dark"]:not(.cover-mode) .tab:hover { background: rgba(96,165,250,.10) !important; border-color: rgba(96,165,250,.22) !important; }
  /* .tab.active — §9 다크 솔리드 유지 */
  html body[data-theme="dark"]:not(.cover-mode) .inline-filter-box select,
  html body[data-theme="dark"]:not(.cover-mode) .filter-groups-inline .filter-group select { background-color: #22263A !important; border-color: rgba(46,51,72,.80) !important; color: #E8EAEF !important; }
  html body[data-theme="dark"]:not(.cover-mode) .filter-strip-toggle { background: #22263A !important; border-color: rgba(46,51,72,.80) !important; color: #9BA3BB !important; }

  /* WARM */
  html body[data-theme="warm"]:not(.cover-mode) .chrome-toolbar,
  html body[data-theme="warm"]:not(.cover-mode) .toolbar.nav-combined,
  html body[data-theme="warm"]:not(.cover-mode) .filter-strip {
    background: linear-gradient(180deg, rgba(255, 247, 237, 0.86), rgba(255, 237, 213, 0.72)) !important;
    border-color: rgba(180, 83, 9, 0.22) !important;
    backdrop-filter: blur(16px) saturate(1.04);
  }
  html body[data-theme="warm"]:not(.cover-mode) .tab { background: rgba(255, 255, 255, 0.72) !important; border-color: rgba(180,83,9,.20) !important; color: rgba(124, 45, 18, 0.78) !important; }
  html body[data-theme="warm"]:not(.cover-mode) .tab:hover { background: rgba(254,243,199,.80) !important; border-color: rgba(180,83,9,.28) !important; }
  /* .tab.active — §9 웜 솔리드 유지 */

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     Full-width content alignment (cover/main-summary 제외)
     - 크롬(헤더/탭/필터)와 본문(main) 폭을 동일 기준으로 맞춤
     - 좌우는 일정 거터만 남기고 최대 활용
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  html body:not(.cover-mode) { --app-gutter: 12px; }

  /* chrome-toolbar 자체는 화면 가로를 꽉 채움 */
  html body:not(.cover-mode) .chrome-toolbar {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
    box-sizing: border-box !important;
  }

  /* 넓은 화면: 필터 그룹을 탭처럼 가로로 넓게 분배 (html 접두로 하위 규칙보다 우선) */
  @media (min-width: 1100px) {
    /* 넓은 화면에서도 필터 폭·위치 고정: 그룹을 늘리지 않음, 셀렉트는 ID별 ch 폭 유지 */
    html body:not(.cover-mode) #filterStrip #filterBox {
      justify-content: flex-start !important;
      gap: clamp(8px, 0.9vw, 14px) !important;
      overflow: hidden !important;
    }
    html body:not(.cover-mode) #filterStrip #filterBox > .filter-group {
      flex: 0 0 auto !important;
      min-width: 0 !important;
      justify-content: flex-start !important;
    }
  }

  /* 탭 row / 필터 strip은 chrome-toolbar 안에서 동일 거터로 정렬 */
  html body:not(.cover-mode) .toolbar.nav-combined {
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
  }
  html body:not(.cover-mode) .filters,
  html body:not(.cover-mode) .filter-strip {
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
    box-sizing: border-box !important;
  }

  /* 본문(main)도 가로 전체 사용 + 내부 컨텐츠만 거터로 패딩 */
  html body:not(.cover-mode) main {
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: var(--app-gutter) !important;
    padding-right: var(--app-gutter) !important;
    box-sizing: border-box !important;
  }
  /* 상단 크롬과 본문: 시각적 여백(고정 영역과 본문 사이 약 5px) */
  html body:not(.cover-mode) main {
    padding-top: 0 !important;
    padding-bottom: 16px !important;
    margin-top: 5px !important;
  }
  /* 메인요약도 다른 페이지와 동일한 full-width */
  /* ═══════════════════════════════════════════════════════════════════
     PREMIUM DASHBOARD REDESIGN — Pages 3+ (header, toolbar, content)
     3가지 완전한 테마: white / dark / warm
     ─ 일관된 폰트 스케일, 레이아웃, 컴포넌트 디자인
     ═══════════════════════════════════════════════════════════════════ */
    /* ── 0. 공통 폰트 스케일 토큰 (모든 테마 공유) ─────────────────── */
    :root {
      /* 텍스트 계층 */
      --ds-font-xs:   11px;
      --ds-font-sm:   12px;
      --ds-font-base: 13px;
      --ds-font-md:   14px;
      --ds-font-lg:   15px;
      --ds-font-xl:   17px;
      --ds-font-2xl:  19px;
      --ds-font-3xl:  22px;
      --ds-font-4xl:  26px;

      /* 간격 */
      --ds-gap-xs: 4px;
      --ds-gap-sm: 8px;
      --ds-gap-md: 12px;
      --ds-gap-lg: 16px;
      --ds-gap-xl: 20px;
      --ds-gap-2xl: 28px;

      /* 반경 */
      --ds-radius-sm:  8px;
      --ds-radius-md:  12px;
      --ds-radius-lg:  16px;
      --ds-radius-xl:  20px;

      /* 헤더 — 글로벌 토큰과 동일(72/64px 반응형) */
      --ds-header-h:   var(--app-header-bar-height);
      --ds-toolbar-h:  52px;
    }

    /* ── 1. PAGE HEADER — 배경은 v4 chrome(html body …) + --hero-header-surface 에 일원화 ── */
    body:not(.cover-mode) .page-header {
      height: var(--ds-header-h) !important;
    }
    body:not(.cover-mode) .page-header-inner {
      height: var(--ds-header-h) !important;
      padding: 0 20px !important;
      gap: 12px !important;
    }
    body:not(.cover-mode) .page-header-copy h1 {
      font-size: var(--ds-font-xl) !important;
      font-weight: 800 !important;
      letter-spacing: -0.025em !important;
    }
    body:not(.cover-mode) .page-header-copy .page-header-eyebrow {
      font-size: var(--ds-font-xs) !important;
      letter-spacing: 0.18em !important;
    }
    body:not(.cover-mode) .page-header-logo {
      height: var(--app-header-logo-height) !important;
      max-height: var(--app-header-logo-height) !important;
      object-fit: contain !important;
    }

    /* ── 2. CHROME TOOLBAR (탭 + 필터 바) ──────────────────────────── */
    body:not(.cover-mode) .chrome-toolbar {
      border-bottom: 1px solid var(--line-2) !important;
      box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important;
    }

    /* ── 탭 툴바 (nav-combined) 공통 ── */
    body:not(.cover-mode) .toolbar.nav-combined {
      min-height: var(--ds-toolbar-h) !important;
      padding: 8px 20px !important;
      gap: 12px !important;
      background: var(--panel) !important;
      border-bottom: 1px solid var(--line-2) !important;
    }

    /* 탭 — 기본 */
    body:not(.cover-mode) .tab {
      height: 36px !important;
      padding: 0 14px !important;
      font-size: var(--ds-font-base) !important;
      font-weight: 600 !important;
      border-radius: var(--ds-radius-sm) !important;
      border: 1px solid var(--line-2) !important;
      transition: all 0.18s ease !important;
      gap: 5px !important;
      min-width: 90px !important;
    }
    body:not(.cover-mode) .tab-emoji {
      font-size: var(--ds-font-md) !important;
    }
    /* 탭 — 활성 */
    body:not(.cover-mode) .tab.active {
      height: 36px !important;
      font-size: var(--ds-font-base) !important;
      font-weight: 800 !important;
      transform: none !important;
      box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
    }

    /* ── 필터 스트립 ── */
    body:not(.cover-mode) .filter-strip {
      padding: 6px 18px !important;
      border-radius: 0 !important;
      margin-top: 0 !important;
      border-top: 1px solid var(--line-2) !important;
      border-bottom: 1px solid var(--line-2) !important;
      background: var(--toolbar-surface) !important;
    }
    body:not(.cover-mode) .filter-strip-title {
      font-size: var(--ds-font-sm) !important;
      letter-spacing: 0.12em !important;
    }
    body:not(.cover-mode) .filter-strip-note {
      font-size: var(--ds-font-sm) !important;
    }
    body:not(.cover-mode) .filter-group-label {
      font-size: var(--ds-font-xs) !important;
      letter-spacing: 0.10em !important;
      margin-bottom: 3px !important;
    }
    body:not(.cover-mode) .filter-group label {
      font-size: var(--ds-font-xs) !important;
    }
    body:not(.cover-mode) .filter-group select,
    body:not(.cover-mode) .inline-filter-box select {
      font-size: var(--ds-font-sm) !important;
      height: 30px !important;
      padding: 0 8px !important;
      border-radius: var(--ds-radius-sm) !important;
    }
    body:not(.cover-mode) .inline-filter-box label {
      font-size: var(--ds-font-xs) !important;
      padding: 5px 7px 5px !important;
      border-radius: var(--ds-radius-sm) !important;
    }
    body:not(.cover-mode) .filter-strip-actions .btn {
      height: 30px !important;
      font-size: var(--ds-font-sm) !important;
      padding: 0 12px !important;
    }
    body:not(.cover-mode) .tooltip-toggle-btn {
      height: 30px !important;
      font-size: var(--ds-font-xs) !important;
    }
    body:not(.cover-mode) .content-zoom-label,
    body:not(.cover-mode) .content-zoom-value {
      font-size: var(--ds-font-sm) !important;
    }
    body:not(.cover-mode) .content-zoom-btn {
      font-size: var(--ds-font-sm) !important;
    }
    body:not(.cover-mode) .theme-picker.compact select {
      font-size: var(--ds-font-xs) !important;
    }

    /* ── 상단 스트라이프 미세 조정 ── */
    body:not(.cover-mode) .toolbar.nav-combined::after {
      display: none !important;
    }
    body:not(.cover-mode) .filter-strip::after {
      height: 3px !important;
      border-radius: 0 !important;
      left: 0 !important; right: 0 !important; top: 0 !important;
      opacity: 0.90 !important;
    }

    /* ── 3. SECTION TITLE ──────────────────────────────────────────── */
    body:not(.cover-mode) .section-title {
      margin: 4px 6px 10px !important;
      padding-bottom: 8px !important;
      border-bottom: 1px solid var(--line-2) !important;
      align-items: center !important;
    }
    body:not(.cover-mode) .section-kicker {
      font-size: var(--ds-font-xs) !important;
      letter-spacing: 0.10em !important;
    }
    body:not(.cover-mode) .section-kicker::before {
      width: 14px !important;
      height: 2px !important;
    }
    body:not(.cover-mode) .section-title h2 {
      font-size: var(--ds-font-xl) !important;
      font-weight: 800 !important;
      letter-spacing: -0.025em !important;
    }
    body:not(.cover-mode) .section-title p {
      font-size: var(--ds-font-sm) !important;
      color: var(--muted) !important;
    }

    /* ── 4. PANEL ─────────────────────────────────────────────────── */
    body:not(.cover-mode) .panel {
      border-radius: var(--ds-radius-lg) !important;
      padding: 16px 18px !important;
      border: 1px solid var(--line-2) !important;
      box-shadow: var(--shadow-card) !important;
      background: var(--panel) !important;
    }
    body:not(.cover-mode) .panel::after {
      height: 3px !important;
      border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0 !important;
    }
    body:not(.cover-mode) .panel-head {
      margin-bottom: 10px !important;
      padding-bottom: 10px !important;
      border-bottom: 1px solid var(--line-2) !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
    }
    body:not(.cover-mode) .panel-head h3 {
      font-size: var(--ds-font-lg) !important;
      font-weight: 800 !important;
      letter-spacing: -0.02em !important;
      margin: 0 !important;
    }
    body:not(.cover-mode) .panel-head .meta {
      font-size: var(--ds-font-sm) !important;
      color: var(--muted) !important;
    }

    /*
      패널 헤더 한 줄: 타이틀·메타·범례·필터를 조직「조직별 매출액」헤더와 동일한 플로우로 정렬.
      제외: #view-summary(요약), #view-main-summary(메인요약), body.main-summary-mode,
      도넛 카드 — .panel 안에 #customerShareDonut | #orgShareDonut | #productDonut | #stDonut 가 있을 때
    */
    body:not(.cover-mode):not(.main-summary-mode) .view:not(#view-summary):not(#view-main-summary) .panel:not(:has(#customerShareDonut)):not(:has(#orgShareDonut)):not(:has(#productDonut)):not(:has(#stDonut)) > .panel-head {
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 8px 10px !important;
      min-width: 0 !important;
    }
    body:not(.cover-mode):not(.main-summary-mode) .view:not(#view-summary):not(#view-main-summary) .panel:not(:has(#customerShareDonut)):not(:has(#orgShareDonut)):not(:has(#productDonut)):not(:has(#stDonut)) > .panel-head > h3 {
      flex-shrink: 0 !important;
    }
    body:not(.cover-mode):not(.main-summary-mode) .view:not(#view-summary):not(#view-main-summary) .panel:not(:has(#customerShareDonut)):not(:has(#orgShareDonut)):not(:has(#productDonut)):not(:has(#stDonut)) > .panel-head > .meta {
      flex-shrink: 0 !important;
      white-space: nowrap !important;
      min-width: 0 !important;
    }
    body:not(.cover-mode):not(.main-summary-mode) .view:not(#view-summary):not(#view-main-summary) .panel:not(:has(#customerShareDonut)):not(:has(#orgShareDonut)):not(:has(#productDonut)):not(:has(#stDonut)) > .panel-head > div:has(> h3) {
      display: inline-flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 8px !important;
      min-width: 0 !important;
    }
    body:not(.cover-mode):not(.main-summary-mode) .view:not(#view-summary):not(#view-main-summary) .panel:not(:has(#customerShareDonut)):not(:has(#orgShareDonut)):not(:has(#productDonut)):not(:has(#stDonut)) > .panel-head [class*="legend-host"] {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      overflow: hidden !important;
    }
    body:not(.cover-mode):not(.main-summary-mode) .view:not(#view-summary):not(#view-main-summary) .panel:not(:has(#customerShareDonut)):not(:has(#orgShareDonut)):not(:has(#productDonut)):not(:has(#stDonut)) > .panel-head [class*="legend-host"] .legend-wrap {
      display: flex !important;
      justify-content: flex-end !important;
      align-items: center !important;
      min-width: 0 !important;
      max-width: 100% !important;
    }
    body:not(.cover-mode):not(.main-summary-mode) .view:not(#view-summary):not(#view-main-summary) .panel:not(:has(#customerShareDonut)):not(:has(#orgShareDonut)):not(:has(#productDonut)):not(:has(#stDonut)) > .panel-head [class*="legend-host"] .legend {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: flex-end !important;
      gap: 4px 8px !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    body:not(.cover-mode):not(.main-summary-mode) .view:not(#view-summary):not(#view-main-summary) .panel:not(:has(#customerShareDonut)):not(:has(#orgShareDonut)):not(:has(#productDonut)):not(:has(#stDonut)) > .panel-head .org-compare-period-toolbar {
      flex-shrink: 0 !important;
    }
    body:not(.cover-mode):not(.main-summary-mode) .view:not(#view-summary):not(#view-main-summary) .panel:not(:has(#customerShareDonut)):not(:has(#orgShareDonut)):not(:has(#productDonut)):not(:has(#stDonut)) > .panel-head .org-trend-viz-switcher-host,
    body:not(.cover-mode):not(.main-summary-mode) .view:not(#view-summary):not(#view-main-summary) .panel:not(:has(#customerShareDonut)):not(:has(#orgShareDonut)):not(:has(#productDonut)):not(:has(#stDonut)) > .panel-head [id$="VizSwitcherHost"] {
      flex-shrink: 0 !important;
      display: flex !important;
      align-items: center !important;
    }

    /* ── 5. KPI CARDS ─────────────────────────────────────────────── */
    body:not(.cover-mode) .kpi {
      border-radius: var(--ds-radius-lg) !important;
      padding: 16px 16px 14px !important;
      border: 1px solid var(--line-2) !important;
      box-shadow: var(--shadow-soft) !important;
      background: var(--panel) !important;
    }
    body:not(.cover-mode) .kpi .eyebrow {
      font-size: var(--ds-font-xs) !important;
      letter-spacing: 0.08em !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
    }
    body:not(.cover-mode) .kpi .value {
      font-size: var(--ds-font-4xl) !important;
      font-weight: 800 !important;
      letter-spacing: -0.03em !important;
      margin-top: 8px !important;
      line-height: 1.15 !important;
    }
    body:not(.cover-mode) .kpi .sub {
      font-size: var(--ds-font-sm) !important;
      margin-top: 6px !important;
      line-height: 1.45 !important;
    }

    /* ── 6. INSIGHT CARDS ─────────────────────────────────────────── */
    body:not(.cover-mode) .insight {
      border-radius: var(--ds-radius-md) !important;
      padding: 14px 16px !important;
      border: 1px solid var(--line-2) !important;
      box-shadow: var(--shadow-soft) !important;
    }
    body:not(.cover-mode) .insight h4 {
      font-size: var(--ds-font-md) !important;
      font-weight: 800 !important;
      margin-bottom: 6px !important;
    }
    body:not(.cover-mode) .insight p,
    body:not(.cover-mode) .insight ul {
      font-size: var(--ds-font-sm) !important;
      line-height: 1.55 !important;
    }

    /* ── 7. METRIC PILL ───────────────────────────────────────────── */
    body:not(.cover-mode) .metric-pill {
      border-radius: var(--ds-radius-md) !important;
      padding: 12px 14px !important;
      border: 1px solid var(--line-2) !important;
      box-shadow: var(--shadow-soft) !important;
    }
    body:not(.cover-mode) .metric-pill strong {
      font-size: var(--ds-font-3xl) !important;
      letter-spacing: -0.04em !important;
    }
    body:not(.cover-mode) .metric-pill span {
      font-size: var(--ds-font-xs) !important;
      letter-spacing: 0.08em !important;
      font-weight: 700 !important;
    }

    /* ── 8. TABLES ────────────────────────────────────────────────── */
    body:not(.cover-mode) .ranking-table,
    body:not(.cover-mode) .record-table table {
      font-size: var(--ds-font-base) !important;
    }
    body:not(.cover-mode) th {
      font-size: var(--ds-font-xs) !important;
      font-weight: 700 !important;
      letter-spacing: 0.06em !important;
      padding: 10px 12px !important;
      background: var(--table-head-bg) !important;
      color: var(--table-head-text) !important;
    }
    body:not(.cover-mode) td {
      font-size: var(--ds-font-base) !important;
      padding: 9px 12px !important;
    }

    /* ── 9. LEGEND / CHART LABELS ─────────────────────────────────── */
    body:not(.cover-mode) .legend {
      gap: 6px 12px !important;
    }
    /* 선·막대 등 그래프 범례 18px 고정(도넛 .donut-wrap 제외 → 토큰 sm) */
    body:not(.cover-mode) .legend-item {
      font-size: 18px !important;
      gap: 5px !important;
    }
    body:not(.cover-mode) .donut-wrap .legend-item {
      font-size: var(--ds-font-sm) !important;
    }
    body:not(.cover-mode) .legend-item .legend-swatch {
      width: 10px !important;
      height: 10px !important;
      border-radius: 3px !important;
    }
    body:not(.cover-mode) .legend-item strong {
      font-size: 18px !important;
    }
    body:not(.cover-mode) .donut-wrap .legend-item strong {
      font-size: var(--ds-font-sm) !important;
    }

    /* ── 10. SUMMARY BOX ──────────────────────────────────────────── */
    body:not(.cover-mode) .summary-box {
      border-radius: var(--ds-radius-md) !important;
      padding: 12px 14px !important;
    }
    body:not(.cover-mode) .summary-box h4 {
      font-size: var(--ds-font-md) !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) .summary-box p {
      font-size: var(--ds-font-sm) !important;
    }

    /* ── 11. DICTIONARY / MAP CARDS ───────────────────────────────── */
    body:not(.cover-mode) .dictionary-item,
    body:not(.cover-mode) .map-card {
      border-radius: var(--ds-radius-lg) !important;
      padding: 16px 18px !important;
      border: 1px solid var(--line-2) !important;
    }
    body:not(.cover-mode) .dictionary-item h4,
    body:not(.cover-mode) .map-card h4 {
      font-size: var(--ds-font-md) !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) .dictionary-item p,
    body:not(.cover-mode) .map-card p {
      font-size: var(--ds-font-sm) !important;
    }

    /* ── 12. HEATMAP ──────────────────────────────────────────────── */
    body:not(.cover-mode) .heat-header {
      font-size: var(--ds-font-xs) !important;
      font-weight: 700 !important;
    }
    body:not(.cover-mode) .heat-cell {
      font-size: var(--ds-font-sm) !important;
      font-weight: 800 !important;
      border-radius: var(--ds-radius-sm) !important;
      min-height: 44px !important;
    }
    body:not(.cover-mode) .heat-cell small {
      font-size: 10px !important;
    }

    /* ── 13. MINI-NOTE / FOOTER ───────────────────────────────────── */
    body:not(.cover-mode) .mini-note {
      font-size: var(--ds-font-sm) !important;
    }
    body:not(.cover-mode) .footer-note {
      font-size: var(--ds-font-sm) !important;
      border-radius: var(--ds-radius-md) !important;
    }

    /* ── 14. BUTTONS / SELECT ─────────────────────────────────────── */
    body:not(.cover-mode) .btn {
      height: 34px !important;
      padding: 0 14px !important;
      font-size: var(--ds-font-sm) !important;
      font-weight: 700 !important;
      border-radius: var(--ds-radius-md) !important;
    }
    body:not(.cover-mode) .btn-mini {
      height: 28px !important;
      padding: 0 10px !important;
      font-size: var(--ds-font-xs) !important;
      font-weight: 700 !important;
    }

    /* ── 15. GRID SPACING ─────────────────────────────────────────── */
    body:not(.cover-mode) .grid {
      gap: 10px !important;
    }
    body:not(.cover-mode) .kpi-grid {
      gap: 10px !important;
    }
    body:not(.cover-mode) .insight-grid {
      gap: 10px !important;
    }
    body:not(.cover-mode) .section {
      margin-top: 10px !important;
    }

    /* ── 16. ISSUE CENTER ─────────────────────────────────────────── */
    body:not(.cover-mode) .issue-card {
      border-radius: var(--ds-radius-md) !important;
      padding: 12px 14px !important;
    }
    body:not(.cover-mode) .issue-card-severity {
      font-size: var(--ds-font-xs) !important;
    }
    body:not(.cover-mode) .issue-card-title {
      font-size: var(--ds-font-md) !important;
    }
    body:not(.cover-mode) .issue-card-summary {
      font-size: var(--ds-font-sm) !important;
    }
    body:not(.cover-mode) .issue-center-drilldown {
      border-radius: var(--ds-radius-lg) !important;
    }

    /* ══════════════════════════════════════════════════════
       WHITE THEME — 클린 & 모던
       ══════════════════════════════════════════════════════ */
    /* White: 패널 미세 향상 */
    body[data-theme="white"]:not(.cover-mode) .panel,
    body:not([data-theme]):not(.cover-mode) .panel,
    body[data-theme="default"]:not(.cover-mode) .panel {
      background: #ffffff !important;
      border: 1px solid rgba(148,163,184,0.22) !important;
      box-shadow: 0 2px 16px rgba(15,23,42,0.06), 0 1px 4px rgba(15,23,42,0.04) !important;
    }
    body[data-theme="white"]:not(.cover-mode) .panel:hover,
    body:not([data-theme]):not(.cover-mode) .panel:hover,
    body[data-theme="default"]:not(.cover-mode) .panel:hover {
      box-shadow: 0 8px 32px rgba(15,23,42,0.10), 0 2px 8px rgba(15,23,42,0.06) !important;
      border-color: rgba(37,99,235,0.18) !important;
    }

    /* White: KPI */
    body[data-theme="white"]:not(.cover-mode) .kpi,
    body:not([data-theme]):not(.cover-mode) .kpi,
    body[data-theme="default"]:not(.cover-mode) .kpi {
      background: #ffffff !important;
      border: 1px solid rgba(148,163,184,0.20) !important;
      box-shadow: 0 2px 12px rgba(15,23,42,0.05) !important;
    }

    /* White: 탭 바 */
    body[data-theme="white"]:not(.cover-mode) .toolbar.nav-combined,
    body:not([data-theme]):not(.cover-mode) .toolbar.nav-combined,
    body[data-theme="default"]:not(.cover-mode) .toolbar.nav-combined {
      background: rgba(248,250,252,0.98) !important;
      border-bottom: 1px solid rgba(148,163,184,0.18) !important;
    }

    /* White: 필터 스트립 */
    body[data-theme="white"]:not(.cover-mode) .filter-strip,
    body:not([data-theme]):not(.cover-mode) .filter-strip,
    body[data-theme="default"]:not(.cover-mode) .filter-strip {
      background: rgba(241,245,249,0.92) !important;
      border-top: 1px solid rgba(148,163,184,0.14) !important;
      border-bottom: 1px solid rgba(148,163,184,0.14) !important;
    }

    /* White: 섹션 타이틀 */
    body[data-theme="white"]:not(.cover-mode) .section-title,
    body:not([data-theme]):not(.cover-mode) .section-title,
    body[data-theme="default"]:not(.cover-mode) .section-title {
      border-bottom: 1px solid rgba(148,163,184,0.18) !important;
    }
    body[data-theme="white"]:not(.cover-mode) .section-title h2,
    body:not([data-theme]):not(.cover-mode) .section-title h2,
    body[data-theme="default"]:not(.cover-mode) .section-title h2 {
      color: #0f172a !important;
    }
    body[data-theme="white"]:not(.cover-mode) #view-org-chart .oc-title,
    body:not([data-theme]):not(.cover-mode) #view-org-chart .oc-title,
    body[data-theme="default"]:not(.cover-mode) #view-org-chart .oc-title {
      color: #0f172a !important;
    }
    body[data-theme="white"]:not(.cover-mode) #view-org-chart .oc-stat-val,
    body:not([data-theme]):not(.cover-mode) #view-org-chart .oc-stat-val,
    body[data-theme="default"]:not(.cover-mode) #view-org-chart .oc-stat-val {
      color: #0f172a !important;
    }
    body[data-theme="white"]:not(.cover-mode) #view-org-chart .oc-stat-lbl,
    body:not([data-theme]):not(.cover-mode) #view-org-chart .oc-stat-lbl,
    body[data-theme="default"]:not(.cover-mode) #view-org-chart .oc-stat-lbl {
      color: #475569 !important;
    }

    /* White: 액티브 탭 */
    body[data-theme="white"]:not(.cover-mode) .tab.active,
    body:not([data-theme]):not(.cover-mode) .tab.active,
    body[data-theme="default"]:not(.cover-mode) .tab.active {
      background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
      color: #fff !important;
      border-color: #2563eb !important;
      box-shadow: 0 3px 14px rgba(37,99,235,0.28) !important;
    }

    /* White: 배경 미세 텍스처 */
    body[data-theme="white"]::before,
    body:not([data-theme])::before,
    body[data-theme="default"]::before {
      opacity: 0.35 !important;
    }

    /* ══════════════════════════════════════════════════════
       DARK THEME — 딥 다크 & 인디고 포인트
       ══════════════════════════════════════════════════════ */
    /* html 접두: v4 chrome(html body …)보다 우선 — 글로벌·메인요약·뷰 로컬 헤더 띠 일치 */
    html body[data-theme="dark"]:not(.cover-mode) .page-header,
    html body[data-theme="dark"]:not(.cover-mode) #view-main-summary .main-summary-local-header,
    html body[data-theme="dark"]:not(.cover-mode) .section-title.page-local-header {
      background: linear-gradient(180deg, #020617 0%, #0f172a 100%) !important;
      border-bottom: 1px solid rgba(129, 140, 248, 0.15) !important;
      box-shadow: 0 2px 20px rgba(0, 0, 0, 0.4) !important;
    }

    /* Dark: 패널 */
    body[data-theme="dark"]:not(.cover-mode) .panel {
      background: rgba(22,33,55,0.96) !important;
      border: 1px solid rgba(148,163,184,0.12) !important;
      box-shadow: 0 4px 24px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.20) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .panel:hover {
      border-color: rgba(129,140,248,0.22) !important;
      box-shadow: 0 8px 36px rgba(0,0,0,0.42), 0 0 0 1px rgba(129,140,248,0.12) !important;
    }

    /* Dark: KPI */
    body[data-theme="dark"]:not(.cover-mode) .kpi {
      background: rgba(22,33,55,0.96) !important;
      border: 1px solid rgba(148,163,184,0.11) !important;
      box-shadow: 0 4px 20px rgba(0,0,0,0.30) !important;
    }

    /* Dark: 탭바 */
    body[data-theme="dark"]:not(.cover-mode) .toolbar.nav-combined {
      background: rgba(11,17,32,0.96) !important;
      border-bottom: 1px solid rgba(148,163,184,0.10) !important;
    }

    /* Dark: 필터 스트립 */
    body[data-theme="dark"]:not(.cover-mode) .filter-strip {
      background: rgba(11,17,32,0.88) !important;
      border-top: 1px solid rgba(148,163,184,0.08) !important;
      border-bottom: 1px solid rgba(148,163,184,0.08) !important;
    }

    /* Dark: 섹션 타이틀 */
    body[data-theme="dark"]:not(.cover-mode) .section-title {
      border-bottom: 1px solid rgba(148,163,184,0.10) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .section-title h2 {
      color: #f1f5f9 !important;
    }

    /* Dark: 패널 헤드 구분선 */
    body[data-theme="dark"]:not(.cover-mode) .panel-head {
      border-bottom: 1px solid rgba(148,163,184,0.10) !important;
    }

    /* Dark: 액티브 탭 */
    body[data-theme="dark"]:not(.cover-mode) .tab.active {
      background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%) !important;
      color: #fff !important;
      border-color: #4f46e5 !important;
      box-shadow: 0 3px 14px rgba(79,70,229,0.36) !important;
    }

    /* Dark: 비활성 탭 */
    body[data-theme="dark"]:not(.cover-mode) .tab:not(.active) {
      background: rgba(22,33,55,0.80) !important;
      border-color: rgba(148,163,184,0.14) !important;
      color: #94a3b8 !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .tab:not(.active):hover {
      background: rgba(99,102,241,0.15) !important;
      border-color: rgba(129,140,248,0.25) !important;
      color: #e2e8f0 !important;
    }

    /* Dark: 테이블 헤더 */
    body[data-theme="dark"]:not(.cover-mode) th {
      background: rgba(30,41,59,0.80) !important;
      color: #cbd5e1 !important;
    }
    body[data-theme="dark"]:not(.cover-mode) td {
      color: #e2e8f0 !important;
      border-bottom-color: rgba(148,163,184,0.08) !important;
    }

    /* Dark: 인사이트 */
    body[data-theme="dark"]:not(.cover-mode) .insight {
      background: rgba(22,33,55,0.96) !important;
      border: 1px solid rgba(148,163,184,0.10) !important;
    }

    /* Dark: metric pill */
    body[data-theme="dark"]:not(.cover-mode) .metric-pill {
      background: rgba(22,33,55,0.96) !important;
      border: 1px solid rgba(148,163,184,0.10) !important;
    }

    /* Dark: 스크롤바 없는 배경 */
    body[data-theme="dark"] {
      background: #0b1120 !important;
    }
    body[data-theme="dark"]::before {
      opacity: 0.40 !important;
    }

    /* Dark: 패널 상단 줄 */
    body[data-theme="dark"]:not(.cover-mode) .panel::after {
      background: linear-gradient(90deg, #4f46e5 0%, #818cf8 100%) !important;
      opacity: 0.88 !important;
    }

    /* Dark: 섹션 킥커 */
    body[data-theme="dark"]:not(.cover-mode) .section-kicker {
      color: #818cf8 !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .section-kicker::before {
      background: linear-gradient(90deg, #4f46e5 0%, #818cf8 100%) !important;
    }

    /* Dark: 히트맵 헤더 */
    body[data-theme="dark"]:not(.cover-mode) .heat-header {
      background: rgba(30,41,59,0.80) !important;
      color: #cbd5e1 !important;
    }

    /* Dark: 서머리 오버뷰 카드 */
    body[data-theme="dark"]:not(.cover-mode) .summary-overview-card {
      background: rgba(22,33,55,0.96) !important;
      border: 1px solid rgba(148,163,184,0.12) !important;
    }

    /* Dark: 이슈 카드 */
    body[data-theme="dark"]:not(.cover-mode) .issue-card {
      background: rgba(22,33,55,0.96) !important;
      border-color: rgba(148,163,184,0.12) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .issue-card.selected {
      border-color: #818cf8 !important;
      box-shadow: 0 0 0 2px rgba(129,140,248,0.20) !important;
    }

    /* ══════════════════════════════════════════════════════
       WARM THEME — 앰버/어스 톤, 따뜻한 크림 배경
       ══════════════════════════════════════════════════════ */

    /* Warm: 패널 */
    body[data-theme="warm"]:not(.cover-mode) .panel {
      background: #fffcf8 !important;
      border: 1px solid rgba(180,120,60,0.16) !important;
      box-shadow: 0 2px 16px rgba(120,80,30,0.07), 0 1px 4px rgba(120,80,30,0.04) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .panel:hover {
      border-color: rgba(180,83,9,0.20) !important;
      box-shadow: 0 8px 28px rgba(120,80,30,0.10) !important;
    }

    /* Warm: 패널 상단 줄 */
    body[data-theme="warm"]:not(.cover-mode) .panel::after {
      background: linear-gradient(90deg, #92400e 0%, #d97706 100%) !important;
    }

    /* Warm: KPI */
    body[data-theme="warm"]:not(.cover-mode) .kpi {
      background: #fffcf8 !important;
      border: 1px solid rgba(180,120,60,0.14) !important;
      box-shadow: 0 2px 12px rgba(120,80,30,0.06) !important;
    }

    /* Warm: 탭바 */
    body[data-theme="warm"]:not(.cover-mode) .toolbar.nav-combined {
      background: rgba(253,248,240,0.98) !important;
      border-bottom: 1px solid rgba(180,120,60,0.14) !important;
    }

    /* Warm: 필터 스트립 */
    body[data-theme="warm"]:not(.cover-mode) .filter-strip {
      background: rgba(250,244,234,0.92) !important;
      border-top: 1px solid rgba(180,120,60,0.12) !important;
      border-bottom: 1px solid rgba(180,120,60,0.12) !important;
    }

    /* Warm: 섹션 타이틀 */
    body[data-theme="warm"]:not(.cover-mode) .section-title {
      border-bottom: 1px solid rgba(180,120,60,0.14) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .section-title h2 {
      color: #1c140d !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .section-kicker {
      color: #b45309 !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .section-kicker::before {
      background: linear-gradient(90deg, #92400e 0%, #d97706 100%) !important;
    }

    /* Warm: 패널 헤드 */
    body[data-theme="warm"]:not(.cover-mode) .panel-head {
      border-bottom: 1px solid rgba(180,120,60,0.13) !important;
    }

    /* Warm: 액티브 탭 */
    body[data-theme="warm"]:not(.cover-mode) .tab.active {
      background: linear-gradient(135deg, #92400e 0%, #d97706 100%) !important;
      color: #fff !important;
      border-color: #92400e !important;
      box-shadow: 0 3px 14px rgba(180,83,9,0.28) !important;
    }

    /* Warm: 비활성 탭 */
    body[data-theme="warm"]:not(.cover-mode) .tab:not(.active) {
      background: rgba(255,252,248,0.85) !important;
      border-color: rgba(180,120,60,0.16) !important;
      color: #7c6a58 !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .tab:not(.active):hover {
      background: rgba(254,243,199,0.60) !important;
      border-color: rgba(180,83,9,0.22) !important;
      color: #292019 !important;
    }

    /* Warm: 테이블 */
    body[data-theme="warm"]:not(.cover-mode) th {
      background: #fdf8f0 !important;
      color: #5e4d3c !important;
    }
    body[data-theme="warm"]:not(.cover-mode) td {
      color: #292019 !important;
      border-bottom-color: rgba(120,80,30,0.08) !important;
    }

    /* Warm: 인사이트 */
    body[data-theme="warm"]:not(.cover-mode) .insight {
      background: #fffcf8 !important;
      border: 1px solid rgba(180,120,60,0.13) !important;
    }

    /* Warm: metric pill */
    body[data-theme="warm"]:not(.cover-mode) .metric-pill {
      background: #fffcf8 !important;
      border: 1px solid rgba(180,120,60,0.13) !important;
    }

    /* Warm: 히트맵 헤더 */
    body[data-theme="warm"]:not(.cover-mode) .heat-header {
      background: #fdf8f0 !important;
      color: #5e4d3c !important;
    }

    /* Warm: 서머리 오버뷰 카드 */
    body[data-theme="warm"]:not(.cover-mode) .summary-overview-card {
      background: #fffcf8 !important;
      border: 1px solid rgba(180,120,60,0.14) !important;
    }

    /* Warm: 이슈 카드 */
    body[data-theme="warm"]:not(.cover-mode) .issue-card {
      background: #fffcf8 !important;
      border-color: rgba(180,120,60,0.14) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .issue-card.selected {
      border-color: #b45309 !important;
      box-shadow: 0 0 0 2px rgba(180,83,9,0.18) !important;
    }

    /* Warm: 배경 */
    body[data-theme="warm"]::before {
      opacity: 0.30 !important;
    }

    /* Warm: select/btn */
    body[data-theme="warm"]:not(.cover-mode) select {
      background: #fffcf8 !important;
      border-color: rgba(180,120,60,0.18) !important;
      color: #292019 !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .btn {
      background: #fffcf8 !important;
      border-color: rgba(180,120,60,0.18) !important;
      color: #292019 !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .btn.primary {
      background: linear-gradient(135deg, #92400e 0%, #d97706 100%) !important;
      border-color: #92400e !important;
      color: #fff !important;
    }

    /* ══════════════════════════════════════════════════════
       INTERACTIVE ENHANCEMENTS (공통)
       ══════════════════════════════════════════════════════ */
    /* 클릭 가능한 행 호버 개선 */
    body:not(.cover-mode) .clickable-row:hover td {
      background: color-mix(in srgb, var(--primary) 8%, transparent) !important;
    }

    /* 스크롤 영역 내 오버레이 그라데이션 */
    body:not(.cover-mode) .record-table {
      border-radius: var(--ds-radius-md) !important;
    }

    /* 인터랙티브 카드 호버 강화 */
    body:not(.cover-mode) .interactive-card:hover {
      transform: translateY(-2px) !important;
      box-shadow: var(--accent-shadow) !important;
    }

    /* 탭 호버 */
    body:not(.cover-mode) .tab:hover:not(.active) {
      transform: translateY(-1px) !important;
    }

    /* ── 오버뷰 카드 텍스트 색상 강제 (warm 다크 테마 모두) ── */
    body[data-theme="warm"]:not(.cover-mode) .summary-overview-card .card-row-label {
      color: rgba(41,32,25,0.75) !important;
    }

    /* ── Q&A 영역 타이포 스케일 (메인 본문)
       페이지 타이틀: 2xl | 패널 타이틀: lg | 본문: md | 보조·표헤더·칩: sm | KPI 강조: xl ── */
    #view-qa {
      /* Q&A: 타이틀 제외 모든 텍스트를 10px로 통일 */
      --ds-font-xs: 10px;
      --ds-font-sm: 10px;
      --ds-font-base: 10px;
      --ds-font-md: 10px;
      --ds-font-lg: 10px;
      --ds-font-xl: 10px;
      font-size: 10px;
      line-height: 1.5;
    }

    /* Q&A 타이틀(헤더/패널명) 제외: 더 큰 폰트 유지 */
    #view-qa .section-title .section-kicker,
    #view-qa .section-title h2 {
      font-size: var(--ds-font-2xl) !important;
      line-height: 1.25 !important;
    }
    #view-qa .qa-questions-head strong,
    #view-qa .qa-options .qa-options-one-line .qa-options-title,
    #view-qa .qa-summary-head .section-kicker,
    #view-qa .qa-cause-panel-head,
    #view-qa .qa-admin-log-head strong {
      font-size: 15px !important;
    }
    #view-qa .qa-summary-head h3 {
      font-size: 17px !important;
    }

    /* Q&A 내부 차트 텍스트도 타이틀 제외 대상으로 10px 통일 */
    #view-qa svg .chart-datalabel,
    #view-qa svg .axis text,
    #view-qa svg .label {
      font-size: 10px !important;
    }

    /* Atlas에서 qa-title-actions를 우측 정렬하는 것을 Q&A에 한해 좌측 정렬로 복원 */
    body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #view-qa .qa-title-actions {
      justify-content: flex-start !important;
    }

    /* 테이블 텍스트도 타이틀 제외 대상: 10px 통일 */
    #view-qa table thead th { font-size: 10px !important; }
    #view-qa table tbody td { font-size: 10px !important; }
    body:not(.cover-mode) .qa-nlp-input {
      font-size: var(--ds-font-md) !important;
    }
    body:not(.cover-mode) #view-qa .section-title h2,
    body:not(.cover-mode) #view-qa .section-title .section-kicker {
      font-size: var(--ds-font-2xl) !important;
      line-height: 1.25 !important;
    }
    body:not(.cover-mode) #view-qa .qa-title-desc,
    body:not(.cover-mode) #view-qa .qa-title-actions .btn {
      font-size: var(--ds-font-md) !important;
    }
    /* 추천 질의(칩) / 필터 적용 힌트 / 차트 타입 선택 버튼(막대·선·도넛) */
    body:not(.cover-mode) #view-qa .qa-nlp-hints-label {
      font-size: var(--ds-font-xs) !important;
    }
    body:not(.cover-mode) #view-qa .qa-nlp-hint {
      font-size: var(--ds-font-xs) !important;
      padding: 2px 8px !important;
      line-height: 1.15 !important;
    }
    #view-qa .qa-options .qa-options-one-line .qa-options-filter-hint {
      font-size: var(--ds-font-xs) !important;
      padding: 4px 8px !important;
      line-height: 1.15 !important;
    }
    #view-qa .qa-options .qa-options-one-line .qa-options-title {
      font-size: var(--ds-font-sm) !important;
    }
    #view-qa .qa-option label {
      font-size: var(--ds-font-xs) !important;
      line-height: 1.1 !important;
    }
    #view-qa .qa-option select,
    #view-qa .qa-option input {
      font-size: var(--ds-font-xs) !important;
      padding: 2px 6px !important;
      line-height: 1.15 !important;
    }
    #view-qa .chart-viz-switcher .viz-switcher-btn {
      font-size: 18px !important;
      padding: 5px 10px !important;
      line-height: 1.15 !important;
      letter-spacing: 0.02em !important;
    }
    body:not(.cover-mode) #view-qa .qa-output-viz .legend-item {
      font-size: 18px !important;
      font-weight: 700 !important;
      line-height: 1.25 !important;
    }
    body:not(.cover-mode) #view-qa .chart-viz-switcher .viz-switcher-btn,
    body:not(.cover-mode) #view-qa .line-chart-toolbar .gran-btn {
      font-size: 18px !important;
    }
    body:not(.cover-mode) #view-qa table thead th {
      font-size: var(--ds-font-sm) !important;
    }
    body:not(.cover-mode) #view-qa table tbody td {
      font-size: var(--ds-font-md) !important;
    }
    body:not(.cover-mode) #view-qa .erp-ai-panel__title {
      font-size: var(--ds-font-lg) !important;
      line-height: 1.4 !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) #view-qa .erp-ai-panel__body {
      font-size: var(--ds-font-md) !important;
      line-height: 1.55 !important;
    }
    body:not(.cover-mode) #view-qa .qa-admin-log-head strong {
      font-size: var(--ds-font-lg) !important;
    }
    body:not(.cover-mode) #view-qa .qa-admin-log-head .mini-note,
    body:not(.cover-mode) #view-qa #qaAdminLogEmpty {
      font-size: var(--ds-font-sm) !important;
    }
    body:not(.cover-mode) #view-qa .qa-admin-log-table {
      font-size: var(--ds-font-md) !important;
    }
    body:not(.cover-mode) #view-qa .qa-summary-head h3 {
      font-size: var(--ds-font-lg) !important;
    }
    body:not(.cover-mode) #view-qa .qa-summary-value {
      font-size: var(--ds-font-xl) !important;
    }
    body:not(.cover-mode) #view-qa .qa-cause-panel-head,
    body:not(.cover-mode) #view-qa .qa-output-cause > .qa-cause-panel-head {
      font-size: var(--ds-font-lg) !important;
    }

    /* Atlas(erp-atlas) 오버라이드: 옵션/추천질의/원인힌트 텍스트 축소 */
    body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #view-qa #qaOptionsPanel .qa-options-filter-hint {
      font-size: var(--ds-font-xs) !important;
      padding: 2px 8px !important;
      min-height: 0 !important;
      line-height: 1.1 !important;
      font-weight: 800 !important;
    }
    body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #view-qa #qaNlpBar .qa-nlp-hints-label,
    body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #view-qa #qaNlpBar .qa-nlp-hint {
      font-size: var(--ds-font-xs) !important;
    }
    body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #view-qa #qaNlpBar .qa-nlp-hint {
      padding: 2px 8px !important;
      line-height: 1.1 !important;
    }
    body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #view-qa #qaCauseChartHint.qa-cause-chart-hint {
      font-size: var(--ds-font-sm) !important;
      line-height: 1.35 !important;
      padding: 6px 8px !important;
    }
    body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #view-qa #qaCauseChartHint.qa-cause-chart-hint strong,
    body.erp-atlas:not(.cover-mode):not(.main-summary-mode) #view-qa #qaCauseChartHint.qa-cause-chart-hint .qa-cause-inline {
      font-size: var(--ds-font-sm) !important;
      line-height: 1.35 !important;
    }

    /* Q&A: 카드 밖으로 나가는 SVG/축 오버플로우 차단 */
    body:not(.cover-mode) #view-qa #qaChart {
      overflow: hidden;
    }
    body:not(.cover-mode) #view-qa #qaChart .line-chart-plot-area {
      overflow: hidden !important;
    }
    body:not(.cover-mode) #view-qa #qaChart svg {
      overflow: hidden !important;
    }
    /* Q&A 라인차트 카드 내부 강제 min-height 제거(카드 밖 튐 방지) */
    #view-qa #qaChart .chart-viz-body > div {
      min-height: 0 !important;
    }

    /* 추천질의 행 상/하 여백 동일화 */
    #view-qa #qaNlpBar {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }

    /* Q&A: 커버모드 여부와 무관하게 강제 타이포 축소(요청 요소만) */
    #view-qa #qaNlpBar .qa-nlp-hints-label {
      /* 추천질의 폰트 1px 올림 */
      font-size: 11px !important;
      line-height: 1.1 !important;
    }
    #view-qa #qaNlpBar .qa-nlp-hint {
      /* 추천질의 폰트 1px 올림 */
      font-size: 11px !important;
      padding: 2px 8px !important;
      line-height: 1.1 !important;
      font-weight: 700 !important;
    }
    #view-qa #qaOptionsPanel .qa-options-title {
      font-size: 16px !important;
      line-height: 1.15 !important;
      font-weight: 900 !important;
    }
    #view-qa #qaOptionsPanel .qa-options-filter-hint {
      font-size: 16px !important;
      padding: 2px 8px !important;
      min-height: 0 !important;
      line-height: 1.1 !important;
      font-weight: 800 !important;
    }
    #view-qa #qaOptionsPanel .qa-option label {
      font-size: 16px !important;
      line-height: 1.2 !important;
    }
    #view-qa #qaOptionsPanel .qa-option select,
    #view-qa #qaOptionsPanel .qa-option input {
      font-size: 16px !important;
      padding: 2px 6px !important;
      line-height: 1.15 !important;
    }
    #view-qa #qaChart .chart-viz-switcher .viz-switcher-btn {
      font-size: 18px !important;
      padding: 5px 10px !important;
      line-height: 1.15 !important;
    }
    #view-qa #qaCauseChartHint {
      font-size: 16px !important;
      line-height: 1.35 !important;
    }

    /* 요청 반영: 영역별 텍스트 증분
       - 좌측 qa-questions-card: +1
       - 중앙 qa-main-stack: +2
       - 우측 qa-output-cause: +4 */
    #view-qa .qa-questions-card {
      font-size: 13px !important;
    }
    #view-qa .qa-questions-card .qa-question-btn {
      font-size: 13px !important;
    }
    #view-qa .qa-questions-card .qa-question-btn .mini-note,
    #view-qa .qa-questions-card .qa-questions-head .mini-note {
      font-size: 12px !important;
    }

    #view-qa .qa-main-stack,
    #view-qa #qaOptionsPanel,
    #view-qa #qaChart {
      font-size: 16px !important;
    }
    #view-qa #qaOptionsPanel .qa-options-title,
    #view-qa #qaOptionsPanel .qa-options-filter-hint,
    #view-qa #qaOptionsPanel .qa-option label,
    #view-qa #qaOptionsPanel .qa-option select,
    #view-qa #qaOptionsPanel .qa-option input {
      font-size: 16px !important;
    }

    /* qaChart: SVG 텍스트(축/라벨/데이터레이블)도 16px로 */
    #view-qa #qaChart svg .chart-datalabel,
    #view-qa #qaChart svg .axis text,
    #view-qa #qaChart svg .label {
      font-size: 18px !important;
    }

    /* aside(qa-output-cause): 패널 헤더/설명/차트힌트/표까지 20px(+4) */
    #view-qa .qa-output-cause {
      font-size: 20px !important;
    }
    #view-qa .qa-output-cause > .qa-cause-panel-head,
    #view-qa .qa-cause-explanation .qa-cause-p,
    #view-qa .qa-cause-explanation .qa-cause-inline,
    #view-qa .qa-cause-chart-hint {
      font-size: 20px !important;
    }
    #view-qa .qa-output-cause .ranking-table th,
    #view-qa .qa-output-cause .ranking-table td {
      font-size: 20px !important;
    }

    /* aside 강조(qa-keyword): 전부 파란색 고정 해제 -> 색상 분산 */
    #view-qa .qa-output-cause .qa-keyword {
      font-weight: 900 !important;
    }
    #view-qa .qa-output-cause .qa-keyword:nth-of-type(4n + 1) { color: var(--primary) !important; }
    #view-qa .qa-output-cause .qa-keyword:nth-of-type(4n + 2) { color: var(--ok) !important; }
    #view-qa .qa-output-cause .qa-keyword:nth-of-type(4n + 3) { color: var(--warn) !important; }
    #view-qa .qa-output-cause .qa-keyword:nth-of-type(4n + 4) { color: var(--bad) !important; }

    /* 요청 반영: 옵션/요약/차트 텍스트는 SVG/컨텐츠 전반 16px 확정 */
    #view-qa #qaOptionsPanel,
    #view-qa #qaOptionsPanel *,
    #view-qa #qaSummary,
    #view-qa #qaSummary *,
    #view-qa #qaChart,
    #view-qa #qaChart * {
      font-size: 16px !important;
    }
    /* 차트: SVG 텍스트 요소는 클래스 매칭이 안 될 수 있어 text 자체에 강제 */
    #view-qa #qaChart svg text {
      font-size: 16px !important;
    }

    /* 요청 반영:
       - 강조(키워드/원인 인라인)만 크게 보이고
       - aside 전체 텍스트는 강조보다 1단계 작게 */
    #view-qa aside.qa-output-cause {
      font-size: 19px !important;
    }
    #view-qa aside.qa-output-cause * {
      font-size: inherit !important;
    }
    #view-qa aside.qa-output-cause .qa-cause-inline,
    #view-qa aside.qa-output-cause .qa-keyword {
      font-size: 20px !important;
    }
    #view-qa aside.qa-output-cause > .qa-cause-panel-head {
      font-size: 19px !important;
    }
    #view-qa aside.qa-output-cause .qa-cause-explanation .qa-cause-p {
      font-size: 19px !important;
    }
    #view-qa aside.qa-output-cause .qa-cause-chart-hint {
      font-size: 19px !important;
    }
    #view-qa aside.qa-output-cause .ranking-table th,
    #view-qa aside.qa-output-cause .ranking-table td {
      font-size: 19px !important;
    }

    /* ── 조직도 노드 폰트 ── */
    body:not(.cover-mode) .oc-node-name {
      font-size: var(--ds-font-sm) !important;
    }
    body:not(.cover-mode) .oc-node-role {
      font-size: var(--ds-font-xs) !important;
    }

    /* ── 차트 range/toolbar 버튼 ── */
    body:not(.cover-mode) .line-chart-toolbar .btn-mini {
      font-size: var(--ds-font-xs) !important;
    }

    /* ── badge ── */
    body:not(.cover-mode) .badge {
      font-size: var(--ds-font-xs) !important;
      padding: 5px 10px !important;
    }

    /* ── 대시보드 배경 개선 — white ── */
    body[data-theme="white"],
    body:not([data-theme]),
    body[data-theme="default"] {
      background: #eef2f8 !important;
    }

    /* ── 도넛 내부 텍스트 ── */
    body:not(.cover-mode) .donut::after {
      font-size: var(--ds-font-sm) !important;
      font-weight: 800 !important;
    }

    /* ── 조직 four-rows: 기존 gap:0 레이아웃 유지, 패널은 border 정리만 ── */
    body:not(.cover-mode) #view-organization .org-four-rows .panel {
      border-radius: var(--ds-radius-md) !important;
    }

    /* ── 이슈 드릴다운 좌측 보더 ── */
    body:not(.cover-mode) .issue-drilldown-explanation {
      border-left: 3px solid var(--primary) !important;
      border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0 !important;
    }

    /* ── 필터 select 포커스 링 ── */
    body:not(.cover-mode) select:focus-visible {
      outline: 2px solid var(--primary) !important;
      outline-offset: 1px !important;
    }

    /* ── 페이지 헤더 로고 투명도 균등화 ── */
    body:not(.cover-mode) .page-header-logo {
      opacity: 0.92 !important;
    }

    /* ── chart-box 배경 통일 ── */
    body:not(.cover-mode) .chart-box {
      background: transparent !important;
    }

    /* ── 데이터 레이블 폰트 (SVG) ── */
    body:not(.cover-mode) svg .chart-datalabel {
      font-size: 11px !important;
    }
    body:not(.cover-mode) svg .axis text {
      font-size: 11px !important;
    }
    body:not(.cover-mode) svg .label {
      font-size: 11px !important;
    }

    /* ── 최소 간격 보정 (main 컨테이너) ── */
    body:not(.cover-mode) main {
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

  /* ═══════════════════════════════════════════════════════════════
     PHASE 2 — 세밀한 컴포넌트별 정제 + 테마별 완성도 보완
     ═══════════════════════════════════════════════════════════════ */

    /* ────────────────────────────────────────────────────────────────
       § A. 필터 스트립 인라인 select — 기존 38px를 일관성 있게 정렬
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .inline-filter-box {
      gap: 6px !important;
    }
    body:not(.cover-mode) .inline-filter-box label {
      gap: 3px !important;
      font-size: 10px !important;
      font-weight: 800 !important;
      letter-spacing: 0.09em !important;
      color: var(--muted) !important;
    }
    body:not(.cover-mode) .inline-filter-box select {
      height: 34px !important;
      padding: 0 10px !important;
      border-radius: 10px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      border: 1px solid var(--line) !important;
      background: var(--panel) !important;
      color: var(--text) !important;
      box-shadow: 0 1px 4px rgba(0,0,0,0.05) !important;
    }
    body:not(.cover-mode) .inline-filter-box select:focus-visible {
      outline: 2px solid var(--primary) !important;
      outline-offset: 1px !important;
    }
    body:not(.cover-mode) .theme-picker.compact,
    body:not(.cover-mode) .theme-picker.compact select,
    body:not(.cover-mode) .filter-utility-box .btn {
      height: 34px !important;
      border-radius: 10px !important;
      font-size: 12px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § B. 차트 박스 — 배경 제거하고 패널 내 완전 투명
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .chart-box {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 4px 0 !important;
      border-radius: 0 !important;
    }
    /* compact chart-box는 여전히 padding 유지 */
    body:not(.cover-mode) .chart-box.compact {
      padding: 2px 0 !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § C. 차트 내부 — 범례, 툴바, 버튼 폰트 통일
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .summary-goal-viz-toggle .btn-mini {
      font-size: 15px !important;
      font-weight: 700 !important;
      height: auto !important;
      min-height: 38px !important;
      padding: 0 14px !important;
      width: auto !important;
      min-width: 52px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § D. 패널 아이콘 박스 크기 통일
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .panel-icon {
      width: 30px !important;
      height: 30px !important;
      border-radius: 9px !important;
      font-size: 14px !important;
      border: 1px solid var(--line-2) !important;
      box-shadow: none !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § E. compact-field (조인트 라벨+셀렉트)
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .compact-field {
      font-size: 11px !important;
      letter-spacing: 0.06em !important;
      gap: 6px !important;
      color: var(--muted-2) !important;
    }
    body:not(.cover-mode) .compact-field select {
      height: 30px !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      border-radius: 8px !important;
      min-width: 100px !important;
    }
    /* ────────────────────────────────────────────────────────────────
       § F. 미매출 접수 현황 — 타이틀 행 필터(전체·처리상태별 건수)
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .receipt-status-filter-btn {
      min-height: 30px !important;
      padding: 6px 12px !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      line-height: 1.15 !important;
      border-radius: 999px !important;
    }
    body:not(.cover-mode) .receipt-summary-inline {
      font-size: 14px !important;
      font-weight: 700 !important;
    }
    body:not(.cover-mode) #view-summary .receipt-donut-meta {
      font-size: 16px !important;
      font-weight: 800 !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § G. 조직도(OC) 드로어 — 폰트 계층 정렬
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) #view-org-chart .oc-drawer-heading {
      font-size: 15px !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) #view-org-chart .oc-drawer-label {
      font-size: 10px !important;
      letter-spacing: 0.12em !important;
    }
    body:not(.cover-mode) #view-org-chart .oc-drawer-sub {
      font-size: 11px !important;
    }
    body:not(.cover-mode) #view-org-chart .oc-notes-title {
      font-size: 10px !important;
      letter-spacing: 0.08em !important;
    }
    body:not(.cover-mode) #view-org-chart .oc-notes-box {
      font-size: 12px !important;
    }
    body:not(.cover-mode) #view-org-chart .oc-members-table {
      font-size: 12px !important;
    }
    body:not(.cover-mode) #view-org-chart .oc-members-table th {
      font-size: 10px !important;
      padding: 7px 9px !important;
    }
    body:not(.cover-mode) #view-org-chart .oc-members-table td {
      font-size: 12px !important;
      padding: 6px 9px !important;
    }
    body:not(.cover-mode) #view-org-chart .oc-rank-pill {
      font-size: 12px !important;
      padding: 2px 7px !important;
      letter-spacing: -0.04em !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § H. 이슈 센터 드릴다운
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .issue-drilldown-content h4 {
      font-size: 14px !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) .issue-drilldown-explanation .issue-cause-p {
      font-size: 12px !important;
      line-height: 1.55 !important;
    }
    body:not(.cover-mode) .issue-drilldown-content .ranking-table {
      font-size: 12px !important;
    }
    body:not(.cover-mode) .issue-drilldown-content .ranking-table th,
    body:not(.cover-mode) .issue-drilldown-content .ranking-table td {
      padding: 8px 10px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § I. 서머리 뷰 특화 — 패널 내 헤더, 카드 텍스트
       ──────────────────────────────────────────────────────────────── */
    /* summary panel-head — Phase 5 21px 통일 */
    body:not(.cover-mode) #view-summary .insight h4 {
      font-size: 13px !important;
    }
    body:not(.cover-mode) #view-summary .insight p,
    body:not(.cover-mode) #view-summary .insight ul {
      font-size: 12px !important;
    }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-label {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 8px !important;
      margin-bottom: 8px !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      color: var(--text) !important;
    }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-label__emoji {
      font-size: 24px !important;
      line-height: 1 !important;
      flex-shrink: 0 !important;
    }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-label__text {
      font-size: 18px !important;
      font-weight: 800 !important;
      letter-spacing: -0.02em !important;
      line-height: 1.25 !important;
      color: var(--text) !important;
    }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-value {
      font-size: 18px !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-row-label {
      font-size: 12px !important;
    }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-row-value {
      font-size: 13px !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-sub {
      font-size: 11px !important;
    }
    body:not(.cover-mode) #view-summary .summary-box h4 {
      font-size: 13px !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) #view-summary .summary-box p {
      font-size: 12px !important;
    }
    body:not(.cover-mode) #view-summary .metric-pill strong {
      font-size: 20px !important;
    }
    body:not(.cover-mode) #view-summary .metric-pill span {
      font-size: 10px !important;
    }
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .panel-head h3 {
      font-size: 15px !important;
    }
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .panel-head .meta {
      font-size: 18px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § J. 조직/고객/제품 뷰 패널 헤더
       ──────────────────────────────────────────────────────────────── */
    /* 뷰별 panel-head 개별 오버라이드 제거 — Phase 5 통일 규칙 사용 */
    /* 조직 비교 테이블 */
    body:not(.cover-mode) #view-organization .org-four-rows .record-table {
      font-size: 12px !important;
    }
    body:not(.cover-mode) #view-organization .org-four-rows .record-table th,
    body:not(.cover-mode) #view-organization .org-four-rows .record-table td {
      padding: 5px 7px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § K. 보고서 빌더 / 커스텀 리포트 뷰
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) #view-custom-report .section-title h2,
    body:not(.cover-mode) #view-report .section-title h2 {
      font-size: 15px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § L. 데이터 사전 (Dictionary)
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .dictionary-item h4 {
      font-size: 13px !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) .dictionary-item p {
      font-size: 12px !important;
      line-height: 1.55 !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § M. nav-right 도구 (mini-note, data-freshness)
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .nav-right .mini-note {
      font-size: 11px !important;
    }
    body:not(.cover-mode) .data-freshness {
      font-size: 10px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § N. 활성 필터 칩
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .active-filter-chip {
      font-size: 11px !important;
      padding: 4px 9px !important;
      border-radius: 999px !important;
      font-weight: 700 !important;
    }
    body:not(.cover-mode) .active-filter-label {
      font-size: 11px !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) .active-filter-chip button {
      font-size: 11px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § O. 사용자 정의 보고서 빌더 드래그 카드
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .report-block-card {
      border-radius: var(--ds-radius-md) !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § P. Q&A 인터페이스
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .qa-nlp-input-wrap {
      border-radius: 10px !important;
      min-height: 44px !important;
    }
    body:not(.cover-mode) .qa-nlp-input {
      font-size: 13px !important;
    }
    body:not(.cover-mode) .qa-nlp-submit-btn {
      font-size: 12px !important;
      font-weight: 700 !important;
      border-radius: 8px !important;
      min-height: 36px !important;
    }
    body:not(.cover-mode) .qa-example-btn {
      font-size: 11px !important;
      border-radius: 999px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § Q. 헤더 유틸리티 버튼 (header-utility-box)
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .header-utility-box .btn {
      height: 32px !important;
      padding: 0 12px !important;
      font-size: 11px !important;
      border-radius: var(--ds-radius-md) !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § R. 로딩 오버레이 스피너 텍스트
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .loading-overlay-text {
      font-size: 12px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § S. 토스트 메시지
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .dashboard-toast:not(.dashboard-toast--feedback) {
      font-size: 12px !important;
      font-weight: 700 !important;
      border-radius: 10px !important;
    }
    body:not(.cover-mode) .dashboard-toast.dashboard-toast--feedback {
      font-size: 14px !important;
      font-weight: 650 !important;
      border-radius: 14px !important;
    }

    /* ────────────────────────────────────────────────────────────────
       § T. 모달 내부 폰트 통일
       ──────────────────────────────────────────────────────────────── */
    body:not(.cover-mode) .modal-card h3,
    body:not(.cover-mode) .modal-section h3 {
      font-size: 15px !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) .modal-card p,
    body:not(.cover-mode) .modal-section p {
      font-size: 12px !important;
      line-height: 1.55 !important;
    }

    /* ════════════════════════════════════════════════════
       § U. WHITE 테마 추가 정제
       ════════════════════════════════════════════════════ */
    /* 배경 미세 그라데이션 — white */
    body[data-theme="white"],
    body:not([data-theme]),
    body[data-theme="default"] {
      background: linear-gradient(160deg, #eef2f8 0%, #e8edf5 100%) !important;
    }
    /* 차트 라인 컬러 — SVG axis */
    body[data-theme="white"]:not(.cover-mode) svg .axis text,
    body:not([data-theme]):not(.cover-mode) svg .axis text,
    body[data-theme="default"]:not(.cover-mode) svg .axis text {
      fill: #64748b !important;
    }
    /* 인라인 필터 select 활성 상태 */
    body[data-theme="white"]:not(.cover-mode) .inline-filter-box select.is-filtered,
    body:not([data-theme]):not(.cover-mode) .inline-filter-box select.is-filtered,
    body[data-theme="default"]:not(.cover-mode) .inline-filter-box select.is-filtered {
      border-color: #1d4ed8 !important;
      background: #2563eb !important;
      color: #ffffff !important;
      font-weight: 700 !important;
    }
    /* 스크롤 영역 odd row 구별 */
    body[data-theme="white"]:not(.cover-mode) .record-table tbody tr:nth-child(even) td,
    body:not([data-theme]):not(.cover-mode) .record-table tbody tr:nth-child(even) td,
    body[data-theme="default"]:not(.cover-mode) .record-table tbody tr:nth-child(even) td {
      background: rgba(241,245,249,0.55) !important;
    }
    /* 도넛 센터 구멍 */
    body[data-theme="white"]:not(.cover-mode) .donut::after,
    body:not([data-theme]):not(.cover-mode) .donut::after,
    body[data-theme="default"]:not(.cover-mode) .donut::after {
      background: #ffffff !important;
      box-shadow: inset 0 0 0 1px rgba(148,163,184,0.18) !important;
    }
    /* heat-cell 텍스트 white 모드 */
    body[data-theme="white"]:not(.cover-mode) .heat-cell,
    body:not([data-theme]):not(.cover-mode) .heat-cell,
    body[data-theme="default"]:not(.cover-mode) .heat-cell {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.20) !important;
    }
    /* org-kpi-pane */
    body[data-theme="white"]:not(.cover-mode) .org-kpi-pane,
    body:not([data-theme]):not(.cover-mode) .org-kpi-pane,
    body[data-theme="default"]:not(.cover-mode) .org-kpi-pane {
      background: rgba(255,255,255,0.70) !important;
      border: 1px solid rgba(148,163,184,0.18) !important;
    }

    /* ════════════════════════════════════════════════════
       § V. DARK 테마 추가 정제
       ════════════════════════════════════════════════════ */
    /* 짝수 행 구분 */
    body[data-theme="dark"]:not(.cover-mode) .record-table tbody tr:nth-child(even) td {
      background: rgba(30,41,59,0.55) !important;
    }
    /* 도넛 센터 */
    body[data-theme="dark"]:not(.cover-mode) .donut::after {
      background: rgba(22,33,55,0.96) !important;
      box-shadow: inset 0 0 0 1px rgba(148,163,184,0.12) !important;
    }
    /* 인라인 필터 활성 */
    body[data-theme="dark"]:not(.cover-mode) .inline-filter-box select.is-filtered {
      border-color: #4338ca !important;
      background: #4f46e5 !important;
      color: #ffffff !important;
      font-weight: 700 !important;
    }
    /* 수신함 버튼 dark */
    body[data-theme="dark"]:not(.cover-mode) .receipt-status-filter-btn {
      background: rgba(22,33,55,0.80) !important;
      border-color: rgba(148,163,184,0.14) !important;
      color: #94a3b8 !important;
    }
    /* 조직도 드로어 dark */
    body[data-theme="dark"]:not(.cover-mode) #view-org-chart .oc-drawer {
      background: rgba(17,27,45,0.98) !important;
      border-left-color: rgba(148,163,184,0.10) !important;
    }
    /* org-kpi-pane dark */
    body[data-theme="dark"]:not(.cover-mode) .org-kpi-pane {
      background: rgba(22,33,55,0.70) !important;
      border-color: rgba(148,163,184,0.10) !important;
    }
    /* 차트 axis 텍스트 dark */
    body[data-theme="dark"]:not(.cover-mode) svg .axis text {
      fill: #94a3b8 !important;
    }
    /* 패널 상단 스트라이프 dark — 인디고 */
    body[data-theme="dark"]:not(.cover-mode) .panel.panel-finance::after { background: #818cf8 !important; }
    body[data-theme="dark"]:not(.cover-mode) .panel.panel-customer::after { background: #34d399 !important; }
    body[data-theme="dark"]:not(.cover-mode) .panel.panel-ops::after { background: #38bdf8 !important; }
    body[data-theme="dark"]:not(.cover-mode) .panel.panel-risk::after { background: #fbbf24 !important; }
    body[data-theme="dark"]:not(.cover-mode) .panel.panel-report::after { background: #a78bfa !important; }
    /* dark 모드 조직도 tree 라인 */
    body[data-theme="dark"]:not(.cover-mode) #view-org-chart .oc-vtick {
      background: rgba(99,102,241,0.30) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) #view-org-chart .oc-child-col {
      border-top-color: rgba(99,102,241,0.28) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) #view-org-chart .oc-child-col::before {
      background: rgba(99,102,241,0.28) !important;
    }
    /* dark 필터 스트라이프 */
    body[data-theme="dark"]:not(.cover-mode) .filter-strip::after {
      background: linear-gradient(90deg, #4f46e5 0%, #818cf8 100%) !important;
    }
    /* dark summary overview 전체 배경 강화 */
    body[data-theme="dark"]:not(.cover-mode) #view-summary .summary-overview-card--i1.is-primary {
      background: linear-gradient(135deg,
        rgba(99,102,241,0.14) 0%,
        rgba(22,33,55,0.96) 55%,
        rgba(99,102,241,0.06) 100%) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) #view-summary .summary-overview-card--i2.is-primary {
      background: linear-gradient(135deg,
        rgba(52,211,153,0.14) 0%,
        rgba(22,33,55,0.96) 55%,
        rgba(52,211,153,0.06) 100%) !important;
    }

    /* ════════════════════════════════════════════════════
       § W. WARM 테마 추가 정제
       ════════════════════════════════════════════════════ */
    /* 짝수 행 구분 */
    body[data-theme="warm"]:not(.cover-mode) .record-table tbody tr:nth-child(even) td {
      background: rgba(253,248,240,0.70) !important;
    }
    /* 도넛 센터 */
    body[data-theme="warm"]:not(.cover-mode) .donut::after {
      background: #fffcf8 !important;
      box-shadow: inset 0 0 0 1px rgba(180,120,60,0.14) !important;
    }
    /* 인라인 필터 활성 */
    body[data-theme="warm"]:not(.cover-mode) .inline-filter-box select.is-filtered {
      border-color: #1d4ed8 !important;
      background: #2563eb !important;
      color: #ffffff !important;
      font-weight: 700 !important;
    }
    /* 수신함 버튼 warm */
    body[data-theme="warm"]:not(.cover-mode) .receipt-status-filter-btn {
      background: rgba(255,252,248,0.80) !important;
      border-color: rgba(180,120,60,0.16) !important;
      color: #7c6a58 !important;
    }
    /* 조직도 드로어 warm */
    body[data-theme="warm"]:not(.cover-mode) #view-org-chart .oc-drawer {
      background: #fffcf8 !important;
      border-left-color: rgba(180,120,60,0.14) !important;
    }
    /* org-kpi-pane warm */
    body[data-theme="warm"]:not(.cover-mode) .org-kpi-pane {
      background: rgba(255,252,248,0.72) !important;
      border-color: rgba(180,120,60,0.14) !important;
    }
    /* 차트 axis 텍스트 warm */
    body[data-theme="warm"]:not(.cover-mode) svg .axis text {
      fill: #7c6a58 !important;
    }
    /* 패널 상단 스트라이프 warm */
    body[data-theme="warm"]:not(.cover-mode) .panel::after {
      background: linear-gradient(90deg, #92400e 0%, #d97706 100%) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .panel.panel-customer::after { background: #0d9488 !important; }
    body[data-theme="warm"]:not(.cover-mode) .panel.panel-risk::after { background: #dc2626 !important; }
    body[data-theme="warm"]:not(.cover-mode) .panel.panel-report::after { background: #92400e !important; }
    /* warm 조직도 tree 라인 */
    body[data-theme="warm"]:not(.cover-mode) #view-org-chart .oc-vtick {
      background: rgba(180,83,9,0.25) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) #view-org-chart .oc-child-col {
      border-top-color: rgba(180,83,9,0.22) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) #view-org-chart .oc-child-col::before {
      background: rgba(180,83,9,0.22) !important;
    }
    /* warm 필터 스트라이프 */
    body[data-theme="warm"]:not(.cover-mode) .filter-strip::after {
      background: linear-gradient(90deg, #92400e 0%, #d97706 100%) !important;
    }
    /* warm summary overview i1 카드 */
    body[data-theme="warm"]:not(.cover-mode) #view-summary .summary-overview-card--i1.is-primary {
      background: linear-gradient(135deg,
        rgba(180,83,9,0.12) 0%,
        #fffcf8 55%,
        rgba(180,83,9,0.05) 100%) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) #view-summary .summary-overview-card--i2.is-primary {
      background: linear-gradient(135deg,
        rgba(21,128,61,0.10) 0%,
        #fffcf8 55%,
        rgba(21,128,61,0.04) 100%) !important;
    }
    /* warm section-kicker line */
    body[data-theme="warm"]:not(.cover-mode) .section-kicker::before {
      background: linear-gradient(90deg, #92400e 0%, #d97706 100%) !important;
    }

    /* ════════════════════════════════════════════════════
       § X. 공통 — 인터랙션 품질 향상
       ════════════════════════════════════════════════════ */
    /* 테이블 hover row */
    body:not(.cover-mode) .record-table tbody tr:hover td {
      background: color-mix(in srgb, var(--primary) 7%, transparent) !important;
      transition: background 0.12s ease !important;
    }
    /* 패널 focus ring */
    body:not(.cover-mode) .panel:focus-within {
      outline: none !important;
    }
    /* 빈 상태 아이콘 */
    body:not(.cover-mode) .dashboard-empty-state .empty-state-icon {
      font-size: 28px !important;
    }
    body:not(.cover-mode) .dashboard-empty-state .empty-state-message {
      font-size: 13px !important;
    }
    body:not(.cover-mode) .dashboard-empty-state .empty-state-sub {
      font-size: 11px !important;
    }
    /* 열 정렬 스크롤 자연스럽게 */
    body:not(.cover-mode) .record-table {
      scroll-behavior: smooth !important;
    }

    /* ════════════════════════════════════════════════════
       § Y. 섹션 타이틀 헤로 패널 완성 (헤더 바로 아래)
       ════════════════════════════════════════════════════ */
    /* 3페이지~ hero 패널(탭바 위 요약 영역) */
    body:not(.cover-mode) .hero {
      border-radius: 0 !important;
      border-left: none !important;
      border-right: none !important;
      border-top: none !important;
      margin: 0 !important;
      padding: 14px 24px !important;
    }
    body:not(.cover-mode) .hero-header {
      min-height: 56px !important;
      border-radius: var(--ds-radius-md) !important;
      padding: 0 72px !important;
    }
    body:not(.cover-mode) .hero h1 {
      font-size: clamp(15px, 1.5vw, 19px) !important;
      font-weight: 800 !important;
      letter-spacing: -0.02em !important;
    }
    body:not(.cover-mode) .hero-kicker {
      font-size: 9px !important;
      letter-spacing: 0.12em !important;
    }

    /* ════════════════════════════════════════════════════
       § Z. 전체 폰트 기준선 — base 오버라이드 방지
       ════════════════════════════════════════════════════ */
    /* body base font — cover 아닐 때는 15px로 약간 축소하여 밀도 향상 */
    body:not(.cover-mode) {
      font-size: 13px !important;
    }
    /* 패널 기본 텍스트 */
    body:not(.cover-mode) .panel,
    body:not(.cover-mode) .kpi,
    body:not(.cover-mode) .insight {
      font-size: 13px !important;
    }
    /* 범례 strong(수치) — 본문 그래프 범례 18px와 동일(도넛은 상위 .donut-wrap 규칙) */
    body:not(.cover-mode) .legend-item strong {
      font-size: 18px !important;
      font-weight: 700 !important;
    }
    body:not(.cover-mode) .donut-wrap .legend-item strong {
      font-size: var(--ds-font-sm) !important;
    }
    /* 스파크 바 */
    body:not(.cover-mode) .spark {
      height: 32px !important;
      gap: 3px !important;
    }

  /* ═══════════════════════════════════════════════════════════════
     PHASE 4 — 메인 필터 바 프리미엄 리디자인
     · 필터 라벨+셀렉트 카드형 재설계
     · 선택 시 명확한 활성 색상 (white / dark / warm 3테마)
     · 축소·확대 컨트롤 우측 고정 + 세련된 스타일
     ═══════════════════════════════════════════════════════════════ */

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       1. 필터 스트립 전체 컨테이너
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    html body:not(.cover-mode) .filter-strip,
    body:not(.cover-mode) .filter-strip {
      padding: 0 16px !important;
      min-height: 48px !important;
      border-top: 1px solid var(--line-2) !important;
      border-bottom: 1px solid var(--line-2) !important;
      display: flex !important;
      align-items: center !important;
    }
    html body:not(.cover-mode) .filter-strip-row,
    body:not(.cover-mode) .filter-strip-row {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      width: 100% !important;
      min-height: 48px !important;
      flex-wrap: nowrap !important;
      overflow: hidden !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       2. 필터 토글 버튼 (▼ 필터)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    html body:not(.cover-mode) .filter-strip-toggle,
    body:not(.cover-mode) .filter-strip-toggle {
      height: 30px !important;
      min-height: 30px !important;
      padding: 0 10px !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      border-radius: 7px !important;
      border: 1px solid var(--line-2) !important;
      background: color-mix(in srgb, var(--panel) 80%, transparent) !important;
      color: var(--muted) !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 4px !important;
      flex-shrink: 0 !important;
      letter-spacing: 0.04em !important;
      cursor: pointer !important;
      white-space: nowrap !important;
    }
    body:not(.cover-mode) .filter-strip-toggle-icon {
      font-size: 9px !important;
      opacity: 0.7 !important;
    }
    body:not(.cover-mode) .filter-strip-toggle-text {
      font-size: 11px !important;
      font-weight: 800 !important;
      letter-spacing: 0.06em !important;
    }

    /* 필터 그룹 컨테이너 — 가운데 영역 채우기 */
    html body:not(.cover-mode) #filterBox,
    html body:not(.cover-mode) .filter-groups-inline,
    body:not(.cover-mode) #filterBox,
    body:not(.cover-mode) .filter-groups-inline {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      display: flex !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 5px !important;
      overflow: hidden !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       3. 개별 필터 라벨 — 카드형 재설계
          라벨 텍스트(위) + select(아래) → 라벨+select 가로 배치
          → 라벨은 왼쪽 고정폭, select는 오른쪽
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    html body:not(.cover-mode) #filterBox .filter-group,
    html body:not(.cover-mode) .filter-groups-inline .filter-group,
    body:not(.cover-mode) #filterBox .filter-group,
    body:not(.cover-mode) .filter-groups-inline .filter-group {
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 0 !important;
      flex-wrap: nowrap !important;
      flex-shrink: 0 !important;
    }

    /* 필터 라벨 wrapper — 각 필터 항목을 pill 형태로 */
    html body:not(.cover-mode) #filterBox .filter-group label,
    html body:not(.cover-mode) .filter-groups-inline .filter-group label,
    body:not(.cover-mode) #filterBox .filter-group label,
    body:not(.cover-mode) .filter-groups-inline .filter-group label {
      /* pill 카드 */
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      border: none !important;
      background: transparent !important;
      box-shadow: none !important;
      border-radius: 0 !important;
      min-width: 0 !important;
      flex-shrink: 0 !important;
      white-space: nowrap !important;
    }

    /* 라벨 텍스트 (그룹 · 센터 · 실 등) — 왼쪽 뱃지 */
    html body:not(.cover-mode) #filterBox .filter-group label > .filter-group-label,
    html body:not(.cover-mode) .filter-groups-inline .filter-group-label,
    body:not(.cover-mode) #filterBox .filter-group label > .filter-group-label,
    body:not(.cover-mode) .filter-groups-inline .filter-group-label {
      display: inline-flex !important;
      align-items: center !important;
      height: 32px !important;
      padding: 0 9px !important;
      font-size: 11px !important;
      font-weight: 800 !important;
      letter-spacing: 0.05em !important;
      color: var(--muted-2) !important;
      background: color-mix(in srgb, var(--table-head-bg) 90%, var(--panel)) !important;
      border: 1px solid var(--line-2) !important;
      border-right: none !important;
      border-radius: 8px 0 0 8px !important;
      white-space: nowrap !important;
      flex-shrink: 0 !important;
    }

    /* select — 오른쪽 붙음 */
    html body:not(.cover-mode) #filterBox .filter-group label select,
    html body:not(.cover-mode) #filterBox .filter-group label > select,
    html body:not(.cover-mode) .filter-groups-inline .filter-group select,
    body:not(.cover-mode) #filterBox .filter-group label select,
    body:not(.cover-mode) #filterBox .filter-group label > select,
    body:not(.cover-mode) .filter-groups-inline .filter-group select {
      height: 32px !important;
      min-height: 32px !important;
      padding: 0 22px 0 9px !important;
      font-size: 12px !important;
      font-weight: 600 !important;
      border: 1px solid var(--line-2) !important;
      border-radius: 0 8px 8px 0 !important;
      background: var(--panel) !important;
      color: var(--text) !important;
      box-shadow: none !important;
      min-width: 72px !important;
      max-width: 130px !important;
      width: auto !important;
      cursor: pointer !important;
      -webkit-appearance: auto !important;
      appearance: auto !important;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    }

    /* 그룹들 사이 구분선 (pseudo) — 대신 gap으로 처리 */
    html body:not(.cover-mode) #filterBox .filter-group + .filter-group,
    body:not(.cover-mode) #filterBox .filter-group + .filter-group {
      margin-left: 4px !important;
      padding-left: 8px !important;
      border-left: 1px solid var(--line-2) !important;
    }

    /* 4. 활성 필터: 상단 #filterStrip atlas 블록에서 select만 파란 배경·흰 글자로 통일 (라벨 칩 강조 제거) */
    body:not(.cover-mode) #filterBox .filter-group:has(select.is-filtered) + .filter-group {
      border-left-color: var(--line-2) !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       5. DARK / WARM 테마별 기본(비활성) 라벨 색상
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    /* DARK */
    body[data-theme="dark"]:not(.cover-mode) .filter-groups-inline .filter-group-label,
    body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label .filter-group-label {
      background: rgba(30,41,59,0.90) !important;
      border-color: rgba(148,163,184,0.14) !important;
      color: #94a3b8 !important;
    }
    body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label select,
    body[data-theme="dark"]:not(.cover-mode) .filter-groups-inline .filter-group select {
      background: rgba(22,33,55,0.96) !important;
      border-color: rgba(148,163,184,0.14) !important;
      color: #e2e8f0 !important;
    }
    body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group + .filter-group {
      border-left-color: rgba(148,163,184,0.12) !important;
    }

    /* WARM */
    body[data-theme="warm"]:not(.cover-mode) .filter-groups-inline .filter-group-label,
    body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label .filter-group-label {
      background: rgba(253,246,235,0.90) !important;
      border-color: rgba(180,120,60,0.18) !important;
      color: #7c6a58 !important;
    }
    body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label select,
    body[data-theme="warm"]:not(.cover-mode) .filter-groups-inline .filter-group select {
      background: #fffcf8 !important;
      border-color: rgba(180,120,60,0.18) !important;
      color: #292019 !important;
    }
    body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group + .filter-group {
      border-left-color: rgba(180,120,60,0.14) !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       6. 우측 actions 영역 — 축소/확대 세련된 스타일 + 우측 고정
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    html body:not(.cover-mode) .filter-strip-actions,
    body:not(.cover-mode) .filter-strip-actions {
      margin-left: auto !important;
      flex-shrink: 0 !important;
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding-left: 12px !important;
      border-left: 1px solid var(--line-2) !important;
    }

    /* content-zoom-control 컨테이너 */
    html body:not(.cover-mode) .content-zoom-control,
    body:not(.cover-mode) .content-zoom-control {
      display: inline-flex !important;
      align-items: center !important;
      gap: 2px !important;
      background: color-mix(in srgb, var(--panel) 80%, transparent) !important;
      border: 1px solid var(--line-2) !important;
      border-radius: 8px !important;
      padding: 2px 4px !important;
      height: 30px !important;
    }

    /* "보기" 라벨 */
    html body:not(.cover-mode) .content-zoom-label,
    body:not(.cover-mode) .content-zoom-label {
      font-size: 10px !important;
      font-weight: 800 !important;
      letter-spacing: 0.06em !important;
      color: var(--muted) !important;
      padding: 0 4px !important;
      white-space: nowrap !important;
    }

    /* 퍼센트 수치 */
    html body:not(.cover-mode) .content-zoom-value,
    body:not(.cover-mode) .content-zoom-value {
      font-size: 11px !important;
      font-weight: 800 !important;
      min-width: 34px !important;
      text-align: center !important;
      color: var(--text) !important;
    }

    /* − / + 버튼 */
    html body:not(.cover-mode) .content-zoom-btn,
    body:not(.cover-mode) .content-zoom-btn {
      width: 22px !important;
      height: 22px !important;
      min-width: 22px !important;
      min-height: 22px !important;
      padding: 0 !important;
      border-radius: 5px !important;
      border: 1px solid var(--line-2) !important;
      background: var(--panel) !important;
      color: var(--text) !important;
      font-size: 14px !important;
      font-weight: 700 !important;
      line-height: 1 !important;
      cursor: pointer !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      transition: background 0.15s, border-color 0.15s !important;
    }
    html body:not(.cover-mode) .content-zoom-btn:hover,
    body:not(.cover-mode) .content-zoom-btn:hover {
      background: var(--primary-3) !important;
      border-color: var(--primary) !important;
      color: var(--primary-dark) !important;
    }
    html body:not(.cover-mode) .content-zoom-btn:active,
    body:not(.cover-mode) .content-zoom-btn:active {
      transform: scale(0.92) !important;
    }

    /* 요약문 복사 버튼 */
    html body:not(.cover-mode) #exportSummaryBtn,
    body:not(.cover-mode) #exportSummaryBtn {
      height: 30px !important;
      padding: 0 12px !important;
      font-size: 11px !important;
      font-weight: 700 !important;
      border-radius: 7px !important;
      white-space: nowrap !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       7. DARK 테마 확대/축소 버튼
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    body[data-theme="dark"]:not(.cover-mode) .content-zoom-control {
      background: rgba(22,33,55,0.80) !important;
      border-color: rgba(148,163,184,0.14) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .content-zoom-label,
    body[data-theme="dark"]:not(.cover-mode) .content-zoom-value {
      color: #94a3b8 !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .content-zoom-btn {
      background: rgba(30,41,59,0.80) !important;
      border-color: rgba(148,163,184,0.14) !important;
      color: #e2e8f0 !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .content-zoom-btn:hover {
      background: rgba(99,102,241,0.18) !important;
      border-color: #818cf8 !important;
      color: #a5b4fc !important;
    }
    body[data-theme="dark"]:not(.cover-mode) .filter-strip-actions {
      border-left-color: rgba(148,163,184,0.12) !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       8. WARM 테마 확대/축소 버튼
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    body[data-theme="warm"]:not(.cover-mode) .content-zoom-control {
      background: rgba(255,252,248,0.80) !important;
      border-color: rgba(180,120,60,0.16) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .content-zoom-label,
    body[data-theme="warm"]:not(.cover-mode) .content-zoom-value {
      color: #7c6a58 !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .content-zoom-btn {
      background: #fffcf8 !important;
      border-color: rgba(180,120,60,0.18) !important;
      color: #292019 !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .content-zoom-btn:hover {
      background: #fef3c7 !important;
      border-color: #d97706 !important;
      color: #92400e !important;
    }
    body[data-theme="warm"]:not(.cover-mode) .filter-strip-actions {
      border-left-color: rgba(180,120,60,0.14) !important;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       9. collapsed 상태에서도 확대/축소 항상 표시
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    html body:not(.cover-mode) #filterStrip[data-collapsed="true"] .filter-strip-actions,
    body:not(.cover-mode) #filterStrip[data-collapsed="true"] .filter-strip-actions {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      margin-left: auto !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    html body:not(.cover-mode) #filterStrip[data-collapsed="true"] .content-zoom-control,
    body:not(.cover-mode) #filterStrip[data-collapsed="true"] .content-zoom-control {
      display: inline-flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    html body:not(.cover-mode) #filterStrip[data-collapsed="true"] #exportSummaryBtn,
    body:not(.cover-mode) #filterStrip[data-collapsed="true"] #exportSummaryBtn {
      display: none !important;
    }

  /* ═══════════════════════════════════════════════════════════════
     PHASE 3 — 헤더 우상단 버튼 5종 높이 완전 통일
     mode-btn / theme select / tooltip-toggle-btn → 모두 28px
     ═══════════════════════════════════════════════════════════════ */

    /* ── 공통 토큰: 헤더 버튼 — 메인요약 상단과 동일 30px 필 ───── */
    :root { --hdr-btn-h: 30px; --hdr-btn-r: 999px; --hdr-btn-fs: 12px; }

    /* ── header-utility-box: flex 세로 중앙 정렬 강제 ──────────── */
    html body:not(.cover-mode) .header-utility-box,
    body:not(.cover-mode) .header-utility-box {
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      padding: 0 12px 0 6px !important;
      height: var(--ds-header-h, var(--app-header-bar-height)) !important;
      flex-shrink: 0 !important;
    }

    /* ── 1. mode-btn (영업그룹 모드 / 사업부 모드) ───────────────
       기존 26px → 28px 통일, padding·radius 맞춤
       ────────────────────────────────────────────────────────────── */
    html body:not(.cover-mode) .header-utility-box .mode-btn,
    html body:not(.cover-mode) .mode-btn,
    body:not(.cover-mode) .header-utility-box .mode-btn {
      height: var(--hdr-btn-h) !important;
      min-height: var(--hdr-btn-h) !important;
      max-height: var(--hdr-btn-h) !important;
      line-height: var(--hdr-btn-h) !important;
      padding: 0 12px !important;
      font-size: var(--hdr-btn-fs) !important;
      font-weight: 700 !important;
      border-radius: var(--hdr-btn-r) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
      vertical-align: middle !important;
      transform: none !important;
    }

    /* ── 2. theme/datasource select (JS · 다크) ─────────────────
       기존 26px or 28px → 28px 통일
       ────────────────────────────────────────────────────────────── */
    html body:not(.cover-mode) .header-utility-box .theme-picker.compact select,
    html body:not(.cover-mode) .header-utility-box #themeSelector,
    html body:not(.cover-mode) .header-utility-box #dataSourceSelector,
    body:not(.cover-mode) .header-utility-box .theme-picker.compact select,
    body:not(.cover-mode) .header-utility-box #themeSelector,
    body:not(.cover-mode) .header-utility-box #dataSourceSelector {
      height: var(--hdr-btn-h) !important;
      min-height: var(--hdr-btn-h) !important;
      max-height: var(--hdr-btn-h) !important;
      line-height: calc(var(--hdr-btn-h) - 2px) !important;
      padding: 0 22px 0 9px !important;
      font-size: var(--hdr-btn-fs) !important;
      font-weight: 700 !important;
      border-radius: var(--hdr-btn-r) !important;
      box-sizing: border-box !important;
      vertical-align: middle !important;
      transform: none !important;
      -webkit-appearance: none !important;
      appearance: none !important;
    }

    /* ── 3. tooltip-toggle-btn (툴팁 ON/OFF) ────────────────────
       기존 28px, 32px 혼재 → 28px 통일
       ────────────────────────────────────────────────────────────── */
    html body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn,
    body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn {
      height: var(--hdr-btn-h) !important;
      min-height: var(--hdr-btn-h) !important;
      max-height: var(--hdr-btn-h) !important;
      line-height: var(--hdr-btn-h) !important;
      padding: 0 11px !important;
      font-size: var(--hdr-btn-fs) !important;
      font-weight: 700 !important;
      border-radius: var(--hdr-btn-r) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 5px !important;
      white-space: nowrap !important;
      box-sizing: border-box !important;
      vertical-align: middle !important;
      transform: none !important;
    }
    /* 툴팁 내부 마크 아이콘 크기 */
    html body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn .tooltip-toggle-mark,
    body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn .tooltip-toggle-mark {
      font-size: 13px !important;
      line-height: 1 !important;
    }
    /* state 텍스트 */
    html body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn .tooltip-toggle-state,
    body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn .tooltip-toggle-state {
      font-size: var(--hdr-btn-fs) !important;
      min-width: auto !important;
    }

    /* ── hover 시 transform 없음 (높이 흔들림 방지) ─────────────── */
    html body:not(.cover-mode) .header-utility-box .mode-btn:hover,
    html body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn:hover,
    body:not(.cover-mode) .header-utility-box .mode-btn:hover,
    body:not(.cover-mode) .header-utility-box .tooltip-toggle-btn:hover {
      transform: none !important;
    }
    /* 전역 헤더 단순화: 모드/데이터 숨김, 테마/툴팁만 노출 */
    html body:not(.cover-mode) .header-utility-box .mode-cluster,
    body:not(.cover-mode) .header-utility-box .mode-cluster,
    html body:not(.cover-mode) .header-utility-box label.theme-picker.compact:has(#dataSourceSelector),
    body:not(.cover-mode) .header-utility-box label.theme-picker.compact:has(#dataSourceSelector) {
      display: none !important;
    }
    /* 전역 헤더 유틸 — 위치는 v4(html body .page-header .header-utility-box)에서 메인요약과 동일 */
    html body:not(.cover-mode) .page-header .header-utility-box,
    body:not(.cover-mode) .page-header .header-utility-box {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      flex-wrap: nowrap !important;
      height: auto !important;
      min-height: 0 !important;
      max-height: none !important;
      padding: 0 !important;
      grid-column: auto !important;
    }
    html body:not(.cover-mode) .page-header .header-utility-box label.theme-picker.compact,
    body:not(.cover-mode) .page-header .header-utility-box label.theme-picker.compact {
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 6px !important;
      height: 30px !important;
      min-height: 30px !important;
      line-height: 30px !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      font-family: "Sora", "Noto Sans KR", sans-serif !important;
      color: rgba(255, 255, 255, 0.9) !important;
      white-space: nowrap !important;
      padding: 0 !important;
      vertical-align: middle !important;
      margin: 0 !important;
    }
    html body:not(.cover-mode) .page-header .header-utility-box #themeSelector,
    body:not(.cover-mode) .page-header .header-utility-box #themeSelector {
      height: 30px !important;
      min-height: 30px !important;
      max-height: 30px !important;
      line-height: 28px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255, 255, 255, 0.22) !important;
      background: rgba(15, 23, 42, 0.4) !important;
      color: #f8fafc !important;
      padding: 0 10px !important;
      display: inline-flex !important;
      align-items: center !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      font-family: "Sora", "Noto Sans KR", sans-serif !important;
      box-shadow: none !important;
      transform: none !important;
      -webkit-appearance: menulist !important;
      appearance: menulist !important;
    }
    html body:not(.cover-mode) .page-header .header-utility-box .tooltip-toggle-btn,
    body:not(.cover-mode) .page-header .header-utility-box .tooltip-toggle-btn {
      height: 30px !important;
      min-height: 30px !important;
      max-height: 30px !important;
      line-height: 30px !important;
      padding: 0 11px !important;
      border: 1px solid rgba(255, 255, 255, 0.22) !important;
      border-radius: 999px !important;
      background: rgba(15, 23, 42, 0.4) !important;
      color: #f8fafc !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      font-family: "Sora", "Noto Sans KR", sans-serif !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      box-shadow: none !important;
      transform: none !important;
    }
    html body:not(.cover-mode) .page-header .header-utility-box .tooltip-toggle-btn.is-on,
    body:not(.cover-mode) .page-header .header-utility-box .tooltip-toggle-btn.is-on {
      color: #93c5fd !important;
      border-color: rgba(147, 197, 253, 0.45) !important;
      background: rgba(15, 23, 42, 0.56) !important;
    }
    html body:not(.cover-mode) .page-header .header-utility-box .tooltip-toggle-btn.is-off,
    body:not(.cover-mode) .page-header .header-utility-box .tooltip-toggle-btn.is-off {
      color: rgba(248, 250, 252, 0.72) !important;
    }

    /* 뷰 로컬 헤더 유틸 — 글로벌·메인요약과 동일(30px 필·글래스) */
    html body:not(.cover-mode) .page-local-header-tools label.theme-picker.compact,
    body:not(.cover-mode) .page-local-header-tools label.theme-picker.compact {
      display: inline-flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 6px !important;
      height: 30px !important;
      min-height: 30px !important;
      line-height: 30px !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      font-family: "Sora", "Noto Sans KR", sans-serif !important;
      color: rgba(255, 255, 255, 0.9) !important;
      white-space: nowrap !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    html body:not(.cover-mode) .page-local-header-tools select,
    html body:not(.cover-mode) .page-local-header-tools .theme-picker.compact select,
    body:not(.cover-mode) .page-local-header-tools select {
      height: 30px !important;
      min-height: 30px !important;
      max-height: 30px !important;
      line-height: 28px !important;
      border-radius: 999px !important;
      border: 1px solid rgba(255, 255, 255, 0.22) !important;
      background: rgba(15, 23, 42, 0.4) !important;
      color: #f8fafc !important;
      padding: 0 10px !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      font-family: "Sora", "Noto Sans KR", sans-serif !important;
      box-shadow: none !important;
    }
    html body:not(.cover-mode) .page-local-header-tools .tooltip-toggle-btn,
    body:not(.cover-mode) .page-local-header-tools .tooltip-toggle-btn {
      height: 30px !important;
      min-height: 30px !important;
      max-height: 30px !important;
      padding: 0 11px !important;
      border: 1px solid rgba(255, 255, 255, 0.22) !important;
      border-radius: 999px !important;
      background: rgba(15, 23, 42, 0.4) !important;
      color: #f8fafc !important;
      font-size: 12px !important;
      font-weight: 700 !important;
      font-family: "Sora", "Noto Sans KR", sans-serif !important;
      display: inline-flex !important;
      align-items: center !important;
      gap: 5px !important;
      box-shadow: none !important;
    }
    html body:not(.cover-mode) .page-local-header-tools .tooltip-toggle-btn.is-on,
    body:not(.cover-mode) .page-local-header-tools .tooltip-toggle-btn.is-on {
      color: #93c5fd !important;
      border-color: rgba(147, 197, 253, 0.45) !important;
      background: rgba(15, 23, 42, 0.56) !important;
    }
    html body:not(.cover-mode) .page-local-header-tools .tooltip-toggle-btn.is-off,
    body:not(.cover-mode) .page-local-header-tools .tooltip-toggle-btn.is-off {
      color: rgba(248, 250, 252, 0.72) !important;
    }

  /* 조직 2행 재설계 + 비교 테이블 하이라이트 CSS */

    /* ════════════════════════════════════════════════════════
       § 조직 2행 — 3:2:5 비율 레이아웃 (명시적 fr 지정)
       ════════════════════════════════════════════════════════ */

    /* 2행: 12컬럼 유지, 2행 전용 row로 3fr:2fr:5fr 완전 제어 */
    #view-organization .org-four-rows {
      grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    /* 2행: wrapper가 12컬럼 전체, 내부 3fr:2fr:5fr 독립 그리드 */
    #view-organization .org-row2-wrapper {
      grid-column: 1 / -1 !important;
      display: grid !important;
      grid-template-columns: 3fr 2fr 5fr !important;
      gap: 10px !important;
      align-items: stretch !important;
      /* 2행: 도넛·범례가 잘리지 않도록 최소 높이 확보 */
      min-height: min(460px, 58vh) !important;
    }
    #view-organization .org-row2-col1,
    #view-organization .org-row2-col2,
    #view-organization .org-row2-col3 {
      grid-column: unset !important;
      min-width: 0 !important;
    }

    /* ── 하위조직 점유율 — 도넛 중앙 + 범례 우측 ── */
    /* ══ 하위조직 점유율 — 카드 전체 활용 ══ */
    #view-organization .org-share-panel--redesign {
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
    }
    /* 도넛 카드는 :has(#orgShareDonut) 제외 규칙 밖이라 헤더 한 줄 처리 별도 부여 */
    #view-organization .org-share-panel--redesign > .panel-head {
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 8px 10px !important;
      min-width: 0 !important;
    }
    #view-organization .org-share-panel--redesign > .panel-head .panel-head-left {
      display: inline-flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 10px !important;
      flex-shrink: 0 !important;
      min-width: 0 !important;
    }
    #view-organization .org-share-panel--redesign > .panel-head h3 {
      white-space: nowrap !important;
      flex-shrink: 0 !important;
    }
    #view-organization .org-share-panel--redesign > .panel-head > .meta#orgShareMeta {
      flex: 1 1 auto !important;
      min-width: 0 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      text-align: right !important;
    }
    #view-organization .org-share-panel--redesign .org-share-panel-body {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      display: flex !important;
      align-items: stretch !important;
      overflow: hidden !important;
    }
    /* chart-box / donut-wrap 컨테이너: min-height 0, 꽉 채우기 */
    #view-organization .org-share-panel--redesign .org-share-donut-wrap,
    #view-organization .org-share-panel--redesign .chart-box {
      min-height: 0 !important;
      flex: 1 1 auto !important;
      overflow: hidden !important;
    }
    /* donut-wrap: flex row, 도넛 좌측 크게 + 범례 우측 */
    /* ══ 하위조직 점유율 도넛 ══ */
    #view-organization #orgShareDonut .donut-wrap {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 16px !important;
      width: 100% !important;
      height: 100% !important;
      min-height: 0 !important;
      overflow: hidden !important;
      padding: 12px !important;
      box-sizing: border-box !important;
    }
    #view-organization #orgShareDonut .donut {
      flex: 0 0 auto !important;
      height: min(100%, 260px) !important;
      width: min(100%, 260px) !important;
      aspect-ratio: 1 !important;
      margin: 0 !important;
    }
    #view-organization #orgShareDonut .donut::after {
      inset: 22% !important;
      font-size: 15px !important;
      font-weight: 800 !important;
      line-height: 1.3 !important;
      overflow: hidden !important;
    }
    #view-organization #orgShareDonut .legend {
      flex: 0 0 250px !important;
      width: 250px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 3px !important;
      overflow: hidden !important;
      margin: 0 !important;
    }
    #view-organization #orgShareDonut .legend-item {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      font-size: 17px !important;
      font-weight: 600 !important;
      padding: 3px 4px !important;
      white-space: nowrap !important;
      overflow: hidden !important;
    }
    #view-organization #orgShareDonut .legend-label-text {
      flex: 0 0 90px !important; width: 90px !important;
      overflow: hidden !important; text-overflow: ellipsis !important;
      white-space: nowrap !important; font-size: 17px !important;
    }
    #view-organization #orgShareDonut .legend-value {
      flex: 0 0 54px !important; text-align: right !important;
      font-size: 17px !important; font-weight: 700 !important;
      color: var(--text) !important; white-space: nowrap !important;
    }
    #view-organization #orgShareDonut .legend-pct {
      flex: 0 0 50px !important; text-align: right !important;
      font-size: 14px !important; color: var(--muted) !important;
      white-space: nowrap !important;
    }
    #view-organization #orgShareDonut .legend-swatch {
      flex: 0 0 10px !important;
      width: 10px !important; height: 10px !important;
      border-radius: 2px !important;
    }
    /* 기존 strong/chart-datalabel 숨김 (legend-value/pct로 대체) */
    #view-organization #orgShareDonut .legend-item strong { display: none !important; }
    #view-organization #orgShareDonut .legend-item .chart-datalabel { display: none !important; }

    /* 담당자 업무비중 — 타이틀·토글·메타 1행 (내부 .org-manager-load-head-row 는 display:contents) */
    #view-organization .org-manager-load-head {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: center !important;
      gap: 8px 12px !important;
      min-width: 0 !important;
      text-align: left !important;
    }
    #view-organization .org-manager-load-head-row {
      display: contents;
    }
    #view-organization .org-manager-load-head-row h3 {
      margin: 0;
      flex-shrink: 0;
      white-space: nowrap;
    }
    #view-organization .org-manager-load-field-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    #view-organization .org-manager-load-field-toggle .btn-mini {
      width: auto !important;
      min-width: max-content;
      white-space: nowrap;
      padding: 0 10px !important;
    }
    #view-organization .org-manager-load-head > .meta {
      flex: 1 1 auto !important;
      flex-shrink: 1 !important;
      min-width: 0 !important;
      white-space: nowrap !important;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.35;
      text-align: right;
    }

    /* ══ 담당자 업무비중 — viz-switcher 상단 우측, 도넛 레이아웃 ══ */
    #view-organization .org-manager-panel .chart-card-with-switcher {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
      gap: 0 !important;
    }
    #view-organization .org-manager-panel .chart-viz-switcher {
      display: flex !important;
      justify-content: flex-end !important;
      gap: 4px !important;
      padding: 0 0 6px 0 !important;
      flex-shrink: 0 !important;
    }
    #view-organization .org-manager-panel .chart-viz-body {
      flex: 1 1 auto !important;
      min-height: 200px !important;
    }
    #view-organization .org-manager-panel .chart-viz-body > div {
      min-height: 200px !important;
      height: 100% !important;
    }
    #view-organization .org-manager-panel .chart-viz-body svg {
      width: 100% !important;
      height: 100% !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .donut-wrap {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      gap: 10px !important;
      width: 100% !important;
      height: 100% !important;
      padding: 6px 2px 6px 4px !important;
      box-sizing: border-box !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .donut {
      flex: 0 0 auto !important;
      height: min(100%, 252px) !important;
      width: min(100%, 252px) !important;
      aspect-ratio: 1 !important;
      margin: 0 !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .donut::after {
      font-size: 11px !important;
      font-weight: 700 !important;
      inset: 22% !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .legend {
      flex: 0 1 auto !important;
      width: auto !important;
      min-width: 200px !important;
      max-width: 260px !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 3px !important;
      overflow: hidden !important;
      margin: 0 !important;
      align-self: center !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .legend-item {
      display: flex !important;
      align-items: center !important;
      gap: 6px !important;
      font-size: 18px !important;
      font-weight: 600 !important;
      padding: 3px 4px !important;
      white-space: nowrap !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .legend-label-text {
      flex: 0 0 90px !important; width: 90px !important;
      overflow: hidden !important; text-overflow: ellipsis !important;
      white-space: nowrap !important; font-size: 18px !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .legend-value {
      flex: 0 0 54px !important; text-align: right !important;
      font-size: 18px !important; font-weight: 700 !important;
      color: var(--text) !important; white-space: nowrap !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .legend-pct {
      flex: 0 0 44px !important; text-align: right !important;
      font-size: 15px !important; color: var(--muted) !important;
      white-space: nowrap !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .legend-swatch {
      flex: 0 0 10px !important;
      width: 10px !important; height: 10px !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .legend-item strong { display: none !important; }
    #view-organization .org-manager-panel .chart-viz-body .legend-item .chart-datalabel { display: none !important; }
    /* 담당자 업무비중 막대·선 차트 텍스트 크기 */
    #view-organization .org-manager-panel .chart-viz-body svg text,
    #view-organization .org-manager-panel .chart-viz-body svg .label {
      font-size: 15px !important;
    }
    #view-organization .org-manager-panel .chart-viz-body svg .axis text {
      font-size: 15px !important;
    }
    #view-organization .org-manager-panel .chart-viz-body .chart-datalabel {
      font-size: 14px !important;
    }
    /* dataLabelWithBg 내부 text도 키움 */
    #view-organization .org-manager-panel .chart-viz-body .chart-datalabel-wrap text {
      font-size: 14px !important;
    }

    #view-organization .org-deal-panel {
      display: flex !important;
      flex-direction: column !important;
    }
    /* 매출건수·평균단가: 헤더 고정 + tbody만 스크롤(최대 10데이터 행 높이) */
    #view-organization .org-deal-panel .record-table.org-deal-table {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      max-height: calc(42px + 10 * 38px) !important;
    }
    #view-organization .org-deal-panel .org-deal-table thead {
      display: table !important;
      width: 100% !important;
      table-layout: fixed !important;
    }
    #view-organization .org-deal-panel .org-deal-table thead th {
      position: static !important;
      box-shadow: 0 1px 0 var(--line-2) !important;
    }
    #view-organization .org-deal-panel .org-deal-table tbody {
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
      max-height: calc(10 * 38px) !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      scrollbar-gutter: stable !important;
      scroll-snap-type: y mandatory !important;
      -webkit-overflow-scrolling: touch !important;
    }
    #view-organization .org-deal-panel .org-deal-table tbody tr {
      display: table !important;
      width: 100% !important;
      table-layout: fixed !important;
      flex-shrink: 0 !important;
      scroll-snap-align: start !important;
    }
    #view-organization .org-deal-panel .org-deal-table thead th:nth-child(1),
    #view-organization .org-deal-panel .org-deal-table tbody td:nth-child(1) { width: 42%; }
    #view-organization .org-deal-panel .org-deal-table thead th:nth-child(2),
    #view-organization .org-deal-panel .org-deal-table tbody td:nth-child(2) { width: 29%; }
    #view-organization .org-deal-panel .org-deal-table thead th:nth-child(3),
    #view-organization .org-deal-panel .org-deal-table tbody td:nth-child(3) { width: 29%; }
    #view-organization .org-deal-table th {
      font-size: 14px !important;
      font-weight: 800 !important;
      letter-spacing: 0.06em !important;
      text-transform: uppercase !important;
      background: var(--table-head-bg) !important;
      color: var(--table-head-text) !important;
      padding: 8px 10px !important;
      border-bottom: 2px solid var(--line-2) !important;
      white-space: nowrap !important;
    }
    #view-organization .org-deal-table td {
      font-size: 16px !important;
      padding: 7px 10px !important;
      border-bottom: 1px solid var(--line-2) !important;
      vertical-align: middle !important;
    }
    #view-organization .org-deal-table tbody tr:hover td {
      background: color-mix(in srgb, var(--primary) 7%, transparent) !important;
    }
    #view-organization .org-deal-table tbody tr:nth-child(even) td {
      background: color-mix(in srgb, var(--table-head-bg) 40%, transparent) !important;
    }
    #view-organization .org-deal-table tbody tr:nth-child(even):hover td {
      background: color-mix(in srgb, var(--primary) 7%, transparent) !important;
    }
    /* 1위 행 강조 */
    #view-organization .org-deal-table tbody tr:first-child td {
      font-weight: 700 !important;
    }
    #view-organization .org-deal-table tbody tr:first-child td:first-child {
      border-left: 3px solid var(--primary) !important;
      padding-left: 7px !important;
    }

    /* ── 담당자 업무비중 — span-7:span-5 내부 비율 ── */
    #view-organization .org-manager-panel {
      grid-column: span 5 !important;
      display: flex !important;
      flex-direction: column !important;
    }
    #view-organization .org-manager-panel .org-inner-grid {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      display: grid !important;
      grid-template-columns: 6fr 4fr !important;
      gap: 10px !important;
      align-items: stretch !important;
    }
    #view-organization .org-manager-panel .org-inner-grid > * {
      grid-column: unset !important;
      display: flex !important;
      flex-direction: column !important;
      overflow: hidden !important;
      min-height: 0 !important;
    }
    #view-organization .org-manager-panel .org-inner-grid .chart-box {
      flex: 1 1 auto !important;
      min-height: 0 !important;
    }
    /* 담당자 업무비중 우측: 헤더 고정 + tbody만 스크롤(최대 10데이터 행) */
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table {
      flex: 1 1 auto !important;
      min-height: 0 !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      max-height: calc(40px + 10 * 36px) !important;
    }
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table > table thead {
      display: table !important;
      width: 100% !important;
      table-layout: fixed !important;
    }
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table thead th {
      position: static !important;
      background: var(--table-head-bg) !important;
      color: var(--table-head-text) !important;
      box-shadow: 0 1px 0 var(--line-soft) !important;
    }
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table > table tbody {
      display: flex !important;
      flex-direction: column !important;
      max-height: calc(10 * 36px) !important;
      overflow-x: hidden !important;
      overflow-y: auto !important;
      scrollbar-gutter: stable !important;
      scroll-snap-type: y mandatory !important;
      -webkit-overflow-scrolling: touch !important;
    }
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table > table tbody tr {
      display: table !important;
      width: 100% !important;
      table-layout: fixed !important;
      flex-shrink: 0 !important;
      scroll-snap-align: start !important;
    }
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table thead th:nth-child(1),
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table tbody td:nth-child(1) { width: 34%; }
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table thead th:nth-child(2),
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table tbody td:nth-child(2) { width: 33%; }
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table thead th:nth-child(3),
    #view-organization .org-manager-panel .org-inner-grid > .panel.span-5 .record-table tbody td:nth-child(3) { width: 33%; }

    /* ── 관리자 한눈 요약 3열 1행 레이아웃 ── */
    #view-report { overflow: hidden !important; }

    /* ── 관리자 보고서 2행×3열 레이아웃 ── */
    #view-report .report-section-1vp {
      display: flex; flex-direction: column;
      height: calc(var(--erp-visible-vh, 100vh) - var(--top-chrome-offset) - 16px);
      gap: 8px; padding: 0 0 8px 0; box-sizing: border-box; overflow: hidden;
    }
    /* 타이틀 1행(키커+h2 + 기간·연도 우측) + 설명 1행 — 관리자 보고서 */
    #view-report .report-title-compact.section-title,
    #view-report-admin2 .report-title-compact.section-title {
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }
    #view-report .report-title-compact,
    #view-report-admin2 .report-title-compact {
      flex: 0 0 auto;
      display: block !important;
      width: 100% !important;
      min-width: 0 !important;
      box-sizing: border-box !important;
    }
    #view-report .report-title-compact .report-title-head,
    #view-report-admin2 .report-title-compact .report-title-head {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      width: 100% !important;
      max-width: 100% !important;
      min-width: 0 !important;
      flex-wrap: nowrap;
      box-sizing: border-box;
    }
    #view-report .report-title-compact .report-title-main,
    #view-report-admin2 .report-title-compact .report-title-main {
      display: flex;
      flex-direction: row;
      align-items: baseline;
      flex-wrap: nowrap;
      gap: 10px 14px;
      min-width: 0;
      flex: 1 1 auto;
      box-sizing: border-box;
    }
    #view-report .report-title-compact .report-title-top,
    #view-report-admin2 .report-title-compact .report-title-top {
      display: flex;
      flex-direction: row;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
      gap: 12px;
      width: 100%;
      min-width: 0;
      box-sizing: border-box;
    }
    #view-report .report-title-compact .report-title-text,
    #view-report-admin2 .report-title-compact .report-title-text {
      flex: 0 0 auto;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
    }
    #view-report .report-title-compact .report-title-text .section-kicker,
    #view-report-admin2 .report-title-compact .report-title-text .section-kicker {
      margin: 0;
      line-height: 1;
    }
    #view-report .report-title-compact h2,
    #view-report-admin2 .report-title-compact h2 {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.03em;
      margin: 0;
      line-height: 1;
      white-space: nowrap;
    }
    body:not(.cover-mode) #view-report .report-title-compact.section-title h2,
    body:not(.cover-mode) #view-report-admin2 .report-title-compact.section-title h2 {
      font-size: 20px !important;
    }
    #view-report .report-title-compact .report-title-desc,
    #view-report-admin2 .report-title-compact .report-title-desc {
      margin: 0;
      font-size: 12px;
      color: var(--muted);
      flex: 1 1 auto;
      min-width: 0;
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #view-report .report-period-toggle,
    .section-title-filters .report-period-toggle {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      margin: 0;
      margin-left: auto;
      flex-shrink: 0;
      flex-wrap: nowrap;
      padding: 2px;
      border-radius: 999px;
      background: color-mix(in srgb, var(--panel-strong) 72%, transparent);
      border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
      box-sizing: border-box;
    }
    .section-title-filters .report-period-toggle {
      margin-left: 0;
    }
    #view-report .report-period-toggle .main-summary-org-toggle-btn,
    .section-title-filters .report-period-toggle .main-summary-org-toggle-btn {
      border: 0;
      background: transparent;
      color: var(--muted-2);
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.02em;
      padding: 4px 10px;
      line-height: 1.3;
      border-radius: 999px;
      cursor: pointer;
      font-family: inherit;
      box-sizing: border-box;
      transition: background-color 140ms ease, color 140ms ease, box-shadow 140ms ease;
    }
    #view-report .report-period-toggle .main-summary-org-toggle-btn:hover,
    .section-title-filters .report-period-toggle .main-summary-org-toggle-btn:hover {
      color: var(--text);
    }
    #view-report .report-period-toggle .main-summary-org-toggle-btn.is-active,
    .section-title-filters .report-period-toggle .main-summary-org-toggle-btn.is-active {
      background: linear-gradient(135deg, color-mix(in srgb, var(--primary-2) 20%, transparent), color-mix(in srgb, var(--primary) 20%, transparent));
      color: var(--text);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 24%, transparent);
    }
    #view-report .report-title-compact .report-title-top .section-title-filters,
    #view-report-admin2 .report-title-compact .report-title-top .section-title-filters {
      margin-left: 0 !important;
      flex: 0 0 auto !important;
      align-self: center !important;
      flex-shrink: 0 !important;
      justify-content: flex-end !important;
    }
    #view-report .report-period-detail,
    .section-title-filters .section-period-detail {
      min-height: 28px;
      height: auto;
      margin: 0;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
      background: color-mix(in srgb, var(--panel) 86%, transparent);
      color: var(--text);
      padding: 4px 12px;
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      outline: none;
      box-sizing: border-box;
      cursor: pointer;
    }
    #view-report .report-row {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr;
      gap: 8px; min-height: 0; overflow: hidden;
    }
    #view-report .report-row-top  { flex: 0 0 clamp(240px, 42%, 340px); overflow: hidden; }
    #view-report .report-row-bottom { flex: 1 1 0; min-height: 0; overflow: hidden; }
    #view-report .panel.report-summary-panel,
    #view-report .panel.report-card-panel,
    #view-report .panel.report-chart-panel {
      display: flex; flex-direction: column; min-height: 0; overflow: hidden;
    }
    #view-report .report-action-card {
      border-top: 3px solid var(--bad, #dc2626);
    }
    #view-report .report-scroll-body {
      flex: 1 1 auto; overflow-y: auto; min-height: 0;
    }
    #view-report #reportSummaryText .report-summary-line {
      display: block;
      margin-bottom: 8px;
      line-height: 1.6;
    }
    #view-report #reportSummaryText .report-summary-line:last-child {
      margin-bottom: 0;
    }
    #view-report .report-chart-panel .chart-box { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: visible; }
    /* 월별 브리핑 차트: 요약 목표대비 막대+계획선과 동일 SVG(stretch·여백·축) */
    #view-report .report-chart-panel .chart-box .chart-card-with-switcher {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #view-report .report-chart-panel .chart-box .chart-viz-body {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #view-report .report-chart-panel .chart-box .chart-viz-body > div {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #view-report .report-chart-panel .chart-box .line-chart-shell.line-chart-shell--top-legend {
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    #view-report .report-chart-panel .chart-box .line-chart-plot-area {
      flex: 1 1 auto;
      min-height: 108px;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }
    #view-report .report-chart-panel .chart-box .summary-goal-svg-fill {
      flex: 1 1 auto;
      min-height: 108px;
      width: 100%;
      max-width: 100%;
      height: 100%;
      display: block;
    }
    /* 월별 브리핑: 범례 행 + SVG(요약 목표대비 막대 모드와 동일 stretch) */
    #view-report .report-chart-panel .chart-box .report-briefing-combo-shell {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      min-height: 0;
      height: 100%;
      gap: 0;
    }
    #view-report .report-chart-panel .chart-box .report-briefing-combo-legend-row {
      flex-shrink: 0;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 8px 12px;
    }
    #view-report .report-chart-panel .chart-box .report-briefing-combo-legend-row .legend {
      margin-top: 0;
    }

    /* 1행: Executive Summary 본문과 핵심 리스크·권장 액션 목록 동일 본문 크기·행간 */
    #view-report .report-row-top .report-summary-panel .summary-box p#reportSummaryText,
    #view-report .report-row-top .report-card-panel ul.report-list,
    #view-report .report-row-top .report-card-panel ul.report-list li {
      font-size: 20px !important;
      line-height: 1.55 !important;
      color: var(--muted) !important;
    }
    #view-report .report-row-top .report-card-panel ul.report-list li strong {
      font-size: inherit !important;
      line-height: inherit !important;
    }

    /* ── 기준 폰트 토큰 재정의 (+3 전체) ────────────────────────── */
    body:not(.cover-mode):not(:has(#view-main-summary.active)) {
      --ds-font-xs:   15px !important;
      --ds-font-sm:   16px !important;
      --ds-font-base: 17px !important;
      --ds-font-md:   18px !important;
      --ds-font-lg:   19px !important;
      --ds-font-xl:   21px !important;
      --ds-font-2xl:  23px !important;
      --ds-font-3xl:  27px !important;
      --ds-font-4xl:  31px !important;
      font-size: 17px !important;
    }

    /* ── 섹션 타이틀 ─────────────────────────────────────────────── */
    body:not(.cover-mode) .section-title h2 {
      font-size: 21px !important;
      font-weight: 800 !important;
    }
    body:not(.cover-mode) .section-title p {
      font-size: 16px !important;
    }
    body:not(.cover-mode) .section-kicker {
      font-size: 15px !important;
    }

    /* ── 패널 헤드 타이틀 ────────────────────────────────────────── */
    body:not(.cover-mode) .panel-head h3 {
      font-size: 21px !important;   /* 위젯 타이틀 */
      font-weight: 800 !important;
    }
    body:not(.cover-mode) .panel-head .meta {
      font-size: 17px !important;   /* 서브타이틀 = 타이틀 - 4px */
    }

    /* ── KPI ────────────────────────────────────────────────────── */
    body:not(.cover-mode) .kpi .eyebrow {
      font-size: 15px !important;
    }
    body:not(.cover-mode) .kpi .value {
      font-size: 31px !important;
    }
    body:not(.cover-mode) .kpi .sub {
      font-size: 16px !important;
    }

    /* ── 메트릭 필 ───────────────────────────────────────────────── */
    body:not(.cover-mode) .metric-pill strong {
      font-size: 25px !important;
    }
    body:not(.cover-mode) .metric-pill span {
      font-size: 15px !important;
    }

    /* ── 인사이트 카드 ───────────────────────────────────────────── */
    body:not(.cover-mode) .insight h4 {
      font-size: 18px !important;
    }
    body:not(.cover-mode) .insight p,
    body:not(.cover-mode) .insight ul {
      font-size: 16px !important;
    }

    /* ── 서머리 박스 ─────────────────────────────────────────────── */
    body:not(.cover-mode) .summary-box h4 {
      font-size: 18px !important;
    }
    body:not(.cover-mode) .summary-box p {
      font-size: 17px !important;
    }

    /* ── 서머리 뷰 특화 ──────────────────────────────────────────── */
    body:not(.cover-mode) #view-summary .panel-head h3 { font-size: 21px !important; }
    body:not(.cover-mode) #view-summary .insight h4 { font-size: 17px !important; }
    body:not(.cover-mode) #view-summary .insight p,
    body:not(.cover-mode) #view-summary .insight ul { font-size: 16px !important; }
    /* summary-overview-card 타이틀: 이모지 + 큰 제목 */
    body:not(.cover-mode) #view-summary .summary-overview-card .card-label {
      display: flex !important;
      align-items: center !important;
      gap: 8px !important;
      margin-bottom: 8px !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      color: var(--text) !important;
    }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-label__emoji { font-size: 24px !important; line-height: 1 !important; flex-shrink: 0 !important; }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-label__text { font-size: 18px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 1.25 !important; color: var(--text) !important; }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-value { font-size: 22px !important; }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-row-label { font-size: 13px !important; }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-row-value { font-size: 15px !important; }
    body:not(.cover-mode) #view-summary .summary-overview-card .card-sub { display: none !important; }
    body:not(.cover-mode) #view-summary .metric-pill strong { font-size: 25px !important; }
    body:not(.cover-mode) #view-summary .metric-pill span { font-size: 15px !important; }
    body:not(.cover-mode) #view-summary .summary-box h4 { font-size: 17px !important; }
    body:not(.cover-mode) #view-summary .summary-box p { font-size: 16px !important; }
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .panel-head h3 { font-size: 22px !important; }

    /* ── 테이블 ──────────────────────────────────────────────────── */
    body:not(.cover-mode) th {
      font-size: 15px !important;
    }
    body:not(.cover-mode) td,
    body:not(.cover-mode) .ranking-table,
    body:not(.cover-mode) .record-table table {
      font-size: 16px !important;
    }
    body:not(.cover-mode) .panel .record-table th { font-size: 15px !important; }
    body:not(.cover-mode) .panel .record-table td { font-size: 16px !important; }

    /* ── 범례(그래프 공통 18px, 도넛 .donut-wrap 은 ds-font-sm) ───── */
    body:not(.cover-mode) .legend-item {
      font-size: 18px !important;
    }
    body:not(.cover-mode) .donut-wrap .legend-item {
      font-size: var(--ds-font-sm) !important;
    }
    body:not(.cover-mode) .legend-item strong {
      font-size: 18px !important;
    }
    body:not(.cover-mode) .donut-wrap .legend-item strong {
      font-size: var(--ds-font-sm) !important;
    }

    /* ── SVG 차트: 축 텍스트, 데이터레이블 ──────────────────────── */
    body:not(.cover-mode) svg .axis text,
    body:not(.cover-mode) svg text.label,
    body:not(.cover-mode) .axis text {
      font-size: 11px !important;
    }
    /* 데이터레이블은 12px 고정 */
    body:not(.cover-mode) svg .chart-datalabel,
    body:not(.cover-mode) .chart-datalabel {
      font-size: 12px !important;
    }

    /* ── mini-note / badge / 부가 텍스트 ────────────────────────── */
    body:not(.cover-mode) .mini-note {
      font-size: 16px !important;
    }
    body:not(.cover-mode) .badge {
      font-size: 15px !important;
    }
    body:not(.cover-mode) .footer-note {
      font-size: 16px !important;
    }

    /* ── 조직도 ──────────────────────────────────────────────────── */
    body:not(.cover-mode) #view-org-chart .oc-card-name { font-size: 16px !important; }
    body:not(.cover-mode) #view-org-chart .oc-card-count { font-size: 15px !important; }
    body:not(.cover-mode) #view-org-chart .oc-drawer-heading { font-size: 19px !important; }
    body:not(.cover-mode) #view-org-chart .oc-members-table { font-size: 16px !important; }
    body:not(.cover-mode) #view-org-chart .oc-members-table th { font-size: 14px !important; text-align: center !important; }
    body:not(.cover-mode) #view-org-chart .oc-members-table td { font-size: 16px !important; text-align: center !important; }
    body:not(.cover-mode) #view-org-chart .oc-rank-pill { font-size: 12px !important; padding: 2px 8px !important; letter-spacing: -0.04em !important; }
    body:not(.cover-mode) #view-org-chart .org-chart-sparkline-xtick { font-size: 11px !important; }
    body:not(.cover-mode) #view-org-chart .org-chart-sparkline-ytick { font-size: 12px !important; }
    body:not(.cover-mode) #view-org-chart .org-chart-sparkline-caption { font-size: 11px !important; }

    /* ── 이슈 센터 ───────────────────────────────────────────────── */
    body:not(.cover-mode) .issue-card-title { font-size: 17px !important; }
    body:not(.cover-mode) .issue-card-summary { font-size: 16px !important; }
    body:not(.cover-mode) .issue-card-severity { font-size: 15px !important; }

    /* ── 브리핑 카드 ─────────────────────────────────────────────── */
    body:not(.cover-mode) .briefing-card h3,
    body:not(.cover-mode) .briefing-side h3 { font-size: 18px !important; }
    body:not(.cover-mode) .briefing-card p,
    body:not(.cover-mode) .briefing-side p,
    body:not(.cover-mode) .briefing-side ul { font-size: 16px !important; }
    body:not(.cover-mode) .briefing-metric strong { font-size: 25px !important; }
    body:not(.cover-mode) .briefing-metric span { font-size: 16px !important; }

    /* ── 사전 (Dictionary) ───────────────────────────────────────── */
    body:not(.cover-mode) .dictionary-item h4 { font-size: 18px !important; }
    body:not(.cover-mode) .dictionary-item p { font-size: 16px !important; }

    /* ── 툴팁 ────────────────────────────────────────────────────── */
    body:not(.cover-mode) .ui-tooltip { font-size: 18px !important; }
    body:not(.cover-mode) .ui-tooltip .tooltip-evidence-label { font-size: 16px !important; }
    body:not(.cover-mode) .ui-tooltip .tooltip-evidence-line { font-size: 16px !important; }

    /* ── 패널 기본 텍스트 ────────────────────────────────────────── */
    body:not(.cover-mode) .panel,
    body:not(.cover-mode) .kpi,
    body:not(.cover-mode) .insight {
      font-size: 17px !important;
    }

    /* ── 열 heading (panel-head 제외 직접 h3) ─────────────────────── */
    body:not(.cover-mode) .panel h3 { font-size: 19px !important; }
    body:not(.cover-mode) .panel h4 { font-size: 18px !important; }

    /* ══════════════════════════════════════════════════════════
       경영 한눈 요약 카드 — 완전 재설계
       · 2×2 그리드, 세로 스크롤 없이 컴팩트
       · 폰트 계층 완전 통일
       · 레이블(소), 핵심값(대), 부가행(중) 3단 구조
       ══════════════════════════════════════════════════════════ */

    /* 그리드 */
    body:not(.cover-mode) #view-summary .summary-overview-grid {
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      grid-template-rows: repeat(2, 1fr) !important;
      gap: 8px !important;
      min-width: 0 !important;
      align-items: stretch !important;
    }

    /* 슬롯별 액센트 — 제품 미니 KPI 1~4와 동일 팔레트 */
    body:not(.cover-mode) #view-summary .summary-overview-card--i1 { --overview-accent: #2563eb; }
    body:not(.cover-mode) #view-summary .summary-overview-card--i2 { --overview-accent: #0d9488; }
    body:not(.cover-mode) #view-summary .summary-overview-card--i3 { --overview-accent: #7c3aed; }
    body:not(.cover-mode) #view-summary .summary-overview-card--i4 { --overview-accent: #ea580c; }
    body:not(.cover-mode) #view-summary .summary-overview-card.is-alert { --overview-accent: var(--warn); }
    body:not(.cover-mode) #view-summary .summary-overview-card.is-opportunity { --overview-accent: var(--ok); }

    /* 카드 베이스 — 미니 KPI 카드와 동일 크롬(크기·패딩·그리드는 유지) */
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card {
      display: flex !important;
      flex-direction: column !important;
      gap: 0 !important;
      padding: 12px 14px 11px 14px !important;
      min-height: 0 !important;
      height: 100% !important;
      box-sizing: border-box !important;
      border-radius: var(--kpi-card-radius, 12px) !important;
      overflow: hidden !important;
      position: relative !important;
      color: var(--text) !important;
      border: 1px solid color-mix(in srgb, var(--overview-accent, var(--primary)) 28%, var(--line-2)) !important;
      background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--overview-accent, var(--primary)) 14%, var(--panel-surface)) 0%,
        var(--panel-surface) 48%,
        color-mix(in srgb, var(--overview-accent, var(--primary)) 6%, var(--panel)) 100%
      ) !important;
      box-shadow:
        0 1px 0 color-mix(in srgb, white 55%, transparent),
        0 4px 14px rgba(15, 23, 42, 0.06) !important;
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
    }

    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card.interactive-card:hover {
      transform: translateY(-2px) !important;
      box-shadow:
        0 2px 0 color-mix(in srgb, white 40%, transparent),
        0 8px 20px rgba(15, 23, 42, 0.09) !important;
    }

    /* 톤별: 미니 KPI alert / 기본 그라데이션과 정렬 */
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card.is-alert {
      border-color: color-mix(in srgb, var(--warn) 42%, var(--line-2)) !important;
      background: linear-gradient(
        145deg,
        color-mix(in srgb, var(--warn) 16%, var(--panel-surface)),
        var(--panel-surface) 55%,
        color-mix(in srgb, var(--warn) 8%, var(--panel))
      ) !important;
    }
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card.is-primary:not(.is-alert):not(.is-opportunity) {
      border-color: color-mix(in srgb, var(--overview-accent, var(--primary)) 28%, var(--line-2)) !important;
    }

    /* 좌측 액센트 바 — 미니 KPI ::before 와 동일 패턴 */
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card::before {
      content: "" !important;
      display: block !important;
      position: absolute !important;
      left: 0 !important;
      top: var(--kpi-accent-bar-inset, 4px) !important;
      bottom: var(--kpi-accent-bar-inset, 4px) !important;
      width: 4px !important;
      border-radius: 0 6px 6px 0 !important;
      background: linear-gradient(
        180deg,
        var(--overview-accent, var(--primary)),
        color-mix(in srgb, var(--overview-accent, var(--primary)) 45%, var(--panel))
      ) !important;
      box-shadow: 0 0 12px color-mix(in srgb, var(--overview-accent, var(--primary)) 35%, transparent) !important;
      z-index: 1 !important;
      pointer-events: none !important;
    }
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card.is-alert::before {
      background: linear-gradient(180deg, var(--warn), color-mix(in srgb, var(--warn) 50%, var(--panel))) !important;
      box-shadow: 0 0 14px color-mix(in srgb, var(--warn) 42%, transparent) !important;
    }
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card.is-opportunity::before {
      background: linear-gradient(180deg, var(--ok), color-mix(in srgb, var(--ok) 50%, var(--panel))) !important;
      box-shadow: 0 0 12px color-mix(in srgb, var(--ok) 35%, transparent) !important;
    }

    /* 다크·웜: 미니 KPI와 동일 그림자 톤 */
    body[data-theme="dark"]:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card {
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32) !important;
    }
    body[data-theme="dark"]:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card.interactive-card:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.42) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card {
      box-shadow: 0 4px 14px rgba(60, 40, 20, 0.11) !important;
    }

    /* ── 카드 타이틀: 이모지 + 큰 한글 제목 */
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-label {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      gap: 7px !important;
      margin-bottom: 6px !important;
      text-transform: none !important;
      letter-spacing: normal !important;
      color: var(--text) !important;
      line-height: 1.25 !important;
    }
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-label__emoji {
      font-size: 22px !important;
      line-height: 1 !important;
      flex-shrink: 0 !important;
    }
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-label__text {
      font-size: 16px !important;
      font-weight: 800 !important;
      letter-spacing: -0.02em !important;
      line-height: 1.2 !important;
      color: var(--text) !important;
    }

    /* ── 핵심값 (대): 주목값 */
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-value {
      font-size: 20px !important;
      font-weight: 800 !important;
      letter-spacing: -0.03em !important;
      line-height: 1.2 !important;
      color: var(--text) !important;
      margin: 0 0 6px !important;
      text-align: left !important;
    }

    /* ── 부가행 컨테이너 */
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-rows {
      display: flex !important;
      flex-direction: column !important;
      gap: 4px !important;
      flex: 0 0 auto !important;
      min-height: 0 !important;
    }

    /* ── 각 부가행 */
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-row {
      display: flex !important;
      justify-content: space-between !important;
      align-items: baseline !important;
      gap: 8px !important;
    }

    /* ── 행 레이블 */
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-row-label {
      font-size: 12px !important;
      font-weight: 600 !important;
      color: var(--muted) !important;
      flex-shrink: 0 !important;
      line-height: 1.3 !important;
    }

    /* ── 행 값 */
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-row-value {
      font-size: 14px !important;
      font-weight: 800 !important;
      color: var(--text) !important;
      text-align: right !important;
      line-height: 1.3 !important;
      min-width: 0 !important;
    }

    /* ── 하단 서브노트 숨김 (컴팩트) */
    body:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-sub {
      display: none !important;
    }

    /* ── 상단 구분선(i4 ::after) 비활성 — 미니 카드는 좌측 바만 */
    body:not(.cover-mode) #view-summary .summary-overview-card::after {
      display: none !important;
    }

    /* dark / warm 테마 행 레이블 색상 */
    body[data-theme="dark"]:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-row-label {
      color: var(--muted) !important;
    }
    body[data-theme="warm"]:not(.cover-mode) #view-summary .summary-snapshot-panel .summary-overview-card .card-row-label {
      color: var(--muted) !important;
    }

    /* Phase 5 개별 오버라이드 무력화 — 위 규칙이 더 구체적이라 자동 이김 */
    body:not(.cover-mode) .insight p,
    body:not(.cover-mode) .insight ul,
    body:not(.cover-mode) .summary-box p,
    body:not(.cover-mode) #view-summary .insight p,
    body:not(.cover-mode) #view-summary .insight ul,
    body:not(.cover-mode) #view-summary .summary-box p { font-size: 20px !important; }

    /* ── 조직 페이지 레이아웃 재구성 ─────────────────────────────── */
    /* 1행: 원래 6:4 비율 유지 */
    #view-organization .org-four-rows .org-first-row {
      grid-template-columns: 6fr 4fr !important;
    }

    /* 2행: 도넛 카드 최소 높이에 맞춤 (1행은 .org-first-row 자체 min-height 유지) */
    #view-organization .org-four-rows {
      grid-auto-rows: minmax(460px, auto) !important;
    }

    /* org-row2-wrapper 자식 grid-column 강제 해제 — wrapper 내 3fr:2fr:5fr이 동작하게 */
    #view-organization .org-manager-panel {
      grid-column: unset !important;
      display: flex !important;
      flex-direction: column !important;
    }
    #view-organization .org-row2-wrapper > * {
      grid-column: unset !important;
    }

    /* White theme: simplify filter/toolbar/dropdown color system */
    html body[data-theme="white"]:not(.cover-mode) .toolbar.nav-combined,
    html body:not([data-theme]):not(.cover-mode) .toolbar.nav-combined,
    html body[data-theme="default"]:not(.cover-mode) .toolbar.nav-combined,
    body[data-theme="white"]:not(.cover-mode) .toolbar.nav-combined,
    body:not([data-theme]):not(.cover-mode) .toolbar.nav-combined,
    body[data-theme="default"]:not(.cover-mode) .toolbar.nav-combined {
      background: #ffffff !important;
      border-bottom: 1px solid #e5e7eb !important;
      box-shadow: none !important;
    }

    html body[data-theme="white"]:not(.cover-mode) .filter-strip,
    html body:not([data-theme]):not(.cover-mode) .filter-strip,
    html body[data-theme="default"]:not(.cover-mode) .filter-strip,
    body[data-theme="white"]:not(.cover-mode) .filter-strip,
    body:not([data-theme]):not(.cover-mode) .filter-strip,
    body[data-theme="default"]:not(.cover-mode) .filter-strip {
      background: #ffffff !important;
      border-top: 1px solid #eef2f7 !important;
      border-bottom: 1px solid #e5e7eb !important;
      box-shadow: none !important;
    }

    html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group + .filter-group,
    html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group + .filter-group,
    html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group + .filter-group,
    body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group + .filter-group,
    body:not([data-theme]):not(.cover-mode) #filterBox .filter-group + .filter-group,
    body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group + .filter-group {
      border-left-color: #eef2f7 !important;
    }

    html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label .filter-group-label,
    html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label .filter-group-label,
    html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label .filter-group-label,
    body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label .filter-group-label,
    body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label .filter-group-label,
    body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label .filter-group-label {
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
      color: #334155 !important;
      box-shadow: none !important;
    }

    html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label select,
    html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label select,
    html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label select,
    body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label select,
    body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label select,
    body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label select,
    body[data-theme="white"]:not(.cover-mode) #filterStrip select,
    body:not([data-theme]):not(.cover-mode) #filterStrip select,
    body[data-theme="default"]:not(.cover-mode) #filterStrip select {
      background: #ffffff !important;
      border: 1px solid #dbe3ed !important;
      color: #0f172a !important;
      box-shadow: none !important;
    }

    html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label select.is-filtered,
    html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label select.is-filtered,
    html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label select.is-filtered,
    body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label select.is-filtered,
    body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label select.is-filtered,
    body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label select.is-filtered {
      background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%) !important;
      border-color: #1d4ed8 !important;
      border-left-color: #1d4ed8 !important;
      color: #ffffff !important;
      font-weight: 700 !important;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    }

    /* 화이트/기본: 필터 적용 시 라벨 래퍼 — 이 스타일 블록이 파일 후단이라 PHASE4 대비 확실히 적용 */
    html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label.is-active,
    html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label.is-active,
    html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label.is-active,
    html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered),
    html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered),
    html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered),
    body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label.is-active,
    body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label.is-active,
    body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label.is-active,
    body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered),
    body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered),
    body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label:has(select.is-filtered) {
      background: linear-gradient(180deg, rgba(219, 234, 254, 0.98) 0%, rgba(239, 246, 255, 0.99) 100%) !important;
      border-color: rgba(37, 99, 235, 0.45) !important;
      color: #1e3a8a !important;
      box-shadow:
        inset 3px 0 0 #2563eb,
        0 0 0 1px rgba(37, 99, 235, 0.12),
        0 2px 12px rgba(37, 99, 235, 0.14) !important;
    }

    html body[data-theme="white"]:not(.cover-mode) .filter-strip-actions,
    html body:not([data-theme]):not(.cover-mode) .filter-strip-actions,
    html body[data-theme="default"]:not(.cover-mode) .filter-strip-actions,
    body[data-theme="white"]:not(.cover-mode) .filter-strip-actions,
    body:not([data-theme]):not(.cover-mode) .filter-strip-actions,
    body[data-theme="default"]:not(.cover-mode) .filter-strip-actions {
      border-left-color: #eef2f7 !important;
    }

    html body[data-theme="white"]:not(.cover-mode) .content-zoom-control,
    html body:not([data-theme]):not(.cover-mode) .content-zoom-control,
    html body[data-theme="default"]:not(.cover-mode) .content-zoom-control,
    body[data-theme="white"]:not(.cover-mode) .content-zoom-control,
    body:not([data-theme]):not(.cover-mode) .content-zoom-control,
    body[data-theme="default"]:not(.cover-mode) .content-zoom-control {
      background: #f8fafc !important;
      border: 1px solid #e2e8f0 !important;
      box-shadow: none !important;
    }
    #view-feedback .section {
      display: grid;
      gap: 18px;
    }

    #view-feedback .section > * {
      min-width: 0;
    }

    #view-feedback .section .grid {
      align-items: start;
    }

    .mini-kpi-card--plan-under {
      --kpi-accent: #2563eb;
    }

    .mini-kpi-card--plan-over {
      --kpi-accent: #dc2626;
    }

    .mini-kpi-card--plan-match {
      --kpi-accent: #64748b;
    }

    .manager-plan-delta {
      font-weight: 700;
    }

    .manager-plan-delta--under {
      color: #2563eb;
    }

    .manager-plan-delta--over {
      color: #dc2626;
    }

    .manager-plan-delta--match {
      color: var(--text-muted);
    }

    /* ===== Q&A aside 폰트 완화(조건 의존 최소화) ===== */
    html body #view-qa aside.qa-output-cause {
      font-size: 15px !important;
      line-height: 1.5 !important;
    }
    html body #view-qa aside.qa-output-cause > .qa-cause-panel-head,
    html body #view-qa aside.qa-output-cause .qa-cause-explanation .qa-cause-p,
    html body #view-qa aside.qa-output-cause .qa-cause-chart-hint,
    html body #view-qa aside.qa-output-cause .ranking-table th,
    html body #view-qa aside.qa-output-cause .ranking-table td {
      font-size: 15px !important;
      line-height: 1.5 !important;
    }
    html body #view-qa aside.qa-output-cause .qa-cause-inline,
    html body #view-qa aside.qa-output-cause .qa-keyword {
      font-size: 16px !important;
      line-height: 1.5 !important;
    }

    /* ===== 메인 필터 select 네이티브 드롭다운: 쿨톤·웜에서 목록/글자 대비, 다크에서는 다크 팝업 ===== */
    html body[data-theme="white"]:not(.cover-mode) #filterStrip select,
    html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label select,
    html body:not([data-theme]):not(.cover-mode) #filterStrip select,
    html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label select,
    html body[data-theme="default"]:not(.cover-mode) #filterStrip select,
    html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label select,
    html body[data-theme="warm"]:not(.cover-mode) #filterStrip select,
    html body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label select,
    html body[data-theme="white"]:not(.cover-mode) .compact-top-filters select,
    html body:not([data-theme]):not(.cover-mode) .compact-top-filters select,
    html body[data-theme="default"]:not(.cover-mode) .compact-top-filters select,
    html body[data-theme="warm"]:not(.cover-mode) .compact-top-filters select,
    body[data-theme="white"]:not(.cover-mode) #filterStrip select,
    body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label select,
    body:not([data-theme]):not(.cover-mode) #filterStrip select,
    body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label select,
    body[data-theme="default"]:not(.cover-mode) #filterStrip select,
    body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label select,
    body[data-theme="warm"]:not(.cover-mode) #filterStrip select,
    body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label select,
    body[data-theme="white"]:not(.cover-mode) .compact-top-filters select,
    body:not([data-theme]):not(.cover-mode) .compact-top-filters select,
    body[data-theme="default"]:not(.cover-mode) .compact-top-filters select,
    body[data-theme="warm"]:not(.cover-mode) .compact-top-filters select {
      color-scheme: light !important;
    }
    html body[data-theme="white"]:not(.cover-mode) #filterStrip select option,
    html body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label select option,
    html body:not([data-theme]):not(.cover-mode) #filterStrip select option,
    html body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label select option,
    html body[data-theme="default"]:not(.cover-mode) #filterStrip select option,
    html body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label select option,
    html body[data-theme="warm"]:not(.cover-mode) #filterStrip select option,
    html body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label select option,
    html body[data-theme="white"]:not(.cover-mode) .compact-top-filters select option,
    html body:not([data-theme]):not(.cover-mode) .compact-top-filters select option,
    html body[data-theme="default"]:not(.cover-mode) .compact-top-filters select option,
    html body[data-theme="warm"]:not(.cover-mode) .compact-top-filters select option,
    body[data-theme="white"]:not(.cover-mode) #filterStrip select option,
    body[data-theme="white"]:not(.cover-mode) #filterBox .filter-group label select option,
    body:not([data-theme]):not(.cover-mode) #filterStrip select option,
    body:not([data-theme]):not(.cover-mode) #filterBox .filter-group label select option,
    body[data-theme="default"]:not(.cover-mode) #filterStrip select option,
    body[data-theme="default"]:not(.cover-mode) #filterBox .filter-group label select option,
    body[data-theme="warm"]:not(.cover-mode) #filterStrip select option,
    body[data-theme="warm"]:not(.cover-mode) #filterBox .filter-group label select option,
    body[data-theme="white"]:not(.cover-mode) .compact-top-filters select option,
    body:not([data-theme]):not(.cover-mode) .compact-top-filters select option,
    body[data-theme="default"]:not(.cover-mode) .compact-top-filters select option,
    body[data-theme="warm"]:not(.cover-mode) .compact-top-filters select option {
      background-color: #ffffff !important;
      color: #0f172a !important;
    }

    html body[data-theme="dark"]:not(.cover-mode) #filterStrip select,
    html body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label select,
    html body[data-theme="dark"]:not(.cover-mode) .filter-groups-inline .filter-group select,
    html body[data-theme="dark"]:not(.cover-mode) .compact-top-filters select,
    body[data-theme="dark"]:not(.cover-mode) #filterStrip select,
    body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label select,
    body[data-theme="dark"]:not(.cover-mode) .filter-groups-inline .filter-group select,
    body[data-theme="dark"]:not(.cover-mode) .compact-top-filters select {
      color-scheme: dark !important;
      background-color: #1e293b !important;
      color: #f1f5f9 !important;
    }
    html body[data-theme="dark"]:not(.cover-mode) #filterStrip select option,
    html body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label select option,
    html body[data-theme="dark"]:not(.cover-mode) .filter-groups-inline .filter-group select option,
    html body[data-theme="dark"]:not(.cover-mode) .compact-top-filters select option,
    body[data-theme="dark"]:not(.cover-mode) #filterStrip select option,
    body[data-theme="dark"]:not(.cover-mode) #filterBox .filter-group label select option,
    body[data-theme="dark"]:not(.cover-mode) .filter-groups-inline .filter-group select option,
    body[data-theme="dark"]:not(.cover-mode) .compact-top-filters select option {
      background-color: #1e293b !important;
      color: #f1f5f9 !important;
    }