/* ==========================================================================
   assets/page/107.css — [107] 개인정보처리방침 전용 CSS
   · 모든 셀렉터를 .fs-p-107 로 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개).
   · 전용 컴포넌트 4종
       .fs-privacy-hero    사진 0장 · 크림→화이트 페이드 중앙 히어로
       .fs-privacy-tile    도해 아트 + 틸 라벨바 + 조문 원문 타일
       .fs-privacy-term    보유기간 행 (좌 도해 / 우 원문)
       .fs-privacy-clause  조문 블록 (틸 상단 룰 + 조문번호 필)
   · 새 모션 없음 — fs.js 기본 리빌만 쓴다.
   ========================================================================== */

/* --- 전용 1 · 히어로 (사진 0장 · 차콜 단색 밴드) -----------------------
   2026-09-01 승인자 지시 — 「이미지 말고 헤더 단색 배경」. 크림→화이트 페이드를
   --fs-ink-band 단색으로 바꿨다.
   · 크림 단색은 쓸 수 없다 — 바로 다음 섹션이 같은 --fs-cream 이라 LOCK 4
     「히어로 색면이 다음 섹션까지 이어짐」이 FAIL 난다.
   · 글자 3종을 배경에 맞춰 다시 잡았다(#111111 기준 실측):
       흰 제목 18.88:1 · 틸 킥커 #49BCBD 8.28:1 · 시행일 흰색 18.88:1.
     --fs-teal-text(#00787F)는 «흰 배경 전용 보정색» 이라 여기서 3.59:1 로 미달이고,
     --fs-muted(AA 보정 후 #6E6E6E)도 3.70:1 로 미달이라 둘 다 그대로 두면 안 된다.
   · 보조 문구를 흰색으로 두는 것은 104(영상정보처리방침) 다크 히어로와 같은 처리다
     — 위계는 --fs-t-sub 크기와 틸 룰이 만든다. 새 hex 0개 원칙 유지.
   ------------------------------------------------------------------------- */
.fs-p-107 .fs-privacy-hero {
  background: var(--fs-ink-band);
  color: var(--fs-on-dark);
}
.fs-p-107 .fs-privacy-hero .fs-hero__kicker { color: var(--fs-teal); font-weight: 500; }
.fs-p-107 .fs-privacy-hero .fs-hero__title  { color: var(--fs-on-dark); }
.fs-p-107 .fs-privacy-hero__rule {
  display: block; width: 64px; height: 2px;
  background: var(--fs-teal);
}
.fs-p-107 .fs-privacy-hero__eff {
  font-size: var(--fs-t-sub); line-height: var(--fs-lh-body); color: var(--fs-white);
}

/* --- 전용 2 · 도해 타일 ------------------------------------------------ */
.fs-p-107 .fs-privacy-tile {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); height: 100%;
}
.fs-p-107 .fs-privacy-tile__fig { display: grid; }
.fs-p-107 .fs-privacy-tile__art { display: block; width: 100%; height: auto; }
.fs-p-107 .fs-privacy-tile__desc {
  padding: var(--fs-sp-5);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-ink-soft);
}
/* 흰 섹션 위 타일은 크림 바탕으로 면을 분리한다(테두리·그림자 없이) */
.fs-p-107 .fs-privacy-tile--onwhite { background: var(--fs-cream-2); }

/* --- 전용 3 · 보유기간 행 --------------------------------------------- */
.fs-p-107 .fs-privacy-term { display: grid; gap: var(--fs-gap-card); }
.fs-p-107 .fs-privacy-term__row {
  display: grid; gap: var(--fs-sp-5); align-items: center; padding: var(--fs-sp-5);
}
.fs-p-107 .fs-privacy-term__fig { display: grid; }
.fs-p-107 .fs-privacy-term__art { display: block; width: 100%; height: auto; }
.fs-p-107 .fs-privacy-term__txt {
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-ink-soft);
}
@media (min-width: 600px) {
  .fs-p-107 .fs-privacy-term__row {
    grid-template-columns: clamp(150px, 15vw, 230px) minmax(0, 1fr);
    column-gap: var(--fs-gap-col);
  }
}

/* --- 전용 4 · 조문 블록 ------------------------------------------------ */
.fs-p-107 .fs-privacy-clause {
  display: grid; gap: var(--fs-sp-5);
  border-block-start: 2px solid var(--fs-teal);
  padding-block-start: var(--fs-sp-6);
}
.fs-p-107 .fs-privacy-clauses { display: grid; gap: var(--fs-sp-12); }
.fs-p-107 .fs-privacy-clause__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--fs-sp-3);
  font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head);
}
.fs-p-107 .fs-privacy-clause__body { display: grid; gap: var(--fs-sp-2); }
.fs-p-107 .fs-privacy-clause__body p {
  font-size: var(--fs-t-body); line-height: var(--fs-lh-loose); color: var(--fs-ink-soft);
}
.fs-p-107 .fs-privacy-clause__body .fs-privacy-clause__lead {
  font-size: var(--fs-t-lead); line-height: var(--fs-lh-body); color: var(--fs-ink);
}
.fs-p-107 .fs-privacy-clause__body .fs-privacy-clause__num {
  font-weight: 700; color: var(--fs-ink);
}
.fs-p-107 .fs-privacy-clause__body .fs-privacy-clause__sub {
  padding-inline-start: var(--fs-sp-5); color: var(--fs-muted);
}

/* --- 요약 카드 (시그니처) — 조문 번호 필이 곧 앵커 --------------------- */
.fs-p-107 .fs-privacy-sum__card { align-content: start; }
.fs-p-107 .fs-privacy-sum__ttl {
  display: block; font-weight: 700; color: var(--fs-ink);
}
.fs-p-107 .fs-privacy-sum__ex {
  display: block; margin-block-start: var(--fs-sp-1);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-muted);
}
.fs-p-107 .fs-privacy-sum__card:hover .fs-privacy-sum__ttl { color: var(--fs-teal-dk); }

/* --- 연락 창구 정의행 -------------------------------------------------- */
.fs-p-107 .fs-privacy-org__list {
  display: grid; gap: var(--fs-sp-2);
  padding: var(--fs-sp-5);
  font-size: var(--fs-t-body); line-height: var(--fs-lh-body);
}
.fs-p-107 .fs-privacy-org__row {
  display: grid; grid-template-columns: clamp(58px, 6vw, 76px) minmax(0, 1fr);
  column-gap: var(--fs-sp-3);
}
.fs-p-107 .fs-privacy-org__k { color: var(--fs-muted); }
.fs-p-107 .fs-privacy-org__v { color: var(--fs-ink); font-weight: 500; }
.fs-p-107 .fs-privacy-org__note {
  margin-block-start: var(--fs-sp-2);
  font-size: var(--fs-t-xs); color: var(--fs-muted-2);
}

/* --- 표 · 시행일 스트립 ------------------------------------------------ */
.fs-p-107 .fs-privacy-table { min-width: 760px; }
.fs-p-107 .fs-privacy-table td, .fs-p-107 .fs-privacy-table th { vertical-align: top; }
.fs-p-107 .fs-privacy-agency { min-width: 700px; }
.fs-p-107 .fs-privacy-eff {
  display: grid; gap: var(--fs-sp-3); justify-items: center; text-align: center;
  padding: var(--fs-sp-8) var(--fs-sp-5);
  background: var(--fs-cream);
}
.fs-p-107 .fs-privacy-eff__date {
  font-size: var(--fs-t-quote); font-weight: 700; color: var(--fs-teal-dk);
}

/* --- 섹션 머리(조문번호 필 + 제목) · 라벨바 높이 정렬 ------------------- */
.fs-p-107 .fs-privacy-head { row-gap: var(--fs-sp-3); }
.fs-p-107 .fs-privacy-tile .fs-labelbar,
.fs-p-107 .fs-privacy-term__fig .fs-labelbar {
  min-height: clamp(44px, 40.2px + 1.055vw, 60px);
  font-size: var(--fs-t-body); line-height: 1.3;
}
/* ★ 여기에 있던 `.fs-privacy-tile--org .fs-privacy-tile__art{width:min(100%,380px)}`
   는 LOCK 2 (d) 위반이었다. 2열 카드(710px)에서 도해만 380px 로 줄고 라벨바는
   710px 그대로라 「띠 위에 작은 그림이 뜬」 모양이 됐다(del-04·05 / org-officer·team
   네 곳, 1920 실측 bar 710 ↔ img 380). 나머지 31장은 전부 바 폭 = 도해 폭이다.
   → 특례를 지우고 페이지 정본(도해 = 카드 폭)으로 되돌린다. */

/* --- 표 행 머리 칩 (조문 아이콘을 표 행에 다시 붙여 카드↔표를 잇는다) ------ */
.fs-p-107 .fs-privacy-rowk {
  display: flex; align-items: center; gap: var(--fs-sp-3);
}
.fs-p-107 .fs-privacy-rowchip {
  flex: 0 0 auto; width: 34px; height: 34px; object-fit: contain;
}

/* --- 제5조 ② 권리 행사 채널 4열 ---------------------------------------- */
.fs-p-107 .fs-privacy-ch { margin-block-start: var(--fs-sp-6); }
.fs-p-107 .fs-privacy-tablehint { margin-block-start: var(--fs-sp-3); }


/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-28
   근거·판정 기록은 _design/QA/107.md
   ========================================================================== */

/* --- A. 요약 카드 4장의 바닥이 어긋난다 -------------------------------------
   `<li>` 는 그리드 아이템이라 행 높이(1920 실측 367px)로 늘어나지만 그 안의
   `<a class="fs-card">` 는 내용 높이 그대로다(343px). 크림 밴드 위 흰 상자
   4개의 아랫변이 24px 어긋나 「줄이 안 맞는 카드」로 읽힌다.
   1024 에서는 315/367/344/315 로 더 벌어진다. 카드가 칸을 채우게 한다.
   (`align-content:start` 는 그대로 둔다 — 내용은 위에서부터 쌓여야 한다) */
.fs-p-107 .fs-privacy-sum__card { height: 100%; }

/* --- B. 명도 대비 AA — 페이지가 소유한 3곳 --------------------------------
   `--fs-muted-2 #7D7D7D` 는 fs.css:2599~ 의 AA 보정 밴드가 손대지 않는
   토큰이라 흰 배경 4.12:1 · 크림 배경 3.67:1 로 기준(4.5)에 못 미친다.
   `--fs-muted` 는 같은 밴드에서 #6E6E6E 로 이미 보정돼 있다(fs.css:2716).
   공용 셸(드로어·푸터)의 미달은 손대지 않는다 — 공유 파일이다. */
.fs-p-107 .fs-privacy-org__note,
.fs-p-107 .fs-privacy-tablehint,
.fs-p-107 .fs-privacy-rowk .fs-muted-2 { color: var(--fs-muted); }

/* --- C. 섹션 제목 뒤 70px 틸 선 (48 검증분) --------------------------------
   ★ `.is-in` 이면 보이기로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js:212~222 는 첫 화면 안에 있던 대상에 `.fs-reveal` 클래스 자체를
     붙이지 않는다. → 기본을 「그어진 상태」로 두고 실제 리빌 대상에만 초기 은닉. */
.fs-p-107 .fs-privacy-head h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 1px;
  margin-block-start: var(--fs-sp-4);
  background: var(--fs-teal);
  transform: scaleX(1);
  transform-origin: left center;
  transition: transform var(--fs-dur-slow) var(--fs-ease-out) .5s;
}
:root.fs-js .fs-p-107 .fs-privacy-head.fs-reveal:not(.is-in) h2::after,
:root.fs-js .fs-p-107 .fs-reveal:not(.is-in) .fs-privacy-head h2::after { transform: scaleX(0); }

/* --- D. 호버 — 프레임 고정 + 도해만 scale(1.045) (48 검증분) ---------------
   그림자는 쓰지 않는다(2차 규칙). overflow 는 «회전하는 요소 자신»
   (= data-fs-tilt-inner 인 __fig)에 건다 — 프레임 바닥이 드러나지 않는다. */
.fs-p-107 .fs-privacy-tile__fig,
.fs-p-107 .fs-privacy-term__fig { overflow: hidden; }
.fs-p-107 .fs-privacy-tile__art,
.fs-p-107 .fs-privacy-term__art {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
  will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
  .fs-p-107 .fs-privacy-tile:hover .fs-privacy-tile__art,
  .fs-p-107 .fs-privacy-term__row:hover .fs-privacy-term__art { transform: scale(1.045); }

  /* 라벨바는 도해와 같이 커지면 글자가 흔들린다 — 색만 한 단계 */
  .fs-p-107 .fs-privacy-tile:hover .fs-labelbar,
  .fs-p-107 .fs-privacy-term__row:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --- E. reduced-motion — 새로 얹은 것을 전부 정지 상태로 고정 -------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-107 .fs-privacy-head h2::after { transform: scaleX(1) !important; transition: none !important; }
  .fs-p-107 .fs-privacy-tile__art,
  .fs-p-107 .fs-privacy-term__art { transition: none !important; transform: none !important; }
}

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-107-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 법문 본문(①… 항목 문단)은 손대지 않는다(43 개인정보 방침과 같은 판단). 제목 · 조문 제목/부제/리드 · 타일 설명 · 보유기간 줄 ·
     한눈에 보기 캡션 · 인용 · 히어로 시행일 · 라벨바 · 주소만 balance.
   · 배치(<600): 설명 없이 «선 일러스트 + 라벨바» 만 있는 타일 묶음(제5조 권리 4 · 행사 방법 4 · 제6조 항목 3 · 제7조 파기 절차 3 ·
     제12조 기관 4)이 1열이라 장당 ≈185px 로 섹션마다 740px 를 썼다 → 2열 + 홀수 마지막 전폭(§2 A). 설명이 있는 타일 묶음은 1열 그대로.
     라벨바가 1~2줄로 갈려 한 줄 두 장의 바닥이 어긋나지 않게 2줄 높이를 잡는다.
     선택자는 «타일 안에 도해(figure) 말고 아무것도 없는 묶음» — 처음엔 «설명(__desc) 없는 묶음» 으로 잡았다가
     제10조 책임자 타일(성명·직책·연락처 목록)까지 2열이 되어 메일 주소가 한 글자씩 접혔다. */
.fs-p-107 .fs-h2,
.fs-p-107 .fs-nose-lead,
.fs-p-107 .fs-privacy-clause__title,
.fs-p-107 .fs-privacy-clause__sub,
.fs-p-107 .fs-privacy-clause__lead,
.fs-p-107 .fs-privacy-tile__desc,
.fs-p-107 .fs-privacy-term__txt,
.fs-p-107 .fs-card__caption,
.fs-p-107 .fs-quote,
.fs-p-107 .fs-privacy-hero__eff,
.fs-p-107 .fs-labelbar,
.fs-p-107 .fs-address { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-107 .fs-grid:has(> .fs-privacy-tile):not(:has(> .fs-privacy-tile > :not(.fs-privacy-tile__fig))) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--fs-sp-4);
  }
  .fs-p-107 .fs-grid:has(> .fs-privacy-tile):not(:has(> .fs-privacy-tile > :not(.fs-privacy-tile__fig))) > li:nth-child(odd):last-child:not(:first-child) { grid-column: 1 / -1; }
  .fs-p-107 .fs-grid:has(> .fs-privacy-tile):not(:has(> .fs-privacy-tile > :not(.fs-privacy-tile__fig))) .fs-labelbar {
    min-height: calc(2.6em + var(--fs-sp-4));
    padding-inline: var(--fs-sp-2);
    font-size: var(--fs-t-sm);
    word-break: keep-all;
  }
}