/* ==========================================================================
   인슈어핏 (InsureFit) 암보험 8대 손보사 맞춤 비교 스타일시트 (styles.css)
   Modern FinTech Glassmorphism Design System with Light/Dark Theme Support
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Pretendard:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* Color Palette - Light Theme (Toss & Apple Clean Aesthetic) */
  --bg-primary: #F8FAFC;
  --bg-surface: #FFFFFF;
  --bg-surface-elevated: #FFFFFF;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-subtle: #F1F5F9;
  --bg-hover: #E2E8F0;

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-inverse: #FFFFFF;

  --border-subtle: #E2E8F0;
  --border-strong: #CBD5E1;
  --border-glass: rgba(255, 255, 255, 0.6);

  /* Modern FinTech & Hanwha Brand Accents */
  --brand-primary: #1E60FF;
  --brand-primary-hover: #0B4AE6;
  --brand-gradient: linear-gradient(135deg, #1E60FF 0%, #00B4D8 100%);
  --brand-orange: #FF6B00;
  --brand-orange-hover: #E65100;
  --brand-cyan: #06B6D4;
  --brand-emerald: #059669;
  --brand-amber: #D97706;
  --brand-rose: #E11D48;

  /* Diffused Modern Shadows (Apple & Toss Style) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.06), 0 2px 6px -1px rgba(15, 23, 42, 0.03);
  --shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.08), 0 4px 12px -2px rgba(15, 23, 42, 0.04);
  --shadow-xl: 0 24px 48px -10px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.04);
  --shadow-glow: 0 0 28px rgba(30, 96, 255, 0.22);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  --transition-fast: 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  --font-main: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Pretendard', 'Outfit', sans-serif;
}

/* Dark Theme (Obsidian & Midnight Glass) */
[data-theme="dark"] {
  --bg-primary: #0A0F1D;
  --bg-surface: #111827;
  --bg-surface-elevated: #1F2937;
  --bg-glass: rgba(17, 24, 39, 0.85);
  --bg-subtle: #1E293B;
  --bg-hover: #334155;

  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #64748B;
  --text-inverse: #0F172A;

  --border-subtle: #1E293B;
  --border-strong: #334155;
  --border-glass: rgba(255, 255, 255, 0.08);

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px -2px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px -4px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 24px 48px -10px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 32px rgba(96, 165, 250, 0.25);
}

/* Base Resets */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  letter-spacing: -0.015em;
  transition: background-color var(--transition-normal), color var(--transition-normal);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.025em;
  word-break: keep-all;
  text-wrap: balance;
}

/* Container - 16:9, 16:10, 21:9 반응형 자동 확장 */
.app-container {
  max-width: min(96vw, 1820px);
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
  transition: max-width var(--transition-normal);
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.header-glass {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  background: var(--bg-glass);
  border-bottom: 1px solid var(--border-glass);
  padding: 0.85rem 0;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.header-content {
  max-width: min(96vw, 1820px);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: max-width var(--transition-normal);
}

.logo-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.logo-badge {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--brand-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
  box-shadow: var(--shadow-glow);
}

.logo-text h1 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.logo-text h1 span {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-subtitle {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Navigation Links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-full);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--brand-primary);
  background: var(--bg-subtle);
  transform: translateY(-1px);
}

.nav-link.highlight-nav {
  color: var(--brand-orange);
  background: rgba(255, 107, 0, 0.08);
  border: 1px solid rgba(255, 107, 0, 0.25);
  font-weight: 700;
}

.nav-link.highlight-nav:hover {
  background: rgba(255, 107, 0, 0.16);
  border-color: var(--brand-orange);
  color: var(--brand-orange);
}

/* Header Action Buttons (2-Tier Hierarchy) */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.header-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-kakao-accent {
  background: #FEE500;
  color: #191919;
  box-shadow: 0 2px 8px rgba(254, 229, 0, 0.35);
}

.btn-kakao-accent:hover {
  background: #FADA0A;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(254, 229, 0, 0.5);
}

.btn-sign-accent {
  background: linear-gradient(135deg, #1E60FF 0%, #0052CC 100%);
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(30, 96, 255, 0.35);
}

.btn-sign-accent:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(30, 96, 255, 0.5);
}

/* Sleek Glass Utility Toolbar */
.header-utility-group {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  padding: 0.25rem 0.35rem;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.utility-icon-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.95rem;
  transition: all var(--transition-fast);
}

.utility-icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-subtle);
  transform: translateY(-1px);
}

.btn-screen-lock-quick {
  color: var(--brand-rose);
}

.btn-screen-lock-quick:hover {
  background: rgba(225, 29, 72, 0.1);
  border-color: rgba(225, 29, 72, 0.3);
}

.btn-admin-auth.locked {
  color: var(--text-muted);
}

.btn-admin-auth.unlocked {
  color: var(--brand-emerald);
  background: rgba(5, 150, 105, 0.1);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Accessibility Top Banner */
.accessibility-top-banner {
  background: linear-gradient(90deg, rgba(30, 96, 255, 0.08) 0%, rgba(255, 107, 0, 0.08) 100%);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.65rem 1.5rem;
  margin-top: -1.5rem;
  margin-bottom: 1.75rem;
  backdrop-filter: blur(8px);
}

.top-banner-inner {
  max-width: min(96vw, 1820px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.top-banner-text-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.45;
}

.banner-pill-badge {
  background: var(--brand-primary);
  color: #FFFFFF;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(30, 96, 255, 0.3);
}

.banner-text strong {
  color: var(--brand-primary);
}

.btn-banner-link {
  background: var(--bg-surface);
  color: var(--brand-primary);
  border: 1px solid var(--border-subtle);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.btn-banner-link:hover {
  background: var(--brand-primary);
  color: #FFFFFF;
  border-color: var(--brand-primary);
  transform: translateY(-1px);
}

/* CRM Form & Revision Styles */
.crm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.crm-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.85rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.form-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.form-label .req {
  color: var(--brand-rose);
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  transition: all var(--transition-fast);
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.crm-tab-bar {
  display: flex;
  gap: 0.5rem;
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: 1.25rem;
  padding-bottom: 0.25rem;
}

.crm-tab-btn {
  background: none;
  border: none;
  padding: 0.6rem 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--transition-fast);
}

.crm-tab-btn.active {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

.auto-save-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--brand-emerald);
  font-weight: 700;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
}

.revision-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition-fast);
}

.revision-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.revision-date {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
}

.revision-note {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* ==========================================================================
   Hero Section (김경호 지점장 신뢰의 첫인상 - Toss/Apple 스타일 핀테크 허브)
   ========================================================================== */
.hero-kyungho-section {
  display: grid;
  grid-template-columns: 1.18fr 0.82fr;
  gap: 2.25rem;
  align-items: start;
  margin-bottom: 3.5rem;
  padding: 0.5rem 0 1rem;
}

@media (max-width: 1100px) {
  .hero-kyungho-section {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

.hero-left {
  display: flex;
  flex-direction: column;
}

.hero-badge-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
}

.badge-company, .badge-deaf, .badge-direct, .badge-claim {
  font-size: 0.76rem;
  font-weight: 750;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: -0.01em;
}

.badge-company {
  background: rgba(255, 107, 0, 0.1);
  color: var(--brand-orange);
  border: 1px solid rgba(255, 107, 0, 0.25);
}

.badge-deaf {
  background: rgba(30, 96, 255, 0.1);
  color: var(--brand-primary);
  border: 1px solid rgba(30, 96, 255, 0.25);
}

.badge-direct {
  background: rgba(5, 150, 105, 0.1);
  color: var(--brand-emerald);
  border: 1px solid rgba(5, 150, 105, 0.25);
}

.badge-claim {
  background: rgba(217, 119, 6, 0.1);
  color: var(--brand-amber);
  border: 1px solid rgba(217, 119, 6, 0.25);
}

.hero-headline {
  font-size: clamp(1.85rem, 3.2vw, 2.75rem);
  font-weight: 850;
  line-height: 1.28;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.hero-headline-gradient {
  background: linear-gradient(135deg, #1E60FF 0%, #FF6B00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-desc {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 1.75rem;
  word-break: keep-all;
}

.hero-desc strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* Trust Metric Cards (3-Column Clean Metrics) */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.85rem;
}

@media (max-width: 640px) {
  .trust-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

.trust-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
}

.trust-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-md);
}

.trust-badge-label {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}

.trust-metric {
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--brand-primary);
  line-height: 1.15;
  margin-bottom: 0.35rem;
  font-feature-settings: "tnum";
}

.trust-card:first-child .trust-metric {
  color: var(--brand-orange);
}

.trust-title {
  font-size: 0.92rem;
  font-weight: 750;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.trust-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Hero Primary Action Group */
.hero-primary-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.btn-hero-main-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.45rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #1E60FF 0%, #0052CC 100%);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(30, 96, 255, 0.4);
  transition: all var(--transition-fast);
  text-align: left;
}

.btn-hero-main-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(30, 96, 255, 0.55);
  background: linear-gradient(135deg, #2B6BFF 0%, #005AE0 100%);
}

.btn-hero-main-cta .cta-icon {
  font-size: 1.4rem;
}

.btn-hero-main-cta .cta-text-wrap {
  display: flex;
  flex-direction: column;
}

.btn-hero-main-cta .cta-main-text {
  font-size: 0.96rem;
  font-weight: 800;
  line-height: 1.25;
}

.btn-hero-main-cta .cta-sub-text {
  font-size: 0.74rem;
  opacity: 0.85;
  font-weight: 500;
}

.btn-hero-main-cta .cta-arrow {
  font-size: 1.15rem;
  transition: transform var(--transition-fast);
}

.btn-hero-main-cta:hover .cta-arrow {
  transform: translateX(4px);
}

.btn-hero-kakao-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-full);
  background: #FEE500;
  color: #191919;
  font-size: 0.94rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(254, 229, 0, 0.35);
  transition: all var(--transition-fast);
}

.btn-hero-kakao-cta:hover {
  background: #FADA0A;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(254, 229, 0, 0.5);
}

.btn-hero-sim-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1.5px solid var(--border-strong);
  font-size: 0.92rem;
  font-weight: 750;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-hero-sim-cta:hover {
  background: var(--bg-subtle);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: translateY(-2px);
}

/* Quick Feature Hub (핵심 서비스 4구역 바로가기 그리드) */
.hero-quick-hub {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
}

.quick-hub-title {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}

.quick-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

@media (max-width: 580px) {
  .quick-hub-grid {
    grid-template-columns: 1fr;
  }
}

.quick-hub-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  text-decoration: none;
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.quick-hub-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
  background: var(--bg-surface);
}

.hub-card-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
}

.hub-card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
}

.hub-card-body strong {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--text-primary);
  line-height: 1.3;
}

.hub-card-body span {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.15rem;
}

.hub-card-arrow {
  font-size: 0.85rem;
  color: var(--text-muted);
  transition: transform 380ms cubic-bezier(0.785, 0.135, 0.15, 0.86), color 200ms ease;
}

.quick-hub-card:hover .hub-card-arrow {
  color: var(--brand-primary);
  transform: translateX(6px);
}

.quick-hub-card.hub-amber:hover {
  border-color: var(--brand-amber);
}
.quick-hub-card.hub-amber:hover .hub-card-arrow {
  color: var(--brand-amber);
}

.quick-hub-card.hub-blue:hover {
  border-color: var(--brand-primary);
}

.quick-hub-card.hub-pink:hover {
  border-color: #EC4899;
}
.quick-hub-card.hub-pink:hover .hub-card-arrow {
  color: #EC4899;
}

.quick-hub-card.hub-purple:hover {
  border-color: #7C3AED;
}
.quick-hub-card.hub-purple:hover .hub-card-arrow {
  color: #7C3AED;
}

/* ==========================================================================
   Hero Right: VIP Planner Presentation Card
   ========================================================================== */
.hero-right {
  position: sticky;
  top: 5.5rem;
}

.planner-profile-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
  transition: all var(--transition-normal);
}

.planner-profile-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B00 0%, #1E60FF 100%);
}

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-bottom: 1.15rem;
}

.planner-avatar-wrap {
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}

.planner-profile-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #FFFFFF;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .planner-profile-img {
  border-color: #1E293B;
}

.avatar-verified-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 26px;
  height: 26px;
  background: #1E60FF;
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 900;
  border: 2.5px solid var(--bg-surface);
  box-shadow: 0 2px 6px rgba(30, 96, 255, 0.4);
}

.planner-meta {
  display: flex;
  flex-direction: column;
}

.planner-role-pill {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--brand-orange);
  background: rgba(255, 107, 0, 0.1);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.35rem;
}

.planner-name {
  font-size: 1.45rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

.role-highlight {
  font-size: 1.05rem;
  color: var(--brand-primary);
  font-weight: 750;
}

.planner-motto {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.4;
}

/* Real-Time Status Pill */
.profile-live-status {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.25);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--brand-emerald);
  margin-bottom: 1.25rem;
}

.status-pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 0 rgba(5, 150, 105, 0.5);
  animation: liveStatusPulse 1.8s infinite;
}

@keyframes liveStatusPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(5, 150, 105, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0);
  }
}

/* 3-Box Stats Row */
.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.stat-col {
  display: flex;
  flex-direction: column;
}

.stat-val {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--brand-primary);
  line-height: 1.2;
}

.stat-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 0.15rem;
}

/* Details List in Modern Pill Layout */
.planner-details-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.35rem;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--border-subtle);
}

.detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-label {
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
  width: 78px;
}

.detail-val {
  color: var(--text-primary);
  text-align: right;
  word-break: keep-all;
}

.contact-action-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.phone-number-link {
  color: var(--brand-primary);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: 0.02em;
}

.phone-number-link:hover {
  text-decoration: underline;
}

.btn-quick-sms {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-quick-sms:hover {
  background: var(--brand-primary);
  color: #FFFFFF;
  border-color: var(--brand-primary);
}

.detail-row.highlight-care {
  background: rgba(5, 150, 105, 0.06);
  padding: 0.55rem 0.65rem;
  border-radius: var(--radius-sm);
  border-bottom: none;
}

.text-emerald {
  color: var(--brand-emerald);
}

.planner-card-footer {
  margin-top: 0.5rem;
}

.btn-card-direct-audit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #FF6B00 0%, #E65100 100%);
  color: #FFFFFF;
  border: none;
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.35);
  transition: all var(--transition-fast);
}

.btn-card-direct-audit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.5);
  background: linear-gradient(135deg, #FF7A1A 0%, #F55A00 100%);
}

.btn-card-direct-audit .btn-arrow {
  transition: transform var(--transition-fast);
}

.btn-card-direct-audit:hover .btn-arrow {
  transform: translateX(3px);
}

/* ==========================================================================
   Universal Section Containers & Headers
   ========================================================================== */
.section-container {
  margin-bottom: 4.5rem;
  padding: 2rem 0;
  scroll-margin-top: 5rem;
}

.section-container.bg-surface-raised {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2.75rem 2rem;
  box-shadow: var(--shadow-sm);
}

.section-header-center {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 2.5rem auto;
}

.section-kicker-wrap {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}

.section-kicker {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: rgba(30, 96, 255, 0.08);
  border: 1px solid rgba(30, 96, 255, 0.2);
  padding: 0.28rem 0.75rem;
  border-radius: var(--radius-full);
}

.section-kicker.kicker-amber {
  color: #D97706;
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.25);
}

.section-kicker.kicker-blue {
  color: #0284C7;
  background: rgba(2, 132, 199, 0.1);
  border-color: rgba(2, 132, 199, 0.25);
}

.section-kicker.kicker-green {
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  border-color: rgba(5, 150, 105, 0.25);
}

.section-kicker.kicker-indigo {
  color: #6366F1;
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(99, 102, 241, 0.25);
}

.section-kicker.kicker-pink {
  color: #EC4899;
  background: rgba(236, 72, 153, 0.12);
  border-color: rgba(236, 72, 153, 0.25);
}

.section-kicker.kicker-purple {
  color: #7C3AED;
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.25);
}

.section-kicker.kicker-link {
  text-decoration: none;
  transition: all var(--transition-fast);
}

.section-kicker.kicker-link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.highlight-amber { color: #D97706; }
.highlight-blue { color: #1E60FF; }
.highlight-orange { color: #FF6B00; }
.highlight-emerald { color: #059669; }
.highlight-purple { color: #7C3AED; }
.highlight-pink { color: #EC4899; }
.highlight-indigo { color: #6366F1; }

.section-title {
  font-size: clamp(1.65rem, 2.8vw, 2.25rem);
  font-weight: 850;
  line-height: 1.32;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.section-subtitle {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text-secondary);
  word-break: keep-all;
}

.section-subtitle strong {
  color: var(--text-primary);
  font-weight: 700;
}

/* ==========================================================================
   Section 1.5: Claim Ranking & Differences
   ========================================================================== */
.claim-difference-guide-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.85rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}

.diff-guide-header {
  margin-bottom: 1.5rem;
}

.diff-guide-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}

.diff-badge {
  background: rgba(217, 119, 6, 0.12);
  color: var(--brand-amber);
  border: 1px solid rgba(217, 119, 6, 0.3);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 800;
}

.diff-guide-title-wrap h3 {
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--text-primary);
}

.diff-guide-sub {
  font-size: 0.86rem;
  color: var(--text-muted);
}

.diff-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

@media (max-width: 768px) {
  .diff-cards-grid {
    grid-template-columns: 1fr;
  }
}

.diff-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  transition: all var(--transition-fast);
}

.diff-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.diff-card.highlight-border {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.02);
}

.diff-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.diff-num {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text-muted);
}

.diff-card-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
}

.diff-card-badge.danger {
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
}

.diff-card-badge.blue {
  background: rgba(30, 96, 255, 0.12);
  color: #1E60FF;
}

.diff-card-badge.warning {
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
}

.diff-card-badge.purple {
  background: rgba(124, 58, 237, 0.12);
  color: #7C3AED;
}

.diff-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.65rem;
  line-height: 1.35;
}

.diff-desc {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.diff-visual-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem;
}

.diff-bar-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
}

.bar-lbl {
  width: 130px;
  font-weight: 700;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.bar-track {
  flex-grow: 1;
  height: 10px;
  background: var(--bg-hover);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
}

.bar-fill.green {
  background: #059669;
}

.bar-fill.red {
  background: #EF4444;
}

.bar-val {
  font-weight: 800;
  color: var(--text-primary);
  flex-shrink: 0;
  font-size: 0.74rem;
}

.diff-tip-tag {
  font-size: 0.76rem;
  color: var(--brand-primary);
  font-weight: 700;
  background: rgba(30, 96, 255, 0.08);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  display: inline-block;
}

/* Claim Ranking Hero Highlight Banner */
.claim-ranking-hero-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .claim-ranking-hero-banner {
    grid-template-columns: 1fr;
  }
}

.ranking-highlight-col {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  gap: 1.15rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.ranking-highlight-col:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.ranking-highlight-col:first-child {
  border-left: 4.5px solid var(--brand-orange);
}

.ranking-highlight-col:last-child {
  border-left: 4.5px solid var(--brand-primary);
}

.rank-trophy {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

.rank-highlight-body {
  display: flex;
  flex-direction: column;
}

.rank-badge-pill {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.rank-winner-title {
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}

.winner-rate {
  color: var(--brand-orange);
  font-weight: 900;
}

.rank-winner-desc {
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Segmented Tabs & Tables */
.claim-tabs-wrap {
  margin-bottom: 1.5rem;
}

.claim-segmented-control {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 0.35rem;
  display: flex;
  gap: 0.35rem;
}

@media (max-width: 820px) {
  .claim-segmented-control {
    flex-wrap: wrap;
    border-radius: var(--radius-lg);
  }
}

.claim-pane-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.pane-intro-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.view-mode-toggle {
  display: flex;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 0.2rem;
}

.btn-view-mode {
  background: none;
  border: none;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-view-mode.active {
  background: var(--bg-surface);
  color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
}

.claim-updated-tag {
  font-size: 0.74rem;
  color: var(--text-muted);
  font-weight: 600;
}

/* Clean Fintech Table */
.claim-table-responsive {
  width: 100%;
  overflow-x: auto;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}

.blog-claim-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}

.blog-claim-table th {
  background: var(--bg-subtle);
  padding: 0.95rem 1rem;
  font-weight: 750;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.blog-claim-table td {
  padding: 0.95rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.blog-claim-table tbody tr:hover {
  background: rgba(30, 96, 255, 0.03);
}

.blog-claim-table tbody tr:last-child td {
  border-bottom: none;
}

/* Claim Tips Grid */
.claim-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.15rem;
  margin-bottom: 2rem;
}

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

.claim-tip-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
}

.tip-icon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}

.tip-icon {
  font-size: 1.5rem;
}

.tip-tag {
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(30, 96, 255, 0.1);
  color: var(--brand-primary);
}

.claim-tip-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.5rem;
}

.claim-tip-card p {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 0.65rem;
}

.tip-sub-badge {
  font-size: 0.76rem;
  font-weight: 750;
  color: var(--brand-emerald);
  background: rgba(5, 150, 105, 0.08);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  display: inline-block;
  margin-top: 0.35rem;
}

/* Claim Kyungho Promise Box */
.claim-kyungho-promise-box {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-lg);
}

.promise-box-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.promise-box-header .box-icon {
  font-size: 2.25rem;
}

.promise-box-header h3 {
  font-size: 1.35rem;
  font-weight: 850;
  color: #FFFFFF;
}

.promise-summary-tags-row {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.35rem;
}

.summary-tag-pill {
  font-size: 0.84rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.summary-tag-pill.green strong {
  color: #34D399;
}

.summary-tag-pill.blue strong {
  color: #60A5FA;
}

.promise-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #CBD5E1;
}

.bullet-chk {
  color: #34D399;
  font-weight: 900;
  font-size: 1rem;
}

.promise-contact-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-lbl {
  font-size: 0.74rem;
  color: #94A3B8;
  display: block;
  margin-bottom: 0.25rem;
}

.contact-numbers {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.contact-numbers .phone-link {
  color: #FFFFFF;
  font-weight: 800;
  text-decoration: none;
  font-size: 0.95rem;
}

.contact-numbers .sep {
  color: #64748B;
}

.btn-promise-audit {
  background: linear-gradient(135deg, #FF6B00 0%, #E65100 100%);
  color: #FFFFFF;
  border: none;
  padding: 0.75rem 1.45rem;
  border-radius: var(--radius-full);
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 107, 0, 0.4);
  transition: all var(--transition-fast);
}

.btn-promise-audit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.6);
}

/* ==========================================================================
   Section 2: Insurance Comparison Center
   ========================================================================= */
.easy-terms-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  margin-bottom: 2rem;
}

.easy-terms-header {
  margin-bottom: 1.25rem;
}

.terms-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.terms-icon {
  font-size: 1.75rem;
}

.terms-title {
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.terms-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.terms-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

@media (max-width: 992px) {
  .terms-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 580px) {
  .terms-cards-grid {
    grid-template-columns: 1fr;
  }
}

.comp-nav-container {
  margin-bottom: 1.5rem;
}

.comp-tabs-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 768px) {
  .comp-tabs-bar {
    grid-template-columns: 1fr;
  }
}

.comp-tab-btn {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.comp-tab-btn:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.comp-tab-btn.active {
  border-color: var(--brand-primary);
  background: rgba(30, 96, 255, 0.04);
  box-shadow: 0 4px 16px rgba(30, 96, 255, 0.15);
}

.comp-tab-btn .tab-icon {
  font-size: 1.65rem;
}

.comp-tab-btn .tab-text-wrap {
  display: flex;
  flex-direction: column;
}

.comp-tab-btn .tab-text-wrap strong {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-primary);
}

.comp-tab-btn .tab-text-wrap span {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}

.tab-badge-accent {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: rgba(255, 107, 0, 0.12);
  color: var(--brand-orange);
}

.comp-controls-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1.15rem;
  margin-bottom: 1.5rem;
}

.comp-view-toggle {
  display: flex;
  gap: 0.45rem;
}

.view-toggle-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.view-toggle-btn:hover {
  color: var(--text-primary);
}

.view-toggle-btn.active {
  background: var(--brand-primary);
  color: #FFFFFF;
  border-color: var(--brand-primary);
}

.comp-consult-cta-banner {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-top: 2.5rem;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 900px) {
  .comp-consult-cta-banner {
    flex-direction: column;
    text-align: center;
  }
}

.cta-banner-left .banner-badge {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #60A5FA;
  margin-bottom: 0.35rem;
}

.cta-banner-left h3 {
  font-size: 1.45rem;
  font-weight: 850;
  color: #FFFFFF;
  margin-bottom: 0.6rem;
}

.cta-banner-left p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #CBD5E1;
  max-width: 680px;
}

.cta-banner-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}

.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius-full);
  font-weight: 800;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.cta-btn.cta-kakao {
  background: #FEE500;
  color: #191919;
  box-shadow: 0 4px 14px rgba(254, 229, 0, 0.35);
}

.cta-btn.cta-kakao:hover {
  background: #FADA0A;
  transform: translateY(-2px);
}

.cta-btn.cta-sign {
  background: linear-gradient(135deg, #1E60FF 0%, #0052CC 100%);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(30, 96, 255, 0.35);
}

.cta-btn.cta-sign:hover {
  transform: translateY(-2px);
}

/* ==========================================================================
   Section 3: Promises & Section 3.1: Cases
   ========================================================================== */
.promise-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 900px) {
  .promise-cards-grid {
    grid-template-columns: 1fr;
  }
}

.promise-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: all var(--transition-fast);
}

.promise-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.promise-card.highlight-border {
  border-color: rgba(30, 96, 255, 0.4);
  box-shadow: 0 8px 24px rgba(30, 96, 255, 0.08);
}

.promise-num {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--text-muted);
  position: absolute;
  top: 1.75rem;
  right: 1.75rem;
}

.promise-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  margin-bottom: 1.25rem;
}

.bg-blue-subtle { background: rgba(30, 96, 255, 0.1); }
.bg-emerald-subtle { background: rgba(5, 150, 105, 0.1); }
.bg-rose-subtle { background: rgba(225, 29, 72, 0.1); }

.promise-card h3 {
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
}

.promise-text {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.promise-checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
}

/* Case Studies Grid */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 960px) {
  .case-studies-grid {
    grid-template-columns: 1fr;
  }
}

.case-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}

.case-badge-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}

.case-tag {
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
}

.case-tag.tag-saved {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}

.case-tag.tag-claim {
  background: rgba(5, 150, 105, 0.1);
  color: var(--brand-emerald);
}

.case-tag.tag-health {
  background: rgba(30, 96, 255, 0.1);
  color: var(--brand-primary);
}

.case-who {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 600;
}

.case-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1.15rem;
  line-height: 1.35;
}

.before-after-box {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: auto;
}

.ba-row {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
}

.ba-row.before {
  background: rgba(239, 68, 68, 0.05);
  border-left: 3px solid #EF4444;
}

.ba-row.after {
  background: rgba(5, 150, 105, 0.07);
  border-left: 3px solid #059669;
}

.ba-badge {
  font-weight: 800;
  color: #EF4444;
  flex-shrink: 0;
}

.after-badge {
  color: #059669;
}

.ba-content strong {
  display: block;
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
  color: var(--text-primary);
}

.ba-content p {
  color: var(--text-muted);
  font-size: 0.76rem;
  line-height: 1.4;
}

.ba-arrow {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 750;
  color: var(--brand-primary);
  padding: 0.2rem 0;
}

/* ==========================================================================
   Section 4: Audit Form & Consultation
   ========================================================================== */
.audit-form-wrapper {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 2.5rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2.75rem 2.25rem;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 960px) {
  .audit-form-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem 1.5rem;
  }
}

.audit-form-intro h2 {
  font-size: 1.85rem;
  font-weight: 850;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
  line-height: 1.3;
}

.audit-form-intro p {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.form-trust-points {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.point-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.point-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 540px) {
  .form-row-2 {
    grid-template-columns: 1fr;
  }
}

.form-label-highlight {
  display: block;
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--text-primary);
  margin-bottom: 0.65rem;
}

.comm-mode-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

@media (max-width: 580px) {
  .comm-mode-selector {
    grid-template-columns: 1fr;
  }
}

.comm-option {
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.65rem;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all var(--transition-fast);
}

.comm-option input {
  display: none;
}

.comm-option.active, .comm-option:has(input:checked) {
  border-color: var(--brand-primary);
  background: rgba(30, 96, 255, 0.05);
  box-shadow: 0 2px 8px rgba(30, 96, 255, 0.15);
}

.comm-icon {
  font-size: 1.5rem;
  margin-bottom: 0.35rem;
}

.comm-title {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-primary);
}

.comm-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.audit-interests-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55rem;
}

@media (max-width: 580px) {
  .audit-interests-grid {
    grid-template-columns: 1fr;
  }
}

.interest-chk {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.84rem;
  color: var(--text-secondary);
  cursor: pointer;
  background: var(--bg-subtle);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.interest-chk input {
  accent-color: var(--brand-primary);
}

.btn-submit-audit-lg {
  width: 100%;
  padding: 1.05rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #FF6B00 0%, #E65100 100%);
  color: #FFFFFF;
  border: none;
  font-size: 1.05rem;
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(255, 107, 0, 0.4);
  transition: all var(--transition-fast);
  margin-top: 0.5rem;
}

.btn-submit-audit-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 107, 0, 0.55);
  background: linear-gradient(135deg, #FF7A1A 0%, #F55A00 100%);
}

.form-security-footer {
  text-align: center;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 1rem;
}

/* ==========================================================================
   Layout: Sidebar (Filters) + Main Content
   ========================================================================== */
.main-layout {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 2rem;
  align-items: start;
}

/* ==========================================================================
   Sidebar: Profile & Rider Customizer
   ========================================================================== */
.customizer-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  box-shadow: var(--shadow-md);
  position: sticky;
  top: 5.5rem;
  max-height: calc(100vh - 7rem);
  overflow-y: auto;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.panel-header h3 {
  font-size: 1.15rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reset-btn {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.reset-btn:hover {
  background: var(--bg-subtle);
  text-decoration: underline;
}

/* Section Title */
.filter-section-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}

/* Segmented Control Buttons */
.segmented-control {
  display: flex;
  background: var(--bg-subtle);
  padding: 0.25rem;
  border-radius: var(--radius-md);
  gap: 0.25rem;
  margin-bottom: 1.25rem;
}

.segment-btn {
  flex: 1;
  background: none;
  border: none;
  padding: 0.55rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.segment-btn.active {
  background: var(--bg-surface);
  color: var(--brand-primary);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}

/* Age & Health Selector */
.option-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}

.option-pill {
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  padding: 0.45rem 0.2rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
}

.option-pill:hover {
  border-color: var(--border-strong);
  background: var(--bg-hover);
}

.option-pill.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

/* Category Filter Tabs in Sidebar */
.rider-categories-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.category-toggle-toolbar {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
  flex-wrap: wrap;
}

.btn-accordion-toggle {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.btn-accordion-toggle:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
  border-color: var(--brand-primary);
}

.btn-accordion-toggle.active {
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  font-weight: 700;
}

.category-group {
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.category-group:hover {
  border-color: var(--border-strong);
}

.category-header {
  padding: 0.85rem 1rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast);
}

.category-header:hover {
  background: var(--bg-subtle);
}

.category-header-title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.category-header .chevron-icon {
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  display: inline-block;
}

.category-group.collapsed .category-header {
  border-bottom: none;
}

.category-group.collapsed .chevron-icon {
  transform: rotate(-90deg);
}

.category-group.collapsed .category-body {
  display: none;
}

.category-count {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-primary);
}

.category-body {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* Rider Item */
.rider-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  transition: all var(--transition-fast);
}

.rider-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.rider-item.checked {
  border-color: rgba(59, 130, 246, 0.4);
  background: linear-gradient(to right, rgba(59, 130, 246, 0.04), transparent);
}

.rider-top-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.rider-checkbox {
  margin-top: 0.2rem;
  width: 17px;
  height: 17px;
  accent-color: var(--brand-primary);
  cursor: pointer;
}

.rider-info {
  flex: 1;
}

.rider-name-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.rider-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
}

.rider-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-sm);
  background: rgba(16, 185, 129, 0.12);
  color: var(--brand-emerald);
}

.rider-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}

.specialty-note {
  font-size: 0.7rem;
  font-weight: 600;
  color: #D97706;
  background: rgba(245, 158, 11, 0.1);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.4rem;
  display: inline-block;
}

/* Amount Stepper Slider */
.amount-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-subtle);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  margin-top: 0.3rem;
}

.amount-label {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.amount-value {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--brand-primary);
  font-family: var(--font-display);
}

/* ==========================================================================
   Main Content Area
   ========================================================================== */
.content-area {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Top Toolbar: View Switcher & Comparison Bar */
.toolbar-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.toolbar-title-group h3 {
  font-size: 1.2rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.toolbar-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.view-tab-btn {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: all var(--transition-fast);
}

.view-tab-btn.active {
  background: var(--brand-primary);
  color: white;
  border-color: var(--brand-primary);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}

.btn-open-matrix {
  background: var(--brand-gradient);
  color: white;
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: var(--shadow-md);
  transition: all var(--transition-fast);
}

.btn-open-matrix:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* Quick Filter Pills (여성특화, 가성비, 전이암, 대형사) */
.quick-tag-bar {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.quick-tag-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-right: 0.2rem;
}

.quick-filter-tag {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.quick-filter-tag:hover, .quick-filter-tag.active {
  background: var(--text-primary);
  color: var(--bg-surface);
  border-color: var(--text-primary);
}

/* ==========================================================================
   Company Cards Grid
   ========================================================================== */
.companies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 1.5rem;
}

.company-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
}

.company-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--border-strong);
}

.company-card.top-rank {
  border: 2px solid var(--brand-primary);
}

.company-card.top-rank::before {
  content: 'BEST 추천';
  position: absolute;
  top: 1rem;
  right: -2rem;
  background: var(--brand-gradient);
  color: white;
  font-size: 0.65rem;
  font-weight: 800;
  padding: 0.25rem 2.25rem;
  transform: rotate(45deg);
  box-shadow: var(--shadow-sm);
  z-index: 2;
}

/* Card Header */
.card-header {
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.brand-indicator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-logo-pill {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1rem;
  color: white;
  box-shadow: var(--shadow-sm);
}

.company-titles h4 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.product-name {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
  margin-top: 0.1rem;
}

.recommendation-badge {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-primary);
  white-space: nowrap;
}

/* Price Estimate Block */
.card-price-block {
  padding: 1rem 1.25rem;
  background: linear-gradient(to bottom, var(--bg-subtle), var(--bg-surface));
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.price-title-wrap {
  display: flex;
  flex-direction: column;
}

.price-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.price-currency {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.estimated-price {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--brand-primary);
}

.price-unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Card Body: Exclusive vs Common Features */
.card-body {
  padding: 1.25rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.feature-group-title {
  font-size: 0.8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

/* Exclusive / Specialty list */
.exclusive-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.exclusive-item {
  background: var(--bg-subtle);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.5rem 0.65rem;
}

.exclusive-item-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.exclusive-item-desc {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Common Specs Chips */
.specs-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.spec-chip {
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem;
  font-size: 0.75rem;
}

.spec-label {
  color: var(--text-muted);
  display: block;
  font-size: 0.7rem;
  margin-bottom: 0.1rem;
}

.spec-val {
  font-weight: 700;
  color: var(--text-primary);
}

/* Selected Coverage Check Matrix for this company */
.selected-coverage-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.coverage-status-tag {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.coverage-status-tag.covered {
  background: rgba(16, 185, 129, 0.1);
  color: var(--brand-emerald);
}

.coverage-status-tag.not-covered {
  background: rgba(244, 63, 94, 0.1);
  color: var(--brand-rose);
  text-decoration: line-through;
  opacity: 0.6;
}

/* Card Footer */
.card-footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface-elevated);
  display: flex;
  gap: 0.6rem;
}

.btn-card-action {
  flex: 1;
  padding: 0.65rem 0.5rem;
  border-radius: var(--radius-md);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
  border: 1px solid var(--border-subtle);
}

.btn-secondary {
  background: var(--bg-surface);
  color: var(--text-primary);
}

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

.btn-primary {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: white;
}

.btn-primary:hover {
  background: var(--brand-primary-hover);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   Full Comparative Matrix Modal
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}

.modal-backdrop.open,
.modal-backdrop.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.modal-content-window {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes modalScaleIn {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.modal-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface-elevated);
}

.modal-header h3 {
  font-size: 1.25rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-close-modal {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.btn-close-modal:hover {
  color: var(--text-primary);
}

.modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  overflow-x: auto;
}

/* Comparison Table */
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 860px;
  font-size: 0.85rem;
}

.comparison-table th, .comparison-table td {
  padding: 0.85rem 1rem;
  border: 1px solid var(--border-subtle);
  text-align: left;
}

.comparison-table th {
  background: var(--bg-subtle);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 10;
}

.comparison-table tr:hover td {
  background: rgba(59, 130, 246, 0.03);
}

.company-col-header {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.check-icon {
  color: var(--brand-emerald);
  font-weight: 800;
  font-size: 1.1rem;
}

.cross-icon {
  color: var(--brand-rose);
  font-weight: 800;
  font-size: 1.1rem;
}

/* ==========================================================================
   Bottom Floating Summary Bar
   ========================================================================== */
.floating-summary-bar {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-full);
  padding: 0.75rem 1.5rem;
  box-shadow: var(--shadow-xl);
  display: flex;
  align-items: center;
  gap: 1.5rem;
  z-index: 90;
  max-width: 90%;
  transition: all var(--transition-normal);
}

.summary-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.summary-selected-count {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.summary-badge-best {
  background: var(--brand-gradient);
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.summary-price-preview {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--text-primary);
}

.summary-price-preview span {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--brand-primary);
}

.btn-summary-action {
  background: var(--text-primary);
  color: var(--bg-surface);
  border: none;
  padding: 0.55rem 1.2rem;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-summary-action:hover {
  transform: scale(1.03);
}

/* ==========================================================================
   Responsive Adaptations
   ========================================================================== */
@media (max-width: 1024px) {
  .main-layout {
    grid-template-columns: 1fr;
  }

  .customizer-panel {
    position: static;
    max-height: none;
  }

  .hero-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }

  .hero-highlights {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .app-container {
    padding: 0 1rem 7rem;
  }

  .header-content {
    padding: 0 1rem;
  }

  .companies-grid {
    grid-template-columns: 1fr;
  }

  .floating-summary-bar {
    width: 95%;
    border-radius: var(--radius-lg);
    bottom: 0.75rem;
    padding: 0.75rem 1rem;
    flex-direction: column;
    gap: 0.6rem;
  }

  .summary-info {
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
  }

  .btn-summary-action {
    width: 100%;
  }
}

/* ==========================================================================
   Display Aspect Ratio & Ultrawide Optimizations (16:9, 16:10, 21:9)
   ========================================================================== */

/* 16:10 & Standard 16:9 (1400px ~ 1850px): 3 Cards Per Row */
@media (min-width: 1400px) and (max-width: 1849px) {
  .main-layout {
    grid-template-columns: 340px 1fr;
    gap: 1.5rem;
  }
  .companies-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }
}

/* 21:9 Ultrawide & Large 16:9 QHD/4K (min-width: 1850px or aspect-ratio >= 21/10): 4 Cards Per Row */
@media (min-width: 1850px), (min-aspect-ratio: 21/10) {
  .app-container, .header-content {
    max-width: min(97vw, 2480px);
  }
  .main-layout {
    grid-template-columns: 360px 1fr;
    gap: 1.75rem;
  }
  /* 8대 보험사가 정확히 4열 x 2행으로 한눈에 완벽 배치! */
  .companies-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
  }
}

/* Extremely Wide 32:9 or multi-monitor */
@media (min-width: 2560px) {
  .app-container, .header-content {
    max-width: 96vw;
  }
  .main-layout {
    grid-template-columns: 380px 1fr;
  }
}

/* ==========================================================================
   Dense / Compact View (한눈에 컴팩트 모드)
   ========================================================================== */
body.dense-mode .hero-banner {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
body.dense-mode .hero-text h2 {
  font-size: 1.4rem;
}
body.dense-mode .hero-text p {
  font-size: 0.85rem;
}
body.dense-mode .customizer-panel {
  padding: 1.15rem;
}
body.dense-mode .card-header {
  padding: 0.85rem 1rem 0.65rem;
}
body.dense-mode .brand-logo-pill {
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
}
body.dense-mode .company-titles h4 {
  font-size: 1rem;
}
body.dense-mode .card-price-block {
  padding: 0.6rem 1rem;
}
body.dense-mode .estimated-price {
  font-size: 1.35rem;
}
body.dense-mode .card-body {
  padding: 0.85rem 1rem;
  gap: 0.75rem;
}
body.dense-mode .exclusive-item {
  padding: 0.35rem 0.5rem;
}
body.dense-mode .exclusive-item-title {
  font-size: 0.78rem;
}
body.dense-mode .exclusive-item-desc {
  font-size: 0.7rem;
}
body.dense-mode .specs-chip-grid {
  gap: 0.35rem;
}
body.dense-mode .spec-chip {
  padding: 0.35rem 0.5rem;
}
body.dense-mode .card-footer {
  padding: 0.65rem 1rem;
}
body.dense-mode .btn-card-action {
  padding: 0.45rem 0.4rem;
  font-size: 0.78rem;
}

/* ==========================================================================
   CRM Profile & Consultation Modal Styles
   ========================================================================== */
.crm-modal-window {
  max-width: 980px;
  width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

.crm-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.1rem 1.5rem;
}

.crm-title-area {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.crm-autosave-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.12);
  color: var(--brand-emerald);
  transition: all var(--transition-fast);
}

.crm-autosave-indicator.saving {
  background: rgba(245, 158, 11, 0.15);
  color: #D97706;
}

.crm-autosave-indicator .save-dot {
  font-size: 0.75rem;
  animation: pulse-dot 1.5s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.crm-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.crm-customer-select-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
}

.select-customer {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-weight: 700;
  min-width: 170px;
}

.crm-tab-nav {
  display: flex;
  gap: 0.4rem;
}

.crm-tab-btn {
  padding: 0.45rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--transition-fast);
}

.crm-tab-btn:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.crm-tab-btn.active {
  background: var(--bg-surface);
  color: var(--brand-primary);
  border-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}

.crm-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.crm-tab-pane {
  display: none;
}

/* CRM Collapse Quick Controls */
.crm-collapse-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.95rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crm-collapse-notice {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.crm-collapse-btns {
  display: flex;
  gap: 0.35rem;
}

.crm-section-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.15rem;
  margin-bottom: 0.85rem;
  transition: all var(--transition-fast);
}

.crm-section-card.recommended-section {
  border-color: rgba(245, 158, 11, 0.3);
  background: linear-gradient(to bottom, rgba(245, 158, 11, 0.03), transparent);
}

.crm-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--border-subtle);
  transition: all var(--transition-fast);
}

.crm-section-header:hover {
  opacity: 0.85;
}

.crm-section-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
}

.crm-section-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.crm-summary-chip {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crm-chevron {
  font-size: 0.75rem;
  color: var(--text-muted);
  transition: transform var(--transition-fast);
  display: inline-block;
}

.crm-section-card.collapsed .crm-section-header {
  border-bottom: none;
  padding-bottom: 0;
}

.crm-section-card.collapsed .crm-chevron {
  transform: rotate(-90deg);
}

.crm-section-card.collapsed .crm-section-body {
  display: none;
}

.crm-section-body {
  margin-top: 0.85rem;
}

.crm-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--border-subtle);
}

.badge-tag {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  font-weight: 700;
  background: rgba(59, 130, 246, 0.12);
  color: var(--brand-primary);
}

.crm-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

.crm-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.form-group label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.form-input, .form-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-size: 0.85rem;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.form-input:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--brand-primary);
  background: var(--bg-surface);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.form-textarea {
  resize: vertical;
  min-height: 60px;
}

.input-inline {
  display: flex;
  gap: 0.5rem;
}

.highlight-select {
  border-color: rgba(59, 130, 246, 0.4);
  font-weight: 700;
}

.form-hint {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.ins-age-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--brand-primary);
  background: rgba(59, 130, 246, 0.08);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-sm);
  margin-top: 0.2rem;
  display: inline-block;
}

.checkbox-pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.pill-checkbox {
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-fast);
}

.pill-checkbox:hover {
  border-color: var(--brand-primary);
}

.pill-checkbox input[type="checkbox"]:checked + span,
.pill-checkbox:has(input[type="checkbox"]:checked) {
  background: rgba(59, 130, 246, 0.12);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  font-weight: 700;
}

/* CRM Buttons */
.crm-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.crm-btn-primary {
  background: var(--brand-primary);
  color: #ffffff;
}
.crm-btn-primary:hover {
  background: var(--brand-primary-hover);
}

.crm-btn-secondary {
  background: var(--bg-surface);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
.crm-btn-secondary:hover {
  background: var(--bg-subtle);
}

.crm-btn-success {
  background: var(--brand-emerald);
  color: #ffffff;
}
.crm-btn-success:hover {
  background: #059669;
}

.crm-btn-danger {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
  border-color: rgba(239, 68, 68, 0.2);
}
.crm-btn-danger:hover {
  background: #DC2626;
  color: #ffffff;
}

/* CRM Footer */
.crm-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
}

.crm-footer-right {
  display: flex;
  gap: 0.5rem;
}

/* Tab 2: Revision History Styles */
.history-intro-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-subtle);
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 0.75rem;
}

.history-intro-text strong {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.history-intro-text p {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.revision-timeline {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.revision-item {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  transition: all var(--transition-fast);
  position: relative;
}

.revision-item:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.revision-item.current {
  border-left: 4px solid var(--brand-primary);
}

.revision-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.revision-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
}

.revision-author-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
}

.revision-changes {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.5;
  background: var(--bg-subtle);
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm);
  margin-bottom: 0.65rem;
}

.revision-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.empty-history-msg {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .crm-grid-2, .crm-grid-3 {
    grid-template-columns: 1fr;
  }
  .crm-top-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .crm-footer {
    flex-direction: column;
    gap: 0.75rem;
  }
  .crm-footer-right {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ==========================================================================
   Admin Security Lock Screen (보안 잠금 포털)
   ========================================================================== */
.security-lock-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 35%, #1e293b 0%, #0f172a 65%, #020617 100%);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.security-lock-screen.unlocked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lock-card {
  width: min(92vw, 440px);
  background: rgba(30, 41, 59, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 2.25rem 2rem;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7), 0 0 50px rgba(59, 130, 246, 0.15);
  text-align: center;
  color: #ffffff;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
}

.lock-shield-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto 1.2rem;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lock-shield-icon {
  font-size: 2.5rem;
  z-index: 2;
}

.lock-pulse-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.4);
  animation: lock-pulse 2.2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes lock-pulse {
  0% { transform: scale(0.92); opacity: 0.8; }
  50% { transform: scale(1.18); opacity: 0.25; }
  100% { transform: scale(0.92); opacity: 0.8; }
}

.lock-card h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.lock-subtitle {
  font-size: 0.82rem;
  color: #94a3b8;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.lock-subtitle strong {
  color: #e2e8f0;
}

.lock-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.password-input-wrap {
  position: relative;
  width: 100%;
}

.lock-pwd-input {
  width: 100%;
  padding: 0.8rem 2.8rem 0.8rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(15, 23, 42, 0.65);
  color: #ffffff;
  font-size: 1.05rem;
  letter-spacing: 0.15em;
  font-family: inherit;
  text-align: center;
  transition: all 0.2s;
}

.lock-pwd-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.25);
  background: rgba(15, 23, 42, 0.85);
}

.btn-pwd-peek {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  color: #94a3b8;
  padding: 0.25rem;
  border-radius: 4px;
}

.lock-error-msg {
  font-size: 0.8rem;
  font-weight: 600;
  color: #f87171;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  text-align: center;
  line-height: 1.4;
}

.btn-unlock-primary {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}

.btn-unlock-primary:hover {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

.btn-unlock-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.lock-footer-info {
  margin-top: 1.5rem;
  padding-top: 1.1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.default-pwd-notice {
  font-size: 0.78rem;
  color: #94a3b8;
}

.default-pwd-notice strong {
  color: #60a5fa;
  font-weight: 700;
}

.lock-security-tags {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.sec-badge {
  font-size: 0.68rem;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
}

/* ==========================================================================
   Insurance Category Hub Modal (보험 종류 선택 허브)
   ========================================================================== */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

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

@media (max-width: 560px) {
  .hub-grid {
    grid-template-columns: 1fr;
  }
}

.hub-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-fast);
  position: relative;
}

.hub-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.hub-card.active {
  border-color: var(--brand-primary);
  background: linear-gradient(to bottom, rgba(59, 130, 246, 0.05), transparent);
  box-shadow: 0 0 0 1px var(--brand-primary);
}

.hub-badge-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
  min-height: 22px;
}

.hub-status-badge {
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
}

.hub-status-badge.live {
  background: rgba(16, 185, 129, 0.12);
  color: var(--brand-emerald);
}

.hub-status-badge.upcoming {
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.hub-tag.hot {
  font-size: 0.68rem;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.12);
  color: #EF4444;
  padding: 0.15rem 0.4rem;
  border-radius: var(--radius-sm);
}

.hub-icon {
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
}

.hub-card h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.hub-card p {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.45;
  flex: 1;
  margin-bottom: 0.85rem;
}

.btn-hub-select {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-hub-select:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--bg-surface);
}

.btn-hub-select.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

/* Security Lock Screen Animations */
.security-lock-screen.unlocking {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

@keyframes inputShakeAnim {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}

.input-shake {
  animation: inputShakeAnim 0.4s ease-in-out;
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25) !important;
}

/* ==========================================================================
   김경호 농인 전문 보험설계사 전용 포털 스타일 시스템 (KyungHo Portal CSS)
   ========================================================================== */

/* 1. Header Navigation & Brand Accent Buttons (Toss / Apple Glassmorphism) */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav-link {
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 0.45rem 0.8rem;
  border-radius: 9999px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.nav-link:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
  transform: translateY(-1px);
}

.nav-link.highlight-nav {
  color: var(--brand-primary);
  background: rgba(30, 96, 255, 0.08);
  border: 1px solid rgba(30, 96, 255, 0.2);
  font-weight: 750;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.header-cta-btn {
  border-radius: 9999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.84rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.header-cta-btn:hover {
  transform: translateY(-1px);
}

.btn-kakao-accent {
  background: #FEE500 !important;
  color: #191600 !important;
  border-color: rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 8px rgba(254, 229, 0, 0.3);
}

.btn-kakao-accent:hover {
  background: #F5DC00 !important;
  box-shadow: 0 4px 12px rgba(254, 229, 0, 0.4);
}

.btn-sign-accent {
  background: linear-gradient(135deg, #1E60FF 0%, #0052CC 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  box-shadow: 0 2px 10px rgba(30, 96, 255, 0.3);
}

.btn-sign-accent:hover {
  background: linear-gradient(135deg, #1850E0 0%, #0040A8 100%) !important;
  box-shadow: 0 4px 14px rgba(30, 96, 255, 0.45);
}

.header-utility-group {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--bg-subtle);
  padding: 0.25rem 0.35rem;
  border-radius: 9999px;
  border: 1px solid var(--border-subtle);
}

.utility-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  cursor: pointer;
  transition: all 0.15s ease;
  padding: 0;
}

.utility-icon-btn:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* 2. Accessibility Banner for Deaf Community (Apple Announcement Style) */
.accessibility-top-banner {
  background: linear-gradient(90deg, rgba(30, 96, 255, 0.06) 0%, rgba(5, 150, 105, 0.06) 100%);
  border-bottom: 1px solid rgba(30, 96, 255, 0.12);
  padding: 0.65rem 1.5rem;
  font-size: 0.88rem;
}

.top-banner-inner {
  max-width: min(96vw, 1820px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.top-banner-text-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.banner-pill-badge {
  background: #1E60FF;
  color: #FFFFFF;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.banner-text {
  font-size: 0.88rem;
  color: var(--text-primary);
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.btn-banner-link {
  background: var(--bg-surface);
  color: var(--brand-primary);
  border: 1px solid rgba(30, 96, 255, 0.3);
  padding: 0.35rem 0.95rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.btn-banner-link:hover {
  background: var(--brand-primary);
  color: #FFFFFF;
  border-color: var(--brand-primary);
  box-shadow: 0 4px 12px rgba(30, 96, 255, 0.3);
}

/* 3. Hero Section (김경호 지점장 신뢰의 첫인상 - Toss/Apple 스타일 혁신) */
.hero-kyungho-section {
  display: grid;
  grid-template-columns: 1.24fr 0.92fr;
  gap: 3.25rem;
  padding: 3.5rem 0 3rem;
  align-items: start;
}

.hero-badge-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.35rem;
}

.badge-trust, .badge-deaf, .badge-direct, .badge-company, .badge-claim {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.badge-company {
  background: rgba(255, 107, 0, 0.09);
  color: #E65100;
  border: 1px solid rgba(255, 107, 0, 0.22);
}

.badge-deaf {
  background: rgba(5, 150, 105, 0.09);
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.22);
}

.badge-direct {
  background: rgba(30, 96, 255, 0.08);
  color: #1E60FF;
  border: 1px solid rgba(30, 96, 255, 0.2);
}

.badge-claim {
  background: rgba(217, 119, 6, 0.09);
  color: #B45309;
  border: 1px solid rgba(217, 119, 6, 0.22);
}

.hero-headline {
  font-size: 2.85rem;
  font-weight: 850;
  line-height: 1.25;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  letter-spacing: -0.035em;
  word-break: keep-all;
}

.hero-headline-gradient {
  background: linear-gradient(135deg, #1E60FF 0%, #00B4D8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .hero-headline-gradient {
  background: linear-gradient(135deg, #60A5FA 0%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1.05rem;
  line-height: 1.72;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  word-break: keep-all;
  letter-spacing: -0.015em;
}

/* Trust Metric Cards (3-Column Clean Metrics) */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2.25rem;
}

.trust-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 1.2rem 1.15rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.trust-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px -4px rgba(30, 96, 255, 0.1);
  border-color: rgba(30, 96, 255, 0.35);
}

.trust-badge-label {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--brand-primary);
  letter-spacing: 0.06em;
  margin-bottom: 0.35rem;
}

.trust-metric {
  font-size: 1.85rem;
  font-weight: 850;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.trust-title {
  font-size: 0.94rem;
  font-weight: 750;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}

.trust-sub {
  font-size: 0.77rem;
  color: var(--text-muted);
  line-height: 1.4;
  word-break: keep-all;
}

/* Hero Primary Actions */
.hero-primary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2.25rem;
  align-items: stretch;
}

.btn-hero-main-cta {
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.5rem;
  background: linear-gradient(135deg, #1E60FF 0%, #0052CC 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 10px 25px -5px rgba(30, 96, 255, 0.35);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hero-main-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -5px rgba(30, 96, 255, 0.45);
}

.btn-hero-main-cta .cta-icon {
  font-size: 1.7rem;
}

.btn-hero-main-cta .cta-text-wrap {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.btn-hero-main-cta .cta-main-text {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.btn-hero-main-cta .cta-sub-text {
  font-size: 0.76rem;
  opacity: 0.9;
  font-weight: 500;
}

.btn-hero-main-cta .cta-arrow {
  font-size: 1.25rem;
  margin-left: auto;
  transition: transform 0.2s ease;
}

.btn-hero-main-cta:hover .cta-arrow {
  transform: translateX(4px);
}

.btn-hero-kakao-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.35rem;
  background: #FEE500;
  color: #191600;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 18px;
  font-weight: 750;
  font-size: 0.94rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(254, 229, 0, 0.35);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-hero-kakao-cta:hover {
  background: #F5DC00;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(254, 229, 0, 0.45);
}

.btn-hero-sim-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.95rem 1.35rem;
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  font-weight: 750;
  font-size: 0.94rem;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-hero-sim-cta:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Hero Quick Feature Hub (4-Card Grid) */
.hero-quick-hub {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 22px;
  padding: 1.35rem 1.5rem;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03);
}

.quick-hub-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: -0.01em;
  margin-bottom: 0.85rem;
}

.quick-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.quick-hub-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  background: var(--bg-subtle);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
}

.quick-hub-card:hover {
  background: var(--bg-surface);
  border-color: var(--border-strong);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.hub-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  background: var(--bg-surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.hub-amber .hub-card-icon { background: rgba(245, 158, 11, 0.12); }
.hub-blue .hub-card-icon { background: rgba(37, 99, 235, 0.12); }
.hub-pink .hub-card-icon { background: rgba(236, 72, 153, 0.12); }
.hub-purple .hub-card-icon { background: rgba(139, 92, 246, 0.12); }

.hub-card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.hub-card-body strong {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}

.hub-card-body span {
  font-size: 0.74rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hub-card-arrow {
  font-size: 0.95rem;
  color: var(--text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}

.quick-hub-card:hover .hub-card-arrow {
  transform: translate(2px, -2px);
  color: var(--brand-primary);
}

/* 4. Planner Profile Presentation Card (VIP Financial Advisor Card) */
.planner-profile-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 28px;
  box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.08), 0 2px 10px rgba(0, 0, 0, 0.03);
  padding: 2.25rem 2rem;
  position: relative;
  overflow: hidden;
}

.planner-profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #FF6B00 0%, #1E60FF 50%, #059669 100%);
}

.profile-card-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

.planner-avatar-wrap {
  position: relative;
  width: 94px;
  height: 94px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(135deg, #FF6B00 0%, #1E60FF 100%);
  flex-shrink: 0;
  box-shadow: 0 8px 24px -4px rgba(30, 96, 255, 0.25);
}

.planner-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 50%;
  display: block;
  background: var(--bg-surface);
}

.avatar-verified-badge {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1E60FF;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  border: 2.5px solid var(--bg-surface);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.planner-meta {
  display: flex;
  flex-direction: column;
}

.planner-role-pill {
  display: inline-block;
  background: rgba(255, 107, 0, 0.1);
  color: #E65100;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  margin-bottom: 0.35rem;
  width: fit-content;
}

.planner-name {
  font-size: 1.75rem;
  font-weight: 850;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
  letter-spacing: -0.02em;
}

.role-highlight {
  font-size: 1.15rem;
  color: var(--brand-primary);
  font-weight: 750;
  margin-left: 0.25rem;
}

.planner-motto {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.profile-live-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(5, 150, 105, 0.08);
  border: 1px solid rgba(5, 150, 105, 0.2);
  border-radius: 9999px;
  padding: 0.45rem 0.95rem;
  font-size: 0.78rem;
  font-weight: 750;
  color: #059669;
  margin-bottom: 1.25rem;
}

.status-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #059669;
  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.25);
  animation: pulseGreen 2s infinite;
}

.profile-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  background: var(--bg-subtle);
  border-radius: 16px;
  padding: 0.85rem 0.5rem;
  margin-bottom: 1.25rem;
  text-align: center;
}

.stat-val {
  display: block;
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  margin-bottom: 0.15rem;
}

.stat-lbl {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-weight: 600;
}

.planner-details-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--bg-subtle);
  border-radius: 18px;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.35rem;
}

.detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.detail-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.detail-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.detail-val {
  font-size: 0.85rem;
  color: var(--text-primary);
  text-align: right;
  line-height: 1.45;
}

.contact-action-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.phone-number-link {
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--brand-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.phone-number-link:hover {
  text-decoration: underline;
}

.btn-quick-sms {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}

.btn-quick-sms:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.highlight-care .detail-val {
  color: #059669 !important;
}

.planner-card-footer {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btn-card-direct-audit {
  width: 100%;
  padding: 0.95rem 1.25rem;
  border-radius: 16px;
  background: linear-gradient(135deg, #1E60FF 0%, #0052CC 100%);
  color: #FFFFFF;
  border: none;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 8px 20px -3px rgba(30, 96, 255, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-card-direct-audit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -3px rgba(30, 96, 255, 0.45);
}

.btn-card-direct-audit .btn-arrow {
  font-size: 1.15rem;
  transition: transform 0.2s ease;
}

.btn-card-direct-audit:hover .btn-arrow {
  transform: translateX(4px);
}

/* 5. Section Containers & Headers */
.section-container {
  padding: 4.5rem 0 3.5rem;
}

.section-container.bg-surface-raised {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: 4rem 2.5rem;
  margin: 2rem 0;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
}

.section-header-center {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 3rem;
}

.section-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--brand-primary);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* 6. Promises Cards Grid */
.promise-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.promise-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.promise-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.promise-card.highlight-border {
  border-color: #10B981;
}

.promise-num {
  position: absolute;
  top: 1.5rem;
  right: 1.75rem;
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--border-strong);
  opacity: 0.5;
}

.promise-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.bg-blue-subtle { background: rgba(59, 130, 246, 0.12); }
.bg-emerald-subtle { background: rgba(16, 185, 129, 0.12); }
.bg-rose-subtle { background: rgba(244, 63, 94, 0.12); }

.promise-icon {
  font-size: 1.8rem;
}

.promise-card h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
}

.promise-text {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  flex: 1;
}

.promise-checks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 1rem;
}

.promise-checks li {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* 7. Case Studies Cards Grid */
.case-studies-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.case-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.case-card:hover {
  transform: translateY(-3px);
  border-color: var(--brand-primary);
}

.case-badge-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}

.case-tag {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-sm);
}

.tag-saved { background: rgba(16, 185, 129, 0.15); color: #10B981; }
.tag-claim { background: rgba(59, 130, 246, 0.15); color: #3B82F6; }
.tag-health { background: rgba(245, 158, 11, 0.15); color: #D97706; }

.case-who {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 600;
}

.case-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 1.25rem;
  line-height: 1.45;
}

.before-after-box {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 1rem;
  border: 1px solid var(--border-subtle);
}

.ba-row {
  display: flex;
  gap: 0.65rem;
}

.ba-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  background: #FEE2E2;
  color: #DC2626;
  height: fit-content;
  white-space: nowrap;
}

.ba-badge.after-badge {
  background: #D1FAE5;
  color: #059669;
}

.ba-content strong {
  display: block;
  font-size: 0.88rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.ba-content p {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

.ba-arrow {
  text-align: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--brand-primary);
  padding: 0.25rem 0;
}

/* 8. Free Policy Audit Form */
.audit-form-wrapper {
  display: grid;
  grid-template-columns: 0.85fr 1.25fr;
  gap: 2.5rem;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--border-subtle);
  padding: 2.75rem 2.5rem;
}

.audit-form-intro h2 {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 1rem;
}

.audit-form-intro p {
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.form-trust-points {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.point-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.point-icon {
  font-size: 1.25rem;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.form-label-highlight {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.comm-mode-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.comm-option {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.75rem;
  background: var(--bg-subtle);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all var(--transition-fast);
  position: relative;
}

.comm-option input[type="radio"] {
  position: absolute;
  opacity: 0;
}

.comm-option:hover {
  border-color: var(--brand-primary);
  background: var(--bg-surface);
}

.comm-option.active {
  border-color: var(--brand-primary);
  background: rgba(59, 130, 246, 0.08);
  box-shadow: 0 0 0 2px var(--brand-primary);
}

.comm-icon {
  font-size: 1.5rem;
  margin-bottom: 0.25rem;
}

.comm-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.comm-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  line-height: 1.25;
}

.audit-interests-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1rem;
}

.interest-chk {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--text-primary);
  cursor: pointer;
}

.btn-submit-audit-lg {
  width: 100%;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #FFFFFF;
  border: none;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-submit-audit-lg:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.form-security-footer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}

/* 9. Simulator Intro Bar */
.simulator-intro-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
  padding: 1.75rem 2rem;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.sim-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--brand-primary);
  margin-bottom: 0.35rem;
}

.sim-intro-left h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.sim-intro-left p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.sim-intro-right {
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}

.sim-btn {
  padding: 0.65rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

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

.sim-btn-green {
  background: #10B981 !important;
  color: #FFFFFF !important;
  border-color: #10B981 !important;
}
.sim-btn-green:hover {
  background: #059669 !important;
}

/* 10. Floating Quick Consultation Bar (우측 하단) */
.floating-quick-bar {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  z-index: 100;
}

.quick-fab {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1rem;
  border-radius: var(--radius-full);
  border: none;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-fast);
}

.quick-fab:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-xl);
}

.fab-kakao {
  background: #FEE500;
  color: #191600;
}

.fab-sign {
  background: #10B981;
  color: #FFFFFF;
}

.fab-audit {
  background: var(--brand-primary);
  color: #FFFFFF;
}

.fab-top {
  background: var(--bg-surface);
  color: var(--text-secondary);
  border: 1px solid var(--border-subtle);
  padding: 0.5rem 0.75rem;
  justify-content: center;
}

/* 11. Kakao Modal Styling */
.kakao-modal-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.kakao-yellow-box {
  background: #FEE500;
  color: #191600;
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.kakao-yellow-box h4 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0;
}

.kakao-yellow-box p {
  font-size: 0.88rem;
  margin: 0;
  line-height: 1.45;
  color: #3C3500;
}

.btn-kakao-openlink {
  display: block;
  background: #381E1F;
  color: #FFFFFF;
  text-decoration: none;
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: 1rem;
  transition: background var(--transition-fast);
  margin-bottom: 1rem;
}

.btn-kakao-openlink:hover {
  background: #231213;
}

.sms-quick-box {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sms-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.phone-number-box {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

.phone-number-box strong {
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  color: var(--text-primary);
}

.btn-copy-phone {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--brand-primary);
  cursor: pointer;
}

.modal-tip-text {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin: 0;
}

/* 12. Global Footer */
.global-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border-subtle);
  margin-top: 4rem;
  padding: 3.5rem 0 2rem;
}

.footer-content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.footer-brand {
  margin-bottom: 2rem;
  max-width: 580px;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.65rem;
}

.footer-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.footer-links-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.footer-col h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.85rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.footer-col li {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.footer-ethics {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.6;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}

.footer-bottom {
  padding-top: 1.5rem;
  text-align: center;
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* 13. Responsive Breakpoints */
@media (max-width: 1100px) {
  .hero-kyungho-section {
    grid-template-columns: 1fr;
  }
  .promise-cards-grid, .case-studies-grid {
    grid-template-columns: 1fr;
  }
  .audit-form-wrapper {
    grid-template-columns: 1fr;
  }
  .footer-links-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  .hero-headline {
    font-size: 1.75rem;
  }
  .trust-grid {
    grid-template-columns: 1fr;
  }
  .form-row-2 {
    grid-template-columns: 1fr;
  }
  .comm-mode-selector {
    grid-template-columns: 1fr;
  }
  .simulator-intro-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .floating-quick-bar {
    bottom: 1rem;
    right: 1rem;
  }
}

/* ==========================================================================
   14. 🏆 보험사 보험금 지급 순위 (부지급률) 섹션 스타일
   ========================================================================== */
.claim-ranking-hero-banner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 2.25rem;
}

.ranking-highlight-col {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(255, 255, 255, 0.95));
  border: 1px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.08);
  position: relative;
  overflow: hidden;
}

[data-theme="dark"] .ranking-highlight-col {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(30, 41, 59, 0.95));
}

.ranking-highlight-col::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #F59E0B, #D97706);
}

.rank-trophy {
  font-size: 2.5rem;
  line-height: 1;
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[data-theme="dark"] .rank-trophy {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
}

.rank-highlight-body {
  flex: 1;
}

.rank-badge-pill {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  color: #B45309;
  background: rgba(245, 158, 11, 0.2);
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  margin-bottom: 0.4rem;
}

.rank-winner-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.winner-rate {
  color: #D97706;
  font-size: 1.2rem;
  font-weight: 900;
}

.rank-winner-desc {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.claim-tabs-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.75rem;
}

.claim-segmented-control {
  max-width: 680px;
  width: 100%;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.35rem;
}

.claim-pane-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.claim-updated-tag {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
}

.claim-ranking-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.claim-rank-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
}

.claim-rank-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.claim-rank-card.rank-top1 {
  border: 2px solid #F59E0B;
  background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.04), var(--bg-surface));
}

.claim-rank-card.rank-top2 {
  border: 1.5px solid #94A3B8;
}

.claim-rank-card.rank-top3 {
  border: 1.5px solid #B45309;
}

.crc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crc-company-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.crc-rank-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.rank-top1 .crc-rank-num {
  background: #F59E0B;
  color: #ffffff;
}

.rank-top2 .crc-rank-num {
  background: #94A3B8;
  color: #ffffff;
}

.rank-top3 .crc-rank-num {
  background: #B45309;
  color: #ffffff;
}

.crc-name {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.crc-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.crc-badge.badge-gold {
  background: rgba(245, 158, 11, 0.15);
  color: #B45309;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.crc-badge.badge-silver {
  background: rgba(148, 163, 184, 0.15);
  color: #475569;
}

.crc-badge.badge-bronze {
  background: rgba(180, 83, 9, 0.15);
  color: #92400E;
}

.crc-rate-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--bg-subtle);
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-sm);
}

.crc-rate-label {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.crc-rate-val {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--brand-primary);
}

.rank-top1 .crc-rate-val {
  color: #D97706;
  font-size: 1.25rem;
}

.crc-gauge-wrap {
  width: 100%;
  height: 6px;
  background: var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
}

.crc-gauge-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(to right, #10B981, #059669);
  transition: width 0.8s ease-in-out;
}

.crc-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
}

.crc-meta-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
}

.crc-meta-tag {
  background: var(--bg-subtle);
  color: var(--text-muted);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
}

/* Claim Tips Grid */
.claim-tips-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.claim-tip-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.claim-tip-card.highlight-border {
  border: 2px solid var(--brand-emerald);
}

.tip-icon-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tip-icon {
  font-size: 1.75rem;
}

.tip-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.tip-tag.danger-tag {
  background: rgba(239, 68, 68, 0.15);
  color: #DC2626;
}

.tip-tag.primary-tag {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

.claim-tip-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.claim-tip-card p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.claim-kyungho-promise-box {
  background: linear-gradient(135deg, rgba(243, 112, 33, 0.08), rgba(255, 255, 255, 0.95));
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
}

[data-theme="dark"] .claim-kyungho-promise-box {
  background: linear-gradient(135deg, rgba(243, 112, 33, 0.12), rgba(30, 41, 59, 0.95));
}

.promise-box-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.promise-box-header .box-icon {
  font-size: 2rem;
}

.promise-box-header h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--brand-primary);
  margin: 0;
}

.promise-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.bullet-chk {
  color: var(--brand-primary);
  font-weight: 900;
  font-size: 1.1rem;
}

.bullet-item p {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.btn-promise-audit {
  width: 100%;
  padding: 1rem;
  background: var(--brand-primary);
  color: #ffffff;
  font-size: 1rem;
  font-weight: 800;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-promise-audit:hover {
  background: var(--brand-primary-hover);
  transform: translateY(-2px);
}

/* ==========================================================================
   14-B. 💡 지급률 vs 부지급률 차이점 가이드 & 블로그 표 & 계산기 스타일
   ========================================================================== */
.claim-difference-guide-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.diff-guide-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

.diff-guide-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}

.diff-badge {
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid rgba(37, 99, 235, 0.25);
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  font-size: 0.76rem;
  font-weight: 800;
}

[data-theme="dark"] .diff-badge {
  background: rgba(37, 99, 235, 0.15);
  color: #60A5FA;
}

.diff-guide-header h3 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.diff-guide-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
}

.diff-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}

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

.diff-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: all var(--transition-fast);
}

.diff-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  border-color: var(--border-strong);
}

.diff-card.highlight-border {
  border: 2px solid #D97706;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), var(--bg-subtle));
}

.diff-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.diff-num {
  font-size: 1.2rem;
  font-weight: 900;
  color: #D97706;
  letter-spacing: -0.02em;
}

.diff-card-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
}

.diff-card-badge.danger {
  background: #FEE2E2;
  color: #DC2626;
}

.diff-card-badge.blue {
  background: #DBEAFE;
  color: #1D4ED8;
}

.diff-card-badge.warning {
  background: #FEF3C7;
  color: #B45309;
}

.diff-card-badge.purple {
  background: #EDE9FE;
  color: #6D28D9;
}

[data-theme="dark"] .diff-card-badge.danger { background: rgba(220, 38, 38, 0.2); color: #F87171; }
[data-theme="dark"] .diff-card-badge.blue { background: rgba(29, 78, 216, 0.2); color: #93C5FD; }
[data-theme="dark"] .diff-card-badge.warning { background: rgba(180, 83, 9, 0.2); color: #FCD34D; }
[data-theme="dark"] .diff-card-badge.purple { background: rgba(109, 40, 217, 0.2); color: #C4B5FD; }

.diff-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.diff-desc {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

.diff-visual-bar {
  margin-top: 0.4rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.diff-bar-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.78rem;
}

.diff-bar-row .bar-lbl {
  width: 140px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

.diff-bar-row .bar-track {
  flex: 1;
  height: 8px;
  background: var(--border-subtle);
  border-radius: 4px;
  overflow: hidden;
}

.diff-bar-row .bar-fill {
  height: 100%;
  border-radius: 4px;
}

.diff-bar-row .bar-fill.green {
  background: #10B981;
}

.diff-bar-row .bar-fill.red {
  background: #EF4444;
}

.diff-bar-row .bar-val {
  width: 150px;
  text-align: right;
  font-weight: 800;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.diff-tip-tag {
  font-size: 0.76rem;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  margin-top: auto;
}

/* 📋 블로그 스타일 공시 순위 테이블 */
.claim-pane-intro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.25rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.pane-intro-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.view-mode-toggle {
  display: flex;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.2rem;
  gap: 0.2rem;
}

.btn-view-mode {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-view-mode.active {
  background: #ffffff;
  color: var(--text-primary);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .btn-view-mode.active {
  background: #334155;
  color: #F8FAFC;
}

.claim-table-responsive {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  margin-bottom: 1.5rem;
}

.blog-claim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
}

.blog-claim-table th {
  background: #F8FAFC;
  color: var(--text-secondary);
  font-weight: 800;
  padding: 0.95rem 1rem;
  border-bottom: 2px solid var(--border-subtle);
  white-space: nowrap;
}

[data-theme="dark"] .blog-claim-table th {
  background: #1E293B;
  color: #94A3B8;
}

.blog-claim-table td {
  padding: 1rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  line-height: 1.45;
}

.blog-claim-table tr:hover {
  background: rgba(245, 158, 11, 0.04);
}

.blog-claim-table tr.winner-row {
  background: rgba(249, 115, 22, 0.06);
  font-weight: 600;
}

.rank-cell-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-weight: 900;
  font-size: 0.82rem;
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.rank-cell-pill.gold {
  background: #F59E0B;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.35);
}

.rank-cell-pill.silver {
  background: #94A3B8;
  color: #ffffff;
}

.rank-cell-pill.bronze {
  background: #B45309;
  color: #ffffff;
}

.comp-name-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 800;
  color: var(--text-primary);
}

.comp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rej-rate-tag {
  font-weight: 900;
  color: #DC2626;
  font-size: 0.95rem;
}

.rej-rate-tag.winner {
  color: #059669;
  font-size: 1.05rem;
}

.pay-rate-tag {
  font-weight: 800;
  color: #2563EB;
}

.advisory-badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
}

.advisory-badge.safe {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.advisory-badge.warning {
  background: rgba(239, 68, 68, 0.12);
  color: #DC2626;
}

.claim-mini-notice {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.25rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 1rem;
}

/* 🧮 시뮬레이터 계산기 */
.claim-calc-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.claim-calc-header {
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 1.25rem;
  margin-bottom: 1.5rem;
}

.claim-calc-header h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.claim-calc-header p {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0;
}

.claim-calc-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 1.5rem;
  align-items: flex-end;
  background: var(--bg-subtle);
  padding: 1.5rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.5rem;
}

@media (max-width: 860px) {
  .claim-calc-inputs {
    grid-template-columns: 1fr;
  }
}

.calc-input-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-unit input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  font-size: 1.1rem;
  font-weight: 800;
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
}

.input-with-unit span {
  position: absolute;
  right: 1rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
}

.calc-hint {
  font-size: 0.74rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  display: block;
}

.btn-run-calc {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  color: #ffffff;
  border: none;
  font-size: 1rem;
  font-weight: 800;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  height: 48px;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.btn-run-calc:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
}

.claim-calc-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}

@media (max-width: 960px) {
  .claim-calc-results {
    grid-template-columns: 1fr;
  }
}

.calc-res-card {
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.calc-res-card.best {
  border-color: #10B981;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.06), var(--bg-subtle));
}

.calc-res-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.calc-res-name {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-primary);
}

.calc-loss-val {
  font-size: 1.35rem;
  font-weight: 900;
  color: #DC2626;
}

.calc-res-card.best .calc-loss-val {
  color: #059669;
}

/* 3. 블로그 추천 요약 태그 & 연락처 바 */
.promise-summary-tags-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.summary-tag-pill {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.45;
}

.summary-tag-pill.green {
  background: rgba(16, 185, 129, 0.12);
  color: #065F46;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.summary-tag-pill.blue {
  background: rgba(37, 99, 235, 0.12);
  color: #1E40AF;
  border: 1px solid rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .summary-tag-pill.green {
  background: rgba(16, 185, 129, 0.2);
  color: #6EE7B7;
}

[data-theme="dark"] .summary-tag-pill.blue {
  background: rgba(37, 99, 235, 0.2);
  color: #93C5FD;
}

.tip-sub-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.35rem 0.65rem;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  margin-top: auto;
}

.tip-sub-badge.danger {
  background: rgba(239, 68, 68, 0.1);
  color: #DC2626;
}

.tip-sub-badge.success {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
}

.promise-contact-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.contact-info-col {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.contact-lbl {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-muted);
}

.contact-numbers {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.phone-link {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--brand-primary);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.phone-link:hover {
  text-decoration: underline;
}

.contact-numbers .sep {
  color: var(--text-muted);
}

/* ==========================================================================
   15. 🩺 KCD 질병코드 & 병력 자가진단 사전 고지 체크기 스타일
   ========================================================================== */
.kcd-official-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02));
  border: 1.5px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.75rem;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.kcd-banner-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.kcd-emblem {
  font-size: 2.25rem;
}

.kcd-banner-left strong {
  font-size: 1.05rem;
  color: var(--text-primary);
  display: block;
  margin-bottom: 0.2rem;
}

.kcd-banner-left p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0;
}

.btn-kcd-external {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #10B981;
  color: #ffffff;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25);
}

.btn-kcd-external:hover {
  background: #059669;
  transform: translateY(-2px);
}

.kcd-diagnosis-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-md);
}

.kcd-step-block {
  margin-bottom: 1.5rem;
}

.step-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.4rem;
}

.step-badge {
  background: #10B981;
  color: #ffffff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
}

.step-title-wrap h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.step-subtext {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.kcd-search-box {
  position: relative;
  margin-bottom: 1rem;
}

.kcd-search-box .search-icon {
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.1rem;
  pointer-events: none;
}

.kcd-search-input {
  width: 100%;
  padding: 0.95rem 2.8rem;
  font-size: 1rem;
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition-fast);
}

.kcd-search-input:focus {
  border-color: #10B981;
  background: var(--bg-surface);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

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

.kcd-search-results {
  max-height: 380px;
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  margin-bottom: 1rem;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  position: relative;
  z-index: 10;
}

.kcd-search-count-header {
  padding: 0.65rem 1.15rem;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
}

.kcd-search-count-header strong {
  color: #059669;
  font-weight: 700;
}

.kcd-result-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: all var(--transition-fast);
  gap: 1rem;
}

.kcd-result-item:last-child {
  border-bottom: none;
}

.kcd-result-item:hover {
  background: rgba(16, 185, 129, 0.06);
}

.kcd-result-item.selected {
  background: rgba(16, 185, 129, 0.12);
  border-left: 3px solid #10B981;
}

.kcd-item-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.kcd-item-meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.kcd-item-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kcd-code-badge {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  font-weight: 800;
  font-size: 0.85rem;
  font-family: var(--font-display, monospace);
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(16, 185, 129, 0.3);
  letter-spacing: 0.5px;
}

.kcd-chapter-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-subtle);
}

.kcd-item-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

.kcd-item-en {
  font-size: 0.78rem;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.3;
}

.kcd-item-syns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.25rem;
}

.kcd-syn-tag {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 0.1rem 0.35rem;
}

.kcd-match {
  background-color: rgba(254, 240, 138, 0.6);
  color: #854d0e;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 2px;
}

[data-theme="dark"] .kcd-match {
  background-color: rgba(234, 179, 8, 0.35);
  color: #fef08a;
}

.kcd-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}

.kcd-item-uw {
  font-size: 0.75rem;
  color: #059669;
  font-weight: 600;
  text-align: right;
  max-width: 170px;
}

.btn-select-kcd {
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-select-kcd:hover {
  background: #10B981;
  color: #ffffff;
  border-color: #059669;
}

.kcd-result-item.selected .btn-select-kcd {
  background: #10B981;
  color: #ffffff;
  border-color: #059669;
}

.kcd-quick-chips {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.chips-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 700;
}

.kcd-chip {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.kcd-chip:hover {
  border-color: #10B981;
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
}

.kcd-chip.selected {
  background: #10B981;
  color: #ffffff;
  border-color: #059669;
}

.kcd-selected-container {
  background: rgba(16, 185, 129, 0.05);
  border: 1px dashed #10B981;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.selected-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: #059669;
}

.selected-tags-wrap {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.kcd-tag {
  background: #ffffff;
  border: 1px solid #10B981;
  color: #059669;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

[data-theme="dark"] .kcd-tag {
  background: #1E293B;
}

.kcd-tag-remove {
  cursor: pointer;
  font-size: 0.9rem;
  color: #94A3B8;
}

.kcd-tag-remove:hover {
  color: #DC2626;
}

.kcd-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 2rem 0;
}

/* History Group & Chronic Grid */
.history-group-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.history-group-header .hg-icon {
  font-size: 1.25rem;
}

.history-group-header h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.chronic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.chronic-item-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
}

.ci-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
}

.ci-header strong {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.ci-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.btn-ci-opt {
  padding: 0.45rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-ci-opt.active {
  background: #10B981;
  color: #ffffff;
  border-color: #059669;
  font-weight: 700;
}

.check-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.check-card-label {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.check-card-label:hover {
  border-color: #10B981;
}

.check-card-label input[type="checkbox"] {
  display: none;
}

.chk-box-visual {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-strong);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.check-card-label input[type="checkbox"]:checked + .chk-box-visual {
  background: #10B981;
  border-color: #059669;
}

.check-card-label input[type="checkbox"]:checked + .chk-box-visual::after {
  content: '✓';
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 900;
}

.chk-text {
  font-size: 0.85rem;
  color: var(--text-primary);
  line-height: 1.45;
}

/* U/W Result Card */
.kcd-result-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(255, 255, 255, 0.98));
  border: 2px solid #10B981;
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: 0 4px 20px rgba(16, 185, 129, 0.12);
}

[data-theme="dark"] .kcd-result-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(30, 41, 59, 0.98));
}

.result-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.result-indicator-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.result-kicker {
  font-size: 0.78rem;
  font-weight: 800;
  color: #059669;
  letter-spacing: 0.03em;
}

.result-body-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.result-main-grade {
  flex: 1;
}

.grade-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}

.grade-title {
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--text-primary);
  margin-bottom: 0.35rem;
}

.grade-desc {
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.result-pass-rate {
  text-align: center;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

[data-theme="dark"] .result-pass-rate {
  background: rgba(16, 185, 129, 0.15);
  border-color: rgba(16, 185, 129, 0.3);
}

.rate-num {
  font-size: 1.75rem;
  font-weight: 900;
  color: #059669;
  display: block;
}

.rate-label {
  font-size: 0.75rem;
  color: #047857;
  font-weight: 700;
}

.result-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.btn-uw-action {
  padding: 0.95rem 1.25rem;
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-uw-simulator {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.25);
}

.btn-uw-simulator:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

.btn-uw-audit {
  background: var(--bg-surface);
  border: 1.5px solid #10B981;
  color: #059669;
}

.btn-uw-audit:hover {
  background: rgba(16, 185, 129, 0.08);
}

/* ==========================================================================
   16. 📊 시뮬레이터 업권 필터 배너 (손보 10 + 생보 14)
   ========================================================================== */
.sector-filter-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.65rem 1.25rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.sfb-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
  flex-shrink: 0;
}

.sector-segmented {
  flex: 1;
  background: var(--bg-subtle);
  padding: 0.25rem;
  border-radius: var(--radius-pill);
}

.sector-segmented .segment-btn {
  font-size: 0.82rem;
  padding: 0.45rem 0.85rem;
}

@media (max-width: 900px) {
  .claim-ranking-hero-banner {
    grid-template-columns: 1fr;
  }
  .claim-ranking-grid {
    grid-template-columns: 1fr;
  }
  .claim-tips-grid {
    grid-template-columns: 1fr;
  }
  .chronic-grid {
    grid-template-columns: 1fr;
  }
  .check-cards-grid {
    grid-template-columns: 1fr;
  }
  .result-actions-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   14. 2026 알기 쉬운 전 보험사 상품 비교 센터 스타일시트 (styles.css)
   ========================================================================== */

/* 1. 4대 핵심 용어 안내 컨테이너 */
.easy-terms-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.easy-terms-header {
  margin-bottom: 1.25rem;
}

.terms-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.terms-icon {
  font-size: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: rgba(245, 158, 11, 0.12);
  color: #D97706;
  flex-shrink: 0;
}

.terms-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.35rem 0;
}

.terms-sub {
  font-size: 0.88rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.terms-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;
}

.term-card {
  background: var(--bg-surface-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
}

.term-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-md);
}

.term-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.term-card-icon {
  font-size: 1.85rem;
  line-height: 1;
}

.term-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.1);
  color: var(--brand-primary);
  white-space: nowrap;
}

.term-card-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.45rem 0;
}

.term-card-summary {
  font-size: 0.82rem;
  font-weight: 700;
  color: #2563EB;
  line-height: 1.45;
  margin-bottom: 0.65rem;
}

.term-card-desc {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 0.85rem;
  flex: 1;
}

.term-card-tip {
  background: var(--bg-subtle);
  border-left: 3px solid #10B981;
  padding: 0.55rem 0.75rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.76rem;
  color: var(--text-primary);
  line-height: 1.45;
}

.term-card-tip strong {
  color: #059669;
}

/* 2. 메인 비교 탭 네비게이션 */
.comp-nav-container {
  margin-bottom: 1.75rem;
}

.comp-tabs-bar {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.comp-tab-btn {
  background: var(--bg-surface);
  border: 2px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  box-shadow: var(--shadow-sm);
}

.comp-tab-btn:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
}

.comp-tab-btn.active {
  background: var(--bg-surface-elevated);
  border-color: var(--brand-primary);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.15);
}

.comp-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 4px;
  background: var(--brand-primary);
  border-radius: var(--radius-full);
}

.comp-tab-btn .tab-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.comp-tab-btn .tab-text-wrap {
  flex: 1;
}

.comp-tab-btn .tab-text-wrap strong {
  display: block;
  font-size: 1.05rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
}

.comp-tab-btn .tab-text-wrap span {
  display: block;
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.tab-badge-accent {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  background: #FEE2E2;
  color: #DC2626;
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
}

/* 3. 서브 필터 및 뷰 토글 바 */
.comp-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  background: var(--bg-subtle);
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
}

.comp-filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.comp-sub-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-full);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.comp-sub-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.comp-sub-btn.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.comp-view-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.view-toggle-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--transition-fast);
}

.view-toggle-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.view-toggle-btn.active {
  background: #1E293B;
  color: #FFFFFF;
  border-color: #1E293B;
}

.btn-export-excel-small {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.3);
}

.btn-export-excel-small:hover {
  background: #10B981;
  color: #FFFFFF;
}

/* 4. 스마트 추천 카드 뷰 그리드 */
.comp-smart-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.smart-comp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.smart-comp-card:hover {
  transform: translateY(-4px);
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-lg);
}

.smart-comp-card.highlight-card {
  border: 2px solid var(--brand-primary);
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.03) 0%, var(--bg-surface) 100%);
}

.comp-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.comp-card-badge {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  color: #FFFFFF;
}

.comp-card-sector {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-muted);
}

.comp-card-company {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.2rem 0;
}

.comp-card-product {
  font-size: 0.84rem;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 0.85rem;
  line-height: 1.4;
}

.comp-tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 1.15rem;
}

.comp-mini-tag {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

/* 주요 보장 하이라이트 박스 */
.comp-highlights-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.95rem;
  margin-bottom: 1rem;
}

.comp-highlight-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  font-size: 0.84rem;
  border-bottom: 1px dashed var(--border-subtle);
}

.comp-highlight-row:last-child {
  border-bottom: none;
}

.hl-label {
  color: var(--text-secondary);
}

.hl-val {
  font-weight: 800;
  color: var(--text-primary);
}

.hl-val.accent-blue {
  color: #2563EB;
}

.hl-val.accent-emerald {
  color: #059669;
}

.hl-val.accent-red {
  color: #DC2626;
}

/* 상세 조건 목록 */
.comp-specs-list {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}

.comp-specs-list li {
  margin-bottom: 0.2rem;
}

/* 지점장 한 줄 총평 박스 */
.comp-comment-box {
  background: rgba(59, 130, 246, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  margin-bottom: 1.15rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-primary);
}

.comp-comment-box strong {
  color: var(--brand-primary);
}

/* 카드 하단 액션 버튼 */
.comp-card-actions {
  display: flex;
  gap: 0.5rem;
}

.comp-card-actions .cta-kakao {
  flex: 1;
  font-size: 0.85rem;
  padding: 0.65rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 800;
}

/* 5. 상세 비교 매트릭스 표 */
.comp-full-table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow-x: auto;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-sm);
}

.comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  text-align: center;
  min-width: 960px;
}

.comp-table th {
  background: var(--bg-subtle);
  color: var(--text-primary);
  font-weight: 800;
  padding: 0.85rem 0.65rem;
  border-bottom: 2px solid var(--border-strong);
  border-right: 1px solid var(--border-subtle);
  white-space: nowrap;
}

.comp-table td {
  padding: 0.75rem 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  vertical-align: middle;
}

.comp-table tr:hover td {
  background: rgba(59, 130, 246, 0.04);
}

.comp-table tr.highlight-row td {
  background: rgba(245, 158, 11, 0.04);
  font-weight: 600;
}

.comp-table td.col-company {
  text-align: left;
  font-weight: 800;
  color: var(--text-primary);
  background: var(--bg-surface);
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.04);
}

.comp-table th.col-company {
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.04);
}

.tbl-badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  font-weight: 700;
}

.tbl-badge.blue { background: rgba(59, 130, 246, 0.12); color: #2563EB; }
.tbl-badge.green { background: rgba(16, 185, 129, 0.12); color: #059669; }
.tbl-badge.amber { background: rgba(245, 158, 11, 0.12); color: #D97706; }

/* 6. 하단 상담 유도 배너 */
.comp-consult-cta-banner {
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 2.25rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  box-shadow: var(--shadow-xl);
}

.cta-banner-left {
  flex: 1;
}

.banner-badge {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(59, 130, 246, 0.3);
  color: #93C5FD;
  margin-bottom: 0.75rem;
}

.cta-banner-left h3 {
  font-size: 1.45rem;
  font-weight: 800;
  margin: 0 0 0.65rem 0;
  line-height: 1.35;
}

.cta-banner-left p {
  font-size: 0.92rem;
  color: #CBD5E1;
  line-height: 1.6;
  margin: 0;
}

.cta-banner-right {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (max-width: 1024px) {
  .terms-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .comp-smart-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .comp-tabs-bar {
    grid-template-columns: 1fr;
  }
  .comp-consult-cta-banner {
    flex-direction: column;
    text-align: center;
  }
  .cta-banner-right {
    width: 100%;
  }
}

@media (max-width: 640px) {
  .terms-cards-grid {
    grid-template-columns: 1fr;
  }
  .comp-smart-cards-grid {
    grid-template-columns: 1fr;
  }
  .comp-controls-bar {
    flex-direction: column;
    align-items: stretch;
  }
  .comp-view-toggle {
    justify-content: center;
  }
}

/* ==========================================================================
   15. 대한민국 24개 전 보험사 실시간 시뮬레이터 전산 시스템 스타일 & 법적 고지 배너
   ========================================================================== */

/* 1. 필수 고객 안내문 및 심사 기준 강조 배너 (ERP Compliance Alert) */
.simulator-compliance-banner {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(239, 68, 68, 0.04) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.35);
  border-radius: var(--radius-xl);
  padding: 1.35rem 1.75rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.08);
  position: relative;
  overflow: hidden;
}

.simulator-compliance-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background: #F59E0B;
}

.compliance-badge-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}

.comp-alert-pill {
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-full);
  background: #F59E0B;
  color: #FFFFFF;
  letter-spacing: 0.02em;
}

.comp-alert-sub {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.compliance-body-wrap {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.compliance-icon-wrap {
  font-size: 2rem;
  line-height: 1;
  flex-shrink: 0;
}

.compliance-text-wrap {
  flex: 1;
}

.compliance-main-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: #B45309;
  line-height: 1.5;
  margin: 0 0 0.65rem 0;
}

[data-theme="dark"] .compliance-main-title {
  color: #FBBF24;
}

.compliance-strong-box {
  background: var(--bg-surface);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  font-size: 0.84rem;
  line-height: 1.6;
}

.highlight-underwriting {
  color: #DC2626;
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.88rem;
}

.compliance-strong-box p {
  margin: 0;
  color: var(--text-secondary);
}

/* 2. 고객 맞춤 조건 설정 사이드바 패널 스타일 */
.customizer-panel {
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  position: relative;
}

.customer-quick-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
}

.profile-card-kicker {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}

.profile-edit-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.35rem 0.65rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-primary);
}

.panel-header h3 {
  color: var(--text-primary);
  font-size: 1.1rem;
  font-weight: 800;
}

.field-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-muted);
  margin-left: 0.35rem;
}

.field-badge.accent {
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
}

/* 3. 만기 및 납입 방식 전산 카드 선택기 (20년납 90세만기 / 100세만기 / 20년갱신) */
.erp-renew-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.erp-renew-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.erp-renew-card:hover {
  border-color: var(--brand-primary);
  background: var(--bg-surface);
}

.erp-renew-card.active {
  border-color: var(--brand-primary);
  background: var(--bg-surface-elevated);
  box-shadow: 0 2px 10px rgba(59, 130, 246, 0.15);
}

.renew-radio-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
  transition: all var(--transition-fast);
}

.erp-renew-card.active .renew-radio-indicator {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
}

.erp-renew-card.active .renew-radio-indicator::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FFFFFF;
}

.renew-text-wrap {
  flex: 1;
}

.renew-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.renew-title-row strong {
  font-size: 0.86rem;
  color: var(--text-primary);
}

.renew-chip-recom {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  background: #EFF6FF;
  color: #2563EB;
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.renew-chip-long {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  background: #ECFDF5;
  color: #059669;
  border: 1px solid rgba(5, 150, 105, 0.2);
}

.renew-chip-eco {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid rgba(217, 119, 6, 0.2);
}

.renew-sub-desc {
  display: block;
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* 4. 고객 과거 병력 선택기 (Medical History Selector) */
.medical-history-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.medical-history-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.medical-history-card:hover {
  border-color: #10B981;
  background: var(--bg-surface);
  transform: translateY(-1px);
}

.medical-history-card.active {
  border-color: #059669;
  background: rgba(16, 185, 129, 0.08);
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.15);
}

.med-radio-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  margin-top: 2px;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.medical-history-card.active .med-radio-indicator {
  border-color: #059669;
  background: #059669;
  box-shadow: inset 0 0 0 3px #FFFFFF;
}

.med-text-wrap {
  flex: 1;
}

.med-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.med-title-row strong {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 700;
}

.med-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-full);
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
  white-space: nowrap;
}

.med-sub-desc {
  display: block;
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* 5. 가입 희망 목적 선택기 (Insurance Purpose Selector) */
.insurance-purpose-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.insurance-purpose-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--bg-subtle);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.insurance-purpose-card:hover {
  border-color: #2563EB;
  background: var(--bg-surface);
  transform: translateY(-1px);
}

.insurance-purpose-card.active {
  border-color: #2563EB;
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 2px 10px rgba(37, 99, 235, 0.15);
}

.purp-icon-wrap {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.purp-text-wrap {
  flex: 1;
}

.purp-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.15rem;
}

.purp-title-row strong {
  font-size: 0.88rem;
  color: var(--text-primary);
  font-weight: 700;
}

.purp-badge {
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-full);
  background: rgba(37, 99, 235, 0.15);
  color: #2563EB;
  white-space: nowrap;
}

.purp-sub-desc {
  display: block;
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.35;
}

/* 6. 사이드바 하단 고객 안내문 박스 */
.sidebar-disclaimer-box {
  background: var(--bg-subtle);
  border: 1px dashed rgba(245, 158, 11, 0.4);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  margin-top: 1.5rem;
  font-size: 0.76rem;
  line-height: 1.5;
}

.s-disc-header {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: #B45309;
  margin-bottom: 0.35rem;
}

[data-theme="dark"] .s-disc-header {
  color: #FBBF24;
}

.sidebar-disclaimer-box p {
  margin: 0 0 0.35rem 0;
  color: var(--text-secondary);
}

.s-disc-warn {
  color: #DC2626;
  font-weight: 700;
  font-size: 0.74rem;
}

.erp-guide-link {
  background: none;
  border: none;
  color: var(--brand-primary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 2px;
}

.erp-guide-link:hover {
  text-decoration: underline;
}

/* 5. 회사 카드 내 전산 안내문 뱃지 */
.card-mini-disclaimer {
  font-size: 0.72rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  margin: 0.75rem 0;
  line-height: 1.4;
  border-left: 2px solid #F59E0B;
}

/* ==========================================================================
   16. 김경호 지점장 전용 관리자 보안 인증 & 센터 스타일시트 (styles.css)
   ========================================================================== */

/* 1. 헤더 관리자 인증 버튼 */
.btn-admin-auth {
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  transition: all var(--transition-fast);
}

.btn-admin-auth.locked {
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.3);
  color: #DC2626;
}

.btn-admin-auth.locked:hover {
  background: #DC2626;
  color: #FFFFFF;
}

.btn-admin-auth.unlocked {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.4);
  color: #059669;
  font-weight: 700;
}

.btn-admin-auth.unlocked:hover {
  background: #10B981;
  color: #FFFFFF;
}

/* 2. 관리자 인증 모달 */
.admin-auth-card {
  max-width: 460px;
  width: 90%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
  background: var(--bg-surface);
}

.admin-auth-header {
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.auth-shield-icon {
  font-size: 2rem;
  line-height: 1;
}

.auth-badge {
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--brand-primary);
  display: block;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.admin-auth-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0;
}

.admin-auth-body {
  padding: 1.5rem;
}

.auth-notice-box {
  background: var(--bg-subtle);
  border-left: 3px solid var(--brand-primary);
  padding: 0.75rem 0.95rem;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.auth-notice-box strong {
  color: var(--text-primary);
}

.auth-input-group label {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.45rem;
}

.pwd-input-wrap {
  display: flex;
  position: relative;
  align-items: center;
}

.auth-pwd-input {
  width: 100%;
  padding: 0.75rem 2.75rem 0.75rem 0.95rem;
  font-size: 1rem;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-elevated);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.auth-pwd-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.btn-peek-pwd {
  position: absolute;
  right: 0.65rem;
  background: none;
  border: none;
  font-size: 1.15rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
}

.btn-peek-pwd:hover {
  opacity: 1;
}

.auth-error-msg {
  color: #DC2626;
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0.5rem;
  padding: 0.4rem 0.65rem;
  background: #FEE2E2;
  border-radius: var(--radius-sm);
}

.auth-hint {
  font-size: 0.76rem;
  color: var(--text-muted);
  margin-top: 0.65rem;
}

.auth-hint code {
  background: var(--bg-subtle);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-weight: 800;
  color: var(--brand-primary);
}

.auth-btn-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.btn-auth-cancel {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-weight: 700;
  cursor: pointer;
}

.btn-auth-submit {
  flex: 2;
  padding: 0.75rem;
  border: none;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #2563EB, #1D4ED8);
  color: #FFFFFF;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all var(--transition-fast);
}

.btn-auth-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

/* 3. 관리자 대시보드 / 센터 모달 */
.admin-dash-card {
  max-width: 580px;
  width: 90%;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25);
}

.admin-dash-header {
  border-bottom: 1px solid var(--border-subtle);
  padding: 1.25rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-title-group {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.dash-crown-icon {
  font-size: 2rem;
  line-height: 1;
}

.dash-status-badge {
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
  background: #ECFDF5;
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  display: inline-block;
  margin-bottom: 0.2rem;
}

.admin-dash-header h3 {
  font-size: 1.15rem;
  font-weight: 800;
  margin: 0;
  color: var(--text-primary);
}

.admin-dash-body {
  padding: 1.5rem;
}

.admin-profile-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(59, 130, 246, 0.02) 100%);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.admin-avatar {
  font-size: 2.2rem;
  line-height: 1;
  background: #FFFFFF;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

.admin-meta h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.2rem 0;
}

.admin-meta p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin: 0 0 0.25rem 0;
}

.admin-auth-time {
  font-size: 0.72rem;
  color: #059669;
  font-weight: 700;
}

.admin-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.admin-action-tile {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.15rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.admin-action-tile:hover {
  border-color: var(--brand-primary);
  background: var(--bg-surface-elevated);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.admin-action-tile .tile-icon {
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 0.25rem;
}

.admin-action-tile strong {
  font-size: 0.9rem;
  color: var(--text-primary);
}

.admin-action-tile span {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.admin-action-tile.danger:hover {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.05);
}

.admin-action-tile.danger strong {
  color: #DC2626;
}

/* 비밀번호 변경 패널 */
.admin-pwd-panel {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-top: 1rem;
}

.pwd-panel-title {
  font-size: 0.95rem;
  font-weight: 800;
  margin: 0 0 1rem 0;
  color: var(--text-primary);
}

.pwd-field-group {
  margin-bottom: 0.85rem;
}

.pwd-field-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.pwd-change-msg {
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.85rem;
}

.pwd-change-msg.success {
  background: #ECFDF5;
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.pwd-change-msg.error {
  background: #FEE2E2;
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.pwd-btn-row {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1rem;
}

.btn-pwd-cancel {
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

.btn-pwd-save {
  padding: 0.55rem 1.15rem;
  border: none;
  background: var(--brand-primary);
  color: #FFFFFF;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

/* ==========================================================================
   17. 웹사이트 전체 개인 보안 잠금 화면 (Site Personal Security Lock Screen)
   ========================================================================== */

body.site-locked {
  overflow: hidden !important;
}

.site-lock-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(circle at 50% 20%, rgba(30, 96, 255, 0.12) 0%, rgba(15, 23, 42, 0.94) 50%, rgba(10, 15, 29, 0.98) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.4s ease, transform 0.4s ease;
}

.site-lock-overlay.unlocked {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.03);
}

.site-lock-card {
  width: 100%;
  max-width: 480px;
  background: rgba(23, 32, 54, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.7), 0 0 50px rgba(30, 96, 255, 0.15);
  padding: 2.25rem 2rem;
  color: #F8FAFC;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: lockCardFloatIn 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes lockCardFloatIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.site-lock-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #FF6B00 0%, #1E60FF 50%, #059669 100%);
}

.lock-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(30, 96, 255, 0.12);
  border: 1px solid rgba(30, 96, 255, 0.3);
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  margin-bottom: 1.25rem;
}

.lock-shield-pulse {
  font-size: 1.15rem;
  animation: pulseIcon 2s infinite ease-in-out;
}

@keyframes pulseIcon {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.lock-security-chip {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #60A5FA;
}

.lock-header-text h2 {
  font-size: 1.55rem;
  font-weight: 850;
  margin: 0 0 0.35rem 0;
  color: #FFFFFF;
  letter-spacing: -0.025em;
}

.lock-header-text h2 span {
  background: linear-gradient(135deg, #FF6B00, #F59E0B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lock-subtitle {
  font-size: 0.85rem;
  color: #94A3B8;
  margin: 0 0 1.35rem 0;
}

.lock-notice-box {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3.5px solid #1E60FF;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 1.35rem;
}

.lock-notice-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.lock-notice-text strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 750;
  color: #F1F5F9;
  margin-bottom: 0.2rem;
}

.lock-notice-text span {
  display: block;
  font-size: 0.78rem;
  color: #94A3B8;
  line-height: 1.45;
}

.lock-form {
  text-align: left;
}

.lock-input-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 750;
  color: #E2E8F0;
  margin-bottom: 0.45rem;
}

.lock-pwd-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.lock-pwd-input {
  width: 100%;
  padding: 0.85rem 3rem 0.85rem 1.15rem;
  font-size: 1.05rem;
  background: rgba(15, 23, 42, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  color: #FFFFFF;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.lock-pwd-input:focus {
  outline: none;
  border-color: #1E60FF;
  box-shadow: 0 0 0 3px rgba(30, 96, 255, 0.35);
  background: rgba(15, 23, 42, 1);
}

.btn-peek-lock-pwd {
  position: absolute;
  right: 0.85rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.3rem;
  line-height: 1;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.btn-peek-lock-pwd:hover {
  opacity: 1;
}

.lock-error-msg {
  color: #F87171;
  font-size: 0.82rem;
  font-weight: 700;
  margin-top: 0.5rem;
  padding: 0.45rem 0.75rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
}

.lock-remember-row {
  margin: 0.85rem 0 1.25rem 0;
}

.remember-checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: #94A3B8;
  cursor: pointer;
  user-select: none;
}

.remember-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1E60FF;
  cursor: pointer;
}

.lock-action-row {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.btn-quick-bypass {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1.5px solid rgba(255, 107, 0, 0.4);
  border-radius: 14px;
  background: rgba(255, 107, 0, 0.12);
  color: #FFB370;
  font-size: 0.94rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  letter-spacing: -0.01em;
}

.btn-quick-bypass:hover {
  background: rgba(255, 107, 0, 0.22);
  border-color: #FF6B00;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 0, 0.3);
}

.btn-quick-bypass:active {
  transform: translateY(0);
}

.bypass-bolt {
  font-size: 1.15rem;
}

.btn-unlock-site {
  width: 100%;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #1E60FF 0%, #0052CC 100%);
  color: #FFFFFF;
  font-size: 0.95rem;
  font-weight: 800;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  box-shadow: 0 4px 18px rgba(30, 96, 255, 0.35);
  transition: all 0.2s ease;
}

.btn-unlock-site:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(30, 96, 255, 0.5);
  background: linear-gradient(135deg, #2B6BFF 0%, #005AE0 100%);
}

.btn-unlock-site:active {
  transform: translateY(0);
}

.lock-help-box {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  font-size: 0.77rem;
  color: #94A3B8;
  margin-top: 1.15rem;
  line-height: 1.45;
  text-align: center;
}

.lock-help-box code {
  background: rgba(30, 96, 255, 0.25);
  color: #93C5FD;
  padding: 0.15rem 0.45rem;
  border-radius: 6px;
  font-weight: 800;
}

.lock-footer-info {
  margin-top: 1.35rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.72rem;
  color: #64748B;
}

/* Header Quick Screen Lock Button */
.btn-screen-lock-quick {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #EF4444;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-screen-lock-quick:hover {
  background: #EF4444;
  color: #FFFFFF;
  border-color: #EF4444;
  transform: translateY(-1px);
}

/* ==========================================================================
   19. 김경호 지점장의 실제 고객 리모델링 전·후 보장분석표 스타일
   ========================================================================== */
#section-coverage-analysis {
  scroll-margin-top: 5rem;
}

.analysis-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.5rem 0 2rem 0;
}

@media (max-width: 992px) {
  .analysis-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .analysis-metrics-grid {
    grid-template-columns: 1fr;
  }
}

.analysis-metric-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-top: 4px solid var(--brand-primary);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

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

.analysis-metric-card.card-red { border-top-color: #EF4444; }
.analysis-metric-card.card-red .am-value { color: #EF4444; }

.analysis-metric-card.card-green { border-top-color: #10B981; }
.analysis-metric-card.card-green .am-value { color: #10B981; }

.analysis-metric-card.card-blue { border-top-color: #1E60FF; }
.analysis-metric-card.card-blue .am-value { color: #1E60FF; }

.analysis-metric-card.card-purple { border-top-color: #8B5CF6; }
.analysis-metric-card.card-purple .am-value { color: #8B5CF6; }

.am-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.am-data {
  display: flex;
  flex-direction: column;
}

.am-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.am-value {
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.am-sub {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Analysis Tab Bar */
.analysis-tab-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
}

.analysis-tab-btn {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.2rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.analysis-tab-btn:hover {
  border-color: #6366F1;
  color: #4F46E5;
  background: rgba(99, 102, 241, 0.05);
}

.analysis-tab-btn.active {
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  color: #FFFFFF;
  border-color: #4338CA;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Analysis Table Wrapper */
.analysis-table-container {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow-x: auto;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
}

.analysis-comp-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.88rem;
}

.analysis-comp-table th,
.analysis-comp-table td {
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.analysis-comp-table th {
  background: var(--bg-subtle);
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.analysis-comp-table th.col-before {
  background: rgba(239, 68, 68, 0.08);
  color: #DC2626;
  border-left: 2px solid rgba(239, 68, 68, 0.25);
}

.analysis-comp-table th.col-after {
  background: rgba(16, 185, 129, 0.1);
  color: #059669;
  border-left: 2px solid rgba(16, 185, 129, 0.35);
}

.analysis-comp-table th.col-effect {
  background: rgba(99, 102, 241, 0.08);
  color: #4F46E5;
}

.analysis-comp-table tr:last-child td {
  border-bottom: none;
}

.analysis-comp-table tr.row-highlight {
  background: rgba(99, 102, 241, 0.03);
  font-weight: 700;
}

.analysis-comp-table tr.row-total {
  background: var(--bg-subtle);
  font-weight: 800;
  font-size: 0.95rem;
  border-top: 2px solid var(--border-subtle);
}

.analysis-comp-table td.col-before {
  background: rgba(239, 68, 68, 0.02);
  color: #B91C1C;
  border-left: 2px solid rgba(239, 68, 68, 0.15);
}

.analysis-comp-table td.col-after {
  background: rgba(16, 185, 129, 0.03);
  color: #047857;
  font-weight: 700;
  border-left: 2px solid rgba(16, 185, 129, 0.25);
}

/* Badges inside Table */
.badge-diff-saved {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(239, 68, 68, 0.12);
  color: #DC2626;
  border: 1px solid rgba(239, 68, 68, 0.3);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
}

.badge-diff-expanded {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
}

.badge-diff-upgraded {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: rgba(99, 102, 241, 0.12);
  color: #4F46E5;
  border: 1px solid rgba(99, 102, 241, 0.3);
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
}

/* Analysis Action Buttons Bar */
.analysis-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.analysis-action-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.analysis-action-info {
  display: flex;
  flex-direction: column;
}

.analysis-action-info strong {
  font-size: 0.95rem;
  color: var(--text-primary);
}

.analysis-action-info span {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.analysis-action-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.btn-analysis-excel {
  background: #107C41;
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.65rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.btn-analysis-excel:hover {
  background: #0E6B37;
  transform: translateY(-1px);
}

.btn-analysis-imo {
  background: linear-gradient(135deg, #10B981, #059669);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.65rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all var(--transition-fast);
}

.btn-analysis-imo:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transform: translateY(-1px);
}

.btn-analysis-kakao {
  background: #FEE500;
  color: #191919;
  border: none;
  border-radius: var(--radius-md);
  padding: 0.65rem 1.15rem;
  font-size: 0.85rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all var(--transition-fast);
}

.btn-analysis-kakao:hover {
  background: #FADA0A;
  transform: translateY(-1px);
}

/* ==========================================================================
   19. 대한민국 24개 전 보험사 정식 CI/BI 로고 시스템 (Official Corporate Logos)
   ========================================================================== */

.brand-official-logo-wrap {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.ci-official-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all var(--transition-fast);
}

.ci-official-card-pill:hover {
  border-color: var(--brand-color, var(--brand-primary));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.ci-symbol-box {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  padding: 4px;
  flex-shrink: 0;
  transition: transform var(--transition-fast);
}

.ci-symbol-box:hover {
  transform: scale(1.05);
}

.ci-symbol-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* 실제 로고 그림(assets/logos/*.png)은 가로로 긴 모양이라 칸을 넓게 씁니다.
   바탕이 투명한 그림이라 다크모드에서도 칸 바탕은 흰색 그대로 둡니다. */
.ci-logo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ci-symbol-box.is-wordmark,
.ci-symbol-wrap.normal .ci-symbol-box.is-wordmark {
  width: 120px;
  padding: 6px 10px;
}

.ci-symbol-wrap.mini .ci-symbol-box.is-wordmark {
  width: 72px;
  padding: 3px 6px;
}

.ci-symbol-wrap.small .ci-symbol-box.is-wordmark {
  width: 92px;
  padding: 4px 8px;
}

.ci-symbol-wrap.large .ci-symbol-box.is-wordmark {
  width: 150px;
  padding: 8px 12px;
}

.ci-symbol-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ci-symbol-wrap.mini .ci-symbol-box {
  width: 26px;
  height: 26px;
  padding: 2px;
  border-radius: 6px;
}

.ci-symbol-wrap.small .ci-symbol-box {
  width: 34px;
  height: 34px;
  padding: 3px;
  border-radius: 8px;
}

.ci-symbol-wrap.normal .ci-symbol-box {
  width: 44px;
  height: 44px;
  padding: 4px;
  border-radius: 10px;
}

.ci-symbol-wrap.large .ci-symbol-box {
  width: 56px;
  height: 56px;
  padding: 6px;
  border-radius: 14px;
}

.ci-logo-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.6rem 0.2rem 0.25rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.ci-badge-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.ci-meta-column {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.ci-name-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ci-company-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.ci-sector-chip {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}

.ci-sector-chip.sector-nonlife-chip {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}

.ci-sector-chip.sector-life-chip {
  background: rgba(37, 99, 235, 0.12);
  color: #2563EB;
}

.ci-official-subtext {
  font-size: 0.68rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* 24개 공식 제휴사 쇼케이스 배너 */
.partners-official-showcase {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.pos-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.9rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pos-title-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pos-title-group h4 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.pos-badge {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  background: rgba(243, 112, 33, 0.12);
  color: #F37021;
  border-radius: 9999px;
}

.pos-subtext {
  font-size: 0.76rem;
  color: var(--text-muted);
}

.pos-grid-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.65rem;
}

.pos-logo-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.45rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

/* 로고 그림 칸: 다크모드에서도 흰 바탕 */
.pos-item-logo {
  height: 52px;
  padding: 9px 12px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

.pos-item-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  padding: 0 0.2rem;
  min-width: 0;
}

.pos-item-sector {
  flex: none;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--text-muted);
}

/* 휴대폰에서도 로고를 두 줄로 */
@media (max-width: 480px) {
  .pos-grid-logos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pos-item-logo {
    height: 46px;
    padding: 8px;
  }
}

.pos-logo-item:hover {
  background: var(--bg-surface);
  border-color: var(--brand-primary);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.pos-item-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ==========================================================================
   20. 보험개발원(KIDI) 표준 직업코드 & 상해급수 선택 시스템 (Job Codes)
   ========================================================================== */

.job-code-selector-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.85rem;
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.job-active-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.8rem;
  transition: all var(--transition-fast);
}

.job-active-card.grade-1 {
  border-left: 4px solid #10B981;
}

.job-active-card.grade-2 {
  border-left: 4px solid #F59E0B;
}

.job-active-card.grade-3 {
  border-left: 4px solid #EF4444;
}

.jac-info-col {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.jac-code-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.jac-code-pill {
  font-family: 'Montserrat', 'Pretendard', monospace;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
}

.jac-grade-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.jac-grade-pill.grade-1 {
  background: rgba(16, 185, 129, 0.15);
  color: #065F46;
}

.jac-grade-pill.grade-2 {
  background: rgba(245, 158, 11, 0.15);
  color: #92400E;
}

.jac-grade-pill.grade-3 {
  background: rgba(239, 68, 68, 0.15);
  color: #991B1B;
}

.jac-job-name {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.35;
}

.jac-task-desc {
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.btn-open-job-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: linear-gradient(135deg, #3B82F6, #1D4ED8);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.btn-open-job-modal:hover {
  background: linear-gradient(135deg, #2563EB, #1E40AF);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
  transform: translateY(-1px);
}

.job-quick-pills-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.job-quick-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
}

.job-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.job-chip-btn {
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.25rem 0.55rem;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 9999px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.job-chip-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.job-chip-btn.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #FFFFFF;
  font-weight: 700;
}

/* 직업코드 검색 모달 */
.job-modal-header-search {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.job-search-input-wrap {
  position: relative;
  width: 100%;
}

.job-search-input-wrap input {
  width: 100%;
  padding: 0.75rem 2.8rem 0.75rem 1rem;
  font-size: 0.92rem;
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--text-primary);
  outline: none;
  transition: border-color var(--transition-fast);
}

.job-search-input-wrap input:focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.job-search-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

.job-grade-filter-tabs {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.2rem;
}

.job-tab-btn {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.job-tab-btn:hover {
  background: var(--bg-subtle);
}

.job-tab-btn.active {
  background: #1E293B;
  color: #FFFFFF;
  border-color: #1E293B;
}

.job-modal-body-list {
  max-height: 520px;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.job-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  transition: all var(--transition-fast);
}

.job-item-card:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  transform: translateY(-1px);
}

.job-item-card.selected {
  border-color: var(--brand-primary);
  background: rgba(37, 99, 235, 0.04);
}

.jic-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  flex: 1;
}

.jic-header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.jic-code {
  font-family: 'Montserrat', monospace;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  background: #F1F5F9;
  color: #334155;
  border-radius: 4px;
}

.jic-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
}

.jic-category {
  font-size: 0.72rem;
  color: var(--text-muted);
  padding: 0.1rem 0.4rem;
  background: var(--bg-subtle);
  border-radius: 4px;
}

.jic-tasks {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.jic-uwnote {
  font-size: 0.75rem;
  color: #B45309;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 0.3rem 0.55rem;
  border-radius: 4px;
  line-height: 1.35;
}

.btn-select-this-job {
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--transition-fast);
}

.btn-select-this-job:hover {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #FFFFFF;
}

.job-item-card.selected .btn-select-this-job {
  background: #10B981;
  border-color: #10B981;
  color: #FFFFFF;
}

/* ==========================================================================
   21. 💡 한눈에 쏙 들어오는 필수 보험 지식 & 인포그래픽 센터 (Visual Guides)
   ========================================================================== */
#section-visual-guides {
  margin-top: 3.5rem;
  padding-bottom: 2rem;
}

/* 탭 버튼 바 */
.vg-tab-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  margin: 1.75rem 0 2rem;
  flex-wrap: wrap;
}

.vg-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.vg-tab-btn:hover {
  border-color: #EC4899;
  color: #EC4899;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.15);
}

.vg-tab-btn.active {
  background: linear-gradient(135deg, #EC4899, #8B5CF6);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.35);
  transform: translateY(-2px);
}

.vg-tab-icon {
  font-size: 1.15rem;
}

/* 인포그래픽 메인 카드 컨테이너 */
.vg-content-area {
  min-height: 480px;
}

.vg-panel-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 2.25rem;
  box-shadow: var(--shadow-md);
  animation: fadeIn 0.3s ease-out;
}

.vg-card-header {
  margin-bottom: 2rem;
  text-align: center;
}

.vg-card-badge {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.25rem 0.8rem;
  border-radius: 9999px;
  background: rgba(236, 72, 153, 0.12);
  color: #EC4899;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.vg-card-title {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
  letter-spacing: -0.03em;
}

.vg-card-subtitle {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}

.vg-card-standard-note {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-subtle);
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   [1] 갱신형 vs 비갱신형 인포그래픽 스타일
   -------------------------------------------------------------------------- */
.renew-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  margin-bottom: 2rem;
}

@media (max-width: 900px) {
  .renew-comparison-grid {
    grid-template-columns: 1fr;
  }
}

.renew-box-card {
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-normal);
}

.renew-box-card.renewable {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.04) 0%, rgba(255, 255, 255, 0.8) 100%);
  border: 2px solid rgba(239, 68, 68, 0.35);
}

.renew-box-card.non-renewable {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
  border: 2px solid rgba(16, 185, 129, 0.45);
}

.rb-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.rb-title-group h3 {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 0.2rem;
}

.renewable .rb-title-group h3 { color: #DC2626; }
.non-renewable .rb-title-group h3 { color: #059669; }

.rb-duration-badge {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.rb-tag {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.6rem;
  border-radius: 9999px;
}

.renewable .rb-tag {
  background: rgba(239, 68, 68, 0.15);
  color: #DC2626;
}

.non-renewable .rb-tag {
  background: rgba(16, 185, 129, 0.15);
  color: #059669;
}

/* 바 차트 비주얼 */
.rb-chart-wrap {
  background: var(--bg-surface);
  border-radius: var(--radius-md);
  padding: 1.25rem 0.75rem 0.5rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border-subtle);
}

.rb-bars-flex {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  height: 220px;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #E2E8F0;
  position: relative;
}

.rb-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.rb-bar-price {
  font-size: 0.7rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  text-align: center;
  white-space: nowrap;
}

.renewable .rb-bar-price { color: #EA580C; }
.non-renewable .rb-bar-price { color: #059669; }

.rb-bar-stick {
  width: 70%;
  max-width: 38px;
  border-radius: 6px 6px 0 0;
  transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
}

.renewable .rb-bar-stick {
  background: linear-gradient(180deg, #F97316 0%, #EA580C 100%);
  box-shadow: 0 2px 8px rgba(234, 88, 12, 0.25);
}

.non-renewable .rb-bar-stick {
  background: linear-gradient(180deg, #10B981 0%, #059669 100%);
  box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

.rb-bar-stick.free-bar {
  background: #E2E8F0;
  height: 4px !important;
  border-radius: 2px;
}

.rb-bar-age {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-secondary);
  margin-top: 0.45rem;
  text-align: center;
}

.rb-bullets {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 1rem;
}

.rb-bullet-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.84rem;
  font-weight: 700;
}

.rb-total-banner {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  margin-top: auto;
}

.renewable .rb-total-banner {
  background: rgba(239, 68, 68, 0.1);
  border: 1px dashed rgba(239, 68, 68, 0.4);
  color: #B91C1C;
}

.non-renewable .rb-total-banner {
  background: rgba(16, 185, 129, 0.1);
  border: 1px dashed rgba(16, 185, 129, 0.4);
  color: #047857;
}

.rb-total-banner strong {
  display: block;
  font-size: 0.95rem;
}

.rb-total-banner span {
  font-size: 0.78rem;
  opacity: 0.9;
}

/* 절약 금액 비교 하이라이트 박스 */
.renew-savings-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.75rem;
  background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-lg);
  flex-wrap: wrap;
  gap: 1rem;
}

.rsc-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rsc-icon {
  font-size: 2.2rem;
  padding: 0.6rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.rsc-text h4 {
  margin: 0 0 0.25rem;
  font-size: 1.15rem;
  color: #F8FAFC;
}

.rsc-text p {
  margin: 0;
  font-size: 0.84rem;
  color: #94A3B8;
}

.rsc-amount-badge {
  text-align: right;
}

.rsc-amount-badge .saving-num {
  font-size: 1.8rem;
  font-weight: 900;
  color: #34D399;
  letter-spacing: -0.02em;
}

.rsc-amount-badge .saving-label {
  display: block;
  font-size: 0.75rem;
  color: #CBD5E1;
}

/* 지점장 어드바이저 팁 박스 */
.vg-advisor-tip-box {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: var(--radius-md);
  padding: 1.1rem 1.4rem;
}

.vatb-icon {
  font-size: 1.5rem;
  line-height: 1;
}

.vatb-content strong {
  display: block;
  color: #B45309;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.vatb-content p {
  margin: 0;
  font-size: 0.85rem;
  color: #78350F;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   [2] 주요 수술 1~5종 예시 인포그래픽 스타일
   -------------------------------------------------------------------------- */
.surgery-filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
  background: var(--bg-subtle);
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
}

.surgery-grade-tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.sg-tab-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 9999px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sg-tab-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.sg-tab-btn.active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #FFFFFF;
}

.surgery-search-box {
  display: flex;
  align-items: center;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 0.25rem 0.75rem;
  gap: 0.4rem;
}

.surgery-search-box input {
  border: none;
  outline: none;
  font-size: 0.82rem;
  background: transparent;
  width: 160px;
}

/* 3분할 수술비 그리드 */
.surgery-3col-layout {
  display: grid;
  grid-template-columns: 1fr 240px 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 1100px) {
  .surgery-3col-layout {
    grid-template-columns: 1fr 1fr;
  }
  .surgery-center-anatomy {
    grid-column: span 2;
    order: -1;
  }
}

@media (max-width: 720px) {
  .surgery-3col-layout {
    grid-template-columns: 1fr;
  }
  .surgery-center-anatomy {
    grid-column: span 1;
  }
}

.surgery-list-column {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.slc-header {
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #FFFFFF;
}

.slc-header.high-cost {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
}

.slc-header.frequent {
  background: linear-gradient(135deg, #2563EB 0%, #1D4ED8 100%);
}

.slc-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.slc-count-badge {
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(255, 255, 255, 0.25);
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
}

.slc-items-list {
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 620px;
  overflow-y: auto;
}

.surgery-item-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid transparent;
  transition: all var(--transition-fast);
}

.surgery-item-row:hover {
  background: var(--bg-surface);
  border-color: var(--brand-primary);
  transform: translateX(2px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.sir-left {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1;
}

.sir-rank {
  font-size: 0.75rem;
  font-weight: 800;
  width: 20px;
  text-align: center;
  color: var(--text-muted);
}

.sir-rank.rank-1 { color: #EAB308; }
.sir-rank.rank-2 { color: #94A3B8; }
.sir-rank.rank-3 { color: #CD7F32; }

.sir-icon {
  font-size: 1.15rem;
}

.sir-info {
  display: flex;
  flex-direction: column;
}

.sir-name {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--text-primary);
}

.sir-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* 종별 배지 (1~5종) */
.grade-tag {
  font-size: 0.74rem;
  font-weight: 900;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

.grade-tag.g-1 { background: rgba(56, 189, 248, 0.15); color: #0284C7; border: 1px solid rgba(56, 189, 248, 0.3); }
.grade-tag.g-2 { background: rgba(16, 185, 129, 0.15); color: #059669; border: 1px solid rgba(16, 185, 129, 0.3); }
.grade-tag.g-3 { background: rgba(245, 158, 11, 0.15); color: #D97706; border: 1px solid rgba(245, 158, 11, 0.3); }
.grade-tag.g-4 { background: rgba(249, 115, 22, 0.15); color: #EA580C; border: 1px solid rgba(249, 115, 22, 0.3); }
.grade-tag.g-5 { background: rgba(239, 68, 68, 0.18); color: #DC2626; border: 1px solid rgba(239, 68, 68, 0.35); }

/* 중앙 인체 해부학 비주얼 카드 */
.surgery-center-anatomy {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: sticky;
  top: 90px;
}

.sca-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.3rem;
}

.sca-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.sca-body-figure {
  width: 140px;
  height: 260px;
  position: relative;
  margin: 0.5rem 0 1rem;
}

.sca-body-svg {
  width: 100%;
  height: 100%;
}

.sca-point {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #FFFFFF;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.sca-point:hover {
  transform: scale(1.4);
}

.sca-point.pt-brain { top: 12%; left: 46%; background: #EF4444; }
.sca-point.pt-eye { top: 16%; left: 52%; background: #38BDF8; }
.sca-point.pt-heart { top: 32%; left: 48%; background: #EF4444; }
.sca-point.pt-lung { top: 30%; left: 38%; background: #EA580C; }
.sca-point.pt-liver { top: 40%; left: 52%; background: #F59E0B; }
.sca-point.pt-spine { top: 45%; left: 46%; background: #D97706; }
.sca-point.pt-knee { top: 74%; left: 40%; background: #10B981; }

.sca-legend {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 100%;
  margin-top: 0.5rem;
}

.sca-legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  padding: 0.3rem 0.5rem;
  background: var(--bg-surface);
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   [3] 연령별 다빈도 수술 발생 현황 인포그래픽 스타일
   -------------------------------------------------------------------------- */
.age-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.age-stat-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.age-stat-card:hover {
  border-color: #EC4899;
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.asc-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
}

.asc-avatar {
  font-size: 1.6rem;
  background: var(--bg-subtle);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.asc-title-wrap h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-primary);
}

.asc-title-wrap .asc-sub {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.asc-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.asc-item-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg-subtle);
  border-radius: 6px;
  font-size: 0.82rem;
}

.asc-medal {
  font-size: 0.95rem;
}

.asc-num {
  font-size: 0.74rem;
  font-weight: 800;
  width: 18px;
  color: var(--text-muted);
  text-align: center;
}

.asc-name {
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
}

.asc-tip {
  margin-top: auto;
  font-size: 0.75rem;
  color: #475569;
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #6366F1;
  padding: 0.45rem 0.65rem;
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   [4] 상해 수술 1~5종 체계 인포그래픽 스타일
   -------------------------------------------------------------------------- */
.injury-grades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.injury-grade-card {
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: all var(--transition-fast);
}

.injury-grade-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.igc-header {
  padding: 1rem 1.25rem;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.igc-icon {
  font-size: 1.6rem;
}

.igc-title-group h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.igc-title-group p {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  opacity: 0.9;
  line-height: 1.35;
}

.igc-body {
  padding: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}

.igc-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.83rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.igc-bullet {
  color: var(--brand-primary);
  font-weight: bold;
}

/* --------------------------------------------------------------------------
   [5] 119대 질병 수술비 구조 인포그래픽 스타일
   -------------------------------------------------------------------------- */
.ndisease-search-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--bg-subtle);
  padding: 0.9rem 1.25rem;
  border-radius: var(--radius-md);
  margin-bottom: 1.75rem;
}

.ndisease-search-input {
  flex: 1;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-full);
  font-size: 0.88rem;
  outline: none;
}

.ndisease-search-input:focus {
  border-color: var(--brand-primary);
}

.ndisease-groups-container {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.ndisease-group-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.ngc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.15rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ngc-title-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.ngc-title-group h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
}

.ngc-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
}

.ngc-badge.danger { background: rgba(220, 38, 38, 0.12); color: #DC2626; }
.ngc-badge.warning { background: rgba(217, 119, 6, 0.12); color: #D97706; }
.ngc-badge.info { background: rgba(37, 99, 235, 0.12); color: #2563EB; }
.ngc-badge.teal { background: rgba(13, 148, 136, 0.12); color: #0D9488; }
.ngc-badge.indigo { background: rgba(99, 102, 241, 0.12); color: #6366F1; }

.ngc-chips-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ndisease-chip {
  padding: 0.35rem 0.65rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 6px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.ndisease-chip:hover {
  background: var(--bg-surface);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: translateY(-1px);
}

.ndisease-chip.matched-highlight {
  background: #FEF08A;
  border-color: #EAB308;
  color: #713F12;
  font-weight: 800;
}

/* ==========================================================================
   22. 운전자보험 핵심 인포그래픽 스타일 (Driver Insurance Visuals)
   ========================================================================== */
/* 카테고리 스위처 바 */
.vg-category-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 1.5rem 0 0.5rem;
  flex-wrap: wrap;
}

.vg-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.6rem;
  font-size: 0.98rem;
  font-weight: 800;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.vg-cat-btn:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  transform: translateY(-2px);
}

.vg-cat-btn.active[data-cat="health"] {
  background: linear-gradient(135deg, #EC4899, #8B5CF6);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.35);
}

.vg-cat-btn.active[data-cat="driver"] {
  background: linear-gradient(135deg, #2563EB, #06B6D4);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

/* --------------------------------------------------------------------------
   [1] 자동차사고 처리 프로세스 (민사 vs 형사)
   -------------------------------------------------------------------------- */
.dp-flow-container {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.dp-roles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 800px) {
  .dp-roles-grid {
    grid-template-columns: 1fr;
  }
}

.dp-role-card {
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.dp-role-card.auto-insur {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.05) 0%, rgba(255, 255, 255, 0.8) 100%);
  border: 2px solid rgba(37, 99, 235, 0.35);
}

.dp-role-card.driver-insur {
  background: linear-gradient(180deg, rgba(236, 72, 153, 0.06) 0%, rgba(255, 255, 255, 0.8) 100%);
  border: 2px solid rgba(236, 72, 153, 0.45);
}

.dp-role-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}

.dp-role-header h4 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

.auto-insur .dp-role-header h4 { color: #2563EB; }
.driver-insur .dp-role-header h4 { color: #EC4899; }

.dp-role-badge {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
}

.auto-insur .dp-role-badge { background: rgba(37, 99, 235, 0.15); color: #2563EB; }
.driver-insur .dp-role-badge { background: rgba(236, 72, 153, 0.15); color: #EC4899; }

.dp-role-scope {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.dp-role-target {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* 사고 분기 박스 */
.dp-branches-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 800px) {
  .dp-branches-grid {
    grid-template-columns: 1fr;
  }
}

.dp-branch-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
}

.dp-branch-card.danger {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgba(239, 68, 68, 0.3);
}

.dp-branch-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 0.4rem;
}

.dp-branch-card.danger .dp-branch-title { color: #DC2626; }

.dp-branch-handler {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  margin-bottom: 0.5rem;
  align-self: flex-start;
}

.dp-branch-card.danger .dp-branch-handler {
  background: #DC2626;
  color: #FFFFFF;
}

.dp-branch-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* 형사 사법 처리 절차 로드맵 */
.dp-criminal-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.dp-criminal-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dp-step-pills-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.dp-step-pill {
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 800;
  border-radius: var(--radius-md);
  background: #FEF3C7;
  color: #92400E;
  border: 1px solid #FDE68A;
}

.dp-step-pill.trial {
  background: #FEE2E2;
  color: #B91C1C;
  border-color: #FECACA;
}

.dp-step-arrow {
  color: var(--text-muted);
  font-weight: bold;
}

/* 3대 핵심 보장 카드 */
.dp-needs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

@media (max-width: 768px) {
  .dp-needs-grid {
    grid-template-columns: 1fr;
  }
}

.dp-need-item {
  background: #FFFBEB;
  border: 1.5px solid #FCD34D;
  border-radius: var(--radius-md);
  padding: 1.1rem;
  text-align: center;
}

.dp-need-icon { font-size: 1.8rem; margin-bottom: 0.35rem; }
.dp-need-name { font-size: 0.95rem; font-weight: 800; color: #92400E; margin-bottom: 0.2rem; }
.dp-need-highlight { font-size: 0.82rem; font-weight: 700; color: #B45309; }

/* --------------------------------------------------------------------------
   [2] 운전자보험 변경의 필요성 (과거 vs 현재)
   -------------------------------------------------------------------------- */
.dr-laws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.dr-law-card {
  background: var(--bg-subtle);
  border-left: 4px solid #2563EB;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0.85rem 1rem;
}

.dr-law-date {
  font-size: 0.72rem;
  font-weight: 800;
  color: #2563EB;
}

.dr-law-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  margin: 0.2rem 0;
}

.dr-law-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.35;
}

.dr-compare-table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  margin-bottom: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.dr-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.dr-table th {
  background: var(--bg-surface-elevated);
  padding: 1rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 800;
  border-bottom: 2px solid var(--border-subtle);
}

.dr-table td {
  padding: 1rem 1.25rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-subtle);
}

.dr-table tr:hover td {
  background: var(--bg-subtle);
}

.dr-past-col {
  color: #DC2626;
  font-weight: 700;
}

.dr-present-col {
  color: #2563EB;
  font-weight: 800;
}

.dr-badge-upgrade {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563EB;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   [3] 자동차사고 벌금 [대인 / 대물]
   -------------------------------------------------------------------------- */
.dpen-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

@media (max-width: 800px) {
  .dpen-cards-grid {
    grid-template-columns: 1fr;
  }
}

.dpen-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.dpen-card-header {
  padding: 1.15rem 1.5rem;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dpen-card-header.daein {
  background: linear-gradient(135deg, #DC2626, #EF4444);
}

.dpen-card-header.daemul {
  background: linear-gradient(135deg, #2563EB, #3B82F6);
}

.dpen-card-header h4 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 800;
}

.dpen-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dpen-limit-box {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.dpen-limit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dpen-limit-row strong {
  font-size: 1.05rem;
  color: var(--text-primary);
}

.dpen-limit-row.highlight strong {
  color: #DC2626;
  font-size: 1.25rem;
}

/* --------------------------------------------------------------------------
   [4] 변호사선임비용 [방어비용]
   -------------------------------------------------------------------------- */
.dlaw-conditions-box {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.dlaw-cond-item {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 0.45rem;
}

.dlaw-table-wrap {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.dlaw-table {
  width: 100%;
  border-collapse: collapse;
}

.dlaw-table th, .dlaw-table td {
  padding: 0.9rem 1.25rem;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border-subtle);
}

.dlaw-table th {
  background: var(--bg-surface-elevated);
  font-weight: 800;
}

.dlaw-limit-highlight {
  font-weight: 900;
  color: #2563EB;
}

/* --------------------------------------------------------------------------
   [5] 교통사고처리지원금 [형사합의금]
   -------------------------------------------------------------------------- */
.dset-2col-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
  .dset-2col-layout {
    grid-template-columns: 1fr;
  }
}

.dset-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.dset-card-header {
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, #1E293B, #0F172A);
  color: #FFFFFF;
}

.dset-card-header h4 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
}

.dset-table {
  width: 100%;
  border-collapse: collapse;
}

.dset-table th, .dset-table td {
  padding: 0.75rem 1rem;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--border-subtle);
}

.dset-table th {
  background: var(--bg-subtle);
  font-weight: 700;
}

.dset-table tr:hover td {
  background: var(--bg-subtle);
}

.dset-quick-tips-card {
  background: #FFFBEB;
  border: 1.5px dashed #F59E0B;
  border-radius: var(--radius-md);
  padding: 1.15rem;
  margin-top: 1rem;
}

.dset-tips-title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #B45309;
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.dset-case-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(245, 158, 11, 0.2);
  font-size: 0.82rem;
}

.dset-case-row:last-child {
  border-bottom: none;
}

.dset-case-total {
  font-weight: 900;
  color: #DC2626;
  font-size: 0.95rem;
}

/* ==========================================================================
   23. 108종 인포그래픽 마스터 허브 & 라이트박스 뷰어 스타일 (Visual Guides 108)
   ========================================================================== */
.vg-search-container {
  margin: 1.5rem auto 1.8rem;
  max-width: 860px;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.vg-search-input-wrap {
  position: relative;
  width: 100%;
}

.vg-search-input {
  width: 100%;
  padding: 0.95rem 3rem 0.95rem 3rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  border: 2px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-fast);
}

.vg-search-input:focus {
  outline: none;
  border-color: #EC4899;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.18);
}

.vg-search-icon {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.15rem;
  opacity: 0.6;
  pointer-events: none;
}

.vg-search-clear-btn {
  position: absolute;
  right: 1.15rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-subtle);
  border: none;
  color: var(--text-muted);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: all var(--transition-fast);
}

.vg-search-clear-btn.active {
  display: flex;
}

.vg-search-clear-btn:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}

.vg-quick-tags {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 0.5rem;
}

.vg-tag-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
}

.vg-tag-btn {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.vg-tag-btn:hover {
  border-color: #EC4899;
  color: #EC4899;
  background: rgba(236, 72, 153, 0.06);
}

/* Featured In-Depth Showcase Card */
.vg-featured-showcase {
  margin-bottom: 2.5rem;
}

.vg-featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: all var(--transition-normal);
}

@media (max-width: 900px) {
  .vg-featured-card {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.vg-featured-img-wrap {
  position: relative;
  background: #0F172A;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  min-height: 380px;
}

.vg-featured-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform var(--transition-normal);
}

.vg-featured-img-wrap:hover .vg-featured-img {
  transform: scale(1.03);
}

.vg-featured-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 40%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1.25rem;
  pointer-events: none;
}

.vg-featured-img-badge {
  background: rgba(236, 72, 153, 0.9);
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}

.vg-featured-zoom-hint {
  background: rgba(15, 23, 42, 0.8);
  color: #FFFFFF;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

/* Featured Info Column */
.vg-featured-info-col {
  padding: 2rem 2rem 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@media (max-width: 900px) {
  .vg-featured-info-col {
    padding: 0 1.5rem 1.5rem 1.5rem;
  }
}

.vg-featured-meta-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.vg-cat-tag {
  font-size: 0.78rem;
  font-weight: 800;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background: rgba(236, 72, 153, 0.12);
  color: #EC4899;
}

.vg-badge-pill {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.vg-featured-title {
  font-size: 1.55rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1.35;
  margin-bottom: 0.5rem;
}

.vg-featured-sub {
  font-size: 0.95rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

/* 30-Second Summary Box */
.vg-summary-box {
  background: var(--bg-subtle);
  border-left: 4px solid #EC4899;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1rem 1.2rem;
  margin-bottom: 1.15rem;
}

.vg-summary-head {
  font-size: 0.88rem;
  font-weight: 800;
  color: #EC4899;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

.vg-summary-bullets {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.vg-summary-bullets li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-primary);
}

/* Key Stats Row */
.vg-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}

.vg-stat-chip {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.75rem;
  text-align: center;
}

.vg-stat-chip-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.vg-stat-chip-val {
  font-size: 0.98rem;
  font-weight: 900;
  color: var(--brand-primary);
}

/* Advisor Tip Box */
.vg-advisor-box {
  background: #FFFBEB;
  border: 1.5px dashed #F59E0B;
  border-radius: var(--radius-md);
  padding: 0.95rem 1.15rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: #92400E;
  margin-bottom: 1.35rem;
}

/* Action CTA Group */
.vg-featured-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.btn-vg-expand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.35rem;
  font-size: 0.92rem;
  font-weight: 800;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, #EC4899, #DB2777);
  color: #FFFFFF;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  box-shadow: 0 4px 14px rgba(236, 72, 153, 0.3);
}

.btn-vg-expand:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.4);
}

.btn-vg-chat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.75rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  background: #FEE500;
  color: #191919;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-vg-chat:hover {
  filter: brightness(0.95);
  transform: translateY(-2px);
}

/* Gallery Header & Grid */
.vg-gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: 0 0.5rem;
}

.vg-gallery-count-badge {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-primary);
  background: var(--bg-subtle);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
}

.vg-gallery-count-sub {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-left: 0.5rem;
}

.vg-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}

.vg-thumb-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.vg-thumb-card:hover {
  transform: translateY(-4px);
  border-color: #EC4899;
  box-shadow: 0 10px 24px rgba(236, 72, 153, 0.15);
}

.vg-thumb-card.active {
  border: 2px solid #EC4899;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.25);
}

.vg-thumb-img-wrap {
  position: relative;
  width: 100%;
  height: 180px;
  background: #0F172A;
  overflow: hidden;
}

.vg-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.vg-thumb-card:hover .vg-thumb-img {
  transform: scale(1.05);
}

.vg-thumb-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(15, 23, 42, 0.85);
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
  backdrop-filter: blur(4px);
}

.vg-thumb-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.vg-thumb-cat {
  font-size: 0.72rem;
  font-weight: 700;
  color: #EC4899;
}

.vg-thumb-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.4;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.vg-thumb-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Lightbox Modal */
.vg-lightbox-backdrop {
  z-index: 10500;
}

.vg-lightbox-window {
  max-width: 1100px;
  width: 95vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.vg-lightbox-modal-header {
  padding: 1rem 1.5rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vg-lb-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.vg-lb-badge {
  background: #EC4899;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
}

.vg-lb-title {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-primary);
  margin: 0;
}

.vg-lb-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-vg-lb-tool {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.4rem 0.8rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.btn-vg-lb-tool:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}

.vg-lightbox-body-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
  overflow: hidden;
  flex: 1;
}

@media (max-width: 860px) {
  .vg-lightbox-body-layout {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
}

.vg-lb-image-pane {
  background: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow: auto;
  min-height: 400px;
}

.vg-lb-image {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: var(--radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform var(--transition-fast);
}

.vg-lb-image.zoomed {
  transform: scale(1.6);
  cursor: grab;
}

.vg-lb-sidebar-pane {
  padding: 1.75rem;
  overflow-y: auto;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.vg-lb-section-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.65rem;
}

.vg-lb-bullet-list {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.vg-lb-bullet-list li {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.vg-lb-stats-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.65rem;
}

.vg-lb-advisor-box {
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #92400E;
}

.vg-lb-cta-group {
  display: flex;
  gap: 0.65rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.btn-vg-lb-sign {
  flex: 1;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  border: none;
  background: #2563EB;
  color: #FFFFFF;
  font-weight: 800;
  font-size: 0.86rem;
  cursor: pointer;
}

.btn-vg-lb-kakao {
  flex: 1;
  padding: 0.75rem;
  border-radius: var(--radius-md);
  background: #FEE500;
  color: #191919;
  font-weight: 800;
  font-size: 0.86rem;
  text-align: center;
  text-decoration: none;
}

/* ==========================================================================
   24. 🔬 생·손보 표준 1~5종 수술분류표 통합검색기 (2,402개 전수) 스타일
   ========================================================================== */
.surgery-standard-pill {
  display: inline-block;
  margin-top: 0.5rem;
  background: rgba(124, 58, 237, 0.1);
  color: #7C3AED;
  font-weight: 800;
  font-size: 0.84rem;
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(124, 58, 237, 0.25);
}

.surgery-search-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.35rem;
}

.surgery-search-input-wrap {
  position: relative;
  width: 100%;
}

.surgery-search-icon {
  position: absolute;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  opacity: 0.6;
  pointer-events: none;
}

.surgery-search-input {
  width: 100%;
  padding: 1.05rem 3.2rem 1.05rem 3.4rem;
  font-size: 1.15rem;
  font-weight: 700;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-subtle);
  background: var(--bg-subtle);
  color: var(--text-primary);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
  transition: all var(--transition-fast);
}

.surgery-search-input:focus {
  outline: none;
  background: var(--bg-surface);
  border-color: #7C3AED;
  box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.18);
}

.surgery-clear-btn {
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  transition: all var(--transition-fast);
}

.surgery-clear-btn.active {
  display: flex;
}

.surgery-clear-btn:hover {
  background: var(--border-subtle);
  color: var(--text-primary);
}

/* Grade Filter Pills */
.surgery-grade-filter-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.grade-filter-label {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--text-secondary);
  white-space: nowrap;
}

.surgery-grade-pills {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.surg-grade-pill {
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-full);
  font-size: 0.86rem;
  font-weight: 800;
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.surg-grade-pill:hover {
  transform: translateY(-2px);
  border-color: #7C3AED;
  color: #7C3AED;
}

.surg-grade-pill.active {
  background: #7C3AED;
  color: #FFFFFF;
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
}

.surg-grade-pill.active.grade-1 {
  background: #2563EB;
  box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.surg-grade-pill.active.grade-2 {
  background: #059669;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35);
}

.surg-grade-pill.active.grade-3 {
  background: #D97706;
  box-shadow: 0 4px 14px rgba(217, 119, 6, 0.35);
}

.surg-grade-pill.active.grade-4 {
  background: #EA580C;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35);
}

.surg-grade-pill.active.grade-5 {
  background: #DC2626;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35);
}

.surg-grade-pill.active.grade-n {
  background: #64748B;
  box-shadow: 0 4px 14px rgba(100, 116, 139, 0.35);
}

/* Sub-filter Row */
.surgery-subfilter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
}

.surgery-sheet-select-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.sheet-select-label {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.surgery-sheet-select {
  padding: 0.55rem 1rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}

.surgery-sheet-select:focus {
  border-color: #7C3AED;
}

.surgery-popular-chips-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.chips-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text-muted);
}

.surgery-chips {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.surg-chip {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 0.28rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.surg-chip:hover {
  background: rgba(124, 58, 237, 0.1);
  border-color: #7C3AED;
  color: #7C3AED;
}

/* Results Stats Bar */
.surgery-results-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  padding: 0 0.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.surg-count-text {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.surg-count-num {
  color: #7C3AED;
  font-weight: 900;
  font-size: 1.15rem;
}

.surg-filter-summary {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-left: 0.4rem;
}

.surg-legend-tags {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.surg-legend-item {
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-sm);
}

.surg-legend-item.l-1 { background: rgba(37, 99, 235, 0.12); color: #2563EB; }
.surg-legend-item.l-2 { background: rgba(5, 150, 105, 0.12); color: #059669; }
.surg-legend-item.l-3 { background: rgba(217, 119, 6, 0.12); color: #D97706; }
.surg-legend-item.l-4 { background: rgba(234, 88, 12, 0.12); color: #EA580C; }
.surg-legend-item.l-5 { background: rgba(220, 38, 38, 0.12); color: #DC2626; }
.surg-legend-item.l-n { background: rgba(100, 116, 139, 0.12); color: #64748B; }

/* Surgery Results List & Cards */
.surgery-results-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.surgery-item-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 1.35rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.surgery-item-card:hover {
  border-color: #7C3AED;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.1);
}

.surg-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.surg-card-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.surg-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.88rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  color: #FFFFFF;
  white-space: nowrap;
}

.surg-grade-badge.g-1 { background: linear-gradient(135deg, #2563EB, #1D4ED8); }
.surg-grade-badge.g-2 { background: linear-gradient(135deg, #059669, #047857); }
.surg-grade-badge.g-3 { background: linear-gradient(135deg, #D97706, #B45309); }
.surg-grade-badge.g-4 { background: linear-gradient(135deg, #EA580C, #C2410C); }
.surg-grade-badge.g-5 { background: linear-gradient(135deg, #DC2626, #991B1B); }
.surg-grade-badge.g-n { background: linear-gradient(135deg, #64748B, #475569); }
.surg-grade-badge.g-품의 { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }

.surg-card-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--text-primary);
}

.surg-card-system-badge {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

.surg-card-section-clause {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.4;
  margin-top: 0.15rem;
}

.surg-card-desc-box {
  background: var(--bg-subtle);
  padding: 0.85rem 1.1rem;
  border-radius: var(--radius-md);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-primary);
}

.surg-card-desc-box strong {
  color: var(--text-primary);
  font-weight: 800;
}

.surg-card-notes-box {
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: var(--radius-md);
  padding: 0.8rem 1.1rem;
  font-size: 0.84rem;
  line-height: 1.5;
  color: #92400E;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.surg-card-notes-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.surg-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  gap: 0.65rem;
}

.surg-card-footer-tip {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.btn-surg-ask {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--radius-md);
  background: rgba(124, 58, 237, 0.1);
  color: #7C3AED;
  border: 1px solid rgba(124, 58, 237, 0.25);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.btn-surg-ask:hover {
  background: #7C3AED;
  color: #FFFFFF;
}

/* Pagination Row */
.surgery-pagination-row {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}

.btn-surgery-load-more {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 2.2rem;
  font-size: 0.98rem;
  font-weight: 800;
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  color: var(--text-primary);
  border: 2px solid #7C3AED;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(124, 58, 237, 0.15);
  transition: all var(--transition-fast);
}

.btn-surgery-load-more:hover {
  background: #7C3AED;
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}

.load-more-counter {
  font-size: 0.84rem;
  opacity: 0.8;
}

/* Advisor Box in Surgery Section */
.surgery-advisor-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  margin-top: 2rem;
  box-shadow: var(--shadow-sm);
}

.surg-advisor-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}

.surg-advisor-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.12);
  color: #7C3AED;
  font-size: 1.35rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.surg-advisor-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text-primary);
}

.surg-advisor-sub {
  margin: 0.2rem 0 0;
  font-size: 0.84rem;
  color: var(--text-muted);
}

.surg-tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

.surg-tip-card {
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  padding: 1.15rem;
  border-left: 3.5px solid #7C3AED;
}

.tip-card-tag {
  font-size: 0.84rem;
  font-weight: 800;
  color: #7C3AED;
  margin-bottom: 0.5rem;
}

.surg-tip-card p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.surg-empty-state {
  text-align: center;
  padding: 3.5rem 1rem;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--border-subtle);
}

.surg-empty-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
}

.surg-empty-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.4rem;
}

.surg-empty-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
}