.kd-post__layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: var(--kd-s6); align-items: start; }
.kd-post .kd-panel ul { list-style: none; }
.kd-post .kd-panel + .kd-panel { margin-top: var(--kd-s5); }

.kd-crumb { margin-bottom: var(--kd-s3); color: var(--kd-soft); font-size: var(--kd-fs-xs); }
.kd-crumb a { color: inherit; text-decoration: none; }
.kd-crumb a:hover { color: var(--kd-blue); text-decoration: underline; }

.kd-article__head h1 { margin: var(--kd-s2) 0 var(--kd-s3); font-size: var(--kd-fs-2xl); line-height: 1.3; font-weight: 700; color: var(--kd-ink); text-wrap: balance; }
.kd-article__meta { display: flex; flex-wrap: wrap; gap: var(--kd-s2); margin: 0; padding-bottom: var(--kd-s3); border-bottom: 1px solid var(--kd-line); color: var(--kd-soft); font-size: var(--kd-fs-sm); }

.kd-langs { display: flex; flex-wrap: wrap; gap: var(--kd-s2); margin: var(--kd-s3) 0 0 !important; list-style: none; }
.kd-langs a { display: inline-block; padding: 3px 12px; border: 1px solid var(--kd-line); border-radius: 999px; background: var(--kd-card); color: var(--kd-ink); font-size: var(--kd-fs-xs); text-decoration: none; }
.kd-langs a:hover { border-color: var(--kd-blue); color: var(--kd-blue); }
.kd-langs a.is-current { background: var(--kd-blue); border-color: var(--kd-blue); color: #fff; }

.kd-toc-mobile { display: none; margin-top: var(--kd-s4); border: 1px solid var(--kd-line); border-radius: var(--kd-r); background: var(--kd-card); }
.kd-toc-mobile summary { padding: var(--kd-s3) var(--kd-s4); font-size: var(--kd-fs-sm); font-weight: 700; cursor: pointer; }
.kd-toc-mobile ol { padding: 0 var(--kd-s4) var(--kd-s3) var(--kd-s6); font-size: var(--kd-fs-sm); }
.kd-toc-mobile li { padding: 4px 0; }

.kd-toc li > a:hover span { text-decoration: underline; }

/* 본문: 일반 HTML 요소에 스타일을 입힌다 (어떤 에디터/CMS에서 써도 같은 모양). */
.kd-article__body { margin-top: var(--kd-s5); font-size: var(--kd-fs-md); line-height: 1.8; color: var(--kd-ink); overflow-wrap: anywhere; }
/* 읽기 폭(68자)은 글자 덩어리에만 준다. 지도·표·직접 만든 블록(본문에 통째로 넣은 HTML)은 칸 전체를 쓴다 — 전엔 칸 밖으로 넘쳤다. */
.kd-article__body > :is(p, ul, ol, h2, h3, h4, h5, blockquote, .kd-box, .kd-toc-inline) { max-width: 68ch; }
.kd-article__body :is(iframe, video, embed) { max-width: 100%; }
.kd-article__body > :first-child { margin-top: 0; }
.kd-article__body p { margin: 0 0 var(--kd-s4); }
.kd-article__body h2 { margin: var(--kd-s6) 0 var(--kd-s3); padding-bottom: var(--kd-s2); border-bottom: 2px solid var(--kd-ink); font-size: 22px; line-height: 1.3; font-weight: 700; scroll-margin-top: 80px; }
.kd-article__body h3 { margin: var(--kd-s6) 0 var(--kd-s3); padding-bottom: var(--kd-s2); border-bottom: 1px solid var(--kd-line); font-size: var(--kd-fs-lg); line-height: 1.35; font-weight: 700; color: var(--kd-ink); scroll-margin-top: 80px; }
.kd-article__body a { color: var(--kd-blue); text-decoration: underline; text-underline-offset: 2px; }
.kd-article__body ul, .kd-article__body ol { margin: 0 0 var(--kd-s4); padding-left: var(--kd-s5); }
.kd-article__body li { margin-bottom: var(--kd-s1); }
.kd-article__body img { max-width: 100%; height: auto; border-radius: var(--kd-r-sm); }
.kd-article__body blockquote { margin: 0 0 var(--kd-s4); padding: var(--kd-s2) var(--kd-s4); border-left: 3px solid var(--kd-line); color: var(--kd-soft); }
.kd-article__body blockquote p:last-child { margin-bottom: 0; }
.kd-article__body table { display: block; width: 100%; margin: 0 0 var(--kd-s4); overflow-x: auto; border-collapse: collapse; font-size: var(--kd-fs-sm); line-height: 1.6; }
.kd-article__body th, .kd-article__body td { padding: var(--kd-s2) var(--kd-s3); border: 1px solid var(--kd-line); text-align: left; vertical-align: top; }
.kd-article__body th { background: var(--kd-tint); font-weight: 700; }

/* 박스 (WRITING.md: > **[SUMMARY]**, [NOTE], [WARN]) */
.kd-box { margin: 0 0 var(--kd-s4); padding: var(--kd-s3) var(--kd-s4); border: 1px solid var(--kd-line); border-radius: var(--kd-r); background: var(--kd-card); font-size: var(--kd-fs-md); line-height: 1.7; }
.kd-box__label { margin-bottom: var(--kd-s1); font-size: var(--kd-fs-sm); font-weight: 700; }
.kd-box__body > :last-child { margin-bottom: 0; }
.kd-box--summary { border-color: transparent; background: var(--kd-tint); }
.kd-box--summary .kd-box__label { color: var(--kd-blue); }
.kd-box--note { border-color: var(--kd-line); }
.kd-box--warn { border-color: #E4B64A; background: #FFF8E1; }
.kd-box--warn .kd-box__label { color: #8A5A00; }

/* 체크리스트 (WRITING.md: - [ ] 항목) */
.kd-article__body li.kd-check__item { display: flex; gap: var(--kd-s3); align-items: flex-start; list-style: none; margin-left: calc(var(--kd-s5) * -1); padding: var(--kd-s2) 0; border-bottom: 1px solid var(--kd-line); }
.kd-check__mark { flex: none; width: 18px; height: 18px; margin-top: 6px; border: 2px solid var(--kd-blue); border-radius: var(--kd-r-sm); }
.kd-check__item.is-done .kd-check__mark { background: var(--kd-blue); box-shadow: inset 0 0 0 3px #fff; }

/* 다운로드 카드 (파일 링크만 있는 문단은 자동) */
.kd-article__body a.kd-dl { display: flex; align-items: center; gap: var(--kd-s3); margin: 0 0 var(--kd-s4); padding: var(--kd-s3) var(--kd-s4); border: 1px solid var(--kd-line); border-radius: var(--kd-r); background: var(--kd-card); color: var(--kd-ink); text-decoration: none; font-size: var(--kd-fs-sm); }
.kd-dl:hover { border-color: var(--kd-blue); }
.kd-dl__name { flex: 1; min-width: 0; font-weight: 500; }
.kd-dl__ext { padding: 2px 8px; border-radius: var(--kd-r-sm); background: var(--kd-tint); color: var(--kd-blue); font-size: var(--kd-fs-xs); font-weight: 700; }
.kd-dl__btn { padding: 8px 16px; border-radius: var(--kd-r); background: var(--kd-blue); color: #fff; font-weight: 700; font-size: var(--kd-fs-sm); white-space: nowrap; }

/* 글 끝: 함께 필요한 물건 */
.kd-need { margin-top: var(--kd-s6); padding: var(--kd-s4); border: 1px solid var(--kd-line); border-radius: var(--kd-r); background: var(--kd-card); }
.kd-need h2 { margin: 0 0 var(--kd-s3); font-size: var(--kd-fs-md); font-weight: 700; color: var(--kd-ink); }
.kd-need ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--kd-s3); list-style: none; }
.kd-need a { display: grid; gap: var(--kd-s1); color: inherit; text-decoration: none; font-size: var(--kd-fs-sm); }
.kd-need__img { aspect-ratio: 1 / 1; background: var(--kd-tint); border-radius: var(--kd-r-sm); overflow: hidden; }
.kd-need__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kd-need__name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.kd-need b { color: var(--kd-sale); }

.kd-side { position: sticky; top: var(--kd-s5); }

@media (max-width: 900px) {
  .kd-post__layout { grid-template-columns: minmax(0, 1fr); }
  .kd-side { position: static; }
  .kd-toc { display: none; }
  .kd-toc-mobile { display: block; }
}
@media (max-width: 640px) {
  .kd-post { padding: var(--kd-s4) var(--kd-s3) var(--kd-s5); }
  .kd-article__head h1 { font-size: var(--kd-fs-xl); }
  .kd-article__body h2 { font-size: var(--kd-fs-lg); }
  .kd-need ul { grid-template-columns: 1fr 1fr; }
}