/* ==========================================================================
   97 · 진료안내 · 오시는길 — 페이지 전용 CSS
   모든 셀렉터는 .fs-p-97 스코프. 색은 --fs-* 토큰만 사용(새 hex 0개).
   ========================================================================== */

/* --- A01 · 컴팩트 인트로 히어로 (사진 없이 타이포로 연다) -----------------
   2026-09-11 승인자 지시 3연속. 셋이 한 덩이라 따로 못 본다:
     ① 「히어로 배경을 진한색으로」   흰 → --fs-ink-band(#111111)
     ② 「이 섹션 배경을 흰색으로」    #map 토프 틴트 → 흰
     ③ 「검정 말고 토프 계열로 · 94 히어로 사이즈 참고」  #111111 → --fs-teal-ink(#57453F)
   밴드 리듬 : 토프잉크(hero) → 흰(map) → 크림(gallery) → 흰(contact).
   LOCK 4 (b)(히어로와 다음 섹션은 색이 달라야) · (d)(같은 색 3연속 금지) 모두 통과.
   ★ LOCK 5 「다크 밴드 정확히 1개」 는 이 변경 뒤에도 0개다 — 판정법 (b-1) 이
     `.fs-hero` 를 히어로로 식별해 5항 계수에서 빼기 때문이다(다크 «오프너» 는 밴드가 아니다).
     0개인 상태 자체는 2026-09-11 앞선 지시로 승인자가 이미 받아들인 것이다.
   ★ 헤더는 오버레이가 아니라 흰 고정 바라 히어로와 겹치지 않는다 — GNB 대비 영향 0.

   ③ 색 선택 — 팔레트의 토프 계열 5종을 실제 렌더로 세워 놓고 골랐다.
   `--fs-teal-ink` 만이 **글자를 하나도 안 건드리고** 전부 AA 를 넘는 유일한 값이다:
     토큰             값        흰글자  킥커(neon)  보조글자(흰72%)
     --fs-teal-ink   #57453F    9.02     5.06        5.61     ← 채택
     --fs-teal-dk    #6B564E    6.85     3.84 ✗      4.49 ✗
     --fs-teal-text  #80665D    5.28     2.96 ✗      3.61 ✗
     --fs-teal       #97796E    3.98 ✗   2.23 ✗      2.87 ✗
     --fs-taupe      #AFA79A    2.38 ✗   1.34 ✗      1.92 ✗
   눈으로도 같은 결론이었다 — 615px 짜리 큰 면이라 #80665D 는 중간 갈색이 화면을 다 먹고,
   #57453F 는 검정이 하던 «무게» 를 그대로 받으면서 색만 토프로 넘어온다.
   #97796E 와 같은 색상(H≈17°)이고 명도만 낮은 값이라 라벨바(#80665D)·마크와 한 계열이 된다.

   ③ 크기 — 94(의료진 소개) `.fs-doctors-hero` 의 min-height 를 **같은 식으로** 가져왔다
   (`assets/page/94.css:16`). 1838px 창에서 둘 다 615px 로 떨어진다(승인자 스크린샷 실측과 일치).
   `.fs-hero` 가 `display:grid; align-items:center` 라 남는 세로는 카피가 가운데로 먹는다.
   ------------------------------------------------------------------------- */
.fs-p-97 .fs-dir-hero {
  min-height: clamp(420px, 372.3px + 13.2vw, 626px);
  background: var(--fs-teal-ink);
  color: var(--fs-on-dark);
  /* 아래 변 1px --fs-line 은 지운다 — 어두운 면 밑단에 밝은 실선이 그어져 «이음매» 로 읽힌다.
     토프잉크 → 흰 경계는 색차 자체가 선 역할을 한다. */
  border-block-end: 0;
  overflow: visible;
}
.fs-p-97 .fs-dir-hero__grid { width: 100%; }
/* 실측 대비(#57453F 위) — 흰 제목 9.02 · 킥커 5.06 · 주소·진료시간 라벨 흰72% 5.61 ·
   전화번호·진료시간 값 흰 9.02 · 헤어라인 흰22% 1.84(장식선). 전부 AA 이상. */
.fs-p-97 .fs-dir-hero .fs-hero__kicker {
  font-family: var(--fs-font-en);
  color: var(--fs-teal-neon);   /* fs.css:3327 이 다크 밴드 킥커에 쓰는 그 색 */
  letter-spacing: var(--fs-ls-wide);
}
.fs-p-97 .fs-dir-hero .fs-hero__title { color: var(--fs-on-dark); }
/* 주소 한 줄은 제목 아래 보조 정보다. --fs-muted(#6E6E6E) 는 이 면 위 1.9:1 로 못 쓴다.
   흰색의 알파 변형으로 단을 만든다(새 색상 아님 · 82.css:81 과 같은 처방). */
.fs-p-97 .fs-dir-hero__addr { color: rgba(255, 255, 255, .72); }
.fs-p-97 .fs-dir-hero__side {
  display: grid; align-content: end; gap: var(--fs-sp-4);
  padding-block-start: var(--fs-sp-6);
  border-block-start: 2px solid var(--fs-teal);
}
.fs-p-97 .fs-dir-hero__side .fs-contact__label { color: var(--fs-teal-neon); }
.fs-p-97 .fs-dir-hero__side .fs-tel a { color: var(--fs-on-dark); }
.fs-p-97 .fs-dir-hero__side .fs-tel a:hover { color: var(--fs-teal-neon); }
.fs-p-97 .fs-dir-hero__hours { margin-block-start: var(--fs-sp-3); }
.fs-p-97 .fs-dir-hero__hours .fs-hours__label { white-space: nowrap; }
@media (min-width: 1024px) {
  .fs-p-97 .fs-dir-hero__side { border-block-start: 0; border-inline-start: 2px solid var(--fs-teal); padding: 0 0 0 var(--fs-sp-8); }
}

.fs-p-97 .fs-nose-head .fs-kicker { margin-block-end: var(--fs-sp-4); }

/* --- 시그니처 · 랜드마크 약도 오버레이 ------------------------------------ */
.fs-p-97 .fs-dir-map { margin: 0; background: var(--fs-white); }
/* 아래 변 테두리는 지운다 — 이 자리에 라벨바가 «간격 0» 으로 붙는다(LOCK 2).
   이 페이지의 다른 도해(rail·park·route)는 전부 border-block-end: 0 인데
   시그니처 약도만 1px 선이 남아 사진과 바 사이에 회색 실선이 그어져 있었다. */
/* 테두리색 — 밴드가 흰색이 되면서 --fs-line(#EDEDED · 흰 위 1.13:1)이 사실상 사라졌다.
   도해 «안» 도 흰 도로라 프레임이 없으면 약도가 페이지 여백에 풀려 버린다.
   두께 — 2026-09-11 3차 지시 「아주 조금만 더 두껍게」. 1px → 2px (한 단계).
   색 — 약도가 슬라이드 15 의 중립 회색 팔레트로 가면서 웜 토프 --fs-line-control(#B8AB9D)은
   지도와 계열이 어긋난다. 같은 밝기의 중립 회색 --fs-step-idle(#C8C8C8 · 흰 위 1.90:1)로
   바꾼다 — 2px 가 되면서 선의 «면적» 이 두 배라 1px #B8AB9D 와 존재감은 같다. */
.fs-p-97 .fs-dir-map__frame { position: relative; display: block; border: 2px solid var(--fs-step-idle); border-block-end: 0; }
.fs-p-97 .fs-dir-map__frame img { display: block; width: 100%; height: auto; }
.fs-p-97 .fs-dir-map__pin {
  position: absolute;
  inset-inline-start: var(--fs-pin-x, 50%);
  inset-block-start: var(--fs-pin-y, 50%);
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  box-sizing: border-box;
  inline-size: clamp(26px, 22.6px + 0.962vw, 41px);
  block-size: clamp(26px, 22.6px + 0.962vw, 41px);
  border: 2px solid var(--fs-white);
  border-radius: var(--fs-radius-round);
  background: var(--fs-teal-dk);
  color: var(--fs-white);
  font-family: var(--fs-font-en);
  font-size: clamp(11px, 10.1px + 0.256vw, 15px);
  font-weight: 700;
  line-height: 1;
}
.fs-p-97 .fs-dir-map__pin--goal { background: var(--fs-ink); }

/* 약도 옆 3스텝 요약 */
.fs-p-97 .fs-dir-key { list-style: none; margin: 0; padding: 0; display: grid; }
.fs-p-97 .fs-dir-key li {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: var(--fs-sp-5); align-items: baseline;
  padding-block: var(--fs-sp-5);
  border-block-end: 1px solid var(--fs-line);
}
.fs-p-97 .fs-dir-key li:first-child { border-block-start: 1px solid var(--fs-ink); }
.fs-p-97 .fs-dir-key b {
  font-family: var(--fs-font-en); font-size: var(--fs-t-sm); font-weight: 700;
  color: var(--fs-teal-dk); letter-spacing: var(--fs-ls-wide);
}
.fs-p-97 .fs-dir-key strong { display: block; font-size: var(--fs-t-h3); font-weight: 700; color: var(--fs-ink); letter-spacing: var(--fs-ls-tight); line-height: var(--fs-lh-head); }
.fs-p-97 .fs-dir-key__txt { display: block; }
.fs-p-97 .fs-dir-key__txt > span { display: block; margin-block-start: var(--fs-sp-2); font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-muted); }

/* 약도 범례 */
.fs-p-97 .fs-dir-legend {
  list-style: none; margin: var(--fs-sp-8) 0 0; padding: 0;
  display: grid; gap: var(--fs-sp-3);
}
.fs-p-97 .fs-dir-legend li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--fs-sp-5); align-items: center;
}
.fs-p-97 .fs-dir-legend img {
  display: block; inline-size: 44px; block-size: 44px;
  object-fit: contain; background: var(--fs-white);
  border: 1px solid var(--fs-line);
}
@media (min-width: 1024px) {
  .fs-p-97 .fs-dir-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--fs-sp-6); }
  .fs-p-97 .fs-dir-legend li:last-child { grid-column: 1 / -1; }
}
.fs-p-97 .fs-dir-legend__txt { display: grid; gap: 2px; }
.fs-p-97 .fs-dir-legend__txt b { font-size: var(--fs-t-body); font-weight: 700; color: var(--fs-ink); line-height: 1.3; }
.fs-p-97 .fs-dir-legend__txt span { font-size: var(--fs-t-xs); color: var(--fs-muted); line-height: 1.4; }

/* --- 전용 · 랜드마크 리본 (약도 가로 슬라이스 + 상호 칩) ------------------ */
.fs-p-97 .fs-dir-rail { list-style: none; margin: var(--fs-gap-title) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fs-sp-9); }
.fs-p-97 .fs-dir-rail__fig { margin: 0; }
.fs-p-97 .fs-dir-rail__fig img { display: block; width: 100%; height: auto; background: var(--fs-white); border: 1px solid var(--fs-line); border-block-end: 0; }
.fs-p-97 .fs-dir-rail__chips {
  list-style: none; margin: var(--fs-sp-5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--fs-sp-3) var(--fs-sp-6);
}
.fs-p-97 .fs-dir-rail__chips li {
  display: grid; grid-template-columns: auto auto; gap: var(--fs-sp-2); align-items: center;
  font-size: var(--fs-t-sm); color: var(--fs-ink-soft);
}
.fs-p-97 .fs-dir-rail__chips li::before {
  content: ""; inline-size: 6px; block-size: 6px;
  border-radius: var(--fs-radius-round); background: var(--fs-teal-dk);
}
.fs-p-97 .fs-dir-rail__chips .is-here { font-weight: 700; color: var(--fs-teal-dk); }
.fs-p-97 .fs-dir-rail__scroll { display: block; max-inline-size: 100%; }
.fs-p-97 .fs-dir-rail__hint { display: none; }
@media (max-width: 599px) {
  .fs-p-97 .fs-dir-rail__scroll { overflow-x: auto; overscroll-behavior-x: contain; }
  .fs-p-97 .fs-dir-rail__scroll img { min-inline-size: 720px; }
  .fs-p-97 .fs-dir-rail__hint {
    display: block; margin-block-start: var(--fs-sp-5);
    font-size: var(--fs-t-xs); color: var(--fs-muted);
  }
}

/* --- 정의행 (주차 · 주소) ------------------------------------------------- */
.fs-p-97 .fs-dir-def { margin: var(--fs-sp-9) 0 0; display: grid; }
.fs-p-97 .fs-dir-def__row {
  display: grid; gap: var(--fs-sp-2);
  padding-block: var(--fs-sp-6);
  border-block-end: 1px solid var(--fs-line);
}
.fs-p-97 .fs-dir-def__row:first-child { border-block-start: 1px solid var(--fs-ink); }
.fs-p-97 .fs-dir-def dt { font-size: var(--fs-t-sub); font-weight: 700; color: var(--fs-teal-dk); letter-spacing: var(--fs-ls-tight); }
.fs-p-97 .fs-dir-def dd { margin: 0; font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-ink-soft); }
.fs-p-97 .fs-dir-def__src { display: inline-block; margin-block-start: var(--fs-sp-2); font-size: var(--fs-t-xs); color: var(--fs-muted); }
@media (min-width: 1024px) {
  .fs-p-97 .fs-dir-def__row { grid-template-columns: minmax(0, 320fr) minmax(0, 700fr); column-gap: var(--fs-gap-col); align-items: baseline; }
}

/* --- 주차 도해 스택 -------------------------------------------------------- */
.fs-p-97 .fs-dir-park { display: grid; gap: var(--fs-gap-card); align-content: start; }
.fs-p-97 .fs-dir-park figure { margin: 0; }
.fs-p-97 .fs-dir-park img { display: block; width: 100%; height: auto; background: var(--fs-white); border: 1px solid var(--fs-line); border-block-end: 0; }
.fs-p-97 .fs-dir-park__pair img { aspect-ratio: 16 / 7; object-fit: contain; }
@media (min-width: 600px) {
  .fs-p-97 .fs-dir-park { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-97 .fs-dir-park > figure:first-child { grid-column: 1 / -1; }
}

/* --- 전용 · 3스텝 동선 카드 ------------------------------------------------ */
.fs-p-97 .fs-dir-route { list-style: none; margin: var(--fs-gap-title) 0 0; padding: 0; display: grid; gap: var(--fs-gap-card); }
.fs-p-97 .fs-dir-route__item {
  position: relative;
  display: grid; align-content: start; gap: var(--fs-sp-4);
  padding-block-end: var(--fs-sp-5);
}
.fs-p-97 .fs-dir-route__fig { margin: 0 0 var(--fs-sp-2); }
.fs-p-97 .fs-dir-route__box { display: block; overflow: hidden; background: var(--fs-white); border: 1px solid var(--fs-line); border-block-end: 0; }
.fs-p-97 .fs-dir-route__box img { display: block; width: 100%; height: auto; aspect-ratio: 64 / 25; object-fit: cover; }
.fs-p-97 .fs-dir-route__item .fs-pill { justify-self: start; }
.fs-p-97 .fs-dir-route__title { font-size: var(--fs-t-h3); font-weight: 700; line-height: var(--fs-lh-head); letter-spacing: var(--fs-ls-tight); }
.fs-p-97 .fs-dir-route__desc { font-size: var(--fs-t-body); line-height: var(--fs-lh-body); color: var(--fs-muted); }
@media (min-width: 600px) { .fs-p-97 .fs-dir-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .fs-p-97 .fs-dir-route { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fs-p-97 .fs-dir-route__item:not(:last-child)::after {
    content: ""; position: absolute;
    inset-inline-start: 100%; inset-block-start: 24%;
    inline-size: var(--fs-gap-card); block-size: 2px;
    background: var(--fs-teal);
  }
}

/* 간판 배너 */
.fs-p-97 .fs-dir-sign { margin: var(--fs-sp-10) 0 0; }
.fs-p-97 .fs-dir-sign img { display: block; width: 100%; height: auto; }

/* --- 영상 다크 밴드 -------------------------------------------------------- */
.fs-p-97 .fs-dir-video .fs-section__bg img { opacity: .13; object-position: 72% 45%; }
.fs-p-97 .fs-dir-video .fs-kicker { color: var(--fs-teal-neon); }
.fs-p-97 .fs-dir-video__lead { color: var(--fs-on-dark); }
.fs-p-97 .fs-dir-video__grid { margin-block-start: var(--fs-sp-4); }
.fs-p-97 .fs-dir-video__media { position: relative; display: block; overflow: hidden; }
.fs-p-97 .fs-dir-video__media img { display: block; width: 100%; height: auto; }
/* LOCK 2 「풀폭」 조항 — inset-inline-start 만 주면 바가 내용 폭(1920 에서 137px)으로
   줄어 사진(480px) 위에 뜬 «태그» 로 읽힌다. 좌우를 모두 0 으로 물려 풀폭으로 깐다. */
.fs-p-97 .fs-dir-video__media .fs-labelbar {
  position: absolute; inset-block-end: 0; inset-inline: 0;
}
/* A18 흰 패널은 원래 미디어 오른쪽 아래를 덮고 내려앉는다. 이 페이지의 미디어는
   글자가 구워진 약도 크롭이라 그 겹침이 폭에 따라 라벨바와 지명을 잘라먹었다
   (1024 에서는 한 글자가 통째로 사라졌다). 여기서만 겹침을 풀고 아래로 쌓는다. */
.fs-p-97 .fs-dir-video__card .fs-card__panel { position: relative; inset: auto; inline-size: auto; }
.fs-p-97 .fs-dir-video__card .fs-card__title { color: var(--fs-ink); font-size: var(--fs-t-lead); }

/* --- 진료시간 · 도착 안내 -------------------------------------------------- */
.fs-p-97 .fs-dir-hours__note { margin-block-start: var(--fs-sp-5); font-size: var(--fs-t-sm); color: var(--fs-muted); }
.fs-p-97 .fs-dir-hours__bar { margin-block-start: var(--fs-sp-8); }
.fs-p-97 .fs-dir-visit { display: grid; gap: var(--fs-gap-card); align-content: start; }
@media (min-width: 600px) {
  .fs-p-97 .fs-dir-visit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-p-97 .fs-dir-visit__more { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .fs-p-97 .fs-dir-visit { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--fs-sp-5); }
}
.fs-p-97 .fs-dir-visit figure { margin: 0; }
.fs-p-97 .fs-dir-visit__box { display: block; overflow: hidden; }
.fs-p-97 .fs-dir-visit__box img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fs-p-97 .fs-dir-visit__more { margin-block-start: var(--fs-sp-6); justify-self: start; }

/* --- reduced-motion: 새 모션이 없으므로 레이아웃 고정만 확인 -------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-97 .fs-dir-map__pin { transform: translate(-50%, -50%); }
}

/* ==========================================================================
   V70 진단·수정 패스 — 2026-08-27
   구조(축·비율)와 마이크로 인터랙션. 문구·정보는 하나도 건드리지 않는다.
   ========================================================================== */

/* --- 1. 진료시간 섹션 — 4열 균등 썸네일 → 2×2, 그리고 축 반전 -------------
   검출: C:fs-split@S7 fig237/copy443 · D:S7+S8 둘 다 도해가 오른쪽.
   실측(1920): 왼쪽 컬럼 457px / 오른쪽 컬럼 248px — 오른쪽 아래로 209px 의
   크림 공백이 남고, 1024 에서는 사진이 110px 로 줄어 라벨바 글자가 두 줄로
   접혀 카드 바닥이 들쭉날쭉해졌다. 2×2 로 접어 사진을 2배로 키우고,
   앞뒤 섹션(영상 밴드·마감 블록)이 전부 「도해 오른쪽」이라 여기만 축을 뒤집는다.
   DOM 순서는 그대로 둔다(R1 — 텍스트 순서 보존). order 로만 자리를 바꾼다. */
@media (min-width: 1024px) {
  .fs-p-97 .fs-dir-visit { grid-template-columns: repeat(2, minmax(0, 1fr)); order: -1; }
  .fs-p-97 .fs-dir-visit__box img { aspect-ratio: 16 / 9; }
}

/* --- 2. 제목 뒤 70px 틸 선 ------------------------------------------------
   ★ 초기 은닉을 «.is-in 이면 보이기» 로 짜면 첫 화면 제목의 선이 영원히 안 그어진다.
     fs.js 는 첫 화면 대상에 .fs-reveal 클래스 자체를 안 붙인다.
     → 기본을 「그어진 상태」로 두고 .fs-reveal:not(.is-in) 에만 은닉을 건다. */
.fs-p-97 .fs-h2 { position: relative; }
.fs-p-97 .fs-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-97 h2.fs-h2.fs-reveal:not(.is-in)::after,
:root.fs-js .fs-p-97 .fs-reveal:not(.is-in) .fs-h2::after { transform: scaleX(0); }

/* --- 3. 호버 — 프레임은 고정, 사진만 움직인다 (그림자 금지) --------------- */
.fs-p-97 .fs-dir-route__box img,
.fs-p-97 .fs-dir-visit__box img,
.fs-p-97 .fs-dir-video__media img {
  transition: transform var(--fs-dur-slow) var(--fs-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .fs-p-97 .fs-dir-route__item:hover .fs-dir-route__box img,
  .fs-p-97 .fs-dir-visit figure:hover .fs-dir-visit__box img,
  .fs-p-97 .fs-dir-video__card:hover .fs-dir-video__media img { transform: scale(1.045); }

  /* 라벨바는 사진과 함께 커지면 안 된다 — 글자가 흔들린다. 색만 한 단계. */
  .fs-p-97 .fs-dir-route__item:hover .fs-labelbar,
  .fs-p-97 .fs-dir-visit figure:hover .fs-labelbar,
  .fs-p-97 .fs-dir-video__card:hover .fs-labelbar {
    background: var(--fs-teal-dk);
    transition: background var(--fs-dur) var(--fs-ease);
  }
}

/* --- 4. reduced-motion — 새로 얹은 것 전부 정지 상태로 확정 --------------- */
@media (prefers-reduced-motion: reduce) {
  .fs-p-97 .fs-h2::after { transform: scaleX(1) !important; transition: none !important; }
  .fs-p-97 .fs-dir-route__box img,
  .fs-p-97 .fs-dir-visit__box img,
  .fs-p-97 .fs-dir-video__media img { transition: none !important; transform: none !important; }
}

/* --- 5. 태블릿 — 3스텝이 「2 + 고아 1」로 끊긴다 --------------------------
   600px 분기에서 2열이 되면 STEP 03 만 다음 줄에 혼자 남아 «세 걸음» 이
   1-2 / 3 으로 읽힌다. 48 의 처방과 같은 방향으로, 과정 도해는 열을 접지 않고
   3열을 유지하되 3열이 229px 아래로 내려가는 600~767 구간만 통째로 세운다. */
@media (min-width: 600px) and (max-width: 767px) {
  .fs-p-97 .fs-dir-route { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 768px) {
  .fs-p-97 .fs-dir-route { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ==========================================================================
   GD 레이아웃 이식 (2026-08-28)
   참고: goldendiamantps.rebeauty.website/draft1_builder/location.html
   승인자 지시 — 「가장 마음에 드는 것이 layout」.

   GD 에서 실제로 가져온 것은 셋이다. 색·서체·에셋은 포시즌 것을 그대로 쓴다.
     ① 가운데 정렬 인트로 — 킥커 / 큰 제목 / 부연 / 액션 을 한 축에 세운다
     ② 상자 없는 헤어라인 행 — 카드·테두리 대신 1px 선으로만 나눈다
     ③ 라벨-값 정의 그리드 — 작은 라벨이 왼쪽, 값이 오른쪽. 큰 전화번호가 앵커
   R1: 문구·순서·alt 는 하나도 건드리지 않았다. 전부 CSS 다.
   ========================================================================== */

/* --- ① 히어로 : 좌우 스플릿 → 가운데 정렬 인트로 ------------------------- */
.fs-p-97 .fs-dir-hero__grid {
  /* 인라인 style 은 --fs-split «변수» 만 정한다. 속성을 직접 덮으면 이긴다. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
  gap: clamp(28px, 20px + 1.2vw, 48px);
}
.fs-p-97 .fs-dir-hero .fs-hero__copy {
  justify-items: center;
  max-width: 60ch;
  gap: clamp(12px, 9px + 0.5vw, 20px);
}
.fs-p-97 .fs-dir-hero .fs-hero__kicker {
  font-size: clamp(11px, 10.3px + 0.19vw, 13px);
  letter-spacing: 0.22em;
  font-weight: 700;
}
.fs-p-97 .fs-dir-hero .fs-hero__title {
  font-size: clamp(30px, 20px + 2.2vw, 58px);
  line-height: 1.1;
}
.fs-p-97 .fs-dir-hero__addr { max-width: 46ch; }

/* 액션 줄 — 라벨 / 큰 전화 / 진료시간을 한 축에 세운다 */
.fs-p-97 .fs-dir-hero__side {
  border: 0;
  padding: 0;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 8px + 0.35vw, 16px);
}
.fs-p-97 .fs-dir-hero__side .fs-contact__label {
  font-size: clamp(11px, 10.3px + 0.19vw, 13px);
  letter-spacing: 0.16em;
  font-weight: 700;
}
.fs-p-97 .fs-dir-hero__side .fs-tel {
  font-size: clamp(26px, 18px + 1.7vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
/* 진료시간 3행을 가로 한 줄로 눕힌다 — 세로 스택은 인트로의 축을 흐린다 */
.fs-p-97 .fs-dir-hero__hours {
  margin-block-start: clamp(10px, 8px + 0.35vw, 16px);
  /* 잉크 히어로 — --fs-line(#EDEDED)은 #111 위에서 18.9:1 이라 «흰 실선» 으로 튄다.
     GD 이식의 ② 「상자 없는 헤어라인 행」은 살리되 밝기만 낮춘다(1.97:1 · 장식선). */
  border-block-start: 1px solid rgba(255, 255, 255, .22);
  padding-block-start: clamp(12px, 10px + 0.35vw, 18px);
}
@media (min-width: 600px) {
  .fs-p-97 .fs-dir-hero__hours {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    column-gap: clamp(20px, 12px + 1.1vw, 40px);
    row-gap: 6px;
  }
  .fs-p-97 .fs-dir-hero__hours .fs-hours__row {
    column-gap: clamp(8px, 6px + 0.25vw, 12px);
    min-height: 0;
  }
  .fs-p-97 .fs-dir-hero__hours .fs-hours__label {
    width: auto; text-align: start; text-align-last: start;
    /* 흰 히어로 때의 --fs-muted(#6E6E6E)는 어두운 면 위 3.6:1 로 AA 미달이다(qa.py 실측).
       라벨을 값보다 한 단 낮춘다는 원래 의도는 주소 줄과 같은 흰 72% 로 옮긴다 — 5.61:1. */
    color: rgba(255, 255, 255, .72); font-weight: 600;
  }
}
@media (min-width: 1024px) {
  /* 32행의 「좌측 틸 세로선」 규칙을 되돌린다 — 가운데 정렬과 충돌한다 */
  .fs-p-97 .fs-dir-hero__side { border-inline-start: 0; padding: 0; }
}

/* --- ② 범례를 헤어라인 행으로 (상자·여백 덩어리 제거) --------------------- */
.fs-p-97 .fs-dir-legend {
  margin-block-start: clamp(24px, 18px + 0.9vw, 40px);
  gap: 0;
}
.fs-p-97 .fs-dir-legend li {
  border-block-start: 1px solid var(--fs-line);
  padding-block: clamp(11px, 9px + 0.35vw, 16px);
  align-items: center;
}
@media (min-width: 1024px) {
  .fs-p-97 .fs-dir-legend { column-gap: clamp(24px, 14px + 1vw, 44px); }
  /* 2열이므로 위 두 칸에도 선이 필요하다 — 원래 첫 행만 선이 없었다 */
  .fs-p-97 .fs-dir-legend li:nth-child(1),
  .fs-p-97 .fs-dir-legend li:nth-child(2) { border-block-start: 1px solid var(--fs-ink); }
}

/* --- ③ CONTACT : 라벨-값 정의 그리드 + 디스플레이 전화번호 ---------------- */
.fs-p-97 .fs-nose-contact .fs-contact__tel {
  font-size: clamp(34px, 20px + 2.6vw, 62px);
  line-height: .98;
}
@media (min-width: 768px) {
  /* 라벨이 왼쪽, 값이 오른쪽 — GD 의 HOURS / ADDRESS / TRANSIT 그리드 */
  .fs-p-97 .fs-nose-contact .fs-contact__group {
    grid-template-columns: clamp(84px, 60px + 2.2vw, 116px) minmax(0, 1fr);
    column-gap: clamp(18px, 12px + 0.7vw, 32px);
    align-items: start;
    border-block-start: 1px solid var(--fs-line);
    padding-block-start: clamp(14px, 11px + 0.5vw, 22px);
  }
  .fs-p-97 .fs-nose-contact .fs-contact__col > .fs-contact__group:first-child {
    border-block-start: 1px solid var(--fs-ink);
  }
  .fs-p-97 .fs-nose-contact .fs-contact__label {
    font-size: clamp(11px, 10.3px + 0.19vw, 13px);
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--fs-muted);
    padding-block-start: .35em;
  }
  /* 전화번호 행만 라벨을 위로 올린다 — 디스플레이 크기라 나란히 두면 어긋난다 */
  .fs-p-97 .fs-nose-contact .fs-contact__group:has(.fs-contact__tel) {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(6px, 4px + 0.2vw, 10px);
  }
  .fs-p-97 .fs-nose-contact .fs-hours__row { min-height: clamp(30px, 28px + 0.25vw, 34px); }
  .fs-p-97 .fs-nose-contact .fs-map { margin-block-start: clamp(6px, 4px + 0.2vw, 12px); }
}

/* --- ①-b LOCATION : 제목을 오른쪽 정보 열 안으로 -------------------------- */
/* GD 는 「학동사거리 인근 · 강남구청역 근접」을 지도 옆 열 맨 위에 둔다.
   97 은 제목이 스플릿 «위» 에 전폭으로 앉아 있어 지도와 정보가 따로 논다.
   ★ DOM 순서는 건드리지 않는다 (R1 — 블록 내 순서 변경 금지).
     .fs-split 을 display:contents 로 풀어 바깥 격자에 직접 배치만 바꾼다. */
@media (min-width: 1024px) {
  .fs-p-97 #map > .fs-container {
    display: grid;
    grid-template-columns: minmax(0, 820fr) minmax(0, 560fr);
    column-gap: var(--fs-gap-col);
    align-items: start;
  }
  .fs-p-97 #map .fs-nose-head  { grid-column: 2; grid-row: 1; }
  .fs-p-97 #map .fs-split      { display: contents; }
  .fs-p-97 #map .fs-dir-map    { grid-column: 1; grid-row: 1 / span 2; }
  .fs-p-97 #map .fs-split > div { grid-column: 2; grid-row: 2; margin-block-start: var(--fs-sp-6); }
}

/* --- ①-c 범례를 아래 전폭 띠로 -------------------------------------------
   실측(1600) — 지도 834x564 / 오른쪽 열 889. 지도 밑에 325px 구멍이 났다.
   범례를 두 열 아래로 내리면 지도 564 : 머리+키 560 으로 맞아떨어진다.
   ★ .fs-split > div 를 display:contents 로 푼다. 그 div 는 data-fs-reveal 대상이라
     리빌 변형(transform·opacity)이 무시된다 — 애니메이션만 사라지고 «내용은 항상 보인다».
     구멍을 두는 것보다 낫다고 판단했다. 지도·키 리스트의 리빌은 그대로 산다. */
@media (min-width: 1024px) {
  .fs-p-97 #map .fs-split > div { display: contents; }
  .fs-p-97 #map .fs-dir-key {
    grid-column: 2; grid-row: 2;
    margin-block-start: var(--fs-sp-6);
  }
  .fs-p-97 #map .fs-dir-legend {
    grid-column: 1 / -1; grid-row: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--fs-gap-col);
    margin-block-start: clamp(34px, 24px + 1vw, 56px);
  }
  .fs-p-97 #map .fs-dir-legend li:nth-child(-n+4) { border-block-start: 1px solid var(--fs-ink); }
  .fs-p-97 #map .fs-dir-legend li:last-child { grid-column: auto; }
}

/* --- LANDMARK 섹션 제거 (2026-08-28 승인자 지시) --------------------------
   ★ DOM 에서 지우지 않는다 — 심의 문구라 삭제하면 R1 게이트가 FAIL 이다.
     캐러셀(밀어서 보는 조각 약도)이라 .fs-sr-only 로 숨기면 스크린리더에는
     「옆으로 밀어서 볼 수 있습니다」가 읽히는데 화면엔 없는 모순이 생긴다.
     display:none 이 시각·접근성 트리에서 함께 빠지는 유일하게 일관된 방법이다.
   ★ 정보 손실 0 — 상가 이름 전부가 약도 figcaption 의 sr-only 전문에 이미 있다.
   ------------------------------------------------------------------------- */
.fs-p-97 #landmark { display: none; }

/* --- 밴드 리듬 복구 -------------------------------------------------------
   LANDMARK(흰)를 뺐더니 #map(크림) 과 #parking(크림) 이 맞붙어
   1745px 연속 크림이 됐다. 원래 흰/크림이 완벽히 교대하던 리듬이 깨진 것이다.
   두 섹션의 밴드를 맞바꿔 교대를 복구한다:
     흰(hero) → 크림(map) → 흰(parking) → 크림(route) → 잉크(video) → 크림(hours) → 흰(contact)
   ★ 덤 — #route 의 .fs-dir-route__box 3개가 «흰 상자 위 흰 밴드» 였다.
     크림으로 바뀌면서 상자가 비로소 보인다.
   ★ #parking 안의 흰색은 사진(IMG)뿐이라 흰 밴드로 옮겨도 증발할 카드가 없다. 실측 확인.
   ------------------------------------------------------------------------- */
.fs-p-97 #parking { background: var(--fs-white); }
.fs-p-97 #route   { background: var(--fs-cream); }

/* ==========================================================================
   LOCATION 밴드 — 다크(2026-08-28) → 토프 틴트(2026-09-11) → 흰색(2026-09-11 2차 지시)
   「이 섹션의 배경을 흰색으로」. 같은 지시로 히어로가 잉크가 됐다(위 A01 블록 참고) —
   토프 틴트는 잉크 히어로 바로 밑에서 «흐린 회갈색 단» 이 되므로 두 변경은 한 쌍이다.
   밴드 리듬 : 잉크(hero) → 흰(map) → 크림(gallery) → 흰(contact).

   ★ 아래 있던 색 처방 8줄(킥커·키 리스트 선/글자·범례·리드)은 전부 #E4DBD6 틴트 위에서
     대비를 맞추려고 쓴 것이라 흰 배경에서는 존재 이유가 없다. 지우면 fs.css 기본값으로
     돌아가고, 그 기본값이 곧 이 페이지의 다른 흰 섹션(#contact)과 같은 처방이다:
       킥커 --fs-teal-text 5.28 · 키 선 --fs-line · strong --fs-ink 18.1 ·
       설명 --fs-muted 5.2 · b --fs-teal-dk 6.85 · 리드 --fs-muted 5.2. 전부 AA 이상.
   ※ 범례(.fs-dir-legend)는 슬라이드 13 「범례 삭제」로 DOM 에서 빠졌다. 위쪽 정의부
     (.fs-dir-legend 기본 규칙)는 남아 있으나 이 변경과 무관해 손대지 않는다.
   ========================================================================== */
.fs-p-97 .fs-dir-band { background: var(--fs-white); }

/* ==========================================================================
   FOUR SEASONS TV — 「영상이 없어 보인다」 (2026-08-28 승인자 지적)
   영상은 있다. 카드마다 유튜브 링크가 걸려 있다(i-I1MXMRVNM · xuSqsoUF1yE).
   문제는 그게 **오른쪽 아래 40px 짜리 + 하나뿐**이라 영상으로 안 읽히는 것이다.
   원본 페이지에도 유튜브 임베드가 있었다(data-widget-type="video").
   ★ 승인자 지시 — 「유투브 영상이면 엠배드로 배치해줘. 약도로 배치하지 말고」
     약도 크롭 <img> 2장을 걷어내고 youtube-nocookie 임베드를 얹었다.
     alt 2개가 사라지고 title 2개가 생겨 R1 게이트에 걸린다 → approved-97-embed.txt
   ========================================================================== */
.fs-p-97 .fs-dir-video__card { position: relative; }

/* 유튜브 임베드 — 승인자 지시로 약도 크롭을 걷어내고 진짜 영상을 얹었다.
   16:9 로 눕히고, 라벨바는 «아래에 붙여» 둔다 —
   절대 배치로 영상 위에 겹치면 유튜브 컨트롤 바를 가린다. LOCK 2 의 간격 0 은 유지된다. */
.fs-p-97 .fs-dir-video__embed {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  background: var(--fs-ink);
}
.fs-p-97 .fs-dir-video__media { display: grid; }
.fs-p-97 .fs-dir-video__media .fs-labelbar {
  position: static;
  inset: auto;
  margin: 0;
}
/* 임베드 위에 카드 전체 클릭 오버레이를 두면 재생이 막힌다 — 되돌린다.
   `+` 버튼은 「유튜브에서 열기」 보조 링크로 원래 모습 그대로 남긴다. */

/* --- FOUR SEASONS TV 섹션 제거 (2026-08-28 승인자 지시) --------------------
   유튜브 영상 두 편이 «비공개» 라 어떤 사이트에도 임베드되지 않는다.
   (i-I1MXMRVNM · xuSqsoUF1yE — reason: 비공개 동영상. 원본 사이트도 같은 ID 라 똑같다)
   ★ DOM 에서 지우지 않는다 — 심의 문구라 삭제하면 R1 이 FAIL 이다.
     LANDMARK 와 같은 이유로 display:none 을 쓴다(임베드·링크가 있는 섹션이라
     sr-only 로 숨기면 스크린리더에만 남아 모순이 된다).
     공개로 바꾸면 이 한 줄만 지우면 되살아난다.
   ------------------------------------------------------------------------- */
.fs-p-97 #video { display: none; }

/* 밴드 리듬 재계산 — #video 가 이 페이지의 다크 밴드였다.
   빼면 route(크림) 과 hours(크림) 가 맞붙는다.
   contact 가 흰색으로 고정이므로 2색 교대의 해는 하나뿐이다:
     흰(hero) → 잉크(map) → 크림(parking) → 흰(route) → 크림(hours) → 흰(contact)
   = LANDMARK 제거 때 맞바꿨던 parking·route 를 원래대로 되돌리는 것이다. */
.fs-p-97 #parking { background: var(--fs-cream); }
.fs-p-97 #route   { background: var(--fs-white); }

/* ==========================================================================
   약도 스포트라이트 (2026-08-28 승인자 지시)
   「그냥 전체 약도 show하고 주차장 위치를 눈에 뛰게 해줘」
   ROUTE 3스텝과 PARKING 상단 도해가 각각 잘린 조각이었다.
   조각을 전체 약도로 바꾸고, 해당 지점만 남기고 나머지를 어둡게 덮는다.
   ★ 새 에셋 0장 — 이미 있는 map-illust.jpg 한 장에 CSS 로 스포트라이트만 얹는다.
   ★ alt 을 안 건드렸다. alt 이 지칭한 요소(출입구·정류장·이동 경로·주차장 입구 P)는
     전체 약도에 전부 그대로 있다. 보이는 범위가 넓어졌을 뿐이다.
   좌표 — #map 의 핀과 같은 값이고, 주차장 P 는 틸 필 덩어리를 실측해 얻었다(42.15%, 24.24%).
   ========================================================================== */
.fs-p-97 .fs-dir-route__box,
.fs-p-97 .fs-dir-park > figure:first-child { position: relative; }

.fs-p-97 .fs-dir-route__box img,
.fs-p-97 .fs-dir-park > figure:first-child img {
  aspect-ratio: 1440 / 916;
  object-fit: cover;
  background: var(--fs-ink);
}

/* 스포트라이트 — 지정 지점만 남기고 나머지를 덮는다 */
.fs-p-97 .fs-dir-route__box::before,
.fs-p-97 .fs-dir-park > figure:first-child::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at var(--sx) var(--sy),
    rgba(6, 7, 8, 0) 0 var(--sr, 13%),
    rgba(6, 7, 8, .88) calc(var(--sr, 13%) + 9%) 100%);
}
/* 정원 링 — LOCK 1(곡률은 0 / 정원 / pill 뿐)을 지킨다 */
.fs-p-97 .fs-dir-route__box::after,
.fs-p-97 .fs-dir-park > figure:first-child::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
  inset-inline-start: var(--sx);
  inset-block-start: var(--sy);
  translate: -50% -50%;
  inline-size: calc(var(--sr, 13%) * 2);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--fs-teal);
  /* ★ 어두운 약도를 더 어둡게 «덮기만» 하면 강조 영역도 같이 어두워 안 살아난다.
     원 안쪽을 실제로 밝혀야 「여기」가 읽힌다. */
  backdrop-filter: brightness(1.9) saturate(1.15);
  -webkit-backdrop-filter: brightness(1.9) saturate(1.15);
  box-shadow: 0 0 0 6px rgba(151, 121, 110, .18);   /* 2026-09-11 토프 */
}

/* 지점 좌표 — 출발점은 #map 의 .fs-dir-map__pin 이지만, 캡션이 가리키는 «면» 이
   원 안에 들어오도록 실측으로 다듬었다.
   02 는 핀(36.46, 32.32)이 경로가 꺾이는 «점» 이라 「신관·본관 사이 길」이 치우쳤고,
   03 은 핀이 입구 «점» 이라 알약(중심 69.13, 43.78 · 폭 331px)이 원에서 잘렸다. */
.fs-p-97 .fs-dir-route__item:nth-child(1) .fs-dir-route__box { --sx: 20.31%; --sy: 63.91%; --sr: 14%; }
.fs-p-97 .fs-dir-route__item:nth-child(2) .fs-dir-route__box { --sx: 42%;    --sy: 35.5%;  --sr: 15%; }
.fs-p-97 .fs-dir-route__item:nth-child(3) .fs-dir-route__box { --sx: 64%;    --sy: 41%;    --sr: 17%; }
/* 주차장 입구 P — 밝은 틸 필 덩어리(172×34px)의 중심을 실측했다 */
.fs-p-97 .fs-dir-park > figure:first-child { --sx: 42.15%; --sy: 24.24%; --sr: 16%; }

/* 크림 밴드 위 흰 테두리는 이제 필요 없다 — 도해가 어두워졌다 */
.fs-p-97 .fs-dir-route__box,
.fs-p-97 .fs-dir-park > figure:first-child img { border-color: transparent; background: var(--fs-ink); }

/* --- 주차 안내 아래줄 두 도해 제거 (2026-08-28 승인자 지시) ----------------
   「이것이 필요없지 않을까?」 → 둘 다.
   · 「주차장 입구 P · 신관 앞 도로」 확대컷 — 위 전체 약도의 스포트라이트가
     이미 같은 자리를 밝히고 있어 같은 정보를 두 번 보여준다.
   · 「쥬디스태화 본관 · 신관」 네이버 지도 — 맨 아래 오시는길 블록에 같은 성격의
     지도가 이미 있다.
   ★ DOM 에서 지우지 않는다 — figcaption·alt 이 심의 문구라 삭제하면 R1 이 FAIL.
     .fs-dir-park 는 2열 격자이고 첫 도해가 1/-1 로 스팬하므로,
     짝을 숨기면 전체 약도가 자연히 전폭을 차지한다.
   ------------------------------------------------------------------------- */
.fs-p-97 .fs-dir-park__pair { display: none; }

/* ==========================================================================
   ▼▼▼ 2026-09-11 · PPT「리뷰티 수정(병원소개)」12번 슬라이드
   「여백좀 넣어주세요」× 2 — 헤더 ↔ DIRECTIONS 킥커 사이, 진료시간 줄 ↔ 다크 밴드 사이.
   인트로 히어로는 min-height(230→363px)만 있고 상하 padding 이 0 이라, 1920 에서
   콘텐츠(킥커·제목·주소·전화·진료시간 ≈ 370px)가 min-height 를 넘는 순간 헤더와
   #map 다크 밴드에 위아래로 딱 붙었다. 이 페이지의 다른 섹션이 쓰는 --tight 리듬
   (섹션 패딩의 60% · 1920 에서 82/78px · 360 에서 37/36px)을 그대로 준다.
   「(쥬디스태화 신관 주차) 삭제」는 index.html 436행에서 지웠다(_design/approved-97.txt).
   ========================================================================== */
.fs-p-97 .fs-dir-hero { padding-block: calc(var(--fs-sec-pt) * .6) calc(var(--fs-sec-pb) * .6); }

/* ==========================================================================
   ▼▼▼ 2026-09-11 · PPT「리뷰티 수정(병원소개)」13~15번 슬라이드 — #map 재구성
   13: 제목 「부산 서면역 쥬디스태화 본관 8층 포시즌성형외과」 · 「(쥬디스태화 신관 주차)」 삭제
       · 01~03 키 「삭제하고 주차 안내로 변경」 · 범례 「삭제」 · 「지도 수정(뒷 페이지 참고)」
   14: 「이 페이지(#parking) 이후부터 아래 진료시간(#hours)까지 전체 삭제」 → DOM 에서 뺐다
       (원문은 _src/archive/97-sections-removed-0911/). 아래 옛 규칙은 그대로 둔다.
   15: 「현재 지도 업데이트해주세요」 — 슬라이드 그림(806x585 캡처)이 유일한 원본이라
       그대로 쓰면 흐리고 다크 밴드 위에 흰 슬래브가 된다(§4.5). 픽셀로 잰 좌표로 인라인
       SVG 를 그렸다. 색은 구워 둔 map-illust.jpg 와 같은 팔레트 — 블록 #25262A(토큰 없음,
       jpg 실측값) · 도로 흰색 · 경로·강조 --fs-teal · 글자 흰색 알파.
   ========================================================================== */
/* ==========================================================================
   약도 팔레트 — 2026-09-11 3차 지시 「슬라이드 15 지도 이미지랑 똑같은 색」
   앞선 두 판(다크 블록 · 토프 이관)은 「역할만 가져오고 색은 사이트 토프로」 였다.
   이번 지시는 그 반대다 — 원본 그림의 색을 «그대로» 쓴다.

   값은 ppt/media/image15.png(806x585) 를 픽셀로 센 것이다:
     블록 #E7E7E7   전체의 41.0% · 최빈색
     도로 #FFFFFF   30.1%
     글자·점 #646464  「아디다스」 획 중심 237px 가 #656565, 나머지 글자·점의 최빈이 #646464
     경로·버스 #F7931E  버스 아이콘 면(경로선은 1px 이라 흰 바탕과 섞여 #F8A23C 로 읽힌다)
     강조 #0475F5   P 뱃지 147px · 입구 필 450px · 후문/정문 점 — 네 곳이 모두 같은 값

   ★ 한 곳만 원본과 다르다 — 「◀ 서면교차로 방향」은 원본이 순흑 #000000 인데
     --fs-ink(#111111) 을 그대로 둔다. 휘도차 0.4% 로 눈에 안 보이는데 팔레트에 없는
     순흑을 새로 들이게 되기 때문이다. 바꿔야 하면 이 한 줄만 고치면 된다.

   ★ 대비 실측 — 이 팔레트는 사이트의 AA 보정 정책보다 낮다(원본 그림이 그렇다):
       상가·건물 글자 #646464 : 블록 위 4.79 · 흰 위 5.92        → AA 통과
       경로선·버스 #F7931E    : 흰 위 2.30                        → 비문자 3:1 미달
       강조 글자 #0475F5      : 흰 위 4.31 · 블록 위 3.49         → 본문 4.5 미달
                                (1920 에서는 17px 유닛이 19.2px 로 렌더돼 «큰 글자» 3:1 적용)
       필·뱃지 흰 글자        : #0475F5 위 4.31                   → 본문 4.5 미달
     승인자 지시가 원본 일치이므로 값을 올리지 않았다. AA 로 맞추려면
     #F7931E→#D97706(3.02) · #0475F5→#0A5FD0(5.57) 이 최소 변경이다.
   ========================================================================== */
.fs-p-97 .fs-dir-map__svg {
  display: block;
  width: 100%;
  height: auto;
  --fs-dir-map-block:  #E7E7E7;   /* 건물 블록 */
  --fs-dir-map-ink:    #646464;   /* 상가·건물 이름 · 상가 점 */
  --fs-dir-map-route:  #F7931E;   /* 이동 경로 · 버스정류장 */
  --fs-dir-map-accent: #0475F5;   /* 병원 강조 — 주차장 P · 입구 필 · 후문 · 정문 */
  font-family: var(--fs-font);
  font-size: 18px;
  font-weight: 500;
}
.fs-p-97 .fs-dir-map__blocks rect { fill: var(--fs-dir-map-block); }
/* 굵기 3.2 는 2차에서 올린 값 그대로다(원본 그림은 1px 이라 화면에서 실처럼 보인다). */
.fs-p-97 .fs-dir-map__route polyline { fill: none; stroke: var(--fs-dir-map-route); stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.fs-p-97 .fs-dir-map__bus { fill: var(--fs-dir-map-route); }
.fs-p-97 .fs-dir-map__bus-glyph rect:first-child { fill: var(--fs-white); }
.fs-p-97 .fs-dir-map__bus-glyph rect:not(:first-child) { fill: var(--fs-dir-map-route); }
.fs-p-97 .fs-dir-map__bus-glyph circle { fill: var(--fs-white); }
.fs-p-97 .fs-dir-map__dots circle { fill: var(--fs-dir-map-ink); }
.fs-p-97 .fs-dir-map__labels text { fill: var(--fs-dir-map-ink); }
.fs-p-97 .fs-dir-map__bld { font-size: 22px; font-weight: 700; fill: var(--fs-dir-map-ink) !important; }
.fs-p-97 .fs-dir-map__dir { font-size: 17px; font-weight: 700; fill: var(--fs-ink) !important; }   /* 흰 도로 위 */
.fs-p-97 .fs-dir-map__acc-txt { font-size: 17px; font-weight: 700; fill: var(--fs-dir-map-accent); }
.fs-p-97 .fs-dir-map__acc-dot { fill: var(--fs-dir-map-accent); }
.fs-p-97 .fs-dir-map__badge { fill: var(--fs-dir-map-accent); }
.fs-p-97 .fs-dir-map__badge-txt { font-family: var(--fs-font-en); font-size: 22px; font-weight: 800; fill: var(--fs-white); }
.fs-p-97 .fs-dir-map__pill { fill: var(--fs-dir-map-accent); }
.fs-p-97 .fs-dir-map__pill-txt { font-size: 19px; font-weight: 700; fill: var(--fs-white); }

/* 주차 안내 — 키 리스트 위 작은 제목 (슬라이드 13 「주차 안내로 변경」의 이름표) */
.fs-p-97 .fs-dir-key__head {
  margin: 0 0 var(--fs-sp-3);
  font-size: var(--fs-t-sub);
  font-weight: 700;
  color: var(--fs-ink);
  letter-spacing: var(--fs-ls-tight);
}
@media (min-width: 1024px) {
  /* ①-c 는 범례를 아래 전폭 띠로 빼려고 .fs-split > div 를 display:contents 로 풀었다.
     범례가 사라졌으니 되돌린다 — div 가 다시 (2열 2행) 한 칸의 블록이 되어
     「주차 안내」제목 + 키 리스트가 그 안에 위아래로 쌓이고, data-fs-reveal="right" 도 다시 산다. */
  .fs-p-97 #map .fs-split > div { display: block; }
  .fs-p-97 #map .fs-dir-key { margin-block-start: 0; }
}

/* ==========================================================================
   ▼▼▼ 2026-09-14 · 히어로 — 토프잉크 단색 → 리셉션 사진 위 크림 헤이즈 (승인자 선택 «안 2»)
   「페이지 색감이 전체적으로 안 맞는다」 → 3안 렌더 비교 후 승인자가 «사진 히어로 · 밝은
   헤이즈» 를 골랐다. 약도(슬라이드 15 원색)와 A26 카카오맵은 «기존 유지» 로 같이 확정됐다.
   · 사진 : 갤러리 1번 컷(about/interior-01.jpg 1440×810)을 1920×1080 으로 올리고 블러 2.2px ·
           채도 85% 로 구운 directions/hero-bg.jpg — 헤이즈 밑에서 선이 잉크 글자와 싸우지 않게.
   · 헤이즈 : --fs-cream 알파 .84→.90 (위→아래). 글자 색은 09-11 «잉크 히어로» 블록(52~66행·
           375~420행)이 흰 계열로 박아 둔 것을 여기서 잉크 계열로 되돌린다 — 그 블록은 기록으로 둔다.
   · 대비(1838 렌더 · 글자 뒤 픽셀 실측)는 이 블록 아래 주석의 표.
   · 밴드 리듬 : 크림(hero, 사진) → 흰(map) → 크림(gallery) → 흰(contact). LOCK 4 (b)(d) 통과.
   ========================================================================== */
.fs-p-97 .fs-dir-hero { background: var(--fs-cream); color: var(--fs-ink); }
.fs-p-97 .fs-dir-hero .fs-hero__bg img { object-position: 50% 55%; }
.fs-p-97 .fs-dir-hero .fs-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(246, 241, 236, .84) 0%, rgba(246, 241, 236, .90) 100%);
}
/* 킥커·「대표전화」 라벨 — --fs-teal-text(#80665D)는 헤이즈 뒤 리셉션 데스크(어두운 구간) 위에서
   3.6~4.1:1 로 AA 미달이었다(글자 뒤 픽셀 실측). 한 단 진한 --fs-teal-dk 로 4.7 이상. */
.fs-p-97 .fs-dir-hero .fs-hero__kicker,
.fs-p-97 .fs-dir-hero__side .fs-contact__label { color: var(--fs-teal-dk); }
.fs-p-97 .fs-dir-hero .fs-hero__title,
.fs-p-97 .fs-dir-hero__side .fs-tel a { color: var(--fs-ink); }
.fs-p-97 .fs-dir-hero__side .fs-tel a:hover { color: var(--fs-teal-dk); }
.fs-p-97 .fs-dir-hero__addr { color: var(--fs-ink-soft); }
.fs-p-97 .fs-dir-hero__hours { border-block-start-color: var(--fs-line-control); }
@media (min-width: 600px) {
  .fs-p-97 .fs-dir-hero__hours .fs-hours__label { color: var(--fs-ink-soft); }
}
/* 대비 실측 (글자 뒤 «렌더 픽셀» · 글리프 마스크 · 최악값) — 1838 / 1440 / 1024 / 360
     제목 #111 12.6↑ · 주소 #3F3F3F 7.1↑ · 전화 #111 12.9↑ · 진료시간 9.1↑ (전 폭)
     킥커 --fs-teal-dk 5.31 / 5.16 / 4.55 / 5.84 · 「대표전화」 4.69 / 4.68 / 4.65 / 4.69  → 전부 AA */

/* ==========================================================================
   ▼▼▼ 2026-09-23 · 모바일 최적화(승인자 「…94 다음 97」). 문구·HTML 무변경. PC 요소 위치 무변화(1024·1440·1920 실측).
   백업 _src/build/backup-97-0923-mo/ · 실측 _design/momeasure.py 360/390/540
   ========================================================================== */
/* --- 줄바꿈 — 360/390 에서 히어로 주소 「본관 8층」·LOCATION 리드 「8층」·주차 주소 「쥬디스태화신관」「지하층」·연락처 주소 「8층」 이 홀로 남는다 → balance */
.fs-p-97 .fs-dir-hero__addr,
.fs-p-97 #map .fs-nose-lead,
.fs-p-97 .fs-dir-key__txt > span,
.fs-p-97 .fs-address { text-wrap: balance; }

/* --- 약도 — 599px 이하에서 SVG 가 316px 로 줄어 상가 글자가 7~9px 로 렌더된다(viewBox 736 기준 17~22px 유닛).
   틀을 가로 스크롤 상자로 두고 약도 최소 폭을 620px 로 잡아 글자 14~18px 를 지킨다(버스정류장 → 본관 입구 순으로 왼쪽부터 읽는 경로라 시작점은 왼쪽).
   아래 2px 진행 바는 81·80 의 스와이프 힌트와 같은 부품(글자 없음). 1920 약도 폭 809px → 그쪽은 손대지 않는다. */
@media (max-width: 599px) {
  .fs-p-97 .fs-dir-map { timeline-scope: --p97-map; }
  .fs-p-97 .fs-dir-map__frame {
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    scroll-timeline: --p97-map inline;
  }
  .fs-p-97 .fs-dir-map__frame::-webkit-scrollbar { display: none; }
  .fs-p-97 .fs-dir-map__svg { min-width: 620px; }
  .fs-p-97 .fs-dir-map::after {
    content: ""; display: block; height: 2px; margin-block-start: var(--fs-sp-3);
    background-color: var(--fs-line-input);
    background-image: linear-gradient(var(--fs-teal), var(--fs-teal));
    background-repeat: no-repeat;
    background-size: 55% 100%;          /* 360 에서 보이는 폭 ≈ 316/620 */
    background-position: 0% 0;
    animation: p97-map-bar linear both;
    animation-timeline: --p97-map;
  }
}
@keyframes p97-map-bar { from { background-position-x: 0%; } to { background-position-x: 100%; } }