/* ==========================================================================
   104 · 영상정보처리방침 — 페이지 전용 CSS
   전용 컴포넌트 7종
     .fs-cctv-hero      H16 · 다크 좁은 밴드 히어로 + 복도 사진 배경
     .fs-cctv-stat      숫자 4개 카운터 밴드 — 시그니처 (48개 / 8층 / 24시간 / 30일)
     .fs-cctv-purpose   설치 목적 3분할 도해 카드 (.fs-nose-dz 확장)
     .fs-cctv-zone      촬영 범위 6칸 칩 그리드
     .fs-cctv-flow      처리방법 4단 파기 흐름
     .fs-cctv-step      열람·확인 절차 4단 카드
     .fs-cctv-safe      안전성 확보조치 3장 카드
     .fs-cctv-officer   관리책임자 명세 패널
   색은 전부 --fs-* 토큰. 새 hex 0개.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · 히어로 — 사진 0장. --fs-ink-band-2 단색. A01 --sub 의 약 60% 높이
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-cctv-hero {
  min-height: clamp(210px, 187px + 6.41vw, 310px);
  background: var(--fs-ink-band-2);          /* 사진 로딩 전·실패 시 폴백. 사진 평균 밝기도 이 값에 맞춰 구웠다 */
  padding-block: clamp(34px, 27.5px + 1.81vw, 62px);
}
/* 배경 사진 = 이 방침 제2항이 촬영 범위로 적은 「피부관리실 복도」 그 공간이다.
   흰 글자·네온 킥커(#13F2E6)가 얹히므로 assets/cctv-policy/hero-corridor.jpg 는
   가장 밝은 픽셀이 L≈95 를 넘지 않도록 하이라이트를 눌러 구웠다(흰 글자 6.4:1 · 킥커 4.8:1).
   CSS 스크림을 겹치지 않는 이유 — 카피가 좌측(리드)과 우측(제정일) 양쪽에 있어
   한 방향 그라데이션으로는 둘 다 못 덮는다. 밝기를 사진에 구워 넣는 편이 균일하다. */
.fs-p-104 .fs-cctv-hero .fs-hero__bg picture { display: block; width: 100%; height: 100%; }
/* 세로 크롭 기준점 — 천장 조명선과 복도 소실점을 남긴다.
   사진이 1920x460(4.174:1)이라 뷰포트 1294px 미만에서는 cover 가 «가로»를 자르므로
   이 값이 화면을 바꾸지 않는다. */
.fs-p-104 .fs-cctv-hero .fs-hero__bg img { object-position: 50% 42%; }
.fs-p-104 .fs-cctv-hero__grid { display: grid; gap: var(--fs-sp-4); }
@media (min-width: 768px) {
  .fs-p-104 .fs-cctv-hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--fs-sp-9);
    align-items: end;
  }
}
.fs-p-104 .fs-cctv-hero .fs-hero__copy { gap: var(--fs-sp-3); }
.fs-p-104 .fs-cctv-hero .fs-hero__kicker {
  font-family: var(--fs-font-en); font-weight: 700; color: var(--fs-teal-neon);
}
.fs-p-104 .fs-cctv-hero__meta {
  font-size: var(--fs-t-sm); font-weight: 600; letter-spacing: var(--fs-ls-wide);
  color: var(--fs-white);
  padding-block-start: var(--fs-sp-3);
  border-block-start: 2px solid var(--fs-teal);
}
.fs-p-104 .fs-cctv-hero__lead {
  margin-block-start: var(--fs-sp-7);
  max-width: 62ch;
  font-size: var(--fs-t-lead); line-height: var(--fs-lh-body);
  color: var(--fs-white);
}

/* --------------------------------------------------------------------------
   2 · 시그니처 — 숫자 4개 밴드. 카운트업 없이 정적 표시, 모션은 밑줄 막대에만
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-cctv-stats {
  list-style: none;
  margin-block-start: var(--fs-gap-title);
}
.fs-p-104 .fs-cctv-stat {
  height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  gap: var(--fs-sp-4);
  background: var(--fs-white);
  padding: var(--fs-sp-6) var(--fs-sp-5) var(--fs-sp-7);
}
.fs-p-104 .fs-cctv-stat > .fs-pill { justify-self: center; }
/* ★ LOCK 2 (d) — 라벨바 폭 === 도해 폭, 간격 0.
   이전 값(도해 max-width 220px + margin-block-end 26px)은 305px 짜리 바 위에
   220px 도해가 26px 떠 있는 「띠 위에 그림이 뜬」 모양이었다(47·107 과 같은 유형).
   vibecheck 의 L2 는 바의 margin-top·border-top 만 재므로 이 조항은 안 잡는다.
   107 의 처방대로 «바를 줄이지 말고 도해를 넓혔다» — 이 페이지의 라벨바 24개가
   전부 카드 콘텐츠 폭이라 바를 220px 로 줄이면 이 4장만 다른 모양이 된다.
   도해는 viewBox 220x180 벡터라 확대해도 열화가 없다. */
.fs-p-104 .fs-cctv-stat__fig {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  /* ★ 상한 305px = 이 도해의 1920 실측 폭. 없으면 600~1023 의 2열 구간에서
     카드가 466px 까지 넓어져 도해가 1920 보다 커진다(1023 실측 426x348).
     바와 도해를 «같이» 좁혀야 위 (d) 의 폭 일치가 유지된다. */
  width: 100%; max-width: 305px; justify-self: center;
}
.fs-p-104 .fs-cctv-stat__ill {
  width: 100%; height: auto;
  align-self: end;
}
.fs-p-104 .fs-cctv-stat__value {
  display: flex; align-items: baseline; justify-content: center; gap: var(--fs-sp-1);
  margin-block-start: var(--fs-sp-3);
}
.fs-p-104 .fs-cctv-stat__value .fs-num { font-weight: 700; font-variant-numeric: tabular-nums; }
.fs-p-104 .fs-cctv-stat__unit {
  font-size: var(--fs-t-lead); font-weight: 600; color: var(--fs-ink-soft);
}
.fs-p-104 .fs-cctv-stat__bar {
  display: block; height: 3px; background: var(--fs-teal); transform-origin: left center;
}
.fs-p-104 .fs-cctv-stat__note {
  min-height: 3em;            /* 2행 확보 — 카드마다 라벨바 높이를 맞춘다 */
  font-size: var(--fs-t-xs); line-height: var(--fs-lh-body);
  color: var(--fs-muted); text-align: center;
}
/* 최종 상태가 기본값. fs.js 가 리빌 대상으로 고른 경우에만 막대를 그린다 */
:root.fs-js .fs-p-104 .fs-cctv-stats .fs-reveal.is-in .fs-cctv-stat__bar {
  animation: fs-cctv-bar var(--fs-dur-slow) var(--fs-ease-out) both;
}
@keyframes fs-cctv-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* --------------------------------------------------------------------------
   3 · 설치 목적 3분할 (.fs-nose-dz 확장) — 360px 에서 라벨바가 쪼개지지 않게 1열로
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-cctv-purpose { padding-block: var(--fs-sec-pt) var(--fs-sec-pb); }
.fs-p-104 .fs-cctv-purpose .fs-nose-dz__cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) {
  .fs-p-104 .fs-cctv-purpose .fs-nose-dz__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.fs-p-104 .fs-cctv-purpose__ill {
  width: clamp(88px, 78.8px + 2.56vw, 116px);
  margin-block-end: clamp(15px, 6.46px + 2.37vw, 52px);
}
.fs-p-104 .fs-cctv-purpose__note {
  margin-block-start: var(--fs-sp-6);
  font-size: var(--fs-t-xs); line-height: var(--fs-lh-body); color: var(--fs-muted);
}
.fs-p-104 .fs-cctv-purpose .fs-nose-dz__cards .fs-card { background: var(--fs-cream-2); }

/* --------------------------------------------------------------------------
   4 · 촬영 범위 6칸 칩
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-cctv-zones {
  list-style: none; display: grid; gap: var(--fs-gap-card);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-block-start: var(--fs-sp-7);
}
@media (min-width: 600px)  { .fs-p-104 .fs-cctv-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-104 .fs-cctv-zones { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.fs-p-104 .fs-cctv-zone {
  height: 100%;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: var(--fs-white);
}
.fs-p-104 .fs-cctv-zone__ill {
  width: clamp(60px, 51.5px + 2.37vw, 86px); height: auto;
  justify-self: center; align-self: center;
  margin-block: clamp(18px, 14.3px + 1.03vw, 29px);
}
.fs-p-104 .fs-cctv-zone .fs-labelbar { min-height: 40px; line-height: 1.3; }

/* --------------------------------------------------------------------------
   5 · 처리방법 4단 흐름
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-cctv-flow {
  list-style: none; display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-sp-7);
}
@media (min-width: 600px)  { .fs-p-104 .fs-cctv-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-104 .fs-cctv-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-p-104 .fs-cctv-flow__item {
  height: 100%;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  background: var(--fs-white);
  border-block-start: 2px solid var(--fs-teal);
}
.fs-p-104 .fs-cctv-flow__body {
  display: grid; justify-items: center; align-content: start; gap: var(--fs-sp-5);
  padding: var(--fs-sp-6) var(--fs-sp-5);
}
.fs-p-104 .fs-cctv-flow__ill { width: clamp(64px, 55.5px + 2.37vw, 90px); height: auto; }
.fs-p-104 .fs-cctv-flow__desc {
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
  color: var(--fs-muted); text-align: center;
}

/* --------------------------------------------------------------------------
   6 · 열람·확인 절차 4단 카드
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-cctv-steps {
  list-style: none; display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-sp-7);
}
@media (min-width: 600px)  { .fs-p-104 .fs-cctv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-104 .fs-cctv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-p-104 .fs-cctv-step {
  height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--fs-cream);
  border-block-start: 2px solid var(--fs-teal);
}
.fs-p-104 .fs-cctv-step__fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.fs-p-104 .fs-cctv-step__ill {
  width: clamp(70px, 61.5px + 2.37vw, 96px); height: auto;
  justify-self: center; align-self: center;
  margin-block: clamp(20px, 15.6px + 1.22vw, 33px);
}
.fs-p-104 .fs-cctv-step__body {
  display: grid; align-content: start; gap: var(--fs-sp-2);
  padding: var(--fs-sp-5);
}

/* --------------------------------------------------------------------------
   7 · 안전성 확보조치 3장
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-cctv-safes {
  list-style: none; display: grid; gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--fs-sp-7);
}
@media (min-width: 600px) { .fs-p-104 .fs-cctv-safes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fs-p-104 .fs-cctv-safe {
  height: 100%;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: var(--fs-cream);
}
.fs-p-104 .fs-cctv-safe__fig { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.fs-p-104 .fs-cctv-safe__ill {
  width: clamp(76px, 65.9px + 2.82vw, 107px); height: auto;
  justify-self: center; align-self: center;
  margin-block: clamp(22px, 17.3px + 1.31vw, 36px);
}
.fs-p-104 .fs-cctv-safe__desc {
  padding: var(--fs-sp-5);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-muted);
}

/* --------------------------------------------------------------------------
   8 · 관리책임자 명세 패널 + 방침 변경 고지
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-cctv-officer {
  display: grid; gap: 0;
  background: var(--fs-white);
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 768px) {
  .fs-p-104 .fs-cctv-officer { grid-template-columns: minmax(0, 34fr) minmax(0, 66fr); align-items: stretch; }
}
.fs-p-104 .fs-cctv-officer__label {
  display: flex; align-items: center;
  padding: var(--fs-sp-6) var(--fs-sp-7);
  background: var(--fs-teal-text); color: var(--fs-white);
  font-size: var(--fs-t-quote); font-weight: 700; line-height: var(--fs-lh-head);
}
.fs-p-104 .fs-cctv-officer__body {
  display: grid; gap: var(--fs-sp-3); align-content: center;
  padding: var(--fs-sp-7);
}
.fs-p-104 .fs-cctv-officer__name { font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); }
.fs-p-104 .fs-cctv-officer__tel { font-size: var(--fs-t-tel); font-weight: 700; line-height: 1.1; }
.fs-p-104 .fs-cctv-officer__tel a { color: var(--fs-teal-text); }
.fs-p-104 .fs-cctv-cta { margin-block-start: var(--fs-sp-9); }
.fs-p-104 .fs-cctv-change {
  margin-block-start: var(--fs-sp-11);
  padding-block-start: var(--fs-sp-7);
  border-block-start: 1px solid var(--fs-line);
}
.fs-p-104 .fs-cctv-change__body {
  margin-block-start: var(--fs-sp-4);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-loose); color: var(--fs-muted);
}

/* --------------------------------------------------------------------------
   9 · 조문 공통 조판
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-cctv-art {
  display: grid; justify-items: start; gap: var(--fs-sp-3);
  margin-block-start: var(--fs-sp-12);
}
.fs-p-104 .fs-cctv-art__title { font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); }
.fs-p-104 .fs-cctv-art__text {
  max-width: 88ch;
  font-size: var(--fs-t-body); line-height: var(--fs-lh-loose); color: var(--fs-muted);
}
.fs-p-104 .fs-cctv-table {
  margin-block-start: var(--fs-sp-7);
  background: var(--fs-white);
}
.fs-p-104 .fs-cctv-table .fs-table { min-width: 320px; }
.fs-p-104 .fs-cctv-table .fs-table tbody th { width: 30%; font-weight: 700; }

/* --------------------------------------------------------------------------
   10 · 타이포 리듬 — 섹션 제목 뒤 70px 틸 선 (48 검증분)
   ★ 48 의 함정: 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js:222 는 첫 화면 안에 있던 대상에 .fs-reveal 클래스 자체를 안 붙인다.
     → 기본을 「그어진 상태」로 두고, 실제 리빌 대상에만 초기 은닉을 건다.
   #contact 의 h2 는 .fs-sr-only 이고 .fs-nose-head 밖에 있어 자동으로 빠진다.
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-nose-head h2,
.fs-p-104 .fs-nose-dz__text h2 { position: relative; }
.fs-p-104 .fs-nose-head h2::after,
.fs-p-104 .fs-nose-dz__text h2::after {
  content: "";
  display: block;
  width: 70px; height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-104 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-104 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --------------------------------------------------------------------------
   11 · 호버 — 프레임은 고정, 도해만 scale(1.045). 그림자는 쓰지 않는다 (48 검증분)
   overflow 는 도해를 «직접 감싸는 프레임» 에 건다. 회전하는 요소
   (data-fs-tilt-inner)의 조상에 걸면 틸트가 그 안에서 잘린다.
   -------------------------------------------------------------------------- */
.fs-p-104 .fs-cctv-stat__fig,
.fs-p-104 .fs-cctv-purpose .fs-nose-dz__fig,
.fs-p-104 .fs-cctv-zone,
.fs-p-104 .fs-cctv-flow__item,
.fs-p-104 .fs-cctv-step__fig,
.fs-p-104 .fs-cctv-safe__fig { overflow: hidden; }

.fs-p-104 .fs-cctv-stat__ill,
.fs-p-104 .fs-cctv-purpose__ill,
.fs-p-104 .fs-cctv-zone__ill,
.fs-p-104 .fs-cctv-flow__ill,
.fs-p-104 .fs-cctv-step__ill,
.fs-p-104 .fs-cctv-safe__ill {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-104 .fs-cctv-stats > li:hover .fs-cctv-stat__ill,
  .fs-p-104 .fs-cctv-purpose .fs-nose-dz__cards .fs-card:hover .fs-cctv-purpose__ill,
  .fs-p-104 .fs-cctv-zone:hover .fs-cctv-zone__ill,
  .fs-p-104 .fs-cctv-flow__item:hover .fs-cctv-flow__ill,
  .fs-p-104 .fs-cctv-step:hover .fs-cctv-step__ill,
  .fs-p-104 .fs-cctv-safe:hover .fs-cctv-safe__ill { transform: scale(1.045); }

  /* 라벨바는 도해와 같이 커지면 글자가 흔들린다 — 색만 한 단계 (107 과 같은 처리) */
  .fs-p-104 .fs-cctv-stats > li:hover .fs-labelbar,
  .fs-p-104 .fs-cctv-purpose .fs-nose-dz__cards .fs-card:hover .fs-labelbar,
  .fs-p-104 .fs-cctv-zone:hover .fs-labelbar,
  .fs-p-104 .fs-cctv-flow__item:hover .fs-labelbar,
  .fs-p-104 .fs-cctv-step:hover .fs-labelbar,
  .fs-p-104 .fs-cctv-safe:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --------------------------------------------------------------------------
   12 · 모션 무효화 — 레이아웃은 모션이 꺼져도 동일하다
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root.fs-js .fs-p-104 .fs-cctv-stats .fs-reveal.is-in .fs-cctv-stat__bar,
  .fs-p-104 .fs-cctv-stat__bar {
    animation: none !important; transform: none !important;
  }
  .fs-p-104 .fs-nose-head h2::after,
  .fs-p-104 .fs-nose-dz__text h2::after {
    transform: scaleX(1) !important; transition: none !important;
  }
  .fs-p-104 .fs-cctv-stat__ill,
  .fs-p-104 .fs-cctv-purpose__ill,
  .fs-p-104 .fs-cctv-zone__ill,
  .fs-p-104 .fs-cctv-flow__ill,
  .fs-p-104 .fs-cctv-step__ill,
  .fs-p-104 .fs-cctv-safe__ill {
    transition: none !important; transform: none !important;
  }
}

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-104-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 법문(조항 본문 · 변경 안내 본문)은 손대지 않는다(43 개인정보 방침과 같은 판단). 제목 · 짧은 블록만 balance —
     h2 · 조항 제목 · 리드 · 숫자 카드 설명 · 처리 흐름 설명 · 안전조치 설명 · 책임자 라벨 · 라벨바 · 주소.
   · 배치(<600): 「네 개의 숫자」 카드 4장 1열(장당 ≈385px, 도해가 칸 폭 305px 까지 커진다) → 2×2(§2 A).
     도해·라벨바는 같이 줄어 LOCK 2 (d) 폭 일치 유지, 값 글자는 그대로. */
.fs-p-104 .fs-h2,
.fs-p-104 .fs-nose-lead,
.fs-p-104 .fs-cctv-art__title,
.fs-p-104 .fs-cctv-stat__note,
.fs-p-104 .fs-cctv-flow__desc,
.fs-p-104 .fs-cctv-safe__desc,
.fs-p-104 .fs-cctv-officer__label,
.fs-p-104 .fs-card__desc,
.fs-p-104 .fs-labelbar,
.fs-p-104 .fs-address { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-104 .fs-cctv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fs-sp-4); }
  .fs-p-104 .fs-cctv-stat { gap: var(--fs-sp-3); padding: var(--fs-sp-5) var(--fs-sp-3) var(--fs-sp-6); }
  /* 설명이 1~3줄로 갈려 한 줄 두 장의 라벨바·숫자가 22px 어긋났다 — PC 의 3em(2행) 처방을 3행으로 */
  .fs-p-104 .fs-cctv-stat__note { min-height: 4.5em; }
}