/* 대출 상환 계산기 (calc_loan.py · loan.js 와 짝) — 계산기가 있는 글에서만 불러옴
   색: 원금 = 파랑, 이자 = 주황, 낸 위치 = 남색 / 블로그 본문 스타일(.post-body p·h2·ul 등)이 새어 들어오지 않게 덮어씀 */
.lc { overflow-anchor: none; --lc-line: #e4e7eb; --lc-soft: #f6f8fa; --lc-muted: #656d76; --lc-blue: #2563eb; --lc-blue-ink: #1d4ed8; --lc-blue-l: #60a5fa;
  --lc-org: #ea580c; --lc-org-l: #fdba74; --lc-org-ink: #ea580c; --lc-navy: #1e3a8a; --lc-navy-bg: #eef2ff;
  margin: 1.6em 0 2em; border: 1px solid var(--lc-line); border-radius: 18px; background: linear-gradient(90deg, #2563eb, #60a5fa) top / 100% 5px no-repeat, #fff; font-size: 15px; line-height: 1.6; scroll-margin-top: 12px; }
.lc * { box-sizing: border-box; }
.post-body .lc p, .post-body .lc ul, .post-body .lc h3, .post-body .lc h4 { margin: 0; }
.post-body .lc li { margin: 0; }
.lc button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lc button:disabled { cursor: not-allowed; }
.lc button:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(37, 99, 235, .25); }
.lc input:focus-visible { outline: 0; }
.lc .lc-num { font-variant-numeric: tabular-nums; }
.lc .lc-i { color: var(--lc-org-ink); }
.lc .lc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 머리 */
.lc .lc-head { display: flex; align-items: center; gap: 12px; padding: 24px 22px 0; }   /* 맨 위 5px 파란 띠는 .lc 배경 */
.lc .lc-hico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lc-blue); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .28); }
.lc .lc-hico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.post-body .lc .lc-head h2 { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; font-size: 20px; letter-spacing: -0.02em; }
.lc .lc-tag { flex: none; font-size: 11px; color: var(--lc-muted); background: var(--lc-soft); border-radius: 999px; padding: 2px 8px; }

/* 입력 */
.lc .lc-in { padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 20px; }
.lc .lc-seg { display: flex; gap: 4px; padding: 4px; background: #f3f4f6; border-radius: 14px; }
.lc .lc-seg button { position: relative; flex: 1 1 0; min-width: 0; min-height: 52px; padding: 10px 30px 10px 12px; border: 0; border-radius: 11px; background: transparent; text-align: left; }
.lc .lc-seg button b { display: block; font-size: 16px; }
.lc .lc-seg button span { display: block; margin-top: 1px; font-size: 13px; color: var(--lc-muted); }
.lc .lc-seg button.on { background: #eff6ff; box-shadow: 0 0 0 2px var(--lc-blue), 0 2px 8px rgba(37, 99, 235, .14); }
.lc .lc-seg button.on::after { content: "✓"; position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--lc-blue); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.lc .lc-seg button.on:focus-visible { box-shadow: 0 0 0 2px var(--lc-blue), 0 0 0 6px rgba(37, 99, 235, .22); }
.lc .lc-seg button:not(.on):hover { background: rgba(255, 255, 255, .6); }
.lc .lc-seg button.on b { color: var(--lc-blue-ink); }
.lc .lc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 22px 24px; }
.lc .lc-f { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.lc .lc-lh { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lc .lc-lh label, .lc .lc-lbl { font-size: 14px; font-weight: 700; }
.lc .lc-ko { font-size: 13px; color: var(--lc-blue); font-weight: 700; }
.lc .lc-note, .lc .lc-note2 { font-size: 13px; color: var(--lc-muted); }
.lc .lc-row { display: flex; gap: 8px; }
.lc .lc-grow { flex: 1; min-width: 0; }
.lc .lc-fld { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 1px solid #d0d7de; border-radius: 12px; background: #fff; }
.lc .lc-fld:focus-within { border-color: var(--lc-blue); box-shadow: 0 0 0 3px #dbeafe; }
.lc .lc-fld input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 18px; font-weight: 600; color: var(--text, #1f2328); text-align: right; font-variant-numeric: tabular-nums; }
.lc .lc-fld input:focus-visible { outline: 0; }
.lc .lc-fld > span { font-size: 16px; color: var(--lc-muted); }
.lc .lc-ib { flex: none; width: 34px; height: 34px; border: 0; border-radius: 9px; background: #f1f3f5; font-size: 18px; line-height: 1; }
.lc .lc-ib:hover:not(:disabled) { background: #e7eaee; }
.lc .lc-clrw { display: contents; }
.lc .lc-clr { flex: none; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: #d0d7de; color: #fff; font-size: 15px; line-height: 22px; text-align: center; }
.lc .lc-clr:hover { background: #9aa4ae; }
.lc .lc-ib:disabled { color: #c4cbd2; }
.lc .lc-tabs { display: flex; gap: 2px; padding: 3px; background: #f3f4f6; border-radius: 12px; }
.lc .lc-tabs button { min-width: 52px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--lc-muted); font-size: 14px; font-weight: 700; }
.lc .lc-tabs button.on { background: var(--lc-blue); color: #fff; box-shadow: 0 1px 3px rgba(37, 99, 235, .3); }
.lc .lc-tabs-s button { min-height: 34px; }
.lc .lc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lc .lc-chips[data-r="termChips"] { flex-wrap: nowrap; }
.lc .lc-chips[data-r="termChips"] .lc-ch { flex: 1 1 auto; padding: 0 8px; }
.lc .lc-ch { min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: #f1f3f5; font-size: 14px; font-weight: 600; color: #3d444d; white-space: nowrap; }
.lc .lc-ch:hover:not(:disabled):not(.on) { background: #e7eaee; }
.lc .lc-ch.on { background: var(--lc-blue); color: #fff; font-weight: 700; }
.lc .lc-ch:disabled { color: #b6bdc5; background: #f6f8fa; }
/* 거치 버튼 줄은 옆 금리 입력칸과 같은 높이 가운데 */
.lc .lc-chips-fit { min-height: 46px; }
/* 법정 최고금리 초과: 작은 주황 글씨 + ? (누르거나 올리면 말풍선) */
.lc .lc-rw { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; color: #c2410c; font: inherit; font-size: 12px; font-weight: 700; cursor: help; }
.lc .lc-rw i { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #ffedd5; color: #c2410c; font-size: 10px; font-style: normal; font-weight: 800; }
.lc .lc-rw-tip { position: absolute; right: 0; top: calc(100% + 8px); z-index: 5; display: none; width: 230px; padding: 10px 12px; border-radius: 10px; background: #1f2937; color: #fff; font-size: 12px; font-weight: 500; line-height: 1.55; text-align: left; box-shadow: 0 8px 20px -6px rgba(15, 23, 42, .35); }
.lc .lc-rw-tip::before { content: ""; position: absolute; right: 6px; top: -5px; width: 10px; height: 10px; background: #1f2937; transform: rotate(45deg); }
.lc .lc-rw.open .lc-rw-tip { display: block; }
@media (hover: hover) { .lc .lc-rw:hover .lc-rw-tip { display: block; } }
.lc .lc-max { font-size: 12px; font-weight: 700; color: #c2410c; }
/* 금리 + 거치: PC 는 격자 두 칸 그대로(묶음이 같은 두 칸 격자), 거치 설명은 거치 아래 */
.lc .lc-pair { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 10px 24px; }
.lc .lc-pair > .lc-gn { grid-column: -2 / -1; margin-top: -4px !important; }
.lc .lc-pair > .lc-gn:empty { display: none; }
.lc .lc-gsel { display: none; }
.lc .lc-gsel select { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 600; color: var(--text, #1f2328); }
.lc .lc-gn { margin-top: 2px !important; font-size: 13px; color: var(--lc-muted); }
.lc .lc-off { padding: 12px 14px !important; background: var(--lc-soft); border-radius: 12px; font-size: 14px; color: var(--lc-muted); }

/* 결과 */
.lc .lc-res { padding: 22px; background: #f8fafc; border-top: 1px solid var(--lc-line); }
.lc .lc-figs { display: flex; flex-wrap: wrap; gap: 14px 0; }
.lc .lc-fig { padding-right: 26px; }
.lc .lc-fig.lc-arrow { position: relative; padding-left: 34px; }
.lc .lc-fig.lc-arrow::before { content: "→"; position: absolute; left: 0; bottom: 4px; width: 22px; text-align: center; font-size: 20px; color: #9aa4ae; }
.lc .lc-big.lc-down { color: #047857; }
.lc .lc-fig p:first-child { font-size: 14px; color: var(--lc-muted); font-weight: 700; }
.lc .lc-big { margin-top: 2px !important; font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; white-space: nowrap; }
.lc .lc-big3 { font-size: 28px; }
.lc .lc-big-s { font-size: 22px; white-space: normal; }
.lc .lc-sub { margin-top: 10px !important; font-size: 14px; color: var(--lc-muted); }
.lc .lc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 18px; }
.lc .lc-stats > div { background: #fff; border: 1px solid var(--lc-line); border-radius: 14px; padding: 12px 15px; }
.lc .lc-stats p:first-child { font-size: 13px; color: var(--lc-muted); }
.lc .lc-stats .lc-stl { display: flex; flex-wrap: nowrap; align-items: baseline; column-gap: 4px; }
.lc .lc-stats .lc-stl > span { flex: none; white-space: nowrap; }
.lc .lc-stats .lc-stl.lc-stl-wrap { flex-wrap: wrap; }   /* 글자를 10px까지 줄여도 안 들어가면 아래 줄로 */
.lc .lc-stf { font-size: 12px; color: var(--lc-muted); white-space: nowrap; }
.lc .lc-stf .lc-sw { width: 8px; height: 8px; margin: 0 2px 0 1px; border-radius: 2px; vertical-align: 0; }
.lc .lc-stats p + p { margin-top: 2px !important; font-size: 19px; font-weight: 800; white-space: nowrap; }
.lc .lc-share-bar { display: flex; height: 12px; margin-top: 16px; border-radius: 999px; overflow: hidden; background: #e5e7eb; }
.lc .lc-share-bar i { display: block; }
.lc .lc-bp { background: var(--lc-blue); }
.lc .lc-bi { background: var(--lc-org); }
.lc .lc-legend2 { display: flex; justify-content: space-between; gap: 8px; margin-top: 7px; font-size: 13px; }
.lc .lc-sw { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.lc .lc-sw-p { background: var(--lc-blue); } .lc .lc-sw-i { background: var(--lc-org); }
.lc .lc-sw-pl { background: var(--lc-blue-l); } .lc .lc-sw-il { background: var(--lc-org-l); }
.lc .lc-sw-g { height: 4px; background: #94a3b8; vertical-align: 2px; }
/* 결과 맨 위: 숫자 줄 + 결과 공유 */
.lc .lc-rtop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 16px; }
.lc .lc-rtop .lc-figs { flex: 1 1 auto; min-width: 0; }
.lc .lc-figs { flex-wrap: nowrap; }   /* PC: 숫자는 두 개든 세 개든 한 줄 (넘치면 loan.js 가 글자를 줄이고, 그래도 안 되면 lc-figs-wrap) */
.lc .lc-fig:last-child { padding-right: 0; }
.lc .lc-big { white-space: nowrap; }
/* 아주 큰 숫자: 글자를 최소까지 줄여도 안 들어갈 때만 배치를 바꿈 (loan.js fitText) */
.lc .lc-figs.lc-figs-wrap { flex-wrap: wrap !important; }
.lc .lc-figs.lc-figs-wrap .lc-fig { flex-basis: 100%; }
.lc .lc-figs.lc-f3.lc-figs-wrap .lc-fig { flex-basis: auto; }   /* 세 개: 두 줄로 자연스럽게 (폰과 같은 모양) */
.lc .lc-stats.lc-stack, .lc .lc-pstats.lc-stack { grid-template-columns: minmax(0, 1fr); }
.lc .lc-hbar .lc-num, .lc .lc-legend2 > span, .lc .lc-pstats .lc-num, .lc .lc-tr > span, .lc .lc-kv b, .lc .lc-dr > span, .lc .lc-nw, .lc .lc-big, .lc .lc-stats .lc-num { white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.lc .lc-tr > span:first-child { white-space: normal; }
/* 펼치기 줄 (아코디언): 줄 아래로 그 내용이 열림 */
.lc .lc-accs { margin-top: 18px; border: 1px solid var(--lc-line); border-radius: 14px; background: #fff; overflow: hidden; }
.lc .lc-acc { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: #fff; text-align: left; }
.lc .lc-acc + .lc-acc, .lc .lc-accs .lc-panel + .lc-acc { border-top: 1px solid var(--lc-line); }
.lc .lc-acc:hover { background: #f8fafc; }
.lc .lc-acc:focus-visible { box-shadow: inset 0 0 0 3px rgba(37, 99, 235, .3); }
.lc .lc-acc-tx { flex: 1 1 auto; min-width: 0; }
.lc .lc-acc-tx b { display: block; font-size: 15px; font-weight: 700; }
.lc .lc-acc-tx span { display: block; margin-top: 2px; font-size: 13px; color: var(--lc-muted); }
.lc .lc-acc.on .lc-acc-tx b { color: var(--lc-blue-ink); }
.lc .lc-chev { flex: none; width: 9px; height: 9px; margin: -4px 6px 0 0; border-right: 2px solid #8b949e; border-bottom: 2px solid #8b949e; transform: rotate(45deg); transition: transform .15s; }
.lc .lc-acc.on .lc-chev { margin-top: 4px; border-color: var(--lc-blue); transform: rotate(-135deg); }
.lc .lc-accs .lc-panel { margin: 0; border: 0; border-top: 1px solid var(--lc-line); border-radius: 0; background: #fbfcfd; }
.lc .lc-pcond { margin: 0 0 12px !important; font-size: 12px; color: var(--lc-muted); }   /* 그래프·상환표 '지금 조건' 줄과 같은 모양 */
.lc .lc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 15px; border: 1px solid #d0d7de; border-radius: 12px; background: #fff; font-size: 15px; font-weight: 700; }
.lc .lc-btn:hover, .lc .lc-btn.on { border-color: var(--lc-blue); color: var(--lc-blue-ink); }
.lc .lc-btn.on { background: #eff6ff; }
.lc .lc-btn-fill { background: var(--lc-blue); border-color: var(--lc-blue); color: #fff; }
.lc .lc-btn-fill:hover { background: var(--lc-blue-ink); color: #fff; }

/* 비교 (결과 아래로 펼침) */
.lc .lc-panel { margin-top: 16px; padding: 18px; background: #fff; border: 1px solid var(--lc-line); border-radius: 16px; }
.lc .lc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 12px; padding-top: 6px; }
.lc .lc-card { position: relative; display: flex; flex-direction: column; padding: 15px 12px; border: 1px solid var(--lc-line); border-radius: 14px; }
.lc .lc-card.cur { border: 2px solid var(--lc-blue); padding: 14px 11px; background: #fbfdff; }
.lc .lc-best { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: #ecfdf5; color: #047857; font-size: 12px; font-weight: 700; vertical-align: 2px; }
.lc .lc-best.lc-nog { background: #f3f4f6; color: var(--lc-muted); }   /* 만기일시: 다른 두 방식만 거치가 있을 때 */
.lc .lc-ct:not(.lc-fitwrap) > span { white-space: nowrap; }
.lc .lc-ct .lc-v2a { font-weight: 700; color: var(--text, #1f2328); }   /* 거치 뒤 첫 달 금액 (화살표만 회색) */
.lc .lc-badge { position: absolute; top: -12px; right: 12px; background: var(--lc-blue); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.lc .lc-cn { font-size: 16px; font-weight: 700; }
.lc .lc-cs { margin-bottom: 10px !important; font-size: 13px; color: var(--lc-muted); }
.lc .lc-cl { font-size: 13px; font-weight: 700; color: var(--lc-muted); }
.lc .lc-cl2 { margin-top: 8px !important; }
.lc .lc-cv { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.3; white-space: nowrap; }
.lc .lc-cv.lc-down, .lc .lc-ct .lc-down { color: #047857; } .lc .lc-ct .lc-down { font-weight: 700; }
.lc .lc-ct { min-height: 27px; display: flex; align-items: center; font-size: 14px; color: var(--lc-muted); }
.lc .lc-kvs { margin-top: auto; padding-top: 10px; }
.lc .lc-kv { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; padding: 7px 0; border-top: 1px solid #eef0f3; font-size: 14px; white-space: nowrap; }
.lc .lc-kv span { color: var(--lc-muted); font-size: 13px; }
.lc .lc-kv b { margin-left: auto; font-size: 13.5px; letter-spacing: -0.01em; }
.lc .lc-bad { color: var(--lc-org-ink); } .lc .lc-good { color: #047857; }
.post-body .lc .lc-panel h4 { margin: 18px 0 10px; font-size: 14px; }
.lc .lc-hbars { display: flex; flex-direction: column; gap: 8px; }
.lc .lc-hbar { display: grid; grid-template-columns: 78px minmax(0, 1fr) 110px; align-items: center; gap: 10px; font-size: 14px; }
.lc .lc-hbar > div { height: 14px; background: #f3f4f6; border-radius: 6px; }
.lc .lc-hbar i { display: block; height: 100%; border-radius: 6px; background: var(--lc-org-l); }
.lc .lc-hbar.cur > span:first-child { font-weight: 800; color: var(--lc-blue-ink); }
.lc .lc-hbar > span:last-child { text-align: right; }
.lc .lc-ins { margin-top: 16px; padding: 13px 15px; background: #eff6ff; border-radius: 12px; }
.lc .lc-ins > p { margin-bottom: 4px !important; font-size: 14px; font-weight: 700; color: var(--lc-blue-ink); }
.post-body .lc .lc-ins ul { padding-left: 18px; }
.lc .lc-ins li { font-size: 14px; line-height: 1.65; }
.lc .lc-ins li + li { margin-top: 4px; }
.lc .lc-ins li b { font-weight: 800; color: var(--text, #1f2328); }
.lc .lc-ins li b.lc-bad { color: var(--lc-org-ink); } .lc .lc-ins li b.lc-good { color: #047857; }
.lc .lc-ins li b.lc-bad, .lc .lc-ins li b.lc-good { white-space: nowrap; }   /* 화살표만 다음 줄로 떨어지지 않게 */   /* 조건 비교 표의 차이와 같은 색 · 화살표 */
.lc .lc-ins > p b { font-weight: 800; }
.lc .lc-bin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; }
.lc .lc-bl { font-size: 14px; font-weight: 700; color: var(--lc-blue-ink); white-space: nowrap; }
.lc .lc-blh { flex: 1 1 100%; display: flex; align-items: baseline; gap: 10px; }   /* PC: '현재 연 6%'를 이름 바로 옆에 (입력칸이 좁아서 오른쪽 끝이면 동떨어져 보임) */
.lc .lc-bnow { font-size: 13px; color: var(--lc-muted); white-space: nowrap; }   /* 바꿀 항목의 지금 값 */
.lc .lc-cnow { margin: 0 0 10px !important; }   /* 조건 바꿔 비교 맨 위 '지금 조건' 줄 */
.lc .lc-vtabs { display: inline-flex; max-width: 100%; }
.lc .lc-vtabs button { min-height: 40px; padding: 0 16px; }
.lc .lc-vtabs button:disabled { opacity: .4; }
.lc .lc-ab .lc-bpt { white-space: nowrap; }   /* '연 3.6%' · '거치 1년 + 원금균등 4년' 이 중간에서 안 끊기게 */
.lc .lc-ab .lc-b .lc-bpt { color: var(--lc-muted); }
.lc .lc-ab .lc-b .lc-bpt.on { color: var(--lc-blue-ink); font-weight: 800; }
.lc .lc-bfld { width: 210px; height: 46px; }
.lc .lc-bwide { width: 260px; }
.lc .lc-bin .lc-tabs button { min-height: 40px; }
.lc .lc-ab { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-top: 14px; }
.lc .lc-ab > div { padding: 13px 15px; border: 1px solid var(--lc-line); border-radius: 13px; font-size: 14px; }
.lc .lc-ab .lc-b { border-color: #93c5fd; background: #f8fbff; }
.lc .lc-ab .lc-b .lc-cl { color: var(--lc-blue-ink); }
.lc .lc-ab p + p { margin-top: 4px !important; }
.lc .lc-dt { margin-top: 10px; border: 1px solid var(--lc-line); border-radius: 13px; overflow: hidden; }
.lc .lc-dr { display: grid; grid-template-columns: 72px repeat(2, minmax(0, 1fr)) minmax(0, 1.35fr); gap: 8px; align-items: center; padding: 11px 14px; border-top: 1px solid #eef0f3; font-size: 14px; text-align: right; letter-spacing: -0.01em; }
.lc .lc-dr > * { white-space: nowrap; }
.lc .lc-dr > :last-child { white-space: normal; }
.lc .lc-dsub { display: block; font-size: 12px; }
.lc .lc-dr > :first-child { white-space: normal; line-height: 1.35; }
.lc .lc-nw { white-space: nowrap; }
.lc .lc-dr > :first-child { text-align: left; font-size: 14px; color: var(--lc-muted); }
.lc .lc-dh { border-top: 0; background: var(--lc-soft); font-size: 13px; font-weight: 700; color: var(--lc-muted); }
/* 그래프 · 이미 갚고 있다면 · 상환표 */
.lc .lc-sec { padding: 22px; border-top: 1px solid var(--lc-line); }
.lc .lc-sh { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
.post-body .lc .lc-sh h3, .post-body .lc .lc-paid h3 { font-size: 16px; }
.lc .lc-sh h3 span { font-size: 13px; font-weight: 400; color: var(--lc-muted); }
.lc .lc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.lc .lc-pd { color: var(--lc-navy); font-weight: 700; }
.lc .lc-bars { display: flex; align-items: stretch; gap: 4px; height: 160px; margin-top: 14px; border-bottom: 1px solid #d0d7de; }
.lc .lc-bars.lc-dense, .lc .lc-gband.lc-dense { gap: 2px; }
.lc .lc-bar { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px 0 0; border: 0; border-radius: 6px 6px 0 0; background: transparent; }
/* 고른 막대: 색은 그대로, 뒤에 연한 기둥 */
@media (hover: hover) { .lc .lc-bar:hover { background: rgba(100, 116, 139, .07); } }
.lc .lc-bar.sel::before { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; right: -3px; border-radius: 7px 7px 0 0; background: rgba(100, 116, 139, .2); }
.lc .lc-bars.lc-dense .lc-bar.sel::before { left: -2px; right: -2px; }
.lc .lc-bar > * { position: relative; }
.lc .lc-bar i { display: block; flex: none; }
.lc .lc-bi2 { background: var(--lc-org-l); border-radius: 3px 3px 0 0; }
.lc .lc-bp2 { background: var(--lc-blue-l); }
/* 만기일시: 원금을 한꺼번에 내는 막대에만 얹는 원금 조각 (길이는 비율 아님 → 가운데 흰 물결 = 잘라서 그림) */
.lc .lc-bpx { position: relative; display: block; flex: none; height: 25%; min-height: 14px; background: var(--lc-blue-l); }
.lc .lc-bpx::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 8px; margin-top: -4px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 4 Q3 0 6 4 T12 4' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E") repeat-x center / 12px 8px; }
.lc .lc-bar .lc-bpl { position: absolute; top: 3px; right: 0; font-size: 11px; font-weight: 800; line-height: 1.2; color: var(--lc-blue-ink); white-space: nowrap; pointer-events: none; }
.lc .lc-mk { display: block; margin-bottom: 2px; text-align: center; font-size: 10px; line-height: 1; color: var(--lc-navy); }
.lc .lc-gband { display: flex; gap: 4px; margin-top: 3px; }
.lc .lc-gband i { flex: 1 1 0; min-width: 0; height: 4px; border-radius: 2px; }
.lc .lc-gband i.on { background: #94a3b8; }
.lc .lc-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; color: var(--lc-muted); }
.lc .lc-selt { margin-top: 12px !important; min-height: 22px; font-size: 14px; }
.lc .lc-selh { display: block; margin-bottom: 2px; font-size: 12px; color: var(--lc-muted); }
.lc .lc-sel2, .lc .lc-sel3 { display: inline-block; white-space: nowrap; }
.lc .lc-sel3 b { font-weight: 800; color: var(--text, #1f2328); }
.lc .lc-now { margin: 4px 0 0 !important; font-size: 12px; color: var(--lc-muted); }
/* 조건 줄은 한 줄 (넘치면 loan.js 가 글자를 줄이고, 그래도 안 되면 lc-fitwrap → ' · ' 덩어리 사이에서만 줄바꿈) */
.lc .lc-now, .lc .lc-pcond, .lc .lc-gn, .lc .lc-sub { white-space: nowrap; }
.lc .lc-fitwrap { white-space: normal !important; }
.lc .lc-ck { white-space: nowrap; }
.lc .lc-bprompt { margin: 14px 0 0 !important; padding: 16px; border: 1px dashed #d0d7de; border-radius: 12px; font-size: 14px; color: var(--lc-muted); text-align: center; }
.lc .lc-selt .lc-sw { margin-left: 2px; }
.lc .lc-vp { color: var(--lc-blue-ink); } .lc .lc-vi { color: var(--lc-org-ink); }
.lc .lc-cap { margin-top: 3px !important; font-size: 12px; color: var(--lc-muted); }
.lc .lc-warn2 { margin-top: 8px !important; font-size: 13px; color: #9a3412; }
.lc .lc-psec { padding-top: 0; border-top: 0; }
.lc .lc-paid { margin-top: 0; }
.lc .lc-plink { padding: 0; border: 0; background: none; color: var(--lc-blue-ink); font: inherit; font-weight: 700; cursor: pointer; }
.lc .lc-note2 { margin: 0 0 12px !important; }
.lc .lc-prow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 15px; }
.lc .lc-pfld { width: 110px; }
.lc .lc-err { margin-top: 10px !important; font-size: 14px; color: #b91c1c; }
.lc .lc-pstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.lc .lc-pstats p:first-child { font-size: 13px; color: var(--lc-muted); }
.lc .lc-pstats p + p { margin-top: 2px !important; font-size: 19px; font-weight: 800; }
.lc .lc-pstats p.lc-psub { margin-top: 1px !important; font-size: 12px; font-weight: 400; color: var(--lc-muted); }
.lc .lc-prog { height: 8px; margin-top: 14px; border-radius: 999px; background: #e0e7ff; overflow: hidden; }
.lc .lc-prog i { display: block; height: 100%; border-radius: 999px; background: var(--lc-navy); }
.lc .lc-pnote { margin-top: 6px !important; font-size: 13px; color: #3730a3; }
.lc .lc-tnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0 6px; }
.lc .lc-yn { display: flex; align-items: center; gap: 6px; }
.lc .lc-yn span { min-width: 150px; text-align: center; font-size: 14px; font-weight: 700; }
.lc .lc-unit { margin-left: auto; font-size: 12px; color: var(--lc-muted); }
.lc .lc-table { border: 1px solid var(--lc-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 24px -14px rgba(15, 23, 42, .18); }
/* 해 줄: 줄 전체를 누르면 펼침, 얇은 ⌄ */
.lc .lc-tr[data-act="open"] { cursor: pointer; transition: background-color .15s; }
@media (hover: hover) { .lc .lc-tr[data-act="open"]:hover { background-color: #f8fafc; } .lc .lc-tr[data-act="open"]:hover .lc-tog { background: #eef1f5; } }
.lc .lc-tr.open { background-color: #f5f8ff; }
.lc .lc-tr.open > :first-child b { color: var(--lc-blue-ink); }
.lc .lc-chev2 { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
.lc .lc-tr.open .lc-chev2 { transform: rotate(180deg); }
.lc .lc-tr.open .lc-tog { color: var(--lc-blue); }
/* 펼친 회차: 그 해에 딸린 안쪽 카드 + 왼쪽 연한 파란 선 */
.lc .lc-mgrp { margin: 4px 10px 10px 20px; border: 1px solid #eef2f7; border-radius: 10px; background: #fafbfd; box-shadow: inset 3px 0 0 #c7d7fe; overflow: hidden; }
.lc .lc-mgrp .lc-mo { background: transparent; border-top-color: #f0f2f5; }
.lc .lc-mgrp .lc-mo:first-child { border-top: 0; }
.lc .lc-mgrp .lc-mo.hl { background: #dbe4ff; }
.lc .lc-anim { animation: lcOpen .2s ease-out; }
.lc .lc-mgrp.lc-closing { animation: lcClose .16s ease-in forwards; }
.lc .lc-tr.lc-anim-o .lc-chev2 { animation: lcChev .2s ease; }
@keyframes lcOpen { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes lcClose { to { opacity: 0; clip-path: inset(0 0 100% 0); } }
@keyframes lcChev { from { transform: rotate(0); } to { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .lc .lc-anim, .lc .lc-mgrp.lc-closing, .lc .lc-tr.lc-anim-o .lc-chev2 { animation: none; } .lc .lc-chev2 { transition: none; } }
.lc .lc-tr { display: grid; grid-template-columns: 92px repeat(4, minmax(0, 1fr)) 34px; align-items: center; gap: 6px 10px; min-height: 44px; padding: 0 10px 0 12px; border-top: 1px solid #eef0f3; font-size: 14px; text-align: right; }
.lc .lc-tr > :first-child { text-align: left; }
.lc .lc-tr small { display: block; font-size: 12px; color: var(--lc-muted); }
.lc .lc-th { position: sticky; top: 0; z-index: 1; min-height: 40px; border-top: 0; border-radius: 12px 12px 0 0; background: var(--lc-soft); font-size: 13px; font-weight: 700; color: var(--lc-muted); }
/* 낸 회차: 왼쪽 남색 막대 + 진한 바탕. 펼친 해 줄은 바탕 없이 ▲ 만 남색 */
.lc .lc-tr.hl { background: var(--lc-navy-bg); box-shadow: inset 4px 0 0 var(--lc-navy); }
.lc .lc-tr.hl > :first-child b { color: var(--lc-navy); }
.lc .lc-tr.hlp .lc-tog { color: var(--lc-navy); }
.lc .lc-mo { min-height: 34px; background: #fafbfc; font-size: 13px; color: var(--lc-muted); }
.lc .lc-mo > :first-child { padding-left: 12px; }
.lc .lc-mo.hl, .lc .lc-mrow.hl { background: #dbe4ff; color: var(--lc-navy); font-weight: 800; }
/* 상환표 숫자 색: 원금 진파랑 · 이자 진주황 · 잔액 회색 · 내는 돈 검정 (그래프 아래 줄과 같은 규칙) */
.lc .lc-tr:not(.lc-th) > :nth-child(3) { color: var(--lc-blue-ink); }
.lc .lc-tr:not(.lc-th) > :nth-child(4) { color: var(--lc-org-ink); }
.lc .lc-tr:not(.lc-th) > :nth-child(5) { color: var(--lc-muted); }
.lc .lc-tr.lc-mo > :nth-child(2) { color: var(--text, #1f2328); }
.lc .lc-tr.lc-mo.hl > *, .lc .lc-tr.lc-mrow.hl > * { color: var(--lc-navy); }
.lc .lc-arr { margin-left: 4px; font-size: .8em; }
.lc .lc-tog { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #8b949e; transition: background-color .15s; }
.lc .lc-tr.hl .lc-tog { color: var(--lc-navy); }
.lc .lc-more { width: 100%; margin-top: 12px; }
.lc .lc-foot span { white-space: nowrap; }
.lc .lc-foot { margin: 0 22px 22px !important; padding: 13px 15px; background: var(--lc-soft); border-radius: 12px; font-size: 13px; line-height: 1.7; color: var(--lc-muted); }
.lc .lc-toast { position: fixed; left: 50%; bottom: 84px; z-index: 30; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: #1f2328; color: #fff; font-size: 14px; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.lc .lc-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 따라다니는 공유 버튼 (body 바로 아래에 붙음) */
.lc-pill { position: fixed; right: 16px; bottom: 20px; z-index: 25; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 7px 0 16px; border: 0; border-radius: 999px; background: #0b1f44; color: #fff; font: inherit; font-size: 14px; font-weight: 800; box-shadow: 0 6px 20px rgba(15,23,42,.25); cursor: pointer; }
.lc-pill[hidden] { display: none; }
/* 공유 고르는 창 (카카오톡 · 복사 · 다른 앱) — 떠 있는 공유 버튼 위에, 폰은 아래에서 올라오는 판 */
.lc-sheet-bg { position: fixed; inset: 0; z-index: 30; background: rgba(15, 23, 42, .28); }
.lc-sheet { position: fixed; z-index: 31; right: 16px; bottom: 84px; width: 264px; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 12px 32px rgba(15, 23, 42, .25); }
.lc-sheet[hidden], .lc-sheet-bg[hidden], .lc-sheet button[hidden] { display: none; }
.lc-sheet .lc-sheet-t { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #656d76; }
.lc-sheet button { min-height: 46px; padding: 0 14px; border: 1px solid #e4e7eb; border-radius: 12px; background: #fff; color: #1f2328; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lc-sheet button:hover { background: #f6f8fa; }
.lc-sheet button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(37, 99, 235, .3); }
.lc-sheet .lc-sheet-k, .lc-sheet .lc-sheet-k:hover { border-color: #fee500; background: #fee500; color: #191919; }   /* 카카오 노랑 */
.lc-pill { height: 52px; }
.lc-pill .lc-pv { display: flex; flex-direction: column; justify-content: center; gap: 1px; font-variant-numeric: tabular-nums; }
.lc-pill .lc-pl { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; white-space: nowrap; font-size: 15px; line-height: 1.2; }
.lc-pill .lc-pl > span { font-weight: 500; color: rgba(255, 255, 255, .72); }
.lc-pill .lc-pl > b { font-weight: 800; }
.lc-pill .lc-pl > b.lc-down { color: #6ee7b7; }
.lc-pill.lc-pill-2 .lc-pl { font-size: 12.5px; }
@media (max-width: 360px) { .lc-pill .lc-share-w { display: none; } .lc-pill .lc-pl { font-size: 14px; } .lc-pill.lc-pill-2 .lc-pl { font-size: 12px; } }
.lc-pill-go { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 999px; background: #2563eb; font-size: 13px; font-weight: 700; }
.lc-pill-go svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 공유받은 링크로 들어왔을 때 제목 아래 띠 */
.lc-band { margin: 0 0 20px; padding: 14px 16px 15px; background: #fff; border: 2px solid var(--lc-blue, #2563eb); border-radius: 14px; box-shadow: 0 4px 14px rgba(37, 99, 235, .12); }   /* 흰 결과 카드 — 아래 요약(연파랑)과 다르게 */
.lc-band p { margin: 0; }
.lc-band .lc-band-t { display: inline-block; margin: 0 0 8px; padding: 2px 10px 3px; border-radius: 999px; background: #2563eb; color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.lc-band .lc-band-c { margin: 0 0 10px; font-size: 14px; line-height: 1.6; color: #4b5563; }   /* 조건 — 보조 */
.lc-band .lc-band-k { white-space: nowrap; }
.lc-band .lc-band-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin: 0 0 14px; padding: 12px 0 0; border-top: 1px dashed #d5dbe1; }   /* 결과 금액 두 칸씩 */
.lc-band .lc-band-fig { min-width: 0; }
.lc-band .lc-band-f.lc-band-1 { grid-template-columns: minmax(0, 1fr); }
.lc-band .lc-band-l { display: block; font-size: 12.5px; line-height: 1.4; color: #656d76; }
.lc-band .lc-band-fig strong { display: block; font-size: 19px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; color: #1e3a8a; white-space: nowrap; }
.lc-band .lc-band-int strong { color: #ea580c; }   /* 총 이자 = 계산기 이자 색 */
.lc-band .lc-band-b { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-band .lc-btn { display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px; border: 1px solid #bfdbfe; border-radius: 10px; background: #fff; color: #1d4ed8; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.lc-band .lc-btn-fill { background: #2563eb; border-color: #2563eb; color: #fff; }

/* 폰 (600px 이하): 계산기를 화면 끝까지 넓게, 상환표는 두 줄 묶음 */
@media (max-width: 600px) {
  .lc { margin: 1.4em -16px 1.8em; border-left: 0; border-right: 0; border-radius: 0; border-top: 0; border-bottom: 6px solid #f3f4f6; font-size: 14px; }
  .lc .lc-head { padding: 19px 16px 0; gap: 10px; }
  .lc .lc-hico { width: 36px; height: 36px; border-radius: 11px; }
  .lc .lc-hico svg { width: 19px; height: 19px; }
  .post-body .lc .lc-head h2 { font-size: 18px; }
  .lc .lc-in { padding: 14px 16px 18px; gap: 18px; }
  .lc .lc-seg button { padding: 8px; text-align: center; }
  .lc .lc-seg button b { font-size: 14px; }
  .lc .lc-seg button span { display: none; }
  .lc .lc-table:has(.lc-mrow) .lc-th { display: none; }
  .lc .lc-grid .lc-chips { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
  .lc .lc-ch { flex: none; min-height: 36px; }
  .lc .lc-chips-fit { min-height: 0; }
  .lc .lc-res, .lc .lc-sec { padding: 18px 16px; }
  .lc .lc-big { font-size: 30px; }
  .lc .lc-figs:has(.lc-fig:nth-child(3)) { flex-wrap: wrap; }   /* 폰: 세 개(원금균등 + 거치)는 두 줄 그대로 */
  .lc .lc-figs:not(:has(.lc-fig:nth-child(3))) .lc-big { font-size: clamp(19px, 6.4vw, 30px); }
  .lc .lc-big3 { font-size: 22px; }
  .lc .lc-fig { padding-right: 12px; min-width: 0; }
  .lc .lc-fig.lc-arrow { padding-left: 26px; }
  .lc .lc-fig.lc-arrow::before { width: 18px; font-size: 17px; }
  .lc .lc-seg button { padding: 8px 6px; }
  .lc .lc-seg button.on::after { top: 4px; right: 4px; width: 15px; height: 15px; font-size: 9px; line-height: 15px; }
  .lc .lc-bfld, .lc .lc-bwide { width: 100%; }
  .lc .lc-dr > * { white-space: normal; }
  .lc .lc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc .lc-stats p + p { font-size: 16px; }
  .lc .lc-stats { gap: 8px; }
  .lc .lc-stats > div { padding: 12px 11px; }
  .lc .lc-stats p:first-child { font-size: 12px; }
  .lc .lc-stats p.lc-stl { column-gap: 3px; }
  .lc .lc-rtop .lc-figs { flex-basis: 100%; }
  .lc .lc-acc { padding: 13px 14px; }
  .lc .lc-accs .lc-panel { margin: 0; }
  .lc .lc-panel { margin-left: -6px; margin-right: -6px; padding: 14px; }
  .lc .lc-cards { grid-template-columns: 1fr; }
  .lc .lc-hbar { grid-template-columns: 66px minmax(0, 1fr) 92px; font-size: 13px; }
  .lc .lc-bars { height: 128px; gap: 2px; }
  .lc .lc-mo.hl, .lc .lc-mrow.hl { font-weight: 700; }
  .lc .lc-tr.lc-mo > :nth-child(5), .lc .lc-tr.lc-mrow > :nth-child(5) { white-space: nowrap; }
  .lc .lc-sel2, .lc .lc-sel3 { white-space: normal; }
  .lc .lc-sel3 { display: block; margin-top: 2px; }
  .lc .lc-vtabs { display: flex; }
  .lc .lc-vtabs button { flex: 1 1 0; padding: 0 6px; }
  .lc .lc-gband { gap: 2px; }
  .lc .lc-pstats { gap: 6px; grid-template-columns: minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, 1.25fr); }
  .lc .lc-pstats p + p { font-size: clamp(12px, 3.85vw, 15px); white-space: nowrap; letter-spacing: -0.02em; }
  .lc .lc-yn { flex: 1; justify-content: space-between; }
  .lc .lc-yn .lc-ib { width: 44px; height: 40px; }
  .lc .lc-yn span { min-width: 0; }
  .lc .lc-tnav { flex-wrap: wrap; }
  /* 상환표: 연도별 줄은 "연차 · 내는 돈 · 잔액", 회차 줄은 두 줄 묶음 */
  .lc .lc-tr { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr) 30px; padding: 0 8px 0 12px; }
  .lc .lc-tr > :nth-child(3), .lc .lc-tr > :nth-child(4) { display: none; }
  /* 폰 해 줄: 내는 돈 = 주인공(진하게), 잔액 = 보조(연하게 · 1px 작게), 두 숫자 사이 12px */
  .lc .lc-tr:not(.lc-mo):not(.lc-mrow) { column-gap: 12px; }
  .lc .lc-tr:not(.lc-th):not(.lc-mo):not(.lc-mrow) > :nth-child(2) { color: var(--text, #1f2328); font-weight: 700; }
  .lc .lc-tr:not(.lc-th):not(.lc-mo):not(.lc-mrow) > :nth-child(5) { color: #8b949e; font-weight: 400; font-size: 13px; }
  .lc .lc-tr:not(.lc-th):not(.lc-mo):not(.lc-mrow) > :first-child b { font-size: 14px; }
  .lc .lc-th > :nth-child(3), .lc .lc-th > :nth-child(4) { display: none; }
  .lc .lc-tr.lc-mo, .lc .lc-tr.lc-mrow { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "k pay pay" "pr it bal"; gap: 2px 8px; padding: 9px 12px 9px 14px; text-align: left; }
  .lc .lc-mgrp { margin: 4px 6px 8px 10px; }
  .lc .lc-tr.lc-mrow { padding-left: 12px; }
  .lc .lc-tr.lc-mo > *, .lc .lc-tr.lc-mrow > * { display: block; }
  .lc .lc-tr.lc-mo > :nth-child(1), .lc .lc-tr.lc-mrow > :nth-child(1) { grid-area: k; padding-left: 0; font-weight: 700; color: var(--text, #1f2328); font-size: 14px; }
  .lc .lc-tr.lc-mo > :nth-child(2), .lc .lc-tr.lc-mrow > :nth-child(2) { grid-area: pay; text-align: right; font-size: 14px; color: var(--text, #1f2328); }
  .lc .lc-tr.lc-mo > :nth-child(3), .lc .lc-tr.lc-mrow > :nth-child(3) { grid-area: pr; font-size: 12px; color: var(--lc-blue-ink); }
  .lc .lc-tr.lc-mo > :nth-child(4), .lc .lc-tr.lc-mrow > :nth-child(4) { grid-area: it; font-size: 12px; color: var(--lc-org-ink); }
  .lc .lc-tr.lc-mo > :nth-child(5), .lc .lc-tr.lc-mrow > :nth-child(5) { grid-area: bal; text-align: right; font-size: 12px; color: var(--lc-muted); }
  .lc .lc-tr.lc-mo > :nth-child(6), .lc .lc-tr.lc-mrow > :nth-child(6) { display: none; }
  .lc .lc-tr.lc-mo > :nth-child(2)::before, .lc .lc-tr.lc-mrow > :nth-child(2)::before { content: "내는 돈 "; font-size: 12px; font-weight: 400; color: var(--lc-muted); }
  .lc .lc-tr.lc-mo > :nth-child(3)::before, .lc .lc-tr.lc-mrow > :nth-child(3)::before { content: "원금 "; font-weight: 400; color: var(--lc-muted); }
  .lc .lc-tr.lc-mo > :nth-child(4)::before, .lc .lc-tr.lc-mrow > :nth-child(4)::before { content: "이자 "; font-weight: 400; color: var(--lc-muted); }
  .lc .lc-tr.lc-mo > :nth-child(5)::before, .lc .lc-tr.lc-mrow > :nth-child(5)::before { content: "잔액 "; font-weight: 400; }
  .lc .lc-tr.lc-mo.hl > *, .lc .lc-tr.lc-mrow.hl > * { color: var(--lc-navy) !important; }
  .lc .lc-foot { margin: 0 16px 18px !important; font-size: 12px; }
  /* 3. 금리 + 거치 반반, 거치는 고르는 칸 */
  .lc .lc-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
  .lc .lc-pair > .lc-gn { grid-column: 1 / -1; margin-top: -2px !important; }
  .lc .lc-pair .lc-chips-fit, .lc .lc-pair .lc-gh { display: none; }
  .lc .lc-gsel { display: flex; padding-right: 10px; }
  .lc .lc-rw-w { display: none; }
  .lc .lc-pair .lc-rw { position: static; }
  .lc .lc-pair .lc-rw-tip { left: 0; right: auto; width: min(260px, calc(100vw - 32px)); }
  .lc .lc-pair .lc-rw-tip::before { display: none; }
  .lc .lc-tr.lc-mo > *, .lc .lc-tr.lc-mrow > * { white-space: nowrap; }
  .lc .lc-table.lc-tight .lc-tr.lc-mo, .lc .lc-table.lc-tight .lc-tr.lc-mrow { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "k pay" "pr bal" "it bal"; }
  .lc .lc-table.lc-tight .lc-tr.lc-mo > :nth-child(5), .lc .lc-table.lc-tight .lc-tr.lc-mrow > :nth-child(5) { align-self: end; }
  /* 아주 큰 숫자: 해 줄도 두 줄 (내는 돈 / 잔액), 머리줄 대신 숫자 앞에 이름 */
  .lc .lc-table.lc-tight .lc-th { display: none; }
  .lc .lc-table.lc-tight .lc-tr:not(.lc-mo):not(.lc-mrow):not(.lc-th) { grid-template-columns: 56px minmax(0, 1fr) 26px; grid-template-areas: "lab pay tog" "lab bal tog"; gap: 2px 8px; padding: 8px 4px 8px 10px; }
  .lc .lc-table.lc-tight .lc-tr:not(.lc-mo):not(.lc-mrow):not(.lc-th) > :nth-child(1) { grid-area: lab; font-size: 12px; }
  .lc .lc-table.lc-tight .lc-tr:not(.lc-mo):not(.lc-mrow):not(.lc-th) > :nth-child(2) { grid-area: pay; }
  .lc .lc-table.lc-tight .lc-tr:not(.lc-mo):not(.lc-mrow):not(.lc-th) > :nth-child(5) { grid-area: bal; }
  .lc .lc-table.lc-tight .lc-tr:not(.lc-mo):not(.lc-mrow):not(.lc-th) > :nth-child(6) { grid-area: tog; }
  .lc .lc-table.lc-tight .lc-tr:not(.lc-mo):not(.lc-mrow):not(.lc-th) > :nth-child(2)::before { content: "내는 돈 "; font-size: 11px; font-weight: 400; color: var(--lc-muted); }
  .lc .lc-table.lc-tight .lc-tr:not(.lc-mo):not(.lc-mrow):not(.lc-th) > :nth-child(5)::before { content: "잔액 "; font-size: 11px; }
  .lc .lc-table.lc-tight .lc-tr:not(.lc-mo):not(.lc-mrow):not(.lc-th) > :first-child small { font-size: 11px; }
  .lc .lc-table.lc-tight .lc-tog { width: 26px; height: 26px; }
  .lc .lc-pair .lc-fld .lc-ib { width: 30px; height: 30px; }
  .lc .lc-pair .lc-fld { padding: 0 8px; gap: 4px; }
  .lc .lc-pair .lc-off { padding: 0 !important; background: none; font-size: 13px; line-height: 46px; }

  /* 5. 조건 비교 표: 이름표 왼쪽, A · B · 차이는 위아래 (큰 금액도 숫자가 안 끊김) */
  .lc .lc-dh { display: none; }
  .lc .lc-dr { grid-template-columns: minmax(52px, 64px) minmax(0, 1fr); gap: 3px 10px; padding: 11px 12px; font-size: 14px; }
  .lc .lc-dr > * { grid-column: 2; }
  .lc .lc-dr > :first-child { grid-column: 1; grid-row: 1 / span 3; align-self: start; white-space: normal; font-size: 13px; line-height: 1.35; }
  .lc .lc-dr > :nth-child(2), .lc .lc-dr > :nth-child(3) { white-space: nowrap; }
  .lc .lc-dr > :nth-child(2)::before, .lc .lc-dr > :nth-child(3)::before { float: left; font-size: 12px; font-weight: 700; color: var(--lc-muted); }
  .lc .lc-dr > :nth-child(2)::before { content: "현재"; }
  .lc .lc-dr > :nth-child(3)::before { content: "변경 후"; color: var(--lc-blue-ink); }
  .lc .lc-dr > :last-child { font-size: 13px; }
  .lc .lc-blh { justify-content: space-between; }
  .lc .lc-bars.lc-many .lc-bpl-a { display: none; }   /* 폰에서 막대가 많으면 '원금'만 */   /* 폰: 입력칸이 꽉 차서 오른쪽 끝이 입력칸 끝과 맞음 */
  .lc .lc-dsub { display: block; }
  .lc-pill { right: 12px; bottom: 16px; }
  .lc-sheet { left: 12px; right: 12px; bottom: 12px; width: auto; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { .lc .lc-toast { transition: none; } }