/* ==========================================================================
   106 · 이용약관 — 페이지 전용 CSS
   ※ 2026-09-01 「조문 판면 컨택트시트」 섹션 삭제(승인자 지시)로 아래 절 번호
      2 · 7 · 9 가 비어 있다. 나머지 번호는 손대지 않았다.
   전용 컴포넌트 4종
     .fs-terms-hero      H14 · 흰 배경 초박형 히어로 + 조문 앵커 인덱스
     .fs-terms-article   법전 2단 조판 — 시그니처
     .fs-terms-appendix  부칙 다크 인용
   색은 전부 --fs-* 토큰. 새 hex 0개.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · 히어로 — 흰 배경 초박형. 좌 대형 제목 / 우 조문 목차
   -------------------------------------------------------------------------- */
/* 2026-09-01 승인자 지시 — 「헤더의 적절한 이미지 하나를 배경으로」.
   흰 초박형 히어로에 리셉션 사진을 전폭 배경으로 깔고 스크림을 얹었다.
   · 3층을 명시한다 — 사진 z-index 0 / 스크림 1 / 카피·목차 2.
     .fs-hero 에 isolation:isolate 가 있어 양수 z-index 가 밖으로 새지 않는다.
   · 스크림은 오른쪽이 더 진하다. 왼쪽 제목은 display 크기(큰 글자 3:1)지만
     오른쪽 조문 목차는 --fs-t-sm 17줄이라 4.5:1 이 필요하다.
   · 사진이 아무리 밝아도(255) 합성 바닥이 .80→#414141 · .90→#292929 이라
     흰 글자 9.9:1 이상, 틸 #49BCBD 4.8:1 이상이 보장된다.
   · 밝은 배경 전용 보정색 --fs-teal-text(#00787F)는 여기서 쓰면 안 된다. */
.fs-p-106 .fs-terms-hero {
  min-height: 0;
  background: var(--fs-ink-band);
  color: var(--fs-on-dark);
  padding-block: clamp(30px, 24.6px + 1.5vw, 58px) clamp(38px, 29.5px + 2.36vw, 83px);
}
.fs-p-106 .fs-terms-hero .fs-hero__bg { z-index: 0; }
.fs-p-106 .fs-terms-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(17, 17, 17, .80) 0%, rgba(17, 17, 17, .84) 50%, rgba(17, 17, 17, .90) 100%);
}
.fs-p-106 .fs-terms-hero .fs-hero__inner { z-index: 2; }
/* 1023 이하에서는 조문 목차가 1열 17줄이라 히어로가 908px 까지 자란다(360 실측).
   그 높이를 사진으로 통째 덮으면 ① 원본이 1.34배로 늘어나고 ② 사진에 구워진
   «FOUR SEASONS PLASTIC SURGERY» 네온 사인이 목차 글줄 뒤로 비쳐 유령 글자가 된다.
   사진은 카피가 있는 위쪽에만 두고 아래는 단색 --fs-ink-band 로 흘려 보낸다. */
@media (max-width: 1023px) {
  .fs-p-106 .fs-terms-hero .fs-hero__bg {
    inset-block-end: auto;
    block-size: clamp(300px, 244px + 15.6vw, 420px);
  }
  .fs-p-106 .fs-terms-hero .fs-hero__bg img { block-size: 100%; object-position: 22% 50%; }
  .fs-p-106 .fs-terms-hero::after {
    /* 상단 22% 를 따로 눌러 둔다 — 킥커(18px 틸)는 큰 글자가 아니라 4.5:1 이 필요한데
       사진 위쪽이 천장 조명이라 .78 로는 768 에서 4.41:1 로 0.09 모자랐다(실측). */
    background: linear-gradient(180deg,
      rgba(17, 17, 17, .88) 0%, rgba(17, 17, 17, .88) 22%,
      rgba(17, 17, 17, .82) 44%, rgb(17, 17, 17) 76%);
  }
}
.fs-p-106 .fs-terms-hero .fs-hero__kicker {
  color: var(--fs-teal);
  font-family: var(--fs-font-en);
  font-weight: 700;
}
.fs-p-106 .fs-terms-hero .fs-hero__title {
  font-size: var(--fs-t-display);
  color: var(--fs-on-dark);
}
.fs-p-106 .fs-terms-hero .fs-hero__copy { gap: var(--fs-sp-4); align-content: start; }

.fs-p-106 .fs-terms-hero__grid { display: grid; gap: var(--fs-sp-9); }
@media (min-width: 1024px) {
  .fs-p-106 .fs-terms-hero__grid {
    grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
    column-gap: var(--fs-sp-13);
    align-items: start;
  }
}
.fs-p-106 .fs-terms-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--fs-sp-3);
  margin-block-start: var(--fs-sp-3);
}

/* 조문 목차 — 2열 앵커 인덱스 */
.fs-p-106 .fs-terms-toc__label {
  font-size: var(--fs-t-kicker); font-weight: 700; letter-spacing: var(--fs-ls-wide);
  color: var(--fs-teal);
  padding-block-end: var(--fs-sp-3);
  border-block-end: 2px solid var(--fs-teal);
}
.fs-p-106 .fs-terms-toc__list { display: grid; gap: 0 var(--fs-sp-7); list-style: none; }
@media (min-width: 600px) {
  .fs-p-106 .fs-terms-toc__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(9, auto);
    grid-auto-flow: column;
  }
}
.fs-p-106 .fs-terms-toc__link {
  display: grid; grid-template-columns: 4.4em minmax(0, 1fr); gap: var(--fs-sp-1);
  padding-block: 7px;
  border-block-end: 1px solid rgba(255, 255, 255, .22);
  font-size: var(--fs-t-sm); line-height: 1.4;
  color: var(--fs-on-dark);
  transition: color var(--fs-dur) var(--fs-ease);
}
.fs-p-106 .fs-terms-toc__no {
  color: var(--fs-teal); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.fs-p-106 .fs-terms-toc__link:hover,
.fs-p-106 .fs-terms-toc__link:focus-visible { color: var(--fs-teal); }

/* --------------------------------------------------------------------------
   3 · 법전 2단 조판 (시그니처)
   좌: 조문 번호 + 판면 도해 / 우: 제목 + 본문
   PC 에서는 목록 전체에 --fs-line 세로 기둥 1px 을 통으로 흘리고
   조문마다 틸 티크 2px 로 매단다.
   -------------------------------------------------------------------------- */
.fs-p-106 .fs-terms-list {
  display: grid; gap: var(--fs-sp-9); list-style: none;
  margin-block-start: var(--fs-gap-title);
}
.fs-p-106 .fs-terms-article {
  display: grid; gap: var(--fs-sp-5);
  border-block-start: 2px solid var(--fs-teal);
  padding-block-start: var(--fs-sp-5);
}
.fs-p-106 .fs-terms-article__rail {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: var(--fs-sp-5);
}
.fs-p-106 .fs-terms-article__num {
  font-family: var(--fs-font-en);
  font-size: var(--fs-t-num); font-weight: 500; line-height: 1;
  color: var(--fs-teal-text);
  font-variant-numeric: tabular-nums;
}
.fs-p-106 .fs-terms-article__fig { display: grid; width: 112px; max-width: 100%; }
.fs-p-106 .fs-terms-article__plate {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--fs-line);
}
.fs-p-106 .fs-terms-article__fig .fs-labelbar { min-height: clamp(28px, 26.5px + 0.449vw, 40px); }

.fs-p-106 .fs-terms-article__body { display: grid; gap: var(--fs-sp-4); align-content: start; }
.fs-p-106 .fs-terms-article__title {
  font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head);
  color: var(--fs-ink);
}
.fs-p-106 .fs-terms-article__body .fs-body { color: var(--fs-ink-soft); }
.fs-p-106 .fs-terms-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fs-sp-1); align-items: start;
}
.fs-p-106 .fs-terms-row__mark { color: var(--fs-teal-text); font-weight: 700; }
.fs-p-106 .fs-terms-row--dash { padding-inline-start: var(--fs-sp-5); }
.fs-p-106 .fs-terms-row--dash .fs-terms-row__mark { color: var(--fs-muted); font-weight: 400; }
.fs-p-106 .fs-terms-link {
  color: var(--fs-teal-text); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}

@media (min-width: 1024px) {
  .fs-p-106 .fs-terms-list {
    gap: var(--fs-sp-10);
    border-inline-start: 1px solid var(--fs-line);
    padding-inline-start: var(--fs-sp-11);
  }
  .fs-p-106 .fs-terms-article {
    position: relative;
    grid-template-columns: 152px minmax(0, 1fr);
    column-gap: var(--fs-sp-11);
    align-items: start;
    border-block-start: 0;
    padding-block-start: 0;
  }
  .fs-p-106 .fs-terms-article::before {
    content: ""; position: absolute;
    inset-inline-start: calc(-1 * var(--fs-sp-11) - 1px);
    inset-block-start: 16px;
    width: var(--fs-sp-11); height: 2px;
    background: var(--fs-teal);
  }
  .fs-p-106 .fs-terms-article__rail {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start; gap: var(--fs-sp-5);
  }
  .fs-p-106 .fs-terms-article__fig { width: 100%; }
}

/* --------------------------------------------------------------------------
   4 · 부칙 다크 인용
   -------------------------------------------------------------------------- */
/* 2026-09-01 승인자 지시 — 「부칙에 내용이 아예 없는 거야?」
   원본 부칙은 시행일 한 줄이 전부다(클론 106 실측). 내용은 그대로 두되, 옆에 세워 둔
   판면 도해와 2단 축반전이 «한 줄짜리 다크 슬래브» 를 만들고 있어 둘 다 걷어냈다.
   조문 목차의 #appendix 앵커는 그리드로 옮겨 그대로 살아 있다. */
.fs-p-106 .fs-terms-appendix__grid { display: grid; justify-items: start; }
.fs-p-106 .fs-terms-appendix__title { color: var(--fs-on-dark); }
.fs-p-106 .fs-terms-appendix .fs-body { color: var(--fs-on-dark); margin-block-start: var(--fs-sp-5); }
.fs-p-106 .fs-terms-appendix__quote {
  color: var(--fs-on-dark);
  margin-block-start: var(--fs-sp-5);
  padding-block-start: var(--fs-sp-6);
  border-block-start: 2px solid var(--fs-teal);
}

/* --------------------------------------------------------------------------
   5 · reduced-motion — 새로 넣은 전환은 전부 끈다 (레이아웃 동일)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-106 .fs-terms-toc__link,
  /* 제목 선은 «그어진 상태» 가 기본이므로 트랜지션만 끊으면 렌더가 동일하다.
     은닉 규칙까지 무력화해 리빌 대상에서도 선이 남아 있게 한다. */
  .fs-p-106 .fs-nose-head h2::after,
  .fs-p-106 .fs-sec-head__title::after,
  :root.fs-js .fs-p-106 .fs-reveal:not(.is-in) .fs-sec-head__title::after,
  :root.fs-js .fs-p-106 .fs-reveal:not(.is-in) h2::after {
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   6 · 묶음 판면 스트립 — 섹션 헤드 우측 (PC 에서 세로 높이를 늘리지 않는다)
   -------------------------------------------------------------------------- */
.fs-p-106 .fs-terms-strip { display: grid; width: clamp(260px, 200px + 16.7vw, 460px); max-width: 100%; }
.fs-p-106 .fs-terms-strip__img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--fs-line); border-block-end: 0;
}
.fs-p-106 .fs-terms-strip .fs-labelbar { min-height: clamp(28px, 26.5px + 0.449vw, 38px); }

/* --------------------------------------------------------------------------
   8 · [마이크로] 섹션 제목 뒤 70px 틸 선 (delay .5s) — 48 검증분
   ★ 48 함정 — 「.is-in 이면 보이기」로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 붙이지 않는다.
     → 기본을 «그어진 상태» 로 두고 .fs-reveal:not(.is-in) 에만 초기 은닉.
   다크 밴드 대제목(#appendix-title)에는 걸지 않는다 — 바로 아래 인용 위에
   이미 2px 틸 룰이 있어 틸 선이 두 겹이 된다(100·122 선례).
   -------------------------------------------------------------------------- */
.fs-p-106 .fs-nose-head h2::after,
.fs-p-106 .fs-sec-head__title::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;
}
/* 초기 은닉 — 은닉 쪽 트랜지션은 끊는다(1→0 역재생 방지).
   대상 제목에 ID 선택자 규칙이 없어 (0,5,2) 가 위 (0,2,2) 를 확실히 이긴다. */
:root.fs-js .fs-p-106 .fs-reveal:not(.is-in) .fs-sec-head__title::after,
:root.fs-js .fs-p-106 .fs-reveal:not(.is-in) h2::after {
  transform: scaleX(0);
  transition: none;
}

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 1023px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-106-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   · 법문 본문 문단(.fs-body)은 손대지 않는다(43 개인정보 방침과 같은 판단). 조항 줄(①…)·절 부제·부칙 인용·라벨바·주소만 balance.
   · 조문 머리 라벨바가 112px 문서 도해 아래에서 낱말 가운데가 잘렸다(「개인정보처리방 / 침」 · 768 도 같다) →
     <1024 에서 도해를 132px 로(라벨바 폭 = 도해 폭, LOCK 2 유지) + 라벨바 keep-all · 좌우 여백 4px(148px 는 360 본문을 514px 늘렸다). 1024 이상은 원래 100% 그대로. */
.fs-p-106 .fs-terms-row,
.fs-p-106 .fs-sec-head__sub,
.fs-p-106 .fs-terms-appendix__quote,
.fs-p-106 .fs-labelbar,
.fs-p-106 .fs-address { text-wrap: balance; }
@media (max-width: 1023px) {
  .fs-p-106 .fs-terms-article__fig { width: 132px; }
  .fs-p-106 .fs-terms-article__fig .fs-labelbar { word-break: keep-all; padding-inline: var(--fs-sp-1); }
}