@charset "utf-8";
/* ==========================================================================
   assets/page/116.css — [116] 주의사항 전용 규칙
   전용 컴포넌트 : .fs-precautions-hero / -group / -item / -tl / -acc / -night
   색·간격·글자는 전부 기존 --fs-* 토큰만 사용한다 (새 hex 0개).
   ========================================================================== */

/* --- A01 · 문서형 히어로 (사진 배경 · 틸 세로 룰 + 좌정렬) ----------------- */
/* 2026-09-01 승인자 지시 —「헤더의 적절한 이미지 하나를 배경으로. 지금 너무 밋밋해보여」.
   사진은 assets/about/interior-06.jpg(식물 벽과 스툴이 있는 «휴식 공간»)를 다크 그레이딩해
   구운 것이다. 회복·휴식 안내라는 이 페이지 내용과 맞물린다.
   CSS 스크림을 안 쓰고 밝기를 사진에 구워 넣었다 — 굽고 난 최대 휘도 L=83.9,
   흰 글자 7.58:1 · 네온 킥커 5.37:1. 104·105 와 같은 방식이다.
   ★ 이 히어로는 116 과 116-01~21 이 «함께» 쓴다. 22장이 같이 바뀐다. */
.fs-p-116 .fs-precautions-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--fs-ink-band-2);          /* 사진 로딩 전·실패 시 폴백 */
  color: var(--fs-on-dark);
  min-height: clamp(300px, 272.3px + 7.692vw, 420px);
}
.fs-p-116 .fs-precautions-hero__bg { position: absolute; inset: 0; z-index: -1; }
.fs-p-116 .fs-precautions-hero__bg picture { display: block; width: 100%; height: 100%; }
.fs-p-116 .fs-precautions-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.fs-p-116 .fs-precautions-hero .fs-hero__copy {
  justify-items: start;
  text-align: start;
  gap: var(--fs-sp-4);
  border-inline-start: 2px solid var(--fs-teal);
  padding-inline-start: clamp(18px, 14.3px + 1.026vw, 34px);
}
.fs-p-116 .fs-precautions-hero .fs-hero__kicker {
  font-family: var(--fs-font-en);
  letter-spacing: 0.18em;
  font-weight: 500;
  color: var(--fs-teal-neon);              /* #00787F 는 밝은 배경 전용 — 다크에서 3.6:1 */
}
.fs-p-116 .fs-precautions-hero .fs-hero__title { color: var(--fs-on-dark); }
.fs-p-116 .fs-precautions-hero__lead {
  color: var(--fs-on-dark);                /* --fs-muted 는 다크에서 3.7:1 */
  max-width: 46ch;
  margin-block-start: var(--fs-sp-1);
}

/* --- A05 · 공통 안내 인용 -------------------------------------------------- */
.fs-p-116 .fs-precautions-notice__q { max-width: 34ch; margin-inline: auto; }
.fs-p-116 .fs-precautions-notice__meta {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--fs-sp-3);
  margin-block-start: var(--fs-sp-6);
}

/* --- A23 · 수술 전 주의사항 5그룹 ----------------------------------------- */
.fs-p-116 .fs-precautions-groups {
  display: grid;
  gap: var(--fs-sp-11);
  margin-block-start: var(--fs-gap-title);
}
/* 그룹 플레이트 = 흰 타일 + 바닥에 붙은 라벨바. 정본은 57 의 .fs-nose-dz__fig 다.
   ★ 57 실측(자): 1920 에서 바−도해 +83~+153 · 아이콘↔바 41~52px. 즉 「바가 도해보다 넓다」
     자체는 위반이 아니다. 고치기 전 116 의 1920 값(+80.8)도 그 범위 안이었다.
   실제 결함은 두 가지였다 —
   (a) align-items:stretch + grid-template-rows:minmax(0,1fr) 때문에 플레이트가 옆 목록
       높이만큼 늘어나, 형제 5개의 아이콘↔바 간격이 24 / 82.5 / 204.5px 로 제각각이 됐다
       (57 은 41~52 로 묶여 있다). 그룹2 는 204.5px 짜리 빈 흰 면이 생겼다.
   (b) 900px 미만에서 플레이트가 1fr 전폭이 되어 768 에서 112px 아이콘 아래에
       718px 짜리 바가 깔렸다(6.4배 · 57 의 768 은 2.2배).
   (vibecheck L2 는 바의 margin-top·border-top 만 재므로 둘 다 통과시킨다. 눈으로 잡은 것.)
   → 플레이트를 정사각 아이콘 타일로 고정하고 이미지를 타일 전폭으로 잡는다.
     겉모습은 57 과 같고, 폭이 정확히 일치하므로 LOCK 2-(d) 문자 그대로도 통과한다. */
.fs-p-116 .fs-precautions-group { display: grid; gap: var(--fs-sp-6); align-items: start; }
@media (min-width: 900px) {
  .fs-p-116 .fs-precautions-group {
    grid-template-columns: clamp(200px, 160px + 4vw, 260px) minmax(0, 1fr);
    column-gap: var(--fs-gap-col);
  }
}
.fs-p-116 .fs-precautions-group__plate {
  display: grid;
  grid-template-rows: auto auto;
  background: var(--fs-white);
  width: 100%;
  max-width: clamp(180px, 166.2px + 3.846vw, 240px);
  justify-self: start;
}
.fs-p-116 .fs-precautions-group__plate img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  padding: clamp(24px, 20.3px + 1.026vw, 40px);
  margin: 0;
}
.fs-p-116 .fs-precautions-group__title { font: inherit; letter-spacing: inherit; }
.fs-p-116 .fs-precautions-list { display: grid; gap: var(--fs-sp-3); }
.fs-p-116 .fs-precautions-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--fs-sp-5);
  background: var(--fs-white);
  border-inline-start: 2px solid var(--fs-teal);
  padding: var(--fs-sp-5) clamp(16px, 13.7px + 0.641vw, 26px);
}
.fs-p-116 .fs-precautions-item__icon {
  display: grid; place-items: center;
  width: clamp(48px, 42.5px + 1.538vw, 72px);
  aspect-ratio: 1;
}
.fs-p-116 .fs-precautions-item__icon img { width: 100%; height: auto; }
.fs-p-116 .fs-precautions-item__text {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
}
.fs-p-116 .fs-precautions-item__text strong { font-weight: 700; color: var(--fs-ink); }
.fs-p-116 .fs-precautions-item__note {
  display: block;
  margin-block-start: var(--fs-sp-1);
  font-size: var(--fs-t-sm);
  color: var(--fs-muted);
}

/* --- 시간 도해 (수술 전후 시점) ------------------------------------------- */
.fs-p-116 .fs-precautions-tl {
  display: grid;
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
}
@media (min-width: 600px)  { .fs-p-116 .fs-precautions-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .fs-p-116 .fs-precautions-tl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fs-p-116 .fs-precautions-tl__node { display: grid; align-content: start; gap: var(--fs-sp-5); }
.fs-p-116 .fs-precautions-tl__fig { display: grid; }
.fs-p-116 .fs-precautions-tl__box {
  display: grid; place-items: center;
  background: var(--fs-cream);
  aspect-ratio: 320 / 176;
}
.fs-p-116 .fs-precautions-tl__box img {
  width: clamp(74px, 66.6px + 2.051vw, 106px);
  height: auto;
}
.fs-p-116 .fs-precautions-tl__text {
  font-size: var(--fs-t-body);
  line-height: var(--fs-lh-body);
  color: var(--fs-muted);
}

/* --- A22 · 시술별 주의사항 «탭» (클릭하면 그 시술 페이지로) ---------------
   2026-08-31 승인자 지시로 2단 아코디언(카테고리 → 문서 → 전문)을 걷어냈다.
   문서 21건은 각자 페이지(`116-01` ~ `116-21`)가 됐고 여기는 그 탭 바만 남는다.
   같은 마크업이 문서 페이지 히어로 아래에도 들어가며, 그때는 자기 탭이
   `aria-current="page"` 를 받는다 — 탭 바가 페이지를 넘나드는 내비게이션이다.
   ------------------------------------------------------------------------- */
.fs-p-116 .fs-precautions-tabs {
  display: grid;
  gap: clamp(20px, 16.9px + 0.855vw, 36px);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-116 .fs-precautions-tabsec .fs-precautions-tabs { margin-block-start: 0; }
.fs-p-116 .fs-precautions-tabs__group { display: grid; gap: var(--fs-sp-4); }
.fs-p-116 .fs-precautions-tabs__cat {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: var(--fs-sp-3);
  font-size: var(--fs-t-sub);
  font-weight: 700;
  line-height: var(--fs-lh-head);
  color: var(--fs-ink);
}
.fs-p-116 .fs-precautions-tabs__ico {
  display: grid; place-items: center;
  width: clamp(30px, 27.7px + 0.641vw, 40px); aspect-ratio: 1;
}
.fs-p-116 .fs-precautions-tabs__ico img { display: block; width: 100%; height: auto; }
.fs-p-116 .fs-precautions-tabs__list {
  display: flex; flex-wrap: wrap;
  gap: var(--fs-sp-3);
}
/* 문서 페이지 — 21개를 다 펼치면 본문이 화면 밖으로 밀린다.
   2026-09-01 실측 1920: 탭 바 1016px · 본문 시작 y1536 (945px 화면에 안 들어온다).
   승인자 지시「누르면 바로 내용이 담긴 페이지로」의 실제 걸림돌이 이것이었다 —
   링크는 처음부터 116-01~21 로 «가고» 있었고, 도착한 페이지가 본문을 안 보여 준 것이다.
   보고 있는 시술의 «같은 카테고리» 탭만 남긴다. 다른 카테고리로 가는 길은 히어로의
   「주의사항 전체」 링크다. 116 인덱스(--doc 없음)에서는 21개를 그대로 다 보여 준다.
   ★ 가로 스크롤 줄로 먼저 해 봤는데, 탭 이름이 길어 글자가 한 자씩 쪼개졌다. */
.fs-p-116 .fs-precautions-tabs--doc .fs-precautions-tabs__group:not(.fs-precautions-tabs__group--current) {
  display: none;
}
.fs-p-116 .fs-precautions-tab {
  display: inline-grid;
  grid-auto-flow: column;
  align-items: center;
  gap: var(--fs-sp-3);
  padding: clamp(9px, 8.1px + 0.256vw, 14px) clamp(14px, 12.2px + 0.513vw, 22px);
  background: var(--fs-white);
  border: 1px solid var(--fs-line-control);
  border-radius: var(--fs-radius-0);
  color: var(--fs-ink);
  font-size: var(--fs-t-sm);
  font-weight: 600;
  line-height: var(--fs-lh-head);
  transition: border-color var(--fs-dur) var(--fs-ease), color var(--fs-dur) var(--fs-ease);
}
.fs-p-116 .fs-precautions-tab:hover,
.fs-p-116 .fs-precautions-tab:focus-visible { border-color: var(--fs-teal-dk); color: var(--fs-teal-dk); }
/* 현재 보고 있는 문서 — 탭 바가 페이지를 넘어가도 어디에 있는지 보인다 */
.fs-p-116 .fs-precautions-tab[aria-current="page"] {
  background: var(--fs-teal-dk);
  border-color: var(--fs-teal-dk);
  color: var(--fs-on-dark);
}
/* 기본 필은 틸 바탕 + 흰 글자라 틸 탭 위에서 사라진다 — 뒤집는다 */
.fs-p-116 .fs-precautions-tab[aria-current="page"] .fs-pill {
  background: var(--fs-white);
  color: var(--fs-teal-dk);
}

/* --- 문서 페이지(116-01~21) 전용 -------------------------------------------
   페이지를 21장 복제했지만 body class 와 page CSS 는 116 그대로 쓴다 —
   CSS 파일을 21개로 늘리지 않기 위해서다. */
.fs-p-116 .fs-precautions-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--fs-sp-3);
  margin-block-start: var(--fs-sp-1);
}
.fs-p-116 .fs-precautions-hero__back {
  font-size: var(--fs-t-sm); font-weight: 600;
  color: var(--fs-on-dark);
  text-decoration: underline; text-underline-offset: 3px;
}
.fs-p-116 .fs-precautions-hero__back:hover { color: var(--fs-teal-neon); }
/* 안내문 전문 — 한 줄로 세우면 1920 에서 문서가 2400px 를 넘는다. 항목 묶음을
   흰 카드로 만들어 크림 밴드 위에 2열로 깐다(묶음 안에서는 절대 안 쪼개진다). */
.fs-p-116 .fs-precautions-sheet {
  display: grid;
  gap: var(--fs-gap-card);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.fs-p-116 .fs-precautions-card {
  background: var(--fs-white);
  border-block-start: 2px solid var(--fs-teal);
  padding: clamp(20px, 17.2px + 0.769vw, 32px);
}
@media (min-width: 1024px) {
  .fs-p-116 .fs-precautions-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 항목 묶음 — 원본 안내문의 「틸 소제목 + 가는 선 + 별표 목록」 리듬을 그대로 옮긴다 */
.fs-p-116 .fs-precautions-doc__grp { display: grid; gap: var(--fs-sp-3); }
.fs-p-116 .fs-precautions-doc__h {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--fs-sp-4);
  font-size: var(--fs-t-h3);
  font-weight: 700;
  line-height: var(--fs-lh-head);
  color: var(--fs-teal-text);
}
.fs-p-116 .fs-precautions-doc__h::after {
  content: "";
  height: 1px;
  background: var(--fs-teal);
  opacity: 0.45;
}
.fs-p-116 .fs-precautions-doc__list { display: grid; gap: var(--fs-sp-2); }
.fs-p-116 .fs-precautions-doc__list > li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fs-sp-3);
  font-size: var(--fs-t-sm);
  line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
}
.fs-p-116 .fs-precautions-doc__list > li::before {
  content: "*";
  color: var(--fs-teal-dk);
  font-weight: 700;
  line-height: inherit;
}

/* --- A24 · 야간연락 다크 밴드 (시그니처) ---------------------------------- */
.fs-p-116 .fs-precautions-night__note {
  display: grid;
  gap: var(--fs-sp-4);
  max-width: 76ch;
  margin-block-start: var(--fs-sp-7);
}
.fs-p-116 .fs-precautions-night__slots {
  display: grid;
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-sp-10);
}
@media (min-width: 600px) {
  .fs-p-116 .fs-precautions-night__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fs-p-116 .fs-precautions-night__slot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--fs-sp-5);
  border-block-start: 2px solid var(--fs-teal);
  padding-block-start: var(--fs-sp-5);
}
.fs-p-116 .fs-precautions-night__ico {
  display: grid; place-items: center;
  width: clamp(38px, 35.7px + 0.641vw, 48px);
  aspect-ratio: 1;
}
.fs-p-116 .fs-precautions-night__ico img { width: 100%; height: auto; }
.fs-p-116 .fs-precautions-night__when { display: block; font-size: var(--fs-t-sub); font-weight: 700; line-height: 1.3; }
.fs-p-116 .fs-precautions-night__hours { display: block; margin-block-start: var(--fs-sp-1); font-size: var(--fs-t-lead); font-weight: 500; line-height: 1.4; }
.fs-p-116 .fs-precautions-night .fs-btnbar { margin-block-start: var(--fs-sp-9); }

/* --- 타이포 리듬 · 섹션 제목 뒤 70px 틸 선 (48 에서 검증된 것) ------------- */
.fs-p-116 .fs-nose-head h2,
.fs-p-116 .fs-sec-head__title,
.fs-p-116 .fs-precautions-night .fs-mega { position: relative; }

.fs-p-116 .fs-nose-head h2::after,
.fs-p-116 .fs-sec-head__title::after,
.fs-p-116 .fs-precautions-night .fs-mega::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;
}

/* ★ 기본은 「그어진 상태」다. fs.js 는 첫 화면 대상에 .is-in 을 애니메이션 없이
   즉시 붙이므로 «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 안 그어진다(48 함정).
   초기 은닉은 fs.js 가 실제로 리빌 대상으로 표시한 .fs-reveal 에만 건다.
   :where() 로 감싸 명시도를 0 으로 낮추지 않는다 — 이 페이지의 대상 제목에는
   ID 선택자 규칙이 없어 (0,5,1) 로 위 (0,2,1)·(0,2,0) 을 확실히 이긴다. */
:root.fs-js .fs-p-116 h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-116 .fs-reveal:not(.is-in) h2::after { transform: scaleX(0); }

/* --- 모션 무효화 --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-116 .fs-precautions-tab { transition: none !important; }
  .fs-p-116 .fs-nose-head h2::after,
  .fs-p-116 .fs-sec-head__title::after,
  .fs-p-116 .fs-precautions-night .fs-mega::after {
    transition: none !important;
    transform: scaleX(1) !important;
  }
}

/* ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   116 + 문서 21장(116-01~21)이 이 파일과 ?v= 를 공유한다. 마크업 변경 0(생성기 split.py 는 다시 못 돌린다 — CSS 만).
   백업 _src/build/backup-116-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   줄바꿈: 수술 전 항목 · 시점 설명 · 문서 항목(* 목록) · 야간연락 리드·본문 · 시술별 부제 → balance(6줄 넘는 항목은 크롬이 안 건드린다).
   배치(<600, MOBILE_RULES §2 B): 「시간으로 보는 준비 시점」 7단계가 «크림 아이콘 상자 + 라벨바 + 한 줄 설명» 세로(360 섹션 ≈2,000px)
   → «상자+라벨바 왼쪽 40% · 설명 오른쪽» 행. 라벨바는 상자 바로 아래 그대로(LOCK 2), 아이콘만 상자 높이에 맞춰 56px.
   수술 전 5그룹의 아이콘 타일(57 .fs-nose-dz__fig 계열)은 그대로. */
.fs-p-116 .fs-precautions-item__text,
.fs-p-116 .fs-precautions-tl__text,
.fs-p-116 .fs-precautions-doc__list > li,
.fs-p-116 #night .fs-lead,
.fs-p-116 #night .fs-body,
.fs-p-116 #byproc .fs-sec-head__sub { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-116 .fs-precautions-tl__node {
    grid-template-columns: 40% minmax(0, 1fr);
    column-gap: var(--fs-sp-5);
    align-items: center;
  }
  .fs-p-116 .fs-precautions-tl__box img { width: 56px; }
}