/* guide.css — 가이드 페이지 공용 스타일 (CSP style-src 'self' 대응: 인라인 <style> 금지)
   다크 기본 + 시스템 라이트 테마 자동 대응 */
:root{color-scheme:dark light;--bg:#0b1018;--card:#121a27;--txt:#eef4ff;--sub:#9fb0c6;--line:#243248;--blue:#5b9cf6;--green:#35bd8b;--red:#ed7082}
@media (prefers-color-scheme: light){
  /* --blue는 CTA 배경(연한 파랑) 위에서 4.47로 AA(4.5)에 살짝 못 미쳤다 → 한 단계 진하게 */
  :root{--bg:#eef2f8;--card:#ffffff;--txt:#172235;--sub:#4d5e73;--line:#d8e2ee;--blue:#1160c0;--green:#087f5b;--red:#c93851}
}
body{margin:0;background:var(--bg);color:var(--txt);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.75}
/* box-sizing이 기본값(content-box)이면 padding 26px×2와 border 1px×2가 width 밖으로 더해져
   모든 뷰포트에서 문서가 22px씩 넘쳤다 — 모바일에서 가로로 밀린다(2026-08-05 실측).
   레이아웃 게이트는 '내용이 요소를 넘치는지'만 봐서 이걸 통과시켰다. */
main{box-sizing:border-box;width:min(820px,calc(100% - 32px));margin:42px auto;padding:26px;border:1px solid var(--line);border-radius:16px;background:var(--card)}

/* ── 읽기 타이포그래피 (2026-08-12) ────────────────────────────────
   그전까지 본문은 14px에 색이 --sub였다. 즉 글 전체가 '캡션'처럼 보였고,
   h2도 16.5px라 본문의 1.18배뿐이라 어디가 절인지 눈으로 안 잡혔다.
   계산기의 대시보드 밀도를 글 페이지가 그대로 물려받은 탓이다.

   본문은 --txt로 올리고 16.5px로 키웠다. 폭을 880→820으로 줄인 것은
   글자를 키우면 한 줄이 길어져서다 — 한글은 글자폭이 글자크기와 거의
   같아 820px·16.5px가 한 줄 45자 안팎이 된다.

   표·칩·메타·안내문은 각자 크기 규칙을 갖고 있어 여기 영향을 받지 않는다.
   밀도가 필요한 자리는 그대로 둔다. */
h1{font-size:30px;margin:0 0 10px;line-height:1.32;letter-spacing:-.01em}
h2{font-size:21px;margin:36px 0 12px;line-height:1.4;letter-spacing:-.005em}
h3{font-size:17.5px;margin:26px 0 8px;line-height:1.45}
p,li{color:var(--txt);font-size:16.5px}
p{margin:0 0 16px}
main>ul,main>ol{margin:0 0 18px}
li{margin-bottom:7px}
a{color:var(--blue);font-weight:700;text-decoration:none}
/* 도입부 — 본문보다 크고 색은 한 톤 죽여, 제목과 본문 사이의 다리 역할 */
.lead{font-size:18px;color:var(--sub);line-height:1.65;margin-bottom:22px}
.formula{padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:rgba(91,156,246,.06);font-size:13.5px;color:var(--txt);overflow-x:auto}
.cta{display:block;margin:22px 0;padding:13px;border:1px solid var(--blue);border-radius:10px;background:rgba(91,156,246,.1);text-align:center;font-size:15px;color:var(--blue);font-weight:700}
.others{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--sub)}
/* 터치 타겟 — 링크 높이가 15~17px이라 모바일에서 누르기 어려웠다(WCAG 2.2 최소 24px).
   문장 속 인라인 링크는 규격 예외지만, 이건 나열된 내비 링크라 예외가 아니다. */
.others a{display:inline-block;margin-right:10px;padding:5px 2px;min-height:24px;line-height:1.15}
/* 목록 항목이 링크만으로 이뤄진 경우(문장이 아니라 나열)도 같은 기준을 적용한다.
   허브 목차의 "A · B"처럼 한 줄에 링크를 붙여 쓴 항목이 여기 해당. */
main > ul > li > a{display:inline-block;padding:4px 0;min-height:24px;line-height:1.35}
/* 히어로 수치 옆 보조 링크(예: "(백분위표)")도 탭 대상이다 */
.sal-row a{display:inline-block;padding:4px 2px;min-height:24px;line-height:1.3}
/* 링크 하나만 든 문단은 문장이 아니라 사실상 버튼 — 같은 탭 높이를 준다
   (예: "연봉 5,000만원 월 실수령액 보기 →"). :only-child라 본문 속 인라인 링크는 안 걸린다. */
main p > a:only-child{display:inline-block;padding:4px 0;min-height:24px;line-height:1.35}
/* opacity로 흐리게 하면 실제 대비가 4.13까지 떨어져 WCAG AA(4.5) 미달이 된다 —
   투명도 대신 본문보다 약간 옅은 전용 색을 쓴다(2026-08-04 axe 검출) */
.disclaimer{margin-top:14px;font-size:11.5px;color:var(--sub)}
/* 시행 전 제도(개정안 등) 안내 — 본문보다 먼저 읽혀야 하므로 색 테두리로 구분한다.
   배경만으로 구분하면 다크/라이트 어느 한쪽에서 묻힌다. */
/* 글 목록·본문 메타 — gen-blog가 쓰는 클래스. 가이드와 같은 CSS를 공유해
   글 하나 올릴 때 스타일을 따로 만들지 않아도 되게 한다. */
.post-list{list-style:none;padding:0;margin:20px 0}
.post-list li{padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--sub) 18%,transparent)}
.post-list li a{display:block;font-size:18px;font-weight:700;line-height:1.45}
.post-meta{display:block;margin-top:5px;font-size:12.5px;color:var(--sub)}
.post-excerpt{display:block;margin-top:6px;font-size:15px;color:var(--sub);line-height:1.7}
.notice-box{margin:18px 0;padding:13px 15px;border:1px solid var(--blue);border-left-width:4px;border-radius:10px;background:rgba(91,156,246,.08);font-size:13.5px;color:var(--txt);line-height:1.7}
.notice-box b,.notice-box strong{color:var(--txt)}
/* 인용 — gen-blog의 마크다운 > 문법이 만든다 */
blockquote{margin:18px 0;padding:2px 0 2px 16px;border-left:3px solid var(--line);color:var(--sub);font-size:16px}

.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:13px;color:var(--sub)}
/* 표 첫 칸은 값별 페이지로 가는 주요 진입점 — 모바일 탭 높이 24px 확보 */
td.yr a,td:first-child a{display:inline-block;padding:4px 0;min-height:24px;line-height:1.3}
/* 다음 지급 일정 강조 — next-payout.js가 계산해 붙인다(HTML에 박으면 매일 달라져
   date-stability 게이트가 깨진다). JS가 없거나 실패하면 그냥 평범한 행으로 남는다. */
tr.is-next{background:rgba(91,156,246,.10)}
tr.is-next td{font-weight:600;color:var(--txt)}
thead th{background:color-mix(in srgb,var(--sub) 7%,transparent);border-bottom:2px solid color-mix(in srgb,var(--sub) 30%,transparent)}
th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--txt);font-size:12px}
/* history 페이지 전용 (숫자 그리드) */
.num-table th,.num-table td{text-align:right;white-space:nowrap;padding:5px 8px;font-size:12px}
.num-table th{color:var(--sub);font-size:10.5px}
.num-table td.yr,.num-table th:first-child{text-align:left;color:var(--txt);font-weight:800}
td.ds,th.ds{color:var(--blue);font-weight:800;background:rgba(91,156,246,.06)}
td.zero{color:var(--red);font-weight:800}
td.max{color:var(--green);font-weight:700}
td.note{text-align:left;white-space:normal;color:var(--sub);font-size:11px;min-width:160px}
.chip{display:inline-block;margin:1px 3px 1px 0;padding:2px 7px;border:1px solid var(--line);border-radius:999px;font-size:11px;font-weight:800;color:var(--txt);white-space:nowrap}
.chip em{font-style:normal;font-weight:650;color:var(--sub)}
/* calendar 페이지 */
.cal-month{color:var(--txt);font-weight:850;white-space:nowrap}
.cal-co{font-weight:800;white-space:nowrap}
.cal-co.sam{color:var(--blue)}
.cal-co.hx{color:var(--green)}
/* calendar 타임라인 */
.timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0}
.item{padding:13px;border:1px solid var(--line);border-radius:10px;background:rgba(91,156,246,.05)}
.month{display:inline-block;padding:3px 9px;border-radius:999px;background:rgba(91,156,246,.12);color:var(--blue);font-size:12px;font-weight:900}
.item h2{margin:10px 0 6px;font-size:15px}
.item p{margin:0;font-size:13px}
@media(max-width:720px){.timeline{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* 표 셀 미니바 — 막대 폭은 5% 계단 클래스(w-N), CSP상 인라인 style 불가 */
.mini-bar{display:block;height:5px;margin-top:5px;min-width:64px;border-radius:999px;background:rgba(127,127,127,.15);overflow:hidden}
.mini-bar b{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--green));min-width:2px}
.mini-bar b.zero{background:var(--red)}
.mini-bar b.max{background:var(--green)}
td.ds .mini-bar{min-width:34px;margin-top:3px;height:4px}
.w-2{width:2%}
.w-5{width:5%}
.w-10{width:10%}
.w-15{width:15%}
.w-20{width:20%}
.w-25{width:25%}
.w-30{width:30%}
.w-35{width:35%}
.w-40{width:40%}
.w-45{width:45%}
.w-50{width:50%}
.w-55{width:55%}
.w-60{width:60%}
.w-65{width:65%}
.w-70{width:70%}
.w-75{width:75%}
.w-80{width:80%}
.w-85{width:85%}
.w-90{width:90%}
.w-95{width:95%}
.w-100{width:100%}
.td-left{text-align:left}
.txt-max{color:var(--green);font-weight:800}
.txt-zero{color:var(--red);font-weight:800}
/* 연봉별 성과급 랜딩 (gen-salary-pages) */
.sal-hero{margin:22px 0;padding:20px;border:1px solid var(--blue);border-radius:14px;background:rgba(91,156,246,.08)}
.sal-hero-label{font-size:12.5px;color:var(--sub);font-weight:700}
.sal-num{margin:4px 0 14px;font-size:34px;font-weight:900;color:var(--txt);line-height:1.1}
.sal-num span{font-size:18px;font-weight:700;margin-left:3px;color:var(--sub)}
.sal-break{display:flex;flex-direction:column;gap:7px}
.sal-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
/* flex 자식은 기본 min-width:auto라 내용보다 작게 줄지 못한다. 라벨이 긴 행이 320px에서
   15px 넘쳤다(2026-08-05 — guide 페이지를 레이아웃 게이트에 넣고 처음 드러남).
   값(b)은 nowrap으로 지키고 라벨만 줄바꿈되게 한다. */
.sal-row span{font-size:13px;color:var(--sub);min-width:0;overflow-wrap:anywhere}
/* nowrap은 금액(4,979만원)이 쪼개지지 말라고 넣은 것인데, 이 자리에는 '근로자 상위 약 23%
   (백분위표)' 같은 긴 문장도 들어온다. 그러면 320px에서 줄바꿈이 막혀 행이 통째로 넘친다.
   금액은 어차피 한 덩어리라 줄바꿈해도 쪼개지지 않으므로 nowrap을 걷어낸다. */
.sal-row b{font-size:14px;color:var(--txt);font-weight:800;min-width:0;text-align:right}
.sal-row.note span,.sal-row.note b{font-size:12px;color:var(--sub);font-weight:600}
.sal-siblings{display:flex;flex-wrap:wrap;gap:8px}
.sal-siblings a{padding:5px 11px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;font-weight:700}

/* 차량 랜딩: 선택 옵션 구성 리스트 */
.opt-details{list-style:none;margin:10px 0 18px;padding:0}
.opt-details li{padding:10px 12px;border:1px solid var(--border,#e5e7eb);border-radius:10px;margin-bottom:8px;font-size:12.5px;line-height:1.6;color:var(--sub,#556);word-break:keep-all}
.opt-details li b{font-size:13px;color:var(--txt,#123)}
/* opacity는 실제 대비를 4.13까지 떨어뜨린다(AA 4.5 미달) — 투명도 대신 색으로 강약을 준다 */
.opt-details .opt-price{font-weight:700;font-size:12px;color:var(--sub);margin-left:4px}

/* 광고 자리 — 높이를 미리 잡아 광고가 뜰 때 아래 내용이 밀리지 않게 한다(CLS).
   자동 광고가 계산기 상단에 390px를 박던 것을 걷어내고 우리가 정한 두 지점에만 둔다. */
.ad-slot{min-height:280px;margin:26px 0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.ad-slot ins{width:100%}

/* 광고가 안 채워지면 자리를 접는다. 예약 높이는 광고가 늦게 떠도 본문이 안 밀리게
   하려는 것이지, 빈 상자를 남기려는 게 아니다. 지금은 채워지는 비율이 낮아 거의 모든
   페이지에 280px짜리 빈 칸이 두 개씩 있었다(2026-08-05 실측).
   구글이 미충전을 확정한 뒤에만 접히므로, 로딩 중에는 자리가 그대로 예약돼 있다. */
.ad-slot:has(ins[data-ad-status="unfilled"]) { display: none; }

/* 사이트 브랜드 바 — 검색으로 떨어진 사람이 홈·계산기로 갈 길이 본문 CTA뿐이었다
   (2026-08-06, add-guide-header.mjs가 일괄 삽입). */
.site-top{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin:-4px 0 20px;padding-bottom:12px;border-bottom:1px solid var(--line);font-size:13px}
.site-top a{display:inline-block;padding:5px 8px;min-height:24px;color:var(--sub);font-weight:600}
.site-top a:first-child{margin-left:-8px}
.site-top .brand{color:var(--txt);font-weight:900;font-size:14.5px}
.site-top a:hover{color:var(--blue)}

/* ── 좁은 폭에서 표를 카드로 편다 (2026-08-28) ──
   390px에서 4열 표를 밀어 넣으면 "4,610만"과 "원"이 서로 다른 줄로 쪼개져 숫자가
   읽히지 않았다. 가로 스크롤로 두면 오른쪽 열(실구매가)이 아예 안 보인다.
   차량 페이지 133장 + 목록 1장에 전부 걸리던 문제라 표 자체를 접는다.
   대상은 .card-table만 — 각 칸의 data-l(열 이름)을 라벨로 쓴다. */
.card-table td, .card-table th { font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .scroll:has(.card-table) { overflow: visible; }
  .card-table, .card-table tbody, .card-table tr, .card-table td { display: block; width: auto; }
  /* thead는 지우지 않고 숨긴다 — 스크린리더는 계속 열 이름을 읽는다 */
  .card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .card-table tr {
    border: 1px solid var(--line, #e2e8f0);
    border-radius: 12px;
    padding: .8rem 1rem;
    margin-bottom: .6rem;
    background: var(--card, #fff);
  }
  .card-table td { border: 0; padding: 0; text-align: left; }
  /* 첫 칸(트림·기간·모델)이 카드 제목 */
  .card-table td:first-child { font-weight: 800; font-size: 1.02rem; margin-bottom: .5rem; }
  .card-table td:not(:first-child) {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; padding: .28rem 0; font-size: .93rem;
  }
  .card-table td:not(:first-child)::before {
    content: attr(data-l);
    color: var(--sub, #667085); font-weight: 600; min-width: 0;
  }
  /* 마지막 칸(실구매가·총 상환액)이 결론이라 구분선 위로 올린다 */
  .card-table td:last-child {
    margin-top: .3rem; padding-top: .45rem;
    border-top: 1px solid var(--line, #e2e8f0); font-size: 1rem;
  }
  .card-table td:last-child b, .card-table td:last-child strong { font-size: 1.1rem; }

  /* 133행짜리 훑기용 목록은 카드로 펴면 페이지가 4배 길어진다.
     한 항목 2줄로 압축한다 — 1줄 모델명+실구매가, 2줄 연료+기본가. */
  .card-table.compact tr {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline; gap: 2px 10px;
    padding: .7rem .1rem; margin: 0;
    border: 0; border-bottom: 1px solid var(--line, #e2e8f0); border-radius: 0;
    background: none;
  }
  .card-table.compact td:first-child { grid-area: 1 / 1; margin: 0; font-size: .95rem; }
  .card-table.compact td:nth-child(2) { grid-area: 2 / 1; font-size: .82rem; color: var(--sub, #667085); }
  .card-table.compact td:nth-child(3) { grid-area: 2 / 2; font-size: .82rem; color: var(--sub, #667085); justify-content: flex-end; }
  .card-table.compact td:last-child {
    grid-area: 1 / 2; margin: 0; padding: 0; border: 0;
    justify-content: flex-end; font-size: .97rem;
  }
  .card-table.compact td:nth-child(2)::before,
  .card-table.compact td:last-child::before { content: none; }
  .card-table.compact td:last-child b { font-size: 1rem; }
}