/* ═══════════════════════════════════════════════════════════════════════════
   FunnelBrain - Design Tokens & CSS Variables
   ═══════════════════════════════════════════════════════════════════════════ */

/* Google Fonts Import */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Nanum+Gothic:wght@400;700;800&display=swap");

:root {
  /* ─────────────────────────────────────────────────────────────────────────
     Premium Color Palette - Deep Indigo & Warm Gold
     ───────────────────────────────────────────────────────────────────────── */

  /* Primary - Deep Indigo */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;
  --primary-950: #1e1b4b;

  /* Accent - Warm Gold */
  --accent-50: #fffbeb;
  --accent-100: #fef3c7;
  --accent-200: #fde68a;
  --accent-300: #fcd34d;
  --accent-400: #fbbf24;
  --accent-500: #f59e0b;
  --accent-600: #d97706;
  --accent-700: #b45309;
  --accent-800: #92400e;
  --accent-900: #78350f;

  /* Neutral - Slate */
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #020617;

  /* Semantic Colors */
  --success: #10b981;
  --warning: #f59e0b;
  --error: #ef4444;
  --info: #3b82f6;

  /* Theme Variables - Light Mode */
  --primary-color: var(--primary-600);
  --secondary-color: var(--success);
  --accent-color: var(--accent-500);
  --background-color: var(--neutral-100);
  --text-color: var(--neutral-700);
  --heading-color: var(--neutral-900);
  --card-background: #ffffff;
  --card-bg: #ffffff;
  --border-color: #d4dae4;
  --text-secondary: var(--neutral-500);
  --text-muted: var(--neutral-400);
  --text-primary: var(--neutral-900);
  --input-bg: var(--neutral-50);
  --hover-bg: var(--primary-50);
  --bg-secondary: var(--neutral-100);
  --accent-bg: var(--primary-50);
  --info-bg: #eff6ff;
  --warning-bg: var(--accent-50);
  --success-bg: #dcfce7;

  /* Dashboard specific */
  --dashboard-bg: #f5f5f7;
  --section-bg: #eaeaec;

  /* Sidebar specific */
  --sidebar-bg: #ffffff;
  --sidebar-border: var(--neutral-200);
  --sidebar-hover: var(--neutral-100);
  --sidebar-active: var(--primary-50);
  --sidebar-active-text: var(--primary-700);
  --sidebar-text: var(--neutral-600);
  --sidebar-text-muted: var(--neutral-400);

  /* Typography */
  --font-display:
    "Noto Sans KR", "Nanum Gothic", -apple-system, BlinkMacSystemFont,
    sans-serif;
  --font-body:
    "Noto Sans KR", "Nanum Gothic", -apple-system, BlinkMacSystemFont,
    sans-serif;

  /* Spacing Scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:
    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:
    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-glow: 0 0 40px -10px var(--primary-500);
  --shadow-gold: 0 0 40px -10px var(--accent-400);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Sidebar dimensions */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 64px;
  --header-height: 56px;
}
/* ═══════════════════════════════════════════════════════════════════════════
   Dark Mode Overrides
   ═══════════════════════════════════════════════════════════════════════════ */

.dark {
  --primary-color: var(--primary-400);
  --secondary-color: #4ade80;
  --accent-color: var(--accent-400);
  --background-color: #1a1d24;
  --text-color: #d1d5db;
  --heading-color: #f3f4f6;
  --card-background: #242830;
  --card-bg: #242830;
  --border-color: #3a3f4b;
  --text-secondary: #b0b7c3;
  --text-muted: #9ca3af;
  --text-primary: #f9fafb;
  --input-bg: #2d323c;
  --hover-bg: #2d323c;
  --bg-secondary: #1f2329;
  --accent-bg: rgba(99, 102, 241, 0.2);
  --info-bg: rgba(59, 130, 246, 0.2);
  --warning-bg: rgba(245, 158, 11, 0.2);
  --success-bg: rgba(16, 185, 129, 0.2);

  /* Dashboard specific */
  --dashboard-bg: linear-gradient(
    135deg,
    #0a0a0f 0%,
    #1a1a2e 50%,
    #0f0f1a 100%
  );
  --section-bg: rgba(30, 30, 45, 0.5);

  /* Sidebar specific */
  --sidebar-bg: #1f2329;
  --sidebar-border: #3a3f4b;
  --sidebar-hover: #2d323c;
  --sidebar-active: rgba(99, 102, 241, 0.2);
  --sidebar-active-text: var(--primary-300);
  --sidebar-text: #d1d5db;
  --sidebar-text-muted: #9ca3af;
}
/* ═══════════════════════════════════════════════════════════════════════════
   Global Base Styles & Layout (Sidebar, Main Content)
   ═══════════════════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.7;
  font-size: 16px;
  letter-spacing: -0.011em;
}

.dark body {
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Selection */
::selection {
  background: var(--primary-200);
  color: var(--primary-900);
}

.dark ::selection {
  background: var(--primary-700);
  color: white;
}

/* Focus States */
:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Typography
   ───────────────────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--heading-color);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ─────────────────────────────────────────────────────────────────────────
   Sidebar Layout
   ───────────────────────────────────────────────────────────────────────── */

.app-layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 40;
  transition:
    width var(--transition-base),
    transform var(--transition-base);
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
}

/* 모바일 오프캔버스 사이드바 뒤 딤 오버레이 (sidebar_controller가 .hidden 토글) */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: 35;
}

.sidebar-overlay.hidden {
  display: none;
}

@media (min-width: 769px) {
  .sidebar-overlay {
    display: none;
  }
}

.sidebar-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.sidebar-logo-link {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sidebar-logo {
  height: 32px;
  width: auto;
  flex-shrink: 0;
}

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

.sidebar-collapse-btn {
  padding: 0.5rem;
  border-radius: var(--radius-md);
  background: transparent;
  border: none;
  color: var(--sidebar-text-muted);
  cursor: pointer;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.sidebar-collapse-btn:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}

.sidebar-collapse-btn .expand-icon {
  display: none;
}

.sidebar.collapsed .sidebar-collapse-btn .collapse-icon {
  display: none;
}

.sidebar.collapsed .sidebar-collapse-btn .expand-icon {
  display: block;
}

/* Collapsed state - hide text */
.sidebar.collapsed .sidebar-logo-link {
  justify-content: center;
}

.sidebar.collapsed .sidebar-version,
.sidebar.collapsed .sidebar-menu-button span,
.sidebar.collapsed .sidebar-submenu,
.sidebar.collapsed .sidebar-group-label {
  display: none;
}

.sidebar.collapsed .sidebar-menu-button {
  justify-content: center;
  padding: 0.75rem;
}

.sidebar.collapsed .sidebar-footer-content span,
.sidebar.collapsed .sidebar-footer-btn span {
  display: none;
}

.sidebar.collapsed .sidebar-user-info {
  display: none;
}

.sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4) 0;
}

.sidebar-group {
  margin-bottom: var(--space-4);
}

.sidebar-group-label {
  padding: var(--space-2) var(--space-4);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--sidebar-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-menu-item {
  padding: 0 var(--space-2);
}

.sidebar-menu-button {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: none;
  background: transparent;
  color: var(--sidebar-text);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

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

.sidebar-menu-button.active {
  background: var(--sidebar-active);
  color: var(--sidebar-active-text);
}

.sidebar-menu-button svg,
.sidebar-menu-button i {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Sidebar Submenu - Hierarchical Navigation */
.sidebar-submenu {
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0 0 0;
  margin-left: calc(var(--space-4) + 9px);
  padding-left: var(--space-4);
  border-left: 2px solid var(--border-color);
  position: relative;
}

.sidebar-submenu-item {
  padding: var(--space-1) 0;
  position: relative;
}

.sidebar-submenu-item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-4) - 2px);
  top: 50%;
  width: var(--space-3);
  height: 2px;
  background: var(--border-color);
}

.sidebar-submenu-button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: none;
  background: transparent;
  color: var(--sidebar-text-muted);
  font-size: 0.813rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-submenu-button:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}

.sidebar-submenu-button.active {
  background: var(--sidebar-active);
  color: var(--sidebar-active-text);
}

.sidebar-submenu-button.active::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-4) - 2px);
  top: 50%;
  width: var(--space-3);
  height: 2px;
  background: var(--primary-400);
}

.sidebar-submenu-button svg,
.sidebar-submenu-button i {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.8;
}

/* Dark mode adjustments for submenu */
.dark .sidebar-submenu {
  border-left-color: var(--sidebar-border);
}

.dark .sidebar-submenu-item::before {
  background: var(--sidebar-border);
}

.dark .sidebar-submenu-button.active::before {
  background: var(--primary-400);
}

/* Sidebar Sub-Submenu (3depth) */
.sidebar-sub-submenu {
  list-style: none;
  padding: 0;
  margin: var(--space-1) 0 0 0;
  margin-left: calc(var(--space-3) + 8px);
  padding-left: var(--space-3);
  border-left: 1px dashed var(--border-color);
}

.sidebar-sub-submenu-item {
  padding: 1px 0;
  position: relative;
}

.sidebar-sub-submenu-button {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: none;
  background: transparent;
  color: var(--sidebar-text-muted);
  font-size: 0.775rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.sidebar-sub-submenu-button:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}

.sidebar-sub-submenu-button.active {
  background: var(--sidebar-active);
  color: var(--sidebar-active-text);
}

.sidebar-sub-submenu-button svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.75;
}

.dark .sidebar-sub-submenu {
  border-left-color: var(--sidebar-border);
}

/* Collapsible submenu — chevron 토글 + 마지막 항목 트리 라인 L자 종료 */
.sidebar-submenu-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.sidebar-submenu-row .sidebar-submenu-button {
  flex: 1;
  min-width: 0;
}
.sidebar-collapse-toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--sidebar-text-muted);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}
.sidebar-collapse-toggle:hover {
  background: var(--sidebar-hover);
  color: var(--sidebar-text);
}
.sidebar-submenu-item.has-children[data-expanded="true"] > .sidebar-submenu-row .sidebar-collapse-toggle {
  transform: rotate(90deg);
}
/* 접힌 상태: sub-submenu 숨김 */
.sidebar-submenu-item.has-children[data-expanded="false"] > .sidebar-sub-submenu {
  display: none;
}

/* 마지막 항목의 좌측 수직선이 더 뻗어가지 않도록 — 가로선(::before) 아래쪽 수직선을 사이드바 배경색으로 가림 */
.sidebar-submenu > .sidebar-submenu-item:last-child::after {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-4) - 2px);
  top: calc(50% + 1px);
  bottom: -8px;
  width: 2px;
  background: var(--sidebar-bg, var(--bg-primary, #fff));
}
.dark .sidebar-submenu > .sidebar-submenu-item:last-child::after {
  background: var(--sidebar-bg, var(--bg-secondary, #0f172a));
}

.sidebar-footer {
  padding: var(--space-4);
  border-top: 1px solid var(--sidebar-border);
}

.sidebar-version-footer {
  text-align: center;
  font-size: 0.65rem;
  color: var(--sidebar-text-muted);
  padding-bottom: 0.5rem;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.sidebar.collapsed .sidebar-version-footer {
  display: none;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
}

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

.sidebar-user-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--primary-100);
  color: var(--primary-700);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
}

.dark .sidebar-user-avatar {
  background: var(--primary-900);
  color: var(--primary-300);
}

.sidebar-user-info {
  flex: 1;
  min-width: 0;
}

.sidebar-user-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-email {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* DB indicator in sidebar footer */
.sidebar-db-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0,0,0,0.08);
  font-size: 0.72rem;
  color: var(--text-muted);
  overflow: hidden;
}

.dark .sidebar-db-indicator {
  background: rgba(255,255,255,0.06);
}

.sidebar-db-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: monospace;
  font-size: 0.7rem;
}

.db-badge {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

.db-badge-prod {
  background: #fee2e2;
  color: #dc2626;
}

.dark .db-badge-prod {
  background: rgba(220,38,38,0.25);
  color: #fca5a5;
}

.db-badge-dev {
  background: #dbeafe;
  color: #2563eb;
}

.dark .db-badge-dev {
  background: rgba(37,99,235,0.25);
  color: #93c5fd;
}

/* Main Content Area */
.main-content {
  flex: 1;
  min-width: 0;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background: var(--dashboard-bg);
  transition: margin-left var(--transition-base);
}

.sidebar.collapsed ~ .main-content {
  margin-left: var(--sidebar-collapsed-width);
}

.main-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-height);
  background: var(--card-bg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
}

.main-header-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--heading-color);
}

.main-body {
  padding: var(--space-6);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  .main-content {
    margin-left: 0;
  }

  /* 데스크톱 전용 접기 버튼은 모바일 오프캔버스에서 무의미 */
  .sidebar-collapse-btn {
    display: none;
  }

  /* 헤더: 타이틀 1줄 말줄임 + 우측 요소 줄바꿈 금지 (세로 낱자 깨짐 방지) */
  .main-header {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .main-header-title {
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .main-header > .flex-1 {
    display: none;
  }

  .main-header a,
  .main-header button {
    white-space: nowrap;
    flex-shrink: 0;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Auth Page Styles (Login/Register)
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  background: linear-gradient(
    135deg,
    var(--primary-950) 0%,
    var(--primary-900) 50%,
    var(--primary-800) 100%
  );
  position: relative;
  overflow: hidden;
}

.auth-container::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.03;
  background-image: radial-gradient(
    circle at 1px 1px,
    var(--primary-400) 1px,
    transparent 0
  );
  background-size: 40px 40px;
  pointer-events: none;
}

.auth-glow {
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(79, 70, 229, 0.4) 0%,
    transparent 70%
  );
  filter: blur(60px);
  top: -200px;
  right: -200px;
  pointer-events: none;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 3rem 2.5rem;
  box-shadow:
    0 32px 64px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.auth-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-brand {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  background: linear-gradient(
    135deg,
    var(--neutral-50) 0%,
    var(--accent-400) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.auth-subtitle {
  font-size: 1.125rem;
  color: var(--neutral-400);
  font-weight: 400;
}

.auth-form-group {
  margin-bottom: 1.25rem;
}

.auth-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--neutral-300);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

.auth-input {
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 0.95rem;
  color: var(--neutral-100);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  outline: none;
  transition: all 0.2s ease;
}

.auth-input:focus {
  border-color: var(--primary-500);
  box-shadow:
    0 0 0 3px rgba(99, 102, 241, 0.3),
    0 0 20px rgba(99, 102, 241, 0.2);
}

.auth-input::placeholder {
  color: var(--neutral-500);
}

.auth-submit {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--primary-950);
  background: linear-gradient(
    135deg,
    var(--accent-400) 0%,
    var(--accent-500) 100%
  );
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.4);
  margin-top: 0.5rem;
}

.auth-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.5);
}

.auth-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.auth-divider {
  display: flex;
  align-items: center;
  margin: 1.75rem 0;
  gap: 1rem;
}

.auth-divider-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.auth-divider-text {
  font-size: 0.8rem;
  color: var(--neutral-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.auth-social-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.auth-social-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.875rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--neutral-200);
}

.auth-social-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.auth-social-button svg {
  width: 20px;
  height: 20px;
}

.auth-link {
  color: var(--primary-400);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.auth-link:hover {
  color: var(--primary-300);
}

.auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  color: var(--neutral-400);
  font-size: 0.9rem;
}

.auth-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.25rem;
  color: #fca5a5;
  font-size: 0.9rem;
}

/* Mobile */
@media (max-width: 768px) {
  .auth-card {
    padding: 2rem 1.5rem;
    margin: 1rem;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   UI Components: Cards, Settings Cards, Glass Card, Buttons
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   Premium Card Styles
   ───────────────────────────────────────────────────────────────────────── */

.card {
  background: var(--card-background);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
}

.card-header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-color);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-6);
  border-top: 1px solid var(--border-color);
}

/* Settings Card */
.settings-card {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.settings-card-wide {
  grid-column: 1 / -1;
}

.settings-card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  border-bottom: 1px solid var(--border-color);
}

.settings-card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary-50);
  color: var(--primary-600);
}

.settings-card-icon.accent {
  background: var(--accent-50, #fffbeb);
  color: var(--accent-600, #d97706);
}

.settings-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin: 0 0 0.25rem;
}

.settings-card-subtitle {
  font-size: 0.875rem;
  color: var(--text-muted);
  margin: 0;
}

.settings-card-body {
  padding: var(--space-6);
}

.settings-card-content {
  padding: var(--space-4) var(--space-6);
}

.settings-card-desc {
  font-size: 0.875rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Settings Field (form elements inside settings cards) */
.settings-field {
  margin-bottom: 1.25rem;
}

.settings-field:last-child {
  margin-bottom: 0;
}

.settings-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
}

.settings-input {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
  outline: none;
  box-sizing: border-box;
}

.settings-input:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.settings-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

textarea.settings-input {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
}

.settings-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.375rem;
  line-height: 1.4;
}

.settings-card-icon.primary {
  background: var(--primary-50, #eef2ff);
  color: var(--primary-600, #4f46e5);
}

/* Glass Card */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-xl);
}

.dark .glass-card {
  background: rgba(15, 23, 42, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────
   Buttons
   ───────────────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  border: none;
  text-decoration: none;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
}

.btn-gold {
  background: linear-gradient(
    135deg,
    var(--accent-400) 0%,
    var(--accent-500) 100%
  );
  color: var(--primary-950);
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.3);
}

.btn-gold:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 30px rgba(245, 158, 11, 0.4);
}

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

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

.btn-ghost {
  background: transparent;
  color: var(--text-color);
}

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

.btn-white {
  background: #ffffff;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.btn-white:hover {
  background: #f8fafc;
  border-color: var(--primary-300);
  color: var(--primary-color);
}

.dark .btn-white {
  background: var(--card-bg);
  color: var(--text-color);
  border-color: var(--border-color);
}

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

.btn-sm {
  padding: var(--space-2) var(--space-3);
  font-size: 0.8rem;
}

/* ─────────────────────────────────────────────────────────────────────────
   Engine Index Toolbar (퍼널/전략/웹사이트 엔진 공통)
   ───────────────────────────────────────────────────────────────────────── */

.project-toolbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.project-toolbar-btn:hover,
.project-toolbar-btn.active {
  background: var(--primary-50, #eef2ff);
  border-color: var(--primary-400, #818cf8);
  color: var(--primary-600, #4f46e5);
}

.project-search-input {
  padding: 0.45rem 0.875rem 0.45rem 2.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-color);
  font-size: 0.8375rem;
  width: 220px;
  transition: border-color 0.15s, width 0.2s;
}

.project-search-input:focus {
  outline: none;
  border-color: var(--primary-400, #818cf8);
  width: 280px;
}

.project-filter-select {
  padding: 0.45rem 0.875rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  color: var(--text-color);
  font-size: 0.8125rem;
  cursor: pointer;
}

@media (max-width: 600px) {
  .project-search-input { width: 100%; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Engine Toolbar (검색 + 필터 + 뷰토글 한 줄 배치, 엔진 목록 화면 공통)
   ───────────────────────────────────────────────────────────────────────── */
.engine-toolbar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2px;
  margin-bottom: 20px;
}
.engine-toolbar .project-search-input { flex: 0 0 200px; min-width: 140px; }
.engine-toolbar .project-filter-select {
  flex-shrink: 0; max-width: 160px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 뷰 토글 (그리드/리스트) — 하나의 알약형 컨트롤 */
.engine-view-toggle {
  flex-shrink: 0;
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 7px;
  overflow: hidden;
  margin-left: auto;
}
.engine-view-toggle button {
  padding: 0.38rem 0.6rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  transition: background 0.15s;
}
.engine-view-toggle button:first-child { border-right: 1px solid var(--border-color); }
.engine-view-toggle button.active { background: var(--primary-500, #6366f1); color: #fff; }
.engine-view-toggle button:not(.active):hover { background: var(--bg-secondary); }

/* ─────────────────────────────────────────────────────────────────────────
   Badge (범용)
   ───────────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.badge-success {
  background: #dcfce7;
  color: #15803d;
}

.badge-neutral {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-secondary, #6b7280);
}

.badge-warning {
  background: #fef9c3;
  color: #854d0e;
}

.badge-danger {
  background: #fee2e2;
  color: #b91c1c;
}

.dark .badge-success { background: #14532d; color: #86efac; }
.dark .badge-neutral  { background: #374151; color: #d1d5db; }
.dark .badge-warning  { background: #422006; color: #fde68a; }

/* ─────────────────────────────────────────────────────────────────────────
   Data Table (폼 빌더 / 엔트리 목록용)
   ───────────────────────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.data-table thead {
  background: var(--bg-secondary, #f9fafb);
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.data-table thead th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  transition: background 0.1s;
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

.data-table tbody tr:hover {
  background: var(--bg-secondary, #f9fafb);
}

.data-table tbody td {
  padding: 0.75rem 1rem;
  color: var(--text-color, #111827);
  vertical-align: middle;
}

.dark .data-table thead {
  background: var(--bg-secondary);
}

.dark .data-table tbody tr:hover {
  background: var(--bg-secondary);
}

/* Color picker — 전역 테두리·둥근 모서리·hover */
input[type="color"],
input[type="color"].color-picker-input {
  width: 48px;
  height: 36px;
  padding: 2px;
  border: 1.5px solid var(--border-color, #d1d5db);
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  vertical-align: middle;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="color"]:hover {
  border-color: var(--primary-500, #3b82f6);
}
input[type="color"]:focus {
  outline: none;
  border-color: var(--primary-500, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 3px;
}
input[type="color"]::-moz-color-swatch {
  border: none;
  border-radius: 3px;
}
.dark input[type="color"] {
  background: var(--bg-secondary, #1f2937);
  border-color: var(--border-color, #374151);
}
/* 사용자 가이드 페이지(pages/guide.html.erb) 전용 클래스.
   [2026-07-22] 기존엔 guide.html.erb 본문 <style>에만 있어 그 페이지 밖에서는 이 클래스들을
   재사용할 수 없었다(가이드 콘텐츠를 다른 화면에 그대로 임베드하면 스타일이 깨짐) — 원스톱
   마케팅 엔진 진입 화면(blueprint/_intro)에 가이드 내용을 아코디언으로 넣을 때 함께 쓰기 위해
   전역 번들로 이전. base.css 토큰(--card-bg 등)만 써서 라이트/다크 자동 대응은 그대로 유지. */
.guide-tabs-nav { display:flex; justify-content:center; gap:0.4rem; flex-wrap:wrap; margin-bottom:2rem; }
.guide-tab-btn { display:flex; align-items:center; gap:0.45rem; padding:0.6rem 1.1rem; border-radius:8px; border:2px solid var(--border-color); background:var(--card-bg); color:var(--text-color); cursor:pointer; font-weight:400; font-size:0.875rem; transition:all 0.2s; white-space:nowrap; }
.guide-tab-btn.guide-tab-active { font-weight:600; }
.guide-step-card { border:1px solid var(--border-color); border-radius:12px; overflow:hidden; margin-bottom:0.75rem; }
.guide-step-header { display:flex; align-items:center; gap:1rem; padding:1.25rem 1.5rem; cursor:pointer; background:var(--card-bg); }
.guide-step-header:hover { background:var(--hover-bg,rgba(0,0,0,0.03)); }
.guide-step-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.guide-step-body { padding:1.75rem; background:var(--bg-secondary,var(--sidebar-bg)); border-top:1px solid var(--border-color); }
.guide-screenshot { width:100%; border-radius:10px; border:1px solid var(--border-color); box-shadow:0 4px 20px rgba(0,0,0,0.1); margin:1rem 0; cursor:zoom-in; transition:transform 0.2s; display:block; }
.guide-screenshot:hover { transform:scale(1.005); box-shadow:0 8px 32px rgba(0,0,0,0.15); }
.guide-tip  { display:flex; gap:0.75rem; padding:1rem 1.25rem; background:#fef3c7; border:1px solid #fbbf24; border-radius:8px; margin-top:1rem; font-size:0.875rem; line-height:1.6; }
.guide-info { display:flex; gap:0.75rem; padding:1rem 1.25rem; background:#eff6ff; border:1px solid #93c5fd; border-radius:8px; margin-top:1rem; font-size:0.875rem; line-height:1.6; }
.guide-warn { display:flex; gap:0.75rem; padding:1rem 1.25rem; background:#fef2f2; border:1px solid #fca5a5; border-radius:8px; margin-top:1rem; font-size:0.875rem; line-height:1.6; }
.guide-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:0.75rem; margin:1rem 0; }
.guide-field { padding:0.9rem 1rem; background:var(--card-bg); border:1px solid var(--border-color); border-radius:8px; font-size:0.875rem; }
.guide-field-name { font-weight:600; color:var(--heading-color); margin-bottom:0.3rem; display:flex; align-items:center; gap:0.4rem; }
.guide-field-desc { color:var(--text-muted); line-height:1.5; }
.guide-features { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; margin:1.25rem 0; }
.guide-feature-card { padding:1.25rem; background:var(--card-bg); border:1px solid var(--border-color); border-radius:12px; }
.guide-section-title { font-size:1rem; font-weight:700; color:var(--heading-color); margin:1.5rem 0 0.75rem; display:flex; align-items:center; gap:0.5rem; }
.guide-two-col { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.guide-badge { display:inline-flex; align-items:center; gap:0.3rem; padding:0.2rem 0.6rem; border-radius:20px; font-size:0.75rem; font-weight:600; }
.rotate-90 { transform:rotate(90deg); }
.story-player-wrap { margin-bottom:1.5rem; border-radius:16px; overflow:hidden; border:1px solid var(--border-color); background:var(--card-bg); box-shadow:0 4px 24px rgba(0,0,0,0.08); }
.story-ctrl-btn { border:1.5px solid var(--border-color); background:var(--card-bg); color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:50%; transition:all 0.2s; }
.story-ctrl-btn:hover { border-color:var(--text-muted); }
.story-dot { height:8px; border:none; cursor:pointer; transition:all 0.3s ease; }
@keyframes fadeSlideUp { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
#guide-lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.88); z-index:9999; align-items:center; justify-content:center; padding:1.5rem; cursor:zoom-out; }
#guide-lightbox.active { display:flex; }
#guide-lightbox img { max-width:100%; max-height:92vh; border-radius:8px; box-shadow:0 0 80px rgba(0,0,0,0.5); }
/* 묶음 탭(퍼널 기획·콘텐츠·웹 기획)의 하위 섹션 바로가기 */
.guide-subnav { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:1px solid var(--border-color); }
.guide-subnav-link { display:inline-flex; align-items:center; gap:0.45rem; padding:0.45rem 0.9rem; border-radius:20px; border:1px solid; background:var(--card-bg); font-size:0.82rem; font-weight:600; text-decoration:none; transition:all 0.15s; }
.guide-subnav-link:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,0.08); }
.guide-subnav-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
/* 앵커로 점프했을 때 제목이 화면 맨 위에 붙지 않게 여유를 둔다 */
.guide-sec-heading { display:flex; align-items:center; gap:0.6rem; font-size:1.15rem; font-weight:700; color:var(--heading-color); margin:2.5rem 0 1rem; scroll-margin-top:1.5rem; }
.guide-sec-heading:first-of-type { margin-top:0; }
.guide-sec-bar { display:inline-block; width:4px; height:20px; border-radius:2px; flex-shrink:0; }
@media(max-width:768px){ .guide-two-col{grid-template-columns:1fr;} .guide-tab-btn{font-size:0.8rem;padding:0.5rem 0.85rem;} .guide-subnav{overflow-x:auto;flex-wrap:nowrap;} .guide-subnav-link{white-space:nowrap;} }
/* 한도 안내 카드(2026-07-17, 사용자 요청) — shared/_limit_notice.html.erb 전용.
   한도에 도달한 화면에 진입했을 때 "무엇이 몇/몇으로 찼는지 + 업그레이드"를 알린다.
   components.css가 500줄 규칙에 근접해 신규 파일로 분리. 특정 엔진이 아니라 앱 전역에서
   쓰는 공용 컴포넌트라 base.css 토큰만 사용(라이트/다크 자동 대응). */

.limit-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  /* 경고 성격을 왼쪽 굵은 선으로 — 배경 전체를 물들이지 않아 본문 가독성을 해치지 않는다. */
  border-left: 4px solid #f59e0b;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.limit-notice-icon {
  color: #f59e0b;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.limit-notice-body {
  flex: 1;
  min-width: 0;
}

.limit-notice-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0 0 0.25rem;
  font-size: 0.925rem;
  font-weight: 700;
  color: var(--heading-color);
}

.limit-notice-count {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.15);
  color: #b45309;
  font-variant-numeric: tabular-nums;
}

.dark .limit-notice-count {
  color: #fcd34d;
}

.limit-notice-desc {
  margin: 0;
  font-size: 0.825rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

.limit-notice-cta {
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 720px) {
  .limit-notice {
    flex-wrap: wrap;
  }

  .limit-notice-cta {
    width: 100%;
    justify-content: center;
  }
}
/* [2026-07-26] 설정 영역 공용 탭 내비 + 에이전트 토큰 화면.
   settings/show.html.erb의 인라인 <style>에 넣지 않은 이유: 그 스타일은 그 파일에서만 로드돼
   연동 관리·에이전트 토큰 페이지에서는 적용되지 않는다(가이드 CSS에서 같은 함정을 겪었다).
   토큰(var(--*))만 사용해 라이트/다크가 자동으로 따라간다. */

.settings-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--space-6);
  overflow-x: auto;
}

.settings-tab {
  padding: var(--space-3) var(--space-4);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.settings-tab:hover {
  color: var(--heading-color);
}

.settings-tab.is-active {
  color: var(--primary-500);
  border-bottom-color: var(--primary-500);
}

/* ── 에이전트 토큰 화면 ───────────────────────────── */

.agent-token-page {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-6);
}

.agent-token-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.agent-token-reveal {
  border: 2px solid #22c55e;
}

.agent-token-value {
  display: block;
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  word-break: break-all;
  font-size: 0.95rem;
  line-height: 1.5;
}

.agent-token-scope {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  cursor: pointer;
}

.agent-token-scope:hover {
  border-color: var(--primary-500);
}

.agent-token-scope input {
  margin-top: 3px;
  flex-shrink: 0;
}

.agent-token-scope-name {
  font-weight: 600;
  color: var(--heading-color);
}

.agent-token-scope-desc {
  display: block;
  color: var(--text-muted);
  font-size: 0.875rem;
  margin-top: 2px;
}

.agent-token-table-wrap {
  overflow-x: auto;
}

.agent-token-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.agent-token-table th,
.agent-token-table td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.agent-token-table th {
  color: var(--text-muted);
  font-size: 0.8125rem;
  font-weight: 600;
}

.agent-token-table tr.is-revoked {
  opacity: 0.55;
}

.agent-token-status {
  font-weight: 600;
  font-size: 0.875rem;
}

.agent-token-status.is-active { color: #22c55e; }
.agent-token-status.is-revoked { color: #ef4444; }
.agent-token-status.is-expired { color: #f59e0b; }

.agent-token-quota {
  color: var(--text-muted);
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .agent-token-page {
    padding: var(--space-4);
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Dashboard: Stats Cards, Dropdown Menu, Utility Classes
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   Stats Cards
   ───────────────────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-6);
}

.stat-card {
  background: var(--card-background);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  border: 1px solid var(--border-color);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base);
}

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

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.stat-icon.primary {
  background: var(--primary-100);
  color: var(--primary-600);
}

.stat-icon.success {
  background: var(--success-bg);
  color: var(--success);
}

.stat-icon.warning {
  background: var(--warning-bg);
  color: var(--warning);
}

.stat-label {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--heading-color);
}

/* ─────────────────────────────────────────────────────────────────────────
   Dropdown Menu
   ───────────────────────────────────────────────────────────────────────── */

.dropdown {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--space-2);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  min-width: 200px;
  z-index: 50;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--transition-fast);
}

.dropdown.open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-header {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-color);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  text-decoration: none;
}

.dropdown-item:hover {
  background: var(--hover-bg);
}

.dropdown-item svg {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
}

.dropdown-divider {
  height: 1px;
  background: var(--border-color);
  margin: var(--space-2) 0;
}

.dropdown-item-danger {
  color: var(--error);
}

.dropdown-item-danger:hover {
  background: rgba(239, 68, 68, 0.1);
}

.dropdown-item-danger svg {
  color: var(--error);
}

/* ─────────────────────────────────────────────────────────────────────────
   Utility Classes
   ───────────────────────────────────────────────────────────────────────── */

.text-gradient {
  background: linear-gradient(135deg, #1251C2, #8EC7F6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-dashboard {
  background: var(--dashboard-bg);
}

.hidden {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   Dashboard Page
   ───────────────────────────────────────────────────────────────────────── */

.dashboard-container {
  max-width: 1170px;
  margin: 0 auto;
}

.dashboard-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.dashboard-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--heading-color);
}

.dashboard-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Mobile Responsive - Dashboard */
@media (max-width: 768px) {
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .dashboard-actions {
    width: 100%;
  }

  .dashboard-actions .btn {
    flex: 1;
    justify-content: center;
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Project Cards, Empty State, Inline Dropdown
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   Project Cards Grid
   ───────────────────────────────────────────────────────────────────────── */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-6);
}

.project-card {
  display: block;
  position: relative;
  background: var(--card-background);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
}

.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
  border-color: var(--primary-400);
}

.project-card:hover .project-card-gradient {
  opacity: 1;
}

.project-card-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary-500), var(--accent-400));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-card-header {
  padding: var(--space-6) var(--space-6) var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.project-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--heading-color);
  margin: 0;
}

.project-card-menu {
  position: relative;
}

.project-menu-btn {
  padding: var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s ease;
}

.project-menu-btn:hover {
  background: var(--hover-bg);
  color: var(--text-color);
}

.project-card-content {
  padding: 0 var(--space-6) var(--space-4);
}

.project-card-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.project-card-stats {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-2);
}

.project-stat {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.project-card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

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

.project-badge {
  padding: var(--space-1) var(--space-2);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--primary-300);
  background: rgba(99, 102, 241, 0.2);
  border-radius: 4px;
}

.project-select-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 500;
  font-size: 0.9rem;
  transition: all 0.15s;
}

.project-select-item:hover {
  border-color: var(--primary-400);
  background: rgba(99, 102, 241, 0.06);
  color: var(--text-primary);
}

.project-select-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--primary-500, #6366f1), var(--primary-400, #818cf8));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   Empty State
   ───────────────────────────────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
  background: var(--card-background);
  border-radius: 24px;
  border: 2px dashed var(--border-color);
}

.empty-state-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-6);
  padding: var(--space-6);
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    var(--primary-100) 0%,
    var(--primary-50) 100%
  );
  color: var(--primary-500);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dark .empty-state-icon {
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.3) 0%,
    rgba(99, 102, 241, 0.1) 100%
  );
  color: var(--primary-400);
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: var(--space-3);
}

.empty-state-desc {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* ─────────────────────────────────────────────────────────────────────────
   Inline Dropdown (Project Card Menu)
   ───────────────────────────────────────────────────────────────────────── */

.dropdown-content {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--space-1);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  min-width: 160px;
  z-index: 100;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.95);
  transition: all 0.15s ease;
}

.project-card-menu.open .dropdown-content,
[data-controller="dropdown"].open .dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }

  .empty-state {
    padding: var(--space-8) var(--space-4);
  }
}
/* ═══════════════════════════════════════════════════════════════════════════
   Flash Messages & Form Components
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   Flash Messages
   ───────────────────────────────────────────────────────────────────────── */

.flash-container {
  position: fixed;
  top: var(--space-4);
  right: var(--space-4);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
}

.flash-message {
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.flash-notice {
  background: var(--success-bg);
  border: 1px solid var(--success);
  color: var(--success);
}

.flash-alert {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid var(--error);
  color: var(--error);
}

/* ─────────────────────────────────────────────────────────────────────────
   Form Components
   ───────────────────────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: var(--space-5);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.form-input {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  line-height: 1.5;
}

.form-input:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-input[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

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

.form-hint {
  margin-top: var(--space-1);
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.form-hint-inline {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 400;
}

.form-error {
  margin-top: var(--space-1);
  font-size: 0.8rem;
  color: var(--error);
}
/* ═══════════════════════════════════════════════════════════════════════════
   Editor Styles: Quill Dark Mode, Template Selector
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   Quill Editor Dark Mode
   ───────────────────────────────────────────────────────────────────────── */

.dark .ql-toolbar.ql-snow {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

.dark .ql-container.ql-snow {
  border-color: var(--border-color);
  background: var(--card-bg);
}

.dark .ql-editor {
  color: var(--text-primary);
  background: var(--card-bg);
}

.dark .ql-editor.ql-blank::before {
  color: var(--text-muted);
}

.dark .ql-snow .ql-stroke {
  stroke: var(--text-secondary);
}

.dark .ql-snow .ql-fill,
.dark .ql-snow .ql-stroke.ql-fill {
  fill: var(--text-secondary);
}

.dark .ql-snow .ql-picker {
  color: var(--text-secondary);
}

.dark .ql-snow .ql-picker-options {
  background: var(--card-bg);
  border-color: var(--border-color);
}

.dark .ql-snow.ql-toolbar button:hover,
.dark .ql-snow .ql-toolbar button:hover,
.dark .ql-snow.ql-toolbar button.ql-active {
  color: var(--primary-400);
}

.dark .ql-snow.ql-toolbar button:hover .ql-stroke,
.dark .ql-snow .ql-toolbar button:hover .ql-stroke,
.dark .ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--primary-400);
}

/* ─────────────────────────────────────────────────────────────────────────
   Speed Landing Page Template Selector
   ───────────────────────────────────────────────────────────────────────── */

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}

.template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem 1rem;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.template-card:hover {
  border-color: var(--primary-400);
  background: var(--primary-50);
}

.template-card.selected {
  border-color: var(--primary-600);
  background: var(--primary-50);
  box-shadow: 0 0 0 3px var(--primary-200);
}

.dark .template-card:hover,
.dark .template-card.selected {
  background: var(--primary-950);
}

.template-icon {
  color: var(--primary-600);
  display: flex;
  align-items: center;
  justify-content: center;
}

.template-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.template-description {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
/* ── 챗봇 위젯 ────────────────────────────── */
#chatbot-widget {
  position: fixed;
  bottom: 88px;
  right: 24px;
  z-index: 9999;
  font-family: 'Noto Sans KR', sans-serif;
}

/* 토글 버튼 */
.chatbot-toggle-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.chatbot-toggle-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}
.chatbot-toggle-btn .hidden { display: none; }

/* 채팅 창 */
.chatbot-window {
  position: absolute;
  bottom: 68px;
  right: 0;
  width: 360px;
  height: 520px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: chatbot-slide-up 0.25s ease;
}
.chatbot-window.hidden { display: none; }

@keyframes chatbot-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 헤더 */
.chatbot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  flex-shrink: 0;
}
.chatbot-header-info { display: flex; align-items: center; gap: 10px; }
.chatbot-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.chatbot-title { font-weight: 700; font-size: 14px; }
.chatbot-status { font-size: 11px; opacity: 0.8; }
.chatbot-close-btn {
  background: none; border: none; color: rgba(255,255,255,0.8);
  cursor: pointer; padding: 4px; border-radius: 4px; display: flex;
  transition: color 0.2s;
}
.chatbot-close-btn:hover { color: #fff; }

/* 메시지 영역 */
.chatbot-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
  background: #ffffff;
  color: #111827;
}
.chatbot-messages::-webkit-scrollbar { width: 4px; }
.chatbot-messages::-webkit-scrollbar-track { background: transparent; }
.chatbot-messages::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 2px; }

/* 메시지 버블 */
.chatbot-msg { display: flex; flex-direction: column; max-width: 85%; }
.chatbot-msg-user { align-self: flex-end; align-items: flex-end; }
.chatbot-msg-assistant { align-self: flex-start; align-items: flex-start; }

.chatbot-msg-content {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-word;
  position: relative;
}
.chatbot-msg-user .chatbot-msg-content {
  background: #2563eb;
  color: #fff;
  border-radius: 12px 12px 2px 12px;
}
.chatbot-msg-assistant .chatbot-msg-content {
  background: #f3f4f6;
  color: #111827;
  border-radius: 2px 12px 12px 12px;
}

/* 메시지 이미지 */
.chatbot-msg-image {
  max-width: 200px;
  border-radius: 8px;
  margin-bottom: 6px;
  border: 1px solid #e5e7eb;
}

/* 복사 버튼 */
.chatbot-copy-btn {
  background: none; border: none; cursor: pointer;
  font-size: 11px; color: #9ca3af;
  padding: 2px 6px; border-radius: 4px; margin-top: 4px;
  display: flex; align-items: center; gap: 4px;
  transition: color 0.2s;
  align-self: flex-end;
}
.chatbot-copy-btn:hover { color: #4b5563; }

/* 빠른 버튼 */
.chatbot-quick-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chatbot-quick-btn {
  background: #fff; border: 1px solid #dbeafe; color: #2563eb;
  border-radius: 20px; padding: 5px 12px; font-size: 12px;
  cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.chatbot-quick-btn:hover { background: #eff6ff; border-color: #2563eb; }
.chatbot-quick-btn-accent { background: #2563eb; color: #fff; border-color: #2563eb; }
.chatbot-quick-btn-accent:hover { background: #1d4ed8; }

/* 타이핑 인디케이터 */
.chatbot-typing {
  padding: 8px 16px;
  flex-shrink: 0;
  background: #ffffff;
}
.chatbot-typing.hidden { display: none; }
.chatbot-typing-dots {
  display: inline-flex; gap: 4px; align-items: center;
  background: #f3f4f6;
  padding: 8px 14px; border-radius: 12px;
}
.chatbot-typing-dots span {
  width: 7px; height: 7px; background: #9ca3af; border-radius: 50%;
  animation: chatbot-bounce 1.2s infinite;
}
.chatbot-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chatbot-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatbot-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-5px); }
}

/* 이미지 미리보기 */
.chatbot-image-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.chatbot-image-preview.hidden { display: none; }
.chatbot-image-preview img { height: 48px; border-radius: 6px; border: 1px solid #e5e7eb; }
.chatbot-image-remove {
  background: none; border: none; cursor: pointer;
  color: #9ca3af; padding: 4px;
  border-radius: 4px; display: flex; transition: color 0.2s;
}
.chatbot-image-remove:hover { color: #ef4444; }

/* 입력 영역 */
.chatbot-input-area {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
  background: #ffffff;
}
.chatbot-attach-btn {
  background: none; border: none; cursor: pointer; padding: 6px;
  color: #9ca3af; border-radius: 6px; flex-shrink: 0;
  display: flex; transition: color 0.2s;
}
.chatbot-attach-btn:hover { color: #2563eb; }
.chatbot-textarea {
  flex: 1;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  resize: none;
  background: #f9fafb;
  color: #111827;
  line-height: 1.5;
  max-height: 100px;
  overflow-y: auto;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.chatbot-textarea:focus {
  border-color: #2563eb;
  background: #ffffff;
  color: #111827;
}
.chatbot-textarea::placeholder { color: #9ca3af; }

/* 상담 접수 모드 */
.chatbot-textarea.consultation-mode {
  border-color: #f59e0b;
  background: #fffbeb;
  color: #111827;
}
.chatbot-textarea.consultation-mode:focus {
  border-color: #d97706;
  background: #fffbeb;
  color: #111827;
}

.chatbot-send-btn {
  background: #2563eb; color: #fff; border: none; border-radius: 8px;
  padding: 8px 10px; cursor: pointer; display: flex; flex-shrink: 0;
  transition: background 0.2s;
}
.chatbot-send-btn:hover { background: #1d4ed8; }
.chatbot-send-btn:disabled { background: #93c5fd; cursor: not-allowed; }
.chatbot-send-btn.consultation-mode { background: #d97706; }
.chatbot-send-btn.consultation-mode:hover { background: #b45309; }

/* 상담 요청 배너 */
.chatbot-consultation-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: #fffbeb;
  border-top: 1px solid #fde68a;
  font-size: 11.5px;
  color: #92400e;
  flex-shrink: 0;
}
.chatbot-consultation-banner.hidden { display: none; }

/* 요청 중단 버튼 */
.chatbot-cancel-consultation-btn {
  margin-left: auto;
  padding: 3px 10px;
  background: none;
  border: 1px solid #d97706;
  border-radius: 4px;
  color: #92400e;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}
.chatbot-cancel-consultation-btn:hover { background: #fde68a; }

/* 상담 확인 버튼 */
.chatbot-confirm-btns {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.chatbot-confirm-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: background 0.15s;
}
.chatbot-confirm-yes {
  background: #2563eb;
  color: #fff;
}
.chatbot-confirm-yes:hover { background: #1d4ed8; }
.chatbot-confirm-no {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}
.chatbot-confirm-no:hover { background: #e5e7eb; }

/* 미읽은 답변 배지 */
.chatbot-unread-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* 다크모드 */
@media (prefers-color-scheme: dark) {
  .chatbot-window {
    background: #1f2937;
    border-color: #374151;
  }
  .chatbot-messages {
    background: #1f2937;
    color: #f9fafb;
  }
  .chatbot-msg-assistant .chatbot-msg-content {
    background: #374151;
    color: #f9fafb;
  }
  .chatbot-quick-btn {
    background: #374151;
    border-color: #4b5563;
    color: #93c5fd;
  }
  .chatbot-quick-btn:hover { background: #4b5563; }
  .chatbot-typing { background: #1f2937; }
  .chatbot-typing-dots { background: #374151; }
  .chatbot-input-area { background: #1f2937; border-color: #374151; }
  .chatbot-textarea {
    background: #374151;
    color: #f9fafb;
    border-color: #4b5563;
  }
  .chatbot-textarea:focus {
    background: #1f2937;
    color: #f9fafb;
  }
  .chatbot-textarea::placeholder { color: #6b7280; }
}

/* 모바일 */
@media (max-width: 480px) {
  #chatbot-widget { bottom: 16px; right: 16px; }
  .chatbot-window { width: calc(100vw - 32px); right: -8px; height: 480px; }
}

/* 퍼널 에디터: 모바일에서는 sticky 하단 내비('다음' 버튼)를 가리므로 숨김 */
@media (max-width: 768px) {
  body:has(.funnel-editor-wrapper) #chatbot-widget {
    display: none;
  }
}
/* ═══════════════════════════════════════════════════════════
   Speed Landing Pages — 레이아웃 및 UI 컴포넌트
   ═══════════════════════════════════════════════════════════ */

/* ── 2컬럼 레이아웃 ──────────────────────────────────────── */
.two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}

@media (max-width: 1024px) {
  .two-column-layout {
    grid-template-columns: 1fr;
  }
}

.editor-column {
  min-width: 0;
}

.preview-column {
  position: sticky;
  top: 1rem;
  min-width: 0;
}

/* ── 탭 네비게이션 ──────────────────────────────────────── */
.tab-nav {
  display: flex;
  border-bottom: 2px solid var(--border-color, #e5e7eb);
  gap: 0.25rem;
}

.tab-btn {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover {
  color: var(--primary-600, #4f46e5);
}

.tab-btn.active {
  color: var(--primary-600, #4f46e5);
  border-bottom-color: var(--primary-600, #4f46e5);
}

.dark .tab-btn:hover, .dark .tab-btn.active {
  color: var(--primary-300);
  border-bottom-color: var(--primary-400);
}

.tab-panel {
  display: block;
}

.tab-panel.hidden {
  display: none;
}

/* ── 미리보기 헤더 ──────────────────────────────────────── */
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  gap: 0.75rem;
}

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

/* ── 디바이스 토글 ──────────────────────────────────────── */
.device-toggle {
  display: flex;
  gap: 0.25rem;
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.375rem;
  padding: 0.125rem;
}

.device-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  border-radius: 0.25rem;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  transition: background 0.15s, color 0.15s;
}

.device-btn:hover {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-primary, #111827);
}

.device-btn.active {
  background: var(--primary-100, #e0e7ff);
  color: var(--primary-700, #4338ca);
}

/* ── 기획 복사 버튼 ─────────────────────────────────────── */
.btn-copy-brief {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.btn-copy-brief:hover {
  background: var(--bg-secondary, #f9fafb);
  color: var(--text-primary, #111827);
}

/* ── 랜딩페이지 미리보기 ────────────────────────────────── */
.landing-preview {
  border: 1px solid var(--border-color, #e5e7eb);
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  min-height: 400px;
  transition: max-width 0.3s ease, border-radius 0.3s ease;
}

/* ── 인라인 제목 편집 ───────────────────────────────────── */
.page-title-input {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary, #111827);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  margin-left: -0.5rem;
  transition: border-color 0.15s, background 0.15s;
  outline: none;
}

.page-title-input:hover {
  border-color: var(--border-color, #e5e7eb);
  background: var(--bg-secondary, #f9fafb);
}

.page-title-input:focus {
  border-color: var(--primary-400, #818cf8);
  background: var(--bg-primary, #ffffff);
  box-shadow: 0 0 0 3px var(--primary-100, #e0e7ff);
}

/* ── copy-editor-header 세로 정렬 ───────────────────────── */
.copy-editor-header {
  align-items: center !important;
}

/* ── AI 프롬프트 모달 ───────────────────────────────────── */
.ai-prompt-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.ai-prompt-modal.hidden {
  display: none;
}

.ai-prompt-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(2px);
}

.ai-prompt-dialog {
  position: relative;
  z-index: 1;
  background: var(--bg-primary, #ffffff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.75rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.ai-prompt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.ai-prompt-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #111827);
  margin: 0;
}

.ai-prompt-desc {
  font-size: 0.875rem;
  color: var(--text-secondary, #6b7280);
  margin: 0 0 1rem;
  line-height: 1.5;
}

.ai-prompt-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

.btn-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: none;
  background: none;
  color: var(--text-secondary, #6b7280);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s;
}

.btn-modal-close:hover {
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-primary, #111827);
}

/* ── AI 제안 버튼 (필드별) ──────────────────────────────── */
.btn-ai-suggest {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary-700, #4338ca);
  background: var(--primary-50, #eef2ff);
  border: 1px solid var(--primary-200, #c7d2fe);
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-ai-suggest:hover {
  background: var(--primary-100, #e0e7ff);
}

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

/* ── 필드 헤더 (라벨 + 버튼 행) ────────────────────────── */
.field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.field-header .form-label {
  margin-bottom: 0;
}

/* ── AI 제안 칩 ─────────────────────────────────────────── */
.suggestions-container {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.suggestions-label {
  font-size: 0.7rem;
  color: var(--text-muted, #9ca3af);
  margin: 0 0 0.25rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.suggestion-chip {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-primary, #111827);
  background: var(--bg-secondary, #f9fafb);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.4;
}

.suggestion-chip:hover {
  background: var(--primary-50, #eef2ff);
  border-color: var(--primary-300, #a5b4fc);
  color: var(--primary-800, #3730a3);
}

/* ── 디자인 패널 ────────────────────────────────────────── */
.design-guide-banner {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--primary-50, #eef2ff);
  border: 1px solid var(--primary-200, #c7d2fe);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  color: var(--primary-700, #4338ca);
  line-height: 1.5;
}

.design-rationale-box {
  padding: 0.75rem 1rem;
  background: var(--bg-secondary, #f9fafb);
  border-left: 3px solid var(--primary-400, #818cf8);
  border-radius: 0 0.375rem 0.375rem 0;
  font-size: 0.8125rem;
  color: var(--text-secondary, #6b7280);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.design-rationale-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-500, #6366f1);
  margin-bottom: 0.25rem;
}

/* ── 컬러 피커 그리드 ───────────────────────────────────── */
.color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.color-picker-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.color-input {
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 0.375rem;
  padding: 0.125rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* ── AI 생성 헤더 버튼 ── */
.btn-ai-generate {
  background: #f5f3ff;
  border: 1.5px solid #a78bfa;
  color: #6d28d9;
  font-weight: 500;
}
.btn-ai-generate:hover {
  background: #ede9fe;
  border-color: #7c3aed;
  color: #5b21b6;
}

/* ── 버튼 변형 ── */
.btn-outline {
  background: transparent;
  border: 1.5px solid #d1d5db;
  color: #374151;
}
.btn-outline:hover { background: #f3f4f6; }

.btn-success {
  background: #16a34a;
  color: white;
  border: none;
  box-shadow: 0 1px 4px rgba(22,163,74,0.3);
}
.btn-success:hover { background: #15803d; }

.btn-danger-outline {
  background: transparent;
  border: 1.5px solid #fca5a5;
  color: #dc2626;
}
.btn-danger-outline:hover { background: #fef2f2; }

/* ── 프리뷰 본문 내 Quill HTML 헤딩 스타일 복원 ─────────── */
.preview-body h1 { font-size: 1.875rem !important; font-weight: 700 !important; line-height: 1.2 !important; margin-bottom: 0.75rem !important; }
.preview-body h2 { font-size: 1.5rem !important;   font-weight: 700 !important; line-height: 1.3 !important; margin-bottom: 0.625rem !important; }
.preview-body h3 { font-size: 1.25rem !important;  font-weight: 600 !important; line-height: 1.4 !important; margin-bottom: 0.5rem !important; }
.preview-body p  { margin-bottom: 0.75rem; }
.preview-body ul, .preview-body ol { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.preview-body ul { list-style-type: disc; }
.preview-body ol { list-style-type: decimal; }
.preview-body li { margin-bottom: 0.25rem; }
.preview-body strong { font-weight: 700; }
.preview-body em { font-style: italic; }
/* ═══════════════════════════════════════════════════════════════════════════
   Traffic Engine - Blog Engine & Speed Landing Pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Layout ─── */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6);
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.page-header-content {
  flex: 1;
}

.page-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0 0 var(--space-1) 0;
}

.page-description {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

.page-header-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* ─── Card Grid ─── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-6);
}

/* ─── Filter Bar ─── */
.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
}

.filter-tabs {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.filter-tab {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
  transition: all var(--transition-fast);
  cursor: pointer;
}

.filter-tab:hover {
  background: var(--hover-bg);
  color: var(--primary-color);
}

.filter-tab.active {
  background: var(--primary-50);
  color: var(--primary-700);
  border-color: var(--primary-200);
}

.dark .filter-tab.active {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary-300);
  border-color: rgba(99, 102, 241, 0.3);
}

.filter-categories {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-left: auto;
}

/* ─── Status Badges ─── */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.status-draft {
  background: var(--neutral-100);
  color: var(--neutral-600);
}

.status-scheduled {
  background: #fef3c7;
  color: #92400e;
}

.status-published {
  background: #dcfce7;
  color: #166534;
}

.dark .status-draft {
  background: rgba(100, 116, 139, 0.2);
  color: var(--neutral-400);
}

.dark .status-scheduled {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

.dark .status-published {
  background: rgba(16, 185, 129, 0.2);
  color: #4ade80;
}

/* ─── Badges ─── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 500;
}

.badge-outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}

.badge-outline.active {
  border-color: var(--primary-400);
  color: var(--primary-600);
  background: var(--primary-50);
}

.badge-primary-outline {
  background: var(--primary-50);
  border: 1px solid var(--primary-200);
  color: var(--primary-700);
}

.badge-low { background: #dcfce7; color: #166534; }
.badge-medium { background: #fef3c7; color: #92400e; }
.badge-high { background: #fee2e2; color: #991b1b; }

/* ─── Buttons: missing variants ─── */
.btn-outline {
  background: transparent;
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

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

.btn-danger-outline {
  background: transparent;
  color: var(--error);
  border: 1px solid #fca5a5;
}

.btn-danger-outline:hover {
  background: #fee2e2;
  border-color: var(--error);
}

/* ─── Alerts ─── */
.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: 0.875rem;
}

.alert-success {
  background: var(--success-bg);
  border: 1px solid #86efac;
  color: #166534;
}

.alert-warning {
  background: var(--warning-bg);
  border: 1px solid #fcd34d;
  color: #92400e;
}

.alert-error {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
}

.dark .alert-success { background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.3); color: #4ade80; }
.dark .alert-warning { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.3); color: #fcd34d; }
.dark .alert-error { background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.3); color: #f87171; }

/* ─── Form Controls ─── */
.form-control {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--input-bg);
  color: var(--text-color);
  font-size: 0.875rem;
  font-family: var(--font-body);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
}

.form-control:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.form-control.font-mono { font-family: ui-monospace, monospace; }

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

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  padding-top: var(--space-4);
}

.form-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ─── Tab Navigation ─── */
.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border-color);
  margin-bottom: var(--space-4);
  overflow-x: auto;
}

.tab-btn {
  padding: var(--space-2) var(--space-4);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

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

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

.tab-nav-sm .tab-btn {
  padding: var(--space-1) var(--space-3);
  font-size: 0.8rem;
}

.tab-panel { display: block; }
.tab-panel.hidden { display: none; }

/* ─── Two-column Layout (Landing Page Editor) ─── */
.two-column-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: start;
}

.editor-column { display: flex; flex-direction: column; gap: var(--space-4); }

.preview-column {
  position: sticky;
  top: var(--space-6);
}

.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.device-toggle { display: flex; gap: var(--space-1); }

.device-btn {
  padding: var(--space-1);
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 1rem;
  transition: background var(--transition-fast);
}

.device-btn.active, .device-btn:hover {
  background: var(--primary-50);
  border-color: var(--primary-300);
}

.dark .device-btn.active, .dark .device-btn:hover {
  background: var(--hover-bg);
  color: var(--primary-300);
}

/* ─── Blog Post Card ─── */
.blog-post-card-image {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: var(--bg-secondary);
}

.blog-post-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-post-thumbnail-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  background: linear-gradient(135deg, var(--primary-50), var(--accent-50));
}

.blog-post-card-image .status-badge {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
}

.card-title { font-size: 1rem; font-weight: 600; color: var(--heading-color); margin: 0; }
.card-meta { display: flex; align-items: center; flex-wrap: wrap; }
.card-actions { display: flex; gap: var(--space-2); }

/* ─── Empty State ─── */
.empty-state {
  text-align: center;
  padding: var(--space-16) var(--space-8);
}

.empty-state-icon { font-size: 3rem; margin-bottom: var(--space-4); }
.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: var(--space-2);
}

.empty-state-description {
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}

.empty-state-inline {
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
}

/* ─── SEO Panel ─── */
.seo-preview-box {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: Arial, sans-serif;
}

.seo-preview-title {
  color: #1a0dab;
  font-size: 1rem;
  font-weight: normal;
  margin: 0 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seo-preview-url {
  color: #006621;
  font-size: 0.8rem;
  margin: 0 0 4px;
}

.seo-preview-desc {
  color: #545454;
  font-size: 0.8rem;
  margin: 0;
  line-height: 1.4;
}

.seo-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-color);
}

.seo-field:last-child { border-bottom: none; }
.seo-field-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; }
.seo-field-value { font-size: 0.875rem; color: var(--text-color); }
.seo-field-count { align-self: flex-end; }

.score-bar {
  height: 6px;
  background: var(--neutral-200);
  border-radius: 3px;
  overflow: hidden;
}

.score-fill {
  height: 100%;
  background: var(--primary-500);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ─── Keyword Analysis ─── */
.keyword-group-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}

.keyword-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.keyword-tag {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  font-weight: 500;
}

.keyword-tag.primary {
  background: var(--primary-50);
  color: var(--primary-700);
  border: 1px solid var(--primary-200);
}

.keyword-tag.secondary {
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

/* ─── Trend Score ─── */
.trend-score-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary-50);
  border: 3px solid var(--primary-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.trend-score-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-600);
}

.trend-group-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

/* ─── Image Grid ─── */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-3);
}

.image-item {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.image-thumbnail {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

.image-meta {
  padding: var(--space-2);
  background: var(--card-background);
}

/* ─── Social Adaptations ─── */
.social-adaptation-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.social-text-box {
  background: var(--card-background);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-height: 80px;
  font-size: 0.875rem;
  line-height: 1.6;
}

.social-hashtags { display: flex; flex-wrap: wrap; gap: var(--space-1); }

.social-image { max-height: 200px; object-fit: cover; }

/* ─── Template Selector ─── */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.template-card {
  background: var(--card-background);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  cursor: pointer;
  transition: all var(--transition-base);
  text-align: center;
}

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

.template-card.selected {
  border-color: var(--primary-500);
  background: var(--primary-50);
}

.dark .template-card.selected {
  background: var(--accent-bg);
  border-color: var(--primary-400);
}

.template-icon {
  font-size: 2.5rem;
  margin-bottom: var(--space-3);
}

.template-name {
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: var(--space-1);
  font-size: 0.95rem;
}

.template-description {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.4;
}

/* ─── Landing Page Preview ─── */
.landing-preview {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  overflow: hidden;
  min-height: 400px;
  background: white;
  font-family: 'Noto Sans KR', sans-serif;
}

.preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  margin: var(--space-4);
}

/* ─── CTA Preview (Card) ─── */
.cta-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  margin-top: var(--space-2);
}

/* ─── Color Picker ─── */
.color-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.color-picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.color-input {
  width: 40px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  cursor: pointer;
  flex-shrink: 0;
}

/* ─── WordPress Status ─── */
.wordpress-status {
  padding: var(--space-3);
  background: var(--success-bg);
  border: 1px solid #86efac;
  border-radius: var(--radius-md);
}

.schedule-section { }

/* ─── Bullet Input ─── */
.bullet-input { display: flex; align-items: center; gap: var(--space-2); }

/* ─── Table ─── */
.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border-bottom: 2px solid var(--border-color);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-color);
}

/* ─── Utility ─── */
.text-inherit { color: inherit; }
.text-muted { color: var(--text-muted); }
.text-green-600 { color: #16a34a; }
.text-blue-600 { color: #2563eb; }
.text-xs { font-size: 0.75rem; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.125rem; }
.font-mono { font-family: ui-monospace, 'Courier New', monospace; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mx-2 { margin-left: var(--space-2); margin-right: var(--space-2); }
.pt-4 { padding-top: var(--space-4); }
.pt-6 { padding-top: var(--space-6); }
.border-t { border-top: 1px solid var(--border-color); }
.w-full { width: 100%; }
.max-w-none { max-width: none; }
.max-h-48 { max-height: 12rem; }
.max-h-64 { max-height: 16rem; }
.object-cover { object-fit: cover; }
.rounded-lg { border-radius: var(--radius-lg); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.block { display: block; }
.flex { display: flex; }
.hidden { display: none !important; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.list-disc { list-style-type: disc; }
.list-inside { list-style-position: inside; }
.text-center { text-align: center; }
.overflow: hidden;
.ml-1 { margin-left: var(--space-1); }
.mr-auto { margin-right: auto; }
.overflow-hidden { overflow: hidden; }

.prose p { margin-bottom: var(--space-4); line-height: 1.8; color: var(--text-color); }
.prose h2 { font-size: 1.25rem; font-weight: 700; color: var(--heading-color); margin: var(--space-6) 0 var(--space-3); }
.prose h3 { font-size: 1.1rem; font-weight: 600; color: var(--heading-color); margin: var(--space-5) 0 var(--space-2); }
.prose ul, .prose ol { padding-left: var(--space-6); margin-bottom: var(--space-4); }
.prose li { margin-bottom: var(--space-1); line-height: 1.7; }
.prose strong { font-weight: 700; color: var(--heading-color); }

/* ─── Generation Status Panel ─── */
.generation-status-panel {
  background: linear-gradient(135deg, var(--primary-50), rgba(139,92,246,0.05));
  border: 1px solid var(--primary-200);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}

.dark .generation-status-panel {
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.05));
  border-color: rgba(99,102,241,0.3);
}

.generation-status-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.generation-status-icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.gen-spinner { display: inline-block; }

.generation-status-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin: 0 0 var(--space-1);
}

.generation-status-desc {
  font-size: 0.875rem;
  color: var(--text-secondary);
  margin: 0;
}

.generation-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.generation-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--card-background);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
}

.step-icon { font-size: 1rem; width: 1.5rem; text-align: center; flex-shrink: 0; }

.step-label {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color);
}

.step-status {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-full);
}

.step-status.pending { color: var(--text-muted); background: var(--bg-secondary); }
.step-status.loading { color: #92400e; background: #fef3c7; }
.step-status.done { color: #166534; background: #dcfce7; }
.step-status.failed { color: #991b1b; background: #fee2e2; }

.generation-failed-sections {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: var(--radius-md);
}

.dark .generation-failed-sections {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.3);
}

.failed-title {
  font-weight: 600;
  color: #92400e;
  margin: 0 0 var(--space-1);
  font-size: 0.875rem;
}

.dark .failed-title { color: #fcd34d; }

.failed-desc {
  color: var(--text-secondary);
  font-size: 0.8rem;
  margin: 0 0 var(--space-2);
}

.failed-list {
  margin: 0;
  padding-left: var(--space-5);
  font-size: 0.8rem;
  color: var(--text-color);
}

.failed-list li { margin-bottom: var(--space-1); }

/* ─── AI Quick Generate Section ─── */
.ai-quick-generate {
  background: linear-gradient(135deg, rgba(99,102,241,0.05), rgba(139,92,246,0.05));
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

/* ─── Responsive ─── */
@media (max-width: 1024px) {
  .two-column-layout { grid-template-columns: 1fr; }
  .preview-column { position: static; }
}

@media (max-width: 768px) {
  .page-header { flex-direction: column; align-items: stretch; }
  .card-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .color-grid { grid-template-columns: 1fr; }
  .template-grid { grid-template-columns: 1fr 1fr; }
  .tab-nav { overflow-x: auto; }
}

@media (max-width: 480px) {
  .page-container { padding: var(--space-4); }
  .template-grid { grid-template-columns: 1fr; }
}


/* ─── SEO/AEO 탭 섹션 간격 ───────────────────────────────
 * .settings-card 자체는 margin이 없다(components.css). 다른 탭은 카드마다
 * 인라인 margin-top을 붙여 쓰는데 SEO/AEO 탭에만 그게 없어 카드가 서로 붙어 있었다.
 *
 * 인접 형제 선택자로 "위쪽 카드에만" 20px을 주는 이유:
 * .blogtab-panel은 flex/grid가 아닌 일반 블록 컨테이너라 형제 간 세로 마진이
 * 상쇄(collapse)된다. mt:10 + mb:10을 주면 합쳐서 20px이 아니라 max(10,10)=10px이 된다.
 * 한쪽에만 20px을 주면 화면상 간격도, 카드가 기여하는 마진 총합도 정확히 20px이다.
 * 첫 카드 위·마지막 카드 아래에는 마진이 생기지 않는다.
 *
 * .settings-card는 관리자·설정 등 앱 전역에서 쓰이므로 반드시 #blogtab-seo로 스코프한다.
 */
#blogtab-seo .settings-card + .settings-card {
  margin-top: 20px;
}
/* ============================================================
   Modal & Project Selector (shared across traffic engine pages)
   ============================================================ */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal.open {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.modal-content {
  position: relative;
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  max-width: 90%;
}

.project-select-content {
  width: 600px;
  max-height: 80vh;
}

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

.modal-header h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--heading-color);
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 0.25rem;
}

.modal-close:hover {
  background: var(--hover-bg);
  color: var(--text-color);
}

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

.modal-desc {
  margin-top: 0;
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  text-align: center;
}

.project-list-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

.project-select-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text-color);
  transition: all 0.2s;
}

.project-select-card:hover {
  background: var(--card-bg);
  border-color: var(--primary-500);
  box-shadow: 0 4px 6px -1px rgba(99, 102, 241, 0.1);
  transform: translateY(-1px);
}

.project-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-bg);
  border-radius: var(--radius-md);
  color: var(--primary-500);
  flex-shrink: 0;
}

.project-icon.dashed {
  border: 1px dashed var(--border-color);
  background: transparent;
  color: var(--text-muted);
}

.project-select-card.new-project:hover .project-icon.dashed {
  border-color: var(--primary-400);
  color: var(--primary-500);
}

.project-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.project-name {
  font-weight: 600;
  color: var(--heading-color);
}

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

.project-arrow {
  color: var(--text-muted);
  opacity: 0;
  transform: translateX(-5px);
  transition: all 0.2s;
}

.project-select-card:hover .project-arrow {
  opacity: 1;
  transform: translateX(0);
  color: var(--primary-500);
}

/* ============================================================
   Quill WYSIWYG 에디터 스타일 보정
   ============================================================ */
.rich-editor-container {
  background: var(--input-bg, #fff);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.ql-toolbar.ql-snow {
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--bg-secondary, #f8fafc);
}

.ql-container.ql-snow {
  border: 1px solid var(--border-color, #e2e8f0);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  font-family: inherit;
}

.ql-editor {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-color, #1e293b);
}

.ql-editor h1, .ql-editor h2, .ql-editor h3 {
  color: var(--heading-color, #0f172a);
  font-weight: 700;
  margin: 1.5em 0 0.5em;
}

.ql-editor h2 { font-size: 1.4em; }
.ql-editor h3 { font-size: 1.2em; }

.ql-editor p { margin-bottom: 1em; }

.ql-editor blockquote {
  border-left: 4px solid var(--primary-400, #818cf8);
  padding-left: 1em;
  color: var(--text-muted);
  font-style: italic;
  margin: 1.5em 0;
}

.ql-editor ul, .ql-editor ol {
  padding-left: 1.5em;
  margin-bottom: 1em;
}

/* 블로그 HTML 렌더링 (show 페이지) */
.blog-html-content {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-color);
}

.blog-html-content h1,
.blog-html-content h2,
.blog-html-content h3 {
  color: var(--heading-color);
  font-weight: 700;
  margin: 1.8em 0 0.6em;
  line-height: 1.3;
}

.blog-html-content h2 { font-size: 1.5em; border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; }
.blog-html-content h3 { font-size: 1.25em; }

.blog-html-content p { margin-bottom: 1.2em; }

.blog-html-content ul, .blog-html-content ol {
  padding-left: 1.8em;
  margin-bottom: 1.2em;
}

.blog-html-content li { margin-bottom: 0.4em; }

.blog-html-content blockquote {
  border-left: 4px solid var(--primary-400);
  padding: 0.5em 1em;
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--text-muted);
  margin: 1.5em 0;
}

.blog-html-content strong { font-weight: 700; }
.blog-html-content em { font-style: italic; }

.blog-html-content code {
  background: var(--bg-secondary);
  padding: 0.1em 0.4em;
  border-radius: 0.25em;
  font-family: monospace;
  font-size: 0.9em;
}
/*




 */
/* 블로그 젬(Gem) 목록 — app/views/blog_settings/_list.html.erb, _blog_setting_card.html.erb */

.blog-gems-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4, 1rem);
}

.blog-gems-empty {
  grid-column: 1 / -1;
  padding: var(--space-8, 2rem);
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
  background: var(--card-bg);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-lg, 10px);
}

.blog-gem-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl, 12px);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.blog-gem-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.blog-gem-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 8px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog-gem-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--heading-color, var(--text-primary));
}

.blog-gem-badge-default {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  background: var(--primary-50, #eef2ff);
  color: var(--primary-600, #4f46e5);
}

.blog-gem-desc {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-gem-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.blog-gem-tag {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 20px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.blog-gem-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.blog-gem-btn-active,
.blog-gem-btn-set-default,
.blog-gem-btn-edit,
.blog-gem-btn-reset,
.blog-gem-btn-delete {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 500;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.blog-gem-btn-active {
  color: #16a34a;
  border-color: #bbf7d0;
  background: #f0fdf4;
  cursor: default;
}

.blog-gem-btn-set-default {
  color: var(--primary-600, #4f46e5);
  border-color: var(--primary-200, #c7d2fe);
}
.blog-gem-btn-set-default:hover {
  background: var(--primary-50, #eef2ff);
}

.blog-gem-btn-edit:hover {
  background: var(--bg-secondary);
}

.blog-gem-btn-reset:hover {
  background: var(--bg-secondary);
}

.blog-gem-btn-delete {
  color: #dc2626;
  border-color: #fca5a5;
}
.blog-gem-btn-delete:hover {
  background: #fef2f2;
}
/* Business Blueprint 디자인 (2026-07-12 전면 재설계).
   컨셉: "청사진 도면" — 딥 인디고 도면 밴드(그리드 라인 패턴) + 스테이지 트래커가 시그니처.
   색·폰트는 base.css 토큰(Deep Indigo/Warm Gold/Slate, Noto Sans KR)만 사용해
   라이트/다크 모두 자동 대응. 밴드는 양 테마 공통 고정색(딥 인디고).
   구 .item-card/.items-grid는 CSS 정의가 아예 없어 플레인 텍스트로 보이던 원인 —
   전부 bp-* 자체 클래스로 대체했다. */

/* ── 도면 밴드 (시그니처) ─────────────────────────────────────────────── */
.bp-band {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 1.75rem 2rem;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 28px),
    linear-gradient(135deg, #312e81 0%, #1e1b4b 100%);
  color: #eef2ff;
}

.bp-band::after {
  /* 도면 우상단 측량 마커 느낌의 골드 코너 */
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 96px;
  height: 96px;
  background: radial-gradient(circle at top right, rgba(251, 191, 36, 0.28), transparent 70%);
  pointer-events: none;
}

.bp-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-400, #fbbf24);
  margin-bottom: 0.375rem;
}

.bp-band-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 0.375rem;
  letter-spacing: -0.01em;
}

.bp-band-desc {
  font-size: 0.9rem;
  color: #c7d2fe;
  margin: 0;
  max-width: 560px;
  line-height: 1.6;
}

.bp-band .btn-primary {
  background: var(--accent-400, #fbbf24);
  border-color: var(--accent-400, #fbbf24);
  color: #1e1b4b;
  font-weight: 700;
}

.bp-band .btn-primary:hover {
  background: var(--accent-300, #fcd34d);
  border-color: var(--accent-300, #fcd34d);
}

.bp-band-actions {
  margin-top: 1.125rem;
}

/* ── 스테이지 트래커 (밴드 내부, 모든 대시보드 상태 상단 상주) ─────────── */
.bp-tracker {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1.375rem;
  overflow-x: auto;
  padding-bottom: 2px;
}

.bp-tracker-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.bp-tracker-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.6875rem;
  font-weight: 700;
  border: 1.5px solid rgba(199, 210, 254, 0.45);
  color: #c7d2fe;
  flex-shrink: 0;
}

.bp-tracker-label {
  font-size: 0.78rem;
  color: rgba(199, 210, 254, 0.75);
}

.bp-tracker-step.is-done .bp-tracker-dot {
  background: var(--primary-400, #818cf8);
  border-color: var(--primary-400, #818cf8);
  color: #1e1b4b;
}

.bp-tracker-step.is-done .bp-tracker-label {
  color: #e0e7ff;
}

.bp-tracker-step.is-current .bp-tracker-dot {
  background: var(--accent-400, #fbbf24);
  border-color: var(--accent-400, #fbbf24);
  color: #1e1b4b;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.22);
}

.bp-tracker-step.is-current .bp-tracker-label {
  color: #ffffff;
  font-weight: 700;
}

.bp-tracker-line {
  flex: 1;
  min-width: 14px;
  height: 1.5px;
  background: rgba(199, 210, 254, 0.3);
}

.bp-tracker-line.is-done {
  background: var(--primary-400, #818cf8);
}

/* 이전 단계 보기(2026-07-13): is-done 스텝만 클릭 가능(data-tracker-step 존재) */
.bp-tracker-step[data-tracker-step] {
  cursor: pointer;
}

.bp-tracker-step[data-tracker-step]:hover .bp-tracker-dot {
  filter: brightness(1.2);
}

.bp-tracker-step[data-tracker-step]:hover .bp-tracker-label {
  color: #ffffff;
}

.bp-tracker-step.is-viewing .bp-tracker-dot {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.55);
}

/* ── 공통 셸: 밴드 아래 콘텐츠 간격 ───────────────────────────────────── */
.bp-shell {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* 2026-07-14(사용자 요청, C항목): 전체 너비 대신 "블로그 관리 정도의 너비"로 제약한다.
     traffic_engine_base.css의 .page-container(max-width:1200px)와 동일 — .main-body가 이미
     --space-6 패딩을 주므로 여기서는 최대 너비 제약과 중앙 정렬만 더한다. */
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

/* ── 카드 공통 ───────────────────────────────────────────────────────── */
.bp-card {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.bp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bp-card-title {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--heading-color);
  margin: 0;
}

.bp-card-title svg {
  color: var(--primary-500);
  flex-shrink: 0;
}

/* ── 진입 페이지: 프로젝트 카드 그리드 ────────────────────────────────── */
.bp-section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  margin: 0.25rem 0 0;
}

.bp-section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-color);
}

.bp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.bp-project-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 1.125rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.bp-project-card:hover {
  border-color: var(--primary-400);
  box-shadow: 0 6px 16px rgba(49, 46, 129, 0.1);
  transform: translateY(-1px);
}

.bp-project-card:focus-visible {
  outline: 2px solid var(--primary-500);
  outline-offset: 2px;
}

.bp-project-name {
  font-size: 0.9875rem;
  font-weight: 700;
  color: var(--heading-color);
  margin: 0;
}

.bp-project-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--primary-600);
}

.dark .bp-project-cta {
  color: var(--primary-300);
}

.bp-project-card:hover .bp-project-cta {
  text-decoration: underline;
}

/* ── 인테이크 폼 ─────────────────────────────────────────────────────── */
.blueprint-form label {
  display: block;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--heading-color);
}

.blueprint-form .form-input {
  display: block;
  width: 100%;
  margin-top: 6px;
  font-weight: 400;
}

.bp-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 1.25rem;
  text-align: left;
}

.bp-form-grid .bp-full {
  grid-column: 1 / -1;
}

.bp-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

.bp-form-note {
  color: var(--text-secondary);
  font-size: 0.8125rem;
  margin: 0;
}

.bp-form-footer .btn {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── 처리 중 ─────────────────────────────────────────────────────────── */
.bp-processing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.bp-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: bp-spin 0.8s linear infinite;
}

@keyframes bp-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bp-spinner {
    animation-duration: 2.4s;
  }

  .bp-project-card,
  .bp-project-card:hover {
    transition: none;
    transform: none;
  }
}


/* ── 퍼널 단계 흐름 다이어그램(2026-07-13, 읽기 전용) ───────────────────────
   퍼널 위자드 콘텐츠 단계(funnels/steps/_content_overview.html.erb)의 편집 가능한
   .flow-stages와 같은 시각 언어(번호 원 + 화살표 연결선 + 카드)를 읽기 전용으로 재현한다.
   그 파셜의 CSS는 파셜 안에 인라인 스코프돼 있어 재사용 불가 — 클래스명을 새로 둔다. */
.bp-flow-stages {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.bp-flow-stage {
  position: relative;
  flex: 1 1 140px;
  min-width: 140px;
  /* 2026-07-14: 부모(.bp-field-section)와 같은 --bg-secondary를 쓰면 라이트 모드에서
     경계가 border 1px에만 의존해 거의 안 보였다 — --card-bg(흰색)로 톤 분리. */
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem 0.875rem 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.bp-flow-stage-number {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary-500);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  border-radius: 50%;
  border: 2px solid var(--card-bg, #fff);
}

.bp-flow-stage-name {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--heading-color);
  text-align: center;
  margin-bottom: 0.25rem;
}

.bp-flow-stage-desc {
  font-size: 0.75rem;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.45;
}

.bp-flow-connector {
  display: inline-flex;
  align-items: center;
  color: var(--text-muted, var(--text-secondary));
  flex-shrink: 0;
}

/* ── 반응형 (진입/폼/밴드) ────────────────────────────────────────────── */
@media (max-width: 720px) {
  .bp-flow-stages {
    flex-direction: column;
    align-items: stretch;
  }

  .bp-flow-connector {
    transform: rotate(90deg);
    padding: 0.25rem 0;
  }

  .bp-band {
    padding: 1.25rem 1.125rem;
    border-radius: 14px;
  }

  .bp-band-title {
    font-size: 1.25rem;
  }

  .bp-tracker-label {
    display: none;
  }

  .bp-tracker-step.is-current .bp-tracker-label {
    display: inline;
  }

  .bp-form-grid,
  .bp-card-grid {
    grid-template-columns: 1fr;
  }

  .bp-form-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* ── 리서치 다시 하기 상태 문구 (2026-07-21) ─────────────────────────────
   제자리 갱신이라 stage가 안 바뀐다 — 이 문구가 진행/실패의 유일한 화면 신호다. */
.bp-rerun-status {
  font-size: 0.8125rem;
  color: var(--text-muted);
  align-self: center;
}

.bp-rerun-status.is-failed {
  color: var(--warning-700, #b45309);
}

.dark .bp-rerun-status.is-failed {
  color: var(--warning-300, #fcd34d);
}
/* Business Blueprint — 승인 카드·리서치 리뷰·통합 리포트 스타일.
   blueprint.css(밴드/트래커/진입/폼)에서 분리(500줄 규칙, 2026-07-12).
   토큰은 base.css 공용 변수만 사용(라이트/다크 자동 대응). */

/* ── 필드 섹션(승인 카드/리포트 공용) ─────────────────────────────────── */
.bp-approval-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* 2026-07-20 기존 버그 수정(375px에서 body 가로 스크롤 288px):
 * 그리드/플렉스 아이템은 min-width가 auto가 기본이라 "내용보다 좁아지기를 거부"한다.
 * 경쟁사 비교표처럼 넓은 내용(th에 white-space:nowrap)이 들어오면 아이템이 614px로
 * 버티고, 그 안의 스크롤 래퍼(.bp-cmp-scroll)까지 함께 늘어나 무력화됐다
 * — 래퍼에 min-width:0을 줘도 소용없고, 축소를 막는 **아이템** 쪽을 풀어야 한다.
 * 실측: 이 한 줄로 288px → 0px, 래퍼가 비로소 자기 안에서 스크롤된다. */
.bp-approval-body > * {
  min-width: 0;
}

.bp-field-section {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--primary-300);
  border-radius: 12px;
  padding: 0.875rem 1rem;
}

/* SEO/AEO 섹션(2026-07-14): 체크리스트/공략 키워드/SEO 실행 항목/AEO 실행 항목이
   자식 .bp-field-section으로 여백 없이 붙어 답답해 보이던 문제 — 이 섹션에 한정해 간격 추가. */
.bp-seo-aeo-section > .bp-field-section + .bp-field-section {
  margin-top: 0.875rem;
}

/* 2026-07-14(사용자 요청): 자식 박스가 부모(.bp-seo-aeo-section)와 같은 --bg-secondary라
   라이트 모드에서 경계가 border 1px에만 의존해 거의 안 보였다 — .bp-flow-stage와 동일하게
   --card-bg(흰색)로 톤 분리한다. */
.bp-seo-aeo-section > .bp-field-section {
  background: var(--card-bg, #fff);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* 2026-07-20(사용자 지적: "헤딩이 약해서 가독성이 떨어진다"):
   0.75rem + letter-spacing 0.06em은 한글에서 특히 약하다 — uppercase는 한글에 아무 효과가
   없으면서 자간만 벌려 오히려 읽기 어렵게 만든다(영문 라벨에만 유효한 장치였다).
   크기를 키우고 자간을 정상으로 되돌려 제목답게 만든다. */
.bp-field-section-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--primary-700);
  letter-spacing: -0.01em;
  margin: 0 0 0.625rem;
}

.dark .bp-field-section-title {
  color: var(--primary-300);
}

.bp-field {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border-color);
}

.bp-field:first-of-type {
  border-top: none;
}

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

.bp-field-value {
  font-size: 0.875rem;
  color: var(--text-color);
  word-break: break-word;
  line-height: 1.55;
}

.bp-field-low-data .bp-field-value {
  color: var(--text-muted, var(--text-secondary));
  font-style: italic;
}

/* ── 리서치 리뷰 ─────────────────────────────────────────────────────── */
.bp-research-body {
  /* minmax(0, ...)로 바닥을 눌러 둔다 — `1fr 1fr`은 각 칸의 최소가 min-content라
   * 표처럼 줄바꿈이 어려운 콘텐츠가 들어오면 칸이 벌어져 컨테이너를 뚫는다
   * (같은 원인으로 375px에서 실제 오버플로가 있었다, 아래 미디어쿼리 주석 참조). */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.bp-research-body > .bp-direction,
.bp-research-body > .bp-benchmark-section,
.bp-research-body > .bp-sources-section {
  grid-column: 1 / -1;
}

.bp-direction {
  background: var(--accent-bg, var(--primary-50));
  border: 1px solid var(--primary-200);
  border-top: 3px solid var(--primary-500);
}

.dark .bp-direction {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(129, 140, 248, 0.35);
}

.bp-direction-text {
  font-size: 0.9375rem;
  color: var(--text-color);
  line-height: 1.75;
  margin: 0;
  /* 2026-07-20: 이제 renderRichText가 문단을 <p>로 나눠 렌더하므로 pre-line을 제거한다.
   * 남겨두면 마크다운 개행이 <p> 여백과 겹쳐 문단 사이가 두 배로 벌어진다. */
}

.bp-list {
  margin: 0;
  padding-left: 1.125rem;
  /* 2026-07-20(사용자 요청): "SEO 실행 항목, AEO 실행 항목, 진단 체크리스트에 불릿포인트 넣을 것".
     어딘가의 `list-style: none`(전역 리셋 또는 .bp-source-list 등)이 상속돼 마커가 사라져
     문장들이 구분 없이 이어져 보였다 — 여기서 명시적으로 되돌린다. */
  list-style: disc;
}

.bp-list-item {
  font-size: 0.875rem;
  color: var(--text-color);
  padding: 0.2rem 0;
  line-height: 1.55;
  word-break: break-word;
}

.bp-list-item::marker {
  color: var(--primary-400);
}

.bp-source-list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* 2026-07-21(사용자 요청): 6개 남짓만 보여 리서치를 들여다보지 않게 된다 →
     높이를 2배로 키워 한 번에 더 많은 출처가 눈에 들어오게 한다. */
  max-height: 400px;
  overflow-y: auto;
}

.bp-source-item {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.8125rem;
  border-top: 1px solid var(--border-color);
  word-break: break-all;
}

.bp-source-item:first-child {
  border-top: none;
}

.bp-source-item a {
  color: var(--primary-600);
}

/* 2026-07-21(사용자 요청): 출처에 제목 표기. 제목이 주역이고 URL은 아래 보조 줄.
   URL은 길어서 줄바꿈이 잦으므로 제목 줄과 분리해야 목록이 읽힌다. */
.bp-source-body {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.bp-source-body a {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.bp-source-url {
  font-size: 0.6875rem;
  color: var(--text-muted, #94a3b8);
  word-break: break-all;
}

.dark .bp-source-item a {
  color: var(--primary-300);
}

.bp-source-type {
  flex-shrink: 0;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  white-space: nowrap;
}

.bp-strategy-source {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  background: var(--bg-secondary);
  border: 1px dashed var(--primary-300);
  border-radius: 12px;
}

.bp-radio {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0;
  font-size: 0.875rem;
  color: var(--text-color);
  cursor: pointer;
  font-weight: 500;
}

.bp-radio input {
  accent-color: var(--primary-600);
}

/* ── 재생성(피드백)·승인 버튼 ─────────────────────────────────────────── */
.bp-regenerate-box {
  margin-top: 1.25rem;
}

.bp-regenerate-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.375rem;
}

.bp-regenerate-box .form-input {
  width: 100%;
}

.bp-approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color);
}

/* ── 통합 리포트 (문서 스타일: 번호 마커 + 연결선) ────────────────────── */
.bp-report {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bp-report-section {
  position: relative;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.375rem 1.5rem;
  margin-top: 1.25rem;
}

.bp-report-section-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.125rem;
}

.bp-report-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--primary-600);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.bp-report-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--heading-color);
  margin: 0;
}

.bp-report-subtitle {
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--primary-700);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 1.125rem 0 0.5rem;
}

.dark .bp-report-subtitle {
  color: var(--primary-300);
}

.bp-report-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

/* ── 인포그래픽 카드 (2026-07-13, PRD Phase 3 A안) ──────────────────────
   SVG는 base.css 토큰을 하드코딩 인라인 색으로 그린다(공유 페이지엔 CSS 변수가
   없어도 안전) — 다크모드 배경 위에서는 대비가 깨지므로 카드 자체를 항상 라이트로
   고정한다. var(--card-bg) 등 다크모드에서 값이 바뀌는 변수를 쓰지 않고 리터럴
   색상만 사용해 .dark 조상 아래에서도 고정되게 한다. */
.bp-infographic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.bp-infographic-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bp-infographic-card svg {
  width: 100%;
  height: auto;
  max-width: 320px;
}

/* ── 공유 링크(2026-07-13, PRD Phase 4) ─────────────────────────────────── */
.bp-share-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.bp-share-result {
  width: 100%;
  max-width: 420px;
}

.bp-share-hint {
  margin-top: 1.25rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* ── 산출물 행 ───────────────────────────────────────────────────────── */
.bp-artifact-rows {
  margin-top: 1.125rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

.bp-artifact-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
}

.bp-artifact-row:first-child {
  border-top: none;
}

.bp-artifact-row:nth-child(even) {
  background: var(--card-bg, #fff);
}

.bp-artifact-title {
  flex: 1;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-color);
  word-break: break-word;
}

.bp-artifact-actions {
  display: inline-flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.bp-artifact-actions .btn {
  padding: 0.25rem 0.75rem;
  font-size: 0.8125rem;
}

/* ── 예측 크레딧 표시 (2026-07-12) ────────────────────────────────────── */
.bp-credit-note {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.16);
  border: 1px solid rgba(217, 119, 6, 0.35);
  color: var(--accent-700, #b45309);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
  vertical-align: middle;
}

.dark .bp-credit-note {
  color: var(--accent-300, #fcd34d);
}

.btn .bp-credit-note {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.35);
  color: inherit;
}

.bp-credit-warning {
  align-self: center;
  margin-right: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--error, #ef4444);
}

/* ── 경쟁사·벤치마킹 카드 (2026-07-12 리서치 강화) ─────────────────────── */
.bp-benchmark-section {
  border-top-color: var(--accent-400, #fbbf24);
}

.bp-benchmark-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.bp-benchmark-card {
  background: var(--card-bg, #fff);
  border-top-width: 1px;
  border-top-color: var(--border-color);
}

.bp-benchmark-card .bp-field-section-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
}

.bp-benchmark-card .bp-field-section-title a {
  color: var(--primary-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dark .bp-benchmark-card .bp-field-section-title a {
  color: var(--primary-300);
}

.bp-benchmark-summary {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 0 0.375rem;
}

@media (max-width: 720px) {
  .bp-benchmark-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 반응형 (승인/리서치/리포트) ──────────────────────────────────────── */
@media (max-width: 720px) {
  .bp-approval-body,
  .bp-research-body,
  .bp-report-grid {
    /* 2026-07-20: `1fr`이 아니라 `minmax(0, 1fr)`이어야 한다.
     * `1fr`은 실제로 `minmax(auto, 1fr)`이고 auto의 최소값은 **min-content**라,
     * 줄바꿈이 어려운 콘텐츠가 하나라도 있으면 컬럼이 그만큼 벌어져 부모를 뚫는다.
     * 실측(375px, /blueprint/13): 컬럼이 609px로 벌어져 body가 658px로 가로 스크롤
     * 발생 → minmax(0,1fr)로 바닥을 0으로 누르니 277px로 정상 수렴(658→375).
     * 컬럼 개수를 1개로 줄이는 것만으로는 부족했던 이유가 이것이다. */
    grid-template-columns: minmax(0, 1fr);
  }

  .bp-approval-actions {
    flex-direction: column-reverse;
  }

  .bp-approval-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .bp-artifact-row {
    flex-wrap: wrap;
  }
}
/* Business Blueprint — 퍼널 계획 카드(2026-07-14, D항목).
   퍼널이 1~2개(리드 확보 / 판매)로 늘어나면서 필요해진 규칙만 모은다. 기존 .bp-flow-*
   (단계 흐름 박스)는 blueprint.css에 그대로 두고 건드리지 않는다 — 500줄 규칙에 따라
   blueprint.css/blueprint_report.css가 모두 한계에 가까워 신규 파일로 분리했다.
   토큰은 base.css 공용 변수만 사용(라이트/다크 자동 대응). */

/* 퍼널 카드는 내부에 가로로 긴 단계 흐름 다이어그램을 담는다 — 부모 그리드
   (.bp-approval-body / .bp-report-grid의 auto-fit minmax(240px))의 좁은 칸에 갇히면
   다이어그램이 찌그러지므로 한 줄 전체를 쓴다. 전략/생산 카드는 짧은 필드 위주라
   기존처럼 여러 칸으로 나뉘는 게 맞으므로 퍼널에만 한정한다. */
.bp-funnel-section {
  grid-column: 1 / -1;
}

/* 역할 배지 — 퍼널이 2개일 때만 붙는다(1개면 노이즈라 JS에서 생략). */
.bp-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  vertical-align: middle;
}

.bp-role-lead {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.bp-role-sales {
  background: rgba(234, 179, 8, 0.18);
  color: #a16207;
}

.dark .bp-role-lead {
  color: #93c5fd;
}

.dark .bp-role-sales {
  color: #fcd34d;
}

/* 단계 흐름 블록 — 이제 퍼널 카드(.bp-field-section) 안에 들어가므로 자체 박스를 두지
   않고 소제목+다이어그램만 렌더한다(중첩 박스 방지). */
.bp-flow-block {
  margin-top: 0.875rem;
}

.bp-flow-title {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}

/* 퍼널 유형·이름 직접 선택(2026-08-08, 사용자 요청). 승인 대기 화면의 각 퍼널 카드 하단.
   부모(.bp-field-section)와 톤을 나누되 박스를 또 만들지 않고 구분선 + 살짝 다른 배경으로만
   분리한다 — 카드 안에 박스를 하나 더 두면 "너무 분리된 느낌"이라는 지적이 있었다(2026-07-22).
   색은 전부 base.css 토큰이라 다크모드가 자동으로 따라온다. */
.bp-funnel-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px dashed var(--border-color);
}

.bp-funnel-picker-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 200px;
  min-width: 0;
}

.bp-funnel-picker-label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* form-input 전역 스타일을 그대로 쓰되, flex 안에서 넘치지 않게만 잡는다. */
.bp-funnel-picker .form-input {
  width: 100%;
  max-width: 100%;
}

.bp-funnel-picker [data-funnel-apply] {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .bp-funnel-picker [data-funnel-apply] {
    width: 100%;
  }
}
/* Business Blueprint — C항목 시각 강화(2026-07-16, 사용자 요청: "세로 유지 + 그래픽 강화").
   리포트를 세로 스크롤 그대로 두되 "일목요연하게" 보이도록 하는 추가 UI만 모은다.
   기존 blueprint.css/blueprint_report.css가 모두 500줄 규칙에 근접해 신규 파일로 분리.
   토큰은 base.css 공용 변수만 사용(라이트/다크 자동 대응). */

/* ── 버튼 안 로딩 스피너(2026-07-16, 사용자 보고) ────────────────────────
   "리서치 시작"을 눌러도 아무 표시가 없어 시작이 안 되는 것처럼 보이던 문제.
   blueprint.css의 .bp-spinner(28px)는 화면 중앙용이라 버튼엔 크다 — 크기·색만 버튼에
   맞추고 애니메이션(bp-spin)은 그대로 재사용한다(prefers-reduced-motion 대응도 승계). */
.bp-btn-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 0.45rem;
  vertical-align: -1px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bp-spin 0.8s linear infinite;
}

/* ── 상단 한눈 요약 스탯 스트립 ──────────────────────────────────────────
   리포트 맨 위에서 산출물 개수를 한눈에(개요/PPT 표지 느낌). 반응형 그리드. */
.bp-report-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.bp-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.125rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.bp-stat-icon {
  color: var(--primary-600);
  margin-bottom: 0.25rem;
}

.dark .bp-stat-icon {
  color: var(--primary-300);
}

.bp-stat-value {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--heading-color);
  font-variant-numeric: tabular-nums;
}

.bp-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
}

/* ── 섹션 바로가기 목차(ToC) ─────────────────────────────────────────────
   긴 세로 리포트에서 원하는 섹션으로 바로 점프. .main-header(sticky, height 56px,
   z-index 30) 바로 아래에 sticky로 붙어 스크롤 내내 접근 가능하게 한다. */
.bp-report-nav {
  position: sticky;
  top: var(--header-height, 56px);
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  margin-top: 1.25rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.bp-report-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.bp-report-nav-item:hover {
  background: var(--bg-secondary);
  color: var(--heading-color);
  border-color: var(--border-color);
}

.bp-report-nav-num {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--primary-600);
  font-variant-numeric: tabular-nums;
}

.dark .bp-report-nav-num {
  color: var(--primary-300);
}

/* 앵커로 점프할 때 sticky 헤더(56px) + ToC(약 52px)에 섹션 제목이 가려지지 않도록.
   scroll-behavior: smooth는 html 전역에 두면 앱 전체에 영향을 줘 여기서는 쓰지 않는다
   (부드러운 스크롤이 필요하면 Blueprint 범위 JS로만 처리). 즉시 점프도 기능상 정상. */
.bp-report-section {
  scroll-margin-top: 120px;
}

@media (max-width: 720px) {
  /* 모바일에서는 목차가 접히지 않고 가로 스크롤되도록(높이 폭주 방지). */
  .bp-report-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bp-report-nav-item {
    flex-shrink: 0;
  }
}

/* ── 생산 자산 개별 생성 목록(C3, 2026-07-16) ────────────────────────────── */
.bp-engine-list {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
}

.bp-engine-hint {
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}

.bp-engine-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.bp-engine-row + .bp-engine-row {
  margin-top: 0.5rem;
}

.bp-engine-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--heading-color);
}

.bp-engine-status {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}

.bp-engine-status.is-done {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.dark .bp-engine-status.is-done {
  color: #4ade80;
}

.bp-engine-status.is-progress {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.dark .bp-engine-status.is-progress {
  color: #93c5fd;
}

/* 벌크 승인에만 포함되는 항목(퍼널 콘텐츠 완성) — 개별 생성 버튼이 없는 정보성 배지라
   성공(초록)·진행(파랑)이 아닌 중립 톤. 토큰을 써서 다크모드는 자동 대응(2026-07-17). */
.bp-engine-status.is-bulk {
  background: var(--bg-secondary);
  color: var(--text-muted);
  font-weight: 500;
}

/* ── 리포트 가독성 강조(2026-07-19) ──────────────────────────────────────
   사용자 피드백: 리포트가 "그냥 텍스트 같은 느낌"이라 핵심 수치가 문장에 묻힌다.
   emphasis.js가 규칙 기반으로 감싼 <span>에 시각 위계를 준다.

   ⚠️ 색상 사용 원칙: 여기서 쓰는 색은 "수치 종류" 구분용이 아니라 **가독성(눈에 띄기)**
   목적이므로 의미가 겹치지 않게 톤을 절제한다. 특히 초록/노랑/빨강은 향후 신뢰도 배지
   (verified/estimated/unverified) 전용으로 예약돼 있어(스펙 §3.2) 여기서 쓰지 않는다.
   → 수치 강조는 전부 잉크색 굵기 + primary 계열 한 가지로만 처리한다. */
.bp-em-money,
.bp-em-rate,
.bp-em-period,
.bp-em-count {
  font-weight: 700;
  color: var(--heading-color, var(--text-primary));
  font-variant-numeric: tabular-nums;
}

/* 금액·비율은 설득의 핵심 수치라 한 단계 더 눈에 띄게 — primary 계열 잉크.
   배경 하이라이트는 문장 흐름을 끊어 장문 리포트에서 오히려 피로하므로 쓰지 않는다. */
.bp-em-money,
.bp-em-rate {
  color: var(--primary-700);
}

/* ⚠️ --primary-700은 dark_mode.css에서 재정의되지 않는 라이트 기준 고정값이라, 다크모드에서
   그대로 두면 어두운 배경 위 남색이 되어 대비가 부족하다(2026-07-19 실측 확인).
   --heading-color처럼 자동 전환되는 토큰과 달리 명시적 오버라이드가 필요하다.
   프로젝트 관례(dark_mode.css: --primary-color→--primary-400, --sidebar-active-text→
   --primary-300)를 따라 밝은 계열로 바꾼다. */
.dark .bp-em-money,
.dark .bp-em-rate {
  color: var(--primary-300);
}

/* 저데이터 값(확인 필요·데이터 부족)은 강조가 아니라 "덜 확정적"으로 보여야 한다.
   기존 .bp-field-low-data와 같은 시각 언어를 유지한다. */
.bp-field-value .bp-em-money,
.bp-field-value .bp-em-rate,
.bp-field-value .bp-em-period,
.bp-field-value .bp-em-count {
  letter-spacing: -0.01em;
}

.bp-field-low-data .bp-em-money,
.bp-field-low-data .bp-em-rate,
.bp-field-low-data .bp-em-period,
.bp-field-low-data .bp-em-count {
  color: inherit;
  font-weight: 600;
  opacity: 0.75;
}

/* ── 구조적 위계(2026-07-19) ────────────────────────────────────────────
   색상보다 타이포·간격으로 읽는 순서를 만든다. 리스트 항목이 빽빽해 스캔이 안 되던 문제. */
.bp-report-section .bp-list-item {
  line-height: 1.65;
}

.bp-report-section .bp-list-item + .bp-list-item {
  margin-top: 0.4rem;
}

/* 필드 값의 첫 문장이 핵심인 경우가 많아 행간을 살짝 넓혀 읽기 부담을 낮춘다. */
.bp-report-section .bp-field-value {
  line-height: 1.65;
}

/* ── 아직 만들지 않은 자산(2026-07-19 제안형 ②) ──────────────────────────
   리포트 각 섹션 안에서 "이건 아직 없습니다 → 여기서 만드세요"를 보여준다.
   이미 만든 자산 행(.bp-artifact-row)과 시각적으로 구분되어야 하므로 점선 테두리로
   "비어 있음"을 표현한다(채워진 카드 = 있는 것, 점선 = 없는 것). */
.bp-pending-assets {
  margin-top: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
}

.bp-pending-lead {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.625rem;
}

.bp-pending-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

.bp-pending-row + .bp-pending-row {
  border-top: 1px solid var(--border-color);
}

.bp-pending-info {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.bp-pending-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--heading-color, var(--text-primary));
}

.bp-pending-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* 모바일: 이름과 버튼이 좁은 폭에서 겹치지 않게 세로로 쌓는다. */
@media (max-width: 480px) {
  .bp-pending-row {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ── 리포트 상단 고정 액션바 + 확정 진행률(2026-07-20, 목업 §3.1/§3.3) ────
   긴 리포트 어디서든 PDF·공유에 접근하고, 미확정 개수를 상시 확인한다.
   ⚠️ ToC(.bp-report-nav)가 이미 top:56px에 sticky다. 액션바가 그 위에 겹치면
   둘 다 못 읽으므로 액션바는 sticky 없이 리포트 최상단에 고정 배치한다. */
.bp-report-actionbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.625rem 0.875rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
}

.bp-actionbar-notice {
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.bp-actionbar-notice strong {
  color: var(--primary-700);
  font-weight: 800;
}

.dark .bp-actionbar-notice strong {
  color: var(--primary-300);
}

.bp-actionbar-notice.is-done {
  color: var(--text-secondary);
}

.bp-actionbar-buttons {
  margin-left: auto;
  display: flex;
  gap: 0.5rem;
}

/* 확정 진행 바 */
.bp-confirm-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg, #fff);
}

.bp-confirm-label,
.bp-confirm-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bp-progress-bar {
  flex: 1;
  min-width: 120px;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-secondary);
  overflow: hidden;
}

/* 진행 바는 브랜드 계열 단색. 초록/노랑/빨강은 신뢰도 배지 전용으로 예약(스펙 §3.2). */
.bp-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary-500, #6366f1), var(--primary-700, #4338ca));
  transition: width 0.3s ease;
}

@media (max-width: 480px) {
  .bp-actionbar-buttons {
    margin-left: 0;
    width: 100%;
  }
}

/* ── 섹션 상하 여백(2026-07-20, 사용자 요청) ──────────────────────────────
   리포트·승인 화면의 섹션들이 서로 붙어 있어 경계가 흐렸다.
   최초 20px로 넣었으나 "너무 넓다"는 피드백으로 10px로 축소(2026-07-20).

   ⚠️ 부모 .bp-report는 display:flex다 — **flex 컨테이너 안에서는 margin collapsing이
   일어나지 않는다**. margin-bottom:10px + margin-top:10px으로 주면 병합되지 않고
   그대로 더해져 20px이 된다(실측으로 확인: 값은 10/10인데 간격은 20px).
   그래서 margin을 이중으로 주지 않고 gap으로 한 번만 지정한다. */
.bp-report {
  gap: 10px;
}

/* .bp-report-grid/.bp-card 등은 flex 자식이 아니라 margin으로 둔다(여기선 병합이 정상 동작).
 *
 * ⚠️ `.bp-approval-body > .bp-field-section + .bp-field-section`은 **넣으면 안 된다**(제거함).
 * .bp-approval-body는 grid이고 이미 `gap: 1rem`으로 간격을 준다. 인접 형제 margin을 더하면
 * **첫 카드를 뺀 나머지에만** margin-top이 붙어, 같은 행인데도 2번째 카드부터 10px씩
 * 내려앉고 높이가 그만큼 줄어든다(실측: 상품전략 h682 vs 나머지 h672 — 사용자가
 * "상품전략과 우측 박스들의 높이가 맞지 않다"고 지적한 그 현상).
 * 그리드 안에서 간격은 반드시 gap으로만 준다. */
.bp-report-grid + .bp-artifact-rows,
.bp-card + .bp-card {
  margin-top: 10px;
}

/* .bp-report-section의 기본 margin-top(blueprint_report.css의 1.25rem)을 무력화한다.
   남겨두면 위 gap과 합쳐져 다시 30px이 된다. */
.bp-report > .bp-report-section {
  margin-top: 0;
  margin-bottom: 0;
}

/* ── PDF 발행(인쇄) ──────────────────────────────────────────────────────
   "PDF로 저장" 버튼(window.print) 또는 Ctrl+P로 리포트를 깔끔한 문서로 인쇄한다.
   body:has(.bp-shell)로 스코프해 Blueprint 페이지에서만 적용 — 다른 페이지 인쇄에
   영향을 주지 않고, :has() 미지원 브라우저에선 규칙이 적용 안 돼 안전하게 degrade된다.
   앱 크롬(사이드바·헤더·챗봇·목차·버튼)을 숨기고 리포트만 전체 폭으로 보여준다. */
@media print {
  body:has(.bp-shell) .sidebar,
  body:has(.bp-shell) .main-header,
  body:has(.bp-shell) .bp-report-nav,
  body:has(.bp-shell) .bp-report-actions,
  /* 모드 토글은 운영자용 컨트롤이라 고객에게 전달되는 PDF에 남으면 안 된다(2026-07-20). */
  body:has(.bp-shell) .bp-mode-toggle,
  body:has(.bp-shell) .bp-report-actionbar,
  body:has(.bp-shell) #chatbot-widget,
  body:has(.bp-shell) [data-controller~="chatbot"] {
    display: none !important;
  }

  body:has(.bp-shell) .main-content {
    margin-left: 0 !important;
  }

  body:has(.bp-shell) .main-body {
    padding: 0 !important;
  }

  body:has(.bp-shell) .bp-shell {
    max-width: 100% !important;
    gap: 0.5rem !important;
  }

  /* 카드가 페이지 경계에서 잘리지 않게. 밴드/인포그래픽/스탯은 배경색 유지. */
  body:has(.bp-shell) .bp-report-section,
  body:has(.bp-shell) .bp-stat-tile,
  body:has(.bp-shell) .bp-field-section,
  body:has(.bp-shell) .bp-infographic-card {
    break-inside: avoid;
  }

  body:has(.bp-shell) .bp-band,
  body:has(.bp-shell) .bp-infographic-card,
  body:has(.bp-shell) .bp-stat-icon {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}
/* Business Blueprint 공유 모달(2026-07-14, 사용자 요청): 리드마그넷 공유 모달과 동일한
   UX(기간·비밀번호 설정+목록/편집/삭제)를 위해 marketing_docs/_show_styles.html.erb의
   share_modal_controller.js용 스타일을 이식했다. share_modal_controller.js 자체는 리드마그넷도
   쓰는 공유 코드라 수정하지 않고(보호 대상), 여기서 그 컨트롤러가 기대하는 클래스명에 CSS만
   공급한다. 구버전은 하드코딩 hex+.dark 클래스 오버라이드였지만, 여기서는 base.css 토큰만
   써서 라이트/다크 자동 대응(Blueprint 기존 컨벤션 유지).

   .modal-overlay/.modal-content/.modal-header/.modal-body/.modal-footer는 이미
   traffic_engine_modal.css(.modal/.modal-content 등)가 전역으로 쓰고 있어 이름이 겹친다 —
   .bp-share-modal* 로 새로 스코프해 두 모달이 같은 페이지(Blueprint 리포트)에 공존해도
   서로 침범하지 않게 한다. */

.bp-share-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.bp-share-modal.hidden {
  display: none;
}

.bp-share-modal-panel {
  background: var(--card-bg, #fff);
  border-radius: var(--radius-lg, 12px);
  width: 100%;
  max-width: 450px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-color);
}

.bp-share-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.bp-share-modal-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin: 0;
}

.bp-share-modal-body {
  padding: 1.25rem;
}

.bp-share-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border-color);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-lg, 12px) var(--radius-lg, 12px);
}

.share-empty-state {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.share-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
}

/* 토글 스위치 */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-color);
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background: var(--accent-400, #fbbf24);
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* E3(2026-07-16): 공유 범위 선택 라디오(간단 요약 / 세부 블루프린트) */
.bp-scope-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  cursor: pointer;
  background: var(--card-bg, #fff);
}

.bp-scope-option + .bp-scope-option {
  margin-top: 0.45rem;
}

.bp-scope-option input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.bp-scope-option strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--heading-color);
}

.bp-scope-option em {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.75rem;
  font-style: normal;
  color: var(--text-secondary);
  line-height: 1.45;
}

.bp-scope-option:has(input:checked) {
  border-color: var(--primary-400, #818cf8);
  background: var(--bg-secondary);
}

/* 생성 옵션 섹션(비밀번호/만료일) */
.share-option-section {
  padding: 1rem;
  background: var(--bg-secondary);
  border-radius: var(--radius-md, 8px);
  margin-bottom: 1rem;
  border: 1px solid var(--border-color);
}

.share-option-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.share-option-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--heading-color);
}

.share-option-input {
  margin-top: 0.75rem;
}

.share-option-input .form-input {
  width: 100%;
  margin-bottom: 0.35rem;
}

.new-share-form {
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
  margin-top: 1rem;
}

.new-share-form h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--heading-color);
  margin: 0 0 1rem;
}

/* 기존 공유 링크 목록 */
.shares-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  max-height: 300px;
  overflow-y: auto;
}

.share-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1rem;
}

.share-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
}

.share-status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}

.share-status.active {
  background: rgba(34, 197, 94, 0.15);
  color: #16a34a;
}

.share-status.inactive {
  background: var(--border-color);
  color: var(--text-secondary);
}

.share-item-actions {
  display: flex;
  gap: 0.25rem;
}

.share-item-url {
  margin-bottom: 0.5rem;
}

.share-item-url .form-input {
  font-size: 0.8rem;
  padding: 0.5rem 0.75rem;
}

.share-item-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.share-meta-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

/* 공유 인라인 편집 패널 */
.share-edit-panel {
  margin-top: 12px;
  padding: 14px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.share-edit-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.share-edit-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.share-edit-input {
  font-size: 13px;
  padding: 6px 10px;
  height: auto;
}

.share-edit-actions {
  display: flex;
  gap: 8px;
}

/* 버튼 보조 클래스(share_modal_controller.js 전용). .btn-sm은 components.css에 이미
   전역 정의가 있어(다른 화면 다수가 사용 중) 여기서 재정의하지 않는다 — 재정의 시 로드
   순서상(blueprint_share_modal이 components보다 뒤) 그 전역 크기를 덮어써 버튼 크기가
   프로젝트 전역에서 바뀌는 회귀가 생긴다(2026-07-14 배포 전 발견·제거). */
.btn-icon {
  padding: 0.4rem;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.btn-danger-ghost {
  color: #ef4444;
}

.btn-danger-ghost:hover {
  background: rgba(239, 68, 68, 0.1);
}
/* 리포트 본문 문서 서식(2026-07-20, 사용자 요청).
 *
 * 요청: "리스트나 볼드, 테이블 등을 이용해 웹사이트 또는 ppt처럼 만들어서 신뢰를 주는 디자인"
 * — 리서치 결과·블루프린트 양쪽. rich_text.js가 뱉는 .bp-rt 하위 요소를 문서처럼 조판한다.
 *
 * ⚠️ 토큰만 쓴다(하드코딩 색상 금지). --heading-color/--card-bg/--border-color/--bg-secondary는
 * dark_mode.css에서 재정의되므로 다크모드가 자동으로 따라온다. 반면 --primary-700은
 * 다크에서 재정의되지 않아 어두운 배경 위에 진한 인디고가 남는다 — 본문 색으로 쓰지 않는다.
 */

/* 블록 사이 리듬. 문단이 뭉쳐 "텍스트 덩어리"로 보이던 것이 이번 지적의 핵심이라
 * 여백을 넉넉히 준다. 첫/마지막 요소의 바깥 여백은 죽여 컨테이너 정렬을 지킨다. */
.bp-rt > * {
  margin-top: 0.85em;
  margin-bottom: 0;
}

.bp-rt > *:first-child {
  margin-top: 0;
}

.bp-rt-para {
  line-height: 1.75;
  color: var(--text-color);
  word-break: keep-all; /* 한글은 어절 단위로 끊어야 읽기 쉽다 */
}

/* ── 제목 ──────────────────────────────────────────────────────────────
 * 좌측 컬러 바 + 굵은 글자. ppt 슬라이드 소제목의 시각 언어. */
/* 2026-07-20: 헤딩이 본문과 크기 차이가 거의 없어 "제목"으로 안 읽혔다.
   크기·굵기를 올리고 좌측 바를 굵게 해 위계를 분명히 한다. */
.bp-rt-heading {
  margin-top: 1.4em;
  font-size: 1.0625em;
  font-weight: 800;
  color: var(--heading-color);
  line-height: 1.4;
  padding-left: 0.65em;
  border-left: 4px solid var(--primary-500);
  letter-spacing: -0.01em;
}

/* ── 목록 ──────────────────────────────────────────────────────────────
 * 기본 마커 대신 커스텀 불릿을 써서 들여쓰기를 일정하게 잡는다. */
.bp-rt-list {
  padding-left: 0;
  list-style: none;
}

.bp-rt-list > li {
  position: relative;
  padding-left: 1.25em;
  margin-top: 0.45em;
  line-height: 1.7;
  color: var(--text-color);
  word-break: keep-all;
}

.bp-rt-list > li:first-child {
  margin-top: 0;
}

ul.bp-rt-list > li::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary-color);
}

/* 번호 목록 — CSS 카운터로 번호를 그려 마커 색을 제어한다 */
ol.bp-rt-list {
  counter-reset: bp-rt-num;
}

ol.bp-rt-list > li {
  padding-left: 1.75em;
  counter-increment: bp-rt-num;
}

ol.bp-rt-list > li::before {
  content: counter(bp-rt-num) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--primary-color);
}

/* ── 표 ────────────────────────────────────────────────────────────────
 * ⚠️ 넓은 표가 body 가로 스크롤을 만들지 않도록 자체 스크롤 컨테이너 안에 둔다
 * (375px 오버플로는 이 프로젝트의 반복 회귀 지점). */
.bp-rt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--card-bg);
}

.bp-rt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92em;
}

.bp-rt-table th,
.bp-rt-table td {
  padding: 0.6em 0.85em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.6;
  word-break: keep-all;
}

.bp-rt-table thead th {
  background: var(--bg-secondary);
  color: var(--heading-color);
  font-weight: 700;
  white-space: nowrap; /* 헤더는 접히면 표가 읽기 어렵다 — 대신 컨테이너가 스크롤된다 */
}

.bp-rt-table tbody tr:last-child td {
  border-bottom: none;
}

/* ── 인용 ────────────────────────────────────────────────────────────── */
.bp-rt-quote {
  margin-left: 0;
  padding: 0.7em 1em;
  border-left: 3px solid var(--primary-color);
  background: var(--bg-secondary);
  border-radius: 0 8px 8px 0;
  color: var(--text-secondary);
  line-height: 1.7;
  word-break: keep-all;
}

/* ── 인라인 ────────────────────────────────────────────────────────────
 * 2026-07-20(사용자 지적: "볼드가 약해서 가독성이 떨어진다"):
 * 기존은 weight 700 + --heading-color뿐이라, 0.875rem 본문에서 일반 텍스트와
 * 구분이 거의 안 됐다(라이트 모드 #334155 vs #0f172a — 작은 글자에선 미미).
 * 굵기를 800으로 올리고 아주 옅은 형광펜 배경을 깔아 "강조"임이 즉시 보이게 한다.
 * 색을 바꾸지 않는 이유: 수치 강조(.bp-metric)와 색으로 경쟁하면 위계가 무너진다. */
.bp-rt strong {
  font-weight: 800;
  color: var(--heading-color);
  background: linear-gradient(transparent 62%, var(--primary-100, rgba(99, 102, 241, 0.18)) 62%);
  padding: 0 0.1em;
  border-radius: 2px;
}

.dark .bp-rt strong {
  background: linear-gradient(transparent 62%, rgba(129, 140, 248, 0.28) 62%);
}

.bp-rt code {
  padding: 0.1em 0.4em;
  border-radius: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: 0.9em;
}

/* 라벨-값 필드 안에서 쓰일 때는 값 영역이 블록이 되므로 라벨과 세로로 쌓인다.
 * 한 줄짜리 평문일 때 기존과 같은 인라인 느낌을 유지하려면 문단 여백이 없어야 한다. */
.bp-field-value.bp-rt > .bp-rt-para:only-child {
  margin: 0;
}

@media (max-width: 640px) {
  .bp-rt-table {
    font-size: 0.86em;
  }

  .bp-rt-table th,
  .bp-rt-table td {
    padding: 0.5em 0.6em;
  }
}

/* ── 진단 근거 사이트 표시(2026-07-20) ──────────────────────────────────
 * 사용자 지적: "마케팅 경쟁력 시각화는 어떤 사이트 기준인지 알 수가 없다".
 * 추정값(is-estimated)일 때는 톤을 낮춰 "측정된 사실"처럼 보이지 않게 한다. */
.bp-diagnosis-source {
  margin-top: 0.9rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  background: var(--bg-secondary);
  border-left: 3px solid var(--primary-color);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}

.bp-diagnosis-source strong {
  color: var(--heading-color);
  font-weight: 700;
}

/* 추정값은 경고 톤 — 측정값과 시각적으로 구분되어야 오해가 없다 */
.bp-diagnosis-source.is-estimated {
  border-left-color: var(--warning-color, #f59e0b);
}
/* Business Blueprint — 타겟(SEW) 섹션·후보 선택.
   blueprint_polish.css가 500줄 제한(CLAUDE.md)을 넘어 분리(2026-07-20).
   내용은 원본 그대로 이동했다(규칙 변경 없음). */

/* ── 타겟(SEW) 섹션(2026-07-20) ──────────────────────────────────────────
   퍼널 카드 맨 위에 "누구를 위한 퍼널인가"를 보여준다. 리서치가 뽑은 SEW가 퍼널 콘텐츠의
   출발점인데 화면 어디에도 안 보여 사용자가 "SEW가 안 넘어간다"고 느꼈다.
   CLAUDE.md SEW 불변 규칙: 카드에는 상황·욕구·감정 3개 라벨만(S·E·W 문자 라벨 금지). */
.bp-sew-section {
  border-top-color: var(--primary-500, var(--primary-300));
}

.bp-sew-flow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.bp-sew-from,
.bp-sew-to {
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
}

/* 결핍(현재) → 도달(목표)의 방향성을 색으로 구분. 신뢰도 배지용 색(초록/노랑/빨강)과
   겹치지 않도록 중립 톤과 primary 계열만 쓴다. */
.bp-sew-from {
  background: var(--bg-secondary);
  color: var(--text-secondary);
}

.bp-sew-to {
  background: var(--primary-50, rgba(99, 102, 241, 0.12));
  color: var(--primary-700);
}

.dark .bp-sew-to {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary-300);
}

.bp-sew-arrow {
  color: var(--text-muted, var(--text-secondary));
  font-weight: 700;
}

/* ── SEW 타겟 후보 선택(2026-07-20) ──────────────────────────────────────
   리서치 검토 화면에서 타겟을 고른다. 라디오처럼 하나만 선택되지만, 카드가 커서
   실제 <input type=radio> 대신 button+aria-pressed로 구현했다(접근성 유지). */
/* 2026-07-20(사용자 요청): "리서치 단계에서 두 섹션 간격에 마진을 줄 것".
   ⚠️ 타겟 선택 카드는 `.bp-research-body`(그리드) **바깥의 형제**다 — 그리드의 gap은
   자식 사이에만 적용되므로 이 자리만 간격이 0이었다(실측 0px, 그 다음 블록은 20px).
   뒤따르는 블록들과 같은 리듬(20px)으로 맞춘다. */
.bp-research-body + .bp-sew-picker {
  margin-top: 20px;
}

.bp-sew-picker-lead {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

.bp-sew-candidates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0.625rem;
}

.bp-sew-candidate {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  text-align: left;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.bp-sew-candidate:hover {
  border-color: var(--primary-400, var(--primary-300));
}

/* 선택된 후보는 테두리 + 좌측 강조. 배경 채움은 텍스트 대비를 떨어뜨려 쓰지 않는다. */
.bp-sew-candidate.is-selected {
  border-color: var(--primary-500, var(--primary-700));
  box-shadow: inset 3px 0 0 var(--primary-500, var(--primary-700));
}

.bp-sew-candidate-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.bp-sew-chosen {
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--primary-50, rgba(99, 102, 241, 0.12));
  color: var(--primary-700);
}

.dark .bp-sew-chosen {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary-300);
}

.bp-sew-candidate-situation {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--heading-color, var(--text-primary));
  line-height: 1.5;
}

.bp-sew-candidate-want {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ── 후보 더 보기 + 단일선택 안내(2026-07-20, 사용자 보고) ─────────────────
   "더보기 버튼이 딱 붙어있고 제대로 보이지 않는다" — 이 두 클래스에 CSS가 아예 없어
   컨테이너가 display:block으로 남았다. 실측: 후보 그리드와 버튼 간격 0px, 버튼과 안내문
   간격 3px에 같은 줄 → 975px짜리 긴 경고 문구가 버튼 옆구리에 흘러붙어 있었다.
   버튼을 자기 줄로 올리고, 안내는 아래 별도 블록으로 분리한다. */
.bp-sew-picker-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-color);
}

/* 버튼이 flex 아이템으로 늘어나지 않게 고정(align-items:flex-start와 함께). */
.bp-sew-picker-actions [data-expand-sew] {
  flex: 0 0 auto;
}

/* 안내문은 "경고"가 아니라 "설명"이라 경고색(빨강/노랑)을 쓰지 않는다 —
   신뢰도 배지 색 체계와 겹치면 의미가 충돌한다. 중립 톤 + 좌측 바로만 구분한다. */
.bp-sew-picker-note {
  display: block;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-secondary);
  padding-left: 0.625rem;
  border-left: 2px solid var(--border-color);
  word-break: keep-all;
}

.bp-sew-picker-note b {
  color: var(--heading-color);
  font-weight: 700;
}
/* Business Blueprint — 근거 신뢰도 배지 · 경쟁사 정량 비교표.
   blueprint_polish.css가 500줄 제한(CLAUDE.md)을 넘어 분리(2026-07-20).
   내용은 원본 그대로 이동했다(규칙 변경 없음). */

/* ── 근거 신뢰도 배지(2026-07-20, 목업 §2 · 스펙 §3.2) ────────────────────
   ⚠️ 초록·노랑·빨강은 **이 배지 전용**이다. 점수 게이지·진행 바에 같은 색을 쓰면
   "실측 35점이 빨강 = 검증 필요"로 오독되어 범례와 충돌한다. 그래서 이 프로젝트의
   다른 지표(수치 강조·진행 바·게이지)는 전부 primary 단색 계열만 쓴다. */
.bp-trust {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 800;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
  cursor: help;
}

.bp-trust-verified {
  background: rgba(16, 185, 129, 0.14);
  color: #047857;
}

/* estimated는 점선 테두리로 "확정되지 않음"을 형태로도 표현한다(색맹 대응). */
.bp-trust-estimated {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border: 1px dashed rgba(180, 83, 9, 0.5);
}

.bp-trust-unverified {
  background: rgba(239, 68, 68, 0.14);
  color: #b91c1c;
}

.dark .bp-trust-verified {
  background: rgba(16, 185, 129, 0.22);
  color: #6ee7b7;
}

.dark .bp-trust-estimated {
  background: rgba(245, 158, 11, 0.22);
  color: #fcd34d;
  border-color: rgba(252, 211, 77, 0.5);
}

.dark .bp-trust-unverified {
  background: rgba(239, 68, 68, 0.22);
  color: #fca5a5;
}

/* 범례 — 배지가 무엇을 뜻하는지 리포트에서 한 번은 설명한다. */
.bp-trust-legend {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  flex-wrap: wrap;
  padding: 0.5rem 0.875rem;
  margin-bottom: 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.bp-trust-legend-label {
  font-weight: 800;
  color: var(--heading-color, var(--text-primary));
}

.bp-trust-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.bp-trust-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* 빌드/고객 제시 모드 토글(스펙 §9.1) */
.bp-mode-toggle {
  margin-left: auto;
  display: inline-flex;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}

.bp-mode-btn {
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.25rem 0.625rem;
  cursor: pointer;
}

.bp-mode-btn.is-active {
  background: var(--primary-700);
  color: #fff;
}

.dark .bp-mode-btn.is-active {
  background: var(--primary-500, #6366f1);
}

/* 고객 제시 모드일 때 범례 자체를 눈에 덜 띄게 — 이 줄은 운영자용 컨트롤이다. */
.bp-trust-legend.is-presentation {
  border-style: dashed;
}

.bp-mode-notice {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* ── 경쟁사 정량 비교표(2026-07-20, 목업 §3.4) ──────────────────────────
   빈 셀을 숨기지 않는 것이 이 표의 존재 이유다 — "확인 필요"를 정직하게 노출해
   무엇을 더 조사해야 하는지 드러낸다. */
.bp-cmp-lead {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 0.75rem;
}

/* 경쟁사가 많으면 열이 늘어나므로 표만 가로 스크롤(페이지 본문은 넘치지 않게). */
.bp-cmp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.bp-cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  min-width: 420px;
}

.bp-cmp-table th,
.bp-cmp-table td {
  text-align: left;
  padding: 0.5rem 0.625rem;
  border-bottom: 1px solid var(--border-color);
  vertical-align: top;
}

.bp-cmp-table th {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  white-space: nowrap;
}

.bp-cmp-axis {
  font-weight: 700;
  color: var(--heading-color, var(--text-primary));
  white-space: nowrap;
}

/* 우리 열은 비교의 기준이라 강조 — primary 계열(신뢰도 색과 겹치지 않게). */
.bp-cmp-table td.bp-cmp-self {
  font-weight: 700;
  color: var(--primary-700);
}

.dark .bp-cmp-table td.bp-cmp-self {
  color: var(--primary-300);
}

.bp-cmp-cell.is-missing {
  color: var(--text-secondary);
}

.bp-cmp-cell.is-muted {
  color: var(--text-secondary);
  opacity: 0.6;
}

.bp-trust-dot-verified { background: #10b981; }
.bp-trust-dot-estimated { background: #f59e0b; }
.bp-trust-dot-unverified { background: #ef4444; }
/* Business Blueprint — 온보딩 5단계 마법사(강점 AI 제안·다중 URL·파일 업로드 포함).
   blueprint_polish.css가 500줄 제한(CLAUDE.md)을 넘어 분리(2026-07-20).
   내용은 원본 그대로 이동했다(규칙 변경 없음). */

/* ── 온보딩 5단계 마법사(2026-07-20, 목업 onboarding_mockup · 스펙 §4) ──────
   11개 필드를 한 화면에 쏟던 것을 단계별로 나눈다. 한 화면에는 현재 단계만 보인다. */
.bp-wiz-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.bp-wiz-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bp-wiz-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.6875rem;
  font-weight: 800;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}

.bp-wiz-step.is-current .bp-wiz-dot {
  background: var(--primary-700);
  color: #fff;
  border-color: var(--primary-700);
}

.bp-wiz-step.is-current {
  color: var(--heading-color, var(--text-primary));
  font-weight: 700;
}

.bp-wiz-step.is-done .bp-wiz-dot {
  background: var(--primary-50, rgba(99, 102, 241, 0.12));
  color: var(--primary-700);
  border-color: var(--primary-300, var(--border-color));
}

.dark .bp-wiz-step.is-current .bp-wiz-dot {
  background: var(--primary-500, #6366f1);
  border-color: var(--primary-500, #6366f1);
}

.dark .bp-wiz-step.is-done .bp-wiz-dot {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary-300);
}

.bp-wiz-line {
  flex: 1;
  min-width: 12px;
  height: 1px;
  background: var(--border-color);
  margin: 0 0.5rem;
}

.bp-wiz-count {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.bp-wiz-lead {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin-bottom: 1rem;
  grid-column: 1 / -1;
}

.bp-wiz-hint {
  display: block;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.bp-wiz-group {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
}

.bp-wiz-group-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--heading-color, var(--text-primary));
  margin-bottom: 0.5rem;
}

/* 선택지는 칩 형태 — 라디오·체크박스 원형 대신 누르기 쉬운 넓은 타깃. */
.bp-wiz-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.bp-wiz-option {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.8125rem;
  cursor: pointer;
  background: var(--card-bg, #fff);
  transition: border-color 0.15s, background 0.15s;
}

.bp-wiz-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.bp-wiz-option:hover {
  border-color: var(--primary-400, var(--primary-300));
}

.bp-wiz-option.is-selected {
  border-color: var(--primary-700);
  background: var(--primary-50, rgba(99, 102, 241, 0.12));
  color: var(--primary-700);
  font-weight: 700;
}

.dark .bp-wiz-option.is-selected {
  background: rgba(99, 102, 241, 0.2);
  color: var(--primary-300);
  border-color: var(--primary-500, #6366f1);
}

/* "기타: 직접 입력"(2026-07-21). pill 안에 텍스트 입력을 함께 둔다 — 라디오/체크박스는
   위 규칙대로 계속 숨기되(선택 메커니즘), 직접 입력란만 되살려 보이게 한다. */
.bp-wiz-option-other {
  gap: 0.35rem;
}

/* `.bp-wiz-option input`(특이성 0,1,1)이 텍스트 입력을 숨기므로 그보다 높은 선택자로 되살린다. */
.bp-wiz-option input.bp-wiz-other-input {
  position: static;
  opacity: 1;
  width: auto;
  height: auto;
  min-width: 7rem;
  border: none;
  border-bottom: 1px solid var(--border-color);
  background: transparent;
  font-size: 0.8125rem;
  color: inherit;
  padding: 0.05rem 0.15rem;
  outline: none;
}

.bp-wiz-option input.bp-wiz-other-input:focus {
  border-bottom-color: var(--primary-500, #6366f1);
}

.bp-wiz-roi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
}

/* ── 금액 입력 해석 힌트(2026-07-20, 사용자 보고) ──────────────────────────
   "190만원인데 손익분기가 190원으로 나온다" — 자유 텍스트에서 단위 없는 숫자는
   모호한데 화면이 아무 피드백을 주지 않아, 손익분기가 나올 때까지 몰랐다.
   입력 즉시 "우리가 이렇게 읽었다"를 보여줘 그 자리에서 잡게 한다. */
.bp-money-field {
  display: flex;
  flex-direction: column;
}

.bp-money-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--primary-700);
  font-variant-numeric: tabular-nums;
}

.dark .bp-money-hint {
  color: var(--primary-300);
}

/* 단위를 빠뜨렸을 가능성이 높을 때 — 단정하지 않고 되묻는 톤 */
.bp-money-hint.is-warn {
  color: #b45309;
  font-weight: 600;
}

.dark .bp-money-hint.is-warn {
  color: #fcd34d;
}

.bp-money-hint.is-bad {
  color: #b91c1c;
  font-weight: 600;
}

.dark .bp-money-hint.is-bad {
  color: #fca5a5;
}

/* ── 리서치 강도(2026-07-20, 사용자 요청) ─────────────────────────────────
   "리서치 강도를 설정하는 옵션을 두되 비용에 대한 것을 명시" — 비용을 카드 안에
   함께 넣어, 고르는 순간 대가를 알 수 있게 한다. */
.bp-wiz-intensity {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 0.5rem;
}

.bp-wiz-int {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  padding: 0.75rem 0.875rem;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg, #fff);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s;
}

.bp-wiz-int:hover {
  border-color: var(--primary-400, var(--primary-300));
}

.bp-wiz-int.is-selected {
  border-color: var(--primary-500);
  box-shadow: inset 3px 0 0 var(--primary-500);
}

.bp-wiz-int-label {
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--heading-color);
}

.bp-wiz-int-desc {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: keep-all;
}

/* 비용은 눈에 띄되 경고색은 아니다 — 정보이지 위험이 아니다 */
.bp-wiz-int-cost {
  margin-top: 0.2rem;
  padding: 0.0625rem 0.45rem;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-color);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.bp-wiz-credit,
.bp-wiz-required {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin-top: 0.5rem;
}

/* 2026-07-20: 크레딧 안내를 "지금 비용 / 전체 비용 / 보유"로 나눠 표시하면서 블록화.
   숫자는 본문보다 진하게 해 스캔되게 한다. */
.bp-wiz-credit {
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background: var(--bg-secondary);
  line-height: 1.6;
}

.bp-wiz-credit b {
  color: var(--heading-color);
  font-weight: 700;
}

.bp-wiz-credit-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.6875rem;
  opacity: 0.85;
  word-break: keep-all;
}

/* ── 강점 AI 제안(2026-07-20, 사용자 요청) ───────────────────────────────
   목업 설계원칙의 "제안 우선" — 빈 칸 대신 후보를 먼저 보여준다. */
.bp-wiz-suggest {
  grid-column: 1 / -1;
  margin: 0.5rem 0 1rem;
  padding: 0.75rem 0.875rem;
  border: 1px dashed var(--primary-300, var(--border-color));
  border-radius: 10px;
  background: var(--primary-50, rgba(99, 102, 241, 0.06));
}

.dark .bp-wiz-suggest {
  background: rgba(99, 102, 241, 0.1);
}

.bp-wiz-suggest-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--primary-700);
  margin-bottom: 0.5rem;
}

.dark .bp-wiz-suggest-label {
  color: var(--primary-300);
}

/* 제안 칩은 button이라 기본 스타일을 지운다(라벨 칩과 시각적으로 동일하게). */
.bp-wiz-chip {
  border: 1px dashed var(--primary-300, var(--border-color));
  background: var(--card-bg, #fff);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8125rem;
}

/* ── 다중 URL(스펙 §8.2) ─────────────────────────────────────────────── */
.bp-wiz-site-row {
  display: grid;
  grid-template-columns: 1fr 130px 32px;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.bp-wiz-site-del {
  border: 1px solid var(--border-color);
  background: var(--card-bg, #fff);
  color: var(--text-secondary);
  border-radius: 8px;
  height: 32px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}

.bp-wiz-site-del:hover {
  border-color: var(--error, #ef4444);
  color: var(--error, #ef4444);
}

@media (max-width: 560px) {
  .bp-wiz-site-row {
    grid-template-columns: 1fr 32px;
  }
  .bp-wiz-site-row select {
    grid-column: 1 / -1;
  }
}

/* ── 자료 파일 업로드(스펙 §8.1) ─────────────────────────────────────── */
.bp-wiz-drop {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: center;
  text-align: center;
  padding: 1.25rem;
  border: 2px dashed var(--border-color);
  border-radius: 12px;
  background: var(--bg-secondary);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.bp-wiz-drop:hover,
.bp-wiz-drop.is-over {
  border-color: var(--primary-500, var(--primary-700));
  background: var(--primary-50, rgba(99, 102, 241, 0.08));
}

.dark .bp-wiz-drop:hover,
.dark .bp-wiz-drop.is-over {
  background: var(--accent-bg);
}

.bp-wiz-drop.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

.bp-wiz-files {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.625rem;
}

.bp-wiz-file {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.5rem 0.3rem 0.7rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  font-size: 0.75rem;
  background: var(--card-bg, #fff);
}

.bp-wiz-file-meta {
  color: var(--text-secondary);
  font-size: 0.6875rem;
}
/* 리서치 결과 "웹사이트형" 리포트 스타일(2026-07-20, 사용자 요청).
 *
 * 요청: "html로 웹사이트처럼 더 미려한 디자인 … svg, 테이블, 인포그래픽 등을 더 추가"
 * research_report.js가 뱉는 .bp-rr-* 요소를 잡지/대시보드 조판으로 만든다.
 *
 * ⚠️ 토큰만 쓴다. --primary-700은 dark_mode.css에서 재정의되지 않으므로 어두운 배경 위
 * 본문 색으로 쓰지 않는다(.dark 오버라이드를 따로 둔 곳만 예외).
 * ⚠️ 표는 반드시 자체 스크롤 컨테이너 안에 — 375px 가로 오버플로는 반복 회귀 지점.
 */

/* ── 전체 폭 사용(2026-07-20, 사용자 지적: "우측이 비어 있어서 보기 좋지 않다") ──────
   부모(.bp-research-body)는 `1fr 1fr` 2컬럼이라, 이 블록들이 그냥 놓이면 한 칸(약 533px)만
   차지하고 오른쪽 절반이 통째로 빈다. 기존 .bp-direction/.bp-sources-section이 이미
   같은 이유로 `grid-column: 1 / -1`을 쓰고 있다 — 같은 규칙을 신규 블록에도 적용한다.
   전체 폭을 받으면 지표는 4개가 한 줄에, 인사이트 카드는 2개씩 나란히 들어간다. */
.bp-research-body > .bp-rr-hero,
.bp-research-body > .bp-rr-stats,
.bp-research-body > .bp-rr-cards,
.bp-research-body > .bp-rr-roi,
.bp-research-body > .bp-seo-aeo-section,
.bp-approval-body > .bp-rr-hero,
.bp-approval-body > .bp-rr-stats,
.bp-approval-body > .bp-rr-cards,
.bp-approval-body > .bp-rr-roi,
.bp-approval-body > .bp-seo-aeo-section,
/* 2026-07-20(사용자 요청): "경쟁사 정량비교도 전체 너비로 만들 것" — 표라서 반쪽 폭이면
   열이 짓눌리고 자체 스크롤이 걸린다. 전체 폭을 주면 대부분 스크롤 없이 다 보인다. */
.bp-research-body > .bp-cmp-section,
.bp-approval-body > .bp-cmp-section {
  grid-column: 1 / -1;
}

/* 그리드 안에서 전체 폭이 필요한 임의 요소(설명문 등)에 붙이는 범용 클래스.
   2026-07-20: 생산 자산 설명문이 한 칸을 차지해 카드를 밀어내던 문제 수정. */
.bp-span-full {
  grid-column: 1 / -1;
}

/* ── SEO/AEO 내부 간격(2026-07-20, 사용자 지적) ────────────────────────────
   "공략 추천 키워드 아래 SEO 실행 항목간의 간격이 없으니 간격을 넣을 것".
   키워드 표(.bp-rr-table-wrap)는 .bp-field-section이 아니라, 기존의
   `.bp-field-section + .bp-field-section` 인접 규칙이 걸리지 않아 딱 붙어 있었다. */
.bp-rr-table-wrap + .bp-field-section {
  margin-top: 1.25rem;
}

/* ── 결론 히어로 ──────────────────────────────────────────────────────────
   리포트의 결론이라 다른 섹션과 같은 카드로 두면 묻힌다. 도면 밴드와 같은 시각 언어
   (딥 인디고 + 그리드 라인)를 옅게 재사용해 "표지"임을 알린다. */
.bp-rr-hero {
  position: relative;
  overflow: hidden;
  padding: 1.5rem 1.625rem;
  border-radius: 16px;
  background: var(--primary-50, rgba(99, 102, 241, 0.08));
  border: 1px solid var(--primary-200, rgba(99, 102, 241, 0.25));
  border-left: 4px solid var(--primary-500);
}

.dark .bp-rr-hero {
  background: rgba(99, 102, 241, 0.12);
  border-color: rgba(129, 140, 248, 0.35);
}

.bp-rr-hero-eyebrow {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-700);
  margin-bottom: 0.375rem;
}

.dark .bp-rr-hero-eyebrow {
  color: var(--primary-300);
}

.bp-rr-hero-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--heading-color);
  margin: 0 0 0.75rem;
  line-height: 1.35;
}

.bp-rr-hero-body {
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--text-color);
}

/* ── 핵심 지표 스트립 ─────────────────────────────────────────────────────
   "이 리서치가 무엇을 근거로 하는가"를 숫자로 먼저 보여준다. */
.bp-rr-stats {
  display: grid;
  /* 전체 폭을 받으므로 4타일이 한 줄에 들어간다(기존엔 반쪽 폭이라 3+1로 접혔다). */
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 0.625rem;
}

.bp-rr-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  padding: 0.875rem 1rem;
  border-radius: 12px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
}

.bp-rr-stat-icon {
  display: inline-flex;
  color: var(--primary-500);
  margin-bottom: 0.25rem;
}

.bp-rr-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--heading-color);
  font-variant-numeric: tabular-nums;
}

/* 단위는 숫자보다 작고 옅게 — 숫자가 주인공 */
.bp-rr-stat-value em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-left: 0.125rem;
}

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

/* ── 인사이트 아이콘 카드 ─────────────────────────────────────────────────
   종류별 악센트 색으로 스캔 가능하게. 색은 의미(기회/위험)를 담되 신뢰도 배지의
   초록/노랑/빨강과 정면으로 겹치지 않도록 좌측 바에만 쓴다. */
.bp-rr-cards {
  display: grid;
  /* 사용자 요청: "2개 카드가 나열되는 게 좋겠다" — 전체 폭에서 2열로 배치한다.
     auto-fit + minmax(320px)면 넓은 화면에서 3~4열까지 벌어져 글줄이 짧아지므로
     상한을 2열로 고정한다(읽기 좋은 줄 길이 유지). */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 0.75rem;
}

@media (min-width: 900px) {
  .bp-rr-cards {
    grid-template-columns: 1fr 1fr;
  }
}

.bp-rr-card {
  padding: 1rem 1.125rem;
  border-radius: 12px;
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color);
  border-top: 3px solid var(--primary-300);
}

.bp-rr-card.is-voice { border-top-color: #6366f1; }
.bp-rr-card.is-gap { border-top-color: #0ea5e9; }
.bp-rr-card.is-trend { border-top-color: #10b981; }
.bp-rr-card.is-risk { border-top-color: #f59e0b; }

.bp-rr-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.bp-rr-card-icon {
  display: inline-flex;
  color: var(--primary-600);
}

.bp-rr-card.is-voice .bp-rr-card-icon { color: #6366f1; }
.bp-rr-card.is-gap .bp-rr-card-icon { color: #0ea5e9; }
.bp-rr-card.is-trend .bp-rr-card-icon { color: #10b981; }
.bp-rr-card.is-risk .bp-rr-card-icon { color: #f59e0b; }

.bp-rr-card-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 0.875rem;
  font-weight: 800;
  color: var(--heading-color);
  word-break: keep-all;
}

/* 항목 수 배지 — 분량을 미리 알려 스캔을 돕는다 */
.bp-rr-card-count {
  flex: 0 0 auto;
  min-width: 1.375rem;
  padding: 0.0625rem 0.4rem;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bp-rr-card-hint {
  margin: 0 0 0.625rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  word-break: keep-all;
}

/* ── SEO/AEO 도넛 게이지 ──────────────────────────────────────────────── */
.bp-rr-gauges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 0.875rem;
}

.bp-rr-gauge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
}

.bp-rr-gauge-track {
  stroke: var(--border-color);
}

.bp-rr-gauge-fill {
  stroke: var(--primary-500);
  transition: stroke-dasharray 0.4s ease;
}

/* 점수대별 톤. 낮을수록 주의를 끌되 "실패"로 보이지 않게 한다. */
.bp-rr-gauge.is-good .bp-rr-gauge-fill { stroke: #10b981; }
.bp-rr-gauge.is-mid .bp-rr-gauge-fill { stroke: #f59e0b; }
.bp-rr-gauge.is-low .bp-rr-gauge-fill { stroke: #ef4444; }

.bp-rr-gauge-num {
  font-size: 1.375rem;
  font-weight: 800;
  fill: var(--heading-color);
  font-variant-numeric: tabular-nums;
}

.bp-rr-gauge figcaption {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.bp-rr-gauge-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--heading-color);
}

/* 실측/추정 구분 — 추정을 실측처럼 보이게 두면 신뢰를 잃는다 */
.bp-rr-gauge-basis {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  padding: 0.0625rem 0.375rem;
  border-radius: 999px;
  background: var(--bg-secondary);
  align-self: flex-start;
}

/* ── 키워드 표 ────────────────────────────────────────────────────────── */
.bp-rr-subtitle {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 800;
  color: var(--heading-color);
}

.bp-rr-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--card-bg, #fff);
}

.bp-rr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.bp-rr-table th,
.bp-rr-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-color);
  line-height: 1.55;
}

.bp-rr-table thead th {
  background: var(--bg-secondary);
  color: var(--heading-color);
  font-weight: 700;
  white-space: nowrap;
}

.bp-rr-table tbody tr:last-child td {
  border-bottom: none;
}

.bp-rr-table .bp-rr-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bp-rr-kw {
  font-weight: 700;
  color: var(--heading-color);
  word-break: keep-all;
}

.bp-rr-reason {
  color: var(--text-secondary);
  word-break: keep-all;
}

/* 경쟁도 배지 — 낮음(기회)을 초록으로, 높음(어려움)을 빨강으로 */
.bp-rr-comp {
  display: inline-block;
  padding: 0.0625rem 0.5rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.bp-rr-comp.is-low { background: rgba(16, 185, 129, 0.14); color: #047857; }
.bp-rr-comp.is-medium { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.bp-rr-comp.is-high { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }

.dark .bp-rr-comp.is-low { color: #6ee7b7; }
.dark .bp-rr-comp.is-medium { color: #fcd34d; }
.dark .bp-rr-comp.is-high { color: #fca5a5; }

/* ── 손익분기(ROI) ────────────────────────────────────────────────────── */
.bp-rr-roi-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: 0.875rem;
}

.bp-rr-roi-highlight {
  display: flex;
  flex-direction: column;
}

.bp-rr-roi-num {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--primary-600);
  font-variant-numeric: tabular-nums;
}

.dark .bp-rr-roi-num {
  color: var(--primary-300);
}

.bp-rr-roi-num em {
  font-style: normal;
  font-size: 0.875rem;
  font-weight: 700;
  margin-left: 0.125rem;
}

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

/* 회수 진행 막대 — 첫 달 매출이 초도비용에서 차지하는 비율 */
.bp-rr-roi-bar {
  position: relative;
  height: 28px;
  border-radius: 8px;
  background: var(--bg-secondary);
  overflow: hidden;
  margin-bottom: 0.875rem;
}

.bp-rr-roi-bar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--primary-500), var(--primary-400, var(--primary-500)));
  opacity: 0.35;
}

.bp-rr-roi-bar-text {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 0.75rem;
  font-size: 0.75rem;
  color: var(--text-color);
}

.bp-rr-roi-bar-text b {
  color: var(--heading-color);
  font-weight: 700;
  margin: 0 0.15rem;
}

.bp-rr-roi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.bp-rr-roi-table th,
.bp-rr-roi-table td {
  padding: 0.4rem 0;
  border-top: 1px solid var(--border-color);
  text-align: left;
}

.bp-rr-roi-table tr:first-child th,
.bp-rr-roi-table tr:first-child td {
  border-top: none;
}

.bp-rr-roi-table th {
  font-weight: 500;
  color: var(--text-secondary);
}

.bp-rr-roi-table td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
}

.bp-rr-roi-table td.is-strong {
  font-weight: 700;
  color: var(--heading-color);
}

/* 추정임을 명시 — 변동비 미포함을 안 밝히면 사용자가 확정 수치로 오해한다 */
.bp-rr-roi-note {
  margin: 0.625rem 0 0;
  font-size: 0.6875rem;
  color: var(--text-secondary);
  word-break: keep-all;
}

@media (max-width: 640px) {
  .bp-rr-roi-highlights { gap: 1rem; }
  .bp-rr-roi-num { font-size: 1.5rem; }
  .bp-rr-hero { padding: 1.125rem 1.25rem; }
  .bp-rr-hero-title { font-size: 1.0625rem; }
  .bp-rr-stat-value { font-size: 1.25rem; }
  .bp-rr-gauges { gap: 0.875rem; }
}
/* 손익분기(ROI) 인라인 편집(2026-07-21, 사용자 요청).
 *
 * blueprint_research_report.css가 474줄이라 500줄 규칙에 걸려 별도 파일로 분리했다.
 *
 * ⚠️ 색은 전부 토큰만 쓴다 — 하드코딩하면 다크모드에서 따라오지 않는다.
 * ⚠️ 전역 클래스(.btn-sm 등)를 여기서 재정의하지 않는다. 로드 순서상 components.css를
 *    덮어써 프로젝트 전역 버튼 크기가 바뀐다(2026-07-14 실제로 낼 뻔한 회귀).
 */

/* 제목 줄 오른쪽에 붙는 "수정" — 리포트는 읽는 화면이라 눈에 띄되 주인공은 아니게. */
.bp-rr-roi .bp-field-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.bp-rr-roi-edit-btn {
  flex: none;
  background: none;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 0.2rem 0.6rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.bp-rr-roi-edit-btn:hover {
  color: var(--primary-600);
  border-color: var(--primary-600);
}

.dark .bp-rr-roi-edit-btn:hover {
  color: var(--primary-300);
  border-color: var(--primary-400);
}

/* 편집 영역 — 부모(섹션)와 톤을 분리해야 "지금 입력 중"이 읽힌다.
   card-bg 토큰이라 라이트=흰색, 다크=조금 덜 어두운 회색으로 자동 전환된다. */
.bp-roi-edit {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.bp-roi-edit[hidden] {
  display: none;
}

.bp-roi-edit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.875rem;
}

.bp-roi-edit-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0; /* grid 자식이 긴 값 때문에 넘치지 않게 */
}

.bp-roi-edit-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
}

.bp-roi-edit-field input {
  width: 100%;
  padding: 0.5rem 0.65rem;
  font-size: 0.9rem;
  color: var(--text-color);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
}

.bp-roi-edit-field input:focus {
  outline: none;
  border-color: var(--primary-600);
}

.dark .bp-roi-edit-field input:focus {
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(99,102,241,0.25);
}

/* 해석 힌트(bp-money-hint)는 blueprint_onboarding.css의 것을 그대로 쓴다 —
   같은 문구가 두 화면에서 다르게 보이면 안 된다. 여기서는 자리만 잡아준다. */
.bp-roi-edit-hint {
  display: block;
  min-height: 1.1em;
  font-size: 0.75rem;
  line-height: 1.4;
}

.bp-roi-edit-error {
  display: none;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--danger-600, #dc2626);
}

.bp-roi-edit-error.is-shown {
  display: block;
}

.dark .bp-roi-edit-error {
  color: #fca5a5;
}

.bp-roi-edit-note {
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.bp-roi-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.875rem;
}

@media (max-width: 480px) {
  .bp-roi-edit-fields {
    grid-template-columns: 1fr;
  }
}
/* N일(7/15/30) 콘텐츠 기획(2026-07-20, 사용자 요청).
 * content_calendar.js가 뱉는 .bp-cal-* 요소. 토큰만 사용(다크모드 자동 대응). */

.bp-cal-lead {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  word-break: keep-all;
}

/* ── 일수 선택(7/15/30) ────────────────────────────────────────────────
   AI 호출 없이 선택 상태만 바꾸므로 크레딧이 들지 않는다. */
.bp-cal-days {
  display: inline-flex;
  gap: 0.375rem;
  margin-bottom: 0.75rem;
}

.bp-cal-days-inline {
  margin: 0.5rem 0 0 0.5rem;
  vertical-align: middle;
}

.bp-cal-day {
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--card-bg, #fff);
  color: var(--text-secondary);
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.bp-cal-day:hover {
  border-color: var(--primary-400, var(--primary-300));
}

.bp-cal-day.is-selected {
  border-color: var(--primary-500);
  background: var(--primary-50, rgba(99, 102, 241, 0.1));
  color: var(--primary-700);
}

.dark .bp-cal-day.is-selected {
  background: rgba(99, 102, 241, 0.18);
  color: var(--primary-300);
}

.bp-cal-credit {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.6875rem;
  color: var(--text-secondary);
}

/* ── 시리즈 헤더 ──────────────────────────────────────────────────────── */
.bp-cal-series {
  margin: 0 0 0.25rem;
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--heading-color);
  word-break: keep-all;
}

.bp-cal-goal {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  word-break: keep-all;
}

.bp-cal-summary {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.bp-cal-summary b {
  color: var(--heading-color);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ── 일괄 처리 버튼(2026-07-20, 사용자 요청) ──────────────────────────────
   "빈타이틀로 생성과 전체 블로그 생성 버튼". 두 버튼의 비용이 크게 다르므로
   (빈 초안=크레딧 0, 전체 생성=편당 과금) 부제로 성격을 분명히 밝힌다. */
.bp-cal-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.875rem;
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--border-color);
}

.bp-cal-bulk .btn {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  line-height: 1.35;
  text-align: left;
}

.bp-cal-bulk-note {
  font-size: 0.625rem;
  font-weight: 500;
  opacity: 0.8;
}

/* ── 각 편(하루치) ───────────────────────────────────────────────────── */
.bp-cal-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bp-cal-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 0.875rem;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--card-bg, #fff);
}

/* 생성 완료된 편은 좌측 바로 구분 — 배경을 채우면 대비가 떨어진다 */
.bp-cal-item.is-done {
  box-shadow: inset 3px 0 0 var(--primary-500);
}

.bp-cal-day-badge {
  flex: 0 0 auto;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 0.6875rem;
  font-weight: 700;
  white-space: nowrap;
}

.bp-cal-body {
  flex: 1 1 auto;
  min-width: 0; /* 긴 제목이 액션 버튼을 밀어내지 않게 */
}

.bp-cal-title {
  margin: 0 0 0.25rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--heading-color);
  line-height: 1.45;
  word-break: keep-all;
}

.bp-cal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

.bp-cal-kw {
  padding: 0.0625rem 0.45rem;
  border-radius: 999px;
  background: var(--primary-50, rgba(99, 102, 241, 0.1));
  color: var(--primary-700);
  font-size: 0.6875rem;
  font-weight: 600;
}

.dark .bp-cal-kw {
  background: rgba(99, 102, 241, 0.18);
  color: var(--primary-300);
}

.bp-cal-purpose {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  word-break: keep-all;
}

.bp-cal-outline {
  margin: 0.4rem 0 0;
  padding-left: 1rem;
  list-style: disc;
}

.bp-cal-outline li {
  font-size: 0.6875rem;
  color: var(--text-secondary);
  line-height: 1.6;
  word-break: keep-all;
}

.bp-cal-action {
  flex: 0 0 auto;
}

.bp-cal-generating {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.bp-cal-spin {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  animation: bp-cal-spin 0.8s linear infinite;
}

@keyframes bp-cal-spin {
  to { transform: rotate(360deg); }
}

.bp-cal-redo {
  margin-top: 0.875rem;
}

@media (max-width: 640px) {
  /* 좁은 화면에서는 액션 버튼이 옆에 붙으면 제목이 짓눌린다 — 아래로 내린다 */
  .bp-cal-item {
    flex-wrap: wrap;
  }

  .bp-cal-action {
    width: 100%;
    margin-top: 0.5rem;
  }

  .bp-cal-action .btn {
    width: 100%;
    justify-content: center;
  }
}
/* 리포트 상단 "다음 단계" 배너 (2026-07-20).
 *
 * 제안형 모드는 승인해도 자산을 만들지 않고 리포트를 먼저 낸다. 생성 버튼은 "생산 자산"
 * 섹션 안(문서 85% 지점)에 있어 첫 화면에서는 보이지 않았고, 상단 스탯 타일이 "다 끝났다"는
 * 인상을 줘 사용자가 퍼널 위자드로 우회했다. 그래서 상단에 진입점만 추가한다.
 *
 * blueprint_polish.css가 489줄로 500줄 규칙에 근접해 별도 파일로 분리한다.
 * 색은 전부 base.css 토큰 — 라이트/다크 자동 대응(하드코딩 금지 규칙). */

.bp-next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4, 1rem);
  margin: var(--space-4, 1rem) 0 var(--space-5, 1.25rem);
  padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  /* 왼쪽 강조선 — 리포트의 다른 카드와 구분되는 "할 일" 신호 */
  border-left: 3px solid var(--primary-color);
  border-radius: 10px;
}

.bp-next-step-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.bp-next-step-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--heading-color);
}

.bp-next-step-names {
  font-size: 0.85rem;
  color: var(--text-color);
}

.bp-next-step-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.bp-next-step-cta {
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: none;
}

/* 앵커 점프 시 제목이 상단 헤더·목차에 가리지 않도록 — ToC와 동일한 오프셋 규약 */
.bp-pending-assets {
  scroll-margin-top: 120px;
}

@media (max-width: 640px) {
  .bp-next-step {
    flex-direction: column;
    align-items: stretch;
  }

  .bp-next-step-cta {
    text-align: center;
  }
}

/* 인쇄·PDF 발행 시에는 내부 할 일이므로 제외 (blueprint_polish.css의 인쇄 규칙과 동일 범위) */
@media print {
  body:has(.bp-shell) .bp-next-step {
    display: none;
  }
}
/* 꿈의 고객 접점 카드 (2026-07-21 사용자 요청: "꿈의 고객이 모여있는 곳").
 *
 * blueprint_report.css가 497줄로 500줄 제한(CLAUDE.md)에 닿아 별도 파일로 분리했다.
 * 스타일은 .bp-benchmark-* 카드와 같은 시각언어를 따른다 — 같은 리포트 안에서
 * 나란히 놓이는 카드라 모양이 다르면 위계가 깨진다.
 *
 * ⚠️ 색은 전부 토큰(var(--...))으로만 쓴다. #fff를 하드코딩하면 다크모드에서
 * 흰 카드가 그대로 남아 텍스트가 안 보인다(2026-07-14에 겪은 문제).
 */

/* 접점 섹션은 경쟁사 섹션과 마찬가지로 그리드 전체 폭을 쓴다 */
.bp-research-body > .bp-hub-section {
  grid-column: 1 / -1;
}

.bp-hub-section {
  border-top-color: var(--primary-400, #818cf8);
}

.bp-hub-hint {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem;
}

.bp-hub-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.875rem;
}

.bp-hub-card {
  background: var(--card-bg, #fff);
  border-top-width: 1px;
  border-top-color: var(--border-color);
}

.bp-hub-head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.375rem;
  flex-wrap: wrap;
}

/* 플랫폼 배지 — 어느 채널의 접점인지 이름보다 먼저 읽혀야 한다 */
.bp-hub-platform {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--primary-50, rgba(99, 102, 241, 0.1));
  color: var(--primary-700, #4338ca);
  border: 1px solid var(--primary-200, rgba(99, 102, 241, 0.25));
}

.dark .bp-hub-platform {
  background: rgba(99, 102, 241, 0.18);
  color: var(--primary-300, #a5b4fc);
  border-color: rgba(129, 140, 248, 0.35);
}

/* 규모는 추정값이라 플랫폼 배지보다 약하게 — 확정 정보처럼 보이면 안 된다 */
.bp-hub-scale {
  font-size: 0.6875rem;
  color: var(--text-muted);
}

.bp-hub-card .bp-field-section-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.875rem;
}

.bp-hub-card .bp-field-section-title a {
  color: var(--primary-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.dark .bp-hub-card .bp-field-section-title a {
  color: var(--primary-300);
}

.bp-hub-fit {
  font-size: 0.8125rem;
  color: var(--text-secondary);
  margin: 0.375rem 0 0.5rem;
  line-height: 1.6;
}

/* 주의사항은 경고 톤. 카페 홍보 금지 규정을 모르고 들어가면 강퇴당하므로
 * 눈에 띄어야 하지만, 에러가 아니라 안내라 빨강이 아닌 앰버를 쓴다. */
.bp-hub-caution {
  font-size: 0.75rem;
  color: var(--warning-700, #b45309);
  background: var(--warning-50, rgba(245, 158, 11, 0.08));
  border-left: 2px solid var(--warning-400, #fbbf24);
  padding: 0.375rem 0.5rem;
  border-radius: 0 4px 4px 0;
  margin: 0.5rem 0 0;
}

.dark .bp-hub-caution {
  color: var(--warning-300, #fcd34d);
  background: rgba(245, 158, 11, 0.12);
}

@media (max-width: 768px) {
  .bp-hub-grid {
    grid-template-columns: 1fr;
  }
}
/* Turbo Drive 기본 진행률 바 커스텀 스타일
   기본값(3px, 옅은 파란색)이 눈에 잘 띄지 않아 두께/색상/글로우를 강화한다.
   Turbo가 런타임에 주입하는 기본 스타일을 확실히 덮어쓰기 위해 !important 사용. */
.turbo-progress-bar {
  height: 4px !important;
  background: linear-gradient(90deg, #4f46e5, #7c3aed) !important;
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.7) !important;
}
/*
































 */