/* ============================================================
   guide.css — 가이드 게시판 + 근거 기반 글 공용 스타일
   2026-08-08 신설.
   기존 guide/chewing.html·food-texture.html 은 인라인 <style> 을 그대로 두었다
   (검수 대기 문서라 표시 변경 위험을 피함). 신규 글은 전부 이 파일을 쓴다.
   ============================================================ */

/* ---------- 공통 히어로 ----------
   여백: site.css 의 `section{padding:96px 0}` 와 겹쳐 히어로~본문 간격이 과했다.
   히어로 아래를 줄이고, 목록/본문 섹션은 .guide-sec 로 상단 여백을 낮춘다. */
.page-hero{
  background:radial-gradient(60% 55% at 85% 8%,rgba(130,154,109,.06),transparent 70%),var(--bg);
  padding:56px 0 24px;
}
.page-hero h1{
  color:var(--ink); font-size:clamp(26px,3.8vw,40px); line-height:1.28;
  letter-spacing:-.02em; font-weight:800; margin:14px 0 16px; max-width:22em;
  word-break:keep-all;
}
/* 소개문 — 대비를 올리고(ink-soft→ink-2) 한 줄을 짧게(폭 축소) */
.page-hero .lead{
  max-width:33em; word-break:keep-all;
  color:var(--ink-2); font-size:clamp(16px,1.5vw,19px); line-height:1.72;
}
.guide-sec{ padding-top:56px; }
.crumb{ font-size:13px; color:var(--ink-soft); margin-bottom:6px; }
.crumb a{ color:var(--ink-soft); text-decoration:none; }
.crumb a:hover{ color:var(--brand-deep); }

/* ---------- 게시판: 작성 원칙 상자 ----------
   정보 위계 강화 — 카드 안쪽 여백·제목 크기를 올리고, 의료 면책은 아래에 따로 뗀다. */
.policy{
  max-width:760px; margin:0 auto; background:var(--brand-tint);
  border:1px solid rgba(130,154,109,.3); border-radius:18px; padding:28px 30px 26px;
}
.policy .lab{
  font-size:17.5px; font-weight:800; letter-spacing:-.015em; color:var(--brand-deep);
  margin-bottom:18px; padding-bottom:14px; border-bottom:1px solid rgba(130,154,109,.22);
}
.policy ul{ margin:0; padding:0; list-style:none; }
.policy li{
  position:relative; padding-left:22px; font-size:15.5px; line-height:1.8;
  color:var(--ink-2); margin-bottom:11px; word-break:keep-all;
}
.policy li:last-child{ margin-bottom:0; }
.policy li::before{
  content:""; position:absolute; left:4px; top:12px; width:6px; height:6px;
  border-radius:50%; background:var(--brand);
}
/* 의료 면책 — 원칙 목록에서 떼어 아이콘과 함께 별도 표시 */
.policy .disc{
  display:flex; gap:10px; align-items:flex-start; margin:18px 0 0; padding:14px 16px;
  background:rgba(255,255,255,.6); border:1px solid rgba(130,154,109,.24);
  border-radius:12px; font-size:14px; line-height:1.7; color:var(--ink-2);
  word-break:keep-all;
}
.policy .disc .ic{
  flex:none; width:20px; height:20px; border-radius:50%; background:var(--brand);
  color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center;
  justify-content:center; margin-top:2px;
}

/* ---------- 게시판: 카테고리 필터 ---------- */
.filters{
  max-width:760px; margin:30px auto 0; display:flex; flex-wrap:wrap; gap:8px;
  align-items:center;
}
.filters .flab{ font-size:12.5px; font-weight:800; color:var(--ink-faint); margin-right:2px; }
.chip{
  appearance:none; cursor:pointer; font:inherit; font-size:13px; font-weight:700;
  color:var(--ink-2); background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:7px 14px; transition:background .16s,border-color .16s,color .16s;
}
.chip:hover{ border-color:var(--brand); color:var(--brand-deep); }
.chip[aria-pressed="true"]{ background:var(--brand); border-color:var(--brand); color:#fff; }

/* ---------- 게시판: 글 목록 ---------- */
.posts{ max-width:760px; margin:18px auto 0; display:grid; gap:14px; }
.posts .count{ font-size:13px; color:var(--ink-faint); margin:4px 0 -4px; }

.post{
  display:block; position:relative; border:1px solid var(--line); border-radius:18px;
  background:#fff; padding:22px 24px; text-decoration:none; box-shadow:var(--shadow-sm);
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .18s;
}
.post:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--brand); }
.post[hidden]{ display:none; }

.post .meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:11px; }
.post .tag{
  display:inline-block; font-size:11.5px; font-weight:800; color:var(--brand-deep);
  background:var(--brand-tint); border-radius:999px; padding:4px 11px;
}
.post .pending{
  display:inline-block; font-size:11.5px; font-weight:800; color:#98701f;
  background:var(--amber-tint); border:1px solid rgba(200,150,60,.35);
  border-radius:999px; padding:3px 10px;
}
.post .pin{
  display:inline-block; font-size:11.5px; font-weight:800; color:#fff;
  background:var(--brand-deep,#5d7350); border-radius:999px; padding:4px 11px;
}
.post h2{ font-size:19.5px; color:var(--ink); margin:0 0 9px; line-height:1.42; letter-spacing:-.01em; word-break:keep-all; }
.post .hook{
  font-size:15px; line-height:1.7; color:var(--ink-2); margin:0 0 10px;
  font-weight:700; word-break:keep-all;
}
.post .hook b{ color:var(--brand-deep); }
.post p{ font-size:14.5px; color:var(--ink-soft); line-height:1.7; margin:0 0 12px; }
.post .src{ font-size:12.5px; color:var(--ink-faint); margin:0; }

.posts .empty{
  border:1px dashed var(--line); border-radius:16px; padding:28px 24px;
  text-align:center; font-size:14.5px; color:var(--ink-soft);
}

/* ---------- 글 본문 ---------- */
/* 검수 대기 배너 — 미공개 문서에만 쓴다. 현재 수록 글은 .doc-flag 를 쓴다. */
.review-flag{
  display:flex; gap:10px; align-items:flex-start; background:var(--amber-tint);
  border:1px solid rgba(200,150,60,.35); border-radius:12px; padding:13px 16px;
  margin:18px 0 0; font-size:13.5px; line-height:1.6; color:var(--ink-2); max-width:52em;
}
/* 공개 문서 안내 — 검수자를 주장하지 않는다. 무엇을 밝혔는지만 적는다. */
.doc-flag{
  display:flex; gap:10px; align-items:flex-start; background:var(--bg-soft);
  border:1px solid var(--line); border-radius:12px; padding:13px 16px;
  margin:18px 0 0; font-size:13.5px; line-height:1.65; color:var(--ink-2);
  max-width:52em; word-break:keep-all;
}

.prose{ max-width:720px; margin:0 auto; }
.prose h2{ font-size:clamp(20px,2.6vw,26px); color:var(--ink); margin:44px 0 12px; letter-spacing:-.01em; }
.prose h3{ font-size:17px; color:var(--ink); margin:28px 0 8px; }
.prose p{ font-size:16px; line-height:1.85; color:var(--ink-soft); margin:0 0 16px; }
.prose p b{ color:var(--ink-2); }
.prose ul{ margin:0 0 18px; padding:0; list-style:none; }
.prose ul li{
  position:relative; padding-left:20px; font-size:15.5px; line-height:1.8;
  color:var(--ink-soft); margin-bottom:9px;
}
.prose ul li::before{
  content:""; position:absolute; left:4px; top:12px; width:6px; height:6px;
  border-radius:50%; background:var(--brand);
}
.prose .sup{ font-size:11.5px; vertical-align:super; color:var(--brand-deep); font-weight:800; text-decoration:none; }
.prose .sup:hover{ text-decoration:underline; }

.tldr{ background:var(--brand-tint); border:1px solid rgba(130,154,109,.3); border-radius:16px; padding:20px 22px; margin:6px 0 8px; }
.tldr .lab{ font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--brand-deep); margin-bottom:10px; }
.tldr ul{ margin:0; }
.tldr ul li{ color:var(--ink-2); margin-bottom:7px; }
.tldr ul li:last-child{ margin-bottom:0; }

/* 숫자 강조 — 본문에서 딱 한 번만 쓴다 */
.bignum{
  border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:14px;
  background:#fff; padding:22px 24px; margin:6px 0 22px; text-align:center;
}
.bignum .n{
  display:block; font-size:clamp(34px,6vw,52px); font-weight:800; line-height:1.1;
  color:var(--brand-deep); letter-spacing:-.03em;
}
.bignum .cap{ display:block; font-size:14.5px; line-height:1.7; color:var(--ink-2); margin-top:10px; }
.bignum .who{ display:block; font-size:12.5px; color:var(--ink-faint); margin-top:8px; }

/* 경로 도식 */
.chain{ display:grid; gap:10px; margin:4px 0 20px; }
.chain .step{
  display:flex; gap:12px; align-items:flex-start; border:1px solid var(--line);
  border-left:3px solid var(--brand); border-radius:12px; background:#fff; padding:14px 16px;
}
.chain .step .n{
  flex:none; width:22px; height:22px; border-radius:50%; background:var(--brand-tint);
  color:var(--brand-deep); font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin-top:2px;
}
.chain .step .tx{ font-size:15px; line-height:1.7; color:var(--ink-2); }
.chain .step .tx b{ color:var(--ink); }

/* 근거 카드 — 연구 하나당 하나. 무엇을 봤고 무엇이 한계인지 항상 함께 적는다. */
.study{
  border:1px solid var(--line); border-left:3px solid var(--brand); border-radius:14px;
  background:#fff; padding:18px 20px; margin:0 0 16px;
}
.study .who{ font-size:12px; font-weight:800; color:var(--brand-deep); letter-spacing:.02em; margin-bottom:8px; }
.study .what{ font-size:15px; line-height:1.75; color:var(--ink-2); margin:0 0 12px; }
.study .what:last-child{ margin-bottom:0; }
.study .lim{
  font-size:13.5px; line-height:1.7; color:var(--ink-soft); background:var(--bg-soft);
  border-radius:10px; padding:11px 13px; margin:0;
}
.study .lim b{ color:#98701f; }
.study.animal{ border-left-color:#c8963c; }

/* 표 — 분포·비교용. 좁은 화면에서 가로 스크롤. */
.tw{ overflow-x:auto; margin:4px 0 22px; }
.dtable{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:380px; }
.dtable th,.dtable td{ border-bottom:1px solid var(--line); padding:11px 12px; text-align:left; }
.dtable th{ font-size:12.5px; font-weight:800; color:var(--brand-deep); background:var(--brand-tint); white-space:nowrap; }
.dtable td{ color:var(--ink-2); }
.dtable tr.hi td{ background:#fffdf7; font-weight:700; }
.dtable caption{ caption-side:bottom; font-size:12.5px; color:var(--ink-faint); text-align:left; padding-top:10px; line-height:1.6; }

.unknown{ border:1px dashed rgba(200,150,60,.6); background:#fffdf7; border-radius:14px; padding:20px 22px; margin:8px 0 20px; }
.unknown .lab{ font-size:13px; font-weight:800; color:#98701f; margin-bottom:10px; }
.unknown ul{ margin:0; }
.unknown ul li::before{ background:#c8963c; }

.refs{ border-top:1px solid var(--line); margin-top:44px; padding-top:22px; }
.refs h2{ font-size:17px; margin:0 0 14px; }
.refs ol{ margin:0; padding-left:20px; }
.refs li{ font-size:13.5px; line-height:1.75; color:var(--ink-soft); margin-bottom:11px; }
.refs li a{ color:var(--brand-deep); word-break:break-all; }
.refs .note{ font-size:13px; color:var(--ink-faint); margin-top:16px; line-height:1.7; }

.next-cta{
  background:var(--brand-tint); border:1px solid rgba(130,154,109,.28); border-radius:18px;
  padding:24px 26px; margin-top:38px; text-align:center;
}
.next-cta h3{ margin:0 0 8px; font-size:18px; color:var(--ink); }
.next-cta p{ font-size:14.5px; color:var(--ink-soft); margin:0 0 16px; line-height:1.7; }

/* 글 끝 — 다음 글 */
.readnext{ margin-top:34px; }
.readnext .lab{ font-size:12px; font-weight:800; letter-spacing:.04em; color:var(--brand-deep); margin-bottom:12px; }
.readnext a{
  display:block; border:1px solid var(--line); border-radius:14px; background:#fff;
  padding:16px 18px; text-decoration:none; margin-bottom:10px;
  transition:border-color .18s, box-shadow .2s;
}
.readnext a:hover{ border-color:var(--brand); box-shadow:var(--shadow-sm); }
.readnext a .t{ display:block; font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.5; margin-bottom:4px; }
.readnext a .d{ display:block; font-size:13.5px; color:var(--ink-soft); line-height:1.6; }