@charset "UTF-8";

/* WiKim Tremor Console — presentation overlay (4th layer, loaded last).
 * 참조: dashboard.tremor.so 시각 언어를 자체 CSS로 재현 (코드 미복제 — 원본은 상용 라이선스).
 * 라우트·API·비즈니스 로직을 바꾸지 않는다. ops-console.css 위에 토큰만 재정의한다.
 * 글꼴은 KoddiUDOnGothic 400/700 유지.
 */

:root {
  /* 대표색 — 브랜드 인디고 #4E46DC (2026-08-25 김치 적색에서 변경).
   * 토큰 이름(--kimchi 등)은 하위 레이어 호환을 위해 유지하고 값만 재정의한다. */
  --kimchi: #4E46DC;
  --kimchi-dark: #4038C7;
  --kimchi-soft: rgba(78, 70, 220, 0.1);
  --action: #4E46DC;
  --action-hover: #4038C7;
  --primary: #4E46DC;
  --color-primary: #4E46DC;
  --color-primary-dk: #4038C7;
  --color-primary-lt: rgba(78, 70, 220, 0.1);
  --control-focus-border: #4E46DC;
  --control-focus-ring: 0 0 0 3px rgba(78, 70, 220, 0.16);
  --focus-ring: 0 0 0 3px rgba(78, 70, 220, 0.22);

  /* Neutral scale — Tailwind gray, Tremor 기본 중립 */
  --bg: #ffffff;
  --app-bg: #ffffff;
  --content-bg: #ffffff;
  --surface: #ffffff;
  --panel-bg: #ffffff;
  --card-bg: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f3f4f6;
  --surface-muted: #f9fafb;
  --ink: #111827;
  --ink-2: #374151;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-strong: #d1d5db;
  --border: #e5e7eb;
  --border-strong: #d1d5db;
  --border-color: #e5e7eb;
  --border-color-light: #f3f4f6;

  /* 상태색 — Tremor 계열로 통일 */
  --green: #059669;
  --green-soft: #ecfdf5;
  --mustard: #d97706;
  --mustard-soft: #fffbeb;
  --success: #059669;
  --warning: #d97706;
  --destructive: #dc2626;
  --info: #3b82f6;
  --science: #3b82f6;
  --science-strong: #1d4ed8;
  --science-soft: #eff6ff;
  --color-success: #059669;
  --color-success-lt: #ecfdf5;
  --color-warning: #d97706;
  --color-warning-lt: #fffbeb;
  --color-danger: #dc2626;
  --color-danger-lt: #fef2f2;
  --color-info: #3b82f6;
  --color-info-lt: #eff6ff;

  /* 차트 팔레트 — Tremor categorical (blue·cyan·violet·emerald·amber·gray) */
  --chart-1: #3b82f6;
  --chart-2: #06b6d4;
  --chart-3: #8b5cf6;
  --chart-4: #10b981;
  --chart-5: #f59e0b;
  --chart-6: #6b7280;
  --chart-neutral: #9ca3af;

  /* 라이트 사이드바 — Tremor: `bg-white border-r border-gray-200` */
  --sidebar: #ffffff;
  --sidebar-bg: #ffffff;
  --sidebar-2: #f9fafb;
  --sidebar-ink: #111827;
  --sidebar-ink-2: #374151;
  --sidebar-muted: #6b7280;
  --sidebar-line: #e5e7eb;
  --sidebar-hover: #f3f4f6;
  --sidebar-active: #ffffff;
  --sidebar-active-bg: #ffffff;
  --sidebar-status: #f3f4f6;

  --header-bg: rgba(255, 255, 255, 0.85);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);

  --radius: 8px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;

  --login-input: #ffffff;
  --login-control: #f9fafb;
  --login-line: #e5e7eb;
}

:root[data-theme="dark"] {
  --kimchi: #766EF0;
  --kimchi-dark: #8F88F4;
  --kimchi-soft: rgba(118, 110, 240, 0.16);
  --action: #5A52E0;
  --action-hover: #4B43D2;
  --primary: #766EF0;
  --color-primary: #766EF0;
  --color-primary-dk: #8F88F4;
  --color-primary-lt: rgba(118, 110, 240, 0.16);
  --control-focus-border: #766EF0;
  --control-focus-ring: 0 0 0 3px rgba(118, 110, 240, 0.22);
  --focus-ring: 0 0 0 3px rgba(118, 110, 240, 0.28);

  --bg: #030712;
  --app-bg: #030712;
  --content-bg: #030712;
  --surface: #111827;
  --panel-bg: #111827;
  --card-bg: #111827;
  --surface-2: #1f2937;
  --surface-3: #374151;
  --surface-muted: #1f2937;
  --ink: #f9fafb;
  --ink-2: #d1d5db;
  --muted: #9ca3af;
  --line: #1f2937;
  --line-strong: #374151;
  --border: #1f2937;
  --border-strong: #374151;
  --border-color: #1f2937;
  --border-color-light: #1f2937;

  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.12);
  --mustard: #fbbf24;
  --mustard-soft: rgba(251, 191, 36, 0.12);
  --success: #34d399;
  --warning: #fbbf24;
  --destructive: #f87171;
  --info: #60a5fa;
  --science: #60a5fa;
  --science-strong: #93c5fd;
  --science-soft: rgba(96, 165, 250, 0.14);
  --color-success: #34d399;
  --color-success-lt: rgba(52, 211, 153, 0.12);
  --color-warning: #fbbf24;
  --color-warning-lt: rgba(251, 191, 36, 0.12);
  --color-danger: #f87171;
  --color-danger-lt: rgba(248, 113, 113, 0.12);
  --color-info: #60a5fa;
  --color-info-lt: rgba(96, 165, 250, 0.14);

  --chart-1: #60a5fa;
  --chart-2: #22d3ee;
  --chart-3: #a78bfa;
  --chart-4: #34d399;
  --chart-5: #fbbf24;
  --chart-6: #9ca3af;
  --chart-neutral: #6b7280;

  --sidebar: #030712;
  --sidebar-bg: #030712;
  --sidebar-2: #111827;
  --sidebar-ink: #f9fafb;
  --sidebar-ink-2: #d1d5db;
  --sidebar-muted: #9ca3af;
  --sidebar-line: #1f2937;
  --sidebar-hover: #111827;
  --sidebar-active: #1f2937;
  --sidebar-active-bg: #1f2937;
  --sidebar-status: #111827;

  --header-bg: rgba(3, 7, 18, 0.85);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  --login-input: #111827;
  --login-control: #1f2937;
  --login-line: #1f2937;
}

/* ---------- 라이트 사이드바 ---------- */

.sidebar {
  background: var(--sidebar);
  border-right: 1px solid var(--sidebar-line);
}

/* 메뉴 간격·크기 — 컴팩트 (2026-08-25 지시 #1). gentelella 44px 행을 34px로. */
.nav-item,
.nav-toggle {
  color: var(--sidebar-ink-2);
  border-radius: var(--radius-sm);
  font-weight: 400;
  min-height: 34px;
  height: 34px;
  margin-bottom: 1px;
  font-size: 14px;
}

.nav-sub .nav-item {
  min-height: 32px;
  height: 32px;
  margin-bottom: 1px;
  font-size: 13.5px;
}

.nav-section {
  margin-top: 14px;
  margin-bottom: 2px;
}

/* 호버: 옅은 회색 바탕만 — 글씨 색은 그대로 (지시 #3) */
.nav-item:hover,
.nav-toggle:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink-2);
}

/* 선택: 바탕색·좌측 바 없이 글씨만 대표색 (지시 #2).
 * gentelella의 `.nav-sub .nav-item.active`(0,3,0) 규칙까지 같은 특이도로 덮는다.
 * 대표색은 실제 선택된 하위 메뉴에만 적용한다. */
.nav-item.active,
.nav-item[aria-current="page"],
.nav-sub .nav-item.active {
  background: transparent;
  color: var(--kimchi);
  font-weight: 700;
  box-shadow: none;
}

.nav-item.active:hover,
.nav-item[aria-current="page"]:hover,
.nav-sub .nav-item.active:hover {
  background: var(--sidebar-hover);
  color: var(--kimchi);
}

/* 중분류(김치과학문화 확산·글로벌 김치 앰배서더·언론·미디어 활동)는
 * 클릭·활성 그룹이어도 글씨색을 바꾸지 않는다 (2026-08-25 지시).
 * gentelella의 has-active 배경 틴트·좌측 바까지 함께 무력화한다. */
.nav-toggle.active,
.nav-toggle[aria-current="page"],
.nav-tree.has-active > .nav-toggle {
  background: transparent;
  color: var(--sidebar-ink-2);
  font-weight: 400;
  box-shadow: none;
}

.nav-toggle.active:hover,
.nav-tree.has-active > .nav-toggle:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink-2);
}

/* ---------- 메뉴 아이콘 — 선(라인) SVG ----------
 * Tremor는 Remix Icon *Line* 세트를 `size-4`(16px)로 쓴다. 같은 계열의
 * 라인 아이콘을 index.html에 직접 작도해 넣고(외부 아이콘 폰트·라이브러리 없음),
 * 여기서는 크기·정렬·색만 관리한다. stroke는 currentColor를 따르므로
 * 평소 회색, 선택 시 본문 글씨와 함께 대표색으로 물든다. */

.nav-item .nav-ico,
.nav-toggle .nav-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: currentColor;
  opacity: 0.75;
  /* 호버 시 아이콘 반응형 효과 (ChatGPT 사이드바 참고) — 부드러운 확대 */
  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1.4), opacity 0.15s ease;
}

.nav-item:hover .nav-ico,
.nav-toggle:hover .nav-ico {
  transform: scale(1.2);
}

.nav-item:active .nav-ico,
.nav-toggle:active .nav-ico {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .nav-item .nav-ico,
  .nav-toggle .nav-ico {
    transition: none;
  }

  .nav-item:hover .nav-ico,
  .nav-toggle:hover .nav-ico {
    transform: none;
  }
}

.nav-item .nav-ico svg,
.nav-toggle .nav-ico svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  fill: none;
  /* 16px로 축소돼도 획 굵기를 일정하게 유지 */
  vector-effect: non-scaling-stroke;
}

.nav-item.active .nav-ico,
.nav-item[aria-current="page"] .nav-ico,
.nav-toggle.active .nav-ico,
.nav-item:hover .nav-ico,
.nav-toggle:hover .nav-ico {
  opacity: 1;
}

/* 상·하위 메뉴 모두 아이콘 + 라벨의 단일 정렬 규칙을 쓴다 */
.nav-item,
.nav-sub-inner .nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-item > span,
.nav-toggle .nav-toggle-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* 대분류(운영·성과관리·업무) 글씨 크기를 세부 메뉴와 통일.
 * gentelella-v4.css의 `.main-nav > p`(10px·대문자·자간 0.5px)까지 함께 덮는다. */
.nav-section,
.main-nav > p,
.nav-label {
  color: var(--sidebar-muted);
  font-size: var(--text-body-sm);
  letter-spacing: 0;
  text-transform: none;
}

.nav-badge {
  background: var(--surface-3);
  color: var(--ink-2);
}

/* 사업 토글의 대기 배지 — 라벨과 셰브론 사이, 트리가 접혀 있어도 보이는 대기 신호 (2026-08-28).
 * 하위 레이어의 3열 그리드(24px 1fr 14px)는 네 번째 자식(배지)을 다음 줄로 떨어뜨리므로
 * 같은 기하(아이콘 24px·셰브론 14px)를 유지한 채 flex 로 바꾼다. */
.nav-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle > .nav-ico {
  width: 24px;
  display: inline-flex;
  justify-content: center;
  flex-shrink: 0;
}

.nav-toggle > .nav-chev {
  width: 14px;
  flex-shrink: 0;
  text-align: center;
}

.nav-toggle .nav-badge {
  flex-shrink: 0;
}

.sidebar-brand,
.sidebar-admin,
.sidebar-status {
  border-color: var(--sidebar-line);
}

/* ---------- 플랫폼 브랜드 — 과학문화융합팀 통합성과관리 플랫폼 (2026-08-25 지시) ---------- */

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
}

.sidebar-brand:hover .platform-logo svg {
  filter: brightness(1.06);
}

.sidebar-brand:focus-visible {
  outline: 2px solid var(--kimchi);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.platform-logo {
  display: inline-flex;
  flex-shrink: 0;
}

.platform-logo svg {
  display: block;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(78, 70, 220, 0.25);
}

.platform-wordmark {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.platform-wordmark small {
  font-size: 11px;
  font-weight: 500;
  color: var(--sidebar-muted);
  letter-spacing: 0.01em;
}

.platform-wordmark strong {
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--sidebar-ink);
  white-space: nowrap;
}

/* 이전 연구소 CI 이미지 규칙 무력화 */
.sidebar-brand .ci-light,
.sidebar-brand .ci-dark,
.sidebar-brand-mark {
  display: none !important;
}

/* 사이드바 가장자리 접기 버튼은 계속 숨긴다 (2026-08-25 지시 — 삭제).
 * 접힘 진입점은 상단바 우측 패널 토글(#sidebarPanelToggle) 하나다. */
#sidebarEdgeToggle,
.sidebar-edge-toggle {
  display: none !important;
}

/* 접힘 = 아이콘 레일이 아니라 사이드바 전체 숨김 (2026-08-25 패널 토글 도입).
 * gentelella의 아이콘-레일 축소 규칙 일체를 무시하고 단순 토글로 동작한다. */
html.sidebar-collapsed .sidebar {
  display: none;
}

html.sidebar-collapsed .workspace {
  margin-left: 0;
}

@media (max-width: 900px) {
  html.sidebar-collapsed .workspace {
    margin-left: 0;
  }
}

/* 사이드바 하단 관리자 영역 — 라이트 레일에서 겹침 없이 정렬 */
.sidebar-admin {
  flex-wrap: wrap;
  gap: 8px;
}

.sidebar-admin-identity {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

html.sidebar-collapsed .sidebar-admin-identity {
  flex-basis: auto;
}

.sidebar-admin-avatar {
  background: var(--kimchi);
  color: #fff;
  flex-shrink: 0;
}

.sidebar-admin-copy {
  min-width: 0;
}

.sidebar-admin-copy strong,
.sidebar-admin-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sidebar-ink);
}

.sidebar-admin-copy small {
  color: var(--sidebar-muted);
  font-weight: 400;
}

.sidebar-admin-settings,
.sidebar-admin-logout {
  background: var(--surface);
  border: 1px solid var(--sidebar-line);
  color: var(--sidebar-ink-2);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
}

.sidebar-admin-settings:hover,
.sidebar-admin-logout:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink);
}

/* 검색 행 — 브랜드 바로 아래 (2026-08-25 사이드바 개편 승인안) */
.sidebar-search-row {
  padding: 0 12px 8px;
}

.sidebar-search-row .sidebar-search {
  margin-bottom: 0;
}

/* 섹션 라벨 대신 얇은 구분선 */
.nav-divider {
  height: 1px;
  margin: 10px 4px;
  background: var(--sidebar-line);
}

/* 하단 프로필 행 — 아바타 + 이름 + 상하 셰브론 */
.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-family-base);
  text-align: left;
  cursor: pointer;
}

.sidebar-profile:hover {
  background: var(--sidebar-hover);
}

.sidebar-profile:focus-visible {
  outline: 2px solid var(--kimchi);
  outline-offset: 2px;
}

.sidebar-profile .sidebar-admin-copy {
  flex: 1 1 auto;
}

.sidebar-profile-chevron {
  flex-shrink: 0;
  color: var(--sidebar-muted);
}

/* 프로필 드롭다운 — 위로 열림, 테마·설정·로그아웃 수납 */
.profile-menu {
  position: absolute;
  /* 하위 레이어 .popup-menu의 top/right 지정을 무효화 — 위로 열림 */
  top: auto;
  right: auto;
  bottom: calc(100% + 8px);
  left: 12px;
  width: 210px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  z-index: 60;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--text-body-sm);
  font-family: var(--font-family-base);
  text-align: left;
  cursor: pointer;
}

.profile-menu-item:hover {
  background: var(--surface-2);
  color: var(--ink);
}

.profile-menu-item:focus-visible {
  outline: 2px solid var(--kimchi);
  outline-offset: -2px;
}

.profile-menu-item svg,
.profile-menu-item .theme-toggle-icons {
  flex-shrink: 0;
}

/* 프로필 드롭다운은 sidebar-admin 기준으로 배치 */
.sidebar-admin {
  position: relative;
}

/* 상단바에서 옮겨온 유틸리티 — 검색 트리거 (Tremor Input[type=search] 형태) */
.sidebar-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  margin-bottom: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  color: var(--muted);
  font-size: var(--text-body-sm);
  font-family: var(--font-family-base);
  cursor: pointer;
  text-align: left;
}

.sidebar-search:hover {
  background: var(--surface-2);
  color: var(--ink-2);
}

.sidebar-search:focus-visible {
  outline: 2px solid var(--kimchi);
  outline-offset: 2px;
}

.sidebar-search > span {
  flex: 1 1 auto;
}

.sidebar-search kbd {
  flex-shrink: 0;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-family: var(--font-family-base);
  line-height: 1.5;
}

/* 유틸리티 아이콘 버튼 열 (알림·테마·설정·로그아웃) */
.sidebar-admin-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
}

.sidebar-admin-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--sidebar-muted);
  cursor: pointer;
}

.sidebar-admin-icon:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-ink);
}

.sidebar-admin-icon:focus-visible {
  outline: 2px solid var(--kimchi);
  outline-offset: 2px;
}

.sidebar-admin-icon svg {
  display: block;
  stroke: currentColor;
  fill: none;
}

/* 알림 배지 — 종 아이콘 우상단. 링으로 아이콘 획과 분리해 가독성을 확보한다. */
.sidebar-admin-icon .topbar-badge {
  position: absolute;
  top: -1px;
  right: -3px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--destructive);
  box-shadow: 0 0 0 2px var(--sidebar);
  color: #fff;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: -0.2px;
  text-align: center;
  pointer-events: none;
}

/* 알림 팝오버는 사이드바 하단에서 위로 열린다 */
.sidebar-admin .menu-wrap {
  position: relative;
  display: inline-flex;
}

.sidebar-admin .notification-menu {
  top: auto;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  width: min(320px, calc(100vw - 32px));
}

/* 사이드바 하단 관리자 영역·상태 박스 */
.sidebar-status,
.sidebar-admin {
  background: transparent;
}

/* ---------- 전역 글꼴: Noto Sans KR (2026-08-25 KoddiUDOnGothic에서 변경) ----------
 * styles.css의 --font-family-base 토큰을 교체했고, 여기서는 하위 레이어가
 * KoddiUDOnGothic을 직접 지정한 잔여 규칙(gentelella-v4.css 6곳)을 되돌린다. */

:root {
  --font-family-base: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", Arial, sans-serif;
}

html,
body,
button,
input,
select,
textarea,
table {
  font-family: var(--font-family-base);
}

/* gentelella-v4.css가 KoddiUDOnGothic을 직접 지정하던 6곳은
 * 원본에서 var(--font-family-base) 참조로 교체했으므로 별도 오버라이드 불필요. */

/* ---------- 워크스페이스 오프셋 복원 ----------
 * ops-console.css의 margin-inline:auto가 styles.css:1163의
 * margin-left:var(--sidebar-width)를 덮어써 1852px 미만 뷰포트에서
 * 콘텐츠가 고정 사이드바 밑으로 깔리던 잠복 버그를 바로잡는다. */

.workspace {
  margin-left: var(--sidebar-width);
  margin-right: auto;
}

/* 접힘 = 사이드바 전체 숨김 (상단바 패널 토글) — 본문이 전체 폭을 쓴다 */
html.sidebar-collapsed .workspace {
  margin-left: 0;
}

@media (max-width: 900px) {
  .workspace {
    margin-left: 0;
  }
}

/* ---------- 데스크톱 상단바 → 우측 패널 토글 + 경로 (2026-08-25 지시) ----------
 * [▯] │ 성과관리 › 김치과학문화 확산 › 성과지표 개요
 * 패널 아이콘은 사이드바 표시/숨김 토글, 경로는 상위 회색·현재 진하게.
 * 모바일(≤900px)에서는 메뉴 버튼이 필요하므로 기존 바 형태를 유지한다. */

@media (min-width: 901px) {
  .topbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 0;
    padding: 14px 40px 0;
    background: transparent;
    border-bottom: 0;
    box-shadow: none;
  }

  /* 페이지 제목·이전 단일 문자열 경로·모바일 메뉴는 데스크톱에서 감춘다 */
  .topbar .topbar-title {
    display: none;
  }

  /* ops-console.css의 `.page { padding: 24px 28px 40px }` 축약형을 이기도록 함께 지정 */
  .page {
    padding-top: 16px;
    padding-bottom: 40px;
  }
}

@media (max-width: 900px) {
  .topbar {
    background: var(--header-bg);
    border-bottom: 1px solid var(--line);
  }

  /* 모바일은 기존 경로 문자열(#breadcrumb)을 쓰므로 우측 그룹은 감춘다 */
  .topbar-crumb-group {
    display: none;
  }
}

.topbar-crumb-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 사이드바 패널 토글 — 참고 이미지의 사각 패널 아이콘 */
.sidebar-panel-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.sidebar-panel-toggle:hover {
  background: var(--surface-3);
}

.sidebar-panel-toggle:focus-visible {
  outline: 2px solid var(--kimchi);
  outline-offset: 2px;
}

.sidebar-panel-toggle svg {
  display: block;
  stroke: currentColor;
  fill: none;
}

/* 접힘 상태에서는 왼쪽 칸이 채워진 모양으로 상태를 표시 */
html.sidebar-collapsed .sidebar-panel-toggle {
  color: var(--kimchi);
  background: var(--kimchi-soft);
}

.topbar-crumb-divider {
  width: 1px;
  height: 16px;
  background: var(--line-strong);
}

/* 경로 — 상위 회색 › 현재 진하게 (참고 이미지: Home › Quotes) */
.breadcrumb-trail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  white-space: nowrap;
}

.breadcrumb-seg {
  color: var(--muted);
}

.breadcrumb-seg.is-current {
  color: var(--ink);
  font-weight: 600;
}

.breadcrumb-chevron {
  flex-shrink: 0;
  color: #9ca3af;
}

/* ---------- 본문 컨테이너 여백 ----------
 * 데스크톱 좌우 200px (2026-08-25 지시 #5). 사이드바(252px)를 뺀 본문 폭이
 * 지나치게 좁아지지 않도록 1280px 미만에서는 단계적으로 줄인다. */

.page {
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 640px) {
  .page {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) {
  .page {
    padding-left: 40px;
    padding-right: 40px;
  }
}

@media (min-width: 1280px) {
  .page {
    padding-left: 200px;
    padding-right: 200px;
  }

  .topbar {
    padding-left: 200px;
    padding-right: 200px;
  }
}

/* ========================================================================
 * Tremor 타이포그래피 스케일
 * 기획 지시 #40: Page 24 / Section 18 / Card 14~16 / Body 14 / Meta 12 / Metric 28~32
 * ===================================================================== */

.page h1,
.hero-row h1,
.compact-hero h1 {
  font-size: 24px;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.page .hero-row > div > p,
.page .compact-hero p,
#dashboardHeroCopy {
  font-size: var(--text-body-sm);
  color: var(--muted);
  max-width: 78ch;
}

.dashboard-section-heading h2,
.page section > header h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.panel-header h2,
.panel-header h3 {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* gentelella가 패널 헤더에 깔던 밝은 그라디언트 제거 — 다크 모드에서 은색 띠로 보임 */
.panel-header,
.panel > header,
.gka-dash-panel > header {
  background: transparent !important;
}

.section-sub {
  font-size: 12px;
  color: var(--muted);
}

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ========================================================================
 * 카드 계층 — Tremor는 두 종류만 쓴다.
 *   (1) 지표 블록: 테두리 없음. 여백과 타이포로만 구분한다. (Overview)
 *   (2) 컨테이너 카드: 1px 테두리 + radius 8 + shadow 없음. (표·목록·폼)
 * 기존의 "모든 것이 상자" 상태를 이 두 계층으로 정리한다.
 * ===================================================================== */

/* (2) 컨테이너 카드 */
.panel,
.gka-dash-panel,
.project-command,
.settings-block,
.login-card,
.modal-card,
.empty-state,
.dashboard-inline-state {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: none !important;
}

/* ---------- 페이지 헤더 메타 (기획 지시 #15 Page Header) ----------
 * 기준일 칩이 페이지 제목보다 강하게 보이던 문제를 낮춘다.
 * 요청 ID는 개발 추적용이라 화면에 노출할 이유가 없다 — 감춘다. */

.source-chip {
  border: 1px solid var(--line) !important;
  border-radius: 4px !important;
  background: var(--surface-2) !important;
  color: var(--muted) !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
}

.dashboard-filter-meta {
  font-size: 11px;
  color: var(--muted);
}

#dashboardRequestMeta {
  display: none !important;
}

/* (1) 지표 블록 — 상자를 벗기고 타이포·여백으로 세운다 */
.metric-card,
.dashboard-metric-card,
.gka-dash-metric,
.quality-strip > *,
.kpi2-card,
.command-stats > div {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ---------- 업무 대기열 스트립 (기획 지시 #16) ----------
 * "내 초안 / 제출됨 / 검토 중 / 보완 요청 / 승인 대기 / 최근 반려" 6개는
 * 모두 KPI가 아니라 하나의 파이프라인 상태다. 6개의 큰 상자 대신
 * 구분선으로 나뉜 한 줄 스트립으로 묶어 세로 공간을 3분의 1로 줄인다. */

.dashboard-work-queue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.dashboard-work-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--line) !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
}

.dashboard-work-card:first-child {
  border-left: 0 !important;
}

.dashboard-work-card:hover {
  background: var(--surface-2) !important;
}

.dashboard-work-card-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.dashboard-work-card strong {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* 값이 0이면 시선을 끌 이유가 없다 — 회색으로 낮춘다 */
.dashboard-work-card[aria-label*=" 0건"] strong {
  color: #9ca3af;
}

.dashboard-work-card strong small {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}

/* 좁은 화면에서는 줄바꿈된 칸의 위쪽 구분선도 필요하다 */
@media (max-width: 900px) {
  .dashboard-work-queue {
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard-work-card {
    border-top: 1px solid var(--line) !important;
  }

  .dashboard-work-card:nth-child(-n + 2) {
    border-top: 0 !important;
  }

  .dashboard-work-card:nth-child(odd) {
    border-left: 0 !important;
  }
}

/* ---------- 성과 검토·승인 (#/workflow) — Task Queue (기획 지시 #30) ---------- */

/* 상태 요약 스트립 — 홈의 업무 대기열과 동일한 시각 문법 */
.workflow-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.workflow-summary-grid > button,
.workflow-summary-grid > * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px !important;
  border: 0 !important;
  border-left: 1px solid var(--line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left;
  cursor: pointer;
}

.workflow-summary-grid > :first-child {
  border-left: 0 !important;
}

.workflow-summary-grid > button:hover {
  background: var(--surface-2) !important;
}

.workflow-summary-grid > button > span {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

.workflow-summary-grid > button > strong {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

.workflow-summary-grid > button[aria-label$=" 0건"] > strong {
  color: #9ca3af;
}

/* 역할 안내 리본 — 정보성 한 줄, 좌측 인디고 강조선 */
.workflow-role-notice {
  border: 0 !important;
  border-left: 3px solid var(--kimchi) !important;
  border-radius: 0 !important;
  background: var(--kimchi-soft) !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  font-size: 12px;
}

/* 마스터-디테일 분할 — 목록에 더 많은 폭 (60/40 → 항목 선택 전에는 목록이 주인공) */
.workflow-layout {
  align-items: start;
}

/* 큐 행 — 제목이 링크 역할을 하고, 행 전체가 클릭 대상이다 */
.workflow-queue tbody tr {
  cursor: pointer;
}

.workflow-cell-title {
  min-width: 200px;
}

.workflow-row-open {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--text-body-sm);
  font-weight: 600;
  font-family: var(--font-family-base);
  text-align: left;
  cursor: pointer;
}

.workflow-row-open:hover {
  color: var(--kimchi);
}

.workflow-cell-title small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

/* 영역 이름은 메타 줄 안의 색 글자로만 — 상자 배지 아님 */
.workflow-cell-title .workflow-domain {
  display: inline;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.workflow-cell-title .domain-gka { color: #0e7490; }
.workflow-cell-title .domain-pims { color: #7c3aed; }
.workflow-cell-title .domain-kscia { color: #b45309; }

/* ---------- 앰배서더 명단 — 프로필 카드 그리드 (2026-08-25 사용자 지시) ----------
 * 데스크톱 3열 × 3행(9명/쪽), 상단 인디고 액센트 바, 큰 아바타(96px) +
 * 국문/영문 이름 + 국기, 지역·역할 칩, 이력 한 줄씩, 하단 상태·활동 현황 토글. */

.ambassador-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1024px) {
  .ambassador-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .ambassador-card-grid { grid-template-columns: 1fr; }
}

.ambassador-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

/* 상단 액센트 바 — 참고 이미지의 파란 헤더 스트립 */
.ambassador-card::before {
  content: "";
  display: block;
  height: 4px;
  background: var(--kimchi);
  opacity: 0.85;
}

.ambassador-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-md);
}

.ambassador-card-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  padding: 16px;
  border: 0;
  background: transparent;
  font-family: var(--font-family-base);
  text-align: left;
}

.ambassador-card-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* 사진 2배 (48 → 96px) — 지시 #2 */
.ambassador-card .person-avatar {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  color: var(--ink-2);
  font-weight: 700;
  font-size: 28px;
}

.ambassador-card .person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ambassador-card-names {
  /* 상태 배지와 같은 라인에서 이름이 남는 폭을 모두 쓰도록 */
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.ambassador-card-names strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ambassador-card-names small {
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ambassador-card-country {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-2);
}

.ambassador-card-country .country-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  vertical-align: -2px;
}

.ambassador-card-country .country-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ambassador-card-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* 이력 — 한 줄씩 (지시 #3). 각 항목은 한 줄로 말줄임, 최대 3줄 표시. */
.ambassador-card-bio-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: calc((12px * 1.5 + 4px) * 3 - 4px);
}

.ambassador-card-bio-list li {
  position: relative;
  padding-left: 12px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  /* 한 줄을 넘으면 두 줄까지 표시 (2026-08-25 지시) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ambassador-card-bio-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--chart-neutral);
}

.ambassador-card-bio-list .ambassador-card-bio-more {
  color: var(--muted);
}

.ambassador-card-bio-list .ambassador-card-bio-more::before {
  background: transparent;
}

.ambassador-card-bio-empty {
  margin: 0;
  font-size: 12px;
  color: #9ca3af;
  min-height: calc((12px * 1.5 + 4px) * 3 - 4px);
}

/* 활동 계획·완료 KPI — 카드 하단, 라벨과 수치를 한 줄로 (2026-08-25 지시) */
.ambassador-card-stats {
  display: flex;
  gap: 0;
  margin-top: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ambassador-card-stats > span {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-left: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
}

.ambassador-card-stats > span:first-child {
  border-left: 0;
}

.ambassador-card-stats em {
  font-style: normal;
  font-size: 11.5px;
  color: var(--muted);
}

.ambassador-card-stats strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.ambassador-card-stats strong small {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 1px;
}

.ambassador-card-stats strong.is-zero {
  color: #9ca3af;
}

/* 프로필 카드 팝업 (지도에서 열기) */
.ambassador-card-popup .ambassador-card {
  max-width: 420px;
  margin: 0 auto;
}

/* 상태 배지 — 사진·이름과 같은 라인, 오른쪽 정렬 작은 토글형 캡션 (2026-08-25 지시) */
.ambassador-card .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.ambassador-card-head .ambassador-card-status {
  margin-left: auto;
  align-self: flex-start;
  flex-shrink: 0;
  border-radius: 999px;
  /* 카드 폭(≈250px)에서 이름 공간을 지키기 위한 소형 캡션 */
  padding: 2px 7px;
  font-size: 10px;
  gap: 4px;
}

/* 점 반짝임 — 라이브 인디케이터 펄스 */
.ambassador-card .status-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: currentColor;
  animation: statusTwinkle 1.6s ease-in-out infinite;
}

@keyframes statusTwinkle {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.45); }
  50% { opacity: 0.45; box-shadow: 0 0 0 3px rgba(5, 150, 105, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .ambassador-card .status-badge::before {
    animation: none;
  }
}

.ambassador-card .status-badge.active {
  background: #ecfdf5;
  color: #065f46;
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.3);
}

.ambassador-card .status-badge.dormant {
  background: #fffbeb;
  color: #92400e;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.3);
}

.ambassador-card .status-badge.ended {
  background: #f9fafb;
  color: #4b5563;
  box-shadow: inset 0 0 0 1px rgba(107, 114, 128, 0.3);
}

/* 카드 그리드를 감싸던 표 래퍼의 테두리 제거 */
#ambassadorTable {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}

/* ---------- GKA 활동 현황 — Tremor 스파크라인 KPI 카드 4종 (2026-08-25 승인안) ---------- */

.gka-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 무테두리 블록이라 카드 시절보다 넉넉한 간격으로 열을 구분한다 (Addendum 2) */
  gap: 28px;
  margin-bottom: 20px;
}

@media (max-width: 1100px) {
  .gka-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
  .gka-kpi-grid { grid-template-columns: 1fr; }
}

/* 지표 블록 — 무테두리·무배경 (Addendum 2·11). 2026-09-11 전폭 지도 히어로에서 카드 테두리를 걷어냈다. */
.gka-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.gka-kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gka-kpi-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.gka-kpi-value {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.gka-kpi-value small {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  margin-left: 2px;
}

.gka-kpi-value.is-zero {
  color: #9ca3af;
}

/* 보조 캡션 — 2줄 고정 높이로 블록 높이를 맞춘다. 어절 중간 줄바꿈("최다 대한민/국") 금지. */
.gka-kpi-hint {
  display: block;
  min-height: 34px;
  max-height: 34px;
  overflow: hidden;
  font-size: 11.5px;
  line-height: 17px;
  color: var(--muted);
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ---------- GKA 세계지도 — jsvectormap ---------- */

/* styles.css의 구식 장식(라디얼 글로우·inset 그림자)을 걷어낸다.
 * 높이는 세계지도 종횡비(≈2:1)에 맞춰 컨테이너 폭에서 계산 — 우측 잘림 방지. */
.gka-world-map {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 2.05 / 1;
  /* min-height가 종횡비를 깨고 좌우를 자르던 문제 — 비율만 따른다 */
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}

.gka-world-map .jvm-container {
  width: 100%;
  height: 100%;
}

/* 줌 버튼 — Tremor 컨트롤 규격 */
.gka-world-map .jvm-zoom-btn {
  width: 26px;
  height: 26px;
  line-height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-2);
  box-shadow: var(--shadow-xs);
}

.gka-world-map .jvm-zoom-btn:hover {
  background: var(--surface-2);
}

.gka-world-map .jvm-zoom-btn.jvm-zoomin {
  top: 12px;
}

.gka-world-map .jvm-zoom-btn.jvm-zoomout {
  top: 44px;
}

/* 툴팁 — 국가 앰배서더 사진·이름·인원 (호버) */
.jvm-tooltip {
  border-radius: var(--radius);
  background: var(--ink);
  padding: 10px 12px;
  font-family: var(--font-family-base);
  font-size: 12px;
  box-shadow: var(--shadow-lg);
  max-width: 260px;
}

.gka-map-tip {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gka-map-tip strong {
  font-size: 13px;
}

.gka-map-tip-avatars {
  display: flex;
}

.gka-map-tip-avatars img,
.gka-map-tip-avatars i {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.85);
  margin-left: -8px;
  background: #4b5563;
  color: #fff;
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gka-map-tip-avatars img:first-child,
.gka-map-tip-avatars i:first-child {
  margin-left: 0;
}

.gka-map-tip-names {
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
}

.gka-map-tip small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
}

/* 지도 오른쪽 인물 목록 (2026-08-25 지시) — 사진·한글 이름·국가명·역할 세로 나열 */
/* 전폭 지도 히어로 (2026-09-11 승인안 A) — 지도가 1열을 다 쓰고, 인물 목록은 국가 선택 시 지도 아래로 */
.tds-map-hero > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.tds-map-legend {
  font-size: 11.5px;
  color: var(--muted);
}

/* 권역 비율 바 — 지도 바로 아래. 서버 집계값만 표시한다 */
.tds-region-bar {
  margin-top: 14px;
}

.tds-region-bar[hidden] {
  display: none;
}

.tds-region-track {
  display: flex;
  gap: 2px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3);
}

.tds-region-track i {
  display: block;
  height: 100%;
  border-radius: 999px;
}

.tds-region-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
}

.tds-region-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.tds-region-legend-item i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.gka-map-people-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 360px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.gka-map-people-panel[hidden] {
  display: none;
}

.gka-people-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink);
}

.gka-people-head .country-display {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.gka-people-head .country-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
}

.gka-people-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px;
  /* 지도 아래 전폭 배치라 세로 한 줄 대신 여러 열로 채운다 (2026-09-11) */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px;
}

.gka-people-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font-family-base);
  text-align: left;
  cursor: pointer;
}

.gka-people-row:hover {
  background: var(--surface-2);
}

.gka-people-row:focus-visible {
  outline: 2px solid var(--kimchi);
  outline-offset: -2px;
}

.gka-people-avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 999px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
}

.gka-people-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gka-people-avatar i {
  font-style: normal;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
}

.gka-people-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.gka-people-copy strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gka-people-copy small {
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gka-people-empty {
  margin: 0;
  padding: 16px 12px;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Tremor Select — 모든 스크롤 선택(드롭다운) 통일 (2026-08-25 지시) ---------- */

.tds-select {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

/* 네이티브 select는 투명하게 겹쳐 Tab 포커스·프로그램 값 설정을 그대로 받는다 */
.tds-select > select.tds-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
  margin: 0;
  box-shadow: none;
}

.tds-select-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 5px 10px;
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-body-sm);
  font-family: var(--font-family-base);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
}

.tds-select-trigger:hover {
  background: var(--surface-2);
}

/* 키보드 포커스는 네이티브 select에 있으므로 래퍼 focus-within으로 표시 */
.tds-select:focus-within .tds-select-trigger {
  border-color: var(--kimchi);
  box-shadow: 0 0 0 2px rgba(78, 70, 220, 0.2);
}

.tds-select.is-disabled .tds-select-trigger {
  background: var(--surface-3);
  color: #9ca3af;
  cursor: not-allowed;
  box-shadow: none;
}

.tds-select-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tds-select-chevron {
  flex-shrink: 0;
  color: var(--muted);
}

/* 펼침 패널 — 참고 이미지: 흰 바탕, 8px 라운드, 낮은 그림자, 체크 표시 */
.tds-select-menu {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  min-width: max(100%, 180px);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}

.tds-select-menu.is-up {
  top: auto;
  bottom: calc(100% + 4px);
}

.tds-select-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px 7px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--text-body-sm);
  font-family: var(--font-family-base);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.tds-select-item:hover,
.tds-select-item.is-active {
  background: var(--surface-3);
}

.tds-select-item[aria-selected="true"] {
  font-weight: 600;
}

.tds-select-item:disabled {
  color: #9ca3af;
  cursor: not-allowed;
}

.tds-select-check {
  width: 16px;
  flex-shrink: 0;
  display: inline-flex;
  justify-content: center;
  color: var(--ink);
}

/* 폼 레이아웃 안에서 select가 차지하던 자리를 래퍼가 대신한다 */
label.field .tds-select,
.dashboard-filter-fields .tds-select,
.filter-bar .tds-select {
  width: 100%;
}

/* ---------- KSCIA — 시범 데이터의 시각 톤 다운 (기획 지시 #32·#59·#76) ----------
 * 짙은 청록 그라디언트 히트 패널은 시범(SAMPLE) 데이터를 공식 대시보드처럼
 * 보이게 만들고, 시스템의 중립 카드 문법과도 어긋난다. 히트 강도는 좌측
 * 강조선 하나로만 남기고 바탕은 중립 카드로 되돌린다. */

.kscia-heat-domain {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--heat, var(--line-strong));
  border-radius: var(--radius);
}

/* 히트 색은 좌측 강조선과 로마자 칩·점수 색으로만 표현 */
.kscia-heat-domain .kscia-heat-score {
  color: var(--ink);
}

/* 지표 개요 숫자 밑의 다색 그라디언트 언더라인 제거 (metric block은 무장식) */
.kscia-overview-metrics .metric-card > span:last-child {
  border-bottom: 0 !important;
  background: none !important;
}

/* 진행 바 — Tremor ProgressBar처럼 단색으로 (그라디언트 금지) */
.kscia-progress-track > i {
  background: #0d8a6a;
}

/* 지표 타일 — 짙은 청록 채움 대신 중립 타일 + 히트 색 점 표시 */
.kscia-heat-cell {
  background: var(--surface-2) !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-2);
}

.kscia-heat-cell:hover {
  background: var(--surface-3) !important;
}

.kscia-heat-cell span {
  color: var(--muted);
}

.kscia-heat-cell span::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 5px;
  border-radius: 999px;
  background: var(--heat, var(--chart-neutral));
  vertical-align: 1px;
}

.kscia-heat-cell strong {
  color: var(--ink);
}

/* gentelella가 모든 지표 블록 하단에 붙이던 그라디언트 언더라인(::after)과
 * 호버 그림자를 제거한다 — 지표 블록은 장식·인터랙션이 없는 순수 수치다. */
.metric-card::after,
.gka-dash-metric::after,
.dashboard-metric-card::after {
  display: none !important;
}

.metric-card:hover,
.gka-dash-metric:hover,
.dashboard-metric-card:hover {
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 지표 블록 라벨: 굵은 14px (Tremor `font-bold sm:text-sm`) */
.metric-card > span:first-child,
.dashboard-metric-card > span:first-child,
.gka-dash-metric > span:first-child,
.metric-card .metric-label,
.dashboard-metric-card .metric-label {
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: var(--ink);
}

/* 지표 숫자: Tremor Overview는 text-xl(20px)이지만, 기획 지시 #40의
 * Metric 28~32 규격을 따른다. 라벨과의 대비를 확보하기 위한 의도적 상향. */
.metric-card > strong,
.dashboard-metric-card strong,
.gka-dash-metric strong {
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* 지표 블록 사이 간격 — Tremor `gap-14`(56px)는 과하므로 운영 콘솔용으로 32px */
.metric-grid,
.integrated-metrics,
.dashboard-program-grid {
  gap: 32px 28px;
}

/* ========================================================================
 * 필터 툴바 — 상자에서 한 줄 툴바로 (기획 지시 #42)
 * 검색 | 필터1 | 필터2 | 필터3 | 추가필터 | 초기화
 * ===================================================================== */

/* 하위 레이어(styles.css:7780, gentelella-v4.css:6519 등)가 선택자 목록에 ID를
 * 섞어 써서 규칙 전체가 ID 특이도(1,1,0)를 갖는다. 같은 ID 선택자를 명시해
 * 특이도를 맞춘 뒤 캐스케이드 순서로 이긴다. (!important 남용을 피하기 위함) */
#homePage .dashboard-filter-bar,
#ambassadorsPage .filter-bar,
#pimsCitationsPage .filter-bar,
#pimsReviewPage .filter-bar,
.page > .filter-bar,
.dashboard-filter-bar,
.filter-bar,
.list-toolbar,
.plans-toolbar,
.workflow-toolbar,
.workflow-filter-bar,
.kscia-filter-bar,
.gka-plans-filters,
.gka-result-filters,
.pims-press-filters,
.pims-press-toolbar,
.pims-coverage-filters,
.pims-citations-filters,
.queue-toolbar,
.source-ribbon,
.compact-hero,
.automation-strip,
.press-year-groups,
.quality-strip {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  padding-right: 0;
}

/* 툴바는 아래쪽 1px 규칙선으로만 본문과 분리한다 (Tremor sticky filterbar) */
#homePage .dashboard-filter-bar,
#ambassadorsPage .filter-bar,
#pimsCitationsPage .filter-bar,
#pimsReviewPage .filter-bar,
.page > .filter-bar,
.dashboard-filter-bar,
.filter-bar,
.list-toolbar,
.plans-toolbar,
.workflow-toolbar,
.workflow-filter-bar,
.kscia-filter-bar,
.gka-plans-filters,
.gka-result-filters,
.pims-press-filters,
.pims-press-toolbar,
.pims-coverage-filters,
.pims-citations-filters {
  border-bottom: 1px solid var(--line);
  padding-top: 0;
  padding-bottom: 14px;
  margin-bottom: 20px;
}

/* 페이지네이션 — 표 아래 얇은 바 (상자 아님) */
.pagination,
.ambassador-pagination {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 앰배서더 페이저 — 좌: 총원 · 우: 표시 범위 + « ‹ › » (2026-08-25 참고 이미지) */
.ambassador-pagination {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}

.pager-total {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.pager-total strong {
  color: var(--ink);
  font-weight: 600;
}

.pager-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pager-range {
  font-size: 13px;
  color: var(--muted);
}

.pager-range strong {
  color: var(--ink);
  font-weight: 600;
}

.pager-buttons {
  display: flex;
  gap: 6px;
}

.pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.pager-btn:hover:not(:disabled) {
  background: var(--surface-2);
}

.pager-btn:disabled {
  color: #c2c7d0;
  box-shadow: none;
  cursor: not-allowed;
}

.pager-btn:focus-visible {
  outline: 2px solid var(--kimchi);
  outline-offset: 2px;
}

/* 안내 스트립 — 후보 데이터 고지 등. 상자 대신 좌측 강조선. */
.candidate-notice,
.pims-citation-chip,
.dashboard-partial-banner {
  border: 0 !important;
  border-left: 3px solid var(--mustard) !important;
  border-radius: 0 !important;
  background: var(--mustard-soft) !important;
  box-shadow: none !important;
  padding: 8px 12px !important;
  font-size: 12px;
  color: #92400e;
}

/* 툴바 안의 라벨은 컨트롤 위 12px 캡션으로 (세로 공간 절약) */
.dashboard-filter-fields label > span,
.filter-bar label > span {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* 연도 칩 — Tremor Tabs(solid) 느낌의 컴팩트 스위처 */
.year-chip-row {
  gap: 4px;
}

.year-chip-row button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}

.year-chip-row button:hover {
  background: var(--surface-2);
}

.year-chip-row button.active,
.year-chip-row button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* ========================================================================
 * 데이터 테이블 — Tremor 밀도 (기획 지시 #44)
 * 헤더: 배경 없음 · 12px · gray-500 · 하단 1px
 * 본문: 14px · 행 구분선 · hover gray-50
 * ===================================================================== */

table thead th,
.data-table thead th,
.table thead th {
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 1px solid var(--line);
  padding: 9px 12px;
  white-space: nowrap;
}

table tbody td,
.data-table tbody td {
  font-size: var(--text-body-sm);
  color: var(--ink-2);
  padding: 11px 12px;
  border-bottom: 1px solid var(--border-color-light);
}

table tbody tr:hover,
.data-table tbody tr:hover {
  background: var(--surface-2);
}

table tbody tr:last-child td,
.data-table tbody tr:last-child td {
  border-bottom: 0;
}

/* 표는 좁은 화면에서 본문이 아니라 표 자신이 가로 스크롤되게 한다 (반응형 지시 #45) */
.table-wrap,
.table-scroll,
.data-table-wrap {
  overflow-x: auto;
}

/* 컨테이너 안의 컨테이너는 테두리를 벗긴다 — 이중 테두리 방지.
 * (예: .panel > .data-table-wrap, .workflow-queue > .data-table-wrap) */
.panel .data-table-wrap,
.panel .table-wrap,
.workflow-queue .data-table-wrap,
.gka-dash-panel .data-table-wrap,
.settings-block .data-table-wrap {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* 행 선택 — Tremor는 선택 상태도 옅은 틴트로만 표시한다.
 * 기존의 진한 보라 배경은 표 전체의 시선 흐름을 끊었다. */
.data-table-wrap tbody tr.is-selected,
.table-wrap tbody tr.is-selected,
tbody tr.is-selected,
tbody tr[aria-selected="true"] {
  background: rgba(78, 70, 220, 0.06) !important;
  box-shadow: inset 2px 0 0 var(--kimchi);
}

.data-table-wrap tbody tr.is-selected td,
tbody tr.is-selected td {
  color: var(--ink);
}

/* ========================================================================
 * 버튼 — Tremor Button
 * primary는 대표색이 아니라 gray-900이다. 인디고는 활성 탐색·포커스·
 * 데이터 시각화에만 쓰여 화면당 강조점이 하나로 유지된다.
 * ===================================================================== */

.button,
.text-button,
.icon-button {
  white-space: nowrap;
}

.button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-body-sm);
  font-weight: 500;
  box-shadow: var(--shadow-xs);
  transition: background-color 0.1s ease, border-color 0.1s ease;
}

/* Tremor: light `bg-gray-900 text-white` / dark `bg-gray-50 text-gray-900` */
.button.primary {
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}

.button.primary:hover:not(:disabled) {
  background: #1f2937;
  border-color: #1f2937;
}

:root[data-theme="dark"] .button.primary {
  background: #f9fafb;
  border-color: #f9fafb;
  color: #111827;
}

:root[data-theme="dark"] .button.primary:hover:not(:disabled) {
  background: #e5e7eb;
  border-color: #e5e7eb;
}

.button.secondary,
.button:not(.primary):not(.danger):not(.ghost) {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}

.button.secondary:hover:not(:disabled),
.button:not(.primary):not(.danger):not(.ghost):hover:not(:disabled) {
  background: var(--surface-2);
}

.button.ghost {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink);
}

.button.ghost:hover:not(:disabled) {
  background: var(--surface-3);
}

.button.danger {
  background: var(--destructive);
  border-color: var(--destructive);
  color: #fff;
}

.button:disabled {
  box-shadow: none;
  opacity: 1;
  background: var(--surface-3);
  border-color: transparent;
  color: #9ca3af;
  cursor: not-allowed;
}

/* 필터 초기화 — 흐린 회색 대신 본문 잉크색으로 (2026-08-25 지시) */
.filter-reset {
  min-height: 32px;
  height: 32px;
  color: var(--ink);
  font-weight: 500;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
}

.filter-reset:hover {
  background: var(--surface-2);
}

/* 링크형 버튼 — Tremor의 인디고 인라인 링크 */
.text-button {
  color: var(--kimchi);
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 0;
}

.text-button:hover {
  text-decoration: underline;
}

.icon-button {
  border-radius: var(--radius-sm);
}

/* ---------- 입력 — Tremor Input ---------- */

.field input,
.field select,
.field textarea,
.search-field input,
.page select,
.page input[type="text"],
.page input[type="search"],
.page input[type="date"],
.page input[type="number"] {
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-body-sm);
  font-family: var(--font-family-base);
  box-shadow: var(--shadow-xs);
}

.field input::placeholder,
.search-field input::placeholder,
.page input::placeholder {
  color: #9ca3af;
}

/* 포커스: Tremor `focus:ring-2 ring-indigo-200 border-indigo-500` */
.field input:focus,
.field select:focus,
.field textarea:focus,
.search-field input:focus,
.page select:focus,
.page input:focus {
  outline: none;
  border-color: var(--kimchi);
  box-shadow: 0 0 0 2px rgba(78, 70, 220, 0.2);
}

/* 키보드 포커스 링 — Tremor focusRing (접근성 지시 #48) */
.button:focus-visible,
.text-button:focus-visible,
.icon-button:focus-visible,
.nav-item:focus-visible,
.nav-toggle:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--kimchi);
  outline-offset: 2px;
}

/* 세그먼트 컨트롤 → Tremor solid tabs */
.segmented-control {
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 2px;
  box-shadow: none;
}

.segmented-control button,
.segmented-control [role="tab"] {
  border-radius: 5px;
  color: var(--muted);
  font-weight: 400;
}

.segmented-control button.active,
.segmented-control button[aria-pressed="true"],
.segmented-control [role="tab"][aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  box-shadow: var(--shadow-xs);
}

/* ========================================================================
 * 배지 — Tremor Badge
 * `rounded px-1.5 py-0.5 text-xs font-semibold ring-1` + 50틴트 배경 + 600/30 링.
 * 테두리(border)가 아니라 링(box-shadow inset)을 쓰므로 배지 크기가
 * 글자 높이에 정확히 맞아 표 안에서 행 높이를 밀어내지 않는다.
 * ===================================================================== */

.status-badge,
.data-badge,
.health-pill,
.badge,
.tds-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  /* 기본(default) = 인디고 */
  background: #eef2ff;
  color: #3730a3;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.3);
}

/* neutral — 중립 상태·변화량 */
.badge.neutral,
.status-badge.neutral,
.data-badge.neutral,
.tds-badge.neutral,
.status-badge[data-status="planned"],
.status-badge[data-status="draft"],
.status-badge[data-status="archived"] {
  background: #f9fafb;
  color: #374151;
  box-shadow: inset 0 0 0 1px rgba(107, 114, 128, 0.3);
}

/* success — 공식 승인·완료 */
.badge.success,
.status-badge.success,
.data-badge.success,
.health-pill.ok,
.tds-badge.success,
.status-badge[data-status="approved"],
.status-badge[data-status="completed"],
.status-badge[data-status="official"] {
  background: #ecfdf5;
  color: #065f46;
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.3);
}

/* warning — 검토 필요·보완 요청 */
.badge.warning,
.status-badge.warning,
.data-badge.warning,
.health-pill.warn,
.tds-badge.warning,
.status-badge[data-status="under_review"],
.status-badge[data-status="submitted"],
.status-badge[data-status="needs_fix"] {
  background: #fffbeb;
  color: #92400e;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.3);
}

/* error — 반려·차단 */
.badge.error,
.badge.danger,
.status-badge.error,
.status-badge.danger,
.data-badge.error,
.health-pill.bad,
.tds-badge.error,
.status-badge[data-status="rejected"] {
  background: #fef2f2;
  color: #991b1b;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.2);
}

/* ---------- 데이터 계층 배지 (기획 지시 #17·#32·#59) ----------
 * 참고 / 후보 / 공식 승인 — 그리고 시범(SAMPLE) 데이터를 시각적으로
 * 완전히 분리한다. 후보 수치가 공식 성과처럼 보이면 디자인 실패다.
 * 공식만 채도 있는 초록, 후보·시범은 채도를 죽인 중립·앰버로 둔다. */

.tds-layer {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
}

.tds-layer::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}

/* 공식 승인 — 유일하게 확정 성과로 읽혀야 하는 계층 */
.tds-layer[data-layer="official"] {
  background: #ecfdf5;
  color: #065f46;
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.3);
}

/* 후보 — 아직 성과가 아님 */
.tds-layer[data-layer="candidate"] {
  background: #fffbeb;
  color: #92400e;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.3);
}

/* 참고 — 집계에 들어가지 않는 배경 정보 */
.tds-layer[data-layer="reference"] {
  background: #f9fafb;
  color: #4b5563;
  box-shadow: inset 0 0 0 1px rgba(107, 114, 128, 0.3);
}

/* 시범 데이터 — KSCIA. 공식 대시보드처럼 보이지 않게 사선 배경으로 명시 */
.tds-layer[data-layer="sample"] {
  color: #4b5563;
  box-shadow: inset 0 0 0 1px rgba(107, 114, 128, 0.35);
  background-color: #f9fafb;
  background-image: repeating-linear-gradient(
    135deg,
    transparent 0 5px,
    rgba(107, 114, 128, 0.12) 5px 10px
  );
}

/* ---------- 토스트 — 상단 우측, 카드형 ---------- */

.toast {
  left: auto;
  right: 24px;
  top: calc(var(--topbar-h, 56px) + 16px);
  bottom: auto;
  transform: translateY(-8px);
  min-width: 260px;
  max-width: min(400px, calc(100vw - 32px));
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-body-sm);
  line-height: 1.5;
}

.toast.show {
  transform: translateY(0);
}

.toast[data-type="success"] {
  color: var(--ink);
  background: var(--surface);
  border-left-color: var(--success);
}

.toast[data-type="warning"] {
  color: var(--ink);
  background: var(--surface);
  border-left-color: var(--warning);
}

.toast[data-type="error"] {
  color: var(--ink);
  background: var(--surface);
  border-left-color: var(--destructive);
}

/* ---------- 스켈레톤 — 차분한 펄스 ---------- */

.skeleton-line,
.workflow-summary-item.skeleton,
.skeleton-card .skeleton-line {
  background: var(--surface-3);
  border-radius: 4px;
  animation: tremor-pulse 1.6s ease-in-out infinite;
}

.skeleton-card {
  box-shadow: none !important;
}

@keyframes tremor-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- Tremor KPI 카드 3종 (분할 진행바 · 쌍지표+도넛 · 비교 라인) ---------- */

#integratedMetrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
  #integratedMetrics {
    grid-template-columns: 1fr;
  }
}

.kpi2-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px !important;
}

/* 구 metric-card의 하단 그라데이션 잔재 제거 */
.kpi2-card::before,
.kpi2-card::after {
  display: none !important;
}

.kpi2-title {
  color: var(--muted);
  font-size: var(--text-body-sm);
  font-weight: 700;
}

.kpi2-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.kpi2-value small {
  margin-left: 3px;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}

.kpi2-bar {
  display: flex;
  gap: 3px;
  height: 8px;
  margin-top: 2px;
}

.kpi2-seg {
  display: block;
  height: 100%;
  align-self: stretch;
  min-width: 6px;
  border-radius: 9999px;
}

.kpi2-legend {
  display: flex;
  gap: 24px;
  margin-top: 2px;
}

.kpi2-legend-item strong {
  display: block;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.kpi2-legend-item span,
.kpi2-pair-row > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.kpi2-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

.kpi2-pair-wrap,
.kpi2-trend-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.kpi2-pair-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.kpi2-pair-row strong {
  display: block;
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.kpi2-donut {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}

.kpi2-trend-chart {
  flex: 1.4;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
}

.kpi2-trend-chart svg {
  width: 100%;
  height: 78px;
  display: block;
}

.kpi2-trend-x {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: var(--text-xs);
}

.kpi2-empty {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-body-sm);
}

/* ---------- 모달·드로어 ---------- */

.modal-card,
.drawer,
.detail-drawer,
.command-palette {
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

/* ---------- 로그인 ---------- */

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

/* ========================================================================
 * 전 화면 Tremor 잔존 정리 (2026-08-27)
 * 19 라우트 전수 캡처에서 확정 규칙(DESIGN.md Addendum)을 어긴 부분만 같은
 * 문법으로 맞춘다: 지표 블록 무장식 / 툴바 규칙선 / Badge ring / 칩 radius 6 /
 * 인디고 단일 강조 / 표는 표 자신이 가로 스크롤 / 카드 반경 8 / 컨트롤 반경 6.
 * 하위 레이어(gentelella·styles)의 규칙은 지우지 않고 여기서 덮는다.
 * ===================================================================== */

/* ---- 1. 버튼형 KPI 상자 → 지표 블록 (활동계획 관리 · 보도자료 · 전문가 활동 · 전문가 직접 참여 · 데이터 품질) ---- */
.gka-plan-kpi,
.pims-press-stat,
.pims-coverage-qcard,
.pims-coverage-kpi,
.pims-coverage-type,
.pims-expert-direct-card,
.pims-ov-quality-kpis > article {
  display: grid;
  gap: 4px;
  align-content: start;
  padding: 0 0 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  text-align: left;
  min-height: 0;
}

/* 필터로 쓰이는 지표는 선택 상태를 하단 인디고 선 하나로만 표시한다 (Tremor Tabs 문법) */
.gka-plan-kpi.is-selected,
.gka-plan-kpi[aria-pressed="true"],
.pims-press-stat[aria-pressed="true"],
.pims-coverage-qcard.is-active,
.pims-coverage-kpi.is-active,
.pims-coverage-type.is-active {
  background: transparent;
  outline: 0;
  border-color: transparent;
  border-bottom-color: var(--kimchi);
}

/* 하위 레이어의 `.pims-press-stat.is-complete[aria-pressed]` (0,3,0) 사각 외곽선을 같은 특이도로 덮는다 */
.pims-press-stat.pims-press-stat[aria-pressed="true"],
.pims-press-stat.is-complete[aria-pressed="true"],
.pims-press-stat.is-incomplete[aria-pressed="true"] {
  border: 0;
  border-bottom: 2px solid var(--kimchi);
  outline: 0;
  box-shadow: none;
  background: transparent;
}

.gka-plan-kpi:hover:not(:disabled),
.pims-press-stat:hover:not(:disabled),
.pims-coverage-qcard:hover:not(:disabled) {
  background: transparent;
  border-bottom-color: var(--line-strong);
}

.gka-plan-kpi.is-selected:hover,
.gka-plan-kpi[aria-pressed="true"]:hover,
.pims-press-stat[aria-pressed="true"]:hover,
.pims-coverage-qcard.is-active:hover {
  border-bottom-color: var(--kimchi);
}

.gka-plan-kpi > span,
.pims-press-stat > span,
.pims-coverage-qcard > span,
.pims-coverage-kpi > span,
.pims-coverage-type > span,
.pims-expert-direct-card > span,
.pims-ov-quality-kpis > article > span {
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.gka-plan-kpi > strong,
.pims-press-stat > strong,
.pims-coverage-qcard > strong,
.pims-coverage-kpi > strong,
.pims-expert-direct-card > strong,
.pims-ov-quality-kpis > article > strong {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.gka-plan-kpi > strong small,
.pims-expert-direct-card > strong small {
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 2px;
}

.gka-plan-kpi > em,
.pims-coverage-kpi > em,
.pims-coverage-type > em,
.pims-coverage-kpi > p,
.pims-coverage-type > span + span,
.pims-expert-direct-card > p {
  margin: 0;
  font-style: normal;
  font-size: 12px;
  color: var(--muted);
}

.gka-plans-kpi,
.pims-press-summary,
.pims-coverage-quality,
.pims-expert-direct-metrics,
.pims-ov-quality-kpis {
  gap: 20px 32px;
}

/* 전문가 직접 참여 — 설명문이 그리드 한 칸에 갇혀 세로로 찌부러지던 것을 전폭으로 */
.pims-expert-direct-metrics > .hint {
  grid-column: 1 / -1;
  margin: 4px 0 0;
}

/* ---- 2. 남은 툴바 상자 → 규칙선 (언론미디어 현황) ---- */
#pimsOverviewFilters.pims-ov-filters,
.pims-ov-filters {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}

/* 섹션 탭 — 다른 화면의 segmented-control 과 같은 반경·바탕 */
.pims-ov-section-nav {
  border-radius: var(--radius-sm);
  background: var(--surface-3, #f3f4f6);
}

.pims-ov-section-nav [role="tab"],
.pims-ov-section-nav > button {
  border-radius: 5px;
}

/* ---- 3. 알약 칩 → 사각 칩 (개인 활동 결과 상태 · 보도자료 연도) — 홈 연도 칩과 같은 문법 ---- */
.gka-result-status-chip,
.press-year-groups button,
.pims-press-year-rail button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
}

.gka-result-status-chip:hover:not(:disabled),
.press-year-groups button:hover:not(:disabled) {
  background: var(--surface-2);
  transform: none;
}

.gka-result-status-chip.active,
.gka-result-status-chip[aria-pressed="true"],
.press-year-groups button.active,
.press-year-groups button[aria-pressed="true"],
.year-chip-row button.active,
.year-chip-row button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--surface);
}

.gka-result-status-chip.active strong,
.gka-result-status-chip[aria-pressed="true"] strong,
.press-year-groups button.active em,
.press-year-groups button[aria-pressed="true"] em {
  color: inherit;
}

/* ---- 4. 원형·알약 상태 표시 → Tremor Badge (ring + 틴트) ---- */
.info-badge,
.pims-coverage-status,
.domain-chip,
.match-score,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 0;
  height: auto;
  width: auto;
  border: 0;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  text-align: left;
  background: #f9fafb;
  color: #374151;
  box-shadow: inset 0 0 0 1px rgba(107, 114, 128, 0.3);
}

.info-badge.complete,
.pims-coverage-status.is-ok,
.match-score.high {
  background: #ecfdf5;
  color: #065f46;
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.3);
}

.info-badge.duplicate,
.pims-coverage-status.is-warn,
.match-score.ambiguous {
  background: #fffbeb;
  color: #92400e;
  box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.3);
}

.info-badge.incomplete,
.pims-coverage-status.is-danger,
.status-pill.negative {
  background: #fef2f2;
  color: #991b1b;
  box-shadow: inset 0 0 0 1px rgba(220, 38, 38, 0.2);
}

.status-pill.positive {
  background: #ecfdf5;
  color: #065f46;
  box-shadow: inset 0 0 0 1px rgba(5, 150, 105, 0.3);
}

.domain-chip,
.match-score.medium {
  background: #eef2ff;
  color: #3730a3;
  box-shadow: inset 0 0 0 1px rgba(79, 70, 229, 0.3);
}

/* ---- 5. 홈 — 사업 카드는 서로 다른 색으로 구분하지 않는다 · 우선 처리 패널 테두리 중립 ---- */
.project-command {
  border-width: 1px;
  border-top-color: var(--line);
}

.project-command > header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 8px;
}

.project-command > header span,
.kscia-command > header span,
.gka-command > header span,
.pims-command > header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
}

.project-command .domain-state {
  white-space: nowrap;
}

.dashboard-attention-panel {
  border-color: var(--line) !important;
}

.attention-count {
  border-radius: 4px;
}

/* ---- 6. 표 — 본문이 아니라 표가 스크롤한다 · 짧은 열의 글자 세로 낙하 방지 ---- */
#workflowQueueTable.data-table-wrap,
.workflow-queue .data-table-wrap,
#planAmbassadorStatus.data-table-wrap,
#pimsPressTable.data-table-wrap,
.pims-press-table-wrap {
  overflow-x: auto !important;
}

.workflow-table {
  min-width: 720px;
}

.workflow-table.gka-result-table {
  min-width: 940px;
}

.pims-press-table {
  min-width: 720px;
}

#planAmbassadorStatus .data-table {
  min-width: 760px;
}

.data-table th,
.pims-press-table td.col-source,
.pims-press-table td.col-date,
.pims-press-table td.col-status,
#planAmbassadorStatus .data-table td:nth-child(2),
#planAmbassadorStatus .data-table td:nth-child(3) {
  white-space: nowrap;
}

/* ---- 7. 전문가 활동 페이지 — 본문 여백 규칙(200px)을 다른 화면과 동일하게 ---- */
.pims-coverage-page {
  grid-template-columns: minmax(0, 1fr);
  overflow-x: visible;
}

.pims-coverage-page > * {
  min-width: 0;
  max-width: 100%;
}

.pims-coverage-filters {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* ---- 8. 반경 통일 — 카드 8 · 컨트롤 6 (하위 레이어의 10·12px 잔존) ---- */
.data-table-wrap,
.pims-coverage-insights,
.gka-plan-group,
.gka-plan-card,
.pims-coverage-mobile-card,
.pims-coverage-more-menu,
.pims-ov-quality-kpis > article,
.pims-ov-card,
.dashboard-inline-state {
  border-radius: 8px;
}

.button.button,
a.button.button,
.pims-coverage-filter-toggle,
#pimsCoverageSearchClear.ghost {
  border-radius: var(--radius-sm);
}

/* 텍스트 버튼(× · 필터 토글)의 회색 채움 제거 — 고스트 규격 */
.pims-coverage-filter-toggle,
#pimsCoverageSearchClear.ghost,
.modal-card > header > button {
  border: 0;
  background: transparent;
  color: var(--ink-2);
}

/* ========================================================================
 * PIMS 현황 「성과 개요」 연도별 재구성 — C안 확정 (2026-08-28)
 * 스몰 멀티플 3카드(같은 연도 축) + 카드 readout + 참고 지표 행 + 선택 밴드.
 * 사양: 화면설계서 「PIMS 현황 성과 개요 연도별 재구성」 절.
 * ===================================================================== */

.pims-ov-grid-3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

/* 카드당 ~340px 이상 확보될 때만 3열(창 ≥1560px). 그 외에는 세로 스택으로 차트 가독을 지킨다. */
@media (min-width: 1560px) {
  .pims-ov-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 3열 밀도 조정: 연도 라벨은 격번만, 막대 값은 선택·호버 시에만 */
  .pims-ov-grid-3 .pims-ov-bar:nth-child(even) .pims-ov-bar-label {
    visibility: hidden;
  }

  .pims-ov-grid-3 .pims-ov-bar-value {
    visibility: hidden;
  }

  .pims-ov-grid-3 .pims-ov-bar.is-selected .pims-ov-bar-value,
  .pims-ov-grid-3 .pims-ov-bar.is-latest .pims-ov-bar-value,
  .pims-ov-grid-3 .pims-ov-bar:hover .pims-ov-bar-value,
  .pims-ov-grid-3 .pims-ov-bar:focus-visible .pims-ov-bar-value {
    visibility: visible;
  }
}

.pims-ov-readout {
  margin-left: auto;
  align-self: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pims-ov-settings-hint {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.pims-ov-settings-hint .text-button {
  font-size: 12px;
  padding: 0;
}

.pims-ov-ref-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 4px 0 8px;
}

.pims-ov-ref-metrics:empty {
  display: none;
}

.pims-ov-ref-metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pims-ov-ref-label {
  font-size: 12px;
  color: var(--muted);
}

.pims-ov-ref-metric strong {
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.pims-ov-ref-metric strong small {
  font-size: 11px;
  font-weight: 400;
  color: var(--muted);
  margin-left: 1px;
}

.pims-ov-ref-note {
  font-size: 12px;
  color: var(--muted);
}

/* 선택 연도 밴드 — 막대는 버튼 배경, 라인은 히트 rect 채움(JS)으로 동일 톤 */
.pims-ov-bar.is-selected {
  background: rgba(78, 70, 220, 0.08);
  border-radius: 6px;
}

.pims-ov-year-hit {
  cursor: pointer;
}

.pims-ov-year-hit:focus-visible {
  outline: 2px solid var(--kimchi);
  outline-offset: -2px;
}

/* ========================================================================
 * 언론 보도 — 보도자료별 묶음 뷰 (2026-08-28 A안)
 * 그룹 = 컨테이너 카드 1장(헤더 + 기사 표). 요약은 후보/확정/승인 계층을 분리 표기.
 * ===================================================================== */

.pims-citation-views {
  margin-bottom: 10px;
}

.pims-citation-view-host {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 그룹 뷰에서는 호스트의 카드 테두리를 벗기고 그룹이 각자 카드가 된다 */
.pims-citation-view-host:has(.pims-cite-group) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.pims-cite-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  overflow: hidden;
}

.pims-cite-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.pims-cite-group-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pims-cite-group-title strong {
  font-size: 13px;
  color: var(--ink);
}

.pims-cite-group-title span {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.pims-cite-group-stats {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
}

.pims-cite-group-stats b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.pims-cite-group-stats small {
  color: var(--muted);
}

.pims-cite-group.is-unlinked .pims-cite-group-head {
  background: #fffbeb;
}

.pims-cite-suggested {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* ── 인터뷰·기고 스크랩 후보 패널 (2026-08-29, 요구 ③) — 컨테이너 카드 규칙, 후보 계층 배지 ── */
.pims-coverage-scrap { margin-bottom: 16px; }
.pims-coverage-scrap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pims-coverage-scrap-head h2 { display: flex; align-items: center; gap: 8px; }
.pims-coverage-scrap-hint { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); word-break: keep-all; }
.pims-coverage-scrap-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pims-coverage-scrap-empty { margin: 0; padding: 12px 0 4px; font-size: 13px; color: var(--muted); }
.pims-coverage-scrap-table td.scrap-actions { white-space: nowrap; text-align: right; }
.pims-coverage-scrap-table td.scrap-actions .button + .button { margin-left: 6px; }
.pims-coverage-scrap-kw { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
#pimsCoverageScrapStatus[data-type="error"] { color: var(--danger, #b91c1c); }
@media (max-width: 900px) {
  .pims-coverage-scrap-head { flex-direction: column; }
}

/* ── GKA SNS 활동 탐색 패널 (2026-08-29, A안 유튜브) — 컨테이너 카드, 후보 계층 배지 ── */
.gka-sns-scan { margin: 0 0 16px; }
.gka-sns-scan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gka-sns-scan-head h2 { display: flex; align-items: center; gap: 8px; }
.gka-sns-scan-hint { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); word-break: keep-all; }
.gka-sns-scan-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gka-sns-scan-empty { margin: 0; padding: 12px 0 4px; font-size: 13px; color: var(--muted); }
.gka-sns-scan-sub { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.gka-sns-scan-table td.gka-sns-actions { white-space: nowrap; text-align: right; }
.gka-sns-scan-table td.gka-sns-actions .button + .button { margin-left: 6px; }
#gkaSnsScanStatus[data-type="error"] { color: var(--danger, #b91c1c); }
@media (max-width: 900px) { .gka-sns-scan-head { flex-direction: column; } }

.gka-sns-scan-providers { display: inline-flex; gap: 4px; }
#gkaSnsScanStatus[data-type="warn"] { color: var(--warning-ink, #92400e); }