@charset "utf-8";
/* ==========================================================================
   assets/page/145.css — [145] 모공 / 여드름흉터 전용 레이어
   모든 셀렉터는 .fs-p-145 스코프. 색·간격은 기존 --fs-* 토큰만 사용한다.
   전용 컴포넌트 : .fs-pas-hero / .fs-pas-quote / .fs-pas-scar /
                   .fs-pas-dev / .fs-pas-adv / .fs-pas-spec
   ========================================================================== */

/* --- 1. 3분할 스트립 히어로 (84 계열) -------------------------------------
   2026-08-31 · 승인자 지시로 다크 밴드 + 우측 컷아웃 히어로를 걷어냈다.
   84 의 .fs-skin-hero 와 같은 값을 쓴다 — 흰 면 위 가운데 카피, 그 아래
   전폭 3분할 세로 스트립. 옛 판에 있던 리드 한 줄만 틸 선 아래에 남긴다. */
.fs-p-145 .fs-pas-hero {
  min-height: 0;
  align-items: stretch;
  background: var(--fs-white);
  color: var(--fs-ink);
  overflow: visible;
}
.fs-p-145 .fs-pas-hero__wrap {
  display: grid;
  gap: clamp(24px, 20.2px + 1.058vw, 42px);
  padding-block-start: clamp(28px, 23.8px + 1.170vw, 48px);
}
.fs-p-145 .fs-pas-hero .fs-hero__copy { gap: clamp(8px, 6.3px + 0.481vw, 16px); }
.fs-p-145 .fs-pas-hero .fs-hero__kicker {
  color: var(--fs-teal-dk);
  letter-spacing: 0.04em;
}
.fs-p-145 .fs-pas-hero .fs-hero__title { color: var(--fs-ink); }
.fs-p-145 .fs-pas-hero__rule {
  width: clamp(48px, 42.4px + 1.554vw, 74px);
  height: 3px;
  background: var(--fs-teal);
}
.fs-p-145 .fs-pas-hero__lead {
  font-size: var(--fs-t-lead);
  line-height: var(--fs-lh-body);
  color: var(--fs-ink-soft);
}
.fs-p-145 .fs-pas-hero__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 2.3px + 0.481vw, 12px);
}
.fs-p-145 .fs-pas-hero__cell {
  position: relative;
  overflow: hidden;
  height: clamp(230px, 149.4px + 22.4vw, 500px);
  background: var(--fs-cream-2);
}
/* 셀은 가로로 눕고(1920 에서 ≈635x500) 사진은 세로(694x925)라 cover 가 세로 일부만
   보여준다. 위치는 컷마다 얼굴 높이가 달라 «에셋마다 실측해서» 넣는다. */
.fs-p-145 .fs-pas-hero__cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
}

/* --- 2. 치료 원칙 인용 밴드 ---------------------------------------------- */
.fs-p-145 .fs-pas-quote__title { margin-block-start: var(--fs-sp-4); line-height: var(--fs-lh-head); }
.fs-p-145 .fs-pas-quote__fig { margin: 0; }
.fs-p-145 .fs-pas-quote__frame { display: block; overflow: hidden; }
.fs-p-145 .fs-pas-quote__frame img { display: block; width: 100%; height: auto; }

/* --- 3. 흉터의 모양 — 원형 단면 도해 6종 --------------------------------- */
.fs-p-145 .fs-pas-scar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--fs-gap-card);
  margin-block-start: var(--fs-gap-title);
}
.fs-p-145 .fs-pas-scar__fig { margin: 0; display: grid; }
.fs-p-145 .fs-pas-scar__box {
  display: block;
  background: var(--fs-cream);
  padding: clamp(12px, 8.4px + 1.0vw, 28px);
}
.fs-p-145 .fs-pas-scar__box img { display: block; width: 100%; height: auto; }
@media (min-width: 600px) {
  .fs-p-145 .fs-pas-scar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- 4. 보유장비 코버플로우 쇼케이스 (시그니처) --------------------------- */
.fs-p-145 .fs-pas-dev { margin-block-start: var(--fs-gap-title); }
.fs-p-145 .fs-pas-dev__head { align-items: end; }
.fs-p-145 .fs-pas-dev__slide { display: grid; }
.fs-p-145 .fs-pas-dev__card {
  position: relative;
  margin: 0;
  display: grid;
  align-content: start;
  background: var(--fs-white);
}
.fs-p-145 .fs-pas-dev__num {
  position: absolute;
  inset-block-start: var(--fs-sp-4);
  inset-inline-start: var(--fs-sp-4);
  z-index: 1;
}
.fs-p-145 .fs-pas-dev__box { display: block; }
.fs-p-145 .fs-pas-dev__box img { display: block; width: 100%; height: auto; }

/* 도트 자리에 장비 썸네일 탭을 직접 써 넣는다 (fs.js 가 그대로 배선한다) */
.fs-p-145 .fs-pas-dev__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 7.7px + 0.64vw, 20px);
  margin-block-start: var(--fs-sp-9);
}
.fs-p-145 .fs-pas-dev__tabs .fs-carousel__dot {
  width: auto;
  aspect-ratio: auto;
  border-radius: var(--fs-radius-0);
  background: var(--fs-white);
  background-image: none;
  box-shadow: none;
  display: grid;
  gap: 6px;
  padding: 8px 8px 0;
  border-block-end: 2px solid var(--fs-line);
  opacity: .55;
  transition: opacity var(--fs-dur) var(--fs-ease),
              border-color var(--fs-dur) var(--fs-ease);
}
.fs-p-145 .fs-pas-dev__tabs .fs-carousel__dot.is-active {
  width: auto;
  background: var(--fs-white);
  background-image: none;
  box-shadow: none;
  border-block-end-color: var(--fs-teal-text);
  opacity: 1;
}
.fs-p-145 .fs-pas-dev__tab img { display: block; width: 100%; height: auto; }
.fs-p-145 .fs-pas-dev__tabname {
  display: block;
  padding-block: 6px 8px;
  font-size: var(--fs-t-xs);
  font-weight: 600;
  color: var(--fs-ink);
  text-align: center;
  line-height: 1.3;
}
@media (min-width: 600px) {
  .fs-p-145 .fs-pas-dev__tabs { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- 5. 장점 4가지 — 룰 카드 + 도해 아이콘 열 ---------------------------- */
.fs-p-145 .fs-pas-adv { margin-block-start: var(--fs-gap-title); }
.fs-p-145 .fs-pas-adv__icon { display: block; width: clamp(56px, 44.8px + 3.11vw, 90px); }
.fs-p-145 .fs-pas-adv__icon img { display: block; width: 100%; height: auto; }
.fs-p-145 .fs-pas-adv__title { line-height: var(--fs-lh-head); }
@media (min-width: 600px) {
  .fs-p-145 .fs-pas-adv__card { grid-template-columns: auto auto minmax(0, 1fr); }
}
@media (min-width: 1024px) {
  .fs-p-145 .fs-pas-adv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 6. 시술 정보 표 — 행 머리에 도해 아이콘 ------------------------------ */
.fs-p-145 .fs-pas-spec__head { justify-items: center; }
.fs-p-145 .fs-pas-spec { margin-block-start: var(--fs-gap-title); }
.fs-p-145 .fs-pas-spec__cell { display: inline-flex; align-items: center; gap: var(--fs-sp-3); }
.fs-p-145 .fs-pas-spec__ic { display: block; flex: 0 0 auto; width: clamp(26px, 23.7px + 0.64vw, 36px); }
.fs-p-145 .fs-pas-spec__ic img { display: block; width: 100%; height: auto; }
.fs-p-145 .fs-pas-spec__note { margin-block-start: var(--fs-sp-5); text-align: center; }

/* --- 7. 모션 무효화 (새로 넣은 transition 은 여기서 전부 끈다) ------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-145 .fs-pas-dev__tabs .fs-carousel__dot { transition: none !important; }
}

/* ==========================================================================
   ▼▼▼ 진단·수정 패스 — 2026-08-28
   전제: 145/index.html 의 섹션 id (#principle #scars #devices #merits #spec)와
   .fs-nose-head / .fs-sec-head 에 걸린 data-fs-reveal 이 아래 F4 블록의 전제다.
   HTML 에서 그 속성을 지우면 제목 선 애니메이션이 조용히 죽는다.
   ========================================================================== */

/* --- F2. LOCK 6 · 코버플로우를 콘텐츠 폭 밖으로 흘린다 --------------------
   fs.css 의 .fs-carousel__viewport 는 overflow:hidden 이라 이웃 슬라이드가
   콘텐츠 경계 x1679 에서 잘렸다(실측: 다음 슬라이드 rect 1348~1816).
   LOCK 6 (b) 는 「뷰포트의 overflow:hidden 으로 잘라내면 FAIL」이고
   확정 시안 57 의 .fs-nose-tx__viewport(fs.css:1543)가 overflow:visible 이다.
   잘림은 html/body 의 overflow-x:clip(fs.css:211·219)에 맡긴다.
   ★ 뷰포트 «폭» 은 건드리지 않는다 — fs.js 가 viewport.clientWidth 로
     슬라이드 폭을 계산한다.
   ★ 노출 폭이 (W-1440)/2 라 1440 이하에서는 30px 대의 「어긋난 여백」이
     된다. 1700 이상에서만 푼다(1700=130px · 1920=240px). */
@media (min-width: 1700px) {
  .fs-p-145 .fs-pas-dev .fs-carousel__viewport { overflow: visible; }
}

/* --- F3. 시술정보 주석 명도대비 3.67:1 → AA ------------------------------
   --fs-muted-2(#7D7D7D)는 「약관 본문」용이라 fs.css:2716 의 AA 보정에서
   빠져 있다. 크림 밴드(#F6F1EC) 위에서 3.67:1 로 4.5:1 에 미달한다.
   AA 보정을 받는 --fs-muted(#6E6E6E, 크림 4.54:1)로 올린다.
   ※ HTML 의 .fs-muted-2 클래스는 R1 범위 밖이지만 마크업을 건드리지 않고
     페이지 스코프에서만 덮는다. */
.fs-p-145 .fs-pas-spec__note { color: var(--fs-muted); }

/* --- F4. 섹션 제목 뒤 70px 틸 선 (delay .5s) ------------------------------
   ★ 초기 은닉을 «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히
     안 그어진다. fs.js 는 첫 화면 대상에 .fs-reveal 을 아예 안 붙인다.
     → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 은닉한다.
   ★ 대상을 ID 로 열거하면 (1,1,1) 이 은닉 규칙 (0,5,2) 를 이겨 선이 굳는다.
     클래스로만 잡는다. */
.fs-p-145 .fs-h2,
.fs-p-145 .fs-sec-head__title { position: relative; }
.fs-p-145 .fs-h2::after,
.fs-p-145 .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;
}
:root.fs-js .fs-p-145 .fs-reveal:not(.is-in) .fs-h2::after,
:root.fs-js .fs-p-145 .fs-reveal:not(.is-in) .fs-sec-head__title::after,
:root.fs-js .fs-p-145 .fs-h2.fs-reveal:not(.is-in)::after { transform: scaleX(0); }
/* 시술 정보 제목은 가운데정렬 머리다 — 선도 가운데에서 펼친다 */
.fs-p-145 .fs-pas-spec__head .fs-h2::after {
  margin-inline: auto;
  transform-origin: center;
}

/* --- F5. 인용 인물컷 호버 — 프레임 고정 + 사진만 scale(1.045) -------------
   .fs-pas-quote__frame 이 이미 overflow:hidden 이고 라벨바가 없어
   [[hover-zoom-covers-labelbar]] 의 z-index 문제가 없다.
   흉터 단면 도해·장비 사진에는 걸지 않는다(의학 도해는 가장자리가 잘린다). */
.fs-p-145 .fs-pas-quote__frame img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-145 .fs-pas-quote__fig:hover .fs-pas-quote__frame img { transform: scale(1.045); }
}

/* --- F6. reduced-motion — 위에서 새로 넣은 모션을 최종 정적 상태로 고정 ----
   파일 앞쪽 「7. 모션 무효화」 블록보다 뒤에 와야 캐스케이드에서 이긴다. */
@media (prefers-reduced-motion: reduce) {
  .fs-p-145 .fs-h2::after,
  .fs-p-145 .fs-sec-head__title::after {
    transform: scaleX(1) !important;
    transition: none !important;
  }
  .fs-p-145 .fs-pas-quote__frame img { transition: none; transform: none !important; }
}

/* ==========================================================================
   ▼▼▼ 2026-10-22 · 모바일 최적화(승인자 「홈페이지 전체적인 모바일 최적화 진행」) — 줄바꿈은 전 폭, 배치는 599px 이하만. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-145-1022-mo · 실측 _design/momeasure.py 360/390/540/768.
   줄바꿈: nbsp 2(원리 제목 「넓은 모공 등」 · 「치료해야 합니다.」 — 제목 <br> 은 그대로, 줄 수 무변화) · balance(시술정보 주의문, 주소) ·
           원리 제목의 형광 칸 <600 inline(390 「…재생력 / 으로」, §7-19).
   고아 줄(전): 360·390 「…흉터, 넓은 / 모공 등」「…치료해야 / 합니다.」 · 주의문 「…부작용이 / 발생할 수 있습니다.」.
   배치(<600): 장점 4장 «번호 위 · 아이콘 · 제목» 세로(장당 ≈210px) → 600~1023 과 같은 «번호 · 아이콘 · 제목» 한 행.
   (장비 라벨바가 실측에서 「셀 / 락 / 프」 로 잡히는 건 화면 밖 캐러셀 슬라이드 — 화면에서는 정상.)
   ========================================================================== */
.fs-p-145 .fs-pas-spec__note,
.fs-p-145 .fs-address { text-wrap: balance; }
@media (max-width: 599px) {
  .fs-p-145 .fs-pas-quote__title .fs-mark {
    display: inline;
    -webkit-box-decoration-break: clone;
            box-decoration-break: clone;
  }
  .fs-p-145 .fs-pas-adv__card {
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--fs-sp-4);
  }
}