/* theduck content kit (tdk-) — AI 발행 본문(renderer v2) 스타일. theduck-tools가 v2 본문이 있는 글에서만 불러온다.
   모바일 우선, JS 없음, 외부 폰트·@import·url() 없음(시스템 폰트). 모든 규칙은 .tdk-article 안에서만 적용(테마와 충돌 최소화).
   근거: KRDS 본문 17px·행간 150% 이상, WCAG 1.4.8(CJK 한 줄 40자 이하), NN/g(요약 박스를 광고처럼 꾸미지 않기).
   설계: docs/phase4a3/theduck_content_design_system.md, 원본 프로토타입: prototypes/phase4a3/theduck-content.css */

.tdk-article {
  --tdk-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --tdk-text: #1d2433;
  --tdk-muted: #4a5568;
  --tdk-line: #d7dce3;
  --tdk-surface: #f6f8fa;
  --tdk-accent: #1f5fae;      /* 링크·강조(대비 ≥ 4.5:1) */
  --tdk-warn-bg: #fff6e5;
  --tdk-warn-line: #b86e00;
  --tdk-info-bg: #eef5ff;
  --tdk-unknown-bg: #f3f1f8;
  --tdk-radius: 10px;
  --tdk-space: 1.5rem;
  max-width: 40em;            /* 한글 한 줄 ≈ 36~40자 */
  margin-inline: auto;
  color: var(--tdk-text);
  font-family: var(--tdk-font);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tdk-article p, .tdk-article ul, .tdk-article ol { margin: 0 0 1.25em; }
.tdk-article h2 { font-size: 1.3125rem; line-height: 1.45; margin: 2.5rem 0 .75rem; padding-top: .25rem; scroll-margin-top: 16px; }
.tdk-article h3 { font-size: 1.125rem; line-height: 1.5; margin: 1.75rem 0 .5rem; }
.tdk-article a { color: var(--tdk-accent); text-underline-offset: 2px; }
.tdk-article strong { font-weight: 700; }

/* 머리: 기준·출처 한 줄 → 핵심 답변 → 한눈에 보기(모바일 첫 화면에 답이 보이게) */
.tdk-meta { font-size: .8125rem; line-height: 1.5; color: var(--tdk-muted); margin: 0 0 1rem !important; }
.tdk-answer { padding: .875rem 1rem; border-left: 4px solid var(--tdk-accent); background: var(--tdk-surface); border-radius: 0 var(--tdk-radius) var(--tdk-radius) 0; }
.tdk-answer__label { display: block; font-size: .8125rem; color: var(--tdk-accent); margin-bottom: .125rem; }
.tdk-lead { color: var(--tdk-muted); }

.tdk-summary { border: 1px solid var(--tdk-line); border-radius: var(--tdk-radius); padding: .75rem 1rem; margin: 0 0 var(--tdk-space); }
.tdk-article .tdk-summary__title { font-size: 1rem; margin: 0 0 .5rem; padding: 0; }
.tdk-summary__list { margin: 0; }
.tdk-summary__row { display: grid; grid-template-columns: 5.5em 1fr; gap: .5rem; padding: .375rem 0; border-top: 1px solid var(--tdk-surface); font-size: .9375rem; line-height: 1.6; }
.tdk-summary__row:first-child { border-top: 0; }
.tdk-summary__row dt { font-weight: 700; color: var(--tdk-muted); }
.tdk-summary__row dd { margin: 0; }

/* 목차: 본문 안, sticky 아님 */
.tdk-toc { margin: 0 0 var(--tdk-space); padding: .75rem 1rem; background: var(--tdk-surface); border-radius: var(--tdk-radius); font-size: .9375rem; }
.tdk-toc__title { font-weight: 700; margin: 0 0 .25rem !important; }
.tdk-toc ol { margin: 0 !important; padding-left: 1.25em; }
.tdk-toc li { padding: .125rem 0; }

/* 핵심 숫자 */
.tdk-keynums { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.tdk-keynum { border: 1px solid var(--tdk-line); border-radius: var(--tdk-radius); padding: .625rem .75rem; display: grid; gap: .125rem; }
.tdk-keynum__value { font-size: 1.25rem; font-weight: 800; line-height: 1.3; font-variant-numeric: tabular-nums; }
.tdk-keynum__label { font-size: .875rem; font-weight: 700; line-height: 1.4; }
.tdk-keynum__note { font-size: .8125rem; color: var(--tdk-muted); line-height: 1.4; }

/* 체크리스트(정적 표시 — 입력 요소 아님) */
.tdk-checklist { border: 1px solid var(--tdk-line); border-radius: var(--tdk-radius); padding: .75rem 1rem; margin: 0 0 var(--tdk-space); }
.tdk-checklist__title { font-weight: 700; margin: 0 0 .375rem !important; }
.tdk-checklist ul { list-style: none; padding: 0; margin: 0 !important; }
.tdk-checklist__item { position: relative; padding: .25rem 0 .25rem 1.75em; }
.tdk-checklist__item::before { content: "✓"; position: absolute; left: .25em; font-weight: 800; color: var(--tdk-accent); }

/* 가능/불가 비교 */
.tdk-compare { display: grid; gap: .75rem; margin: 0 0 var(--tdk-space); }
.tdk-compare__col { border: 1px solid var(--tdk-line); border-radius: var(--tdk-radius); padding: .75rem 1rem; }
.tdk-compare__col ul { margin: 0 !important; padding-left: 1.25em; }
.tdk-compare__title { font-weight: 700; margin: 0 0 .25rem !important; }
.tdk-compare__col--yes { border-color: var(--tdk-accent); }
.tdk-compare__col--no { background: var(--tdk-surface); }

/* 표: 좁은 화면에서는 표만 가로 스크롤(페이지 가로 스크롤 금지) */
.tdk-table { overflow-x: auto; margin: 0 0 var(--tdk-space); border: 1px solid var(--tdk-line); border-radius: var(--tdk-radius); }
.tdk-table table { border-collapse: collapse; width: 100%; min-width: 18rem; margin: 0; font-size: .9375rem; line-height: 1.55; }
.tdk-table caption { text-align: left; font-weight: 700; padding: .625rem .75rem 0; }
.tdk-table th, .tdk-table td { padding: .5rem .75rem; border: 0; border-top: 1px solid var(--tdk-line); text-align: left; vertical-align: top; }
.tdk-table thead th { background: var(--tdk-surface); font-size: .8125rem; color: var(--tdk-muted); }
.tdk-table tbody th { min-width: 6em; }
.tdk-table:focus-visible { outline: 2px solid var(--tdk-accent); outline-offset: 2px; }

/* 절차 */
.tdk-steps { list-style: none; counter-reset: tdk-step; padding: 0; }
.tdk-steps__item { counter-increment: tdk-step; position: relative; padding: 0 0 .75rem 2.5rem; border-left: 2px solid var(--tdk-line); margin-left: .875rem; }
.tdk-steps__item:last-child { border-left-color: transparent; }
.tdk-steps__item::before { content: counter(tdk-step); position: absolute; left: -.9rem; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--tdk-accent); color: #fff; font-weight: 700; font-size: .875rem; line-height: 1.75rem; text-align: center; }
.tdk-steps__item p, .tdk-steps__item ul { margin: 0 0 .25rem !important; }
.tdk-steps__item ul { padding-left: 1.25em; }
.tdk-steps__title { font-weight: 700; }

/* 안내 박스: 색 + 텍스트 라벨(색만으로 의미 전달 금지). 광고처럼 보이지 않게 채도 낮게 */
.tdk-callout { border-radius: var(--tdk-radius); padding: .75rem 1rem; margin: 0 0 var(--tdk-space); border: 1px solid var(--tdk-line); }
.tdk-callout p, .tdk-callout ul { margin: 0 !important; }
.tdk-callout ul { padding-left: 1.25em; }
.tdk-callout__label { font-weight: 700; margin-bottom: .25rem !important; }
.tdk-callout--warning { background: var(--tdk-warn-bg); border-color: var(--tdk-warn-line); }
.tdk-callout--info { background: var(--tdk-info-bg); }
.tdk-callout--unknown { background: var(--tdk-unknown-bg); border-style: dashed; }

/* FAQ: 독립 질문이라 접기 허용. 요약 줄은 44px 이상 터치 영역 */
.tdk-faq { border-top: 1px solid var(--tdk-line); margin: 0 0 var(--tdk-space); }
.tdk-faq__item { border-bottom: 1px solid var(--tdk-line); }
.tdk-faq__item summary { cursor: pointer; font-weight: 700; padding: .75rem 0; min-height: 44px; box-sizing: border-box; }
.tdk-faq__item p, .tdk-faq__item ul { margin: 0 0 .75rem !important; }

/* 정보 이미지(있을 때만 — 장식 이미지 없음) */
.tdk-figure { margin: 0 0 var(--tdk-space); }
.tdk-figure img { display: block; max-width: 100%; height: auto; border-radius: var(--tdk-radius); }
.tdk-figure figcaption { font-size: .8125rem; color: var(--tdk-muted); margin-top: .375rem; }
.tdk-figure--diagram img { width: 100%; max-width: 520px; margin-inline: auto; } /* 글자 있는 도식(720px 원본): 데스크톱에서 글자가 과하게 커지지 않게 */

.tdk-sources { margin: var(--tdk-space) 0; padding: 1rem; border: 1px solid var(--tdk-line); border-radius: var(--tdk-radius); font-size: .9375rem; }
.tdk-article .tdk-sources h2, .tdk-article .tdk-related h2 { font-size: 1.0625rem; margin: 0 0 .5rem; padding: 0; }
.tdk-sources ul { padding-left: 1.25em; }
.tdk-sources__subtitle { font-weight: 700; margin: .75rem 0 .25rem !important; }
.tdk-sources__history { color: var(--tdk-muted); }

.tdk-related { margin: var(--tdk-space) 0; }
.tdk-related ul { padding-left: 1.25em; }

@media (min-width: 40em) {
  .tdk-article { font-size: 1.125rem; } /* 18px */
  .tdk-article h2 { font-size: 1.5rem; }
  .tdk-keynums { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tdk-compare { grid-template-columns: 1fr 1fr; }
}

@media print {
  .tdk-toc { display: none; }
  .tdk-faq__item p { display: block; }
}
