/* ═══════════════════════════════════════════════════════════════
   가이드 글 공통 스타일 (guide/*.html)
   brand.css 의 .doc(문서) 위에 글에 필요한 것만 더한다.
   노랑은 "먼저 답부터" 상자와 계산기로 이어지는 상자에만 쓴다.
   ═══════════════════════════════════════════════════════════════ */

.post .kicker{display:inline-block;font-size:12px;font-weight:800;color:var(--ink-3);background:#F0ECE3;
  padding:5px 10px;border-radius:999px;margin:0 0 12px}
.post h1{font-size:25px}
.post .meta{margin-bottom:18px}
.post h2{font-size:19px}
.post .toc{margin:0 0 4px}

/* ── 먼저 답부터 ── 글 맨 위. 이것만 읽고 나가도 답이 되게 */
.answer{background:var(--yel);border-radius:var(--r-lg);padding:17px 18px 15px;margin:0 0 20px}
.answer .at{display:block;font-size:12.5px;font-weight:800;color:#5C4700;margin:0 0 6px}
.answer p{font-size:15.5px;font-weight:700;line-height:1.7;color:var(--ink);margin:0 0 6px}
.answer p:last-child{margin:0}
.answer ul{margin:4px 0 0;padding-left:18px}
.answer li{font-size:14.5px;font-weight:600;line-height:1.7;color:var(--ink);margin-bottom:3px}

/* ── 표 ── 칸이 많으면 표 상자 안에서만 옆으로 밀린다 (화면 전체가 밀리지 않게) */
.tbl-wrap{overflow-x:auto;background:var(--card);border-radius:var(--r-md);padding:2px 14px;margin:0 0 14px;
  -webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse}
.tbl caption{caption-side:top;text-align:left;font-size:12.5px;font-weight:800;color:var(--ink-3);padding:13px 0 4px}
.tbl th,.tbl td{padding:11px 6px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top;
  font-size:13.5px;line-height:1.55;font-weight:500;color:var(--ink-2);word-break:keep-all}
.tbl thead th{font-size:12.5px;font-weight:800;color:var(--ink-3);border-bottom:2px solid var(--ink);white-space:nowrap}
/* 한글이 글자 단위로 쪼개져 세로로 늘어서지 않게: 단어 단위로 줄바꿈(keep-all), 줄 제목 칸은 최소 폭.
   그래도 칸이 모자라면 표 상자 안에서 옆으로 밀린다. */
.tbl tbody th{font-weight:800;color:var(--ink);min-width:5em}
.tbl td.n,.tbl th.n{text-align:right;white-space:nowrap}
.tbl td.n{font-weight:700}
.tbl td.n.w{white-space:normal;min-width:7em}   /* 숫자 칸이지만 설명 글이 긴 칸 */
.tbl tr:last-child th,.tbl tr:last-child td{border-bottom:0}
.tbl .hl{background:var(--yel-wash)}
.tbl .hl td{font-weight:800;color:var(--ink)}

/* ── 예시 계산 ── */
.ex{background:var(--card);border-radius:var(--r-md);padding:15px 18px;margin:0 0 14px;border-left:5px solid var(--yel)}
.ex .et{font-size:12.5px;font-weight:800;color:var(--ink-3);margin:0 0 6px}
.ex p{margin:0 0 6px}
.ex p:last-child{margin:0}
.ex .big{font-size:16px;font-weight:800;color:var(--ink)}

/* ── 주의 ── */
.warn{background:var(--red-soft);border-radius:var(--r-md);padding:14px 16px;margin:0 0 14px}
.warn p,.warn li{color:#7E2D2D}
.warn p:last-child{margin:0}
.warn b{font-weight:800}

/* ── 법령·판결 원문 인용 ── 원문 그대로 옮길 때만 쓴다 */
.quote{margin:0 0 14px;padding:14px 16px;background:#F3EFE6;border-radius:var(--r-md);
  font-size:13.5px;line-height:1.75;font-weight:500;color:var(--ink-2)}
.quote p{font-size:13.5px;margin:0 0 6px}
.quote cite{display:block;margin-top:6px;font-style:normal;font-size:12px;font-weight:800;color:var(--ink-4)}

/* ── 계산기로 이어지는 상자 ── */
.cta{display:flex;gap:14px;align-items:center;background:var(--yel);border-radius:var(--r-lg);padding:16px 18px;margin:24px 0}
.cta img{width:54px;height:auto;flex:0 0 auto;display:block}
.cta .ct{font-size:15px;font-weight:800;letter-spacing:-0.03em;line-height:1.5;margin:0 0 4px;color:var(--ink)}
.cta .cd{font-size:12.5px;font-weight:600;color:#5C4700;line-height:1.6;margin:0}
.cta a{display:inline-block;margin-top:8px;font-size:13.5px;font-weight:800;border-bottom:2px solid var(--ink)}

/* ── 자주 묻는 질문 ── (계산기 페이지와 같은 모양) */
.faq details{background:var(--card);border-radius:var(--r-md);margin-bottom:9px;padding:0 18px}
.faq summary{list-style:none;cursor:pointer;padding:16px 26px 16px 0;position:relative;
  font-size:14.5px;font-weight:800;line-height:1.55;letter-spacing:-0.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'';position:absolute;right:3px;top:22px;width:8px;height:8px;
  border-right:2.4px solid var(--ink-4);border-bottom:2.4px solid var(--ink-4);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg);top:26px}
.faq details p{margin:0;padding:0 0 17px;font-size:14px;color:var(--ink-3)}

/* ── 근거 ── */
.refs{display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-md);padding:4px 18px;margin:0 0 12px}
.refs > div{padding:13px 0;border-bottom:1px solid var(--line-2);font-size:13.5px;line-height:1.6;color:var(--ink-3);font-weight:500}
.refs > div:last-child{border-bottom:0}
.refs b{display:block;color:var(--ink);font-weight:800;font-size:14px;margin-bottom:2px}
.refs a{font-weight:700;color:var(--ink-2);border-bottom:1.5px solid var(--ink-5)}

/* ── 글 끝 안내 ── */
.post .note{font-size:12.5px;line-height:1.75;font-weight:500;color:var(--ink-4);margin:18px 0 0}

/* 광고 자리. 애드센스 코드를 넣기 전에는 비어 있어서 보이지 않는다.
   "광고 영역" 같은 빈 상자가 보이면 애드센스 심사에서 미완성 사이트로 보인다. */
.ad{margin:32px 0;min-height:100px}
.ad:empty{display:none}

/* ── PC ── 글 폭은 brand.css 의 .doc 가 760px 로 잡는다. 여기서는 글자만 조금 키운다 */
@media (min-width:960px){
  .post h1{font-size:34px;line-height:1.35}
  .post h2{font-size:22px}
  .post .kicker{font-size:13px;padding:6px 12px;margin:0 0 16px}
  .answer{padding:22px 26px 20px;margin:0 0 28px}
  .answer .at{font-size:13.5px}
  .answer p{font-size:17px}
  .answer li{font-size:16px}
  .tbl-wrap{padding:4px 20px}
  .tbl th,.tbl td{font-size:14.5px;padding:12px 8px}
  .tbl thead th,.tbl caption{font-size:13.5px}
  .ex{padding:18px 22px}
  .ex .big{font-size:17px}
  .quote,.quote p{font-size:15px}
  .cta{padding:20px 24px;gap:18px}
  .cta img{width:62px}
  .cta .ct{font-size:17px}
  .cta .cd{font-size:14px}
  .cta a{font-size:14.5px}
  .cta a:hover{border-bottom-width:3px}
  .faq summary{font-size:16px;padding:18px 28px 18px 0}
  .faq summary::after{top:24px}
  .faq details[open] summary::after{top:28px}
  .faq details p{font-size:15.5px}
  .refs > div{font-size:14.5px}
  .refs b{font-size:15px}
  .post .note{font-size:13.5px}
}