/* Modern Design System Tokens */
:root {
  --bg-main: #f8fafc;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  
  --primary: #0d9488;
  --primary-hover: #0f766e;
  --primary-light: #ccfbf1;
  --primary-dark: #115e59;
  
  --blue-badge: #2563eb;
  --blue-badge-bg: #dbeafe;
  --green-badge: #16a34a;
  --green-badge-bg: #dcfce7;
  --orange-badge: #d97706;
  --orange-badge-bg: #fef3c7;
  --purple-badge: #7c3aed;
  --purple-badge-bg: #ede9fe;

  --chap-orange: #c2410c;
  --chap-orange-bg: #ffedd5;
  --chap-red: #991b1b;
  --chap-red-bg: #fee2e2;
  --chap-sky: #0369a1;
  --chap-sky-bg: #e0f2fe;
  --chap-pink: #be185d;
  --chap-pink-bg: #fce7f3;
  --chap-rose: #be123c;
  --chap-rose-bg: #fff1f2;
  --chap-fuchsia: #86198f;
  --chap-fuchsia-bg: #fae8ff;
  --chap-yellow: #854d0e;
  --chap-yellow-bg: #fef9c3;

  --border-color: #e2e8f0;
  --border-focus: #14b8a6;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.08);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Dark Theme Design System Tokens (Sleek Deep Navy & Emerald) */
[data-theme="dark"] {
  --bg-main: #0a0f1d;
  --bg-card: #131b2e;
  --bg-card-hover: #1e2942;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  
  --primary: #14b8a6;
  --primary-hover: #2dd4bf;
  --primary-light: #134e4a;
  --primary-dark: #5eead4;
  
  --blue-badge: #60a5fa;
  --blue-badge-bg: #1e3a8a;
  --green-badge: #4ade80;
  --green-badge-bg: #14532d;
  --orange-badge: #fbbf24;
  --orange-badge-bg: #78350f;
  --purple-badge: #c084fc;
  --purple-badge-bg: #581c87;

  --chap-orange: #fdba74;
  --chap-orange-bg: #7c2d12;
  --chap-red: #fca5a5;
  --chap-red-bg: #7f1d1d;
  --chap-sky: #7dd3fc;
  --chap-sky-bg: #0c4a6e;
  --chap-pink: #f9a8d4;
  --chap-pink-bg: #831843;
  --chap-rose: #fda4af;
  --chap-rose-bg: #881337;
  --chap-fuchsia: #f0abfc;
  --chap-fuchsia-bg: #701a75;
  --chap-yellow: #fde047;
  --chap-yellow-bg: #713f12;

  --border-color: #243048;
  --border-focus: #2dd4bf;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.35);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.45), 0 2px 4px -2px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.55), 0 4px 6px -4px rgb(0 0 0 / 0.45);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Disable scroll anchoring page-wide. The sticky header card resizes
     mid-scroll (compact toggle), and Chrome's default anchoring tries to
     compensate for content-above-viewport size changes by nudging scrollY —
     fighting an active touch drag and feeling like the page snapping back
     under your finger (mobile-only: desktop wheel/scrollbar scroll isn't
     driven frame-by-frame the same way, so it isn't affected). */
  overflow-anchor: none;
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-main);
  color: var(--text-primary);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* App Header */
.app-header {
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  position: relative;
  z-index: 10;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.brand-logo {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.brand-logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brand-text h1 {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.2;
}

.brand-text p {
  font-size: 11px;
  color: var(--text-secondary);
  line-height: 1.2;
  margin-top: 1px;
}

.badge-version {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 20px;
}

/* Quick Search Box (Center) */
.search-box {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 480px;
}

.search-box .search-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--text-muted);
}

.search-box input {
  width: 100%;
  padding: 8px 36px 8px 38px;
  font-size: 13px;
  border: 1.5px solid var(--border-color);
  border-radius: 24px;
  outline: none;
  background: var(--bg-card-hover);
  color: var(--text-primary);
  transition: all 0.2s ease;
  font-family: inherit;
  box-sizing: border-box;
}

.search-box input:focus {
  border-color: var(--primary);
  background: var(--bg-card);
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.2);
}

/* Mode Tabs & Actions (Right) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mode-tabs {
  display: flex;
  background: var(--bg-card-hover);
  padding: 3px;
  border-radius: 30px;
  gap: 3px;
  border: 1px solid var(--border-color);
}

.tab-btn {
  border: none;
  background: none;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 20px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  white-space: nowrap;
}

.tab-btn.active {
  background: var(--bg-card);
  color: var(--primary-dark);
  box-shadow: var(--shadow-sm);
}

.tab-btn:hover:not(.active) {
  color: var(--text-primary);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  background: var(--bg-card-hover);
  border: 1.5px solid var(--border-color);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

.theme-toggle-btn:hover {
  border-color: var(--primary);
  background: var(--bg-card);
  transform: rotate(15deg) scale(1.05);
}

/* 후보군 목록에 청구건수 숫자 전체 표시 여부 토글 (헤더 검색창 옆) */
.claim-count-toggle-btn {
  background: var(--bg-card-hover);
  border: 1.5px solid var(--border-color);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.claim-count-toggle-btn:hover {
  border-color: var(--primary);
  color: var(--text-primary);
}

.claim-count-toggle-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
}

.theme-toggle-btn:active {
  transform: scale(0.95);
}

.clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
}

/* Responsive Header for Tablets & Mobile */
@media (max-width: 960px) {
  .header-inner {
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px 16px;
  }
  
  .brand {
    order: 1;
  }
  
  .header-actions {
    order: 2;
    margin-left: auto;
  }
  
  .search-box {
    order: 3;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
  }

  .claim-count-toggle-btn {
    order: 4;
  }

  .main-container {
    padding: 0 16px;
    margin: 14px auto 36px auto;
  }
}

@media (max-width: 580px) {
  .header-inner {
    padding: 8px 12px;
    gap: 8px;
  }
  
  .brand-logo {
    width: 34px;
    height: 34px;
  }
  
  .brand-text h1 {
    font-size: 14.5px;
  }
  
  .brand-text p {
    font-size: 10px;
  }
  
  .badge-version {
    font-size: 9.5px;
    padding: 1px 5px;
  }
  
  .header-actions {
    width: 100%;
    order: 3;
    margin-left: 0;
  }

  .mode-tabs {
    width: 100%;
  }

  .tab-btn {
    flex: 1;
    text-align: center;
    padding: 7px 4px;
    font-size: 12px;
    justify-content: center;
  }

  /* 제목 줄 우측 빈공간으로 이동 — 검색창 밑에 혼자 떨어져 나오지 않도록
     brand(order:1)와 같은 줄에 붙이고 margin-left:auto로 우측 정렬 */
  .claim-count-toggle-btn {
    order: 1;
    margin-left: auto;
    padding: 6px 10px;
    font-size: 11.5px;
  }

  .search-box {
    order: 4;
    width: 100%;
  }
  
  .search-box input {
    padding: 7px 30px 7px 32px;
    font-size: 12px;
  }
  
  .main-container {
    padding: 0 10px;
    gap: 16px;
    margin: 10px auto 28px auto;
  }
}

/* Main Layout */
.main-container {
  max-width: 1200px;
  margin: 20px auto 48px auto;
  padding: 0 24px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  flex: 1;
}

.app-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 20px 24px 28px;
}

.footer-signoff {
  font-size: 12px;
  color: var(--text-muted);
}

.app-footer a {
  font-size: 12.5px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.app-footer a:hover {
  color: var(--primary);
}

/* Breadcrumb Navigation */
.breadcrumb-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.breadcrumb-container {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumb-item {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.breadcrumb-item:hover {
  background: var(--bg-card-hover);
  color: var(--primary);
}

.breadcrumb-item.active {
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
}

.breadcrumb-separator {
  color: var(--text-muted);
  font-size: 12px;
}

/* Breadcrumb Action Buttons */
.ucode-nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-settings, .btn-reset {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 6px 13px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.btn-settings {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

.btn-settings:hover {
  background: var(--primary-light);
  border-color: var(--primary);
  color: var(--primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(13, 148, 136, 0.15);
}

.btn-reset:hover {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
  transform: translateY(-1px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
}

.btn-settings:active, .btn-reset:active {
  transform: translateY(0);
}

/* Question Container Card */
.question-container {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 32px;
  box-shadow: var(--shadow-md);
  animation: fadeIn 0.25s ease-out;
}

.step-indicator {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.step-badge {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  background: var(--primary);
  color: #ffffff;
  padding: 4px 10px;
  border-radius: 12px;
}

.step-title-sub {
  font-size: 13px;
  color: var(--text-secondary);
}

.question-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 24px;
}

/* Options Grid */
.options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.option-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.option-card:hover {
  border-color: var(--primary);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.option-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.option-arrow {
  font-size: 16px;
  color: var(--text-muted);
  transition: transform 0.2s;
}

.option-card:hover .option-arrow {
  color: var(--primary);
  transform: translateX(4px);
}

/* Leaf Container Area */
.leaf-container {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  padding: 32px;
  box-shadow: var(--shadow-lg);
  animation: fadeIn 0.3s ease-out;
}

.leaf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 18px;
  margin-bottom: 24px;
}

.leaf-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 8px;
}

.leaf-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.leaf-summary {
  font-size: 14px;
  color: var(--text-secondary);
}

.btn-outline {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.leaf-content-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 28px;
}

@media (max-width: 860px) {
  .leaf-content-grid {
    grid-template-columns: 1fr;
  }
}

.column-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.tip-text {
  font-size: 12px;
  font-weight: normal;
  color: var(--text-muted);
}

.leaf-codes-list, .leaf-ucodes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Recommended Code Card (3-Row Ultra Compact Layout) */
.code-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.code-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
  background: #f8fafc;
}

.code-card.copied {
  border-color: #10b981 !important;
  background-color: #ecfdf5 !important;
  transform: scale(0.99);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
}

.code-card.copied .copy-hint-btn {
  color: #059669 !important;
  background: #dcfce7 !important;
  border-color: #86efac !important;
  font-weight: 700 !important;
}

/* Row 1: Header (Code + Badges) */
.code-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 8px;
}

.code-badge-group {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}

.code-text {
  font-size: 16px;
  font-weight: 800;
  color: var(--primary-dark);
  font-family: monospace;
  letter-spacing: -0.5px;
}

/* Row 2: Korean Name (Full Width, 50-65 chars word-break safe) */
.code-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
  word-break: keep-all;
  margin-bottom: 8px;
}

/* Row 3: Footer (Tags Left + Actions Right) */
.code-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 4px;
  border-top: 1px dashed #f1f5f9;
}

.code-card-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tag-test-note {
  font-size: 11px;
  color: #c2410c;
  font-weight: 600;
  background: #fff7ed;
  padding: 2px 6px;
  border-radius: 4px;
}

.code-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.copy-hint-btn {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  transition: all 0.15s ease;
  white-space: nowrap;
}

.code-card:hover .copy-hint-btn {
  color: var(--primary-dark);
  background: var(--primary-light);
  border-color: var(--primary);
}

.code-note {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
}

/* Badges */
.badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
}

.badge-complete {
  background: var(--green-badge-bg);
  color: var(--green-badge);
}

.badge-main {
  background: var(--blue-badge-bg);
  color: var(--blue-badge);
}

.badge-caution {
  background: var(--orange-badge-bg);
  color: var(--orange-badge);
}

.badge-ucode {
  background: var(--purple-badge-bg);
  color: var(--purple-badge);
}

/* Modal for Settings */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 800px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fadeIn 0.2s ease-out;
}

.modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.modal-header h3 {
  font-size: 18px;
  font-weight: 800;
}

.modal-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
}

.modal-actions-bar {
  padding: 12px 24px;
  background: var(--bg-card-hover);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.modal-action-divider {
  color: var(--border-color);
  font-size: 12px;
  margin: 0 2px;
}

.btn-mini-action {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 5px 11px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
}

.btn-mini-action:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  color: var(--text-primary);
}

.btn-mini-action.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.25);
}

.btn-comp-filter {
  background: var(--purple-badge-bg);
  border-color: var(--purple-badge);
  color: var(--purple-badge);
}

.btn-comp-filter:hover {
  background: var(--purple-badge);
  border-color: var(--purple-badge);
  color: #ffffff;
}

.btn-comp-filter.active {
  background: var(--purple-badge);
  border-color: var(--purple-badge);
  color: #ffffff;
}

.herbs-checklist-grid {
  padding: 20px 24px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  flex: 1;
}

.herb-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s ease;
  background: var(--bg-card);
}

.herb-check-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.herb-check-item input {
  margin-top: 3px;
  cursor: pointer;
  accent-color: var(--primary);
}

.herb-check-info {
  flex: 1;
  min-width: 0;
}

.herb-check-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.herb-tag-frequent {
  background: var(--orange-badge-bg);
  color: var(--orange-badge);
  border: 1px solid var(--orange-badge);
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
}

.herb-check-summary {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  line-height: 1.4;
}

.herb-option-card {
  padding: 16px 18px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.herb-option-card:hover {
  border-color: var(--primary);
  background: var(--bg-card-hover);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.12);
  transform: translateY(-2px);
}

.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: flex-end;
  background: var(--bg-card-hover);
}

.btn-primary {
  background: var(--primary);
  color: #ffffff;
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.btn-primary:hover {
  background: var(--primary-hover);
}

.empty-stats-msg {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 12px 0;
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #0f172a;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2000;
  pointer-events: none;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   MST Intelligent Negative Filtering Section Styles
   ========================================================================== */
.mst-filter-section {
  animation: fadeIn 0.25s ease-out;
}

.mst-header-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96) 0%, rgba(30, 41, 59, 0.96) 100%);
  color: #ffffff;
  padding: 16px 24px;
  border-radius: var(--radius-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 0;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: sticky;
  top: 10px;
  z-index: 95;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: padding 0.22s ease, gap 0.22s ease;
  overflow: hidden;
  /* This card shrinks (padding/gap) when it toggles .header-compact while
     stuck. Sticky elements still reserve their own box size at their
     original flow position, so that shrink reduces flow height above the
     viewport — and Chrome's default scroll anchoring then auto-adjusts
     scrollY to compensate, which feels like the page magnet-pulling back
     up during slow scroll (fast scroll/scrollbar drag skips past it).
     Opting this element out of anchoring removes that fight. */
  overflow-anchor: none;
}

/* Compact single-row form while the sticky card is actually pinned to the
   top during scroll — keeps the remaining-count counter always visible
   without permanently eating a large chunk of a short (mobile) viewport. */
.mst-header-card.header-compact {
  padding: 8px 16px;
  gap: 12px;
}

.mst-header-card.header-compact .mst-scope-badge,
.mst-header-card.header-compact .mst-title,
.mst-header-card.header-compact .mst-desc {
  display: none;
}

.mst-header-card.header-compact .mst-badge-row {
  margin-bottom: 0;
  flex-wrap: nowrap; /* keep it one row so the breadcrumb ellipsizes instead of wrapping */
  min-width: 0;
}

/* Current STEP selection breadcrumb — only shown in the compact bar (the
   full card already conveys this via the active chip highlights, so it'd
   be redundant there); short labels so it fits one line on a phone. */
.mst-header-breadcrumb {
  display: none;
}

.mst-header-card.header-compact .mst-header-breadcrumb {
  display: inline-block;
  flex: 1 1 auto;
  font-size: 11px;
  font-weight: 600;
  color: #99f6e4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* On a phone-width screen there isn't room for badge + breadcrumb + counter
   on one line — it wraps to two, defeating the point of "compact". The
   engine badge ("🎯 KAVINATOR 근골격계 엔진") is the least useful piece once
   you're mid-scroll (you already know which engine you're in), so drop it
   here and let the breadcrumb use the freed-up width. */
@media (max-width: 580px) {
  .mst-header-card.header-compact .badge-mst-title {
    display: none;
  }
}

.mst-header-card.header-compact .badge-mst-title {
  font-size: 11px;
  padding: 3px 8px;
}

.mst-header-card.header-compact .mst-header-counter {
  min-width: 0;
  padding: 3px 10px;
  background: transparent;
  border: none;
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.mst-header-card.header-compact .counter-label {
  display: none;
}

.mst-header-card.header-compact .counter-number {
  font-size: 18px;
}

.mst-header-card.header-compact .counter-unit {
  font-size: 12px;
}

.mst-header-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(13, 148, 136, 0.25) 0%, transparent 70%);
  pointer-events: none;
}

.mst-badge-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.badge-mst-title {
  background: rgba(13, 148, 136, 0.35);
  color: #5eead4;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(94, 234, 212, 0.3);
}

.mst-scope-badge {
  background: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
}

.mst-title {
  font-size: 18px;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 6px;
  word-break: keep-all;
}

.mst-desc {
  font-size: 13px;
  color: #94a3b8;
  max-width: 960px;
  word-break: keep-all;
  text-wrap: pretty;
}

.mst-header-counter {
  text-align: right;
  min-width: 140px;
  background: rgba(255, 255, 255, 0.05);
  padding: 12px 18px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.counter-label {
  font-size: 11px;
  color: #94a3b8;
  display: block;
  margin-bottom: 2px;
}

.counter-number {
  font-size: 32px;
  font-weight: 800;
  color: #2dd4bf;
  line-height: 1;
}

.counter-unit {
  font-size: 14px;
  font-weight: 600;
  color: #94a3b8;
  margin-left: 2px;
}

/* Step Containers */
.mst-step-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* U코드 팔강 선택 2단 그리드 (표리/허실/음양/한열) — 각 축이 칩 몇 개뿐이라 풀 너비 한 줄씩 쌓으면
   오른쪽이 휑하게 비어보이는 문제가 있어(원장님 지적, 2026-09-11) 2단으로 배치. 장부 축은 칩이
   11개로 더 많아 이 그리드에는 안 넣고 그대로 1단 풀 너비 유지.
   최소 390px(휴대폰 가로폭 기준)는 보장하되, 그 이상은 고정 상한 없이 1fr로 꽉 채워 늘어나게 해서
   (처음에 430px로 상한을 박았더니 컬럼 사이/장부 앞뒤 여백이 들쭉날쭉해 보였음, 원장님 지적으로 수정)
   항상 정확히 2열을 유지한다. 실제 휴대폰처럼 두 컬럼(390px×2+gap) 합이 뷰포트보다 넓어지는
   좁은 화면에서는 미디어쿼리로 1단으로 접음. */
.pg-axis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(390px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}
.pg-axis-grid .mst-step-container {
  margin-bottom: 0;
}
@media (max-width: 820px) {
  .pg-axis-grid {
    grid-template-columns: 1fr;
  }
}

.mst-step-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.step-num {
  font-size: 11px;
  font-weight: 800;
  background: var(--primary-light);
  color: var(--primary-dark);
  padding: 2px 8px;
  border-radius: 6px;
}

.step-txt {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Step 1 Major Buttons Grid */
.mst-major-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

@media (max-width: 900px) {
  .mst-major-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.mst-major-btn {
  background: var(--bg-card-hover);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.mst-major-btn:hover {
  background: var(--bg-card);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.mst-major-btn.active {
  background: var(--primary-light);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.25);
}

.major-icon {
  font-size: 22px;
}

.major-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}

.major-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
}

.mst-major-btn.active .major-name {
  color: var(--primary-dark);
}

.major-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  background: var(--bg-card);
  padding: 1px 6px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
}

.major-sub-preview {
  font-size: 11px;
  color: var(--text-muted);
}

/* STEP 2 Trauma/Chronic Grid */
.mst-trauma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.mst-trauma-btn {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
  font-family: inherit;
}

.mst-trauma-btn:hover {
  border-color: var(--primary);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.trauma-icon {
  font-size: 24px;
  line-height: 1;
}

.trauma-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.trauma-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.trauma-desc {
  font-size: 11.5px;
  color: var(--text-secondary);
}

.trauma-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-card-hover);
  padding: 2px 8px;
  border-radius: 12px;
  white-space: nowrap;
}

.mst-trauma-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 0 0 1px var(--primary);
}

.mst-trauma-btn.active .trauma-name {
  color: var(--primary-dark);
}

.mst-trauma-btn.active .trauma-count {
  background: var(--primary);
  color: #ffffff;
}

.mst-trauma-btn.btn-trauma.active {
  border-color: var(--orange-badge);
  background: var(--orange-badge-bg);
  box-shadow: 0 0 0 1px var(--orange-badge);
}

.mst-trauma-btn.btn-trauma.active .trauma-name {
  color: var(--orange-badge);
}

.mst-trauma-btn.btn-trauma.active .trauma-count {
  background: var(--orange-badge);
  color: #ffffff;
}

.mst-trauma-btn.btn-chronic.active {
  border-color: var(--blue-badge);
  background: var(--blue-badge-bg);
  box-shadow: 0 0 0 1px var(--blue-badge);
}

.mst-trauma-btn.btn-chronic.active .trauma-name {
  color: var(--blue-badge);
}

.mst-trauma-btn.btn-chronic.active .trauma-count {
  background: var(--blue-badge);
  color: #ffffff;
}

/* STEP 3 Sub Chips & STEP 4 Tissue Chips */
.mst-chips-wrapper,
.mst-tissue-chips-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mst-chip {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  border-radius: 30px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.mst-chip:hover {
  background: var(--bg-card);
  border-color: var(--primary);
  color: var(--text-primary);
}

.mst-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.35);
}

.mst-chip-count {
  font-size: 11px;
  background: rgba(0, 0, 0, 0.08);
  padding: 1px 6px;
  border-radius: 12px;
}

.mst-chip.active .mst-chip-count {
  background: rgba(255, 255, 255, 0.25);
  color: #ffffff;
}

.mst-chip.disabled {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-muted);
  opacity: 0.55;
  cursor: default;
}

.mst-chip.disabled:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-muted);
}

.mst-chip.disabled .mst-chip-count {
  background: var(--border-color);
  color: var(--text-muted);
}

/* STEP 5 Safety Toolbar */
.mst-safety-toolbar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.filter-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-pill-btn {
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
}

.filter-pill-btn:hover {
  background: var(--bg-card);
  border-color: var(--primary);
  color: var(--text-primary);
}

.filter-pill-btn.active {
  background: var(--text-primary);
  color: var(--bg-card);
  border-color: var(--text-primary);
}

.filter-pill-btn.pill-clinical.active {
  background: #15803d;
  border-color: #15803d;
  color: #ffffff;
}

.filter-pill-btn.pill-imaging.active {
  background: #c2410c;
  border-color: #c2410c;
  color: #ffffff;
}

.filter-pill-btn.pill-blood.active {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #ffffff;
}

.pill-count {
  font-size: 10px;
  background: rgba(0, 0, 0, 0.08);
  padding: 0 5px;
  border-radius: 10px;
}

.filter-pill-btn.active .pill-count {
  background: rgba(255, 255, 255, 0.3);
}

.filter-search-wrap {
  position: relative;
  min-width: 240px;
  flex: 1;
  max-width: 400px;
}

.filter-search-wrap input {
  width: 100%;
  padding: 8px 30px 8px 14px;
  border: 1px solid var(--border-color);
  border-radius: 20px;
  font-size: 12.5px;
  font-family: inherit;
  background: var(--bg-card-hover);
  color: var(--text-primary);
  transition: all 0.2s;
}

.filter-search-wrap input:focus {
  outline: none;
  background: var(--bg-card);
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.15);
}

/* Step 4 Candidates Grid */
.mst-candidates-container {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 20px;
  box-shadow: var(--shadow-sm);
}

.candidates-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.candidates-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
}

.candidates-info {
  font-size: 12px;
  color: var(--text-muted);
}

/* Enhanced Code Card for MST */
.code-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.tag-badge {
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
}

.tag-part {
  background: var(--bg-card-hover);
  color: var(--text-secondary);
}

.tag-clinical {
  background: var(--green-badge-bg);
  color: var(--green-badge);
  font-weight: 700;
}

.tag-imaging {
  background: var(--orange-badge-bg);
  color: var(--orange-badge);
  font-weight: 700;
}

.tag-blood {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  font-weight: 700;
}

.tag-tissue {
  background: var(--purple-badge-bg);
  color: var(--purple-badge);
}

.tag-cross {
  background: var(--blue-badge-bg);
  color: var(--blue-badge);
  font-weight: 700;
}

.tag-unspecified {
  background: var(--purple-badge-bg);
  color: var(--purple-badge);
  font-weight: 700;
}

/* 챕터/진단요건 뱃지 - 테마 대응 (var() 기반, 다크모드 자동 전환) */
.tag-chap-orange { background: var(--chap-orange-bg); color: var(--chap-orange); font-weight: 700; }
.tag-chap-red { background: var(--chap-red-bg); color: var(--chap-red); font-weight: 700; }
.tag-chap-sky { background: var(--chap-sky-bg); color: var(--chap-sky); font-weight: 700; }
.tag-chap-amber { background: var(--orange-badge-bg); color: var(--orange-badge); font-weight: 700; }
.tag-chap-pink { background: var(--chap-pink-bg); color: var(--chap-pink); font-weight: 700; }
.tag-chap-rose { background: var(--chap-rose-bg); color: var(--chap-rose); font-weight: 700; }
.tag-chap-violet { background: var(--purple-badge-bg); color: var(--purple-badge); font-weight: 700; }
.tag-chap-fuchsia { background: var(--chap-fuchsia-bg); color: var(--chap-fuchsia); font-weight: 700; }
.tag-chap-emerald { background: var(--green-badge-bg); color: var(--green-badge); font-weight: 700; }
.tag-chap-slate { background: var(--bg-card-hover); color: var(--text-secondary); font-weight: 700; }
.tag-chap-yellow { background: var(--chap-yellow-bg); color: var(--chap-yellow); font-weight: 700; }

.tag-mst-cross {
  background: var(--purple-badge-bg);
  color: var(--purple-badge);
  font-weight: 700;
  border: 1px solid var(--purple-badge);
}

/* U코드 팔강변증(표리·허실·음양·한열) + 장부 태그 - palgang_project 재매칭 결과 (2026-09-11) */
.tag-pg-표 { background: var(--chap-sky-bg); color: var(--chap-sky); font-weight: 700; }
.tag-pg-리 { background: var(--purple-badge-bg); color: var(--purple-badge); font-weight: 700; }
.tag-pg-표리 { background: linear-gradient(90deg, var(--chap-sky-bg), var(--purple-badge-bg)); color: var(--text-primary); font-weight: 700; }
.tag-pg-허 { background: var(--green-badge-bg); color: var(--green-badge); font-weight: 700; }
.tag-pg-실 { background: var(--chap-orange-bg); color: var(--chap-orange); font-weight: 700; }
.tag-pg-허실 { background: linear-gradient(90deg, var(--green-badge-bg), var(--chap-orange-bg)); color: var(--text-primary); font-weight: 700; }
.tag-pg-음 { background: var(--chap-fuchsia-bg); color: var(--chap-fuchsia); font-weight: 700; }
.tag-pg-양 { background: var(--chap-yellow-bg); color: var(--chap-yellow); font-weight: 700; }
.tag-pg-음양 { background: linear-gradient(90deg, var(--chap-fuchsia-bg), var(--chap-yellow-bg)); color: var(--text-primary); font-weight: 700; }
.tag-pg-한 { background: var(--blue-badge-bg); color: var(--blue-badge); font-weight: 700; }
.tag-pg-열 { background: var(--chap-red-bg); color: var(--chap-red); font-weight: 700; }
.tag-pg-한열 { background: linear-gradient(90deg, var(--blue-badge-bg), var(--chap-red-bg)); color: var(--text-primary); font-weight: 700; }
.tag-pg-무 { background: var(--bg-card-hover); color: var(--text-muted); font-weight: 600; border: 1px solid var(--border-color); }
.tag-jangbu {
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 700;
  border: 1px solid var(--primary);
}

/* U코드 상세 패널의 팔강·장부 축 그룹 — "표리" 같은 축 이름은 흐린 라벨로, 실제 값("리")만
   요약 행과 같은 색배지로 분리해 한 줄에 다 뭉쳐 있던 텍스트를 읽기 쉽게 만든다 (2026-09-12). */
.pg-axis-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pg-axis-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.search-map-chip-mst {
  background: var(--purple-badge-bg);
  border-color: var(--purple-badge);
  color: var(--purple-badge);
}

/* =============================================================================
   KAVINATOR Unified Step 0 Domain Selector Styles
   ============================================================================= */
.brand-sub-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  margin-right: 4px;
}

.kavinator-main-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mst-pipeline-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.domain-selector-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  border: 1.5px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.domain-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.step-badge-s0 {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 8px;
  background: var(--text-primary);
  color: var(--bg-card);
  border-radius: 6px;
  letter-spacing: 0.5px;
}

.domain-header-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--text-primary);
}

.domain-header-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
}

.domain-btn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
  position: relative;
}

.domain-btn:hover {
  border-color: var(--primary);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(13, 148, 136, 0.12);
}

.domain-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
  box-shadow: 0 4px 14px rgba(13, 148, 136, 0.2);
}

.domain-icon-wrap {
  font-size: 28px;
  width: 48px;
  height: 48px;
  background: var(--bg-card-hover);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}

.domain-btn.active .domain-icon-wrap {
  background: var(--bg-card);
  border-color: var(--primary);
}

.domain-btn-body {
  flex: 1;
}

.domain-btn-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  word-break: keep-all;
}

.domain-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  background: var(--primary);
  color: #ffffff;
  border-radius: 12px;
}

.domain-badge.badge-internal {
  background: var(--purple-badge);
}

.domain-btn-desc {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}

.domain-right-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.domain-count-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  background: var(--bg-card-hover);
  color: var(--primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  white-space: nowrap;
  letter-spacing: -0.2px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.domain-btn.active .domain-count-badge {
  background: var(--primary);
  color: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.25);
}

.domain-arrow {
  display: none;
}

.internal-pipeline-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ==========================================================================
   Internal Medicine & Specials (한방내과·특과) Step 1 Styles
   ========================================================================== */
.step-internal {
  background: var(--purple-badge) !important;
  color: #ffffff !important;
}

.internal-major-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.internal-major-btn {
  background: var(--bg-card-hover);
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.internal-major-btn:hover {
  background: var(--bg-card);
  border-color: var(--purple-badge);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.12);
}

.internal-major-btn.active {
  background: var(--purple-badge-bg);
  border-color: var(--purple-badge);
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.25);
}

.internal-major-btn.active .major-name {
  color: var(--purple-badge);
}

.internal-major-btn .major-count {
  color: var(--purple-badge);
}

.internal-major-btn.active .major-count {
  background: var(--purple-badge);
  color: #ffffff;
  border-color: var(--purple-badge);
}

.internal-candidates-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.internal-search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card-hover);
  border: 1.5px solid var(--border-color);
  border-radius: 8px;
  padding: 6px 12px;
  min-width: 280px;
  transition: all 0.2s;
}

.internal-search-box:focus-within {
  border-color: var(--purple-badge);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
  background: var(--bg-card);
}

.internal-search-box input {
  border: none;
  outline: none;
  font-size: 12.5px;
  font-family: inherit;
  width: 100%;
  background: transparent;
  color: var(--text-primary);
}

/* ==========================================================================
   Internal Medicine STEP 2 (Safety Toolbar) & STEP 3 (Sub-part Chips)
   ========================================================================== */
.internal-safety-toolbar {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.internal-step-card {
  border-left: 4px solid var(--purple-badge);
}

.sub-part-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ==========================================================================
   Global Quick Search Results View (1-Line Compact + Accordion Panel)
   ========================================================================== */
.search-results-section {
  animation: fadeIn 0.2s ease-out;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-card);
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  gap: 16px;
  flex-wrap: wrap;
}

.search-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-header-title-wrap h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.search-badge-icon {
  font-size: 18px;
}

.search-hint-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 8px;
}

.btn-return-kavinator {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

.btn-return-kavinator:hover {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(13, 148, 136, 0.25);
}

.btn-return-kavinator .btn-icon {
  font-size: 15px;
}

.btn-esc-badge {
  background: rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 1줄 컴팩트 검색 리스트 */
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.search-item-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.search-item-card:hover {
  border-color: #94a3b8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.search-item-card.expanded {
  border-color: #0d9488;
  box-shadow: 0 6px 20px rgba(13, 148, 136, 0.12);
}

/* 1줄 헤더 라인 */
.search-row-summary {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  gap: 14px;
  cursor: pointer;
  user-select: none;
  background: var(--bg-card);
  transition: background 0.15s ease;
}

.search-item-card.expanded .search-row-summary {
  background: var(--bg-card-hover);
  border-bottom: 1px solid var(--border-color);
}

.search-row-code-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex-shrink: 0;
}

.search-row-code {
  font-family: var(--font-mono, monospace);
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text-primary);
  background: var(--bg-card-hover);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  min-width: 68px;
  text-align: center;
  flex-shrink: 0;
}

/* HIRA 한방 청구빈도 데이터가 없는(0건/미확인) 코드 — 경고색(빨강) 대신 무채색으로 흐리게 처리해
   "근거 데이터 없음"을 표시 (빨강은 혈액검사필수/불완전코드 배지와 의미가 겹쳐서 제외) */
.search-row-code-no-data {
  opacity: 0.45;
  border-style: dashed;
  background: transparent !important;
  color: var(--text-muted) !important;
}

/* HIRA 한방 청구빈도 막대 — 최댓값 대비 제곱근 압축 비율 (선형이면 1등 외엔 다 눌려서 제곱근 사용) */
.search-row-freq-bar {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--border-color);
  overflow: hidden;
}

.search-row-freq-bar-fill {
  display: block;
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.2s ease;
}

/* 최다빈도 배지 — 막대의 100% 지점이 실제로 몇 건인지 기준점을 알려줌 */
.search-row-freq-top {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 12px;
  background: var(--orange-badge-bg);
  color: var(--orange-badge);
  white-space: nowrap;
}

/* "📊 청구건수 표시" 토글 ON일 때 최다빈도 외 나머지 항목에 붙는 일반 숫자 배지
   (최다빈도 배지와 색을 다르게 해서 "1등"과 "그냥 참고용 숫자"를 구분) */
.search-row-freq-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
  background: var(--bg-card-hover);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  white-space: nowrap;
}

.search-row-name-wrap {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 1px;
  justify-content: center;
}

.search-row-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.search-row-eng-name {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.search-row-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.search-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 12px;
}

.search-badge.complete {
  background: var(--green-badge-bg);
  color: var(--green-badge);
}

.search-badge.incomplete {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}

.search-badge.main-usable {
  background: var(--green-badge-bg);
  color: var(--green-badge);
}

.search-badge.caution {
  background: var(--orange-badge-bg);
  color: var(--orange-badge);
}

.search-badge.mst-track {
  background: var(--blue-badge-bg);
  color: var(--blue-badge);
}

.search-badge.internal-track {
  background: var(--purple-badge-bg);
  color: var(--purple-badge);
}

/* ==========================================================================
   Responsive Accordion Row (상병명 및 코드 항상 가독성 보장)
   ========================================================================== */
/* 태블릿 및 중간 너비 (<= 960px): 보조 배지 우선 숨김으로 상병명 영역 확장 */
@media (max-width: 960px) {
  .search-row-badges .tag-tissue,
  .search-row-badges .tag-unspecified,
  .search-row-badges .tag-cross,
  .search-row-badges .search-badge.main-usable,
  .search-row-badges .search-badge.complete,
  .search-row-badges .search-badge.mst-track,
  .search-row-badges .search-badge.internal-track {
    display: none !important;
  }
}

/* 소형 태블릿 및 좁은 화면 (<= 768px): 핵심 진단요건/주의 배지만 유지하고 나머지 숨김 */
@media (max-width: 768px) {
  .search-row-summary {
    gap: 10px;
    padding: 8px 12px;
  }
  .search-row-badges span:not(.tag-clinical):not(.tag-imaging):not(.tag-blood):not(.caution) {
    display: none !important;
  }
}

/* 스마트폰 / 모바일 (<= 580px): 우측 배지 전체 숨김 -> 상병코드와 상병명이 가로폭 전체 확보 */
@media (max-width: 580px) {
  .search-row-summary {
    gap: 8px;
    padding: 8px 10px;
  }
  .search-row-code {
    font-size: 12.5px;
    padding: 2px 6px;
    min-width: 56px;
  }
  .search-row-badges {
    display: none !important;
  }
  .search-row-name {
    font-size: 13.5px;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.35;
  }
  .search-row-eng-name {
    font-size: 11px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
  }
}

.search-row-toggle {
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: 4px;
}

.search-item-card.expanded .search-row-toggle {
  transform: rotate(180deg);
  color: var(--primary);
}

/* 아코디언 상세 패널 */
.search-row-details {
  display: none;
  padding: 14px 18px;
  background: var(--bg-card);
  border-top: 1px solid transparent;
  animation: fadeIn 0.2s ease-out;
}

.search-item-card.expanded .search-row-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.search-detail-block {
  background: var(--bg-card-hover);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  border: 1px solid var(--border-color);
}

.search-detail-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-mapping-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.search-map-chip {
  font-size: 11.5px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.search-synonyms-text {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: break-word;
}

.detail-synonyms-block {
  border-left: 3px solid var(--primary) !important;
  background: var(--bg-card-hover) !important;
}

.detail-synonyms-title {
  color: var(--primary) !important;
}

.detail-caution-block {
  border-left: 3px solid #d97706 !important;
  background: rgba(217, 119, 6, 0.08) !important;
}

.detail-caution-title {
  color: #d97706 !important;
}

.detail-full-name {
  color: var(--primary-dark);
}

.detail-eng-name {
  color: var(--blue-badge);
  font-style: italic;
}

.search-actions-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.btn-copy-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0d9488;
  color: #ffffff;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-copy-code:hover {
  background: #0f766e;
}

.btn-copy-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-copy-all:hover {
  background: #e2e8f0;
}

.btn-copy-format-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-copy-format-toggle:hover {
  background: #e2e8f0;
}

.copy-format-panel {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  background: var(--bg-card-hover);
}

.copy-format-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.copy-format-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
}

.copy-format-input {
  flex: 1;
  min-width: 120px;
  padding: 5px 8px;
  font-size: 12.5px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  background: var(--bg-card);
  color: var(--text-primary);
}

.copy-format-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
}

.copy-format-preview {
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-dark);
  margin-top: 4px;
}

.btn-link-ucode-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f3e8ff;
  color: #7e22ce;
  border: 1px solid #d8b4fe;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-link-ucode-action:hover {
  background: #e9d5ff;
  border-color: #c084fc;
}

/* KCD 후보군 & 검색 통합 리스트 컨테이너 (1줄 수직 리스트) */
.code-cards-grid,
.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.search-item-card.kcd-accordion-card {
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   Comprehensive Dark Theme Styling Overrides ([data-theme="dark"])
   ========================================================================== */
[data-theme="dark"] .brand-text h1 {
  color: #f8fafc;
}

[data-theme="dark"] .brand-text p {
  color: #94a3b8;
}

[data-theme="dark"] .step-banner {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .domain-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .domain-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
}

[data-theme="dark"] .domain-btn.active {
  background: #112732;
  border-color: var(--primary);
}

[data-theme="dark"] .domain-icon-wrap {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
}

[data-theme="dark"] .domain-count-badge {
  background: var(--bg-card-hover);
  color: var(--primary);
  border-color: #134e4a;
}

[data-theme="dark"] .domain-btn.active .domain-count-badge {
  background: var(--primary);
  color: #0a0f1d;
  border-color: var(--primary);
}

[data-theme="dark"] .internal-major-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .internal-major-btn:hover {
  background: var(--bg-card-hover);
  border-color: #a855f7;
}

[data-theme="dark"] .internal-major-btn.active {
  background: #231942;
  border-color: #a855f7;
}

[data-theme="dark"] .internal-major-btn .major-count {
  background: #2d1e56;
  color: #c084fc;
}

[data-theme="dark"] .internal-major-btn.active .major-count {
  background: #9333ea;
  color: #ffffff;
}

[data-theme="dark"] .internal-search-box {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
}

[data-theme="dark"] .internal-search-box input {
  background: transparent;
  color: var(--text-primary);
}

[data-theme="dark"] .mst-chip {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .mst-chip:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
}

[data-theme="dark"] .mst-chip.active {
  background: #134e4a;
  border-color: var(--primary);
  color: #5eead4;
}

[data-theme="dark"] .mst-chip .mst-chip-count {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

[data-theme="dark"] .filter-pill-btn {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .filter-pill-btn:hover {
  background: #243048;
  color: var(--text-primary);
}

[data-theme="dark"] .filter-search-wrap input {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .search-row-summary {
  background: var(--bg-card);
}

[data-theme="dark"] .search-item-card.expanded .search-row-summary {
  background: var(--bg-card-hover);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .search-row-code {
  background: #1e293b;
  color: #38bdf8;
  border-color: #334155;
}

[data-theme="dark"] .search-row-name {
  color: #f8fafc;
}

[data-theme="dark"] .search-row-eng-name {
  color: #94a3b8;
}

[data-theme="dark"] .search-row-details {
  background: var(--bg-card);
}

[data-theme="dark"] .search-detail-block {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
}

[data-theme="dark"] .search-detail-title {
  color: #cbd5e1;
}

[data-theme="dark"] .search-map-chip {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: #e2e8f0;
}

[data-theme="dark"] .search-map-chip.search-map-chip-mst {
  background: var(--purple-badge-bg);
  border-color: var(--purple-badge);
  color: var(--purple-badge);
}

[data-theme="dark"] .search-synonyms-text {
  color: #cbd5e1;
}

[data-theme="dark"] .btn-copy-all {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}

[data-theme="dark"] .btn-copy-all:hover {
  background: #334155;
  color: #ffffff;
}

[data-theme="dark"] .btn-copy-format-toggle {
  background: #1e293b;
  color: #e2e8f0;
  border-color: #334155;
}

[data-theme="dark"] .btn-copy-format-toggle:hover {
  background: #334155;
}

[data-theme="dark"] .copy-format-panel {
  border-color: #334155;
}

[data-theme="dark"] .copy-format-input {
  border-color: #334155;
}

[data-theme="dark"] .modal-actions-bar {
  background: #0f172a;
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .btn-mini-action {
  background: #1e293b;
  border-color: var(--border-color);
  color: #94a3b8;
}

[data-theme="dark"] .btn-mini-action:hover {
  background: #334155;
  color: #ffffff;
}

[data-theme="dark"] .btn-comp-filter {
  background: #231942;
  border-color: #4c1d95;
  color: #c084fc;
}

[data-theme="dark"] .btn-comp-filter:hover {
  background: #3b0764;
  color: #e9d5ff;
}

[data-theme="dark"] .herb-check-item {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .herb-check-item:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
}

[data-theme="dark"] .herb-check-name {
  color: #f8fafc;
}

[data-theme="dark"] .herb-check-summary {
  color: #94a3b8;
}

[data-theme="dark"] .modal-footer {
  background: #0f172a;
  border-top-color: var(--border-color);
}

[data-theme="dark"] .btn-outline {
  background: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary);
}

[data-theme="dark"] .btn-reset {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .btn-settings {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .code-card {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .code-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--primary);
}

[data-theme="dark"] .domain-selector-card,
[data-theme="dark"] .mst-step-container,
[data-theme="dark"] .mst-safety-toolbar,
[data-theme="dark"] .mst-candidates-container,
[data-theme="dark"] .search-header-row,
[data-theme="dark"] .internal-safety-toolbar,
[data-theme="dark"] .question-container,
[data-theme="dark"] .leaf-container {
  background: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-sm) !important;
}

[data-theme="dark"] .step-num {
  background: #134e4a !important;
  color: #5eead4 !important;
}

[data-theme="dark"] .step-txt {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .mst-major-btn {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .mst-major-btn:hover {
  background: #1e2942 !important;
  border-color: var(--primary) !important;
}

[data-theme="dark"] .mst-major-btn.active {
  background: #134e4a !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.35) !important;
}

[data-theme="dark"] .mst-major-btn.active .major-name {
  color: #5eead4 !important;
}

[data-theme="dark"] .major-count {
  background: #0a0f1d !important;
  color: #5eead4 !important;
  border-color: #243048 !important;
}

[data-theme="dark"] .mst-trauma-btn {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .mst-trauma-btn:hover {
  background: #1e2942 !important;
  border-color: var(--primary) !important;
}

[data-theme="dark"] .mst-trauma-btn.active {
  background: #134e4a !important;
  border-color: var(--primary) !important;
}

[data-theme="dark"] .mst-trauma-btn.active .trauma-name {
  color: #5eead4 !important;
}

[data-theme="dark"] .mst-trauma-btn.btn-trauma.active {
  background: #78350f !important;
  border-color: #fbbf24 !important;
}

[data-theme="dark"] .mst-trauma-btn.btn-trauma.active .trauma-name {
  color: #fde68a !important;
}

[data-theme="dark"] .mst-trauma-btn.btn-chronic.active {
  background: #1e3a8a !important;
  border-color: #60a5fa !important;
}

[data-theme="dark"] .mst-trauma-btn.btn-chronic.active .trauma-name {
  color: #93c5fd !important;
}

[data-theme="dark"] .trauma-count {
  background: #0a0f1d !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .option-card {
  background: var(--bg-card-hover) !important;
  border-color: var(--border-color) !important;
}

[data-theme="dark"] .option-card:hover {
  background: #1e2942 !important;
  border-color: var(--primary) !important;
}

[data-theme="dark"] .copy-hint-btn {
  background: #1e2942 !important;
  border-color: #243048 !important;
  color: #94a3b8 !important;
}

[data-theme="dark"] .code-card:hover .copy-hint-btn {
  background: #134e4a !important;
  border-color: #14b8a6 !important;
  color: #5eead4 !important;
}

[data-theme="dark"] .code-note {
  background: #1e2942 !important;
  border-color: #243048 !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .empty-stats-msg {
  background: var(--bg-card-hover);
  border-color: var(--border-color);
  color: var(--text-muted);
}