/* ===========================================================================
   kacr.today — 2026-08-16 가독성·모바일·CTA 전면 개편
   ---------------------------------------------------------------------------
   대표 지적: "글이 따닥따닥 너무 많아 보기 힘들다. 모바일에서는 핵심이 잘 안 보인다."
              "1:1 상담신청 버튼을 좀 더 키워라 — 클릭률이 이 사이트의 핵심 목표."

   개편 원칙
     1. 본문 line-height 1.85 · 문단 간격 확대 · 글줄 최대폭 제한(한글 기준 45자 내외)
     2. h2 위 여백을 크게 줘서 섹션이 시각적으로 끊기게 한다 — "따닥따닥"의 직접 해법
     3. 모바일 본문 17px. 작은 글씨는 정보량이 아니라 피로만 준다
     4. CTA는 풀폭 대형 버튼(모바일 최소 높이 56px) + 하단 고정바
     5. 표는 좁은 화면에서 카드형으로 전환한다(가로 스크롤은 놓치는 정보가 생긴다)
   =========================================================================== */

:root{
  --navy:#0b3d66;
  --navy-dark:#082a47;
  --blue:#1f6fb2;
  --blue-light:#e8f1f9;
  --ink:#1b2430;
  --ink-soft:#4a5568;
  --line:#dbe3ea;
  --bg:#ffffff;
  --bg-soft:#f5f8fb;
  --good:#1a7a4c;
  --warn:#a35a00;
  --radius:10px;
  /* 글줄 길이 — 너무 길면 다음 줄을 못 찾아 읽기가 급격히 나빠진다 */
  --maxw:760px;
  /* 하단 고정 상담바 높이. body 아래 패딩과 맞물린다 */
  --sticky-h:68px;
  /* 섹션 간 리듬 */
  --gap-section:44px;
  --gap-para:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
/* 목차에서 앵커로 점프할 때 제목이 상단 고정 헤더에 가리지 않게 */
h2[id],h3[id]{scroll-margin-top:74px}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

body{
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.85;
  font-size:17px;
  letter-spacing:-0.003em;
  word-break:keep-all;      /* 한글 단어 중간에서 줄바꿈되지 않게 */
  overflow-wrap:break-word;
  -webkit-text-size-adjust:100%;
}

.skip-link{position:absolute;left:-999px;top:0;background:var(--navy);color:#fff;padding:8px 14px;z-index:100}
.skip-link:focus{left:8px;top:8px}
img{max-width:100%;height:auto}
a{color:var(--blue)}
a:focus,button:focus,input:focus,select:focus{outline:3px solid #ffb703;outline-offset:2px}

/* ---------- 헤더 ----------
   데스크톱에서는 고정(sticky), 모바일에서는 고정을 푼다.
   대표 지적: "상단 네비게이션이 계속 따라다녀서 모바일에서 잘 안 읽힌다."
   모바일 메뉴 접근은 하단 고정바의 [메뉴] 버튼이 대신한다. */
.site-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:50}
.header-inner{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px}
.brand{color:#fff;font-weight:800;font-size:1.05rem;text-decoration:none;display:flex;flex-direction:column;line-height:1.2}
.brand span{font-weight:400;font-size:.72rem;color:#cfe0f0}
.site-nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:2px;margin:0;padding:0}
.site-nav a{color:#e6eef6;text-decoration:none;font-size:.86rem;padding:8px 10px;border-radius:6px;display:inline-block}
.site-nav a:hover{background:rgba(255,255,255,.14)}
/* 헤더의 [전체 메뉴] 버튼 — 데스크톱에서는 메뉴가 이미 다 보이므로 숨긴다 */
.header-menu-btn{display:none}

/* ===========================================================================
   전체 메뉴 패널 — 모바일 전용. JavaScript 없이 체크박스로 여닫는다.
   "이 사이트에서 이만큼의 정보를 얻을 수 있구나"를 전달하는 것이 두 번째 목적이라
   단순 링크 나열이 아니라 분류·설명·문서 수를 함께 보여준다.
   =========================================================================== */
.nav-panel,.nav-backdrop{display:none}

@media(max-width:768px){
  .nav-backdrop{
    display:block;
    position:fixed;inset:0;
    background:rgba(8,42,71,.5);
    z-index:70;
    opacity:0;pointer-events:none;
    transition:opacity .2s ease;
  }
  .nav-panel{
    display:block;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:80;
    max-height:82vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    background:#fff;
    border-radius:16px 16px 0 0;
    box-shadow:0 -6px 30px rgba(0,0,0,.22);
    transform:translateY(100%);
    transition:transform .24s cubic-bezier(.2,.8,.3,1);
    padding-bottom:calc(18px + env(safe-area-inset-bottom,0px));
  }
  .nav-toggle-input:checked ~ .nav-backdrop{opacity:1;pointer-events:auto}
  .nav-toggle-input:checked ~ .nav-panel{transform:translateY(0)}
  /* 메뉴가 열린 동안 뒤 본문이 같이 스크롤되지 않게 */
  .nav-toggle-input:checked ~ .site-header{position:static}
}

.np-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 18px 14px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;background:#fff;border-radius:16px 16px 0 0;
}
.np-head-title{margin:0;font-size:1.06rem;font-weight:800;color:var(--navy-dark);line-height:1.4}
.np-head-sub{margin:3px 0 0;font-size:.8rem;color:var(--ink-soft);line-height:1.5}
.np-close{
  flex:0 0 auto;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;
  color:var(--ink-soft);font-size:.95rem;cursor:pointer;
  background:#fff;
}
.np-body{padding:6px 18px 0}
.np-group{padding:14px 0 4px;border-bottom:1px solid #eef2f6}
.np-group:last-child{border-bottom:none}
.np-label{
  margin:0 0 6px;
  font-size:.74rem;font-weight:800;letter-spacing:.04em;
  color:var(--blue);
}
.np-group ul{list-style:none;margin:0;padding:0}
.np-group li{margin:0}
.np-group a{
  display:block;
  padding:11px 4px;
  text-decoration:none;
  border-bottom:1px solid #f4f7fa;
}
.np-group li:last-child a{border-bottom:none}
.np-title{
  display:flex;align-items:center;gap:7px;
  font-weight:700;color:var(--navy-dark);font-size:1rem;line-height:1.5;
}
.np-n{
  font-size:.68rem;font-weight:700;
  background:var(--blue-light);color:var(--navy);
  border-radius:999px;padding:2px 7px;line-height:1.5;
}
.np-desc{display:block;font-size:.82rem;color:var(--ink-soft);line-height:1.55;margin-top:2px}

@media(prefers-reduced-motion:reduce){
  .nav-panel,.nav-backdrop{transition:none}
}

main{display:block}
.page-inner{max-width:var(--maxw);margin:0 auto;padding:20px 18px 48px}

.breadcrumb{font-size:.8rem;color:var(--ink-soft);margin-bottom:12px;line-height:1.6}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
.breadcrumb .sep{margin:0 4px;color:#b7c2cd}
.breadcrumb [aria-current]{color:var(--navy);font-weight:600}

/* ---------- 제목 — 섹션이 눈으로 끊기게 ---------- */
h1{font-size:1.72rem;line-height:1.4;margin:0 0 16px;color:var(--navy-dark);letter-spacing:-0.02em}

/* h2 위 여백이 이번 개편의 핵심이다. 이전 28px → 44px.
   위쪽에 옅은 구분선을 함께 둬서 "여기서 다른 이야기가 시작된다"를 눈으로 알린다. */
h2{
  font-size:1.3rem;
  line-height:1.45;
  margin:var(--gap-section) 0 14px;
  padding:16px 0 0 12px;
  color:var(--navy-dark);
  border-left:4px solid var(--blue);
  border-top:1px solid var(--line);
  letter-spacing:-0.015em;
}
/* 본문 첫 h2는 위 선이 답답하니 뺀다 */
.page-body > h2:first-child{border-top:none;padding-top:0;margin-top:8px}
h3{font-size:1.08rem;margin:30px 0 10px;color:var(--navy-dark);line-height:1.5}
p{margin:0 0 var(--gap-para)}
strong{color:var(--navy-dark)}

/* ---------- 강조 ----------
   대표 지시: "형광펜 효과라던지 빨간색 글씨 등 강조할 부분들은 강조해주면 가독성이 더 살아난다."

   3단계로만 쓴다. 더 늘리면 전부 강조가 되어 아무것도 강조되지 않는다.
     <strong>       : 문장 안의 핵심 어구 (짙은 남색)
     <mark>         : 형광펜 — 페이지에서 딱 하나 기억해야 할 것
     <b class="hl-danger"> : 빨간 경고 — 놓치면 손해 보는 기한·금지 사항
   본문 규칙은 research/REWRITE_BRIEF.md 8절에 적어 두었다. */
mark{
  background:linear-gradient(transparent 52%, #ffe98a 52%);
  color:inherit;
  padding:0 2px;
  font-weight:700;
  border-radius:2px;
}
.hl-danger{
  color:#c0392b;
  font-weight:700;
}
/* 기한·마감처럼 놓치면 안 되는 숫자 */
.hl-deadline{
  color:#c0392b;
  font-weight:800;
  background:#fdeceb;
  padding:1px 5px;
  border-radius:4px;
  white-space:nowrap;
}

/* ---------- 핵심 답변 상자 ---------- */
.answer-box{
  background:var(--blue-light);
  border:1px solid #cfe0ef;
  border-radius:var(--radius);
  padding:18px 20px;
  margin-bottom:18px;
}
.answer-box p{margin:0 0 10px;font-size:1.04rem;line-height:1.8}
.answer-box p:last-child{margin-bottom:0}

/* ---------- 목차 ---------- */
.toc{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  margin:20px 0 8px;
}
.toc-title{margin:0 0 10px;font-weight:700;font-size:.92rem;color:var(--navy-dark)}
.toc-list{list-style:none;margin:0;padding:0;counter-reset:toc}
.toc-list li{margin:0;counter-increment:toc}
.toc-list a{
  display:block;
  padding:9px 4px 9px 30px;
  position:relative;
  color:var(--ink);
  text-decoration:none;
  font-size:.94rem;
  line-height:1.5;
  border-bottom:1px solid #e6edf3;
}
.toc-list li:last-child a{border-bottom:none}
.toc-list a::before{
  content:counter(toc);
  position:absolute;left:0;top:9px;
  width:21px;height:21px;
  background:#fff;border:1px solid var(--line);border-radius:50%;
  font-size:.72rem;font-weight:700;color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.toc-list a:hover{color:var(--blue);text-decoration:underline}

/* ---------- 공식 기관 버튼 ---------- */
.official-links{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.btn-official{flex:1 1 220px;background:var(--navy);color:#fff;text-decoration:none;padding:13px 15px;border-radius:var(--radius);min-height:48px;display:flex;flex-direction:column;justify-content:center;font-weight:700;font-size:.96rem;line-height:1.4}
.btn-official .btn-sub{font-weight:400;font-size:.78rem;color:#cfe0f0;margin-top:3px}
.btn-official:hover{background:var(--blue)}

/* ---------- 표 — 좁은 화면에서 카드형 전환 ---------- */
.page-body table{width:100%;border-collapse:collapse;font-size:.95rem}
.table-wrap{margin:20px 0;border:1px solid var(--line);border-radius:8px;overflow:hidden}
table caption{text-align:left;font-weight:700;padding:12px 14px;background:var(--bg-soft);color:var(--navy-dark);caption-side:top;font-size:.95rem}
th,td{border-bottom:1px solid var(--line);padding:11px 12px;text-align:left;vertical-align:top;line-height:1.7}
th{background:var(--bg-soft);font-weight:700;color:var(--navy-dark)}
tr:last-child td{border-bottom:none}

/* ===========================================================================
   pbox 프레임 — 카드형 블록을 최상위 <p> 시퀀스로 편 것
   (OPERATIONS/AD_FRIENDLY_HTML_RULE.md — <div> 카드에 텍스트를 가두면 구글
   자동광고가 본문 안으로 못 들어온다)

   .pbox 가 공통 여백·줄간격을 주고, .pb-first 가 위 테두리·위 라운딩·위 여백을,
   .pb-last 가 아래 테두리·아래 라운딩·아래 여백을 담당한다. 가운데 조각들은 좌우
   테두리만 이어져 하나의 카드처럼 붙어 보인다. 색·좌우 테두리는 pbox-{variant} 가 정한다.
   =========================================================================== */
.pbox{margin:0;padding:12px 16px;line-height:1.8}
.pbox.pb-first{border-top-left-radius:8px;border-top-right-radius:8px;margin-top:22px;padding-top:14px}
.pbox.pb-last{border-bottom-left-radius:8px;border-bottom-right-radius:8px;margin-bottom:22px;padding-bottom:14px}

/* ---------- 참고·주의·사실 ---------- */
.note.pbox{background:#fff7e6;color:#5c4200;border-left:4px solid #e0b050;border-right:1px solid #f0dca6;font-size:.96rem}
.note.pb-first{border-top:1px solid #f0dca6}
.note.pb-last{border-bottom:1px solid #f0dca6}

.warn-note.pbox{background:#fdeceb;color:#7a1f16;border-left:4px solid #d9534f;border-right:1px solid #f1b9b4;font-size:.96rem}
.warn-note.pb-first{border-top:1px solid #f1b9b4}
.warn-note.pb-last{border-bottom:1px solid #f1b9b4}

.pbox-fact{background:var(--bg-soft);border-left:1px solid var(--line);border-right:1px solid var(--line)}
.pbox-fact.pb-first{border-top:1px solid var(--line)}
.pbox-fact.pb-last{border-bottom:1px solid var(--line)}
.fact-value{font-weight:700;color:var(--navy-dark)}
.fact-meta{font-size:.8rem;color:var(--ink-soft);line-height:1.6}

/* 조문 원문 접기 — 안 읽어도 된다는 것을 눈으로 알린다.
   법률 문장이 본문 흐름을 끊던 문제(레드팀 지적)의 해법이다. */
.fact-detail{margin:0}
.fact-detail summary{
  cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
  font-size:.8rem;font-weight:600;
  color:var(--blue);
  padding:5px 0;
  list-style:none;
}
.fact-detail summary::-webkit-details-marker{display:none}
.fact-detail summary::before{
  content:"＋";
  font-weight:700;
  font-size:.85em;
  line-height:1;
}
.fact-detail[open] summary::before{content:"－"}
.fact-detail summary:hover{text-decoration:underline}
.fact-detail[open] summary{margin-bottom:6px}
.fact-detail .fact-meta{padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:6px}

/* ===========================================================================
   쉬운 설명 블록 3종 — 2026-08-16 신설
   근거: research/LANGUAGE_GAP.md (표본 55,854건 실측)
   =========================================================================== */

/* (a) easy — "쉽게 말하면". 어려운 섹션 위에서 3초 만에 요지를 준다.
   초록 계열로 둔 것은 의도적이다. 파랑(정보)·노랑(참고)·빨강(주의)과 겹치지 않아야
   독자가 색만 보고도 "여기는 쉬운 설명"이라고 학습한다. */
.pbox-easy{background:#effaf3;border-left:4px solid var(--good);border-right:1px solid #bfe6cf;padding-left:18px;padding-right:18px}
.pbox-easy.pb-first{border-top:1px solid #bfe6cf;border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);margin-top:24px;padding-top:16px}
.pbox-easy.pb-last{border-bottom:1px solid #bfe6cf;border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);margin-bottom:24px;padding-bottom:16px}
.easy-label{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--good);
  display:flex;align-items:center;gap:6px;
}
.easy-label::before{
  content:"쉬움";
  background:var(--good);color:#fff;
  border-radius:4px;padding:2px 6px;font-size:.68rem;line-height:1.3;
}
.easy-text{font-size:1.05rem;line-height:1.85;color:#12351f;font-weight:500}

/* (b) checkme — "이런 경우라면 대상일 수 있습니다".
   대표가 콕 집은 블록이고, 중간 CTA가 이 블록 바로 뒤에 붙는다.
   체크박스 모양을 시각적으로 준다(실제 입력은 아니다 — 정적 사이트라 상태가 안 남는다). */
.pbox-check{background:#fff;border-left:2px solid var(--blue);border-right:2px solid var(--blue);box-shadow:0 0 10px rgba(11,61,102,.05)}
.pbox-check.pb-first{border-top:2px solid var(--blue);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);margin-top:28px;padding-top:18px}
.pbox-check.pb-last{border-bottom:2px solid var(--blue);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);margin-bottom:20px;padding-bottom:16px}
.checkme-title{
  font-size:1.1rem;
  font-weight:800;
  color:var(--navy-dark);
  line-height:1.55;
  padding-left:20px;padding-right:20px;
}
.checkme-item{
  position:relative;
  padding:10px 20px 10px 52px;
  border-bottom:1px solid #eef3f7;
  line-height:1.75;
}
.checkme-item.pb-last{border-bottom:none}
.checkme-item::before{
  content:"";
  position:absolute;left:20px;top:15px;
  width:18px;height:18px;
  border:2px solid var(--blue);
  border-radius:4px;
  background:#fff;
}
.checkme-item::after{
  content:"";
  position:absolute;left:26px;top:19px;
  width:5px;height:9px;
  border:solid var(--blue);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
  opacity:.35;
}
.checkme-hint{
  padding-left:20px;padding-right:20px;
  background:var(--blue-light);
  border-top:1px solid #d8e6f2;
  font-size:.94rem;
  font-weight:700;
  color:var(--navy-dark);
  line-height:1.7;
}

/* (c) example — 가상 사례. 숫자를 사람 이야기로 바꾼다. */
.pbox-ex{background:var(--bg-soft);border-left:1px solid var(--line);border-right:1px solid var(--line);padding-left:18px;padding-right:18px}
.pbox-ex.pb-first{border-top:1px solid var(--line);border-top-left-radius:var(--radius);border-top-right-radius:var(--radius);margin-top:24px;padding-top:16px}
.pbox-ex.pb-last{border-bottom:1px solid var(--line);border-bottom-left-radius:var(--radius);border-bottom-right-radius:var(--radius);margin-bottom:24px;padding-bottom:16px}
.example-chip{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  color:var(--ink-soft);
  background:#e4ebf1;
  border-radius:999px;
  padding:3px 10px;
  line-height:1.5;
}
.example-title{font-weight:800;color:var(--navy-dark);font-size:1.02rem;line-height:1.6}
.example-text{line-height:1.8}
.example-line{
  position:relative;
  padding-left:16px;
  font-size:.96rem;
  line-height:1.75;
}
.example-line::before{
  content:"";position:absolute;left:2px;top:.85em;
  width:5px;height:5px;border-radius:50%;background:var(--ink-soft);
}
.example-result{
  background:#fff;
  border-left:3px solid var(--blue);
  border-radius:6px;
  font-weight:700;
  color:var(--navy-dark);
  line-height:1.75;
}

/* ---------- 카드·목록 ---------- */
.card-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0}
@media(min-width:560px){.card-grid{grid-template-columns:1fr 1fr}}
.card{display:flex;flex-direction:column;gap:5px;border:1px solid var(--line);border-radius:var(--radius);padding:15px;text-decoration:none;color:var(--ink);background:#fff}
.card:hover{border-color:var(--blue);background:#fbfdff}
.card-title{font-weight:700;color:var(--navy-dark);line-height:1.55}
.card-desc{font-size:.86rem;color:var(--ink-soft);line-height:1.65}

ul,ol{padding-left:1.3rem;margin:0 0 var(--gap-para)}
li{margin-bottom:9px;line-height:1.8}

/* ---------- 본문 목록 — 최상위 <p> (AD_FRIENDLY_HTML_RULE.md)
   불릿·번호는 CSS가 그린다. 카드 테두리 없이 문단만 이어지므로 자동광고 진입을 막지 않는다. ---------- */
.li-item{position:relative;padding-left:1.3rem;margin:0 0 9px;line-height:1.8}
.li-item::before{
  content:"";position:absolute;left:.32rem;top:.72em;
  width:5px;height:5px;border-radius:50%;background:currentColor;
}
.li-num{position:relative;padding-left:2.15rem;margin:0 0 9px;line-height:1.8}
.li-n{
  position:absolute;left:0;top:.05em;
  display:inline-flex;align-items:center;justify-content:center;
  width:1.5rem;height:1.5rem;
  background:var(--blue-light);color:var(--navy);
  border-radius:50%;
  font-size:.76rem;font-weight:700;line-height:1;
}

/* ---------- FAQ·관련 페이지 ---------- */
.faq-section,.related-section{margin-top:var(--gap-section)}
.faq-section > h2,.related-section > h2{border-top:none;padding-top:0;margin-top:0}
.faq-item{border-top:1px solid var(--line);padding:18px 0}
.faq-item h3{margin:0 0 8px;font-size:1.04rem}
.faq-item p{margin:0;color:var(--ink-soft);line-height:1.8}
.related-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.related-list a{text-decoration:none;padding:13px 15px;background:var(--bg-soft);border-radius:8px;display:block;color:var(--navy-dark);font-weight:600;line-height:1.6}
.related-list a:hover{background:var(--blue-light)}

/* ---------- 계산기·자가진단 도구 ---------- */
.tool-box{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:20px 0}
.tool-row{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.tool-row label{font-weight:700;font-size:.94rem}
.tool-row input,.tool-row select{min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:1rem;background:#fff}
.tool-hint{font-size:.8rem;color:var(--ink-soft);margin-top:2px;line-height:1.6}
.tool-btn{min-height:52px;padding:12px 20px;background:var(--navy);color:#fff;border:none;border-radius:8px;font-weight:800;font-size:1.05rem;cursor:pointer;width:100%}
.tool-btn:hover{background:var(--blue)}
.tool-result{margin-top:16px;padding:16px;background:#fff;border:2px solid var(--blue);border-radius:8px}
.tool-result .big{font-size:1.4rem;font-weight:800;color:var(--navy-dark);line-height:1.5}
.tool-result .sub{font-size:.88rem;color:var(--ink-soft);line-height:1.7}
.result-tag{display:inline-block;padding:5px 12px;border-radius:999px;font-size:.8rem;font-weight:700;background:var(--blue-light);color:var(--navy-dark);margin-bottom:10px}

/* ===========================================================================
   상담 CTA — 클릭률이 이 사이트의 핵심 지표(대표 지시 ②)
   광고 배너로 읽히지 않도록 배경 도배는 하지 않되, 버튼 자체는 크고 분명하게.
   =========================================================================== */
.cta-box{
  background:#fff;
  border:1px solid #cfdae4;
  border-left:5px solid var(--navy);
  border-radius:var(--radius);
  padding:20px 22px;
  margin:30px 0;
  box-shadow:0 2px 12px rgba(11,61,102,.07);
}
.cta-box .cta-lead{margin:0 0 8px}
.cta-box .cta-lead strong{color:var(--navy-dark);font-size:1.12rem;line-height:1.55;letter-spacing:-0.015em}
.cta-box .cta-body{margin:0 0 16px;color:var(--ink-soft);font-size:.97rem;line-height:1.8}
.cta-action{margin:0 0 10px}

/* 풀폭 대형 버튼 — 데스크톱에서도 100%로 둔다.
   "눈에 띄게"가 목표이고, 좁은 본문 폭(760px)에서는 풀폭이 과하지 않다. */
.cta-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:60px;
  padding:14px 22px;
  background:linear-gradient(180deg,#12578f 0%,var(--navy) 100%);
  color:#fff;
  text-decoration:none;
  border-radius:10px;
  font-weight:800;
  font-size:1.14rem;
  letter-spacing:-0.01em;
  box-shadow:0 3px 0 #06203a;
  transition:transform .12s ease,box-shadow .12s ease,background-color .15s ease;
}
.cta-btn:hover{background:linear-gradient(180deg,#1a6aad 0%,#0d4776 100%)}
.cta-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #06203a}
.cta-btn:focus{outline:3px solid #ffb703;outline-offset:2px}
.cta-btn-arrow{font-size:1.2em;line-height:1}

/* 광고책임변호사 표기 — 변호사 광고 규정상 필수. 11px 밑으로 내리지 않는다. */
.cta-meta{margin:0 0 10px;font-size:.82rem;color:var(--ink-soft);font-weight:600;line-height:1.6}
.cta-disclosure{margin:0 0 10px;font-size:.8rem;color:var(--ink-soft);line-height:1.6}
.cta-sub{margin:0;font-size:.8rem;color:#7b8794;line-height:1.6;text-align:center}

/* 머천트 비활성 시(공공기관 안내 자동 대체) */
.cta-box.cta-public{border-left-color:var(--blue);background:var(--blue-light);box-shadow:none}
.cta-box.cta-public .cta-links{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:9px}
.cta-box.cta-public .cta-links a{
  display:flex;align-items:center;
  min-height:52px;
  padding:12px 14px;
  background:#fff;
  border:1px solid #cfe0ef;
  border-radius:8px;
  color:var(--navy-dark);
  font-weight:700;
  text-decoration:none;
  line-height:1.5;
}
.cta-box.cta-public .cta-links a:hover{background:var(--bg-soft)}

/* ---------- 모바일 하단 고정 상담바 ----------
   스크롤 내내 따라다니는 상담 버튼. 본문을 가리지 않도록
   높이를 제한하고 body 하단에 같은 크기의 패딩을 준다.
   데스크톱에서는 본문 옆 여백이 충분해 굳이 필요 없으므로 숨긴다. */
.sticky-cta{display:none}

@media(max-width:768px){
  /* 상단 헤더 —
     ① 고정(sticky) 해제: 스크롤하면 함께 올라간다
     ② 메뉴 링크 목록을 접는다: 9개 링크가 3줄을 차지해 첫 화면의 절반을 먹고 있었다.
        제목과 핵심 답변이 스크롤 없이 보이는 것이 우선이다.
     ③ 대신 헤더 오른쪽에 [전체 메뉴] 버튼을 둔다 — 위에서도 아래에서도 메뉴에 닿는다 */
  .site-header{position:static}
  h2[id],h3[id]{scroll-margin-top:12px}

  .header-inner{flex-wrap:nowrap;align-items:center;justify-content:space-between;padding:11px 14px}
  .site-nav{display:none}
  .header-menu-btn{
    display:inline-flex;align-items:center;gap:7px;
    flex:0 0 auto;
    min-height:38px;
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:8px;
    color:#fff;
    font-size:.84rem;font-weight:700;
    cursor:pointer;
    background:rgba(255,255,255,.08);
  }
  .header-menu-btn:active{background:rgba(255,255,255,.2)}
  .hm-ico{
    display:block;width:15px;height:2px;background:currentColor;border-radius:2px;position:relative;
  }
  .hm-ico::before,.hm-ico::after{
    content:"";position:absolute;left:0;width:15px;height:2px;background:currentColor;border-radius:2px;
  }
  .hm-ico::before{top:-5px}
  .hm-ico::after{top:5px}

  body{padding-bottom:var(--sticky-h)}
  .sticky-cta{
    display:flex;
    align-items:center;
    gap:8px;
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:60;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px));
    background:rgba(255,255,255,.97);
    border-top:1px solid var(--line);
    box-shadow:0 -2px 14px rgba(0,0,0,.10);
    backdrop-filter:saturate(150%) blur(6px);
  }

  /* [메뉴] — 좁게 두고 상담 버튼이 대부분의 폭을 갖게 한다 */
  .sticky-menu-btn{
    flex:0 0 auto;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-width:56px;min-height:52px;
    padding:6px 8px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#fff;
    color:var(--navy-dark);
    font-size:.7rem;font-weight:700;
    cursor:pointer;
  }
  .sticky-menu-btn:active{background:var(--bg-soft)}
  .sticky-menu-ico{
    display:block;width:18px;height:2px;background:currentColor;border-radius:2px;
    position:relative;
  }
  .sticky-menu-ico::before,.sticky-menu-ico::after{
    content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;
  }
  .sticky-menu-ico::before{top:-6px}
  .sticky-menu-ico::after{top:6px}

  .sticky-cta-btn{
    flex:1 1 auto;
    display:flex;align-items:center;justify-content:center;gap:8px;
    min-height:52px;
    padding:0 10px;
    background:linear-gradient(180deg,#12578f 0%,var(--navy) 100%);
    color:#fff;text-decoration:none;
    border-radius:10px;
    font-weight:800;font-size:1.06rem;
    box-shadow:0 2px 0 #06203a;
    text-align:center;
  }
  /* 상업 CTA가 없는 페이지에서는 공적 창구 번호를 건다 — 톤을 낮춘다 */
  .sticky-cta-btn.sticky-cta-alt{
    background:#fff;
    color:var(--navy-dark);
    border:1px solid var(--navy);
    box-shadow:0 2px 0 #cfdae4;
    font-size:.94rem;
  }
  .sticky-cta-btn:active{transform:translateY(1px);box-shadow:0 1px 0 #06203a}
  .sticky-cta-arrow{font-size:1.15em;line-height:1}
}

@media(prefers-reduced-motion:reduce){
  .cta-btn,.sticky-cta-btn{transition:none}
  .cta-btn:active,.sticky-cta-btn:active{transform:none}
}

/* ---------- 푸터 ---------- */
.site-footer{background:var(--navy-dark);color:#d8e3ee;margin-top:var(--gap-section);padding:28px 16px 44px}
.footer-links ul{max-width:1080px;margin:0 auto 16px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px}
.footer-links a{color:#fff;text-decoration:underline;font-size:.86rem}
.footer-meta{max-width:1080px;margin:0 auto 10px;font-size:.79rem;color:#a9bdd0;line-height:1.75}
.footer-meta a{color:#cfe0f0}
.footer-meta.legal{color:#f0d9d5}

/* ===========================================================================
   모바일
   =========================================================================== */
@media(max-width:600px){
  :root{--gap-section:38px}
  body{font-size:17px}
  .page-inner{padding:16px 15px 40px}
  h1{font-size:1.44rem;line-height:1.42}
  h2{font-size:1.18rem;padding-top:14px}
  h3{font-size:1.04rem}
  .answer-box{padding:15px 16px}
  .answer-box p{font-size:1rem}
  .cta-box{padding:17px 16px;margin:26px 0}
  .cta-box .cta-lead strong{font-size:1.06rem}
  .cta-btn{min-height:56px;font-size:1.08rem}
  .checkme-title,.checkme-hint{padding-left:16px;padding-right:16px}
  .checkme-item{padding-left:48px;padding-right:16px}
  .checkme-item::before{left:16px}
  .checkme-item::after{left:22px}
  .checkme-title{font-size:1.05rem}
  .pbox-easy,.pbox-ex{padding-left:15px;padding-right:15px}
  .btn-official{flex:1 1 100%}

  /* 표 카드형 전환 —
     좁은 화면에서 가로 스크롤은 오른쪽 열을 통째로 놓치게 만든다.
     각 행을 카드로 세우고, 각 칸 위에 그 칸이 무슨 항목인지(헤더)를 붙인다.
     헤더 문자열은 build.mjs 가 td의 data-label 속성으로 심어둔 것을 꺼내 쓴다.

     ⚠️ caption 은 반드시 display:block 으로 바꿔야 한다.
        table 을 display:block 으로 만든 상태에서 caption 이 table-caption 으로 남아 있으면
        브라우저가 익명 표 상자를 만들어 캡션이 좁은 칸에 갇힌다(대표 제보 화면이 이 증상이었다). */
  .table-wrap{border:none;border-radius:0;overflow:visible}
  .page-body table,
  .page-body caption,
  .page-body thead,
  .page-body tbody,
  .page-body tr,
  .page-body th,
  .page-body td{display:block;width:auto}

  .page-body table caption{
    border:1px solid var(--line);
    border-radius:8px;
    margin-bottom:10px;
    padding:11px 13px;
    background:var(--bg-soft);
    font-size:.92rem;
  }
  /* 헤더 행은 화면에서 감춘다 — 각 칸이 data-label 로 항목명을 다시 갖기 때문이다.
     display:none 대신 clip 방식을 써서 스크린리더에는 남긴다. */
  .page-body thead{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .page-body tbody tr{
    border:1px solid var(--line);
    border-radius:8px;
    margin-bottom:12px;
    background:#fff;
    overflow:hidden;
  }
  .page-body tbody td{
    border-bottom:1px solid #eef3f7;
    padding:10px 13px 12px;
    line-height:1.7;
  }
  .page-body tbody tr td:last-child{border-bottom:none}
  /* 항목명 라벨 */
  .page-body tbody td[data-label]:not([data-label=""])::before{
    content:attr(data-label);
    display:block;
    font-size:.72rem;
    font-weight:700;
    letter-spacing:.02em;
    color:var(--blue);
    margin-bottom:3px;
  }
  /* 각 행의 첫 칸은 그 카드의 제목처럼 —
     제목 자리에는 항목명 라벨을 붙이지 않는다("항목 / 채무 한도"는 같은 말의 반복이다) */
  .page-body tbody td:first-child{
    background:var(--bg-soft);
    font-weight:700;
    color:var(--navy-dark);
    font-size:1.02rem;
  }
  .page-body tbody td:first-child::before{display:none}
}

@media(max-width:400px){
  h1{font-size:1.34rem}
  .cta-btn{font-size:1.02rem;padding:14px 14px}
  .sticky-cta-btn{font-size:1rem}
}