/* SCR-01 스토리형 랜딩. 시안: design/시안/SCR-01_랜딩.png
   탄소공간지도 톤 — 라이트 배경, 대형 타이포, 풀블리드 히어로, 필 버튼.
   A-3 절충: 통계 카운터·정비성과 SCR 제외. */

.lp { color: var(--text); }
.lp .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── 헤더 (히어로 위 투명 → 스크롤 시 화이트 고정) ───────── */
.lp-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 24px; transition: background .2s, box-shadow .2s; }
.lp-header .brand { display: flex; align-items: center; gap: 9px; text-decoration: none; }
/* 정부상징(태극) — 흰배경 투명 PNG. 어두운 히어로 위 가독 위해 옅은 그림자 */
.lp-header .brand img { height: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
.lp-header .brand b { font-size: 16px; font-weight: 700; color: #fff; }
.lp-header .brand .sub { font-size: 12px; color: rgba(255,255,255,.85); display: block; line-height: 1; }
.lp-header nav { display: flex; align-items: center; gap: 22px; }
.lp-header nav a { color: rgba(255,255,255,.92); text-decoration: none; font-size: 15px; font-weight: 500; }
.lp-header .cta-report { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px;
  background: var(--cta); color: #fff; border-radius: 9999px; font-weight: 600; text-decoration: none; }
/* 스크롤 후 — 다크네이비 시험 적용(2026-08-06): CTA 밴드(--brand)와 같은 색으로
   맞춰 상·하 통일감을 본다. 이전 값은 흰 배경 + 어두운 글자. */
.lp-header.solid { background: var(--brand); box-shadow: 0 1px 6px rgba(0,0,0,.22); }
.lp-header.solid .brand b { color: #fff; }
.lp-header.solid .brand .sub { color: rgba(255,255,255,.85); }
.lp-header.solid nav a { color: rgba(255,255,255,.92); }

/* ── 히어로 (스토리 슬라이드) ────────────────────────── */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
/* 휴대폰의 100vh 는 '주소창이 숨겨진 높이'라 히어로가 첫 화면보다 커진다.
   그만큼 아래 내용이 밀려 페이지가 실제보다 길게 느껴진다. dvh 는 보이는 높이다. */
@supports (height: 100dvh) { .hero { min-height: 100dvh; } }
.hero-slides { position: absolute; inset: 0; z-index: 0; }
.hero-slide { position: absolute; inset: 0; background: #123 center/cover no-repeat;
  opacity: 0; transition: opacity 1.4s ease; transform: scale(1.04); }
.hero-slide.is-active { opacity: 1; animation: kenburns 8s ease-out forwards; }
/* 히어로 배경 — 예전에는 style="background-image:url(...)" 를 태그에 박았다.
   CSP 에서 style-src 'unsafe-inline' 을 걷어내려면 인라인 style 속성이 없어야 한다(§3-7).
   파일명이 고정이라 정적 경로로 그대로 옮길 수 있다. */
/* 2번째 슬라이드(hero.jpg)는 운영 요청으로 삭제 — 2026.07.26. 남은 두 장만 번호를 잇는다. */
.hero-slide--1 { background-image: url('../img/hero3.jpg'); }
.hero-slide--2 { background-image: url('../img/hero2.jpg'); }
@keyframes kenburns { from { transform: scale(1.04); } to { transform: scale(1.12); } }
/* 좌측은 텍스트 가독 위해 어둡게, 우측은 하천 경관이 보이도록 밝게 */
.hero-overlay { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg, rgba(8,14,20,.8) 0%, rgba(8,14,20,.52) 42%, rgba(8,14,20,.2) 75%, rgba(8,14,20,.06) 100%); }
.hero-content { position: relative; z-index: 2; color: #fff; padding-top: 64px; width: 100%; }
.hero .eyebrow { letter-spacing: .18em; font-size: 13px; font-weight: 600; color: #bfd5e9;
  text-transform: uppercase; margin: 0 0 18px; }
/* 메시지 크로스페이드 — 겹쳐 배치, 활성만 표시.
   슬라이드마다 문구 길이가 달라 자리를 예약해 두지 않으면 전환할 때 아래 버튼이 튄다.
   예약한 자리를 어느 쪽부터 채우느냐가 문제인데, 둘 다 공짜가 아니다.

     아래부터 채움 : 버튼은 고정, 대신 **제목이 슬라이드마다 위아래로 움직인다**
                    (실측 1366px 에서 31px, 모바일 41px)
     위부터 채움   : 제목·버튼 **모두 고정**, 대신 짧은 슬라이드는 본문과 버튼 사이가 벌어진다

   처음에는 앞을 택했으나, 운영에서 제목이 흔들리는 것이 더 거슬린다는 판단으로
   2026-07-27 에 **위부터 채우기**로 바꿨다. 시선이 먼저 닿는 제목을 고정하는 쪽이 낫다.

   ★ 위부터 채우면 넘칠 때 **아래(=버튼)로** 넘친다. 아래부터 채울 때는 위쪽 빈 사진으로
     넘쳐 무해했지만 이제는 겹친다. 그래서 예약 높이에 여유를 두고, 문구를 고칠 때는
     각 폭에서 블록 높이가 예약을 넘지 않는지 확인해야 한다(전 폭 실측표는 핸드오프 §F-2). */
.hero-msgs { display: grid; }
/* 모든 문구를 **같은 격자 칸**에 겹쳐 둔다. 이러면 상자 높이가 '가장 긴 문구'로
   자동 계산되므로, 폭마다 예약 높이를 손으로 정해 줄 필요가 없다.
   min-height 를 쓰던 방식은 폭이 바뀔 때마다 숫자를 다시 재야 했고, 모자라면 버튼과
   겹치고 남으면 본문과 버튼 사이가 벌어졌다(768px 에서 103px). 격자는 항상 딱 맞는다. */
.hero-msg { grid-area: 1 / 1; align-self: start;
  opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.hero-msg.is-active { opacity: 1; transform: none; pointer-events: auto; }
.hero-msg h1 { font-size: clamp(34px, 5.5vw, 58px); font-weight: 700; line-height: 1.18; margin: 0 0 18px;
  text-shadow: 0 2px 22px rgba(0,0,0,.35); }
.hero-msg .lead { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: rgba(255,255,255,.94);
  max-width: 600px; margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.hero-dots { display: flex; gap: 10px; margin-top: 28px; }
.hero-dots .dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.4); cursor: pointer; transition: background .2s, width .2s; }
.hero-dots .dot.is-active { background: var(--cta); width: 26px; border-radius: 6px; }
.btn-pill { display: inline-flex; align-items: center; gap: 8px; height: 54px; padding: 0 30px;
  border-radius: 9999px; font-weight: 600; font-size: 16px; text-decoration: none; cursor: pointer; border: 0; }
.btn-pill.primary { background: var(--cta); color: #fff; }
.btn-pill.ghost { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.5);
  backdrop-filter: blur(2px); }
/* 앱 다운로드 (§3-9). 히어로의 두 번째 버튼이라 ghost 를 그대로 쓰고 아이콘·용량만 얹는다.
   지도서비스 바로가기가 주 동작이므로 이쪽이 더 눈에 띄면 안 된다. */
.app-dl .ic { width: 18px; height: 18px; flex: 0 0 auto; }
.app-dl .meta { font-style: normal; font-weight: 500; font-size: 13px;
  color: rgba(255,255,255,.72); margin-left: 2px; }
/* 설치 안내 문구 — 어절 중간에서 끊지 않는다 */
.app-note { margin: 10px 0 0; font-size: 13px; line-height: 1.6; word-break: keep-all;
  color: rgba(255,255,255,.82); text-shadow: 0 1px 8px rgba(0,0,0,.35); max-width: 560px; }
.app-note b { font-weight: 700; color: #fff; }
.app-note a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* ── 배경 사진 설명 (i 아이콘, 2026-07-31) ─────────────────────
   "이 사진이 청정 하천·계곡과 무슨 관계지?"에 답한다.
   ★ 오른쪽 아래에 둔다 — 히어로 왼쪽은 제목·버튼이 쓰고, 가운데 아래는 스크롤 안내가 있다.
   ★ 사진 위에 얹히므로 반투명 검정 배경 + blur 로 어떤 사진에서도 읽히게 한다. */
.hero-info { position: absolute; right: 22px; bottom: 22px; z-index: 3; }
.hero-info-btn {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.55);
  background: rgba(0,0,0,.35); color: #fff; cursor: pointer;
  backdrop-filter: blur(3px); transition: background .2s, transform .2s;
}
.hero-info-btn:hover, .hero-info-btn:focus-visible {
  background: rgba(0,0,0,.6); transform: scale(1.08); outline: none;
}
.hero-info-btn svg { width: 19px; height: 19px; }

/* 설명 상자 — 아이콘 위쪽에 오른쪽 정렬로 편다. */
.hero-info-pop {
  position: absolute; right: 0; bottom: 44px; width: min(320px, calc(100vw - 44px));
  padding: 14px 16px; border-radius: 12px;
  background: rgba(12,16,20,.92); color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(4px);
  text-align: left; word-break: keep-all;   /* 어절 중간에서 끊지 않는다 */
}
/* ★ 이 짝 규칙이 없으면 hidden 이 무시된다 — 위 display 지정이 브라우저 기본
   [hidden]{display:none} 을 특정도에서 이긴다(같은 함정을 지도 범례에서 겪었다). */
.hero-info-pop[hidden] { display: none; }
.hero-info-pop .hi-t { display: block; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.hero-info-pop .hi-b { margin: 0 0 8px; font-size: 13px; line-height: 1.65;
  color: rgba(255,255,255,.92); }
.hero-info-pop .hi-b b { color: #7eb3e2; font-weight: 700; }
.hero-info-pop .hi-s { margin: 0; padding-top: 8px; font-size: 11.5px; line-height: 1.5;
  color: rgba(255,255,255,.62); border-top: 1px solid rgba(255,255,255,.16); }
.hero-info-pop .hi-s b { color: rgba(255,255,255,.85); }

.hero .scroll-cue { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); z-index: 2;
  color: rgba(255,255,255,.8); font-size: 12px; letter-spacing: .1em; text-align: center; }

/* ── 섹션 공통 ───────────────────────────────────────── */
/* 섹션 여백 — 운영 지적으로 두 차례 축소했다(2026-07-30 92→56, 2026-07-31 56→40).
   ★ 섹션 사이 간격은 이 값의 **두 배**다(앞 섹션 하단 + 뒤 섹션 상단).
     92px → 실측 184px (화면 절반이 비었다)
     56px → 112px
     40px → **80px**  ← 지금. '지켜요 / 정비 전과 후 / 다행이가 알려드려요' 사이가
                        여전히 넓다는 지적을 반영했다.
   ★ 폭 단계(1600/2100/3000)도 같은 비율로 함께 줄인다 — 한 곳만 고치면
     와이드 모니터에서 다시 벌어진다. 실제로 그래서 두 번 고쳤다. */
.section { padding: 40px 0; }
.section.soft { background: var(--bg-soft); }
.section .eyebrow { letter-spacing: .16em; font-size: 12px; font-weight: 700; color: var(--brand);
  text-transform: uppercase; margin: 0 0 12px; }
.section h2 { font-size: clamp(26px, 3.4vw, 34px); font-weight: 700; margin: 0 0 14px; line-height: 1.3; }
.section .desc { color: var(--text-sub); font-size: 17px; margin: 0 0 26px; max-width: 680px; }

/* 카드 3열 */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.card .ic { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center;
  justify-content: center; font-size: 24px; margin-bottom: 16px; background: var(--bg-soft); }
.card h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.card p { color: var(--text-sub); font-size: 15px; line-height: 1.65; margin: 0; }

/* 참여 3단계 */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { position: relative; padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.step .n { width: 30px; height: 30px; border-radius: 50%; background: var(--cta); color: #fff;
  font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.step h3 { font-size: 18px; margin: 0 0 8px; font-weight: 700; }
.step p { color: var(--text-sub); font-size: 15px; line-height: 1.6; margin: 0; }

/* 전후 비교 */
/* 폭은 다른 섹션(다행이 카드·소식 격자)과 같게 wrap 안쪽을 꽉 채운다 (2026-07-31 운영 지적).
   ★ 한때 max-width:800px 로 묶어 가운데 정렬했는데, 이 섹션만 좁아 화면에서 겉돌았다.
     그 제한은 경산 사진(322px)이 확대돼 흐려지는 것을 막으려던 값이다.
     구례군 사진(600px)으로 바꾼 뒤에는 필요 없다 — wrap 976px 기준 한 칸이 479px 라
     원본이 오히려 크다(0.8배 축소). 확대되지 않으므로 흐려지지 않는다.
   ※ 더 작은 사진으로 다시 바꾸게 되면 이 계산을 다시 해야 한다. */
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* 비율도 사진에 맞춘다. 16/10 으로 두면 위아래 35%가 잘려 나가 나무 그늘과
   시설물 윗부분이 사라진다 — '무엇이 없어졌는지'가 이 사진의 전부다. */
.ba { position: relative; aspect-ratio: 322/307; border-radius: 16px; overflow: hidden;
  background: var(--bg-soft) center/cover; border: 1px solid var(--line);
  display: flex; align-items: flex-end; }
/* 사진은 칸을 채우되 비율을 지킨다. 위 aspect-ratio 가 원본과 같아 실제로는 거의 안 잘린다. */
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s; }
/* 호버 줌 — 소식 카드(.nw-card)와 같은 값으로 맞춘다. 한 화면에서 같은 동작은 같은 세기여야 한다.
   ★ .ba 에 이미 overflow:hidden 이 있어 확대분이 둥근 모서리 밖으로 새지 않는다.
   ★ cursor:pointer 는 주지 않는다 — 이 카드는 링크가 아니다. 커서까지 바꾸면
     누를 수 있는 것처럼 보여 헛클릭을 부른다.
   ★ 동작 최소화(prefers-reduced-motion) 사용자는 tokens.css 의 전역 규칙이 알아서 끈다. */
.ba:hover img { transform: scale(1.04); }
/* 출처 표기 — 남의 사진을 쓰면 어디 것인지 밝힌다. */
/* 출처는 사진 오른쪽 끝에 맞춘다 — 격자와 같은 폭이라 별도 제한이 필요 없다. */
.ba-credit { margin: 10px 0 0; text-align: right;
  font-size: 12px; color: var(--text-sub); }
.ba .tag { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 9999px;
  font-size: 13px; font-weight: 700; color: #fff; }
.ba .tag.before { background: var(--danger); }
.ba .tag.after { background: var(--cta); }
.ba .cap { position: relative; width: 100%; padding: 16px; color: #fff; font-size: 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.65)); }
.ba .placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-sub); font-size: 14px; }

/* ── 하단 CTA 밴드 ───────────────────────────────────── */
.cta-band { background: var(--brand); color: #fff; text-align: center; padding: 42px 24px; }
.cta-band h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 700; margin: 0 0 12px; }
.cta-band p { color: rgba(255,255,255,.9); font-size: 17px; margin: 0 0 30px; }
/* ★ 어두운 밴드 위에서는 버튼을 **흰색으로 뒤집는다** (2026-08-02).
   같은 계열 버튼을 얹으면 배경과 2.36:1 밖에 안 나온다 — UI 요소 기준 3:1 미달이고,
   주 동작인 CTA 가 배경에 묻힌다. **초록이던 때도 정확히 2.36:1 로 같은 결함이었다**
   (파랑 전환이 만든 문제가 아니라 드러낸 문제다). 흰 버튼이면 13.83:1 이다. */
.cta-band .btn-pill.primary { background: #fff; color: var(--brand); }
.cta-band .btn-pill.primary:hover { background: #EAF1F8; }

/* ── 푸터 (SCR-01 시안 2단 구조) ──────────────────────── */
.lp-footer { background: #101a23; color: rgba(255,255,255,.72); padding: 40px 24px 44px; font-size: 14px; }
.lp-footer .wrap { max-width: 1120px; margin: 0 auto; }
.lp-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.lp-footer a:hover { color: #fff; text-decoration: underline; }

/* 1단 — 행안부 블록 | 관련 서비스 */
.foot-row { display: flex; flex-wrap: wrap; gap: 20px 32px; justify-content: space-between; align-items: center; }
.foot-gov .foot-org { display: flex; align-items: flex-start; gap: 13px; }
.foot-taegeuk { height: 34px; width: auto; flex: 0 0 auto; filter: none; }
.foot-org-name { margin: 2px 0 4px; color: #fff; font-size: 15px; }
.foot-org-name b { font-weight: 700; }
.foot-org-links { margin: 0; color: rgba(255,255,255,.6); font-size: 13.5px; }
.foot-related { color: rgba(255,255,255,.6); font-size: 13.5px; }

/* ── 모바일 메뉴 버튼 ───────────────────────────────── */
.nav-toggle { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  cursor: pointer; align-items: center; justify-content: center; }
/* 막대 3개를 가상요소로 그린다 — 이모지·아이콘폰트를 쓰지 않는다(§4-1) */
.nav-bars, .nav-bars::before, .nav-bars::after {
  display: block; width: 22px; height: 2px; border-radius: 2px; background: #fff;
  transition: transform .2s, opacity .2s; }
.nav-bars { position: relative; }
.nav-bars::before, .nav-bars::after { content: ""; position: absolute; left: 0; }
.nav-bars::before { top: -7px; }
.nav-bars::after { top: 7px; }
/* 다크네이비 헤더에서는 막대도 흰색을 유지한다(시험 적용) */
.lp-header.solid .nav-bars,
.lp-header.solid .nav-bars::before,
.lp-header.solid .nav-bars::after { background: #fff; }
/* 열림 = X 자 */
.lp-header.nav-open .nav-bars { background: transparent; }
.lp-header.nav-open .nav-bars::before { transform: translateY(7px) rotate(45deg); }
.lp-header.nav-open .nav-bars::after { transform: translateY(-7px) rotate(-45deg); }

/* ── 반응형 ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .cards, .steps { grid-template-columns: 1fr; }
  .lp-header { height: 58px; padding: 0 14px; }
  .lp-header .brand img { height: 26px; }
  .lp-header .brand b { font-size: 14.5px; }
  .lp-header .brand .sub { font-size: 11px; }
  .nav-toggle { display: flex; }
  /* 링크는 헤더 아래로 펼쳐지는 판으로 바뀐다. 감추기만 하면 갈 곳이 없어진다. */
  .lp-header nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--brand); border-top: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 8px 20px rgba(0,0,0,.22);
    padding: 6px 14px 14px;
    display: none;
  }
  .lp-header.nav-open nav { display: flex; }
  .lp-header nav a { color: rgba(255,255,255,.95); font-size: 16px; padding: 14px 4px;
    border-bottom: 1px solid rgba(255,255,255,.14); }
  .lp-header nav a:last-of-type { border-bottom: 0; }
  .lp-header .cta-report { justify-content: center; height: 48px; margin-top: 12px;
    color: #fff; font-size: 15px; }
}
@media (max-width: 640px) {
  .beforeafter { grid-template-columns: 1fr; gap: 14px; }
  /* 좁은 화면에서는 버튼을 조금 줄이고, 설명 상자가 화면 밖으로 나가지 않게 한다 */
  .hero-info { right: 14px; bottom: 60px; }
  .hero-info-pop { width: calc(100vw - 28px); right: -6px; }
  .hero .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { width: 100%; justify-content: center; }
  /* 세로로 쌓이므로 버튼 안의 내용도 가운데 정렬한다 — 왼쪽 정렬이면 아이콘만 붙어 보인다 */
  .hero .actions .btn-pill { justify-content: center; }
  .app-note { font-size: 12.5px; margin-top: 8px; }
  .hero-content { padding-top: 58px; }

  /* ── 세로 길이 줄이기 (2026-07-26 운영 요청) ──────────────────
     휴대폰에서 페이지가 지나치게 길었다. 가장 큰 원인은 여백이 아니라 **격자가 1열로
     무너지는 것**이었다 — 안전한TV 6장·카드뉴스 4장이 통째로 세로로 쌓였다.
     그 두 격자는 각 컴포넌트 정의부에서 2열로 바꾼다(아래). 여기서는 공통 여백만 줄인다.
     ※ 컴포넌트 규칙을 여기 두면 안 된다 — 뒤쪽의 `max-width:1024px` 블록도 모바일 폭에
       함께 적용돼서, 소스 순서상 나중인 그쪽이 이겨버린다. */
  .section { padding: 26px 0; }
  .section .desc { margin-bottom: 18px; font-size: 15.5px; }
  .section h2 { margin-bottom: 10px; }
  .cta-band { padding: 40px 20px; }
  .cta-band p { margin-bottom: 22px; font-size: 15.5px; }
  .lp-footer { padding: 30px 20px 34px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* ── 다행이 카드뉴스 (행안부 안내·홍보) ─────────────────────────── */
.cardnews{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px;
}
.cn{
  background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:22px 18px;text-align:left;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
  display:flex;flex-direction:column;
  transition:transform .25s, box-shadow .25s;
}
/* 호버 줌 — **카드 통째로** 키운다. 다행이만 커지면 글은 그대로라 어색하다(운영 지적).
   ★ 1.03 인 이유: 카드 232px 기준 한쪽이 3.5px 커진다. 격자 간격이 16px 이라
     옆 카드와 겹치지 않는다(더 키우려면 간격부터 다시 봐야 한다).
   ★ transform 은 배치를 바꾸지 않으므로 다른 카드가 밀리지 않는다.
   ★ z-index 로 위에 올린다 — 커진 그림자가 옆 카드 밑으로 들어가면 잘려 보인다.
   ★ cursor:pointer 는 주지 않는다. 이 카드는 링크가 아니다.
   ★ 동작 최소화(prefers-reduced-motion)는 tokens.css 전역 규칙이 끈다. */
.cn:hover{
  transform:scale(1.03);
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  position:relative;z-index:1;
}
.cn-face{
  width:64px;height:64px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(28,99,191,.10);border-radius:16px;
}
.cn-face img{width:48px;height:48px;object-fit:contain}
.cn h3{font-size:17px;font-weight:700;margin:0 0 8px;color:var(--brand)}
.cn p{font-size:14.5px;line-height:1.65;color:var(--text-sub);margin:0}
.cn p b{color:var(--text)}

/* 영상 카드 — 클릭 전에는 외부 요청이 발생하지 않는다 */
.cn-video{justify-content:flex-start}
.cn-play{
  width:100%;aspect-ratio:16/10;margin-bottom:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  /* 2026-08-02 파랑 전환 — 값을 박아 두면 토큰을 바꿔도 여기만 옛 색으로 남는다 */
  background:linear-gradient(135deg,var(--brand),var(--cta));
  border:0;border-radius:14px;cursor:pointer;color:#fff;
  font-size:14px;font-weight:700;
  transition:transform .15s,box-shadow .15s;
}
.cn-play:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(11,46,79,.28)}
.cn-play-ic{
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.22);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.cn-note{font-size:12.5px;color:var(--text-sub)}
.cn-frame{width:100%;aspect-ratio:16/10;border:0;border-radius:14px;margin-bottom:12px}

@media (max-width:1024px){ .cardnews{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){
  /* 4장이 1열로 쌓이면 이 구역만 화면 하나를 넘긴다. 짧은 카드라 2열로도 읽힌다. */
  .cardnews{grid-template-columns:repeat(2,1fr);gap:10px}
  .cn{padding:15px 13px;border-radius:14px}
  .cn-face{width:44px;height:44px;margin-bottom:8px;border-radius:12px}
  .cn-face img{width:34px;height:34px}
  .cn h3{font-size:14.5px;margin-bottom:6px}
  .cn p{font-size:13px;line-height:1.55}
}
/* ≤640px 의 카드뉴스 배치는 위 '세로 길이 줄이기' 블록에서 2열로 정한다.
   여기서 1열로 되돌리면 그 블록보다 뒤라 이겨버린다(예전에 실제로 1열이었다). */

/* ── '왜 공개하나요' — 다행이가 소개하는 구조 ────────────────────
   카드 격자(딱딱함) 대신, 캐릭터가 옆에서 말풍선으로 안내하는 대화형 레이아웃. */
.why-dh{
  display:grid;grid-template-columns:190px 1fr;gap:28px;align-items:start;
  /* 다행이는 why-dh-bob 으로 위쪽 8px 까지 떠오른다. 여백을 8px 로 두면 제목과
     최고점 사이가 14px 밖에 안 남아 붙어 보인다(실측). 그만큼을 더 벌린다. */
  /* 가운데 정렬하면 구역 제목(왼쪽 끝)과 왼쪽 선이 어긋난다 — 1366px 에서 86px,
     2200px 상자에서는 500px 까지 벌어졌다. 제목과 같은 선에 맞춘다. */
  max-width:900px;margin:32px 0 0;text-align:left;
}
.why-char{
  position:sticky;top:96px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.why-char img{width:100%;max-width:170px;height:auto;object-fit:contain}
.why-char-name{
  font-size:14px;font-weight:700;color:var(--brand);
  background:rgba(28,99,191,.12);border-radius:9999px;padding:5px 16px;
}

/* 말풍선 — 왼쪽(캐릭터)을 향한 꼬리 */
.say{
  position:relative;margin:0 0 12px;
  background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:16px 20px;font-size:16px;line-height:1.7;color:var(--text);
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
.say b{color:var(--brand)}
.say::before{
  content:"";position:absolute;left:-7px;top:24px;width:12px;height:12px;
  background:var(--bg);border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  transform:rotate(45deg);
}
.say-lead{
  background:rgba(28,99,191,.08);border-color:rgba(11,46,79,.18);
  font-size:17px;
}
.say-lead::before{background:rgba(238,243,250,1);border-color:rgba(11,46,79,.18)}

/* 세 가지 소개 — 카드가 아니라 목록으로 부드럽게 */
.why-points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px}
.why-points li{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--bg-soft);border-radius:16px;padding:16px 18px;
}
.why-points .ic{
  font-size:24px;line-height:1;flex:0 0 auto;
  width:44px;height:44px;border-radius:12px;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
.why-points b{display:block;font-size:16.5px;color:var(--text);margin-bottom:4px}
.why-points p{margin:0;font-size:14.5px;line-height:1.65;color:var(--text-sub)}

@media (max-width:768px){
  .why-dh{grid-template-columns:1fr;gap:16px}
  .why-char{position:static;flex-direction:row;justify-content:center;gap:12px}
  .why-char img{max-width:104px}
  .say::before{left:28px;top:-7px;
    border-left:1px solid var(--line);border-bottom:none;
    border-top:1px solid var(--line);transform:rotate(45deg)}
  .say{font-size:15.5px;padding:14px 16px}
  .say-lead{font-size:16px}
}
.cn-play-ic .ic-play{width:18px;height:18px;color:#fff}
/* 영상 카드 — 자체 호스팅 썸네일 위에 재생 버튼 */
.cn-play{position:relative;overflow:hidden;padding:0}
.cn-play img{width:100%;height:100%;object-fit:cover;display:block}
.cn-play .cn-play-ic{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.cn-note span{color:var(--brand);font-weight:600}

/* 아이콘 색 — 의미에 맞춰 구분한다 (물=파랑 / 지도=초록 / 신고=주황).
   §4-2 토큰의 레이어 색 체계와 맞춘다: 하천구역 파랑 계열, 브랜드 그린, 경고 계열. */
.why-points .ic-water  { background:rgba(29,78,216,.10) }
.why-points .ic-water  .ic-svg { color:#1D4ED8 }
.why-points .ic-map    { background:rgba(11,46,79,.10) }
.why-points .ic-map    .ic-svg { color:var(--brand) }
.why-points .ic-report { background:rgba(234,88,12,.10) }
.why-points .ic-report .ic-svg { color:#EA580C }

/* 다행이 등장 애니메이션 — 원본 비율 유지 */
.why-char img{width:100%;max-width:200px;height:auto}

/* ── 안전한TV 카드 ─────────────────────────────────────────────
   썸네일은 자체 호스팅(app/static/img/safetv/) — 목록 표시에 외부 요청이 없다.
   클릭하면 안전한TV 상세 페이지가 새 탭으로 열린다. */
.stv-grid{
  list-style:none;margin:8px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
}
.stv-card{display:block;text-decoration:none;color:inherit}
.stv-thumb{
  position:relative;display:block;border-radius:14px;overflow:hidden;
  background:var(--bg-soft);aspect-ratio:16/9;border:1px solid var(--line);
}
.stv-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.stv-card:hover .stv-thumb img{transform:scale(1.05)}
.stv-dur{
  position:absolute;right:8px;bottom:8px;
  background:rgba(0,0,0,.72);color:#fff;font-size:12px;font-weight:600;
  border-radius:6px;padding:2px 7px;letter-spacing:.02em;
}
.stv-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;
  background:rgba(11,46,79,.82);color:#fff;
  display:flex;align-items:center;justify-content:center;
  transition:background .18s,transform .18s;
}
.stv-play svg{width:20px;height:20px;margin-left:3px}
.stv-card:hover .stv-play{background:var(--cta);transform:translate(-50%,-50%) scale(1.08)}
.stv-cat{
  display:inline-block;margin-top:12px;
  font-size:11.5px;font-weight:700;color:var(--brand);
  background:rgba(28,99,191,.12);border-radius:9999px;padding:3px 10px;
}
.stv-title{
  display:block;margin-top:7px;font-size:15.5px;font-weight:600;line-height:1.5;color:var(--text);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.stv-card:hover .stv-title{color:var(--brand)}
.stv-more{margin:26px 0 0;text-align:center}
.stv-more a{
  display:inline-block;padding:11px 26px;border-radius:9999px;
  border:1px solid var(--line);background:var(--bg);
  color:var(--text);text-decoration:none;font-size:14.5px;font-weight:600;
}
.stv-more a:hover{border-color:var(--cta);color:var(--brand)}

@media (max-width:1024px){ .stv-grid{grid-template-columns:repeat(2,1fr);gap:16px} }
@media (max-width:640px){
  /* 6장이 1열이면 이 구역만 화면 여러 개 분량이었다 */
  .stv-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .stv-title{font-size:13.5px;line-height:1.45;margin-top:5px}
  .stv-cat{margin-top:8px;font-size:11px;padding:2px 8px}
  .stv-play{width:40px;height:40px}
  .stv-play svg{width:16px;height:16px}
  .stv-more{margin-top:18px}
}
/* ≤640px 의 안전한TV 배치도 위 '세로 길이 줄이기' 블록에서 2열로 정한다.
   6장이 1열로 쌓이면 이 구역만 화면 여러 개 분량이 된다. */

/* ══ 청정 하천·계곡 소식 (2026-07-30) ══════════════════════════════════
   이미지 썸네일 + 제목 카드. 안전한TV 카드와 같은 뼈대를 쓰되 두 가지가 다르다.
   ① 비율이 3:4 (세로) — 공모 포스터가 세로형이다. 썸네일 JPG 를 정확히 600x800 으로
      만들어 두었으므로 object-fit:cover 에서 잘리는 곳이 없다.
   ② 격자 폭은 **안전한TV 와 같게** 전폭을 쓴다 (2026-07-30 정정).
      예전에는 max-width:1020px 로 묶어 가운데 정렬했는데, 그러면 넓은 화면에서
      안전한TV 격자(전폭)와 좌우 여백이 어긋난다 — 실측: 1600px 에서 소식 1020px 대
      안전한TV 1272px, 5120px 에서 1020 대 2152. 두 구역이 다른 열에 놓인 것처럼 보인다.
      ★ 열 수는 3 을 유지한다. 안전한TV 처럼 2열로 내리면 3:4 카드가 472→629px 로 커지고
        3장이 2행이 되어 섹션이 526 → 1,510px(2.9배)이 된다. 세로 비율 차이라 '같은 크기'로
        맞추면 반드시 훨씬 길어진다.
      ★ 카드 수가 바뀌면 열 수도 함께 보라 — 2장일 때 3열이면 오른쪽 한 칸이 빈다
        (카드뉴스 섹션에서 실제로 겪은 문제, landing.html 주석 참조). */
/* PC 는 4열 — 소식이 4건이 되면서 3열이면 한 장이 혼자 다음 줄로 내려갔다
   (2026-08-11 운영 지적). 3:4 카드라 4열에서도 265px 폭이 나와 포스터가 읽힌다.
   ★ 4건을 넘으면 첫 줄만 보이고 나머지는 [더보기] 로 편다 — 소식은 계속 늘어난다. */
.nw-grid{
  list-style:none;margin:8px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;
}
.nw-grid li.is-more{ display:none; }
.nw-grid.is-open li.is-more{ display:block; }
.nw-more{
  display:block;margin:22px auto 0;height:44px;padding:0 26px;
  border:1px solid var(--line);border-radius:9999px;background:#fff;
  color:var(--brand);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
}
.nw-more:hover{ background:var(--bg-soft);border-color:var(--cta);color:var(--cta); }
.nw-more[hidden]{ display:none; }
.nw-card{display:block;text-decoration:none;color:inherit}
.nw-thumb{
  display:block;border-radius:14px;overflow:hidden;
  background:var(--bg-soft);aspect-ratio:3/4;border:1px solid var(--line);
}
.nw-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s}
.nw-card:hover .nw-thumb img{transform:scale(1.04)}
.nw-body{display:block}
.nw-cat{
  display:inline-block;margin-top:12px;
  font-size:11.5px;font-weight:700;color:var(--brand);
  background:rgba(28,99,191,.12);border-radius:9999px;padding:3px 10px;
}
.nw-title{
  display:-webkit-box;margin-top:7px;
  font-size:15.5px;font-weight:600;line-height:1.5;color:var(--text);
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.nw-card:hover .nw-title{color:var(--brand)}
.nw-period{display:block;margin-top:5px;font-size:12.5px;color:var(--text-sub)}

/* 초광폭 상한 — 전폭을 그대로 쓰면 3:4 카드가 5120px 화면에서 704x939 까지 커진다.
   한 장이 화면 높이를 거의 채워 포스터 전시장이 되어 버린다. 열 폭에 상한을 두고
   가운데 정렬로 의도된 배치처럼 보이게 한다(2100px 미만은 전폭 그대로 = 안전한TV 와 정렬). */
@media (min-width:2100px){
  .nw-grid{ grid-template-columns:repeat(4,minmax(0,420px)); justify-content:center; }
}
/* 태블릿 — 4열은 좁다. 3열로 떨어뜨린다 (이 구간은 소식 4건이면 3+1 이 되지만
   화면이 좁아 세로 스크롤이 자연스러운 구간이라 허용한다) */
@media (max-width:1023px){
  .nw-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* ★ 안전한TV(≤1024 에서 2열)와 분기점을 다르게 둔다 — 그쪽은 16:9 라 3열이 먼저 좁아지지만
   이쪽 3:4 카드는 더 버틴다. 1024 에서 2열로 떨어뜨리면 1022px 화면에서 3번째 카드가
   혼자 다음 줄로 내려간다(실측). 640 까지 3열을 유지한다. */
@media (max-width:640px){
  /* 좁은 화면에서도 2열을 유지한다 — 3:4 카드가 1열이면 이 구역만 화면 두 개 분량이 된다
     (안전한TV 에서 같은 이유로 2열을 택했다). */
  .nw-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .nw-title{font-size:13.5px;line-height:1.45;margin-top:5px;-webkit-line-clamp:3}
  .nw-cat{margin-top:8px;font-size:11px;padding:2px 8px}
  .nw-period{font-size:11.5px}
}
/* 다행이 부유 애니메이션 — 대기화면에서 쓰던 연출을 여기로 옮겼다 */
.why-char-img{animation:why-dh-bob 2.8s ease-in-out infinite;transform-origin:50% 92%}
@keyframes why-dh-bob{
  0%,100%{transform:translateY(0) rotate(-1.5deg)}
  50%    {transform:translateY(-8px) rotate(1.5deg)}
}

/* ── 푸터 1단 구성 (2026.07.26) ────────────────────────────────
   행안부(헬프데스크) · LX(구축운영, 연락처 없음) · 관련 서비스 를 한 줄에 둔다. */
.lp-footer .foot-row{ align-items:center; gap:24px 40px; }
.foot-org{ display:flex; align-items:center; gap:12px; }
.foot-taegeuk{ height:34px; width:auto; flex:0 0 auto; filter:none; }
/* LX 심볼은 행안부 태극과 마찬가지로 '원색 그대로' 쓴다(반전·변형 금지).
   기관명만 흰 글씨로 표기해 어두운 푸터에서 읽히게 한다.
   높이는 태극과 '실측 심벌 크기'로 맞춘다 — 태극은 캔버스에 여백 12.5%가 있어
   CSS 34px 지정 시 실제 심벌은 29.8px 다. LX 는 여백이 없으므로 30px 로 둔다. */
/* 태극은 원형(약 30×30)이고 LX 는 가로로 넓은 문자 마크(약 65×30)라, 높이를 같게 두면
   덩어리가 두 배로 보인다(운영 지적). 균일 축소로 높이를 낮춰 시각 무게를 맞춘다.
   ★ 비율·색은 건드리지 않는다 — 기관 CI 변형 금지. */
.foot-lx-ci{ height:22px; width:auto; flex:0 0 auto; filter:none; }
.foot-org-name{ margin:0 0 3px; color:#fff; font-size:15px; font-weight:400; }
.foot-org-name b{ font-weight:700; }
.foot-org-links{ margin:0; font-size:13.5px; color:rgba(255,255,255,.72); }
.foot-related{ font-size:13.5px; }

@media (max-width:900px){
  .lp-footer .foot-row{ flex-direction:column; align-items:flex-start; gap:18px; }
}
/* 푸터 오른쪽 블록 — 관련 서비스 / 개인정보처리방침 */
.foot-right{ margin-left:auto; text-align:right; }
.foot-right .foot-related{ margin:0 0 6px; }
.foot-policy{ margin:0; font-size:13.5px; }
.foot-policy a{ font-weight:600; color:#fff; }
.foot-policy span{ color:rgba(255,255,255,.6); }
@media (max-width:900px){
  .foot-right{ margin-left:0; text-align:left; }
}

/* ══ 모바일 마무리 (2026-07-27 운영 피드백) ═══════════════════════════
   ★ 반드시 파일 **맨 끝**에 둔다.
     이 파일은 컴포넌트 정의가 미디어쿼리보다 뒤에 오는 곳이 여럿이라, 중간에 두면
     조용히 무력화된다. 실제로 333행 `.why-char img{max-width:200px}` 이 308행
     `@media(max-width:768px){.why-char img{max-width:104px}}` 를 덮어, 휴대폰에서
     다행이가 187px 로 나오고 있었다. 미디어쿼리는 특정도를 올려주지 않는다. */

@media (max-width: 640px) {
  /* 히어로 — 버튼이 화면 폭을 꽉 채워 '길다'고 느껴졌다. 내용만큼만 차지하게 한다 */
  .hero .actions { align-items: flex-start; }
  .hero .actions .btn-pill { width: auto; height: 48px; padding: 0 24px; font-size: 15px; }
  /* 슬라이드 표시점 — 휴대폰에서만 위아래로 두꺼워지던 자리.
     tokens.css 의 `@media(pointer:coarse){a,button{min-height:44px}}` 가 걸려서
     10px 짜리 점 하나가 **44px 높이**가 됐다(실측). 버튼 아래에 점 두 개만 떠 있는
     빈 띠가 생기는 원인. 데스크톱에서는 pointer:fine 이라 보이지 않아 놓치기 쉽다.

     점의 모양은 가상요소로 옮기고 버튼은 투명한 터치 영역만 맡는다 —
     손가락 목표(24px)는 남기면서 높이는 되돌린다. */
  .hero-dots { margin-top: 12px; gap: 8px; }
  .hero-dots .dot {
    min-height: 0; width: 24px; height: 24px; background: none; border-radius: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .hero-dots .dot::before {
    content: ""; display: block; width: 9px; height: 9px; border-radius: 50%;
    background: rgba(255,255,255,.45); transition: background .2s, width .2s;
  }
  .hero-dots .dot.is-active { background: none; width: 24px; }
  .hero-dots .dot.is-active::before { width: 22px; border-radius: 5px; background: var(--cta); }
  .hero .scroll-cue { bottom: 16px; font-size: 11px; }
  /* 히어로를 화면 꽉 채우면 버튼 아래로 빈 사진만 200px 넘게 남아 '길다'고 느껴진다.
     조금 줄이면 그 여백이 절반이 되고, 다음 구역이 살짝 보여 스크롤을 유도한다. */
  .hero { min-height: 86vh; }

  /* '하천·계곡, 함께 지켜요' — 랜딩에서 가장 긴 구역(1,077px)이었다 */
  .why-char img { max-width: 96px; }
  .why-char-name { font-size: 13px; }
  .why-dh { gap: 10px; }
  .say { font-size: 14.5px; line-height: 1.6; padding: 12px 14px; margin-bottom: 10px; }
  .say-lead { font-size: 15px; }
  .why-points { margin-top: 12px; gap: 10px; }
  .why-points li { padding: 12px 13px; gap: 10px; }
  .why-points .ic { width: 34px; height: 34px; }
  .why-points b { font-size: 15px; margin-bottom: 2px; }
  .why-points p { font-size: 13.5px; line-height: 1.55; }

  /* 하단 CTA — 위아래 여백이 과했다 */
  .cta-band { padding: 34px 20px; }
  .cta-band h2 { font-size: 21px; margin-bottom: 8px; }
  .cta-band p { font-size: 14px; margin-bottom: 16px; }
  .cta-band .btn-pill { height: 46px; padding: 0 22px; font-size: 14.5px; }
}

/* 푸터 — 두 기관 CI 를 한 줄에 나란히 (운영 요청).
   세로로 쌓이면서 행정안전부와 LX 가 위아래 2줄로 갈라져 있었다. */
@media (max-width: 900px) {
  .lp-footer { padding: 24px 18px 28px; }
  .lp-footer .foot-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 14px 10px; align-items: start;
  }
  /* 관련 서비스·개인정보처리방침은 두 칸을 가로질러 아래에 */
  .foot-right {
    grid-column: 1 / -1; margin-left: 0; text-align: left;
    padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12);
  }
  .foot-org { gap: 9px; align-items: center; }
  .foot-taegeuk { height: 28px; }
  .foot-lx-ci { height: 20px; }
  .foot-org-name { font-size: 13px; margin: 0 0 3px; line-height: 1.35; }
  /* 좁은 칸이라 '헬프데스크 044-205-6472' 가 '044-' / '205-6472' 로 끊겼다.
     번호는 통째로 유지하고 줄바꿈은 낱말 경계에서만 일어나게 한다.
     번호가 둘이 되면서(2026-08-04) .tel-group 으로 한 덩어리를 만든다 —
     안 그러면 '6473' 만 다음 줄에 홀로 남는다. */
  .foot-org-links { font-size: 11.5px; line-height: 1.45; word-break: keep-all; }
  .foot-org-links a { white-space: nowrap; }
  .foot-org-links .tel-group { white-space: nowrap; }
  .foot-org-name b { word-break: keep-all; }
  .foot-related, .foot-policy { font-size: 12.5px; }
}

@supports (height: 100dvh) {
  @media (max-width: 640px) { .hero { min-height: 86dvh; } }
}

/* ══ 큰 화면·와이드 모니터 (2026-07-27 운영 피드백) ═══════════════════
   지금까지 폭 상한이 1,120px 한 종류뿐이라, 2560px 와이드 모니터에서는 제목·본문·버튼이
   화면 가운데 좁은 기둥에 갇혀 '작은 섬'처럼 보였다(실측: 내용이 화면 폭의 44%).
   1,600px 아래로는 시안 비율을 그대로 두고, 그 위에서만 폭·글자를 단계적으로 키운다.

   (문구 상자 높이는 격자 겹침으로 자동 계산되므로 여기서 따로 손댈 것이 없다 — `.hero-msgs` 참조) */

@media (min-width: 1600px) {
  .lp .wrap, .lp-footer .wrap { max-width: 1320px; }
  /* 헤더는 본문 열과 어깨를 맞춘다. 화면 전폭을 쓰면 와이드에서 로고와 메뉴가
     양 끝으로 멀어져 한 화면 안의 요소로 보이지 않는다. */
  .lp-header { padding: 0 calc((100% - 1320px) / 2); }
  .hero-msg h1 { font-size: 64px; }
  .hero-msg .lead { font-size: 20px; max-width: 700px; }
  .section { padding: 46px 0; }
  .section h2 { font-size: 38px; }
  .section .desc { font-size: 18px; }
  .cta-band { padding: 48px 24px; }
}

@media (min-width: 2100px) {
  .lp .wrap, .lp-footer .wrap { max-width: 1560px; }
  .lp-header { padding: 0 calc((100% - 1560px) / 2); }
  .hero-msg h1 { font-size: 74px; }
  .hero-msg .lead { font-size: 21px; max-width: 780px; }
  .section { padding: 52px 0; }
  .section h2 { font-size: 42px; }
  /* 히어로 어둠은 화면 비율로 깔린다. 폭이 넓어지면 글자 오른쪽 끝이 밝은 구간에 걸쳐
     가독이 떨어지므로, 어두운 구간을 오른쪽으로 늘린다. */
  .hero-overlay { background: linear-gradient(100deg,
      rgba(8,14,20,.82) 0%, rgba(8,14,20,.62) 46%, rgba(8,14,20,.26) 78%, rgba(8,14,20,.06) 100%); }
}

/* 32:9 슈퍼울트라와이드 (5120x1440 등) — 2026-07-27 운영 환경 반영.
   1,560px 상한으로는 5120px 화면의 30% 밖에 못 쓴다. 글줄이 지나치게 길어지지 않는
   선에서 폭·글자를 한 단계 더 키운다(본문 글줄은 max-width 로 따로 묶어 둔다). */
@media (min-width: 3000px) {
  .lp .wrap, .lp-footer .wrap { max-width: 2200px; }
  .lp-header { padding: 0 calc((100% - 2200px) / 2); }
  .lp-header .brand b { font-size: 19px; }
  .lp-header .brand img { height: 36px; }
  .lp-header nav a { font-size: 17px; }
  .lp-header { height: 76px; }

  .hero-msg h1 { font-size: 88px; }
  .hero-msg .lead { font-size: 24px; max-width: 900px; }
  .hero .btn-pill { height: 62px; padding: 0 38px; font-size: 19px; }

  .section { padding: 60px 0; }
  .section h2 { font-size: 48px; }
  .section .desc { font-size: 20px; }
  /* 다행이 대화 블록도 같이 키운다 — 2,200px 안에서 900px 은 다시 좁아 보인다 */
  .why-dh { max-width: 1200px; }
  .say { font-size: 18px; padding: 20px 24px; }
  .say-lead { font-size: 19px; }
  .why-points b { font-size: 18px; }
  .why-points p { font-size: 16px; }

  .cta-band { padding: 62px 24px; }
  .cta-band h2 { font-size: 48px; }
  .cta-band p { font-size: 20px; }
  .cta-band .btn-pill { height: 62px; padding: 0 38px; font-size: 19px; }
}

/* ══════════════════════════════════════════════════════════════════
   히어로 디오라마 전환 + 시스템 CI (2026-08-02)
   ★ 되돌리려면 **이 블록만 지우면 된다.** 위 규칙은 손대지 않았다.

   히어로가 어두운 항공사진에서 **흰 배경 디오라마**로 바뀌면서, 그 위에 얹혀
   있던 흰 글자·투명 헤더·ghost 버튼이 전부 안 보이게 된다. 아래는 그 뒤집기다.
   ══════════════════════════════════════════════════════════════════ */

/* ── 헤더 — 히어로가 흰색이라 처음부터 흰 바탕이어야 한다 ───────── */
.lp-header{ background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.lp-header .brand img[alt="행정안전부 정부상징"]{ filter:none; }   /* 흰 바탕엔 그림자 불필요 */
.lp-header .brand .sub{ color:var(--text-sub); font-size:11.5px; }
.lp-header nav a{ color:var(--text); }
/* CI — 헤더는 **약칭형**이다. 정식형은 원 안 천·곡이 38px 에서 뭉갠다(실측) */

/* ── 히어로 — 흰 배경에 디오라마가 떠 있다 (콘티 §1: 여백이 곧 '청정') ── */
.hero{ background:#fff; min-height:auto; padding:96px 0 40px; }
@supports (height:100dvh){ .hero{ min-height:auto; } }
.hero-slides,.hero-overlay,.hero-dots{ display:none; }
.hero-content{ padding-top:0; color:var(--text); }
/* 디오라마는 **잘리면 안 된다**(섬 전체가 하나의 그림이다) → contain */
.hero .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
.hero-art{ display:block; width:100%; height:auto; }

.hero .eyebrow{ color:var(--cta); }
.hero-msg h1{ color:var(--brand); text-shadow:none; }
.hero-msg .lead{ color:var(--text-sub); text-shadow:none; }
.hero-msg{ opacity:1; transform:none; pointer-events:auto; }
.hero-msg:not(.is-active){ display:none; }        /* 슬라이드 회전 중지 */

/* 어두운 배경 전제였던 것들 뒤집기 */
.btn-pill.ghost{ background:#fff; color:var(--brand); border:1px solid var(--line);
                 backdrop-filter:none; }
.app-dl .meta{ color:var(--text-sub); }
.app-note{ color:var(--text-sub); text-shadow:none; }
.app-note b{ color:var(--text); }
.app-note a{ color:var(--cta); }
.hero .scroll-cue{ color:var(--text-sub); }
.hero-info{ position:static; margin-top:14px; }
.hero-info-btn{ border-color:var(--line); background:#fff; color:var(--text-sub);
                backdrop-filter:none; }
.hero-info-pop{ bottom:auto; top:44px; right:auto; left:0; }

@media (max-width:900px){
  /* ★ 세로 화면에서는 두 칸이 안 된다. 그림을 위, 글을 아래로 쌓는다.
     디오라마는 가로로 긴 그림이라 세로 화면에서 작아진다 — 세로 전용 컷이 필요하다(미제작). */
  .hero .wrap{ grid-template-columns:1fr; gap:14px; }
  .hero{ padding:84px 0 28px; }
}
/* 두 칸 배치의 왼쪽(글) — 위 .hero .wrap 격자의 첫 칸 */
.hero-text{ min-width:0; }
.hero-art{ min-width:0; border-radius:12px; }
@media (max-width:900px){
  .hero-art{ order:-1; }        /* 세로 화면에서는 그림을 위로 */
}
/* (i) 배경사진 설명 — 설명 대상이던 **항공사진이 사라졌다**. 남겨 두면 없는 사진을 설명한다 */
.hero-info{ display:none; }

/* ── CI 는 히어로로 옮겼다 (2026-08-02) ──────────────────────────────
   헤더(40px 대)에서는 원 안의 천·곡이 읽히지 않는다. 크기를 46px 로 키워도,
   원 안 글자를 남색으로 바꿔도 안 됐다. **그릇을 키우는 게 아니라 자리를 옮기는 게 맞았다.**
   헤더는 글자 워드마크로 되돌리고, CI 는 히어로에서 80px 로 보인다. */
.hero-ci{ display:block; width:auto; height:80px; margin:0 0 20px; }

@media (max-width:900px){
  /* ★ 모바일에서 그림을 위로 올렸던 것을 되돌린다.
     제목보다 그림이 먼저 오면 **첫 화면에서 메시지가 밀려난다.** 글이 먼저다. */
  .hero-art{ order:0; }
  /* ★ 모바일은 **폭 기준**으로 키운다. 높이로 48~56px 를 주니 원이 31px 로 줄어
     천·곡이 뭉개져 '청정 하계' 로 읽혔다(운영 지적). 칸 폭을 최대한 쓴다. */
  .hero-ci{ width:min(100%, 340px); height:auto; margin-bottom:14px; }
}
@media (max-width:640px){
  .hero-ci{ width:min(100%, 320px); height:auto; }
}

/* ★ 헤더를 **항상 흰 배경**으로 바꿔 놓고 그 위 요소들의 흰색을 안 고쳤다(2026-08-02 실수).
   원래는 `.lp-header.solid` 가 붙었을 때만 어두운 색으로 바뀌는 구조였는데,
   이제 solid 가 늘 켜진 것과 같으므로 색도 늘 어두워야 한다.
   → 시스템 이름이 **흰 글자 / 흰 배경**으로 사라져 있었다(모바일에서 발견). */
.lp-header .brand b{ color:var(--text); }
.nav-bars, .nav-bars::before, .nav-bars::after{ background:var(--text); }
.lp-header.nav-open .nav-bars{ background:transparent; }

/* ── CI 를 헤더로 되돌린다 (2026-08-02 운영 결정) ────────────────────
   낱말이 정식명 전체('청정 하천계곡 관리 시스템')로 바뀌어 종횡비가 7.12:1 이다.
   ★ 길어진 만큼 헤더에 자리가 필요하다 — 64→80px. 그래야 CI 를 44px 로 둘 수 있고,
     44px 이면 천·곡 원이 28px 라 주황이 확실히 보인다.
   ★ 헤더 글자 워드마크는 이제 CI 가 대신하므로 숨긴다(둘 다 두면 이름이 두 번 나온다). */
.lp-header{ height:68px; }
.lp-header .brand{ gap:11px; }
.lp-header .brand img[alt="행정안전부 정부상징"]{ height:34px; }
.lp-header .brand b{ display:none; }
.hero{ padding-top:96px; }

@media (max-width:1024px){
  /* 나비게이션과 자리를 다툰다 — CI 를 조금 줄이고 정부상징도 함께 줄인다 */
  .lp-header{ height:68px; }
  .lp-header .brand img[alt="행정안전부 정부상징"]{ height:30px; }
  .hero{ padding-top:90px; }
}
@media (max-width:640px){
  /* 좁은 화면 — '행정안전부' 줄을 접고 CI 를 한 줄로. 그래야 폭이 나온다 */
  .lp-header{ height:56px; }
  .lp-header .brand .sub{ display:none; }
  .lp-header .brand img[alt="행정안전부 정부상징"]{ height:26px; }
  .hero{ padding-top:84px; }
}

/* ── 헤더에서 정부상징·'행정안전부' 제거 (2026-08-02 운영 결정) ──────────
   브랜드 자리에 CI 하나만 남는다. 두 줄 쌓기가 없어졌으므로 헤더를 다시 낮춘다.
   ★ 남은 규칙들이 사라진 요소를 가리키고 있으면 다음 사람이 헷갈린다 — 여기서 정리한다. */
.lp-header{ height:68px; }
.lp-header .brand{ gap:0; }
.hero{ padding-top:96px; }

@media (max-width:1024px){
  .lp-header{ height:62px; }
  .hero{ padding-top:90px; }
}
@media (max-width:640px){
  /* 종횡비 7.12:1 이라 폭이 관건이다. 32px 이면 228px — 햄버거 자리를 남긴다 */
  .lp-header{ height:56px; padding:0 16px; }
  .hero{ padding-top:84px; }
}

/* 히어로 CI 제거 (2026-08-02) — 헤더에 같은 CI 가 있어 이름이 두 번 나왔다.
   규칙이 남아 있으면 다음 사람이 '어딘가 쓰이나' 하고 찾게 된다. */
.hero-ci{ display:none; }

/* ★ 신고 버튼 글자색 (2026-08-02) — 파란 알약 위 글자가 **검정**으로 나오고 있었다.
   `.lp-header.solid nav a{color:var(--text)}` 가 `.lp-header .cta-report{color:#fff}`
   보다 특정도가 높아 버튼까지 잡아먹었다. 이용안내는 헤더에 solid 가 늘 붙어 있어
   항상 검정이었고, 랜딩도 스크롤하면 같은 상태가 됐다.
   → 버튼은 배경이 파랑이므로 어느 상태에서든 흰 글자여야 한다(대비 5.86:1). */
.lp-header nav a.cta-report,
.lp-header.solid nav a.cta-report{ color:#fff; }

/* ══════════════════════════════════════════════════════════════════
   헤더 다크네이비 시험 적용 (2026-08-06) — CTA 밴드(--brand)와 통일감 판단용.
   ★ 되돌리려면 **이 블록만 지우면 된다.**
   위 2026-08-02 블록이 헤더를 '항상 흰색'으로 고정하고 있어, 그보다 뒤에서 덮는다.
   ══════════════════════════════════════════════════════════════════ */
.lp-header{ background:var(--brand); box-shadow:0 1px 6px rgba(0,0,0,.25); }
.lp-header nav a{ color:rgba(255,255,255,.93); }
.lp-header .brand b{ color:#fff; }
.nav-bars, .nav-bars::before, .nav-bars::after{ background:#fff; }
.lp-header.nav-open .nav-bars{ background:transparent; }

/* 안전신문고 — 흰 바탕 + 남색 글자 (2026-08-06 운영 지시: CTA 밴드 '청정하계 지도 보기'와 동일 문법).
   ★ 880줄대의 `.lp-header.solid nav a.cta-report{color:#fff}` 와 같은 특이도로 뒤에서 이긴다. */
.lp-header nav a.cta-report,
.lp-header.solid nav a.cta-report{ background:#fff; color:var(--brand); }
.lp-header nav a.cta-report:hover{ background:#EAF1F8; }
/* ══ 되찾은 청정 계곡 슬라이더 (2026-08-06) — 계곡별 사진 2장을 나란히 ══ */
.vslider{ position:relative; }
.vs-track{ display:grid; position:relative; }
.vs-slide{ grid-area:1/1; display:grid; grid-template-columns:1fr 1fr; gap:14px;
  opacity:0; visibility:hidden; transition:opacity .8s ease, visibility 0s .8s; }
.vs-slide.is-on{ opacity:1; visibility:visible; transition:opacity .8s ease; }
.vs-slide img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border-radius:14px; box-shadow:0 8px 24px rgba(12,38,58,.14); display:block; }
.vs-place{ grid-column:1/-1; text-align:center; font-size:14.5px; font-weight:700;
  color:var(--text); margin-top:2px; }
/* 좌우 이동 — 44px 터치 목표. 화살표는 이모지 아닌 CSS 선으로 그린다 */
.vs-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px;
  border:0; border-radius:50%; background:rgba(6,20,30,.45); cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2; }
.vs-nav:hover{ background:rgba(6,20,30,.65); }
.vs-prev{ left:10px; } .vs-next{ right:10px; }
.vs-nav::before{ content:""; width:11px; height:11px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff; }
.vs-prev::before{ transform:rotate(45deg) translate(2px,-2px); }
.vs-next::before{ transform:rotate(-135deg) translate(2px,-2px); }
.vs-dots{ display:flex; gap:2px; justify-content:center; margin-top:10px; }
/* ★ tokens.css 가 터치 기기에서 버튼 최소 높이 44px 를 강제해 9px 점이 세로로
   늘어난 알약이 됐다(2026-08-06 모바일 캡처). 점은 8px 로 작게 그리되,
   버튼 자체를 32px 투명 원으로 두어 터치 목표를 지킨다. */
.vs-dots button{ width:32px; height:32px; min-height:0 !important; padding:0; border:0;
  border-radius:50%; background:transparent; cursor:pointer;
  display:grid; place-items:center; }
.vs-dots button::before{ content:""; width:8px; height:8px; border-radius:50%;
  background:var(--line); transition:background .3s, transform .3s; }
.vs-dots button[aria-current="true"]::before{ background:var(--brand); transform:scale(1.3); }
/* 크레딧 — 사진 오른쪽 끝, 계곡 이름(.vs-place)과 같은 줄. 점(dots)보다 위 */
.vslider .ba-credit{ position:absolute; right:2px; bottom:33px; margin:0; }
@media (max-width:640px){ .vslider .ba-credit{ bottom:31px; } }
@media (max-width:640px){
  /* 세로 화면에서는 두 장을 위아래로 쌓는다 */
  .vs-slide{ grid-template-columns:1fr; gap:10px; }
  .vs-nav{ width:40px; height:40px; }
}
@media (prefers-reduced-motion:reduce){ .vs-slide{ transition:none; } }

/* ══ 히어로 영상 (2026-08-06) — 오른쪽 고정, 반복 없음 ══════════════════ */
.hero-video{ width:100%; height:auto; border-radius:14px; display:block;
  box-shadow:0 18px 44px rgba(12,38,58,.18); background:#122; }
/* 문구 슬라이드가 바뀌어도 버튼·화면이 위아래로 안 움직이게 —
   문구 두 벌을 같은 칸에 겹쳐 두면 칸 높이가 '더 긴 쪽'으로 고정된다 */
.hero-msgs{ display:grid; }
.hero-msgs .hero-msg{ grid-area:1/1; display:block !important;
  visibility:hidden; opacity:0; transition:opacity .8s ease; }
.hero-msgs .hero-msg.is-active{ visibility:visible; opacity:1; }

/* ══ 히어로 상하 여백 (2026-08-06 운영 지시) ══════════════════════════
   · 헤더와 히어로 사이가 붙어 보인다 → 위 여백을 넓힌다
   · '아래로 ▾' 가 영상에 거의 붙어 있다 → 아래 여백을 늘려 뚝 떨어뜨린다
   한 화면(1080p 기준)에 히어로 전체가 들어오는 범위로 잡았다. */
.hero{ padding:132px 0 100px; }
.hero .scroll-cue{ bottom:34px; }
@media (max-width:900px){
  .hero{ padding:96px 0 76px; }
  .hero .scroll-cue{ bottom:22px; }
}

/* ══ 모바일 히어로 B안 (2026-08-06 운영 결정) ══════════════════════════
   세로로 그냥 쌓으면 영상이 첫 화면 밖으로 밀려 '글 따로 그림 따로'가 된다.
   제목(메시지 우선) → 영상 → 행동 버튼 순으로 한 덩어리로 묶어 한 화면에 담는다.
   .hero-text 를 display:contents 로 풀어 그 안의 블록들을 직접 정렬한다. */
@media (max-width:900px){
  .hero{ padding:84px 0 60px; }
  .hero .wrap{ display:flex; flex-direction:column; gap:12px; }
  .hero-text{ display:contents; }
  .hero-msgs{ order:1; }
  .hero-stage{ order:2; }
  /* 지도 보기 + 앱 받기를 한 줄에 (2026-08-06 운영 지시).
     아래쪽의 세로 쌓기 규칙(278행대)을 여기서 되돌린다 — 좁은 폭에 맞게 글자·패딩을 줄인다 */
  .actions{ order:3; margin-top:2px; flex-direction:row !important; align-items:center !important;
            justify-content:center; flex-wrap:nowrap; gap:8px; }
  .hero .actions .btn-pill{ width:auto !important; height:46px; padding:0 13px;
            font-size:13.5px; white-space:nowrap; }
  /* 390px 폭 실측 예산: 다운로드 아이콘을 접어야 두 버튼이 한 줄에 안전하게 든다 */
  .hero .actions .app-dl .ic{ display:none; }
  .hero .actions .app-dl .meta{ font-size:11px; }
  .app-note{ order:4; margin-top:0; }
  .hero-dots{ order:5; }
  .hero-msg h1{ font-size:clamp(26px,7.2vw,34px); }
  .hero-msg .lead{ margin-bottom:0; }
  .hero-video{ border-radius:12px; }
  .hero .scroll-cue{ bottom:18px; }
}

/* ══ 히어로 글자 2pt 축소 (2026-08-07 운영 지시) — 제목·리드 ══ */
.hero-msg h1{ font-size:clamp(32px, 5.2vw, 56px); }
.hero-msg .lead{ font-size:clamp(14px, 1.9vw, 17px); }
@media (min-width:1600px){ .hero-msg h1{ font-size:62px; } .hero-msg .lead{ font-size:18px; } }
@media (min-width:2100px){ .hero-msg h1{ font-size:72px; } .hero-msg .lead{ font-size:19px; } }
@media (min-width:3000px){ .hero-msg h1{ font-size:86px; } .hero-msg .lead{ font-size:22px; } }
@media (max-width:900px){ .hero-msg h1{ font-size:clamp(24px, 6.8vw, 32px); } }

/* 생성형 AI 고지 — 영상 오른쪽 아래, 작고 차분하게 */
.hero-ai-note{ margin:8px 2px 0; text-align:right; font-size:13.5px;
  color:var(--text-sub); word-break:keep-all; }
@media (max-width:900px){ .hero-ai-note{ font-size:13px; margin-top:6px; } }