/* 이용안내 · FAQ (SCR-07) — landing.css 톤 계승. 페이지 전용 스타일만 여기 둔다.
   A-3 제외: 전국 통계·정비 성과는 담지 않는다. */

/* 히어로가 없으므로 고정 헤더 아래로 본문을 밀어낸다 */
.guide-body { padding-top: 64px; }

/* 페이지 타이틀 밴드 */
.guide-hero { background: var(--green-primary); color: #fff; padding: 56px 24px 48px; text-align: center; }
.guide-hero .eyebrow { letter-spacing: .16em; font-size: 12px; font-weight: 700;
  color: #bfe9cf; text-transform: uppercase; margin: 0 0 12px; }
.guide-hero h1 { font-size: clamp(28px, 4.4vw, 40px); font-weight: 700; margin: 0 0 12px; line-height: 1.25; }
.guide-hero p { color: rgba(255,255,255,.9); font-size: 17px; margin: 0 auto; max-width: 620px; }

/* 지도 레이어 범례 카드 — 색 스와치는 tokens.css 레이어 색 사용 (임의색 금지 §4-2) */
.legend-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.legend-item { display: flex; gap: 14px; padding: 22px; border: 1px solid var(--line);
  border-radius: 16px; background: var(--bg); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.legend-swatch { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 7px; margin-top: 3px; border: 1px solid rgba(0,0,0,.08); }
/* 스와치 색은 지도(map.js)가 실제 렌더하는 색과 일치시킨다 — 임의색 금지(§4-2) */
.legend-swatch.river { background: var(--river-national); border-color: #2a5cb8; }      /* 국가하천 대표색 */
.legend-swatch.greenbelt { background: #157f3c; border-color: #0f5f2c; }                /* map.js WFS 벡터 개발제한구역 */
.legend-swatch.cadastral { background: var(--cadastral); border-color: #d4b800; }       /* 지적 옐로 라인 */
.legend-item h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.legend-item p { color: var(--text-sub); font-size: 14px; line-height: 1.6; margin: 0; }

/* FAQ 아코디언 — JS 없이 <details>/<summary> (초경량·CSP 안전) */
.faq { max-width: 820px; margin: 0 auto; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--bg);
  margin-bottom: 12px; overflow: hidden; }
.faq details[open] { border-color: var(--green-cta); box-shadow: var(--shadow-card); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 22px; font-size: 17px; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--green-primary);
  line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .answer { padding: 0 22px 20px; color: var(--text-sub); font-size: 15.5px; line-height: 1.7; }
.faq .answer a { color: var(--green-primary); font-weight: 600; }

/* 안내 콜아웃 */
.callout { display: flex; gap: 14px; padding: 20px 22px; border-radius: 14px;
  background: var(--bg-soft); border: 1px solid var(--line); margin-top: 28px; }
.callout .ic { font-size: 22px; line-height: 1.4; }
.callout p { margin: 0; font-size: 15px; color: var(--text-sub); line-height: 1.65; }
.callout strong { color: var(--text); }

@media (max-width: 900px) {
  .legend-list { grid-template-columns: 1fr; }
}

/* ── 페이지 목차 ───────────────────────────────────────────────
   '신고 안내'를 최상위 메뉴에서 뺀 대신, 이용안내 안에서 바로 이동할 수 있게 한다. */
.guide-toc{
  position:sticky;top:0;z-index:50;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.guide-toc .wrap{display:flex;gap:6px;overflow-x:auto;padding:10px 20px;scrollbar-width:none}
.guide-toc .wrap::-webkit-scrollbar{display:none}
.guide-toc a{
  flex:0 0 auto;padding:8px 16px;border-radius:9999px;
  font-size:14px;font-weight:600;color:var(--text-sub);text-decoration:none;
  border:1px solid var(--line);background:var(--bg);
}
.guide-toc a:hover{border-color:var(--green-cta);color:var(--green-primary)}
/* 앵커 이동 시 sticky 목차에 제목이 가리지 않도록 */
#howto,#layers,#report,#faq{scroll-margin-top:64px}