/* 공개 웹 — 앱과 같은 체계로 그린다.
 *
 * 토큰의 정본은 앱이다: lib/theme/colors.dart · typography.dart · theme.dart.
 * 이름을 그대로 옮겼다(surfaceInner → --surface-inner). 값을 바꿀 때는 앱을
 * 먼저 바꾸고 여기에 베낀다 — 관리자 콘솔(admin/styles.css)도 같은 이름을 쓴다.
 *
 * 클래스 이름은 앱 위젯 이름을 따른다(.card = AppCard, .pill = Pill). 앱을
 * 아는 사람이 이 파일을 읽을 수 있어야 한다.
 *
 * 서버가 완성된 HTML을 내보내는 SSR이다. **JS는 없다** — 메뉴도 토글도
 * CSS로만 한다. 화면은 docs/WEB_DESIGN.md와 캔버스 초안을 따른다.
 *
 * 글자 크기는 앱의 타이포 스케일(AppType)을 따른다. 앱이 «한 단계씩 키운»
 * 뒤(2026-09) 여기도 본문·라벨·캡션을 한 단계 올렸다. 계측 숫자(Oswald)와
 * 큰 제목은 웹 표시용 크기라 그대로다.
 */
:root {
  /* 배경 계층 */
  --bg: #0b1220;
  --bg-deep: #050a12;
  --bg-map: #0d1626;
  --surface: #151f31;
  --surface-inner: #0f1a2c;
  --surface-alt: #12203a;

  /* 라인 */
  --line: #1b2740;
  --border: #24314a;
  --border-strong: #33415c;

  /* 텍스트 */
  --text: #f5f7fa;
  --text-soft: #c6cedc;
  --text-muted: #8a94a6;
  --text-dim: #64708a;
  --text-faint: #4a5a78;
  --text-ghost: #3b4c6b;

  /* 액센트 */
  --accent: #22e584;
  --on-accent: #06251a;
  --blue: #3b82f6;
  --amber: #f59e0b;
  --red: #ef4444;

  /* 지도 마커 — 시설 타일 색을 앱 지도와 맞춘다 */
  --marker-toilet: #a855f7;
  --marker-parking: #f472b6;
  --marker-access-road: #fb923c;
  --marker-cctv: #f59e0b;
  --marker-no-fishing: #ef4444;

  /* 플레이스홀더 스트라이프 · 배너 그라데이션 */
  --stripe-a: #16233b;
  --stripe-b: #121d31;
  --stripe-alt-a: #1b2a45;
  --grad-teal: #0e2a26;
  --grad-navy: #12203a;
  /* CTA 카드 테두리 — 그라데이션 위에 얹는 초록 기 도는 선 */
  --cta-border: #1e3a34;

  /* 반경 (AppTheme) */
  --r-card: 16px;
  --r-button: 14px;
  --r-chip: 12px;
  --r-sheet: 24px;
  --r-pill: 999px;

  /* 글꼴 — 본문 Noto Sans KR, 계측·개수 숫자 Oswald (앱과 같다) */
  --font-body: 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
    'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-num: 'Oswald', 'Arial Narrow', sans-serif;

  /* 폭 */
  --w-page: 1120px;
  --w-read: 720px;
  --w-side: 320px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  /* 푸터를 바닥에 붙인다 — 내용이 짧은 404·빈 목록에서 뜨면 안 된다. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, p, dl, dd, dt { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------------ 셸 */

.top { border-bottom: 1px solid var(--line); }
.top-in {
  max-width: var(--w-page);
  margin: 0 auto;
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.brand {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand span { color: var(--accent); }

/* 홈 히어로 — 제목과 CTA를 양끝에. 섹션 머리와 규칙이 다르다. */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.hero > div { display: flex; flex-direction: column; gap: 8px; }

.top nav { display: flex; gap: 24px; flex: 1; }
.top nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-muted);
}
/* 지금 보고 있는 곳 */
.top nav a[aria-current] { color: var(--text); }

main {
  max-width: var(--w-page);
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* 상세 — 본문 720 + 사이드바 320 */
main.split {
  display: grid;
  grid-template-columns: var(--w-read) var(--w-side);
  gap: 40px;
  align-items: start;
}
main.split > article {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
main.split > .side { display: flex; flex-direction: column; gap: 16px; }

footer {
  border-top: 1px solid var(--line);
  margin-top: auto;
}
footer > div {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
}
.wordmark {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--text-faint);
}

/* ------------------------------------------------------------ 글 · 제목 */

h1 { font-size: 28px; font-weight: 800; line-height: 1.3; }
h2 { font-size: 21px; font-weight: 800; }
.lead { font-size: 16px; color: var(--text-muted); }
.empty { color: var(--text-muted); padding: 16px 0; }

/* 조과·리포트 제목 — 계측값이 먼저 읽혀야 한다 */
.title-measure {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.15;
}
.num { font-family: var(--font-num); font-weight: 700; }
.title-measure .num { font-size: 40px; }
.unit { font-size: 22px; color: var(--text-muted); }

/* 본문 — 한 줄이 길면 안 읽힌다 */
.note {
  max-width: var(--w-read);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
  text-wrap: pretty;
  white-space: pre-line;
}

.crumbs {
  display: flex;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.crumbs a { color: var(--text-muted); }

.sec { display: flex; flex-direction: column; gap: 14px; }
.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.more, .back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}
/* 44px 터치 영역이 줄 간격을 벌리지 않게 되돌린다 */
.more { margin: -12px 0; }
.back { gap: 6px; }

/* ------------------------------------------------------------ 컴포넌트 */

/* Pill — 시간대·저수율 같은 곁다리 값 */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font-num);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--text-muted);
}

/* ShieldIcon + 라벨 — 계측 인증 */
.badge-measured {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 6px;
  border: 1px solid rgba(34, 229, 132, .35);
  border-radius: var(--r-pill);
  background: rgba(34, 229, 132, .14);
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}

/* VerifiedBadge — 현장인증 */
.badge-site {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 6px;
  border-radius: var(--r-pill);
  background: var(--blue);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}

.badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* PrimaryButton */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--r-button);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 6px 24px rgba(34, 229, 132, .3);
}
.btn-primary:hover { text-decoration: none; filter: brightness(1.06); }
/* 헤더 «앱 받기» — 같은 버튼이되 그림자 없이 작게 */
.btn-primary.sm { padding: 9px 14px; gap: 6px; box-shadow: none; }
.btn-primary.wide { width: 100%; }

/* GhostButton */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-button);
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}
.btn-ghost:hover { text-decoration: none; border-color: var(--text-muted); }

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--stripe-alt-a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  flex-shrink: 0;
}
.byline { display: flex; align-items: center; gap: 10px; }
.byline > div { display: flex; flex-direction: column; gap: 2px; }
.byline b { font-size: 15px; font-weight: 700; }
.byline span { font-size: 13px; color: var(--text-muted); }

/* StripedBox — 사진이 없을 때 */
.photo-ph {
  background: repeating-linear-gradient(135deg,
    var(--stripe-a) 0 10px, var(--stripe-b) 10px 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  font-size: 13px;
  color: var(--text-ghost);
}

/* 조과 대표 사진 */
.hero-photo {
  width: 100%;
  height: 420px;
  border-radius: var(--r-card);
  object-fit: cover;
  display: block;
}

/* ------------------------------------------------------------ 카드·그리드 */

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* AppCard */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  color: var(--text);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card:hover { text-decoration: none; border-color: var(--border-strong); }

/* 조과 카드 — 사진 위, 계측값 아래 */
.card-catch > .photo-ph, .card-catch > img { height: 200px; width: 100%; object-fit: cover; }
.card-catch > .body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-catch .measure { display: flex; align-items: baseline; gap: 8px; }
.card-catch .measure .num { font-size: 22px; line-height: 1; }
.card-catch .measure .unit { font-size: 14px; }
.card-catch .measure .place { font-size: 15px; color: var(--text-soft); }
.meta { font-size: 13px; color: var(--text-muted); }

/* 현장 리포트 카드 — 가로 */
.card-row {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 12px;
}
.card-row > .thumb, .card-row > img.thumb {
  width: 96px;
  height: 72px;
  border-radius: var(--r-chip);
  flex-shrink: 0;
  object-fit: cover;
}
.card-row > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.card-row b { font-size: 16px; font-weight: 700; }

/* 편의시설 카드 — 종류 타일 + 이름 + 요약 */
.card-fac { flex-direction: row; align-items: flex-start; gap: 14px; padding: 16px; }
.card-fac > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-fac b { font-size: 16px; font-weight: 700; }
.tile {
  width: 40px;
  height: 40px;
  border-radius: var(--r-chip);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.tile.lg { width: 48px; height: 48px; border-radius: var(--r-button); }
.tile-toilet { background: var(--marker-toilet); }
.tile-parking { background: var(--marker-parking); }
.tile-accessRoad { background: var(--marker-access-road); }
.tile-cctv { background: var(--marker-cctv); }
.tile-noFishing { background: var(--marker-no-fishing); }

/* 종류 칩 줄 */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text-soft);
  font-size: 15px;
  font-weight: 700;
}
.chip:hover { text-decoration: none; border-color: var(--border-strong); }
.chip[aria-current] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* 제원 — <dl>을 그대로 두고 모양만 격자로. 검색 엔진은 정의 목록으로 읽는다. */
dl.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
dl.spec > div {
  background: var(--surface-inner);
  border-radius: var(--r-chip);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
dl.spec dt { font-size: 13px; color: var(--text-muted); }
dl.spec dd { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }

/* 두 스토어 버튼 — 가로로 나란히, 카드 안(stack)에서는 세로로 */
.store { display: flex; gap: 10px; flex-wrap: wrap; }
.store.stack { flex-direction: column; }
.store .btn-ghost { gap: 8px; }

/* 푸터 약관 링크 */
footer .legal { display: flex; flex-wrap: wrap; gap: 6px 16px; }
footer .legal a { color: var(--text-muted); min-height: 32px; display: inline-flex; align-items: center; }
footer .legal a:hover { color: var(--text); }

/* 앱으로 보내는 카드 — 페이지마다 같은 자리에 */
.cta {
  background: linear-gradient(160deg, var(--grad-navy), var(--grad-teal));
  border: 1px solid var(--cta-border);
  border-radius: var(--r-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta b { font-size: 18px; font-weight: 800; line-height: 1.35; }
.cta span { font-size: 15px; color: var(--text-muted); line-height: 1.6; }

/* 사이드바 곁 목록 */
.side-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-list > b { font-size: 15px; font-weight: 800; }
.side-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: var(--text);
}
.side-list a:hover { text-decoration: none; color: var(--accent); }
.side-list .thumb {
  width: 56px;
  height: 42px;
  border-radius: 8px;
  flex-shrink: 0;
  object-fit: cover;
}
.side-list .num { font-size: 16px; }
.side-list .unit { font-size: 12px; }
.side-list .meta { margin-left: auto; }

/* 경고 — 낚금구역. 틀리면 사람이 벌금을 문다. */
.warn {
  background: rgba(239, 68, 68, .08);
  border: 1px solid rgba(239, 68, 68, .3);
  border-radius: var(--r-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.warn b { font-size: 15px; font-weight: 700; color: var(--red); }
.warn span { font-size: 15px; color: var(--text-soft); }

.headline { display: flex; align-items: center; gap: 14px; }

/* 404 */
.notfound {
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 80px 24px 96px;
}
.notfound .code {
  font-family: var(--font-num);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: var(--text-faint);
}
.notfound .row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }

/* ------------------------------------------------------------ 좁은 화면 */

@media (max-width: 900px) {
  /* 내비를 **아래 줄로 흘린다.** 여는 메뉴가 아니라 그냥 줄바꿈이다 —
     JS가 없고, 크롤러가 링크를 그대로 본다. */
  .top-in {
    height: auto;
    min-height: 56px;
    padding: 0 20px;
    gap: 0;
    flex-wrap: wrap;
    align-items: center;
  }
  .top nav {
    order: 3;
    flex: 0 0 100%;
    gap: 20px;
    margin: 0 -20px;
    padding: 0 20px 4px;
    overflow-x: auto;
  }
  .top nav a { min-height: 40px; }
  /* 헤더의 «앱 받기»는 숨는다. 히어로와 사이드바의 CTA가 그 일을 한다. */
  .top .btn-primary.sm { display: none; }

  /* 히어로는 세로로 쌓고 버튼을 폭 가득. 나란히 두면 버튼이 눌린다. */
  .hero { flex-direction: column; align-items: stretch; gap: 16px; }
  .hero .store { flex-direction: column; }
  .hero .store a { justify-content: center; }

  main { padding: 20px 20px 24px; gap: 28px; }
  main.split { display: flex; flex-direction: column; gap: 24px; }

  h1 { font-size: 24px; }
  .title-measure { font-size: 24px; }
  .title-measure .num { font-size: 32px; }
  .unit { font-size: 16px; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.two { grid-template-columns: minmax(0, 1fr); }
  .card-catch > .photo-ph, .card-catch > img { height: 140px; }
  .hero-photo { height: 280px; }
  footer > div { padding: 20px; }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: minmax(0, 1fr); }
  dl.spec { grid-template-columns: minmax(0, 1fr); }
  .card-catch > .photo-ph, .card-catch > img { height: 200px; }
}