/* 세무노트 공통 스타일 : Intax Carbon Light 토큰(DESIGN.md) · 홈페이지 하위 페이지 적용은 2026-10-20 회계사님 지정 */
:root{
  --primary:#0f62fe; --primary-strong:#0043ce; --tint:#edf5ff; --on-dark:#78a9ff;
  --ink:#161616; --muted:#525252; --subtle:#8c8c8c;
  --canvas:#ffffff; --s1:#f4f4f4; --line:#e0e0e0; --line-strong:#161616;
  --inv:#161616; --inv-bar:#393939; --inv-muted:#c6c6c6;
  --risk:#da1e28; --th:#1F3864;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,system-ui,-apple-system,"Malgun Gothic",sans-serif;
  font-size:17px;line-height:1.75;word-break:keep-all}
/* keep-all 은 body 에 한 번 : 한글은 기본값(normal)이면 글자 사이 아무 데서나 끊긴다 (2026-10-21 「3개/월」 지적) */
.nw{white-space:nowrap}
a{color:var(--primary-strong)}
.wrap{max-width:760px;margin:0 auto;padding:0 20px}

/* 미리보기 표시 : 루트 notes/ 에만 붙고 배포본에는 없다 */
.preview{background:var(--s1);border-left:3px solid var(--risk);padding:10px 20px;font-size:15px;color:var(--ink)}

/* 사이트 머리 */
.site{border-bottom:1px solid var(--line)}
.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:56px}
.brand{color:var(--ink);text-decoration:none;font-weight:600;letter-spacing:-0.02em}
.brand span{color:var(--muted);font-weight:400;margin-left:8px}
.site-cta{font-size:15px;color:#fff;background:var(--primary);text-decoration:none;padding:8px 14px}

/* 글 머리 : 라벨 → 제목 → 조문 배지 → 1px 차콜 선 */
.crumb{font-size:15px;color:var(--muted);margin:24px 0 18px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.label{font-size:16.5px;color:var(--muted);margin:0 0 8px}
h1{font-size:44px;font-weight:300;line-height:1.2;letter-spacing:-0.03em;margin:0 0 16px;word-break:keep-all}
.badge{display:inline-block;background:var(--s1);border-left:3px solid var(--primary);padding:6px 14px;font-size:15px;color:var(--ink)}
.meta{font-size:15.5px;color:var(--muted);margin:14px 0 0;text-align:left}
.head-rule{border:0;border-top:1px solid var(--line-strong);margin:20px 0 28px}

/* 목적 히어로 : 화면에서 차콜로 뒤집는 유일한 칸 */
.hero{background:var(--inv);color:#fff;padding:28px 28px 26px;display:grid;grid-template-columns:1fr 1.06fr;gap:28px;align-items:center}
.hero p{margin:0;font-size:19px;line-height:1.6;text-align:left;word-break:keep-all}
.hero strong{color:var(--on-dark);font-weight:600}
.span-cap{font-size:15px;color:var(--inv-muted);margin:0 0 10px}
.span-row{margin:0 0 12px}
.span-row:last-child{margin:0}
.span-top{display:flex;justify-content:space-between;gap:8px;font-size:15px;color:var(--inv-muted)}
.span-top b{color:var(--on-dark);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;flex-shrink:0}
.span-track{height:10px;background:var(--inv-bar);display:flex;justify-content:flex-end;margin-top:4px}
.span-fill{background:var(--primary);height:100%}
.span-end{display:flex;justify-content:flex-end;font-size:15px;color:var(--inv-muted);margin-top:6px}

/* 본문 */
p{text-align:justify;word-break:keep-all}
/* 목록·좁은 상자는 양쪽정렬하면 낱말 사이가 벌어져 왼쪽 정렬로 둔다 */
li{text-align:left;word-break:keep-all}
.ask{margin:32px 0 0;font-size:18px;color:var(--muted);text-align:left;word-break:keep-all}
.ask + p{margin-top:10px}
.toc{list-style:none;padding:0;margin:24px 0 8px;border-top:1px solid var(--line)}
.toc li{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}
.mk{flex:0 0 36px;width:36px;height:36px;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--primary-strong);text-decoration:underline}
h2{font-size:26px;font-weight:400;line-height:1.35;letter-spacing:-0.02em;margin:56px 0 14px;word-break:keep-all;scroll-margin-top:16px}
h2 .no{color:var(--primary);font-weight:600;margin-right:10px;font-variant-numeric:tabular-nums}
h3{font-size:19px;font-weight:600;margin:28px 0 8px;letter-spacing:-0.01em}

/* 조문 원문 상자 */
.law{background:var(--s1);border:1px solid var(--line);padding:16px 20px;margin:18px 0}
.law-h{font-size:15px;color:var(--muted);margin:0 0 6px;text-align:left}
.law-h a{color:var(--muted)}
.law ol{margin:0;padding-left:1.4em;font-size:16.5px;line-height:1.7}
.law p{margin:0;font-size:16.5px;line-height:1.7;text-align:left}
/* 조문 인용은 양쪽정렬하지 않는다 : 긴 법률 용어 때문에 낱말 사이가 1.5배까지 벌어진다(2026-10-21 실측) */

/* 표 : 네이비 머리행 · 강조색 반투명 구분선 · 균등 열 폭 (docs/표-스타일-가이드.md) */
/* 표는 감싸개(.tbl-wrap) 안에 둔다 : 폰에서 칸보다 긴 덩어리(금액 · 문서번호)가 있으면 단어를 자르지 않고 표만 옆으로 민다 (2026-10-21) */
.tbl-wrap{margin:18px 0;overflow-x:auto}
.tbl{border-collapse:collapse;width:100%;table-layout:fixed;margin:0;font-size:15.5px;line-height:1.55}
.tbl th{background:var(--th);color:#fff;font-weight:700;text-align:center;vertical-align:middle;padding:10px 10px;border-right:1px solid rgba(255,255,255,.22)}
.tbl td{text-align:center;vertical-align:middle;padding:10px 10px;border-bottom:1px solid var(--line);border-right:1px solid rgba(15,98,254,.22)}
/* 띄어쓰기 없는 조문 번호(제94조제1항제3호가목)는 빌드가 조·항·호 뒤에 <wbr> 을 넣어 그 경계에서만 끊긴다 */
.tbl th:last-child,.tbl td:last-child{border-right:0}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr.total td{font-weight:700;background:var(--tint)}
.tbl-cap{font-size:15px;color:var(--muted);margin:-8px 0 18px;text-align:left}

/* 결과·강조 상자 */
.hl{background:var(--tint);border:2px solid var(--primary);color:var(--primary-strong);padding:16px 20px;margin:18px 0;font-size:18px;line-height:1.6;text-align:left;word-break:keep-all}
.hl b{font-weight:600}
.flow-list{margin:12px 0;padding-left:1.3em}
.flow-list li{margin:4px 0}

/* 확인할 것 */
.check{list-style:none;padding:0;margin:18px 0;border-top:1px solid var(--line)}
.check li{display:flex;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.check li.risk .mk{background:var(--risk)}
.check li.risk b{color:var(--risk);font-weight:600}

/* 자주 묻는 질문 */
.faq h3{margin-top:24px}
.faq p{margin:0}

/* 작성자 카드 */
.author{display:grid;grid-template-columns:96px 1fr;gap:20px;background:var(--s1);padding:20px;margin:56px 0 0;align-items:start}
.author img{width:96px;height:120px;object-fit:cover;display:block}
.author .nm{font-size:19px;font-weight:600;margin:0}
.author .org{font-size:15.5px;color:var(--muted);margin:0 0 8px;text-align:left}
.author p.bio{margin:0;font-size:16px;line-height:1.7;text-align:left}
.author .links{margin:10px 0 0;font-size:15.5px;text-align:left}
.author .links a{margin-right:14px}

/* 상담 */
.cta{border:1px solid var(--line);border-top:3px solid var(--primary);padding:22px 20px;margin:24px 0 0}
.cta h2{margin:0 0 6px;font-size:22px}
.cta p{margin:0 0 16px}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-block;padding:12px 18px;font-size:16px;text-decoration:none;border:1px solid var(--primary)}
.btn.pri{background:var(--primary);color:#fff}
.btn.sec{background:#fff;color:var(--primary-strong)}

/* 서명 블록 : output/eli5/ .isig 원형 (QR 8px 모서리는 DESIGN.md 예외) · 최소 글자 14px로 맞춤 */
.isig{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;margin-left:auto;width:max-content;max-width:100%;font-size:15px;line-height:1.5;color:#1F3864;text-align:right;}
.isig strong{display:block;font-size:17px;font-weight:800;}
.isig .isig-l{text-align:right;}
.isig a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(31,56,100,.5);}
.isig a[href^="tel:"]{white-space:nowrap}
.isig a:hover{color:#d42020;border-bottom-color:#d42020;}
.isig em{display:block;margin-top:4px;font-style:normal;font-size:14px;color:#8b93a5;}
.isig .isig-qr{display:block;width:120px;height:120px;padding:6px;background:#fff;border:1px solid #dfe3ec;border-radius:8px;}
.isig .isig-qr svg{width:100%;height:100%;display:block;}

/* 근거 법령 : 본문 조문 상자 머리를 빌드가 모아 글 끝에 둔다 (2026-10-21) */
.refs{margin:48px 0 0;border-top:1px solid var(--line-strong);padding-top:18px}
.refs h2{font-size:20px;margin:0 0 10px}
.refs ul{margin:0;padding-left:1.2em;font-size:15.5px;line-height:1.7}
.refs li{margin:2px 0}

/* 목록 페이지 : 분야 탭 + 카드 3열 (2026-10-21 코덱스 의견 · 회계사님 승인) · 글 화면(760px)보다 넓게 쓴다 */
.wrap-wide{max-width:1160px}
.lead{font-size:18px;color:var(--muted);text-align:left;max-width:760px}
.st{font-size:14.5px;color:var(--risk);margin-left:8px;font-weight:400}
/* 대표글 : 화면에서 차콜로 뒤집는 칸 · 오른쪽은 함께 읽기 2편 */
.feat{display:grid;grid-template-columns:1.6fr 1fr;margin:28px 0 36px;border:1px solid var(--line)}
.feat-main{display:block;background:var(--inv);color:#fff;padding:32px 32px 28px;text-decoration:none}
.feat-main .cat{color:var(--on-dark);margin:0 0 10px;font-size:15px;font-weight:600}
.feat-main h2{margin:0 0 14px;font-size:30px;font-weight:300;line-height:1.3;letter-spacing:-0.02em;color:#fff;word-break:keep-all}
.feat-main .d{color:var(--inv-muted);margin:0 0 16px;font-size:17px;line-height:1.6;text-align:left;word-break:keep-all}
.feat-main .by{color:var(--inv-muted);font-size:14.5px;margin:0}
.feat-main:hover h2{color:var(--on-dark)}
.feat-side{padding:20px 24px 16px;background:var(--canvas)}
.feat-cap{font-size:14.5px;color:var(--muted);margin:0 0 6px}
.feat-side a{display:block;color:var(--ink);text-decoration:none;font-size:17px;line-height:1.45;padding:12px 0;border-top:1px solid var(--line);word-break:keep-all}
.feat-side a:hover{color:var(--primary-strong)}
/* 분야 탭 */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.tab{font:inherit;font-size:15px;line-height:1.3;padding:8px 14px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.tab span{color:var(--subtle);margin-left:6px;font-variant-numeric:tabular-nums}
.tab:hover{border-color:var(--primary)}
.tab.on{background:var(--primary);border-color:var(--primary);color:#fff}
.tab.on span{color:#fff}
/* 카드 : 표지는 이미지 없이 글자로 (분야 → 질문형 제목) · 아래 한 줄 결론 · 작성자와 법령 기준일 */
.cards{list-style:none;padding:0;margin:0 0 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:var(--ink);border:1px solid var(--line)}
.card a:hover{border-color:var(--primary)}
.card a:hover h3{color:var(--primary-strong)}
.cover{background:var(--s1);border-left:3px solid var(--primary);padding:22px 20px 20px;min-height:168px;display:flex;flex-direction:column}
.cover .cat{margin:0 0 10px;font-size:14.5px;color:var(--primary-strong);font-weight:600;text-align:left}
.cover h3{margin:auto 0 0;font-size:21px;font-weight:600;line-height:1.35;letter-spacing:-0.02em;word-break:keep-all}
.card .d{margin:0;padding:16px 20px 0;font-size:15.5px;color:var(--muted);line-height:1.6;text-align:left;word-break:keep-all;flex:1}
.card .by{margin:0;padding:14px 20px 18px;font-size:14px;color:var(--subtle)}

/* 하단 띠 */
.foot{background:var(--s1);margin-top:56px;padding:22px 0 28px;font-size:15px;color:var(--muted);line-height:1.65}
.foot p{margin:0 0 6px;text-align:left}
.foot a{color:var(--muted)}

@media (max-width:720px){
  body{font-size:16.5px}
  .wrap{padding:0 16px}
  h1{font-size:30px}
  .hero{grid-template-columns:1fr;padding:22px 18px;gap:22px}
  .hero p{font-size:18px}
  h2{font-size:23px;margin-top:48px}
  .tbl{font-size:15px}
  .tbl th,.tbl td{padding:8px 6px}
  .tbl{table-layout:auto}   /* 내용대로 칸 폭을 잡고, 그래도 모자라면 .tbl-wrap 이 가로 스크롤 */
  .author{grid-template-columns:72px 1fr;gap:14px;padding:16px}
  .author img{width:72px;height:90px}
  .cta-row{justify-content:flex-start}
  .cta p{text-align:left}
  .isig{margin-left:0}
  .isig .isig-qr{width:96px;height:96px}
  /* 폰에서는 양쪽정렬이 keep-all 과 만나 낱말 사이가 글자 폭의 2~5배까지 벌어진다(2026-10-21 실측) → 왼쪽정렬 */
  p{text-align:left}
  .feat{grid-template-columns:1fr;margin:22px 0 28px}
  .feat-main{padding:24px 20px 22px}
  .feat-main h2{font-size:24px}
  .cards{grid-template-columns:1fr;gap:14px}
  .cover{min-height:0;padding:18px 18px 16px}
  .cover h3{font-size:20px}
}
@media (min-width:721px) and (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .feat{grid-template-columns:1.3fr 1fr}
}