:root {
  --navy: #0f2a44;
  --navy-2: #1d4f80;
  --sun: #f6b31b;
  --sun-soft: #fff4d6;
  --ink: #1b2430;
  --ink-2: #4a5666;
  --muted: #7a8696;
  --line: #e3e8ee;
  --bg: #f6f8fa;
  --card: #ffffff;
  --ok: #1f8a5b;
  --ok-soft: #e6f5ee;
  --warn: #b26a00;
  --warn-soft: #fff3e0;
  --bad: #c0392b;
  --bad-soft: #fdecea;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 42, 68, .06), 0 4px 16px rgba(15, 42, 68, .06);
  --font: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .5em; }
p { margin: 0 0 .75em; }
button { font: inherit; }

/* ── 상단바 ── */
.topbar { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.topbar-inner { max-width: 1040px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; }
.brand { color: var(--navy); font-weight: 800; text-decoration: none; letter-spacing: -.01em; display: inline-flex; align-items: center; min-height: 44px; }
.brand span { font-weight: 600; color: var(--ink-2); margin-left: 6px; font-size: .9em; }
.topbar-cta { font-size: .9rem; font-weight: 700; color: var(--navy); text-decoration: none; border: 1.5px solid var(--navy); border-radius: 999px; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; }
.topbar-inner { padding-top: 6px; padding-bottom: 6px; }

/* ── 공통 ── */
#app { max-width: 1040px; margin: 0 auto; padding: 0 16px 120px; }
.view { display: none; }
.view.is-active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 12px; padding: 14px 20px; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .05s, background .15s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: #163a5e; }
.btn-secondary { background: #fff; color: var(--navy); border: 1.5px solid var(--line); }
.btn-lg { font-size: 1.08rem; padding: 17px 26px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-text { background: none; border: 0; color: var(--ink-2); padding: 0 4px; min-height: 44px; cursor: pointer; font-weight: 600; }
.section { margin: 40px 0; }
.section-title { font-size: 1.2rem; }
.badge { display: inline-block; font-size: .82rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-assumed { background: #eef1f5; color: var(--ink-2); font-weight: 600; }
.badge-confirmed { background: var(--ok-soft); color: var(--ok); font-weight: 600; }

/* ── 히어로 ── */
.hero { display: grid; gap: 24px; padding: 20px 0 8px; }
.eyebrow { color: var(--navy-2); font-weight: 700; font-size: .9rem; margin-bottom: 10px; }
.hero h1 { font-size: clamp(1.5rem, 6.2vw, 2.5rem); letter-spacing: -.02em; color: var(--navy); }
.hero .lead { font-size: 1rem; color: var(--ink-2); margin-bottom: 8px; }
.hero-points { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink-2); font-size: .92rem; }
.hero-points li::before { content: "✓"; color: var(--ok); font-weight: 800; margin-right: 6px; }
.hero-art { display: none; } /* 휴대폰에서는 첫 질문이 바로 보이도록 그림을 뺀다 */
.hero-art svg { width: 100%; max-width: 420px; display: block; margin: 0 auto; }
.hero .btn-lg { width: 100%; }
@media (min-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: start; padding-top: 40px; }
  .hero-art { display: block; position: sticky; top: 96px; }
  .hero .btn-lg { width: auto; }
}

.needs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.need { background: var(--card); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; }
.need strong { color: var(--navy); }
.need span { font-size: .9rem; color: var(--ink-2); }
@media (min-width: 820px) { .needs { grid-template-columns: repeat(4, 1fr); } }

.model-list { display: grid; gap: 10px; }
.models-more { box-shadow: none; border: 1px solid var(--line); }
.models-more[open] .model-list { margin-top: 4px; }
.plain { color: var(--navy-2); font-weight: 700; margin: -2px 0 6px; }
.cmp-item .plain { font-size: .88rem; margin: -4px 0 8px; }
.cmp-all { margin-top: 20px; }
.cmp-all[open] summary { margin-bottom: 6px; }
.model-item { background: var(--card); border-radius: var(--radius); padding: 14px 16px; border: 1px solid var(--line); }
.model-item strong { display: block; color: var(--navy); }
.model-item span { font-size: .9rem; color: var(--ink-2); }
@media (min-width: 820px) { .model-list { grid-template-columns: repeat(3, 1fr); } }

.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; }
.steps li { counter-increment: s; background: var(--card); border-radius: var(--radius); padding: 14px 16px 14px 56px; position: relative; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.steps li::before { content: counter(s); position: absolute; left: 16px; top: 14px; width: 28px; height: 28px; border-radius: 50%; background: var(--sun); color: var(--navy); font-weight: 800; display: grid; place-items: center; }
.steps span { color: var(--ink-2); font-size: .92rem; }

/* ── 진단 ── */
.flow { max-width: 560px; }
.q-card { background: var(--card); border-radius: 16px; padding: 18px 16px; box-shadow: var(--shadow); border: 1px solid var(--line); animation: rise .28s ease; scroll-margin-top: 80px; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.done-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 4px 0 14px; min-height: 48px; margin-bottom: 8px; }
.dr-label { flex: none; width: 76px; font-size: .82rem; color: var(--muted); }
.dr-value { flex: 1; min-width: 0; font-weight: 700; color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-edit { flex: none; color: var(--navy-2); }
.flow-end { margin-top: 8px; }
.q-title { font-size: clamp(1.2rem, 4.8vw, 1.45rem); color: var(--navy); letter-spacing: -.01em; }
.q-why { display: flex; gap: 8px; background: var(--sun-soft); color: #6b4e00; border-radius: 10px; padding: 10px 12px; font-size: .9rem; margin-bottom: 18px; }
.q-why::before { content: "?"; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--sun); color: var(--navy); font-weight: 800; font-size: .8rem; display: grid; place-items: center; margin-top: 1px; }
.options { display: grid; gap: 10px; }
.option { text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 16px; font-size: 1rem; font-weight: 600; color: var(--ink); cursor: pointer; transition: border-color .15s, background .15s; min-height: 56px; }
.option:hover { border-color: var(--navy-2); }
.option.is-selected { border-color: var(--navy); background: #eef4fa; color: var(--navy); }
.option-multi { display: flex; align-items: center; gap: 12px; }
.option-multi .check { flex: none; width: 22px; height: 22px; border: 2px solid #b8c3cf; border-radius: 6px; display: grid; place-items: center; background: #fff; }
.option-multi.is-selected .check { background: var(--navy); border-color: var(--navy); }
.option-multi.is-selected .check::after { content: "✓"; color: #fff; font-size: 14px; font-weight: 800; line-height: 1; }
.multi-next { margin-top: 12px; }
.chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chips .option { text-align: center; padding: 12px 6px; min-height: 48px; }
@media (min-width: 480px) { .chips { grid-template-columns: repeat(4, 1fr); } }
.amount-row { display: flex; gap: 8px; }
.amount-row input { flex: 1; min-width: 0; font: inherit; font-size: 1.1rem; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; }
.amount-row input:focus, .field input:focus, .field textarea:focus, .field select:focus { outline: 0; border-color: var(--navy-2); box-shadow: 0 0 0 3px rgba(29,79,128,.15); }
.unit-toggle { display: flex; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.unit-toggle button { border: 0; background: #fff; padding: 0 14px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.unit-toggle button.is-selected { background: var(--navy); color: #fff; }
.amount-hint { font-size: .88rem; color: var(--muted); margin: 6px 0 14px; min-height: 1.4em; }
.divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; margin: 18px 0 10px; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.error { color: var(--bad); font-size: .88rem; }

/* ── 지붕 그리기(지도) ── */
.rm [hidden] { display: none !important; } /* display:grid 등이 hidden 속성을 덮어쓰지 않게 */
.rm-search { display: flex; gap: 8px; margin-bottom: 10px; }
.rm-search input { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 12px; min-height: 48px; }
.rm-search .btn { min-height: 48px; padding: 0 18px; }
.rm-hits { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.rm-hits .option { width: 100%; display: flex; flex-direction: column; gap: 2px; }
.rm-hits .option span { font-weight: 500; font-size: .88rem; color: var(--ink-2); }
.rm-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.rm-modes button { min-height: 44px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font: inherit; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.rm-modes button.is-selected { border-color: var(--navy); background: #eef4fa; color: var(--navy); }
.rm-help { font-size: .9rem; color: var(--ink-2); margin: 0 0 8px; min-height: 1.4em; }
.rm-map { height: 58vh; min-height: 300px; max-height: 520px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #dde3ea; touch-action: none; }
.rm-drawbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.rm-list { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; }
.rm-list li { display: flex; justify-content: space-between; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 0 0 0 12px; font-size: .92rem; }
.rm-total { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--sun-soft); color: #4d3800; }
.rm-total:empty { display: none; }
.rm-total b { color: var(--navy); }
.rm-note { font-size: .85rem; color: var(--muted); margin: 8px 0 0; }
.rm-msg { font-size: .92rem; color: var(--ink-2); margin: 10px 0; min-height: 1.4em; }
.rm-msg.error { color: var(--bad); }
.rm-done { margin-top: 4px; }
.rm-skip { display: block; margin: 8px auto 0; }

/* ── 6가지 방식 비교 ── */
.cmp { display: grid; gap: 10px; }
@media (min-width: 640px) { .cmp { grid-template-columns: 1fr 1fr; } }
.cmp-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.cmp-item.is-viewing { border: 2px solid var(--ok); box-shadow: 0 0 0 3px rgba(31, 138, 91, .15); }
.cmp-item.is-off { background: #fafbfc; }
.cmp-item.is-off .cmp-figs dd { color: var(--muted); }
.cmp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.cmp-head strong { color: var(--navy); }
.cmp-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 0; }
.cmp-figs div { display: flex; flex-direction: column; }
.cmp-figs dt { font-size: .82rem; color: var(--ink-2); }
.cmp-figs dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.cmp-note { font-size: .85rem; color: var(--warn); margin: 8px 0 0; }

/* ── 로딩 ── */
.loading { text-align: center; padding: 80px 0; color: var(--ink-2); }
.spinner { width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%; border: 4px solid var(--line); border-top-color: var(--sun); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── 결과 ── */
.result { max-width: 760px; margin: 0 auto; padding-top: 24px; }
.result-head h1 { font-size: clamp(1.4rem, 5vw, 1.8rem); color: var(--navy); }
.notice { border-radius: 12px; padding: 12px 14px; font-size: .92rem; margin: 12px 0; }
.notice-warn { background: var(--warn-soft); color: #6b4000; }
.notice-info { background: #eef4fa; color: var(--navy); }
.notice-test { background: var(--bad-soft); color: var(--bad); font-weight: 600; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin: 16px 0; }
.card-top { border: 2px solid var(--navy); }
.card h2 { font-size: 1.3rem; color: var(--navy); margin-bottom: 6px; }
.card h3 { font-size: 1.05rem; color: var(--navy); margin: 18px 0 8px; }
.card-label { font-size: .85rem; font-weight: 700; color: var(--navy-2); margin-bottom: 4px; }
.reasons { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.reasons li { padding-left: 24px; position: relative; }
.reasons li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.tabs { display: inline-flex; background: var(--bg); border-radius: 10px; padding: 3px; margin: 14px 0 10px; }
.tabs button { border: 0; background: none; padding: 0 16px; min-height: 44px; border-radius: 8px; font-weight: 700; color: var(--ink-2); cursor: pointer; font-size: .9rem; }
.tabs button.is-selected { background: #fff; color: var(--navy); box-shadow: var(--shadow); }
.figures { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.figure { background: var(--bg); border-radius: 10px; padding: 12px; }
.figure .k { font-size: .82rem; color: var(--ink-2); }
.figure .v { font-size: 1.15rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.figure.hl { background: var(--sun-soft); }
.figure.hl .v { color: var(--navy); }
.figure .s { font-size: .82rem; color: var(--muted); }
@media (min-width: 640px) { .figures { grid-template-columns: repeat(3, 1fr); } }
/* ── 박빙: 두 방식 중 고르기 ── */
.tie-ask { font-weight: 700; color: var(--navy-2); margin: 4px 0 2px; }
.choice-grid { display: grid; gap: 12px; margin: 14px 0; }
@media (min-width: 640px) { .choice-grid { grid-template-columns: 1fr 1fr; } }
.choice-card { background: var(--card); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.choice-card.is-chosen { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(31, 138, 91, .15), var(--shadow); }
.choice-card h2 { font-size: 1.15rem; color: var(--navy); margin-bottom: 2px; }
.choice-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 6px 0 14px; flex: 1; }
.choice-rows div { display: flex; flex-direction: column; }
.choice-rows .cr-wide { grid-column: 1 / -1; }
.choice-rows dt { font-size: .82rem; color: var(--ink-2); }
.choice-rows dd { margin: 0; font-weight: 700; }
.choice-rows .cr-cond { font-weight: 600; font-size: .9rem; color: var(--warn); }

/* 돈 표시: 이득(초록 +), 손실(빨강 −), 처음 드는 돈(중립), 없음(초록 ✓) */
.money { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.money.gain, .money.free { color: var(--ok); }
.money.loss { color: var(--bad); }
.money.cost { color: var(--ink); }
.money.zero { color: var(--muted); }
.figure.fig-gain { background: var(--ok-soft); box-shadow: inset 0 0 0 1px #bfe3d1; }
.figure.fig-gain .k { color: #1d6b48; font-weight: 700; }
.figure.fig-loss { background: var(--bad-soft); }
.figure.fig-cost { background: #f1f3f6; }
.gain-banner { display: flex; flex-direction: column; gap: 2px; margin: 14px 0 4px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, #1f8a5b, #2aa36c); color: #fff; }
.gain-banner .gb-k { font-size: .85rem; font-weight: 700; opacity: .9; }
.gain-banner .gb-v { font-size: clamp(1.5rem, 7vw, 1.9rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; }
.gain-banner .gb-v b { font-weight: 800; }
.gain-banner .gb-s { font-size: .92rem; opacity: .95; }
.gain-banner.is-weak { background: var(--warn-soft); color: #6b4000; }
.gain-banner.is-weak .money { color: inherit; }
.cmp-item.is-off .money { color: var(--muted); }
.breakdown { width: 100%; border-collapse: collapse; font-size: .92rem; margin-top: 8px; }
.breakdown td { padding: 7px 0; border-bottom: 1px solid var(--line); }
.breakdown td:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.breakdown tr.total td { font-weight: 800; border-bottom: 0; color: var(--navy); }
.list { margin: 0; padding-left: 18px; }
.list li { margin: 4px 0; }
.list-cond li { color: #6b4000; }
.cols { display: grid; gap: 0 20px; }
@media (min-width: 640px) { .cols { grid-template-columns: 1fr 1fr; } }
.alt-grid { display: grid; gap: 12px; }
@media (min-width: 640px) { .alt-grid { grid-template-columns: 1fr 1fr; } }
.alt-grid .card { margin: 0; }
details { background: var(--card); border-radius: var(--radius); padding: 14px 18px; margin: 12px 0; box-shadow: var(--shadow); }
details summary { cursor: pointer; font-weight: 700; color: var(--navy); min-height: 44px; display: flex; align-items: center; }
details { padding-top: 4px; padding-bottom: 4px; }
details[open] summary { margin-bottom: 10px; }
.assume-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.assume-table td { padding: 6px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.assume-table td:nth-child(2) { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.disclaimer { font-size: .85rem; color: var(--muted); }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }

/* ── 상담 신청 ── */
.lead-wrap, .done { max-width: 560px; margin: 0 auto; padding-top: 24px; }
.lead-wrap h1, .done h1 { font-size: 1.5rem; color: var(--navy); }
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.field .req { color: var(--bad); margin-left: 2px; }
.field .opt { color: var(--muted); font-weight: 500; font-size: .85rem; margin-left: 4px; }
.field input, .field textarea, .field select { width: 100%; font: inherit; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; }
.field textarea { min-height: 90px; resize: vertical; }
.field.invalid input { border-color: var(--bad); }
.prefilled { background: var(--bg); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.prefilled h2 { font-size: 1rem; color: var(--navy); }
.fieldset-2 { display: grid; gap: 0 12px; }
@media (min-width: 480px) { .fieldset-2 { grid-template-columns: 1fr 1fr; } }
.consent { background: var(--bg); border-radius: 12px; padding: 14px; margin: 16px 0; font-size: .88rem; }
.consent label { display: flex; gap: 10px; align-items: center; font-weight: 700; margin: 4px 0; min-height: 44px; cursor: pointer; }
.consent input { width: 22px; height: 22px; margin: 0; flex: none; }
.consent table { width: 100%; border-collapse: collapse; margin: 6px 0; }
.consent td { padding: 4px 0; vertical-align: top; color: var(--ink-2); }
.consent td:first-child { width: 72px; font-weight: 700; color: var(--ink); }
.submit-hint { text-align: center; font-size: .9rem; color: var(--warn); margin: 8px 0 0; }
.submit-hint[hidden] { display: none; }
.footer a { color: var(--ink-2); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.done { text-align: center; }
.done .check { width: 64px; height: 64px; border-radius: 50%; background: var(--ok-soft); color: var(--ok); font-size: 2rem; display: grid; place-items: center; margin: 24px auto 16px; font-weight: 800; }
.done .summary { text-align: left; }

/* ── 하단 고정 CTA / 푸터 ── */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); }
.sticky-cta .btn { max-width: 560px; margin: 0 auto; display: flex; }
.footer { text-align: center; font-size: .85rem; color: var(--ink-2); padding: 24px 16px 110px; border-top: 1px solid var(--line); }

/* 자사 제품 안내(에코알막 덧방·C형강) — 사업 방식 카드와 구분되게 연한 배경 */
.addon-card { background: #f4f8fb; border: 1px solid var(--line); box-shadow: none; }
.addon-est { background: var(--card); border-radius: 12px; padding: 12px 14px; margin: 12px 0; display: grid; gap: 4px; }
.addon-est span { font-size: .88rem; color: var(--ink-2); }
.addon-est b { font-size: 1.25rem; color: var(--navy); }
.addon-est small { font-size: .8rem; color: var(--ink-2); line-height: 1.5; }
.addon-price { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: .92rem; }
.addon-price th, .addon-price td { border-bottom: 1px solid var(--line); padding: 8px 4px; text-align: left; }
.addon-price th { font-size: .82rem; color: var(--ink-2); font-weight: 600; }
.addon-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.addon-photos img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; background: var(--bg); }
.addon-list { margin: 4px 0 8px; padding-left: 18px; font-size: .92rem; }
.addon-list li { margin: 3px 0; }
.small-note { font-size: .84rem; margin: 10px 0 0; }
details[data-model="cbeam"] .plain { margin-top: 10px; }
.addon-check { display: flex; gap: 10px; align-items: flex-start; background: #f4f8fb; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 12px 0; min-height: 44px; cursor: pointer; font-weight: 700; }
.addon-check input { width: 22px; height: 22px; margin: 1px 0 0; flex: none; }
.addon-check small { display: block; font-weight: 400; font-size: .84rem; color: var(--ink-2); margin-top: 2px; }

/* 20년 합계 풀이 — 이득 칸 바로 아래, 눈에 띄되 접어 둔다 */
.total-explain { background: #f4f8fb; border-radius: 12px; padding: 0 14px; margin: 10px 0 4px; }
.total-explain summary { font-weight: 700; color: var(--navy); min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.total-explain .breakdown { margin: 4px 0 8px; }
.total-explain-notes { font-size: .88rem; color: var(--ink-2); margin: 0 0 12px; padding-left: 18px; }

/* 6가지 전체 비교에서 고르기 · 고른 방식 카드의 '추천으로 돌아가기' */
.cmp-pick { margin-top: 12px; min-height: 44px; }
.cmp-pick[disabled] { opacity: 1; cursor: default; color: var(--ok); border-color: var(--ok); }
.picked-note { background: #eef4fa; color: var(--navy); border-radius: 10px; padding: 8px 12px; font-size: .9rem; margin: 4px 0 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.picked-note .btn-text { padding: 0; min-height: 44px; font-weight: 700; text-decoration: underline; }

/* 설치하면 이런 모습(예시) — 지도에서 고른 지붕 위 패널 배치 */
.roof-sim { margin: 14px 0 6px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--card); }
.roof-sim-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.roof-sim-head strong { color: var(--navy); font-size: 1rem; }
.roof-sim-tabs { display: inline-flex; background: var(--bg); border-radius: 999px; padding: 3px; }
.roof-sim-tabs button { border: 0; background: transparent; border-radius: 999px; padding: 0 14px; min-height: 40px; font: inherit; font-size: .88rem; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.roof-sim-tabs button.is-selected { background: var(--navy); color: #fff; }
.roof-sim-map { height: clamp(240px, 62vw, 380px); border-radius: 10px; overflow: hidden; background: #dde3ea; display: flex; align-items: center; justify-content: center; }
.roof-sim-map.leaflet-container { display: block; }
.roof-sim-cap { margin: 8px 0 2px; font-weight: 700; color: var(--navy); font-size: .92rem; }
.roof-sim-note { margin: 0; font-size: .8rem; color: var(--ink-2); line-height: 1.5; }

/* 지도: 윤곽을 못 찾거나 가까운 건물만 찾았을 때 고르는 상자 · 목록의 '고쳐 그리기' */
.rm-fix { background: #eef4fa; border: 1px solid #cfe0f1; border-radius: 12px; padding: 12px 14px; margin: 10px 0; }
.rm-fix p { margin: 0 0 10px; font-size: .92rem; color: var(--navy); font-weight: 600; }
.rm-fix-acts { display: grid; gap: 8px; }
.rm-fix-acts .btn { min-height: 44px; }
.rm-acts { display: inline-flex; align-items: center; flex: none; }
.rm-acts .btn-text { min-height: 44px; padding: 0 10px; }

/* 연도별 현금흐름 그래프 — 막대(그해)·선(누적), 대출 구간 음영 */
.cf { margin: 14px 0 6px; border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 10px; background: var(--card); }
.cf figcaption { font-weight: 700; color: var(--navy); font-size: 1rem; margin-bottom: 6px; }
.cf figcaption span { font-weight: 400; color: var(--muted); font-size: .8rem; }
.cf-wrap { position: relative; }
.cf svg { width: 100%; height: auto; display: block; font-family: var(--font); }
.cf-t { font-size: 11px; font-weight: 700; fill: var(--ink-2); }
.cf-band { fill: #eef2f6; }
.cf-band-t { font-size: 9.5px; fill: var(--ink-2); font-weight: 600; }
.cf-zero { stroke: #9aa6b4; stroke-width: 1; }
.cf-zero-t { font-size: 9px; fill: var(--muted); text-anchor: end; }
.cf-pos { fill: var(--ok); }
.cf-neg { fill: var(--bad); }
.cf-start { fill-opacity: .55; }
.cf-v { font-size: 9.5px; font-weight: 700; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.cf-v-start { text-anchor: start; }
.cf-end { text-anchor: end; }
.cf-even { fill: var(--ok); }
.cf-line { fill: none; stroke: var(--navy-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cf-dot { fill: var(--navy-2); stroke: #fff; stroke-width: 2; }
.cf-x { font-size: 9.5px; fill: var(--muted); text-anchor: middle; }
.cf-hit { fill: transparent; cursor: pointer; }
.cf-cross { stroke: var(--navy); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.cf-tip { position: absolute; top: 0; transform: translateX(-50%); background: var(--navy); color: #fff; border-radius: 8px; padding: 6px 9px; font-size: .8rem; line-height: 1.4; pointer-events: none; display: grid; white-space: nowrap; box-shadow: var(--shadow); }
.cf-tip .money { color: #fff; font-weight: 700; }
.cf-notes { font-size: .86rem; color: var(--ink-2); margin: 8px 0 0; padding-left: 18px; }
.cf-tip[hidden] { display: none; }