:root {
  --bg: #f2f4f6;
  --fg: #191f28;
  --muted: #6b7684;
  --faint: #8b95a1;
  --line: #e5e8eb;
  --card: #ffffff;
  --soft: #f9fafb;
  --accent: #3182f6;
  --accent-ink: #1b64da;
  --accent-soft: #e8f3ff;
  --btn: #3182f6; /* 흰 글씨가 올라가는 버튼 바탕 (다크에서도 진하게) */
  --a: #3182f6;
  --b: #f5801f;
  --win: #00a661;
  --win-soft: #e5f8ef;
  --hero-1: #0f1b33;
  --hero-2: #1b3a78;
  --shadow: 0 1px 2px rgba(0, 20, 50, .04), 0 4px 16px rgba(0, 20, 50, .05);
  --f-gasoline: #6b7684; --f-gasoline-bg: #eef0f3;
  --f-hybrid: #0a8f5a; --f-hybrid-bg: #e3f6ec;
  --f-ev: #1b64da; --f-ev-bg: #e8f3ff;
  --f-diesel: #8a5a00; --f-diesel-bg: #fff3dc;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101216; --fg: #e9ecef; --muted: #9aa3ad; --faint: #7a838d; --line: #262a31; --card: #181b20; --soft: #1e2228;
    --accent: #5b9dff; --accent-ink: #8ab8ff; --accent-soft: #16243b; --btn: #2a6de0; --a: #5b9dff; --b: #ff9a4a;
    --win: #2fd28a; --win-soft: #12291f; --hero-1: #0a1120; --hero-2: #14295a; --shadow: none;
    --f-gasoline: #aeb6bf; --f-gasoline-bg: #262a31; --f-hybrid: #4fe0a0; --f-hybrid-bg: #133024;
    --f-ev: #8ab8ff; --f-ev-bg: #16243b; --f-diesel: #ffc25c; --f-diesel-bg: #33270f;
  }
}
:root[data-theme="dark"] {
  --bg: #101216; --fg: #e9ecef; --muted: #9aa3ad; --faint: #7a838d; --line: #262a31; --card: #181b20; --soft: #1e2228;
  --accent: #5b9dff; --accent-ink: #8ab8ff; --accent-soft: #16243b; --btn: #2a6de0; --a: #5b9dff; --b: #ff9a4a;
  --win: #2fd28a; --win-soft: #12291f; --hero-1: #0a1120; --hero-2: #14295a; --shadow: none;
  --f-gasoline: #aeb6bf; --f-gasoline-bg: #262a31; --f-hybrid: #4fe0a0; --f-hybrid-bg: #133024;
  --f-ev: #8ab8ff; --f-ev-bg: #16243b; --f-diesel: #ffc25c; --f-diesel-bg: #33270f;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font: 16px/1.65 "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  letter-spacing: -.01em; word-break: keep-all; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-ink); text-underline-offset: 3px; }
.wrap, main { max-width: 880px; margin: 0 auto; padding: 0 16px; }
main { padding-bottom: 24px; }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 72px; }

/* ---- 헤더 ---- */
.top { position: sticky; top: 0; z-index: 10; background: var(--card); background: color-mix(in srgb, var(--card) 85%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; justify-content: space-between; align-items: center; height: 56px; gap: 12px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1.05rem; color: var(--fg); text-decoration: none; white-space: nowrap; }
.logo { display: block; width: 26px; height: 26px; border-radius: 7px; }
.brand-dim { font-weight: 600; color: var(--muted); } /* 숨은(흐리게) + 차값(진하게) */
.top nav { display: flex; gap: 4px; overflow-x: auto; }
.top nav a { padding: 6px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: .93rem; font-weight: 600; white-space: nowrap; }
.top nav a:hover { background: var(--soft); color: var(--fg); }
.top nav a[aria-current] { color: var(--accent-ink); background: var(--accent-soft); }

/* ---- 공통 글자 ---- */
h1 { font-size: 1.75rem; line-height: 1.3; letter-spacing: -.03em; margin: 20px 0 16px; font-weight: 800; }
h2 { font-size: 1.2rem; letter-spacing: -.02em; margin: 0 0 12px; font-weight: 700; }
h3 { font-size: 1.02rem; margin: 20px 0 8px; }
.crumb { color: var(--faint); font-size: .85rem; margin: 24px 0 0; }
.crumb a { color: var(--faint); text-decoration: none; }
.lead { color: var(--muted); margin-top: 0; }
.note { color: var(--muted); font-size: .88rem; }
.sources { font-size: .84rem; color: var(--muted); padding-left: 18px; }
.links { padding-left: 18px; margin: 0; }
.links li { margin: 4px 0; }

/* 본문 섹션은 흰 카드로 */
article > section, main > section:not(.block), .paper {
  background: var(--card); border-radius: 20px; padding: 22px 20px; margin: 12px 0; box-shadow: var(--shadow);
}
.paper h2 { margin-top: 28px; }
.paper > section { padding: 0; box-shadow: none; margin: 28px 0 0; }
.paper h1 { margin-top: 12px; }

/* ---- 연료 배지 ---- */
.fuel { display: inline-block; white-space: nowrap; padding: 2px 8px; border-radius: 6px; font-size: .75rem; font-weight: 700; line-height: 1.5; vertical-align: middle; letter-spacing: 0; }
.f-gasoline { color: var(--f-gasoline); background: var(--f-gasoline-bg); }
.f-hybrid { color: var(--f-hybrid); background: var(--f-hybrid-bg); }
.f-ev { color: var(--f-ev); background: var(--f-ev-bg); }
.f-diesel { color: var(--f-diesel); background: var(--f-diesel-bg); }

/* ---- 결론 (가이드·차종 페이지) ---- */
.verdict { background: var(--accent-soft); color: var(--fg); border-radius: 16px; padding: 18px 20px; font-size: 1.08rem; font-weight: 700; line-height: 1.55; margin: 0 0 12px; }

/* ---- 대결 결과판 ---- */
.cmp-title { font-size: 1.45rem; }
.cmp-title .fuel { font-size: .75rem; margin-right: 2px; position: relative; top: -2px; }
.h-vs { color: var(--faint); font-weight: 600; font-size: .8em; margin: 0 4px; }
.board { background: var(--card); border-radius: 24px; padding: 24px 20px 20px; box-shadow: var(--shadow); text-align: center; }
.board:empty { display: none; }
.sb-cond { margin: 0; color: var(--muted); font-size: .9rem; font-weight: 600; }
.sb-win { margin: 10px 0 0; font-size: 1.1rem; font-weight: 700; }
.sb-big { margin: 2px 0 18px; font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.3; }
.sb-big em { font-style: normal; color: var(--win); font-size: 1.45em; font-variant-numeric: tabular-nums; }
.sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; text-align: left; }
.vs { align-self: center; font-size: .75rem; font-weight: 800; color: var(--faint); }
.side { display: grid; gap: 4px; align-content: start; padding: 14px; border-radius: 16px; background: var(--soft); border: 2px solid transparent; position: relative; }
.side-name::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.side.a .side-name::before { background: var(--a); } .side.b .side-name::before { background: var(--b); }
.side.win { border-color: var(--win); background: var(--win-soft); }
.side-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; min-height: 22px; }
.tag { white-space: nowrap; font-size: .75rem; font-weight: 800; color: #fff; background: var(--win); border-radius: 999px; padding: 1px 8px; }
.side-name { font-size: .92rem; line-height: 1.4; }
.side-total { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.side-month { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.sb-month { margin: -12px 0 16px; font-size: .95rem; font-weight: 700; color: var(--muted); }
.sum-line { color: var(--muted); font-size: .88rem; margin: 10px 4px 4px; }
.be { color: var(--fg); margin: 8px 4px 12px; font-weight: 600; }
.region { margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: var(--card); border-left: 4px solid var(--accent); font-size: .95rem; box-shadow: var(--shadow); }
.car-region { display: grid; gap: 8px; margin: 0 0 12px; padding: 14px 16px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow); border-left: 4px solid var(--accent); }
.car-region label { font-weight: 700; font-size: .93rem; }
.car-region select { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--soft); color: var(--fg); font: inherit; font-weight: 700; }
.rc-warn { text-align: left !important; color: var(--muted) !important; }
.price-used { margin: -4px 4px 12px; font-size: .88rem; font-weight: 700; color: var(--accent); }
#board, #summary, #breakeven, #regional, .receipts { transition: opacity .15s; }
.restoring #board, .restoring #summary, .restoring #breakeven, .restoring #regional, .restoring .receipts { opacity: .3; }
.region-go { white-space: nowrap; font-size: .9rem; font-weight: 700; }
@media (max-width: 640px) { .region-go { display: block; width: fit-content; padding: 8px 0 2px; } } /* 폰: 줄을 바꿔 누를 자리를 넓힌다 */
.more { margin: 0 0 12px; padding: 12px 16px; border-radius: 14px; background: var(--accent-soft); font-size: .93rem; }
.more a { font-weight: 700; }

/* ---- 조건 바꾸기 ---- */
.controls > label#regionBox, .controls > .prices { grid-column: 1 / -1; }
.prices { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--soft); }
.prices summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.prices .note { margin: 8px 0; }
.price-rows { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
.price-rows label { display: grid; gap: 4px; font-size: .85rem; color: var(--muted); font-weight: 600; }
.price-rows label[hidden] { display: none; }
.price-rows .unit { font-weight: 500; color: var(--faint); }
.price-rows input { width: 130px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-weight: 700; }
#priceReset { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-size: .85rem; cursor: pointer; }
.controls > label[hidden] { display: none; }
.controls { display: grid; gap: 16px; grid-template-columns: 1fr auto; align-items: end; }
.controls label { display: grid; gap: 8px; font-size: .9rem; color: var(--muted); font-weight: 600; }
.controls output { color: var(--fg); font-weight: 800; font-size: 1.1rem; }
.km-field { display: grid; gap: 8px; }
.km-field > label { font-size: .9rem; color: var(--muted); font-weight: 600; }
.km-field > label small { font-weight: 500; color: var(--faint); font-size: .8rem; margin-left: 4px; }
.km-field > label small::before { content: "✎ "; }
.km-num { display: flex; align-items: baseline; gap: 4px; color: var(--fg); font-weight: 800; font-size: 1.15rem; }
.km-num input { width: 4.4em; font: inherit; font-size: 1.25rem; color: var(--fg); padding: 2px 4px; border: 0; border-bottom: 2px dashed var(--accent); border-radius: 0; background: transparent; -moz-appearance: textfield; appearance: textfield; }
.km-num input:focus { outline: none; border-bottom-style: solid; background: var(--accent-soft); }
.km-num input::-webkit-outer-spin-button, .km-num input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.controls input[type=range] { width: 100%; accent-color: var(--accent); height: 32px; margin: 0; }
.km-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.km-quick button { flex: 1 1 0; min-width: 52px; min-height: 40px; padding: 6px 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.km-quick button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
@media (max-width: 640px) {
  .controls { grid-template-columns: 1fr; }
  .controls select, .price-rows input, .car-region select, .pickers select { font-size: 16px; min-height: 44px; }
  .controls input[type=range] { height: 40px; }
}
select { font: inherit; }
.controls select { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--soft); color: var(--fg); font-weight: 700; }

/* ---- 그래프 ---- */
.chart { width: 100%; height: auto; display: block; }
.chart-narrow { display: none; }
.chart-narrow text { font-size: 13px; }
.chart text { fill: var(--faint); font-size: 12px; }
.chart .grid { stroke: var(--line); }
.chart .la { stroke: var(--a); stroke-width: 3; fill: none; stroke-linejoin: round; }
.chart .lb { stroke: var(--b); stroke-width: 3; fill: none; stroke-linejoin: round; }
.chart .da { fill: var(--a); } .chart .db { fill: var(--b); }
.legend { font-size: .88rem; color: var(--muted); margin: -4px 0 8px; font-weight: 600; }
.legend span { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; margin: 0 6px 0 10px; }
.legend span:first-child { margin-left: 0; }
.legend .ka { background: var(--a); } .legend .kb { background: var(--b); }

/* ---- 표 ---- */
/* 옆으로 밀 수 있는 표: 가려진 쪽 가장자리에 그림자가 생긴다 (끝까지 밀면 사라짐) */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: linear-gradient(to right, var(--card) 30%, transparent) left / 28px 100% no-repeat local, linear-gradient(to left, var(--card) 30%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .14), transparent) left / 12px 100% no-repeat scroll, radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .14), transparent) right / 12px 100% no-repeat scroll; }
table.cost { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .93rem; }
.cost th, .cost td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.cost th[scope=row], .cost thead th:first-child, .cost .l { text-align: left; font-weight: 500; color: var(--muted); white-space: nowrap; }
.cost .group th { white-space: normal; }
.cost thead th { font-size: .85rem; vertical-align: bottom; color: var(--fg); font-weight: 700; white-space: normal; border-bottom: 2px solid var(--line); }
.cost .group th { text-align: left; font-weight: 800; color: var(--fg); padding-top: 20px; border-bottom: 0; font-size: .9rem; }
.cost .sum td, .cost .sum th { font-weight: 800; color: var(--fg); background: var(--soft); }
.cost .sum:last-child td, .cost .sum:last-child th { font-size: 1rem; }
.whatif th, .whatif td { padding: 10px 5px; font-size: .9rem; }
.whatif td:last-child { text-align: left; white-space: normal; word-break: keep-all; font-size: .8rem; }
.whatif .now th, .whatif .now td { background: var(--soft); }

/* ---- 공유 ---- */
.share { text-align: center; }
.share button { font: inherit; font-weight: 700; background: #fee500; color: #191919; border: 0; border-radius: 14px; padding: 14px 28px; cursor: pointer; font-size: 1rem; }
.share button:hover { filter: brightness(.97); }
#shareMsg { display: block; margin-top: 6px; color: var(--muted); font-size: .88rem; }

/* ---- 직접 비교: 차 고르기 ---- */
.pickers { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: end; margin: 0 0 12px; }
.pickers label { display: grid; gap: 6px; font-size: .85rem; color: var(--muted); font-weight: 600; min-width: 0; }
.pickers select { width: 100%; padding: 14px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--fg); font-weight: 700; box-shadow: var(--shadow); }
.pickers button { font: inherit; font-size: 1.1rem; width: 44px; height: 44px; margin-bottom: 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--accent-ink); cursor: pointer; box-shadow: var(--shadow); }
#pick > .lead { margin-bottom: 20px; }

/* ---- 홈: 히어로 ---- */
.hero { background: radial-gradient(1200px 400px at 80% -10%, #2a5bd7 0%, transparent 60%), linear-gradient(160deg, var(--hero-1), var(--hero-2)); color: #fff; padding: 48px 0 40px; }
.eyebrow { display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .82rem; font-weight: 700; color: #cfe0ff; }
.hero h1 { font-size: 2.4rem; line-height: 1.22; margin: 0 0 14px; letter-spacing: -.04em; }
.hero-lead { color: #c3cfe6; max-width: 560px; margin: 0 0 24px; }
.quick { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: 10px; align-items: end; background: var(--card); color: var(--fg); border-radius: 20px; padding: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); border: 1px solid color-mix(in srgb, var(--fg) 6%, transparent); }
.quick label { display: grid; gap: 4px; min-width: 0; }
.quick label span { font-size: .78rem; font-weight: 700; color: var(--muted); }
.quick select { width: 100%; padding: 12px 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--soft); color: var(--fg); font-weight: 700; }
.q-vs { align-self: center; margin-top: 18px; font-size: .75rem; font-weight: 800; color: var(--faint); }
.quick button { font: inherit; font-weight: 800; padding: 12px 20px; border: 0; border-radius: 12px; background: var(--btn); color: #fff; cursor: pointer; white-space: nowrap; }
.quick button:hover { filter: brightness(.93); }
.stats { list-style: none; display: flex; gap: 28px; padding: 0; margin: 24px 0 0; }
.stats b { display: block; font-size: 1.6rem; font-weight: 800; line-height: 1.2; }
.stats span { font-size: .82rem; color: #9fb3d9; }

/* ---- 홈: 목록 ---- */
.block { margin: 40px 0 0; }
.block h2 { font-size: 1.35rem; margin-bottom: 4px; }
.block-sub { color: var(--muted); margin: 0 0 14px; font-size: .93rem; }
.mcards, .ctiles, .gcards { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.mcards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mcard { display: grid; gap: 6px; align-content: start; height: 100%; padding: 18px; background: var(--card); border-radius: 20px; text-decoration: none; color: var(--fg); box-shadow: var(--shadow); border: 1px solid transparent; transition: transform .15s, border-color .15s; }
.mcard:hover { transform: translateY(-2px); border-color: var(--accent); }
.mc-badges { display: flex; align-items: center; gap: 6px; }
.mc-badges i, .mc-title i { font-style: normal; color: var(--faint); font-size: .8rem; font-weight: 600; }
.mc-title { font-size: 1rem; line-height: 1.45; margin-bottom: 6px; }
.mc-win { font-size: .85rem; color: var(--muted); margin-top: auto; }
.mc-gap { font-size: 1rem; font-weight: 700; }
.mc-gap em { font-style: normal; color: var(--win); font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; }
.ctiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ctile { display: grid; gap: 4px; height: 100%; padding: 16px; background: var(--card); border-radius: 18px; text-decoration: none; color: var(--fg); box-shadow: var(--shadow); border: 1px solid transparent; transition: border-color .15s; }
.ctile:hover { border-color: var(--accent); }
.ct-maker { font-size: .78rem; color: var(--faint); font-weight: 600; }
.ctile b { font-size: 1.1rem; }
.ct-fuels { display: flex; gap: 4px; flex-wrap: wrap; }
.ct-from { font-size: .85rem; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; }
.gcards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.gcards a { display: grid; gap: 6px; height: 100%; padding: 18px; background: var(--card); border-radius: 18px; text-decoration: none; color: var(--fg); box-shadow: var(--shadow); border: 1px solid transparent; }
.gcards a:hover { border-color: var(--accent); }
.gcards span { color: var(--muted); font-size: .88rem; line-height: 1.55; }

/* ---- 접기 ---- */
details { border-bottom: 1px solid var(--line); }
details > summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
details[open] > summary { padding-bottom: 4px; }

/* ---- 푸터 ---- */
footer { color: var(--faint); font-size: .83rem; margin-top: 48px; padding: 28px 0 40px; border-top: 1px solid var(--line); background: var(--card); }
.foot-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--fg); font-size: .95rem; }
.foot-brand .logo { width: 22px; height: 22px; border-radius: 6px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.foot-links a { color: var(--faint); padding: 6px 0; }
.contact-mail { font-weight: 700; }

@media (max-width: 640px) {
  h1 { font-size: 1.45rem; }
  .cmp-title { font-size: 1.25rem; }
  .hero { padding: 32px 0 28px; }
  .hero h1 { font-size: 1.85rem; }
  .quick { grid-template-columns: 1fr; }
  .q-vs { display: none; }
  .quick button { padding: 14px; }
  .stats { gap: 20px; }
  .stats b { font-size: 1.35rem; }
  .sides { grid-template-columns: 1fr 1fr; }
  .vs { display: none; }
  .side { padding: 12px; }
  .side-total { font-size: 1.1rem; }
  .sb-big { font-size: 1.35rem; }
  .controls { grid-template-columns: 1fr; }
  .pickers { grid-template-columns: 1fr; }
  .pickers button { justify-self: center; transform: rotate(90deg); margin: 0; }
  article > section, main > section:not(.block), .paper { padding: 18px 16px; border-radius: 18px; }
  .cost { font-size: .8rem; }
  .cost th[scope=row] { white-space: normal; word-break: keep-all; overflow-wrap: normal; min-width: 4.5em; }
  .cost th, .cost td { padding: 8px 4px; }
  .chart-wide { display: none; }
  .chart-narrow { display: block; }
  .top nav a { padding: 6px 7px; font-size: .88rem; }
  .brand { font-size: .98rem; }
}
.car-meta { margin: 0 0 12px; color: var(--muted); font-weight: 600; font-size: .9rem; }
.pick-cta { margin: 0 0 12px; }
.pick-cta a { display: block; padding: 14px 18px; border-radius: 14px; background: var(--btn); color: #fff; font-weight: 700; text-decoration: none; }
.pick-cta a:hover { filter: brightness(.93); }

/* ---- 일러스트 ---- */
.car .paint { fill: var(--paint); }
.car .glass { fill: var(--glass); }
.car .tire { fill: var(--tire); }
.car .hub { fill: var(--hub); }
.car .lamp { fill: #ffd76a; }
.car .shadow { fill: var(--fg); opacity: .08; }
.car .mark { fill: #fff; }
.car .leaf { fill: #fff; stroke: var(--paint); stroke-width: 1; }
.c-gasoline { --paint: #5b6b82; }
.c-hybrid { --paint: #12a86b; }
.c-ev { --paint: #3182f6; }
.c-diesel { --paint: #b07a16; }
:root { --glass: #d9e6f7; --tire: #232a33; --hub: #c7cdd6; }
:root[data-theme="dark"] { --glass: #2b3b52; --tire: #0b0d10; --hub: #5a636e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: #2b3b52; --tire: #0b0d10; --hub: #5a636e; } }
.duel { width: 100%; height: auto; display: block; margin: -2px 0 6px; padding: 10px 6px 4px; border-radius: 14px; background: var(--soft); }
.vs-t { font: 800 13px "Pretendard Variable", sans-serif; fill: var(--faint); }
.ct-art { width: 100%; height: auto; display: block; padding: 8px 6px 2px; margin-bottom: 6px; border-radius: 12px; background: var(--soft); }
.side-art { width: 72%; max-width: 150px; height: auto; display: block; margin: 0 auto 4px; }
.car-arts { display: flex; gap: 12px; margin: 0 0 12px; }
.car-arts figure { flex: 1; max-width: 260px; margin: 0; padding: 16px 16px 10px; border-radius: 20px; background: var(--card); box-shadow: var(--shadow); text-align: center; }
.car-art { width: 100%; height: auto; display: block; margin-bottom: 6px; }
.gcards a { grid-template-columns: auto 1fr; column-gap: 12px; align-content: start; }
.gcards a > b, .gcards a > span:not(.gicon) { grid-column: 2; }
.gicon { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); }
.gicon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hero-top { display: grid; grid-template-columns: 1fr 300px; gap: 28px; align-items: center; margin-bottom: 24px; }
.hero-top .hero-lead { margin-bottom: 0; }
/* 히어로 영수증: 가격표 → 안 보이는 돈 → 진짜 차값 */
.receipt { display: block; padding: 18px 20px 14px; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; transition: background .15s; }
.receipt:hover { background: rgba(255, 255, 255, .11); }
.receipt p, .receipt ul { margin: 0; padding: 0; list-style: none; }
.rc-head { font-size: .82rem; font-weight: 700; color: #9fb3d9; margin-bottom: 8px !important; }
.rc-row { display: flex; justify-content: space-between; gap: 12px; }
.rc-tag { font-size: 1rem; font-weight: 700; }
.rc-cut { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px !important; font-size: .75rem; font-weight: 700; color: #ffd76a; }
.rc-cut::before, .rc-cut::after { content: ""; flex: 1; border-top: 1px dashed rgba(255, 215, 106, .5); }
.rc-hidden .rc-row { font-size: .9rem; color: #ffe39a; padding: 2px 0; }
.rc-hidden b { font-weight: 700; }
.rc-total { margin-top: 10px !important; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .25); align-items: baseline; font-weight: 700; }
.rc-total b { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.rc-month { font-size: .85rem; color: #9fb3d9; margin-top: 2px !important; }
.receipt.light .rc-month { color: var(--muted); }
.rc-note { margin-top: 4px !important; font-size: .75rem; color: #9fb3d9; text-align: right; }
@media (max-width: 640px) {
  /* 폰: 차 고르기가 먼저, 영수증은 숫자(통계) 아래로 */
  .hero .wrap { display: flex; flex-direction: column; }
  .hero-top { display: contents; }
  .hero-top > div:first-child { margin-bottom: 20px; }
  .receipt { order: 3; margin-top: 24px; }
  .car-arts figure { padding: 12px 10px 8px; }
}
.car .seam { stroke: #000; stroke-opacity: .18; stroke-width: .8; fill: none; }
.car .seam-h { fill: #000; opacity: .22; }
.car .tail { fill: #ff5a5a; }

/* ---- 차 사진 ---- */
picture { display: contents; }
img.photo { display: block; object-fit: cover; background: var(--soft); }
.duel-photo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 0; background: none; }
.duel-photo.one { grid-template-columns: 1fr; }
.duel-photo .dp { width: 100%; height: 96px; border-radius: 12px; }
.duel-photo.one .dp { height: 130px; }
.dp-vs { font-size: .75rem; font-weight: 800; color: var(--faint); }
.ct-art.photo { width: 100%; height: 96px; padding: 0; border-radius: 12px; }
.side-art.photo { width: 100%; max-width: none; height: 110px; border-radius: 12px; margin: 0 0 6px; }
.car-photo { position: relative; margin: 0 0 12px; }
.car-photo .cp { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 20px; }
.car-photo figcaption { position: absolute; left: 14px; bottom: 14px; display: flex; gap: 6px; }
.car-photo figcaption .fuel { box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.credits td, .credits th { white-space: normal; text-align: left; overflow-wrap: normal; }
.credits td:nth-child(3) { white-space: nowrap; }
.credits td:nth-child(2) { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .car-photo .cp { aspect-ratio: 16 / 10; }
  .duel-photo .dp { height: 84px; }
  .side-art.photo { height: 84px; }
}
.sb-photo { margin: -24px -20px 18px; }
.sb-photo .sbp { width: 100%; height: auto; aspect-ratio: 16 / 5; object-position: 50% 62%; border-radius: 24px 24px 0 0; } /* 결과 숫자가 첫 화면에 보이게 낮게 */
@media (max-width: 640px) { .sb-photo .sbp { aspect-ratio: 2 / 1; } }
.photo-credit { margin: -4px 4px 12px; font-size: .75rem; color: var(--faint); }
.photo-credit a { color: var(--faint); }
.mcards.mini { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.mcards.mini .mc-title { margin-bottom: 0; font-size: .93rem; }
article > section.block { background: none; box-shadow: none; padding: 0; margin-top: 28px; }

/* ---- 보조금 지도 ---- */
:root { --m0: #e5e8eb; --m1: #d6e6ff; --m2: #a8c9ff; --m3: #6aa2fb; --m4: #3182f6; --m5: #1447b8; }
:root[data-theme="dark"] { --m0: #2a2f37; --m1: #1d3155; --m2: #22477f; --m3: #2e64b3; --m4: #4b8bf0; --m5: #9cc2ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --m0: #2a2f37; --m1: #1d3155; --m2: #22477f; --m3: #2e64b3; --m4: #4b8bf0; --m5: #9cc2ff; } }
.evmap { margin: 0 0 8px; }
.map-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.map-tabs button { font: inherit; font-size: .88rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; }
.map-tabs button[aria-selected="true"] { background: var(--btn); border-color: var(--btn); color: #fff; }
.map-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 8px; }
.map-info { margin: 0; font-weight: 700; min-height: 1.6em; flex: 1 1 220px; }
.map-box { position: relative; }
.map-back { position: absolute; top: 0; left: 0; z-index: 1; font: inherit; font-size: .85rem; font-weight: 700; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--accent); cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
.kmap { width: 100%; max-width: 520px; height: auto; display: block; margin: 0 auto; }
.kmap .units path { stroke-width: .5; vector-effect: non-scaling-stroke; cursor: pointer; transition: opacity .2s; }
/* 채움과 같은 색 테두리로 조각 사이 틈을 메우고, 지자체 사이 경계는 .mesh가 흰 선으로 그린다 */
.kmap .units .b0 { stroke: var(--m0); } .kmap .units .b1 { stroke: var(--m1); } .kmap .units .b2 { stroke: var(--m2); } .kmap .units .b3 { stroke: var(--m3); } .kmap .units .b4 { stroke: var(--m4); } .kmap .units .b5 { stroke: var(--m5); }
.kmap .mesh { fill: none; stroke: var(--card); stroke-width: .6; vector-effect: non-scaling-stroke; pointer-events: none; }
.kmap .hl path { fill: none; stroke: var(--fg); stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.kmap .hl [data-o] { display: none; }
.kmap .units path.dim { opacity: .3; }
.kmap .sido { fill: none; stroke: var(--card); stroke-width: 1.6; vector-effect: non-scaling-stroke; pointer-events: none; }
.b0 { fill: var(--m0); } .b1 { fill: var(--m1); } .b2 { fill: var(--m2); } .b3 { fill: var(--m3); } .b4 { fill: var(--m4); } .b5 { fill: var(--m5); }
.map-legend { list-style: none; padding: 0; margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--muted); justify-content: center; }
.map-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.map-legend i.b0 { background: var(--m0); } .map-legend i.b1 { background: var(--m1); } .map-legend i.b2 { background: var(--m2); } .map-legend i.b3 { background: var(--m3); } .map-legend i.b4 { background: var(--m4); } .map-legend i.b5 { background: var(--m5); }
.map-pick { margin: 0; }
.map-pick select { font: inherit; font-size: .92rem; font-weight: 600; color: var(--fg); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; min-width: 150px; }
/* 폰: 지도를 누르면 금액 줄이 화면 밖에 있지 않게 헤더 아래에 붙인다 */
@media (max-width: 640px) {
  .map-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -4px; padding-inline: 4px; }
  .map-tabs button { flex: none; }
  .map-bar { position: sticky; top: 56px; z-index: 2; background: var(--card); padding: 8px 0; flex-direction: column; align-items: stretch; }
  .map-pick select { width: 100%; }
  .map-info { flex: none; font-size: .95rem; }
}
/* 표 제목은 띄어쓰기에서만 줄바꿈 (국고보조금은 한 줄, 긴 차 이름은 두 줄) */
.cost thead th { white-space: normal; word-break: keep-all; overflow-wrap: normal; }
.cost td.txt, .cost th.txt { white-space: normal; text-align: left; min-width: 13em; word-break: keep-all; overflow-wrap: anywhere; }
/* 트림 이름은 길어서 칸 안에서 줄바꿈 (숫자 칸은 한 줄 유지) */
.cost tr.trim td { white-space: normal; word-break: keep-all; min-width: 7em; font-size: .85em; }
@media (max-width: 640px) { .cost td.txt, .cost th.txt { min-width: 9em; } }

/* ---- 차종 페이지 영수증 (밝은 카드) ---- */
:root { --rc-gold: #a15c00; }
:root[data-theme="dark"] { --rc-gold: #ffd76a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --rc-gold: #ffd76a; } }
.receipts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 0 0 12px; }
.receipt.light { background: var(--card); border: 1px solid var(--line); color: var(--fg); box-shadow: var(--shadow); }
.receipt.light .rc-head { color: var(--fg); display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.receipt.light .rc-cut { color: var(--rc-gold); }
.receipt.light .rc-cut::before, .receipt.light .rc-cut::after { border-top-color: color-mix(in srgb, var(--rc-gold) 45%, transparent); }
.receipt.light .rc-hidden .rc-row { color: var(--rc-gold); }
.receipt.light .rc-total { border-top-color: var(--line); }
.receipt.light .rc-note { color: var(--faint); }
.rc-hidden .rc-row.rc-minus, .receipt.light .rc-hidden .rc-row.rc-minus { color: var(--win); } /* 보조금처럼 줄어드는 돈 */
.receipt:not(.light) .rc-hidden .rc-row.rc-minus { color: #6ff0b4; }

/* ---- 홈: 숨은 차값 순위 ---- */
.hrank { list-style: none; counter-reset: r; margin: 0; padding: 8px; background: var(--card); border-radius: 20px; box-shadow: var(--shadow); }
.hrank li { counter-increment: r; }
.hrank a { display: grid; grid-template-columns: 28px minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 10px; border-radius: 14px; color: var(--fg); text-decoration: none; }
.hrank a:hover { background: var(--soft); }
.hrank a::before { content: counter(r); font-weight: 800; color: var(--faint); text-align: center; }
.hrank li:first-child a::before { color: var(--rc-gold); }
.hr-name { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-bar { height: 10px; border-radius: 99px; background: var(--soft); overflow: hidden; }
.hr-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ffc83d, #f5801f); }
.hrank b { font-variant-numeric: tabular-nums; color: var(--rc-gold); white-space: nowrap; }
.hr-more { margin: 10px 4px 0; font-weight: 700; }
@media (max-width: 640px) {
  .hrank a { grid-template-columns: 24px minmax(0, 1fr) auto; row-gap: 6px; }
  .hr-bar { grid-column: 2 / 4; grid-row: 2; }
}
/* 폰: 홈의 큰 대결 카드는 사진 왼쪽·글 오른쪽 가로형 (세로로 쌓으면 카드 하나가 한 화면이라 홈이 너무 길다) */
@media (max-width: 640px) {
  .mcards:not(.mini) .mcard { grid-template-columns: 104px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; padding: 12px; border-radius: 16px; }
  .mcards:not(.mini) .mcard > .duel-photo { grid-row: 1 / span 4; align-self: center; margin: 0; grid-template-columns: 1fr; gap: 4px; }
  .mcards:not(.mini) .duel-photo .dp { height: 44px; border-radius: 8px; }
  .mcards:not(.mini) .duel-photo.one .dp { height: 78px; }
  .mcards:not(.mini) .dp-vs { display: none; }
  .mcards:not(.mini) .mc-title { font-size: .95rem; margin: 2px 0 0; }
  .mcards:not(.mini) .mc-win { margin-top: 2px; }
  .mcards:not(.mini) .mc-gap em { font-size: 1.15rem; }
}
/* 폰: 작은 대결 카드는 두 개씩 (가이드·차종·404 아래 목록) */
@media (max-width: 640px) {
  .mcards.mini { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mcards.mini .mcard { padding: 10px; border-radius: 16px; }
  .mcards.mini .duel-photo .dp, .mcards.mini .duel-photo.one .dp { height: 64px; border-radius: 10px; }
  .mcards.mini .mc-title { font-size: .85rem; }
  .mcards.mini .mc-badges .fuel { font-size: .68rem; padding: 1px 6px; }
}