/* ==========================================================================
   클린 테마(A안 · 애플 톤) — 고객 화면 표현층 덮어쓰기. 검토용(2026-09-14).
   레이아웃·로직은 손대지 않고 토큰과 공용 컴포넌트만 바꾼다. style.css와 각 템플릿의
   <style> 뒤에 로드되므로 같은 선택자는 이 파일이 이긴다. 되돌리려면 base.html의 링크 한 줄만 뺀다.
   원칙: 무채색 바탕 + 인디고는 CTA·링크에만 / 테두리 대신 여백과 흰 면 / 그림자는 아주 옅게 /
         글자 단계 3개(제목·본문·보조) / 배지는 색면 대신 점 하나
   ========================================================================== */

:root {
    --primary: #292D72; --primary-deep: #1F2360; --primary-press: #171A4D; --primary-soft: #5B62A8; --primary-subtle: #EEF0F8;
    --ink: #1D1D1F; --ink-secondary: #3A3A3F; --ink-mute: #6E6E73;
    --canvas: #FFFFFF; --canvas-soft: #F5F5F7; --canvas-warm: #FFF7E8;
    --hairline: rgba(0, 0, 0, .08); --hairline-strong: rgba(0, 0, 0, .13);
    --mint: #1D9A6C; --mint-deep: #157A55; --mint-subtle: #E8F6EF;
    --error: #D4383E; --error-subtle: #FBECEC;
    --r-xs: 8px; --r-sm: 10px; --r-md: 14px; --r-lg: 18px; --r-xl: 24px;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .03);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, .06);
    --shadow-3: 0 20px 48px rgba(0, 0, 0, .10);
    --tone-todo: #B06A00; --tone-todo-bg: #FFF7E8;
}

/* 랜딩은 자체 토큰(선명한 보라·메시)을 쓰므로 같은 팔레트로 눌러 준다 */
body.lp {
    --primary: #292D72; --primary-deep: #1F2360; --primary-press: #171A4D; --primary-soft: #5B62A8; --primary-subtle: #EEF0F8;
    --ink: #1D1D1F; --ink-secondary: #3A3A3F; --ink-mute: #6E6E73;
    --canvas-soft: #F5F5F7; --hairline: rgba(0, 0, 0, .08); --hairline-strong: rgba(0, 0, 0, .13);
    --mesh-frost: #FFFFFF; --mesh-lavender: #EEF0F8; --mesh-sky: #DDE1F1; --mesh-indigo: #C9CDE8;
    --mint: #1D9A6C; --mint-deep: #157A55; --mint-subtle: #E8F6EF;
}

/* ---- 바탕과 글자 ---- */
body { color: var(--ink); letter-spacing: -.005em; }
body:not(.lp) { background: var(--canvas-soft); }
h1, h2, h3 { letter-spacing: -.022em; font-weight: 700; color: var(--ink); }
a { color: var(--primary); }
.field-hint, .muted, .result-date { color: var(--ink-mute); }

/* ---- 헤더 · 푸터 ---- */
.app-header { background: rgba(255, 255, 255, .78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--hairline); box-shadow: none; }
.btn-nav { border-radius: 999px; border: 0; background: var(--canvas-soft); color: var(--ink); font-weight: 600; box-shadow: none; }
.btn-nav:hover { background: #E8E8ED; }
/* 카톡 버튼은 카카오 브랜드 색 그대로(2026-09-14 확인) */
.app-header-actions a.btn-nav-kakao, .btn-nav-kakao { background: #FEE500; color: #191919; }
.app-header-actions a.btn-nav-kakao:hover, .btn-nav-kakao:hover { background: #F5DC00; color: #191919; }
.app-header-actions a.btn-nav-lookup { background: var(--primary); color: #fff; }
.app-header-actions a.btn-nav-lookup:hover { background: var(--primary-deep); }
.user-menu-trigger { border-radius: 999px; border: 0; background: var(--canvas-soft); box-shadow: none; }
.user-menu-list { border: 0; border-radius: 14px; box-shadow: var(--shadow-2); }
.site-footer { background: transparent; border-top: 1px solid var(--hairline); color: var(--ink-mute); }

/* ---- 버튼 ---- */
.btn { border-radius: 999px; font-weight: 600; letter-spacing: -.01em; box-shadow: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); box-shadow: none; }
.btn-primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); box-shadow: none; transform: none; }
/* 카카오 버튼은 btn-primary를 겸하므로 인디고 덮어쓰기에서 노랑을 되살린다 */
.btn-kakao { background: #FEE500; border-color: #FEE500; color: #391b1b; }
.btn-kakao:hover { background: #fcda00; border-color: #fcda00; color: #391b1b; transform: none; }
.btn-outline { background: #fff; border: 1px solid var(--hairline-strong); color: var(--ink); }
.btn-outline:hover { background: var(--canvas-soft); border-color: var(--hairline-strong); color: var(--ink); }
.link-secondary { color: var(--ink-mute); }

/* ---- 카드: 테두리 없이 흰 면 + 옅은 그림자 ---- */
.est-card, .ct-card, .my-tbl-wrap, .est-fold, .todo-box, .result-total-card, .result-tax-card, .apply-card, .auth-method-card, .cert-trust {
    border: 0; background: #fff; box-shadow: var(--shadow-1); border-radius: var(--r-lg);
}
.todo-box { background: var(--tone-todo-bg); }
.todo-box h2 { color: var(--tone-todo); }
.todo-item { border-top-color: rgba(176, 106, 0, .14); }
.cert-trust { background: #fff; }

/* 진행 카드 — 이 카드의 스타일은 include 안(body)에 있어 head의 이 파일보다 늦게 온다. body 접두어로 우선순위를 올린다 */
body .pl-card { border: 0; background: #fff; box-shadow: var(--shadow-1); border-radius: var(--r-lg); }
body .pl-card.done, body .pl-card.todo, body .pl-card.progress, body .pl-card.end, body .pl-card.error { border: 0; }
body .pl-card .pl-head { background: #fff; padding: 18px 20px 12px; border-bottom: 1px solid var(--hairline); }
body .pl-card.done .pl-head, body .pl-card.progress .pl-head, body .pl-card.end .pl-head { background: #fff; }
body .pl-card.todo .pl-head { background: var(--tone-todo-bg); border-bottom-color: transparent; }
body .pl-card.error .pl-head { background: var(--error-subtle); border-bottom-color: transparent; }
body .pl-title { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
body .pl-body { padding: 6px 20px 16px; }
body .pl-row { border-top-color: var(--hairline); }
body .pl-v .note { background: var(--canvas-soft); border-radius: var(--r-sm); }
body .pl-steps .pl-sub { background: var(--tone-todo); }
body .pl-steps .pl-sub.info { background: #fff; color: var(--ink-secondary); border-color: var(--hairline-strong); }
body .pl-steps li.on { color: var(--ink); }
body .pl-flash.ok { background: var(--mint-subtle); color: var(--mint-deep); }
body .pl-actions .btn { border-radius: 999px; }

/* 결과 화면 금액 */
.est-hero { padding-top: 5vh; }
.est-amount { font-size: 54px; font-weight: 700; letter-spacing: -.035em; color: var(--ink); margin: 4px 0 8px; }
.est-label { font-size: 15px; color: var(--ink-mute); }
.est-kind { font-weight: 600; background: var(--canvas-soft); color: var(--ink-secondary); }
.est-kind-prelim { background: var(--tone-todo-bg); color: var(--tone-todo); }
.est-kind-fine { background: var(--mint-subtle); color: var(--mint-deep); }
.est-compact { padding: 16px 20px; }

/* ---- 상태 배지: 색면 대신 점 하나 ---- */
.st { background: var(--canvas-soft) !important; color: var(--ink-secondary) !important; font-weight: 600 !important; padding: 3px 10px 3px 8px; }
.st::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1px; }
.st-todo { color: var(--tone-todo) !important; background: var(--tone-todo-bg) !important; }
.st-progress { color: var(--primary) !important; }
.st-done { color: var(--mint-deep) !important; }
.st-end { color: var(--ink-mute) !important; }
.st-error { color: var(--error) !important; }

/* ---- 내 조회 내역 표 ---- */
.my-tbl th { background: #fff; color: var(--ink-mute); text-transform: none; letter-spacing: 0; font-size: 12.5px; padding: 12px 14px; }
.my-tbl td { padding: 13px 14px; border-bottom-color: var(--hairline); }
.my-tbl .amt { color: var(--ink); }
.my-tbl tr.hist td { background: #FAFAFC; }
.dash-filter select { border-radius: 999px; border: 0; background: #fff; box-shadow: var(--shadow-1); padding: 8px 14px; }

/* ---- 폼 ---- */
.form-field input[type=text], .form-field input[type=tel], .form-field input[type=email], .form-field input[type=password], .form-field input[type=file], .form-field textarea, .form-field select {
    border-radius: 12px; border: 1px solid var(--hairline-strong); background: #fff; padding: 12px 14px; font-size: 16px; box-shadow: none;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(41, 45, 114, .12); outline: none; }
.form-field label { color: var(--ink-secondary); font-weight: 600; }

/* ---- 랜딩: 카드와 버튼만 같은 규칙으로 ---- */
body.lp .btn { border-radius: 999px; }
body.lp .eligibility-card, body.lp .firm-trust-card, body.lp .quick-flow-step { border: 0; box-shadow: var(--shadow-1); border-radius: var(--r-lg); }

/* ---- 모바일 ---- */
@media (max-width: 639px) {
    .est-amount { font-size: 40px; }
    .pl-title { font-size: 18px; }
}