/* 입력 인터페이스 — 모바일(site.css 변수)·PC(lab.css 변수) 공용. 새 색 없음: 두 사이트 변수와 기존 뱃지 색만 쓴다. */
.ik { --ik-line: var(--lx-line, var(--line, #d9dde7)); --ik-acc: var(--lx-accent, var(--ai-blue, #164ed8)); --ik-soft: var(--lx-soft, var(--ai-blue-soft, #e6eefc)); --ik-mut: var(--lx-muted, var(--muted, #5b6475)); }
.ik-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 4px 0 14px; flex-wrap: wrap; }
.ik-steps li { display: flex; align-items: center; gap: 6px; border: 1px solid var(--ik-line); border-radius: 999px; padding: 3px 12px 3px 4px; font-size: 13.5px; color: var(--ik-mut); background: #fff; }
.ik-steps li b { width: 22px; height: 22px; border-radius: 50%; background: #eef1f6; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.ik-steps li.on { border-color: var(--ik-acc); color: var(--ik-acc); font-weight: 700; } .ik-steps li.on b { background: var(--ik-acc); color: #fff; }
.ik-steps li.done b { background: var(--ik-soft); color: var(--ik-acc); }
.ik-lead { margin: 0 0 12px; }
.ik-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ik-way { text-align: left; background: #fff; border: 1px solid var(--ik-line); border-radius: 12px; padding: 14px; font: inherit; cursor: pointer; display: grid; gap: 4px; color: inherit; }
.ik-way:hover { border-color: var(--ik-acc); } .ik-way svg { width: 26px; height: 26px; color: var(--ik-acc); } .ik-way b { font-size: 16px; } .ik-way span { font-size: 13.5px; color: var(--ik-mut); line-height: 1.5; }
.ik-rec { display: flex; gap: 12px; align-items: center; background: var(--ik-soft); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; }
.ik-mic { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--ik-acc); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 0 6px rgba(22,78,216,.15); }
.ik-mic svg { width: 26px; height: 26px; }
.ik-wave { display: flex; gap: 3px; align-items: center; height: 28px; margin-top: 4px; } .ik-wave i { width: 4px; border-radius: 2px; background: var(--ik-acc); opacity: .7; }
.ik-tr { border: 1px solid var(--ik-line); border-radius: 12px; padding: 10px 14px; background: #fff; margin-bottom: 10px; } .ik-tr p { margin: 4px 0; font-size: 16px; line-height: 1.7; }
.ik-lbl { font-size: 12.5px; font-weight: 700; color: var(--ik-mut); } .ik-note { display: block; font-size: 12.5px; color: var(--ik-mut); margin: 6px 0 0; line-height: 1.5; }
mark.ik-ev { background: #fff1b8; border-radius: 3px; padding: 0 2px; }
.ik-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ik-card { border: 1px dashed #b88a1e; background: #fffaf0; border-radius: 12px; padding: 10px 12px; display: grid; gap: 2px; font-size: 13.5px; min-width: 0; }
.ik-card.ok { border: 1px solid var(--ik-line); background: #fff; } .ik-big { font-size: 20px; font-weight: 800; }
.ik-st { justify-self: start; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 0 8px; white-space: nowrap; }
.ik-st.est { background: #fff5dd; border: 1px dashed #b88a1e; color: #6b4a06; } .ik-st.in { background: #f7f8fb; border: 1px solid #aeb6c6; color: #2f3747; }
.ik-nav { display: flex; gap: 8px; justify-content: flex-end; margin: 14px 0 4px; flex-wrap: wrap; }
.ik-btn { border: 0; background: var(--ik-acc); color: #fff; border-radius: 10px; padding: 9px 16px; font: inherit; font-weight: 700; cursor: pointer; }
.ik-btn.sub { background: #fff; color: var(--ik-acc); border: 1px solid var(--ik-line); } .ik-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ik-docwrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: start; }
.ik-doc { margin: 0; display: grid; gap: 8px; } .ik-doc figcaption { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ik-mut); } .ik-doc figcaption svg { width: 18px; height: 18px; }
.ik-paper { background: #fbfbf8; border: 1px solid var(--ik-line); border-radius: 6px; padding: 12px 14px; box-shadow: 0 2px 8px rgba(18,22,31,.06); font-size: 13.5px; }
.ik-paper.sm { max-width: 80%; } .ik-ph { font-weight: 700; border-bottom: 1px solid var(--ik-line); padding-bottom: 6px; margin-bottom: 6px; } .ik-ph small { font-weight: 400; color: var(--ik-mut); }
.ik-pl { padding: 3px 0; } .ik-fine { font-size: 11.5px; color: var(--ik-mut); } .ik-blur { filter: blur(2.5px); }
.ik-hl { position: relative; background: rgba(255, 214, 102, .45); outline: 2px solid #e0a800; border-radius: 3px; padding: 0 3px; font-weight: 700; margin-left: 4px; }
.ik-hl::after { content: attr(data-pin); position: absolute; top: -11px; right: -11px; font-size: 11px; background: #e0a800; color: #1a1a19; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.ik-pin { display: inline-flex; width: 20px; height: 20px; border-radius: 50%; background: #e0a800; color: #fff; font-size: 12px; font-weight: 800; align-items: center; justify-content: center; }
table.ik-t { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ik-t th { font-size: 12px; color: var(--ik-mut); font-weight: 600; text-align: left; padding: 6px 6px; border-bottom: 1px solid var(--ik-line); white-space: nowrap; }
.ik-t td { padding: 7px 6px; border-bottom: 1px solid #eef0f4; vertical-align: top; } .ik-t .r { text-align: right; } .ik-t .c { text-align: center; } .ik-t code { font-size: 12px; color: #3d4556; }
.ik-scroll { overflow-x: auto; } .ik-led td.ik-f span { display: inline-block; margin: 0 10px 3px 0; white-space: nowrap; } .ik-k { color: var(--ik-mut); font-size: 12px; margin-left: 4px; }
.ik-null { color: #8a2417; } .ik-evc { color: var(--ik-mut); font-size: 12.5px; min-width: 120px; }
.ik-ok { border: 1px solid var(--ik-acc); background: #fff; color: var(--ik-acc); border-radius: 8px; padding: 4px 10px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.ik-ok.done { background: var(--ik-soft); border-color: transparent; }
.ik-q { border: 1px solid #e7cf8f; background: #fffaf0; border-radius: 10px; padding: 10px 12px; margin: 12px 0 0; font-size: 14px; } .ik-cat { font-size: 12px; color: var(--ik-mut); }
.ik-qb { display: flex; gap: 8px; margin-top: 8px; } .ik-qb button { border: 1px solid var(--ik-line); background: #fff; border-radius: 8px; padding: 5px 12px; font: inherit; cursor: pointer; } .ik-qb button.on { border-color: var(--ik-acc); background: var(--ik-soft); color: var(--ik-acc); font-weight: 700; }
.ik-gate { font-weight: 700; color: #8a5a00; margin: 12px 0 0; } .ik-gate.ok { color: var(--ik-acc); }
@media (max-width: 760px) { .ik-ways, .ik-cards, .ik-docwrap { grid-template-columns: minmax(0, 1fr); } .ik-paper.sm { max-width: none; } .ik-led th:nth-child(3), .ik-led td:nth-child(3) { display: none; } .ik-t { font-size: 13px; } }
.ik-led td:first-child { white-space: nowrap; }
@media (max-width: 760px) {
  .ik-scroll { overflow: visible; } .ik-led thead { display: none; }
  .ik-led, .ik-led tbody, .ik-led tr, .ik-led td { display: block; width: 100%; }
  .ik-led tr { border: 1px solid var(--ik-line); border-radius: 12px; padding: 8px 10px; margin: 0 0 10px; background: #fff; position: relative; }
  .ik-led td { border: 0; padding: 2px 0; } .ik-led td:first-child { font-size: 12px; } .ik-led td:nth-child(4) { position: absolute; top: 8px; right: 10px; width: auto; }
  .ik-led td:nth-child(5) { text-align: right; } .ik-led td.ik-f span { white-space: normal; }
}
/* v2b: extract-result 형식 카드 */
.ik-item { border: 1px solid var(--ik-line); border-radius: 12px; background: #fff; padding: 10px 12px; margin: 0 0 10px; }
.ik-ih { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .ik-ih code { font-size: 12px; color: var(--ik-mut); } .ik-ih .ik-st { margin-left: auto; }
.ik-rb { margin: 6px 0; font-size: 16px; font-weight: 700; color: #1d2a44; background: #f6f8fc; border-radius: 8px; padding: 6px 10px; }
.ik-t tr.must td:first-child { font-weight: 700; } .ik-t tr.empty td { background: #fdf1ef; } .ik-t td.v { font-weight: 600; }
.cf { display: inline-block; border-radius: 999px; padding: 0 8px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cf.hi { background: #e9f5ef; color: #1b6b45; } .cf.mid { background: #fff5dd; color: #6b4a06; } .cf.lo { background: #fdecea; color: #8a2417; } .cf.none { background: #f1f3f8; color: #4a5263; }
.ik-w { border-bottom: 2px solid transparent; } .ik-w.lo { color: #8a2417; font-weight: 800; border-bottom: 2px dashed #c0392b; } .ik-w small { font-weight: 400; font-size: 11px; color: #8a2417; margin-left: 1px; }
.ik-fix { margin: 8px 0 0; background: #fdf1ef; border: 1px solid #f0c4bd; border-radius: 10px; padding: 8px 10px; font-size: 13.5px; }
.ik-qb input { border: 1px solid var(--ik-line); border-radius: 8px; padding: 5px 9px; font: inherit; min-width: 0; flex: 1 1 140px; } .ik-qb { flex-wrap: wrap; }
.ik-done { background: #e9f5ef; border-radius: 8px; padding: 6px 10px; font-size: 13.5px; margin: 0 0 10px; }
.ik-ok[disabled] { opacity: .4; cursor: not-allowed; }
.ik-pages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.ik-page { margin: 0; } .ik-page figcaption { font-size: 12.5px; color: var(--ik-mut); margin-top: 4px; }
.ik-img { position: relative; border: 1px solid var(--ik-line); border-radius: 6px; overflow: hidden; background: #fff; } .ik-img img { display: block; width: 100%; height: auto; }
.bb { position: absolute; border: 2px solid #e0a800; background: rgba(255, 214, 102, .28); border-radius: 2px; } .bb.lo { border: 2px dashed #c0392b; background: rgba(192, 57, 43, .12); }
.bb b { position: absolute; left: 0; top: -15px; font-size: 9.5px; background: #e0a800; color: #1a1a19; padding: 0 3px; border-radius: 2px; white-space: nowrap; font-weight: 700; } .bb.lo b { background: #c0392b; color: #fff; }
.ik-h3 { font-size: 16px; margin: 18px 0 8px; }
.ik-docwrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
@media (max-width: 760px) { .ik-pages { grid-template-columns: minmax(0, 1fr); } .ik-t th:nth-child(4), .ik-t td:nth-child(4) { display: none; } .ik-rb { font-size: 15px; } }

.ik-crop { overflow: hidden; aspect-ratio: 1 / .62; border: 1px solid var(--ik-line); border-radius: 6px; background: #fff; } .ik-crop .ik-img { border: 0; border-radius: 0; }

/* P1 직접 입력 폼 + /api/calc 결과 (live_view.py · live_calc.js) — 같은 변수만 사용 */
.ik-back { background: none; border: 0; color: var(--ik-acc); font: inherit; cursor: pointer; padding: 2px 0; }
.lv h3 { margin: 0 0 6px; } .lv-lead { margin: 0 0 12px; color: var(--ik-mut); font-size: 14.5px; line-height: 1.55; }
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; margin-bottom: 10px; } .lv-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.lv-f { display: grid; gap: 3px; font-size: 14px; } .lv-f > span { font-weight: 600; } .lv-f input { font: inherit; padding: 8px 10px; border: 1px solid var(--ik-line); border-radius: 8px; background: #fff; min-width: 0; width: 100%; box-sizing: border-box; }
.lv-f input:disabled { background: #f3f5f9; color: var(--ik-mut); } .lv-f input.bad { border-color: #c0392b; } .lv-f small { color: var(--ik-mut); font-size: 12.5px; } .lv-e { color: #c0392b; font-size: 12.5px; font-style: normal; min-height: 0; }
.lv-fs { border: 1px solid var(--ik-line); border-radius: 10px; padding: 8px 12px 12px; margin: 0 0 10px; } .lv-fs legend { padding: 0 6px; font-weight: 600; font-size: 14px; }
.lv-adv { margin: 0 0 12px; } .lv-adv summary { cursor: pointer; color: var(--ik-acc); font-weight: 600; padding: 4px 0; } .lv-note { color: var(--ik-mut); font-size: 13px; margin: 6px 0; }
.lv-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 14px; } .lv-st { color: var(--ik-mut); font-size: 14px; }
.lv-btn { font: inherit; font-weight: 700; padding: 9px 20px; border-radius: 10px; border: 1px solid var(--ik-acc); background: var(--ik-acc); color: #fff; cursor: pointer; text-decoration: none; display: inline-block; } .lv-btn.sub { background: #fff; color: var(--ik-acc); } .lv-btn:disabled { opacity: .55; cursor: default; }
.lv-panel { border: 1px solid var(--ik-line); border-left: 4px solid var(--ik-acc); border-radius: 10px; padding: 12px 16px; background: var(--ik-soft); } .lv-panel p { margin: 4px 0 10px; line-height: 1.55; }
.lv-res h4 { margin: 14px 0 6px; font-size: 17px; } .lv-meta { color: var(--ik-mut); font-size: 13px; margin: 0 0 6px; } .lv-warn { background: #fff8e1; border: 1px solid #f0d98a; border-radius: 8px; padding: 8px 12px; font-size: 13.5px; line-height: 1.55; margin: 0 0 12px; }
.lv-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; margin-bottom: 14px; } .lv-kpis > div { border: 1px solid var(--ik-line); border-radius: 12px; padding: 12px 14px; background: #fff; }
.lv-kpis .k { font-size: 13.5px; color: var(--ik-mut); } .lv-kpis .v { font-size: 26px; font-weight: 800; margin: 2px 0; } .lv-kpis .v small { font-size: 13px; font-weight: 500; color: var(--ik-mut); margin-left: 4px; } .lv-kpis .s { font-size: 12.5px; color: var(--ik-mut); line-height: 1.5; }
.lv-expl { border: 1px solid var(--ik-line); border-radius: 10px; padding: 8px 14px; margin: 12px 0; } .lv-expl summary { cursor: pointer; font-weight: 600; } .lv-expl p { margin: 6px 0; font-size: 14.5px; line-height: 1.6; }
.lv-unk { border: 1px dashed var(--ik-acc); border-radius: 10px; padding: 8px 14px; margin: 12px 0; background: #fff; } .lv-unk ul { margin: 4px 0 0; padding-left: 18px; } .lv-unk li { margin: 4px 0; line-height: 1.55; }
.lv-disc { margin: 14px 0 0; font-size: 13.5px; color: var(--ik-mut); }
@media (max-width: 760px) { .lv-grid3 { grid-template-columns: minmax(0, 1fr); } .lv-grid { grid-template-columns: minmax(0, 1fr); } }

/* 말로 설명하기·서류 올리기 (narr_view.py · narr.js) */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.nv .ik-notice { margin: 0 0 10px; } .nv-f { display: grid; gap: 4px; margin: 0 0 10px; font-size: 14px; } .nv-msg { font: inherit; padding: 10px 12px; border: 1px solid var(--ik-line); border-radius: 10px; width: 100%; box-sizing: border-box; resize: vertical; }
.nv-act { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 6px 0 12px; } .nv-voice { margin: 0 0 12px; font-size: 14px; } .nv-voice summary, .nv-demo > summary { cursor: pointer; color: var(--ik-acc); font-weight: 600; } .nv-voice p { margin: 6px 0; line-height: 1.55; }
.nv-demo { margin-top: 18px; border-top: 1px solid var(--ik-line); padding-top: 10px; }
.nv-t { width: 100%; border-collapse: collapse; font-size: 14px; } .nv-t th { text-align: left; font-weight: 600; width: 24%; padding: 6px 8px 6px 0; vertical-align: top; } .nv-t td { padding: 6px 8px 6px 0; vertical-align: top; } .nv-t tr { border-top: 1px solid var(--ik-line); }
.nv-t small { display: block; color: var(--ik-mut); font-size: 12.5px; } .nv-cand { color: var(--ik-mut); font-size: 12.5px; } .nv-btns { text-align: right; white-space: nowrap; }
.nv-b { font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--ik-acc); border-radius: 8px; background: #fff; color: var(--ik-acc); cursor: pointer; margin-left: 4px; } .nv-b.sub { margin-left: auto; }
.nv-ed { display: inline-flex; gap: 4px; align-items: center; } .nv-ed input { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--ik-line); border-radius: 8px; width: 110px; }
.nv-item .ik-ih { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .nv-t th { width: 30%; } .nv-btns { white-space: normal; text-align: left; } .nv-ed input { width: 90px; } }
/* 계산 결과 자리(탭 분리, 10/16): 입력 탭에는 짧은 상태만, 결과는 ① 한눈에·② 현금흐름·⑥ 근거·검증(참고, 접힘) */
.lv-slot { margin: 0 0 18px; padding: 14px 16px; border: 2px solid #164ed8; border-radius: 14px; background: #f5f8ff; }
.lv-slot[hidden] { display: none; } .lv-slot .lv-res h4 { margin-top: 0; } .lv-slot-h { margin: 0 0 8px; font-size: 16px; }
.lv-slot[data-lv-slot="ref"] { border: 1px dashed #8a92a3; background: #fafbfc; padding: 8px 14px; }
.lv-ref > summary { cursor: pointer; font-weight: 700; color: #3a4252; } .lv-reftag { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 0 8px; border-radius: 999px; background: #eef0f4; color: #3a4252; border: 1px solid #8a92a3; margin-right: 4px; }
.lv-done { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: #e6f4ea; color: #14532d; font-weight: 700; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* 연금·소득 카드(income.js, 10/16) */
.lv-inc .inc-pick h4 { margin: 0 0 4px; font-size: 16px; } .lv-inc .inc-lead { margin: 0 0 12px; font-size: 14.5px; } .inc-f .lv-e { font-style: normal; font-size: 12px; color: #b91c1c; } .inc-f input.bad { border-color: #b91c1c; }
.inc-lead { font-size: 15.5px; line-height: 1.6; margin: 4px 0 16px; padding: 10px 14px; border-left: 4px solid #166534; background: #eef8f1; border-radius: 0 10px 10px 0; }
.inc-list { display: grid; gap: 12px; }
.inc-card { border: 1px solid #d9dde7; border-left: 5px solid #164ed8; border-radius: 12px; background: #fff; padding: 12px 16px 14px; }
.inc-card.g-public { border-left-color: #1e3a8a; } .inc-card.g-private { border-left-color: #0f766e; } .inc-card.g-account { border-left-color: #6d28d9; } .inc-card.g-other { border-left-color: #8a3b06; }
.inc-card header { display: flex; gap: 10px; align-items: center; } .inc-card header b { font-size: 16.5px; } .inc-g { font-size: 12px; color: #4a5468; background: #eef1f7; border-radius: 6px; padding: 1px 8px; }
.inc-x { margin-left: auto; font: inherit; font-size: 12.5px; color: #8a1c1c; background: none; border: 1px solid #e3b4b4; border-radius: 8px; padding: 3px 10px; cursor: pointer; }
.inc-d { margin: 4px 0 8px; font-size: 13.5px; color: #3a4252; line-height: 1.5; }
.inc-how { display: flex; gap: 6px; align-items: center; font-size: 13px; color: #4a5468; margin: 0 0 8px; }
.inc-fs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; align-items: end; }
.inc-f { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: #3a4252; } .inc-f select, .inc-f input { font: inherit; font-weight: 500; font-size: 14.5px; padding: 7px 9px; border: 1px solid #c3c8d4; border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box; }
.inc-in { display: flex; align-items: center; gap: 6px; } .inc-in i { font-style: normal; font-size: 12.5px; color: #4a5468; font-weight: 500; white-space: nowrap; }
.inc-amt, .inc-end { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 8px; align-items: end; grid-column: span 2; }
.inc-auto { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12.5px; color: #4a5468; } .inc-auto b { color: #14213d; }
.inc-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #3a4252; background: #f6f7fa; border-radius: 8px; padding: 7px 10px; } .inc-note span { display: inline-block; font-size: 11.5px; font-weight: 800; color: #3a4252; border: 1px solid #8a92a3; border-radius: 999px; padding: 0 7px; margin-right: 6px; }
.inc-add { margin: 14px 0 0; font: inherit; font-size: 15px; font-weight: 700; color: #164ed8; background: #fff; border: 2px dashed #164ed8; border-radius: 12px; padding: 12px 18px; width: 100%; cursor: pointer; }
.inc-pick { margin-top: 10px; padding: 14px 16px; border: 1px solid #d9dde7; border-radius: 14px; background: #fafbfc; } .inc-pick h3 { margin: 0 0 4px; font-size: 17px; } .inc-pick > p { margin: 0 0 10px; font-size: 13.5px; color: #4a5468; }
.inc-tg h4 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #4a5468; margin: 12px 0 6px; } .inc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.inc-tile { text-align: left; font: inherit; display: grid; gap: 3px; padding: 10px 12px; border: 1px solid #d9dde7; border-top: 4px solid; border-radius: 10px; background: #fff; cursor: pointer; color: #14213d; } .inc-tile b { font-size: 14.5px; } .inc-tile small { font-size: 12.5px; color: #4a5468; line-height: 1.45; }
.inc-tile.g-public { border-top-color: #1e3a8a; } .inc-tile.g-private { border-top-color: #0f766e; } .inc-tile.g-account { border-top-color: #6d28d9; } .inc-tile.g-other { border-top-color: #8a3b06; } .inc-tile:hover, .inc-tile:focus { border-color: #164ed8; outline: none; }
.inc-end:has(select[name=end] option[value=life]:checked) .inc-f:last-child { visibility: hidden; }
@media (max-width: 760px) { .inc-fs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .inc-amt, .inc-end { grid-column: 1 / -1; } }
.inc-how button { font: inherit; font-size: 13px; padding: 5px 12px; border: 1px solid #c3c8d4; background: #fff; border-radius: 999px; cursor: pointer; color: #14213d; } .inc-how button[aria-pressed=true] { background: #164ed8; border-color: #164ed8; color: #fff; }
.inc-end:has(select[name=end] option[value=life]:checked) .inc-f:last-child { visibility: hidden; }
/* 모든 탭 내 입력 전환(mine_view.js, 10/16) — 한 번에 한 가구만 */
body[data-view="mine"] .mv-ex { display: none !important; }
body:not([data-view="mine"]) .mv-blk { display: none !important; }
body[data-view="mine"] [data-pane] .lv-slot[data-lv-slot="sum"], body[data-view="mine"] [data-pane] .lv-slot[data-lv-slot="cash"], body[data-view="example"] .lv-slot { display: none !important; }
.mv-back { display: none; } body[data-view="example"] .mv-back { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #eef2fb; border: 1px solid #c9d6f8; font-size: 14px; }
.mv-back button, .mv-sw button { font: inherit; font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 999px; border: 1px solid #164ed8; background: #fff; color: #164ed8; cursor: pointer; }
.mv-sw { display: inline-flex; gap: 4px; margin-left: 8px; } .mv-sw button[aria-pressed="true"] { background: #164ed8; color: #fff; }
.mv-band { background: #e6f4ea !important; border-color: #86c79a !important; color: #14532d !important; }
.mv-tag { display: inline-block; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 1px 9px; margin: 0 6px 6px 0; vertical-align: middle; }
.mv-tag.mine { background: #e6f4ea; color: #14532d; border: 1px solid #86c79a; } .mv-tag.pend { background: #f2f4f8; color: #3a4252; border: 1px dashed #8a92a3; } .mv-tag.stat { background: #eef1f7; color: #3a4252; border: 1px solid #c3c8d4; }
.mv-pend { border: 1px dashed #8a92a3; border-radius: 12px; background: repeating-linear-gradient(135deg, #fff 0 10px, #f6f7fa 10px 20px); padding: 16px 18px; color: #3a4252; font-size: 14px; margin: 0 0 16px; } .mv-pend h3 { margin: 4px 0 6px; font-size: 16px; color: #14213d; } .mv-pend p { margin: 0; line-height: 1.55; }
.mv-pendk { background: repeating-linear-gradient(135deg, #fff 0 10px, #f6f7fa 10px 20px); }
.mv-lines { margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.6; }
.mv-band { padding: 8px 12px; border-radius: 10px; border: 1px solid #86c79a; }
.mv-hm { border-collapse: separate; border-spacing: 3px; font-size: 13px; font-variant-numeric: tabular-nums; } .mv-hm th { font-weight: 700; color: #3a4252; padding: 4px 8px; text-align: center; } .mv-hm td { padding: 8px 10px; text-align: center; border-radius: 6px; min-width: 52px; font-weight: 700; } .mv-hm td.mv-hm-b { outline: 3px solid #14213d; } .mv-hm td.mv-hm-u { background: #f2f4f8; color: #3a4252; }
/* 직접 입력 1단계 — 가족·대차대조표·질문 유도(household.js, 10/16) */
.hh-adds { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; } .hh-adds button { font: inherit; font-size: 14px; font-weight: 700; color: #164ed8; background: #fff; border: 2px dashed #164ed8; border-radius: 10px; padding: 8px 14px; cursor: pointer; }
.inc-card.hh-fam { border-left-color: #1e3a8a; } .hh-avg { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; color: #6b4a06; background: #fdf3dc; border: 1px dashed #c9a24a; border-radius: 999px; padding: 0 7px; vertical-align: middle; }
.bs-exbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 8px; padding: 6px 12px; border-radius: 10px; background: #fdf3dc; border: 1px dashed #c9a24a; font-size: 13.5px; color: #5c3b00; } .bs-exbar[hidden] { display: none; }
.bs { border: 2px solid #14213d; border-radius: 14px; background: #fff; overflow: hidden; } .bs-hd { padding: 10px 16px; background: #14213d; color: #fff; } .bs-hd b { font-size: 16px; }
.bs-cols { display: grid; grid-template-columns: 1fr 1fr; } .bs-col { padding: 12px 16px; } .bs-col + .bs-col { border-left: 2px solid #14213d; } .bs-col h4 { margin: 0 0 6px; font-size: 15px; display: flex; justify-content: space-between; } .bs-col h5 { margin: 12px 0 4px; font-size: 12.5px; color: #4a5468; display: flex; justify-content: space-between; }
.bs-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 7px 0; border-bottom: 1px dashed #e4e7ee; font-size: 14px; } .bs-l { flex: 1 1 150px; } .bs-row input { font: inherit; padding: 5px 8px; border: 1px solid #c3c8d4; border-radius: 7px; text-align: right; } .bs-row input.bad { border-color: #b91c1c; } .bs-row > i { font-style: normal; font-size: 12px; color: #4a5468; }
.bs-own { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 2px solid #1e3a8a; border-radius: 7px; background: #fff; } .bs-more { flex-basis: 100%; font-size: 12.5px; color: #4a5468; padding-left: 6px; } .bs-more select { font: inherit; font-size: 12.5px; }
.bs-ill-note { font-size: 12px; color: #6b4a06; background: #fdf3dc; border-radius: 6px; padding: 2px 8px; margin: 2px 0 6px; display: inline-block; }
.bs-ft { border-top: 2px solid #14213d; padding: 12px 16px; background: #f6f8fc; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: center; } .bs-nw { font-size: 14px; } .bs-nw b { display: block; font-size: 28px; font-variant-numeric: tabular-nums; } .bs-nw b.neg { color: #b91c1c; } .bs-meta b { font-size: 13px; }
.bs-bar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; font-size: 11.5px; font-weight: 700; color: #fff; margin: 4px 0; background: #eef1f7; } .bs-bar .bl { background: #164ed8; display: flex; align-items: center; padding-left: 6px; white-space: nowrap; } .bs-bar .bi { background: #5b6475; display: flex; align-items: center; padding-left: 6px; white-space: nowrap; }
.bs-meta { font-size: 12.5px; color: #3a4252; display: flex; flex-wrap: wrap; gap: 4px 14px; } .bs-meta i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
.hh-e { display: block; flex-basis: 100%; font-style: normal; font-size: 12px; color: #b91c1c; }
.q-need { outline: 2px solid #d97706; outline-offset: 1px; } .q-bub { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: #5c3b00; background: #fff7e6; border: 1px solid #f0c27b; border-radius: 10px; padding: 6px 10px; position: relative; flex-basis: 100%; }
.q-bub::before { content: ""; position: absolute; top: -6px; left: 18px; width: 10px; height: 10px; background: #fff7e6; border-left: 1px solid #f0c27b; border-top: 1px solid #f0c27b; transform: rotate(45deg); }
.q-dot { flex: none; width: 10px; height: 10px; margin-top: 3px; border-radius: 50%; background: #d97706; animation: qp 1.4s ease-out 3; } @keyframes qp { 0% { box-shadow: 0 0 0 0 rgba(217, 119, 6, .55); } 100% { box-shadow: 0 0 0 10px rgba(217, 119, 6, 0); } }
@media (prefers-reduced-motion: reduce) { .q-dot { animation: none; box-shadow: 0 0 0 3px rgba(217, 119, 6, .35); } }
.q-list { margin: 0 0 10px; padding: 8px 12px; border-radius: 10px; background: #fff7e6; border: 1px solid #f0c27b; font-size: 13.5px; color: #5c3b00; } .q-list[hidden] { display: none; } .q-list a { color: #164ed8; font-weight: 700; }
@media (max-width: 760px) { .bs-cols, .bs-ft { grid-template-columns: 1fr; } .bs-col + .bs-col { border-left: 0; border-top: 2px solid #14213d; } }

/* 표준(평균) 가정 패널(10/16 합의 — 값·출처·기준연도·바꾸기, 되묻는 칸, 자른 해, 알림) */
.lv-std { margin: 14px 0; padding: 12px 14px; border: 1px solid #e7cf8f; border-left: 4px solid #c9a24a; border-radius: 10px; background: #fffaf0; font-size: 14px; }
.lv-std h4 { margin: 0 0 4px; font-size: 16px; } .lv-std .lv-note { margin: 0 0 8px; }
.std-list, .std-clip ul, .std-notes ul, .std-q ul, .std-rep { list-style: none; margin: 0; padding: 0; }
.std-row { padding: 8px 0; border-top: 1px dashed #d9c58a; } .std-row:first-child { border-top: 0; }
.std-main { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .std-v { font-weight: 800; font-variant-numeric: tabular-nums; }
.std-b { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 0 8px; } .std-b.a { color: #6b4a06; background: #fdf3dc; border: 1px dashed #c9a24a; } .std-b.u { color: #14532d; background: #e6f4ea; border: 1px solid #86c79a; }
.std-sub { font-size: 12.5px; color: #4a5468; margin: 2px 0 6px; } .std-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .std-ed { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; } .std-ed input { width: 90px; }
.std-q, .std-clip, .std-notes { margin-top: 10px; padding-top: 8px; border-top: 1px solid #e7cf8f; } .std-q li, .std-clip li, .std-notes li, .std-rep li { margin: 2px 0; font-size: 13px; }
.std-q a { font-weight: 700; } .std-code { font-size: 10.5px; font-weight: 400; color: #6b7385; white-space: nowrap; }
.hh-edu { display: block; margin: 4px 0 0; font-size: 12.5px; color: #4a5468; }

/* 거주=기본값 세트·항목별 국가·통화·환율(10/16) */
.lv-cur { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; padding: 10px 14px; border: 2px solid #14213d; border-radius: 12px; background: #fff; margin: 0 0 12px; }
.cc-sel { font: inherit; font-size: 12.5px; border: 2px solid #1e3a8a; border-radius: 7px; background: #fff; padding: 3px 6px; }
.bs-cu, .bs-cu2 { font-style: normal; font-size: 12.5px; color: #4a5468; min-width: 1.6em; }
.bs-acct-w { font-size: 12.5px; color: #4a5468; }
.fx { margin: 10px 0; padding: 12px 14px; border: 2px solid #c9a24a; border-radius: 12px; background: #fffaf0; } .fx h4 { margin: 0 0 4px; font-size: 15.5px; }
.lv-excl { margin: 10px 0; padding: 10px 14px; border: 1px solid #e7cf8f; border-left: 4px solid #b07a10; border-radius: 10px; background: #fffaf0; font-size: 13.5px; } .lv-excl ul { margin: 6px 0 0; padding-left: 18px; } .lv-excl li { margin: 3px 0; }
.inc-gap .inc-note { margin: 8px 0 0; }
.bs-row > .bs-l, .bs-row > .bs-kind { flex: 1 1 100%; }
.bs-row select.cc-sel, .bs-row select.bs-own { max-width: 118px; }

.mv-krlink { margin-left: 10px; font-size: 13px; font-weight: 700; }

.dv-code { color: #6b7385; font-size: 11.5px; font-weight: 400; }

.bs-nwd { font-size: 12.5px; color: #3a4252; font-weight: 400; margin: 4px 0; line-height: 1.5; } .bs-nwd div:last-child { font-weight: 700; }

/* 입력하기 2단계: 앞으로 나갈 돈(정기 지출·큰 일) */
.oe-mix { font-size: 12.5px; color: #4a5468; margin: 0 0 6px; } #oe-body h4 { margin: 14px 0 4px; font-size: 16px; }
.oe-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 6px; } .oe-kinds button { font: inherit; font-size: 13.5px; font-weight: 700; color: #164ed8; background: #fff; border: 2px dashed #164ed8; border-radius: 10px; padding: 7px 12px; cursor: pointer; }
.oe-card { border: 1px solid #d9dde7; border-left: 5px solid #0f766e; border-radius: 12px; background: #fff; padding: 12px 14px; margin: 8px 0; } .oe-card.ev { border-left-color: #8a3b06; }
.oe-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .oe-card header b { font-size: 15.5px; } .oe-tag { font-size: 11.5px; font-weight: 700; color: #4a5468; background: #eef1f7; border-radius: 999px; padding: 1px 9px; }
.oe-card header .rm { margin-left: auto; font: inherit; font-size: 12.5px; color: #b91c1c; background: #fff; border: 1px solid #e3b4b4; border-radius: 8px; padding: 2px 10px; cursor: pointer; }
.oe-f { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; } .oe-f label { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; font-weight: 700; color: #3a4252; }
.oe-f input, .oe-f select { font: inherit; font-size: 14.5px; padding: 6px 9px; border: 1px solid #c3c8d4; border-radius: 8px; background: #fff; font-weight: 400; color: #14213d; } .oe-f input { width: 110px; text-align: right; } .oe-f .w2 input { width: 70px; } .oe-u { font-style: normal; font-weight: 400; color: #4a5468; }
.oe-d { margin: 8px 0 0; font-size: 12.5px; color: #4a5468; } .oe-gap { display: inline-block; font-size: 11.5px; font-weight: 700; color: #5c3b00; background: #fff1cc; border: 1px dashed #b07a10; border-radius: 999px; padding: 0 9px; }
.oe-strip { margin-top: 14px; border: 2px solid #14213d; border-radius: 14px; background: #fff; padding: 12px 16px; } .oe-strip h3 { margin: 0 0 2px; font-size: 17px; } .oe-strip svg { width: 100%; height: auto; display: block; } .oe-strip .b1 { fill: #0f766e; } .oe-strip .b2 { fill: #c2410c; } .oe-strip .ax { stroke: #8a92a3; } .oe-strip text { font-size: 11px; fill: #3a4252; }
.oe-nb { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; margin-top: 8px; } .oe-warn { margin: 8px 0 0; font-size: 12.5px; color: #5c3b00; background: #fff7e6; border: 1px solid #f0c27b; border-radius: 8px; padding: 5px 10px; }

.mv-mfill .mv-card { border: 1px solid #d9dde7; border-radius: 12px; background: #fff; padding: 10px 14px; margin: 10px 0; } .mv-mfill h2 { font-size: 17px; margin: 0 0 6px; } .mv-mfill ul, .mv-mfill ol { margin: 0; padding-left: 18px; line-height: 1.6; }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .viz .pc-note, :root:not([data-theme="light"]) .mv-blk .viz .pc-note { color: #b4bccb; } }

.nv-ck { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; margin: 6px 0; line-height: 1.5; } .nv-ck input { margin-top: 4px; } .nv-acc { margin: 6px 0 0; }

.nv-bd { display: inline-block; font-size: 11.5px; font-weight: 700; color: #5c3b00; background: #fdf3dc; border: 1px dashed #c9a24a; border-radius: 999px; padding: 0 8px; margin-right: 4px; }

.nv-use { border: 1px solid #c9d8f5; background: #f3f6fc; border-radius: 10px; padding: 8px 14px 10px; margin: 0 0 10px; font-size: 14px; color: #1f2d4a; } .nv-use b { display: block; margin: 0 0 2px; } .nv-use ul { margin: 0; padding-left: 18px; } .nv-fxb label { margin-right: 8px; } .nv-fxb input { width: 8em; } .nv-qi { display: inline-block; margin: 2px 6px 2px 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nv-use { background: #1c2740; border-color: #34466e; color: #dbe5fb; } }

/* 쉬운 화면 '더 자세히' 접이식(more_view.js): 전문가 화면 표를 모바일 폭에 맞게 접어서 */
.mx-more { margin: 18px 0 8px; } .mx-more h2 { font-size: 18px; margin: 0 0 4px; } .mx-d { border: 1px solid var(--ik-line, #d7dde8); border-radius: 10px; background: #fff; margin: 8px 0; padding: 0 12px; } .mx-d > summary { cursor: pointer; padding: 11px 0; font-weight: 700; font-size: 15px; } .mx-d[open] > summary { border-bottom: 1px solid #eef0f4; margin-bottom: 8px; }
.mx-d .pc-wrap { overflow-x: auto; margin: 6px 0 10px; } .mx-d .pc-wrap.tall { max-height: 320px; overflow-y: auto; } .mx-d .pc-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; } .mx-d .pc-tbl th { text-align: left; font-size: 12.5px; color: #4a5468; padding: 6px 8px; border-bottom: 1px solid #d7dde8; white-space: nowrap; } .mx-d .pc-tbl td { padding: 6px 8px; border-bottom: 1px solid #eef0f4; vertical-align: top; } .mx-d .pc-tbl .r { text-align: right; } .mx-d .sub, .mx-d .pc-note { font-size: 13px; color: #4a5468; margin: 4px 0 8px; }