@charset "utf-8";
/* ══════════════════════════════════════════════════════════════════════════
 *  「내 돈 지키는 계산기」 전용 스타일                          2026-08-07 신설
 * ══════════════════════════════════════════════════════════════════════════
 *
 * ▍🔴 누르는 크기·글자 크기는 전부 px 로 못 박는다 (rem 금지)
 *   `css/style.css` 가 좁은 화면에서 `html{font-size}` 를 **66%(=10.56px)** 까지
 *   내린다. 그 상태에서 `4.4rem` 은 46.5px 이지만, 예전처럼 62% 로 되돌아가면
 *   43.6px 이 되어 **44px 문턱을 아슬하게 놓친다.** 즉 rem 으로 적으면
 *   "좁은 폰을 쓰는 사람일수록 버튼이 작아지는" 설계가 된다. 정확히 반대로 가야 한다.
 *   → 이 파일에서는 **터치 영역과 본문 글자에 rem 을 쓰지 않는다.**
 *
 * ▍이 파일만으로 화면이 선다
 *   공용 css 를 건드리지 않는다(다른 화면에 번지면 안 된다).
 *   선택자는 전부 `.bbc-` 로 시작한다.
 *
 * ▍320px 부터 그린다
 *   손님 대부분이 폰이다. 기본이 한 칸(세로) 배치이고, 넓어지면 두 칸이 된다.
 * ══════════════════════════════════════════════════════════════════════════ */

.bbc-wrap { max-width:840px; margin:0 auto; padding:16px 14px 48px; box-sizing:border-box; }
.bbc-wrap *, .bbc-wrap *:before, .bbc-wrap *:after { box-sizing:border-box; }

/* ── 계산기끼리 오가는 줄 ────────────────────────────────────────────────── */
.bbc-nav { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.bbc-nav a {
	display:flex; align-items:center; justify-content:center;
	min-height:44px; padding:0 14px;                 /* 🔴 44px — px 고정 */
	border:1px solid var(--c-ln-d7dbe0,#d7dbe0); border-radius:6px;
	background:var(--c-bg-fff,#fff); color:var(--c-fg-333,#333); font-size:14px; line-height:1.2; text-decoration:none;
}
.bbc-nav a.on { background:var(--c-bg-2f4b7c,#2f4b7c); border-color:var(--c-ln-2f4b7c,#2f4b7c); color:var(--c-fg-fff,#fff); font-weight:700; }

/* ── 머리말 ─────────────────────────────────────────────────────────────── */
.bbc-h1 { margin:0 0 6px; font-size:24px; line-height:1.35; font-weight:700; color:var(--c-fg-1b1b1b,#1b1b1b); word-break:keep-all; }
.bbc-lead { margin:0 0 14px; font-size:15px; line-height:1.7; color:var(--c-fg-555,#555); word-break:keep-all; }

/* 「저장 안 함」 안내 — 이걸 보고 손님이 안심하고 쓴다. 눈에 띄어야 한다. */
.bbc-safe {
	margin:0 0 16px; padding:12px 14px;
	border:1px solid var(--c-ln-bcd9c4,#bcd9c4); border-left-width:5px; border-radius:6px;
	background:var(--c-bg-f2faf4,#f2faf4); color:var(--c-fg-1f5c33,#1f5c33); font-size:14px; line-height:1.7; word-break:keep-all;
}
.bbc-safe b { color:var(--c-fg-14431f,#14431f); }

/* ── 입력 ───────────────────────────────────────────────────────────────── */
.bbc-form { margin:0 0 18px; padding:14px; border:1px solid var(--c-ln-e2e5e9,#e2e5e9); border-radius:8px; background:var(--c-bg-fbfcfd,#fbfcfd); }
.bbc-row { margin:0 0 14px; }
.bbc-row:last-child { margin-bottom:0; }
.bbc-row > label, .bbc-row > .bbc-label {
	display:block; margin:0 0 6px; font-size:14px; font-weight:600; color:var(--c-fg-333,#333); line-height:1.5; word-break:keep-all;
}
.bbc-row .bbc-help { display:block; margin:5px 0 0; font-size:13px; line-height:1.6; color:var(--c-fg-777,#777); word-break:keep-all; }

/* 🔴 입력칸 글자는 16px 이상 — 아이폰은 16px 미만 입력칸을 누르면 화면을 확대해 버린다.
 *
 * 🔴🔴 선택자 앞에 `.bbc-wrap` 을 반드시 붙인다. 실측으로 잡은 함정이다.
 *   `css/default.css` 에 이런 줄이 있다:
 *       input[type="text"], input[type="password"], select { height:4rem; font-size:1.5rem; margin:3px; }
 *   이건 **「속성 선택자 + 태그」(0,1,1)** 라서 그냥 `.bbc-in`(0,1,0) 보다 **더 강하다.**
 *   파일을 나중에 실어도 소용이 없다 — 우선순위가 순서보다 먼저다.
 *   그 결과 320px 폰에서 입력칸이 `4rem × 10.56px = 42.2px` 가 되어
 *   **44px 문턱을 놓치고**, 글자도 15.8px 이라 아이폰이 누를 때마다 화면을 확대했다.
 *   `.bbc-wrap .bbc-in` 은 클래스가 둘(0,2,0)이라 확실히 이긴다.
 *   ⚠️ 여기서 `.bbc-wrap` 을 떼면 그 순간 다시 42px 로 돌아간다. 떼지 마라. */
.bbc-wrap .bbc-in {
	display:block; width:100%; height:48px; margin:0; padding:0 12px;
	border:1px solid var(--c-ln-c6ccd3,#c6ccd3); border-radius:6px; background:var(--c-bg-fff,#fff);
	font-size:16px; line-height:46px; color:var(--c-fg-111,#111); -webkit-appearance:none; appearance:none;
}
.bbc-wrap .bbc-in:focus { border-color:var(--c-ln-2f4b7c,#2f4b7c); outline:2px solid rgba(47,75,124,.25); outline-offset:0; }
.bbc-wrap select.bbc-in { line-height:normal; padding-right:32px; }
.bbc-wrap .bbc-in[readonly] { background:var(--c-bg-f2f3f5,#f2f3f5); color:var(--c-fg-555,#555); }
/* 날짜칸은 사파리가 제 마음대로 줄이므로 한 번 더 못 박는다. */
.bbc-wrap input[type="date"].bbc-in { min-height:48px; line-height:normal; }

/* 금액칸 오른쪽 「원」 */
.bbc-unit { position:relative; display:block; }
.bbc-wrap .bbc-unit .bbc-in { padding-right:40px; text-align:right; }
.bbc-unit > span { position:absolute; right:12px; top:0; height:48px; line-height:48px; font-size:14px; color:var(--c-fg-888,#888); pointer-events:none; }

/* 두 칸 배치 — 좁으면 한 칸 */
.bbc-grid { display:flex; flex-wrap:wrap; gap:12px; }
.bbc-grid > .bbc-row { flex:1 1 100%; margin-bottom:0; }
@media all and (min-width:520px) { .bbc-grid > .bbc-row { flex:1 1 calc(50% - 6px); } }

/* 라디오·체크는 통째로 누를 수 있게 44px 짜리 상자로 만든다 */
.bbc-pick { display:flex; flex-wrap:wrap; gap:8px; }
.bbc-pick label {
	display:flex; align-items:center; gap:7px;
	min-height:44px; padding:0 14px; margin:0;
	border:1px solid var(--c-ln-c6ccd3,#c6ccd3); border-radius:6px; background:var(--c-bg-fff,#fff);
	font-size:15px; color:var(--c-fg-333,#333); cursor:pointer; font-weight:400;
}
.bbc-pick input { width:18px; height:18px; margin:0; }
.bbc-pick label.on { border-color:var(--c-ln-2f4b7c,#2f4b7c); background:var(--c-bg-eef3fb,#eef3fb); color:var(--c-fg-1b3763,#1b3763); font-weight:700; }

.bbc-btn {
	display:block; width:100%; min-height:52px; margin:16px 0 0; padding:0 16px;
	border:0; border-radius:6px; background:var(--c-bg-2f4b7c,#2f4b7c); color:var(--c-fg-fff,#fff);
	font-size:17px; font-weight:700; line-height:52px; cursor:pointer;
}
.bbc-btn:active { background:var(--c-bg-25395e,#25395e); }
.bbc-btn2 {
	display:block; width:100%; min-height:44px; margin:8px 0 0; padding:0 16px;
	border:1px solid var(--c-ln-c6ccd3,#c6ccd3); border-radius:6px; background:var(--c-bg-fff,#fff); color:var(--c-fg-444,#444);
	font-size:15px; line-height:42px; cursor:pointer;
}

/* ── 결과 ───────────────────────────────────────────────────────────────── */
.bbc-out { display:none; margin:0 0 18px; }
.bbc-out.on { display:block; }

.bbc-big { padding:18px 14px; border:2px solid var(--c-ln-2f4b7c,#2f4b7c); border-radius:8px; background:var(--c-bg-f6f8fc,#f6f8fc); text-align:center; }
.bbc-big .k { display:block; margin:0 0 6px; font-size:14px; color:var(--c-fg-4a5a75,#4a5a75); }
.bbc-big .v { display:block; font-size:34px; line-height:1.2; font-weight:800; color:var(--c-fg-1b3763,#1b3763); word-break:keep-all; }
.bbc-big .s { display:block; margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--c-fg-4a5a75,#4a5a75); word-break:keep-all; }

.bbc-big.warn { border-color:var(--c-ln-c0392b,#c0392b); background:var(--c-bg-fdf4f3,#fdf4f3); }
.bbc-big.warn .k, .bbc-big.warn .s { color:var(--c-fg-8a3227,#8a3227); }
.bbc-big.warn .v { color:var(--c-fg-b02a1b,#b02a1b); }

/* 판정 띠 */
.bbc-verdict { margin:12px 0 0; padding:14px; border-radius:8px; font-size:15px; line-height:1.75; word-break:keep-all; }
.bbc-verdict.bad  { border:1px solid var(--c-ln-e0a8a1,#e0a8a1); background:var(--c-bg-fdf4f3,#fdf4f3); color:var(--c-fg-8a3227,#8a3227); }
.bbc-verdict.worst{ border:1px solid var(--c-ln-b02a1b,#b02a1b); background:var(--c-bg-fbeae7,#fbeae7); color:var(--c-fg-7a1f13,#7a1f13); }
.bbc-verdict.good { border:1px solid var(--c-ln-bcd9c4,#bcd9c4); background:var(--c-bg-f2faf4,#f2faf4); color:var(--c-fg-1f5c33,#1f5c33); }
.bbc-verdict b { font-weight:700; }

/* 항목 목록(공제 내역 등) */
.bbc-list { list-style:none; margin:12px 0 0; padding:0; border:1px solid var(--c-ln-e2e5e9,#e2e5e9); border-radius:8px; overflow:hidden; }
.bbc-list li { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px; padding:11px 13px; border-top:1px solid var(--c-ln-eceff2,#eceff2); background:var(--c-bg-fff,#fff); font-size:15px; line-height:1.6; }
.bbc-list li:first-child { border-top:0; }
.bbc-list li .n { flex:1 1 auto; color:var(--c-fg-444,#444); }
.bbc-list li .a { flex:0 0 auto; font-weight:700; color:var(--c-fg-222,#222); text-align:right; }
/* 🔴 본문 글자는 13px 아래로 내리지 않는다(좁은 폰·노안 대비 저장소 공통 기준). */
.bbc-list li .m { flex:1 1 100%; font-size:13px; line-height:1.6; color:var(--c-fg-767c84,#767c84); }
.bbc-list li.sum { background:var(--c-bg-f4f6f9,#f4f6f9); font-weight:700; }
.bbc-list li.sum .n, .bbc-list li.sum .a { color:var(--c-fg-1b3763,#1b3763); }

/* 나란히 비교하는 카드 */
.bbc-cards { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0; }
.bbc-card { flex:1 1 100%; border:1px solid var(--c-ln-dfe3e8,#dfe3e8); border-radius:8px; background:var(--c-bg-fff,#fff); padding:14px; }
@media all and (min-width:560px) { .bbc-card { flex:1 1 calc(50% - 5px); } }
.bbc-card h3 { margin:0 0 4px; font-size:15px; font-weight:700; color:var(--c-fg-1b3763,#1b3763); line-height:1.5; word-break:keep-all; }
.bbc-card .why { margin:0 0 10px; font-size:13px; line-height:1.6; color:var(--c-fg-7b818a,#7b818a); word-break:keep-all; }
.bbc-card .net { display:block; font-size:26px; font-weight:800; color:var(--c-fg-111,#111); line-height:1.25; }
.bbc-card .net small { font-size:14px; font-weight:400; color:var(--c-fg-666,#666); }
.bbc-card.best { border-color:var(--c-ln-2f8a4a,#2f8a4a); box-shadow:0 0 0 1px #2f8a4a inset; }
.bbc-card .tag { display:inline-block; margin:0 0 6px; padding:2px 8px; border-radius:11px; background:var(--c-bg-e8f5ec,#e8f5ec); color:var(--c-fg-22693c,#22693c); font-size:12px; font-weight:700; }

/* 표(회차별 내역) — 넘치면 표만 옆으로 굴린다. 페이지 본문은 안 밀린다. */
.bbc-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:12px 0 0; }
.bbc-tbl { width:100%; min-width:400px; border-collapse:collapse; font-size:14px; }
.bbc-tbl th, .bbc-tbl td { padding:9px 8px; border:1px solid var(--c-ln-e2e5e9,#e2e5e9); text-align:right; white-space:nowrap; }
.bbc-tbl th { background:var(--c-bg-f4f6f9,#f4f6f9); color:var(--c-fg-39435a,#39435a); font-weight:700; }
.bbc-tbl td:first-child, .bbc-tbl th:first-child { text-align:center; }

/* ── 본문 해설 ──────────────────────────────────────────────────────────── */
.bbc-sec { margin:26px 0 0; }
.bbc-sec h2 { margin:0 0 10px; padding:0 0 8px; border-bottom:2px solid var(--c-ln-e6e9ed,#e6e9ed); font-size:19px; font-weight:700; color:var(--c-fg-1b1b1b,#1b1b1b); line-height:1.45; word-break:keep-all; }
.bbc-sec h3 { margin:16px 0 6px; font-size:16px; font-weight:700; color:var(--c-fg-2b3442,#2b3442); line-height:1.5; word-break:keep-all; }
.bbc-sec p { margin:0 0 10px; font-size:15px; line-height:1.85; color:var(--c-fg-3f454d,#3f454d); word-break:keep-all; }
.bbc-sec ul, .bbc-sec ol { margin:0 0 12px; padding-left:20px; }
.bbc-sec li { margin:0 0 7px; font-size:15px; line-height:1.8; color:var(--c-fg-3f454d,#3f454d); word-break:keep-all; }
.bbc-sec b, .bbc-sec strong { color:var(--c-fg-1b1b1b,#1b1b1b); font-weight:700; }

/* 상담 창구 */
.bbc-help-list { list-style:none; margin:0; padding:0; }
.bbc-help-list li { margin:0 0 8px; padding:12px 13px; border:1px solid var(--c-ln-dfe3e8,#dfe3e8); border-radius:8px; background:var(--c-bg-fff,#fff); }
.bbc-help-list b { display:block; margin:0 0 3px; font-size:15px; color:var(--c-fg-1b3763,#1b3763); }
.bbc-help-list span { display:block; font-size:14px; line-height:1.7; color:var(--c-fg-555,#555); word-break:keep-all; }
/* 전화 링크는 폰에서 바로 누른다 — 44px 확보 */
.bbc-help-list a { display:inline-flex; align-items:center; min-height:44px; padding:0 2px; color:var(--c-fg-1a63c4,#1a63c4); font-weight:700; text-decoration:underline; }

/* 🔴 해설 안의 링크도 손가락으로 누르는 자리다.
 *   `<li>`·`<p>` 안에 그냥 두면 글자 높이(18px)가 그대로 누르는 영역이 되어
 *   옆 줄이 눌린다. inline-block 으로 바꾸고 위아래에 여백을 줘 44px 을 만든다.
 *   (글 흐름은 그대로 유지된다 — 줄바꿈이 생기지 않는다) */
.bbc-sec li a, .bbc-sec p a { display:inline-block; min-height:44px; line-height:44px; padding:0 2px; color:var(--c-fg-1a63c4,#1a63c4); font-weight:700; text-decoration:underline; vertical-align:middle; }
.bbc-sec li a.plain, .bbc-sec p a.plain { min-height:0; line-height:inherit; }

/* 우리 제도로 잇는 자리 */
.bbc-cta { margin:22px 0 0; padding:16px 14px; border:1px solid var(--c-ln-cfd8e6,#cfd8e6); border-radius:8px; background:var(--c-bg-f7f9fc,#f7f9fc); }
.bbc-cta p { margin:0 0 10px; font-size:15px; line-height:1.75; color:var(--c-fg-39435a,#39435a); word-break:keep-all; }
.bbc-cta a.go {
	display:flex; align-items:center; justify-content:center;
	min-height:48px; padding:0 16px; border-radius:6px;
	background:var(--c-bg-2f4b7c,#2f4b7c); color:var(--c-fg-fff,#fff); font-size:15px; font-weight:700; text-decoration:none; text-align:center; line-height:1.4;
}

/* 면책·기준일 */
.bbc-foot { margin:26px 0 0; padding:13px 14px; border:1px dashed var(--c-ln-cfd4da,#cfd4da); border-radius:8px; background:var(--c-bg-fafbfc,#fafbfc); }
.bbc-foot p { margin:0 0 6px; font-size:13px; line-height:1.75; color:var(--c-fg-6e747c,#6e747c); word-break:keep-all; }
.bbc-foot p:last-child { margin-bottom:0; }

/* 허브 화면의 카드 */
.bbc-hub { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 8px; padding:0; list-style:none; }
.bbc-hub li { flex:1 1 100%; margin:0; }
@media all and (min-width:560px) { .bbc-hub li { flex:1 1 calc(50% - 5px); } }
.bbc-hub a { display:block; min-height:44px; padding:16px 14px; border:1px solid var(--c-ln-dfe3e8,#dfe3e8); border-radius:8px; background:var(--c-bg-fff,#fff); text-decoration:none; }
.bbc-hub a:hover { border-color:var(--c-ln-2f4b7c,#2f4b7c); }
.bbc-hub b { display:block; margin:0 0 5px; font-size:17px; color:var(--c-fg-1b3763,#1b3763); line-height:1.4; }
.bbc-hub span { display:block; font-size:14px; line-height:1.7; color:var(--c-fg-5c626a,#5c626a); word-break:keep-all; }

/* 아주 좁은 폰(320px)에서 큰 숫자가 넘치지 않게만 줄인다. 누르는 크기는 그대로 둔다. */
@media all and (max-width:359px) {
	.bbc-wrap { padding:14px 10px 40px; }
	.bbc-h1 { font-size:21px; }
	.bbc-big .v { font-size:27px; }
	.bbc-card .net { font-size:22px; }
}