/* ============================================================
   자금 플러스+ 클라이언트 전용 프리미엄 UI
   styles.css의 브랜드 토큰(--navy #010133 등)을 그대로 상속하고,
   여기서는 클라이언트 화면 전용 레이아웃/컴포넌트만 추가한다.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@600;700;900&family=Gowun+Dodum&display=swap');

:root {
  /* 자금 플러스+ 브랜드 팔레트 — "Premium Business Funding AI SaaS" 톤.
     변수명(--navy 등)은 styles.css와 공유되는 이름이라 그대로 유지하고 값만 딥그린 계열로 교체한다.
     client.css는 /app/* 페이지에서 styles.css 다음에 로드되므로, 여기서 재정의한 값이
     클라이언트 화면에만 적용되고 관리자 대시보드(styles.css만 쓰는 화면)는 영향받지 않는다. */
  --navy: #0e3f2f;            /* Deep Green — 헤더/Primary 버튼, 좀 더 채도 있는 딥그린으로 조정 */
  --navy-700: #185840;        /* 밝은 딥그린 — 그라데이션 하이라이트 */
  --navy-600: #2f7a5c;        /* Navy Green — 보더/보조 강조 */
  --navy-100: #e3ede7;        /* Soft Green 틴트 — 배지/필 배경 */
  --navy-50: #f2f7f4;         /* 아주 옅은 Soft Green — hover 배경 */
  --ivory-bg: #faf7ee;        /* Ivory — 페이지 배경(순백 대체), 따뜻한 톤으로 조정 */
  --soft-green-bg: #ecf3ee;   /* 섹션 대체 배경 */

  /* 골드 악센트 — 좀 더 따뜻하고 채도 있는 톤으로 조정("고급스러운" 느낌 보강) */
  --gold: #cb9f4d;
  --gold-light: #e8c87e;
  --gold-deep: #8a6423;
  --gold-soft: rgba(203, 159, 77, 0.16);
  --report-serif: var(--report-heading-font, "Noto Serif KR"), "Noto Sans KR", serif;
}

/* 리포트(.report-pages) 안에서만 위 파생 톤들을 --navy/--gold 기준 color-mix()로 다시 계산한다 —
   그래야 관리자 "메인 색상"/"포인트 색상"을 바꾸면 리포트 내부 배지·아이콘·테두리까지 같이 따라온다.
   :root에서 직접 color-mix()로 정의했더니 홈 화면 히어로 배경처럼 이미 color-mix()를 쓰는 다른
   요소와 이중으로 겹치면서 색이 보라/파랗게 틀어지는 문제가 있어, 영향 범위를 리포트로만 좁혔다. */
.report-pages {
  --navy-700: color-mix(in srgb, var(--navy) 82%, white);
  --navy-600: color-mix(in srgb, var(--navy) 55%, white);
  --navy-100: color-mix(in srgb, var(--navy) 12%, white);
  --navy-50: color-mix(in srgb, var(--navy) 5%, white);
  --gold-light: color-mix(in srgb, var(--gold) 75%, white);
  --gold-deep: color-mix(in srgb, var(--gold) 68%, black);
  --gold-soft: color-mix(in srgb, var(--gold) 16%, transparent);
}

body.client-body { background: var(--ivory-bg); overflow-x: hidden; }

/* ---------- Top Nav ---------- */
.client-nav {
  position: sticky; top: 0; z-index: 20;
  height: var(--nav-height, 88px); display: flex; align-items: center; justify-content: space-between;
  padding: 0 40px;
  background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy) 55%, #0a2e21 100%);
  color: #eaf2ee;
}
.client-nav .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; color: #fff; font-size: 18px; }
.client-nav .brand .mark {
  width: var(--logo-size, 46px); height: var(--logo-size, 46px); min-width: var(--logo-size, 46px); border-radius: 12px;
  background: linear-gradient(135deg, rgba(203,159,77,0.3), rgba(255,255,255,0.06));
  border: 1px solid rgba(203,159,77,0.35);
  display: flex; align-items: center; justify-content: center; color: var(--gold-light);
}
.client-nav .brand .mark svg { width: 56%; height: 56%; }
.client-nav .brand .ai-tag { font-size: 11.5px; font-weight: 700; color: #a9c3b6; letter-spacing: 0.5px; margin-top: 2px; }

.client-nav-links { display: flex; align-items: center; gap: 8px; }
.client-nav-links a {
  color: #c9dcd2; font-size: 14.5px; font-weight: 600; padding: 11px 22px; border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.client-nav-links a:hover { background: rgba(255,255,255,0.08); color: #fff; }
.client-nav-links a.active { background: var(--ivory-bg); color: var(--navy); }

.client-nav-right { display: flex; align-items: center; gap: 16px; font-size: 14px; color: #c9dcd2; position: relative; }
.client-nav-right .btn-ghost { color: #eaf2ee; border-color: rgba(255,255,255,0.22); background: transparent; }
.client-nav-right .btn-ghost:hover { background: rgba(255,255,255,0.08); }

/* 알림 아이콘 — 아직 알림 데이터/API가 없어 1차에서는 장식용으로만 둔다(카운트 없이 점만 표시) */
.client-nav-bell {
  width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center;
  color: #d7e6de; background: transparent; border: none; cursor: default; position: relative;
}
.client-nav-bell svg { width: 21px; height: 21px; }
.client-nav-bell::after {
  content: ""; position: absolute; top: 9px; right: 10px; width: 7px; height: 7px; border-radius: 999px;
  background: var(--gold-light); border: 1.5px solid var(--navy-700);
}

.client-nav-divider { width: 1px; height: 26px; background: rgba(255,255,255,0.16); }

.client-user-trigger {
  display: flex; align-items: center; gap: 9px; padding: 6px 12px 6px 6px; border-radius: 999px;
  cursor: pointer; background: transparent; border: none; color: #eaf2ee; font-size: 14px; font-family: inherit;
}
.client-user-trigger:hover { background: rgba(255,255,255,0.08); }
.client-user-trigger .avatar {
  width: 32px; height: 32px; border-radius: 999px; background: var(--gold); color: var(--navy);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: none;
}
.client-user-trigger svg { width: 15px; height: 15px; transition: transform 0.15s ease; }
.client-user-trigger.open svg { transform: rotate(180deg); }

.client-user-menu {
  position: absolute; top: 58px; right: 0; min-width: 170px;
  background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(10, 30, 22, 0.22);
  padding: 6px; display: none; flex-direction: column; z-index: 30;
}
.client-user-menu.open { display: flex; }
.client-user-menu button {
  text-align: left; background: none; border: none; padding: 10px 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--gray-700); cursor: pointer; font-family: inherit;
}
.client-user-menu button:hover { background: var(--navy-50); color: var(--navy); }

@media (max-width: 720px) {
  .client-nav { padding: 0 16px; }
  .client-nav .brand .ai-tag { display: none; }
  .client-nav-links a .full-label { display: none; }
}

/* ---------- Client Page Shell ----------
   푸터가 항상 화면 맨 아래에 붙도록(짧은 페이지에서도) 셸 전체를 flex column + min-height:100vh로 구성. */
.client-shell-root { display: flex; flex-direction: column; min-height: 100vh; }
.client-main { flex: 1; max-width: 1280px; margin: 0 auto; padding: 0 24px 80px; width: 100%; }
@media (max-width: 640px) { .client-main { padding: 0 16px 60px; } }

/* ---------- Hero ----------
   레퍼런스처럼 헤더 바로 아래 풀블리드(뷰포트 전체 폭)로 깔리는 좌(아이보리)→우(딥그린) 그라데이션 배경.
   .client-main의 max-width 제약을 벗어나야 해서 100vw 트릭으로 컨테이너 밖까지 배경을 확장한다. */
.client-hero {
  position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
  padding: 84px 24px 100px;
  /* color-mix로 살짝 투명하게 — 관리자가 올린 "로그인 후 첫 화면 배경 이미지"(body 배경)가 은은하게 비치도록 한다.
     이미지를 안 올렸으면 body 배경(아이보리)과 거의 같은 색이라 눈에 띄는 차이는 없다. */
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--ivory-bg) var(--hero-bg-opacity, 88%), transparent) 0%,
    color-mix(in srgb, var(--ivory-bg) var(--hero-bg-opacity, 88%), transparent) 42%,
    color-mix(in srgb, var(--soft-green-bg) var(--hero-bg-opacity, 88%), transparent) 58%,
    color-mix(in srgb, var(--navy-700) var(--hero-bg-opacity, 88%), transparent) 77%,
    color-mix(in srgb, var(--navy) var(--hero-bg-opacity, 88%), transparent) 100%
  );
}
.client-hero-inner {
  max-width: 1280px; margin: 0 auto; width: 100%; display: flex; align-items: center; gap: 40px;
}
.client-hero-text { flex: 1; min-width: 0; text-align: left; }
.client-hero-visual { flex: none; width: 440px; display: flex; align-items: center; justify-content: center; }
.client-hero-visual svg, .client-hero-visual img { width: 100%; height: auto; display: block; opacity: var(--hero-image-opacity, 1); }
.client-hero .eyebrow {
  display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 1.2px;
  color: var(--navy); background: #fff; padding: 7px 15px; border-radius: 999px;
  margin-bottom: 20px; text-transform: uppercase; box-shadow: var(--shadow-sm);
}
.client-hero h1 {
  font-size: 46px; font-weight: 800; color: var(--gray-900); line-height: 1.22; letter-spacing: -0.5px;
  margin: 0 0 18px;
}
.client-hero h1 .accent { color: var(--gold-deep); }
.client-hero p {
  font-size: 15px; color: var(--gray-700); line-height: 1.7; max-width: 480px; margin: 0 0 28px;
}
.client-hero-actions { display: flex; justify-content: flex-start; gap: 12px; flex-wrap: wrap; }
.client-hero-actions .btn { padding: 15px 28px; font-size: 14.5px; border-radius: 999px; }
@media (max-width: 900px) {
  .client-hero-inner { flex-direction: column; text-align: center; }
  .client-hero-text { text-align: center; }
  .client-hero p { margin: 0 auto 28px; }
  .client-hero-actions { justify-content: center; }
  .client-hero-visual { width: 320px; }
  .client-hero {
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--ivory-bg) var(--hero-bg-opacity, 88%), transparent) 0%,
      color-mix(in srgb, var(--soft-green-bg) var(--hero-bg-opacity, 88%), transparent) 55%,
      color-mix(in srgb, var(--navy-700) var(--hero-bg-opacity, 88%), transparent) 100%
    );
  }
}
@media (max-width: 640px) {
  .client-hero { padding: 48px 16px 36px; }
  .client-hero h1 { font-size: 28px; }
  .client-hero p { font-size: 13.5px; }
}

/* ---------- Flow / Timeline (하나의 프리미엄 카드로 정리) ----------
   레퍼런스처럼 카드 상단이 히어로 하단(딥그린 영역)에 살짝 겹치도록 음수 margin으로 끌어올린다. */
.client-flow { padding: 0 0 20px; margin-top: -84px; position: relative; z-index: 3; }
.flow-card { padding: 40px 32px 36px; }
.client-flow-title {
  display: table; margin: 0 auto 34px; font-size: 12.5px; font-weight: 800; color: var(--navy);
  letter-spacing: 0.3px; background: var(--navy-50); border: 1px solid var(--navy-100);
  padding: 8px 18px; border-radius: 999px;
}
.flow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; align-items: start; }
.flow-step { text-align: left; padding: 0 14px; position: relative; }
.flow-step:not(:last-child)::after {
  content: "→"; position: absolute; top: 12px; right: -6px; font-size: 18px; color: var(--gray-300); z-index: 2;
}
.flow-step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.flow-step .flow-icon {
  width: 48px; height: 48px; border-radius: 14px; background: var(--navy-50);
  color: var(--navy); display: flex; align-items: center; justify-content: center; flex: none;
  position: relative; z-index: 1;
}
.flow-step .flow-icon svg { width: 22px; height: 22px; }
.flow-step .flow-num { display: block; font-size: 12.5px; font-weight: 800; color: var(--gold-deep); margin-bottom: 2px; }
.flow-step h4 { font-size: 15px; font-weight: 700; color: var(--gray-900); margin: 0; }
.flow-step p { font-size: 12px; color: var(--gray-500); line-height: 1.6; margin: 0; }
@media (max-width: 720px) {
  .client-flow { margin-top: -50px; }
  .flow-card { padding: 28px 20px; }
  .flow-steps { grid-template-columns: 1fr; gap: 26px; }
  .flow-step::after { display: none; }
}

/* ---------- 홈 화면 히어로 배경 이미지가 드러나는 여백에, 실제 연동 기관 로고를 좌우로 흐르게 보여준다.
   로고를 찾은 기관이 하나도 없으면(관리자가 등록한 URL이 매핑 목록에 없으면) 섹션 자체를 숨긴다. ---------- */
.client-partners { display: none; padding: 8px 0 36px; text-align: center; }
.client-partners-label {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.3px; color: #eaf2ee;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35); margin-bottom: 16px;
}
.client-partners-viewport {
  overflow: hidden; max-width: 1000px; margin: 0 auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.client-partners-track { display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: max-content; animation: clientPartnersSlide 24s linear infinite; }
.client-partners-viewport:hover .client-partners-track { animation-play-state: paused; }
.client-partner-item {
  flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 60px; padding: 10px 18px; border-radius: 12px;
  background: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transition: transform 0.15s ease;
}
.client-partner-item:hover { transform: translateY(-2px); }
.client-partner-item img { height: 18px; max-width: 110px; width: auto; object-fit: contain; display: block; }
.client-partner-item .name { font-size: 10.5px; font-weight: 700; color: var(--gray-700); white-space: nowrap; }
.client-partner-item.text-only .name { font-size: 13px; color: #111827; }
.client-partner-item .name .suffix { color: #dc2626; margin-left: 1px; }
.client-partner-item .biz-badge-wrap { display: inline-flex; align-items: center; gap: 5px; }
.client-partner-item .biz-badge {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: #e3172e; color: #fff;
  font-size: 6.5px; font-weight: 800; line-height: 1.15; letter-spacing: 0.2px; font-style: normal;
}
@keyframes clientPartnersSlide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .client-partners-track { animation: none; } }
@media (max-width: 720px) { .client-partners { display: none !important; } }

/* ---------- Gold Button (Secondary/Important CTA) ---------- */
.btn-gold { background: linear-gradient(135deg, var(--gold-light), var(--gold)); color: #4a3510; }
.btn-gold:hover { opacity: 0.92; }
.btn-outline-gold { background: transparent; color: var(--gold-deep); border: 1.5px solid var(--gold); }
.btn-outline-gold:hover { background: var(--gold-soft); }
/* 아이보리 바탕 위의 두 번째 CTA용 — 골드 테두리의 은은한 크림 필 */
.btn-cream { background: #fff; color: var(--gold-deep); border: 1.5px solid var(--gold); }
.btn-cream:hover { background: var(--gold-soft); }

/* ---------- Outline / Text 버튼, 입력 컴포넌트, 체크박스/라디오/토글 (03_card_reference 공통 컴포넌트) ----------
   /app/* 클라이언트 화면에만 적용 — body.client-body로 스코프해서 관리자 화면 폼에는 영향 없음. */
.btn-outline-green { background: #fff; color: var(--navy); border: 1.5px solid var(--navy-600); }
.btn-outline-green:hover { background: var(--navy-50); }
.btn-text {
  display: inline-flex; align-items: center; gap: 4px; background: none; border: none; padding: 0;
  color: var(--navy); font-size: 13.5px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.btn-text:hover { color: var(--gold-deep); }

body.client-body input, body.client-body select, body.client-body textarea {
  height: 46px; border-radius: 10px; border-color: var(--gray-200); font-size: 14px;
}
body.client-body textarea { height: auto; padding: 12px 14px; }
body.client-body input:focus, body.client-body select:focus, body.client-body textarea:focus {
  border-color: var(--navy-600); box-shadow: 0 0 0 3px var(--navy-100);
}

body.client-body input[type="checkbox"] {
  appearance: none; width: 20px; height: 20px; min-width: 20px; border-radius: 6px;
  border: 1.5px solid var(--gray-300); background: #fff; position: relative; cursor: pointer;
}
body.client-body input[type="checkbox"]:checked { background: var(--navy); border-color: var(--navy); }
body.client-body input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
body.client-body input[type="radio"] {
  appearance: none; width: 20px; height: 20px; min-width: 20px; border-radius: 999px;
  border: 1.5px solid var(--gray-300); background: #fff; position: relative; cursor: pointer;
}
body.client-body input[type="radio"]:checked { border-color: var(--navy); }
body.client-body input[type="radio"]:checked::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 10px; height: 10px; border-radius: 999px; background: var(--navy);
}

.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; }
.toggle-switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggle-switch .track { position: absolute; inset: 0; background: var(--gray-300); border-radius: 999px; transition: background 0.15s ease; pointer-events: none; }
.toggle-switch .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px;
  background: #fff; transition: transform 0.15s ease; box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.toggle-switch input:checked + .track { background: var(--navy); }
.toggle-switch input:checked + .track::after { transform: translateX(20px); }

/* ---------- Premium Card ---------- */
.premium-card {
  background: var(--white); border: 1px solid var(--gray-100); border-radius: 16px;
  box-shadow: 0 2px 6px rgba(15,15,40,0.05); padding: 26px;
}

/* ---------- 아이콘 아바타 / 케밥 드롭다운 (기업 카드 등에서 공용) ---------- */
.icon-avatar {
  width: 40px; height: 40px; min-width: 40px; border-radius: 11px; background: var(--navy-50); color: var(--navy);
  display: flex; align-items: center; justify-content: center;
}
.icon-avatar svg { width: 20px; height: 20px; }

.kebab-btn {
  width: 32px; height: 32px; min-width: 32px; border-radius: 8px; border: 1px solid var(--gray-200);
  background: #fff; color: var(--gray-500); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.kebab-btn:hover { background: var(--gray-50); color: var(--navy); }
.kebab-btn svg { width: 16px; height: 16px; }

.dropdown-menu {
  position: absolute; top: calc(100% + 6px); right: 0; min-width: 140px;
  background: #fff; border-radius: 12px; box-shadow: 0 12px 32px rgba(10, 30, 22, 0.16);
  border: 1px solid var(--gray-100); padding: 6px; display: none; flex-direction: column; z-index: 30;
}
.dropdown-menu.open { display: flex; }
.dropdown-menu button {
  text-align: left; background: none; border: none; padding: 9px 12px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--gray-700); cursor: pointer; font-family: inherit;
}
.dropdown-menu button:hover { background: var(--navy-50); color: var(--navy); }
.dropdown-menu button.danger:hover { background: var(--danger-bg); color: var(--danger); }
.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width: 720px) { .choice-grid { grid-template-columns: 1fr; } }
.choice-card {
  border: 1.5px solid var(--gray-100); border-radius: 16px; padding: 26px 22px; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
}
.choice-card:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(18,60,47,0.12); }
.choice-card .choice-icon {
  width: 42px; height: 42px; border-radius: 11px; background: var(--navy-50); color: var(--navy);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.choice-card .choice-icon svg { width: 21px; height: 21px; }
.choice-card h4 { font-size: 14.5px; font-weight: 700; color: var(--gray-900); margin-bottom: 6px; }
.choice-card p { font-size: 12px; color: var(--gray-500); line-height: 1.6; margin: 0; }

/* ---------- Money input ---------- */
.money-field input { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.money-helper {
  font-size: 12px; color: var(--gray-500); font-weight: 600; text-align: right;
  margin-top: 6px; min-height: 16px;
}

/* ---------- Date input (년/월/일 분리) ---------- */
.date-input-row { display: flex; align-items: center; gap: 6px; }
.date-seg {
  text-align: center; font-variant-numeric: tabular-nums; font-weight: 700;
  padding: 0 6px;
}
.date-seg-y { width: 74px; }
.date-seg-m, .date-seg-d { width: 48px; }
.date-sep { font-size: 12.5px; color: var(--gray-500); flex: none; }
.date-cal-btn {
  width: 36px; height: 36px; border-radius: var(--radius-sm); border: 1px solid var(--gray-200);
  background: var(--white); color: var(--gray-500); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex: none; margin-left: 2px;
}
.date-cal-btn:hover { background: var(--gray-50); color: var(--navy); }
.date-native-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.date-field { position: relative; }
.date-error { font-size: 11px; color: var(--danger); margin-top: 6px; min-height: 14px; }

/* ---------- Loan rows ---------- */
.loan-row {
  border: 1px solid var(--gray-100); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
  background: var(--gray-50);
}
.loan-row-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 640px) { .loan-row-grid { grid-template-columns: 1fr; } }
.loan-row-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* ---------- Region selector ---------- */
.region-row { display: flex; gap: 10px; }
.region-row select { flex: 1; }

/* ---------- Notice ---------- */
.est-notice { font-size: 11px; color: var(--gray-500); line-height: 1.6; padding-top: 12px; margin-top: 16px; border-top: 1px dashed var(--gray-200); }

/* ============================================================
   자금 플러스+ 분석 리포트 (analysis.html / report.html 공용)
   딥네이비 + 골드 악센트의 "프라이빗 컨설팅" 톤. 화면과 인쇄(PDF) 겸용.
   ============================================================ */

/* ---------- 리포트 커버: 고정 배경 이미지(디자인) + 실제 데이터(HTML) ----------
   배경 이미지(/images/report-cover-bg.png, 1536x1024, 3:2 비율)는 문구/라벨/버튼 모양이
   전부 포함된 고정 디자인 에셋이다. 회사마다 달라지는 값만 이미지 비율에 고정된
   컨테이너 안에서 %(=이미지 좌표 기준) 위치로 얹는다 — 화면 크기가 달라져도
   배경-데이터 관계가 유지된다. */
.report-cover {
  position: relative; overflow: hidden;
  aspect-ratio: 1536 / 1024; width: 100%;
  border-radius: 24px;
  margin: 32px 0 28px;
  color: #fff;
  background: var(--navy); /* 이미지 로드 전 깜빡임 방지용 폴백 색 */
}
.rc-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }

/* 상단 버튼: 배경에 이미 그려진 버튼 모양 위에 얹는 투명 클릭 영역 (라벨 텍스트는 이미지 것을 그대로 사용) */
.rc-btn {
  position: absolute; z-index: 2; background: transparent; border: none; cursor: pointer;
  color: transparent; font-size: 1px; /* 스크린리더는 aria-label로 안내 */
}
.rc-btn-download { left: 70.9%; top: 3.3%; width: 13.1%; height: 5.4%; }
.rc-btn-reanalyze { left: 85.2%; top: 2.8%; width: 12.6%; height: 6.4%; }

/* 기업정보 카드 안의 빈 칸(회사명/사업자번호/대표자) — 이미지 아이콘·박스는 그대로, 텍스트만 실제 데이터 */
.rc-company-info {
  position: absolute; z-index: 2; left: 13.7%; top: 47.5%; width: 31.5%; height: 10.5%;
  display: flex; flex-direction: column; justify-content: center; gap: 5px; overflow: hidden;
}
.rc-company-name {
  font-weight: 800; color: #fff; line-height: 1.25;
  font-size: clamp(12px, 1.55vw, 19px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rc-company-meta { font-size: clamp(9px, 0.85vw, 11.5px); color: rgba(255,255,255,0.6); }

/* 설립일 / 보고서 생성일 / 상시근로자 값 — 라벨·아이콘은 배경 이미지, 값은 그 바로 아래 작은 칩으로 표시 */
.rc-meta-values {
  position: absolute; z-index: 2; left: 2.5%; top: 71.5%; width: 45.5%; height: 4.5%;
  display: flex; align-items: center;
}
.rc-meta-col {
  flex: 1; text-align: center; font-size: clamp(9px, 0.8vw, 11px); font-weight: 700; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px;
}


/* ============================================================
   리포트 새 디자인 — A4 세로형 컨설팅 리포트 구성 (reportV2.js 전용)
   대각선/클리핑 등 화려한 효과를 걷어내고, 얇은 테두리 카드 + 넓은 여백 위주의
   단순한 레이아웃만 쓴다 — 인쇄(PDF 저장)에서 안전하게 재현되는 것을 최우선으로 한다.
   화면에서는 세로로 이어서 보여주고, 인쇄/PDF 저장 시 페이지마다 물리적으로 나뉜다.
   ============================================================ */
.report-pages { display: flex; flex-direction: column; align-items: center; gap: 28px; margin: 28px 0; }

/* aspect-ratio로 A4 가로 비율의 "기본" 높이를 잡되, overflow는 기본값(visible)으로 둔다 — 컨테이너 쿼리
   단위(cqw)는 인쇄(페이지 나누기) 엔진에서 안정적으로 계산되지 않는 경우가 있어 쓰지 않는다.
   block 레벨 박스는 height:auto 상태에서 내용이 aspect-ratio가 만든 높이보다 길어지면 overflow:hidden이
   없는 한 자연스럽게 더 길어진다 — 그래서 추천 자금이 많은 회사도 텍스트가 잘리지 않는다.
   표지(.rpage-cover)만 내용이 고정돼 있어 예외적으로 aspect-ratio를 유지하며 넘치는 부분만 가린다. */
.rpage {
  position: relative; width: min(100%, 1080px); aspect-ratio: 297 / 210; box-sizing: border-box;
  background: var(--ivory-bg); border-radius: 10px; box-shadow: 0 10px 28px rgba(10,30,22,0.08);
  border: 3px solid var(--navy);
  padding: 5.4% 5.6%; display: flex; flex-direction: column;
  font-size: calc(16.5px * var(--report-font-scale, 1));
  font-family: var(--report-body-font, inherit);
}
.rpage-cover { overflow: hidden; }
.rpage-dark { background: linear-gradient(160deg, var(--navy-700) 0%, var(--navy) 55%, color-mix(in srgb, var(--navy) 55%, black) 100%); color: #eaf2ee; }

.rpage-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.rpage-header-left { display: flex; gap: 14px; align-items: flex-start; }
.rpage-num-badge {
  flex: none; width: 46px; height: 46px; background: var(--navy); color: var(--gold-light);
  display: flex; align-items: center; justify-content: center; font-family: var(--report-serif);
  font-size: 1.3em; font-weight: 800; border-radius: 4px;
}
.rpage-kicker { font-size: 0.7em; font-weight: 700; letter-spacing: 1.5px; color: var(--gray-500); text-transform: uppercase; margin-bottom: 4px; }
.rpage-title { font-size: 1.7em; font-weight: 800; color: var(--gray-900); margin: 0 0 4px; line-height: 1.25; }
.rpage-sub { font-size: 0.8em; color: var(--gray-500); margin: 0; }
.rpage-brandmark { text-align: right; font-size: 0.72em; font-weight: 800; color: var(--gray-900); white-space: nowrap; }
.rpage-brandmark .sub { display: block; font-size: 0.68em; font-weight: 700; letter-spacing: 1px; color: var(--gold-deep); margin-top: 2px; }
.rpage-divider { border: none; border-top: 1px solid var(--gray-100); margin: 0 0 20px; }
.rpage-body { flex: 1; min-height: 0; }
.rpage-footer {
  display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 10px;
  border-top: 1px solid var(--gray-100); font-size: 0.6em; color: var(--gray-300); font-weight: 700; letter-spacing: 0.2px;
}

/* 굵은 라벨 + 오른쪽으로 이어지는 얇은 선 — "핵심 결론", "진단 영역" 같은 섹션 소제목 */
.rpage-section-label { display: flex; align-items: center; gap: 10px; font-size: 0.8em; font-weight: 800; color: var(--gray-900); margin: 16px 0 12px; }
.rpage-section-label::after { content: ""; flex: 1; height: 1px; background: var(--gray-100); }
.rpage-section-label:first-child { margin-top: 0; }

.rpage-lede { font-size: 1.3em; font-weight: 800; color: var(--gray-900); line-height: 1.55; margin: 0 0 4px; }
.rpage-lede .accent { color: var(--gold-deep); }
.rpage-empty-note { font-size: 0.88em; color: var(--gray-500); line-height: 1.65; }

/* 2x2 통계 카드(얇은 테두리, 그림자 없음) */
.stat-grid-2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 6px; }
.stat-card { border: 1px solid var(--gray-100); border-radius: 8px; padding: 16px 18px; background: #fff; }
.stat-card label { display: block; font-size: 0.72em; font-weight: 700; color: var(--gold-deep); margin-bottom: 7px; letter-spacing: 0.2px; }
.stat-card .v { font-size: 1.15em; font-weight: 800; color: var(--gray-900); line-height: 1.3; }
.stat-card .note { font-size: 0.76em; color: var(--gray-500); margin-top: 5px; line-height: 1.55; }

/* 세로로 쌓는 불릿 박스 — 강점/확인필요/제약요인 등 */
.bullet-box { border: 1px solid var(--gray-100); border-radius: 8px; padding: 16px 18px; margin-bottom: 12px; background: #fff; }
.bullet-box h4 { font-size: 1em; font-weight: 800; margin: 0 0 8px; color: var(--gray-900); }
.bullet-box.warn h4 { color: var(--gold-deep); }
.bullet-box ul { margin: 0; padding-left: 16px; }
.bullet-box li { font-size: 0.86em; color: var(--gray-700); line-height: 1.85; }
.bullet-box .rpage-empty-note { padding-left: 2px; }

/* 번호 매긴 목록 행 — 우선 검토 자금 목록 */
.numbered-row { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--gray-100); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; background: #fff; }
.numbered-row .num {
  flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--gold-deep); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.78em;
}
.numbered-row .content { flex: 1; min-width: 0; }
.numbered-row .title { font-size: 0.95em; font-weight: 800; color: var(--gray-900); }
.numbered-row .desc { font-size: 0.78em; color: var(--gray-500); margin-top: 3px; line-height: 1.5; }
.numbered-row .status { flex: none; font-size: 0.78em; font-weight: 700; color: var(--gold-deep); white-space: nowrap; align-self: center; }

/* 2단 체크리스트 */
.check-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.check-list-title { font-size: 0.8em; font-weight: 800; color: var(--gray-900); margin-bottom: 8px; }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list li { font-size: 0.78em; color: var(--gray-700); line-height: 1.9; padding-left: 16px; position: relative; }
.check-list li::before { content: "☐"; position: absolute; left: 0; color: var(--gold-deep); }

/* NEXT ACTION 배너 */
.next-action-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--gold-deep); color: #fff; border-radius: 8px; padding: 13px 18px; margin-top: 16px;
}
.next-action-banner .label { flex: none; font-size: 0.68em; font-weight: 800; letter-spacing: 1px; background: rgba(255,255,255,0.2); padding: 4px 10px; border-radius: 4px; }
.next-action-banner p { margin: 0; font-size: 0.8em; line-height: 1.5; }

/* ---------- Page 1 · 표지 — 사진과 그라데이션을 하나의 background-image로 합쳐서 그린다(position:absolute
   레이어를 여러 겹 쌓지 않는다). 인쇄(PDF 저장)에서 가장 안정적으로 재현되는 방식이다. ---------- */
.rpage-cover {
  padding: 0; overflow: hidden; color: var(--gray-900);
  background-color: var(--ivory-bg); background-size: cover; background-position: center; background-repeat: no-repeat;
}
.rpage-cover-actions { position: absolute; z-index: 2; top: 5%; right: 5%; display: flex; gap: 10px; flex-wrap: wrap; }
.rpage-cover-actions .btn { padding: 9px 16px; font-size: 12px; border-radius: 999px; }
.rpage-cover-content { position: relative; padding: 5.3% 8% 0; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
/* width: fit-content이라 로고 아이콘부터 "JAGEUM PLUS" 문구 끝까지의 실제 폭에 맞춰
   밑줄이 자동으로 늘어나거나 줄어든다 — 고정폭 선을 따로 그리지 않아도 항상 정확히 맞는다. */
.rpage-cover-brand {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px; width: fit-content;
  padding-bottom: 12px; border-bottom: 2px solid var(--gold);
}
.rpage-cover-brand .mark { width: 38px; height: 38px; color: var(--navy); }
.rpage-cover-brand .mark svg { width: 100%; height: 100%; }
.rpage-cover-brand .name { font-size: calc(24px * var(--report-font-scale, 1)); font-weight: 800; color: var(--navy); font-family: var(--report-body-font, inherit); }
.rpage-cover-brand .tag { font-size: calc(11.5px * var(--report-font-scale, 1)); font-weight: 700; letter-spacing: 1.5px; color: var(--gold-deep); margin-top: 2px; }
.rpage-cover-eyebrow { font-size: calc(14px * var(--report-font-scale, 1)); font-weight: 700; letter-spacing: 2px; color: var(--gray-500); margin-bottom: 14px; }
.rpage-cover-headline { font-family: var(--report-serif); font-size: calc(48px * var(--report-font-scale, 1)); font-weight: 800; line-height: 1.25; color: var(--navy); margin: 0 0 16px; }
.rpage-cover-headline .accent { color: var(--gold-deep); }
.rpage-cover-desc { font-size: calc(16px * var(--report-font-scale, 1)); color: var(--gray-700); line-height: 1.75; margin: 0 0 22px; max-width: 480px; font-family: var(--report-body-font, inherit); }
.rpage-cover-info-rows { display: flex; flex-direction: row; flex-wrap: wrap; gap: 30px; margin-top: auto; padding-bottom: 24px; }
.rpage-cover-info-row { display: flex; align-items: center; gap: 13px; }
.rpage-cover-info-row .icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%; background: #fff;
  border: 1px solid var(--gray-100); display: flex; align-items: center; justify-content: center; color: var(--gold-deep);
  box-shadow: 0 3px 10px rgba(10,30,22,0.06);
}
.rpage-cover-info-row .icon svg { width: 19px; height: 19px; }
.rpage-cover-info-row label { display: block; font-size: calc(12px * var(--report-font-scale, 1)); color: var(--gray-500); margin-bottom: 3px; }
.rpage-cover-info-row b { font-size: calc(17px * var(--report-font-scale, 1)); font-weight: 700; color: var(--gray-900); font-family: var(--report-body-font, inherit); }
/* 배경 사진 밝기가 자리마다 달라서(하늘/유리창 등) 박스 없이도 늘 읽히도록,
   불투명한 배경 대신 아이보리색 halo(text-shadow)를 글자 둘레에 둘러서 대비를 만든다. */
.rpage-cover-strip {
  position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 16px 8% 14px; margin-top: auto;
}
.rpage-cover-strip-item { text-align: center; padding: 0 8px; }
.rpage-cover-strip-item .icon {
  color: var(--gold-deep); margin-bottom: 10px;
  filter: drop-shadow(0 0 3px var(--ivory-bg)) drop-shadow(0 0 6px var(--ivory-bg)) drop-shadow(0 0 10px var(--ivory-bg));
}
.rpage-cover-strip-item .icon svg { width: 23px; height: 23px; }
.rpage-cover-strip-item b {
  display: block; font-size: calc(15px * var(--report-font-scale, 1)); font-weight: 800; color: var(--gray-900); margin-bottom: 5px;
  text-shadow: 0 0 4px var(--ivory-bg), 0 0 8px var(--ivory-bg), 0 0 14px var(--ivory-bg);
  font-family: var(--report-body-font, inherit);
}
.rpage-cover-strip-item span {
  display: block; font-size: calc(12px * var(--report-font-scale, 1)); color: var(--gray-700); line-height: 1.55; font-weight: 600;
  text-shadow: 0 0 4px var(--ivory-bg), 0 0 8px var(--ivory-bg), 0 0 14px var(--ivory-bg);
  font-family: var(--report-body-font, inherit);
}
.rpage-cover-tagline {
  position: relative; z-index: 1; text-align: center; font-size: calc(14px * var(--report-font-scale, 1)); font-weight: 600; color: var(--gray-700); padding: 0 8% 2.2%;
  text-shadow: 0 0 4px var(--ivory-bg), 0 0 8px var(--ivory-bg), 0 0 14px var(--ivory-bg);
  font-family: var(--report-body-font, inherit);
}

/* ---------- 상세 자금 분석 페이지(추천 자금 수만큼 자동 생성) ---------- */
.detail-page-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.detail-page-num { font-family: var(--report-serif); font-size: 1.8em; font-weight: 800; color: var(--gold-deep); }
.detail-page-title { font-size: 1.1em; font-weight: 800; color: var(--gray-900); }
.detail-page-status { font-size: 0.8em; font-weight: 700; padding: 4px 11px; border-radius: 999px; }

@media (max-width: 640px) {
  .rpage { font-size: 13.5px; padding: 7% 7.5%; }
  .rpage-title { font-size: 1.5em; }
  .rpage-cover-headline { font-size: 30px; }
  .stat-grid-2, .check-grid-2 { grid-template-columns: 1fr; }
  .rpage-cover-strip { grid-template-columns: 1fr 1fr; row-gap: 16px; }
  .rpage-cover-strip-item:nth-child(3) { border-left: none; }
}

@media print {
  /* "297mm 210mm" 같은 커스텀 mm 크기는 일부 프린터 드라이버(Microsoft Print to PDF 등)가
     지원 목록에 없다는 이유로 조용히 세로 A4로 되돌리면서, 가로로 만든 내용이 90도 돌아간
     채로 찍히는 문제가 있었다. "A4 landscape"처럼 표준 용지명 + 방향 키워드를 쓰면
     드라이버가 확실히 지원하는 값이라 방향이 무시되지 않는다. */
  @page { size: A4 landscape; margin: 0; }
  /* 화면용 .report-pages{margin:28px 0}이 인쇄에서도 그대로 남아있어 표지 전체가 28px
     아래로 밀리고, 그만큼(표지 맨 아래 태그라인)이 다음 페이지로 넘어가고 있었다. */
  .report-pages { gap: 0; margin: 0; }
  /* min-height(고정 height 아님) + overflow 기본값 — 내용이 한 페이지보다 길어지는 경우
     텍스트를 잘라내지 않고 다음 물리적 페이지로 자연스럽게 이어지게 한다.
     단, overflow:hidden이 있어도 flex 자식이 210mm를 살짝 넘기면 크롬 인쇄 엔진이 마지막
     줄(꼬리말 등)만 다음 페이지로 넘겨버리는 문제가 있어, 화면용보다 글자 크기/여백을
     조금 줄여 210mm 안에 실제로 들어가도록 여유를 확보한다. */
  .rpage {
    width: 297mm; min-height: 210mm; aspect-ratio: unset; box-sizing: border-box;
    padding: 9mm 16mm; border-radius: 0; box-shadow: none; page-break-before: always; break-before: page;
    font-size: calc(14px * var(--report-font-scale, 1));
  }
  .rpage:first-child { page-break-before: auto; break-before: auto; }
  .rpage-header { margin-bottom: 10px; }
  .rpage-divider { margin-bottom: 12px; }
  .rpage-footer { margin-top: 10px; padding-top: 7px; }
  .rpage-section-label { margin: 10px 0 8px; }
  .bullet-box { padding: 11px 15px; margin-bottom: 8px; }
  .bullet-box li { line-height: 1.55; }
  .stat-card { padding: 12px 14px; }
  .numbered-row { padding: 9px 13px; margin-bottom: 6px; }
  .next-action-banner { margin-top: 8px; padding: 9px 15px; }
  /* 표지는 내용이 고정돼 있어 안전하게 높이를 확정해도 된다(사진 레이어가 페이지를 꽉 채우도록). */
  .rpage-cover { padding: 0; height: 210mm; overflow: hidden; }
  /* .rpage-cover-content는 .rpage-cover-strip/tagline과 같은 flex column 안의 형제 항목인데,
     flex item은 기본적으로 자기 내용물의 최소 높이(min-height:auto) 밑으로 줄어들지 않는다 —
     그래서 셋을 합친 실제 필요 높이가 210mm를 넘으면 마지막 항목(태그라인)만 다음 페이지로
     밀려났다. min-height:0으로 그 제약을 풀어야 flex가 210mm 안에 셋을 제대로 나눠 담는다. */
  .rpage-cover-content { padding: 5.3% 7% 0; min-height: 0; }
  .rpage-cover-brand { margin-bottom: 16px; }
  .rpage-cover-eyebrow { margin-bottom: 10px; }
  .rpage-cover-headline { font-size: calc(43px * var(--report-font-scale, 1)); margin-bottom: 12px; }
  .rpage-cover-desc { margin-bottom: 16px; }
  .rpage-cover-info-rows { padding-bottom: 16px; }
  .rpage-cover-strip { padding: 14px 8% 8px; }
  .rpage-cover-tagline { padding: 6px 8% 1.5%; }
  .stat-grid-2, .check-grid-2, .bullet-box, .numbered-row { page-break-inside: avoid; }
}

/* 커버 아래 핵심 지표 스트립 — 골드 숫자, 네이비 카드 (표지 이미지와 별도의 독립 카드) */
.report-stat-strip {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--navy); border-radius: 18px; color: #fff;
  margin: 0 0 20px; padding: 24px 26px;
}
@media (max-width: 720px) { .report-stat-strip { grid-template-columns: 1fr 1fr; row-gap: 22px; } }
.report-stat { padding: 0 18px; border-left: 1px solid rgba(255,255,255,0.12); }
.report-stat:first-child { border-left: none; padding-left: 0; }
.report-stat label { display: block; font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600; letter-spacing: 0.3px; margin-bottom: 8px; }
.report-stat .value { font-family: var(--report-serif); font-size: 22px; font-weight: 700; color: var(--gold); line-height: 1.2; }

.est-notice-report { font-size: 11.5px; color: var(--gray-500); line-height: 1.7; margin: 0 0 26px; padding-left: 2px; }

/* AI 분석 텍스트 내 핵심 강조(** 마크다운 → .hl) */
.hl { color: var(--gold-deep); font-weight: 800; }
.report-cover .hl, .opinion-box .hl { color: var(--gold); }

/* ---------- 매출·대출·재무 현황 분석 ---------- */
.revenue-chart-wrap { margin-bottom: 16px; }
.revenue-chart-wrap svg { width: 100%; height: auto; display: block; }

.finance-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 640px) { .finance-tiles { grid-template-columns: 1fr 1fr; } }
.finance-tile { background: var(--white); border: 1px solid var(--gray-100); border-radius: 12px; padding: 14px 16px; }
.finance-tile label { display: block; font-size: 11px; color: var(--gray-500); font-weight: 600; margin-bottom: 6px; }
.finance-tile .v { font-family: var(--report-serif); font-size: 17px; font-weight: 700; color: var(--navy); }

.finance-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
@media (max-width: 780px) { .finance-grid-2 { grid-template-columns: 1fr; } }

.finance-loan-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.finance-loan-table th { text-align: left; padding: 8px 6px; color: var(--gray-500); font-weight: 600; font-size: 11px; border-bottom: 1px solid var(--gray-100); }
.finance-loan-table td { padding: 9px 6px; border-bottom: 1px solid var(--gray-50); color: var(--gray-900); }
.finance-loan-table td.num { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.finance-loan-table td.empty { color: var(--gray-500); text-align: center; padding: 16px 0; }
.finance-loan-table tfoot td { border-top: 1.5px solid var(--gray-200); border-bottom: none; font-weight: 800; color: var(--navy); padding-top: 10px; }

.loan-ratio { margin-top: 16px; }
.loan-ratio-head { display: flex; justify-content: space-between; font-size: 12px; color: var(--gray-700); margin-bottom: 6px; }
.loan-ratio-head b { color: var(--navy); font-size: 13px; }
.loan-ratio-bar { height: 8px; background: var(--gray-100); border-radius: 999px; overflow: hidden; }
.loan-ratio-fill { height: 100%; background: linear-gradient(90deg, var(--gold), var(--navy)); border-radius: 999px; }

.finance-health-card { }
.finance-health-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.finance-health-score { display: flex; align-items: baseline; gap: 6px; margin-bottom: 10px; }
.finance-health-score .star { color: var(--gold); font-size: 22px; }
.finance-health-score .num { font-family: var(--report-serif); font-size: 34px; font-weight: 800; color: var(--navy); }
.finance-health-score .unit { font-size: 14px; color: var(--gray-500); font-weight: 600; }
.finance-health-note { font-size: 12.5px; color: var(--gray-700); line-height: 1.6; margin: 0 0 14px; }

/* 재무건전성 원형 게이지 (리포트 v2 전용, reportV2.js) */
.finance-health-body { display: flex; align-items: center; gap: 22px; margin-bottom: 6px; }
.health-gauge { position: relative; width: 104px; height: 104px; flex: none; }
.health-gauge svg { width: 100%; height: 100%; display: block; }
.health-gauge-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.health-gauge-label b { font-family: var(--report-serif); font-size: 28px; font-weight: 800; color: var(--navy); line-height: 1; }
.health-gauge-label span { font-size: 11px; color: var(--gray-500); font-weight: 600; margin-top: 3px; }
.finance-health-text { flex: 1; min-width: 0; }
.finance-health-text .finance-health-note { margin-bottom: 0; }
@media (max-width: 480px) { .finance-health-body { flex-direction: column; align-items: flex-start; } }
.finance-mini-rows { display: flex; flex-wrap: wrap; gap: 10px; }
.finance-mini-rows > div {
  flex: 1; min-width: 140px; display: flex; justify-content: space-between; align-items: center;
  background: var(--gray-50); border-radius: 10px; padding: 10px 14px; font-size: 12px; color: var(--gray-500);
}
.finance-mini-rows b { color: var(--navy); font-size: 13px; }

/* ---------- 섹션 공용 ---------- */
.report-section-title {
  font-family: var(--report-serif); font-size: 16px; font-weight: 700; color: var(--navy);
  display: flex; align-items: center; gap: 10px; margin: 0 0 16px;
}
.report-section-title::before { content: ""; width: 4px; height: 16px; background: var(--gold); border-radius: 2px; display: inline-block; }

.list-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.list-plain li { font-size: 14.5px; color: var(--gray-900); line-height: 1.65; padding-left: 22px; position: relative; }
.list-plain.strengths li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 800; }
.list-plain.concerns li::before { content: "△"; position: absolute; left: 0; color: var(--warning); font-weight: 800; }

/* ---------- 추천 자금 카드 ---------- */
.rec-card {
  position: relative; background: var(--white); border: 1px solid var(--gray-100); border-radius: 4px 14px 14px 4px;
  border-left: 4px solid var(--gray-200); padding: 24px 26px; margin-bottom: 16px;
}
.rec-card.top { border-left-color: var(--gold); }
.rec-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.rec-card-head .rank {
  font-family: var(--report-serif); font-size: 28px; font-weight: 700; color: var(--gray-100);
  position: absolute; top: 16px; right: 22px; line-height: 1; z-index: 0;
}
.rec-card-head h4 { font-size: 17px; font-weight: 800; color: var(--gray-900); margin: 2px 0 3px; position: relative; }
.rec-card-head .fund { font-size: 13.5px; color: var(--gray-500); position: relative; }
.rec-sub { font-size: 11.5px; font-weight: 700; color: var(--gold-deep); letter-spacing: 0.3px; margin: 16px 0 8px; text-transform: uppercase; }
.rec-card ul { margin: 0; padding-left: 20px; font-size: 13.5px; color: var(--gray-700); line-height: 1.75; }
.rec-card ul li { margin-bottom: 4px; }

/* 예상 금액 배너 — 남색→골드 그라데이션, 카드 하단에서 크게 강조 */
.rec-amount-banner {
  position: relative; margin-top: 18px; border-radius: 14px; padding: 20px 24px;
  background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy) 55%, color-mix(in srgb, var(--navy) 55%, black) 100%);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 20px;
  overflow: hidden;
}
.rec-amount-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(115deg, rgba(198,161,91,0.08) 0 1px, transparent 1px 46px);
}
.rec-amount-banner .label { position: relative; font-size: 11.5px; color: rgba(255,255,255,0.6); line-height: 1.5; }
.rec-amount-banner .label b { display: block; font-size: 14.5px; font-weight: 800; color: #fff; margin-top: 2px; }
.rec-amount-banner .amount {
  position: relative; font-family: var(--report-serif); font-size: 26px; font-weight: 800; color: var(--gold);
  text-align: right; white-space: nowrap;
}
.rec-amount-banner .note { position: relative; width: 100%; font-size: 10.5px; color: rgba(255,255,255,0.45); text-align: right; }
@media (max-width: 560px) {
  .rec-amount-banner { flex-direction: column; align-items: flex-start; }
  .rec-amount-banner .amount { text-align: left; font-size: 22px; }
  .rec-amount-banner .note { text-align: left; }
}
.rec-card ul li { margin-bottom: 4px; }

/* ---------- 로드맵 ---------- */
.roadmap-list { display: flex; flex-direction: column; }
.roadmap-item { display: flex; gap: 16px; padding: 4px 0 24px; position: relative; }
.roadmap-item:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 1px; background: var(--gold-soft); }
.roadmap-num {
  width: 32px; height: 32px; border-radius: 999px; background: var(--navy); color: var(--gold);
  border: 1px solid var(--gold-deep);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12.5px; flex: none;
  font-family: var(--report-serif);
}
.roadmap-item h4 { font-size: 14.5px; font-weight: 700; color: var(--gray-900); margin-bottom: 5px; }
.roadmap-item p { font-size: 13.5px; color: var(--gray-500); margin: 0; line-height: 1.65; }

/* ---------- 컨설턴트 종합 의견 (풀 쿼트 스타일) ---------- */
.opinion-box {
  position: relative; background: var(--white); border: 1px solid var(--gray-100); border-left: 3px solid var(--gold);
  border-radius: 4px 14px 14px 4px; padding: 32px 30px 28px 44px;
  font-family: var(--report-serif); font-size: 15px; color: var(--gray-900); line-height: 1.9; white-space: pre-wrap;
}
.opinion-box::before {
  content: "“"; position: absolute; top: 6px; left: 12px; font-family: var(--report-serif);
  font-size: 46px; color: var(--gold); opacity: 0.55; line-height: 1;
}

/* ---------- 플로팅 요청 버튼(우측 하단 고정) ----------
   모든 클라이언트 화면(mountClientShell을 쓰는 모든 페이지)에 공통으로 뜬다. 스크롤과 무관하게
   position:fixed로 고정되고, 인쇄/PDF 저장 시에는 .no-print로 숨긴다. */
.client-fab-stack {
  position: fixed; right: 22px; bottom: 22px; z-index: 500;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.client-fab {
  width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18); text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.client-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,0.22); }
.client-fab-kakao { background: #FEE500; }
.client-fab-ai { background: var(--navy); border: 1.5px solid var(--gold); }
.client-fab-ai span { color: var(--gold); font-size: 13px; font-weight: 800; letter-spacing: 0.02em; }

@media (max-width: 640px) {
  .client-fab-stack { right: 14px; bottom: 14px; gap: 10px; }
  .client-fab { width: 48px; height: 48px; }
}

/* ---------- 인쇄 / PDF 저장 ----------
   원칙: 큰 블록 전체에 break-inside:avoid를 걸면 그 블록이 한 페이지보다 커질 때 잘려 보인다.
   그래서 "페이지보다 확실히 작은 단위"에만 break-inside:avoid를 걸고, 크고 장식적인 요소는
   인쇄에서 아예 생략해서 각 페이지가 자연스럽게 나뉘도록 한다. */
/* 인쇄 워터마크 — position:fixed로 두면 브라우저 인쇄(저장:PDF)가 페이지마다 반복해서 찍어준다.
   화면에서는 항상 숨김, @media print에서만 노출. */
.print-watermark { display: none; }
@media print {
  .print-watermark {
    display: block; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 260px; opacity: 0.18; z-index: 999; pointer-events: none;
  }
}

@media print {
  .client-nav, .client-footer, .no-print { display: none !important; }
  body.client-body { background: #fff; }
  .client-main { padding: 0; max-width: 100%; }

  /* 표지는 이미지 비율(3:2)로 높이가 고정돼 한 페이지보다 훨씬 작으므로 통째로 break-inside:avoid가 안전하다 */
  .report-cover { border-radius: 0; margin-top: 0; break-inside: avoid; page-break-inside: avoid; }
  .report-stat-strip, .report-stat { break-inside: avoid; page-break-inside: avoid; }

  .premium-card, .rec-card, .rec-amount-banner, .opinion-box, .finance-tile, .finance-health-card {
    box-shadow: none; break-inside: avoid; page-break-inside: avoid;
  }
  .roadmap-item { break-inside: avoid; page-break-inside: avoid; }

  /* 섹션 제목은 다음 카드와 분리되어 페이지 맨 아래 혼자 남지 않도록 */
  .report-section-title { break-after: avoid; page-break-after: avoid; }

  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- Empty state (premium) ---------- */
.premium-empty { text-align: center; padding: 70px 20px; }
.premium-empty .icon { width: 52px; height: 52px; border-radius: 14px; background: var(--navy-50); color: var(--navy); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.premium-empty h3 { font-size: 15.5px; font-weight: 700; color: var(--gray-900); margin-bottom: 8px; }
.premium-empty p { font-size: 12.5px; color: var(--gray-500); margin: 0 0 22px; }

/* ---------- Footer (04_footer_reference 기준: 딥그린 배경 + 골드 포인트) ---------- */
.client-footer {
  background: linear-gradient(120deg, var(--navy-700) 0%, var(--navy) 55%, #0a2e21 100%);
  color: #c9dcd2; padding: 56px 40px 0; margin-top: 60px;
}
.client-footer-inner {
  max-width: 1280px; margin: 0 auto; display: flex; flex-wrap: wrap;
  gap: 32px;
  padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
.cf-brand { flex: 1 1 280px; max-width: 340px; }
.cf-col { flex: 1 1 160px; }
.cf-institutions { flex: 1 1 220px; }
.cf-brand-row { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #fff; font-size: 15px; margin-bottom: 14px; }
.cf-brand-row .mark {
  width: 34px; height: 34px; min-width: 34px; border-radius: 9px;
  background: linear-gradient(135deg, rgba(203,159,77,0.3), rgba(255,255,255,0.06));
  border: 1px solid rgba(203,159,77,0.35);
  display: flex; align-items: center; justify-content: center; color: var(--gold-light);
}
.cf-brand-row .mark svg { width: 18px; height: 18px; }
.cf-brand-row .ai-tag { font-size: 10px; font-weight: 700; color: #a9c3b6; letter-spacing: 0.5px; margin-top: 2px; }
.cf-tagline { font-size: 12.5px; line-height: 1.7; color: #a9c3b6; max-width: 320px; margin: 0; }

.cf-col h5 { font-size: 12px; font-weight: 800; color: #fff; letter-spacing: 0.4px; margin: 0 0 16px; }
.cf-col { font-size: 12.5px; line-height: 2; }
.cf-col a { color: #c9dcd2; display: block; }
.cf-col a:hover { color: var(--gold-light); }
.cf-col b { color: #e8e9f5; font-weight: 700; }
.cf-note { color: #8fa89a; font-size: 11.5px; margin-top: 2px; }

.cf-institution-grid { display: flex; flex-direction: column; gap: 8px; }
.cf-institution-grid a {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px;
  padding: 8px 12px; font-weight: 600; font-size: 11.5px;
}
.cf-institution-grid a:hover { background: rgba(255,255,255,0.1); color: var(--gold-light); }
.cf-institution-grid svg { flex: none; opacity: 0.7; }

.client-footer-bottom {
  max-width: 1280px; margin: 0 auto; padding: 20px 0 28px;
  display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  font-size: 11.5px; color: #8fa89a;
}
.cf-company-info div { margin-bottom: 3px; }
.cf-copyright { white-space: nowrap; }

@media (max-width: 860px) {
  .client-footer { padding: 40px 20px 0; }
}
@media (max-width: 520px) {
  .client-footer-inner .cf-brand,
  .client-footer-inner .cf-col { flex-basis: 100%; }
}