/* 계산기 공통 (core.css) — 계산기가 있는 글에서만 불러옴. 계산기별 css(loan.css 등)보다 먼저.
   여기엔 누가 봐도 공통인 것만: 상자·색 이름표(--lc-*)·머리·입력칸·결과 숫자 줄·펼치기 줄·버튼·아래 안내·알림
   ·떠 있는 공유 버튼·공유 창·공유받은 결과 카드. 계산기 하나에만 쓰는 건 그 계산기 css 로. (CALC-GUIDE.md)
   블로그 본문 스타일(.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-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; font-weight: 700; color: var(--lc-blue-ink); background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 2px 8px; } /* 계산 기준 꼬리표 — 눈에 띄게 파랑 (2026-11-12 박 결정) */
/* 입력 */
.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-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-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-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-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-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: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-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-fitwrap { white-space: normal !important; }
.lc .lc-note2 { margin: 0 0 12px !important; }
.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-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-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-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-rtop .lc-figs { flex-basis: 100%; }
  .lc .lc-acc { padding: 13px 14px; }
  .lc .lc-foot { margin: 0 16px 18px !important; font-size: 12px; }
  .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; }
}