/* 12개월 요금표 (familyplanprice.com) — 페트롤빛 12개월 요금 대조판. 모바일(360px) 먼저, 600 · 960 · 1100 에서 넓힌다.
   토큰은 base.html :root. 한글이 섞인 글자에는 숫자 서체를 쓰지 않는다(.num·금액만). */

/* ── 1. 기본 ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 16px; line-height: 1.8;
  word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.4; }
p, ul, ol, dl, figure { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
.num, time { font-family: var(--font-number); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.skiplink { position: absolute; left: 8px; top: -60px; z-index: 30; background: var(--primary); color: var(--bg); padding: 10px 14px; border-radius: var(--radius); font-weight: 600; }
.skiplink:focus { top: 8px; }
.fp-wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }

/* ── 2. 헤더 (고정 없음) ───────────────────────────────── */
.fp-head { position: relative; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); }
.fp-head__in { max-width: var(--container); margin: 0 auto; padding: 0 8px 0 var(--gutter); min-height: var(--head-h); display: flex; align-items: center; gap: 12px; }
.fp-mark { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); text-decoration: none; margin-right: auto; }
.fp-mark__svg { flex: none; display: block; }
.fp-mark__name { font-family: var(--font-title); font-weight: 700; font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.fp-nav { display: none; }
.fp-menu { position: static; }
.fp-menu__btn { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); font-size: 15px; cursor: pointer; user-select: none; }
.fp-menu__btn::-webkit-details-marker { display: none; }
.fp-menu[open] .fp-menu__btn { background: var(--surface); border-color: var(--accent); }
.fp-menu:not([open]) .fp-menu__panel, .fp-drop:not([open]) .fp-drop__list { display: none; }
.fp-menu__panel { position: absolute; left: 0; right: 0; top: 100%; background: var(--bg-2); border-bottom: 1px solid var(--line); box-shadow: 0 16px 32px rgba(0, 0, 0, .35); padding: 6px var(--gutter) 14px; }
.fp-menu__panel ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; }
.fp-menu__panel a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); font-size: 15px; }
.fp-menu__panel a[aria-current="page"] { color: var(--primary); text-decoration: underline; text-underline-offset: 6px; }
.fp-menu__sub a { color: var(--text-dim); }

/* ── 3. 공통 섹션 머리 ─────────────────────────────────── */
.fp-main { display: block; padding-bottom: 48px; }
.fp-band { padding: 36px 0 0; }
.fp-sec-head { margin-bottom: 16px; }
.fp-sec-h { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.fp-sec-h--sm { font-size: 17px; margin: 24px 0 8px; color: var(--accent); }
.fp-sec-sub { margin-top: 6px; color: var(--text-dim); font-size: 15px; line-height: 1.7; }
.fp-eyebrow { display: inline-block; font-size: 13px; color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; }
.fp-note-line { margin-top: 10px; color: var(--text-dim); font-size: 14px; line-height: 1.7; }
.fp-empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 16px; color: var(--text-dim); }
.fp-empty__links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 6px; }
.fp-empty__links a, .fp-empty > a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── 4. 홈 ─────────────────────────────────────────────── */
.fp-intro { padding: 28px 0 8px; border-bottom: 1px solid var(--line); background:
  linear-gradient(180deg, var(--bg-2), var(--bg)); }
.fp-intro__in { display: grid; gap: 22px; padding-bottom: 24px; }
.fp-intro__h { margin-top: 12px; font-family: var(--font-title); font-weight: 700; font-size: 26px; line-height: 1.35; letter-spacing: -.03em; }
.fp-intro__excerpt { margin-top: 12px; color: var(--text); font-size: 16px; line-height: 1.75; }
.fp-intro__by { margin-top: 14px; display: grid; gap: 2px; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.fp-intro__pen { color: var(--primary); font-weight: 600; }
.fp-rules { display: grid; gap: 8px; }
.fp-rules li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; align-items: baseline; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.fp-rules__n { grid-row: span 2; color: var(--primary); font-size: 15px; white-space: nowrap; }
.fp-rules strong { font-weight: 600; }
.fp-rules li > span:last-child { color: var(--text-dim); font-size: 14px; line-height: 1.6; }

.fp-usage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.fp-usage a { display: flex; flex-direction: column; gap: 4px; min-height: 96px; height: 100%; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.fp-usage a:hover { border-color: var(--primary); }
.fp-usage__v { font-family: var(--font-number); font-size: 22px; line-height: 1.2; color: var(--primary); }
.fp-usage__d { font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.fp-usage__i.is-qos a { border-top-color: var(--accent); border-style: dashed solid solid; }
.fp-usage__i.is-qos .fp-usage__v { font-family: var(--font-body); font-weight: 600; font-size: 17px; color: var(--accent); }

/* 비교 시작표 — 모바일 카드, 768px↑ 표 */
.fp-board { display: grid; gap: 10px; }
.fp-board__head { display: none; }
.fp-board__row { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; gap: 4px; }
.fp-board__use { font-family: var(--font-number); color: var(--primary); font-size: 15px; }
.fp-board__post a { display: block; padding: 6px 0; min-height: 44px; color: var(--text); font-weight: 600; text-decoration-color: var(--primary); }
.fp-board__post a.is-empty { font-weight: 400; color: var(--text-dim); }
.fp-board__cond, .fp-board__date { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: 8px; font-size: 14px; color: var(--text-dim); }
.fp-board__cond::before, .fp-board__date::before { content: attr(data-label); color: var(--accent); }
.fp-board__k { font-family: var(--font-body); }

/* 할인 기간 12칸 띠 */
.fp-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-bottom: 12px; }
.fp-strip__m { position: relative; height: 34px; border-radius: 3px; background: var(--primary-soft); border: 1px solid var(--primary); display: flex; align-items: flex-end; justify-content: center; }
.fp-strip__m.is-after { height: 34px; background: var(--accent-soft); border-color: var(--accent); }
.fp-strip__n { font-family: var(--font-number); font-size: 11px; line-height: 1.6; color: var(--text-dim); white-space: nowrap; }
.fp-three { display: grid; gap: 8px; }
.fp-three__c { display: grid; gap: 2px; padding: 12px 14px; background: var(--surface); border-radius: var(--radius); border-left: 4px solid var(--primary); }
.fp-three__c.is-after { border-left-color: var(--accent); }
.fp-three__c.is-total { border-left-color: var(--text); background: var(--surface-2); }
.fp-three__k { font-size: 13px; color: var(--text-dim); }
.fp-three__c strong { font-weight: 600; }
.fp-three__c > span:last-child { font-size: 14px; color: var(--text-dim); line-height: 1.6; }

/* 개통 준비 · 상황별 */
.fp-split { display: grid; gap: 36px; }
.fp-steps { display: grid; gap: 8px; }
.fp-steps a { display: flex; gap: 14px; align-items: flex-start; min-height: 64px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.fp-steps a:hover { border-color: var(--primary); }
.fp-steps__n { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--bg); font-size: 15px; white-space: nowrap; }
.fp-steps__t { display: grid; gap: 2px; min-width: 0; }
.fp-steps__t strong { font-weight: 600; }
.fp-steps__t span { color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.fp-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.fp-who a { display: grid; gap: 4px; align-content: start; min-height: 88px; height: 100%; padding: 12px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; }
.fp-who a:hover { border-color: var(--accent); }
.fp-who strong { font-weight: 600; color: var(--accent); }
.fp-who span { font-size: 14px; color: var(--text-dim); line-height: 1.55; }

.fp-band--method { margin-top: 40px; padding: 28px 0; background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.fp-method { display: grid; gap: 14px; margin-top: 14px; }
.fp-method dt { font-weight: 600; color: var(--primary); font-size: 15px; }
.fp-method dd { margin: 2px 0 0; color: var(--text-dim); font-size: 15px; line-height: 1.75; }
.fp-method__more a, .fp-related__more a, .fp-pen__more a { display: inline-flex; align-items: center; min-height: 44px; }

/* ── 5. 글 목록 한 줄 (홈·카테고리·태그·관련 글 공용) ─────── */
.fp-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.fp-row { padding: 14px 0 16px; border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.fp-row__title { font-size: 17px; font-weight: 600; line-height: 1.5; }
.fp-row__title a { display: block; color: var(--text); text-decoration: none; padding: 4px 0; min-height: 44px; }
.fp-row__title a:hover { color: var(--primary); text-decoration: underline; }
.fp-row__sum { color: var(--text-dim); font-size: 15px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fp-row__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; line-height: 1.5; }
.fp-row__meta:empty { display: none; }
.fp-row__cat { color: var(--bg); background: var(--accent); border-radius: 3px; padding: 1px 7px; font-weight: 600; white-space: nowrap; }
.fp-row__tag { color: var(--accent); white-space: nowrap; }
.fp-row__date { font-size: 13px; color: var(--text-dim); }
.fp-row__k { color: var(--text-dim); }
.fp-row.is-ended .fp-row__title a { color: var(--text-dim); }
.fp-list--cards { border-top: 0; gap: 10px; }
.fp-list--cards .fp-row { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--ok); border-radius: var(--radius); padding: 12px 14px; }

/* 진행 상태 — 글자로 전달하고 점·색은 보조 */
.fp-status { display: inline-flex; align-items: center; gap: 6px; padding: 1px 8px; border-radius: 999px; font-size: 13px; font-weight: 600; line-height: 1.6; white-space: nowrap; border: 1px solid currentColor; }
.fp-status__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.fp-status--ok { color: var(--ok); background: var(--ok-soft); }
.fp-status--check { color: var(--warn); background: var(--warn-soft); }
.fp-status--ended { color: var(--stop); background: var(--stop-soft); }
.fp-status--ended .fp-status__dot { border-radius: 1px; }
.fp-status--partial { color: var(--warn); background: var(--warn-soft); border-style: dashed; }

/* ── 6. 목록 페이지 머리 ───────────────────────────────── */
.fp-list-head { padding: 4px 0 20px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.fp-list-head__axis { margin-top: 6px; font-size: 13px; color: var(--accent); }
.fp-list-head__h { margin-top: 6px; font-family: var(--font-title); font-weight: 700; font-size: 26px; letter-spacing: -.03em; line-height: 1.35; }
.fp-list-head__hash { color: var(--primary); margin-right: 2px; }
.fp-list-head__desc { margin-top: 8px; color: var(--text-dim); font-size: 15px; line-height: 1.75; max-width: 46em; }
.fp-list-head__n { margin-top: 8px; font-size: 14px; color: var(--text-dim); }
.fp-list-head__n .num { color: var(--primary); font-size: 18px; margin-right: 2px; }
.fp-list-body { padding-top: 18px; }
.fp-chips { margin-bottom: 16px; }
.fp-chips__k { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.fp-chips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fp-chips a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); text-decoration: none; font-size: 14px; white-space: nowrap; }
.fp-chips a:hover { border-color: var(--accent); }

/* 브레드크럼 — 링크 칸 44px, 현재 글 제목은 한 줄 말줄임 */
.fp-trail ol { display: flex; align-items: center; min-width: 0; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.fp-trail li { display: flex; align-items: center; min-width: 0; flex: none; }
.fp-trail li + li::before { content: "›"; color: var(--text-dim); padding: 0 6px; flex: none; }
.fp-trail a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; color: var(--text-dim); }
.fp-trail li:first-child a { margin-left: -12px; }
.fp-trail li:last-child { flex: 1 1 auto; overflow: hidden; }
.fp-trail [aria-current] { color: var(--text-dim); opacity: .8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── 7. 글 머리 ────────────────────────────────────────── */
.fp-post { width: 100%; }
.fp-post__head, .fp-post__grid, .fp-post__foot, .fp-post > .ad-slot, .fp-related, .fp-post__cover { max-width: calc(var(--reading) + var(--rail-gap) + var(--rail) + 2 * var(--gutter)); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.fp-post__head { padding-bottom: 18px; }
.fp-basis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: var(--radius); }
.fp-basis__i { font-size: 14px; line-height: 1.5; }
.fp-basis__k { color: var(--text-dim); }
.fp-basis__i time { color: var(--primary); font-size: 16px; }
.fp-basis__cat { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: var(--accent); }
.fp-post__title { margin-top: 14px; font-family: var(--font-title); font-weight: 700; font-size: 21px; line-height: 1.38; letter-spacing: -.03em; }
.fp-post__excerpt { margin-top: 10px; font-size: 16px; line-height: 1.75; color: var(--text-dim); }
.fp-post__by { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 14px; color: var(--text-dim); }
.fp-post__pen { color: var(--text); font-weight: 600; }
.fp-post__alert { margin-top: 14px; padding: 12px 14px; border-radius: var(--radius); background: var(--warn-soft); color: var(--text); border-left: 4px solid var(--warn); font-size: 15px; line-height: 1.7; }
.fp-post.is-ended .fp-post__alert { background: var(--stop-soft); border-left-color: var(--stop); }
.fp-disclose { margin-top: 14px; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-2); font-size: 14px; line-height: 1.7; color: var(--text-dim); }
.fp-disclose__k { flex: none; background: var(--primary-soft); color: var(--primary); border-radius: 3px; padding: 0 6px; font-weight: 600; white-space: nowrap; }
.fp-post__cover { margin-bottom: 20px; }
.fp-post__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--surface); }
/* 종료·재확인 필요 글에는 가입 버튼을 내린다 (BLUEPRINT 5.2 프로모션 상태) */
.fp-post.is-ended .post-body .cta-box, .fp-post.is-check .post-body .cta-box { display: none; }

/* ── 8. 본문 .post-body ─────────────────────────────────── */
.post-body { max-width: var(--reading); font-size: 16px; line-height: 1.8; }
.post-body::after { content: ""; display: table; clear: both; }
.post-body > * + * { margin-top: 1em; }
.post-body p { margin: 0; }
.post-body > :is(blockquote, div, aside, figure, table, nav, ul, ol, .scroll-x) + :is(p, h3, h4) { margin-top: 1.4em; }
.post-body h2 { position: relative; margin-top: 2.2em; padding-top: 18px; border-top: 1px solid var(--line); font-size: 21px; font-weight: 600; line-height: 1.45; scroll-margin-top: 16px; }
.post-body h2::before { content: ""; position: absolute; left: 0; top: -2px; width: 40px; height: 3px; background: var(--primary); }
.post-body h3 { margin-top: 1.8em; font-size: 18px; font-weight: 600; color: var(--accent); scroll-margin-top: 16px; }
.post-body h4 { font-size: 16px; font-weight: 600; }
.post-body :is(h2, h3, h4) + * { margin-top: .6em; }
.post-body ul:not([class]), .post-body ol:not([class]) { padding-left: 1.3em; }
.post-body li + li { margin-top: .35em; }
.post-body li::marker { color: var(--primary); }
.post-body strong { color: var(--text); font-weight: 600; }
.post-body a { overflow-wrap: anywhere; }
.post-body hr, .post-body .divider { border: 0; border-top: 1px dashed var(--line); margin: 2em 0; }

/* 독자 상황 — 장식 따옴표 없이 작은 표식 */
.post-body blockquote { margin: 0; padding: 30px 16px 14px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); position: relative; }
.post-body blockquote::before { content: "독자 상황"; position: absolute; left: 16px; top: 8px; font-size: 13px; line-height: 1.6; color: var(--accent); }
.post-body blockquote p { font-size: 16px; line-height: 1.75; }
.post-body blockquote cite { display: block; margin-top: 6px; font-size: 14px; color: var(--text-dim); font-style: normal; }

/* 결론 리드 */
.post-body .lead { font-size: 17px; line-height: 1.8; padding-left: 14px; border-left: 3px solid var(--primary); }
.post-body .lead time { color: var(--primary); white-space: nowrap; font-family: var(--font-body); font-weight: 600; }

/* 요약·목차·핵심·준비 */
.post-body .summary-box, .post-body .key-points, .post-body .prep-box, .post-body .toc-box { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.post-body .summary-box { border-top: 3px solid var(--accent); }
.post-body :is(.summary-box, .key-points, .prep-box, .toc-box) :is(h3, h4) { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--accent); }
.post-body :is(.summary-box, .key-points) ul, .post-body :is(.summary-box, .key-points) ol { margin: 0; padding-left: 1.2em; }
.post-body .key-points { border-left: 4px solid var(--primary); }
.post-body .toc-box ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.post-body .toc-box li { counter-increment: toc; margin: 0; border-top: 1px solid var(--line); }
.post-body .toc-box li:first-child { border-top: 0; }
.post-body .toc-box a { display: flex; gap: 10px; align-items: baseline; min-height: 44px; padding: 9px 0; color: var(--text); text-decoration: none; line-height: 1.55; }
.post-body .toc-box a::before { content: counter(toc, decimal-leading-zero); flex: none; min-width: 2em; font-family: var(--font-number); color: var(--primary); font-size: 15px; }
.post-body .toc-box a:hover { color: var(--primary); }
.post-body .prep-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.post-body .prep-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; background: var(--surface); border-radius: 4px; line-height: 1.6; }
.post-body .prep-item::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 4px; border: 2px solid var(--accent); border-radius: 3px; }

/* 알림 상자 */
.post-body :is(.warn-box, .info-box, .note-box, .error-box, .success-box) { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); line-height: 1.75; }
.post-body :is(.warn-box, .info-box, .note-box, .error-box, .success-box) > div { min-width: 0; flex: 1 1 auto; }
.post-body .badge { flex: none; display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: 13px; line-height: 1.7; font-weight: 600; white-space: nowrap; background: var(--accent-soft); color: var(--accent); }
.post-body .warn-box { background: var(--warn-soft); border-color: rgba(255, 209, 102, .45); }
.post-body .warn-box .badge { background: var(--warn); color: var(--bg); }
.post-body .error-box { background: var(--stop-soft); border-color: rgba(255, 158, 148, .45); }
.post-body .error-box .badge { background: var(--stop); color: var(--bg); }
.post-body .success-box { background: var(--ok-soft); }
.post-body .success-box .badge { background: var(--ok); color: var(--bg); }
.post-body .info-box .badge { background: var(--accent); color: var(--bg); }
.post-body .note-box { background: var(--bg-2); font-size: 15px; color: var(--text-dim); }
.post-body .note-box strong { color: var(--text); }

/* 단계 · 타임라인 */
.post-body .step { display: flex; gap: 14px; align-items: flex-start; }
.post-body .step + .step { margin-top: 12px; }
.post-body .step .num { flex: none; width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--bg); font-size: 15px; white-space: nowrap; }
.post-body .step .body { min-width: 0; flex: 1 1 auto; padding-top: 4px; }
.post-body .step .body h4 { margin: 0 0 2px; }
.post-body .timeline { list-style: none; margin-left: 0; padding: 0; }
.post-body .timeline li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 0 0 14px 22px; margin: 0; border-left: 3px solid var(--primary); }
.post-body .timeline li + li { border-left-color: var(--accent); border-left-style: solid; }
.post-body .timeline li:last-child { padding-bottom: 0; }
.post-body .timeline li::before { content: ""; position: absolute; left: -8px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 3px solid var(--primary); }
.post-body .timeline li + li::before { border-color: var(--accent); }
.post-body .timeline .time { font-family: var(--font-number); color: var(--primary); font-size: 15px; white-space: nowrap; }
.post-body .timeline li + li .time { color: var(--accent); }

/* 금액 */
.post-body .price-tag { white-space: nowrap; }
.post-body .price-tag .amount { font-family: var(--font-number); font-variant-numeric: tabular-nums; font-size: 1.12em; color: var(--text); }
.post-body .price-tag .currency { font-family: var(--font-body); font-size: .9em; margin-left: 1px; }
.post-body .highlight { background: linear-gradient(transparent 58%, rgba(255, 179, 102, .32) 0); color: var(--text); }
.post-body .kbd, .post-body kbd { font-family: var(--font-number); padding: 0 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface); }

/* 기간 요약 (사이트 고유) — 모바일은 그 자리, 1100px↑ 오른쪽 여백 칸으로 */
.post-body .period-box { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--radius); padding: 12px 14px; }
.post-body .period-box__h { font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 4px; }
.post-body .period-box dl { display: grid; gap: 0; margin: 0; }
.post-body .period-box dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px dashed var(--line); }
.post-body .period-box dt { color: var(--text-dim); font-size: 14px; }
.post-body .period-box dd { margin: 0; font-family: var(--font-number); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.post-body .period-box dl > div:last-child dd { color: var(--primary); font-size: 1.1em; }

/* 맞는 조건 / 맞지 않는 조건 */
.post-body .pros-cons { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.post-body .pros-cons > div { background: var(--surface); border-radius: var(--radius); padding: 12px 14px; border-top: 3px solid var(--ok); }
.post-body .pros-cons .cons { border-top-color: var(--stop); }
.post-body .pros-cons h4 { margin: 0 0 4px; font-size: 15px; }
.post-body .pros-cons .pros h4 { color: var(--ok); }
.post-body .pros-cons .cons h4 { color: var(--stop); }
.post-body .pros-cons ul { margin: 0; padding-left: 1.2em; }

/* CTA (제휴) */
.post-body .cta-box { background: var(--primary-soft); border: 1px solid rgba(255, 179, 102, .45); border-radius: var(--radius); padding: 16px; }
.post-body .cta-box h4 { margin: 0 0 4px; color: var(--primary); }
.post-body .cta-box p { font-size: 15px; color: var(--text-dim); margin: 0 0 10px; }
.post-body .cta-button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; background: var(--primary); color: var(--bg); border-radius: var(--radius); font-weight: 600; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(7, 31, 36, .35); }
.post-body .cta-button:hover { background: #FFC488; }
.post-body .cta-button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; box-shadow: inset 0 0 0 2px var(--bg); }
.post-body .cta-box .cta-button { width: 100%; }
.post-body .faq dt { font-weight: 600; margin-top: 1em; color: var(--accent); }
.post-body .faq dd { margin: 4px 0 0; }
.post-body .spoiler { border: 1px solid var(--line); border-radius: var(--radius); padding: 0 14px; }
.post-body .spoiler summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 600; }
.post-body .pull-quote { font-size: 19px; line-height: 1.6; padding: 6px 0 6px 16px; border-left: 3px solid var(--accent); color: var(--text); }
.post-body .footnote { display: block; font-size: 14px; line-height: 1.7; color: var(--text-dim); padding-left: 2.2em; text-indent: -2.2em; }
.post-body .footnote .num { display: inline-block; min-width: 2.2em; text-indent: 0; color: var(--accent); }

/* 이미지 — h2 마다 한 장 (카뉴가 채운다). 채우기 전(src 없음)은 자리 자체를 숨긴다 */
.post-body figure { margin-top: 1.4em; }
.post-body figure img { width: 100%; border-radius: var(--radius); background: var(--surface); }
.post-body figure > img { aspect-ratio: 3 / 2; object-fit: cover; }
.post-body figure:has(> img[data-img-pending]:not([src])) { display: none; }
.post-body img[data-img-pending]:not([src]) { display: none; }
.post-body figcaption { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.post-body .image-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.post-body .image-grid figure { margin: 0; }
.post-body .before-after { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.post-body .before-after .label { font-size: 13px; color: var(--accent); }
.post-body .video-embed { position: relative; aspect-ratio: 16 / 9; }
.post-body .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }

/* ── 9. 표 ──────────────────────────────────────────────── */
.post-body .scroll-x { margin-top: 1.4em; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(90deg, var(--bg) 30%, rgba(7, 31, 36, 0)) left / 24px 100% no-repeat local,
              linear-gradient(270deg, var(--bg) 30%, rgba(7, 31, 36, 0)) right / 24px 100% no-repeat local,
              radial-gradient(farthest-side at 0 50%, rgba(255, 179, 102, .35), transparent) left / 10px 100% no-repeat scroll,
              radial-gradient(farthest-side at 100% 50%, rgba(255, 179, 102, .35), transparent) right / 10px 100% no-repeat scroll; }
.post-body table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.6; }
html:not(.js) .post-body table { display: block; overflow-x: auto; max-width: 100%; }
.post-body .scroll-x table { min-width: 640px; }
.post-body caption { caption-side: top; text-align: left; padding: 10px 12px 8px; font-size: 14px; color: var(--text-dim); }
.post-body th, .post-body td { padding: 10px 12px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.post-body thead th { background: var(--surface-2); color: var(--text-dim); font-size: 13px; font-weight: 600; border-top: 0; white-space: normal; }
.post-body tbody th { font-weight: 600; color: var(--text); }
.post-body .scroll-x td { min-width: 4.6em; }
.post-body tbody tr:nth-child(even) > * { background: rgba(16, 48, 57, .55); }
.post-body td.is-num, .post-body th.is-num { text-align: right; font-family: var(--font-number); font-variant-numeric: tabular-nums; }
.post-body thead th.is-num { font-family: var(--font-body); }
.post-body td.is-total { font-weight: 600; color: var(--primary); }
.post-body thead th.is-total { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); }

/* 모바일: 표 → 요금제 카드 (site.js 가 thead 라벨을 data-label 로 복사하고 .is-stacked 를 붙였을 때만) */
@media (max-width: 759.98px) {
  .post-body .scroll-x.is-stacked { overflow: visible; border: 0; background: none; }
  .post-body table.is-stacked, .post-body table.is-stacked :is(tbody, tr, th, td) { display: block; min-width: 0; width: auto; }
  .post-body table.is-stacked caption { display: block; padding: 0 2px 8px; }
  .post-body table.is-stacked thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .post-body table.is-stacked tbody tr { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--radius); padding: 4px 0 6px; }
  .post-body table.is-stacked tbody tr + tr { margin-top: 10px; }
  .post-body table.is-stacked tbody tr > * { background: none !important; }
  .post-body table.is-stacked tbody :is(th, td) { border: 0; padding: 7px 14px; }
  .post-body table.is-stacked tbody > tr > :first-child:not([data-label]) { font-size: 16px; font-weight: 600; line-height: 1.5; padding-top: 9px; padding-bottom: 9px; }
  .post-body table.is-stacked td[data-label] { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 10px; align-items: baseline; border-top: 1px dashed var(--line); }
  .post-body table.is-stacked td[data-label]::before { content: attr(data-label); font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-dim); text-align: left; }
  .post-body table.is-stacked td.is-num { text-align: right; }
  .post-body table.is-stacked td.is-total { margin: 4px 10px 0; padding: 8px 10px; border: 0; border-radius: 4px; background: var(--primary-soft) !important; font-size: 17px; }
  .post-body table.is-stacked td.is-total::before { color: var(--primary); font-weight: 600; }
  .post-body table.is-stacked td.is-link a { display: inline-flex; align-items: center; min-height: 44px; }
}
/* 태블릿: 6열 이상 요금표는 카드 2열로 (좁은 표에 8열을 욱여넣지 않는다) */
@media (min-width: 760px) and (max-width: 1099.98px) {
  .post-body .scroll-x.is-stacked.is-wide { overflow: visible; border: 0; background: none; }
  .post-body table.is-stacked.is-wide, .post-body table.is-stacked.is-wide :is(tbody, tr, th, td) { display: block; min-width: 0; width: auto; }
  .post-body table.is-stacked.is-wide caption { display: block; padding: 0 2px 8px; }
  .post-body table.is-stacked.is-wide thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .post-body table.is-stacked.is-wide tbody tr { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--primary); border-radius: var(--radius); padding: 4px 0 6px; }
  .post-body table.is-stacked.is-wide tbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
  .post-body table.is-stacked.is-wide tbody tr + tr { margin-top: 0; }
  .post-body table.is-stacked.is-wide tbody tr > * { background: none !important; }
  .post-body table.is-stacked.is-wide tbody :is(th, td) { border: 0; padding: 7px 14px; }
  .post-body table.is-stacked.is-wide tbody > tr > :first-child:not([data-label]) { font-size: 16px; font-weight: 600; line-height: 1.5; padding-top: 9px; padding-bottom: 9px; }
  .post-body table.is-stacked.is-wide td[data-label] { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 10px; align-items: baseline; border-top: 1px dashed var(--line); }
  .post-body table.is-stacked.is-wide td[data-label]::before { content: attr(data-label); font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-dim); text-align: left; }
  .post-body table.is-stacked.is-wide td.is-num { text-align: right; }
  .post-body table.is-stacked.is-wide td.is-total { margin: 4px 10px 0; padding: 8px 10px; border: 0; border-radius: 4px; background: var(--primary-soft) !important; font-size: 17px; }
  .post-body table.is-stacked.is-wide td.is-total::before { color: var(--primary); font-weight: 600; }
  .post-body table.is-stacked.is-wide td.is-link a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ── 10. 글 아래 ────────────────────────────────────────── */
.fp-post__foot { margin-top: 36px; }
.fp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.fp-tags a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--accent); text-decoration: none; font-size: 14px; white-space: nowrap; }
.fp-pen { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--line); max-width: var(--reading); }
.fp-pen__mark { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary); color: var(--bg); font-family: var(--font-title); font-weight: 700; font-size: 20px; line-height: 1; }
.fp-pen__h { font-size: 16px; font-weight: 600; }
.fp-pen p { font-size: 15px; line-height: 1.75; color: var(--text-dim); margin-top: 4px; }
.fp-post__disc { margin-top: 14px; max-width: var(--reading); font-size: 14px; line-height: 1.7; color: var(--text-dim); }
.fp-related { margin-top: 40px; }
.fp-related .fp-sec-h { margin-bottom: 10px; }

/* ── 11. 광고 칸 — 광고 코드가 없으면 숨김 ────────────────── */
.ad-slot { position: relative; margin: 28px auto; padding: 22px 0 10px; min-height: 100px; text-align: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ad-slot:not(:has(> :not(.ad-label))) { display: none; }
.ad-label { position: absolute; top: 4px; left: 0; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.post-body .inline-ad { margin: 2em 0; }

/* ── 12. 푸터 ──────────────────────────────────────────── */
.fp-foot { margin-top: 24px; border-top: 1px solid var(--line); background: var(--bg-2); }
.fp-foot__in { max-width: var(--container); margin: 0 auto; padding: 28px var(--gutter) 36px; display: grid; gap: 22px; }
.fp-foot__name { display: flex; align-items: center; gap: 8px; font-family: var(--font-title); font-weight: 700; font-size: 17px; }
.fp-foot__id p:last-child { margin-top: 6px; font-size: 15px; line-height: 1.75; color: var(--text-dim); }
.fp-foot__h { font-weight: 600; color: var(--accent); font-size: 15px; margin-bottom: 4px; }
.fp-foot__rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.7; color: var(--text-dim); }
.fp-foot__rules li { padding-left: 14px; position: relative; }
.fp-foot__rules li::before { content: ""; position: absolute; left: 0; top: .75em; width: 6px; height: 2px; background: var(--primary); }
.fp-foot__links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.fp-foot__links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; color: var(--text); font-size: 15px; }
.fp-foot__note { font-size: 13.5px; line-height: 1.75; color: var(--text-dim); }
.fp-foot__copy { font-size: 13px; color: var(--text-dim); }

@media (max-width: 599.98px) {
  .post-body :is(.warn-box, .info-box, .note-box, .error-box, .success-box) { flex-direction: column; gap: 6px; }
}

/* ── 13. 600px↑ ────────────────────────────────────────── */
@media (min-width: 600px) {
  :root { --gutter: 24px; }
  .fp-usage { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fp-who { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fp-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fp-rules { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fp-rules li { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .fp-rules__n { grid-row: auto; }
  .fp-list--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; border-top: 0; }
  .fp-list--grid .fp-row { border-top: 1px solid var(--line); border-bottom: 0; }
  .fp-list--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .post-body .prep-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .post-body .pros-cons { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .post-body .before-after { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .post-body .cta-box .cta-button { width: auto; }
  .fp-foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fp-foot__links, .fp-foot__note, .fp-foot__copy { grid-column: 1 / -1; }
  .fp-menu__panel ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 비교 시작표: 768px↑ 표 모양 */
@media (min-width: 768px) {
  .fp-board { gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
  .fp-board__head, .fp-board__row { display: grid; grid-template-columns: 136px minmax(0, 1fr) 176px 112px; gap: 16px; align-items: center; padding: 10px 16px; }
  .fp-board__head { background: var(--surface-2); color: var(--text-dim); font-size: 13px; font-weight: 600; }
  .fp-board__row { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: var(--bg-2); }
  .fp-board__row:nth-child(odd) { background: var(--surface); }
  .fp-board__cond, .fp-board__date { display: block; }
  .fp-board__cond::before, .fp-board__date::before { content: none; }
  .fp-board__date { text-align: right; }
  .fp-intro__h { font-size: 32px; }
  .fp-post__title { font-size: 30px; }
  .fp-list-head__h { font-size: 30px; }
}

/* ── 14. 960px↑ 데스크톱 ───────────────────────────────── */
@media (min-width: 960px) {
  body { font-size: 17px; }
  .fp-menu { display: none; }
  .fp-nav { display: block; }
  .fp-head__in { padding-right: var(--gutter); gap: 24px; }
  .fp-nav__list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .fp-nav__a { display: inline-flex; align-items: center; min-height: 56px; padding: 0 12px; color: var(--text); text-decoration: none; font-size: 15px; border-bottom: 2px solid transparent; cursor: pointer; list-style: none; }
  .fp-nav__a::-webkit-details-marker { display: none; }
  .fp-nav__a:hover { color: var(--primary); }
  .fp-nav__a[aria-current="page"], .fp-nav__a.is-current { color: var(--primary); border-bottom-color: var(--primary); }
  .fp-nav__more summary::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .fp-drop { position: relative; }
  .fp-drop__list { position: absolute; right: 0; top: 100%; min-width: 200px; margin: 0; padding: 6px; list-style: none; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 16px 32px rgba(0, 0, 0, .35); }
  .fp-drop__list a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--text); text-decoration: none; border-radius: 4px; font-size: 15px; }
  .fp-drop__list a:hover, .fp-drop__list a[aria-current="page"] { background: var(--surface); color: var(--primary); }

  .fp-band { padding-top: 52px; }
  .fp-sec-h { font-size: 23px; }
  .fp-intro { padding-top: 44px; }
  .fp-intro__in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: end; padding-bottom: 36px; }
  .fp-intro__h { font-size: 38px; }
  .fp-intro__excerpt { font-size: 17px; max-width: 34em; }
  .fp-rules { grid-template-columns: minmax(0, 1fr); }
  .fp-rules li { grid-template-columns: auto minmax(0, 1fr); }
  .fp-rules__n { grid-row: span 2; }
  .fp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; }
  .fp-who { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fp-strip__m { height: 44px; }
  .fp-strip__m.is-after { height: 44px; }
  .fp-method { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .fp-list--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fp-list-body { display: block; }
  .fp-foot__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 64px; }

  .post-body { font-size: 17px; }
  .post-body blockquote p { font-size: 17px; }
  .post-body h2 { font-size: 23px; }
  .fp-post__head { padding-top: 8px; padding-bottom: 26px; }
  .fp-post__title { font-size: 34px; max-width: 28em; }
  .fp-post__excerpt { font-size: 17px; max-width: var(--reading); }
  .fp-disclose, .fp-post__alert { max-width: var(--reading); }
}

/* ── 15. 1100px↑ — 본문 상자를 오른쪽 여백 칸까지 넓히고, 글줄은 744px 로 묶는다.
   표는 그 넓이 그대로, 기간 요약은 오른쪽 칸으로 (본문 상자 밖으로 넘치지 않는다) ─ */
@media (min-width: 1100px) {
  .post-body { max-width: calc(var(--reading) + var(--rail-gap) + var(--rail)); }
  .post-body > * { max-width: var(--reading); }
  .post-body > .scroll-x { max-width: none; clear: both; }
  .post-body .scroll-x table { min-width: 0; }
  .post-body > .period-box { float: right; clear: right; width: var(--rail); max-width: none; margin: 0 0 16px var(--rail-gap); position: relative; top: -6px; }
}