/* 내손사 자동차사고 · 사고 직후 가이드 (/car). app.css 위에 얹는다. */
.car-app main { padding: 1rem 1rem calc(2rem + var(--safe-b)); }
.car-app .kv { display: flex; flex-wrap: wrap; gap: 0.375rem 0.875rem; font-size: 0.875rem; color: var(--muted); }
.car-app .kv b { color: var(--ink); font-weight: 650; }

.sos { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 0.5rem; margin-bottom: 1.25rem; }
.sos-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.125rem;
  min-height: 4.25rem; padding: 0.5rem; border-radius: var(--radius); text-decoration: none;
  background: #fff; border: 1.5px solid var(--line); color: var(--navy);
}
.sos-btn b { font-size: 1.25rem; font-weight: 800; letter-spacing: 0; }
.sos-btn small { font-size: 0.75rem; color: var(--muted); }
.sos-btn.red { background: #a72828; border-color: #a72828; color: #fff; }
.sos-btn.red small { color: #ffe3e3; }
.sos-btn:active { transform: scale(.98); }
.sos-mini { margin: 0.75rem 0 0; grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr)); }
.sos-mini .sos-btn { min-height: 3rem; }
.sos-mini .sos-btn b { font-size: 1.0625rem; }

.car-h1 { margin: 0 0 0.375rem; font-size: 1.625rem; line-height: 1.3; color: var(--navy); }
.car-start { width: 100%; min-height: 4.5rem; font-size: 1.25rem; margin: 0.25rem 0 1.25rem; }
.car-start svg { width: 1.75rem; height: 1.75rem; }

.car-resume { background: #fff; border: 1.5px solid var(--navy); border-radius: 16px; padding: 1rem; margin-bottom: 1.25rem; display: grid; gap: 0.5rem; }
.cr-top { display: flex; justify-content: space-between; gap: 0.5rem; color: var(--navy); }
.cr-top span, .cr-meta { color: var(--muted); font-size: 0.9375rem; }
.cr-actions { display: grid; gap: 0.5rem; margin-top: 0.25rem; }
.cr-actions .btn { width: 100%; }

.cg-bar { height: 0.5rem; border-radius: 999px; background: var(--soft); overflow: hidden; }
.cg-bar i { display: block; height: 100%; background: var(--gold); border-radius: 999px; transition: width .25s ease; }

.car-links { display: grid; gap: 0.5rem; margin-bottom: 1rem; }
.car-links a { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--navy); }
.car-links svg { width: 1.5rem; height: 1.5rem; color: var(--gold); flex: none; }
.car-links b { display: block; font-size: 1rem; }
.car-links small { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.4; }
.car-install { width: 100%; }

.cg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.cg-count { font-size: 0.875rem; color: var(--muted); }
.car-step h2 { margin-top: 0.875rem; }
.cg-list { display: grid; gap: 0.5rem; }
.cg-item {
  display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 0.875rem;
  background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.cg-item.key { border-left: 4px solid var(--gold); }
.cg-item input { width: 1.625rem; height: 1.625rem; accent-color: var(--navy); flex: none; margin: 0.0625rem 0 0; }
.cg-item b { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--ink); }
.cg-item small { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
.cg-item:has(input:checked) { background: #f3f6f2; border-color: #cfdccf; }
.cg-item input:checked + span b { color: var(--ok); }
.cg-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: 0.5rem; margin-top: 1rem; }
.cg-nav .btn { width: 100%; }
.cg-say { margin-top: 0.75rem; }

.car-sum p { margin: 0.5rem 0 0; }
.car-sum .cg-bar { margin-top: 0.625rem; }
.cg-miss { margin-top: 0.625rem; background: #fbf1f1; border: 1px solid #efd0d0; border-radius: 12px; padding: 0.625rem 0.75rem; font-size: 0.9375rem; }
.cg-miss b { color: var(--danger); }
.cg-miss ul { margin: 0.25rem 0 0; padding-left: 1.125rem; }
.ok-line { color: var(--ok); font-weight: 650; }

/* 손해사정사 상담함: 사고 직후 체크 현황 카드 */
.car-card { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 12px; padding: 0.625rem 0.75rem; font-size: 0.875rem; display: grid; gap: 0.375rem; }
.car-card .cc-top { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.car-card .cc-top b { color: var(--navy); }
.car-card .cc-top span { color: var(--muted); }
.car-card .cg-bar { height: 0.375rem; }
.car-card .cc-miss { color: var(--danger); font-weight: 650; }
.car-card details summary { cursor: pointer; color: var(--navy); font-weight: 650; }
.car-card .cc-step { margin: 0.375rem 0 0; }
.car-card .cc-step b { display: block; color: var(--ink); font-size: 0.8125rem; }
.car-card .cc-step ul { list-style: none; margin: 0.125rem 0 0; padding: 0; display: grid; gap: 0.125rem; }
.car-card .cc-step li.y { color: var(--ok); }
.car-card .cc-step li.n { color: var(--muted); }
.car-card .cc-step li.n.k { color: var(--danger); }
.car-chip { display: inline-block; font-size: 0.6875rem; font-weight: 700; color: #6b5324; background: #f7efdc; border: 1px solid #ead9b3; border-radius: 999px; padding: 0.0625rem 0.4375rem; }

/* 내손사 첫 화면·준비물 화면에서 자동차사고 가이드로 가는 링크 */
.car-entry { display: flex; align-items: center; gap: 0.625rem; margin-top: 0.875rem; padding: 0.75rem 0.875rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--navy); font-size: 0.9375rem; }
.car-entry svg { width: 1.5rem; height: 1.5rem; color: var(--gold); flex: none; }
.car-entry span { flex: 1; }

/* 손해액 계산기 (/car#calc) */
.calc .step-label a { color: inherit; text-decoration: none; }
.calc-form { display: grid; gap: 0.25rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.875rem; margin-bottom: 1rem; }
.calc-form .field { margin: 0 0 0.5rem; }
.calc-form label { font-size: 0.9375rem; }
.calc-form select.input { appearance: auto; min-height: 3rem; background: #fff; }
.calc-help { display: block; margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted); line-height: 1.45; }
.calc-head { margin: 0.75rem 0 0.25rem; padding-top: 0.75rem; border-top: 1px dashed var(--line); font-size: 1rem; color: var(--navy); }
.calc-check { padding: 0.375rem 0.125rem; font-size: 0.9375rem; }
.calc-check input:checked + span { color: var(--ink); text-decoration: none; }
.calc-res { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: var(--radius); padding: 0.875rem 1rem; margin-bottom: 0.75rem; }
.calc-res h3 { margin: 0 0 0.375rem; font-size: 1.0625rem; color: var(--navy); }
.calc-sub { margin: 0 0 0.5rem; font-size: 0.875rem; color: var(--muted); line-height: 1.5; }
.calc-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 0.4375rem 0; border-bottom: 1px solid var(--soft); font-size: 0.9375rem; }
.calc-line span { flex: 1; min-width: 0; }
.calc-line small { display: block; color: var(--muted); font-size: 0.8125rem; line-height: 1.45; margin-top: 0.125rem; word-break: keep-all; }
.calc-line b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; margin-top: 0.625rem; padding-top: 0.5rem; border-top: 2px solid var(--navy); }
.calc-total span { font-weight: 700; color: var(--navy); }
.calc-total b { font-size: 1.25rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.calc-notes { margin: 0.25rem 0 0; padding-left: 1.125rem; font-size: 0.875rem; line-height: 1.55; display: grid; gap: 0.25rem; }

/* 계산 기준값과 출처 (/car#calc/basis) */
.basis-link { display: flex; align-items: center; min-height: 2.75rem; margin-top: 0.5rem; font-size: 0.9375rem; font-weight: 650; color: var(--navy); }
.note .basis-link { min-height: 2.5rem; margin-top: 0.25rem; }
.basis-due { margin: 0 0 0.875rem; padding: 0.75rem 0.875rem; background: #fff4e5; border: 1px solid #f0b866; border-radius: 12px; font-size: 0.9375rem; line-height: 1.55; color: #7a4a00; }
.basis-due b { display: block; margin-bottom: 0.25rem; color: #8a4b00; }
.basis-list { display: grid; gap: 0.625rem; margin-bottom: 1rem; }
.basis-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.75rem 0.875rem; }
.basis-top { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.basis-top b { font-size: 1rem; color: var(--navy); word-break: keep-all; }
.basis-val { font-weight: 700; color: var(--navy); white-space: nowrap; font-variant-numeric: tabular-nums; }
.basis-item p { margin: 0.375rem 0 0.25rem; font-size: 0.9375rem; line-height: 1.55; word-break: keep-all; overflow-wrap: anywhere; }
.basis-item a { font-weight: 650; white-space: nowrap; }
.basis-item small { display: block; font-size: 0.875rem; color: var(--muted); line-height: 1.5; margin-top: 0.125rem; }
.basis-item .basis-note { color: #8a4b00; }
.basis-back { display: flex; justify-content: center; width: 100%; }