/* ============================================================
   NightOff Design System — "야근 OFF · 퇴근 동료" 토큰
   ============================================================ */
:root {
  /* ─── 배경 (따뜻한 화이트 — 노을 직전 거실 톤) ─── */
  --bg:           #FAF8F5;   /* 화면 전체 — warm white */
  --bg-2:         #F3EFE9;   /* 섹션 배경 — warm cream */
  --bg-3:         #EBE5DC;   /* 비활성/구분 — warm beige */
  --card:         #FFFFFF;   /* 카드 — pure white (대비) */

  /* ─── 글자 4단계 ─── */
  --fg-strong:    #1F1A14;   /* 헤드라인, 강조 (warm black) */
  --fg:           #3C342B;   /* 본문 (warm slate) */
  --fg-soft:      #6E6458;   /* 메타, 라벨 */
  --fg-muted:     #A89E91;   /* placeholder, 비활성 */
  /* 호환 alias (기존 코드) */
  --fg-2:         #6E6458;
  --muted:        #A89E91;

  /* ─── 보더 ─── */
  --border:       #E9E2D6;   /* warm light */
  --border-strong:#D6CCB8;
  --border-card:  rgba(0,0,0,0.04);   /* 카드용 미세 보더 */

  /* ─── 메인 컬러 — 보라 (저녁 황혼색) ─── */
  --primary:      #6B46E5;
  --primary-hover:#5A38D1;
  --primary-soft: #EDE7FF;
  --primary-fg:   #FFFFFF;

  /* ─── 노을 액센트 (퇴근 시간 / 마감 임박) ─── */
  --sunset:       #FF8E5C;   /* 노을 오렌지 */
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --sunset-soft:  #FFE8DA;
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --peach:        #FFB4A2;   /* 살구 — 위로/캐릭터 메시지 */
  --peach-soft:   #FFEEE8;
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --gold:         #FFCB77;   /* 황금시간 / 마감 임박 */
  --gold-soft:    #FFF3DD;

  /* ─── 보조 (의미별) ─── */
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --accent:       #F4F0FF;
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --accent-fg:    #5A38D1;
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --secondary:    #F3F0FC;
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --secondary-fg: #4E31BF;
  --success:      #2D9D78;   /* 따뜻한 민트 */
  --success-soft: #D6F0E6;
  --warning:      #E8843D;   /* 노을빛 */
  --warning-soft: #FFE8D6;
  --danger:       #D9534A;   /* 따뜻한 적 */
  --danger-soft:  #FBE0DC;

  /* ─── 라운드 (의미별) ─── */
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --radius-xs:    6px;       /* 배지, 작은 버튼 */
  --radius-sm:    10px;      /* 인풋, 칩 */
  --radius:       14px;      /* 카드 (메인) */
  --radius-lg:    20px;      /* 모달, 큰 배너 */
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --radius-xl:    24px;
  --radius-pill:  999px;

  /* ─── 그림자 (다층 — 종이 위 종이 느낌) ─── */
  --shadow-sm:
    0 0 0 1px var(--border-card),
    0 1px 2px rgba(0,0,0,0.04);
  --shadow:
    0 0 0 1px var(--border-card),
    0 1px 3px rgba(0,0,0,0.04),
    0 4px 12px -4px rgba(0,0,0,0.05);
  --shadow-md:
    0 0 0 1px var(--border-card),
    0 2px 6px rgba(0,0,0,0.04),
    0 12px 28px -8px rgba(0,0,0,0.07);
  --shadow-lg:
    0 0 0 1px var(--border-card),
    0 4px 12px rgba(0,0,0,0.05),
    0 24px 48px -16px rgba(0,0,0,0.12);
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --shadow-primary: 0 12px 32px -12px rgba(107, 70, 229, 0.32);
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --shadow-sunset:  0 12px 32px -12px rgba(255, 142, 92, 0.30);

  /* ─── 8pt 간격 시스템 ─── */
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --space-1:  4px;
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --space-8:  64px;

  /* ─── 레이아웃 ─── */
  --sidebar-w:      280px;
  /* --right-panel-w 는 Spec 5 (5/16) 우측 사이드바 폐기 영역 함께 폐기. */

  /* ─── 모션 ─── */
  --ease:        cubic-bezier(0.32, 0.72, 0, 1);    /* 토스/애플식 부드러움 */
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --duration:    240ms;
  --duration-fast: 160ms;

  /* ─── 폰트 — Paperlogy 우선 (프레젠테이션 특화. SUIT/Pretendard 폴백) ─── */
  --sans: 'Paperlogy', 'SUIT Variable', 'SUIT', 'Pretendard Variable', 'Pretendard',
          -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  /* Spec A (5/18) 폐기 — 사용 0건 grep 검증 완료, 회귀 방지 신호용 보존 */
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ─── Spec A (5/18) 신규 — 폰트 사이즈 토큰 6단계. Spec B/C/D 영역 점진 도입 예정 ─── */
  --text-xs:   11px;  /* 캡션, 작은 라벨 */
  --text-sm:   12px;  /* 보조 정보, 메타 */
  --text-base: 13px;  /* 본문 (현재 가장 많이 쓰는 사이즈) */
  --text-md:   15px;  /* 소제목, 카드 타이틀 */
  --text-lg:   20px;  /* 섹션 타이틀 */
  --text-xl:   26px;  /* 페이지 타이틀 */

  /* ─── Spec A (5/18) 신규 — 다크 톤 namespace. Spec B 사이드바 다크화 영역 사용 예정 ─── */
  --dark-bg:          #1A1A1F;
  --dark-bg-elevated: #25252C;
  --dark-bg-subtle:   #2C2C34;
  --dark-fg:          #FFFFFF;
  --dark-fg-soft:     #9994A1;
  --dark-fg-muted:    #6E6A75;
  --dark-border:      #2C2C34;
}

/* ─── 타이포 위계 — Paperlogy 기준, 한 단계 큰 사이즈 ─── */
.t-hero {
  font-size: 50px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.12;
  color: var(--fg-strong);
}
.t-h1 {
  font-size: 36px; font-weight: 800;
  letter-spacing: -0.025em; line-height: 1.18;
  color: var(--fg-strong);
}
.t-h2 {
  font-size: 25px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.25;
  color: var(--fg-strong);
}
.t-h3 {
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.3;
  color: var(--fg-strong);
}
.t-body {
  font-size: 16px; font-weight: 400;
  line-height: 1.65; color: var(--fg);
}
.t-small {
  font-size: 14px; font-weight: 400;
  line-height: 1.55; color: var(--fg-soft);
}
.t-label {
  font-size: 12.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-soft);
}
.t-num { font-variant-numeric: tabular-nums; }

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--fg);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-size: 16px;
  line-height: 1.6;
  letter-spacing: -0.01em;       /* SUIT 와 어울리는 자간 */
  font-feature-settings: "ss01", "ss02";
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
.hidden { display: none !important; }

/* ===== App shell ===== */
.app-shell { min-height: 100vh; display: flex; }

/* ===== Sidebar ===== */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w); background: #ffffff;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 40;
}
.sidebar-logo {
  display: flex; align-items: center; justify-content: center;
  padding: 22px 18px 18px;
  border-bottom: 1px solid var(--border);
  cursor: pointer; user-select: none; transition: opacity .15s;
  background: #fff;
  min-height: 88px;
}
.sidebar-logo:hover { opacity: 0.78; }
.sidebar-logo:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.sidebar-logo-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  object-fit: contain; display: block;
}
/* Main header logo (dashboard) — 가로형 로고에 맞게 비율 유지 */
.header-logo {
  width: auto; height: 40px; object-fit: contain;
  cursor: pointer; transition: opacity .15s;
}
.header-logo:hover { opacity: 0.78; }
/* 사이드바 상단 액션 — "+ 새 과업" 버튼 영역 */
.sidebar-top-actions {
  padding: 12px 12px 8px;
}
.sidebar-new-task-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-fg, #fff);
  font-size: 14px; font-weight: 600;
  border: 0;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 2px 6px -2px rgba(107, 70, 229, 0.35);
}
.sidebar-new-task-btn:hover {
  background: var(--primary-hover, #5a3bd0);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(107, 70, 229, 0.45);
}
.sidebar-new-task-btn:active { transform: translateY(0); }
.sidebar-new-task-btn svg { width: 16px; height: 16px; }

/* 📊 Stats 영역 — 4줄, 작은 텍스트, 사이드바 안 컴팩트 영역 */
.sidebar-stats {
  padding: 6px 14px 14px;
  display: flex; flex-direction: column; gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.sidebar-stats-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 0;
  font-size: 13px;
  line-height: 1.3;
}
.sidebar-stats-label {
  color: var(--fg-2);
  font-weight: 400;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 70%;
}
.sidebar-stats-value {
  color: var(--fg-strong, var(--fg));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sidebar-nav { flex: 1; padding: 8px 8px 12px; overflow-y: auto; min-height: 0; }

/* 과업 목록 (사이드바 본문) */
.sidebar-tasks-list { display: flex; flex-direction: column; gap: 2px; }
.sidebar-tasks-empty {
  margin: 12px 8px;
  font-size: 13px;
  color: var(--fg-2);
  font-style: italic;
  text-align: center;
}
.sidebar-task-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  position: relative;
}
.sidebar-task-item:hover { background: var(--bg-2); }
.sidebar-task-item.active {
  background: var(--primary-soft, rgba(107, 70, 229, 0.10));
  color: var(--primary);
  font-weight: 600;
}
.sidebar-task-item.active::before {
  content: ""; position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px; border-radius: 2px;
  background: var(--primary);
}
.sidebar-task-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-task-dday {
  flex-shrink: 0;
  font-size: 11.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: var(--bg-2); color: var(--fg-2);
  letter-spacing: 0.02em;
}
.sidebar-task-dday.urgent {
  background: var(--danger-soft, #FDEDEC);
  color: var(--danger, #C0392B);
}
.sidebar-task-dday.past {
  background: #F0F0F0;
  color: #999;
  text-decoration: line-through;
}

/* 사이드바 하단 — 사용자 정보 / 설정 / 로그아웃 */
.sidebar-footer {
  margin-top: auto;
  padding: 10px 8px 14px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 2px;
  background: #fff;
}
/* 사용자 정보 한 줄 — 정적 (클릭/hover X). 이메일 길면 truncate. */
.sidebar-footer-user {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 8px;
  margin-bottom: 4px;
  font-size: 12.5px;
  color: #888;
  border-bottom: 1px solid var(--border);
}
.sidebar-footer-user-icon {
  display: inline-flex; align-items: center;
  color: #aaa;
  flex-shrink: 0;
}
.sidebar-footer-user-email {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.sidebar-footer-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500;
  color: var(--fg-2);
  background: transparent; border: 0;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.sidebar-footer-btn:hover { background: var(--bg-2); color: var(--fg); }
.sidebar-footer-btn-icon { display: inline-flex; align-items: center; }
.sidebar-footer-btn-logout:hover { color: var(--danger, #C0392B); }

/* Phase 3 — ✨ 제안서 버튼 영역 quota 라벨 (헤더, 사용자 시각 영역) */
.btn-quota-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
.btn-quota-badge.quota-exhausted {
  background: rgba(255, 100, 100, 0.6);
}
.btn-quota-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-quota-disabled:hover { opacity: 0.55; }

/* Phase 3 — quota 영역 (사이드바 footer, 사용자 이메일 직후) */
.sidebar-footer-quota {
  margin: 6px 0;
  padding: 8px 10px;
  background: var(--bg-2, #f4f4f7);
  border-radius: 6px;
  font-size: 11px;
}
.sidebar-footer-quota .quota-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 2px 0;
  color: var(--fg-2, #666);
}
.sidebar-footer-quota .quota-label { font-size: 12px; }
.sidebar-footer-quota .quota-value {
  font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--fg, #1a1a1a);
}
.sidebar-footer-quota .quota-row.quota-empty .quota-value {
  color: var(--danger, #c43);
}

/* (이전 sidebar-recent-* 영역은 사이드바 하단 푸터로 대체됨 — 삭제됨) */

/* ===== Main area ===== */
/* margin-right (--right-panel-w) + body.right-panel-off 토글 + ≤1280px 우측 패널 분기는
 * Spec 5 (5/16) 우측 사이드바 폐기 영역 함께 정리. 중앙 영역 폭 +280px 확장. */
.main {
  margin-left: var(--sidebar-w);
  flex: 1; min-height: 100vh;
  display: flex; flex-direction: column;
}

/* ===== Right Panel (.right-panel + .rp-section + .rp-title + .rp-coming-* + .rp-body-*) =====
 * Spec 5 (5/16) 폐기 — 우측 사이드바 통째 제거.
 */

.main-header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  background: rgba(250, 248, 245, 0.85);   /* warm white 반투명 */
  backdrop-filter: blur(10px);
  min-height: 72px;
}
.main-header h1 {
  font-size: 26px; font-weight: 800; margin: 0;
  letter-spacing: -0.025em; color: var(--fg-strong);
}
.main-header p { margin: 4px 0 0; color: var(--fg-soft); font-size: 15px; }
.main-content { padding: 32px; max-width: 1240px; width: 100%; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; transition: all .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 4px 12px -4px rgba(107, 70, 229, 0.35); }
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 6px 16px -4px rgba(107, 70, 229, 0.45); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-ghost { background: transparent; color: var(--fg); }
.btn-ghost:hover { background: var(--bg-2); }
.btn-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--fg); }
.btn-outline:hover { background: var(--bg-2); }
.btn-danger { background: transparent; border: 1px solid var(--border-strong); color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-lg { height: 46px; padding: 0 22px; font-size: 15px; border-radius: var(--radius); }
.btn-icon-sq {
  width: 40px; height: 40px; padding: 0; border-radius: var(--radius-sm);
  display: grid; place-items: center;
}
.icon-btn {
  width: 34px; height: 34px; padding: 0; border-radius: 8px;
  color: var(--fg-2); display: grid; place-items: center;
}
.icon-btn:hover { background: var(--bg-2); color: var(--fg); }

/* ===== Card — Kinship 식 부드러운 카드 (다층 그림자 + 미세 보더) ===== */
.card {
  background: var(--card);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow var(--duration) var(--ease),
              transform var(--duration-fast) var(--ease);
}
.card-head {
  padding: var(--space-5) var(--space-5) var(--space-3);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
}
.card-title-row { display: flex; align-items: center; gap: var(--space-3); }
.card-title-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.card-title {
  font-size: 19px; font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--fg-strong);
}
.card-subtitle {
  font-size: 14.5px;
  color: var(--fg-soft);
  margin: 2px 0 0;
  line-height: 1.5;
}
.card-body { padding: var(--space-3) var(--space-5) var(--space-5); }

/* ===== Stats (Kinship 식 — 큰 숫자 + 작은 변화량) ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.stat-card {
  padding: var(--space-5);
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: var(--space-3);
  transition: box-shadow var(--duration) var(--ease);
}
.stat-card:hover { box-shadow: var(--shadow); }
.stat-label {
  font-size: 13px; font-weight: 600;
  color: var(--fg-soft);
  margin: 0;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.stat-value {
  font-size: 40px; font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fg-strong);
  font-variant-numeric: tabular-nums;
}
.stat-unit {
  font-size: 16px; font-weight: 500;
  color: var(--fg-muted);
  margin-left: 3px;
}
.stat-icon-wrap {
  width: 38px; height: 38px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* ===== Smart learning banner (쓸수록 똑똑해져요) ===== */
.smart-banner {
  margin: 24px 0;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in oklab, var(--primary) 10%, #fff) 0%, color-mix(in oklab, var(--primary) 3%, #fff) 100%);
  border: 1px solid color-mix(in oklab, var(--primary) 18%, var(--border));
  transition: padding 0.2s ease;
}
.smart-banner.collapsed { padding: 14px 22px; }
.smart-banner.collapsed .smart-grid { display: none; }
.smart-banner.expanded .smart-grid { display: grid; }
.smart-banner .smart-header.clickable { cursor: pointer; user-select: none; }
.smart-banner .smart-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 0;
}
.smart-banner.expanded .smart-header { margin-bottom: 16px; }
.smart-toggle {
  background: transparent; border: none; cursor: pointer;
  color: var(--primary); padding: 4px; border-radius: 6px;
  display: grid; place-items: center; flex-shrink: 0;
  transition: background 0.12s;
}
.smart-toggle:hover { background: color-mix(in oklab, var(--primary) 12%, transparent); }
.smart-header .sm-emoji { font-size: 28px; line-height: 1; }
.smart-header h2 { margin: 0 0 3px; font-size: 17px; font-weight: 700; color: var(--fg); }
.smart-header p  { margin: 0; font-size: 13px; color: var(--fg-2); }
.smart-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.smart-feat {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px; background: #fff;
  border: 1px solid var(--border); border-radius: var(--radius);
}
.smart-feat .sm-feat-icon {
  width: 34px; height: 34px; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.smart-feat h4 { margin: 0 0 3px; font-size: 14px; font-weight: 600; color: var(--fg); }
.smart-feat p  { margin: 0; font-size: 12.5px; color: var(--fg-2); line-height: 1.45; }

/* ===== Onboarding hint (첫 사용 안내) ===== */
.onboarding-hint {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border: 1px dashed var(--primary);
  border-radius: var(--radius); background: var(--primary-soft);
}
.onboarding-hint .ob-emoji { font-size: 22px; flex-shrink: 0; }
.onboarding-hint .ob-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--primary); }
.onboarding-hint .ob-desc  { margin: 0; font-size: 13px; color: var(--fg); line-height: 1.55; }

/* RFP 분석 — 체크리스트 */
.check-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.check-list li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 12px; background: var(--bg-2); border-radius: 8px;
  font-size: 14px; line-height: 1.5;
}
.check-list .check-icon {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--success); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}

/* RFP 평가기준 — 배점 바 */
.eval-bar-row {
  display: grid; grid-template-columns: 1fr 1.5fr 60px;
  gap: 12px; align-items: center;
  padding: 8px 0; font-size: 14px;
}
.eval-label { font-weight: 500; color: var(--fg); }
.eval-bar {
  height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden;
}
.eval-bar > span {
  display: block; height: 100%; background: linear-gradient(90deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 70%, #a78bfa) 100%);
  border-radius: 999px;
}
.eval-weight { font-weight: 700; color: var(--primary); text-align: right; }

/* RFP 리스크 배지 */
.risk-stack { display: flex; flex-direction: column; gap: 8px; }
.risk-alert {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 14px; border-radius: 10px;
  background: var(--danger-soft); color: var(--fg);
  border-left: 3px solid var(--danger);
  font-size: 13.5px; line-height: 1.5;
}
.risk-alert .risk-emoji { font-size: 16px; flex-shrink: 0; }

/* 성향 (Profile) 전용 CSS — Spec 2 (5/16) 폐기.
 * 제거된 클래스: .tag-cloud / .cloud-tag(+ .sz-lg/.sz-md/.sz-sm/:hover) /
 *   .hbar-chart / .hbar-row / .hbar-label / .hbar / .hbar > span /
 *   .insight-stack / .insight-card / .insight-card .insight-icon
 * ⚠ .onboarding-hint (L670 영역) 은 공유 클래스 (app.js:1882 사용) 절대 유지.
 */

/* 경쟁사 — 3열 카드 + 비교표 */
.comp-3col {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 10px;
}
.comp-col-card {
  padding: 12px 14px; border-radius: 10px;
  background: var(--bg-2);
}
.comp-col-card h5 {
  margin: 0 0 8px; font-size: 12.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.comp-col-card.strengths h5 { color: var(--success); }
.comp-col-card.weaknesses h5 { color: var(--danger); }
.comp-col-card.diff h5 { color: var(--primary); }
.comp-col-card ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.55; }
.comp-col-card ul li { margin: 3px 0; }
.comp-col-card.diff p { margin: 0; font-size: 13px; line-height: 1.55; font-weight: 500; color: var(--fg); }

/* Win rate 뱃지 (프로파일 헤더) — Spec 2 (5/16) 폐기 */

/* 큰 CTA — 새 대화 시작 */
.btn.big-cta {
  width: 100%;
  height: auto;
  padding: 22px 28px;
  font-size: 18px;
  font-weight: 700;
  border-radius: var(--radius-lg);
  gap: 12px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 78%, #8b5cf6) 100%);
  box-shadow: 0 12px 28px -8px rgba(107, 70, 229, 0.45);
  transition: all 0.18s ease;
}
.btn.big-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(107, 70, 229, 0.55);
  background: linear-gradient(135deg, var(--primary-hover) 0%, color-mix(in oklab, var(--primary-hover) 78%, #8b5cf6) 100%);
}
.btn.big-cta:active { transform: translateY(0); }

/* Outcome chip (대화 히스토리) */
.outcome-wrap { position: relative; display: inline-block; }
.outcome-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer; transition: all 0.12s;
}
.outcome-chip.outcome-none { background: var(--bg-2); color: var(--fg-2); border-color: var(--border); }
.outcome-chip.outcome-inprogress { background: var(--primary-soft); color: var(--primary); }
.outcome-chip.outcome-won { background: var(--success-soft); color: var(--success); }
.outcome-chip.outcome-lost { background: var(--danger-soft); color: var(--danger); }
.outcome-chip:hover { opacity: 0.85; }
.outcome-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20;
  min-width: 110px; background: #fff;
  border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: var(--shadow-md);
  padding: 4px; display: none; flex-direction: column; gap: 2px;
}
.outcome-menu.open { display: flex; }
.outcome-menu-item {
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px; text-align: left; cursor: pointer;
  background: transparent;
}
.outcome-menu-item:hover { background: var(--bg-2); }
.outcome-menu-item.outcome-won { color: var(--success); }
.outcome-menu-item.outcome-lost { color: var(--danger); }
.outcome-menu-item.outcome-inprogress { color: var(--primary); }

/* ===== Dashboard quick start + activity + footer ===== */
.stats-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
.stats-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }

.quick-start {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.quick-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--border);
  cursor: pointer; transition: all 0.15s;
}
.quick-card:hover {
  border-color: color-mix(in oklab, var(--primary) 35%, var(--border));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.quick-card .quick-icon {
  width: 46px; height: 46px; border-radius: 12px;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.quick-card h4 { margin: 0 0 3px; font-size: 15px; font-weight: 600; }
.quick-card p  { margin: 0; font-size: 13px; color: var(--fg-2); line-height: 1.4; }

.dashboard-two-col {
  display: grid; grid-template-columns: 1fr 340px; gap: 24px;
  margin-bottom: 32px;
}

.activity-feed .activity-item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: 10px;
  cursor: pointer; transition: background 0.12s;
}
.activity-feed .activity-item:hover { background: var(--bg-2); }
.activity-feed .activity-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; flex-shrink: 0;
}
.activity-feed .activity-title {
  font-size: 13px; font-weight: 500; color: var(--fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.activity-feed .activity-time {
  font-size: 12px; color: var(--fg-2); margin-top: 2px;
}

.dashboard-footer {
  margin-top: 8px; padding: 18px 0;
  text-align: center; font-size: 13px; color: var(--muted);
  border-top: 1px solid var(--border);
}

/* ===== Client Cards Grid ===== */
.client-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.client-grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px) { .client-grid, .client-grid-2 { grid-template-columns: 1fr; } }
/* ===== Badges ===== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
}
.badge-primary { background: var(--primary-soft); color: var(--primary); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger  { background: var(--danger-soft); color: var(--danger); }
.badge-muted   { background: var(--bg-2); color: var(--fg-2); }
.badge-outline { background: transparent; color: var(--fg-2); border: 1px solid var(--border-strong); }

/* ===== Inputs ===== */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 14px; font-weight: 500; }
.field-hint { font-size: 13px; color: var(--fg-2); margin: 0; }
.input, .select, .textarea {
  width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: #fff; font-size: 14px; color: var(--fg);
  transition: border-color .15s, box-shadow .15s;
}
.textarea { min-height: 110px; padding: 12px 14px; height: auto; line-height: 1.6; resize: vertical; }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352525b' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }

/* ===== Upload drop-area ===== */
.drop-area {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 28px 20px; border: 2px dashed var(--border-strong); border-radius: var(--radius);
  background: var(--bg-2); text-align: center; cursor: pointer; transition: all .15s;
}
.drop-area:hover { border-color: var(--primary); background: #fff; }
.drop-area.dragover { border-color: var(--primary); background: var(--primary-soft); }
.drop-icon {
  width: 52px; height: 52px; border-radius: 999px;
  background: var(--primary-soft); color: var(--primary);
  display: grid; place-items: center; margin-bottom: 10px;
}
.drop-title { font-size: 15px; font-weight: 500; margin: 6px 0 4px; }
.drop-hint  { font-size: 13px; color: var(--fg-2); margin: 0; }

/* File row (reference / RFP) */
.file-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
}
.file-row + .file-row { margin-top: 8px; }
.file-row .left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.file-row .file-icon {
  width: 40px; height: 40px; border-radius: 10px; background: var(--bg-2);
  display: grid; place-items: center; color: var(--primary); flex-shrink: 0;
}
.file-row .file-name { font-size: 14px; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; }
.file-row .file-sub  { font-size: 12px; color: var(--fg-2); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; }

/* ===== Conversation list ===== */
.conv-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; cursor: pointer; transition: all .15s;
}
.conv-item + .conv-item { margin-top: 10px; }
.conv-item:hover { border-color: color-mix(in oklab, var(--primary) 30%, var(--border)); box-shadow: var(--shadow-sm); }
.conv-item .conv-main { flex: 1; min-width: 0; }
.conv-item h4 { font-size: 15.5px; font-weight: 600; margin: 0; }
.conv-item .conv-preview { font-size: 14px; color: var(--fg-2); margin: 4px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conv-item .conv-meta { display: flex; gap: 14px; font-size: 13px; color: var(--muted); }
.conv-item .conv-actions { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.conv-item:hover .conv-actions { opacity: 1; }

/* ===== Tags / memory ===== */
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; background: var(--bg-2); border-radius: 6px;
  font-size: 12px; color: var(--fg-2);
}

/* ===== Progress bar ===== */
.progress { width: 100%; height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.progress > div { height: 100%; background: var(--primary); border-radius: 999px; transition: width .4s; }

/* ===== Chat screen — 데스크톱 쾌적 레이아웃 ===== */
.chat-shell {
  margin-left: var(--sidebar-w);
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column;
  height: 100vh;
  background: var(--bg);
}
.chat-header {
  position: sticky; top: 0; z-index: 10;
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 12px 20px;        /* 14/40 → 12/20 좁은 영역 대응 */
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;           /* 한 줄에 못 들어가면 두 줄로 */
  min-height: 60px;
  row-gap: 6px;
}
.chat-header .left {
  display: flex; align-items: center;
  gap: 10px;                 /* 18 → 10 */
  flex-wrap: wrap;
  min-width: 0;
}
.chat-header .client-name { font-size: 12px; color: var(--fg-soft); }
.chat-header .chat-title {
  font-size: 16px;           /* 17 → 16 살짝 작게 */
  font-weight: 700;
  letter-spacing: -0.015em;
  margin: 0;
  white-space: nowrap;       /* 제목이 한 글자씩 줄바뀌던 것 방지 */
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}
.chat-header .context-badges {
  display: flex; gap: 6px; align-items: center;
  font-size: 12px; color: var(--fg-soft);
  flex-wrap: wrap;
}
.chat-header .page-limit-badge {
  background: var(--warning-soft); color: var(--warning);
  padding: 4px 10px; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 11.5px;
  white-space: nowrap;
}

.chat-body {
  flex: 1; overflow-y: auto;
  padding: 32px 0;
  background: var(--bg);
}
.chat-messages {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;          /* 40 → 24 가로 스크롤 해소 */
  display: flex; flex-direction: column; gap: 22px;
  box-sizing: border-box;   /* content-box → border-box 안전 */
}
.msg-row { display: flex; gap: 14px; align-items: flex-start; }
.msg-row.user { flex-direction: row-reverse; }
.msg-avatar {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  display: grid; place-items: center;
}
.msg-row.user .msg-avatar { background: var(--primary); color: var(--primary-fg); }
.msg-row.assistant .msg-avatar { background: var(--bg-2); color: var(--fg-2); }
.msg-body { max-width: 86%; min-width: 0; }
.msg-row.user .msg-body { text-align: right; }
.msg-bubble {
  border-radius: 18px; padding: 12px 18px;
  font-size: 15px; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.msg-bubble .md-h1, .msg-bubble .md-h2, .msg-bubble .md-h3 {
  margin: 10px 0 6px; font-weight: 700; line-height: 1.35;
}
.msg-bubble .md-h1 { font-size: 18px; }
.msg-bubble .md-h2 { font-size: 16.5px; }
.msg-bubble .md-h3 { font-size: 15px; color: var(--fg-2); }
.msg-bubble .md-ul, .msg-bubble .md-ol { margin: 6px 0; padding-left: 22px; }
.msg-bubble .md-ul li, .msg-bubble .md-ol li { margin: 3px 0; line-height: 1.6; }
.msg-bubble .md-code {
  background: color-mix(in oklab, var(--primary) 10%, var(--bg-2));
  color: var(--fg); padding: 2px 6px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
}
.msg-bubble p { margin: 6px 0; }
.msg-bubble p:first-child { margin-top: 0; }
.msg-bubble p:last-child { margin-bottom: 0; }
.msg-bubble strong { font-weight: 700; }
.msg-bubble em { font-style: italic; }

.msg-row.user .msg-bubble { background: var(--primary); color: var(--primary-fg); border-bottom-right-radius: 4px; }
.msg-row.assistant .msg-bubble { background: #fff; color: var(--fg); border: 1px solid var(--border); border-bottom-left-radius: 4px; box-shadow: var(--shadow-sm); }
.msg-time { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* ===== Chat input ===== */
.chat-input-wrap {
  border-top: 1px solid var(--border);
  background: #fff;
  padding: 20px 0 24px;
}
.chat-input-container {
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;          /* 40 → 24 채팅 영역과 통일 */
  display: flex; gap: 10px; align-items: flex-end;
  box-sizing: border-box;
}
.chat-input-container textarea {
  flex: 1; min-height: 52px; max-height: 160px; resize: none;
  padding: 14px 18px; border-radius: 14px; border: 1px solid var(--border-strong);
  font-size: 15px; line-height: 1.6;
}
.chat-input-container textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 18%, transparent);
}
.chat-hint { text-align: center; font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.send-btn {
  width: 52px; height: 52px; border-radius: 14px; background: var(--primary); color: var(--primary-fg);
  display: grid; place-items: center; transition: background .15s;
}
.send-btn:hover { background: var(--primary-hover); }
.send-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ===== Proposal rendering — 완전 흑백 (B&W skeleton) ===== */
.proposal {
  /* 고정값. 어떤 외부 override도 무시 — 디자이너가 나중에 색상 입힘 */
  --proposal-accent: #111827;
  margin: 14px 0 4px;
  display: flex; flex-direction: column; gap: 18px;
}
.proposal-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
}
.proposal-toolbar .title { font-size: 14px; font-weight: 600; }
.proposal-toolbar .actions { display: flex; gap: 6px; }

/* A4 ratios: landscape 297:210 (1.414), portrait 210:297 (0.707)
   ▶ 기본값 = 가로형. RFP 가 명시적으로 portrait 를 요구한 경우에만 세로형.
   ▶ 고정 그리드: 페이지는 항상 4-zone (section-name | governing | content | summary) */
.proposal-page {
  position: relative; background: #ffffff; color: #111827;
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  /* A4 가로형(297×210, 1.4142:1) 엄격 고정. */
  aspect-ratio: 1.4142 / 1 !important;
  width: 100%;
  max-width: 1240px;
  padding: 28px 36px 32px;        /* 38/48/48 → 28/36/32 콘텐츠 영역 확보 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;                      /* 14 → 10 */
  font-size: 13px;                /* 15 → 13 */
  page-break-inside: avoid;
}
/* 가로형 명시 또는 기본 (data-orientation 없음) 모두 landscape 강제 */
.proposal:not([data-orientation="portrait"]) .proposal-page,
.proposal[data-orientation="landscape"] .proposal-page,
.proposal[data-orientation=""]           .proposal-page {
  aspect-ratio: 1.4142 / 1 !important;
}
/* 세로형은 RFP 명시 시에만 (드물다) */
.proposal[data-orientation="portrait"] .proposal-page {
  aspect-ratio: 0.7071 / 1 !important;
  padding: 44px 40px 48px;
}
/* 페이지 내부 콘텐츠 정렬 */
.proposal-page > * { min-width: 0; }
.proposal-page .page-content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: visible;  /* 콘텐츠 잘림 방지 */
}
.proposal-page .page-content > * { min-width: 0; }
/* 세그먼트가 지나치게 많아도 넘치지 않게 — 중요 요소만 노출 */
.proposal-page .page-content { grid-template-columns: minmax(0, 1fr); }
.proposal-page::before {
  content: attr(data-section);
  position: absolute; top: 18px; left: 36px;
  font-size: 10px; font-weight: 400; letter-spacing: 0.08em;
  color: #9ca3af; text-transform: uppercase;
  grid-row: 1;
}
.proposal[data-orientation="portrait"] .proposal-page::before { left: 32px; }
.proposal-page .page-section-name { display: none; }
.proposal-page .page-governing {
  font-size: 24px;                /* 34 → 24 (사용자: '폰트 너무 큼') */
  font-weight: 800; line-height: 1.22; letter-spacing: -0.025em;
  color: var(--proposal-accent);
  max-width: 95%;
  margin-top: 14px;               /* 22 → 14 */
  padding-bottom: 10px;           /* 16 → 10 */
  border-bottom: 3px solid var(--proposal-accent);
  display: inline-block;
  align-self: flex-start;
}
.proposal-page .page-content {
  flex: 1;
  display: flex; flex-direction: column; gap: 14px;
  overflow-y: auto;        /* A4 범위 넘치면 내부 스크롤 */
  overflow-x: hidden;
  min-height: 0;            /* flex child 가 스크롤 가능해지도록 */
}
.proposal-page .page-content::-webkit-scrollbar { width: 6px; }
.proposal-page .page-content::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--proposal-accent) 30%, transparent);
  border-radius: 3px;
}
.proposal-page .page-summary {
  margin-top: auto;
  padding: 14px 20px;
  background: linear-gradient(135deg,
    var(--proposal-accent) 0%,
    color-mix(in oklab, var(--proposal-accent) 80%, #8b5cf6) 100%);
  color: #fff;
  border-radius: 10px;
  font-size: 15px; font-weight: 600;
  box-shadow: 0 6px 16px -6px color-mix(in oklab, var(--proposal-accent) 50%, transparent);
}

/* ──── accent 더 강하게 반영 ──── */
.proposal-page::before {
  color: color-mix(in oklab, var(--proposal-accent) 65%, #94a3b8);
  font-weight: 600;
}

/* 카드 그리드 — 배경·보더에 accent tint */
.proposal-page .card-grid .card {
  background: color-mix(in oklab, var(--proposal-accent) 5%, #fff);
  border: 1px solid color-mix(in oklab, var(--proposal-accent) 22%, #e5e7eb);
}
.proposal-page .card-grid .card .card-title {
  color: var(--proposal-accent);
}

/* 통계 강조 — accent 그라디언트 배경 */
.proposal-page .stat-highlight {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--proposal-accent) 12%, #fff) 0%,
    color-mix(in oklab, var(--proposal-accent) 4%, #fff) 100%);
  border: 1px solid color-mix(in oklab, var(--proposal-accent) 25%, #e5e7eb);
}
.proposal-page .stat-highlight .stat-big {
  color: var(--proposal-accent);
  filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--proposal-accent) 30%, transparent));
}

/* 스텝 플로우 — 좌측 accent 바 + 번호 강조 */
.proposal-page .step-flow .step {
  border-left: 4px solid var(--proposal-accent);
  background: color-mix(in oklab, var(--proposal-accent) 4%, #fff);
  padding: 10px 14px;
  border-radius: 0 8px 8px 0;
}
.proposal-page .step-flow .step-num { color: var(--proposal-accent); }

/* 번호 리스트 */
.proposal-page .num-list li::before { color: var(--proposal-accent); }

/* 비교 표 — 헤더를 accent 배경 */
.proposal-page .compare-table th {
  background: color-mix(in oklab, var(--proposal-accent) 10%, #f9fafb);
  color: var(--proposal-accent);
  border-bottom: 2px solid var(--proposal-accent);
}

/* 타임라인 */
.proposal-page .timeline .tl-date {
  color: var(--proposal-accent);
  font-weight: 700;
}
.proposal-page .timeline .tl-item {
  border-left: 3px solid color-mix(in oklab, var(--proposal-accent) 30%, #e5e7eb);
  padding-left: 14px;
  margin-left: 4px;
}

/* 콜아웃 */
.proposal-page .quote-callout {
  background: color-mix(in oklab, var(--proposal-accent) 7%, #fff);
  border-left: 5px solid var(--proposal-accent);
  color: #1f2937;
}

/* 섹션 divider 페이지 */
.proposal-page .divider-intro .divider-num {
  color: var(--proposal-accent);
  text-shadow: 0 6px 16px color-mix(in oklab, var(--proposal-accent) 25%, transparent);
}
.proposal-page .divider-intro .divider-title {
  color: color-mix(in oklab, var(--proposal-accent) 85%, #111);
}

/* 배지 primary — accent 사용 */
.proposal-page .badge-primary,
.proposal-page .badge.badge-primary {
  background: color-mix(in oklab, var(--proposal-accent) 15%, #fff);
  color: var(--proposal-accent);
  border: 1px solid color-mix(in oklab, var(--proposal-accent) 30%, transparent);
  font-weight: 600;
}

/* Action Caption — 좌측 바 accent */
.proposal-page .action-caption {
  border-left: 3px solid var(--proposal-accent);
  color: #1f2937;
}

/* 프로그레스 바 — 이미 accent 그라디언트 사용 중 */
.proposal-page .pl-bar > span,
.proposal-page .hbar > span {
  background: linear-gradient(90deg,
    var(--proposal-accent) 0%,
    color-mix(in oklab, var(--proposal-accent) 75%, #a78bfa) 100%);
}

/* As-is → To-be 비교 — To-be에 accent 강조 */
.proposal-page .asis-tobe .tobe {
  background: color-mix(in oklab, var(--proposal-accent) 8%, #fff);
  border: 1px solid color-mix(in oklab, var(--proposal-accent) 30%, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
}
.proposal-page .asis-tobe .arrow {
  color: var(--proposal-accent);
  font-size: 22px;
  font-weight: 700;
}

/* 플로우 노드 */
.proposal-page .arrow-flow .flow-node {
  background: color-mix(in oklab, var(--proposal-accent) 10%, #fff);
  border: 1.5px solid color-mix(in oklab, var(--proposal-accent) 35%, #d4d4d8);
  color: var(--proposal-accent);
  padding: 8px 14px; border-radius: 999px;
  font-weight: 600;
}
.proposal-page .arrow-flow .flow-arrow {
  color: var(--proposal-accent);
  font-size: 18px;
}

/* 벤다이어그램 — 원 색 accent */
.proposal-page .venn .venn-circle {
  background: color-mix(in oklab, var(--proposal-accent) 18%, transparent);
  border: 2px solid var(--proposal-accent);
  color: var(--proposal-accent);
}
.proposal-page .venn .venn-overlap {
  background: var(--proposal-accent);
  color: #fff;
}

/* 피라미드 */
.proposal-page .pyramid .pyr-top    { background: var(--proposal-accent); color: #fff; }
.proposal-page .pyramid .pyr-mid    { background: color-mix(in oklab, var(--proposal-accent) 60%, #fff); color: #fff; }
.proposal-page .pyramid .pyr-base   { background: color-mix(in oklab, var(--proposal-accent) 20%, #fff); color: var(--proposal-accent); }

/* 매트릭스 */
.proposal-page .matrix .mx-cell {
  background: color-mix(in oklab, var(--proposal-accent) 5%, #fff);
  border: 1px solid color-mix(in oklab, var(--proposal-accent) 22%, #e5e7eb);
}

/* 페이지 자체 약한 tint — 너무 강하지 않게 */
.proposal-page {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--proposal-accent) 2%, #fff) 0%,
    #fff 40%);
}
.keyword-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 14px; font-size: 12px; color: var(--fg-2);
  background: var(--bg-2); border-radius: 0 0 var(--radius) var(--radius);
  margin-top: -8px;
}
.keyword-row a { color: var(--primary); font-weight: 500; }
.keyword-row a:hover { text-decoration: underline; }

/* Proposal content block variants */
.proposal-page .card-grid { display: grid; gap: 14px; }
.proposal-page .card-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.proposal-page .card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.proposal-page .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.proposal-page .card-grid .card {
  border: 1px solid #e5e7eb; border-radius: 12px; padding: 16px; background: #fff; box-shadow: none;
  display: flex; flex-direction: column; gap: 6px;
}
.proposal-page .card-grid .card .card-title {
  font-size: 14px; font-weight: 700; color: var(--proposal-accent);
}
.proposal-page .card-grid .card .card-body {
  font-size: 13px; color: #374151; line-height: 1.55; padding: 0;
}
.proposal-page .step-flow { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 12px; }
.proposal-page .step-flow .step {
  border-left: 3px solid var(--proposal-accent); padding: 4px 12px 6px;
}
.proposal-page .step-flow .step-num {
  font-size: 11px; font-weight: 700; color: var(--proposal-accent); letter-spacing: 0.1em;
}
.proposal-page .step-flow .step-title { font-size: 14px; font-weight: 700; margin: 4px 0; }
.proposal-page .step-flow .step-desc { font-size: 12px; color: #4b5563; line-height: 1.5; }
.proposal-page .num-list { list-style: none; padding: 0; margin: 0; counter-reset: ni; display: flex; flex-direction: column; gap: 10px; }
.proposal-page .num-list li { counter-increment: ni; position: relative; padding-left: 44px; font-size: 14px; }
.proposal-page .num-list li::before {
  content: counter(ni, decimal-leading-zero);
  position: absolute; left: 0; top: -2px;
  font-weight: 800; font-size: 22px; color: var(--proposal-accent); letter-spacing: 0;
}
.proposal-page .num-list li b { display: block; font-weight: 700; color: #111827; font-size: 14px; }
.proposal-page .num-list li span { display: block; color: #4b5563; font-size: 13px; margin-top: 2px; }
.proposal-page .compare-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.proposal-page .compare-table th, .proposal-page .compare-table td {
  border-bottom: 1px solid #e5e7eb; padding: 10px 12px; text-align: left;
}
.proposal-page .compare-table th { background: #f9fafb; font-weight: 600; font-size: 12px; color: var(--proposal-accent); }
.proposal-page .stat-highlight {
  display: flex; align-items: baseline; gap: 14px;
  padding: 18px 22px; background: #f9fafb; border-radius: 14px; border: 1px solid #e5e7eb;
}
.proposal-page .stat-highlight .stat-big {
  font-size: 54px; font-weight: 800; color: var(--proposal-accent); letter-spacing: -0.03em; line-height: 1;
}
.proposal-page .stat-highlight .stat-label { font-size: 14px; color: #4b5563; }
.proposal-page .divider-intro {
  display: flex; flex-direction: column; justify-content: center; flex: 1;
  gap: 16px;
}
.proposal-page .divider-intro .divider-num {
  font-size: 180px; font-weight: 800; line-height: 0.9;
  color: var(--proposal-accent); letter-spacing: -0.05em;
}
.proposal-page .divider-intro .divider-title {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
}
.proposal-page .timeline { display: flex; flex-direction: column; gap: 10px; }
.proposal-page .timeline .tl-item { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid #e5e7eb; }
.proposal-page .timeline .tl-date { font-weight: 700; color: var(--proposal-accent); font-size: 13px; }
.proposal-page .timeline .tl-body { font-size: 13px; color: #374151; }
.proposal-page .quote-callout {
  padding: 18px 24px; border-left: 4px solid var(--proposal-accent);
  background: #f9fafb; border-radius: 8px;
  font-size: 17px; font-style: italic; color: #111827;
}
.proposal-page .img-placeholder {
  display: grid; place-items: center; min-height: 120px;
  background: #f3f4f6; border: 1px dashed #d1d5db; border-radius: 10px;
  color: #9ca3af; font-size: 13px;
}

/* === Shipley Action Caption — sits above/below a visualization === */
.proposal-page .action-caption {
  font-size: 13px; font-weight: 600; color: #111827;
  margin: 6px 0 4px; line-height: 1.55; letter-spacing: -0.005em;
  padding-left: 10px; border-left: 3px solid #111827;
}

/* === AI/스톡 이미지 플레이스홀더 === */
.proposal-page .ai-image {
  margin: 8px 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.proposal-page .ai-image-placeholder {
  display: grid; place-items: center;
  min-height: 140px;
  background: repeating-linear-gradient(45deg,
    color-mix(in oklab, var(--proposal-accent, #111) 4%, #fff) 0 12px,
    color-mix(in oklab, var(--proposal-accent, #111) 7%, #fff) 12px 24px);
  border: 1.5px dashed color-mix(in oklab, var(--proposal-accent, #111) 30%, #aaa);
  border-radius: 8px;
  color: color-mix(in oklab, var(--proposal-accent, #111) 70%, #333);
  font-size: 12px; font-weight: 600; letter-spacing: 0.03em;
}
.proposal-page .ai-image img {
  width: 100%; max-height: 220px; object-fit: cover;
  border-radius: 8px; border: 1px solid var(--border);
}
.proposal-page .ai-image figcaption {
  font-size: 11.5px; color: #4b5563; line-height: 1.5;
  padding-left: 8px; border-left: 2px solid var(--proposal-accent, #111);
}

/* === Floor plan (행사장 평면도 SVG) — B&W === */
.proposal-page .floor-plan {
  display: flex; flex-direction: column; gap: 10px;
  margin: 6px 0 4px;
}
.proposal-page .floor-plan-svg {
  width: 100%; max-height: 280px;
  background: #fff;
  border: 1.5px solid #111827;
  border-radius: 10px;
  display: block;
}
.proposal-page .floor-plan-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 4px 18px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb; border-radius: 8px;
  background: #fafafa;
}
.proposal-page .floor-plan-legend .legend-item {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px; color: #374151; line-height: 1.5;
}
.proposal-page .floor-plan-legend .legend-key {
  font-weight: 700; color: #111827; white-space: nowrap;
}
.proposal-page .floor-plan-legend .legend-desc {
  color: #4b5563;
}

/* 프린트 — SVG는 벡터라 축소되어도 선명 */
@media print {
  #print-mount .floor-plan-svg {
    max-height: none !important;
    border-width: 1pt !important;
  }
  #print-mount .floor-plan-legend {
    font-size: 10pt !important;
    background: #f9f9f9 !important;
  }
  #print-mount .floor-plan { break-inside: avoid; page-break-inside: avoid; }
}

/* === Compliance missing-alert (B&W, 강한 시각적 경고) === */
.proposal-page .missing-alert {
  margin-top: 18px; padding: 14px 18px;
  border: 2px solid #111827; border-radius: 10px; background: #fff;
  position: relative;
}
.proposal-page .missing-alert::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 6px; background:
    repeating-linear-gradient(45deg, #111827 0 6px, #fff 6px 12px);
}
.proposal-page .missing-alert h4 {
  margin: 0 0 8px; font-size: 14px; font-weight: 700; color: #111827;
  padding-left: 6px;
}
.proposal-page .missing-alert ul {
  margin: 0; padding-left: 24px; font-size: 13px; color: #374151; line-height: 1.6;
}
.proposal-page .missing-alert li { margin: 2px 0; }

/* === B&W visualization primitives — all monochrome, no color === */

/* Arrow flow (process / change) */
.proposal-page .arrow-flow {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 4px 0;
}
.proposal-page .arrow-flow .flow-node {
  padding: 10px 16px; border: 1.5px solid #111827; border-radius: 8px;
  font-weight: 600; font-size: 13px; min-width: 84px; text-align: center; background: #fff;
}
.proposal-page .arrow-flow .flow-arrow {
  color: #111827; font-size: 20px; font-weight: 700; user-select: none;
}

/* Two-column compare */
.proposal-page .two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  position: relative;
}
.proposal-page .two-col .col { padding: 4px 8px; }
.proposal-page .two-col .col-title {
  font-size: 13px; font-weight: 700; padding-bottom: 8px; margin: 0 0 12px;
  border-bottom: 2px solid #111827; letter-spacing: 0.02em;
}
.proposal-page .two-col::before {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
  border-left: 1px dashed #d1d5db;
}
.proposal-page .two-col p { font-size: 13px; color: #374151; margin: 6px 0; line-height: 1.6; }

/* Progress bar list (metrics / capability) */
.proposal-page .progress-list { display: flex; flex-direction: column; gap: 12px; }
.proposal-page .progress-list .pl-item {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center;
}
.proposal-page .progress-list .pl-label {
  grid-column: 1 / 2; font-size: 13px; font-weight: 600; color: #111827;
}
.proposal-page .progress-list .pl-pct {
  grid-column: 2 / 3; font-size: 13px; font-weight: 700; color: #111827;
}
.proposal-page .progress-list .pl-bar {
  grid-column: 1 / 3; height: 8px; background: #e5e7eb; border-radius: 999px; overflow: hidden;
}
.proposal-page .progress-list .pl-bar > span {
  display: block; height: 100%; background: #111827; border-radius: 999px;
}

/* Donut chart (SVG, B&W) */
.proposal-page .donut-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px;
}
.proposal-page .donut {
  display: flex; align-items: center; gap: 14px;
}
.proposal-page .donut svg { width: 96px; height: 96px; flex-shrink: 0; }
.proposal-page .donut .donut-bg { stroke: #e5e7eb; }
.proposal-page .donut .donut-fg { stroke: #111827; }
.proposal-page .donut .donut-text-big {
  font-size: 28px; font-weight: 800; color: #111827; line-height: 1; letter-spacing: -0.02em;
}
.proposal-page .donut .donut-text-label {
  font-size: 12px; color: #4b5563; margin-top: 4px; line-height: 1.4;
}

/* Venn diagram (2 overlapping circles, border-only, no color) */
.proposal-page .venn {
  position: relative; height: 210px; max-width: 420px; margin: 6px auto 10px;
}
.proposal-page .venn .venn-circle {
  position: absolute; width: 170px; height: 170px;
  border: 1.8px solid #111827; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 700; text-align: center;
  background: rgba(255,255,255,0.6);
}
.proposal-page .venn .venn-a { left: 30px; top: 20px; }
.proposal-page .venn .venn-b { right: 30px; top: 20px; }
.proposal-page .venn .venn-overlap-label {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #111827; color: #fff;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  white-space: nowrap;
}

/* Badge / tag chips (within proposal) */
.proposal-page .p-tag-group {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.proposal-page .p-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border: 1.2px solid #111827; border-radius: 999px;
  font-size: 12px; font-weight: 500; color: #111827; background: #fff;
}
.proposal-page .p-badge-filled {
  background: #111827; color: #fff; border-color: #111827;
}

/* Strategy box / grid */
.proposal-page .strategy-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px;
}
.proposal-page .strategy-box {
  padding: 14px 16px; border: 1.5px solid #111827; border-radius: 10px; background: #fff;
  display: flex; flex-direction: column; gap: 6px;
}
.proposal-page .strategy-box .sb-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #4b5563;
}
.proposal-page .strategy-box .sb-title {
  font-size: 15px; font-weight: 700; color: #111827; margin: 0;
}
.proposal-page .strategy-box .sb-body {
  font-size: 12px; color: #374151; line-height: 1.55; margin: 2px 0 0;
}

/* ============================================================
   디렉터즈 스타일 레이아웃 프리셋 — data-layout="..."
   7종: strategy-4cards / step-process / timeline-4step /
        gantt-d-day / manual-table / threshold-table / target-matrix
   ============================================================ */

/* 공통 — breadcrumb (페이지 좌상단) 강조 */
.proposal-page[data-layout] .page-section-name {
  display: block !important;
  position: absolute; top: 26px; left: 48px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  color: color-mix(in oklab, var(--proposal-accent) 70%, #6b7280);
  text-transform: none;
  z-index: 1;
}
.proposal-page[data-layout]::before { display: none; }

/* ───── 1) strategy-4cards — 4개 병렬 전략 카드 ───── */
.proposal-page[data-layout="strategy-4cards"] .strategy-4cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 4px;
}
.proposal-page[data-layout="strategy-4cards"] .s4-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 18px 16px;
  background: linear-gradient(160deg,
    color-mix(in oklab, var(--proposal-accent) 6%, #fff) 0%,
    #ffffff 100%);
  border: 1px solid color-mix(in oklab, var(--proposal-accent) 25%, #e5e7eb);
  border-radius: 12px;
  border-top: 4px solid var(--proposal-accent);
  box-shadow: 0 4px 10px -4px color-mix(in oklab, var(--proposal-accent) 20%, transparent);
  min-width: 0;
}
.proposal-page[data-layout="strategy-4cards"] .s4-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--proposal-accent); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: 0.02em;
}
.proposal-page[data-layout="strategy-4cards"] .s4-title {
  font-size: 15px; font-weight: 700; color: #111827;
  letter-spacing: -0.01em;
}
.proposal-page[data-layout="strategy-4cards"] .s4-body {
  font-size: 12.5px; color: #374151; line-height: 1.55;
}

/* ───── 2) step-process — STEP 1→2→3→4 가로 프로세스 ───── */
.proposal-page[data-layout="step-process"] .step-process-flow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin-top: 6px;
  position: relative;
}
.proposal-page[data-layout="step-process"] .sp-step {
  position: relative;
  padding: 20px 22px 18px 30px;
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--proposal-accent) 22%, #e5e7eb);
  border-left: 4px solid var(--proposal-accent);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%);
  min-width: 0;
}
.proposal-page[data-layout="step-process"] .sp-step:first-child {
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%);
  border-radius: 10px 0 0 10px;
}
.proposal-page[data-layout="step-process"] .sp-step:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%);
  border-radius: 0 10px 10px 0;
}
.proposal-page[data-layout="step-process"] .sp-num {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--proposal-accent); margin-bottom: 4px;
}
.proposal-page[data-layout="step-process"] .sp-title {
  font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 4px;
}
.proposal-page[data-layout="step-process"] .sp-desc {
  font-size: 12px; color: #4b5563; line-height: 1.5;
}

/* ───── 3) timeline-4step — 4단계 타임라인 (D-60 → D+30) ───── */
.proposal-page[data-layout="timeline-4step"] .timeline-4step-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 10px;
  position: relative;
}
.proposal-page[data-layout="timeline-4step"] .timeline-4step-row::before {
  content: ""; position: absolute;
  top: 28px; left: 6%; right: 6%;
  height: 3px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--proposal-accent) 20%, #e5e7eb) 0%,
    var(--proposal-accent) 100%);
  border-radius: 2px;
}
.proposal-page[data-layout="timeline-4step"] .t4-node {
  position: relative;
  padding: 44px 14px 14px;
  text-align: center;
  min-width: 0;
}
.proposal-page[data-layout="timeline-4step"] .t4-node::before {
  content: ""; position: absolute;
  top: 21px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px;
  background: var(--proposal-accent); border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--proposal-accent);
}
.proposal-page[data-layout="timeline-4step"] .t4-stage {
  font-size: 14px; font-weight: 800; color: var(--proposal-accent);
  letter-spacing: -0.01em;
}
.proposal-page[data-layout="timeline-4step"] .t4-range {
  font-size: 11px; font-weight: 600;
  color: color-mix(in oklab, var(--proposal-accent) 60%, #6b7280);
  margin: 3px 0 6px;
}
.proposal-page[data-layout="timeline-4step"] .t4-body {
  font-size: 12px; color: #374151; line-height: 1.5;
}

/* ───── 4) gantt-d-day — D-일정 간트 차트 ───── */
.proposal-page[data-layout="gantt-d-day"] .gantt-d-day-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 12px;
  margin-top: 4px;
}
.proposal-page[data-layout="gantt-d-day"] .gantt-d-day-table thead th {
  background: color-mix(in oklab, var(--proposal-accent) 8%, #fff);
  color: var(--proposal-accent);
  font-weight: 700; font-size: 11px;
  padding: 8px 6px;
  border-bottom: 2px solid var(--proposal-accent);
  text-align: center;
}
.proposal-page[data-layout="gantt-d-day"] .gantt-d-day-table thead th:first-child {
  text-align: left; padding-left: 12px;
}
.proposal-page[data-layout="gantt-d-day"] .gantt-d-day-table tbody td {
  padding: 8px 4px;
  border-bottom: 1px solid #e5e7eb;
  text-align: center; font-size: 11.5px;
  color: #374151;
}
.proposal-page[data-layout="gantt-d-day"] .gantt-d-day-table tbody td:first-child {
  text-align: left; font-weight: 700; color: #111827;
  padding-left: 12px;
  background: #fafafa;
}
.proposal-page[data-layout="gantt-d-day"] .gantt-d-day-table td.g-on {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--proposal-accent) 15%, #fff) 0%,
    color-mix(in oklab, var(--proposal-accent) 35%, #fff) 100%);
  color: #111827; font-weight: 600;
  border-left: 3px solid var(--proposal-accent);
}

/* ───── 5) manual-table — 상세 매뉴얼/배치표 ───── */
.proposal-page[data-layout="manual-table"] .manual-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 4px;
}
.proposal-page[data-layout="manual-table"] .manual-table thead th {
  background: var(--proposal-accent);
  color: #fff; font-weight: 700; font-size: 12px;
  padding: 10px 12px; text-align: left;
  letter-spacing: -0.01em;
}
.proposal-page[data-layout="manual-table"] .manual-table thead th:first-child { border-top-left-radius: 8px; }
.proposal-page[data-layout="manual-table"] .manual-table thead th:last-child  { border-top-right-radius: 8px; }
.proposal-page[data-layout="manual-table"] .manual-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
  color: #374151; font-size: 11.5px; line-height: 1.5;
  vertical-align: top;
}
.proposal-page[data-layout="manual-table"] .manual-table tbody td:first-child {
  font-weight: 700; color: var(--proposal-accent);
  background: color-mix(in oklab, var(--proposal-accent) 4%, #fff);
  white-space: nowrap;
}
.proposal-page[data-layout="manual-table"] .manual-table tbody tr:nth-child(even) td:not(:first-child) {
  background: #fafafa;
}

/* ───── 6) threshold-table — 단계별 임계치 조치표 ───── */
.proposal-page[data-layout="threshold-table"] .threshold-table {
  width: 100%;
  border-collapse: separate; border-spacing: 0;
  font-size: 13px;
  margin-top: 6px;
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 6px -2px rgba(0,0,0,0.08);
}
.proposal-page[data-layout="threshold-table"] .threshold-table thead th {
  background: #111827; color: #fff; font-weight: 700;
  padding: 10px 14px; text-align: left;
  font-size: 12px; letter-spacing: -0.01em;
}
.proposal-page[data-layout="threshold-table"] .threshold-table tbody tr {
  border-left: 5px solid;
}
.proposal-page[data-layout="threshold-table"] .threshold-table tbody td {
  padding: 12px 14px; border-bottom: 1px solid #e5e7eb;
  font-size: 12.5px; line-height: 1.5; color: #1f2937;
  vertical-align: top;
}
.proposal-page[data-layout="threshold-table"] .threshold-table tbody td:first-child {
  font-weight: 800; font-size: 14px;
  width: 90px;
}
.proposal-page[data-layout="threshold-table"] .threshold-table tbody tr.th-lv1 {
  background: #f0fdf4;
  border-left-color: #16a34a;
}
.proposal-page[data-layout="threshold-table"] .threshold-table tbody tr.th-lv1 td:first-child { color: #16a34a; }
.proposal-page[data-layout="threshold-table"] .threshold-table tbody tr.th-lv2 {
  background: #fef9c3;
  border-left-color: #ca8a04;
}
.proposal-page[data-layout="threshold-table"] .threshold-table tbody tr.th-lv2 td:first-child { color: #a16207; }
.proposal-page[data-layout="threshold-table"] .threshold-table tbody tr.th-lv3 {
  background: #fee2e2;
  border-left-color: #dc2626;
}
.proposal-page[data-layout="threshold-table"] .threshold-table tbody tr.th-lv3 td:first-child { color: #b91c1c; }

/* ───── 7) target-matrix — 타깃 × 메시지 × 채널 매트릭스 ───── */
.proposal-page[data-layout="target-matrix"] .target-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  margin-top: 4px;
}
.proposal-page[data-layout="target-matrix"] .target-matrix thead th {
  background: color-mix(in oklab, var(--proposal-accent) 12%, #fff);
  color: var(--proposal-accent);
  font-weight: 700; font-size: 12px;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 2px solid var(--proposal-accent);
  letter-spacing: -0.01em;
}
.proposal-page[data-layout="target-matrix"] .target-matrix tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 12.5px; line-height: 1.55;
  vertical-align: top;
}
.proposal-page[data-layout="target-matrix"] .target-matrix tbody td:nth-child(1) {
  font-weight: 700; color: #111827;
  width: 22%;
}
.proposal-page[data-layout="target-matrix"] .target-matrix tbody td:nth-child(2) {
  color: #374151; font-style: italic;
  width: 46%;
  border-left: 3px solid color-mix(in oklab, var(--proposal-accent) 30%, transparent);
  padding-left: 18px;
}
.proposal-page[data-layout="target-matrix"] .target-matrix tbody td:nth-child(3) {
  color: color-mix(in oklab, var(--proposal-accent) 70%, #4b5563);
  font-weight: 600;
  width: 32%;
}

/* 포인트 컬러 피커 (채팅 헤더) */
.accent-picker {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 8px;
  cursor: pointer; font-size: 12px; color: var(--fg-2);
  background: #fff;
}
.accent-picker:hover { border-color: var(--primary); color: var(--fg); }
.accent-picker input[type="color"] {
  width: 20px; height: 20px; padding: 0; border: none; background: transparent;
  cursor: pointer;
}
.accent-picker .accent-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: linear-gradient(135deg, #6b46e5, #ec4899, #f59e0b);
  flex-shrink: 0;
}

/* ===== 산출내역서 모달 (고정 양식) ===== */
/* ============================================================
   🔍 자체 검증 모달 (Compliance + Red Team)
   ============================================================ */
.audit-modal {
  max-width: 880px !important;
  width: 92vw;
  max-height: 88vh;
  display: flex; flex-direction: column;
}
.audit-body {
  overflow-y: auto;
  padding: 20px 24px 24px;
  display: flex; flex-direction: column; gap: 20px;
}
.audit-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 60px 20px;
}
.audit-error {
  padding: 40px 20px;
  color: var(--fg);
}
.audit-summary {
  padding: 14px 18px;
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--primary) 8%, #fff) 0%,
    color-mix(in oklab, var(--accent, #FF8E5C) 6%, #fff) 100%);
  border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg);
}
.audit-summary p { margin: 0; }

.audit-section {
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.audit-section-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.audit-section-head h4 {
  margin: 0;
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.audit-progress-wrap {
  height: 8px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--primary) 8%, var(--bg-2));
  overflow: hidden;
}
.audit-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 60%, var(--accent, #FF8E5C)));
  transition: width 0.4s ease;
}

.audit-block { padding-top: 6px; }
.audit-block-label {
  margin: 0 0 8px;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--fg);
  cursor: default;
}
details.audit-block summary.audit-block-label {
  cursor: pointer;
  user-select: none;
  list-style: none;
}
details.audit-block summary.audit-block-label::-webkit-details-marker { display: none; }
details.audit-block[open] summary.audit-block-label::after { content: " ▾"; }
details.audit-block:not([open]) summary.audit-block-label::after { content: " ▸"; }

.audit-list {
  margin: 0;
  padding-left: 18px;
  display: flex; flex-direction: column; gap: 8px;
  font-size: 14px; line-height: 1.55;
}
.audit-list.small { font-size: 13px; }
.audit-list li { color: var(--fg); }
.audit-list li strong { color: var(--fg); margin-right: 8px; }
.audit-tag {
  display: inline-block;
  margin: 0 0 0 6px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 600;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  border-radius: 999px;
  vertical-align: 2px;
}
.audit-tag.gain {
  background: color-mix(in oklab, var(--success) 12%, transparent);
  color: var(--success);
}
.audit-advice {
  margin: 4px 0 0;
  padding: 6px 10px;
  font-size: 12.5px; line-height: 1.55;
  background: color-mix(in oklab, var(--primary) 5%, var(--bg-2));
  border-radius: 6px;
  color: var(--fg-2);
}
.audit-where {
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 11px;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  border-radius: 4px;
}

/* Red Team 점수 */
.audit-score { margin: 0; }
.audit-score-num {
  font-size: 28px; font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
}
.audit-score-max {
  font-size: 14px; color: var(--fg-2);
  font-weight: 600;
}
.audit-criterion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.audit-criterion {
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.audit-crit-name { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--fg); }
.audit-crit-score { margin: 0 0 8px; font-size: 16px; }
.audit-crit-score strong { color: var(--primary); font-size: 18px; }
.audit-crit-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.audit-crit-bar-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
}
.audit-crit-reason {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
}

/* 강점 / 약점 그리드 */
.audit-sw-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.audit-sw {
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.audit-sw.audit-strengths {
  background: color-mix(in oklab, var(--success) 5%, var(--bg-2));
  border-color: color-mix(in oklab, var(--success) 18%, transparent);
}
.audit-sw.audit-weaknesses {
  background: color-mix(in oklab, var(--danger, #dc2626) 5%, var(--bg-2));
  border-color: color-mix(in oklab, var(--danger, #dc2626) 18%, transparent);
}

.audit-block.missing {
  padding: 12px 14px;
  background: color-mix(in oklab, var(--danger, #dc2626) 4%, var(--bg-2));
  border: 1px solid color-mix(in oklab, var(--danger, #dc2626) 18%, transparent);
  border-radius: 10px;
}
.audit-block.improvement {
  padding: 12px 14px;
  background: color-mix(in oklab, var(--accent, #FF8E5C) 5%, var(--bg-2));
  border: 1px solid color-mix(in oklab, var(--accent, #FF8E5C) 22%, transparent);
  border-radius: 10px;
}

@media (max-width: 720px) {
  .audit-criterion-grid { grid-template-columns: 1fr; }
  .audit-sw-grid { grid-template-columns: 1fr; }
}

.budget-modal {
  max-width: 1200px !important;
  width: 95vw;
  max-height: 92vh;
  display: flex; flex-direction: column;
}
.budget-body { overflow-y: auto; padding: 18px 22px 10px; }
.budget-title {
  width: 100%;
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  padding: 10px 12px; margin-bottom: 14px;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--fg);
}
.budget-title:hover { border-color: var(--border); }
.budget-title:focus {
  outline: none; border-color: var(--primary);
  background: var(--primary-soft);
}

.budget-fixed-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px; table-layout: fixed;
}
.budget-fixed-table th {
  background: linear-gradient(180deg, var(--bg-2), #eaeaec);
  color: var(--fg); font-weight: 700; font-size: 11.5px;
  padding: 10px 8px; border: 1px solid var(--border-strong);
  letter-spacing: 0.01em;
}
.budget-fixed-table td {
  padding: 6px 8px; border: 1px solid var(--border);
  vertical-align: middle; line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis;
}
.budget-fixed-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.budget-fixed-table td[contenteditable="true"] { cursor: text; }
.budget-fixed-table td[contenteditable="true"]:hover { background: color-mix(in oklab, var(--primary) 3%, #fff); }
.budget-fixed-table td[contenteditable="true"]:focus {
  outline: 2px solid var(--primary); outline-offset: -2px;
  background: color-mix(in oklab, var(--primary) 6%, #fff);
}
.budget-fixed-table td.budget-cat-cell {
  background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 10%, #fff), color-mix(in oklab, var(--primary) 6%, #fff));
  font-weight: 700; color: var(--primary);
  text-align: center; vertical-align: middle;
  font-size: 13px; letter-spacing: -0.01em;
}
.budget-fixed-table tr.budget-sub-row {
  background: var(--bg-2);
}
.budget-fixed-table tr.budget-sub-row td {
  border-top: 2px solid var(--border-strong);
  border-bottom: 2px solid var(--border-strong);
}

/* 요약 박스 */
.budget-summary {
  margin-top: 20px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 20px;
  display: flex; flex-direction: column; gap: 4px;
}
.budget-sum-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 2px;
  font-size: 13.5px;
}
.budget-sum-row .sum-label { color: var(--fg-2); }
.budget-sum-row .sum-value { font-weight: 600; font-variant-numeric: tabular-nums; }
.budget-sum-row .sum-value.strong { font-weight: 700; color: var(--fg); }
.budget-sum-row.accent .sum-value { color: var(--primary); }
.budget-sum-row.huge {
  border-top: 2px solid var(--primary); margin-top: 8px; padding-top: 14px;
  font-size: 16px;
}
.budget-sum-row.huge .sum-label { color: var(--fg); font-weight: 700; }
.budget-sum-row.huge .sum-value { color: var(--primary); font-size: 22px; font-weight: 800; }

/* ===== 투찰율 영역 (슬라이더 + 숫자 결합) — 합계 영역 안 ===== */
.budget-sum-row.bid-rate-row {
  background: var(--primary-soft, rgba(107, 70, 229, 0.10));
  border-radius: 10px;
  padding: 10px 14px;
  margin: 8px 0 4px;
}
.bid-rate-controls {
  display: flex; align-items: center; gap: 10px;
  min-width: 240px;
}
.bid-rate-slider {
  flex: 1; min-width: 100px;
  height: 6px;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, var(--primary) 0%, var(--primary) 50%, var(--border) 50%, var(--border) 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.bid-rate-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--primary);
  cursor: pointer;
  box-shadow: 0 2px 6px -2px rgba(107, 70, 229, 0.5);
}
.bid-rate-slider::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%; border: 0;
  background: var(--primary);
  cursor: pointer;
}
.bid-rate-number {
  width: 64px; padding: 4px 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
}
.bid-rate-number::-webkit-outer-spin-button,
.bid-rate-number::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.bid-rate-number:focus {
  outline: none; border-color: var(--primary);
}
.bid-rate-pct-suffix {
  font-size: 13px; color: var(--fg-2); font-weight: 500;
}

/* 투찰가 영역 — 노랑 강조 (= xlsx grand_fill 정합) */
.budget-sum-row.bid-price-row {
  background: #FFF3CD;
  border: 1px solid #F5D875;
  border-top: 2px solid var(--primary);
  margin-top: 8px; padding: 14px 16px;
  border-radius: 10px;
}
.budget-sum-row.bid-price-row .sum-label { color: var(--fg); font-weight: 700; }
.budget-sum-row.bid-price-row .sum-value { color: #1A1A1A; font-size: 22px; font-weight: 800; }

/* ===== Proposal fullscreen viewer ===== */
.proposal-viewer-backdrop {
  background: rgba(15, 15, 20, 0.72);
}
.proposal-viewer {
  width: 100%; max-width: 1240px; height: 95vh;
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.proposal-viewer-topbar {
  flex-shrink: 0;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  background: #fff;
}
.proposal-viewer-topbar .pv-title {
  font-size: 16px; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.proposal-viewer-topbar .pv-meta {
  display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--fg-2);
}
.proposal-viewer-topbar .pv-close-btn {
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--bg-2); color: var(--fg);
  border: 1px solid var(--border);
  cursor: pointer; transition: all 0.12s;
}
.proposal-viewer-topbar .pv-close-btn:hover {
  background: var(--danger-soft); color: var(--danger); border-color: var(--danger);
}
.proposal-viewer-scroll {
  flex: 1; overflow-y: auto;
  padding: 28px 36px 40px;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.proposal-viewer-scroll .proposal {
  width: 100%; max-width: 1100px;
  display: flex; flex-direction: column; gap: 22px;
}
.proposal-viewer-scroll .proposal-page {
  width: 100%;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,0.18);
}
.pv-page-num {
  position: absolute; bottom: 14px; right: 20px;
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: #fff; padding: 2px 8px; border-radius: 4px;
}

/* 스트리밍 중 페이지 — 부드러운 fade-in */
.proposal-page {
  animation: pageFadeIn 0.35s ease-out both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Proposal thumbnail card (채팅에 박히는 미니 카드)
   - 원본 큰 제안서는 hidden 에 숨김
   - 카드는 "썸네일 미리보기 + 전체화면 버튼 + 인쇄"
   ============================================================ */
.proposal-thumb-card {
  margin: 14px 0 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: cardIn .25s ease-out both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.proposal-thumb-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #faf8ff 0%, #fff 55%);
  border-bottom: 1px solid var(--border);
}
.proposal-thumb-header .thumb-label {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--primary);
  text-transform: uppercase; margin-bottom: 2px;
}
.proposal-thumb-header .thumb-title {
  margin: 0; font-size: 16px; font-weight: 700;
  color: var(--fg); letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proposal-thumb-header .thumb-meta {
  margin-top: 4px; font-size: 12px; color: var(--fg-2);
}
.proposal-thumb-header .thumb-open {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-size: 13px; font-weight: 600;
  border-radius: 10px;
}
.proposal-thumb-header .thumb-open svg { flex-shrink: 0; }

/* 썸네일 미리보기 — A4 가로형 축소 */
.proposal-thumb-preview {
  position: relative;
  padding: 18px 20px;
  background: linear-gradient(180deg, #f7f7fb 0%, #eef0f7 100%);
  max-height: 420px;
  overflow: hidden;
}
.proposal-thumb-preview::after {
  /* 하단 fade-out — 전체화면 버튼 유도 */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60px;
  background: linear-gradient(180deg, rgba(238,240,247,0) 0%, #eef0f7 100%);
  pointer-events: none;
}
.proposal-thumb-stage {
  /* 썸네일은 실제 A4 가로 비율로 축소해서 첫 2~3 페이지만 보이게 */
  transform-origin: top center;
  transform: scale(0.42);
  width: 238%;  /* scale 보정 */
  margin: 0 auto;
  pointer-events: none;  /* 썸네일은 클릭 비활성 — 버튼 유도 */
}
.proposal-thumb-stage .proposal {
  margin: 0;
  gap: 14px;
}
.proposal-thumb-stage .proposal-page {
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.12);
  animation: none;
}
/* 썸네일 모드에서는 최대 3 페이지만 */
.proposal-thumb-mode .proposal-page:nth-of-type(n+4) { display: none; }

/* 하단 액션 바 */
.proposal-thumb-actions {
  display: flex; gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: #fff;
}
.proposal-thumb-actions .btn { font-size: 13px; padding: 8px 12px; }

/* 원본 숨김 영역 */
.proposal-hidden { display: none !important; }

/* ============================================================
   생성 진행 표시 바 (스트리밍 중 상단 고정)
   ============================================================ */
.stream-progress {
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(135deg, #ffffff 0%, #faf8ff 100%);
  border: 1px solid color-mix(in oklab, var(--primary) 20%, var(--border));
  border-radius: 14px;
  padding: 14px 18px 12px;
  margin: 0 0 14px;
  box-shadow: 0 4px 16px -6px rgba(107, 70, 229, 0.22);
  animation: progressIn .3s ease-out both;
  transition: opacity .35s ease, transform .35s ease, max-height .4s ease;
  overflow: hidden;
}
@keyframes progressIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stream-progress.fade-out {
  opacity: 0;
  transform: translateY(-8px);
  max-height: 0;
  padding-top: 0; padding-bottom: 0;
  margin-bottom: 0;
  border-width: 0;
}
.stream-progress .sp-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.stream-progress .sp-spinner {
  width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid color-mix(in oklab, var(--primary) 20%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spSpin 0.7s linear infinite;
}
@keyframes spSpin { to { transform: rotate(360deg); } }
.stream-progress .sp-section {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stream-progress .sp-count {
  flex-shrink: 0;
  font-size: 12px; font-weight: 700;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 3px 10px; border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.stream-progress .sp-bar {
  position: relative;
  height: 6px; border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 12%, #eef0f7);
  overflow: hidden;
}
.stream-progress .sp-bar-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 60%, #a78bfa) 100%);
  border-radius: inherit;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 12px color-mix(in oklab, var(--primary) 50%, transparent);
}
.stream-progress .sp-bar-fill::after {
  /* shimmer */
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 40%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
  animation: spShimmer 1.4s linear infinite;
}
@keyframes spShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(250%); }
}
.stream-progress.indeterminate .sp-bar-fill {
  width: 35% !important;
  animation: spIndeterminate 1.2s ease-in-out infinite;
}
@keyframes spIndeterminate {
  0%   { margin-left: -35%; }
  100% { margin-left: 100%; }
}

/* ===== Modal ===== */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100;
  display: grid; place-items: center; padding: 20px; animation: fadeIn .15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 440px; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-header h3 { margin: 0; font-size: 17px; font-weight: 600; }
.modal-body { padding: 22px; display: flex; flex-direction: column; gap: 20px; }
.modal-footer { padding: 14px 22px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* API 키 진단 결과 박스 */
.settings-diagnostic {
  margin: 0 22px 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-2);
  font-size: 13px; line-height: 1.55;
  color: var(--fg);
  border: 1px solid var(--border);
  white-space: normal;
}
.settings-diagnostic.hidden { display: none; }
.settings-diagnostic.ok  { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.settings-diagnostic.err { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.settings-diagnostic strong { display: block; margin-bottom: 4px; font-size: 13.5px; }
.settings-diagnostic .small { display: inline-block; margin-top: 4px; }

/* (설정 진입점은 사이드바 하단으로 이동됨 — 이전 .settings-fab floating 버튼 영역 제거) */

/* ===== Toast ===== */
.toast-root { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 12px 18px; border-radius: 10px;
  background: #18181b; color: #fff; font-size: 14px; box-shadow: var(--shadow-lg);
  animation: toastIn .2s ease;
}
.toast.error { background: #dc2626; }
.toast.success { background: #16a34a; }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ===== Misc ===== */
.row-gap-10 { display: flex; flex-direction: column; gap: 10px; }
.row-gap-14 { display: flex; flex-direction: column; gap: 14px; }
.row-gap-18 { display: flex; flex-direction: column; gap: 18px; }
.row-gap-24 { display: flex; flex-direction: column; gap: 24px; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex-row { display: flex; align-items: center; gap: 10px; }
.muted { color: var(--fg-2); }
.small { font-size: 13px; }
.back-link { display: inline-flex; gap: 6px; align-items: center; color: var(--fg-2); font-size: 14px; margin-bottom: 14px; transition: color .15s; }
.back-link:hover { color: var(--fg); }
.empty-state { padding: 36px 20px; text-align: center; color: var(--fg-2); font-size: 14px; }

/* ===== Loading dots ===== */
.loading-dots { display: inline-flex; gap: 4px; }
.loading-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--muted);
  animation: bounce 1.4s infinite ease-in-out both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }

/* ===== JSON 스트리밍 placeholder — raw JSON 텍스트 노출 차단 ===== */
.json-stream-placeholder {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-size: 14px;
  color: var(--fg-2);
}
.json-stream-placeholder .muted { color: var(--fg-2); }

/* ===== Loading overlay — 중앙 카드형 (옅은 회색 딤 + 카드 입체감) ===== */
.fs-loader-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  animation: fs-fade-in 0.22s ease-out;
  cursor: wait;
  /* 옅은 회색 톤 — 뒷화면 보이되 카드가 떠 보이게 (까만 필터 X) */
  background: rgba(28, 32, 44, 0.14);
  backdrop-filter: blur(2px) saturate(0.96);
  -webkit-backdrop-filter: blur(2px) saturate(0.96);
  pointer-events: auto;
}
.fs-loader-backdrop.closing {
  animation: fs-fade-out 0.26s ease-out forwards;
}
/* legacy 호환 — fs-loader-clear 클래스가 명시돼도 같은 스타일 (회색 톤 유지) */
.fs-loader-backdrop.fs-loader-clear {
  background: rgba(28, 32, 44, 0.14);
  backdrop-filter: blur(2px) saturate(0.96);
  -webkit-backdrop-filter: blur(2px) saturate(0.96);
}
body.fs-loader-active {
  overflow: hidden;
  user-select: none;
}
/* 중앙 카드 — 흰 배경 + 강한 그림자 (입체감 강조) */
.fs-loader-content,
.fs-loader-card {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  padding: 28px 36px;
  text-align: center;
  max-width: min(420px, 80vw);
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
  border-radius: 18px;
  box-shadow:
    0 32px 64px -16px rgba(15, 15, 20, 0.30),
    0 12px 28px -8px rgba(15, 15, 20, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  animation: fs-card-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.fs-spinner {
  width: 48px; height: 48px;
  border: 3.5px solid color-mix(in oklab, var(--primary) 12%, transparent);
  border-top-color: var(--primary);
  border-right-color: color-mix(in oklab, var(--primary) 70%, #fff);
  border-radius: 50%;
  animation: fs-spin 0.85s linear infinite;
}
/* 메시지 — 카드 안 어두운 배경 → 어두운 텍스트로 변경 */
.fs-message-text {
  color: var(--fg);
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.01em;
  min-height: 22px;
  max-width: 360px;
  text-align: center;
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.fs-message-text.fade-out { opacity: 0; transform: translateY(4px); }
@keyframes fs-card-in {
  from { opacity: 0; transform: scale(0.92) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fs-spin { to { transform: rotate(360deg); } }
@keyframes fs-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fs-fade-out { to { opacity: 0; } }

/* ===== Soft pulse loader (토스/카뱅 스타일) ===== */
.soft-loader {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 999px;
  font-size: 14px; font-weight: 500;
  animation: soft-pulse 1.8s ease-in-out infinite;
}
.soft-loader.block {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 24px; border-radius: 14px;
  font-size: 15px;
}
.soft-loader .soft-emoji { font-size: 18px; }
.soft-loader.block .soft-emoji { font-size: 22px; }
.soft-loader .soft-text {
  transition: opacity .4s ease;
}
.soft-loader .soft-text.fade-out { opacity: 0; }
.soft-loader .soft-text.fade-in  { opacity: 1; }
@keyframes soft-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--primary) 25%, transparent); transform: translateY(0); }
  50%      { box-shadow: 0 0 0 10px color-mix(in oklab, var(--primary) 0%, transparent); transform: translateY(-1px); }
}

/* Nuance badge — Spec 1 (5/16) 폐기 (대화 기억 inject 제거) */

/* Stop button in chat input area (red-ish but monochrome) */
.stop-btn {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--fg); color: #fff;
  display: grid; place-items: center; transition: background .15s;
}
.stop-btn:hover { background: #000; }

/* RFP approval card (gate before generate) */
.rfp-gate {
  margin: 18px 0; padding: 20px 22px;
  background: #fff; border: 1.5px solid var(--primary);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.rfp-gate h4 {
  margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--primary);
  display: flex; align-items: center; gap: 8px;
}
.rfp-gate .gate-item { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.rfp-gate .gate-item:last-of-type { border-bottom: 0; }
.rfp-gate .gate-label { font-size: 13px; font-weight: 600; color: var(--fg-2); }
.rfp-gate .gate-value { font-size: 14.5px; color: var(--fg); }
.rfp-gate .gate-actions { margin-top: 14px; display: flex; gap: 8px; justify-content: flex-end; }

/* Competitor candidate picker */
.comp-candidates { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.comp-candidate {
  padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 10px;
  background: #fff; cursor: pointer; transition: all .15s;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.comp-candidate:hover { border-color: var(--primary); background: var(--primary-soft); }
.comp-candidate .cc-name { font-size: 14px; font-weight: 600; }
.comp-candidate .cc-desc { font-size: 12px; color: var(--fg-2); margin-top: 2px; }

/* Autocomplete dropdown (competitor input) */
.autocomplete-dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
  max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.autocomplete-dropdown.hidden { display: none; }
.autocomplete-item {
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  transition: background .12s;
}
.autocomplete-item:hover { background: var(--primary-soft); }
.autocomplete-item .ac-name { font-size: 14px; font-weight: 600; color: var(--fg); }
.autocomplete-item .ac-desc { font-size: 12px; color: var(--fg-2); margin-top: 2px; }
.autocomplete-item.ac-direct {
  margin-top: 4px; border-top: 1px dashed var(--border);
  padding-top: 10px; border-radius: 8px;
}
.autocomplete-item.ac-direct .ac-name { color: var(--primary); }
.autocomplete-loading, .autocomplete-empty {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; font-size: 13px; color: var(--fg-2);
}
.ac-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--primary-soft); border-top-color: var(--primary);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== Comp (competitor) card ===== */
.comp-card { padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }
.comp-card h4 { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.comp-summary { font-size: 13px; color: var(--fg-2); line-height: 1.55; margin: 4px 0 12px; }
.comp-tags-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 10px; }
.comp-diff {
  margin-top: 10px; padding: 10px 12px; border-radius: 8px;
  background: var(--primary-soft); color: var(--primary); font-size: 13px; font-weight: 500;
}
.strength-badge { background: var(--success-soft); color: var(--success); }
.weakness-badge { background: var(--danger-soft); color: var(--danger); }

/* ===== Print-only: A4 가로형 (기본) / 세로형 (명시 시) ===== */
/* 기본은 무조건 A4 가로 (297mm × 210mm) — RFP 가 portrait 지정한 경우에만 전환 */
@page {
  size: 297mm 210mm;    /* A4 landscape — 정확한 치수 명시 */
  margin: 12mm;
}
@page portrait {
  size: 210mm 297mm;    /* A4 portrait */
  margin: 15mm;
}

@media print {
  /* 화면상의 모든 요소 숨기고 프린트 마운트만 노출 */
  html, body { background: #fff !important; }
  body > *:not(#print-mount) { display: none !important; }
  #print-mount { display: block !important; }

  /* 제안서 페이지는 A4 한 페이지씩 */
  #print-mount .proposal-page {
    box-shadow: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    aspect-ratio: auto !important;
    min-height: auto !important;
    page-break-after: always;
    break-after: page;
    overflow: visible !important;
    font-size: 11pt;
    line-height: 1.55;
  }
  #print-mount .proposal-page:last-of-type {
    page-break-after: avoid;
    break-after: auto;
  }
  /* 가로형일 때 각 페이지 portrait 클래스 지정 */
  #print-mount .proposal[data-orientation="portrait"] { page: portrait; }

  /* 프린트 타이포 — 모든 요소 최소 10pt 이상 */
  #print-mount .page-section-name { font-size: 9pt !important; }
  #print-mount .page-governing    { font-size: 22pt !important; line-height: 1.25; }
  #print-mount .page-summary      { font-size: 11pt !important; }
  #print-mount .action-caption    { font-size: 10pt !important; }
  #print-mount .card-grid .card .card-title { font-size: 11pt !important; }
  #print-mount .card-grid .card .card-body  { font-size: 10pt !important; }
  #print-mount .step-flow .step-title { font-size: 11pt !important; }
  #print-mount .step-flow .step-desc  { font-size: 10pt !important; }
  #print-mount .num-list li           { font-size: 11pt !important; }
  #print-mount .compare-table         { font-size: 10pt !important; }
  #print-mount .stat-highlight .stat-big { font-size: 40pt !important; }
  #print-mount .divider-intro .divider-num { font-size: 140pt !important; }
  #print-mount .keyword-row { display: none !important; }
  #print-mount .proposal-toolbar { display: none !important; }

  /* 페이지 내 요소 분절 방지 */
  #print-mount .proposal-page .card,
  #print-mount .proposal-page .step,
  #print-mount .proposal-page .strategy-box,
  #print-mount .proposal-page .stat-highlight,
  #print-mount .proposal-page .compare-table,
  #print-mount .proposal-page .venn,
  #print-mount .proposal-page .donut,
  #print-mount .proposal-page .progress-list,
  #print-mount .proposal-page .missing-alert {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* 데스크톱 기준 최소 너비 1280px 유지 — 이 아래로 내려가면 가로 스크롤 */
.app-shell { min-width: 1280px; }

/* Responsive niceties */
@media (max-width: 1400px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .client-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   UI 정렬·사이즈 일괄 정돈 (item 12)
   - 카드/버튼/배지 사이즈 통일
   - 텍스트 오버플로우 안전 처리
   - 그리드 정렬 흐트러짐 방지
   ============================================================ */

/* 카드 공통 — padding/radius/border 통일 */
.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.stat-card {
  padding: 20px 22px;       /* 22 → 20/22 (좀 더 컴팩트하게 통일) */
  min-height: 0;
}

/* 통계 카드 — 라벨·값 줄바꿈 방지, 잘리면 ellipsis */
.stat-card .stat-label {
  font-size: 12.5px; color: var(--fg-2);
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.stat-card .stat-value {
  font-size: 26px; font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  white-space: nowrap;
}
.stat-card .stat-unit {
  font-size: 13px; font-weight: 500;
  margin-left: 4px;
  color: var(--fg-2);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

/* 배지 통일 — 한 줄 height 24px 고정, 단어 줄바꿈 X */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 4px;
  height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  line-height: 1;
}

/* 버튼 통일 — 사이즈별 height 고정 */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  border-radius: 10px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  height: 36px;
  border: 1px solid transparent;
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
}
.btn-sm { height: 30px; padding: 4px 10px; font-size: 12px; border-radius: 8px; }
.btn-lg { height: 44px; padding: 10px 20px; font-size: 14.5px; border-radius: 12px; }
.btn-tiny { height: 24px; padding: 0 10px; font-size: 11.5px; border-radius: 6px; }

/* 카드 내 액션바의 .btn — 카드 폭에 맞춰 줄어들 수 있게 */
.proposal-thumb-actions .btn { flex: 1 1 auto; min-width: 0; }
.proposal-thumb-actions .btn span { overflow: hidden; text-overflow: ellipsis; }

/* 사이드바 — 발주처 이름 한 줄 cuts */
.sidebar-link span,
.sidebar-recent-item {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  max-width: 100%;
}

/* 빈 상태 패널 — 가운데 정렬·여백 통일 */
.empty-state {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  color: var(--fg-soft);
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-3);
}
.empty-state p { margin: 0; font-size: 13.5px; line-height: 1.65; }
.empty-state-lg { padding: var(--space-7) var(--space-5); gap: var(--space-4); }
.empty-illust {
  display: block;
  margin: 0 auto;
  pointer-events: none;
  user-select: none;
}
.empty-illust-sm svg { width: 140px !important; height: auto !important; }
.empty-illust svg {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(255, 142, 92, 0.18));
  border-radius: var(--radius);
}
.empty-title {
  font-size: 17px; font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--fg-strong);
  margin: 0;
}
.empty-desc {
  font-size: 13.5px;
  color: var(--fg-soft);
  line-height: 1.6;
  margin: 0;
  max-width: 320px;
}

/* 사이드 컬럼 폭 고정 — 메인 위젯 영역(좌) ~65% : 보조 컬럼(우) ~35%
   (Stats grid 와 같은 24px gap 으로 시각 정렬 정합)
   align-items: start  → 위젯 placeholder 의 자연 높이 유지 (오/열 정밀 정렬) */
.dashboard-two-col {
  /* Spec C-3 (5/18): 좌 65 / 우 35 비율 변경 (이전 minmax(0,1fr) 320px → 65fr 35fr) */
  grid-template-columns: 65fr 35fr;
  gap: 24px;
  /* 좌측 (나라장터) 끝선 = 우측 (견본 위젯) 끝선 정합 영역.
     stretch 영역 = 좌우 영역 동일 height → 우측 위젯 영역 늘어남 (flex: 1 1 auto). */
  align-items: stretch;
}
.dashboard-two-col > section,
.dashboard-two-col > aside {
  display: flex; flex-direction: column; min-width: 0;
}
.dashboard-two-col > section > .card.empty-state,
.dashboard-two-col > section > .card.empty-state-lg {
  flex: 1;                /* 좌측 빈 상태 카드가 우측 길이에 맞춰 늘어남 */
  justify-content: center;
}
/* 카드들이 들어찬 grid 도 우측 컬럼 합계 높이까지 stretch */
.dashboard-two-col > section > .client-grid {
  flex: 1;
  align-content: start;   /* 카드는 위에서부터 채우고 남는 공간은 아래 */
}
.dashboard-side-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; height: 100%; }
/* .dashboard-side-col > .tip-card 는 Spec 4-A (5/16) 폐기 */
/* .dashboard-side-col > .daily-credit 는 Spec 4-B (5/16) 폐기 */
/* "과업 목록" 라벨 — 박스 위로 살짝 띄움 */
.dashboard-two-col > section > .dashboard-section-label {
  margin: 0 4px 12px 4px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  display: flex; align-items: center; gap: 8px;
}
.dashboard-two-col > section > .dashboard-section-label::before {
  content: ""; display: inline-block;
  width: 4px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, var(--primary), var(--accent, #FF8E5C));
}

/* 채팅·시스템 텍스트 wrapping — 한국어 단어 단위 줄바꿈 */
body, .msg-bubble, .card, .strengths-intro,
.intel-summary, .rfp-badge-value {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 사이드 패널 카드 폭 안정 — .tip-card 는 Spec 4-A / .daily-credit 는 Spec 4-B (5/16) 폐기 */

/* 작은 뷰포트 (1280px 이하) — Spec C-3 (5/18): 픽셀 고정 → 65fr 35fr 비율 유지 */
@media (max-width: 1280px) {
  .dashboard-two-col { grid-template-columns: 65fr 35fr; }
}

/* Spec C-3 (5/18) 신규 — 모바일 ≤767px 1 컬럼 stack (좌→우 세로) */
@media (max-width: 767px) {
  .dashboard-two-col {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ===== 📰 업계 뉴스 3줄 위젯 (D-Fix-NewsBar3) =====
   3행 동시 노출 — 행마다 아이콘+제목+매체/날짜. 6초마다 다음 3건 묶음으로 fade 전환.
   배경 = 연한 회색 (#F5F5F5) — 다른 카드 (흰 배경) 와 시각 차별화.
   흑백 6색 정합 — 회색 = 정체성 영역 OK. */
.news-widget {
  margin-bottom: 24px;
  padding: 10px 14px;
  background: #F5F5F5;
  border-radius: 18px;
  display: flex; align-items: center; gap: 10px;
  overflow: hidden;
}
/* 3행 세로 컨테이너 — fade 전환은 본 컨테이너에 .fading 적용 (3행 동시) */
.news-widget-rows {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
  opacity: 1;
  transition: opacity 350ms ease;
}
.news-widget-rows.fading { opacity: 0; }
.news-widget-row {
  height: 28px;
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
/* 빈 자리 — 자리는 유지 (visibility:hidden) → 위젯 높이 안정 */
.news-widget-row.news-widget-row-hidden {
  visibility: hidden;
}
.news-widget-icon {
  font-size: 14px;
  flex-shrink: 0;
  display: inline-flex; align-items: center;
}
.news-widget-link {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--fg);
  text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: color .15s ease;
}
.news-widget-link.disabled { cursor: default; color: var(--fg-2); }
.news-widget-link:hover:not(.disabled) { color: var(--primary); }
.news-widget-text-title {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 0 1 auto; min-width: 0; max-width: 100%;
}
.news-widget-text-sep { color: var(--border-strong, #DDD); flex-shrink: 0; }
.news-widget-text-meta {
  font-size: 12px;
  color: var(--fg-2);
  font-weight: 400;
  flex-shrink: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 40%;
}

.news-widget-arrow {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--fg-2);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  align-self: center;   /* 3행 컨테이너 옆에서 세로 가운데 정렬 */
  transition: background .15s ease, color .15s ease;
  padding: 0;
}
.news-widget-arrow:hover { background: rgba(0,0,0,0.06); color: var(--fg); }

/* 빈 / 에러 영역 — 화살표 숨김, 첫 행만 메시지 */
.news-widget.news-widget-static .news-widget-link {
  color: var(--fg-2);
  font-style: normal;
}

/* 모바일 (≤768px) — 3행 유지, 행 높이·폰트만 살짝 축소. 매체명/날짜는 기존대로 숨김 */
@media (max-width: 768px) {
  .news-widget { padding: 8px 12px; gap: 8px; border-radius: 14px; }
  .news-widget-rows { gap: 3px; }
  .news-widget-row { height: 24px; }
  .news-widget-link { font-size: 12.5px; }
  .news-widget-text-meta { display: none; }   /* 가독성 — 매체명/날짜 모바일 X */
  .news-widget-text-sep { display: none; }
}

/* ===== 📡 마감 임박 공고 위젯 (대시보드 좌측 메인 영역) =====
   시각 강조 영역 — 다른 카드 영역과 차별화:
   · 배경: 연한 보라 톤 (#FAF7FF) — 흑백 6색 정체성 안 보라 액센트 영역
   · 그림자: 보라 톤 (rgba(107,70,229,0.10)) — 자연스럽게 떠 있는 영역
   · 카드는 흰색 유지 (위젯 배경과 대비) */
.closing-widget {
  padding: 24px;
  background: #FAF7FF;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(107, 70, 229, 0.10);
  border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 16px;
  min-height: 280px;
  /* 박스 전체 태극기 배경 영역 (::before) — 모서리 14px 정합 */
  position: relative;
  overflow: hidden;
}
/* 박스 전체 태극기 배경 — opacity 0.10 (균형), pointer-events 통과, z-index 0 */
.closing-widget::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('/static/taegukgi.svg') center/cover no-repeat;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
/* 박스 안 영역 — 태극기 위로 (z-index 1) */
.closing-widget-head,
.closing-widget-body,
.closing-widget-footer {
  position: relative;
  z-index: 1;
}
.closing-widget-head {
  display: flex; align-items: center; gap: 10px;
}
.closing-widget-icon {
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--primary-soft, rgba(107, 70, 229, 0.10));
  border-radius: 10px;
  flex-shrink: 0;
}
.closing-widget-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg-strong, var(--fg));
  line-height: 1.4;
}
.closing-widget-body {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
}
.closing-widget-loading {
  margin: auto;
  font-size: 13px;
  color: var(--fg-2);
}
.closing-widget-empty {
  margin: auto;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 24px 0;
  text-align: center;
}
.closing-widget-empty-icon { font-size: 32px; }
.closing-widget-empty-msg { margin: 0; font-size: 14px; font-weight: 600; color: var(--fg); }
.closing-widget-empty-sub { margin: 0; font-size: 12.5px; color: var(--fg-2); }

/* Spec C-3 (5/18): 카드 영역 → 토스 리스트 패턴 (라인 분리, 박스 폐기) */
.closing-card-list {
  display: flex; flex-direction: column;
  animation: closing-fade-in .35s ease;
}
@keyframes closing-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.closing-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 4px;
  border-bottom: 0.5px solid var(--border);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: background .15s ease;
}
.closing-card:last-child { border-bottom: 0; }
.closing-card:hover { background: var(--bg-2); }
.closing-card.disabled { opacity: 0.55; cursor: not-allowed; }
.closing-card.disabled:hover { background: transparent; }
.closing-card-dday {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  /* Spec C-3 (5/18): 48 → 56 (한글 "오늘"/"내일"/"모레" 영역 대비) */
  min-width: 56px; height: 38px; padding: 0 10px;
  border-radius: 8px;
  background: var(--primary-soft, rgba(107, 70, 229, 0.10));
  color: var(--primary);
  /* Spec C-3 (5/18): 700 → 600, 14 → 13, letter-spacing 정합 */
  font-weight: 600; font-size: 13px;
  letter-spacing: -0.2px;
}
.closing-card-dday.urgent {
  background: var(--danger-soft, #FDEDEC);
  color: var(--danger, #C0392B);
}
.closing-card-info { flex: 1; min-width: 0; }
.closing-card-title {
  margin: 0 0 3px;
  /* Spec C-3 (5/18): 13.5 → 13, 600 → 500, fg-strong 정합 */
  font-size: 13px; font-weight: 500;
  color: var(--fg-strong, var(--fg));
  letter-spacing: -0.2px;
  line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.closing-card-meta {
  margin: 0;
  display: flex; align-items: center;
  /* Spec C-3 (5/18): 11.5 → 11 */
  font-size: 11px; color: var(--fg-2);
}
.closing-card-agency { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.closing-card-sep { color: var(--fg-soft); margin: 0 4px; }
.closing-card-budget { color: var(--fg-2); font-variant-numeric: tabular-nums; }
.closing-card-cta {
  flex-shrink: 0;
  /* Spec C-3 (5/18): chevron ">" 단일 문자, "상세 →" 폐기 */
  font-size: 14px;
  color: var(--fg-soft);
  padding: 4px 0;
}

/* 푸터 — 도트 인디케이터 + 좌우 화살표 + 전체 보기 */
.closing-widget-footer {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.closing-widget-arrow {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #fff;
  font-size: 16px; font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s ease;
}
.closing-widget-arrow:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.closing-widget-dots { display: inline-flex; align-items: center; gap: 6px; }
.closing-widget-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 0;
  background: var(--border-strong, #DDD);
  padding: 0;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.closing-widget-dot.active {
  background: var(--primary);
  transform: scale(1.2);
}
.closing-widget-dot:hover { background: var(--primary); opacity: 0.7; }
.closing-widget-all-link {
  margin-left: auto;
  background: transparent; border: 0;
  font-size: 12px; font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: color .15s ease, background .15s ease;
}
.closing-widget-all-link:hover { color: var(--primary); background: var(--primary-soft, rgba(107, 70, 229, 0.10)); }

/* "전체 보기" 모달 */
.closing-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 250;
  padding: 24px;
  animation: closing-modal-fade-in .18s ease;
}
.closing-modal-backdrop.closing-modal-closing {
  animation: closing-modal-fade-out .18s ease forwards;
}
@keyframes closing-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes closing-modal-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.closing-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.25);
  width: 100%; max-width: 720px;
  max-height: 85vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.closing-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--border);
}
.closing-modal-title {
  margin: 0;
  font-size: 16px; font-weight: 600;
  color: var(--fg-strong, var(--fg));
}
.closing-modal-close {
  width: 32px; height: 32px;
  border-radius: 50%; border: 0;
  background: transparent;
  font-size: 22px; line-height: 1;
  color: var(--fg-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.closing-modal-close:hover { background: var(--bg-2); color: var(--fg); }
.closing-modal-meta {
  padding: 10px 22px;
  font-size: 12px; color: var(--fg-2);
  border-bottom: 1px solid var(--border);
}
.closing-modal-list {
  padding: 16px 22px;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
  flex: 1;
}

/* ============================================
   Spec C-3 (5/18) 신규 — 견본 위젯 (.sample-*)
   대시보드 우측 35% 영역. PDF 자산 대기 placeholder 데이터.
   ============================================ */
.sample-widget {
  /* Spec D-Fix-SampleCard-1: 옆 공고 카드(흰 배경)와 차별화 — 은은한 라벤더 배경.
     과하지 않게 #F7F4FF (브랜드 보라 계열 가장 옅은 톤). */
  background: #F7F4FF;
  border: 0.5px solid #E8E0F5;
  border-radius: var(--radius-lg);
  /* Spec D-Fix-SampleReplace-1: padding 원복(22px 24px) — 옆 closing-widget 카드와 끝선 정합 유지 */
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;   /* 끝선 정렬 — 좌측 closing-widget 과 동일 height stretch */
}
.sample-widget-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.sample-widget-icon { font-size: 18px; }
.sample-widget-title-wrap { flex: 1; }
.sample-widget-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.2px;
  color: var(--fg-strong);
}
.sample-widget-badge {
  background: var(--primary-soft);
  color: var(--primary);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
}
.sample-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 0;
  width: 100%;
}
.sample-card-thumbnail {
  width: 100%;
  aspect-ratio: 297 / 210;  /* Spec D-Fix-6 (5/18): A4 가로형 (NightOff PPTX 정합, 16/9 → 297/210) */
  /* Spec C-5 (5/18): 다크 → Medium Lavender 그라데이션 (브랜드 본질 정합) */
  background: linear-gradient(135deg, #EBE3FF 0%, #BFA8F0 100%);
  border: 0.5px solid #D9CFF5;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  overflow: hidden;
  /* Spec D-Fix-SampleCard-1: 부드러운 그림자로 떠 있는 느낌 (과하지 않게). */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* Spec D-Fix-SampleCard-1: 이미지 있을 때만 padding 0 → 보라 액자 사라지고 이미지 꽉 채움.
   텍스트 fallback (이미지 없음) 케이스는 위 padding 16px 그대로 유지 (가독성). */
.sample-card-thumbnail:has(img) {
  padding: 0;
}
.sample-card-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sample-card-thumbnail-title {
  font-size: 13px;
  font-weight: 600;
  /* Spec C-5 (5/18): 흰 → 다크 보라 (라이트 배경 위 가독성) */
  color: #1F1147;
  margin: 0 0 4px;
  line-height: 1.4;
}
.sample-card-thumbnail-agency {
  font-size: 10px;
  /* Spec C-5 (5/18): 옅은 흰 → 옅은 다크 보라 */
  color: rgba(31, 17, 71, 0.65);
  margin: 0;
}
.sample-card-info {
  display: flex;
  flex-direction: column;
  /* Spec D-Fix-SampleReplace-1: 카드 높이 유지(옆 공고 카드 끝선 정합) — gap 으로 빈 공간 메움 */
  gap: 8px;
}
.sample-card-title-text {
  /* Spec D-Fix-SampleReplace-1: description 빠진 분량을 제목으로 흡수 — 13 → 17pt / weight 500 → 700 */
  font-size: 17px;
  font-weight: 700;
  color: var(--fg-strong);
  margin: 0;
  letter-spacing: -0.3px;
  line-height: 1.35;
}
.sample-card-meta {
  /* Spec D-Fix-SampleReplace-1: 11 → 13 (발주처 가독성 강화) */
  font-size: 13px;
  color: var(--fg-2);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.sample-card-meta .sep { color: var(--fg-soft); }
.sample-card-cta {
  /* Spec D-Fix-SampleReplace-1: 12 → 13 (가독성) */
  font-size: 13px;
  color: var(--primary);
  font-weight: 600;
  margin-top: 4px;
}
/* Spec D-Fix-5 (5/18) 신규 — 도트 네비 (마감 임박 도트 패턴 정합) */
.sample-widget-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0 6px;
}
.sample-widget-dots {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.sample-widget-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 0;
  background: var(--border-strong, #DDD);
  padding: 0;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.sample-widget-dot.active {
  background: var(--primary);
  transform: scale(1.2);
}
.sample-widget-dot:hover {
  background: var(--primary);
  opacity: 0.7;
}

.sample-widget-footer {
  border-top: 0.5px solid var(--border);
  margin-top: 14px;
  padding-top: 12px;
}
.sample-widget-footer-hint {
  /* Spec D-Fix-SampleReplace-1: 10 → 11.5 (가독성) */
  font-size: 11.5px;
  color: var(--fg-soft);
  margin: 0;
  text-align: center;
  letter-spacing: -0.1px;
}

/* ============================================
   Spec C-3 (5/18) 신규 — 미리보기 모달 (.sample-modal-*)
   패턴 B (.closing-modal-*) 정합 + PDF iframe + sticky CTA bar.
   ============================================ */
.sample-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 250;
  padding: 24px;
  animation: sample-modal-fade-in 0.18s ease;
}
@keyframes sample-modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.sample-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.25);
  width: 100%;
  max-width: 1100px;  /* Spec D-Fix-6 (5/18): A4 본문 영역 확보 (900 → 1100) */
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sample-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sample-modal-head-info { flex: 1; min-width: 0; }
.sample-modal-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.2px;
  color: var(--fg-strong);
}
.sample-modal-subtitle {
  font-size: 12px;
  color: var(--fg-2);
  margin: 0;
}
.sample-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  color: var(--fg-2);
  flex-shrink: 0;
}
.sample-modal-close:hover { background: var(--bg-2); }
.sample-modal-body {
  flex: 1;
  aspect-ratio: 297 / 210;  /* Spec D-Fix-6 (5/18): A4 가로형 본문 영역 (NightOff PPTX 정합) */
  overflow: hidden;
  display: flex;
  background: var(--bg-2);
  /* Spec D-Fix-SampleModal-1: PDF iframe 둘레에 회색 매트 여백 — 문서가 모달 가장자리까지 꽉 차서 답답한 것 해소.
     box-sizing: border-box(글로벌 L173)라 aspect-ratio 외곽 크기·비율 그대로, iframe 만 비례 축소. (24 → 32 조정) */
  padding: 32px;
}
.sample-modal-pdf {
  width: 100%;
  height: 100%;
  border: 0;
}
.sample-modal-cta-bar {
  flex-shrink: 0;
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: #fff;
}
.sample-modal-cta-text {
  font-size: 13px;
  color: var(--fg-strong);
  margin: 0;
  font-weight: 500;
}
.sample-modal-cta-btn {
  background: var(--primary);
  color: #fff;
  border: 0;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: -0.2px;
}
.sample-modal-cta-btn:hover { opacity: 0.9; }
/* 모바일 ≤767px 풀스크린 모달 */
@media (max-width: 767px) {
  .sample-modal-backdrop { padding: 0; }
  .sample-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  /* Spec D-Fix-SampleModal-1: 좁은 화면에서 문서가 너무 작아지지 않게 PC 32 → 모바일 16 비례 */
  .sample-modal-body { padding: 16px; }
  .sample-modal-cta-bar {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .sample-modal-cta-btn { width: 100%; }
}

/* ===== 📋 입찰참가자격 모달 영역 (closing-modal 패턴 재활용 + 자격 카드) ===== */
/* 입찰참가자격 카드 본문 영역 — 발주처 상세 페이지 인라인 영역 (모달 영역 X) */
.qual-list {
  display: flex; flex-direction: column; gap: 0;
}
.qual-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.qual-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.qual-section:first-child { padding-top: 4px; }
.qual-section-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
}
.qual-section-icon { font-size: 16px; }
.qual-section-label {
  font-size: 14px; font-weight: 600;
  color: var(--fg-strong, var(--fg));
  letter-spacing: -0.01em;
}
.qual-section-items {
  margin: 0; padding: 0 0 0 28px;
  list-style: none;
  display: flex; flex-direction: column; gap: 4px;
}
.qual-section-items li {
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg);
  position: relative;
}
.qual-section-items li::before {
  content: "•";
  position: absolute;
  left: -14px;
  color: var(--primary);
  font-weight: 600;
}
.qual-section-empty {
  margin: 0 0 0 28px;
  font-size: 12.5px;
  color: var(--fg-2);
  font-style: italic;
}

/* ===== 산출내역서 버튼 — 채팅 헤더 영역 (✨ 동등 사이즈, outline 영역) =====
   사용자 명시:
     활성화 = 흰 배경 + 보라 outline + 보라 텍스트
     비활성화 = 흰 배경 + 회색 outline + 회색 텍스트 + cursor not-allowed
*/
.budget-btn {
  background: #fff;
  border: 1.5px solid var(--primary);
  color: var(--primary);
  font-weight: 600;
  transition: background .15s ease, color .15s ease, border-color .15s ease,
              transform .12s ease, box-shadow .15s ease;
}
.budget-btn.active {
  background: #fff;
  border-color: var(--primary);
  color: var(--primary);
}
.budget-btn.active:hover {
  background: var(--primary-soft, rgba(107, 70, 229, 0.10));
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(107, 70, 229, 0.30);
}
.budget-btn.active:active { transform: translateY(0); }

.budget-btn.disabled {
  background: #fff;
  border-color: var(--border);
  color: var(--fg-2);
  cursor: not-allowed;
  font-weight: 500;
}
.budget-btn.disabled:hover {
  background: #fff;
  border-color: var(--border);
  color: var(--fg-2);
  transform: none;
  box-shadow: none;
}

/* 활성화 직후 — 1.5초 × 2회 펄스 (사용자 주목도 강화).
   .just-enabled 영역 = JS 영역 add 후 3.1초 후 자동 remove. */
@keyframes budget-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(107, 70, 229, 0.55); transform: scale(1); }
  50%      { box-shadow: 0 0 0 10px rgba(107, 70, 229, 0);   transform: scale(1.05); }
}
.budget-btn.active.just-enabled {
  animation: budget-pulse 1.5s ease-in-out 2;
}

/* 모바일 (≤768px) — 위젯 + 모달 영역 정합 */
@media (max-width: 768px) {
  .closing-card { padding: 10px 12px; gap: 10px; }
  .closing-card-dday { min-width: 42px; height: 34px; font-size: 13px; }
  .closing-card-title { font-size: 13px; }
  .closing-card-cta { display: none; }
  .closing-modal { max-width: 100%; max-height: 92vh; border-radius: 12px 12px 0 0; }
  .closing-widget-footer { gap: 8px; }
  .closing-widget-all-link { width: 100%; text-align: center; margin-left: 0; }
}

/* ============================================================
   v0 디자인 토큰 매핑 + 새 섹션 스타일 (강점/발주처들여다보기/푸터/체크리스트)
   ============================================================ */

/* v0 디자인 토큰 적용 — Next.js shadcn 의 핵심 색·라운드·그림자만 추출 */
:root {
  /* 색 */
  --primary: #7C3AED;          /* v0 oklch(0.55 0.22 285) */
  --primary-hover: #6D28D9;
  --primary-soft: #F3EFFF;
  --accent: #F5F0FF;
  --accent-fg: #5B21B6;
  --secondary: #F4F0FC;
  --border: #E5E5E5;           /* v0 oklch(0.92 0 0) */
  --border-strong: #D4D4D4;
  --bg-2: #FAFAFA;             /* v0 oklch(0.965 0 0) — 더 라이트 */
  --bg: #FDFDFD;               /* v0 oklch(0.995 0 0) */
  --fg: #252525;               /* v0 oklch(0.145 0 0) — 살짝 부드럽게 */
  --fg-2: #6F6F6F;             /* v0 oklch(0.45 0 0) */
  --muted: #A8A8A8;
  --success: #16A34A;          /* v0 oklch(0.62 0.17 145) */
  --warning: #D97706;          /* v0 oklch(0.78 0.14 70) */
  --danger:  #DC2626;          /* v0 oklch(0.6 0.22 25) */

  /* radius — v0 default 0.75rem */
  --radius-sm: 0.5rem;
  --radius:    0.75rem;        /* card / button 기본 */
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;

  /* 그림자 — v0 의 shadcn 류 부드러운 스택 */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --shadow:    0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.05);
  --shadow-md: 0 6px 14px -4px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.04);
  --shadow-lg: 0 16px 32px -10px rgb(0 0 0 / 0.10), 0 6px 10px -4px rgb(0 0 0 / 0.05);
}

/* v0 카드 미세 튜닝 — 라운드·보더 일관성 */
.card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: #fff;
}
.card-head {
  padding: 18px 20px 12px;
}
.card-body {
  padding: 14px 20px 20px;
}
/* 버튼 hover 살짝 들뜨는 효과 (v0 풍) */
.btn { transition: transform .08s ease, box-shadow .12s ease, background .12s ease; }
.btn:hover:not(:disabled) { transform: translateY(-0.5px); }
/* btn-tiny — 인라인 재시도 등 작은 사이즈 */
.btn-tiny {
  padding: 4px 10px;
  font-size: 11.5px;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 4px;
}
/* 발주처 배지 — 카드 헤더 우측에 작게 */
.intel-org-badge {
  flex-shrink: 0;
  padding: 4px 10px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  max-width: 240px;
  overflow: hidden; text-overflow: ellipsis;
}

/* 비활성 안내 — RFP 없을 때 / 발주처 추출 실패 */
.intel-disabled-row {
  display: flex; align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: color-mix(in oklab, var(--primary) 4%, var(--bg-2));
  border: 1px dashed color-mix(in oklab, var(--primary) 22%, transparent);
  border-radius: 12px;
}
.intel-disabled-emoji {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1.4;
}
.intel-disabled-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg);
}

.intel-error-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 12px;
  background: var(--danger-soft); border-radius: 8px;
}
.intel-error-msg {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
}
.intel-error-badge {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--danger, #dc2626);
  color: #fff;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
}
.intel-status-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px 8px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 4px;
}
.intel-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  flex-shrink: 0;
}
/* HWP 안내 */
.hwp-notice {
  margin: 8px 4px 0; padding: 0;
  font-size: 12px;
  color: var(--fg-2);
  text-align: center;
}

/* 콘텐츠 하단 여유 패딩 (잘림 방지) */
.main-content { padding-bottom: 80px; }

/* ============================================================
   전역 하단 푸터 (item 9)
   ============================================================ */
/* margin-right (--right-panel-w) + body.right-panel-off 토글 + ≤1280px 분기는
 * Spec 5 (5/16) 우측 사이드바 폐기 영역 함께 정리. */
.global-footer {
  background: linear-gradient(180deg, #ffffff 0%, #FAFAFA 100%);
  border-top: 1px solid var(--border);
  padding: 28px 24px 22px;
  margin-top: auto;
  margin-left: var(--sidebar-w);
  font-size: 12.5px;
  color: var(--fg-2);
  letter-spacing: -0.005em;
}
@media (max-width: 900px) {
  .global-footer { margin-left: 0; }
}
.global-footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
  align-items: center;   /* 사용자 요청: 푸터 가운데 정렬 */
  text-align: center;
}
.gf-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.gf-row a {
  color: var(--fg-2);
  text-decoration: none;
  transition: color .12s;
}
.gf-row a:hover { color: var(--primary); }
.gf-sep { color: var(--border-strong); user-select: none; }
.gf-links a { font-weight: 500; color: var(--fg); }
.gf-info { font-size: 12px; opacity: 0.85; justify-content: center; }
.gf-bottom {
  margin-top: 6px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.gf-tag {
  font-size: 12.5px; font-weight: 500;
  color: var(--primary);
}
.gf-social { display: flex; gap: 10px; align-items: center; }
.gf-social a {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--bg-2);
  color: var(--fg-2);
}
.gf-social a:hover { background: var(--primary-soft); color: var(--primary); }

/* 랜딩 페이지·채팅에서는 자체 푸터/구조가 있어 전역 푸터 숨김 */
#app-root.landing-active ~ #global-footer { display: none; }
body:has(.chat-split-wrap) #global-footer { display: none; }

/* ============================================================
   과업 상세 핵심 CTA 카드 (item 8)
   ============================================================ */
.task-actions-card {
  background: linear-gradient(135deg, var(--primary-soft) 0%, #FFFFFF 70%);
  border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--border));
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  position: relative;
  overflow: hidden;
}
.task-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.task-action-cta {
  height: auto !important;
  padding: 18px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: left;
  justify-content: flex-start !important;
  border-radius: 14px !important;
  transition: transform .12s ease, box-shadow .15s ease;
}
.task-action-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--primary) 60%, transparent);
}
.task-action-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px color-mix(in oklab, var(--primary) 65%, transparent);
}
.task-action-secondary {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  color: var(--fg) !important;
}
.task-action-secondary:hover:not(:disabled) {
  border-color: color-mix(in oklab, var(--primary) 30%, var(--border)) !important;
  transform: translateY(-2px);
}
.task-action-cta.disabled-soft {
  opacity: 0.55;
  cursor: not-allowed !important;
}
.task-action-cta .ta-emoji {
  font-size: 28px;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08));
}
.task-action-cta .ta-text {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1;
}
.task-action-cta .ta-title {
  font-size: 16px; font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.task-action-cta .ta-sub {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
  letter-spacing: -0.005em;
}

/* env 활성 시 잠긴 입력란 — 환경변수가 우선임을 시각적으로 명확히 */
input.locked-by-env {
  background: var(--primary-soft) !important;
  border: 1px dashed color-mix(in oklab, var(--primary) 40%, var(--border)) !important;
  color: var(--primary) !important;
  cursor: not-allowed !important;
  font-weight: 500;
}
input.locked-by-env::placeholder {
  color: color-mix(in oklab, var(--primary) 75%, transparent) !important;
}

/* ============================================================
   Landing Page (첫 진입)
   ============================================================ */
#app-root.landing-active {
  display: block !important;
  min-width: auto !important;
  min-height: 100vh;
  background: var(--bg);
}
.landing-wrap {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FAF8FF 0%, #FFFFFF 50%, #FAFAFA 100%);
}
.landing-nav {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(229,229,229,0.5);
  background: rgba(253,253,253,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.landing-nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
.landing-logo { height: 36px; width: auto; }

/* Hero */
.landing-hero {
  flex: 1;
  padding: 80px 24px 100px;
}
.landing-hero-inner {
  max-width: 880px; margin: 0 auto;
  text-align: center;
}
.landing-hero-logo {
  height: 120px; width: auto;
  margin-bottom: 44px;
  opacity: 1;
  filter: drop-shadow(0 12px 36px rgba(124, 58, 237, 0.18));
  animation: heroLogoIn .7s cubic-bezier(.22,1,.36,1);
}
@keyframes heroLogoIn {
  from { opacity: 0; transform: translateY(-12px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.landing-hero-title {
  font-size: 64px; font-weight: 700;
  line-height: 1.12; letter-spacing: -0.03em;
  margin: 0 0 22px;
  color: var(--fg);
}
.landing-hero-sub {
  font-size: 19px; color: var(--fg-2);
  line-height: 1.6;
  margin: 0 0 48px;
}
.landing-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 16px 36px;
  font-size: 17px; font-weight: 600;
  border-radius: 14px;
  background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
  box-shadow: 0 12px 28px -10px rgba(124, 58, 237, 0.5);
  transition: transform .15s ease, box-shadow .2s ease;
}
.landing-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -10px rgba(124, 58, 237, 0.65);
}

/* Hero CTA 그룹 — 시작하기 + 둘러보기 (Spec D-Fix-22 Stage A) */
.landing-hero-cta-group {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap; align-items: center;
}

/* Hero 보강 (Spec D-Fix-33) — eyebrow + 부가 문구 + 대시보드 미리보기 */
.landing-hero-eyebrow {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.02em;
  margin: 0 0 16px;
}
.landing-hero-promise {
  font-size: 17px;
  font-weight: 600;
  color: var(--fg);
  margin: -32px 0 40px;
  line-height: 1.5;
}
.landing-hero-preview {
  margin: 60px auto 0;
  max-width: 960px;          /* Spec D-Fix-34: 1100 → 960 (좌우 말풍선 자리 확보) */
  position: relative;        /* Spec D-Fix-34: 말풍선 absolute 부모 */
}
.landing-hero-preview-frame {
  background: #FFFFFF;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px -12px rgba(107, 70, 229, 0.20);
}
.landing-hero-preview-bar {
  background: #F5F5F7;
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border, #E5E5E5);
}
.landing-hero-preview-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #D5D5D7;
}
.landing-hero-preview-dot:nth-child(1) { background: #FF5F57; }
.landing-hero-preview-dot:nth-child(2) { background: #FEBC2E; }
.landing-hero-preview-dot:nth-child(3) { background: #28C840; }
.landing-hero-preview-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hero 말풍선 (Spec D-Fix-34 / Annotated Screenshot 패턴 / PC 우선) */
.landing-hero-bubble {
  position: absolute;
  background: #FFFFFF;
  border: 1.5px solid var(--primary);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow: 0 8px 20px -6px rgba(107, 70, 229, 0.25);
  max-width: 180px;
  z-index: 5;
  text-align: left;
}
.landing-hero-bubble-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
  line-height: 1.3;
}
.landing-hero-bubble-sub {
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.4;
}
/* 4개 위치 (좌 2 / 우 2) — Spec D-Fix-34b: 캡처 안 자리 정합 갱신 */
.landing-hero-bubble-tl { top: 15%; left: -120px; }   /* ③ 새 과업 버튼 */
.landing-hero-bubble-tr { top: 41%; right: -120px; }  /* ② 뉴스 줄 우측 끝 */
.landing-hero-bubble-bl { top: 46%; left: -120px; }   /* ① D-7 카드 (★ 마스킹 회피) */
.landing-hero-bubble-br { top: 58%; right: -120px; }  /* ④ 샘플 카드 (Spec D-Fix-34c: 47 → 58 / 카드 본체 가운데) */

/* 화살표 (CSS triangle + line) — Spec D-Fix-34b: 자리별 길이 분기 */
.landing-hero-bubble::before {
  content: "";
  position: absolute;
  height: 2px;
  background: var(--primary);
  top: 50%;
  transform: translateY(-50%);
  /* width / 위치 = 자리별 분기 */
}
.landing-hero-bubble::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  top: 50%;
  transform: translateY(-50%);
}
/* 좌측 말풍선 (tl / bl) ::after 화살촉 색 — 우측 향함 */
.landing-hero-bubble-tl::after,
.landing-hero-bubble-bl::after { border-left-color: var(--primary); }
/* 우측 말풍선 (tr / br) ::after 화살촉 색 — 좌측 향함 */
.landing-hero-bubble-tr::after,
.landing-hero-bubble-br::after { border-right-color: var(--primary); }

/* 자리별 화살표 길이 4종 분기 (Spec D-Fix-34b) */
.landing-hero-bubble-tl::before { width: 75px;  right: -75px; }
.landing-hero-bubble-tl::after  { right: -87px; }
.landing-hero-bubble-bl::before { width: 200px; right: -200px; }
.landing-hero-bubble-bl::after  { right: -212px; }
.landing-hero-bubble-tr::before { width: 220px; left: -220px; }
.landing-hero-bubble-tr::after  { left: -232px; }
.landing-hero-bubble-br::before { width: 220px; left: -220px; }
.landing-hero-bubble-br::after  { left: -232px; }

/* 1279px 미만 (모바일 / 태블릿) — 말풍선 숨김 (PC 우선 정합) */
@media (max-width: 1279px) {
  .landing-hero-bubble { display: none; }
}
.landing-cta-btn-secondary {
  background: #fff;
  border: 1px solid var(--border-strong);
  color: var(--fg);
  box-shadow: 0 2px 8px -4px rgba(0,0,0,0.06);
}
.landing-cta-btn-secondary:hover {
  background: var(--bg-2, #FAFAFA);
  border-color: var(--primary);
  color: var(--primary);
  box-shadow: 0 8px 20px -10px rgba(124, 58, 237, 0.25);
}
@media (max-width: 720px) {
  .landing-hero-cta-group { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin: 0 auto; }
  .landing-hero-cta-group .landing-cta-btn { width: 100%; }
}

/* ── 비회원 둘러보기 상단 배너 (Spec D-Fix-22 Stage B) */
.guest-banner {
  position: sticky; top: 0; z-index: 100;
  background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 70%, #FF8E5C));
  color: #fff;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.10);
}
.guest-banner-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 14px; padding: 11px 24px;
  font-size: 14px; font-weight: 500;
}
.guest-banner-icon { font-size: 18px; }
.guest-banner-text { letter-spacing: -0.01em; }
.guest-banner-cta {
  background: #fff; color: var(--primary);
  font-weight: 700; padding: 6px 14px;
  border-radius: 8px; border: 0;
  cursor: pointer; transition: background .15s;
  font-size: 13px;
}
.guest-banner-cta:hover { background: var(--bg-2, #FAFAFA); }

@media (max-width: 720px) {
  .guest-banner-inner { gap: 10px; padding: 9px 16px; flex-wrap: wrap; }
  .guest-banner-text { font-size: 12.5px; flex: 1; min-width: 0; }
  .guest-banner-cta { font-size: 12px; padding: 5px 10px; }
}

/* ── 사이드바 footer 비회원 (Spec D-Fix-22 Stage B) */
.sidebar-footer-guest-label {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; margin-bottom: 10px;
  background: var(--bg-2, #FAFAFA);
  border-radius: 10px;
  font-size: 13px; font-weight: 600; color: var(--fg-2);
}
.sidebar-footer-guest-emoji { font-size: 16px; }
.sidebar-footer-guest-cta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.sidebar-footer-guest-cta .btn { width: 100%; font-size: 13px; padding: 8px 10px; }

@media (max-width: 720px) {
  .sidebar-footer-guest-cta { grid-template-columns: 1fr; }
}

/* ============================================================
   섹션 헤더 — 메인 헤더가 주인공 (eyebrow / lead 는 보조)
   ============================================================ */
/* eyebrow — 메인 헤더의 보조라서 톤 다운 */
.landing-section-eyebrow {
  display: inline-block;
  padding: 4px 12px;
  margin: 0 auto 14px;
  background: color-mix(in oklab, var(--primary) 8%, transparent);
  color: color-mix(in oklab, var(--primary) 75%, var(--fg-2));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  border-radius: 999px;
  text-align: center;
  opacity: 0.85;
}
.landing-section-eyebrow.accent {
  background: color-mix(in oklab, var(--accent, #FF8E5C) 10%, transparent);
  color: color-mix(in oklab, var(--accent, #FF8E5C) 80%, var(--fg-2));
}
/* eyebrow 는 inline-block 이라 부모가 text-align:center 여야 가운데 정렬됨 */
.landing-trust-inner,
.landing-features-inner { text-align: center; }

/* 메인 헤더 — 검정 통일 (Spec D-Fix-37: 보라 그라데이션 → Hero/비교 섹션과 톤 정합) */
.landing-section-title {
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -0.035em;
  margin: 0 0 14px;
  text-align: center;
  line-height: 1.15;
  color: var(--fg, #1A1A1A);
}
.landing-section-lead {
  font-size: 16px;
  color: var(--fg-2);
  text-align: center;
  margin: 0 0 48px;
  letter-spacing: -0.005em;
  font-weight: 500;
}

/* ============================================================
   Trust 섹션 — 따뜻한 베이지 카드 + 강조 보더
   ============================================================ */
.landing-trust {
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--primary) 4%, #fff) 0%,
    color-mix(in oklab, var(--accent, #FF8E5C) 5%, #fff) 100%);
  border-top: 1px solid color-mix(in oklab, var(--primary) 12%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--primary) 12%, transparent);
  padding: 80px 24px;
}
.landing-trust-inner { max-width: 1100px; margin: 0 auto; }
.landing-trust-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 24px;
  max-width: 880px; margin: 0 auto;
  text-align: left;
}
/* Why NightOff 카드 보강 (Spec D-Fix-38: 배경 그라데이션 + radius/padding 키움 + 라벨/부가 흐름) */
.landing-trust-item {
  display: flex; align-items: center; gap: 14px;
  padding: 24px 28px;
  background: linear-gradient(180deg, #fff 0%,
    color-mix(in oklab, var(--primary) 3%, #fff) 100%);
  border: 1px solid color-mix(in oklab, var(--primary) 14%, transparent);
  border-radius: 18px;
  font-size: 15px; font-weight: 500; color: var(--fg);
  letter-spacing: -0.005em;
  box-shadow: 0 6px 20px -10px rgba(124,58,237,0.10);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.landing-trust-item:hover {
  border-color: color-mix(in oklab, var(--primary) 35%, transparent);
  box-shadow: 0 18px 32px -12px rgba(124,58,237,0.18);
  transform: translateY(-3px);
}
.landing-trust-emoji {
  font-size: 28px; flex-shrink: 0;
  filter: saturate(1.2);
}
.landing-trust-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.landing-trust-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1.4;
}
.landing-trust-sub {
  font-size: 13.5px;
  color: var(--fg-2);
  line-height: 1.5;
}

/* ============================================================
   Features 섹션 — 번호 라벨 + 강조 카드
   ============================================================ */
.landing-features {
  padding: 96px 24px;
  background: #fff;
}
.landing-features-inner { max-width: 1100px; margin: 0 auto; }
.landing-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
}
.landing-feature-card {
  position: relative;
  padding: 32px 30px 32px;   /* Spec D-Fix-39: top 40 → 32 (이모지 폐기 / 자료 자리 적정) */
  background: linear-gradient(180deg, #fff 0%,
    color-mix(in oklab, var(--primary) 3%, #fff) 100%);
  border: 1px solid color-mix(in oklab, var(--primary) 14%, transparent);
  border-radius: 20px;
  box-shadow: 0 6px 20px -10px rgba(124,58,237,0.10);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
  overflow: hidden;
}
.landing-feature-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--accent, #FF8E5C));
  opacity: 0.85;
}
.landing-feature-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in oklab, var(--primary) 35%, transparent);
  box-shadow: 0 24px 40px -16px rgba(124,58,237,0.22);
}
.landing-feature-num {
  position: absolute;
  top: 18px; right: 22px;
  font-size: 36px;   /* Spec D-Fix-39: 28 → 36 (이모지 폐기 / 자료 강조) */
  font-weight: 800;
  color: color-mix(in oklab, var(--primary) 25%, transparent);   /* 18% → 25% */
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.landing-feature-title {
  font-size: 32px;   /* Spec D-Fix-39: 21 → 32 (라벨 임팩트 ↑) */
  font-weight: 700;
  margin: 0 0 12px;   /* 10 → 12 */
  letter-spacing: -0.012em;
  color: var(--fg);
}
.landing-feature-desc {
  margin: 0;
  font-size: 16px;   /* Spec D-Fix-39: 14.5 → 16 (가독성 ↑) */
  line-height: 1.65;
  color: var(--fg-2);
}

/* Bottom CTA */
.landing-bottom-cta {
  padding: 80px 24px 60px;
  text-align: center;
  background: linear-gradient(180deg, transparent 0%, var(--primary-soft) 100%);
}
.landing-bottom-title {
  font-size: 32px; font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: var(--fg);
}
.landing-bottom-sub {
  font-size: 16px; color: var(--fg-2);
  margin: 0 0 32px;
}

/* ── 가격 섹션 (Spec D-Fix-20) ────────────────────────────── */
.landing-pricing {
  padding: 96px 24px;
  background: var(--bg-2, #FAFAFA);
}
.landing-pricing-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}
/* ── 비교 표 (Spec D-Fix-21) */
.landing-pricing-table {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 20px -10px rgba(124,58,237,0.08);
}
.pt-cell {
  padding: 18px 20px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  font-size: 14px; color: var(--fg);
  gap: 4px;
}
.pt-cell.pt-header { border-top: 0; padding: 32px 20px 24px; position: relative; }
.pt-row-label {
  font-weight: 600;
  color: var(--fg-2);
  background: var(--bg-2, #FAFAFA);
  align-items: flex-start; text-align: left;
  font-size: 13.5px;
}

/* BEST 컬럼 강조 */
.pt-best {
  background: color-mix(in oklab, var(--primary) 4%, #fff);
  border-left: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
}
.pt-header.pt-best { border-top: 3px solid var(--primary); }
.pt-best-badge {
  position: absolute; top: 10px; right: 12px;
  background: var(--primary); color: var(--primary-fg);
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  letter-spacing: 0.04em;
}

/* 플랜 헤더 */
.pt-plan-emoji { font-size: 32px; margin-bottom: 6px; }
.pt-plan-name {
  display: flex; flex-direction: column; gap: 2px;
  margin: 0;
}
.pt-plan-name-ko { font-size: 17px; font-weight: 700; color: var(--fg); }
.pt-plan-name-en {
  font-size: 12px; font-weight: 500; color: var(--fg-2);
  letter-spacing: 0.02em;
}

/* 가격 (취소선 + 런칭가) */
.pt-price-row {
  display: flex; flex-direction: column; gap: 4px;
  align-items: center;
}
.pt-price-regular {
  font-size: 13px; color: var(--fg-muted, #A89E91);
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}
.pt-price-promo { display: flex; align-items: baseline; gap: 3px; }
.pt-price-amount {
  font-size: 26px; font-weight: 800;
  color: var(--primary); letter-spacing: -0.02em;
}
.pt-price-per { font-size: 13px; color: var(--fg-2); font-weight: 500; }

/* 사용량 / 단가 */
.pt-usage-amount, .pt-unit-amount {
  font-size: 15px; font-weight: 700; color: var(--fg);
}
.pt-usage-meta, .pt-unit-meta {
  font-size: 11.5px; color: var(--fg-muted, #A89E91);
}

/* 기능 행 */
.pt-feature-label { font-size: 13px; }
.pt-feature { font-size: 18px; }

/* CTA */
.pt-cta-cell { padding: 22px 16px; }
.pt-cta-btn { width: 100%; font-weight: 600; }

/* Spec D-Fix-40: 상단 띠 (lead 자리 대체 / 프로모션 자료 강조) */
.landing-pricing-promo {
  margin: 24px auto 0;
  max-width: 720px;
  padding: 14px 24px;
  background: color-mix(in oklab, var(--primary) 8%, #fff);
  border: 1px solid color-mix(in oklab, var(--primary) 25%, transparent);
  border-radius: 12px;
  text-align: center;
}
.landing-pricing-promo-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}
.landing-pricing-promo-sub {
  font-size: 13.5px;
  color: var(--fg-2);
}

/* Spec D-Fix-40: 정가 + 할인 라벨 인라인 정렬 */
.pt-price-regular-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Spec D-Fix-40: 할인 라벨 (정가 옆 인라인 / 보라) */
.pt-price-discount {
  display: inline-block;
  padding: 1px 6px;
  background: color-mix(in oklab, var(--primary) 15%, transparent);
  color: var(--primary);
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  vertical-align: middle;
  letter-spacing: -0.01em;
}

/* Spec D-Fix-40: 하단 부가 자료 (보험사 약관 톤) */
.landing-pricing-note {
  margin: 16px auto 0;
  padding: 0 24px;
  text-align: center;
  font-size: 12px;
  color: var(--fg-muted, #A89E91);
  line-height: 1.5;
}

/* ── 비교 섹션 (Spec D-Fix-27 Stage A / D-Fix-30 폰트 ↑) ──────────── */
.landing-compare {
  padding: 96px 24px;
  background: var(--bg-2, #FAFAFA);
}
.landing-compare-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.landing-compare-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--fg, #1A1A1A);
  margin: 0 0 12px 0;
  line-height: 1.3;
  letter-spacing: -0.02em;
}
.landing-compare-lead {
  font-size: 17px;
  color: var(--fg-2, #666);
  margin: 0 0 40px 0;
  line-height: 1.6;
}

/* 캡처 갤러리 — 4열 grid (Spec D-Fix-29 Stage A 균등 → D-Fix-31 +15% 비대칭)
   일반 3장 ~275px / NightOff ~316px / 41px 차이 — "아주 조금" 두각. */
.landing-compare-gallery {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.15fr;
  gap: 20px;
  align-items: center;
}
.lc-capture {
  background: #1F1F1F;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 4/3;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease-out, box-shadow .25s ease-out;   /* Stage B 호버 적용 */
}
.lc-capture-nightoff {
  border: 3px solid var(--primary);
  box-shadow: 0 12px 32px -8px rgba(107, 70, 229, 0.30);
}

/* PC 호버 scale (Spec D-Fix-29 Stage B) — 터치 디바이스 sticky hover 방지
   Spec D-Fix-31: 4번 NightOff 호버 시 우측 origin 분기 (페이지 밖 침범 안전망). */
@media (hover: hover) and (pointer: fine) {
  .lc-capture:hover {
    transform: scale(1.6);
    z-index: 10;
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.25);
  }
  .lc-capture-nightoff:hover {
    box-shadow: 0 20px 48px -12px rgba(107, 70, 229, 0.45);
  }
  .landing-compare-gallery .lc-capture:nth-child(4):hover {
    transform-origin: right center;
  }
}
/* 캡처 라벨 자리 (Spec D-Fix-35: 좌상단 → 우상단 / 거버닝 자료 보존) */
.lc-capture-label {
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 600;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}
.lc-capture-label-strong {
  background: var(--primary, #6B46E5);
  font-size: 15px;
}
.lc-capture-placeholder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-size: 12px;
}
.lc-capture-placeholder-strong {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}

/* 비교 표 — D-Fix-21 가격 표 패턴 정합 (5 컬럼) */
.compare-table {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  background: #fff;
  border: 1px solid var(--border, #DDD);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 20px -10px rgba(0,0,0,0.06);
  text-align: left;
}
.ct-cell {
  padding: 16px 18px;
  border-top: 1px solid var(--border, #DDD);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: var(--fg, #1A1A1A);
  gap: 4px;
  text-align: center;
}
.ct-cell.ct-header {
  border-top: 0;
  padding: 22px 18px;
  font-weight: 700;
  font-size: 16px;
}
.ct-row-label {
  background: var(--bg-2, #FAFAFA);
  align-items: flex-start;
  text-align: left;
  font-weight: 600;
}
/* NightOff 컬럼 — 보라 통일 (Spec D-Fix-31 / D-Fix-31c 하단 닫기) */
.ct-nightoff {
  background: #FAFAFA;
  border-left: 2px solid var(--primary);
  border-right: 2px solid var(--primary);
  font-weight: 700;
}
/* 마지막 행 NightOff 셀 하단 보더 (Spec D-Fix-31c) — 구조 변경 시 재검토 */
.ct-nightoff:last-child {
  border-bottom: 2px solid var(--primary);
}
.ct-nightoff-header {
  background: var(--primary);
  color: #FFFFFF;
  border-top: 3px solid var(--primary);
}
.ct-mark {
  font-size: 20px;
}
.ct-note {
  font-size: 12px;
  color: var(--fg-2, #666);
  font-weight: 500;
}

/* 캡처 이미지 (Spec D-Fix-27 Stage B) — placeholder 자리 차지 */
.lc-capture-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 태블릿 — 2열 중간 break point (Spec D-Fix-29 Stage A) */
@media (min-width: 721px) and (max-width: 959px) {
  .landing-compare-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

/* sticky CTA — FAB pill (Spec D-Fix-27 Stage B / D-Fix-28 색감 / D-Fix-28b FAB 전환) */
.landing-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: transparent;
  padding: 0 24px 24px;
  text-align: center;
  pointer-events: none;
}
.landing-sticky-cta-btn {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: #FFFFFF;
  padding: 16px 36px;
  border-radius: 9999px;
  font-size: 16px;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 8px 24px -4px rgba(107, 70, 229, 0.45);
  transition: background .15s, transform .15s, box-shadow .15s;
}
.landing-sticky-cta-btn:hover {
  background: linear-gradient(135deg, var(--primary-hover) 0%, var(--primary) 100%);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(107, 70, 229, 0.55);
}
.landing-sticky-cta-btn:active {
  transform: translateY(0);
}
.landing-sticky-cta-spacer {
  height: 40px;
}

/* Footer (Spec D-Fix-20: 사업자 정보 추가) */
.landing-footer {
  padding: 36px 24px 48px;
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-2);
  border-top: 1px solid var(--border);
}
.landing-footer-row { margin: 6px 0; }
.landing-footer-row a {
  color: var(--fg-2);
  text-decoration: none;
}
.landing-footer-row a:hover { color: var(--primary); }
.landing-footer-info {
  font-size: 12px;
  opacity: 0.85;
}
.landing-footer-tag {
  margin-top: 12px;
  font-size: 13px;
}
.lf-sep {
  margin: 0 6px;
  color: var(--border-strong);
}

/* 반응형 */
@media (max-width: 720px) {
  .landing-hero-logo { height: 80px; margin-bottom: 28px; }
  .landing-hero-title { font-size: 38px; }
  .landing-hero-sub { font-size: 15px; }
  /* Hero 보강 모바일 (Spec D-Fix-33) */
  .landing-hero-eyebrow { font-size: 12px; margin-bottom: 12px; }
  .landing-hero-promise { font-size: 14px; margin: -20px 0 28px; }
  .landing-hero-preview { margin-top: 40px; max-width: calc(100% - 32px); }
  .landing-hero-preview-bar { padding: 8px 12px; }
  .landing-hero-preview-dot { width: 8px; height: 8px; }
  .landing-trust-grid { grid-template-columns: 1fr; }
  .landing-features-grid { grid-template-columns: 1fr; }

  /* 비교 섹션 모바일 (Spec D-Fix-27 Stage A / D-Fix-29 Stage A / D-Fix-30 폰트 ↑) */
  .landing-compare { padding: 64px 16px; }
  .landing-compare-title { font-size: 27px; }
  .landing-compare-lead { font-size: 15px; margin-bottom: 28px; }
  .landing-compare-gallery {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 400px;
    margin: 40px auto 0;
  }
  /* 비교 표 모바일 — 1 컬럼 세로 카드 (D-Fix-21 패턴 정합) */
  .compare-table {
    grid-template-columns: 1fr;
    border-radius: 12px;
  }
  .ct-cell {
    padding: 12px 14px;
    font-size: 14px;
    flex-direction: row;
    justify-content: space-between;
    text-align: right;
    gap: 8px;
  }
  .ct-cell.ct-header {
    padding: 16px 16px;
    font-size: 15px;
    flex-direction: column;
    text-align: center;
  }
  .ct-row-label:not(.ct-header) {
    background: #1A1A1A;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 15px;
    text-align: center;
    padding: 14px 16px;
    border-top: 8px solid #1A1A1A;
  }
  .ct-cell.ct-header.ct-row-label { display: none; }
  .ct-nightoff {
    border-left: 0;
    border-right: 0;
    border-top: 2px solid var(--primary);
    border-bottom: 0;   /* :last-child 보라 선 무력화 (Spec D-Fix-31c) */
  }

  /* sticky CTA 모바일 (Spec D-Fix-27 Stage B / D-Fix-28b FAB) */
  .landing-sticky-cta { padding: 0 16px 16px; }
  .landing-sticky-cta-btn {
    padding: 14px 28px;
    font-size: 14px;
    max-width: 320px;
  }
  .landing-sticky-cta-spacer { height: 36px; }

  /* 가격 비교 표 — 1 컬럼 + 셀 횡배치 (Spec D-Fix-21) */
  .landing-pricing { padding: 64px 20px; }
  .landing-pricing-table {
    grid-template-columns: 1fr;
    border-radius: 16px;
  }
  /* Spec D-Fix-40: 상단 띠 / 하단 부가 자료 모바일 */
  .landing-pricing-promo {
    margin-top: 20px;
    padding: 12px 18px;
  }
  .landing-pricing-promo-title { font-size: 14px; }
  .landing-pricing-promo-sub { font-size: 12.5px; }
  .landing-pricing-note {
    margin-top: 12px;
    padding: 0 20px;
    font-size: 11.5px;
  }
  .pt-cell {
    border-top: 1px solid var(--border);
    padding: 14px 18px;
    flex-direction: row; justify-content: space-between;
    text-align: right;
    gap: 8px;
  }
  .pt-row-label:not(.pt-header) {
    background: var(--bg-2, #FAFAFA);
    font-weight: 700; color: var(--fg);
    font-size: 14px;
    border-top: 8px solid var(--bg-2, #FAFAFA);
    padding-top: 18px;
  }
  .pt-header.pt-row-label { display: none; }
  .pt-header {
    flex-direction: column; text-align: center;
    padding: 28px 20px 18px;
  }
  .pt-best {
    border-left: 2px solid var(--primary);
    border-right: 2px solid var(--primary);
  }
  .pt-price-row { flex-direction: row; align-items: baseline; gap: 8px; }
  .landing-footer-row { font-size: 11.5px; }
  .landing-section-title { font-size: 36px; letter-spacing: -0.03em; }
  .landing-section-lead { font-size: 14.5px; margin-bottom: 32px; }
}

/* ===== 💰 오늘의 무료 크레딧 (.daily-credit-* + .credit-lotto-* + .credit-fortune-*) =====
 * Spec 4-B (5/16) 폐기.
 */

/* ===== 대시보드 사이드 컬럼 ===== */
/* .tip-card / .daily-credit / .credit-lotto-* / .credit-fortune-* 등 자식 카드 모두
 * Spec 4-A + 4-B (5/16) 폐기. .dashboard-side-col 컨테이너 영역은 향후 견본 풀 위젯
 * 또는 다른 콘텐츠 영역 확장 대비 layout 영역 유지. */
.dashboard-side-col {
  display: flex; flex-direction: column;
  gap: 0;
}

/* ===== 대시보드 중단 CTA (새 과업 등록 큰 버튼) ===== */
.dashboard-cta-section {
  text-align: center;
  padding: 32px 0 36px;
  margin-bottom: 28px;
  background: linear-gradient(180deg, var(--primary-soft) 0%, transparent 100%);
  border-radius: var(--radius-lg);
}
.dashboard-mega-cta {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 18px 40px;
  font-size: 17px; font-weight: 700;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 24px -8px color-mix(in oklab, var(--primary) 50%, transparent);
  letter-spacing: -0.01em;
}
.dashboard-mega-cta svg { width: 22px; height: 22px; }
.dashboard-cta-sub {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--fg-2);
}
.dashboard-footer {
  margin-top: 40px; padding: 20px 0 32px;
  text-align: center; font-size: 13px; color: var(--fg-2);
  border-top: 1px solid var(--border);
}

/* ===== 우리 회사의 강점은? 💪 (발주처별 인라인 카드) ===== */
.strengths-intro {
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, #ffffff 100%);
  border: 1px solid color-mix(in oklab, var(--primary) 25%, var(--border));
  border-left: 4px solid var(--primary);
  border-radius: 10px;
}
.strengths-intro .strengths-intro-title {
  font-size: 14px; font-weight: 700;
  color: var(--fg); letter-spacing: -0.01em;
  line-height: 1.5;
}
.strengths-intro .strengths-intro-title strong {
  color: var(--primary);
  font-weight: 800;
}
.strengths-intro .strengths-intro-sub {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--fg-2);
  line-height: 1.6;
}
.strength-category-select {
  width: 280px; max-width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.strength-capabilities-wrap {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.strength-cap-list-multi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 6px 12px;
}
.strength-cap {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 13px; color: var(--fg);
  cursor: pointer;
  transition: background .12s ease;
}
.strength-cap:hover { background: color-mix(in oklab, var(--primary) 6%, #fff); }
.strength-cap input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px; height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

/* ===== 발주처 들여다보기 👀 ===== */
.intel-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}
.intel-label {
  font-size: 12px; font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.intel-list {
  margin: 0; padding: 0 0 0 16px;
  font-size: 13px; line-height: 1.65;
  color: var(--fg);
}
.intel-list li { margin: 2px 0; }
.intel-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.intel-tag {
  display: inline-block;
  padding: 4px 10px;
  background: var(--primary-soft);
  color: var(--primary);
  border-radius: 999px;
  font-size: 12px; font-weight: 500;
}
.intel-summary {
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, #fff 100%);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  font-size: 13px; line-height: 1.6;
  color: var(--fg);
  font-style: italic;
}

/* ===== RFP 분석 — 배지 + 체크리스트 + 레이더 ===== */
.rfp-badges {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.rfp-badge {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: 13px;
  min-width: 160px;
}
.rfp-badge .rfp-badge-label {
  font-size: 12px; color: var(--fg-2);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.rfp-badge .rfp-badge-value {
  font-size: 15px; font-weight: 700; color: var(--fg);
  margin-top: 2px;
}
.rfp-grid-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 1100px) { .rfp-grid-2 { grid-template-columns: 1fr; } }
.rfp-radar-wrap {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
}
.rfp-radar-title { font-size: 14px; font-weight: 700; margin: 0 0 12px; color: var(--fg); }
.rfp-checklist-wrap {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
}

/* Spec D-Fix-43: 클라이언트 자리 한정 (전역 .card-* 무변경) */
.client-detail-stack .card-title { font-size: 20px; }
.client-detail-stack .card-subtitle { font-size: 15px; }
.client-detail-stack .rfp-radar-title { font-size: 16px; }

/* Spec D-Fix-43: RFP 자식 자리 카드 분리 (시각 구분 ↑) */
.client-detail-stack .rfp-radar-wrap,
.client-detail-stack .rfp-checklist-wrap,
.client-detail-stack .rfp-risks {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 16px;
}
.rfp-checklist {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.rfp-checklist li {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 13px; line-height: 1.5;
  color: var(--fg);
}
.rfp-checklist li::before {
  content: "☐"; flex-shrink: 0;
  color: var(--primary); font-weight: 700;
  font-size: 16px; line-height: 1.3;
}
.rfp-risks {
  background: linear-gradient(135deg, #FEF3C7 0%, #FFFBEB 100%);
  border: 1px solid #FCD34D;
  border-left: 4px solid #F59E0B;
  border-radius: 10px;
  padding: 14px 16px;
  margin-top: 14px;
}
.rfp-risks-title {
  font-size: 14px; font-weight: 700;
  color: #92400E; margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.rfp-risks ul {
  margin: 0; padding: 0 0 0 18px;
  font-size: 14px; line-height: 1.6; color: #78350F;
}
.rfp-risks li { margin: 3px 0; }

/* RFP 업로드 안내 강화 */
.rfp-upload-guide {
  padding: 14px 16px;
  background: var(--primary-soft);
  border: 1px dashed var(--primary);
  border-radius: 10px;
  margin-bottom: 14px;
}
.rfp-upload-guide-title {
  font-size: 14px; font-weight: 700;
  color: var(--primary);
  margin: 0 0 4px;
}
.rfp-upload-guide-sub {
  font-size: 12px; color: var(--fg-2);
  line-height: 1.55; margin: 0 0 8px;
}
.rfp-upload-checklist {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--fg-2);
}
.rfp-upload-checklist span::before {
  content: "☐ "; color: var(--primary); font-weight: 700;
}
.rfp-upload-checklist span.done::before {
  content: "☑ "; color: var(--success);
}

/* ===== 새 대화 시작 버튼 — 가운데 정렬 ===== */
.btn-start-conv-wrap {
  display: flex; justify-content: center;
  margin: 16px 0;
}

/* ===== select / dropdown 위로 펼치기 — 화면 하단 근접 시 자동 ===== */
.dropdown-up {
  position: absolute;
  bottom: calc(100% + 6px);
  top: auto !important;
}

/* outcome-menu 가 위로 펼쳐지는 경우 */
.outcome-menu.dropdown-up {
  bottom: calc(100% + 4px);
  top: auto !important;
}

/* ===== 좌우 분할 패널 (제안서 생성 시 자동 활성화) ===== */
.chat-split-wrap {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;        /* 기본: 좌측 대화창만 풀폭 */
  transition: grid-template-columns .35s cubic-bezier(.22,1,.36,1);
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}
.chat-split-wrap.split-active {
  /* Spec D-Fix-HeaderClean: 대화 우선 / 패널 360px 고정 */
  grid-template-columns: 1fr 360px;
}
@media (max-width: 1400px) {
  .chat-split-wrap.split-active {
    grid-template-columns: 1fr 360px;
  }
}

/* Spec D-Fix-HeaderClean — 헤더 중복 버튼 4개 숨김 (오른쪽 패널이 100% 대체)
   함수·이벤트는 보존(패널 카드가 같은 함수 호출). 표시만 차단. */
.chat-header #header-pptx-download-btn,
.chat-header #header-regen-page-btn,
.chat-header #header-audit-btn,
.chat-header .budget-btn { display: none !important; }
@media (max-width: 1100px) {
  /* 좁아지면 미리보기 자동 숨김 — 우측 토글로 다시 열기 */
  .chat-split-wrap.split-active {
    grid-template-columns: 1fr;
  }
  .chat-split-wrap.split-active > .proposal-side-panel { display: none; }
}
.chat-split-wrap > .chat-shell {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  border-right: 1px solid var(--border);
}
.proposal-side-panel {
  display: flex; flex-direction: column;
  min-width: 0; min-height: 0;
  background: linear-gradient(180deg, #f8f8fb 0%, var(--bg-2) 100%);
  border-left: 1px solid var(--border);
  animation: sidePanelIn .3s ease-out;
}
.proposal-side-panel.hidden { display: none; }

/* D-Fix-LoadTimer + D-Fix-TimerDesign: 풀스크린 로더 경과 초 카운터 (RFP 분석 전용)
   wrapper 분리 — 링은 회전 / 숫자는 정지 (가운데 보라). FC온라인 st. */
.fs-spinner-wrap {
  position: relative;
  width: 72px; height: 72px;
  display: grid; place-items: center;
}
/* 스피너 크기 키움 — 두 자리 숫자 들어갈 공간 (기존 48 → 72) */
.fs-spinner-wrap > .fs-spinner { width: 72px; height: 72px; border-width: 4px; }
/* 카운터 = 링 가운데 보라 두꺼운 숫자 (정지 / 회전 안 함) */
.fs-timer {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ───────────────────────────────────────────────────────────
   Spec D-Fix-RightPanel — 생성 완료 후 기능 패널 (proposal-side-panel 안 .action-panel)
   슬라이드쇼 dead code 의 .side-panel-* / .png-* CSS 와 별개 영역.
   ─────────────────────────────────────────────────────────── */
.action-panel {
  display: flex; flex-direction: column;
  padding: 24px 22px; gap: 14px;
  height: 100%; overflow-y: auto;
}
.action-panel .ap-header { margin-bottom: 4px; }
.action-panel .ap-badge {
  display: inline-block;
  font-size: 15px; font-weight: 700;
  color: #1A1A1A;
  margin-bottom: 4px;
}
.action-panel .ap-subtitle {
  font-size: 12px; color: var(--muted);
  margin: 0;
}
.action-panel .ap-download-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #6E56CF 0%, #9D8AE6 100%);
  color: #fff;
  border: none; border-radius: 12px;
  font-size: 15px; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(110, 86, 207, .25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.action-panel .ap-download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(110, 86, 207, .35);
}
.action-panel .ap-dl-icon { font-size: 18px; }
.action-panel .ap-dl-hint {
  font-size: 12px; color: var(--muted);
  text-align: center; margin: -4px 0 4px 0;
}
.action-panel .ap-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 4px;
  font-size: 12px; color: var(--muted);
}
.action-panel .ap-divider::before,
.action-panel .ap-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
.action-panel .ap-cards {
  display: flex; flex-direction: column; gap: 10px;
}
.action-panel .ap-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border); border-radius: 12px;
  cursor: pointer; text-align: left;
  font-family: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.action-panel .ap-card:hover {
  transform: translateY(-1px);
  border-color: #9D8AE6;
  box-shadow: 0 4px 14px rgba(110, 86, 207, .12);
}
.action-panel .ap-card-head {
  display: flex; align-items: center; gap: 8px;
}
.action-panel .ap-card-emoji { font-size: 18px; }
.action-panel .ap-card-title {
  font-size: 14px; font-weight: 700; color: #1A1A1A;
  flex: 1;
}
.action-panel .ap-card-tag {
  font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px;
  background: #F3EFFE; color: #6E56CF;
}
.action-panel .ap-card-desc {
  font-size: 12px; color: var(--muted);
  margin: 0; line-height: 1.5;
}
.action-panel .ap-footer {
  font-size: 11px; color: var(--muted);
  text-align: center; margin-top: 6px;
}
@keyframes sidePanelIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* [Spec D-Fix-RemoveSlideshow-3] 슬라이드쇼 전용 CSS 블록 1 삭제 — JS 미사용 dead.
   삭제: .side-panel-head/label/title/stage / .png-* / .sp-download-row·btn / @keyframes png-slide-in·emoji-bounce.
   보존: .proposal-side-panel(컨테이너) / @keyframes sidePanelIn(컨테이너 등장 효과). */

/* ===== 제안서 완료 메시지 행 — 차분 강조 ===== */
.proposal-done-row .msg-bubble {
  background: linear-gradient(135deg, color-mix(in oklab, var(--success) 8%, #fff) 0%, #fff 100%) !important;
  border-color: color-mix(in oklab, var(--success) 30%, var(--border)) !important;
  font-weight: 600;
  color: var(--success);
}

/* ============================================================
   #9 푸터 색감 — 보라 그라디언트 + 인터랙션
   ============================================================ */
.global-footer {
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F0FF 100%) !important;
  border-top: 0 !important;
  padding: 36px 24px 28px !important;
  position: relative;
}
.global-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--primary) 45%, transparent) 50%, transparent 100%);
}
.global-footer-inner { max-width: 1200px; margin: 0 auto; gap: 10px !important; }
.gf-row a { color: var(--fg); transition: color .12s ease; }
.gf-row a:hover { color: var(--primary); }
.gf-sep { color: color-mix(in oklab, var(--primary) 35%, var(--border-strong)); }
.gf-links a { font-weight: 500; }
.gf-info { font-size: 12px; opacity: 0.85; }
.gf-info a { color: var(--fg-2); }
.gf-bottom {
  border-top: 1px dashed color-mix(in oklab, var(--primary) 25%, transparent) !important;
  padding-top: 14px;
  margin-top: 8px;
  justify-content: space-between;
  align-items: center;
}
.gf-tag {
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: -0.01em;
}
.gf-social a {
  background: rgba(124, 58, 237, 0.08);
  color: var(--primary);
  border-radius: 8px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  transition: all .15s ease;
}
.gf-social a:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-2px);
}

/* 대시보드 자체 푸터 제거됨 — global-footer 로 일원화 */

/* ============================================================
   #10 페이지 전환 애니메이션
   ============================================================ */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
#app-root > main,
#app-root > .landing-wrap {
  animation: pageIn 0.28s cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   #11 위트 — stagger / 버튼 마이크로 / 빈 상태 / 시간대
   ============================================================ */
@keyframes staggerIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-in {
  opacity: 0;
  animation: staggerIn 0.4s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay: var(--stagger-delay, 0ms);
}

/* 버튼 마이크로 인터랙션 — 누를 때 살짝 눌림 */
.btn:active:not(:disabled) {
  transform: scale(0.97);
  transition: transform 0.06s ease;
}

/* 활동 비어있을 때 위트 멘트 */
.activity-empty {
  font-size: 13px;
  font-style: italic;
  color: var(--fg-2);
  text-align: center;
  padding: 22px 16px;
}

/* 활동 피드 카드 — max-height + 내부 스크롤 (#5) */
.activity-feed-card {
  padding: 8px 6px;
  max-height: 360px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.activity-feed-card::-webkit-scrollbar { width: 6px; }
.activity-feed-card::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--primary) 25%, transparent);
  border-radius: 3px;
}
.activity-item {
  padding: 8px 10px !important;
  gap: 10px !important;
  font-size: 13px;
}
.activity-icon {
  width: 26px !important; height: 26px !important;
}
.activity-title { font-size: 13px; }
.activity-time { font-size: 11px; }

/* ============================================================
   #13 슬라이드쇼 모드 — 우측 사이드 패널
   ============================================================ */
.chat-split-wrap.split-active {
  height: calc(100vh - 0px);
  overflow: hidden;
}
.chat-split-wrap.split-active > .chat-shell { overflow: hidden; }
.chat-split-wrap.split-active > .proposal-side-panel {
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* [Spec D-Fix-RemoveSlideshow-3] 슬라이드쇼 전용 CSS 블록 2 삭제 — JS 미사용 dead.
   삭제: .side-panel-head / .sp-head-left·right / .sp-page-indicator / .slideshow-stage / .side-panel-controls / .sp-nav-btn / .sp-dots / .sp-dot / .sp-live-btn / @keyframes livePulse.
   보존: .chat-split-wrap.split-active > .proposal-side-panel(컨테이너 / 위 라인). */

/* ============================================================
   레이더 차트 (#1) — 좌측 SVG + 우측 범례
   ============================================================ */
.radar-wrap {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 18px;
  align-items: center;
  padding: 8px 4px;
}
@media (max-width: 1100px) {
  .radar-wrap { grid-template-columns: 1fr; }
  .radar-svg-box { margin: 0 auto; }
}
.radar-svg-box {
  flex-shrink: 0;
}
.radar-legend {
  margin: 0; padding: 0;
  list-style: none;
  display: flex; flex-direction: column; gap: 6px;
}
.radar-legend-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: var(--bg-2);
  border-radius: 8px;
  font-size: 12.5px;
  word-break: keep-all;
}
.radar-legend-num {
  width: 22px; height: 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
}
.radar-legend-name {
  color: var(--fg);
  font-weight: 500;
  line-height: 1.4;
}
.radar-legend-weight {
  color: var(--primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.radar-fallback {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 8px;
}
.radar-fallback-pill {
  padding: 6px 12px;
  background: var(--primary-soft); color: var(--primary);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
}

/* ============================================================
   평가 기준 배점 — 가로 막대 차트 (부모 카드 2열 + 자식 들여쓰기)
   ============================================================ */
.score-chart-wrap {
  padding: 4px 0;
}
/* 풀폭 1열 — 카드가 가로로 펴져서 항목명이 한 줄에 들어옴 */
.score-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.score-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px;
  break-inside: avoid;
}
.score-row {
  display: grid;
  /* 이름 36% / 막대 56% / 점수 8% — 막대 영역을 넓게 */
  grid-template-columns: minmax(140px, 36%) minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}
.score-row-parent {
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.score-name {
  font-size: 14px;
  color: var(--fg);
  font-weight: 600;
  line-height: 1.35;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.score-name-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-2);
}
/* 막대 ─ 두껍게 (10→14px) + 점수 라벨 막대 끝에 인라인 표시 */
.score-bar-box {
  width: 100%;
  height: 14px;
  background: rgba(124, 58, 237, 0.08);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.score-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 240ms ease;
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px;
}
.score-bar-parent {
  background: linear-gradient(90deg, #7C3AED, #A855F7);
}
.score-bar-child {
  height: 10px;
  margin-top: 2px;
  background: rgba(124, 58, 237, 0.55);
}
.score-weight {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--primary);
  font-size: 14px;
  white-space: nowrap;
  min-width: 32px;
  text-align: right;
}
.score-weight-parent { font-size: 15px; }
.score-weight-child  { font-size: 13px; color: var(--fg-2); font-weight: 600; }
.score-children {
  display: flex; flex-direction: column; gap: 5px;
  padding-left: 14px;
  margin-top: 4px;
  border-left: 3px solid rgba(124, 58, 237, 0.22);
}
.score-row-child {
  grid-template-columns: minmax(140px, 36%) minmax(0, 1fr) auto;
}
.score-total {
  margin: 12px 2px 0;
  text-align: right;
}

/* rfp-grid-stack — 평가배점/요구사항 1열 stack (이전 50:50 이 너무 좁아 폐기) */
.rfp-grid-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 18px;
}

/* ============================================================
   #6 옛 Hero Banner (.hero-banner / .hero-main-* / .hero-sub-* / @keyframes heroSparkle)
   은 Spec 6 (5/16) 폐기. 교체: .features-5-* (NightOff 핵심 기능 5 카드).
   ⚠ .landing-hero-sub (L3704, L3912) 는 다른 영역 (랜딩 페이지) — 무관.
   ============================================================ */

/* ============================================================
   #5 히어로 배너 5 슬라이드 (Spec 7, 5/16)
   ── 5 카드 위 영역 자동 롤링 (5초) + 도트 네비 + 호버 일시정지
   ── 메모리 안전: document.body.contains(section) 영역 자동 cleanup
   ============================================================ */
.hero-5 {
  position: relative;
  width: 100%;
  margin-bottom: 32px;   /* Spec C-2 (5/18): 18 → 32, Hero ↔ 5 카드 여백 확대 */
  border-radius: 16px;
  overflow: hidden;
  min-height: 260px;
  box-shadow: 0 14px 32px -14px rgba(0, 0, 0, 0.55);
}

.hero-5-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  padding: 32px 36px;
  display: flex; align-items: flex-start;
  /* Spec C-6 (5/18): 풀 배너 위 흰 텍스트 (좌측 그라데이션 마스크와 정합) */
  color: #FFFFFF;
}
.hero-5-slide.active {
  opacity: 1;
  pointer-events: auto;
}

/* Spec C-6 (5/18): 풀 배너 이미지 (background-image inline 영역) + cover.
   비즈폼 패턴 정합 — 좌측 그라데이션 마스크 (::before) + 흰 텍스트. */
.hero-5-slide[data-tone="purple-blue"],
.hero-5-slide[data-tone="pink"],
.hero-5-slide[data-tone="amber"],
.hero-5-slide[data-tone="green"],
.hero-5-slide[data-tone="purple"] {
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  border: 0;
  overflow: hidden;
}

/* Spec C-6 (5/18): 좌측 그라데이션 마스크 — 흰 텍스트 가독성 영역 */
.hero-5-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(31, 17, 71, 0.85) 0%,
    rgba(31, 17, 71, 0.55) 40%,
    rgba(31, 17, 71, 0.15) 70%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Spec C-6 (5/18): 자식 영역 마스크 위로 (z-index 2) */
.hero-5-slide > * {
  position: relative;
  z-index: 2;
}

/* Spec C-6 (5/18): grid 패턴 풀 배너 이미지로 대체 → 영역 폐기 */
.hero-5-grid-pattern { display: none; }

/* Spec C-6 (5/18): radial glow 풀 배너 이미지로 대체 → 영역 폐기 */
.hero-5-radial-glow { display: none; }

/* Spec C-6 (5/18): 액센트 디테일 (별빛/사각형/음성파/차트/별자리 SVG) 풀 배너 이미지로 대체 → 영역 폐기 */
.hero-5-accent-detail { display: none; }

/* 좌측 텍스트 영역 */
.hero-5-slide-content {
  position: relative;
  z-index: 2;
  max-width: 62%;
  display: flex; flex-direction: column; gap: 12px;
}

/* Spec C-6 (5/18): badge 옅은 보라 → 반투명 흰 (글래스모피즘, 풀 배너 위) */
.hero-5-badge {
  display: inline-flex; align-items: center; gap: 4px;
  align-self: flex-start;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  backdrop-filter: blur(8px);
}
.hero-5-badge-emoji { font-size: 12px; }

.hero-5-title {
  margin: 0;
  font-size: 22px; font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.25;
  word-break: keep-all;
  /* Spec C-6 (5/18): 다크 보라 → 흰 (풀 배너 위, text-shadow 가독성 보강) */
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}
.hero-5-title-brand {
  /* Spec C-6 (5/18): Primary 보라 → 골드 (어두운 마스크 위 강조) */
  color: #F4C471;
  font-weight: 600;
}

.hero-5-description {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  /* Spec C-6 (5/18): 옅은 다크 보라 → 옅은 흰 (풀 배너 정합) */
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.005em;
  word-break: keep-all;
  white-space: pre-line;   /* 데이터 영역 '\n' 줄바꿈 */
}

/* Spec C-6 (5/18): 일러스트 카드 풀 배너 이미지로 대체 → 영역 폐기 */
.hero-5-illustration { display: none; }

/* 도트 네비 (우측 하단) */
.hero-5-dots {
  position: absolute;
  bottom: 18px; right: 24px;
  display: flex; gap: 6px;
  z-index: 3;
}
.hero-5-dot {
  appearance: none;
  border: 0;
  width: 8px; height: 8px;
  border-radius: 999px;
  /* Spec C-6 (5/18): 옅은 보라 → 옅은 흰 (풀 배너 위 가독성) */
  background: rgba(255, 255, 255, 0.40);
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
  padding: 0;
}
.hero-5-dot:hover { background: rgba(255, 255, 255, 0.70); }
.hero-5-dot.active {
  width: 22px;
  /* Spec C-6 (5/18): Primary 보라 → 흰 */
  background: #FFFFFF;
}

/* 반응형 — ≤1024px 중간 영역 */
@media (max-width: 1024px) {
  .hero-5 { min-height: 240px; }
  .hero-5-slide { padding: 28px 30px; }
  .hero-5-title { font-size: 22px; }
  .hero-5-description { font-size: 13.5px; }
  .hero-5-illustration { width: 80px; height: 80px; font-size: 38px; top: 28px; right: 28px; }
  .hero-5-accent-detail { width: 160px; height: 80px; }
}

/* 반응형 — ≤767px 모바일 (일러스트 hide, 텍스트 풀폭) */
@media (max-width: 767px) {
  .hero-5 { min-height: 220px; }
  .hero-5-slide { padding: 22px 20px 50px; }
  .hero-5-title { font-size: 18px; }
  .hero-5-description { font-size: 12.5px; line-height: 1.55; }
  .hero-5-illustration { display: none; }   /* 결정 3 (5/16) — 모바일 hide */
  .hero-5-slide-content { max-width: 100%; }
  .hero-5-accent-detail { opacity: 0.5; bottom: 55px; right: 12px; width: 130px; height: 65px; }
  .hero-5-dots { bottom: 14px; right: 16px; }
}

/* ============================================================
   #6 NightOff 주요 기능 5 카드 (Spec 6 + Spec 8, 5/16)
   ── Spec 6: 5 카드 신규 + 가운데 강조 (다크 그라데이션 + 2px 엠버 보더 + 배지 + scale 1.06)
   ── Spec 8: 카드 콘텐츠 종→횡 + 폰트 ↑ + 헤더 워딩 "주요 기능" + 디자인 정합
   ============================================================ */
.features-5 {
  margin-bottom: 40px;   /* Spec C-2 (5/18): 28 → 40, 5 카드 ↔ 뉴스 위젯 여백 ↑ */
  display: flex; flex-direction: column; gap: 14px;
}
.features-5-header {
  text-align: center;
  margin-bottom: 4px;
}
.features-5-title {
  margin: 0 0 4px;
  font-size: 20px; font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--fg);
  line-height: 1.25;
}
.features-5-subtitle {
  margin: 0;
  font-size: 13.5px;
  color: var(--fg-2);
  letter-spacing: -0.005em;
}
.features-5-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;   /* Spec C-2 (5/18): 10 → 14, 카드 간 여백 ↑ */
  /* Spec C-2 (5/18): baseline scale 폐기로 padding 영역 유지 (배지 우상단 클리핑 방지) */
  padding: 10px 0;
  align-items: stretch;
}
.feature-5-card {
  position: relative;
  padding: 14px 12px;
  min-height: 76px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  text-align: left;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature-5-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 25%, var(--border));
  box-shadow: 0 8px 16px -8px rgba(124,58,237,0.18);
}
.feature-5-card-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 20px;
  flex-shrink: 0;   /* 횡방향 정합 — 카드 폭 좁아져도 아이콘 박스 영역 안 줄어듦 */
  /* 톤별 background + color 는 [data-tone] 영역 분기 */
}
.feature-5-card-title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -0.2px;
  line-height: 1.35;
  white-space: pre-line;   /* 데이터 영역 '\n' 줄바꿈 영역 */
}

/* Spec C-5 (5/18): 가운데 강조 다크 → Light Lavender. 보더 Primary 보라 1.5px.
   배지 엠버 → Primary 보라. 브랜드 본질 (가벼움/응원) 정합. */
.feature-5-card.featured {
  background: linear-gradient(180deg, #F5F0FF 0%, #EBE3FF 100%);
  border: 1.5px solid #6B46E5;
  color: #1F1147;
  position: relative;
}
.feature-5-card.featured:hover {
  transform: translateY(-2px);
}
.feature-5-card.featured .feature-5-card-title {
  /* Spec C-5 (5/18): 흰 → 다크 보라 */
  color: #1F1147;
}
.feature-5-card-badge {
  position: absolute;
  top: -9px; right: 10px;
  padding: 3px 8px;
  /* Spec C-5 (5/18): 엠버 #EF9F27 → Primary 보라 */
  background: #6B46E5;
  color: #fff;
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.02em;
  border-radius: 999px;
  white-space: nowrap;
}

/* 5 톤별 컬러 영역 (일반 카드 아이콘 색감) */
.feature-5-card[data-tone="purple"] .feature-5-card-icon { background: rgba(127, 119, 221, 0.12); color: #7F77DD; }
.feature-5-card[data-tone="blue"]   .feature-5-card-icon { background: rgba(55, 138, 221, 0.12);  color: #378ADD; }
.feature-5-card[data-tone="amber"]  .feature-5-card-icon { background: rgba(239, 159, 39, 0.18);  color: #BA7517; }
.feature-5-card[data-tone="green"]  .feature-5-card-icon { background: rgba(29, 158, 117, 0.12);  color: #1D9E75; }
.feature-5-card[data-tone="pink"]   .feature-5-card-icon { background: rgba(212, 83, 126, 0.12);  color: #D4537E; }

/* Spec C-5 (5/18): featured 아이콘 엠버 → 옅은 보라 (라이트 배경 정합).
   크기 38×38 baseline 유지 (Spec C-2). */
.feature-5-card.featured .feature-5-card-icon {
  background: rgba(107, 70, 229, 0.15);
  color: #6B46E5;
}

/* 반응형 — ≤1024px 3-열 (사이드바 햄버거화 후 메인 풀폭).
   Spec C-2 (5/18): baseline scale 폐기로 반응형 scale 평탄화 영역 폐기. */
@media (max-width: 1024px) {
  .features-5-grid { grid-template-columns: repeat(3, 1fr); }
}
/* 반응형 — ≤767px 1-열 (모바일) */
@media (max-width: 767px) {
  .features-5-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   #8 제안서 컴팩트 완료 카드
   ============================================================ */
.proposal-compact {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fff 0%, color-mix(in oklab, var(--primary) 4%, #fff) 100%);
  border: 1px solid color-mix(in oklab, var(--primary) 20%, var(--border));
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 14px -8px rgba(124,58,237,0.18);
}
.proposal-compact-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.proposal-compact .thumb-label {
  font-size: 11px; font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
}
.proposal-compact .thumb-title {
  margin: 0;
  font-size: 14.5px; font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.proposal-compact .thumb-meta {
  font-size: 12px;
  color: var(--fg-2);
}
.proposal-compact-actions {
  display: flex; gap: 8px;
  flex-shrink: 0;
}
.proposal-compact-actions .btn { font-size: 12px; padding: 8px 12px; }

/* ============================================================
   PT 연습 모달 (#7)
   ============================================================ */
.pt-modal {
  max-width: 760px !important;
  max-height: 90vh;
  display: flex; flex-direction: column;
}
.pt-tabs {
  display: flex; gap: 0;
  padding: 0 22px;
  border-bottom: 1px solid var(--border);
}
.pt-tab {
  padding: 12px 18px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px; font-weight: 600;
  color: var(--fg-2);
  cursor: pointer;
  transition: all .12s;
}
.pt-tab:hover { color: var(--fg); }
.pt-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}
.pt-duration-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.pt-duration-row .select { width: 100px; height: 32px; }
.pt-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.pt-tip {
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--primary-soft) 0%, #fff 100%);
  border-left: 4px solid var(--primary);
  border-radius: 8px;
  font-size: 13px;
  color: var(--fg);
  font-style: italic;
}
.pt-slide-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.pt-slide-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.pt-slide-num {
  background: var(--primary);
  color: #fff;
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px; font-weight: 700;
}
.pt-slide-section {
  font-size: 12px; font-weight: 600;
  color: var(--fg);
}
.pt-slide-time {
  font-size: 11px;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.pt-slide-script {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--fg);
  word-break: keep-all;
}
.pt-slide-highlights {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
}
.pt-hl-pill {
  font-size: 11px; font-weight: 600;
  padding: 3px 9px;
  background: var(--warning-soft);
  color: var(--warning);
  border-radius: 999px;
}
.pt-qa-card {
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
.pt-qa-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.pt-qa-cat {
  font-size: 11px; font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  padding: 3px 9px;
  border-radius: 4px;
}
.pt-qa-num {
  font-size: 12px; font-weight: 700;
  color: var(--fg-2);
  margin-left: auto;
}
.pt-qa-question {
  margin: 0 0 8px;
  font-size: 14px; font-weight: 600;
  color: var(--fg);
  line-height: 1.55;
  word-break: keep-all;
}
.pt-qa-answer {
  font-size: 13px;
}
.pt-qa-answer summary {
  cursor: pointer;
  color: var(--primary);
  font-weight: 600;
  padding: 6px 0;
  user-select: none;
}
.pt-qa-answer-text {
  margin: 6px 0;
  padding: 10px 12px;
  background: var(--bg-2);
  border-radius: 8px;
  line-height: 1.6;
  color: var(--fg);
  word-break: keep-all;
}
.pt-qa-tip {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--warning);
  font-style: italic;
}

/* ============================================================
   ░░░  반응형 통합 시스템 (표준 breakpoint)  ░░░
   • ≥1280px  데스크톱   3단 (사이드바 + 메인 + 우측 패널)
   • 1024~1279px  좁은 데스크톱  2단 (사이드바 + 메인, 우측 숨김)
   • 768~1023px  태블릿  햄버거 (사이드바 슬라이드 인, 메인 풀폭)
   • <768px  모바일      햄버거 + 카드 1열 + padding 축소
   ============================================================ */

/* 햄버거 버튼 — 기본은 숨김, 1024px 미만에서만 보임 */
.nav-toggle {
  position: fixed;
  top: 14px; left: 14px;
  z-index: 60;
  width: 44px; height: 44px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: none;
  align-items: center; justify-content: center;
  color: var(--fg);
  cursor: pointer;
  transition: transform .12s ease, background .12s;
}
.nav-toggle:hover { background: var(--bg-2); }
.nav-toggle:active { transform: scale(0.94); }

/* 사이드바 백드롭 (모바일 메뉴 오버레이) */
.nav-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.42);
  z-index: 38;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

/* ≤1279px 우측 패널 숨김 분기는 Spec 5 (5/16) 우측 사이드바 폐기 영역 함께 정리. */

/* ===== ≤1024px: 사이드바 햄버거화 ===== */
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  /* 사이드바 off-canvas */
  .sidebar {
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 0 transparent;
  }
  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 22px 60px -16px rgba(0,0,0,0.25);
  }
  /* 메인은 풀폭 */
  .main { margin-left: 0 !important; }
  .global-footer { margin-left: 0 !important; }
  /* 헤더 좌측에 햄버거 자리 확보 */
  .main-header {
    padding-left: 70px;
  }
  /* (설정 FAB 영역 제거됨 — 사이드바 하단으로 이동) */
}

/* ===== ≤768px: 모바일 ===== */
@media (max-width: 767px) {
  /* 메인 패딩 축소 */
  .main-content {
    padding: 18px 14px !important;
    max-width: 100%;
  }
  .main-header {
    padding: 14px 16px 14px 60px !important;
    min-height: 60px;
  }
  .main-header h1 { font-size: 18px !important; }
  .main-header p { font-size: 13px !important; }

  /* 카드 grid 들 1열 */
  .rfp-grid-2 { grid-template-columns: 1fr !important; }
  .score-grid { grid-template-columns: 1fr !important; }
  .task-actions-row { grid-template-columns: 1fr !important; }
  .cards-grid, .clients-grid { grid-template-columns: 1fr !important; }

  /* 카드 padding 축소 */
  .card { padding: 16px 14px !important; }
  .card-head { padding: 14px 14px 0 !important; }
  .card-body { padding: 12px 14px 14px !important; }
  .task-actions-card { padding: 18px 14px !important; }

  /* 푸터 간소화 */
  .global-footer { padding: 18px 14px 14px !important; font-size: 11.5px !important; }
  .global-footer-inner { gap: 6px !important; }
  .gf-row { font-size: 11.5px; }
  .gf-bottom { flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  .gf-info { font-size: 11px !important; }

  /* 햄버거 위치 (설정 FAB 영역 제거됨 — 사이드바 하단으로 이동) */
  .nav-toggle { width: 40px; height: 40px; top: 10px; left: 10px; border-radius: 10px; }

  /* 사이드바 폭 — 모바일에선 화면의 80% 정도 */
  .sidebar { width: min(82vw, 320px) !important; }

  /* 모달/토스트 모바일 보정 */
  .modal { max-width: 92vw !important; max-height: 88vh !important; }
  .toast-root { left: 12px; right: 12px; bottom: 16px; }

  /* .rp-body-img-btn 모바일 보정은 Spec 5 (5/16) 우측 사이드바 폐기 영역 함께 정리. */
}

/* ===== ≤480px: 매우 작은 모바일 ===== */
@media (max-width: 479px) {
  body { font-size: 14px; }
  .main-header h1 { font-size: 16px !important; }
  .btn { font-size: 13px; padding: 8px 12px; }
}

/* ===== 인쇄 시 햄버거/푸터 숨김 (우측 패널은 Spec 5 (5/16) 폐기) ===== */
@media print {
  .nav-toggle, .nav-backdrop,
  .global-footer { display: none !important; }
  .main { margin: 0 !important; }
  .sidebar { display: none !important; }
}

/* ============================================================
   랜딩 풀스크린 모드 — 우측 패널 / 푸터 / 햄버거 모두 숨김
   (랜딩은 한 화면 안에 모든 메시지 표시)
   ============================================================ */
/* body.landing-fullscreen .right-panel + .main margin-right 분기는 Spec 5 (5/16) 폐기. */
body.landing-fullscreen .global-footer,
body.landing-fullscreen .nav-toggle,
body.landing-fullscreen .nav-backdrop {
  display: none !important;
}

/* ============================================================
   마감 D-day 배지
   ============================================================ */
.dday-badge {
  flex-shrink: 0;
  display: inline-flex; align-items: center;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  font-size: 11.5px; font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.dday-far    { background: var(--bg-2);          color: var(--fg-soft); }
.dday-mid    { background: var(--gold-soft);     color: #B8762E; }
.dday-soon   { background: var(--peach-soft);    color: var(--sunset); }
.dday-urgent {
  background: linear-gradient(135deg, #FF8E5C, #E8483A);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(232, 72, 58, 0.4);
  animation: ddayPulse 2.4s var(--ease) infinite;
}
.dday-today {
  background: linear-gradient(135deg, #E8483A, #C2342A);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 4px 14px -2px rgba(194, 52, 42, 0.5);
  animation: ddayPulse 1.4s var(--ease) infinite;
}
.dday-past {
  background: var(--bg-3);
  color: var(--fg-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
@keyframes ddayPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* ============================================================
   자체 호스팅 폰트 — /static/fonts/Paperlogy-*.ttf (OFL 라이선스)
   9개 weight 전체 매핑 (100 Thin ~ 900 Black)
   ============================================================ */
@font-face {
  font-family: 'Paperlogy';
  src: url('/static/fonts/Paperlogy-1Thin.ttf') format('truetype');
  font-weight: 100; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('/static/fonts/Paperlogy-2ExtraLight.ttf') format('truetype');
  font-weight: 200; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('/static/fonts/Paperlogy-3Light.ttf') format('truetype');
  font-weight: 300; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('/static/fonts/Paperlogy-4Regular.ttf') format('truetype');
  font-weight: 400; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('/static/fonts/Paperlogy-5Medium.ttf') format('truetype');
  font-weight: 500; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('/static/fonts/Paperlogy-6SemiBold.ttf') format('truetype');
  font-weight: 600; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('/static/fonts/Paperlogy-7Bold.ttf') format('truetype');
  font-weight: 700; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('/static/fonts/Paperlogy-8ExtraBold.ttf') format('truetype');
  font-weight: 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: 'Paperlogy';
  src: url('/static/fonts/Paperlogy-9Black.ttf') format('truetype');
  font-weight: 900; font-display: swap; font-style: normal;
}

/* ============================================================
   제안서 슬라이드 폰트 — Paperlogy (프레젠테이션 특화)
   거버닝 28~32pt / 소제목 18~20pt / 본문 14~16pt
   ============================================================ */
.proposal-page {
  font-family: 'Paperlogy', 'SUIT Variable', 'SUIT', 'Pretendard Variable', 'Pretendard', sans-serif;
}
.proposal-page .page-governing,
.proposal-page h1,
.proposal-page .governing {
  font-weight: 800;
  font-size: clamp(24pt, 2.6vw, 32pt);
  letter-spacing: -0.03em;
  line-height: 1.18;
}
.proposal-page h2,
.proposal-page .page-section-title {
  font-weight: 700;
  font-size: clamp(16pt, 1.5vw, 20pt);
  letter-spacing: -0.022em;
  line-height: 1.25;
}
.proposal-page h3 {
  font-weight: 700;
  font-size: clamp(14pt, 1.2vw, 18pt);
  letter-spacing: -0.018em;
  line-height: 1.3;
}
.proposal-page p,
.proposal-page li,
.proposal-page td,
.proposal-page .body-text,
.proposal-page .page-summary {
  font-family: 'Presentation Local', 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: clamp(11pt, 1vw, 16pt);
  font-weight: 400;
  line-height: 1.6;
}

/* ============================================================
   분야별 슬라이드 배경 시스템 (1+2번 fallback — 추출 이미지 없을 때)
   .proposal-page 에 data-domain 속성으로 적용
   ============================================================ */
.proposal-page[data-domain] { background-size: cover; background-position: center; }
.proposal-page[data-domain="festival"] {
  background: linear-gradient(135deg, #FFE8DA 0%, #FFCB77 50%, #FFB4A2 100%);
}
.proposal-page[data-domain="forum"] {
  background: linear-gradient(135deg, #EDE7FF 0%, #FAF8F5 60%, #FFE8DA 100%);
}
.proposal-page[data-domain="exhibition"] {
  background: linear-gradient(135deg, #F3EFE9 0%, #FFEEE8 100%);
}
.proposal-page[data-domain="campaign"] {
  background: linear-gradient(135deg, #FFF3DD 0%, #FFEEE8 100%);
}
.proposal-page[data-domain="education"] {
  background: linear-gradient(135deg, #EDE7FF 0%, #F3EFE9 100%);
}
.proposal-page[data-domain="sports"] {
  background: linear-gradient(135deg, #FFE8DA 0%, #FAF8F5 60%, #FFF3DD 100%);
}
.proposal-page[data-domain="welfare"] {
  background: linear-gradient(135deg, #FFEEE8 0%, #FAF8F5 100%);
}
.proposal-page[data-domain="other"] {
  background: linear-gradient(135deg, #FAF8F5 0%, #F3EFE9 100%);
}
/* 표지는 더 강한 그라데이션 + 보라 액센트 */
.proposal-page[data-section*="표지"][data-domain] {
  background: linear-gradient(135deg, #6B46E5 0%, #A855F7 50%, #FF8E5C 100%);
  color: #fff;
}
.proposal-page[data-section*="표지"][data-domain] .page-governing { color: #fff; }

/* ============================================================
   🖼 PPTX PNG 미리보기 모달 (Phase 3-C)
   ============================================================ */
.pptx-preview-backdrop {
  background: rgba(20, 18, 14, 0.86);
  backdrop-filter: blur(8px);
}
.pptx-preview-modal {
  width: 92vw; height: 88vh;
  max-width: 1400px; max-height: 900px;
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
}
.pptx-preview-modal .modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.pptx-preview-modal h3 {
  font-size: 17px; font-weight: 700;
  margin: 0; letter-spacing: -0.015em;
}
.pptx-preview-counter {
  font-size: 13px; font-weight: 600;
  color: var(--fg-soft);
  font-variant-numeric: tabular-nums;
  padding: 4px 12px;
  background: var(--bg-2);
  border-radius: var(--radius-pill);
}
.pptx-preview-stage {
  flex: 1; min-height: 0;
  position: relative;
  background: linear-gradient(180deg, #FAFAF8 0%, #F0EDE5 100%);
  display: grid; place-items: center;
  padding: 24px;
}
.pptx-preview-img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 18px 48px -16px rgba(0,0,0,0.28);
  background: #fff;
}
.pptx-preview-nav {
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--border);
  color: var(--fg-strong);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .15s var(--ease);
  box-shadow: var(--shadow-md);
  z-index: 5;
}
.pptx-preview-nav:hover:not(:disabled) {
  background: var(--primary);
  color: #fff;
  transform: translateY(-50%) scale(1.05);
}
.pptx-preview-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.pptx-preview-prev { left: 16px; }
.pptx-preview-next { right: 16px; }

.pptx-thumb-strip {
  flex-shrink: 0;
  display: flex; gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border-top: 1px solid var(--border);
  overflow-x: auto;
  scroll-behavior: smooth;
}
.pptx-thumb {
  flex-shrink: 0;
  position: relative;
  width: 96px; height: 68px;
  border-radius: 6px;
  border: 2px solid transparent;
  background: var(--bg-2);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s var(--ease), transform .12s;
  padding: 0;
}
.pptx-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.pptx-thumb:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.pptx-thumb.active { border-color: var(--primary); box-shadow: 0 4px 12px -2px rgba(124,58,237,0.35); }
.pptx-thumb-num {
  position: absolute; top: 4px; left: 4px;
  background: rgba(0,0,0,0.6); color: #fff;
  font-size: 10px; font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.pptx-thumb.active .pptx-thumb-num { background: var(--primary); }

@media (max-width: 768px) {
  .pptx-preview-modal { width: 96vw; height: 92vh; }
  .pptx-preview-stage { padding: 12px; }
  .pptx-preview-nav { width: 40px; height: 40px; }
  .pptx-thumb { width: 72px; height: 52px; }
}

/* ─── Multi-pass progress UI (✨ 제안서 생성 버튼 클릭 후) ─── */
.mp-warning {
  background: #FFF7E6;
  border-left: 3px solid #F5A623;
  padding: 8px 12px;
  font-size: 12px;
  color: #8B5A00;
  margin-bottom: 10px;
  border-radius: 4px;
}
.mp-outline-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
}
.mp-substep {
  font-size: 13px;
}
.mp-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.mp-eta {
  font-size: 11px;
  color: #888;
}
.mp-slide-list {
  font-size: 12px;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid #EEE;
  border-radius: 4px;
  padding: 6px 8px;
  background: #FAFAFA;
}
.mp-slide-item {
  padding: 2px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.5;
  transition: opacity 0.2s;
}
.mp-slide-item .mp-mark {
  display: inline-block;
  width: 18px;
  text-align: center;
  font-weight: 700;
}
.mp-slide-item.mp-pending { color: #999; }
.mp-slide-item.mp-pending .mp-mark { color: #CCC; }
.mp-slide-item.mp-doing  { color: #1A1A1A; font-weight: 500; background: #FFF8DC; }
.mp-slide-item.mp-doing .mp-mark { color: #F5A623; }
.mp-slide-item.mp-done   { color: #666; }
.mp-slide-item.mp-done .mp-mark { color: #4CAF50; }
.mp-slide-item.mp-fail   { color: #C0392B; }
.mp-slide-item.mp-fail .mp-mark { color: #C0392B; }
.mp-retry-btn {
  margin-top: 8px;
  padding: 6px 14px;
  background: #1A1A1A;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mp-retry-btn:hover { background: #333; }

/* ─── Beta Notice Modal — 랜딩 첫 진입 시 1회 표시 ─── */
.beta-notice-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 30, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 24px;
  animation: bnFadeIn 0.32s ease-out;
}
.beta-notice-overlay.fade-out {
  animation: bnFadeOut 0.24s ease-in forwards;
}
@keyframes bnFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bnFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.beta-notice-modal {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #FFFFFF;
  border-radius: 20px;
  padding: 40px 36px 32px;
  box-shadow:
    0 24px 64px rgba(20, 16, 50, 0.32),
    0 4px 12px rgba(0, 0, 0, 0.06);
  animation: bnScaleUp 0.36s cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: 'Paperlogy', 'SUIT Variable', SUIT, Pretendard, sans-serif;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
@keyframes bnScaleUp {
  from { transform: scale(0.95) translateY(8px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.beta-notice-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 18px;
  color: #999;
  cursor: pointer;
  border-radius: 8px;
  transition: color 0.18s, background 0.18s;
  font-family: inherit;
}
.beta-notice-close:hover { color: #1A1A1A; background: #F5F5F5; }

.beta-notice-title {
  font-size: 22px;
  font-weight: 800;
  color: #1A1A1A;
  margin: 0 0 8px 0;
  letter-spacing: -0.3px;
}
.beta-notice-subtitle {
  font-size: 14px;
  color: #666;
  margin: 0 0 28px 0;
  line-height: 1.5;
}

.beta-notice-section {
  margin-top: 22px;
  padding-left: 14px;
  border-left: 3px solid #DDD;
}
.beta-notice-section.bn-good { border-left-color: #6366F1; }
.beta-notice-section.bn-warn { border-left-color: #999; }
.beta-notice-section.bn-soon {
  border-left-color: transparent;
  border-image: linear-gradient(180deg, #6366F1, #8B5CF6) 1;
}
.beta-notice-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
  margin: 0 0 10px 0;
  letter-spacing: -0.2px;
}

.beta-notice-list {
  margin: 0;
  padding-left: 20px;
  color: #333;
  font-size: 14px;
  line-height: 1.7;
}
.beta-notice-list li { margin-bottom: 4px; }
.beta-notice-list li::marker { color: #999; }

.beta-notice-paragraph {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: #333;
}
/* 같은 섹션 안 paragraph 2개 이상일 때 사이 간격 */
.beta-notice-paragraph + .beta-notice-paragraph { margin-top: 12px; }

.beta-notice-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid #EEE;
}

.beta-notice-btn-secondary {
  background: transparent;
  color: #666;
  border: none;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 10px;
  font-family: inherit;
  transition: color 0.18s, background 0.18s;
}
.beta-notice-btn-secondary:hover { color: #1A1A1A; background: #F5F5F5; }

.beta-notice-btn-primary {
  background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
  color: #FFFFFF;
  border: none;
  padding: 11px 26px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 12px;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.34);
  transition: transform 0.18s, box-shadow 0.18s;
}
.beta-notice-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(99, 102, 241, 0.42);
}
.beta-notice-btn-primary:active { transform: translateY(0); }

@media (max-width: 600px) {
  .beta-notice-modal { padding: 30px 22px 24px; border-radius: 16px; }
  .beta-notice-title { font-size: 20px; }
  .beta-notice-actions { flex-direction: column-reverse; gap: 8px; }
  .beta-notice-btn-primary,
  .beta-notice-btn-secondary { width: 100%; }
}

/* ===== 채팅 첫 진입 안내 모달 (.beta-notice-* 패턴 재활용 + 추가 영역) ===== */
.chat-intro-tip-hint {
  margin: 0 0 10px !important;
  font-size: 12.5px;
  color: var(--fg-2);
  font-style: italic;
}
.chat-intro-tips {
  display: flex; flex-direction: column; gap: 8px;
}
.chat-intro-tip-btn {
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--fg);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease, color .15s ease;
}
.chat-intro-tip-btn::before {
  content: "💬 ";
  margin-right: 4px;
}
.chat-intro-tip-btn:hover {
  border-color: var(--primary);
  background: var(--primary-soft, rgba(107, 70, 229, 0.10));
  color: var(--primary);
  transform: translateX(2px);
}
.chat-intro-tip-btn:active { transform: translateX(0); }
.chat-intro-font-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 4px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-fg, #fff);
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 2px 6px -2px rgba(107, 70, 229, 0.35);
}
.chat-intro-font-btn:hover {
  background: var(--primary-hover, #5a3bd0);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -2px rgba(107, 70, 229, 0.45);
}
.chat-intro-font-btn:active { transform: translateY(0); }

@media (max-width: 600px) {
  .chat-intro-tip-btn { font-size: 13px; padding: 10px 12px; }
  .chat-intro-font-btn { width: 100%; }
}

/* ============================================
   Spec A (5/18) 신규 — NightOff 리뉴얼 컴포넌트 베이스
   Spec B/C/D 영역 점진 도입 예정. 본 spec 영역 정의만, 적용 X.
   ============================================ */

.no-card {
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.no-card-flat {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.no-cta-dark {
  background: var(--dark-bg);
  color: var(--dark-fg);
  border: 0;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: 500;
  cursor: pointer;
  letter-spacing: -0.2px;
  transition: opacity var(--duration) var(--ease);
}
.no-cta-dark:hover { opacity: 0.85; }
.no-cta-dark:active { transform: scale(0.98); }

.no-pill-purple { background: var(--primary-soft); color: var(--primary); font-size: var(--text-xs); font-weight: 500; padding: 4px 10px; border-radius: var(--radius-sm); }
.no-pill-amber  { background: #FAEEDA; color: #854F0B; font-size: var(--text-xs); font-weight: 500; padding: 4px 10px; border-radius: var(--radius-sm); }
.no-pill-red    { background: var(--danger-soft); color: var(--danger); font-size: var(--text-xs); font-weight: 500; padding: 4px 10px; border-radius: var(--radius-sm); }
.no-pill-gray   { background: var(--bg-2); color: var(--fg-soft); font-size: var(--text-xs); font-weight: 500; padding: 4px 10px; border-radius: var(--radius-sm); }

/* ============================================================
   Dashboard Intro Modal — Spec D-Fix-7 (5/18)
   가입자 첫 진입 시 1회성 NightOff 차별화 + 솔직 안내.
   chat-intro 패턴 정확 복제, dismissed 영구 저장.
   ============================================================ */
.dashboard-intro-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(31, 17, 71, 0.55);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: dashboard-intro-fadein 0.3s ease;
}
.dashboard-intro-backdrop.dashboard-intro-fadeout {
  animation: dashboard-intro-fadeout 0.3s ease forwards;
}
@keyframes dashboard-intro-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dashboard-intro-fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}
.dashboard-intro-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 60px -8px rgba(0, 0, 0, 0.3);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* 헤더 — 폰트 위계 최상위 */
.dashboard-intro-head {
  padding: 36px 40px 24px;
  border-bottom: 1px solid var(--border, #EEE);
  background: linear-gradient(135deg, #FAFAFF 0%, #F5F0FF 100%);
}
.dashboard-intro-title {
  font-size: 28px;
  font-weight: 800;
  color: #1F1147;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
  line-height: 1.3;
}
.dashboard-intro-subtitle {
  font-size: 15px;
  font-weight: 400;
  color: #555;
  margin: 0 0 4px;
  line-height: 1.55;
}
/* 본문 — 스크롤 */
.dashboard-intro-body {
  flex: 1;
  overflow-y: auto;
  padding: 32px 40px;
}
.dashboard-intro-section {
  margin-bottom: 32px;
}
.dashboard-intro-section:last-child {
  margin-bottom: 0;
}
.dashboard-intro-section-title {
  font-size: 19px;
  font-weight: 700;
  color: #1F1147;
  margin: 0 0 20px;
  letter-spacing: -0.3px;
}
/* 차별화 항목 1-6 */
.dashboard-intro-item {
  margin-bottom: 20px;
  padding-left: 4px;
}
.dashboard-intro-item:last-child {
  margin-bottom: 0;
}
.dashboard-intro-item-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--primary, #6E56CF);
  margin: 0 0 6px;
  letter-spacing: -0.2px;
}
.dashboard-intro-item-desc {
  font-size: 14px;
  font-weight: 400;
  color: #555;
  margin: 0;
  line-height: 1.65;
}
/* 솔직한 섹션 */
.dashboard-intro-section--honest {
  background: #FFFBF5;
  border: 1px solid #FFE8C4;
  border-radius: 12px;
  padding: 24px 28px;
  margin-top: 8px;
}
.dashboard-intro-section--honest .dashboard-intro-section-title {
  color: #B8862E;
  font-size: 17px;
}
.dashboard-intro-honest-lead {
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin: 0 0 12px;
  line-height: 1.6;
}
.dashboard-intro-honest-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.dashboard-intro-honest-list li {
  font-size: 13.5px;
  color: #555;
  padding: 6px 0 6px 18px;
  position: relative;
  line-height: 1.6;
}
.dashboard-intro-honest-list li::before {
  content: "•";
  position: absolute;
  left: 4px;
  color: #B8862E;
  font-weight: 700;
}
.dashboard-intro-honest-foot {
  font-size: 13.5px;
  color: #666;
  margin: 8px 0 0;
  line-height: 1.65;
}
/* CTA */
.dashboard-intro-cta-bar {
  padding: 20px 40px 28px;
  border-top: 1px solid var(--border, #EEE);
  background: #FAFAFF;
}
.dashboard-intro-cta-btn {
  width: 100%;
  padding: 14px 28px;
  background: linear-gradient(135deg, #6E56CF 0%, #9D8AE6 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  letter-spacing: -0.2px;
}
.dashboard-intro-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -4px rgba(110, 86, 207, 0.4);
}
/* 모바일 분기 */
@media (max-width: 767px) {
  .dashboard-intro-backdrop { padding: 0; }
  .dashboard-intro-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }
  .dashboard-intro-head { padding: 24px 24px 20px; }
  .dashboard-intro-title { font-size: 22px; }
  .dashboard-intro-subtitle { font-size: 14px; }
  .dashboard-intro-body { padding: 24px 24px; }
  .dashboard-intro-section-title { font-size: 17px; }
  .dashboard-intro-item-title { font-size: 14.5px; }
  .dashboard-intro-item-desc { font-size: 13.5px; }
  .dashboard-intro-cta-bar { padding: 16px 24px 24px; }
}