/* =====================================================
   ETF저축(변액) 맞춤 제안서 - 메인 스타일
   BUILD: 20260723-v18r5 (🌊 썸머 오션 브리즈 — 8월 시즌 컬러 리디자인: 네이비→오션블루/스카이블루+코랄)
   ===================================================== */

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

:root {
  /* ── 🌊 썸머 오션 브리즈 팔레트 (2026.08 시즌 컨셉) ── */
  --primary: #1f4a80;        /* 오션 블루 (구 네이비 #1a237e 대체) */
  --primary-light: #5aa6c9;  /* 시원한 스카이블루 */
  --accent: #d9a636;         /* 코랄 — 여름 포인트 + 상승률 강조색 */
  --gold: #d9b25a;
  --green: #2f6f5e;
  --red: #14315c;
  --bg: #eaf1f9;             /* 아이스블루 톤 배경 */
  --white: #ffffff;
  --card: #ffffff;
  --border: #d3eef5;
  --text: #123a4d;
  --muted: #6b7280;
  --shadow: 0 2px 16px rgba(2,119,189,0.08);
  --shadow-lg: 0 8px 32px rgba(2,119,189,0.14);
  --radius: 12px;
  --radius-sm: 8px;
}

body {
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
}

/* ─── 페이지 전환 ─────────────────────────────────── */
.page { display: none; min-height: 100vh; }
.page.active { display: block; }

/* ─── HEADER ─────────────────────────────────────── */
.page-header {
  background: linear-gradient(135deg, var(--primary) 0%, #2c6aa8 55%, #4a9cb5 100%);
  color: white;
  padding: 14px 28px;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 12px rgba(2,119,189,0.3);
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
/* 중앙 타이틀 배치 */
.header-inner-center {
  position: relative;
  justify-content: center;
}
.header-inner-center .logo-icon {
  position: absolute;
  left: 0;
}
.header-inner-center .header-badge {
  position: absolute;
  right: 0;
}
.header-center {
  text-align: center;
  flex: 1;
}
.logo-area { display: flex; align-items: center; gap: 14px; }
.logo-icon { font-size: 28px; color: #7cbcd0; }
.logo-main { font-size: 18px; font-weight: 700; letter-spacing: -0.3px; }
/* 제목 크게 + 강조 */
.logo-main-title {
  font-size: 23px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
.logo-sub { font-size: 13px; color: rgba(255,255,255,0.75); margin-top: 3px; }
.logo-author { font-size: 13px; font-weight: 800; color: #fff; letter-spacing: -0.2px; }
.logo-champion {
  display: inline-block;
  background: linear-gradient(135deg, #d9b25a, #b98d2e);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 20px;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 5px rgba(249,168,37,0.5);
  vertical-align: middle;
}
/* MDRT TOT 배지 */
.logo-mdrt {
  display: inline-block;
  background: linear-gradient(135deg, #2c6aa8, #14315c);
  border: 1px solid rgba(255,255,255,0.45);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 20px;
  letter-spacing: 0.2px;
  box-shadow: 0 1px 5px rgba(21,101,192,0.55);
  vertical-align: middle;
}
.header-badge {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 11px;
  padding: 4px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  white-space: nowrap;        /* ← 줄바꿈 방지 */
  flex-shrink: 0;             /* ← 공간 부족 시 축소 방지 */
}

/* ─── 헤더 오른쪽 그룹 ──────────────────────────── */
.header-right-group {
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;   /* ← 내부 텍스트 줄바꿈 방지 */
  flex-shrink: 0;
}

/* ─── PWA 설치 버튼 ─────────────────────────────── */
.pwa-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #d9b25a, #b98d2e);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(249,168,37,0.45);
  transition: all 0.2s;
  white-space: nowrap;
  animation: pwa-pulse 2.5s infinite;
}
.pwa-install-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(249,168,37,0.6);
}
@keyframes pwa-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(249,168,37,0.45); }
  50%       { box-shadow: 0 2px 16px rgba(249,168,37,0.8); }
}

/* ─── PAGE 1 LAYOUT ──────────────────────────────── */
.page1-main {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  padding: 28px 24px;
}

/* ─── STEP CARDS ─────────────────────────────────── */
.input-panel { display: flex; flex-direction: column; gap: 20px; }
.step-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.step-header {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--bg);
  flex-wrap: wrap;
}
.step-header .step-num,
.step-header .step-title {
  margin-top: 4px;
}
.step-num {
  background: var(--primary);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}
.step-title { font-size: 15px; font-weight: 700; color: var(--primary); }

/* ── step-header 안 기존 배지 — 숨김 (floating으로 대체) ── */
.ratio-total { display: none; }

/* ── 합계 floating 풍선 — 항상 화면 우측 중간에 떠있음 ── */
#ratioFloatBadge {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9000;
  font-size: 13px;
  font-weight: 800;
  padding: 10px 18px;
  border-radius: 30px;
  white-space: nowrap;
  letter-spacing: 0.2px;
  cursor: default;
  animation: floatBadgeBob 2.5s ease-in-out infinite;
}
#ratioFloatBadge.ok {
  background: linear-gradient(135deg, #2f6f5e, #2f7d6b);
  color: white;
  box-shadow: 0 4px 20px rgba(46,125,50,0.5);
}
#ratioFloatBadge.ok::before  { content: '✅ '; }
#ratioFloatBadge.over {
  background: linear-gradient(135deg, #14315c, #22467c);
  color: white;
  box-shadow: 0 4px 20px rgba(198,40,40,0.55);
  animation: floatBadgeWarn 0.4s ease-in-out infinite alternate;
}
#ratioFloatBadge.over::before { content: '⚠️ '; }

@keyframes floatBadgeBob {
  0%, 100% { transform: translateY(calc(-50% + 0px));  }
  50%       { transform: translateY(calc(-50% - 6px)); }
}
@keyframes floatBadgeWarn {
  0%   { transform: translateY(-50%) scale(1);    }
  100% { transform: translateY(-50%) scale(1.07); }
}
@media (max-width: 860px) {
  #ratioFloatBadge { right: 10px; font-size: 12px; padding: 8px 13px; }
}

/* ─── FORM ───────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* 1줄 3칸 (고객명 / 생년월일 / 성별) */
.form-row-3 {
  display: grid;
  grid-template-columns: 1.2fr 1.3fr 0.8fr;
  gap: 14px;
  align-items: start;
}

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label {
  font-size: 12px; font-weight: 600; color: var(--muted);
  display: flex; align-items: center; gap: 6px;
}
.form-group input[type="text"],
.form-group input[type="number"] {
  padding: 10px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit;
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus { border-color: var(--primary-light); }
.radio-group { display: flex; gap: 16px; align-items: center; margin-top: 4px; }
.radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }

/* 제안일자 인라인 */
.propose-date-inline {
  margin-left: auto;
  font-size: 12px; color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.1);
  padding: 3px 10px; border-radius: 12px;
  display: flex; align-items: center; gap: 5px;
}
.step-header .propose-date-inline { color: var(--muted); background: #f0f4fa; }

/* 생년월일 힌트 */
.birth-hint { font-size: 11px; color: var(--primary-light); font-weight: 600; height: 16px; transition: all 0.2s; }
.birth-hint.active { color: var(--green); }

/* 금액 입력 */
.amount-input-wrap { display: flex; align-items: center; gap: 8px; }
.amount-input-wrap input { flex: 1; }
.unit { font-weight: 600; color: var(--muted); white-space: nowrap; }
.amount-shortcuts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; align-items: center; }
.amt-btn {
  padding: 6px 14px;
  border: 1.5px solid var(--primary-light);
  border-radius: 20px;
  background: white;
  color: var(--primary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.amt-btn:hover { background: var(--primary); color: white; }
/* 초기화 버튼 — 색상 구분(빨강 계열)으로 다른 금액 버튼과 시각적으로 분리 */
.amt-reset-btn {
  border-color: var(--red);
  color: var(--red);
  margin-left: 4px;
}
.amt-reset-btn:hover { background: var(--red); color: white; }

/* ─── 모키일시납 누적 안내 바 ────────────────────── */
.moki-lump-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #e6f1ee, #e8f5e9);
  border: 1.5px solid #4db6ac;
  border-radius: 10px;
  padding: 7px 14px;
  font-size: 12px;
  color: #1f5c53;
  font-weight: 500;
  margin-top: 6px;
  flex-wrap: wrap;
}
.moki-lump-notice i { color: #2b7a6f; font-size: 13px; flex-shrink: 0; }
#mokiLumpSum {
  font-weight: 800;
  color: #1f5c53;
  font-size: 13px;
}

/* ─── 모키일시납 라벨 배지 ──────────────────────── */
.moki-lump-label-badge {
  display: inline-block;
  background: linear-gradient(135deg, #2b7a6f, #3d9186);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ─── 초기화 버튼 ────────────────────────────────── */
.amt-reset-btn {
  border-color: #5b86b8 !important;
  color: #22467c !important;
  background: #f4f7fb !important;
  font-weight: 700 !important;
}
.amt-reset-btn:hover {
  background: #22467c !important;
  color: white !important;
  border-color: #22467c !important;
}

/* ─── 금액 버튼 구분선 ───────────────────────────── */
.amt-divider {
  display: inline-block;
  width: 1.5px;
  height: 22px;
  background: linear-gradient(180deg, transparent, #c9d3e8 30%, #c9d3e8 70%, transparent);
  border-radius: 2px;
  margin: 0 4px;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ─── 금액 콤마 입력 ─────────────────────────────── */
.amount-input-wrap input[type="text"] {
  font-size: 18px; font-weight: 700;
  color: var(--primary);
  text-align: right;
  letter-spacing: 0.5px;
}

/* ─── FUND RATIO TABLE (슬라이더 카드 래퍼) ─────── */
.fund-table-wrap { overflow-x: visible; }
.fund-ratio-table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.fund-ratio-table thead { display: none; } /* 슬라이더 UI에서 thead 숨김 */

.pos { color: var(--accent); font-weight: 600; }
.neg { color: #1f4a80; font-weight: 600; }

/* 기업 태그 */
.ks-tag {
  font-size: 10px; font-weight: 600;
  background: #e8ecf5; color: var(--primary);
  padding: 1px 6px; border-radius: 8px;
  border: 1px solid #c9d3e8;
  white-space: nowrap;
}
.type-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 10px;
  background: #e8ecf5; color: var(--primary);
  flex-shrink: 0;
}
.type-badge.type-1 { background: #e8f5e9; color: #2f6f5e; }
.type-badge.type-2 { background: #eaf1f9; color: #1f4a80; }
.type-badge.type-3 { background: #f8efd8; color: #9a6d12; }
.type-badge.type-4 { background: #f6ece0; color: #880e4f; }
.type-badge.type-5 { background: #fbe9e7; color: #bf360c; }

/* ─── 슬라이더 카드 ─────────────────────────────── */
.slider-row td { padding: 0; border: none; }
.slider-card-cell { padding: 4px 0 !important; }

.slider-card {
  background: white;
  border: 1.5px solid #e8ecf5;
  border-radius: 14px;
  padding: 12px 16px;
  margin-bottom: 6px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.slider-card:hover {
  border-color: var(--primary-light);
  box-shadow: 0 2px 12px rgba(57,73,171,0.10);
}

/* 상단: 펀드명 + 비율 */
.sc-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}
.sc-name-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.sc-dot {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sc-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.sc-code {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

/* 비율 표시 */
.sc-ratio-display {
  display: flex;
  align-items: baseline;
  gap: 2px;
  flex-shrink: 0;
}
.sc-ratio-val {
  font-size: 26px;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  min-width: 36px;
  text-align: right;
  transition: color 0.2s;
}
.sc-ratio-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}

/* 슬라이더 트랙 */
.sc-slider-wrap {
  position: relative;
  height: 28px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.sc-slider {
  width: 100%;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: #e8ecf5;
  border-radius: 10px;
  outline: none;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
/* 채워진 트랙 (CSS 변수로 색상 주입) */
.sc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--slider-color, #3f5290);
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.sc-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 14px rgba(0,0,0,0.25);
}
.sc-slider::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--slider-color, #3f5290);
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  cursor: pointer;
}
/* 채워진 부분 오버레이 */
.sc-track-fill {
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  height: 6px;
  border-radius: 10px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.55;
  transition: width 0.1s;
}

/* 하단: 수익률 + 종목 태그 */
.sc-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sc-rets {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.sc-ret-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.sc-ret-label {
  font-size: 9px;
  color: var(--muted);
  font-weight: 500;
}
.sc-ret-item .pos,
.sc-ret-item .neg {
  font-size: 11px;
  font-weight: 700;
}
.sc-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ─── 100% 초과 토스트 ──────────────────────────── */
.over-limit-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #14315c, #22467c);
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(198,40,40,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9999;
  white-space: nowrap;
}
.over-limit-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 프리셋 적용 토스트 (초록 계열) ── */
.preset-toast {
  position: fixed;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: linear-gradient(135deg, #1f5245, #2f6f5e);
  color: white;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 30px;
  box-shadow: 0 4px 20px rgba(27,94,32,0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s;
  z-index: 9998;
  white-space: nowrap;
}
.preset-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 비율 0일 때 카드 흐리게 */
.slider-card.zero-ratio {
  opacity: 0.65;
}
.slider-card.zero-ratio .sc-ratio-val {
  color: #c9d3e8;
}

/* 비율 입력 (직접입력 모드) */
.ratio-input {
  width: 60px; padding: 4px 6px;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  text-align: center;
  font-size: 16px; font-weight: 700;
  outline: none;
}
.ratio-input:focus { border-color: var(--primary-light); }
.ratio-input-wrap { display: flex; align-items: center; gap: 4px; }

/* 프리셋 버튼 */
.ratio-helper { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.preset-btn {
  padding: 7px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--primary-light);
  background: white;
  color: var(--primary);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; align-items: center; gap: 6px;
}
.preset-btn:hover { background: var(--primary); color: white; }
.preset-btn.reset { border-color: var(--muted); color: var(--muted); }
.preset-btn.reset:hover { background: var(--muted); color: white; }

/* ══════════════════════════════════════════════════════════
   💎 사업비 선택 탭 그룹 — 프리미엄 카드 탭 UI v2
   ══════════════════════════════════════════════════════════ */

/* 전체 컨테이너 */
.expense-tab-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
  min-width: 260px;
}

/* 하단 3개 탭 가로 배열 */
.etab-row {
  display: flex;
  gap: 5px;
}

/* ══ 탭 공통 기반 ══ */
.etab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 12px;
  border: 1.5px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: all 0.22s cubic-bezier(0.34,1.2,0.64,1);
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -0.2px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.etab::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s;
  border-radius: inherit;
}
.etab:hover::before { opacity: 1; }
.etab input[type="checkbox"] { display: none; }

/* 아이콘 */
.etab-icon {
  font-size: 13px;
  transition: transform 0.25s cubic-bezier(0.34,1.5,0.64,1);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}
.etab-text {
  line-height: 1;
  flex: 1;
}
.etab:hover { transform: translateY(-1.5px); }
.etab:active { transform: scale(0.97) translateY(0); }

/* ══ 크로스체크 탭 — 프리미엄 풀 너비 ══ */
.etab-cross {
  width: 100%;
  justify-content: flex-start;
  padding: 9px 14px;
  border-radius: 13px;
  border-color: rgba(75,90,150,0.3);
  background: linear-gradient(135deg, #faf5ff 0%, #fbf5e6 100%);
  color: #6d28d9;
  box-shadow: 0 1px 6px rgba(75,90,150,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
}
.etab-cross::before {
  background: linear-gradient(135deg, rgba(75,90,150,0.06), rgba(245,124,0,0.04));
}
.etab-cross .etab-icon {
  background: linear-gradient(135deg, #e4e8f3, #f8efd8);
  color: #4b5a96;
  font-size: 12px;
}
.etab-cross:hover {
  border-color: rgba(75,90,150,0.5);
  box-shadow: 0 4px 16px rgba(75,90,150,0.15), inset 0 1px 0 rgba(255,255,255,0.9);
}

/* 크로스체크 배지 */
.etab-badge-cross {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg, #4b5a96, #9a6d12);
  color: white;
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: auto;
  letter-spacing: 0.1px;
  box-shadow: 0 2px 6px rgba(75,90,150,0.3);
}
.etab-badge-cross em {
  font-style: normal;
  background: rgba(255,255,255,0.28);
  border-radius: 3px;
  padding: 0 3px;
  font-size: 8.5px;
  font-weight: 900;
}

/* 크로스 ON 활성 상태 */
.etab-cross:has(input:checked) {
  background: linear-gradient(135deg, #e4e8f3 0%, #f8efd8 100%);
  border-color: #b98d2e;
  box-shadow:
    0 4px 18px rgba(245,124,0,0.2),
    0 0 0 2px rgba(75,90,150,0.15),
    inset 0 1px 0 rgba(255,255,255,0.6);
  animation: crossPulse 2.5s ease-in-out infinite;
  color: #bf360c;
}
.etab-cross:has(input:checked) .etab-icon {
  background: linear-gradient(135deg, #4b5a96, #b98d2e);
  color: white;
  transform: rotate(180deg) scale(1.1);
  box-shadow: 0 2px 8px rgba(75,90,150,0.4);
}

/* ══ 레벨UP 탭 ══ */
.etab-levelup {
  flex: 1;
  border-color: rgba(75,90,150,0.25);
  background: linear-gradient(135deg, #eef0f8 0%, #e4e8f3 100%);
  color: #5e35b1;
  box-shadow: 0 1px 4px rgba(75,90,150,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
}
.etab-levelup::before {
  background: linear-gradient(135deg, rgba(75,90,150,0.07), rgba(75,90,150,0.03));
}
.etab-levelup .etab-icon {
  background: rgba(75,90,150,0.12);
  color: #4b5a96;
}
.etab-levelup:hover {
  border-color: rgba(75,90,150,0.5);
  box-shadow: 0 5px 16px rgba(75,90,150,0.18);
}
.etab-levelup:has(input:checked) {
  background: linear-gradient(135deg, #6c3fef 0%, #6b78ad 100%);
  border-color: #4b5a96;
  color: white;
  box-shadow: 0 5px 18px rgba(75,90,150,0.42), inset 0 1px 0 rgba(255,255,255,0.2);
}
.etab-levelup:has(input:checked) .etab-icon {
  background: rgba(255,255,255,0.22);
  color: white;
  transform: scale(1.15) rotate(-5deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ══ 모키적립식 탭 ══ */
.etab-standard {
  flex: 1;
  border-color: rgba(21,101,192,0.22);
  background: linear-gradient(135deg, #e8f4fd 0%, #ddeeff 100%);
  color: #1f4a80;
  box-shadow: 0 1px 4px rgba(21,101,192,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
}
.etab-standard::before {
  background: linear-gradient(135deg, rgba(21,101,192,0.07), rgba(21,101,192,0.03));
}
.etab-standard .etab-icon {
  background: rgba(21,101,192,0.12);
  color: #1976d2;
}
.etab-standard:hover {
  border-color: rgba(21,101,192,0.45);
  box-shadow: 0 5px 16px rgba(21,101,192,0.16);
}
.etab-standard:has(input:checked) {
  background: linear-gradient(135deg, #1251a3 0%, #1976d2 100%);
  border-color: #1f4a80;
  color: white;
  box-shadow: 0 5px 18px rgba(21,101,192,0.38), inset 0 1px 0 rgba(255,255,255,0.18);
}
.etab-standard:has(input:checked) .etab-icon {
  background: rgba(255,255,255,0.22);
  color: white;
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ══ 모키일시납 탭 ══ */
.etab-moki {
  flex: 1;
  border-color: rgba(0,105,92,0.22);
  background: linear-gradient(135deg, #e6f4f1 0%, #ddf2ef 100%);
  color: #1f5c53;
  box-shadow: 0 1px 4px rgba(0,105,92,0.06), inset 0 1px 0 rgba(255,255,255,0.7);
}
.etab-moki::before {
  background: linear-gradient(135deg, rgba(0,137,123,0.07), rgba(0,137,123,0.03));
}
.etab-moki .etab-icon {
  background: rgba(0,137,123,0.12);
  color: #2b7a6f;
}
.etab-moki:hover {
  border-color: rgba(0,137,123,0.45);
  box-shadow: 0 5px 16px rgba(0,137,123,0.16);
}
.etab-moki:has(input:checked) {
  background: linear-gradient(135deg, #00796b 0%, #3f8fa8 100%);
  border-color: #2b7a6f;
  color: white;
  box-shadow: 0 5px 18px rgba(0,137,123,0.38), inset 0 1px 0 rgba(255,255,255,0.18);
}
.etab-moki:has(input:checked) .etab-icon {
  background: rgba(255,255,255,0.22);
  color: white;
  transform: scale(1.15) rotate(5deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* ══ 잠금 상태 (크로스체크 ON 시) ══ */
.etab.cross-locked {
  opacity: 0.32;
  pointer-events: none;
  filter: grayscale(0.7) blur(0.3px);
  transform: scale(0.98) !important;
}

/* ══ crossPulse 애니메이션 ══ */
@keyframes crossPulse {
  0%, 100% {
    box-shadow: 0 4px 18px rgba(245,124,0,0.2), 0 0 0 2px rgba(75,90,150,0.15);
  }
  50% {
    box-shadow: 0 6px 24px rgba(245,124,0,0.32), 0 0 0 3px rgba(75,90,150,0.22);
  }
}

/* ══ 반응형 ══ */
@media (max-width: 640px) {
  .expense-tab-group { min-width: 200px; }
  .etab-row { gap: 4px; }
  .etab { padding: 6px 9px; font-size: 10.5px; gap: 5px; }
  .etab-icon { width: 17px; height: 17px; font-size: 11px; }
  .etab-cross { padding: 7px 10px; }
  .etab-badge-cross { font-size: 8.5px; padding: 2px 6px; }
}
@media (max-width: 420px) {
  .etab-row { flex-direction: column; }
  .etab { width: 100%; justify-content: flex-start; }
}

/* 기존 expense-check-group (하위호환 유지) */
.expense-check-group {
  display: flex; align-items: center; gap: 8px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* ─── 사업비 체크박스 공통 ───────────────────────── */
.expense-check-wrap {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer;
  user-select: none;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: white;
  transition: all 0.2s;
}
.expense-check-wrap:hover { border-color: var(--primary-light); background: #f0f4fa; }
.expense-check-wrap input[type="checkbox"] { display: none; }

.expense-check-box {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid #c9d3e8;
  background: white;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.expense-check-icon { font-size: 10px; color: white; opacity: 0; transition: opacity 0.15s; }

/* 기본 사업비 반영 체크 상태 (빨강) */
.expense-check-wrap:has(input:checked) .expense-check-box {
  background: #22467c; border-color: #22467c;
}
.expense-check-wrap:has(input:checked) .expense-check-icon { opacity: 1; }
.expense-check-wrap:has(input:checked) { border-color: #22467c; background: #f4f7fb; }

.expense-check-label { font-size: 12px; font-weight: 700; color: var(--text); }
.expense-check-tip {
  font-size: 10px; color: var(--muted);
  background: #f0f2f5; padding: 1px 6px; border-radius: 8px;
}
.expense-check-wrap:has(input:checked) .expense-check-tip {
  background: #eef3fa; color: #14315c;
}

/* ─── 레벨UP 체크박스 (별도 테마: 보라/골드) ───────── */
.expense-levelup-wrap {
  border-color: #4b5a96;
  background: linear-gradient(135deg, #eef0f8 0%, #e4e8f3 100%);
  position: relative;
  overflow: hidden;
}
.expense-levelup-wrap::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #4b5a96, #56609a);
  border-radius: 20px 0 0 20px;
}
.expense-levelup-wrap:hover {
  border-color: #4b5a96;
  background: linear-gradient(135deg, #e4e8f3 0%, #e8ecf5 100%);
  box-shadow: 0 2px 10px rgba(75,90,150,0.18);
}
.expense-levelup-wrap .expense-check-box {
  border-color: #9e7bff;
}
.expense-levelup-wrap .expense-check-label {
  color: #5e35b1;
  font-weight: 800;
  letter-spacing: 0.2px;
}
/* 레벨UP 팁 태그 — 골드 강조 */
.levelup-tip {
  background: linear-gradient(135deg, #4b5a96, #56609a) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  padding: 1px 8px !important;
  border-radius: 8px !important;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 4px rgba(75,90,150,0.3);
}
/* 레벨UP 체크 상태 (보라) */
.expense-levelup-wrap:has(input:checked) {
  border-color: #4b5a96;
  background: linear-gradient(135deg, #e4e8f3 0%, #d1c4e9 100%);
  box-shadow: 0 2px 12px rgba(75,90,150,0.25);
}
.expense-levelup-wrap:has(input:checked) .expense-check-box {
  background: #4b5a96; border-color: #4b5a96;
}
.expense-levelup-wrap:has(input:checked) .expense-check-icon { opacity: 1; }
.expense-levelup-wrap:has(input:checked) .levelup-tip {
  background: linear-gradient(135deg, #5e35b1, #ad1457) !important;
  box-shadow: 0 1px 6px rgba(94,53,177,0.4);
}

/* ─── 모키일시납 체크박스 (초록 테마) ───────────────── */
.expense-moki-wrap {
  border-color: #2b7a6f;
  background: linear-gradient(135deg, #e8f5e9 0%, #e6f1ee 100%);
  position: relative;
  overflow: hidden;
}
.expense-moki-wrap::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #2b7a6f, #3d9186);
  border-radius: 20px 0 0 20px;
}
.expense-moki-wrap:hover {
  border-color: #2b7a6f;
  background: linear-gradient(135deg, #e6f1ee 0%, #b2dfdb 100%);
  box-shadow: 0 2px 10px rgba(0,137,123,0.18);
}
.expense-moki-wrap .expense-check-box {
  border-color: #4db6ac;
}
.expense-moki-wrap .expense-check-label {
  color: #1f5c53;
  font-weight: 800;
  letter-spacing: 0.2px;
}
/* 모키일시납 팁 태그 */
.moki-tip {
  background: linear-gradient(135deg, #2b7a6f, #3f8fa8) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  padding: 1px 8px !important;
  border-radius: 8px !important;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 4px rgba(0,137,123,0.3);
}
/* 모키일시납 체크 상태 */
.expense-moki-wrap:has(input:checked) {
  border-color: #2b7a6f;
  background: linear-gradient(135deg, #e6f1ee 0%, #b2dfdb 100%);
  box-shadow: 0 2px 12px rgba(0,137,123,0.25);
}
.expense-moki-wrap:has(input:checked) .expense-check-box {
  background: #2b7a6f; border-color: #2b7a6f;
}
.expense-moki-wrap:has(input:checked) .expense-check-icon { opacity: 1; }
.expense-moki-wrap:has(input:checked) .moki-tip {
  background: linear-gradient(135deg, #1f5c53, #006064) !important;
  box-shadow: 0 1px 6px rgba(0,105,92,0.4);
}

/* ─── 크로스 그룹 컨테이너 (크로스체크 위 + 레벨UP·모키적립식 아래) ── */
.cross-group-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  background: linear-gradient(135deg, #fdf6ff 0%, #fbf5e6 100%);
  border: 1.5px dashed #c9a0f5;
  border-radius: 16px;
  padding: 8px 10px;
}
.cross-sub-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* 크로스 그룹 내부 체크박스는 패딩 살짝 줄임 */
.cross-group-wrap .expense-check-wrap {
  margin: 0;
  flex: 1;
  min-width: 110px;
}

/* ─── 크로스체크 체크박스 (레벨UP vs 모키적립식 동시비교) ── */
.expense-cross-wrap {
  border-color: #b98d2e;
  background: linear-gradient(135deg, #fbf5e6 0%, #f8efd8 100%);
  position: relative;
  overflow: hidden;
}
.expense-cross-wrap::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, #4b5a96, #b98d2e);
  border-radius: 20px 0 0 20px;
}
.expense-cross-wrap:hover {
  border-color: #b98d2e;
  background: linear-gradient(135deg, #f8efd8 0%, #f1dfae 100%);
  box-shadow: 0 2px 10px rgba(245,124,0,0.22);
}
.expense-cross-wrap .expense-check-box { border-color: #c9a24a; }
.cross-check-label {
  color: #9a6d12 !important;
  font-weight: 800 !important;
  letter-spacing: 0.1px;
}
.cross-tip {
  background: linear-gradient(135deg, #4b5a96, #b98d2e) !important;
  color: white !important;
  font-weight: 700 !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 8px !important;
  letter-spacing: 0.3px;
  box-shadow: 0 1px 4px rgba(245,124,0,0.35);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.cross-vs {
  background: rgba(255,255,255,0.3);
  border-radius: 3px;
  padding: 0 3px;
  font-size: 9px;
  font-weight: 900;
}
.expense-cross-wrap:has(input:checked) {
  border-color: #b98d2e;
  background: linear-gradient(135deg, #f8efd8 0%, #f1dfae 100%);
  box-shadow: 0 2px 14px rgba(245,124,0,0.3), 0 0 0 2px rgba(75,90,150,0.15);
  animation: crossPulse 2s ease-in-out infinite;
}
@keyframes crossPulse {
  0%,100% { box-shadow: 0 2px 14px rgba(245,124,0,0.3), 0 0 0 2px rgba(75,90,150,0.15); }
  50%     { box-shadow: 0 4px 20px rgba(245,124,0,0.5), 0 0 0 3px rgba(75,90,150,0.25); }
}
.expense-cross-wrap:has(input:checked) .expense-check-box {
  background: linear-gradient(135deg, #4b5a96, #b98d2e);
  border-color: #b98d2e;
}
.expense-cross-wrap:has(input:checked) .expense-check-icon { opacity: 1; }
.expense-cross-wrap:has(input:checked) .cross-tip {
  background: linear-gradient(135deg, #2c3a6e, #bf360c) !important;
}
.expense-check-wrap.cross-locked {
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.5);
}
/* 크로스체크 ON 시 그룹 전체 테두리 강조 */
.cross-group-wrap:has(#crossCheck:checked) {
  border-color: #b98d2e;
  border-style: solid;
  background: linear-gradient(135deg, #f8efd8 0%, #eef0f8 100%);
  box-shadow: 0 2px 12px rgba(245,124,0,0.15);
}

/* ─── 크로스 비교 페이지2 레이아웃 ─────────────────── */
.cross-compare-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.cross-col {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.cross-col-header {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 15px;
  color: white;
}
.cross-col-header.levelup-hd {
  background: linear-gradient(135deg, #4b5a96, #56609a);
}
.cross-col-header.moki-hd {
  background: linear-gradient(135deg, #1f4a80, #2c6aa8);
}
.cross-col-body {
  background: white;
  padding: 16px;
}
.cross-divider-center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  color: #b98d2e;
  background: linear-gradient(180deg, #f8efd8, #f1dfae);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  align-self: center;
  flex-shrink: 0;
  box-shadow: 0 2px 12px rgba(245,124,0,0.3);
}
.cross-sim-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}
.cross-sim-row:last-child { border-bottom: none; }
.cross-sim-year { color: #666; font-size: 13px; }
.cross-sim-fv {
  font-size: 16px;
  font-weight: 800;
  color: #1f4a80;
}
.cross-sim-gain { font-size: 12px; color: #2f7d6b; font-weight: 600; }
.cross-badge-winner {
  background: linear-gradient(135deg, #d9b25a, #b98d2e);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin-left: 6px;
}
.cross-fund-list {
  margin-top: 12px;
  border-top: 1px dashed #e0e0e0;
  padding-top: 10px;
}
.cross-fund-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #555;
  padding: 3px 0;
}
.cross-fund-ratio { font-weight: 700; color: #1f4a80; }
.cross-rate-row {
  background: linear-gradient(135deg, #f5f7fb, #eef2ff);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cross-rate-label { font-size: 12px; color: #666; }
.cross-rate-value { font-size: 18px; font-weight: 800; color: #1f4a80; }
.cross-expense-note {
  font-size: 11px;
  color: #888;
  background: #fafafa;
  border-radius: 8px;
  padding: 6px 10px;
  margin-top: 8px;
  line-height: 1.5;
}
@media (max-width: 700px) {
  .cross-compare-wrap {
    grid-template-columns: 1fr;
  }
  .cross-divider-center { display: none; }
}

/* ─── 크로스 메인 비교 테이블 ────────────────────── */
.cross-main-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,0,0,0.08);
}
.cross-th-year {
  background: #37474f;
  color: white;
  padding: 12px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  width: 70px;
}
.cross-th-lv {
  background: linear-gradient(135deg, #4b5a96, #6b78ad);
  color: white;
  padding: 12px 14px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  width: 50%;
  line-height: 1.4;
}
.cross-th-mk {
  background: linear-gradient(135deg, #1f4a80, #1976d2);
  color: white;
  padding: 12px 14px;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  width: 50%;
  line-height: 1.4;
}
.cross-expense-row td {
  border-bottom: 2px solid #e0e0e0;
  text-align: center;
}
.cross-table-row {
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}
.cross-table-row:hover { background: #fafafa; }
.cross-table-row:nth-child(even) { background: #fafeff; }
.cross-td-year {
  text-align: center;
  font-weight: 800;
  color: #37474f;
  background: #f5f5f5;
  padding: 10px 8px;
  font-size: 13px;
  border-right: 1px solid #e0e0e0;
}
.cross-td-lv, .cross-td-mk {
  padding: 10px 14px;
  vertical-align: middle;
  border-right: 1px solid #f0f0f0;
}
.cross-td-win {
  background: linear-gradient(135deg, #fbf7ea, #f3e6b8) !important;
}
.cross-td-fv {
  font-size: 15px;
  font-weight: 800;
  color: #1f4a80;
  margin-bottom: 3px;
}
.cross-td-gain {
  font-size: 11px;
  color: #2f7d6b;
  font-weight: 600;
}
.cross-td-exp {
  font-size: 10px;
  color: #999;
  margin-top: 2px;
}
.cross-win-badge {
  font-size: 13px;
}
/* ── 수익률 표기 */
.cross-td-rate {
  font-size: 11px;
  font-weight: 700;
  margin-top: 2px;
  margin-bottom: 2px;
}
.rate-pos { color: #d64545; }
.rate-neg { color: #1f4a80; }

/* ── 7년 전환 시점 행 강조 */
.cross-row-7y {
  border-top: 2px solid #4b5a96 !important;
  border-bottom: 2px solid #4b5a96 !important;
}
.cross-row-7y .cross-td-year {
  background: linear-gradient(135deg, #e4e8f3, #d1c4e9) !important;
  color: #2c3a6e !important;
}
/* 7년 레벨UP 셀 — 핵심 강조 */
.cross-td-lv-7y {
  background: linear-gradient(135deg, #ecedf6, #e8d5ff) !important;
  border-left: 3px solid #4b5a96 !important;
}
/* 전환 시점 배지 */
.cross-7y-badge {
  display: inline-block;
  background: linear-gradient(135deg, #4b5a96, #56609a);
  color: white;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-top: 5px;
  letter-spacing: 0.2px;
  box-shadow: 0 2px 8px rgba(75,90,150,0.35);
  animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 2px 8px rgba(75,90,150,0.35); }
  50%     { box-shadow: 0 2px 16px rgba(75,90,150,0.65); }
}

@media (max-width: 600px) {
  .cross-main-table { font-size: 11px; }
  .cross-td-fv { font-size: 13px; }
  .cross-th-lv, .cross-th-mk { font-size: 11px; padding: 10px 8px; }
}

/* 모키일시납 배지 (시뮬레이션 헤더용) */
.expense-status-badge.moki-badge {
  background: linear-gradient(135deg, #2b7a6f, #3d9186);
  color: white;
  border: none;
  animation: moki-pulse 2s infinite;
}
@keyframes moki-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,137,123,0.4); }
  50%       { box-shadow: 0 0 0 5px rgba(0,137,123,0); }
}

/* ─── 사업비 배너 & 테이블 스타일 ──────────────────── */
/* 사업비 반영 알림 배너 (심플) */
.expense-notice-banner {
  display: flex; align-items: center; gap: 10px;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #2f6f5e;
  padding: 10px 16px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 500;
}
.expense-notice-banner i { font-size: 15px; color: #2f7d6b; flex-shrink: 0; }
.expense-notice-banner span { flex: 1; line-height: 1.5; }

/* 사업비 테이블 배지 (th용) */
.expense-badge {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  background: #eef3fa; color: #14315c;
  padding: 1px 5px; border-radius: 8px;
  margin-left: 4px; vertical-align: middle;
}
.expense-badge-th {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  background: rgba(255,255,255,0.3); color: #ffcdd2;
  padding: 1px 6px; border-radius: 8px;
  margin-left: 4px; vertical-align: middle;
}
.expense-diff {
  font-size: 10px; color: #14315c;
  margin-top: 2px; font-weight: 600;
}

/* 시뮬레이션 셀 내 서브텍스트 */
.sim-principal { font-size: 14px; font-weight: 700; color: var(--text); }
.sim-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.muted-td { color: var(--muted); }
.pos2 { color: #1f4a80; font-weight: 600; }

/* ─── AI 추천 포트폴리오 ─────────────────────────── */
.ai-recommend-box {
  margin-top: 20px;
  border-radius: var(--radius);
  background: #0b1f3f;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(1,42,61,0.35);
}

.ai-rec-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #0b1f3f 0%, #14315c 60%, #2c6aa8 100%);
  position: relative;
  overflow: hidden;
}
.ai-rec-header::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(75,90,150,0.15) 0%, transparent 70%);
  pointer-events: none;
}
.ai-rec-header-left { display: flex; align-items: center; gap: 12px; }
.ai-rec-titles { display: flex; flex-direction: column; gap: 2px; }
.ai-badge {
  background: linear-gradient(135deg, #4b5a96 0%, #d9b25a 100%);
  color: white; font-size: 11px; font-weight: 800;
  padding: 5px 12px; border-radius: 20px;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(75,90,150,0.4);
  letter-spacing: 0.3px;
}
.ai-rec-title { color: white; font-size: 15px; font-weight: 800; letter-spacing: -0.3px; }
.ai-rec-desc { color: rgba(255,255,255,0.5); font-size: 11px; }

/* 펄스 애니메이션 점 */
.ai-pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #7fd0bd;
  box-shadow: 0 0 0 0 rgba(92,184,166,0.6);
  animation: pulse-anim 1.8s infinite;
}
@keyframes pulse-anim {
  0% { box-shadow: 0 0 0 0 rgba(92,184,166,0.6); }
  70% { box-shadow: 0 0 0 10px rgba(92,184,166,0); }
  100% { box-shadow: 0 0 0 0 rgba(92,184,166,0); }
}

/* AI 버튼 그리드 */
.ai-rec-types {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  background: transparent;
  padding: 14px 16px;
}

/* ── AI 버튼 공통 — 카드형으로 완전 리디자인 ── */
.ai-btn {
  display: flex;
  flex-direction: column;       /* 아이콘 위, 텍스트 아래 수직 배치 */
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 12px 16px;
  border: 1.5px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.4,0,0.2,1);
  font-family: inherit;
  position: relative;
  overflow: hidden;
  text-align: center;
  /* 클릭 유도 미세 그림자 */
  box-shadow: 0 2px 12px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
}

/* 공통 hover — 밝게 띄움 */
.ai-btn:hover {
  border-color: rgba(255,255,255,0.32);
  background: rgba(255,255,255,0.12);
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.ai-btn:active {
  transform: translateY(-1px) scale(0.97);
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

/* 클릭 파문 효과 */
.ai-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(255,255,255,0.15) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s;
}
.ai-btn:active::after { opacity: 1; }

/* 아이콘 래퍼 — 크게 */
.ai-btn-icon-wrap {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
  transition: transform 0.22s, background 0.22s;
}
.ai-btn:hover .ai-btn-icon-wrap {
  transform: scale(1.15) rotate(-4deg);
}

/* 텍스트 블록 — 가로 배치 해제 후 수직 */
.ai-btn-text {
  display: flex; flex-direction: column; gap: 3px;
  align-items: center;
  width: 100%;
}
.ai-btn-name {
  font-size: 12px; font-weight: 800; color: #e8ecf5;
  line-height: 1.2; white-space: nowrap;
}
.ai-btn-desc {
  font-size: 10px; color: rgba(255,255,255,0.5);
  white-space: nowrap;
}

/* 화살표 → 버튼 하단 "tap" 힌트로 교체 */
.ai-btn-arrow {
  display: none;  /* 기존 화살표 숨김 */
}

/* 버튼 하단 클릭 힌트 레이블 */
.ai-btn::before {
  content: '탭하여 적용';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.3);
  font-size: 9px; font-weight: 700;
  padding: 3px 0;
  text-align: center;
  letter-spacing: 0.3px;
  transition: background 0.2s, color 0.2s;
}
.ai-btn:hover::before {
  background: rgba(255,255,255,0.13);
  color: rgba(255,255,255,0.65);
}

/* ── 수익 최적형 — 청록 ── */
.ai-btn-profit {
  border-color: rgba(74,140,185,0.25);
  background: linear-gradient(160deg, rgba(74,140,185,0.1) 0%, rgba(14,21,64,0.9) 100%);
}
.ai-btn-profit .ai-btn-icon-wrap {
  background: rgba(74,140,185,0.18);
  color: #8fc3e6;
  box-shadow: 0 0 16px rgba(74,140,185,0.25);
}
.ai-btn-profit:hover {
  border-color: rgba(74,140,185,0.55);
  background: linear-gradient(160deg, rgba(74,140,185,0.2) 0%, rgba(14,21,80,0.95) 100%);
  box-shadow: 0 8px 28px rgba(74,140,185,0.25);
}
.ai-btn-profit:hover .ai-btn-icon-wrap {
  background: rgba(74,140,185,0.32);
  box-shadow: 0 0 24px rgba(74,140,185,0.45);
}

/* ── 안전 우선형 — 초록 ── */
.ai-btn-safe {
  border-color: rgba(92,184,166,0.2);
  background: linear-gradient(160deg, rgba(92,184,166,0.08) 0%, rgba(14,21,64,0.9) 100%);
}
.ai-btn-safe .ai-btn-icon-wrap {
  background: rgba(92,184,166,0.15);
  color: #7fd0bd;
  box-shadow: 0 0 16px rgba(92,184,166,0.2);
}
.ai-btn-safe:hover {
  border-color: rgba(92,184,166,0.5);
  background: linear-gradient(160deg, rgba(92,184,166,0.18) 0%, rgba(14,21,80,0.95) 100%);
  box-shadow: 0 8px 28px rgba(92,184,166,0.2);
}
.ai-btn-safe:hover .ai-btn-icon-wrap {
  background: rgba(92,184,166,0.3);
  box-shadow: 0 0 24px rgba(92,184,166,0.4);
}

/* ── AI 균형 최적형 — 보라 (강조, 추천) ── */
.ai-btn-balanced {
  border-color: rgba(75,90,150,0.5);
  background: linear-gradient(160deg, rgba(75,90,150,0.2) 0%, rgba(26,10,78,0.95) 100%);
  box-shadow: 0 4px 20px rgba(75,90,150,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
/* 추천 배지 애니메이션 */
.ai-btn-balanced .ai-btn-name {
  color: #c5cbee;
  font-size: 12px;
}
.ai-btn-balanced:hover {
  border-color: rgba(75,90,150,0.8);
  background: linear-gradient(160deg, rgba(75,90,150,0.32) 0%, rgba(32,13,96,1) 100%);
  box-shadow: 0 10px 36px rgba(75,90,150,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}
.ai-btn-balanced .ai-btn-icon-wrap {
  background: rgba(75,90,150,0.25);
  color: #b3bbe6;
  font-size: 24px;
  box-shadow: 0 0 20px rgba(75,90,150,0.4);
}
.ai-btn-balanced:hover .ai-btn-icon-wrap {
  background: rgba(75,90,150,0.4);
  color: #a9b3ee;
  box-shadow: 0 0 32px rgba(75,90,150,0.6);
}

/* 추천 뱃지 위치 — 상단 오른쪽 */
.ai-btn-rec-badge {
  position: absolute; top: 8px; right: 8px;
  background: linear-gradient(135deg, #4b5a96, #d9b25a);
  color: white; font-size: 9px; font-weight: 800;
  padding: 3px 8px; border-radius: 12px;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 8px rgba(75,90,150,0.5);
  animation: recBadgePulse 2.5s ease-in-out infinite;
}
@keyframes recBadgePulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(75,90,150,0.5); }
  50%       { box-shadow: 0 2px 16px rgba(75,90,150,0.9); }
}

/* glow 오버레이 */
.ai-btn-glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(75,90,150,0.18) 0%, transparent 65%);
  pointer-events: none;
}

/* ── 모멘텀 집중형 — 오렌지/불꽃 ── */
.ai-btn-momentum {
  border-color: rgba(201,162,74,0.25);
  background: linear-gradient(160deg, rgba(201,162,74,0.1) 0%, rgba(14,21,64,0.9) 100%);
}
.ai-btn-momentum .ai-btn-icon-wrap {
  background: rgba(201,162,74,0.18);
  color: #e6c46e;
  box-shadow: 0 0 16px rgba(201,162,74,0.25);
}
.ai-btn-momentum:hover {
  border-color: rgba(201,162,74,0.55);
  background: linear-gradient(160deg, rgba(201,162,74,0.2) 0%, rgba(14,21,80,0.95) 100%);
  box-shadow: 0 8px 28px rgba(201,162,74,0.25);
}
.ai-btn-momentum:hover .ai-btn-icon-wrap {
  background: rgba(201,162,74,0.35);
  box-shadow: 0 0 24px rgba(201,162,74,0.5);
}

/* ── 클릭 유도 힌트 레이블 ── */
.ai-rec-hint {
  display: flex; align-items: center; gap: 7px;
  margin: 0 16px 0;
  padding: 8px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 10px;
  font-size: 11px; font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.2px;
  animation: hintFade 3s ease-in-out infinite;
}
.ai-rec-hint i {
  color: rgba(255,220,100,0.7);
  animation: handWave 1.5s ease-in-out infinite;
}
@keyframes handWave {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(10deg); }
}
@keyframes hintFade {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}

/* AI 결과 박스 */
.ai-result-box { background: #0c1a35; border-top: 1px solid rgba(255,255,255,0.06); }
.ai-result-inner { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }

.ai-result-top { }
.ai-result-title { font-size: 14px; font-weight: 800; color: #e8ecf5; margin-bottom: 4px; }
.ai-result-desc { font-size: 12px; color: rgba(255,255,255,0.45); }

.ai-result-funds { display: flex; flex-direction: column; gap: 8px; }
.ai-fund-item { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.ai-fund-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ai-fund-name { width: 100px; font-weight: 600; color: rgba(255,255,255,0.8); flex-shrink: 0; }
.ai-fund-bar-wrap {
  flex: 1; background: rgba(255,255,255,0.07); border-radius: 6px;
  height: 6px; overflow: hidden;
}
.ai-fund-bar { height: 100%; border-radius: 6px; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); opacity: 0.85; }
.ai-fund-pct { width: 34px; text-align: right; font-weight: 800; color: rgba(255,255,255,0.9); }
/* 펀드별 1년 수익률 태그 */
.ai-fund-ret1y {
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  background: rgba(255,255,255,0.07); border-radius: 5px;
  padding: 2px 6px; display: flex; align-items: center; gap: 3px;
}
.ai-fund-ret1y.pos { color: #7fd0bd; }
.ai-fund-ret1y.neg { color: #ff5252; }
.ai-fund-ret-lbl { font-size: 9px; opacity: 0.6; font-weight: 400; }

/* 사업비 태그 행 */
.ai-expense-tag-row { margin-top: 6px; }
.ai-expense-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
}
.ai-expense-badge.standard { background: rgba(44,92,154,0.2); color: #90caf9; border: 1px solid rgba(44,92,154,0.3); }
.ai-expense-badge.levelup  { background: rgba(103,58,183,0.2); color: #b3bbe6; border: 1px solid rgba(103,58,183,0.3); }
.ai-expense-badge.moki     { background: rgba(201,162,74,0.2);  color: #a5d6a7; border: 1px solid rgba(201,162,74,0.3); }
.ai-expense-badge.none     { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.35); border: 1px solid rgba(255,255,255,0.08); }

/* 더블체크 박스 */
.ai-double-check {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,235,59,0.15);
  border-radius: 10px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 6px;
}
.ai-dc-title { font-size: 11px; font-weight: 800; color: rgba(255,235,59,0.8); margin-bottom: 4px; letter-spacing: 0.3px; }
.ai-dc-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.ai-dc-label { flex: 1; color: rgba(255,255,255,0.45); font-weight: 500; }
.ai-dc-val { font-weight: 800; font-size: 13px; }
.ai-dc-val.pos { color: #7fd0bd; }
.ai-dc-val.neg { color: #ff5252; }
.ai-dc-val.final { font-size: 16px; }
.ai-dc-row.ai-dc-final {
  margin-top: 4px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.ai-dc-badge {
  font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 12px;
}
.ai-dc-badge.ok   { background: rgba(92,184,166,0.15); color: #7fd0bd; border: 1px solid rgba(92,184,166,0.3); }
.ai-dc-badge.warn { background: rgba(255,193,7,0.15);   color: #ffd54f; border: 1px solid rgba(255,193,7,0.3); }

/* 시뮬 행 사업비 노트 */
.ai-sim-exp {
  font-size: 10px; color: rgba(255,193,7,0.7); font-weight: 600;
  margin-left: auto; white-space: nowrap;
}
.ai-sim-exp.no-exp { color: rgba(255,255,255,0.2); }
/* 시뮬 하단 주의사항 */
.ai-sim-notice {
  margin-top: 8px; font-size: 10px; color: rgba(255,255,255,0.2);
  border-top: 1px solid rgba(255,255,255,0.05); padding-top: 8px;
}

.ai-result-return {
  display: flex; align-items: center; gap: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px; padding: 12px 16px;
}
.ai-ret-label { font-size: 12px; color: rgba(255,255,255,0.5); font-weight: 600; }
.ai-ret-value { font-size: 24px; font-weight: 900; letter-spacing: -0.5px; }
.ai-ret-value.pos { color: #7fd0bd; }
.ai-ret-value.neg { color: #ff5252; }

.ai-sim-preview {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px; padding: 12px 16px;
}
.ai-sim-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.6); margin-bottom: 10px; }
.ai-sim-row {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px; flex-wrap: wrap;
}
.ai-sim-row:last-child { border-bottom: none; }
.ai-sim-yr { width: 42px; font-weight: 700; color: rgba(255,255,255,0.5); flex-shrink: 0; }
.ai-sim-p { color: rgba(255,255,255,0.3); width: 80px; flex-shrink: 0; }
.ai-sim-arrow { color: rgba(255,255,255,0.15); font-size: 10px; flex-shrink: 0; }
.ai-sim-fv { flex-shrink: 0; }
.ai-sim-fv strong { color: #e8ecf5; font-size: 13px; }
.ai-sim-gain { flex-shrink: 0; }
.ai-sim-gain.pos { font-weight: 700; color: #7fd0bd; }
.ai-sim-gain.neg { font-weight: 700; color: #ff5252; }

/* ─── PREVIEW PANEL — Sticky 고정 스크롤 ─────────── */
.preview-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* ★ 핵심: 스크롤 시 우측 패널이 뷰포트에 고정되어 따라다님 */
  position: sticky;
  top: 80px;                /* 헤더 높이(약 72px) + 여백 8px */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  /* 스크롤바 스타일 (얇게) */
  scrollbar-width: thin;
  scrollbar-color: #c9d3e8 transparent;
  /* 부드러운 전환 */
  align-self: flex-start;
}
.preview-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}
.preview-title {
  font-size: 13px; font-weight: 700;
  color: var(--primary);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.chart-container { position: relative; }

.pie-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

/* 예상수익률 */
.return-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 10px; }
.return-item { text-align: center; background: #f5f7fb; border-radius: 8px; padding: 10px 6px; }
.return-label { font-size: 10px; color: var(--muted); margin-bottom: 4px; font-weight: 600; }
.return-value { font-size: 18px; font-weight: 800; }
.return-notice { font-size: 10px; color: var(--muted); line-height: 1.4; }

/* 생성 버튼 */
.generate-btn {
  background: linear-gradient(135deg, var(--primary) 0%, #2c6aa8 100%);
  color: white;
  border: none;
  border-radius: var(--radius);
  padding: 16px;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 16px rgba(2,119,189,0.3);
  transition: all 0.2s;
  font-family: inherit;
}
.generate-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(26,35,126,0.4);
}
.generate-btn:active { transform: translateY(0); }

/* ─── PAGE 2 ──────────────────────────────────────── */
.page2-header { position: sticky; top: 0; z-index: 100; }
.back-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  transition: background 0.2s;
  font-family: inherit;
}
.back-btn:hover { background: rgba(255,255,255,0.25); }

.print-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 6px;
  transition: background 0.2s;
  font-family: inherit;
}
.print-btn:hover { background: rgba(255,255,255,0.25); }

.proposal-title-area { text-align: center; }
.proposal-main-title { font-size: 18px; font-weight: 800; color: white; }
.proposal-sub-title { font-size: 11px; color: rgba(255,255,255,0.65); margin-top: 2px; }
.proposal-ai-tag {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  color: #7fd0bd;
  background: rgba(92,184,166,0.12);
  border: 1px solid rgba(92,184,166,0.35);
  padding: 3px 10px; border-radius: 20px;
  animation: aiTagPulse 2.5s ease-in-out infinite;
}
.proposal-ai-tag .fa-microchip { font-size: 10px; }
@keyframes aiTagPulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; box-shadow: 0 0 8px rgba(92,184,166,0.3); }
}

.page2-main {
  max-width: 1400px; margin: 0 auto;
  padding: 24px;
  display: flex; flex-direction: column; gap: 20px;
}

/* ─── RESULT SECTIONS ────────────────────────────── */
.result-section {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

.section-title {
  font-size: 16px; font-weight: 800; color: var(--primary);
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8ecf5;
}

/* ── 고객 투자 프로파일 프리미엄 타이틀 ───────────────── */
.profile-section-title {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.6px;
  background: linear-gradient(135deg, #14315c 0%, #2c6aa8 55%, #3f8fa8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  padding-bottom: 12px;
  border-bottom: 2.5px solid transparent;
  border-image: linear-gradient(90deg, #2c6aa8, #4a9cb5, #7cbcd0) 1;
  position: relative;
  gap: 10px;
}
.profile-section-title::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0;
  width: 60px; height: 3px;
  background: linear-gradient(90deg, #4b5a96, #56609a);
  border-radius: 2px;
}
.profile-section-title .fa-address-card {
  background: linear-gradient(135deg, #3f5290, #4b5a96);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 20px;
}

/* ── 레벨UP 배지 (고객 투자 프로파일 타이틀 옆) ────────── */
.profile-levelup-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #4b5a96 0%, #56609a 100%);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 4px 11px 4px 9px;
  border-radius: 20px;
  margin-left: 4px;
  box-shadow: 0 3px 10px rgba(75,90,150,0.45);
  vertical-align: middle;
  animation: levelupBadgePop 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
.profile-levelup-badge .fa-rocket {
  font-size: 10px;
  -webkit-text-fill-color: #fff;
}
@keyframes levelupBadgePop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* 요약 섹션 */
.summary-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.summary-left, .summary-right { display: flex; flex-direction: column; }

/* ─── 고객 투자 프로파일 — 심플 카드 ────────────────── */
.profile-box { display: flex; flex-direction: column; gap: 10px; }

/* 카드 공통 */
.pf-card {
  border-radius: 10px;
  border: 1px solid var(--border);
  background: #f5f7fb;
  padding: 12px 16px;
}

/* ① 기본정보 한 줄 (이름·생년월일·성별) */
.pf-info-row {
  display: flex; align-items: center; gap: 0;
  flex-wrap: wrap;
}
.pf-info-item {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 100px;
  padding: 0 12px;
}
.pf-info-item:first-child { padding-left: 0; }
.pf-divider {
  width: 1px; height: 36px;
  background: var(--border);
  flex-shrink: 0;
}
.pf-icon {
  font-size: 16px; color: var(--primary-light);
  flex-shrink: 0;
}
.pf-label { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.pf-value { font-size: 13px; font-weight: 700; color: var(--text); }
.pf-name-val { font-size: 15px; font-weight: 800; color: var(--primary); }

/* ② 월 납입금액 강조 */
.pf-amount-row {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(135deg, #e8ecf5 0%, #f0f4fa 100%);
  border-color: #c9d3e8;
}
.pf-icon-lg { font-size: 22px; color: var(--primary); }
.pf-amount-content { flex: 1; }
.pf-amount-big {
  font-size: 22px; font-weight: 900; color: var(--primary);
  letter-spacing: -0.5px; line-height: 1.2;
}
.pf-unit { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.pf-propose-date {
  font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
  background: white; border-radius: 20px;
  padding: 4px 10px;
  border: 1px solid var(--border);
}

/* ③ 수익률 3구간 한 줄 */
.pf-returns-row {
  display: flex; align-items: stretch; gap: 0;
  background: white;
  border-color: #c9d3e8;
  padding: 0;
  overflow: hidden;
}
.pf-ret-item {
  flex: 1; text-align: center;
  padding: 12px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.pf-ret-item--accent { background: #f0f4fa; }
.pf-ret-sep {
  width: 1px; background: var(--border);
  margin: 8px 0;
}
.pf-ret-label { font-size: 10px; font-weight: 600; color: var(--muted); }
.pf-ret-value { font-size: 18px; font-weight: 900; }

/* 기존 호환 (레거시) */
.profile-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; background: #f5f7fb;
  border-radius: 8px; font-size: 13px;
}
.profile-row i { color: var(--primary-light); width: 16px; }
.profile-row span { color: var(--muted); width: 140px; flex-shrink: 0; }
.profile-row strong { font-weight: 700; }
.profile-row strong.highlight { color: var(--primary); font-size: 15px; }

/* ─── 포트폴리오 v2 (도넛 중앙 + 리스트) ─────────────── */
.portfolio-wrap-v2 {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.portfolio-donut-center {
  width: 100%; display: flex; justify-content: center;
}
.donut-canvas-wrap {
  width: 200px; height: 200px;
  position: relative;
}
.donut-canvas-wrap canvas { width: 100% !important; height: 100% !important; }

/* 포트폴리오 아이템 v2 */
.portfolio-list-v2 {
  width: 100%; display: flex; flex-direction: column; gap: 6px;
}
.portfolio-item-v2 {
  display: flex; align-items: stretch; gap: 10px;
  padding: 8px 12px;
  background: #f5f7fb;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-size: 13px;
  position: relative;
  overflow: hidden;
}
.pf-color-bar {
  position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
}
/* ── 신규: 펀드명 + 종목태그 세로 배치 컨테이너 ── */
.pf-item-main {
  flex: 1; display: flex; flex-direction: column; gap: 5px; padding-left: 4px;
}
.pf-item-top {
  display: flex; align-items: center; gap: 10px;
}
.pf-item-left {
  display: flex; align-items: center; gap: 8px;
  flex: 1;
}
.pf-item-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pf-item-name { font-weight: 600; color: var(--text); font-size: 13px; }
.pf-item-ratio {
  font-weight: 900; color: var(--primary);
  font-size: 15px; width: 42px; text-align: right; flex-shrink: 0;
}
.pf-item-ret {
  font-size: 12px; font-weight: 700;
  width: 72px; text-align: right; flex-shrink: 0;
}
/* ── 대표 종목 태그 행 ── */
.pf-holding-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding-left: 18px; /* dot 너비만큼 들여쓰기 */
}
.pf-holding-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  border: 1px solid;
  font-size: 10.5px;
  font-weight: 600;
  background: #fff;
  white-space: nowrap;
  letter-spacing: -0.2px;
}

/* 기존 호환 (레거시) */
.portfolio-chart-wrap { display: flex; gap: 20px; align-items: flex-start; }
.portfolio-list { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.portfolio-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #f5f7fb; border-radius: 6px; font-size: 12px; }
.pf-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pf-name { flex: 1; font-weight: 600; }
.pf-ratio { font-weight: 800; color: var(--primary); width: 36px; text-align: right; }
.pf-return { width: 80px; text-align: right; font-size: 11px; }

/* ═══════════════════════════════════════════════════
   레벨UP 전용 스타일
   ═══════════════════════════════════════════════════ */

/* STEP2 - 7년간 사망보험금 란 */
.levelup-death-benefit-wrap {
  margin-top: 10px;
}
.levelup-death-benefit-box {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #0f2245 0%, #22467c 60%, #4361ee 100%);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 4px 16px rgba(75,90,150,0.25);
  text-align: center;
  justify-content: center;
  flex-direction: column;
}
.ldb-icon {
  font-size: 26px; color: #f8bbd0;
}
.ldb-content {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center;
}
.ldb-label {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85);
  letter-spacing: 0.3px; line-height: 1.5;
}
.ldb-value {
  font-size: 15px; font-weight: 900; color: white; line-height: 1.5;
}
.ldb-sub {
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.ldb-badge {
  font-size: 11px; font-weight: 700; color: #f6ece0;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px; padding: 4px 12px;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}

/* 프로파일 - 레벨UP 사망보험금 카드 */
.pf-levelup-death-card {
  background: linear-gradient(135deg, #0f2245 0%, #22467c 60%, #4361ee 100%) !important;
  border-color: #4b5a96 !important;
  padding: 14px 16px !important;
  text-align: center;
}
.pf-levelup-death-inner {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pf-ldb-icon-wrap {
  font-size: 22px; color: #f48fb1;
}
.pf-ldb-text {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center;
}
.pf-ldb-title {
  font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.8);
  line-height: 1.5;
}
.pf-ldb-desc {
  font-size: 14px; font-weight: 900; color: white; line-height: 1.5;
}
.pf-ldb-sub {
  font-size: 11px; font-weight: 500; color: rgba(255,255,255,0.5);
  margin-top: 2px;
}
.pf-ldb-badge {
  font-size: 11px; font-weight: 700; color: #f6ece0;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px; padding: 4px 10px;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}

/* 시뮬레이션 - 레벨UP 배너 */
.expense-notice-banner.levelup-banner {
  background: linear-gradient(135deg, #0f2245 0%, #22467c 100%);
  border-color: #4b5a96;
  color: rgba(255,255,255,0.95);
}
.expense-notice-banner.levelup-banner i { color: #b3bbe6; }

/* 모키일시납 배너 */
.expense-notice-banner.moki-lump-banner {
  background: linear-gradient(135deg, #004d40 0%, #1f5c53 100%);
  border-color: #2b7a6f;
  color: rgba(255,255,255,0.95);
}
.expense-notice-banner.moki-lump-banner i { color: #80cbc4; }

/* 모키일시납 테이블 th 배지 */
.expense-badge-th.moki-badge-th {
  background: linear-gradient(135deg, #2b7a6f, #3d9186);
  color: white;
}

/* 레벨UP 전환 행 강조 */
.levelup-convert-row {
  background: linear-gradient(90deg, #ecedf6 0%, #e4e8f3 100%) !important;
}
.levelup-convert-row td { border-bottom: 2px solid #4b5a96 !important; }
.levelup-y10-row {
  background: linear-gradient(90deg, #e8ecf5 0%, #ecedf6 100%) !important;
}
.levelup-y10-row td { border-bottom: 2px solid #56609a !important; }

/* 레벨UP 전환 배지 */
.year-badge.levelup-convert-badge {
  background: linear-gradient(135deg, #4b5a96, #56609a);
  color: white; border: none;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
}

/* 레벨UP 안내 박스 */
.levelup-info-box {
  margin-top: 16px;
  border-radius: 12px;
  border: 1px solid #b3bbe6;
  overflow: hidden;
}
.levelup-info-header {
  background: linear-gradient(135deg, #0f2245 0%, #22467c 100%);
  color: white;
  padding: 12px 18px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 800;
}
.levelup-info-header i { color: #b3bbe6; font-size: 16px; }
.levelup-info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #e8ecf5;
  padding: 1px;
}
.lui-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: white;
}
.lui-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.lui-text { flex: 1; }
.lui-title {
  font-size: 13px; font-weight: 800; color: var(--text);
  margin-bottom: 4px;
}
.lui-desc {
  font-size: 12px; color: var(--muted); line-height: 1.5;
}
.levelup-info-footer {
  background: #eef0f8;
  border-top: 1px solid #b3bbe6;
  padding: 12px 18px;
  font-size: 12px; color: #2c3a6e; line-height: 1.6;
  display: flex; align-items: flex-start; gap: 8px;
}
.levelup-info-footer i { color: #4b5a96; font-size: 14px; flex-shrink: 0; margin-top: 2px; }

/* MMF 경고 토스트 */
.mmf-warning-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  z-index: 9999;
  background: linear-gradient(135deg, #0f2245, #4b5a96);
  color: white;
  padding: 12px 24px;
  border-radius: 30px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 32px rgba(75,90,150,0.45);
  display: flex; align-items: center; gap: 10px;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
}
.mmf-warning-toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.mmf-warning-toast i { color: #ffd54f; font-size: 16px; }

/* 시뮬레이션 배지 상태 - 레벨UP */
.expense-status-badge.levelup-badge {
  background: linear-gradient(135deg, #4b5a96, #56609a);
  color: white;
  box-shadow: 0 2px 8px rgba(75,90,150,0.4);
  animation: expense-pulse 2s infinite;
}

/* 시뮬레이션 배지 상태 - 모키(모으고키우고) */
.expense-status-badge.mokg-badge {
  background: linear-gradient(135deg, #14315c, #d9a636);
  color: white;
  box-shadow: 0 2px 8px rgba(198,40,40,0.4);
  animation: mokg-pulse 2s infinite;
}
@keyframes mokg-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(198,40,40,0.4); }
  50%       { box-shadow: 0 2px 16px rgba(245,127,23,0.65); }
}

/* 고객 투자 프로파일 타이틀 옆 — 모으고키우고 배지 */
.profile-mokg-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, #14315c 0%, #d9a636 100%);
  color: #fff;
  -webkit-text-fill-color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.2px;
  padding: 4px 11px 4px 9px;
  border-radius: 20px;
  margin-left: 4px;
  box-shadow: 0 3px 10px rgba(198,40,40,0.4);
  vertical-align: middle;
  animation: mokgBadgePop 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
.profile-mokg-badge .fa-piggy-bank {
  font-size: 10px;
  -webkit-text-fill-color: #fff;
}
@keyframes mokgBadgePop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ─── 시뮬레이션 ──────────────────────────────────── */
.sim-title-row {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 8px; margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e8ecf5;
}
.sim-title-row .section-title { flex: none; }

/* 사업비 반영 상태 배지 (시뮬레이션 타이틀 옆) */
.expense-status-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 4px 12px; border-radius: 20px;
  vertical-align: middle; margin-left: 4px;
}
.expense-status-badge.on {
  background: linear-gradient(135deg, #0d2245, #22467c);
  color: white;
  box-shadow: 0 2px 8px rgba(229,57,53,0.35);
  animation: expense-pulse 2s infinite;
}
.expense-status-badge.off {
  background: #f5f5f5; color: #9e9e9e;
  border: 1px solid #e0e0e0;
}
.expense-status-detail {
  font-size: 10px; font-weight: 400; opacity: 0.85;
  margin-left: 4px;
}
@keyframes expense-pulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(229,57,53,0.35); }
  50% { box-shadow: 0 2px 16px rgba(229,57,53,0.6); }
}

.sim-section .section-title { margin-bottom: 6px; }
.sim-basis {
  font-size: 12px; font-weight: 400; color: var(--muted); margin-left: 6px;
}
.sim-table-wrap { overflow-x: auto; margin-bottom: 20px; }
.sim-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.sim-table th {
  background: linear-gradient(135deg, var(--primary) 0%, #3f5290 100%);
  color: white; padding: 10px 14px;
  text-align: center; font-weight: 700;
}
.sim-table td {
  padding: 11px 14px; text-align: center;
  border-bottom: 1px solid #f0f2f5;
  font-size: 13px;
}
.sim-table tr:hover { background: #f5f7fb; }
.sim-table tr.highlight-row {
  background: linear-gradient(90deg, #f3e6b8 0%, #fbf7ea 100%);
  font-weight: 700;
}
.sim-table tr.highlight-row td { border-bottom: 2px solid var(--gold); }

.year-badge {
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 10px;
}
.year-badge.gold { background: #f3e6b8; color: #9a6d12; border: 1px solid var(--gold); }
.year-badge.blue { background: #eaf1f9; color: #1f4a80; }

.sim-chart-wrap { position: relative; }
.fv-val { font-size: 15px; color: var(--primary); }

.sim-notice {
  margin-top: 12px;
  font-size: 11px; color: var(--muted);
  line-height: 1.5;
  padding: 8px 12px;
  background: #f5f7fb;
  border-radius: 6px;
  border-left: 3px solid #c9d3e8;
}

/* ─── 펀드 상세 카드 (구버전 fdc - 레거시, fnc로 교체됨) ────────────────────────────── */
/* .fund-detail-cards 는 하단 fnc 섹션에서 grid로 재정의됨 */
.fund-detail-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.fdc-header {
  padding: 14px 20px;
  background: #f5f7fb;
  border-bottom: 1px solid var(--border);
}
.fdc-title-area { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.fdc-name { font-size: 17px; font-weight: 800; color: var(--primary); }
.fdc-code { font-size: 12px; color: var(--muted); }
.fdc-ratio-badge {
  color: white; font-size: 12px; font-weight: 700;
  padding: 3px 12px; border-radius: 20px;
  margin-left: auto;
}
.fdc-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--muted); }
.fdc-meta span { display: flex; align-items: center; gap: 5px; }
.fdc-meta i { color: var(--primary-light); }

.fdc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 16px 20px; }
.fdc-section-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; }

/* 수익률 배지 */
.return-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rb-item {
  text-align: center;
  background: #f5f7fb;
  border-radius: 8px;
  padding: 8px 10px;
  min-width: 70px;
  border: 1px solid var(--border);
}
.rb-item.rb-highlight {
  background: #e8ecf5;
  border-color: #9fa8da;
}
.rb-label { font-size: 10px; color: var(--muted); font-weight: 600; margin-bottom: 3px; }
.rb-value { font-size: 14px; font-weight: 800; }

.fdc-strategy {
  font-size: 12px; color: #444;
  line-height: 1.7;
  background: #fafbff;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid #c9d3e8;
}

/* 종목 테이블 */
.holdings-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.holdings-table th {
  background: #f0f4fa;
  padding: 7px 8px;
  font-weight: 700; color: var(--primary);
  text-align: left; font-size: 11px;
  border-bottom: 2px solid #c9d3e8;
}
.holdings-table td { padding: 6px 8px; border-bottom: 1px solid #f0f2f5; }
.holdings-table tr:hover { background: #f5f7fb; }
.rank-no {
  width: 24px; text-align: center;
  color: var(--muted); font-weight: 700;
  background: #f0f4fa; border-radius: 4px;
  padding: 2px 4px !important;
}
.weight-bar-wrap {
  background: #f0f2f5; border-radius: 4px;
  height: 8px; width: 100%; overflow: hidden;
}
.weight-bar { height: 100%; border-radius: 4px; transition: width 0.3s; }
.weight-pct { font-weight: 700; text-align: right; color: var(--primary); }

/* ─── 유가증권 섹션 ───────────────────────────────── */
.securities-box {
  display: flex; gap: 20px;
  background: linear-gradient(135deg, #1f4a80 0%, #2c6aa8 60%, #4a9cb5 100%);
  border-radius: var(--radius);
  padding: 24px;
  color: white;
  align-items: flex-start;
}
.securities-icon { font-size: 36px; opacity: 0.8; flex-shrink: 0; margin-top: 2px; }
.securities-content h3 { font-size: 16px; font-weight: 800; margin-bottom: 10px; color: #ffecb3; }
.securities-content p { font-size: 13px; line-height: 1.7; color: rgba(255,255,255,0.85); margin-bottom: 14px; }
.securities-content strong { color: #fff; }
.securities-content em { color: #e8d59a; font-style: normal; }
.securities-points { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.sp-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13px; color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.08);
  padding: 8px 12px; border-radius: 8px;
}
.sp-item i { color: #7fd0bd; margin-top: 2px; flex-shrink: 0; }
.law { font-size: 11px; color: #90caf9; margin-left: 4px; }
.securities-closing {
  font-size: 14px; font-weight: 600;
  color: #e8d59a !important;
  background: rgba(255,255,255,0.1) !important;
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid #e8d59a;
  margin-bottom: 0 !important;
}

/* ─── FOOTER ─────────────────────────────────────── */
.page2-footer {
  text-align: center;
  padding: 14px 24px;
  font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--border);
  background: white;
}

/* ─── 인쇄 (구버전 placeholder) ── */

/* ─── 반응형 ─────────────────────────────────────── */
@media (max-width: 1100px) {
  .page1-main { grid-template-columns: 1fr; }
  /* 1열 레이아웃: sticky 해제, 2열 그리드로 표시 */
  .preview-panel {
    position: static;
    max-height: none;
    overflow-y: visible;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .generate-btn { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-row-3 { grid-template-columns: 1fr 1fr; }
  .form-row-3 .form-group:last-child { grid-column: 1 / -1; }
  .summary-section { grid-template-columns: 1fr; }
  .fdc-body { grid-template-columns: 1fr; }
  .portfolio-chart-wrap { flex-direction: column; }
  .header-inner { flex-wrap: wrap; gap: 8px; }
  .logo-main { font-size: 15px; }
  .preview-panel { position: static; max-height: none; overflow-y: visible; grid-template-columns: 1fr; }
  .ai-rec-types { grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px; }
  .ai-btn { padding: 14px 10px 12px; gap: 8px; }
  .ai-btn-icon-wrap { width: 40px; height: 40px; font-size: 18px; }
  .ai-rec-hint { margin: 0 12px 0; font-size: 10px; }
}
@media (max-width: 600px) {
  .page1-main, .page2-main { padding: 14px; }
  .securities-box { flex-direction: column; gap: 12px; }
  .return-grid { grid-template-columns: repeat(3, 1fr); }
  .form-row-3 { grid-template-columns: 1fr; }
  .ai-rec-types { grid-template-columns: 1fr 1fr; gap: 5px; padding: 8px 10px; }
  .ai-btn-name { font-size: 11px; }
  .ai-btn-desc { display: none; }
  .ai-fund-name { width: 80px; }
  .expense-check-wrap { padding: 4px 8px; }
  .expense-check-tip { display: none; }
}

/* =====================================================
   ★ PREMIUM DESIGN ENHANCEMENT PACK v2.0
   ===================================================== */

/* ── 헤더 배지 글로우 애니메이션 ── */
.header-badge {
  animation: badgeGlow 3s ease-in-out infinite;
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%       { box-shadow: 0 0 12px 3px rgba(255,255,255,0.18); }
}

/* ── 스크롤 상단 진행바 ── */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, #d9a636, #5aa6c9, #7cbcd0);
  z-index: 9999;
  transform-origin: left;
  background-size: 200% 100%;
  animation: gradientShift 4s linear infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 제안서 생성 버튼 고급 이펙트 ── */
.generate-btn {
  background: linear-gradient(135deg, #1f4a80 0%, #2c6aa8 50%, #4a9cb5 100%);
  background-size: 200% 200%;
  animation: btnGradient 4s ease infinite;
  letter-spacing: 0.3px;
  font-size: 16px;
}
@keyframes btnGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.generate-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(26,35,126,0.45);
  letter-spacing: 0.5px;
}

/* ── step-card 진입 애니메이션 ── */
.step-card {
  animation: cardFadeUp 0.4s cubic-bezier(0.4,0,0.2,1) both;
}
.step-card:nth-child(1) { animation-delay: 0.05s; }
.step-card:nth-child(2) { animation-delay: 0.12s; }
.step-card:nth-child(3) { animation-delay: 0.20s; }
@keyframes cardFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── step-num 배지 업그레이드 ── */
.step-num {
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  font-weight: 800;
  letter-spacing: 0.8px;
  box-shadow: 0 2px 8px rgba(26,35,126,0.2);
}

/* ── PAGE 2 섹션 진입 슬라이드 업 ── */
.result-section {
  animation: sectionSlideUp 0.45s cubic-bezier(0.4,0,0.2,1) both;
}
.result-section:nth-child(1) { animation-delay: 0.05s; }
.result-section:nth-child(2) { animation-delay: 0.15s; }
.result-section:nth-child(3) { animation-delay: 0.25s; }
.result-section:nth-child(4) { animation-delay: 0.32s; }
@keyframes sectionSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── result-section 왼쪽 포인트 바 ── */
.result-section {
  border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, #3f5290, #4b5a96 60%, transparent) 1;
  transition: box-shadow 0.25s;
}
.result-section:hover {
  box-shadow: 0 6px 28px rgba(2,119,189,0.13);
}

/* ── 선택 포트폴리오 타이틀 ── */
.summary-right .section-title {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.4px;
}

/* ── pf-card 진입 효과 ── */
.pf-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pf-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(2,119,189,0.1);
}

/* ── pf-amount-row 강화 ── */
.pf-amount-row {
  background: linear-gradient(135deg, #1f4a80 0%, #2c6aa8 55%, #5aa6c9 100%);
  border-color: #1f4a80;
  color: white;
}
.pf-amount-row .pf-icon-lg { color: #82b1ff; }
.pf-amount-row .pf-label { color: rgba(255,255,255,0.65); }
.pf-amount-big { color: white !important; }
.pf-unit { color: rgba(255,255,255,0.7) !important; }
.pf-amount-row .pf-propose-date {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.85);
}

/* ── 수익률 카드 수치 강화 ── */
.pf-ret-value.pos { color: #d64545; }
.pf-ret-value.neg { color: #1f4a80; }

/* ── portfolio-item-v2 호버 ── */
.portfolio-item-v2 {
  transition: background 0.18s, transform 0.18s;
}
.portfolio-item-v2:hover {
  background: #eef0ff;
  transform: translateX(3px);
}

/* ── 도넛 차트 래퍼 그림자 ── */
.donut-canvas-wrap {
  filter: drop-shadow(0 4px 16px rgba(26,35,126,0.12));
}

/* ── 시뮬레이션 테이블 th 첫행 왼쪽 둥글게 ── */
.sim-table th:first-child { border-radius: 8px 0 0 8px; }
.sim-table th:last-child  { border-radius: 0 8px 8px 0; }

/* ── 시뮬레이션 highlight-row 강화 ── */
.sim-table tr.highlight-row {
  background: linear-gradient(90deg, #fbf7ea 0%, #fff8e1 100%);
}
.sim-table tr.highlight-row td {
  font-size: 14px;
  color: #9a6d12;
}

/* ── sim-notice 업그레이드 ── */
.sim-notice {
  background: linear-gradient(135deg, #f5f7fb 0%, #f0f4fa 100%);
  border-left: 3px solid #4b5a96;
  color: #4a4e7a;
  font-size: 11.5px;
}

/* ── 펀드 상세 카드 헤더 강화 ── */
.fdc-header {
  background: linear-gradient(135deg, #f0f4fa 0%, #f5f7fb 100%);
}
.fdc-name { letter-spacing: -0.4px; }

/* ── 보유 종목 테이블 수익률 컬러 ── */
.fund-ratio-table tbody tr:nth-child(even) { background: #fafbff; }
.fund-ratio-table tbody tr:hover { background: #eef0ff !important; }

/* ── 유가증권 섹션 고급화 ── */
.securities-section { padding: 0; overflow: hidden; border: none; background: transparent; }
.securities-box {
  border-radius: var(--radius);
  background: linear-gradient(135deg, #014f70 0%, #1f4a80 40%, #2c6aa8 75%, #4a9cb5 100%);
  position: relative;
  overflow: hidden;
}
.securities-box::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(255,255,255,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.securities-box::after {
  content: '';
  position: absolute;
  bottom: -40px; left: 20px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(92,184,166,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.securities-content h3 {
  font-size: 17px;
  letter-spacing: -0.3px;
}
.sp-item {
  border: 1px solid rgba(255,255,255,0.1);
  transition: background 0.2s, transform 0.2s;
}
.sp-item:hover {
  background: rgba(255,255,255,0.13);
  transform: translateX(4px);
}

/* ── FOOTER 업그레이드 ── */
.page2-footer {
  background: linear-gradient(135deg, #14315c 0%, #1f4a80 100%);
  color: rgba(255,255,255,0.7);
  border-top: none;
  padding: 18px 24px;
  font-size: 11.5px;
  letter-spacing: 0.2px;
  position: relative;
  overflow: hidden;
}
.page2-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #d9a636, #5aa6c9, #7cbcd0, #5aa6c9, #d9a636);
  background-size: 200% 100%;
  animation: gradientShift 4s linear infinite;
}
.page2-footer p { position: relative; z-index: 1; }

/* ── 모바일 반응형 보완 ── */
@media (max-width: 480px) {
  .step-header { gap: 6px; }
  .expense-check-group { width: 100%; justify-content: flex-end; }
  .pf-info-row { flex-direction: column; gap: 8px; }
  .pf-info-item { width: 100%; padding: 0; }
  .pf-divider { display: none; }
  .pf-amount-big { font-size: 20px; }
  .profile-section-title { font-size: 17px; }
  .securities-content h3 { font-size: 15px; }
  .donut-canvas-wrap { width: 160px; height: 160px; }
  .ai-btn-desc { display: none; }
  .levelup-info-grid { grid-template-columns: 1fr; }
}

/* ── amt-btn 호버 강화 ── */
.amt-btn:active { transform: scale(0.95); }
.amt-btn { transition: all 0.15s cubic-bezier(0.4,0,0.2,1); }

/* ── preset-btn 활성 표시 ── */
.preset-btn:active { transform: scale(0.95); }

/* ── 폼 인풋 포커스 glow ── */
.form-group input:focus {
  box-shadow: 0 0 0 3px rgba(57,73,171,0.15);
}

/* ── ratio-input 포커스 ── */
.ratio-input:focus {
  box-shadow: 0 0 0 3px rgba(57,73,171,0.15);
  border-color: var(--primary-light);
}

/* ── 스크롤바 커스텀 (WebKit) ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f0f4fa; }
::-webkit-scrollbar-thumb { background: #9fa8da; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary-light); }

/* =====================================================
   @media print — A4 가로(landscape) 2페이지 인쇄 최적화 v4.0
   (2026-07-24) "인쇄하면 A4 가로로, 그래프·표가 2페이지에
   깔끔하게 정렬되게" 요청 반영
   ─────────────────────────────────────────────────────
   페이지 구성:
     [1페이지] 헤더 + 고객프로파일/포트폴리오(좌) + 미래자산시뮬레이션(우)
     [2페이지] 편입 펀드 상세카드(3열) + 유가증권 안내 + 푸터
   기준 치수(더블체크): A4 가로 297mm×210mm, 여백 상하8mm·좌우9mm
   → 인쇄 가능 영역 = 279mm × 194mm (297-9*2=279 / 210-8*2=194)
   ===================================================== */

@page {
  size: A4 landscape;
  margin: 8mm 9mm 8mm 9mm;
}

@media print {

  /* ━━ 0. 색상/배경 강제 출력 ━━ */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ━━ 1. html / body 리셋 ━━ */
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    width: 100% !important;
    font-size: 10px !important;
  }

  /* ━━ 2. 페이지 전환 ━━ */
  #page1    { display: none !important; }
  #ogCanvas { display: none !important; }
  .page     { display: none !important; }
  #page2    { display: block !important; width: 100% !important; }

  /* ━━ 3. 헤더 — 1페이지 상단에만 노출, 소형화 ━━ */
  .page2-header {
    position: static !important;
    background: linear-gradient(135deg, #1f4a80 0%, #4a9cb5 100%) !important;
    padding: 6px 12px !important;
    margin-bottom: 5px !important;
  }
  .back-btn, .print-btn, .proposal-ai-tag, .logout-btn { display: none !important; }
  .header-inner        { justify-content: center !important; }
  .proposal-title-area { text-align: center !important; }
  .proposal-main-title { font-size: 15px !important; color: #fff !important; }
  .proposal-sub-title  { font-size: 9.5px !important; color: rgba(255,255,255,0.78) !important; }

  /* ━━ 4. 메인 컨테이너 ━━ */
  .page2-main {
    max-width: 100% !important;
    padding: 0 !important;
    gap: 0 !important;
    display: block !important;
  }

  /* ━━ 5. 공통 섹션 ━━ */
  /* ※ break-inside:avoid를 여기서 전체에 걸면, 콘텐츠가 많아 1페이지 높이를 넘는
     섹션(p2-top-section/funds-section)이 통째로 다음 페이지로 밀려나며
     그 앞에 거대한 흰 여백이 생긴다(실제 발생한 버그). 그래서 큰 섹션에는
     avoid를 걸지 않고, 안에 있는 개별 카드/행 단위에만 걸어 부분 절단만 막는다. */
  .result-section {
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
    box-shadow: none !important;
    border: 1px solid #cdd2e8 !important;
    border-radius: 6px !important;
  }
  .securities-section {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  .section-title {
    font-size: 12px !important;
    font-weight: 800 !important;
    padding-bottom: 4px !important;
    margin-bottom: 6px !important;
    border-bottom-width: 1px !important;
  }
  .profile-section-title {
    -webkit-text-fill-color: transparent !important;
    background: linear-gradient(135deg, #14315c, #2c6aa8, #3f8fa8) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     ★ 1페이지: 프로파일 + 포트폴리오(좌) / 시뮬레이션(우)
     A4 가로 인쇄영역(279mm) 기준 좌:우 = 1:1.35 비율 그대로 유지
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .p2-top-section {
    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 10px !important;
    break-after: page !important;      /* ① 1페이지 종료 지점 — 여기서 강제 페이지 나눔 */
    page-break-after: always !important;
    margin-bottom: 0 !important;
    align-items: start !important;
  }
  .p2-left-col, .p2-right-col { width: 100% !important; }
  .p2-profile-wrap    { margin-bottom: 6px !important; }
  .p2-portfolio-wrap  { padding: 6px 9px !important; break-inside: avoid !important; page-break-inside: avoid !important; }
  .p2-sim-wrap        { padding: 6px 9px !important; }
  /* 좌측 컬럼 개별 카드는 쪼개지지 않도록(전체 섹션은 avoid 해제, 낱개만 유지) */
  .pf-card            { break-inside: avoid !important; page-break-inside: avoid !important; margin-bottom: 4px !important; }
  .portfolio-item-v2  { break-inside: avoid !important; page-break-inside: avoid !important; }
  .sim-card           { break-inside: avoid !important; page-break-inside: avoid !important; }
  .sim-table tr       { break-inside: avoid !important; page-break-inside: avoid !important; }
  .sim-avg-rate-box   { padding: 7px 12px !important; margin-bottom: 6px !important; }
  .sim-avg-rate-label { font-size: 9.5px !important; }
  .sim-avg-rate-value { font-size: 18px !important; }

  /* ★★★ 버그수정: 크로스체크(동시체크) 비교모드 — 화면용 인라인 스타일이
     그대로 인쇄되면 A4 1페이지 높이를 넘어 표 하단이 잘려 "표가 안 보이는"
     현상 발생. !important로 강제 축소해 1페이지 안에 확실히 들어가도록 함. */
  .cross-header-banner    { padding: 6px 10px !important; margin-bottom: 6px !important; border-radius: 8px !important; }
  .cross-header-banner i  { font-size: 15px !important; }
  .cross-header-banner div div:first-child { font-size: 11px !important; }
  .cross-header-banner div div:last-child  { font-size: 8.5px !important; margin-top: 0 !important; }
  .cross-fund-common-card { padding: 5px 9px !important; margin-bottom: 6px !important; border-radius: 6px !important; }
  .cross-fund-common-card > div:first-child { font-size: 9.5px !important; margin-bottom: 4px !important; }
  .cross-fund-common-card span { font-size: 8.5px !important; padding: 1px 7px !important; }
  .cross-table-outer      { overflow: visible !important; }
  .cross-main-table       { font-size: 9.5px !important; break-inside: avoid !important; page-break-inside: avoid !important; }
  .cross-th-year, .cross-th-lv, .cross-th-mk { padding: 5px 6px !important; font-size: 9.5px !important; }
  .cross-th-lv br, .cross-th-mk br { display: none !important; }
  .cross-th-lv span, .cross-th-mk span { display: none !important; }
  .cross-expense-row td   { font-size: 7.5px !important; padding: 2px 6px !important; }
  .cross-td-year          { padding: 4px 5px !important; font-size: 9.5px !important; }
  .cross-td-lv, .cross-td-mk { padding: 4px 6px !important; }
  .cross-td-fv            { font-size: 10.5px !important; margin-bottom: 1px !important; }
  .cross-td-gain          { font-size: 7.5px !important; }
  .cross-td-rate          { font-size: 7.5px !important; margin: 0 !important; }
  .cross-7y-badge         { font-size: 7px !important; padding: 1px 6px !important; margin-top: 2px !important; }
  .cross-table-row        { break-inside: avoid !important; page-break-inside: avoid !important; }
  .cross-summary-card     { margin-top: 6px !important; padding: 8px !important; border-radius: 8px !important; break-inside: avoid !important; page-break-inside: avoid !important; }
  .cross-summary-card > div:first-child { font-size: 10px !important; margin-bottom: 5px !important; }
  .cross-summary-grid     { gap: 6px !important; margin-bottom: 6px !important; }
  .cross-summary-grid > div { padding: 6px !important; }
  .cross-summary-grid div div:first-child { font-size: 8.5px !important; margin-bottom: 2px !important; }
  .cross-summary-grid div div:last-child  { font-size: 12.5px !important; }
  .cross-winner-box       { padding: 6px !important; }
  .cross-winner-box span  { font-size: 10px !important; }
  .cross-winner-box span[style*="18px"] { font-size: 12px !important; }
  .cross-winner-box div   { font-size: 7.5px !important; margin-top: 2px !important; }

  /* 라인차트 — 1페이지 안에 확실히 들어가도록 살짝 더 콤팩트하게(190→160px) */
  .sim-line-chart-wrap {
    height: 160px !important;
    max-height: 160px !important;
    margin-bottom: 6px !important;
  }
  .sim-line-chart-wrap canvas { max-height: 160px !important; }

  .sim-cards-row {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }
  .sim-card        { padding: 7px 8px !important; }
  .sim-card-year   { font-size: 9px !important; }
  .sim-card-amount { font-size: 11.5px !important; }
  .sim-card-sub    { font-size: 8.5px !important; }
  .sim-card-badge  { font-size: 8.5px !important; padding: 2px 6px !important; }

  /* 구버전 summary-section 호환 */
  .summary-section {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .summary-left, .summary-right { width: 100% !important; }

  .pf-row          { padding: 4px 8px !important; font-size: 10px !important; }
  .pf-amount-row   { padding: 6px 8px !important; }
  .pf-amount-label { font-size: 9px !important; }
  .pf-amount-value { font-size: 16px !important; }
  .pf-ret-value    { font-size: 14px !important; }
  .pf-ret-label    { font-size: 9px !important; }

  .portfolio-wrap-v2 { gap: 6px !important; }
  .donut-canvas-wrap { width: 115px !important; height: 115px !important; }
  .portfolio-item-v2 { padding: 4px 8px !important; font-size: 10px !important; }
  .pf-item-name      { font-size: 9px !important; }
  .pf-item-ratio     { font-size: 11px !important; }
  .pf-item-ret       { font-size: 9px !important; }
  .pf-holding-tags   { gap: 4px !important; padding-left: 15px !important; }
  .pf-holding-tag    { font-size: 8px !important; padding: 1px 6px !important; }

  /* ★ 미래 자산 시뮬레이션 섹션 강조 테두리 유지 */
  .sim-section {
    border: 2px solid #1f4a80 !important;
  }
  .sim-title-row   { margin-bottom: 6px !important; padding-bottom: 4px !important; }
  .section-title.sim-section-title {
    font-size: 13px !important;
    color: #1f4a80 !important;
  }

  /* 시뮬레이션 테이블 — 넓어진 가로폭 활용, 크고 선명하게 */
  .sim-table-wrap  { margin-bottom: 3px !important; margin-top: 6px !important; }
  .sim-table {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  .sim-table th {
    padding: 7px 9px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    background: #1f4a80 !important;
    color: #fff !important;
    text-align: center !important;
  }
  .sim-table td {
    padding: 6px 9px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-bottom: 1px solid #e0e4ef !important;
  }
  .sim-table tr.highlight-row td {
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  .sim-table td.sim-val-main {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: #1f4a80 !important;
  }

  .sim-notice  { font-size: 8.5px !important; padding: 4px 6px !important; margin-top: 4px !important; }

  /* 사업비 배너 숨김 (인쇄물 간소화 목적, 기존 방침 유지) */
  .expense-status-badge { font-size: 9px !important; padding: 2px 7px !important; }
  #expenseBannerArea    { display: none !important; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     ★ 2페이지: 편입 펀드 상세카드(3열) + 유가증권 안내
     A4 가로 인쇄영역(279mm) ÷ 3열 = 카드 1개당 약 93mm 폭 확보
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .funds-section {
    break-before: page !important;   /* ② 2페이지 시작 지점 — 안전장치(위 break-after와 이중 보장) */
    page-break-before: always !important;
    margin-top: 0 !important;
  }
  .fund-detail-cards {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }
  .fund-detail-cards .fnc-card { break-inside: avoid !important; page-break-inside: avoid !important; }
  /* 구버전 카드 (fdc) 호환 */
  .fund-detail-card   { break-inside: avoid !important; }
  .fdc-header         { padding: 6px 9px !important; }
  .fdc-name           { font-size: 10.5px !important; }
  .fdc-code           { font-size: 8.5px !important; }
  .fdc-meta           { font-size: 8.5px !important; gap: 5px !important; }
  .fdc-body           { padding: 7px 9px !important; gap: 7px !important; }
  .fdc-section-label  { font-size: 8.5px !important; margin-bottom: 3px !important; }
  .rb-item            { padding: 3px 5px !important; min-width: 46px !important; }
  .rb-label           { font-size: 7.5px !important; }
  .rb-value           { font-size: 10.5px !important; }
  .fdc-strategy       { font-size: 8.5px !important; padding: 5px 7px !important; line-height: 1.45 !important; }
  .holdings-table th,
  .holdings-table td  { padding: 2.5px 4px !important; font-size: 8px !important; }
  .fdc-ratio-badge    { font-size: 8.5px !important; padding: 2px 6px !important; }
  .ks-tag             { font-size: 7.5px !important; padding: 1px 4px !important; }

  /* 새 카드(fnc) — 3열 그리드에 맞춰 콤팩트하게, 카드 중간에서 안 잘리도록 고정 */
  /* ★★★ 버그수정(v18r21, "인쇄가 4장으로 나옴"): 9개 펀드 카드(3열×3행)에
     TOP5 보유비중 바차트까지 그대로 인쇄되면 카드 세로길이가 A4 가로
     1페이지 인쇄영역(194mm)을 초과 → 카드/유가증권 안내가 3·4페이지로
     밀려나는 현상 발생. 인쇄 전용으로 TOP5 바차트·운용사명을 생략하고
     설명글을 2줄로 고정 압축해 3행 전체가 한 페이지 안에 들어가도록 함
     (화면 표시는 100% 그대로 유지, 인쇄 시에만 축소). ★★★ */
  .fnc-card            { break-inside: avoid !important; page-break-inside: avoid !important; }
  .fnc-header          { padding: 5px 8px 4px !important; }
  .fnc-header-top      { margin-bottom: 4px !important; }
  .fnc-country-icon    { font-size: 14px !important; }
  .fnc-fund-name       { font-size: 9.5px !important; margin-bottom: 1px !important; }
  .fnc-fund-manager    { display: none !important; }               /* 운용사명 줄 생략(공간확보) */
  .fnc-return-label    { font-size: 6.5px !important; }
  .fnc-return-big      { font-size: 13px !important; }
  .fnc-type-badge      { font-size: 7px !important; padding: 1.5px 6px !important; }
  .fnc-ratio-badge     { font-size: 7.5px !important; padding: 1.5px 7px !important; }
  .fnc-section-title   { font-size: 7px !important; margin-bottom: 2px !important; }
  .fnc-desc            {
    font-size: 7px !important; padding: 3px 6px !important; line-height: 1.3 !important;
    display: -webkit-box !important; -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important; overflow: hidden !important;
    max-height: 20px !important;
  }
  .fnc-ret-grid        { gap: 3px !important; margin: 3px 0 !important; }
  .fnc-ret-item        { padding: 3px 4px !important; }
  .fnc-ret-label       { font-size: 6.5px !important; }
  .fnc-ret-val         { font-size: 8.5px !important; }
  /* TOP5 보유비중 바차트 섹션 전체 인쇄 생략 — 위 Pill 태그로 대표종목은 이미 노출됨 */
  .fnc-section-top5    { display: none !important; }
  .fnc-meta            { font-size: 6px !important; padding: 3px 6px !important; gap: 3px !important; }
  .fnc-pill            { font-size: 6.5px !important; padding: 1px 4px !important; }
  .fnc-pills           { gap: 3px !important; }
  .fnc-body            { padding: 5px 8px 6px !important; gap: 3px !important; }

  /* ━━ 2페이지 하단: 유가증권 안내 — 3열 카드 아래 자연스럽게 이어서 배치 ━━ */
  .securities-section { break-inside: avoid !important; margin-top: 6px !important; }
  .securities-box {
    padding: 12px 16px !important;
    gap: 11px !important;
    background: linear-gradient(135deg, #1f4a80 0%, #2c6aa8 60%, #4a9cb5 100%) !important;
  }
  .securities-icon          { font-size: 22px !important; }
  .securities-content h3    { font-size: 12px !important; margin-bottom: 5px !important; }
  .securities-content p     { font-size: 9.5px !important; line-height: 1.5 !important; margin-bottom: 6px !important; }
  .sp-item                  { padding: 4px 8px !important; font-size: 9.5px !important; gap: 6px !important; }
  .law                      { font-size: 8.5px !important; }
  .securities-closing       { font-size: 9.5px !important; padding: 6px 8px !important; }

  /* ━━ 푸터 — 2페이지 맨 아래 ━━ */
  .page2-footer {
    padding: 5px 8px !important;
    font-size: 8px !important;
    margin-top: 5px !important;
    border-top: 1px solid #e0e4ef !important;
  }

  /* ━━ 기타 ━━ */
  a { text-decoration: none !important; }
  .profile-levelup-badge,
  .profile-mokg-badge      { font-size: 8px !important; padding: 2px 7px !important; }
  .expense-check-group,
  .levelup-death-benefit-wrap { display: none !important; }

  /* ★★★ 버그 수정: '합계: 100%' floating 배지 — position:fixed라서
     숨기지 않으면 크롬이 모든 인쇄 페이지마다 반복 출력한다(실제 발생 버그). */
  #ratioFloatBadge { display: none !important; }
}


/* =====================================================
   ★ 새 펀드 상세 카드 — New Card Design (fnc-*)
   참조 이미지: 파스텔 헤더 + 큰 수익률 + Pill 태그 + TOP5 바
   ===================================================== */

/* 컨테이너: 2열 그리드 */
.fund-detail-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* ── 카드 래퍼 ── */
.fnc-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.fnc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(0,0,0,0.14);
}

/* ── 파스텔 헤더 ── */
.fnc-header {
  padding: 16px 18px 14px;
  position: relative;
}
.fnc-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.fnc-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fnc-country-icon {
  font-size: 24px;
  line-height: 1;
}
.fnc-country-code {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.fnc-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.fnc-type-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.fnc-ratio-badge {
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  white-space: nowrap;
}

/* 헤더 하단: 펀드명 + 1년 수익률 */
.fnc-header-body {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 12px;
}
.fnc-header-name-area {
  flex: 1;
  min-width: 0;
}
.fnc-fund-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
  margin-bottom: 3px;
}
.fnc-fund-manager {
  font-size: 11.5px;
  color: #6b7280;
  font-weight: 500;
}
.fnc-return-big-area {
  text-align: right;
  flex-shrink: 0;
}
.fnc-return-label {
  font-size: 10.5px;
  color: #6b7280;
  font-weight: 600;
  margin-bottom: 2px;
}
.fnc-return-big {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
}
.fnc-return-big.pos { color: #2f6f5e; }
.fnc-return-big.neg { color: #3d6199; }

/* ── 카드 바디 (흰 배경) ── */
.fnc-body {
  padding: 14px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

/* ── 섹션 공통 ── */
.fnc-section-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.fnc-fire { font-size: 13px; }

/* ── Pill 태그 (주요 투자 종목) ── */
.fnc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.fnc-pill {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 11px;
  border-radius: 20px;
  border: 1.5px solid;
  background: transparent;
  white-space: nowrap;
}

/* ── 설명 텍스트 ── */
.fnc-desc {
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.65;
  background: #f9fafb;
  padding: 10px 12px;
  border-radius: 8px;
  border-left: 3px solid #e5e7eb;
}

/* ── 기간별 수익률 그리드 (4열) ── */
.fnc-ret-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 2px 0;
}
.fnc-ret-item {
  background: #f3f4f6;
  border-radius: 8px;
  padding: 7px 6px;
  text-align: center;
}
.fnc-ret-label {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
  margin-bottom: 3px;
}
.fnc-ret-val {
  font-size: 13px;
  font-weight: 800;
}
.fnc-ret-val.pos { color: #2f6f5e; }
.fnc-ret-val.neg { color: #3d6199; }

/* ── TOP5 보유 비중 바 차트 ── */
.fnc-section-top5 .fnc-section-title {
  font-size: 11.5px;
  color: #374151;
  margin-bottom: 10px;
}
.fnc-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.fnc-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.fnc-bar-name {
  font-size: 11px;
  font-weight: 500;
  color: #374151;
  width: 120px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fnc-bar-track {
  flex: 1;
  height: 7px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}
.fnc-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.fnc-bar-pct {
  font-size: 11.5px;
  font-weight: 700;
  color: #374151;
  width: 38px;
  text-align: right;
  flex-shrink: 0;
}

/* ── 하단 메타 정보 ── */
.fnc-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 8px;
  border-top: 1px solid #f3f4f6;
  margin-top: auto;
  flex-wrap: wrap;
}
.fnc-meta-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: #6b7280;
  font-weight: 500;
  white-space: nowrap;
}
.fnc-meta-item i {
  font-size: 11px;
}

/* ── 반응형: 1열로 변경 (860px 이하) ── */
@media (max-width: 860px) {
  .fund-detail-cards {
    grid-template-columns: 1fr;
  }
  .fnc-return-big {
    font-size: 22px;
  }
  .fnc-fund-name {
    font-size: 16px;
  }
}
@media (max-width: 600px) {
  .fnc-bar-name { width: 90px; }
  .fnc-ret-grid { grid-template-columns: repeat(2, 1fr); }
  .fnc-fund-name { font-size: 15px; }
  .fnc-return-big { font-size: 20px; }
  .fnc-header { padding: 12px 14px 10px; }
  .fnc-body { padding: 12px 14px; }
}


/* =====================================================
   ★ PAGE 2 NEW LAYOUT — 좌: 프로파일+포트폴리오 / 우: 시뮬레이션
   ===================================================== */

/* ── 최상위 2열 섹션 ── */
.p2-top-section {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  align-items: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-left: none;
  border-image: none;
}

/* ── 좌측 컬럼 ── */
.p2-left-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.p2-profile-wrap {}
.p2-portfolio-wrap {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 16px 18px 20px;
  box-shadow: var(--shadow);
}
.p2-portfolio-wrap .section-title {
  font-size: 15px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* ── 우측 컬럼 ── */
.p2-right-col {
  min-width: 0;
}
.p2-sim-wrap {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 20px 22px 24px;
  box-shadow: var(--shadow);
}
.p2-sim-wrap > .section-title {
  font-size: 15px;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

/* ── 예상 연평균 수익률 박스 ── */
.sim-avg-rate-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #eff4fa 0%, #e3ecf7 100%);
  border: 1px solid #cddcee;
  border-radius: 10px;
  padding: 14px 20px;
  margin-bottom: 10px;
}
.sim-avg-rate-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.sim-avg-rate-value {
  font-size: 28px;
  font-weight: 900;
  color: #2f6f5e;
  letter-spacing: -0.5px;
}

/* ── 기준 산출식 ── */
.sim-basis-row {
  margin-bottom: 8px;
}
.sim-basis-row .sim-basis {
  font-size: 10.5px;
  color: #9ca3af;
}

/* ── 라인 차트 래퍼 ── */
.sim-line-chart-wrap {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

/* ── 하단 4개 카드 행 ── */
.sim-cards-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

/* ── 시뮬레이션 카드 ── */
.sim-card {
  border: 1.5px solid;
  border-radius: 12px;
  padding: 14px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.18s, box-shadow 0.18s;
}
.sim-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.sim-card-year {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  margin-bottom: 2px;
}
.sim-card-amount {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.2;
  word-break: keep-all;
}
.sim-card-sub {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 500;
  margin-bottom: 4px;
}
.sim-card-badge {
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 20px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 반응형: 1100px 이하 → 1열 ── */
@media (max-width: 1100px) {
  .p2-top-section {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .sim-cards-row {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 700px) {
  .sim-cards-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .sim-card-amount { font-size: 13px; }
  .sim-avg-rate-value { font-size: 22px; }
  .p2-sim-wrap { padding: 14px 14px 18px; }
}
@media (max-width: 480px) {
  .sim-cards-row { grid-template-columns: repeat(2, 1fr); }
}


/* =====================================================
   ★ 수익률 카드 재구성 + 적립식 안내 배너
   ===================================================== */

/* ── 수익률 컴팩트 카드 (레거시 — 유지) ── */
.pf-returns-compact {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* ══════════════════════════════════════════
   ★ 수익률 그리드 카드 — 새 버전
   깨짐 방지: grid 고정 레이아웃 사용
   ══════════════════════════════════════════ */
.pf-returns-grid {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 1px 8px rgba(0,0,0,0.06);
  overflow: hidden;
}

/* 헤더 줄 */
.pf-rg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px 6px;
  background: #f5f7fb;
  border-bottom: 1px solid #eef0f8;
}
.pf-rg-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #374151;
}
.pf-rg-note {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 500;
}

/* 3셀 그리드 — 균등 분할 고정 */
.pf-rg-cells {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  min-height: 72px;
}

/* 각 셀 */
.pf-rg-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px 10px;
  text-align: center;
  border-right: 1px solid #f0f2f5;
  gap: 4px;
}
.pf-rg-cell:last-child {
  border-right: none;
}
.pf-rg-cell--accent {
  background: linear-gradient(180deg, #f0fdf4 0%, #dcfce7 100%);
}

/* 라벨 */
.pf-rg-label {
  font-size: 10px;
  color: #9ca3af;
  font-weight: 600;
  line-height: 1.4;
}
.pf-rg-sublabel {
  font-size: 9px;
  color: #c4c9d4;
  font-weight: 400;
}
.pf-rg-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  background: #2f6f5e;
  color: #fff;
  padding: 1px 6px;
  border-radius: 6px;
  white-space: nowrap;
}

/* 수치 */
.pf-rg-value {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}
.pf-rg-value.big {
  font-size: 20px;
}
.pf-rg-value.pos { color: #d64545; }
.pf-rg-value.neg { color: #1f4a80; }

/* 기존 pf-rc-* 레거시 유지 */
.pf-rc-left {
  flex: 0 0 auto;
  min-width: 72px;
  max-width: 80px;
  padding-right: 12px;
  border-right: 1px solid #f0f2f5;
  margin-right: 12px;
}
.pf-rc-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #374151;
  white-space: nowrap;
}
.pf-rc-note {
  font-size: 9.5px;
  color: #9ca3af;
  margin-top: 3px;
  line-height: 1.4;
}
.pf-rc-item { flex: 1; text-align: center; min-width: 0; }
.pf-rc-item--accent { flex: 1.2; }
.pf-rc-divider {
  width: 1px; align-self: stretch;
  background: #f0f2f5; margin: 0 10px; flex-shrink: 0;
}
.pf-rc-label {
  font-size: 10px; color: #9ca3af; font-weight: 600;
  margin-bottom: 4px; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
}
.pf-rc-badge {
  font-size: 9px; font-weight: 700;
  background: #dcfce7; color: #2f6f5e;
  padding: 1px 6px; border-radius: 8px;
  border: 1px solid #bbf7d0; white-space: nowrap;
}
.pf-rc-value { font-size: 16px; font-weight: 800; letter-spacing: -0.5px; }
.pf-rc-value.big { font-size: 18px; }
.pf-rc-value.pos { color: #d64545; }
.pf-rc-value.neg { color: #1f4a80; }

/* ── 시뮬레이션 기준 안내 (한 줄) ── */
.pf-sim-basis-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 9px 13px;
  margin-top: 2px;
  font-size: 11px;
  color: #4b5563;
  line-height: 1.5;
}
.pf-sim-basis-card i {
  color: #2f6f5e;
  font-size: 13px;
  flex-shrink: 0;
}
.pf-sim-basis-card strong {
  color: #2f6f5e;
}

/* ── 적립식 특성 안내 배너 (테이블 위) ── */
.sim-accumulate-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
  border: 1px solid #fde047;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.san-icon { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.san-content { flex: 1; }
.san-title {
  font-size: 12.5px;
  font-weight: 800;
  color: #854d0e;
  margin-bottom: 10px;
}
.san-rows { display: flex; flex-direction: column; gap: 7px; }
.san-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 11.5px;
  color: #713f12;
  line-height: 1.5;
}
.san-row strong { color: #92400e; }
.san-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  margin-top: 2px;
}
.san-badge.blue   { background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe; }
.san-badge.orange { background: #ffedd5; color: #c2410c; border: 1px solid #fed7aa; }
.san-badge.green  { background: #dcfce7; color: #2f6f5e; border: 1px solid #bbf7d0; }

/* ── 1년차 낮은 수익률 안내 노트 ── */
.sim-low-ret-note {
  font-size: 10px;
  color: #92400e;
  background: #fef9c3;
  border: 1px solid #fde047;
  border-radius: 6px;
  padding: 3px 7px;
  margin-top: 4px;
  line-height: 1.4;
  font-weight: 500;
  text-align: left;
  white-space: normal;
}