/* ============================================================
 * 호미클럽 — 동의보감 위키
 * ============================================================ */

/* ── 인덱스 히어로 ── */
.dg-hero { padding: var(--space-8) 0 var(--space-6); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-6); }
.dg-kicker { font-family: var(--font-heading); font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--tracking-wide); color: var(--accent-700); text-transform: uppercase; margin: 0 0 var(--space-3); }
.dg-h1 { font-family: var(--font-title); font-size: var(--fs-hero); line-height: var(--lh-heading); letter-spacing: var(--tracking-title); font-weight: 700; margin: 0 0 var(--space-4); }
.dg-lead { font-family: var(--font-body); font-size: var(--fs-read); line-height: var(--lh-loose); color: var(--ink-700); max-width: 60ch; margin: 0 0 var(--space-6); }
.dg-search input { width: 100%; max-width: 480px; height: 48px; padding: 0 var(--space-5); border: 1px solid var(--ink-300); border-radius: var(--radius-pill); background: var(--surface); font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink-900); }
.dg-search input:focus { outline: none; border-color: var(--accent); }

/* ── 부별 표제어 타일 ── */
.dg-tiles { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.dg-tile { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4) var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
.dg-tile:hover { border-color: var(--accent); background: var(--ink-50); }
.dg-tile__hanja { font-family: var(--font-heading); font-size: var(--fs-title); font-weight: 700; color: var(--ink-900); }
.dg-tile__ko { font-family: var(--font-heading); font-size: var(--fs-meta); color: var(--ink-500); }
.dg-disclaimer { margin-top: var(--space-8); font-size: var(--fs-caption); color: var(--ink-400); line-height: var(--lh-body); }

/* ── 상세 ── */
.dg-detail { padding-top: var(--space-1); max-width: 760px; }
.dg-head { padding-bottom: var(--space-6); border-bottom: 1px solid var(--hairline); margin-bottom: var(--space-6); }
.dg-head__pyeon { font-family: var(--font-heading); font-size: var(--fs-meta); color: var(--ink-500); margin: 0 0 var(--space-3); }
.dg-head__term { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-4); margin: 0; }
.dg-hanja { font-family: var(--font-title); font-size: var(--fs-display); font-weight: 700; line-height: 1.1; color: var(--ink-900); }
.dg-ko { font-family: var(--font-heading); font-size: var(--fs-h2); color: var(--ink-700); font-weight: 600; }
.dg-read { color: var(--ink-400); font-weight: 400; }

.dg-cropchip { display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-4); padding: 6px 14px 6px 6px; border: 1px solid var(--hairline); border-radius: var(--radius-pill); font-family: var(--font-heading); font-size: var(--fs-meta); color: var(--ink-700); }
.dg-cropchip:hover { border-color: var(--accent); color: var(--ink-900); }
.dg-cropchip .thumb { width: 26px; height: 26px; border-radius: 50%; overflow: hidden; flex: none; background: var(--ink-100); }
.dg-cropchip .thumb img { width: 100%; height: 100%; object-fit: cover; }

.dg-sec + .dg-sec { margin-top: var(--space-8); }
.dg-sec h2 { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 700; letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); padding-bottom: var(--space-2); border-bottom: 1px solid var(--ink-300); display: flex; align-items: baseline; gap: var(--space-3); }
.dg-sec h2 .dg-src { font-size: var(--fs-caption); font-weight: 500; color: var(--ink-400); letter-spacing: normal; }

/* 한문 원문(폴백) — 옅은 배경 + 사방 hairline (좌측 막대 ❌) */
.dg-hanmun { font-family: "Noto Serif KR", var(--font-body); font-size: var(--fs-read); line-height: 2; color: var(--ink-900); background: var(--ink-50); border: 1px solid var(--hairline); border-radius: var(--radius-md); padding: var(--space-5) var(--space-6); letter-spacing: .02em; }
.dg-pending { margin: var(--space-4) 0 0; font-size: var(--fs-caption); color: var(--ink-400); }
.dg-gloss { font-family: var(--font-body); font-size: var(--fs-read); line-height: var(--lh-loose); color: var(--ink-900); }

/* ── 행별 주해 (한자 / 음 / 합쇼체 해설) — 구절 간 hairline 구분, 좌측 막대 ❌ ── */
.dg-lines { list-style: none; margin: 0; padding: 0; }
.dg-line { padding: var(--space-6) 0; border-top: 1px solid var(--hairline); }
.dg-line:first-child { border-top: 0; padding-top: var(--space-2); }
.dg-line__h { font-family: "Noto Serif KR", serif; font-size: var(--fs-title); line-height: 1.85; color: var(--ink-900); margin: 0; letter-spacing: .03em; }
.dg-line__e { font-family: var(--font-heading); font-size: var(--fs-meta); color: var(--ink-400); margin: var(--space-2) 0 0; letter-spacing: .04em; }
.dg-line__g { font-family: var(--font-body); font-size: var(--fs-read); line-height: var(--lh-loose); color: var(--ink-700); margin: var(--space-3) 0 0; }

/* 연결 작물 카드 (상호참조) */
.dg-related .dg-relcard { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--t-fast) var(--ease); }
.dg-related .dg-relcard:hover { border-color: var(--accent); }
.dg-relcard__img { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; background: var(--ink-100); }
.dg-relcard__img img { width: 100%; height: 100%; object-fit: cover; }
.dg-relcard__name { font-family: var(--font-heading); font-size: var(--fs-title); font-weight: 600; color: var(--ink-900); }
.dg-relcard__go { color: var(--accent-700); }

@media (max-width: 767px) {
  .dg-detail .crop-crumb { display: none; }
  .dg-hanja { font-size: var(--fs-hero); }
  .dg-tiles { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* 풀이 마크다운 렌더(문단·불릿·굵게) */
.dg-gloss p { margin: 0 0 var(--space-4); }
.dg-gloss p:last-child { margin-bottom: 0; }
.dg-gloss ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.dg-gloss li { margin-bottom: var(--space-2); line-height: var(--lh-body); }
.dg-gloss strong { font-weight: 700; color: var(--ink-900); }
.dg-gloss em { font-style: italic; }

/* 편집자 주 — 옅은 배경 + 사방 hairline (좌측 막대 ❌) */
.dg-note { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); background: var(--ink-50); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.dg-note__label { display: block; font-family: var(--font-heading); font-size: var(--fs-caption); font-weight: 700; color: var(--ink-500); letter-spacing: .04em; text-transform: uppercase; margin-bottom: var(--space-2); }
.dg-note p { margin: 0; font-family: var(--font-body); font-size: var(--fs-meta); line-height: var(--lh-loose); color: var(--ink-700); }