/* ==========================================================================
   PROJECT-10 — PHASE-5D : 분양전환 잔금 시뮬레이션 (conversion.html) 전용 스타일
   Design Freeze v1.0(assets/css/style.css)의 색상/폰트/Radius/Shadow 변수를
   그대로 상속합니다. 새 클래스(cv- 접두사)만 정의합니다.
   ========================================================================== */

.cv-main{ max-width:1180px; margin:0 auto; padding:0 32px 40px; }

.cv-breadcrumb{ font-size:12.5px; color:var(--text-muted); padding:16px 0 8px; }
.cv-breadcrumb a{ color:var(--text-muted); text-decoration:none; }
.cv-breadcrumb .sep{ margin:0 6px; }
.cv-breadcrumb .current{ color:var(--text-headline); font-weight:600; }

.cv-page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:8px 0 20px; flex-wrap:wrap; }
.cv-page-title{ font-size:24px; font-weight:800; color:var(--text-headline); margin:0 0 6px; }
.cv-page-sub{ font-size:13px; color:var(--text-body); margin:0; }

.cv-consult-card{ background:var(--bg-cream); border-radius:var(--radius-lg); padding:16px 20px; max-width:400px; display:flex; flex-direction:column; gap:10px; }
.cv-consult-title{ font-size:13px; font-weight:700; color:var(--text-headline); margin:0; }
.cv-consult-sub{ font-size:11.5px; color:var(--text-body); margin:0; }
.cv-consult-btn{ border:1px solid var(--border); background:#fff; color:var(--text-headline); font-size:12.5px; font-weight:600; padding:10px; border-radius:999px; text-align:center; text-decoration:none; }
.cv-consult-btn:hover{ background:var(--bg-alt); }

/* 스텝 인디케이터 */
.cv-steps{ display:flex; align-items:center; background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 24px; margin-bottom:24px; }
.cv-step{ display:flex; align-items:center; gap:8px; flex:1; }
.cv-step-num{ width:26px; height:26px; border-radius:50%; background:var(--bg-alt); color:var(--text-muted); font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cv-step.is-active .cv-step-num{ background:var(--green); color:#fff; }
.cv-step-label{ font-size:12.5px; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.cv-step.is-active .cv-step-label{ color:var(--text-headline); }
.cv-step-line{ flex:1; height:1px; background:var(--border); margin:0 12px; }

.cv-row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
.cv-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; display:flex; flex-direction:column; }
.cv-card h3{ font-size:14.5px; font-weight:700; color:var(--text-headline); margin:0 0 16px; }

.cv-field{ margin-bottom:14px; }
.cv-field label{ display:block; font-size:12px; font-weight:600; color:var(--text-headline); margin-bottom:6px; }
.cv-field select, .cv-field input{
  width:100%; border:1px solid var(--border); border-radius:8px; padding:10px 12px;
  font-size:13px; font-family:inherit; color:var(--text-headline);
}
.cv-field-input{ position:relative; }
.cv-field-input input{ padding-right:40px; }
.cv-field-unit{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px; color:var(--text-muted); }
.cv-radio-row{ display:flex; gap:16px; }
.cv-radio-row label{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--text-body); }
.cv-radio-row input{ width:auto; accent-color:var(--green); }

.cv-next-btn{ border:none; background:var(--green); color:#fff; font-size:13.5px; font-weight:700; padding:11px; border-radius:999px; cursor:pointer; width:100%; margin-top:auto; }
.cv-next-btn:hover{ background:#365f52; }

/* 비용 계산 카드2 */
.cv-cost-summary{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:8px; margin-bottom:16px; text-align:center; }
.cv-cost-box{ background:var(--bg-alt); border-radius:var(--radius-md); padding:12px 8px; }
.cv-cost-box-label{ font-size:10.5px; color:var(--text-body); margin-bottom:4px; }
.cv-cost-box-value{ font-size:14px; font-weight:800; color:var(--text-headline); }
.cv-cost-box-unit{ font-size:10px; color:var(--text-muted); }
.cv-cost-box.is-result .cv-cost-box-value{ color:var(--green); }
.cv-op{ font-size:16px; color:var(--text-muted); font-weight:700; }

.cv-detail-table{ display:flex; flex-direction:column; gap:8px; }
.cv-detail-row{ display:flex; justify-content:space-between; font-size:12px; color:var(--text-body); }
.cv-detail-row strong{ color:var(--text-headline); font-weight:700; }
.cv-detail-row.is-total{ border-top:1px solid var(--border); padding-top:8px; margin-top:2px; }
.cv-detail-row.is-final strong{ color:var(--green); font-size:14px; }

/* 자금조달 게이지 */
.cv-gauge-wrap{ display:flex; flex-direction:column; align-items:center; margin-bottom:14px; }
.cv-gauge-canvas-wrap{ width:160px; height:160px; max-width:100%; position:relative; }
.cv-gauge-canvas-wrap canvas{ max-width:100%; }
.cv-gauge-center{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }
.cv-gauge-value{ font-size:19px; font-weight:800; color:var(--text-headline); }
.cv-gauge-label{ font-size:11px; color:var(--text-body); }
.cv-legend{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.cv-legend-row{ display:flex; align-items:center; justify-content:space-between; font-size:12px; }
.cv-legend-left{ display:flex; align-items:center; gap:6px; color:var(--text-body); }
.cv-legend-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.cv-legend-value{ font-weight:700; color:var(--text-headline); }
.cv-detail-btn{ border:1px solid var(--border); background:#fff; color:var(--text-headline); font-size:12.5px; font-weight:600; padding:10px; border-radius:999px; cursor:pointer; width:100%; margin-top:auto; }
.cv-detail-btn:hover{ background:var(--bg-alt); }

/* Row2: 대출 가능 금액 */
.cv-section-title{ font-size:15px; font-weight:700; color:var(--text-headline); margin:0 0 4px; }
.cv-section-sub{ font-size:12px; color:var(--text-muted); margin:0 0 14px; }
.cv-loan-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-body); padding:8px 0; border-bottom:1px solid var(--border); }
.cv-loan-row strong{ color:var(--text-headline); font-weight:700; }
.cv-dsr-bar{ height:5px; border-radius:999px; background:#E7ECEA; overflow:hidden; margin-top:4px; }
.cv-dsr-bar-fill{ height:100%; background:var(--green); border-radius:999px; }
.cv-big-value{ font-size:24px; font-weight:800; color:var(--text-headline); text-align:center; margin:10px 0 6px; }
.cv-big-label{ font-size:12px; color:var(--text-body); text-align:center; margin-bottom:4px; }
.cv-note{ font-size:11px; color:var(--text-muted); line-height:1.5; margin-top:auto; }

/* Row3: 시뮬레이션 요약 */
.cv-summary-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; }
.cv-summary-row{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--text-body); padding:9px 0; border-bottom:1px solid var(--border); }
.cv-summary-row strong{ color:var(--text-headline); font-weight:700; }
.cv-summary-row.is-warn strong{ color:#C0392B; }
.cv-summary-badge{ margin-top:14px; background:rgba(66,120,102,0.1); color:var(--green); border-radius:var(--radius-md); padding:12px; font-size:12.5px; font-weight:700; text-align:center; }
.cv-summary-badge.is-warn{ background:rgba(201,154,62,0.14); color:var(--gold); }

/* 절차 안내 + 유의사항 */
.cv-guide-row{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; margin-bottom:24px; }
.cv-process-steps{ display:flex; justify-content:space-between; gap:6px; flex-wrap:wrap; }
.cv-process-step{ flex:1; min-width:70px; text-align:center; }
.cv-process-icon{ width:40px; height:40px; border-radius:50%; background:var(--bg-alt); color:var(--green); display:flex; align-items:center; justify-content:center; margin:0 auto 6px; }
.cv-process-title{ font-size:11px; font-weight:700; color:var(--text-headline); margin-bottom:2px; }
.cv-process-desc{ font-size:9.5px; color:var(--text-muted); line-height:1.3; }
.cv-notice-list{ display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.cv-notice-item{ font-size:12px; color:var(--text-body); line-height:1.5; padding-left:14px; position:relative; }
.cv-notice-item::before{ content:"•"; position:absolute; left:0; color:var(--text-muted); }
.cv-notice-btn{ border:none; background:var(--navy2); color:#fff; font-size:12.5px; font-weight:600; padding:10px; border-radius:999px; cursor:pointer; width:100%; text-align:center; text-decoration:none; display:block; }
.cv-notice-btn:hover{ background:#081430; }

/* 관련 도구 */
.cv-tools-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.cv-tool-item{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 10px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; text-decoration:none; }
.cv-tool-item:hover{ background:var(--bg-alt); }
.cv-tool-icon{ width:36px; height:36px; border-radius:10px; background:rgba(66,120,102,0.12); color:var(--green); display:flex; align-items:center; justify-content:center; }
.cv-tool-label{ font-size:12px; font-weight:700; color:var(--text-headline); }
.cv-tool-sub{ font-size:10.5px; color:var(--text-muted); }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1080px){
  .cv-row{ grid-template-columns:1fr 1fr; }
  .cv-row .cv-card:nth-child(3){ grid-column:1 / -1; }
  .cv-guide-row{ grid-template-columns:1fr; }
  .cv-tools-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .cv-steps{ overflow-x:auto; }
}
@media (max-width: 860px){
  .cv-row{ grid-template-columns:1fr; }
  .cv-row .cv-card:nth-child(3){ grid-column:auto; }
  .cv-page-head{ flex-direction:column; }
  .cv-consult-card{ max-width:none; width:100%; }
  .cv-process-steps{ flex-wrap:wrap; }
  .cv-process-step{ min-width:30%; }
}
@media (max-width: 620px){
  .cv-tools-grid{ grid-template-columns:1fr 1fr; }
  .cv-cost-summary{ grid-template-columns:1fr; }
  .cv-op{ transform:rotate(90deg); }
  .cv-steps{ padding:14px 12px; }
  .cv-step{ min-width:0; }
  .cv-step-label{ display:none; }
  .cv-step.is-active .cv-step-label{ display:block; font-size:11px; white-space:normal; }
  .cv-step-line{ margin:0 6px; }
}