/* ============================================================
 * 호미클럽 — 글 상세 (칼럼) · 소개 공용 읽기 레이아웃
 * 가독성 중심 단일 컬럼 (최대 760px) + 관련 글
 * ============================================================ */

.post { padding-bottom: var(--space-16); }
.post-wrap { max-width: 760px; margin-inline: auto; padding-inline: var(--space-4); }

/* ── 글 상세 2단 (본문 + 우측 목차·관련작물·세로광고) ── */
.art-layout {
  max-width: 1140px; margin-inline: auto; padding: var(--space-8) var(--space-6) 0;
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  column-gap: var(--space-10); row-gap: var(--space-8); align-items: start;
}
.art-main { min-width: 0; }
.art-aside { position: sticky; top: calc(var(--header-h) + var(--space-4)); display: grid; gap: var(--space-8); }

/* 부제목 (고딕) — 제목 아래 */
.post-subtitle {
  font-family: var(--font-heading); font-size: var(--fs-title);
  color: var(--ink-700); line-height: var(--lh-snug); margin: 0 0 var(--space-4);
}

/* ── 사이드바 섹션 (목차 · 관련 작물) — 에디터와 동일 ── */
.side-sec__head { font-family: var(--font-heading); font-size: var(--fs-meta); font-weight: 700; color: var(--ink-900); margin: 0 0 var(--space-4); }
.side-list { display: grid; gap: var(--space-2); }

/* 목차 항목 (점 + 텍스트, 스크롤 강조) */
.toc-item { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--fs-meta); color: var(--ink-700); padding: var(--space-1) 0; }
.toc-item .mk { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-900); flex: none; }
.toc-item:hover, .toc-item.is-active { color: var(--ink-900); }
.toc-item.is-active { font-weight: 700; }

/* 관련 작물 항목 (커버 + 이름, 가로 행) */
.crop-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.crop-link .thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--ink-200), var(--ink-100)); flex: none; }
.crop-link .nm { font-family: var(--font-heading); font-size: var(--fs-meta); color: var(--ink-900); }
.crop-link:hover { background: var(--ink-50); }

/* ── 머리 ── */
.post-head { padding-top: var(--space-10); }
.art-main .post-head { padding-top: 0; margin-bottom: var(--space-6); }   /* 아티클: 커버가 위에 있어 상단 패딩 제거 */
.post-kicker {
  font-family: var(--font-heading); font-size: var(--fs-caption); font-weight: 600;
  letter-spacing: var(--tracking-wide); color: var(--ink-500); margin: 0 0 var(--space-3);
}
.post-head .cat-pin { margin-bottom: var(--space-3); }
.post-title {
  font-family: var(--font-title);
  font-size: var(--fs-display); line-height: var(--lh-heading);
  letter-spacing: var(--tracking-title); font-weight: 700;
  margin: 0 0 var(--space-4);
}
.post-lead {
  font-family: var(--font-body); font-size: var(--fs-title);
  color: var(--ink-700); line-height: var(--lh-body); margin: 0 0 var(--space-6);
}
.post-byline {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: var(--font-heading); font-size: var(--fs-meta); color: var(--ink-500);
  padding-bottom: var(--space-6); border-bottom: 1px solid var(--hairline);
}
.post-byline .dot-sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-300); }

/* ── 커버 (본문 상단, 메인 폭) ── */
.post-cover { margin: 0 0 var(--space-6); }
.post-cover .ph {
  display: grid; place-items: center; aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--ink-200), var(--ink-100));
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  color: var(--ink-500); font-family: var(--font-heading); font-size: var(--fs-caption);
}

/* ── 본문 ── */
.post-body { font-family: var(--font-body); font-size: var(--fs-read); line-height: var(--lh-loose); color: var(--ink-900); overflow-wrap: anywhere; }
/* 신뢰 HTML 본문의 넓은 표는 가로 스크롤 (폰 오버플로 방지) */
.post-body table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-body > * + * { margin-top: var(--space-5); }
.post-body p { margin: 0; }
.post-body strong { font-weight: 700; }
.post-body h2 {
  font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700;
  letter-spacing: var(--tracking-tight); margin-top: var(--space-10);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));   /* 목차 점프 오프셋 */
}
.post-body blockquote {
  margin: var(--space-8) 0; padding: var(--space-1) 0 var(--space-1) var(--space-6);
  border-left: 3px solid var(--ink-900);
  font-family: var(--font-title); font-size: var(--fs-title); color: var(--ink-700); line-height: var(--lh-body);
}
.post-body ul, .post-body ol { margin: 0; padding-left: var(--space-6); }
.post-body li + li { margin-top: var(--space-2); }
.post-body hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--space-8) 0; }

/* 본문 중간 광고 */
.post-inline-ad { margin: var(--space-10) 0; }

/* 태그 */
.post-tags {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--hairline);
}

/* ── 관련 글 ── */
.related { max-width: 1140px; margin: var(--space-16) auto 0; padding-inline: var(--space-6); }
.related-head {
  font-family: var(--font-heading); font-size: var(--fs-meta); font-weight: 600;
  letter-spacing: var(--tracking-wide); color: var(--ink-700);
  margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--hairline);
}
.related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }

/* 커버 이미지 */
.post-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-lg); display: block; }

/* 글에 나온 작물 칩 (도감 연동) */
.tag--crop { font-family: var(--font-tag); }
.tag--muted { color: var(--ink-500); background: var(--ink-50); cursor: default; }
.crop-link .go { margin-left: auto; color: var(--ink-300); font-size: var(--fs-h3); line-height: 1; }
.crop-link:hover .go { color: var(--ink-700); }
.crop-link--muted { opacity: .65; }
.crop-link--muted .thumb { filter: grayscale(1); }

/* ════════ 읽기 도구 (브레드크럼 · 진행바 · 하단바 · 목차시트) ════════ */

/* 상단 진행 띠 — 헤더 바로 아래 얇은 라인 */
.read-progress {
  position: sticky; top: var(--header-h); z-index: 60;
  height: 2px; background: transparent;
}
.read-progress__fill { display: block; height: 100%; width: 0; background: var(--ink-900); transition: width .1s linear; }

/* 브레드크럼 — 헤더 아래 스티키 */
.art-crumb {
  position: sticky; top: calc(var(--header-h) + 2px); z-index: 55;
  background: rgba(248,248,246,.94); backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.art-crumb__inner { display: flex; align-items: center; gap: var(--space-2); height: 40px; font-family: var(--font-heading); font-size: var(--fs-meta); white-space: nowrap; overflow: hidden; }
.art-crumb a { color: var(--ink-500); display: inline-flex; align-items: center; flex: none; }
.art-crumb a .cat-pin { font-size: var(--fs-meta); }
.art-crumb a:hover { color: var(--ink-900); }
.art-crumb .sep { color: var(--ink-300); flex: none; }
.art-crumb .current { color: var(--ink-900); font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.art-crumb__edit {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-heading); font-size: var(--fs-caption); font-weight: 600; color: var(--ink-900);
  border: 1px solid var(--ink-300); border-radius: var(--radius-pill); padding: 5px var(--space-3); background: var(--surface);
}
.art-crumb__edit svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.art-crumb__edit:active { background: var(--ink-100); }
.art-layout { padding-top: var(--space-6); }   /* 크럼이 위로 와서 상단 패딩 축소 */

/* 하단 읽기 바 (모바일 전용) */
.read-bar { display: none; }
.read-bar__prog { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.read-bar__track { height: 4px; border-radius: var(--radius-pill); background: var(--ink-200); overflow: hidden; }
.read-bar__fill { display: block; height: 100%; width: 0; background: var(--ink-900); transition: width .1s linear; }
.read-bar__pct { font-family: var(--font-heading); font-size: var(--fs-caption); color: var(--ink-500); }
.read-bar__btn {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 52px; min-height: 44px; justify-content: center;
  border: 0; background: transparent; color: var(--ink-700);
  font-family: var(--font-heading); font-size: var(--fs-caption); cursor: pointer;
}
.read-bar__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.read-bar__btn:active { color: var(--ink-900); }
.read-bar__btn--audio.is-on { color: var(--dot-health); }

/* 목차 바텀시트 */
.toc-sheet { position: fixed; inset: 0; z-index: 1100; }
.toc-sheet[hidden] { display: none; }
.toc-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .24s var(--ease); }
.toc-sheet.is-open .toc-sheet__backdrop { opacity: 1; }
.toc-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 70vh;
  background: var(--surface); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--space-3) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform .26s var(--ease);
  display: flex; flex-direction: column; overflow: hidden;
}
.toc-sheet.is-open .toc-sheet__panel { transform: translateY(0); }
.toc-sheet__handle { width: 36px; height: 4px; border-radius: var(--radius-pill); background: var(--ink-200); margin: 0 auto var(--space-3); flex: none; }
.toc-sheet__head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-heading); font-weight: 700; margin-bottom: var(--space-2); }
.toc-sheet__close { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink-500); cursor: pointer; }
.toc-sheet__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.toc-sheet__list { list-style: none; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; }
.toc-sheet__link { display: block; padding: var(--space-3) var(--space-2); font-family: var(--font-heading); font-size: var(--fs-body); color: var(--ink-700); border-bottom: 1px solid var(--ink-100); }
.toc-sheet__link:active { color: var(--ink-900); }

/* ── 반응형 ── */
@media (max-width: 1023px) {
  .art-layout { grid-template-columns: minmax(0, 1fr); }
  .art-aside { position: static; min-width: 0; }
  .side-sec--toc { display: none; }   /* 목차는 데스크톱 전용 (모바일은 하단바 시트) */
  .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* 하단 읽기 바 노출 */
  .read-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
    display: flex; align-items: center; gap: var(--space-4);
    background: var(--surface); border-top: 1px solid var(--hairline);
    padding: var(--space-2) var(--space-4);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  }
  .reading .site-footer { margin-bottom: 64px; }   /* 하단바에 가리지 않게 */
}
@media (max-width: 767px) {
  .post-title { font-size: var(--fs-hero); }
  .art-layout { padding-inline: var(--space-4); }   /* .post-wrap(16px)와 좌우 패딩 통일 */
  .related { padding-inline: var(--space-4); }
  /* 관련 글 = 가로형 1열 (좌 이미지 · 우 제목) */
  .related-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .related .post-card { flex-direction: row; align-items: stretch; }
  .related .post-card .card-media { width: 116px; flex: none; aspect-ratio: 4 / 3; }
  .related .post-card .card-body { padding: var(--space-3) var(--space-4); justify-content: center; gap: var(--space-1); }
  .related .post-card .card-title { font-size: var(--fs-body); -webkit-line-clamp: 2; min-height: 0; }
  .related .post-card .card-excerpt { display: none; }   /* 가로형은 제목 위주 */
  .related .post-card .post-meta { margin-top: 0; padding-top: var(--space-1); }
}
@media (max-width: 479px) {
  .related-grid { grid-template-columns: 1fr; }
}