@charset "UTF-8";
/* estimation.css — 통합본 (estimation + estimation_csf)
   - 네임스페이스: .estimation-page
   - theme.css 이후에 로드하세요.
*/

/* ========== 초기 로딩 시 쉘 처리 ========== */

/* 게이트: 레이아웃은 유지하되 화면에만 안 보이게 */
html[data-est-hydration="loading"] #step-row,
html[data-est-hydration="loading"] .estimation-page {
  opacity: 0; visibility: hidden;
}

/* 초미니 하이드레이션 쉘 */
#est-hydration-shell {
  position: fixed; inset: 0; z-index: 10970;
  display: none; align-items: center; justify-content: center;
  background: var(--bs-body-bg, #fff);
  font-size: 1rem;
}
html[data-est-hydration="loading"] #est-hydration-shell { display: flex; }

#est-hydration-shell .est-shell-text {
  padding: .75rem 1rem; border-radius: 12px;
  background: rgba(33,37,41,.92); color: #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}

/* ========== 변수 ========== */
.estimation-page {
  /* 커스텀 브랜드 변수(필요 시 theme.css에서 override 가능) */
  --uns-card-radius: .75rem;
  --uns-chip-radius: 999px;
  --uns-shadow-sm: 0 .125rem .5rem rgba(0,0,0,.06);
  --uns-step-top: 0; /* sticky 보정 여백 필요하면 상위에서 override */
}

/* ========== 배경 패턴(히어로 뒤) ========== */
.estimation-page .pattern-square {
  position: absolute; inset: 0 auto auto 0;
  width: 140px; height: 140px; opacity: .07;
  background-image:
    linear-gradient(90deg, var(--bs-primary) 1px, transparent 1px),
    linear-gradient(var(--bs-primary) 1px, transparent 1px);
  background-size: 14px 14px;
  pointer-events: none;
}

/* ========== 스텝 칩 바(가로 스크롤) ========== */
.estimation-page #csf-steps {
  gap: .5rem;
}
.estimation-page #csf-steps .csf-step {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .75rem; border-radius: var(--uns-chip-radius);
  background: var(--bs-body-bg); border: 1px solid var(--bs-border-color);
  white-space: nowrap; cursor: pointer; user-select: none;
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease;
}
.estimation-page #csf-steps .csf-step .num {
  display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
  border-radius: 50%; font-size: .8rem; background: var(--bs-secondary-bg);
}
.estimation-page #csf-steps .csf-step.active {
  border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle);
}
.estimation-page #csf-steps .csf-step.active .num { background: var(--bs-primary); color: #fff; }
.estimation-page #csf-steps .csf-step.done { opacity: .9; }
.estimation-page #csf-steps .csf-step:hover { transform: translateY(-1px); }

.estimation-page .csf-steps.nav {
  position: sticky; top: var(--uns-step-top);
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  z-index: 2;
}

/* ========== 스텝 카드 공통 ========== */
.estimation-page .card-step { border:0; border-radius:var(--uns-card-radius); box-shadow:var(--uns-shadow-sm); }
.estimation-page .card-step .card-header{ border:0; border-top-left-radius:var(--uns-card-radius); border-top-right-radius:var(--uns-card-radius); background:var(--bs-body-tertiary); }
.estimation-page .card-step .card-body{ padding-top:1rem; }

/* ========== 토글: 2라인 레이아웃(아이콘+라벨/헬프, FP 뱃지) ========== */
.estimation-page .toggle-group .tg {
  display:flex; align-items:flex-start; gap:.75rem; height:100%;
  border-radius:.75rem; padding:.7rem .9rem;
  border:1px solid var(--bs-border-color); background:var(--bs-body-bg);
  transition:all .15s ease;
}
.estimation-page .toggle-group .tg .ic { font-size:1.1rem; line-height:1; }
.estimation-page .toggle-group .tg .stack { display:flex; flex-direction:column; min-width:0; }
.estimation-page .toggle-group .tg .lbl { font-weight:600; color:var(--bs-body-color); }
.estimation-page .toggle-group .tg .sub { font-size:.85rem; color:var(--bs-secondary-color); }
.estimation-page .toggle-group .tg .meta {
  margin-left:auto; white-space:nowrap; font-size:.8rem;
  padding:.15rem .5rem; border-radius:999px; border:1px dashed var(--bs-border-color);
  color:var(--bs-secondary-color);
}
.estimation-page .toggle-group .tg.active {
  border-color:var(--bs-primary);
  box-shadow:0 0 0 .2rem rgba(var(--bs-primary-rgb), .15);
}
.estimation-page .toggle-group .tg[aria-disabled="true"] { opacity:.6; pointer-events:none; }

/* ========== 미리보기/브레이크다운 ========== */
.estimation-page #preview-card .range-num { font-variant-numeric: tabular-nums; }
.estimation-page #breakdown-body td {
  vertical-align: middle; font-variant-numeric: tabular-nums;
}

/* ========== 네비 버튼 (Next/Prev) ========== */
.estimation-page .csf-actions {
  display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem;
}
.estimation-page .csf-actions .btn { min-width:120px; }
.estimation-page .csf-actions .btn:first-child { background-color: var(--bs-secondary); color:#6b6666; border: none; }/* 이전 버튼 */
.estimation-page .csf-actions .btn-outline-secondary{
  color:var(--bs-gray-800); border-color:var(--bs-gray-500);
}
.estimation-page .csf-actions .btn-outline-secondary:hover{
  background:var(--bs-gray-100);
}

/* ========== 보조 카드(요약, 안내) ========== */
.estimation-page .side-card { box-shadow: var(--uns-shadow-sm); border: 0; }
.estimation-page .side-card .card-header { background: var(--bs-primary-bg-subtle); border: 0; }

/* --- SummaryCard 숫자 폰트/뱃지 --- */
.estimation-page .summary-money{ font-variant-numeric: tabular-nums; font-weight:700; }
.estimation-page .summary-weeks{ font-variant-numeric: tabular-nums; }
.estimation-page .badge-soft{
  background:var(--bs-primary-bg-subtle); color:var(--bs-primary); border:1px solid var(--bs-primary-border-subtle);
}

/* --- Breakdown 테이블(가독성) --- */
.estimation-page .table-est-breakdown td, 
.estimation-page .table-est-breakdown th { vertical-align:middle; }
.estimation-page .table-est-breakdown .num { text-align:right; font-variant-numeric:tabular-nums; }
.estimation-page .table-est-breakdown .muted{ color:var(--bs-secondary-color); }
.estimation-page .table-est-breakdown thead th{
  border-bottom:2px solid var(--bs-border-color);
}

/* --- 연락처 설명 색: 라이트 테마 가독성 보강 --- */
.estimation-page .lead-note{ color:var(--bs-body-color); opacity:.9; }

/* --- FAQ 아코디언 --- */
.estimation-page .faq-accordion .accordion-button{ font-weight:600; }

/* --- 사용자 정의 버튼 --- */
.btn-soft-primary{
  color:var(--bs-primary);
  background:var(--bs-primary-bg-subtle);
  border:1px solid var(--bs-primary-border-subtle);
}
.btn-soft-primary:hover{ background:rgba(var(--bs-primary-rgb), .2); }

/* 숫자 가독성: 탭형 숫자, 우측정렬 */
.table-est-breakdown td.num,
.table-est-breakdown th.num,
.estimation-preview-table .text-end {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 브레이크다운 테이블: 헤더 고정(옵션), 배경/보더 톤다운 */
.table-est-breakdown thead th {
  background: var(--bs-body-bg);
  position: sticky; top: 0; z-index: 1; /* 필요 없으면 제거 */
  border-bottom: 1px solid var(--bs-border-color);
}

/* 전반 padding 개선: table-sm의 compact함은 유지하되 최소 여백 보강 */
.table-est-breakdown td, .table-est-breakdown th,
.estimation-preview-table td, .estimation-preview-table th {
  padding: .6rem .85rem; /* 기존보다 살짝 여유 */
}

/* 합계/구분선 대비 강화 */
.table-est-breakdown tfoot th,
.estimation-preview-table tfoot th,
.estimation-preview-table tfoot td {
  border-top: 1.5px solid var(--bs-border-color);
}

/* 디스카운트 금액 강조 (JS에서도 text-danger 적용함) */
.estimation-preview-table thead th{
  border-bottom:2px solid var(--bs-border-color);
}
.estimation-preview-table td.text-danger {
  font-weight: 600;
}

/* 모바일에서 숫자 컬럼 줄바꿈 방지 */
.table-est-breakdown td.num,
.table-est-breakdown th.num {
  white-space: nowrap;
}