/* ──────────────────────────────────────────────
   HOMI CLUB — globals/crop.css
   작물 도감 칼럼 페이지 (정적 SEO 페이지) 전용 스타일
   ────────────────────────────────────────────── */

.crop-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--ink-50);
  border-bottom: 1px solid var(--hairline);
  position: sticky;
  top: 0;
  z-index: 10;
}
.crop-crumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
}
.crop-crumb a {
  color: var(--sprout-700);
  font-weight: 600;
}
.crop-crumb-sep { color: var(--ink-300); }
.crop-crumb-current {
  color: var(--ink-500);
  font-weight: 500;
}

.crop-page,
.crop-index {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) calc(56px + var(--space-6));
}

.crop-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  color: var(--ink-900);
  margin: 0 0 var(--space-2);
}
.crop-hook {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--sprout-700);
  margin: 0 0 var(--space-3);
}
.crop-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-5);
}
.crop-tag {
  font-family: var(--font-heading);
  font-size: var(--fs-tiny);
  color: var(--ink-500);
}

.crop-section { margin-bottom: var(--space-6); }
.crop-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--ink-900);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--sprout-300);
}

.crop-comps, .crop-stages {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.crop-comp {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  background: var(--ink-50);
  border-radius: var(--radius-md);
}
.crop-comp-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-small);
  color: var(--soil-700);
}
.crop-comp-value {
  font-family: var(--font-heading);
  font-size: var(--fs-tiny);
  color: var(--ink-500);
}
.crop-comp-effect {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  color: var(--ink-900);
}

.crop-stage {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--ink-50);
  border-radius: var(--radius-md);
}
.crop-stage-type {
  font-family: var(--font-heading);
  font-size: var(--fs-tiny);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.crop-stage-type[data-type="씨앗"] { background: var(--sprout-50);  color: var(--sprout-700); }
.crop-stage-type[data-type="모종"] { background: var(--diary-100);  color: var(--diary-700); }
.crop-stage-type[data-type="수확"] { background: var(--market-100); color: var(--market-700); }
.crop-stage-name {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--ink-900);
}
.crop-stage-when {
  margin-left: auto;
  font-family: var(--font-heading);
  font-size: var(--fs-tiny);
  color: var(--ink-500);
}

.crop-column {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-900);
  letter-spacing: var(--tracking-relax);
  word-break: keep-all;
}
.crop-source {
  font-family: var(--font-heading);
  font-size: var(--fs-tiny);
  color: var(--ink-500);
  margin-top: var(--space-3);
}

/* 도감 인덱스 */
.crop-index-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}
.crop-index-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) var(--space-4);
  background: var(--ink-50);
  border-radius: var(--radius-md);
}
.crop-index-name {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--ink-900);
}
.crop-index-hook {
  font-family: var(--font-heading);
  font-size: var(--fs-tiny);
  color: var(--sprout-700);
}

/* 파종~수확 미니 캘린더 (12개월, 무채 명도 구분) */
.crop-cal { margin-bottom: var(--space-4); }
.crop-cal-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}
.crop-cal-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 11px;
  color: var(--ink-300);
  border: 1px solid var(--hairline);
  border-radius: 3px;
}
.crop-cal-cell.is-sow { background: var(--ink-100); color: var(--ink-700); }
.crop-cal-cell.is-harvest { background: var(--ink-300); color: var(--ink-900); font-weight: 700; }
.crop-cal-cell.is-sow.is-harvest {
  background: linear-gradient(135deg, var(--ink-100) 50%, var(--ink-300) 50%);
  color: var(--ink-900);
}
.crop-cal-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  color: var(--ink-500);
}
.crop-cal-lg { display: inline-flex; align-items: center; gap: 4px; }
.crop-cal-lg::before {
  content: "";
  width: 10px; height: 10px;
  border-radius: 2px;
  border: 1px solid var(--hairline);
}
.crop-cal-lg-sow::before { background: var(--ink-100); }
.crop-cal-lg-harvest::before { background: var(--ink-300); }

/* 품종 (varieties) */
.crop-varieties { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.crop-variety {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) var(--space-3);
  background: var(--ink-50);
  border-radius: var(--radius-md);
}
.crop-variety-name { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-small); color: var(--ink-900); white-space: nowrap; }
.crop-variety-type { font-family: var(--font-heading); font-size: var(--fs-tiny); padding: 1px 7px; border-radius: var(--radius-pill); background: var(--ink-100); color: var(--ink-700); white-space: nowrap; }
.crop-variety-note { font-family: var(--font-heading); font-size: var(--fs-tiny); color: var(--ink-500); }

/* ──────────────────────────────────────────────
 * 광고/제휴 슬롯 (1차 수익화 — 콘텐츠 페이지 = 광고 슬롯)
 * 쿠팡파트너스·아이허브·구글광고 ID 발급 후 placeholder 자리 교체
 * ────────────────────────────────────────────── */
.crop-ad-slot { margin-top: var(--space-5); }
.crop-ad-note {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-tiny);
  color: var(--ink-500);
  background: var(--ink-100);
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  margin-left: var(--space-2);
  font-weight: 500;
  vertical-align: middle;
}
.crop-ad-placeholder {
  margin-top: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px dashed var(--ink-300);
  border-radius: var(--radius-md);
  color: var(--ink-500);
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  text-align: center;
}

/* 추천 요리 슬롯 — 친근본 콘텐츠 통합 */
.crop-recipe-slot { margin-top: var(--space-5); }
.crop-recipe-list {
  list-style: disc inside;
  padding: 0;
  margin: 0 0 var(--space-3);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
}
.crop-recipe-list li { margin-bottom: var(--space-1); line-height: 1.6; }
.crop-recipe-note {
  font-family: var(--font-heading);
  font-size: var(--fs-small);
  color: var(--ink-500);
}

/* 동서양 견해 — 학술본 핵심 합의 한 단락 */
.crop-eastwest {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  background: var(--ink-50);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-700);
  line-height: 1.75;
}
.crop-eastwest-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-tiny);
  font-weight: 700;
  color: var(--ink-900);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-right: var(--space-2);
  letter-spacing: .02em;
}
.crop-eastwest strong { color: var(--ink-900); font-weight: 700; }

/* ──────────────────────────────────────────────
   학술 단락 — 동의보감·본초강목 한문 원문 + 도입사 + PubMed 메타분석
   디자인: 무채색 + 아이보리, hairline 보더, 그림자 없음
   ────────────────────────────────────────────── */
.crop-scholar {
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  background: var(--ink-50);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.crop-scholar .crop-h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  color: var(--ink-900);
}

/* ── 한문 원문 (classical) ── */
.crop-classical {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.crop-classical-source {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  color: var(--ink-500);
  letter-spacing: .02em;
  margin-bottom: var(--space-2);
}
.crop-classical-title {
  font-family: var(--font-body);
  font-size: var(--fs-title);
  color: var(--ink-900);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.crop-classical-body {
  margin: 0 0 var(--space-2);
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  line-height: 1.85;
  letter-spacing: .02em;
}
.crop-classical-attr {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  color: var(--ink-500);
}

/* ── B군 도입사 (intro) ── */
.crop-intro {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  line-height: 1.75;
}

/* ── PubMed 메타분석 리스트 ── */
.crop-meta-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.crop-meta-item {
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.crop-meta-title {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink-900);
  line-height: 1.45;
  margin-bottom: var(--space-1);
}
.crop-meta-cite {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  color: var(--ink-700);
  margin-bottom: var(--space-1);
}
.crop-meta-id {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--ink-500);
}
.crop-meta-id a {
  color: var(--ink-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.crop-meta-id a:hover { color: var(--ink-900); }

/* ── 학술 노트 (각 섹션 푸터) ── */
.crop-scholar-note {
  margin: var(--space-3) 0 0;
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  color: var(--ink-500);
  line-height: 1.65;
}
.crop-scholar-note a {
  color: var(--ink-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.crop-scholar-note a:hover { color: var(--ink-900); }

/* ──────────────────────────────────────────────
   전체 자료 펼쳐 보기 — 학술본·친근본·영문본 md 동적 렌더
   ────────────────────────────────────────────── */
.crop-mdview {
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  background: var(--ink-50);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.crop-mdview .crop-h2 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  color: var(--ink-900);
}
.crop-mdview-note {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  color: var(--ink-500);
  line-height: 1.65;
}

.crop-mdview-pane {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.crop-mdview-pane:last-child { margin-bottom: 0; }
.crop-mdview-pane > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  user-select: none;
}
.crop-mdview-pane > summary::-webkit-details-marker { display: none; }
.crop-mdview-pane > summary::after {
  content: "펼치기 ▾";
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  color: var(--ink-500);
  margin-top: 4px;
  letter-spacing: .02em;
}
.crop-mdview-pane[open] > summary::after {
  content: "접기 ▴";
}
.crop-mdview-label {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: .04em;
}
.crop-mdview-summary {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-700);
  line-height: 1.55;
}

/* ── 렌더된 md 콘텐츠 스타일 ── */
.crop-md-content {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--hairline);
  background: var(--bg-page);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  line-height: 1.75;
}
.crop-md-content.md-loading::before {
  content: "불러오는 중...";
  display: block;
  color: var(--ink-500);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
}
.crop-md-content .md-h {
  font-family: var(--font-heading);
  color: var(--ink-900);
  margin: var(--space-4) 0 var(--space-2);
  line-height: 1.35;
}
.crop-md-content .md-h1 { font-size: var(--fs-heading); margin-top: 0; }
.crop-md-content .md-h2 {
  font-size: var(--fs-title);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--hairline);
}
.crop-md-content .md-h3 { font-size: var(--fs-body); font-weight: 700; }
.crop-md-content .md-h4 { font-size: var(--fs-body); font-weight: 600; color: var(--ink-700); }
.crop-md-content .md-p {
  margin: var(--space-2) 0;
}
.crop-md-content .md-list {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
}
.crop-md-content .md-list li {
  margin: 4px 0;
}
.crop-md-content .md-bq {
  margin: var(--space-3) 0;
  padding: var(--space-2) var(--space-3);
  background: var(--ink-50);
  /* axis bar 금지 */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--ink-700);
  font-style: normal;
}
.crop-md-content .md-bq p { margin: 4px 0; }
.crop-md-content .md-hr {
  border: none;
  border-top: 1px solid var(--hairline);
  margin: var(--space-4) 0;
}
.crop-md-content .md-table {
  border-collapse: collapse;
  width: 100%;
  margin: var(--space-3) 0;
  font-size: var(--fs-caption);
}
.crop-md-content .md-table th,
.crop-md-content .md-table td {
  padding: var(--space-2);
  border: 1px solid var(--hairline);
  text-align: left;
}
.crop-md-content .md-table th {
  background: var(--ink-100);
  font-family: var(--font-heading);
  font-weight: 600;
}
.crop-md-content code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--ink-100);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
}
.crop-md-content .md-code {
  background: var(--ink-100);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  overflow-x: auto;
}
.crop-md-content .md-fn {
  font-size: 0.85em;
  color: var(--ink-500);
  margin-left: 1px;
}
.crop-md-content a {
  color: var(--ink-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.crop-md-content a:hover { color: var(--ink-900); }
.crop-md-content strong { font-weight: 700; color: var(--ink-900); }
.crop-md-content em { font-style: italic; color: var(--ink-700); }
.crop-md-content .md-error-msg {
  color: var(--ink-500);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
}

/* ──────────────────────────────────────────────
   친근본 hook — 호미님 한 줄 풀이 (호미클럽 친근체 introduction)
   ────────────────────────────────────────────── */
.crop-friendly-hook {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  /* axis bar 금지 */
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  line-height: 1.75;
  letter-spacing: .01em;
}
.crop-friendly-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--ink-900);
  background: var(--ink-100);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  margin-right: var(--space-2);
  letter-spacing: .04em;
}

/* ──────────────────────────────────────────────
   현대어 풀이 (§2 의역) + 한국어 요약 (§3 카테고리)
   ────────────────────────────────────────────── */
.crop-interpretation,
.crop-summary {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
}
.crop-interp-h,
.crop-summary-h {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: .04em;
}
.crop-interp-p {
  margin: 0 0 var(--space-2);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  line-height: 1.75;
}
.crop-interp-p:last-child { margin-bottom: 0; }
.crop-interp-label,
.crop-summary-label {
  font-weight: 700;
  color: var(--ink-900);
  margin-right: var(--space-1);
}
.crop-interp-list {
  margin: var(--space-2) 0;
  padding-left: var(--space-5);
  list-style: disc;
}
.crop-interp-list li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  line-height: 1.7;
  margin: 4px 0;
}
.crop-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.crop-summary-list li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  line-height: 1.7;
}

/* ──────────────────────────────────────────────
   영양 성분 풀이 + 작물 궁합 (긍정/주의)
   ────────────────────────────────────────────── */
.crop-nutrient-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.crop-nutrient-list li {
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  line-height: 1.7;
}
.crop-nutrient-name {
  font-weight: 700;
  color: var(--ink-900);
  margin-right: var(--space-1);
}

.crop-pairings {
  margin-top: var(--space-3);
  padding: var(--space-4);
  background: var(--ink-50);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
}
.crop-pairings .crop-h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  color: var(--ink-900);
}
.crop-pair-good,
.crop-pair-bad {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
}
.crop-pair-good { /* axis bar 금지 */ }
.crop-pair-bad  { /* axis bar 금지 */ }
.crop-pair-h {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: .04em;
}
.crop-pair-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.crop-pair-list li {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink-900);
  line-height: 1.7;
  padding-left: var(--space-3);
  position: relative;
}
.crop-pair-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--ink-500);
  font-weight: 700;
}
.crop-pair-label {
  font-weight: 700;
  color: var(--ink-900);
  margin-right: var(--space-1);
}
.crop-pair-link {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.crop-pair-link:hover { color: var(--ink-700); }
.crop-pair-link-arrow {
  font-size: 0.9em;
  color: var(--ink-500);
  margin-left: 2px;
}

/* ──────────────────────────────────────────────
   원문 / 현대어 풀이 탭 (같은 프레임 내 전환)
   ────────────────────────────────────────────── */
.crop-tabs {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.crop-tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--hairline);
  background: var(--ink-100);
}
.crop-tab-btn {
  flex: 1;
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: .04em;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.crop-tab-btn:hover {
  color: var(--ink-700);
  background: var(--surface);
}
.crop-tab-btn.is-active {
  color: var(--ink-900);
  background: var(--surface);
  border-bottom-color: var(--ink-900);
}
.crop-tab-panel {
  display: none;
  padding: var(--space-3);
}
.crop-tab-panel.is-active { display: block; }

/* 탭 안 figure는 박스 중복 안 되게 borderless */
.crop-tabs .crop-classical {
  background: transparent;
  border: 0;
  padding: 0;
}

/* ──────────────────────────────────────────────
   페이지 5-카테고리 탭 (작물 세부 페이지 최상위 분할)
   기본정보 / 호미님 이야기 / 동서양 자료 / 요리 / 관련링크·광고
   ────────────────────────────────────────────── */
.crop-page-tabs-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 0;
  background: var(--bg-page);
  border-bottom: 1px solid var(--hairline);
  margin: var(--space-3) 0 var(--space-4);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.crop-page-tabs-nav::-webkit-scrollbar { display: none; }

.crop-page-tab-btn {
  flex: 1 0 auto;
  appearance: none;
  background: transparent;
  border: 0;
  padding: var(--space-3) var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.crop-page-tab-btn:hover {
  color: var(--ink-700);
}
.crop-page-tab-btn.is-active {
  color: var(--ink-900);
  border-bottom-color: var(--ink-900);
}

.crop-page-tab-panel {
  display: none;
}
.crop-page-tab-panel.is-active {
  display: block;
  animation: cropTabFade 0.18s ease-out;
}
@keyframes cropTabFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──────────────────────────────────────────────
   작물 세부 페이지 sticky 브레드크럼 nav
   (스크롤 시 hm-topbar 사라지고 작물명+카테고리만 상단 고정)
   ────────────────────────────────────────────── */

/* 작물 세부 페이지에서만 상단바 sticky 해제 → 스크롤 시 자연스럽게 사라짐 */
body[data-page="crop-detail"] .hm-topbar {
  position: static;
}

.crop-sticky-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--bg-page);
  border-bottom: 1px solid var(--hairline);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
  margin: 0 calc(-1 * var(--space-4)) var(--space-3);
}
.crop-sticky-nav::-webkit-scrollbar { display: none; }

.crop-sticky-title {
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: .02em;
  flex-shrink: 0;
}
.crop-sticky-sep {
  color: var(--ink-300);
  font-size: var(--fs-caption);
  flex-shrink: 0;
}
.crop-sticky-link {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--ink-500);
  text-decoration: none;
  letter-spacing: .02em;
  flex-shrink: 0;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.crop-sticky-link:hover {
  color: var(--ink-700);
}
.crop-sticky-link.is-active {
  color: var(--ink-900);
  border-bottom-color: var(--ink-900);
}

/* anchor 점프 시 sticky bar 높이만큼 여백 */
#story, #scholar, #recipe, #links {
  scroll-margin-top: 56px;
}

/* PC 반응형: nav 가운데 정렬 폭 제한 */
@media (min-width: 880px) {
  .crop-sticky-nav {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
}


/* 누적 진행 표시 — 모든 카테고리 노출, 진입 여부로 톤만 구분 */
.crop-sticky-link {
  display: inline-flex;
  align-items: center;
  color: var(--ink-300);
  opacity: 0.85;
  transition: color 0.15s, opacity 0.15s, border-color 0.15s;
}
.crop-sticky-link:hover {
  color: var(--ink-700);
  opacity: 1;
}
.crop-sticky-link.is-visible {
  color: var(--ink-700);
  opacity: 1;
}
.crop-sticky-link.is-active {
  color: var(--ink-900);
  border-bottom-color: var(--ink-900);
}
.crop-sticky-sep {
  display: inline-flex;
  align-items: center;
  color: var(--ink-300);
}
.crop-sticky-sep.is-visible {
  color: var(--ink-500);
}

/* ──────────────────────────────────────────────
   카테고리 큰 헤더 — sticky brumb 메뉴명과 동일
   (호미 이야기 / 근거 자료 / 요리 / 관련 링크)
   ────────────────────────────────────────────── */
.crop-cat {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--hairline);
  scroll-margin-top: 64px;
}
.crop-cat-header {
  margin: 0 0 var(--space-4);
  padding: 0;
  font-family: var(--font-heading);
  font-size: var(--fs-heading);
  font-weight: 700;
  color: var(--ink-900);
  letter-spacing: -.01em;
  line-height: 1.2;
}

/* 카테고리 안 작은 섹션 헤더 (기존 crop-h2에서 강등) */
.crop-h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  font-weight: 600;
  color: var(--ink-900);
  letter-spacing: .01em;
}

/* 카테고리 안 섹션은 위 간격 좁히기 (카테고리 헤더가 큰 구획) */
.crop-cat .crop-section {
  margin-top: var(--space-4);
}
.crop-cat .crop-section:first-of-type {
  margin-top: 0;
}

/* ──────────────────────────────────────────────
   작물 궁합 (건강 성분과 동일 카드 형식)
   ────────────────────────────────────────────── */
.crop-comp-subh {
  margin: var(--space-4) 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink-700);
  letter-spacing: .02em;
}
.crop-comp-subh:first-child {
  margin-top: 0;
}
.crop-comp-name a {
  color: var(--ink-900);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.crop-comp-name a:hover { color: var(--ink-700); }


/* ──────────────────────────────────────────────
   박스 in 박스 제거 — 흐름 중심 평탄화 (v=z)
   배경·다중 보더·radius·shadow 제거, 텍스트 흐름과 hairline divider만
   ────────────────────────────────────────────── */
.crop-scholar,
.crop-pairings {
  background: transparent;
  border: 0;
  padding: 0;
  margin-top: var(--space-3);
  border-radius: 0;
}
.crop-classical {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.crop-classical-body {
  padding-left: var(--space-3);
}
.crop-interpretation,
.crop-summary,
.crop-intro {
  background: transparent;
  border: 0;
  padding: 0;
}
.crop-tabs {
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.crop-tabs-nav {
  background: transparent;
  border-bottom: 1px solid var(--hairline);
}
.crop-tab-panel {
  padding: var(--space-3) 0;
}
.crop-nutrient-list li,
.crop-meta-item,
.crop-pair-good,
.crop-pair-bad {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--space-2) 0;
}
/* nutrient·meta·pair list는 li 사이 hairline 구분만 */
.crop-nutrient-list {
  display: block;
}
.crop-nutrient-list li,
.crop-meta-list .crop-meta-item {
  border-bottom: 1px solid var(--hairline);
}
.crop-nutrient-list li:last-child,
.crop-meta-list .crop-meta-item:last-child {
  border-bottom: 0;
}
.crop-meta-list {
  display: block;
}

/* ──────────────────────────────────────────────
   본문 양끝 정렬 + 모바일 라벨/본문 줄바꿈 (2026-05-28 B)
   ────────────────────────────────────────────── */

/* 1. 모든 본문 단락: 양끝 정렬 + 한국어 단어 분절 회피 */
.crop-column,
.crop-eastwest,
.crop-intro,
.crop-classical-body,
.crop-interp-p,
.crop-nutrient-list li,
.crop-summary-list li,
.crop-meta-title,
.crop-meta-cite,
.crop-ad-placeholder,
.crop-recipe-note {
  text-align: justify;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 2. crop-comp grid → 모바일에서 stack (라벨/태그 인라인 + 본문 줄바꿈) */
@media (max-width: 720px) {
  .crop-comp {
    display: block;
    padding: var(--space-2) 0;
  }
  .crop-comp-name {
    display: inline-block;
    margin-right: var(--space-2);
    margin-bottom: 2px;
  }
  .crop-comp-value {
    display: inline-block;
    margin-bottom: 2px;
  }
  .crop-comp-effect {
    display: block;
    margin-top: var(--space-1);
    text-align: justify;
    word-break: keep-all;
    overflow-wrap: anywhere;
    line-height: 1.7;
  }
}

/* 3. nutrient/summary list — 라벨 + 본문 줄바꿈 */
.crop-nutrient-list li,
.crop-summary-list li {
  line-height: 1.75;
}
.crop-nutrient-name,
.crop-summary-label {
  display: inline-block;
  margin-right: var(--space-2);
}
@media (max-width: 720px) {
  .crop-nutrient-name,
  .crop-summary-label {
    display: block;
    margin-bottom: 2px;
  }
}

/* 4. interp 라벨 — 모바일 줄바꿈 */
@media (max-width: 720px) {
  .crop-interp-label {
    display: block;
    margin-bottom: 2px;
    margin-right: 0;
  }
}

/* ──────────────────────────────────────────────
   양끝 정렬 해제 + 박스 안 좌우 여백 확대 (2026-05-28 C)
   ────────────────────────────────────────────── */

/* 1. 양끝 정렬 → 좌측 정렬 (단어 간격 폭주 회피) */
.crop-column,
.crop-eastwest,
.crop-intro,
.crop-classical-body,
.crop-interp-p,
.crop-nutrient-list li,
.crop-summary-list li,
.crop-meta-title,
.crop-meta-cite,
.crop-ad-placeholder,
.crop-recipe-note,
.crop-comp-effect {
  text-align: left;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 2. 박스 안 글의 좌우 여백 확대 (모바일·PC 공통) */
.crop-comp {
  padding: var(--space-3) var(--space-4);
}
@media (max-width: 720px) {
  .crop-comp {
    padding: var(--space-3) var(--space-4);
  }
}
.crop-eastwest {
  padding: var(--space-3) var(--space-5);
}
.crop-ad-placeholder {
  padding: var(--space-4);
}
.crop-recipe-list {
  padding-left: var(--space-5);
  padding-right: var(--space-4);
}
.crop-recipe-note {
  padding: var(--space-3) var(--space-4);
}

/* ──────────────────────────────────────────────
   서체 영역 분리 (2026-05-28 D)
   • 명조(--font-body, Noto Serif KR) — 호미클럽 친근체 합쇼체
   • 고딕(--font-heading, Pretendard) — 학술 권위·인용·외부 출처·증빙 평서체
   ────────────────────────────────────────────── */

/* ── 명조 (친근체) ── */
.crop-hook,
.crop-column,
.crop-eastwest,
.crop-eastwest-label,
.crop-friendly-hook,
.crop-recipe-note {
  font-family: var(--font-body);
}

/* ── 고딕 (학술·인용·증빙) ── */
.crop-classical,
.crop-classical-body,
.crop-classical-title,
.crop-classical-source,
.crop-classical-attr,
.crop-interpretation,
.crop-interp-p,
.crop-interp-label,
.crop-interp-h,
.crop-interp-list,
.crop-interp-list li,
.crop-summary,
.crop-summary-h,
.crop-summary-list,
.crop-summary-list li,
.crop-summary-label,
.crop-nutrient-list,
.crop-nutrient-list li,
.crop-nutrient-name,
.crop-meta-list,
.crop-meta-list li,
.crop-meta-item,
.crop-meta-title,
.crop-meta-cite,
.crop-meta-id,
.crop-intro,
.crop-comp,
.crop-comp-name,
.crop-comp-value,
.crop-comp-effect,
.crop-comp-subh,
.crop-source,
.crop-pair-link {
  font-family: var(--font-heading);
}

/* ──────────────────────────────────────────────
   작물 페이지 히어로 (2026-05-28 E) — 이미지 + 학명·한자명·영문명
   ────────────────────────────────────────────── */
.crop-hero { margin: 0 calc(-1 * var(--space-4)) var(--space-4); }
.crop-hero-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--ink-100); }
.crop-hero-cap { padding: var(--space-3) var(--space-4) 0; }
.crop-hero-cap .crop-title { margin: 0; }
.crop-meta-line { margin: var(--space-1) 0 var(--space-2); font-family: var(--font-heading); font-size: var(--fs-caption); color: var(--ink-500); letter-spacing: .02em; line-height: 1.5; }
.crop-meta-sci { font-style: italic; font-family: var(--font-heading); color: var(--ink-700); }
.crop-meta-hanja { font-family: var(--font-body); color: var(--ink-700); }
.crop-meta-en { color: var(--ink-500); }
.crop-meta-sep { margin: 0 4px; color: var(--ink-300); }
@media (min-width: 880px) {
  .crop-hero { margin-left: 0; margin-right: 0; border-radius: var(--radius-md); overflow: hidden; }
  .crop-hero-img { aspect-ratio: 21 / 9; }
  .crop-hero-cap { padding: var(--space-4) var(--space-5) 0; }
}

/* ──────────────────────────────────────────────
   Quick Facts + Why 한 줄 (2026-05-28 F)
   ────────────────────────────────────────────── */
.crop-quickfacts .crop-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  margin: 0 0 var(--space-3);
}
.crop-qf-list {
  margin: 0;
  display: grid;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
}
.crop-qf-list dt {
  font-weight: 700;
  color: var(--ink-900);
  margin: 0;
}
.crop-qf-list dd {
  margin: 0 0 var(--space-2);
  color: var(--ink-700);
  line-height: 1.65;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--hairline);
}
.crop-qf-list dd:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
@media (min-width: 720px) {
  .crop-qf-list {
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-4);
    row-gap: 0;
  }
  .crop-qf-list dt {
    grid-column: 1;
    padding: var(--space-2) 0;
  }
  .crop-qf-list dd {
    grid-column: 2;
    padding: var(--space-2) 0;
  }
}

.crop-why {
  margin-top: var(--space-3);
}
.crop-why .crop-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-title);
  margin: 0 0 var(--space-2);
}
.crop-why-line {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--fs-body);
  color: var(--ink-900);
  line-height: 1.7;
  padding: var(--space-3) var(--space-4);
  background: var(--ink-50);
  border-radius: var(--radius-md);
}
.crop-why-line:last-child { margin-bottom: 0; }
.crop-why-line strong {
  font-weight: 700;
  margin-right: var(--space-1);
}

/* ──────────────────────────────────────────────
   관련 작물 카드 (2026-05-28 G) — 가로 스크롤
   ────────────────────────────────────────────── */
.crop-related {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding: var(--space-2) 0;
  margin: 0 calc(-1 * var(--space-4));
  padding-left: var(--space-4);
  padding-right: var(--space-4);
  scroll-snap-type: x mandatory;
}
.crop-related-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.15s, transform 0.15s;
}
.crop-related-card:hover {
  border-color: var(--ink-700);
  transform: translateY(-1px);
}
.crop-related-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--ink-100);
}
.crop-related-body {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.crop-related-name {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-900);
}
.crop-related-reason {
  font-family: var(--font-heading);
  font-size: var(--fs-caption);
  color: var(--ink-500);
}
.crop-related-hook {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--ink-700);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
@media (min-width: 880px) {
  .crop-related { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* ──────────────────────────────────────────────
   sitewide 페이지 톤 매핑 (2026-05-28 G)
   본문 명조 / 메타·라벨·UI 고딕
   ────────────────────────────────────────────── */

/* 작물 도감 인덱스 카드 */
.crop-index .crop-title { font-family: var(--font-body); }
.crop-index .crop-hook { font-family: var(--font-body); }
.crop-index-card { font-family: var(--font-body); }
.crop-index-name { font-family: var(--font-body); font-weight: 700; color: var(--ink-900); }
.crop-index-hook { font-family: var(--font-body); color: var(--ink-700); }

/* 모듈 본문 — 친근 톤 (스토리·홈피드·기록) */
[data-module="story-index"],
[data-module="home-feed"],
[data-module="diary-fab"],
[data-module="plan-note"] {
  font-family: var(--font-body);
}
/* 모듈 메타·라벨·UI — 고딕 (기존 partials.css 정의 우선) */

/* 모든 페이지 본문 default 명조 */
.hm-main { font-family: var(--font-body); }

/* 헤더·드로어·UI는 고딕 유지 */
.hm-topbar, .hm-drawer, .hm-topnav, .hm-drawer-label { font-family: var(--font-heading); }

/* ──────────────────────────────────────────────
   작물 도감 인덱스 (PHP 동적 /crops.php) 2026-05-28 H
   ────────────────────────────────────────────── */
.crop-index-filter {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
  flex-wrap: wrap;
}
.crop-index-search,
.crop-index-cat {
  flex: 1 1 200px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  background: var(--surface);
  color: var(--ink-900);
}
.crop-index-cat { flex: 0 0 auto; min-width: 140px; }
.crop-index-search-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--ink-900);
  color: #fff;
  border: 0;
  border-radius: var(--radius-md);
  font-family: var(--font-heading);
  font-weight: 600;
  cursor: pointer;
}
.crop-index-search-btn:hover { background: var(--ink-700); }

.crop-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}
.crop-index-card {
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  transition: border-color 0.15s, transform 0.15s;
}
.crop-index-card:hover {
  border-color: var(--ink-700);
  transform: translateY(-1px);
}
.crop-index-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--ink-100);
}
.crop-index-body {
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.crop-index-empty {
  text-align: center;
  color: var(--ink-500);
  padding: var(--space-8) 0;
}

/* 회원 인증 폼 (2026-05-28 V2-1) */
.auth-input { display:block; width:100%; padding:10px; margin-top:4px; border:1px solid var(--hairline); border-radius:var(--radius-md); font-size:var(--fs-body); box-sizing:border-box; background:var(--surface); }
.auth-btn { width:100%; padding:12px; background:var(--ink-900); color:#fff; border:0; border-radius:var(--radius-md); font-family:var(--font-heading); font-weight:600; font-size:var(--fs-body); cursor:pointer; }
.auth-btn:hover { background:var(--ink-700); }
.auth-form label { font-family:var(--font-heading); font-size:var(--fs-caption); color:var(--ink-700); }

/* 마이페이지 일지 타임라인 (2026-05-28 V2) */
.diary-month { margin-top: var(--space-5); }
.diary-month-label { color: var(--ink-500); font-size: var(--fs-caption); letter-spacing:.04em; margin:0 0 var(--space-2); padding-bottom:var(--space-1); border-bottom:1px solid var(--hairline); }
.diary-timeline { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
.diary-item { display:flex; gap:var(--space-3); }
.diary-date { flex:0 0 44px; font-family:var(--font-heading); font-size:var(--fs-caption); font-weight:700; color:var(--ink-900); padding-top:2px; }
.diary-body-wrap { flex:1; min-width:0; }
.diary-meta { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:4px; font-family:var(--font-heading); font-size:var(--fs-caption); }
.diary-garden { color:var(--ink-900); font-weight:600; text-decoration:none; }
.diary-garden:hover { text-decoration:underline; }
.diary-crop { color:var(--ink-500); }
.diary-crop::before { content:"· "; }
.diary-photo { display:block; max-width:100%; border-radius:var(--radius-md); margin:4px 0 8px; }
.diary-text { font-family:var(--font-body); font-size:var(--fs-body); color:var(--ink-900); line-height:1.7; margin:0; word-break:keep-all; }

/* 시기 판정 배지 (2026-05-28) — 무채색 + 점 강조 */
.crop-timing { display:flex; gap:var(--space-2); align-items:flex-start; padding:var(--space-3) var(--space-4); background:var(--ink-50); border:1px solid var(--hairline); border-radius:var(--radius-md); margin-bottom:var(--space-3); }
.crop-timing-dot { flex:0 0 10px; width:10px; height:10px; border-radius:50%; margin-top:5px; background:var(--ink-300); }
.crop-timing-prime .crop-timing-dot { background:var(--ink-900); }
.crop-timing-early_ok .crop-timing-dot, .crop-timing-late_ok .crop-timing-dot { background:var(--ink-500); }
.crop-timing-too_early .crop-timing-dot, .crop-timing-too_late .crop-timing-dot { background:var(--ink-300); }
.crop-timing-body { flex:1; }
.crop-timing-label { display:block; font-family:var(--font-heading); font-size:var(--fs-body); font-weight:700; color:var(--ink-900); margin-bottom:2px; }
.crop-timing-msg { font-family:var(--font-heading); font-size:var(--fs-caption); color:var(--ink-700); line-height:1.6; }
.crop-timing-prime { border-color:var(--ink-900); }

/* 도감 "지금 적기" 배지 (2026-05-28) */
.crop-index-now { display:inline-block; font-family:var(--font-heading); font-size:10px; font-weight:700; color:#fff; background:var(--ink-900); padding:1px 6px; border-radius:var(--radius-pill); vertical-align:middle; margin-left:4px; letter-spacing:.02em; }
.crop-index-nowfilter { display:inline-flex; align-items:center; gap:4px; font-family:var(--font-heading); font-size:var(--fs-caption); color:var(--ink-700); white-space:nowrap; }

/* pillar 역링크 칩 + 도감 pillar 네비 */
.crop-pillar-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.crop-pillar-link { display: inline-block; padding: 6px 12px; background: var(--ink-50); border: 1px solid var(--hairline); border-radius: var(--radius-pill); font-family: var(--font-heading); font-size: var(--fs-caption); color: var(--ink-700); text-decoration: none; }
.crop-pillar-link:hover { background: var(--ink-100); color: var(--ink-900); }

/* 퍼널 CTA (2026-05-28) */
.crop-cta { margin-top: var(--space-3); padding: var(--space-4); background: var(--ink-50); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.crop-cta-msg { font-family: var(--font-body); font-size: var(--fs-body); color: var(--ink-900); line-height: 1.7; margin: 0 0 var(--space-3); }
.crop-cta-btn { display: inline-block; padding: 12px 24px; background: var(--ink-900); color: #fff; border-radius: var(--radius-md); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body); text-decoration: none; }
.crop-cta-btn:hover { background: var(--ink-700); }
.crop-start-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: var(--space-3); }
.crop-start-card { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); text-decoration: none; transition: border-color .15s, transform .15s; }
.crop-start-card:hover { border-color: var(--ink-700); transform: translateY(-1px); }
.crop-start-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body); color: var(--ink-900); }
.crop-start-desc { font-family: var(--font-heading); font-size: var(--fs-caption); color: var(--ink-500); line-height: 1.5; }

/* 광고 슬롯 CLS 방지 (2026-05-28) — 자리 예약 + 반응형 */
.crop-ad-slot { margin-top: var(--space-4); }
.crop-ad-body { min-height: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); }
.crop-ad-slot .crop-ad-placeholder { width: 100%; text-align: center; color: var(--ink-500); font-family: var(--font-heading); font-size: var(--fs-caption); padding: var(--space-4); background: var(--ink-50); border: 1px dashed var(--hairline); border-radius: var(--radius-md); }
@media (max-width: 879px) { .crop-ad-body { min-height: 120px; } }
.crop-ad-note { font-family: var(--font-heading); font-size: 11px; color: var(--ink-500); margin-left: 6px; font-weight: 500; }

/* 직답 FAQ (GEO 인용용) */
.crop-faq { margin: 0; }
.crop-faq-q { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-body); color: var(--ink-900); margin: var(--space-3) 0 4px; }
.crop-faq-q:first-child { margin-top: 0; }
.crop-faq-a { font-family: var(--font-heading); font-size: var(--fs-body); color: var(--ink-700); line-height: 1.7; margin: 0 0 var(--space-2); }

/* pillar 종합 해설 (명조 본문, 박스 없음) */
.crop-pillar-intro { font-family: var(--font-body); font-size: var(--fs-read, var(--fs-body)); line-height: 1.85; color: var(--ink-800); text-align: left; margin: 0; padding: 0; background: transparent; border: 0; }

/* 작물 카드 가로 리스트형 v2 — 원형 대표 이미지 (2026-05-28) */
.crop-index-grid:has(.crop-index-text) { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.crop-index-card:has(.crop-index-text) { display: flex; flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-3); overflow: visible; }
.crop-index-card:has(.crop-index-text) .crop-index-img { width: 56px; height: 56px; aspect-ratio: auto; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--ink-50); border: 1px solid var(--hairline); }
.crop-index-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.crop-index-card:has(.crop-index-text) .crop-index-hook { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }

/* hero 2단 — 정사각 이미지 + 우측 정보·한눈보기 (2026-05-29) */
.crop-hero-wrap { display: flex; gap: var(--space-5); align-items: flex-start; margin: 0 0 var(--space-5); }
.crop-hero { margin: 0; flex: 0 0 auto; width: min(360px, 42%); }
.crop-hero-img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.crop-hero-info { flex: 1; min-width: 0; }
.crop-hero-info .crop-title { margin: 0; }
.crop-hero-info .crop-hook { margin: var(--space-2) 0 var(--space-3); }
.crop-qf-hero { margin-top: var(--space-3); }
@media (max-width: 767px) { .crop-hero-wrap { flex-direction: column; align-items: stretch; } .crop-hero { width: 100%; max-width: 280px; margin: 0 auto; } }

/* hero 우측 건강 성분표 (2026-05-29) */
.crop-hero-comp { margin-top: var(--space-3); }
.crop-comp-title { font-family: var(--font-heading); font-size: var(--fs-caption); color: var(--ink-500); font-weight: 600; margin: 0 0 var(--space-1); letter-spacing: .02em; }
.crop-hero-comp .crop-comps { gap: var(--space-1); }
.crop-hero-comp .crop-comp { padding: var(--space-2) 0; border-bottom: 1px solid var(--hairline); }
.crop-hero-comp .crop-comp:last-child { border-bottom: 0; }

/* 궁합 항목 2단 — 좌 제목 | 우 내용 (2026-05-29) */
.crop-pair-item { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: var(--space-3); align-items: baseline; padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.crop-pair-item:last-child { border-bottom: 0; }
.crop-pair-label { display: flex; flex-direction: column; gap: 4px; }
.crop-pair-name { font-family: var(--font-heading); font-weight: 700; color: var(--ink-900); }
.crop-pair-tag { font-family: var(--font-heading); font-size: var(--fs-caption); font-weight: 600; }
.crop-pair-tag-good { color: #4a7c3a; }
.crop-pair-tag-bad { color: #b5562f; }
.crop-pair-body { font-family: var(--font-heading); color: var(--ink-700); line-height: 1.65; }
@media (max-width: 600px) { .crop-pair-item { grid-template-columns: 1fr; gap: 4px; } }

/* 쿠팡 고지문구 + 배너 모바일 안전 (2026-05-29) */
.crop-ad-disclaimer { font-family: var(--font-heading); font-size: 11px; color: var(--ink-500); text-align: center; margin: 0; line-height: 1.4; max-width: 420px; }
.crop-ad-body { overflow-x: auto; max-width: 100%; }

/* 언어 자동 안내 배너 (2026-05-29) */
.homi-lang-bar { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--ink-900); color: #fff; padding: 8px 16px; font-family: var(--font-heading); font-size: var(--fs-caption); }
.homi-lang-bar a { color: #fff; text-decoration: underline; }
.homi-lang-bar button { background: none; border: 0; color: #fff; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }