/* 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(--green-cta); color: #fff; border-radius: 9999px; font-weight: 600; text-decoration: none; }
/* 스크롤 후 */
.lp-header.solid { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.lp-header.solid .brand b { color: var(--text); }
.lp-header.solid .brand .sub { color: var(--text); }
.lp-header.solid nav a { color: var(--text); }

/* ── 히어로 (스토리 슬라이드) ────────────────────────── */
.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,20,14,.8) 0%, rgba(8,20,14,.52) 42%, rgba(8,20,14,.2) 75%, rgba(8,20,14,.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: #bfe9cf;
  text-transform: uppercase; margin: 0 0 18px; }
/* 메시지 크로스페이드 — 겹쳐 배치, 활성만 표시 */
/* 슬라이드마다 문구 길이가 달라(실측 183px / 214px) 자리를 예약해 두지 않으면
   전환할 때 아래 버튼이 위아래로 튄다. 다만 예약한 자리를 위에서부터 채우면
   짧은 문구일 때 문구와 버튼 사이가 크게 벌어진다(실측 78px).
   그래서 문구를 박스 **아래쪽에 붙인다** — 남는 공간은 제목 위로 가고,
   문구와 버튼 사이는 슬라이드가 바뀌어도 항상 같다. */
.hero-msgs { position: relative; min-height: 216px; }
.hero-msg { position: absolute; left: 0; right: 0; bottom: 0; top: auto;
  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(--green-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(--green-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); }
.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; }

/* ── 섹션 공통 ───────────────────────────────────────── */
.section { padding: 92px 0; }
.section.soft { background: var(--bg-soft); }
.section .eyebrow { letter-spacing: .16em; font-size: 12px; font-weight: 700; color: var(--green-primary);
  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 40px; 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(--green-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; }

/* 전후 비교 */
.beforeafter { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ba { position: relative; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden;
  background: var(--bg-soft) center/cover; border: 1px solid var(--line);
  display: flex; align-items: flex-end; }
.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(--green-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(--green-primary); color: #fff; text-align: center; padding: 80px 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; }
.cta-band .btn-pill.primary { background: var(--green-cta); }

/* ── 푸터 (SCR-01 시안 2단 구조) ──────────────────────── */
.lp-footer { background: #10231a; 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-name .unit { color: rgba(255,255,255,.8); font-weight: 500; }
.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: var(--text); }
/* 열림 = 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: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    padding: 6px 14px 14px;
    display: none;
  }
  .lp-header.nav-open nav { display: flex; }
  .lp-header nav a { color: var(--text); font-size: 16px; padding: 14px 4px;
    border-bottom: 1px solid var(--line); }
  .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 .actions { flex-direction: column; align-items: stretch; }
  .hero .actions .btn { width: 100%; justify-content: center; }
  .hero-msgs { min-height: 250px; }
  .hero-content { padding-top: 58px; }

  /* ── 세로 길이 줄이기 (2026-07-26 운영 요청) ──────────────────
     휴대폰에서 페이지가 지나치게 길었다. 가장 큰 원인은 여백이 아니라 **격자가 1열로
     무너지는 것**이었다 — 안전한TV 6장·카드뉴스 4장이 통째로 세로로 쌓였다.
     그 두 격자는 각 컴포넌트 정의부에서 2열로 바꾼다(아래). 여기서는 공통 여백만 줄인다.
     ※ 컴포넌트 규칙을 여기 두면 안 된다 — 뒤쪽의 `max-width:1024px` 블록도 모바일 폭에
       함께 적용돼서, 소스 순서상 나중인 그쪽이 이겨버린다. */
  .section { padding: 48px 0; }
  .section .desc { margin-bottom: 24px; font-size: 15.5px; }
  .section h2 { margin-bottom: 10px; }
  .cta-band { padding: 52px 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;
}
.cn-face{
  width:64px;height:64px;margin-bottom:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(34,197,94,.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(--green-primary)}
.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;
  background:linear-gradient(135deg,#0E7A4E,#22c55e);
  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(14,122,78,.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 밖에 안 남아 붙어 보인다(실측). 그만큼을 더 벌린다. */
  max-width:900px;margin:32px auto 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(--green-primary);
  background:rgba(34,197,94,.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(--green-primary)}
.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(34,197,94,.08);border-color:rgba(14,122,78,.18);
  font-size:17px;
}
.say-lead::before{background:rgba(238,250,243,1);border-color:rgba(14,122,78,.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(--green-primary);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(14,122,78,.10) }
.why-points .ic-map    .ic-svg { color:var(--green-primary) }
.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(14,122,78,.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(--green-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(--green-primary);
  background:rgba(34,197,94,.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(--green-primary)}
.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(--green-cta);color:var(--green-primary)}

@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열로 쌓이면 이 구역만 화면 여러 개 분량이 된다. */
/* 다행이 부유 애니메이션 — 대기화면에서 쓰던 연출을 여기로 옮겼다 */
.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-name .unit{ font-size:13.5px; color:rgba(255,255,255,.72); margin-left:4px; }
.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; }
}