.fire-page { max-width: 1440px; padding-block: 1.5rem 4rem; }
.fire-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.fire-hero { display: flex; align-items: end; justify-content: space-between; gap: 2rem; max-width: 1160px; margin-bottom: 1rem; }
.fire-hero > div { max-width: 880px; }
.fire-hero p, .fire-section-heading > span, .fire-chart-card > div > p, .fire-table-card > div > p, .fire-checklist > div > p { margin: 0 0 .45rem; color: var(--primary); font-size: .76rem; font-weight: 850; letter-spacing: .11em; }
.fire-hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 3.35rem); letter-spacing: -.065em; line-height: 1.08; }
.fire-hero > div > span { display: block; margin-top: .9rem; color: var(--text-sub); font-size: 1rem; line-height: 1.65; }
.fire-share, .fire-reset, .fire-link-button, .fire-add-button, .fire-remove-button { font: inherit; cursor: pointer; }
.fire-share { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: .7rem .95rem; background: var(--surface); color: var(--text-main); font-size: .82rem; font-weight: 800; }
.fire-share:hover, .fire-share:focus-visible { border-color: var(--primary); color: var(--primary); }
.fire-jump-links { display: flex; gap: .45rem; overflow-x: auto; margin: 0 0 1rem; padding-bottom: .15rem; }
.fire-jump-links a { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: .42rem .7rem; color: var(--text-sub); background: var(--surface); font-size: .76rem; font-weight: 750; text-decoration: none; }
.fire-jump-links a:hover { color: var(--primary); border-color: var(--primary); }
.fire-workspace { display: grid; grid-template-columns: minmax(390px, .82fr) minmax(560px, 1.18fr); align-items: start; gap: 1.15rem; }
.fire-input-stack, .fire-output-stack { min-width: 0; }
.fire-output-stack { display: grid; gap: 1rem; }
.fire-input-card, .fire-chart-card, .fire-table-card, .fire-guide, .fire-checklist { border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.fire-input-card { margin-top: 1rem; padding: 1.2rem; scroll-margin-top: 1rem; }
.fire-profile-card { margin-top: 0; }
.fire-section-heading h2, .fire-chart-card h2, .fire-table-card h2, .fire-guide h2, .fire-checklist h2 { margin: 0; font-size: 1.25rem; letter-spacing: -.035em; }
.fire-section-copy, .fire-expandable-copy, .fire-assumption-tip { margin: .6rem 0 0; color: var(--text-sub); font-size: .88rem; line-height: 1.65; }
.fire-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 1rem; }
.fire-form > label, .fire-risk-field { position: relative; display: grid; gap: .35rem; min-width: 0; color: var(--text-main); font-size: .82rem; font-weight: 800; }
.fire-form .fire-field-wide { grid-column: 1 / -1; }
.fire-form input, .fire-dynamic-row input, .fire-dynamic-row select { width: 100%; min-width: 0; min-height: 43px; border: 1px solid var(--border); border-radius: 9px; padding: .55rem .7rem; background: var(--surface-muted); color: var(--text-main); font: inherit; font-variant-numeric: tabular-nums; }
.fire-form > label > input { padding-right: 2rem; text-align: right; }
.fire-form input:focus, .fire-dynamic-row input:focus, .fire-dynamic-row select:focus, .fire-segmented input:focus-visible + * { outline: 0; border-color: var(--primary); box-shadow: var(--focus-ring); }
.fire-form small { position: absolute; right: .7rem; bottom: .72rem; color: var(--text-sub); font-size: .75rem; font-weight: 700; pointer-events: none; }
.fire-form input.is-derived { color: var(--text-sub); cursor: default; }
.fire-risk-field { margin: 0; border: 0; padding: 0; }
.fire-risk-field legend { margin-bottom: .35rem; }
.fire-risk-field > small { position: static; margin-top: .2rem; color: var(--text-sub); font-size: .75rem; font-weight: 650; }
.fire-toggle-field { display: flex !important; align-items: center; gap: .65rem; min-height: 43px; padding: .7rem; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted); cursor: pointer; }
.fire-toggle-field input { width: 1rem !important; min-height: 1rem !important; height: 1rem; margin: 0; padding: 0 !important; accent-color: var(--primary); }
.fire-toggle-field span { display: grid; gap: .1rem; }.fire-toggle-field em { color: var(--text-sub); font-size: .74rem; font-style: normal; font-weight: 650; }
.fire-segmented { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--border); border-radius: 9px; }
.fire-segmented label { position: relative; display: flex; justify-content: center; align-items: center; min-height: 43px; border-left: 1px solid var(--border); color: var(--text-sub); cursor: pointer; font-size: .82rem; font-weight: 750; }
.fire-segmented label:first-child { border-left: 0; }
.fire-segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.fire-segmented label:has(input:checked) { color: #fff; background: var(--primary); }
.fire-stat-line { margin: 1rem 0 .4rem; padding: .72rem .8rem; border-radius: 10px; background: var(--primary-soft); color: var(--text-sub); font-size: .84rem; line-height: 1.6; }
.fire-stat-line strong { color: var(--primary); font-variant-numeric: tabular-nums; }
.fire-profile-actions { display: flex; align-items: center; gap: 1rem; }
.fire-link-button, .fire-reset { border: 0; padding: .35rem 0; background: transparent; color: var(--primary); font-size: .8rem; font-weight: 800; text-decoration: underline; }
.fire-reset { color: var(--text-sub); }
.fire-expandable { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); }
.fire-expandable-copy { margin-top: 0; }
.fire-subsection { margin-top: 1.2rem; }
.fire-subsection-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .65rem; }
.fire-subsection-heading h3 { margin: 0; font-size: .96rem; letter-spacing: -.02em; }
.fire-subsection-heading span { color: var(--text-sub); font-size: .76rem; line-height: 1.4; text-align: right; }
.fire-row-heading, .fire-dynamic-row { display: grid; gap: .5rem; align-items: center; }
.fire-row-heading { padding: 0 .1rem .35rem; color: var(--text-sub); font-size: .72rem; font-weight: 750; }
.fire-asset-grid { grid-template-columns: minmax(100px, 1.1fr) minmax(110px, 1.1fr) minmax(80px, .7fr) minmax(105px, 1fr) 32px; }
.fire-debt-grid { grid-template-columns: minmax(90px, 1fr) minmax(105px, 1.15fr) minmax(75px, .7fr) minmax(105px, 1fr) 32px; }
.fire-plan-grid { grid-template-columns: minmax(110px, 1.2fr) minmax(120px, 1.1fr) minmax(80px, .7fr) 32px; }
.fire-goal-grid { grid-template-columns: minmax(100px, 1fr) minmax(82px, .7fr) minmax(120px, 1.1fr) 32px; }
.fire-dynamic-row { margin-top: .45rem; }
.fire-dynamic-row input[type="number"] { text-align: right; }
.fire-dynamic-row .fire-currency { text-align: right; }
.fire-dynamic-row select { padding-right: .35rem; }
.fire-remove-button { width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px; padding: 0; background: var(--surface); color: var(--text-sub); font-size: 1.25rem; line-height: 1; }
.fire-remove-button:hover { border-color: #dc2626; color: #dc2626; }
.fire-add-button { margin-top: .75rem; border: 0; padding: 0; background: transparent; color: var(--primary); font-size: .82rem; font-weight: 800; }
.fire-result-card { display: flex; flex-direction: column; margin: 0; padding: 1.4rem; border: 1px solid #3d24a5; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #4f2bc7, #1f1463); }
.fire-result-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fire-result-topline p { margin: 0; opacity: .72; font-size: .8rem; font-weight: 800; }
.fire-result-topline span { border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .28rem .55rem; font-size: .72rem; font-weight: 750; }
.fire-result-card h2 { margin: .45rem 0 0; font-size: 1.15rem; }
.fire-amount { margin-top: .75rem; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.fire-result-copy { margin: .85rem 0 1.1rem; color: rgba(255,255,255,.84); font-size: .91rem; line-height: 1.55; }
.fire-result-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1rem; margin: 0; }
.fire-result-card dl div { display: flex; flex-direction: column; gap: .2rem; padding-top: .65rem; border-top: 1px solid rgba(255,255,255,.18); }
.fire-result-card dt { color: rgba(255,255,255,.7); font-size: .76rem; }.fire-result-card dd { margin: 0; font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.fire-disclaimer { margin: 1.15rem 0 0; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.62); font-size: .73rem; line-height: 1.5; }
.fire-chart-card, .fire-table-card { margin: 0; padding: 1.15rem; }.fire-chart-card > div > span { display: block; margin-top: .35rem; color: var(--text-sub); font-size: .82rem; }
.fire-chart-wrap { height: 330px; margin-top: 1.1rem; }.fire-chart-wrap canvas { max-width: 100%; }
.fire-table-scroll { overflow-x: auto; margin-top: 1rem; }.fire-table-card table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: .88rem; }.fire-table-card th, .fire-table-card td { padding: .8rem .65rem; border-bottom: 1px solid var(--border); text-align: right; font-variant-numeric: tabular-nums; }.fire-table-card th:first-child, .fire-table-card td:first-child { text-align: left; }.fire-table-card th { color: var(--text-sub); font-size: .76rem; }.fire-table-card td { font-weight: 700; }
.fire-checklist { display: grid; grid-template-columns: minmax(200px, .85fr) minmax(0, 1.15fr); gap: 1.2rem; margin-top: 1rem; padding: 1.15rem; background: var(--surface-muted); scroll-margin-top: 1rem; }.fire-checklist > div > span { display: block; margin-top: .45rem; color: var(--text-sub); font-size: .8rem; line-height: 1.5; }
.fire-checklist-items { display: grid; gap: .55rem; }.fire-checklist-items label { display: flex; align-items: flex-start; gap: .6rem; color: var(--text-main); font-size: .86rem; font-weight: 650; line-height: 1.5; cursor: pointer; }.fire-checklist-items input { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .2rem; accent-color: var(--primary); }
.fire-guide { margin-top: 1rem; padding: 1.15rem; background: var(--surface-muted); }.fire-guide p { margin: .65rem 0 0; color: var(--text-sub); font-size: .9rem; line-height: 1.7; }.fire-guide a { display: inline-block; margin-top: .85rem; color: var(--primary); font-size: .88rem; font-weight: 800; }
@media (max-width: 1080px) { .fire-workspace { grid-template-columns: minmax(340px, .92fr) minmax(430px, 1.08fr); gap: .9rem; }.fire-input-card, .fire-chart-card, .fire-table-card, .fire-result-card { border-radius: 14px; }.fire-chart-wrap { height: 290px; } }
@media (max-width: 840px) { .fire-workspace { grid-template-columns: 1fr; }.fire-output-stack { margin-top: 1rem; } }
@media (max-width: 720px) { .fire-page { padding-top: 1.25rem; }.fire-hero { display: block; }.fire-share { margin-top: 1rem; }.fire-hero h1 { font-size: 2.2rem; }.fire-form { grid-template-columns: 1fr; }.fire-form .fire-field-wide { grid-column: auto; }.fire-row-heading { display: none; }.fire-dynamic-row { padding: .65rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }.fire-asset-grid, .fire-debt-grid, .fire-plan-grid, .fire-goal-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }.fire-asset-grid > :nth-child(3), .fire-asset-grid > :nth-child(4), .fire-debt-grid > :nth-child(3), .fire-debt-grid > :nth-child(4), .fire-plan-grid > :nth-child(3), .fire-goal-grid > :nth-child(3) { grid-column: auto; }.fire-dynamic-row label { position: relative; }.fire-dynamic-row label::before { display: block; margin: 0 0 .25rem; color: var(--text-sub); font-size: .68rem; font-weight: 750; }.fire-asset-grid label:nth-child(1)::before { content: "자산 유형"; }.fire-asset-grid label:nth-child(2)::before { content: "현재 금액"; }.fire-asset-grid label:nth-child(3)::before { content: "연 수익률"; }.fire-asset-grid label:nth-child(4)::before { content: "월 순소득"; }.fire-debt-grid label:nth-child(1)::before { content: "대출명"; }.fire-debt-grid label:nth-child(2)::before { content: "잔액"; }.fire-debt-grid label:nth-child(3)::before { content: "연 이자율"; }.fire-debt-grid label:nth-child(4)::before { content: "월 상환액"; }.fire-plan-grid label:nth-child(1)::before { content: "자산 유형"; }.fire-plan-grid label:nth-child(2)::before { content: "월 납입액"; }.fire-plan-grid label:nth-child(3)::before { content: "연 수익률"; }.fire-goal-grid label:nth-child(1)::before { content: "목표 이름"; }.fire-goal-grid label:nth-child(2)::before { content: "구매 나이"; }.fire-goal-grid label:nth-child(3)::before { content: "필요 금액"; }.fire-remove-button { grid-column: 2; justify-self: end; }.fire-result-card dl { grid-template-columns: 1fr; }.fire-chart-wrap { height: 265px; }.fire-checklist { grid-template-columns: 1fr; }.fire-subsection-heading { align-items: flex-start; flex-direction: column; gap: .25rem; }.fire-subsection-heading span { text-align: left; }.fire-profile-actions { justify-content: space-between; } }

/* Wealth is a planning observatory: deep result panels against a soft field. */
.fire-page { max-width: 1320px; padding-top: 1.35rem; }.fire-hero { position: relative; align-items: center; max-width: none; overflow: hidden; margin-bottom: 1rem; padding: clamp(1.4rem, 3.8vw, 3rem); border: 1px solid #33235b; border-radius: 26px; color: #fff; background: linear-gradient(130deg, #201044, #4e2c9b 58%, #242050); }.fire-hero::after { position: absolute; top: -160px; right: -90px; width: 390px; height: 390px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 0 0 42px rgba(255,255,255,.06), 0 0 0 84px rgba(255,255,255,.04); content: ""; }.fire-hero > * { position: relative; z-index: 1; }.fire-hero > div:first-child { max-width: 700px; }.fire-hero p { color: #d9caff; }.fire-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 900; letter-spacing: -.08em; line-height: .95; }.fire-hero h1 em { color: #e0ff6a; font-style: normal; }.fire-hero > div > span { color: rgba(255,255,255,.75); }.fire-hero-orbit { width: 155px; height: 155px; flex: 0 0 auto; display: grid; grid-template-columns: 1fr; align-content: center; justify-items: center; gap: .2rem; border: 1px solid rgba(224,255,106,.65); border-radius: 50%; color: #e0ff6a; background: rgba(255,255,255,.05); font-size: .67rem; font-weight: 900; letter-spacing: .08em; }.fire-hero-orbit i { width: 1px; height: 19px; background: rgba(224,255,106,.6); }.fire-share { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }.fire-share:hover, .fire-share:focus-visible { border-color: #e0ff6a; color: #e0ff6a; }.fire-jump-links a { border-color: #dcd2f5; background: rgba(255,255,255,.7); }.fire-input-card, .fire-chart-card, .fire-table-card, .fire-guide, .fire-checklist { border-radius: 20px; }.fire-result-card { border: 0; background: linear-gradient(142deg, #3c1e86, #1d245e); box-shadow: 0 18px 38px rgba(47,24,97,.2); }.fire-chart-card, .fire-table-card { box-shadow: 0 10px 24px rgba(47,24,97,.04); }.fire-chart-wrap { min-height: 330px; background: linear-gradient(180deg, rgba(244,240,255,.4), transparent); }
@media (max-width: 840px) { .fire-hero { align-items: flex-start; flex-wrap: wrap; }.fire-hero-orbit { order: 3; width: 120px; height: 120px; }.fire-share { margin-left: auto; } }
@media (max-width: 640px) { .fire-page { padding-top: .5rem; }.fire-hero { padding: 1.5rem 1.25rem; border-radius: 20px; }.fire-hero h1 { font-size: clamp(2.45rem, 12vw, 3.55rem); }.fire-hero-orbit { display: none; } }