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

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

/* 페이지 타이틀 밴드 */
.guide-hero { background: var(--brand); color: #fff; padding: 56px 24px 48px; text-align: center; }
/* .guide-hero .eyebrow — 문구 삭제로 죽은 규칙이라 함께 제거 (2026-08-02) */
.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: var(--river-national-line); }      /* 국가하천 대표색 (map.js RIVER_LINE 과 동일) */
.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(--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(--brand);
  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(--brand); 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(--cta);color:var(--brand)}
/* 앵커 이동 시 sticky 목차에 제목이 가리지 않도록 */
#howto,#layers,#report,#faq{scroll-margin-top:64px}

/* 안드로이드 앱 설치 절 (§3-9).
   ★ 인라인 style= 을 쓰지 않는다 — CSP 가 `style-src 'self'`(unsafe-inline 없음)라
     style 속성이 차단된다. 여백 하나도 클래스로 옮긴다(자체점검표 미비점 ③ 이력). */
.app-cta{margin:20px 0 0}
/* 받기 버튼과 시범 버전 안내를 단계 위로 올렸다(2026-07-30 운영 요청).
   안내 상자가 단계 목록과 붙지 않게 아래 여백을 둔다. */
#app .callout{margin-top:14px;margin-bottom:26px}
/* #app 도 앵커로 이동한다(랜딩·지도의 [설치 방법] 링크) — sticky 목차에 가리지 않게 */
#app{scroll-margin-top:64px}

/* ══ 안내 배너 밝게 (2026-08-06 운영 지시) — 헤더가 다크네이비가 되면서
   배너까지 남색이면 상단이 온통 어두워진다. 배너는 흰 바탕 + 어두운 글자로.
   되돌리려면 이 블록 삭제. ══ */
.guide-hero{ background:#fff; color:var(--text); border-bottom:1px solid var(--line); }
.guide-hero p{ color:var(--text-sub); }