/* ============================================================
   cost-page.css — 비용 허브 전용 (2026-06-11)
   공용 컴포넌트는 ft-pages-common.css 참조
   ============================================================ */

/* ============================================================

/* 테마 customify-container(max 1314px) 안에서 배경 풀블리드 처리 */

/* 고정 문구 3종 — 통일 컴포넌트 (기획 v2 §8: 모든 가격 섹션 하단 동일 적용) */

/* 브레드크럼 (§6-8 — URL 구조 = 키워드) */

/* HERO */
.ft-cost-page .u-hero { background: var(--u-color-bg-secondary); }
.ft-cost-page .u-hero .u-content-container { padding-top: clamp(36px, 5vw, 64px); padding-bottom: clamp(52px, 8vw, 92px); }
.ft-cost-page .u-hero .u-update-badge {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--u-color-bg-primary); border: 0.5px solid var(--u-color-border);
    border-radius: var(--u-radius-13); padding: 5px 12px;
    font-size: 12.5px; font-weight: 700; color: var(--u-color-point-text);
    box-shadow: var(--u-shadow-soft); margin-bottom: var(--u-space-12);
}
.ft-cost-page .u-hero .u-update-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--u-color-point); }
.ft-cost-page .u-hero h1 { font-size: clamp(25px, 4vw, 44px); font-weight: 800; color: var(--u-color-text-primary); line-height: 1.28; }
.ft-cost-page .u-hero h1 strong { color: var(--u-color-point); }
.ft-cost-page .u-hero .u-hero-sub { margin-top: var(--u-space-12); font-size: clamp(13.5px, 1.7vw, 17px); color: var(--u-color-text-support); max-width: 560px; }
.ft-cost-page .u-hero .u-btn-group { margin-top: var(--u-space-16); display: flex; gap: var(--u-space-8); flex-wrap: wrap; }

.ft-cost-page .u-hero-stats { max-width: 1080px; margin: clamp(-44px, -4vw, -36px) auto 0; padding: 0 var(--u-space-24); position: relative; z-index: 2; }
.ft-cost-page .u-hero-stats .u-stats-card {
    background: var(--u-color-bg-primary); border: 0.5px solid var(--u-color-border);
    border-radius: var(--u-radius-13); box-shadow: var(--u-shadow-soft);
    display: grid; grid-template-columns: repeat(3, 1fr); padding: var(--u-space-16) var(--u-space-24); gap: var(--u-space-16);
}
.ft-cost-page .u-hero-stats .u-stat-item { position: relative; padding-left: var(--u-space-12); }
.ft-cost-page .u-hero-stats .u-stat-item::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--u-color-point); }
.ft-cost-page .u-stat-name { display: block; font-size: clamp(11.5px, 1.4vw, 13px); font-weight: 700; color: var(--u-color-text-support); }
.ft-cost-page .u-stat-value { display: block; font-size: clamp(16px, 2.3vw, 24px); font-weight: 800; color: var(--u-color-text-primary); line-height: 1.3; }
.ft-cost-page .u-stat-value strong { color: var(--u-color-point); }
.ft-cost-page .u-stat-desc { display: block; font-size: clamp(11px, 1.3vw, 12px); color: var(--u-color-text-support); }

/* 신뢰 스트립 */

/* 칩 */

/* A. 시뮬레이터 */
.ft-cost-page .u-sim-card { padding: var(--u-space-24); }
.ft-cost-page .u-sim-card .u-sim-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--u-space-24); }
.ft-cost-page .u-sim-controls { display: flex; flex-direction: column; gap: var(--u-space-12); }
.ft-cost-page .u-sim-group h4 { font-size: 13px; font-weight: 800; color: var(--u-color-text-primary); margin-bottom: 6px; }
.ft-cost-page .u-sim-group h4 small { font-weight: 400; color: var(--u-color-text-support); margin-left: 4px; }
.ft-cost-page .u-sim-result { background: var(--u-color-bg-secondary); border-radius: var(--u-radius-13); padding: var(--u-space-16); display: flex; flex-direction: column; }
.ft-cost-page .u-sim-result h4 { font-size: 13.5px; font-weight: 800; color: var(--u-color-text-primary); padding-bottom: var(--u-space-8); border-bottom: 1px solid var(--u-color-border); }
.ft-cost-page .u-sim-row { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: clamp(12.5px, 1.5vw, 13.5px); }
.ft-cost-page .u-sim-row + .u-sim-row { border-top: 1px dashed var(--u-color-border); }
.ft-cost-page .u-sim-row .u-sim-label { color: var(--u-color-text-support); }
.ft-cost-page .u-sim-row .u-sim-label small { display: block; font-size: 10.5px; }
.ft-cost-page .u-sim-row .u-sim-val { font-weight: 800; color: var(--u-color-text-primary); white-space: nowrap; }
.ft-cost-page .u-sim-total { margin-top: auto; padding-top: var(--u-space-8); border-top: 2px solid var(--u-color-text-primary); display: flex; justify-content: space-between; align-items: baseline; }
.ft-cost-page .u-sim-total .u-sim-label { font-size: 13.5px; font-weight: 800; color: var(--u-color-text-primary); }
.ft-cost-page .u-sim-total .u-sim-val { font-size: clamp(17px, 2.2vw, 22px); font-weight: 800; color: var(--u-color-point-text); }
.ft-cost-page .u-sim-foot { margin-top: 6px; font-size: 11px; color: var(--u-color-text-support); }

/* C. TOP 5 */
.ft-cost-page .u-top5-list { display: flex; flex-direction: column; }
.ft-cost-page .u-top5-item {
    display: grid; grid-template-columns: 44px 1fr auto auto; gap: var(--u-space-12);
    align-items: center; padding: var(--u-space-12) var(--u-space-16);
}
.ft-cost-page .u-top5-item + .u-top5-item { border-top: 1px solid var(--u-color-border); }
.ft-cost-page .u-top5-rank { font-size: clamp(18px, 2.2vw, 23px); font-weight: 800; color: var(--u-color-point); text-align: center; }
.ft-cost-page .u-top5-name { min-width: 0; }
.ft-cost-page .u-top5-name h3 { font-size: clamp(14px, 1.7vw, 16px); font-weight: 800; color: var(--u-color-text-primary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ft-cost-page .u-top5-name span.u-top5-meta { display: block; font-size: 12px; color: var(--u-color-text-support); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-cost-page .u-top5-badge { font-size: 10.5px; font-weight: 800; border-radius: 4px; padding: 1px 6px; letter-spacing: 0; }
.ft-cost-page .u-top5-badge.is-down { color: #1565C0; background: #E8F1FB; }
.ft-cost-page .u-top5-badge.is-new { color: var(--u-color-point-text); background: #FDF1E8; }
.ft-cost-page .u-top5-badge.is-same { color: var(--u-color-text-support); background: var(--u-color-bg-secondary); }
.ft-cost-page .u-top5-price { font-size: clamp(14.5px, 1.8vw, 17px); font-weight: 800; color: var(--u-color-point-text); white-space: nowrap; text-align: right; }
.ft-cost-page .u-top5-price small { font-weight: 400; font-size: 11px; color: var(--u-color-text-support); display: block; }
.ft-cost-page .u-top5-link { font-size: 12.5px; font-weight: 700; color: var(--u-color-text-support); white-space: nowrap; }

/* B. 예산 탐색 */
.ft-cost-page .u-budget-head { display: flex; align-items: baseline; gap: var(--u-space-12); flex-wrap: wrap; padding-bottom: var(--u-space-8); }
.ft-cost-page .u-budget-head .u-budget-value { font-size: clamp(22px, 3vw, 30px); font-weight: 800; color: var(--u-color-point-text); }
.ft-cost-page .u-budget-head .u-budget-count { font-size: clamp(13px, 1.5vw, 14.5px); color: var(--u-color-text-support); }
.ft-cost-page .u-budget-head .u-budget-count strong { color: var(--u-color-text-primary); font-weight: 800; }
.ft-cost-page input[type="range"].u-range {
    width: 100%; max-width: 560px; height: 6px; appearance: none; -webkit-appearance: none;
    background: linear-gradient(to right, var(--u-color-point) 0%, var(--u-color-point) 50%, var(--u-color-border) 50%);
    border-radius: 3px; outline: none; margin: var(--u-space-8) 0 var(--u-space-16);
}
.ft-cost-page input[type="range"].u-range::-webkit-slider-thumb {
    -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%;
    background: var(--u-color-bg-primary); border: 3px solid var(--u-color-point);
    box-shadow: var(--u-shadow-soft); cursor: pointer;
}
.ft-cost-page .u-budget-empty { padding: var(--u-space-24); text-align: center; color: var(--u-color-text-support); font-size: 14px; width: 100%; }

.ft-cost-page .u-school-card { width: 250px; }
.ft-cost-page .u-school-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ft-cost-page .u-school-card .u-card-body { padding: var(--u-space-12) var(--u-space-16); }
.ft-cost-page .u-school-card h3 { font-size: clamp(14px, 1.7vw, 15.5px); font-weight: 800; color: var(--u-color-text-primary); }
.ft-cost-page .u-school-card h3 span { font-size: 11.5px; color: var(--u-color-text-support); font-weight: 400; }
.ft-cost-page .u-school-card .u-school-copy { font-size: 12px; color: var(--u-color-text-support); margin-top: 2px; min-height: 2.4em; }
.ft-cost-page .u-school-price { margin-top: var(--u-space-4); font-size: 12px; color: var(--u-color-text-support); }
.ft-cost-page .u-school-price strong { font-size: 15px; font-weight: 800; color: var(--u-color-point-text); }

/* 지역별 표 */
.ft-cost-page .u-price-table-wrap { overflow-x: auto; }
.ft-cost-page table.u-price-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.ft-cost-page .u-price-table th, .ft-cost-page .u-price-table td { padding: var(--u-space-12) var(--u-space-16); text-align: left; font-size: clamp(13px, 1.5vw, 14.5px); }
.ft-cost-page .u-price-table thead th { background: var(--u-color-bg-secondary); color: var(--u-color-text-primary); font-weight: 800; font-size: clamp(12.5px, 1.4vw, 13.5px); white-space: nowrap; }
.ft-cost-page .u-price-table tbody tr + tr { border-top: 1px solid var(--u-color-border); }
.ft-cost-page .u-price-table tbody th { font-weight: 800; color: var(--u-color-text-primary); white-space: nowrap; }
.ft-cost-page .u-price-table tbody th small { display: block; font-weight: 400; font-size: 11.5px; color: var(--u-color-text-support); }
.ft-cost-page .u-price-table td strong { color: var(--u-color-point-text); font-weight: 800; }

/* 현지비용 + 환율 토글 */
.ft-cost-page .u-currency-toggle { display: inline-flex; border: 0.5px solid var(--u-color-border); border-radius: var(--u-radius-13); overflow: hidden; background: var(--u-color-bg-primary); box-shadow: var(--u-shadow-soft); }
.ft-cost-page .u-currency-toggle button {
    border: 0; background: transparent; cursor: pointer; font-family: inherit;
    padding: 6px var(--u-space-16); font-size: 13px; font-weight: 700; color: var(--u-color-text-support);
}
.ft-cost-page .u-currency-toggle button.is-active { background: var(--u-color-text-primary); color: #fff; }
.ft-cost-page .u-currency-rate { font-size: 12px; color: var(--u-color-text-support); margin-left: var(--u-space-12); }
.ft-cost-page .u-local-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--u-space-12); margin-top: var(--u-space-16); }
.ft-cost-page .u-local-card { background: var(--u-color-bg-primary); border-radius: var(--u-radius-13); box-shadow: var(--u-shadow-soft); padding: var(--u-space-12) var(--u-space-16); }
.ft-cost-page .u-local-card .u-local-tag { font-size: 10.5px; font-weight: 800; color: var(--u-color-point); text-transform: uppercase; letter-spacing: 0.04em; }
.ft-cost-page .u-local-card h3 { font-size: clamp(13.5px, 1.6vw, 14.5px); font-weight: 800; color: var(--u-color-text-primary); }
.ft-cost-page .u-local-card .u-local-price { display: block; margin-top: 2px; font-size: clamp(13.5px, 1.6vw, 15px); font-weight: 800; color: var(--u-color-point-text); }
.ft-cost-page .u-local-card p { margin-top: 2px; font-size: 11.5px; color: var(--u-color-text-support); }

/* 시기 그래프 */
.ft-cost-page .u-season-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--u-space-24); align-items: center; }
.ft-cost-page .u-season-copy h3 { font-size: clamp(17px, 2vw, 21px); font-weight: 800; color: var(--u-color-text-primary); line-height: 1.4; }
.ft-cost-page .u-season-copy h3 strong { color: var(--u-color-point); }
.ft-cost-page .u-season-copy p { margin-top: var(--u-space-12); font-size: clamp(13px, 1.5vw, 14.5px); color: var(--u-color-text-support); }
.ft-cost-page .u-season-chart-card { background: var(--u-color-bg-primary); border: 0.5px solid var(--u-color-border); border-radius: var(--u-radius-13); box-shadow: var(--u-shadow-soft); padding: var(--u-space-16) var(--u-space-24); }
.ft-cost-page .u-season-chart-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--u-space-8); }
.ft-cost-page .u-season-chart-head h4 { font-size: 13.5px; font-weight: 800; color: var(--u-color-text-primary); }
.ft-cost-page .u-season-chart-head span { font-size: 11.5px; color: var(--u-color-text-support); }
.ft-cost-page .u-season-bars { display: grid; grid-template-columns: repeat(26, 1fr); gap: 3px; align-items: end; height: 96px; }
.ft-cost-page .u-season-bars i { display: block; border-radius: 3px 3px 0 0; min-height: 14px; }
.ft-cost-page .u-season-months { display: flex; justify-content: space-between; margin-top: var(--u-space-8); font-size: 11px; color: var(--u-color-text-support); }
.ft-cost-page .u-season-min { margin-top: var(--u-space-8); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--u-color-text-primary); }
.ft-cost-page .u-season-min::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--u-chart-blue); }

/* 절약 팁 */
.ft-cost-page .u-quick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--u-space-12); }
.ft-cost-page .u-quick-card {
    background: var(--u-color-bg-primary); border: 0.5px solid var(--u-color-border);
    border-radius: var(--u-radius-13); box-shadow: var(--u-shadow-soft);
    padding: var(--u-space-12) var(--u-space-16); display: flex; flex-direction: column; gap: 2px;
}
.ft-cost-page .u-quick-card .u-quick-tag { font-size: 11px; font-weight: 800; color: var(--u-color-point); }
.ft-cost-page .u-quick-card h3 { font-size: clamp(13.5px, 1.6vw, 15px); font-weight: 800; color: var(--u-color-text-primary); }
.ft-cost-page .u-quick-card p { font-size: clamp(11.5px, 1.4vw, 12.5px); color: var(--u-color-text-support); }

/* E. 정산서 */
.ft-cost-page .u-receipt {
    width: 280px;
    background: var(--u-color-bg-primary); border: 0.5px solid var(--u-color-border);
    border-radius: var(--u-radius-13); box-shadow: var(--u-shadow-soft); padding: var(--u-space-16);
    position: relative;
}
.ft-cost-page .u-receipt::before {
    content: "영수증"; position: absolute; top: 12px; right: 12px;
    font-size: 10px; font-weight: 800; letter-spacing: 0.08em; color: var(--u-color-point);
    border: 1px solid var(--u-color-point); border-radius: 4px; padding: 1px 6px; transform: rotate(4deg);
}
.ft-cost-page .u-receipt .u-receipt-who { font-size: 11.5px; font-weight: 700; color: var(--u-color-point-text); }
.ft-cost-page .u-receipt h3 { font-size: clamp(14.5px, 1.7vw, 16px); font-weight: 800; color: var(--u-color-text-primary); margin-top: 2px; }
.ft-cost-page .u-receipt dl { margin-top: var(--u-space-8); }
.ft-cost-page .u-receipt .u-receipt-line { display: flex; justify-content: space-between; font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed var(--u-color-border); }
.ft-cost-page .u-receipt .u-receipt-line dt { color: var(--u-color-text-support); }
.ft-cost-page .u-receipt .u-receipt-line dd { font-weight: 700; color: var(--u-color-text-secondary); }
.ft-cost-page .u-receipt .u-receipt-total { display: flex; justify-content: space-between; padding-top: var(--u-space-8); align-items: baseline; }
.ft-cost-page .u-receipt .u-receipt-total dt { font-size: 13px; font-weight: 800; color: var(--u-color-text-primary); }
.ft-cost-page .u-receipt .u-receipt-total dd { font-size: clamp(16px, 2vw, 19px); font-weight: 800; color: var(--u-color-point-text); }
.ft-cost-page .u-receipt .u-receipt-note { margin-top: var(--u-space-8); font-size: 11px; color: var(--u-color-text-support); }

/* FAQ */
.ft-cost-page .u-faq-list { margin-top: var(--u-space-16); background: var(--u-color-bg-primary); border-radius: var(--u-radius-13); border: 0.5px solid var(--u-color-border); box-shadow: var(--u-shadow-soft); padding: 0 var(--u-space-16); }
.ft-cost-page .u-faq-item + .u-faq-item { border-top: 1px solid var(--u-color-border); }
.ft-cost-page .u-faq-item summary {
    list-style: none; cursor: pointer; padding: var(--u-space-12) var(--u-space-8);
    font-size: clamp(13.5px, 1.6vw, 15.5px); font-weight: 700; color: var(--u-color-text-primary);
    display: flex; gap: var(--u-space-8); align-items: baseline;
}
.ft-cost-page .u-faq-item summary::-webkit-details-marker { display: none; }
.ft-cost-page .u-faq-item summary::before { content: "Q."; color: var(--u-color-point); font-weight: 800; }
.ft-cost-page .u-faq-item .u-faq-content { padding: 0 var(--u-space-8) var(--u-space-12); font-size: clamp(12.5px, 1.5vw, 14px); color: var(--u-color-text-support); }

/* 다크 CTA */

/* 모바일 하단 고정 CTA */

/* 반응형 */

@media (max-width: 860px) {
    .ft-cost-page .u-hero-stats .u-stats-card { grid-template-columns: repeat(3, 1fr); padding: var(--u-space-12); gap: var(--u-space-8); }
    .ft-cost-page .u-hero-stats .u-stat-item { padding-left: var(--u-space-8); }
    .ft-cost-page .u-stat-desc { display: none; }
    .ft-cost-page .u-sim-card .u-sim-inner { grid-template-columns: 1fr; gap: var(--u-space-16); }
    .ft-cost-page .u-sim-result { position: sticky; bottom: 64px; }
    .ft-cost-page .u-season-wrap { grid-template-columns: 1fr; }
    .ft-cost-page .u-quick-grid { display: flex; gap: var(--u-space-12); overflow-x: auto; padding-bottom: var(--u-space-8); scrollbar-width: none; }
    .ft-cost-page .u-quick-grid::-webkit-scrollbar { display: none; }
    .ft-cost-page .u-quick-card { flex: 0 0 200px; }
    .ft-cost-page .u-local-grid { grid-template-columns: repeat(2, 1fr); }
    .ft-cost-page .u-top5-item { grid-template-columns: 36px 1fr auto; }
    .ft-cost-page .u-top5-link { display: none; }
}