/* 늘봄요양병원 — 통합 디자인 시스템 (Thymeleaf 서버렌더링용)
   자연친화 · 치유 컨셉의 스프링 그린 팔레트 */

/* ── 웹폰트 (#62, Figma 505:481) ───────────────────────────────
   헤딩 = Challan B ExtraBold(단일 웨이트 → 400~900 전 범위 매핑, faux-bold 방지)
   본문/UI = Pretendard(Regular~Bold). 파일은 /static/fonts/ 에 벤더링. */
@font-face{ font-family:"Challan"; font-style:normal; font-weight:400 900;
  font-display:swap; src:url("../fonts/Challan-BExtraBold.woff2") format("woff2"); }
@font-face{ font-family:"Pretendard"; font-style:normal; font-weight:400;
  font-display:swap; src:url("../fonts/Pretendard-Regular.woff2") format("woff2"); }
@font-face{ font-family:"Pretendard"; font-style:normal; font-weight:500;
  font-display:swap; src:url("../fonts/Pretendard-Medium.woff2") format("woff2"); }
@font-face{ font-family:"Pretendard"; font-style:normal; font-weight:600;
  font-display:swap; src:url("../fonts/Pretendard-SemiBold.woff2") format("woff2"); }
@font-face{ font-family:"Pretendard"; font-style:normal; font-weight:700;
  font-display:swap; src:url("../fonts/Pretendard-Bold.woff2") format("woff2"); }

:root {
  --green-900: #24451f;
  --green-700: #3f6d2f;
  --green-600: #4f8438;
  --green-500: #6aa84f;
  --green-300: #a9cf8f;
  --green-100: #eaf3e2;
  --green-50: #f4f9ef;
  --spring: #7bb661;
  --accent: #e8a33d;
  --ink: #2b2f2a;
  --muted: #6b7268;
  --line: #e3e8dd;
  --bg: #ffffff;
  --bg-soft: #f7faf4;
  --shadow: 0 8px 30px rgba(40, 60, 30, 0.08);
  --radius: 14px;
  --header-h: 80px;
  --maxw: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  font-family: "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; line-height: 1.3; font-weight: 700; color: var(--green-900); }
main { min-height: 60vh; }

/* ── 유틸리티 ─────────────────────────────── */
.container { width: min(100% - 40px, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section--soft { background: var(--bg-soft); }
.narrow { max-width: 860px; }
.center { text-align: center; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; }
.mb-40 { margin-bottom: 40px; }

.eyebrow {
  display: inline-block; color: var(--green-600); font-weight: 700;
  letter-spacing: 0.12em; font-size: 0.82rem; margin-bottom: 12px;
}
.section-title { font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin-bottom: 16px; }
.section-lead { color: var(--muted); font-size: 1.05rem; max-width: 640px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 700; font-size: 0.98rem;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--green-600); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--green-700); }
.btn--ghost { background: #fff; color: var(--green-700); border-color: var(--green-300); }
.btn--light { background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.5); }
.btn[disabled] { opacity: 0.6; cursor: default; transform: none; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.card p { color: var(--muted); margin: 0; }
.card .ic { font-size: 1.8rem; margin-bottom: 10px; }

.tag {
  display: inline-block; background: var(--green-100); color: var(--green-700);
  font-weight: 700; font-size: 0.8rem; padding: 4px 12px; border-radius: 999px;
}

.prose p { color: var(--muted); margin: 0 0 16px; }
.prose h3 { margin: 28px 0 12px; font-size: 1.25rem; }

.table {
  width: 100%; border-collapse: collapse; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line);
}
.table th, .table td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
.table thead th { background: var(--green-100); color: var(--green-900); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--green-50); }
.num { text-align: right; }

.field { display: block; margin-bottom: 18px; }
.field > span { display: block; font-weight: 700; margin-bottom: 6px; color: var(--green-900); }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; font: inherit; background: #fff;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--green-300); border-color: transparent; }

/* ── 헤더 ─────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.hdr__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.brand__mark { background: var(--green-600); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 1.05rem; }
.brand__text { font-size: 1.15rem; color: var(--green-900); }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; gap: 6px; }
.nav__item { position: relative; }
.nav__row { display: flex; align-items: center; }
.nav__link { display: inline-block; padding: 10px 14px; font-weight: 600; border-radius: 8px; }
.nav__link:hover, .nav__link.is-active { color: var(--green-700); }
.nav__caret { background: none; border: none; color: var(--muted); padding: 4px; }

.submenu {
  position: absolute; top: 100%; left: 0; min-width: 168px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: all 0.16s ease;
}
.nav__item:hover .submenu, .nav__item.is-open .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a { display: block; padding: 9px 12px; border-radius: 8px; font-size: 0.94rem; color: var(--ink); }
.submenu a:hover, .submenu a.is-active { background: var(--green-50); color: var(--green-700); }

.nav__tel { font-weight: 800; color: var(--green-700); border: 1px solid var(--green-300); padding: 8px 16px; border-radius: 999px; }

.hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 8px; }
.hamburger span { width: 24px; height: 2px; background: var(--green-900); border-radius: 2px; }

@media (max-width: 980px) {
  .hamburger { display: flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    padding: 12px 20px 24px; box-shadow: var(--shadow);
    transform: translateY(-120%); transition: transform 0.2s ease;
  }
  .nav.nav--open { transform: translateY(0); }
  .nav__list { flex-direction: column; }
  .nav__row { justify-content: space-between; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; border-left: 2px solid var(--green-100);
    border-radius: 0; max-height: 0; overflow: hidden; padding: 0 0 0 14px;
    transition: max-height 0.2s ease;
  }
  .nav__item.is-open .submenu { max-height: 400px; }
  .nav__tel { margin-top: 12px; text-align: center; }
}

/* ── 푸터 ─────────────────────────────── */
.ftr { background: var(--green-900); color: #d9e6cf; margin-top: 40px; }
.ftr__inner { display: grid; grid-template-columns: 1.2fr 2fr 1.1fr; gap: 40px; padding: 56px 20px 40px; }
.ftr__logo { color: #fff; font-size: 1.35rem; font-weight: 800; margin-bottom: 12px; }
.ftr__slogan { color: var(--green-300); margin: 0 0 14px; }
.ftr__addr { margin: 0; font-size: 0.92rem; opacity: 0.85; }
.ftr__nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ftr__head { display: block; color: #fff; font-weight: 700; margin-bottom: 10px; }
.ftr__col ul li { margin-bottom: 6px; }
.ftr__col ul a { font-size: 0.88rem; opacity: 0.8; }
.ftr__col ul a:hover { opacity: 1; color: #fff; }
.ftr__info div { display: flex; gap: 10px; margin-bottom: 8px; font-size: 0.9rem; }
.ftr__info dt { color: var(--green-300); min-width: 96px; margin: 0; }
.ftr__info dd { margin: 0; color: #fff; }
.ftr__bottom { border-top: 1px solid rgba(255,255,255,0.12); }
.ftr__bottom-inner { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; font-size: 0.85rem; opacity: 0.85; }
.ftr__links { display: flex; gap: 10px; align-items: center; }
.ftr__links a:hover { color: #fff; }

/* ── 서브페이지 히어로 ─────────────────────── */
.page-hero {
  background: linear-gradient(120deg, var(--green-700), var(--green-500));
  color: #fff; padding: clamp(48px, 8vw, 88px) 0; position: relative; overflow: hidden;
}
.page-hero::after {
  content: ""; position: absolute; right: -60px; bottom: -80px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%); border-radius: 50%;
}
.page-hero__inner { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.page-hero p { margin: 12px 0 0; font-size: 1.05rem; opacity: 0.92; max-width: 620px; }
.crumb { display: flex; gap: 8px; font-size: 0.85rem; opacity: 0.85; margin-bottom: 14px; flex-wrap: wrap; }
.crumb a:hover { text-decoration: underline; }

/* ── 홈 ─────────────────────────────── */
.home-hero {
  background: linear-gradient(120deg, rgba(36,69,31,0.72), rgba(79,132,56,0.55)),
    linear-gradient(160deg, #6aa84f, #3f6d2f);
  color: #fff; min-height: 540px; display: flex; align-items: center;
}
.home-hero__inner { padding: 80px 20px; }
.home-hero__copy { max-width: 620px; }
.home-hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 18px; }
.home-hero p { font-size: 1.15rem; opacity: 0.95; margin-bottom: 28px; }
.home-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }
.program { display: flex; flex-direction: column; gap: 8px; }
.program h3 { margin-top: 6px; }
.program__more { margin-top: auto; color: var(--green-600); font-weight: 700; padding-top: 10px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery__item {
  aspect-ratio: 4 / 3; border-radius: var(--radius);
  background: linear-gradient(150deg, var(--green-300), var(--green-600));
  display: flex; align-items: flex-end; padding: 16px; color: #fff; font-weight: 700;
  transition: transform 0.2s ease;
}
.gallery__item:nth-child(even) { background: linear-gradient(150deg, var(--green-500), var(--green-900)); }
.gallery__item:hover { transform: scale(1.02); }
.locate { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; }
.locate__contact { display: grid; gap: 16px; }
.locate__contact div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 24px; }
.locate__contact span { display: block; color: var(--muted); font-size: 0.9rem; }
.locate__contact strong { font-size: 1.4rem; color: var(--green-700); }

/* ── 의료진 / 시설 ─────────────────────── */
.doc { text-align: center; }
.doc__avatar {
  width: 84px; height: 84px; margin: 0 auto 14px; border-radius: 50%;
  background: linear-gradient(150deg, var(--green-500), var(--green-700));
  color: #fff; font-size: 2rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.doc__role { color: var(--green-700); font-weight: 700; margin-bottom: 6px; }
.fac-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fac { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.fac__img {
  aspect-ratio: 4 / 3; background: linear-gradient(150deg, var(--green-300), var(--green-600));
  display: flex; align-items: flex-end; padding: 16px; color: #fff; font-weight: 700;
}
.fac:nth-child(3n-1) .fac__img { background: linear-gradient(150deg, var(--green-500), var(--green-900)); }
.fac:nth-child(3n) .fac__img { background: linear-gradient(150deg, var(--spring), var(--green-700)); }
.fac figcaption { padding: 18px 20px; }
.fac figcaption p { color: var(--muted); margin: 6px 0 0; }

/* ── 입퇴원 절차 ─────────────────────── */
.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 24px; }
.steps li {
  counter-increment: s; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px 18px 64px; position: relative;
}
.steps li::before {
  content: counter(s); position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; background: var(--green-600); color: #fff;
  font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.steps strong { color: var(--green-900); }
.steps span { color: var(--muted); }

/* ── 오시는 길 ─────────────────────── */
.map__placeholder {
  height: 360px; border-radius: var(--radius); border: 1px dashed var(--green-300);
  background: var(--green-50); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--muted);
}
.map__placeholder span { font-size: 3rem; }
.map__placeholder p { margin: 0; font-weight: 700; color: var(--green-900); }
.contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.contact div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; }
.contact span { display: block; color: var(--muted); font-size: 0.88rem; }
.contact strong { color: var(--green-700); font-size: 1.1rem; }

/* ── 게시판(공지/상담) ─────────────────── */
.board-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.board-bar__count { color: var(--muted); margin: 0; }
.row { cursor: pointer; }
.row .title { font-weight: 600; color: var(--green-900); }
.row a.title:hover { text-decoration: underline; }
.badge { font-size: 0.78rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.badge--done { background: var(--green-100); color: var(--green-700); }
.badge--wait { background: #fdf0d8; color: #b9832a; }
.state { text-align: center; color: var(--muted); padding: 40px; }
.state--err { color: #c0392b; }
.post__head { border-bottom: 2px solid var(--green-600); padding-bottom: 16px; margin-bottom: 24px; }
.post__meta { display: flex; gap: 16px; align-items: center; color: var(--muted); font-size: 0.9rem; margin-top: 10px; flex-wrap: wrap; }
.post__body { white-space: pre-line; line-height: 1.9; min-height: 120px; }
.answer { margin-top: 28px; background: var(--green-50); border: 1px solid var(--green-100); border-radius: var(--radius); padding: 24px; }
.answer__label { font-weight: 800; color: var(--green-700); margin-bottom: 12px; }
.actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 28px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.check { display: flex; align-items: center; gap: 8px; margin: 4px 0 20px; color: var(--muted); }
.err { color: #c0392b; font-weight: 600; }

/* ── 404 ─────────────────────────── */
.nf { text-align: center; }
.nf__mark { font-size: clamp(4rem, 12vw, 8rem); font-weight: 900; color: var(--green-300); line-height: 1; }
.nf h1 { margin: 8px 0 12px; }
.nf p { color: var(--muted); margin-bottom: 24px; }

/* ════════════════════════════════════════════════════════════
   홈 (Figma 정밀 재현) — Home 프레임(1980×11902)
   실제 Figma 애셋(/images/figma/*) + 정확한 색/텍스트/레이아웃
   색: #002323(다크틸) · #005656(잉크) · #79ac9f(푸터뮤트) · #e1eedd(라이트그린)
   ════════════════════════════════════════════════════════════ */
/* fx 디자인 토큰은 :root 로 — 공용 fragment(fx-topnav)가 어느 페이지에서든 쓰도록 */
:root{
  --fx-teal:#002323; --fx-ink:#005656; --fx-muted:#79ac9f; --fx-green:#e1eedd;
  --fx-line:#cfe3d8; --fx-wrapw:1180px;
  --fx-cream:#f2e6d3; --fx-brown:#593d25;
  --fx-display:"Challan","Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;
}
.fx-page{ position:relative; margin:0; color:var(--fx-ink); background:#fff; }  /* #22: 페이지 세로 레일(.fx-pagerail) 의 위치 기준 */
.fx-page main{ min-height:0; }
.fx-wrap{ width:min(100% - 48px, var(--fx-wrapw)); margin-inline:auto; }
.fx-page img{ display:block; max-width:100%; }

/* 공통: 라벨 / 헤딩 / 본문 / 버튼 */
.fx-label{ display:flex; align-items:center; gap:12px; font-size:clamp(15px,1.4vw,20px);
  color:var(--fx-ink); margin:0 0 16px; font-weight:400; }
.fx-label--light{ color:#fff; }
.fx-label__line{ width:33px; height:1px; background:currentColor; flex:none; }
.fx-heading{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(28px,3.6vw,48px); line-height:1.35; margin:0 0 28px; letter-spacing:-.01em; }
.fx-heading--light{ color:#fff; }
.fx-body{ font-size:clamp(16px,1.7vw,22px); line-height:1.75; color:var(--fx-ink);
  margin:0 0 20px; font-weight:300; }
.fx-body--sm{ font-size:clamp(15px,1.4vw,18px); color:var(--fx-muted); }
.fx-outbtn{ display:inline-block; border:1px solid var(--fx-ink); color:var(--fx-ink);
  padding:11px 24px; font-size:15px; border-radius:2px; transition:background .15s,color .15s; }
.fx-outbtn:hover{ background:var(--fx-ink); color:#fff; }
.fx-outbtn--light{ border-color:rgba(255,255,255,.75); color:#fff; }
.fx-outbtn--light:hover{ background:#fff; color:var(--fx-teal); }
/* Figma 48:2 '오시는 길 →' teal 아웃라인 pill */
.fx-outbtn--go{ display:inline-flex; align-items:center; gap:10px;
  border-color:var(--fx-teal); color:var(--fx-teal); border-radius:4px; }
.fx-outbtn--go:hover{ background:var(--fx-teal); color:#fff; }
.fx-outbtn__arrow{ font-size:1.1em; line-height:1; }

/* ① 히어로 + 투명 오버레이 헤더 */
.fx-hero{ position:relative; display:flex; flex-direction:column; overflow:hidden;
  min-height:clamp(600px,58vw,880px); color:#fff;
  background:url(../images/figma/hero.jpg) center/cover no-repeat; }
/* #90: 메인 영상 히어로(MP-01V)만 vivre식 풀스크린 — 첫 화면을 항상 뷰포트로 꽉 채움.
   svh(동적 뷰포트, 모바일 주소창 튐 방지) 사용, 미지원 폴백으로 100vh 를 앞에 둠.
   min-height 는 아주 작은 창에서 콘텐츠 겹침 방지용 하한만 유지. 상세 배경이미지 히어로는 스코프 아님.
   #120: 배경(=poster 폴백)을 영상 드론 스틸(hero-drone.jpg)로 교체(Figma 48:2 poi shot 동일 소스). */
.fx-hero--full{ min-height:600px; height:100vh; height:100svh;
  background-image:url(../images/figma/hero-drone.jpg); }
/* 히어로 배경 영상: 오버레이/카피 아래(z:0). 소스 없으면 poster(=hero.jpg)만 노출 → 무회귀 */
.fx-hero__video{ position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:center; pointer-events:none; }
.fx-hero__overlay{ position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.3); }
.fx-hero__copy{ position:relative; z-index:2; margin-top:auto; padding-bottom:clamp(40px,6vw,110px); }
.fx-hero__copy h1{ font-family:var(--fx-display); font-weight:800; color:#fff;
  font-size:clamp(34px,5.2vw,80px); line-height:1.2; margin:0; max-width:1089px;
  text-shadow:0 2px 24px rgba(0,0,0,.35); }
/* #62: 히어로 벡터 레터링 'SPRING IN YOUR STEP'(342:550). 좌하단, 폭 반응형. */
.fx-hero__lettering{ width:min(760px,64vw); height:auto; margin:0;
  filter:drop-shadow(0 2px 18px rgba(0,0,0,.35)); }

/* 공용 GNB — variant: --overlay(히어로 위 투명·흰 텍스트) / --solid(흰 배경·다크 텍스트) */
.fx-topnav{ position:relative; z-index:5; }
.fx-topnav--overlay{ padding-top:clamp(20px,2.4vw,35px); }
.fx-topnav--solid{ position:sticky; top:0; z-index:50; background:#fff;
  border-bottom:1px solid var(--fx-line); padding:14px 0; }
.fx-topnav__inner{ display:flex; align-items:center; gap:clamp(20px,3vw,44px); }
.fx-topnav__logo img{ height:clamp(28px,2.4vw,39px); width:auto; }
.fx-topnav--overlay .fx-topnav__logo img{ filter:brightness(0) invert(1); }   /* 흰 로고(어두운 히어로 위) */
/* 솔리드(흰 배경): 원본이 흰색이라 다크 잉크색으로 틴트 */
.fx-topnav--solid .fx-topnav__logo img{
  filter:brightness(0) saturate(100%) invert(23%) sepia(58%) saturate(1013%) hue-rotate(134deg) brightness(94%) contrast(101%); }
.fx-topnav__nav{ display:flex; align-items:center; gap:clamp(16px,1.8vw,30px); }
.fx-topnav__nav a{ font-size:15px; font-weight:500; white-space:nowrap; }
.fx-topnav__nav > a,
.fx-topnav__grouptop{ position:relative; }
.fx-topnav__nav > a:hover,
.fx-topnav__grouptop:hover{ text-decoration:underline; text-underline-offset:6px; }
.fx-topnav__nav a.is-active,
.fx-topnav__group.is-active > .fx-topnav__grouptop{ text-decoration:underline; text-underline-offset:6px; }
/* variant별 텍스트 색 — 최상위 메뉴만(드롭다운 하위 .fx-topnav__sub a 는 제외) */
.fx-topnav--overlay .fx-topnav__nav > a,
.fx-topnav--overlay .fx-topnav__grouptop{ color:#fff; opacity:.95; }
.fx-topnav--overlay .fx-topnav__nav > a:hover,
.fx-topnav--overlay .fx-topnav__grouptop:hover{ opacity:1; }
.fx-topnav--solid .fx-topnav__nav > a,
.fx-topnav--solid .fx-topnav__grouptop{ color:var(--fx-ink); }
.fx-topnav--solid .fx-topnav__nav > a:hover,
.fx-topnav--solid .fx-topnav__nav > a.is-active,
.fx-topnav--solid .fx-topnav__group.is-active > .fx-topnav__grouptop{ color:var(--fx-teal); }
.fx-topnav__right{ margin-left:auto; display:flex; align-items:center; gap:16px; }
.fx-topnav__pill{ border-radius:3px; padding:5px 13px; font-size:12px; white-space:nowrap; }
.fx-topnav--overlay .fx-topnav__pill{ border:1px solid rgba(255,255,255,.7); color:#fff; }
.fx-topnav--solid .fx-topnav__pill{ border:1px solid var(--fx-muted); color:var(--fx-ink); }
/* #16: header-badge.svg 는 preserveAspectRatio=none + width/height=100%(intrinsic 없음)라
   브라우저가 300x150 으로 취급 → height:auto 가 0.5 비율을 상속해 세로로 길쭉하게 압축됨.
   aspect-ratio:1/1 로 정사각 박스를 강제하고 object-fit:contain 으로 내용 비율을 보존한다. */
/* #17: overlay 배지 캡을 Figma 원본 91px 로 상향(4.6vw≈91/1980), solid 비례 상향(48->72). 정사각(#16) 유지. */
.fx-topnav__badge{ width:clamp(56px,4.6vw,91px); height:auto; aspect-ratio:1/1; object-fit:contain; }
/* #31: header-badge.svg 는 fill=white 라 solid(흰 배경) 내비에서 배경과 동색이 되어 묻힌다.
   로고 solid 틴트(.fx-topnav--solid .fx-topnav__logo img)와 동일한 브랜드 잉크/틸 filter 로
   흰 배지를 다크 틴트해 인증 씰이 보이게 한다. overlay(어두운 히어로 위)는 흰색 그대로 유지. */
.fx-topnav--solid .fx-topnav__badge{ width:clamp(44px,3.4vw,72px);
  filter:brightness(0) saturate(100%) invert(23%) sepia(58%) saturate(1013%) hue-rotate(134deg) brightness(94%) contrast(101%); }
.fx-topnav__ham{ display:none; flex-direction:column; gap:5px; background:none; border:none;
  margin-left:auto; padding:6px; }
.fx-topnav__ham span{ width:26px; height:2px; border-radius:2px; }
.fx-topnav--overlay .fx-topnav__ham span{ background:#fff; }
.fx-topnav--solid .fx-topnav__ham span{ background:var(--fx-ink); }

/* 병원안내 드롭다운 */
.fx-topnav__group{ position:relative; display:flex; align-items:center; }
/* 병원안내는 링크가 아닌 <button> — 기본 버튼 스타일 리셋(색/활성은 .fx-topnav__grouptop 선택자 유지) */
.fx-topnav__grouptop{ font-size:15px; font-weight:500; white-space:nowrap;
  background:none; border:0; margin:0; padding:0; font-family:inherit; line-height:inherit; cursor:pointer; }
/* Figma: 카드/그림자 없이 병원안내 중앙 아래 플레인 텍스트 목록.
   호버 갭 제거: translateY 오프셋 없이 top:100% 로 그룹과 맞닿게 두고, padding-top 이 호버 가능 브릿지 역할.
   닫힘 지연(visibility .18s): 병원안내→드롭다운으로 마우스를 옮기는 여유 확보(진입 애니메이션은 opacity 로만). */
.fx-topnav__sub{ position:absolute; top:100%; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px; padding-top:12px;
  opacity:0; visibility:hidden; transition:opacity .18s ease, visibility 0s linear .18s; z-index:60; }
.fx-topnav__group:hover .fx-topnav__sub,
.fx-topnav__group:focus-within .fx-topnav__sub,
.fx-topnav__group.is-open .fx-topnav__sub{ opacity:1; visibility:visible;
  transition:opacity .18s ease; }
.fx-topnav__sub a{ padding:4px 6px; font-size:14px; font-weight:500; white-space:nowrap; text-align:center; }
.fx-topnav--overlay .fx-topnav__sub a{ color:#fff; opacity:.9; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.fx-topnav--overlay .fx-topnav__sub a:hover{ opacity:1; text-decoration:underline; text-underline-offset:4px; }
.fx-topnav--solid .fx-topnav__sub a{ color:var(--fx-ink); }
.fx-topnav--solid .fx-topnav__sub a:hover{ color:var(--fx-teal); text-decoration:underline; text-underline-offset:4px; }
@media (prefers-reduced-motion: reduce){ .fx-topnav__sub{ transition:none; } }

/* ⓪ 스크롤 교차선(십자) — 히어로+통합치료 구간
   Figma Vector1(ㄱ자선)+Line12 레일+Line13 가로교차(48:2) 재현.
   코너(rail-x, corner-y)에 고정된 "+" 교차점: 세로위·오른쪽팔·노드는 코너에서 만나고,
   왼쪽크로스바·세로아래는 코너에서 갭(--cl-gap)만큼 떨어져 좌우·상하 대칭으로 배치된다.
   세로아래·오른쪽팔은 스크롤 진행도(--p:0→1)에 따라 "길이가 자라나며" 그려진다(페이드인 아님).
   Figma 실측(48:2, 디자인폭 1980): 코너=(300,1429), 본문텍스트 x=400 → 선-텍스트 간격 100px(≈5.05vw),
   __down은 코너보다 21px 아래서 시작(갭), 아래레일(Line12+Line15)은 y1450→10972 로 페이지 하단까지 연속. */
.fx-top{ position:relative; }
.fx-crosslines{ position:absolute; inset:0; z-index:4; pointer-events:none;
  /* 레일 x: Figma 는 rail x=300, 본문텍스트 x=400 → 선-텍스트 간격 100px(=100/1980≈5.05vw).
     콘텐츠 좌측(=(100%-wrapw)/2)에서 --rail-gap 만큼 왼쪽에 배치. 좁은 화면은 갭이 비례 축소되며
     최소 인셋 16px 은 보장(선이 텍스트/뷰포트 끝에 붙지 않게). */
  --rail-gap:clamp(24px, 5.05vw, 100px);
  --rail-x:max(16px, calc((100% - var(--fx-wrapw))/2 - var(--rail-gap)));
  --corner-y:var(--fx-corner-y, 30%);   /* #120: JS 미실행 순간 폴백 — .fx-top 이 드론 사진까지 길어져 비율 하향(코너≈y1556/4459) */
  --cl-color:rgba(255,255,255,.6); --cl-w:1px;   /* #22: --cl-node 제거(교차점 점 삭제) */
  --cl-gap:clamp(12px,1.1vw,21px);         /* 코너→아래/왼쪽 선 시작 갭(Figma 21px/1980 비례, 좌우·상하 대칭) */
  --cl-tail:clamp(120px,17.93vw,355px);    /* #138: JS 폴백값 — site.js 가 .fx-aerial(드론 사진) 상단 기준으로 덮어써
                                              선 끝이 사진을 침범하지 않게 한다(JS 미실행/사진 없음 시 이 값 사용) */
  --cl-ease:cubic-bezier(.22,.61,.36,1);
  opacity:1; }                             /* 페이드인 제거 — 선은 길이(--p)로만 그려진다 */
.fx-crosslines > b{ position:absolute; display:block; background:var(--cl-color);
  will-change:transform; }
/* 세로 위: 최상단→코너, 상시 표시(성장 아님). 코너에서 1px 겹쳐 이음새 갭 방지 */
.fx-crosslines__up{ left:var(--rail-x); top:0; width:var(--cl-w);
  height:calc(var(--corner-y) + 1px); }
/* 가로 왼쪽 크로스바: #32 스토리보드(192:993 뷰포트) 정합 — 화면 왼쪽 끝(x=0)에서 시작해
   코너 갭(--cl-gap) 직전까지 연장(우측 끝 = 코너 - 갭, 교차점 갭은 #20 좌우·상하 대칭 유지), 상시 표시. */
.fx-crosslines__left{ top:var(--corner-y);
  left:0;
  width:calc(var(--rail-x) - var(--cl-gap)); height:var(--cl-w); }
/* 세로 아래: 코너보다 갭(--cl-gap)만큼 아래서 시작(Figma 21px 갭, 왼쪽과 상하 대칭)→아래로 길이 성장.
   상단부(.fx-top=hero+treat, 흰 레일이 실제 보이는 다크 구간) 하단까지 연속 확장.
   #32: 오른쪽 팔(--p)과 분리된 down 전용 진행도(--pd)로 성장 — 최상단엔 짧고(tip 이 뷰포트 하단 위),
   스크롤 내릴수록 tip 이 뷰포트 하단을 따라 내려오며 길이가 자란다(draw-following-scroll). */
.fx-crosslines__down{ left:var(--rail-x); top:calc(var(--corner-y) + var(--cl-gap)); width:var(--cl-w);
  height:calc(100% - var(--corner-y) - var(--cl-gap) - var(--cl-tail));
  transform:scaleY(var(--pd,0)); transform-origin:top center;
  transition:transform .4s var(--cl-ease); }
/* 가로 오른쪽 팔: 레일(코너)에서→우측으로 길이 성장. #67: left 를 세로선(__up, left:--rail-x) 왼쪽 모서리에
   정확히 맞춰(이전 -1px 로 좌측 1px 삐짐) 위/오른쪽 선이 정확한 직각으로 만나게 한다(코너 갭은 __up +1px 겹침으로 유지). */
.fx-crosslines__right{ left:var(--rail-x); right:0; top:var(--corner-y); height:var(--cl-w);
  transform:scaleX(var(--p,0)); transform-origin:left center;
  transition:transform .4s var(--cl-ease); }
/* #22: 교차점 노드(점)는 Figma(48:2)에 없어 제거. 위/오른쪽 교차지점은 선만으로 만난다. */
/* 모션 최소화 선호 시: 트랜지션 없이 완성 상태(길이 full)로 즉시 표시 */
@media (prefers-reduced-motion: reduce){
  .fx-crosslines__down, .fx-crosslines__right{ transform:none; transition:none; }
}

/* #120: 페이지 세로 레일(.fx-pagerail)은 Figma 48:2 리뉴얼에서 제거 —
   세로선(Line12)은 다크 구간(.fx-top) 내 십자선(__down)만 남는다. */

/* ② 인트로(다크) — #120: PROGRAM 라벨·헤딩·3카드 삭제, 다크 배경은 CERTIFIED·NATURE 로 이어진다.
   Figma 실측: 다크 시작 y1120, h1 y1199 → pt 79/1980=4vw. */
.fx-treat{ background:var(--fx-teal); color:#fff; padding:clamp(48px,4vw,79px) 0 0; }
/* #62: 페이지 대표 헤딩(48:189, Challan B ExtraBold 64pt). 히어로에서 이 섹션 상단으로 이동. */
.fx-treat__title{ font-family:var(--fx-display); font-weight:800; color:#fff;
  font-size:clamp(32px,5vw,64px); line-height:1.2; letter-spacing:-.01em;
  margin:0 0 clamp(28px,3.6vw,48px); }
.fx-treat__intro{ font-weight:300; color:#fff; margin:0;
  font-size:clamp(18px,2.1vw,32px); line-height:1.7; }

/* ── #120 공용: 다크 섹션 본문(Figma KakaoBig 24/45, white 70%) ── */
.fx-cbody{ font-size:clamp(16px,1.22vw,24px); line-height:1.875; color:rgba(255,255,255,.7);
  margin:0; font-weight:300; }
.fx-cbody--dim{ color:rgba(255,255,255,.5); }

/* ── #120 CERTIFIED(다크) — 라벨/헤딩/본문 + 카드 2장(각 580x550 r10 white20%) ──
   Figma 실측: 라벨 y1659(인트로 bottom 1467 → pt 192=9.7vw), 본문 y1889(헤딩 아래 50),
   카드 y2111(본문 bottom 2024 → 87=4.4vw), 캡션 gold #f3d060 / blue #50a8ff. */
.fx-certified{ background:var(--fx-teal); color:#fff; padding:clamp(64px,9.7vw,192px) 0 0; }
.fx-certified .fx-heading{ margin-bottom:clamp(24px,2.53vw,50px); }
.fx-certified__cards{ display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin-top:clamp(40px,4.4vw,87px); }
.fx-certified__card{ margin:0; display:flex; flex-direction:column; align-items:center;
  aspect-ratio:580 / 550; border-radius:10px; background:rgba(255,255,255,.2); }
.fx-certified__card--mohw{ padding-top:clamp(20px,2.37vw,47px); }
.fx-certified__card--mohw img{ width:48.45%; height:auto; }              /* 281/580 */
.fx-certified__card--mohw .fx-certified__cap{ margin-top:clamp(20px,2.42vw,48px); }
.fx-certified__card--hira{ padding-top:clamp(26px,3.03vw,60px); }
.fx-certified__card--hira img{ width:43.97%; height:auto;                /* 255/580 */
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.fx-certified__card--hira .fx-certified__cap{ margin-top:clamp(20px,2.27vw,45px); }
.fx-certified__cap{ font-family:var(--fx-display); font-weight:800; text-align:center; }
.fx-certified__cap--gold{ color:#f3d060; font-size:clamp(20px,1.82vw,36px); line-height:1.389; }
.fx-certified__cap--blue{ color:#50a8ff; font-size:clamp(17px,1.41vw,28px); line-height:1.5; }

/* ── #120 NATURE(다크) — 라벨 y2795(카드 bottom 2661 → pt 134=6.77vw), 본문 y3025, pb 99(드론 y3259) ── */
.fx-nature-sec{ background:var(--fx-teal); color:#fff;
  padding:clamp(56px,6.77vw,134px) 0 clamp(40px,5vw,99px); }
.fx-nature-sec .fx-heading{ margin-bottom:clamp(24px,2.53vw,50px); }

/* ③ 드론 항공 전경 — #120: aerial-wide.jpg(Figma 83:1287, 1980x1200 풀블리드) */
/* #156: MP04 실애셋(2040x1530) 반영 — Figma 는 밴드(0,3259 1980x1200) 안에 사진을 (-60,3165)
   2040x1530 으로 놓았다. cover(1980x1485) 기준 세로 오버플로 285 중 위쪽 94*(1485/1530)=91
   → 세로 기준점 25.8%(가로는 오버플로 60px 뿐이라 중앙 유지). */
.fx-aerial{ aspect-ratio:1980 / 1200; min-height:360px; background:var(--fx-teal)
  url(../images/figma/aerial-wide.jpg) 50% 25.8%/cover no-repeat; }

/* ── #120 치유의 3대 조건(다크) — 헤딩 40/60 y4564(드론 bottom 4459 → pt 105=5.3vw),
   본문 y4654(헤딩 아래 30) 50%, 타일 y4870(본문 bottom 4744 → pb 126=6.36vw) ── */
.fx-heal{ background:var(--fx-teal); color:#fff;
  padding:clamp(48px,5.3vw,105px) 0 clamp(56px,6.36vw,126px); }
.fx-heal__heading{ font-family:var(--fx-display); font-weight:800; color:#fff;
  font-size:clamp(24px,2.02vw,40px); line-height:1.5; letter-spacing:-.01em;
  margin:0 0 clamp(16px,1.52vw,30px); }
/* #186: Figma 666:999/666:986 — 블록 폭 = 본문 긴 행(1111), 헤딩·본문 1행은 블록 중심 정렬.
   #195: 블록 자체를 wrap 중심에 가운데 정렬(margin-inline:auto) — 좁은 PC 에서 좌측 쏠림 해소 */
.fx-heal__block{ width:fit-content; max-width:100%; margin-inline:auto; text-align:center; }

/* ⑥ 진료 협력(PARTNERS) — #120: 문구 변경 + 로고 5종 SVG + 좌우 화이트 페이드(256:2971).
   Figma 실측: 타일 bottom 5770 → 라벨 5979(pt 209=10.56vw), 본문 bottom 6329 → 로고행 6418(마퀴 mt 89=4.5vw). */
.fx-partner{ padding:clamp(80px,10.56vw,209px) 0 0; }
/* 마퀴는 화면 끝까지 풀블리드로 흐른다 */
.fx-marquee{ margin-top:clamp(40px,4.5vw,89px); margin-inline:calc(50% - 50vw); }
.fx-marquee__row{ position:relative; overflow:hidden; }
/* #120: 좌우 화이트 페이드(Figma 256:2971, 353px 그라데이션. 우측은 대칭) */
.fx-marquee__row::before,.fx-marquee__row::after{ content:""; position:absolute; top:0; bottom:0;
  width:clamp(80px,17.83vw,353px); z-index:2; pointer-events:none; }
.fx-marquee__row::before{ left:0; background:linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.fx-marquee__row::after{ right:0; background:linear-gradient(to left, #fff, rgba(255,255,255,0)); }
/* track = 원본 group + 동일 복제 group. 폭은 내용에 맞춤 → -50% 이동이 정확히 group 1개 폭 */
.fx-marquee__track{ display:flex; width:max-content; will-change:transform; }
.fx-marquee__group{ display:flex; flex:0 0 auto; align-items:center;
  gap:clamp(40px,5vw,88px); padding-inline:clamp(20px,2.5vw,44px); }
/* 로고는 항상 원색으로 표시(회색화/흐림/hover 색변화 없음). #120: 로고별 실측 높이(h44~69) 비례 */
.fx-marquee__logo{ flex:0 0 auto; height:clamp(30px,3.2vw,48px); width:auto; object-fit:contain; }
.fx-marquee__logo--snuh{ height:clamp(27px,2.27vw,45px); }        /* 385x45 */
.fx-marquee__logo--severance{ height:clamp(41px,3.48vw,69px); }   /* 383x69 */
.fx-marquee__logo--asan{ height:clamp(37px,3.13vw,62px); }        /* 221x62 */
.fx-marquee__logo--samsung{ height:clamp(28px,2.32vw,46px); }     /* 313x46 */
.fx-marquee__logo--cha{ height:clamp(34px,2.83vw,56px); }         /* 402x56 */
/* #156 신규 2종(MP10/MP11)은 Figma 가시 행에 없어 실측 치수가 없다 → 기존 5종의 시각 크기
   √(w·h) 평균 ≈136 에 원본 viewBox 비율을 맞춰 정규화(용인세브란스와 같은 엠블럼+2행 텍스트 구조). */
.fx-marquee__logo--vincent{ height:clamp(31px,2.58vw,51px); }     /* viewBox 518.6x72.5 → 365x51 */
.fx-marquee__logo--ajou{ height:clamp(41px,3.43vw,68px); }        /* viewBox 1287x318.9 → 274x68 */
/* 왼쪽으로 무한 로테이션(기존 픽셀 속도 유지 — #156 로고 5→7종으로 group 폭 2144→2959px 이 되어
   88s × 2959/2144 ≈ 121s) */
.fx-marquee__row--slow .fx-marquee__track{ animation:fx-marquee-x 121s linear infinite; }
@keyframes fx-marquee-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* 모션 최소화: 애니메이션 정지 + 복제본 숨김(정적 1줄만) */
@media (prefers-reduced-motion: reduce){
  .fx-marquee__row--slow .fx-marquee__track{ animation:none; }
  .fx-marquee__group[aria-hidden="true"]{ display:none; }
}

/* ⑦ #120 고속도로 도식 지도 — Figma 667:1056: 카드 1180x700 r10 #f6f6f6.
   내부 좌표는 카드 기준 %(x/1180, y/700), 글자·마커 크기는 cqw(카드폭 1180 기준 컨테이너 단위). */
.fx-hwmap{ padding:clamp(28px,3.03vw,60px) 0 clamp(96px,11.77vw,233px); }
.fx-hwmap .fx-wrap{ container-type:inline-size; }
.fx-hwmap__card{ position:relative; aspect-ratio:1180 / 700; border-radius:10px;
  background:#f6f6f6; overflow:hidden; }
.fx-hwmap__card > *{ position:absolute; margin:0; }
.fx-hwmap__road{ background:#d9d9d9; }
.fx-hwmap__road--v1{ left:30.847%; top:0; width:2.542%; height:100%; }    /* 용인서울고속도로 x364(#126) */
.fx-hwmap__road--v2{ left:68.305%; top:0; width:2.542%; height:100%; }    /* 경부고속도로 x806 */
.fx-hwmap__road--h{ left:0; top:70.571%; width:100%; height:4.286%; }     /* 영동고속도로 y494 */
/* 신분당선 곡선(locmap-curve.svg 249x700, #b40000) — #126 새 S자. Figma 가시렌더 실측: 하단 좌(x528)→상단 우(x770),
   svg 원본이 좌우 반전이라 scaleX(-1) 유지. 박스 x524.5 w249(스트로크 중심 528~770 + 좌우 3.5px) */
.fx-hwmap__curve{ left:44.449%; top:0; width:21.102%; height:100%; transform:scaleX(-1); }
.fx-hwmap__roadname{ color:#898989; font-size:1.356cqw; line-height:1.5; white-space:nowrap; } /* 16/1180 */
.fx-hwmap__roadname--v{ writing-mode:vertical-rl; letter-spacing:.02em; }
.fx-hwmap__ic{ color:#898989; font-weight:800; font-size:1.695cqw; line-height:1.5; white-space:nowrap; } /* 20/1180 */
.fx-hwmap__tree{ left:37.881%; top:41.143%; width:10.987%; height:auto; }  /* 129.65/1180 @(447,288) #126 */
.fx-hwmap__dot{ left:42.161%; top:63.429%; width:2.373%; aspect-ratio:1; border-radius:50%;
  background:var(--fx-ink); }                                              /* 28px 원 @(497.5,444) #126 */
.fx-hwmap__station{ left:37.881%; top:85.143%; width:14.576%; height:5.571%;   /* 172x39 @(447,596) #126 */
  background:#b40000; border-radius:2px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:2.034cqw; white-space:nowrap; }   /* 24/1180 */
.fx-hwmap__hosp{ position:static; }
.fx-hwmap__hosp > *{ position:absolute; }
.fx-hwmap__name{ font-family:var(--fx-display); font-weight:800; color:var(--hc);
  font-size:2.034cqw; line-height:1.542; white-space:nowrap; }             /* Challan EB 24/37 */
.fx-hwmap__name--2l{ line-height:1.25; }                                   /* 2줄 라벨(성빈센트) EB 24/30 #126 */
.fx-hwmap__min{ font-weight:800; color:var(--hc); font-size:1.695cqw; line-height:1.5;
  white-space:nowrap; }                                                    /* EB 20/30 */
.fx-hwmap__tri{ width:1.525%; aspect-ratio:18/17; background:var(--hc);    /* ▲ 18x17 */
  clip-path:polygon(50% 0, 100% 100%, 0 100%); }
.fx-hwmap__sq{ width:1.102%; aspect-ratio:1; background:var(--hc); }       /* ■ 13px */

/* ⑧ #120 BEYOND SPACE — 풀블리드 1980x1200 + 30% 오버레이 + 좌하단 텍스트.
   #156: MP13 정식 애셋(why.mp4 + 첫 프레임 poster why.jpg = Figma 684:1915 와 동일 컷) 반영 — 임시 대체 해소.
   Figma 실측: 라벨 y8418(-7583=835), 본문 bottom 8728 → 섹션 하단 8783(pb 55=2.78vw). */
.fx-standalone{ position:relative; overflow:hidden; aspect-ratio:1980 / 1200; min-height:420px;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff; background:var(--fx-teal); }
/* #156 크롭 기준점 — Figma 는 밴드(0,7583 1980x1200) 안에 영상 컷 684:1915 를 (-89,7582) 2144x1206 으로
   놓았다(가시창 = 원본의 x89~2069). cover 는 높이를 맞추므로(2133x1200) 원본보다 0.5% 좁게 보이니
   가시창 중심 (89+990)/2144 = 0.5033 을 맞추는 값 → 가로 기준점 54.6%(세로는 오버플로 없어 50%). */
.fx-standalone__video{ position:absolute; inset:0; z-index:0; width:100%; height:100%;
  object-fit:cover; object-position:54.6% 50%; pointer-events:none; }
.fx-standalone__overlay{ position:absolute; inset:0; z-index:1; background:rgba(0,0,0,.3); }
.fx-standalone__copy{ position:relative; z-index:2; width:min(100% - 48px, var(--fx-wrapw));
  padding-bottom:clamp(28px,2.78vw,55px); }
.fx-standalone__copy .fx-heading{ margin-bottom:clamp(24px,2.53vw,50px); }
.fx-standalone__body{ margin:0; font-weight:300; color:#fff;
  font-size:clamp(16px,1.22vw,24px); line-height:1.667; }                  /* 24/40 */

/* ⑨ #120 CARE FOR ALL — 연녹 #e1eedd, 중앙정렬 + 4카드(400x700 r10, gap40, 행폭 1720).
   Figma 실측: 라벨 y8905(pt 122=6.16vw), 헤딩 y8953, 본문 y9083, 카드 y9294(본문 bottom 9183 → 111=5.6vw),
   카드 bottom 9994 → 섹션 끝 10252(pb 258=13vw). */
.fx-care{ background:var(--fx-green); text-align:center;
  padding:clamp(56px,6.16vw,122px) 0 clamp(96px,13.03vw,258px); }
.fx-care__label{ margin:0 0 clamp(8px,0.76vw,15px); color:var(--fx-ink);
  font-size:clamp(15px,1.11vw,22px); letter-spacing:.05em; font-weight:400; }
.fx-care__heading{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(32px,3.03vw,60px); line-height:1.333; margin:0 0 clamp(24px,2.53vw,50px); }
.fx-care__body{ margin:0; color:var(--fx-ink); font-weight:300;
  font-size:clamp(17px,1.41vw,28px); line-height:1.786; }                  /* 28/50 */
.fx-care__cards{ width:min(100% - 48px, 1720px); margin:clamp(48px,5.61vw,111px) auto 0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.02vw,40px); text-align:left; }
.fx-care__card{ position:relative; display:block; aspect-ratio:400 / 700; border-radius:10px;
  background-size:cover; background-position:center; color:#fff;
  --fx-care-ext:clamp(34px,3.43vw,68px); }                                  /* #132 호버 확장량 68/1980 */
/* #156 MP14~MP17 실애셋 — Figma 마스크(666:1014·667:1035·667:1058·667:1023) 안에서 사진이 보이는
   가로 중심을 실측해 크롭 기준점만 맞춘다. Figma 원본 배치는 카드 하단 13~161px 를 사진이 덮지 않고
   그라데이션으로 가리지만, 그대로 옮기면 #132 호버로 그라데이션이 내려갈 때 빈 띠가 드러나므로
   카드는 cover(풀블리드)를 유지하고 중심만 정렬한다. 세로는 cover 오버플로가 없어 50% 고정.
   MP17(가정간호)은 폴더 원본이 Figma fill(0.666)과 다른 비율(0.58)로 갱신돼 오버플로가 6px → 중앙 유지. */
.fx-care__cards > .fx-care__card:nth-child(1){ background-position:58.3% 50%; }  /* 사진 가로중심 54.7% */
.fx-care__cards > .fx-care__card:nth-child(2){ background-position:20.7% 50%; }  /* 45.8% */
.fx-care__cards > .fx-care__card:nth-child(3){ background-position:68.4% 50%; }  /* 61.4% */
/* 하단 그라데이션(h303: rgba(0,35,35,0) → 40.385% 지점 #002323). #132: 카드가 더 이상 클립하지
   않으므로(호버 확장이 카드 밖으로 나감) 하단 라운드는 grad 자신이 가진다 */
.fx-care__grad{ position:absolute; left:0; right:0; bottom:0; height:43.3%;   /* 303/700 */
  background:linear-gradient(to bottom, rgba(0,35,35,0), #002323 40.385%);
  border-radius:0 0 10px 10px; transition:bottom .3s ease, height .3s ease; }
.fx-care__text{ position:absolute; left:0; right:0; bottom:0; z-index:1;
  display:flex; flex-direction:column; align-items:flex-start;
  padding:0 9.25% clamp(12px,0.96vw,19px);                                  /* 좌 패딩 37/400 */
  transition:bottom .3s ease, padding-bottom .3s ease; }
.fx-care__name{ font-family:var(--fx-display); font-weight:800; color:#fff;
  font-size:clamp(20px,1.62vw,32px); line-height:1.5625; }                  /* 32/50 */
.fx-care__tag{ font-style:normal; font-weight:800; color:#fff; margin-top:clamp(8px,0.76vw,15px);
  font-size:clamp(15px,1.22vw,24px); line-height:1.5; }                     /* 24/36 */
.fx-care__desc{ color:rgba(255,255,255,.6); font-weight:300; margin-top:clamp(8px,0.71vw,14px);
  font-size:clamp(13px,1.02vw,20px); line-height:1.5; }                     /* 20/30 */
/* #132 '자세히 알아보기 →' — 684:1792 실측: 좌 37(카피와 동일), 설명 아래 28, 20/30 볼드 흰색,
   밑줄(텍스트 하단 +2, 폭=텍스트+화살표), 밑줄~카드하단 24. 기본 숨김 → 해당 카드 호버 시에만 노출 */
.fx-care__more{ display:inline-flex; align-items:center; gap:clamp(4px,0.4vw,8px);
  color:#fff; font-weight:700; font-size:clamp(14px,1.01vw,20px); line-height:1.5;
  text-decoration:none; cursor:pointer;
  /* 기본 숨김: 박스높이 0 이 되도록 밑줄 border/padding 까지 접는다(visibility 는 키보드 포커스가
     막혀 :focus-within 노출이 불가능해지므로 쓰지 않는다) */
  opacity:0; max-height:0; margin-top:0; overflow:hidden;
  border-bottom:0 solid #fff; padding-bottom:0;
  transition:opacity .3s ease, max-height .3s ease, margin-top .3s ease,
    border-bottom-width .3s ease, padding-bottom .3s ease; }
.fx-care__card:hover .fx-care__more,
.fx-care__card:focus-within .fx-care__more{ opacity:1; max-height:2.5em;
  margin-top:clamp(14px,1.41vw,28px); border-bottom-width:2px; padding-bottom:2px; }
/* #132 호버 확장 — 카드 자체(그리드 아이템)는 400x700 고정이라 아래 섹션이 밀리지 않고,
   grad/text 만 카드 하단 밖(--fx-care-ext)으로 내려간다. grad top: 397→226 (높이 474/700+ext) */
.fx-care__card:hover .fx-care__grad,
.fx-care__card:focus-within .fx-care__grad{ bottom:calc(-1 * var(--fx-care-ext));
  height:calc(67.71% + var(--fx-care-ext)); }
.fx-care__card:hover .fx-care__text,
.fx-care__card:focus-within .fx-care__text{ bottom:calc(-1 * var(--fx-care-ext));
  padding-bottom:clamp(15px,1.21vw,24px); }

/* 반응형 (Figma 데스크탑 → 모바일 세로 재배치) */
@media (max-width:900px){
  .fx-topnav__ham{ display:flex; }
  .fx-topnav__right{ display:none; }
  .fx-topnav__nav{ position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0;
    background:var(--fx-teal); padding:12px 24px 20px; transform:translateY(-150%);
    transition:transform .2s ease; box-shadow:0 12px 30px rgba(0,0,0,.3); }
  .fx-topnav__nav.nav--open{ transform:translateY(0); }
  .fx-topnav__nav a{ padding:13px 0; border-bottom:1px solid rgba(255,255,255,.12); opacity:1; }
  /* 모바일: 병원안내 하위를 정적 목록으로 노출(패널 배경이 teal 이라 흰 텍스트) */
  .fx-topnav__group{ flex-direction:column; align-items:stretch; }
  .fx-topnav__grouptop{ display:block; width:100%; text-align:left; padding:13px 0; color:#fff;
    border-bottom:1px solid rgba(255,255,255,.12); }
  .fx-topnav--solid .fx-topnav__nav a,
  .fx-topnav--solid .fx-topnav__grouptop{ color:#fff; }
  .fx-topnav__sub{ position:static; transform:none; opacity:1; visibility:visible;
    background:transparent; border:0; box-shadow:none; min-width:0; padding:2px 0 6px 14px; }
  .fx-topnav__sub a{ color:rgba(255,255,255,.85); text-align:left; padding:10px 0; border-bottom:0; }
  .fx-topnav__sub a:hover{ background:transparent; color:#fff; }
  /* #120: 협폭 폴백 — CERTIFIED·CARE 카드 세로 스택(데스크톱 템플릿 기준, 모바일은 별도 템플릿) */
  .fx-certified__cards{ grid-template-columns:1fr; }
  .fx-care__cards{ grid-template-columns:1fr; max-width:420px; }
}

/* ── 반응형 ─────────────────────────── */
@media (max-width: 980px) { .ftr__inner { grid-template-columns: 1fr; gap: 28px; } .ftr__bottom-inner { flex-direction: column; gap: 10px; text-align: center; } }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .gallery, .fac-grid { grid-template-columns: repeat(2, 1fr); } .locate, .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4, .gallery, .fac-grid { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .table { display: block; overflow-x: auto; }
}

/* ════════════════════════════════════════════════════════════
   재활치료센터 상세 (Task #5) — 아코디언 시술목록 + 좌측 PART 스티키
   ════════════════════════════════════════════════════════════ */
.fx-hero--rehab{ background:linear-gradient(rgba(0,0,0,.15),rgba(0,0,0,.15)),url(../images/figma/card-rehab.jpg) center/cover no-repeat; }
.fx-hero__eyebrow{ position:relative; z-index:2; color:#fff; font-weight:300;
  font-size:clamp(16px,1.9vw,24px); margin:0 0 14px; opacity:.95; }
/* #22: 홈 히어로 브랜드 이어브로우(SPRING IN YOUR STEP) — Figma: 대문자 자간 강조, 2줄 슬로건 위 */
.fx-hero__eyebrow--brand{ text-transform:uppercase; letter-spacing:.22em; font-weight:400;
  font-size:clamp(13px,1.15vw,18px); opacity:.9; margin:0 0 18px; }
.fx-topnav__nav a.is-active{ text-decoration:underline; text-underline-offset:6px; opacity:1; }
.fx-body--onDark{ color:rgba(255,255,255,.85); }

/* #121(201:608 리뉴얼) 공통 본문 — 24/40 Light(축소 시 clamp). --45 = 24/45 */
.fx-rbody{ font-size:clamp(17px,1.22vw,24px); line-height:1.667; color:var(--fx-ink);
  margin:0; font-weight:300; }
.fx-rbody--45{ line-height:1.875; }

/* 히어로 — 648:307 label + 648:310 h1(64/90), 하단 여백 69/1980 */
.fx-hero--rehab .fx-hero__copy{ padding-bottom:clamp(32px,3.49vw,69px); }
.fx-hero--rehab .fx-hero__copy .fx-label{ margin-bottom:15px; }
.fx-hero--rehab .fx-hero__copy h1{ font-size:clamp(32px,3.24vw,64px); line-height:1.4; }

/* 인트로 (201:614, 32/55) */
.fx-rehab-intro{ padding:clamp(56px,5.96vw,118px) 0 0; }
.fx-rehab-intro__lead{ font-size:clamp(19px,1.62vw,32px); line-height:1.72; font-weight:300;
  color:var(--fx-ink); margin:0; }

/* REHABILITATION — 오늘의 움직임 (201:687/201:774): 헤딩→본문 81, 하단 95(→밴드) */
.fx-rehab-move{ padding:clamp(80px,10.56vw,209px) 0 clamp(48px,4.8vw,95px); }
.fx-rehab-move .fx-heading{ margin-bottom:clamp(36px,4.09vw,81px); }
.fx-rehab-move__body{ max-width:1012px; }

/* 풀블리드 사진 밴드 (1980x1000) */
.fx-rehab-band{ margin:0; line-height:0; }
.fx-rehab-band img{ width:100%; aspect-ratio:1980/1000; object-fit:cover; }

/* 2열 — 현수장치 (596:369 x400 w272 · 596:370 x755 w908): 밴드→헤딩 100, 본문→사진 521(#128 실측) */
.fx-rehab-cols{ padding:clamp(48px,5.05vw,100px) 0 clamp(120px,26.31vw,521px); }
.fx-rehab-cols__inner{ display:grid; grid-template-columns:355fr 825fr; align-items:start; }
.fx-rehab-cols__heading{ font-size:clamp(22px,1.62vw,32px); line-height:1.406; font-weight:600;
  color:var(--fx-ink); margin:0; }
.fx-rehab-cols__body{ max-width:908px; }

/* 중앙 사진 (697:67 AY7B9306, 가시 950x1300 x513 라운드 10 — #128) */
.fx-rehab-walk img{ display:block; width:80.51%; margin-left:9.61%; aspect-ratio:950/1300;
  object-fit:cover; border-radius:10px; }

/* CENTER — 300평 (596:363/596:362/596:365): 상단 466(←사진), 하단 133(→밴드) — #128 실측 */
.fx-rehab-center{ padding:clamp(120px,23.54vw,466px) 0 clamp(64px,6.72vw,133px); }
.fx-rehab-center .fx-heading{ margin-bottom:clamp(36px,4.09vw,81px); }
.fx-rehab-center__body{ max-width:830px; }

/* 통증치료실과 작업치료실 (697:37 x400 2줄 32/50 · 697:38 x755) — #128: 현수장치와 동일 2열 그리드 */
.fx-rehab-rooms{ padding:clamp(48px,4.75vw,94px) 0 clamp(48px,5.45vw,108px); }
.fx-rehab-rooms__inner{ display:grid; grid-template-columns:355fr 825fr; align-items:start; }
.fx-rehab-rooms__heading{ font-size:clamp(22px,1.62vw,32px); line-height:1.5625; font-weight:600;
  color:var(--fx-ink); margin:0; }
.fx-rehab-rooms__body{ max-width:908px; }

/* 사진 2열 무간격 (697:43 AY7B9070 / 697:44 AY7B9235, 각 990x600 — #128) */
.fx-rehab-duo{ display:grid; grid-template-columns:1fr 1fr; }
.fx-rehab-duo img{ width:100%; aspect-ratio:990/600; object-fit:cover; }

/* 프로그램 인트로 헤딩 (596:375/596:374): 상단 229(←사진 2열 — #128 실측) */
.fx-rehab-program{ padding:clamp(96px,11.57vw,229px) 0 0; }
.fx-rehab-program .fx-heading{ margin-bottom:0; }

/* PART — 좌측(PART n ⁄ 이름 + 본문) 스티키 + 우측 아코디언. 새 Figma: 구분 보더 없음 */
.fx-part{ padding:clamp(64px,7.93vw,157px) 0 0; }
.fx-part + .fx-nclinic{ margin-top:clamp(24px,4.8vw,95px); }   /* PART3→N CLINIC 215 = 95 + nclinic 패딩 120 */
.fx-part__inner{ display:grid; grid-template-columns:513fr 590fr; column-gap:6.53%; align-items:start; }
.fx-part__side{ position:sticky; top:96px; }
/* 헤드: PART n(x400 y0) + 대각 슬래시(482,12→39deg) + 이름(x469 y38, 40px) — Figma 실측 */
.fx-part__head{ position:relative; margin:0 0 clamp(28px,3.38vw,67px); }
.fx-part__no{ font-size:clamp(14px,1.01vw,20px); font-weight:400; color:var(--fx-ink);
  letter-spacing:.02em; margin:0; line-height:2; }
.fx-part__slash{ position:absolute; left:clamp(56px,4.19vw,83px); top:clamp(8px,.61vw,12px);
  width:1px; height:clamp(34px,2.53vw,50px); background:var(--fx-ink);
  transform:rotate(39deg); transform-origin:top center; }
.fx-part__name{ font-size:clamp(26px,2.02vw,40px); font-weight:600; color:var(--fx-ink);
  margin:clamp(2px,.2vw,4px) 0 0 clamp(46px,3.48vw,69px); line-height:1; }
.fx-part__desc{ max-width:513px; }
/* 아코디언 항목 32px(재활 한정 — .fx-acc 는 타 페이지 공용) */
.fx-part .fx-acc__head{ font-family:inherit; font-weight:400; font-size:clamp(20px,1.62vw,32px);
  padding:clamp(16px,1.06vw,21px) 0; }
.fx-part .fx-acc__icon{ width:20px; height:20px; margin-right:clamp(16px,1.72vw,34px); }
.fx-part .fx-acc__icon::before{ top:9px; width:20px; }
.fx-part .fx-acc__icon::after{ left:9px; height:20px; }

/* 아코디언 */
.fx-acc{ list-style:none; margin:0; padding:0; }
.fx-acc__item{ border-bottom:1px solid var(--fx-line); }
.fx-acc__head{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:0; cursor:pointer; text-align:left; padding:clamp(18px,2vw,26px) 4px;
  font-family:var(--fx-display); font-weight:700; color:var(--fx-ink);
  font-size:clamp(17px,1.7vw,22px); }
.fx-acc__head:hover .fx-acc__title{ color:var(--fx-teal); }
.fx-acc__icon{ position:relative; flex:none; width:22px; height:22px; }
.fx-acc__icon::before,.fx-acc__icon::after{ content:""; position:absolute; background:var(--fx-ink);
  transition:transform .3s ease, opacity .3s ease; }
.fx-acc__icon::before{ top:10px; left:0; width:22px; height:2px; }          /* 가로 */
.fx-acc__icon::after{ left:10px; top:0; width:2px; height:22px; }           /* 세로(+) */
.fx-acc__item.is-open .fx-acc__icon::after{ transform:scaleY(0); }          /* 펼치면 - 로 */
.fx-acc__item.is-open .fx-acc__head{ color:var(--fx-teal); }
/* 패널: grid-rows 0fr→1fr 로 부드러운 auto 높이 */
/* no-JS 접근성: 패널은 기본 펼침. JS 가 [data-acc].is-enhanced 를 붙이면 접힌 항목만 감춘다(#83). */
.fx-acc__panel{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .35s ease; }
[data-acc].is-enhanced .fx-acc__item:not(.is-open) .fx-acc__panel{ grid-template-rows:0fr; }
.fx-acc__inner{ overflow:hidden; }
.fx-acc__inner > *{ margin:0; }
.fx-acc__inner img{ width:100%; max-width:520px; border-radius:4px; margin:4px 0 16px; }
.fx-acc__inner p{ color:var(--fx-body,#555); font-size:clamp(15px,1.5vw,18px);
  line-height:1.75; font-weight:300; padding-bottom:clamp(18px,2vw,26px); }

/* N CLINIC */
/* N CLINIC — 뉴트리션 클리닉 다크 인포그래픽(Figma 201:608 264:3326)
   #110: absolute 다이어그램 — 콘텐츠 1180 × 인체 1048 실측 비율. 인체(264:3287) left 436/1180,
   w 305/1180, bottom 정렬(body-1 은 뇌 글로우만큼 위로 49px 더 큼 → 컨테이너 위로 자연 돌출).
   카드 = 연결선(border-top)이 카드 폭 전체(=인체까지) 그려지고, 제목은 선 위(bottom:100%),
   선 아래에 제품명(바깥쪽)+효능 리스트(안쪽) 2열(.fx-nutri__row). 위치·폭은 인라인 --nutri-top/--nutri-w. */
.fx-nclinic{ background:var(--fx-teal); color:#fff; padding:clamp(64px,6.41vw,127px) 0 clamp(64px,8vw,120px); }
.fx-nclinic__diagram{ position:relative; aspect-ratio:1180/1048; margin-top:clamp(64px,8vw,120px); }
.fx-nclinic__body{ position:absolute; left:36.949%; bottom:0; width:25.847%; height:auto; }
.fx-nutri{ position:absolute; top:var(--nutri-top); width:var(--nutri-w);
  border-top:1px solid rgba(255,255,255,.35); }
.fx-nutri--left{ left:0; }
.fx-nutri--right{ right:0; }
.fx-nutri__cat{ position:absolute; bottom:100%; margin:0 0 clamp(10px,1.5vw,18px);
  font-family:var(--fx-display); font-weight:700; font-size:clamp(15px,1.6vw,19px); color:#fff; }
.fx-nutri--left .fx-nutri__cat{ left:0; }
.fx-nutri--right .fx-nutri__cat{ right:0; }
.fx-nutri__row{ display:flex; gap:clamp(28px,4.5vw,54px); padding-top:clamp(10px,1.5vw,18px); }
.fx-nutri--right .fx-nutri__row{ flex-direction:row-reverse; justify-content:flex-start; text-align:right; }
.fx-nutri__prod{ color:var(--fx-muted); font-weight:600; font-size:clamp(12px,1.2vw,14px); white-space:nowrap; }
.fx-nutri__benefits{ list-style:none; margin:0; padding:0; color:rgba(255,255,255,.7);
  font-weight:300; line-height:1.9; font-size:clamp(12px,1.2vw,14px); }
@media (max-width:900px){
  /* 데스크톱 템플릿의 협폭 폴백 — absolute 다이어그램을 1열 스택으로 풀어낸다(모바일은 별도 템플릿) */
  .fx-nclinic__diagram{ aspect-ratio:auto; display:flex; flex-direction:column;
    gap:clamp(40px,7vw,56px); margin-top:clamp(40px,6vw,64px); }
  .fx-nclinic__body{ position:static; width:clamp(150px,40vw,240px); margin:0 auto; order:-1; }
  .fx-nutri{ position:static; width:auto; }
  .fx-nutri__cat{ position:static; margin:0 0 10px; }
  .fx-nutri--right .fx-nutri__cat{ right:auto; }
  .fx-nutri--right .fx-nutri__row{ flex-direction:row; text-align:left; }
  .fx-nutri__row{ padding-top:12px; }
}

@media (prefers-reduced-motion: reduce){
  .fx-acc__panel{ transition:none; }
  .fx-acc__icon::before,.fx-acc__icon::after{ transition:none; }
}

@media (max-width: 900px){
  .fx-rehab-cols__inner{ grid-template-columns:1fr; gap:20px; }
  .fx-part__inner{ grid-template-columns:1fr; gap:24px; }
  .fx-part__side{ position:static; }   /* 모바일: 스티키 해제(상단에 라벨 노출) */
}

/* MEAL — 연하식단 (648:171 x964/648:170 중앙정렬 — #128): N CLINIC→라벨 153 */
.fx-meal{ padding:clamp(64px,7.73vw,153px) 0 clamp(96px,12.93vw,256px); }
.fx-meal .fx-heading{ margin-bottom:clamp(36px,4.09vw,81px); }
.fx-meal--center{ padding-bottom:0; text-align:center; }
.fx-meal--center .fx-label{ justify-content:center; }
.fx-meal--center .fx-heading{ margin-bottom:0; }
/* 연하/일반 비교 비주얼(#128): 컨테이너 1980x1337 실측 % 배치.
   좌 713:77(x-162 797x1323) · 우 713:78(x1421 y+50 794x1287) 블리드, 중앙 카피 639:873(y273)/639:870,
   라벨 713:81/738:434(y1007, 좌 아이템 내 x89.2% · 우 x6.2%). 헤딩(y13183)과 25px 겹침 → 음수 마진 */
.fx-meal-cmp{ position:relative; overflow:hidden; aspect-ratio:1980/1337; margin-top:-1.26vw; }
.fx-meal-cmp__item{ position:absolute; margin:0; }
.fx-meal-cmp__item img{ width:100%; height:100%; object-fit:cover; }
.fx-meal-cmp__item--swallow{ left:-8.182%; top:0; width:40.253%; height:98.953%; }
.fx-meal-cmp__item--normal{ left:71.768%; top:3.74%; width:40.101%; height:96.26%; }
.fx-meal-cmp__label{ position:absolute; transform:translateX(-50%); margin:0; white-space:nowrap;
  font-family:var(--fx-display); font-weight:800; color:var(--fx-ink); line-height:normal;
  font-size:clamp(16px,1.22vw,24px); }
.fx-meal-cmp__item--swallow .fx-meal-cmp__label{ left:89.21%; top:76.11%; }
.fx-meal-cmp__item--normal .fx-meal-cmp__label{ left:6.17%; top:74.36%; }
.fx-meal-cmp__copy{ position:absolute; left:50%; transform:translateX(-50%); top:20.42%;
  text-align:center; }
.fx-meal-cmp__title{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(20px,1.62vw,32px); line-height:1.25; margin:0 0 clamp(40px,4.14vw,82px); }
.fx-meal-cmp__text{ margin:0 0 clamp(20px,2.02vw,40px); }
.fx-meal-cmp__text:last-child{ margin-bottom:0; }
/* 환자 맞춤식단: 비교 비주얼→타이틀 124(#128), 사진(639:874 999x562)은 랩 우측 밖 뷰포트 끝까지 블리드 */
.fx-meal-custom{ padding:clamp(56px,6.26vw,124px) 0 0; overflow-x:clip; }
.fx-meal-custom__inner{ display:grid; grid-template-columns:592fr 588fr; align-items:start; }
.fx-meal-custom__title{ font-size:clamp(24px,2.02vw,40px); font-weight:600; color:var(--fx-ink);
  line-height:1; margin:0 0 clamp(20px,1.62vw,32px); }
.fx-meal-custom__photo img{ width:calc(100% + (100vw - min(100vw - 48px, var(--fx-wrapw)))/2);
  max-width:none; aspect-ratio:999/562; object-fit:cover; }

/* REHABILITATION — 시설 (648:213~ — #128 재정합): 사진→라벨 430, 헤딩→리드 64, 리드→풀블리드 95 */
.fx-fac5{ padding:clamp(120px,21.72vw,430px) 0 0; overflow-x:clip; }
.fx-fac5 .fx-heading{ margin-bottom:clamp(30px,3.23vw,64px); }
.fx-fac5__lead{ margin-bottom:clamp(48px,4.8vw,95px); }
/* 야외 정원 풀블리드(678:1680 NA6E0418 1980x1000) → 15581 대형 136 */
.fx-fac5__bleed{ margin:0 0 clamp(64px,6.87vw,136px); line-height:0; }
.fx-fac5__bleed img{ width:100%; aspect-ratio:1980/1000; object-fit:cover; }
/* 랩 대형(699:71 15581 · 678:1670 210413_0424, 1318x800 — 랩 우측 밖 +138 블리드) */
.fx-fac5__wide{ margin:0 0 clamp(20px,1.87vw,37px); line-height:0; }
.fx-fac5__wide img{ width:min(111.695%, calc(100% + (100vw - min(100vw - 48px, var(--fx-wrapw)))/2));
  max-width:none; aspect-ratio:1318/800; object-fit:cover; }
.fx-fac5__wide--dining{ margin-top:clamp(72px,7.73vw,153px); }
.fx-fac5__garden-copy{ margin-bottom:clamp(88px,9.44vw,187px); }
.fx-fac5__garden-copy--last{ margin-bottom:0; }
.fx-fac5__title{ font-size:clamp(18px,1.22vw,24px); font-weight:600; color:var(--fx-ink);
  line-height:1.667; margin:0 0 clamp(6px,.51vw,10px); }
.fx-fac5__row{ display:grid; grid-template-columns:570fr 569fr; column-gap:3.47%;
  align-items:start; margin-bottom:clamp(24px,1.87vw,37px); }
.fx-fac5__photo{ margin:0; line-height:0; }
.fx-fac5__photo img{ width:100%; aspect-ratio:570/380; object-fit:cover; }

/* 보호자 풀블리드 (648:53 1980x1000 + 검정 40% + 헤딩 678:1694/본문 697:35, 하단 47/1000 — #128, 라벨 제거 #158) */
.fx-guardian{ position:relative; margin-top:clamp(96px,14.39vw,285px); overflow:hidden; }
.fx-guardian__photo{ display:block; width:100%; aspect-ratio:1980/1000; object-fit:cover; }
.fx-guardian__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.fx-guardian__copy{ position:absolute; left:0; right:0; bottom:4.7%; }
.fx-guardian__heading{ margin:0; }
.fx-guardian__body{ color:#fff; margin:clamp(28px,3.23vw,64px) 0 0; }

@media (max-width: 900px){
  .fx-meal-cmp{ aspect-ratio:auto; overflow:visible; margin-top:24px; }
  .fx-meal-cmp__item,.fx-meal-cmp__copy{ position:static; transform:none; }
  .fx-meal-cmp__item{ margin:0 0 24px; }
  .fx-meal-cmp__item img{ height:auto; }
  .fx-meal-cmp__item .fx-meal-cmp__label{ position:static; transform:none; display:block;
    text-align:center; margin-top:10px; }
  .fx-meal-cmp__copy{ margin:0 0 32px; }
  .fx-meal-custom__inner{ grid-template-columns:1fr; gap:24px; }
  .fx-meal-custom__photo img{ width:100%; }
  .fx-fac5__wide img{ width:100%; }
  .fx-fac5__row{ grid-template-columns:1fr; gap:16px; }
  .fx-rehab-rooms__inner{ grid-template-columns:1fr; gap:20px; }
}

/* ════════════════════════════════════════════════════════════
   상세 페이지 공용 (Task #6·#7·#9·#10)
   ════════════════════════════════════════════════════════════ */
/* ── 문의 CTA(다크) — #168 Figma 270:4402/4403 실측 정합 ─────────────────────
   푸터 프레임 = x0 y0 1980x700 #002323. 콘텐츠 x400~1580 = .fx-wrap(1180) 과 1:1.
   (프레임 기준 상대 y 는 푸터 상단 7320 을 0 으로 환산한 값)
     로고 Group 8      x400  y+130  220x220
     제목 270:4404     x853  y+120  Challan EB 48 / 박스 74
     라벨 x853 · 구분선 x990(h34, white) · 값 x1010(입원상담만 x1012) — Pretendard R 32 / line 40
     행 top  +233(대표전화) / +299(입원상담) / +364(상담시간)
     주말·공휴일 휴무   x1266 y+369  Pretendard R 20 white
     사업자정보 x853 y+575 · 주소 x853 y+608 · © x400 y+608 — Pretendard R 16 #79ac9f
   → 가로는 wrap(1180) 대비 %, 세로·타이포는 1980 프레임 기준 vw clamp 로 환산.
   높이 합: 120 + 74 + 39 + (40·3 + 26 + 25) + 174.5 + 66 + 55.5 = 700 */
.fx-cta{ background:var(--fx-teal); color:#fff;
  padding:clamp(56px,6.061vw,120px) 0 clamp(30px,2.803vw,55.5px); }
/* 열1 = 853-400 = 453 (제목/라벨 열 시작) → 1180 대비 38.3898% */
.fx-cta__inner{ display:grid; grid-template-columns:38.3898% minmax(0,1fr); align-items:start; }
/* 로고 220 — % 기준은 자기 열(453) 이므로 220/453 = 48.5651%. top(+130) = 제목 top(+120) + 10 */
.fx-cta__logo{ width:48.5651%; height:auto; justify-self:start;
  margin-top:clamp(4px,0.505vw,10px); }
.fx-cta__title{ color:#fff; font-family:var(--fx-display); font-weight:800;
  font-size:clamp(24px,2.424vw,48px); line-height:1.5417;              /* 박스 74 / 48 */
  margin:0 0 clamp(18px,1.970vw,39px); }                               /* 194 → 233 */
.fx-cta__contact{ margin:0; }
/* 137 = 990-853(구분선) · 20 = 1010-990 · 256 = 1266-1010(주말 열).
   % 기준은 wrap 이 아니라 본문 열 폭(1180-453 = 727) 이다. */
.fx-cta__row{ position:relative; display:grid;
  grid-template-columns:18.8446% 2.7510% 35.2132% 1fr;
  align-items:center; height:clamp(24px,2.020vw,40px); }
.fx-cta__row + .fx-cta__row{ margin-top:clamp(12px,1.313vw,26px); }    /* 233 → 299 */
/* 3번째 행만 65 간격(299 → 364) — 인접선택자 2회로 구체성을 올려 위 규칙을 덮는다 */
.fx-cta__row + .fx-cta__row + .fx-cta__row{ margin-top:clamp(12px,1.263vw,25px); }
.fx-cta__row::after{ content:""; position:absolute; left:18.8446%; top:50%;
  transform:translateY(-50%); width:1px; height:clamp(18px,1.717vw,34px); background:#fff; }
.fx-cta__row dt{ grid-column:1; }
.fx-cta__row dd{ grid-column:3 / -1; margin:0; }
.fx-cta__row dt, .fx-cta__row dd{ color:#fff; font-weight:400;
  font-size:clamp(18px,1.616vw,32px); line-height:1.25; white-space:nowrap; }
.fx-cta__row--hours dd{ grid-column:3; }
/* 270:4421 — Figma 박스 top +369(h40) 이므로 글리프 중심은 행 상단 +25, 값(+20)보다 5px 아래.
   margin 으로 내리면 그리드 트랙이 커져 같은 행의 라벨/값까지 밀리므로 relative 로만 내린다. */
.fx-cta__row dd.fx-cta__off{ grid-column:4; font-size:clamp(13px,1.010vw,20px);
  position:relative; top:clamp(2px,0.253vw,5px); }
/* 하단 2열 — © 는 랩 좌단(x400), 사업자·주소는 x853. 두 블록의 마지막 줄이 같은 y(+608) */
.fx-cta__bottom{ display:grid; grid-template-columns:38.3898% minmax(0,1fr); align-items:end;
  margin-top:clamp(60px,8.813vw,174.5px); }
.fx-cta__meta p, .fx-cta__copy{ margin:0; color:var(--fx-muted); font-weight:400;
  font-size:clamp(12px,0.808vw,16px); line-height:clamp(24px,1.667vw,33px); }  /* 575 → 608 = 33 */
/* 사업자정보(270:4416) 는 x853 w774 → 우단 1627 로 랩(1580) 을 넘는 bleed 텍스트(줄바꿈 없음).
   단 랩이 좁아지는 1228 미만에서는 한 줄이 뷰포트를 넘어 가로 스크롤이 생기므로 그때만 접는다. */
@media (min-width:1228px){ .fx-cta__meta p:first-child{ white-space:nowrap; } }

/* 번호 리스트(좌 번호+제목 / 우 설명) — dialysis 특장점, homecare 서비스 */
.fx-numlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--fx-line); }
.fx-numlist__item{ display:grid; grid-template-columns:40px minmax(150px,260px) 1fr; gap:clamp(14px,2.6vw,44px);
  padding:clamp(20px,2.3vw,30px) 0; border-bottom:1px solid var(--fx-line); align-items:start; }
.fx-numlist__no{ font-family:var(--fx-display); font-weight:800; color:var(--fx-muted); font-size:20px; }
.fx-numlist__title{ font-family:var(--fx-display); font-weight:700; color:var(--fx-ink); font-size:clamp(16px,1.7vw,22px); }
.fx-numlist__desc{ color:#555; font-weight:300; line-height:1.75; font-size:clamp(15px,1.5vw,17px); }

/* 서브페이지(솔리드, 히어로 없음) */
.fx-subpage{ padding:clamp(40px,5vw,72px) 0 clamp(48px,6vw,90px); }

/* 의료진 카드 — #105 Figma 234:348 구조 정합(콘텐츠 1180 실측, 텍스트 전부 --fx-ink #005656)
   블록: 헤더행(이름/직책/전문의 좌·하단정렬 + 사진 우, 사진 하단=구분선 Line 73)
   → 약력 2컬럼(640:540, 제목 라벨 없음) → 진료분야 → 외래진료일정(가로선 표+원 도트) → 비고 */
.fx-doc:first-of-type{ padding-top:clamp(36px,3.8vw,74px); }   /* 헤딩 하단→첫 사진 102(-헤딩 마진 28) */
.fx-doc + .fx-doc{ padding-top:clamp(36px,3.4vw,67px); }       /* 블록 간 60~73 실측 */
.fx-doc__head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:clamp(24px,3vw,56px); border-bottom:1px solid rgba(0,86,86,.3); }
.fx-doc__id{ padding-bottom:clamp(10px,1vw,19px); }            /* 전문의 하단→구분선 19 */
.fx-doc__name{ font-family:var(--fx-display); font-weight:800; font-size:clamp(26px,3vw,40px);
  letter-spacing:.1em; color:var(--fx-ink); margin:0; }
.fx-doc__role{ color:var(--fx-ink); font-weight:700; font-size:clamp(17px,1.8vw,24px);
  margin:clamp(14px,2.2vw,29px) 0 0; }
.fx-doc__spec{ color:var(--fx-ink); font-weight:400; font-size:clamp(16px,1.8vw,24px); margin:5px 0 0; }
/* 사진 원본(doc-01~03)이 Figma 크롭과 동일(394×428/351×451/455×448) → 자연 비율, 라운드 없음 */
.fx-doc__photo{ max-width:min(38.6%,455px); height:auto; flex:none; }
.fx-doc__photo--empty{ width:33.4%; aspect-ratio:394/428; background:var(--fx-green); }
.fx-doc__cols{ display:grid; grid-template-columns:640fr 540fr; column-gap:clamp(16px,2vw,40px); row-gap:18px;
  padding-top:clamp(16px,1.5vw,29px); margin:0 0 clamp(22px,2vw,39px); }
.fx-doc__cols .fx-doc__career{ margin:0; }
.fx-doc__career{ margin:0; color:var(--fx-ink); font-weight:300; font-size:clamp(15px,1.8vw,24px);
  line-height:1.67; white-space:pre-line; }
.fx-doc__label{ color:var(--fx-ink); font-weight:700; font-size:clamp(16px,1.8vw,24px);
  margin:0 0 clamp(8px,0.7vw,13px); line-height:1.46; }
.fx-doc__field{ margin:0 0 clamp(28px,2.6vw,50px); }
.fx-doc__fieldval{ margin:0; color:var(--fx-ink); font-weight:300; font-size:clamp(15px,1.8vw,24px); line-height:1.67; }
/* 외래진료일정 표(590/1180 폭) — 세로 테두리 없음: 상·하단 1px --fx-ink + 얇은 중간선, 도트 18px 원 */
.fx-doc__sched .fx-doc__label{ margin-bottom:clamp(18px,1.7vw,32px); }
.fx-doc__sched table{ width:min(100%,590px); table-layout:fixed; border-collapse:collapse; }
.fx-doc__sched th,.fx-doc__sched td{ text-align:left; padding:0; vertical-align:middle; }
.fx-doc__sched thead th{ height:43px; border-top:1px solid var(--fx-ink);
  border-bottom:1px solid rgba(0,86,86,.35); font-weight:700; font-size:clamp(14px,1.5vw,20px); color:var(--fx-ink); }
.fx-doc__sched thead th:first-child{ width:20.8%; }            /* 오전/오후 열 123/590 */
.fx-doc__sched thead th:nth-child(n+2){ width:17%; }           /* 요일 열 100/590 */
.fx-doc__sched thead th:last-child{ width:auto; }              /* 금 열은 잔여폭(68) */
.fx-doc__sched tbody th{ height:75px; padding-left:16px; font-weight:400;
  font-size:clamp(15px,1.8vw,24px); color:var(--fx-ink); }
.fx-doc__sched tbody td{ height:75px; }
.fx-doc__sched tbody tr:first-child th,.fx-doc__sched tbody tr:first-child td{ border-bottom:1px solid rgba(0,86,86,.35); }
.fx-doc__sched tbody tr:last-child th,.fx-doc__sched tbody tr:last-child td{ border-bottom:1px solid var(--fx-ink); }
.fx-doc__dot{ display:inline-block; width:18px; height:18px; border-radius:50%; background:var(--fx-ink); vertical-align:middle; }
.fx-doc__note{ margin:clamp(4px,0.4vw,7px) 0 0; color:var(--fx-ink); font-weight:300;
  font-size:clamp(14px,1.5vw,20px); line-height:2; }
/* 재활치료팀 카드 — 사진 좌상(가로형 323×288) + 이름/직책 우측·하단정렬,
   사진 하단 높이 카드 전체폭 구분선(Line 90/91), 약력 우측정렬. 카드 551+간격 197 실측 비율 */
.fx-docmini{ display:grid; grid-template-columns:1fr 1fr; column-gap:15.2%;
  row-gap:clamp(32px,3vw,56px); margin-top:clamp(48px,5.1vw,101px); }  /* 헤딩 하단→사진 129(-헤딩 마진 28) */
.fx-docmini__head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; border-bottom:1px solid rgba(0,86,86,.3); }
.fx-docmini__photo{ width:58.6%; height:auto; flex:none; }     /* 323/551, 라운드 없음 */
.fx-docmini__photo--empty{ aspect-ratio:324/288; background:var(--fx-green); }
.fx-docmini__id{ text-align:right; padding-bottom:clamp(8px,0.8vw,15px); }
.fx-docmini__career{ margin-top:clamp(14px,1.2vw,23px); text-align:right; }

/* 비급여 가격표(아코디언 패널 내부) */
.fx-price-table{ width:100%; border-collapse:collapse; }
.fx-price-table th,.fx-price-table td{ border-bottom:1px solid var(--fx-line); padding:12px 14px; text-align:left; font-size:14px; white-space:nowrap; }
.fx-price-table thead th{ color:var(--fx-muted); font-weight:600; background:#f6f9f7; }
.fx-price-table td.num{ text-align:right; }
.fx-price-scroll{ overflow-x:auto; padding-bottom:12px; }
.fx-price-table td.fx-price-empty{ text-align:center; color:var(--fx-muted); white-space:normal; }
/* #97 표 우상단 기준일자(Figma 329:123 등, 표 헤더 위 우측 정렬)
   #167: 공용 `.fx-acc__inner p`(색 #555 · 15~18px · line-height 1.75 · 하단 패딩 18~26px)가
   구체성(0,1,1) 으로 `.fx-price-date`(0,1,0) 를 덮어써 색/크기가 먹지 않고 표까지 여백이 벌어졌다.
   → `p.fx-price-date` 로 구체성을 올려 Figma 329:123 실측을 그대로 반영:
   Pretendard Regular 14/20 · #005656(=--fx-ink) · 우측정렬.
   여백은 프레임 270:3889 실측 — 기준일자 박스 하단(602) → 표 상단선(607) = 5~6px. */
.fx-acc__inner p.fx-price-date{ margin:0 0 6px; padding:0; text-align:right;
  color:var(--fx-ink); font-weight:400; font-size:14px; line-height:20px; }

@media (max-width:760px){
  /* PC 템플릿의 협폭 폴백(모바일은 별도 mfx-* 템플릿) — 비율(%) 열 대신 고정폭으로 */
  .fx-cta__inner{ grid-template-columns:1fr; }
  .fx-cta__logo{ width:120px; margin:0 0 24px; }
  .fx-cta__row{ grid-template-columns:76px 14px 1fr; height:auto; }
  .fx-cta__row::after{ left:76px; }
  .fx-cta__row--hours{ align-items:start; }
  .fx-cta__row--hours dd{ grid-column:3 / -1; }
  .fx-cta__row dd.fx-cta__off{ grid-column:3 / -1; grid-row:2; }
  .fx-cta__bottom{ grid-template-columns:1fr; align-items:start; row-gap:10px; }
  .fx-cta__bottom .fx-cta__copy{ order:2; }
  .fx-numlist__item{ grid-template-columns:28px 1fr; }
  .fx-numlist__desc{ grid-column:1 / -1; }
  .fx-doc__head{ flex-wrap:wrap; align-items:flex-start; }
  .fx-doc__cols{ grid-template-columns:1fr; }
  .fx-docmini{ grid-template-columns:1fr; }
}

/* dialysis/homecare 히어로 + 특징 리스트 */
/* #129: 새 프레임(139:645) — 사진 KC01(30% 오버레이는 .fx-hero__overlay), label+64/90 카피 */
/* #159: 실애셋 KC01 반영(139:778 image 9, 2094x1178) — 모바일(.mfx-hero--dialysis)은 kc2-hero 유지 */
.fx-hero--dialysis{ background:url(../images/figma/kc01.jpg) center/cover no-repeat; }
.fx-hero--dialysis .fx-hero__copy{ padding-bottom:clamp(32px,3.49vw,69px); }
.fx-hero--dialysis .fx-hero__copy .fx-label{ margin-bottom:15px; }
.fx-hero--dialysis .fx-hero__copy h1{ font-size:clamp(32px,3.24vw,64px); line-height:1.4; }
.fx-hero--homecare{ background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),url(../images/figma/hc-hero-drive.jpg) center/cover no-repeat; }
/* #130: 히어로 label 신설(695:124, y832 — label 하단→h1 10) */
.fx-hero--homecare .fx-hero__copy .fx-label{ margin-bottom:10px; }
/* 가정간호 인트로 2단(좌 텍스트/우 이미지) + 서브헤딩(Figma 199:419) — #122: 사진 548x1033 세로형 */
.fx-hc-intro{ display:grid; grid-template-columns:1fr clamp(300px,27.7vw,548px);
  gap:clamp(32px,5vw,80px); align-items:start; }
.fx-hc-intro__img{ border-radius:8px; overflow:hidden; }
.fx-hc-intro__img img{ display:block; width:100%; height:auto; aspect-ratio:548/1033; object-fit:cover; }
.fx-hc-sub{ font-family:var(--fx-display); font-weight:700; color:var(--fx-ink);
  font-size:clamp(17px,1.9vw,23px); margin:32px 0 14px; }
.fx-hc-sub--light{ color:#fff; margin-top:8px; }
@media (max-width:760px){ .fx-hc-intro{ grid-template-columns:1fr; } }

/* ═══ #122→#130 가정간호(199:419) — 인트로 신설 → visit(흰) → svc(다크 7행) → apply(연녹 2열) → 배너 → contact(운영시간) ═══ */
.fx-hc-visit{ padding:clamp(56px,9.34vw,185px) 0 clamp(56px,10.5vw,208px); }
/* #130: 소제목 "가정전문간호사란?" y2431 — 본문 종료(2007)→소제목 424(사진 하단부 정렬) */
.fx-hc-visit .fx-hc-sub{ margin:clamp(64px,21.41vw,424px) 0 clamp(12px,1.21vw,24px); }
/* SERVICE 다크 2열 7행(제목 x400 EB 32 / 설명 x1045 24/40 정식 문구) — #130 209:424~444 */
.fx-hc-svc{ background:var(--fx-teal); padding:clamp(56px,5.81vw,115px) 0 clamp(64px,10.1vw,200px); }
/* 행 폭: Figma 설명이 랩(1180) 우측을 넘어 x1717 까지 확장(1317) — kc2-wide 패턴 */
.fx-hc-svc__rows{ list-style:none; margin:clamp(24px,2.42vw,48px) 0 0; padding:0;
  width:min(111.61%, calc(50vw + 50% - 24px)); }
.fx-hc-svc__row{ display:grid; grid-template-columns:minmax(180px,590px) minmax(0,1fr);
  column-gap:clamp(24px,2.8vw,55px); padding:clamp(18px,2.2vw,42px) 0; }
.fx-hc-svc__row:first-child{ padding-top:0; }
.fx-hc-svc__title{ margin:0; font-weight:800; color:#fff; font-size:clamp(20px,1.67vw,32px); line-height:1.1; }
.fx-hc-svc__desc{ margin:0; font-weight:300; color:#fff; font-size:clamp(15px,1.25vw,24px); line-height:1.67; }
/* 스크롤 하이라이트(#112 패턴): JS 가 is-scroll-on 부여 시에만 비활성 행 dim(Figma opacity .2) */
.fx-hc-svc__rows.is-scroll-on .fx-hc-svc__row{ opacity:.2; transition:opacity .3s ease; }
.fx-hc-svc__rows.is-scroll-on .fx-hc-svc__row.is-active{ opacity:1; }
@media (max-width:760px){ .fx-hc-svc__row{ grid-template-columns:1fr; row-gap:8px; } .fx-hc-svc__rows{ width:100%; } }
/* APPLY 연녹(#e1eedd, 4394~5554) 2열(좌 소제목 EB 32 x400 w423 / 우 리스트 x823) — #130 738:435~/739:795~/740:875~ */
.fx-hc-apply{ background:var(--fx-green); padding:clamp(56px,6.21vw,123px) 0 clamp(56px,7.47vw,148px); }
.fx-hc-apply__row{ display:grid; grid-template-columns:clamp(220px,21.36vw,423px) minmax(0,1fr); }
.fx-hc-apply__row--targets{ margin-top:clamp(40px,4.75vw,94px); }
.fx-hc-apply__row--how{ margin-top:clamp(36px,4.44vw,88px); }
.fx-hc-apply__sub{ margin:0; font-weight:700; color:var(--fx-ink); font-size:clamp(20px,1.67vw,32px); }
.fx-hc-apply .fx-feat{ margin-bottom:0; }
.fx-hc-apply .fx-feat li{ font-size:clamp(15px,1.25vw,24px); font-weight:400;
  line-height:1.875; padding-top:0; padding-bottom:0; }
.fx-hc-route{ margin:0; }
.fx-hc-route + .fx-hc-route{ margin-top:clamp(16px,1.77vw,35px); }
.fx-hc-route__name{ margin:0; font-weight:800; color:var(--fx-ink); font-size:clamp(16px,1.21vw,24px); line-height:1.875; }
.fx-hc-route__desc{ margin:0; font-weight:300; color:var(--fx-ink); font-size:clamp(15px,1.25vw,24px); line-height:1.875; }
@media (max-width:760px){ .fx-hc-apply__row{ grid-template-columns:1fr; row-gap:12px; } }
/* CONTACT 상담 문의 — 678:1745~1760: 좌 상담시간, 우 카드 589x341 r10 rgba(0,86,86,.05) */
.fx-hc-contact{ padding:clamp(56px,6vw,115px) 0 clamp(72px,8vw,155px); }
.fx-hc-contact__cols{ display:grid; grid-template-columns:1fr clamp(320px,29.8vw,589px);
  align-items:end; gap:clamp(24px,3vw,60px); margin-top:clamp(40px,5.2vw,100px); }
.fx-hc-contact__hours{ margin:0; align-self:start; }
.fx-hc-contact__hours div + div{ margin-top:clamp(24px,2.9vw,56px); }
.fx-hc-contact__hours dt{ font-weight:600; color:var(--fx-ink); font-size:clamp(18px,1.46vw,28px); }
.fx-hc-contact__hours dd{ margin:10px 0 0; font-weight:400; color:var(--fx-ink); font-size:clamp(15px,1.25vw,24px); }
.fx-hc-contact__card{ position:relative; box-sizing:border-box; aspect-ratio:589/341; border-radius:10px;
  background:rgba(0,86,86,.05); padding:clamp(20px,2vw,40px); }
.fx-hc-contact__icon{ width:clamp(48px,4.6vw,91px); height:auto; }
.fx-hc-contact__lead{ position:absolute; top:clamp(18px,1.8vw,34px); right:clamp(16px,1.5vw,28px);
  margin:0; text-align:right; font-weight:600; color:var(--fx-ink); font-size:clamp(18px,1.67vw,32px); line-height:1.25; }
.fx-hc-contact__tel{ position:absolute; right:clamp(16px,1.5vw,28px); bottom:clamp(14px,1.2vw,22px);
  margin:0; font-weight:600; color:var(--fx-ink); font-size:clamp(30px,3.33vw,64px); line-height:1.2; }
@media (max-width:760px){ .fx-hc-contact__cols{ grid-template-columns:1fr; } }

/* 콘텐츠폭 사진 배너(Figma 139:645 → #95 251:2933 = 1257×785) */
.fx-dz-banner{ margin-top:clamp(28px,3.4vw,48px); border-radius:8px; overflow:hidden; }
.fx-dz-banner img{ display:block; width:100%; height:auto; aspect-ratio:1257/785; object-fit:cover; }
.fx-feat{ list-style:none; margin:0 0 22px; padding:0; }
.fx-feat li{ position:relative; padding:9px 0 9px 22px; line-height:1.6; }
.fx-feat li::before{ content:""; position:absolute; left:2px; top:17px; width:7px; height:7px;
  border-radius:50%; background:currentColor; opacity:.6; }
.fx-feat b{ display:inline-block; min-width:120px; font-weight:700; }

/* ════════════════════════════════════════════════════════════
   통합암센터 상세 (Task #11) — 면역 캐러셀 + 4단계 치료 + 항암 식단
   ════════════════════════════════════════════════════════════ */
.fx-hero--cancer{ background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),url(../images/figma/card-cancer.jpg) center/cover no-repeat; }

/* IMMUNE (다크 배경 + 캐러셀) */
.fx-immune{ background:var(--fx-teal); color:#fff; padding:clamp(64px,8vw,120px) 0; }
.fx-immune .fx-body{ max-width:720px; }

/* 캐러셀 */
.fx-carousel{ margin-top:clamp(32px,4vw,56px); }
/* #86: Figma 329 슬라이드엔 캐러셀 외곽 네모 라인이 없음(어두운 배경만) → border/border-radius 제거, overflow:hidden 만 유지 */
.fx-carousel__viewport{ overflow:hidden; }
.fx-carousel__track{ display:flex; list-style:none; margin:0; padding:0;
  transition:transform .45s cubic-bezier(.4,0,.2,1); }
.fx-carousel__slide{ flex:0 0 100%; min-width:100%; box-sizing:border-box;
  padding:clamp(32px,5vw,64px); }
/* 다이어그램 + 캡션(가운데 정렬) */
.fx-carousel__slide .fx-carousel__desc{ text-align:center; margin-left:auto; margin-right:auto; }
.fx-carousel__no{ display:block; font-family:var(--fx-display); font-weight:800;
  color:var(--fx-muted); font-size:clamp(28px,4vw,56px); letter-spacing:.04em; margin-bottom:14px; }
.fx-carousel__title{ font-family:var(--fx-display); font-weight:800; color:#fff;
  font-size:clamp(22px,2.8vw,38px); margin:0 0 16px; }
/* Figma 264:3349: Pretendard Bold, #bdffff, 32px/50px, 가운데정렬 */
.fx-carousel__desc{ color:#bdffff; font-weight:700; line-height:1.5625;
  font-size:clamp(19px,2.4vw,32px); max-width:820px; margin:0; }
/* Figma 255:2947: 이전 · 1/5 · 다음 텍스트 + 진행 바 */
.fx-carousel__ctrl{ display:flex; align-items:center; justify-content:center;
  gap:clamp(28px,4vw,52px); margin-top:clamp(20px,2.4vw,32px); }
.fx-carousel__nav{ background:none; border:0; padding:4px 2px; cursor:pointer;
  font-family:var(--fx-display); font-weight:600; letter-spacing:.04em;
  font-size:clamp(14px,1.5vw,17px); color:rgba(255,255,255,.7);
  transition:color .2s ease, opacity .2s ease; }
.fx-carousel__nav:hover:not(:disabled){ color:#fff; }
.fx-carousel__nav:disabled{ opacity:.35; cursor:default; }
.fx-carousel__count{ font-family:var(--fx-display); font-weight:700; color:#fff;
  font-size:clamp(15px,1.6vw,19px); letter-spacing:.06em; margin:0; min-width:44px; text-align:center; }
.fx-carousel__bar{ width:min(100%,620px); height:2px; margin:clamp(14px,1.6vw,20px) auto 0;
  background:rgba(255,255,255,.16); border-radius:2px; overflow:hidden; }
.fx-carousel__bar-fill{ display:block; height:100%; width:20%; background:rgba(255,255,255,.85);
  border-radius:2px; transition:width .35s cubic-bezier(.4,0,.2,1); }

/* 4단계 통합 치료 */
.fx-stage{ padding:clamp(56px,7vw,110px) 0; }
.fx-stage__list{ list-style:none; margin:clamp(32px,4vw,56px) 0 0; padding:0;
  display:flex; flex-direction:column; }
/* Figma 196:56: 각 STEP = 좌 설명 / 우 체크리스트, 위 구분선 */
.fx-stage__item{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,90px); padding:clamp(28px,3.4vw,48px) 0;
  border-top:1px solid var(--fx-line); align-items:start; }
.fx-stage__item:first-child{ border-top:0; padding-top:clamp(8px,1vw,16px); }
.fx-stage__head{ margin-bottom:16px; }
.fx-stage__badge{ display:inline-block; font-family:var(--fx-display); font-weight:800;
  font-size:13px; letter-spacing:.08em; color:#fff; background:var(--fx-ink);
  border-radius:999px; padding:5px 14px; margin-bottom:14px; }
.fx-stage__name{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(22px,2.4vw,30px); margin:0; }
.fx-stage__desc{ color:#555; font-weight:300; line-height:1.85; margin:0;
  font-size:clamp(15px,1.5vw,17px); }
.fx-stage__care{ list-style:none; margin:0; padding:0; }
.fx-stage__care li{ position:relative; padding:12px 0 12px 30px; color:var(--fx-ink); font-weight:400;
  line-height:1.5; font-size:clamp(15px,1.6vw,18px); border-top:1px solid var(--fx-line); }
.fx-stage__care li:first-child{ border-top:0; }
/* 체크 아이콘 */
.fx-stage__care li::before{ content:""; position:absolute; left:3px; top:50%; margin-top:-4px;
  width:12px; height:7px; border-left:2px solid var(--fx-teal); border-bottom:2px solid var(--fx-teal);
  transform:rotate(-45deg); }

/* 항암 식단 */
/* MEAL(#84) — Figma 196:56: 크림 배경 + 브라운 텍스트 팔레트 */
.fx-diet{ padding:clamp(56px,7vw,110px) 0; background:var(--fx-cream); color:var(--fx-brown); }
.fx-diet .fx-label{ color:var(--fx-brown); }
.fx-diet .fx-heading{ color:var(--fx-brown); margin-bottom:clamp(10px,1.2vw,16px); }
/* 제목 아래 캡션 한 줄(Figma 261:3039, 24px Light) */
.fx-diet__eyebrow{ color:var(--fx-brown); font-weight:300;
  font-size:clamp(16px,1.5vw,20px); line-height:1.45; margin:0; }
/* 풀블리드 셰프 사진(Figma 261:3064, 1980×961) */
.fx-diet__hero{ display:block; width:100vw; margin-left:calc(50% - 50vw);
  aspect-ratio:1980/900; object-fit:cover; object-position:center 40%;
  margin-top:clamp(28px,3.4vw,48px); margin-bottom:clamp(4px,1vw,14px); }
.fx-diet__subtitle{ font-family:var(--fx-display); font-weight:800; color:var(--fx-brown);
  font-size:clamp(20px,2.2vw,28px); margin:clamp(40px,4vw,64px) 0 20px; }
.fx-diet__badge{ display:inline-block; font-family:var(--fx-display); font-weight:700;
  font-size:12px; letter-spacing:.04em; color:#fff; background:var(--fx-muted);
  border-radius:999px; padding:4px 12px; vertical-align:middle; margin-left:10px; }
.fx-diet .fx-numlist{ border-top-color:var(--fx-muted); }
.fx-diet .fx-numlist__item{ border-bottom-color:var(--fx-line); }

/* 주간 표(가로 스크롤) */
.fx-table-scroll{ overflow-x:auto; padding-bottom:8px; }
.fx-week-table{ width:100%; min-width:720px; border-collapse:collapse; background:#fff; }
.fx-week-table caption{ text-align:left; color:var(--fx-muted); font-weight:600; margin-bottom:10px; caption-side:top; }
.fx-week-table th,.fx-week-table td{ border:1px solid var(--fx-line); padding:14px 12px;
  text-align:center; font-size:14px; line-height:1.5; vertical-align:middle; }
.fx-week-table thead th{ color:#fff; background:var(--fx-ink); font-weight:700; }
.fx-week-table tbody td{ color:#444; font-weight:300; }
/* MEAL(#84) — 브라운/크림 표 */
.fx-diet .fx-week-table{ background:transparent; }
.fx-diet .fx-week-table th,.fx-diet .fx-week-table td{ border-color:rgba(89,61,37,.22); }
.fx-diet .fx-week-table thead th{ color:var(--fx-brown); background:rgba(89,61,37,.07); font-weight:700; }
.fx-diet .fx-week-table tbody td{ color:var(--fx-brown); }

/* 실제 식단(점심·저녁 밥상) */
.fx-meal-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,3vw,40px); }
.fx-meal{ margin:0; }
.fx-meal__photo{ width:100%; aspect-ratio:4/3; border-radius:6px; background:#d5e5d8;
  background-image:linear-gradient(135deg, #d5e5d8 25%, #cadfcd 25%, #cadfcd 50%, #d5e5d8 50%, #d5e5d8 75%, #cadfcd 75%);
  background-size:28px 28px; object-fit:cover; display:block; }
/* #75: MEAL 섹션 사진(식단 준비/샐러드, CC-12/13) */
.fx-diet__photo{ display:block; width:100%; height:auto; border-radius:8px; object-fit:cover;
  margin:clamp(18px,2.4vw,30px) 0; }
.fx-meal__cap{ margin-top:16px; }
.fx-meal__cap b{ display:block; font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(17px,1.8vw,22px); margin-bottom:8px; }
.fx-meal__cap span{ display:block; color:#555; font-weight:300; line-height:1.7; font-size:clamp(14px,1.4vw,16px); }
.fx-meal__note{ margin-top:8px; color:var(--fx-muted) !important; font-size:13px !important; }
/* MEAL(#84) — 브라운 캡션 */
.fx-diet .fx-meal__cap b{ color:var(--fx-brown); }
.fx-diet .fx-meal__cap span{ color:#6b5136; }
.fx-diet .fx-meal__note{ color:#8a6f56 !important; }
.fx-diet .fx-body--sm{ color:#8a6f56; }
.fx-meal--single{ display:grid; grid-template-columns:minmax(0,469px) minmax(0,1fr);
  gap:clamp(24px,4vw,56px); align-items:center; }
.fx-meal--single .fx-meal__cap{ margin-top:0; }
.fx-diet__date{ font-family:var(--fx-display); font-weight:700; color:var(--fx-brown);
  font-size:clamp(16px,1.7vw,20px); margin:clamp(16px,2vw,24px) 0 clamp(18px,2vw,26px); }
.fx-diet .fx-body--sm{ margin-top:8px; }
/* 늘봄의 엄격한 식사 관리 — 원형(아웃라인) 불릿, 단일 컬럼(Figma 261:3069/329:147) */
.fx-diet__ruleslist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:clamp(6px,0.8vw,12px); }
.fx-diet__ruleslist li{ position:relative; padding:clamp(8px,0.9vw,12px) 0 clamp(8px,0.9vw,12px) clamp(44px,3.6vw,60px);
  min-height:clamp(36px,3.4vw,48px); display:flex; align-items:center;
  color:var(--fx-brown); font-weight:300; line-height:1.5; font-size:clamp(16px,1.7vw,20px); }
.fx-diet__ruleslist li::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:clamp(34px,3vw,44px); height:clamp(34px,3vw,44px);
  border:1px solid rgba(89,61,37,.5); border-radius:50%; background:transparent; }
/* IMMUNE 면역 개념도 */
/* IMMUNE 면역 개념도 — 캐러셀 슬라이드별 상태(Figma 255:2947 / 329:366) */
.fx-immune__defs{ position:absolute; width:0; height:0; overflow:hidden; }
/* #85: 슬라이드마다 SVG viewBox 폭(--fig-vbw)이 달라 flat 폭이면 중심 면역세포 원이 불균일하게 보인다.
   가장 넓은 viewBox(S4=1228)를 기준으로 img 폭을 viewBox 폭에 비례시켜 슬라이드 간 스케일을 통일한다. */
.fx-immune__fig{ display:block; width:calc(var(--fig-vbw,1228) / 1228 * min(100%,540px)); height:auto; margin:0 auto clamp(20px,2.6vw,32px); }
.fx-immune__fig text{ text-anchor:middle; }
.ic-ring{ fill:none; stroke:rgba(255,255,255,.42); stroke-width:1.4; stroke-dasharray:3 7; }
.ic-ring--faint{ stroke:rgba(255,255,255,.18); }
.ic-core{ fill:#d4efe7; }
.ic-core--weak{ fill:rgba(212,239,231,.7); }
.ic-cancer{ fill:#0d433e; filter:url(#ic-rough); }
.ic-radical{ fill:#0d433e; }
.ic-link{ stroke:rgba(255,255,255,.28); stroke-width:1; stroke-dasharray:2 5; }
.ic-clbl{ fill:#083330; font-weight:700; font-size:15px; }
.ic-clbl--sm{ font-size:13px; }
.ic-rlbl{ fill:#fff; font-weight:600; font-size:14px; }
.ic-lbl{ fill:#fff; font-size:12.5px; }
@media (max-width:640px){
  .fx-diet__ruleslist{ grid-template-columns:1fr; }
  .fx-meal--single{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce){
  .fx-carousel__track{ transition:none; }
}

@media (max-width: 760px){
  .fx-stage__item{ grid-template-columns:1fr; gap:20px; }
}
@media (max-width: 560px){
  .fx-meal-grid{ grid-template-columns:1fr; }
}

/* ═══════════ CURE 전개형(#83) — Figma 98:135: 좌 단계설명 / 우 +/− 아코디언 치료리스트 ═══════════ */
.fx-cure__list{ list-style:none; margin:clamp(32px,4vw,56px) 0 0; padding:0; }
/* 각 단계 = 2열(좌 설명 / 우 치료리스트). Figma 좌 x=400 w=513 / 우 x=990 w=590 → 513:590 비율 */
.fx-cure__stage{ display:grid; grid-template-columns:minmax(0,513fr) minmax(0,590fr);
  gap:clamp(32px,5vw,90px); padding:clamp(36px,4.4vw,64px) 0; align-items:start;
  border-top:1px solid var(--fx-line); }
.fx-cure__stage:first-child{ border-top:0; }
/* 좌열: 스크롤 동안 상단에 고정(스티키) → 우측 치료리스트를 훑는 동안 단계 설명 유지 */
.fx-cure__copy{ position:sticky; top:110px; }
/* 단계 뱃지 = Figma 100:282/103:341: 외곽선 박스(70×38) border 1px #005656 + "N단계" Pretendard Regular 24px #005656 */
.fx-cure__badge{ display:inline-flex; align-items:center; justify-content:center;
  font-family:"Pretendard","Noto Sans KR",sans-serif; font-weight:400;
  font-size:clamp(17px,1.7vw,24px); line-height:1; letter-spacing:0; color:var(--fx-ink);
  background:transparent; border:1px solid var(--fx-ink); border-radius:2px; padding:8px 14px; }
.fx-cure__name{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(24px,2.6vw,34px); margin:16px 0 14px; }
.fx-cure__desc{ color:#555; font-weight:300; line-height:1.85; margin:0;
  font-size:clamp(15px,1.5vw,17px); }

/* 우열 아코디언 이미지/서브타이틀(고압산소 placeholder 포함) */
.fx-cure .fx-acc__inner img,
.fx-cure__imgph{ width:100%; max-width:590px; aspect-ratio:590/340; object-fit:cover;
  border-radius:12px; margin:6px 0 18px; display:block; }
.fx-cure__imgph{ background:repeating-linear-gradient(135deg,#e7efe9 0 14px,#dfeae1 14px 28px); }
.fx-cure__sub{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(16px,1.7vw,20px); margin:18px 0 10px !important; }

/* no-JS: 아코디언이 전부 펼쳐지므로 아이콘도 −(펼침)로 표기 */
[data-acc]:not(.is-enhanced) .fx-acc__icon::after{ transform:scaleY(0); }

/* 스크롤 활성 하이라이트: 활성 단계만 또렷, 비활성은 흐림. reduced-motion/no-JS 는 is-scroll-on 미부여 → 전부 또렷 */
.fx-cure.is-scroll-on .fx-cure__stage{ opacity:.4; transition:opacity .5s ease; }
.fx-cure.is-scroll-on .fx-cure__stage.is-active{ opacity:1; }

/* 2단계 면역주사 클리닉 — 약제명 카드 그리드(Figma 266×128 카드, 2열) */
.fx-drug{ display:flex; flex-direction:column; gap:clamp(24px,3vw,40px); }
.fx-drug__cat{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(17px,1.8vw,22px); margin:0 0 14px; }
.fx-drug__sub{ font-weight:700; color:var(--fx-teal); font-size:clamp(14px,1.4vw,16px); margin:14px 0 10px; }
.fx-drug__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(10px,1.4vw,18px); }
.fx-drug__card{ display:flex; flex-direction:column; gap:4px; padding:16px 18px;
  border:1px solid var(--fx-line); border-radius:10px; background:#fbfcfb; }
.fx-drug__card b{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink); font-size:16px; }
.fx-drug__card span{ color:#666; font-weight:300; font-size:14px; line-height:1.4; }
.fx-drug__card em{ color:var(--fx-muted); font-style:normal; font-size:13px; letter-spacing:.02em; }

@media (max-width: 760px){
  .fx-cure__stage{ grid-template-columns:1fr; gap:22px; }
  .fx-cure__copy{ position:static; }   /* 모바일: 스티키 해제 */
  .fx-drug__grid{ grid-template-columns:1fr; }
}

/* ═══════════ 특별한 이유(/facilities, Task #15) ═══════════ */
/* 히어로 배경(placeholder: 항공뷰) */
.fx-hero--facilities{ background:linear-gradient(rgba(0,0,0,.28),rgba(0,0,0,.28)),url(../images/figma/building-aerial.jpg) center/cover no-repeat; }

/* 공통 섹션 리듬 */
.fx-fac-nature, .fx-fac-course, .fx-fac-env, .fx-fac-space,
.fx-fac-centers, .fx-fac-meal, .fx-fac-program, .fx-fac-firststep{
  padding:clamp(48px,6vw,96px) 0; border-top:1px solid var(--fx-line); }
.fx-fac-meal{ border-top:0; }   /* #104: 전체폭 히어로 사진으로 시작 → 헤어라인 없음 */
.fx-fac-nature .fx-body, .fx-fac-env .fx-body{ max-width:840px; }
.fx-fac-nature .fx-heading, .fx-fac-course .fx-heading, .fx-fac-env .fx-heading,
.fx-fac-space .fx-heading, .fx-fac-centers .fx-heading, .fx-fac-meal .fx-heading,
.fx-fac-program .fx-heading, .fx-fac-firststep .fx-heading{ margin:14px 0 20px; }

/* NATURE — 일조·물·공기 3요소. Figma 48:761: 3장 사진이 간격 없이 맞붙어 있어
   라벨 사이 가로선이 사진 경계를 가로질러 하나로 이어진다(gap:0, 바깥 모서리만 라운드). */
.fx-fac-elems{ list-style:none; margin:clamp(28px,4vw,48px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
.fx-fac-elem{ text-align:left; }
/* 세로 사진(66:90) 하단 중앙 영문 라벨 + 양옆 얇은 흰 선(사진 가장자리까지 닿아 경계에서 연결) */
.fx-fac-elem__photo{ position:relative; aspect-ratio:66/90; border-radius:0;
  background:linear-gradient(135deg,var(--green-100),var(--green-300)); overflow:hidden; }
.fx-fac-elem:first-child .fx-fac-elem__photo{ border-radius:var(--radius) 0 0 var(--radius); }
.fx-fac-elem:last-child .fx-fac-elem__photo{ border-radius:0 var(--radius) var(--radius) 0; }
.fx-fac-elem__label{ position:absolute; left:0; right:0; bottom:clamp(22px,3vw,44px);
  display:flex; align-items:center; justify-content:center; gap:clamp(14px,1.6vw,22px);
  margin:0; padding:0;
  color:#fff; font-family:var(--fx-display); font-weight:500; letter-spacing:.14em;
  font-size:clamp(20px,2.2vw,30px); text-shadow:0 1px 8px rgba(0,0,0,.28); }
.fx-fac-elem__label::before, .fx-fac-elem__label::after{ content:""; flex:1 1 auto;
  height:1px; background:rgba(255,255,255,.75); transform-origin:left center; }
/* #45 Figma 209:326: 라벨 사이 가로선이 스크롤 진행도(--gp:0→1)에 따라 왼쪽→오른쪽으로 순차 성장.
   3개 사진을 좌→우 3구간으로 나눠(칸당 --lp), 각 칸은 왼쪽 선(0~0.5)→오른쪽 선(0.5~1) 순으로 채운다.
   JS 미실행(no-JS)/기본 상태에선 선이 가득 찬 정적 상태(위 규칙)로 보인다. */
.fx-fac-elems.fx-growline-on .fx-fac-elem:nth-child(1){ --lp:clamp(0, calc(var(--gp,0) * 3), 1); }
.fx-fac-elems.fx-growline-on .fx-fac-elem:nth-child(2){ --lp:clamp(0, calc(var(--gp,0) * 3 - 1), 1); }
.fx-fac-elems.fx-growline-on .fx-fac-elem:nth-child(3){ --lp:clamp(0, calc(var(--gp,0) * 3 - 2), 1); }
.fx-growline-on .fx-fac-elem__label::before{ transform:scaleX(clamp(0, calc(var(--lp,0) * 2), 1)); }
.fx-growline-on .fx-fac-elem__label::after{ transform:scaleX(clamp(0, calc(var(--lp,0) * 2 - 1), 1)); }

/* ENVIRONMENT — 엣지-투-엣지 전체폭 병실 사진 + 콜아웃(#104 Figma 48:1203: 흰 텍스트+리더선, pill 아님) */
.fx-fac-env.fx-fac-dark{ padding-bottom:0; }   /* Figma: 사진이 다크 밴드 하단에 플러시 */
.fx-fac-env__figure{ position:relative; margin-top:clamp(32px,4vw,56px); }
.fx-fac-env__photo{ aspect-ratio:1980/1237; min-height:320px; border-radius:0;
  background:linear-gradient(135deg,var(--green-100),var(--green-300)); }
.fx-fac-callouts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.fx-fac-callout{ font-weight:600; color:var(--fx-ink); }
@media (min-width:761px){
  .fx-fac-callouts{ position:absolute; top:50%; right:clamp(24px,15vw,300px); transform:translateY(-50%);
    align-items:flex-end; text-align:right; gap:clamp(22px,3vw,56px); }
  .fx-fac-callout{ color:#fff; font-size:clamp(14px,1.05vw,20px); padding-bottom:10px; position:relative;
    text-shadow:0 1px 8px rgba(0,0,0,.35); }
  /* 리더선: 텍스트 밑에서 왼쪽으로 길게 뻗는 얇은 흰 선(Figma 266:3590~3600) */
  .fx-fac-callout::after{ content:""; position:absolute; right:0; bottom:0;
    width:clamp(280px,32vw,620px); height:1px; background:rgba(255,255,255,.85); }
}
@media (max-width:760px){ .fx-fac-callouts{ margin:20px 20px 32px; gap:10px; } }

/* SPACE — 생활 공간 정적 갤러리(Figma 48:761) */
.fx-fac-living__lead{ height:clamp(240px,38vw,600px); border-radius:var(--radius);
  background:linear-gradient(135deg,var(--green-100),var(--green-300)); margin-top:clamp(24px,3vw,40px); }
.fx-fac-living__sub{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(22px,2.6vw,32px); margin:clamp(28px,3.4vw,44px) 0 12px; }
.fx-fac-living__intro{ max-width:840px; }
.fx-fac-living{ margin-top:clamp(32px,4vw,56px); display:grid; gap:clamp(28px,4vw,56px); }
.fx-fac-livingroom{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); align-items:center; }
.fx-fac-livingroom__photo{ height:clamp(220px,28vw,400px); border-radius:var(--radius);
  background:linear-gradient(135deg,var(--green-100),var(--green-300)); }
.fx-fac-livingroom__name{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(22px,2.6vw,32px); margin:0 0 12px; }
@media (max-width:760px){ .fx-fac-livingroom{ grid-template-columns:1fr; } }

/* NATURE — 광교호수공원(#104: 거리칩·지도는 메인(48:2)으로 이동 → 본문 아래 전체폭 산책로 사진(522:1698)) */
.fx-fac-course__photo{ margin-top:clamp(32px,4vw,56px); aspect-ratio:1980/1123; min-height:320px;
  background:url(../images/figma/fac-hosu.jpg) center/cover no-repeat; }

/* SPACE — 공용 공간(#104 Figma 48:761: [큰 사진 → 명칭 → 설명] 세로 스택 ×5) */
.fx-fac-commons{ margin-top:clamp(40px,5vw,72px); display:grid; gap:clamp(48px,6vw,88px); }
.fx-fac-common__photo{ width:100%; aspect-ratio:1180/787; border-radius:var(--radius);
  background:linear-gradient(135deg,var(--green-100),var(--green-300));
  background-size:cover; background-position:center; background-repeat:no-repeat; }
.fx-fac-common__photo--tall{ aspect-ratio:1180/1532; }    /* 데이룸(83:1259) */
.fx-fac-common__photo--xtall{ aspect-ratio:1180/1770; }   /* 카페산(93:38) */
.fx-fac-common__photo--bleed{ border-radius:0; aspect-ratio:1980/1338; }  /* 다이닝가든(83:1260) 전체폭 */
.fx-fac-common__name{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(24px,3vw,38px); margin:clamp(18px,2.4vw,32px) 0 12px; }

/* CENTERS — 특화 치료 센터 카드 */
.fx-fac-centers__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,3vw,40px); margin-top:clamp(24px,3vw,40px); }
.fx-fac-center{ display:block; text-decoration:none; padding:clamp(20px,2.4vw,32px);
  border:1px solid var(--fx-line); border-radius:var(--radius); background:var(--bg);
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease; }
.fx-fac-center:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(40,60,30,.14); }
.fx-fac-center__photo{ height:clamp(200px,22vw,300px); border-radius:10px;
  background:linear-gradient(135deg,var(--green-100),var(--green-500)); }
.fx-fac-center__name{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(22px,2.4vw,30px); margin:18px 0 8px; }
.fx-fac-center__go{ display:inline-block; margin-top:10px; font-weight:700; color:var(--fx-ink); }

/* MEAL — #104 Figma 48:761 장문 재구성 */
.fx-fac-meal{ padding-top:0; }                 /* 섹션이 전체폭 히어로 사진으로 시작 */
.fx-fac-meal .fx-body{ max-width:1180px; }
.fx-fac-meal__hero{ aspect-ratio:1980/1248; min-height:320px; margin-bottom:clamp(40px,5vw,80px);
  background:linear-gradient(135deg,var(--green-100),var(--green-300)) center/cover no-repeat; }  /* 96:48 애셋 대기 */
.fx-fac-meal__photo{ aspect-ratio:1180/707; border-radius:var(--radius); margin:clamp(28px,3.4vw,52px) 0;
  background:linear-gradient(135deg,var(--green-100),var(--green-300)) center/cover no-repeat; }  /* 98:57 애셋 대기 */
.fx-fac-meal__pair{ display:grid; grid-template-columns:1fr 1fr; margin:clamp(40px,5vw,80px) 0; }
.fx-fac-meal__pair-photo{ aspect-ratio:990/693; background-size:cover; background-position:center; }
.fx-fac-meal__pair-photo[aria-label="환자별 맞춤 식단 명패"]{ background-image:url(../images/figma/fac-meal-1.jpg); }
.fx-fac-meal__pair-photo[aria-label="맞춤 식단 상차림"]{ background-image:url(../images/figma/fac-meal-2.jpg); }
.fx-fac-meal__sub{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(22px,2.6vw,32px); margin:0 0 14px; }
.fx-fac-meal__sub--center{ text-align:center; margin-bottom:clamp(20px,2.6vw,40px); }
/* 연하식단 밴드: 원본 이미지(136:44=fac-diet-swallow.jpg, 수프 2장+캡션 포함) 위 중앙 텍스트 오버레이 */
.fx-fac-meal__swallow{ aspect-ratio:1979/1396; min-height:420px; margin-top:clamp(40px,5vw,80px);
  background:url(../images/figma/fac-diet-swallow.jpg) center/cover no-repeat;
  display:flex; flex-direction:column; align-items:center; padding-top:clamp(24px,3.4vw,68px); }
.fx-fac-meal .fx-fac-meal__swallow-body{ max-width:460px; text-align:center; margin:0 20px; }  /* .fx-fac-meal .fx-body(1180px)보다 우선 */
/* 투석환자 맞춤식단: 본문 좌 / 배식카트 사진(136:55=fac-diet-swallow-set.jpg) 우측 블리드 */
.fx-fac-meal__dialysis{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,4vw,56px);
  align-items:start; margin-top:clamp(40px,5vw,80px); }
.fx-fac-meal__dialysis-photo{ aspect-ratio:1025/576; margin-right:calc(50% - 50vw);
  background:url(../images/figma/fac-diet-swallow-set.jpg) center/cover no-repeat; }
.fx-fac-meal__tall{ aspect-ratio:1027/1539; max-width:1027px; margin:clamp(40px,5vw,80px) auto 0;
  background:linear-gradient(135deg,var(--green-100),var(--green-300)) center/cover no-repeat; }  /* 136:63 애셋 대기 */
.fx-fac-meal__close{ max-width:640px; margin:clamp(40px,5vw,72px) auto 0; text-align:center; }
.fx-fac-meal__lecture{ aspect-ratio:1980/1114; min-height:320px; margin-top:clamp(40px,5vw,80px);
  background:linear-gradient(135deg,var(--green-100),var(--green-300)) center/cover no-repeat; }  /* 245:2488 애셋 대기 */

/* PROGRAM — 여가 프로그램(#104: 테두리 카드 없는 4열 플레인 리스트 + 사진 2컷) */
.fx-fac-program__sub{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(18px,2vw,24px); margin:clamp(32px,4vw,48px) 0 16px; }
.fx-fac-program__photo{ aspect-ratio:1180/673; border-radius:var(--radius); margin-top:clamp(28px,3.4vw,52px);
  background:linear-gradient(135deg,var(--green-100),var(--green-300)) center/cover no-repeat; }
.fx-fac-program__photo[aria-label="여가 프로그램 안내"]{ background-image:url(../images/figma/fac-leisure-1.jpg); aspect-ratio:1180/673; }
.fx-fac-program__photo[aria-label="여가 프로그램"]{ background-image:url(../images/figma/fac-leisure-2.jpg); aspect-ratio:1180/783; }
.fx-fac-progs{ list-style:none; margin:clamp(24px,3vw,40px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); }
.fx-fac-prog__name{ font-family:var(--fx-display); font-weight:700; color:var(--fx-ink);
  font-size:clamp(16px,1.6vw,20px); margin:0 0 10px; }
.fx-fac-prog__when{ margin:0; color:var(--fx-muted); font-weight:600; }

/* FIRST STEP — 통합 진료 3열(#104: [상단 가는선→치료명→정사각 사진→본문→화살표 버튼]) */
.fx-fac-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); margin-top:clamp(24px,3vw,40px); }
.fx-fac-step{ display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.6); padding-top:16px; }
.fx-fac-step__photo{ aspect-ratio:1/1; border-radius:0;
  background:linear-gradient(135deg,var(--green-100),var(--green-500)); }
.fx-fac-step__name{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(20px,2.2vw,28px); margin:0 0 18px; }
.fx-fac-step .fx-body--sm{ flex:1 1 auto; margin:20px 0; }
.fx-fac-step .fx-outbtn--arrow{ align-self:stretch; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:clamp(14px,1.6vw,22px) clamp(16px,1.8vw,24px); }

/* 첫걸음–CTA 사이 전체폭 라운지 사진 밴드(209:2111 애셋 대기) */
.fx-fac-lounge{ aspect-ratio:1994/934; min-height:280px;
  background:linear-gradient(135deg,var(--green-100),var(--green-300)) center/cover no-repeat; }

@media (max-width: 900px){
  .fx-fac-centers__grid{ grid-template-columns:1fr; }
  .fx-fac-steps{ grid-template-columns:1fr; }
  .fx-fac-progs{ grid-template-columns:repeat(2,1fr); }
  .fx-fac-meal__dialysis{ grid-template-columns:1fr; }
  .fx-fac-meal__dialysis-photo{ margin-right:0; }
}
@media (max-width: 640px){
  /* 모바일: 세로로 쌓이므로 각 사진 전체 라운드 + 간격 복원(가로 연결선은 데스크톱 전용 개념) */
  .fx-fac-elems{ grid-template-columns:1fr; gap:clamp(16px,4vw,24px); }
  .fx-fac-elem__photo,
  .fx-fac-elem:first-child .fx-fac-elem__photo,
  .fx-fac-elem:last-child .fx-fac-elem__photo{ border-radius:var(--radius); }
  .fx-fac-progs{ grid-template-columns:1fr; }
  .fx-fac-meal__pair{ grid-template-columns:1fr; }
  .fx-fac-meal__swallow{ aspect-ratio:auto; padding-bottom:32px; }
}

/* ── #60 Figma 48:761: NATURE·코스·ENVIRONMENT = 하나의 다크 청록 블록(흰 텍스트).
   인트로·SPACE·MEAL 은 흰 배경 유지(인트로/SPACE 헤딩·본문 #005656), 프로그램은 연녹, 첫걸음은 다크. ── */
.fx-fac-dark{ background:var(--fx-teal); border-top:0; }
.fx-fac-course.fx-fac-dark, .fx-fac-env.fx-fac-dark{ padding-top:0; }  /* 다크 블록 내부 이음새 간격만 축소 */
.fx-fac-dark .fx-heading{ color:#fff; }
.fx-fac-dark .fx-body{ color:rgba(255,255,255,.85); }
.fx-fac-dark .fx-label{ color:#fff; }
@media (max-width:760px){ .fx-fac-dark .fx-fac-callout{ color:#fff; } }

/* 여가 프로그램 = 연녹 배경 / 통합진료 첫걸음 = 다크 블록(흰 텍스트·라이트 아웃버튼) */
.fx-fac-program{ background:var(--fx-green); }
.fx-fac-firststep{ background:var(--fx-teal); color:#fff; }
.fx-fac-firststep .fx-heading, .fx-fac-firststep .fx-label,
.fx-fac-firststep .fx-fac-step__name{ color:#fff; }
.fx-fac-firststep .fx-body--sm{ color:rgba(255,255,255,.82); }
.fx-fac-firststep .fx-outbtn{ border-color:#fff; color:#fff; }
.fx-fac-firststep .fx-outbtn:hover{ background:#fff; color:var(--fx-teal); }

/* ── #60 실제 사진 배선(모바일과 동일 에셋) — placeholder 그라데이션 대체 ── */
.fx-fac-elem__photo[aria-label],
.fx-fac-env__photo[aria-label],
.fx-fac-living__lead[aria-label],
.fx-fac-livingroom__photo[aria-label],
.fx-fac-step__photo[aria-label]{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.fx-fac-elem__photo[aria-label="깨끗한 물"]{ background-image:url(../images/figma/fac-water.jpg); }
.fx-fac-elem__photo[aria-label="따스한 일조량"]{ background-image:url(../images/figma/fac-sunlight.jpg); }
.fx-fac-elem__photo[aria-label="맑은 공기"]{ background-image:url(../images/figma/fac-air.jpg); }
.fx-fac-env__photo[aria-label]{ background-image:url(../images/figma/fac-room-env.jpg); }
.fx-fac-living__lead[aria-label="생활 공간"]{ background-image:url(../images/figma/fac-living.jpg); }
.fx-fac-livingroom__photo[aria-label="1인실"]{ background-image:url(../images/figma/fac-room-1.jpg); }
.fx-fac-livingroom__photo[aria-label="1인실 모션베드"]{ background-image:url(../images/figma/fac-room-motion.jpg); }
.fx-fac-livingroom__photo[aria-label="독립형 2인실"]{ background-image:url(../images/figma/fac-room-2.jpg); }
.fx-fac-livingroom__photo[aria-label="6인실"]{ background-image:url(../images/figma/fac-room-6.jpg); }
.fx-fac-livingroom__photo[aria-label="독립형 전실"]{ background-image:url(../images/figma/fac-room-ante.jpg); }
/* 보호자 상주용 1인실: 실사진 미확보 → placeholder 유지 */
.fx-fac-common__photo[aria-label="데이룸"]{ background-image:url(../images/figma/fac-dayroom.jpg); }
.fx-fac-common__photo[aria-label="로비"]{ background-image:url(../images/figma/fac-lobby.jpg); }
.fx-fac-common__photo[aria-label="다이닝가든"]{ background-image:url(../images/figma/fac-dining.jpg); }
.fx-fac-common__photo[aria-label="카페산"]{ background-image:url(../images/figma/fac-cafe.jpg); }
.fx-fac-common__photo[aria-label="목욕탕 및 사우나"]{ background-image:url(../images/figma/fac-bath.jpg); }
.fx-fac-step__photo[aria-label="항암 치료"]{ background-image:url(../images/figma/fac-step-cancer.jpg); }
.fx-fac-step__photo[aria-label="재활 치료"]{ background-image:url(../images/figma/fac-step-rehab.jpg); }
.fx-fac-step__photo[aria-label="투석 치료"]{ background-image:url(../images/figma/fac-step-dialysis.jpg); }

/* Task #24: 병원안내 드롭다운 비활성 항목(오시는 길·온라인 상담) — 메뉴엔 보이되 링크 동작 안 함(재개발 예정).
   <span>(href 없음)이라 근본적으로 이동 불가. 시각적으로 약간 dimmed + 기본 커서, hover 강조 없음. */
.fx-topnav__sub-disabled{ padding:4px 6px; font-size:14px; font-weight:500; white-space:nowrap;
  text-align:center; cursor:default; opacity:.5; user-select:none; }
.fx-topnav--overlay .fx-topnav__sub-disabled{ color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.45); }
.fx-topnav--solid .fx-topnav__sub-disabled{ color:var(--fx-ink); }
@media (max-width:900px){
  .fx-topnav__sub-disabled{ color:rgba(255,255,255,.5); text-align:left; padding:10px 0; }
}

/* ════════════════════════════════════════════════════════════
   오시는 길 (Task #33) — Figma 245:2499
   지도·주소·교통편 + 도보 8단계 안내
   ════════════════════════════════════════════════════════════ */
/* MAP 라벨은 텍스트→라인 순서(Figma: "MAP" 뒤에 라인) */
.fx-loc .fx-subpage__head{ margin-bottom:clamp(28px,3.4vw,48px); }

/* 주소/교통(좌) + 지도 링크 버튼(우, 네이버 1개 — #131) */
.fx-loc__map{ display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,60px);
  align-items:start;
  /* #171: 주소/교통 블록 아래 ~ 지도 창 위 간격 = Figma 245:2499 실측 316px
     (교통 247:2672 bottom 691 → 지도 창 245:2609 top 1007). 1980 기준 316/1980=15.96vw. */
  margin-bottom:clamp(56px,15.96vw,316px); }
.fx-loc__addr{ font-size:clamp(20px,2.4vw,32px); color:var(--fx-ink); font-weight:400;
  margin:0 0 14px; line-height:1.1; }
.fx-loc__transit{ display:flex; align-items:center; gap:6px; margin:0;
  font-size:clamp(16px,1.7vw,24px); color:var(--fx-ink); font-weight:400; }
.fx-loc__pin{ width:clamp(22px,2.2vw,30px); height:auto; flex:none; }
/* #166: Figma 247:2672 구간별 색/굵기 — 상현역 Bold #d4023c / 버스정류장 Bold #1771c9 / 나머지 Regular ink(#005656) */
.fx-loc__hl{ color:#d4023c; font-weight:700; }
.fx-loc__hl--bus{ color:#1771c9; }

.fx-loc__links{ display:flex; flex-direction:column; gap:clamp(14px,1.5vw,20px);
  width:min(100%,370px); }
.fx-loc__link{ display:flex; align-items:center; gap:16px;
  border:0.5px solid var(--fx-ink); border-radius:2px; padding:11px 18px;
  color:var(--fx-ink); background:#fff; transition:background .15s, color .15s; }
.fx-loc__link:hover{ background:var(--fx-ink); color:#fff; }
.fx-loc__linkicon{ width:clamp(46px,4.2vw,62px); height:clamp(46px,4.2vw,62px); flex:none;
  display:flex; align-items:center; justify-content:center; }
.fx-loc__linkimg{ display:block; object-fit:contain; }
/* Figma 아이콘: 네이버 62px 슬롯 꽉 채움 — #123 티맵·#131 카카오 버튼 제거(245:2499, 네이버 1버튼) */
.fx-loc__linkimg--naver{ width:100%; height:100%; }
.fx-loc__linktext{ font-size:clamp(16px,1.6vw,20px); line-height:1.5; font-weight:400; }
.fx-loc__linkarrow{ margin-left:auto; flex:none; font-size:clamp(18px,1.8vw,22px);
  line-height:1; color:inherit; }

/* 지도 이미지 */
/* 지도 창 — Figma 245:2609(Group 22) 마스크 창 1180x621 안에 원본 스크린샷 245:2611
   (1364.28 x 894.43, x272/y825 = 창 x400/y1007 기준 오프셋)이 크롭돼 들어간다.
   #171 이전에는 원본을 통째로 깔아 세로가 더 길었다(창 비율 불일치) → 창 비율 + 크롭으로 정정.
     width  1364.2762 / 1180 = 115.62%
     left   (272-400) / 1180 = -10.85%
     top    (825-1007)/ 621  = -29.31%   (top % 기준 = 창 높이) */
.fx-loc__mapimg{ border-radius:10px; overflow:hidden; aspect-ratio:1180 / 621; position:relative; }
.fx-loc__mapimg img{ position:absolute; width:115.62%; max-width:none; height:auto;
  left:-10.85%; top:-29.31%; display:block; }

/* 도보 안내 */
.fx-loc__walkhead{ font-family:var(--fx-display); font-weight:700; color:var(--fx-ink);
  font-size:clamp(22px,2.4vw,32px); line-height:1.4; letter-spacing:-.01em;
  /* #171: 지도 창 아래 ~ 도보 헤딩 위 = Figma 실측 137px(245:2609 bottom 1628 → 245:2658 top 1765).
     1980 기준 137/1980=6.92vw. */
  margin:clamp(56px,6.92vw,137px) 0 clamp(28px,3.4vw,48px); }
.fx-loc__steps{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:clamp(40px,5vw,80px); }
.fx-loc__shot{ width:100%; aspect-ratio:1180 / 651; border-radius:10px;
  background:var(--fx-green) linear-gradient(135deg, #e7f1e2 0%, #d7e8dd 100%);
  border:1px solid var(--fx-line); display:block; object-fit:cover; }
.fx-loc__cap{ display:flex; align-items:baseline; gap:clamp(12px,1.4vw,20px);
  margin:clamp(16px,1.6vw,24px) 0 0; font-size:clamp(16px,1.7vw,24px);
  color:var(--fx-ink); font-weight:400; line-height:1.5; }
.fx-loc__no{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(16px,1.7vw,24px); flex:none; }

@media (max-width:760px){
  .fx-loc__map{ grid-template-columns:1fr; }
  .fx-loc__links{ width:100%; }
}

/* ════════════════════════════════════════════════════════════
   인공신장센터 상세 재정합 (#95, Figma 139:645) — 7섹션 재구성
   ════════════════════════════════════════════════════════════ */
/* 히어로 서브카피(139:651) — 대제목 아래 리드 문단 */
.fx-hero__sub{ position:relative; z-index:2; color:rgba(255,255,255,.9); font-weight:300;
  font-size:clamp(15px,1.5vw,19px); line-height:1.7; margin:18px 0 0; max-width:760px;
  text-shadow:0 2px 18px rgba(0,0,0,.4); }

/* ① DOCTOR — 헤딩/본문 + 우측 인증뱃지 + 하단 상담사진 */
.fx-dz-doctor__head{ display:grid; grid-template-columns:1fr auto; gap:clamp(24px,4vw,64px); align-items:start; }
.fx-dz-doctor__cert{ width:clamp(160px,29vw,345px); height:auto; flex:none;
  margin:clamp(0px,1.2vw,24px) clamp(0px,2.8vw,55px) 0 0; } /* 596:104 실측 x1180 y1544 w345 h352 — 랩(400~1580) 우측 55px 안쪽·라벨(y1520)보다 24px 아래 */
.fx-dz-doctor__photo{ margin-top:clamp(28px,3.4vw,48px); border-radius:8px; overflow:hidden; }
.fx-dz-doctor__photo img{ display:block; width:100%; height:auto; aspect-ratio:1241/806; object-fit:cover; }

/* 전체폭(풀블리드) 사진 밴드 */
.fx-dz-band{ margin:0; line-height:0; }
.fx-dz-band img{ display:block; width:100%; height:auto; object-fit:cover; }
.fx-dz-band--care img{ aspect-ratio:1980/1000; }      /* 593:31 */
.fx-dz-band--closing img{ aspect-ratio:1983/1000; }   /* 139:784 */

/* ④ PRECISE — 다크 배경 + 투석 4행 (#129: 139:645 재정합 — 번호 x419·제목 x520·설명 x1023, 피치 160, 기본 opacity .7) */
.fx-dz-care{ background:var(--fx-teal); color:#fff; padding:clamp(64px,7.83vw,155px) 0 clamp(64px,7.53vw,149px); }
.fx-dz-steps{ list-style:none; margin:clamp(48px,6.06vw,120px) 0 0; padding:0; }
.fx-dz-steps__item{ display:grid; grid-template-columns:clamp(56px,5.1vw,101px) minmax(240px,42.6%) 1fr;
  padding-left:clamp(8px,0.96vw,19px); min-height:clamp(96px,8.08vw,160px);
  align-items:center; opacity:.7; }
.fx-dz-steps__no{ font-family:var(--fx-display); font-weight:800; color:#fff;
  font-size:clamp(20px,1.62vw,32px); }
.fx-dz-steps__title{ font-weight:800; color:#fff; font-size:clamp(18px,1.62vw,32px); line-height:1.4; }
.fx-dz-steps__desc{ color:#fff; font-weight:300; line-height:1.667; font-size:clamp(15px,1.21vw,24px); }

/* ③ WATER — 라이트 블루 배경 + 좌 카드3 / 우 사진 */
.fx-dz-water{ background:#eef4fb; padding:clamp(56px,7vw,110px) 0; }
.fx-dz-water__inner{ display:grid; grid-template-columns:1fr clamp(300px,36vw,560px);
  gap:clamp(32px,5vw,80px); align-items:start; }
.fx-dz-water .fx-label,.fx-dz-water .fx-heading{ color:#1957a6; }
.fx-dz-water .fx-body{ color:#45607f; }
.fx-dz-water__sub{ font-family:var(--fx-display); font-weight:700; color:#1957a6;
  font-size:clamp(18px,1.9vw,24px); margin:clamp(28px,3.2vw,44px) 0 0; line-height:1.4; }
.fx-dz-cards{ list-style:none; margin:clamp(20px,2.4vw,32px) 0 0; padding:0;
  display:flex; flex-direction:column; gap:14px; }
.fx-dz-cards__item{ background:#dbe9f8; border-radius:10px;
  padding:clamp(18px,2vw,26px) clamp(20px,2.2vw,30px); }
.fx-dz-cards__title{ font-family:var(--fx-display); font-weight:700; color:#1957a6;
  font-size:clamp(16px,1.6vw,20px); margin:0 0 8px; }
.fx-dz-cards__desc{ color:#4a6482; font-weight:300; line-height:1.7; font-size:clamp(14px,1.4vw,16px); margin:0; }
.fx-dz-water__photo{ border-radius:12px; overflow:hidden; }
.fx-dz-water__photo img{ display:block; width:100%; height:auto; aspect-ratio:701/883; object-fit:cover; }

/* ④ EMERGENCY — 원형 아이콘 항목 3 */
.fx-dz-items{ list-style:none; margin:clamp(28px,4vw,56px) 0 0; padding:0; }
.fx-dz-items__item{ display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,2.6vw,40px);
  align-items:center; padding:clamp(16px,2vw,26px) 0; }
.fx-dz-items__item + .fx-dz-items__item{ border-top:1px solid var(--fx-line); }
.fx-dz-items__icon{ width:clamp(56px,6vw,88px); aspect-ratio:1; border-radius:50%;
  background:var(--fx-green); flex:none; }
.fx-dz-items__title{ font-family:var(--fx-display); font-weight:700; color:var(--fx-ink);
  font-size:clamp(17px,1.7vw,22px); margin:0 0 6px; }
.fx-dz-items__desc{ color:#555; font-weight:300; line-height:1.7; font-size:clamp(15px,1.5vw,17px); margin:0; }

/* ⑦ 마무리 */
.fx-dz-closing{ padding:clamp(56px,7vw,110px) 0 clamp(40px,5vw,72px); }

@media (max-width:900px){
  .fx-dz-doctor__head{ grid-template-columns:1fr; }
  .fx-dz-doctor__cert{ order:-1; }
  .fx-dz-water__inner{ grid-template-columns:1fr; }
  .fx-dz-water__photo{ order:-1; }
}
@media (max-width:760px){
  .fx-dz-steps__item{ grid-template-columns:28px 1fr; }
  .fx-dz-steps__desc{ grid-column:1 / -1; }
}

/* ════════════════════════════════════════════════════════════
   #120 메인(48:2 리뉴얼) — 치유 3대 조건 타일(구 #103 fx-nature 대체)
   ════════════════════════════════════════════════════════════ */
/* #156: 자연환경 밴드(666:987) — 1980x1000 풀블리드 1장, 텍스트 없음.
   Figma 는 밴드(0,4870 1980x1000) 안에 영상 컷 846:313 을 (-13,4784) 2006x1128 로 놓았다(가시창 = 원본의
   x13~1993 · y86~1086). cover 는 가로를 맞추므로(1980x1113.75) 원본보다 1.3% 넓게 보이니, 가시창 중심을
   맞추는 값으로 세로 기준점을 잡는다 → (86+500)/1128 = 0.5195 → 69.1%(가로는 오버플로 없어 50%).
   구 3타일(660x900 x3) 규칙은 이 지시로 대체. */
.fx-nature{ display:block; }
.fx-nature__band{ display:block; width:100%; aspect-ratio:1980 / 1000;
  object-fit:cover; object-position:50% 69.1%; }

/* ═══ #111 N CLINIC 부위 하이라이트 연동 ═══
   인체 변형 6장(nclinic-body-1~6)을 같은 자리에 겹쳐 두고 .is-on 만 보이게(crossfade .35s).
   서버렌더 기본은 body-1 is-on → no-JS 에서도 기존 모습 유지. 카드 dim(비활성 .3)은
   JS 가 [data-nclinic] 에 is-live 를 부여했을 때만 적용(접근성 저하 없음). */
.fx-nclinic__body{ opacity:0; transition:opacity .35s ease; }
.fx-nclinic__body.is-on{ opacity:1; }
[data-nclinic].is-live .fx-nutri{ transition:opacity .35s ease; }
[data-nclinic].is-live .fx-nutri:not(.is-on){ opacity:.3; }
@media (max-width:900px){
  /* 협폭 1열 스택에선 변형이 static 배치 → 비활성 장은 자리 차지 없이 숨김 */
  .fx-nclinic__body:not(.is-on){ display:none; }
}

/* ═══ #112 투석 4단계 목록 스크롤 하이라이트(Figma 209:2019) ═══
   [data-dzsteps] 목록에 JS 가 is-scroll-on 을 부여했을 때만 비활성 행 dim(.3) —
   reduced-motion / no-JS 는 클래스 미부여로 전부 선명 정적. 활성 행(is-active)은 기존 색 그대로. */
.fx-dz-steps.is-scroll-on .fx-dz-steps__item{ opacity:.3; transition:opacity .3s ease; }
.fx-dz-steps.is-scroll-on .fx-dz-steps__item.is-active{ opacity:1; }

/* ════════════════════════════════════════════════════════════
   #127 통합암센터(196:56) 전면 리디자인 — 페이지 전용(fx-cc-*)
   히어로 → 인트로 → CURE 3단계 패널 → IMMUNITY 차트(다크) → STEP 1~4
   → MEAL 크림(#fdf6e6·#593d25) → LIFESTYLE 밴드·공간 → 산책 → 마무리
   좌표는 Figma 1980 기준 실측(vw = px/1980), 랩 1180(x400~1580).
   ════════════════════════════════════════════════════════════ */
/* 히어로 — 634:668 label + 261:3030 h1(64/90), 하단 여백 69/1980(재활과 동일 패턴) */
.fx-hero--cancer .fx-hero__copy{ padding-bottom:clamp(32px,3.49vw,69px); }
.fx-hero--cancer .fx-hero__copy .fx-label{ margin-bottom:15px; }
.fx-hero--cancer .fx-hero__copy h1{ font-size:clamp(32px,3.24vw,64px); line-height:1.4; }

/* ③ CURE 3단계 패널 — 라벨 y1520(인트로 bottom 1403 → 117), 패널 y1787(헤딩 bottom 1707 → 80) */
.fx-cc-setup{ padding:clamp(56px,5.91vw,117px) 0 0; }
.fx-cc-setup .fx-heading{ margin-bottom:0; }
/* 패널 1500x1000 r20 #005656 10% — 사진 3장 x335/800/1265(패널 내 95/560/1025, 컬럼 380 갭 85) */
.fx-cc-setup__panel{ width:min(100% - 48px, 1500px); margin:clamp(40px,4.04vw,80px) auto 0;
  border-radius:20px; background:rgba(0,86,86,.1);
  padding:clamp(24px,2.63vw,52px) clamp(24px,4.8vw,95px) clamp(48px,6.41vw,127px);
  display:grid; grid-template-columns:repeat(3,1fr); column-gap:clamp(24px,4.29vw,85px); }
.fx-cc-setup__tag{ margin:0 0 clamp(8px,0.86vw,17px); text-align:center; color:rgba(0,86,86,.4);
  font-weight:600; letter-spacing:.1em; font-size:clamp(14px,1.21vw,24px); line-height:1.667; }
.fx-cc-setup__name{ margin:0 0 clamp(28px,3.13vw,62px); text-align:center; color:var(--fx-ink);
  font-weight:800; font-size:clamp(20px,1.62vw,32px); line-height:1.25; }
.fx-cc-setup__photo{ width:100%; aspect-ratio:380/500; object-fit:cover; border-radius:10px; }
.fx-cc-setup__desc{ margin:clamp(20px,2.12vw,42px) 0 0; text-align:center; color:var(--fx-ink);
  font-weight:300; font-size:clamp(15px,1.11vw,22px); line-height:1.82; }

/* ④ IMMUNITY 다크(643:971, 3105~4706) — 패널 bottom 2787 → 318, 라벨 y3251(pt 146) */
.fx-cc-imm{ background:var(--fx-teal); color:#fff; margin-top:clamp(96px,16.06vw,318px);
  padding:clamp(56px,7.37vw,146px) 0 clamp(64px,9.65vw,191px); }
.fx-cc-imm__label{ justify-content:center; }
.fx-cc-imm__heading{ text-align:center; margin-bottom:0; }
/* 차트 카드 1500x800 r20 #edffff — 내부는 카드 기준 %(x/1500, y/800) + cqw(카드폭 1500) */
.fx-cc-chart{ width:min(100% - 48px, 1500px); margin:clamp(40px,5.05vw,100px) auto 0;
  container-type:inline-size; }
.fx-cc-chart__card{ position:relative; aspect-ratio:1500/800; border-radius:20px; background:#edffff; }
.fx-cc-chart__card > *{ position:absolute; margin:0; }
.fx-cc-chart__title{ left:0; right:0; top:8.625%; text-align:center; color:var(--fx-ink);
  font-weight:800; font-size:2.133cqw; line-height:1.56; }
.fx-cc-chart__y{ left:0; width:14%; text-align:right; color:rgba(0,86,86,.7);
  font-size:1.067cqw; line-height:1.5; white-space:nowrap; }
.fx-cc-chart__grid{ left:15.4%; width:68.667%; height:0; border-top:1px dashed rgba(0,86,86,.35); }
.fx-cc-chart__curve{ left:15.4%; top:28.125%; width:68.667%; height:auto; }
/* 막대(w70/1500) — 기준선 y4212(카드 670/800), 상단 r5. left/height 는 인라인 실측값 */
.fx-cc-chart__bar{ bottom:16.25%; width:4.667%; border-radius:5px 5px 0 0; }
.fx-cc-chart__bar--n{ background:linear-gradient(180deg,#005656 0%,#009b9b 100%); }
.fx-cc-chart__bar--c{ background:var(--fx-teal); }
.fx-cc-chart__drop{ transform:translateX(-50%); text-align:center; color:var(--fx-ink);
  font-weight:700; font-size:1.6cqw; line-height:1.25; }
.fx-cc-chart__grp{ top:86%; transform:translateX(-50%); text-align:center; color:var(--fx-ink);
  font-weight:800; font-size:1.6cqw; line-height:1.5; white-space:nowrap; }
.fx-cc-chart__sub{ top:91.875%; transform:translateX(-50%); text-align:center; color:var(--fx-ink);
  font-size:1.067cqw; line-height:1.5; white-space:nowrap; }
.fx-cc-chart__legend{ left:76.733%; top:23.125%; }
.fx-cc-chart__legend p{ display:flex; align-items:center; gap:1.4cqw; margin:0 0 1.4cqw;
  color:var(--fx-ink); font-weight:800; font-size:1.6cqw; line-height:1.5; white-space:nowrap; }
.fx-cc-chart__legend i{ width:1.6cqw; height:1.6cqw; flex:none; border-radius:2px; }
/* 카드 밖 우하단 출처(722:545) — 카드 bottom 4342 → y4353 */
.fx-cc-chart__src{ margin:clamp(6px,0.56vw,11px) 0 0; text-align:right; color:#bdffff;
  font-size:clamp(10px,0.61vw,12px); line-height:1.5; }
/* 해설(722:557) — 카드 bottom → y4435. Figma 는 1줄+1줄(줄바꿈은 마크업 <br>) —
   부모 .fx-wrap(1180) 보다 넓은 텍스트이므로 max-content 로 랩을 벗어나 중앙 배치(P4 대조 보정) */
.fx-cc-imm__note{ margin:clamp(28px,3.54vw,70px) auto 0; width:max-content;
  max-width:calc(100vw - 48px); position:relative; left:50%; transform:translateX(-50%);
  text-align:center;
  color:#fff; font-weight:300; font-size:clamp(16px,1.31vw,26px); line-height:1.54; }

/* ⑤ STEP 1~4 — 다크 bottom 4706 → 라벨 y4902(196), STEP1 y5213(헤딩 bottom 5091 → 122) */
.fx-cc-stepintro{ padding:clamp(64px,9.9vw,196px) 0 0; }
.fx-cc-stepintro .fx-heading{ margin-bottom:0; }
/* #155: STEP 간격 실측(196:56) — STEP1 출처 하단 6206 → STEP2 라벨 6371(165),
   다크 밴드 하단 11456 → STEP3 라벨 11602(146) */
.fx-cc-step{ padding-top:clamp(50px,8.33vw,165px); }
.fx-cc-stepintro + .fx-cc-step{ padding-top:clamp(40px,6.16vw,122px); }
.fx-cc-step--tight{ padding-top:clamp(44px,7.37vw,146px); }
/* 헤드: STEP n(x400, 20 · 50%) + 대각 슬래시(x487) + 이름(x477, EB 38) — 재활 PART 패턴 */
.fx-cc-step__head{ position:relative; margin:0 0 clamp(24px,3.08vw,61px); }
.fx-cc-step__no{ margin:0; font-size:clamp(14px,1.01vw,20px); font-weight:400;
  color:rgba(0,86,86,.5); letter-spacing:.02em; line-height:2; }
.fx-cc-step__slash{ position:absolute; left:clamp(56px,4.39vw,87px); top:clamp(8px,.66vw,13px);
  width:1px; height:clamp(34px,2.53vw,50px); background:var(--fx-ink);
  transform:rotate(39deg); transform-origin:top center; }
.fx-cc-step__name{ margin:clamp(2px,.2vw,4px) 0 0 clamp(48px,3.89vw,77px);
  font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(24px,1.92vw,38px); line-height:1.05; }
/* #155: 본문은 카드와 같은 폭까지 흐른다(옛 좌/우 2단 그리드 제거) */
.fx-cc-step__desc{ margin-bottom:0; }

/* ⑥ MEAL 크림 — STEP4 bottom 7309 → 라벨 y7941(632), 텍스트 #593d25.
   Figma 그라데이션(위 7235~10523 정방향 / 아래 미러)은 단색+상하 페이드로 단순화(계획서) */
.fx-cc-meal{ background:linear-gradient(180deg, rgba(253,246,230,0) 0%, #fdf6e6 10%,
  #fdf6e6 90%, rgba(253,246,230,0) 100%);
  padding:clamp(120px,31.92vw,632px) 0 clamp(120px,31.82vw,630px); }
.fx-cc-meal__label{ color:var(--fx-brown); }
.fx-cc-meal__heading{ color:var(--fx-brown); margin-bottom:0; }
.fx-cc-meal__body{ margin:clamp(24px,2.53vw,50px) 0 0; max-width:976px; color:var(--fx-brown);
  font-weight:300; font-size:clamp(16px,1.21vw,24px); line-height:1.667; }
/* 풀블리드 사진(648:66) — 본문 bottom 8303 → y8417(114), 아래 첫 행 y9604(187) */
.fx-cc-meal__band{ margin:clamp(48px,5.76vw,114px) 0 clamp(64px,9.44vw,187px); line-height:0; }
.fx-cc-meal__band img{ width:100%; aspect-ratio:1980/1000; object-fit:cover; }
/* 3행(사진 470x300 r10 좌 + 텍스트 x916) — 행 간 90 */
.fx-cc-meal__row{ display:grid; grid-template-columns:470fr 664fr; column-gap:3.81%;
  align-items:start; margin-bottom:clamp(40px,4.55vw,90px); }
.fx-cc-meal__row:last-of-type{ margin-bottom:0; }
.fx-cc-meal__photo{ margin:0; line-height:0; }
.fx-cc-meal__photo img{ width:100%; aspect-ratio:470/300; object-fit:cover; border-radius:10px; }
.fx-cc-meal__rowtitle{ margin:0 0 clamp(10px,1.01vw,20px); color:var(--fx-brown);
  font-weight:800; font-size:clamp(20px,1.62vw,32px); line-height:1.1; }
.fx-cc-meal__rowbody{ margin:0; color:var(--fx-brown); font-weight:300;
  font-size:clamp(16px,1.21vw,24px); line-height:1.667; }
/* 실제 식단(#117 유지 + #127 주간 탐색) — 3행 bottom 10684 → 헤딩 y10919(235) */
.fx-cc-meal__weekly{ margin-top:clamp(80px,11.87vw,235px); }
.fx-cc-meal__wheading{ margin:0 0 clamp(20px,2.02vw,40px); color:var(--fx-brown);
  font-family:var(--fx-display); font-weight:800; font-size:clamp(26px,2.02vw,40px); line-height:1.5; }
.fx-cc-meal__wsub{ margin:0 0 clamp(32px,4.14vw,82px); color:var(--fx-brown); font-weight:300;
  font-size:clamp(16px,1.21vw,24px); line-height:1.46; }
.fx-cc-meal__slides{ position:relative; }
.fx-cc-meal__slide{ display:none; }
.fx-cc-meal__slide.is-on{ display:block; }
.fx-cc-meal__date{ margin:0 0 clamp(24px,2.37vw,47px); color:var(--fx-brown); font-weight:800;
  font-size:clamp(20px,1.62vw,32px); line-height:1.1; }
.fx-cc-meal__mealname{ margin:0 0 clamp(20px,1.92vw,38px); color:var(--fx-brown); font-weight:800;
  font-size:clamp(20px,1.62vw,32px); line-height:1.1; }
/* 사진 569x436 r10 좌(x400) + 우 메뉴 리스트(x1021, 24/40 세로 불릿) — 갭 52/1180 */
.fx-cc-meal__mealrow{ display:grid; grid-template-columns:569fr 559fr; column-gap:4.41%;
  align-items:start; }
.fx-cc-meal__mealphoto{ margin:0; line-height:0; }
.fx-cc-meal__mealphoto img{ width:100%; aspect-ratio:569/436; object-fit:cover; border-radius:10px; }
.fx-cc-meal__menu ul{ margin:0; padding:0; list-style:none; }
.fx-cc-meal__menu li{ color:var(--fx-brown); font-weight:300;
  font-size:clamp(16px,1.21vw,24px); line-height:1.667; }
.fx-cc-meal__note{ margin:clamp(8px,0.86vw,17px) 0 0; color:var(--fx-brown);
  font-size:clamp(14px,1.01vw,20px); line-height:1.5; }
/* 좌우 화살표(264:3346/264:3348, 17x28) — 랩 밖(x354/x1626)으로 살짝 돌출, 좁은 화면은 안쪽으로 */
.fx-cc-meal__nav{ position:absolute; top:calc(50% + 40px); width:28px; height:40px;
  background:none; border:0; padding:0; cursor:pointer; }
.fx-cc-meal__nav::before{ content:""; position:absolute; top:50%; left:50%; width:16px; height:16px;
  border-left:2px solid var(--fx-brown); border-bottom:2px solid var(--fx-brown); }
.fx-cc-meal__nav--prev{ left:-46px; }
.fx-cc-meal__nav--prev::before{ transform:translate(-30%,-50%) rotate(45deg); }
.fx-cc-meal__nav--next{ right:-46px; }
.fx-cc-meal__nav--next::before{ transform:translate(-70%,-50%) rotate(225deg); }
.fx-cc-meal__nav:disabled{ opacity:.3; cursor:default; }
@media (max-width:1300px){
  .fx-cc-meal__nav--prev{ left:4px; }
  .fx-cc-meal__nav--next{ right:4px; }
}

/* ⑦ LIFESTYLE 풀블리드 밴드(715:139, 1980x1237 + 검정 30%) — 카피 하단(라벨 y13202, 밴드 bottom 여백 90/1237) */
.fx-cc-lband{ position:relative; overflow:hidden; line-height:0; }
.fx-cc-lband__photo{ width:100%; aspect-ratio:1980/1237; object-fit:cover; }
.fx-cc-lband__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.3); }
.fx-cc-lband__copy{ position:absolute; left:0; right:0; bottom:7.28%; line-height:normal; }
.fx-cc-lband__heading{ margin-bottom:0; }
.fx-cc-lband__body{ margin:clamp(20px,2.53vw,50px) 0 0; max-width:860px;
  color:rgba(255,255,255,.7); font-weight:300; font-size:clamp(16px,1.21vw,24px); line-height:1.667; }

/* 일상을 보내는 공간 — 밴드 bottom 13650 → 헤딩 y13922(272), 사진 y14114(헤딩 bottom 14038 → 76) */
.fx-cc-stay{ padding:clamp(96px,13.74vw,272px) 0 0; }
.fx-cc-stay__heading{ margin:0 0 clamp(32px,3.84vw,76px); text-align:center;
  font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(26px,2.02vw,40px); line-height:1.5; }
.fx-cc-stay__wide{ margin:0 0 clamp(64px,8.18vw,162px); line-height:0; }
.fx-cc-stay__wide img{ width:100%; aspect-ratio:1180/786; object-fit:cover; border-radius:10px; }
/* 병실 4행(사진 572x381 r10 + 텍스트 x1012) — 행 간 60 */
.fx-cc-stay__room{ display:grid; grid-template-columns:572fr 568fr; column-gap:3.39%;
  align-items:start; margin-bottom:clamp(24px,3.03vw,60px); }
.fx-cc-stay__rphoto{ margin:0; line-height:0; }
.fx-cc-stay__rphoto img{ width:100%; aspect-ratio:572/381; object-fit:cover; border-radius:10px; }
.fx-cc-stay__rtitle{ margin:0 0 clamp(10px,1.01vw,20px); color:var(--fx-ink); font-weight:800;
  font-size:clamp(17px,1.21vw,24px); line-height:1.667; }
.fx-cc-stay__rbody{ margin:0; color:var(--fx-ink); font-weight:300;
  font-size:clamp(16px,1.21vw,24px); line-height:1.667; }
/* 시설 대형 사진 + 제목/본문 — 데이룸 y17053(283)·목욕탕 y18978(226)·카페 y20202(270)·다이닝 y22398(229) */
.fx-cc-stay__big{ margin:0; line-height:0; }
.fx-cc-stay__big img{ width:100%; object-fit:cover; border-radius:10px; }
.fx-cc-stay__big--day{ margin-top:clamp(96px,14.29vw,283px); }
.fx-cc-stay__big--day img{ aspect-ratio:1180/1532; }
.fx-cc-stay__big--bath{ margin-top:clamp(80px,11.41vw,226px); }
.fx-cc-stay__big--bath img{ aspect-ratio:1180/787; }
.fx-cc-stay__big--cafe{ margin-top:clamp(96px,13.64vw,270px); }
.fx-cc-stay__big--cafe img{ aspect-ratio:1180/1770; }
.fx-cc-stay__big--dining{ margin-top:clamp(80px,11.57vw,229px); }
.fx-cc-stay__big--dining img{ aspect-ratio:1180/786; }
.fx-cc-stay__fcopy{ margin-top:clamp(12px,1.01vw,20px); }
.fx-cc-stay__fcopy--cafe{ margin-top:clamp(24px,2.53vw,50px); }
.fx-cc-stay__fcopy--dining{ margin-top:clamp(28px,3.38vw,67px); }
.fx-cc-stay__ftitle{ margin:0 0 clamp(10px,1.01vw,20px); color:var(--fx-ink); font-weight:700;
  font-size:clamp(20px,1.62vw,32px); line-height:1.47; }
.fx-cc-stay__fbody{ margin:0; color:var(--fx-ink); font-weight:300;
  font-size:clamp(16px,1.21vw,24px); line-height:1.667; }

/* ⑧ 산책 — #180 Figma 802:582: 헤딩 Challan ExtraBold 40/60 text-center(x754 w471, 중심 990),
   헤딩 bottom 31053 → 사진 y31155(102). 다이닝 본문(2행 렌더) 상단→사진 616 유지 위해 pt 318(=616-80-116-102) */
.fx-cc-walk{ padding-top:clamp(96px,16.06vw,318px); }
.fx-cc-walk__heading{ margin:0 0 clamp(40px,5.15vw,102px); text-align:center;
  font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(26px,2.02vw,40px); line-height:1.5; }
/* 사진 2열 무간격 — 좌 980 / 우 1000, h1000 */
.fx-cc-walk__duo{ display:grid; grid-template-columns:980fr 1000fr; }
/* #157: 우측 슬롯(648:115)은 CC37 영상 → img/video 공통 규칙 */
.fx-cc-walk__duo > img,.fx-cc-walk__duo > video{
  display:block; width:100%; height:100%; object-fit:cover; aspect-ratio:980/1000; }
.fx-cc-walk__duo > :last-child{ aspect-ratio:1000/1000; }
/* 사진 bottom 32155 → 제목·본문 y32284(129) 상단 정렬, 본문 bottom 32464 → 마무리 밴드 32693(229)
   #180: 2열 — 제목 x400 / 본문 722:686 x755(wrap 좌 기준 355/1180) w806, KakaoBig Regular 24/45 */
.fx-cc-walk__below{ display:grid; grid-template-columns:355fr 825fr; align-items:start;
  margin-top:clamp(48px,6.52vw,129px); padding-bottom:clamp(80px,11.57vw,229px); }
.fx-cc-walk__title{ margin:0; color:var(--fx-ink); font-weight:800;
  font-size:clamp(20px,1.62vw,32px); line-height:1.5625; }
.fx-cc-walk__body{ margin:0; color:var(--fx-ink); font-weight:300;
  font-size:clamp(16px,1.22vw,24px); line-height:1.875; }

/* ⑨ 마무리 풀블리드(648:176, 1980x1000 + 검정 40%) — 카피 하단(헤딩 y26052, 본문 bottom 여백 102/1000) */
.fx-cc-final{ position:relative; overflow:hidden; line-height:0; }
.fx-cc-final__photo{ display:block; width:100%; aspect-ratio:1980/1000; object-fit:cover; }
.fx-cc-final__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.4); }
.fx-cc-final__copy{ position:absolute; left:0; right:0; bottom:10.2%; line-height:normal; }
.fx-cc-final__heading{ margin-bottom:0; }
.fx-cc-final__body{ margin:clamp(20px,2.53vw,50px) 0 0; color:#fff; font-weight:300;
  font-size:clamp(15px,1.21vw,24px); line-height:1.667; }

@media (max-width:900px){
  .fx-cc-setup__panel{ grid-template-columns:1fr; row-gap:40px; }
  .fx-cc-meal__row,.fx-cc-meal__mealrow,.fx-cc-stay__room{ grid-template-columns:1fr; gap:16px; }
  .fx-cc-lband__copy,.fx-cc-final__copy{ position:static; background:var(--fx-teal);
    padding:24px 0 32px; }
}

/* ═══════════ #129 인공신장센터 재정합(139:645) — fx-kc2-* ═══════════ */
/* 광폭 요소(1257 = 1180 랩 + 우측 77): 랩 좌변 고정, 뷰포트 넘침 없이 우측으로만 확장 */
.fx-kc2-wide{ width:min(106.53%, calc(50vw + 50% - 24px)); }
/* 새 프레임 공통: 헤딩→본문 간격 64 */
.fx-kc2-prof .fx-heading,.fx-dz-care .fx-heading,.fx-kc2-safe .fx-heading,.fx-kc2-emg .fx-heading{
  margin-bottom:clamp(24px,3.23vw,64px); }
.fx-dz-care .fx-body{ font-size:clamp(15px,1.21vw,24px); line-height:1.667; margin:0; }

/* ③ PROFESSION — 좌 카피 + 우 원형 뱃지 372(x1152 y1714) + 캡션 EB 36/50 #fa9205(y2112) */
.fx-kc2-prof{ padding:clamp(64px,8.54vw,169px) 0 clamp(56px,6.52vw,129px); }
.fx-kc2-prof__inner{ display:grid; grid-template-columns:1fr clamp(240px,18.79vw,372px);
  column-gap:clamp(32px,5vw,96px); align-items:start; }
.fx-kc2-prof__body{ margin:0; font-size:clamp(15px,1.21vw,24px); line-height:1.875; }
.fx-kc2-prof__badge{ margin-top:clamp(48px,6.31vw,125px); text-align:center; }
.fx-kc2-prof__badge img{ width:100%; height:auto; }
.fx-kc2-prof__caption{ margin:clamp(12px,1.31vw,26px) 0 0; font-family:var(--fx-display);
  font-weight:800; color:#fa9205; font-size:clamp(20px,1.82vw,36px); line-height:1.39; }
/* 풀블리드 밴드(1980x1000) 2종 */
.fx-dz-band--kc2 img{ aspect-ratio:1980/1000; }

/* ⑤ SAFETY — 하늘색(#e4f3ff·텍스트 #005dab) + 카드3(#c7e5ff 609x180) + FMC 로고 + 우측 장비 사진(겹침·darken) */
.fx-kc2-safe{ position:relative; background:#e4f3ff;
  padding:clamp(64px,8.23vw,163px) 0 clamp(64px,8.28vw,164px); }
.fx-kc2-safe__label,.fx-kc2-safe__heading{ color:#005dab; }
.fx-kc2-safe__body{ color:#005dab; font-size:clamp(15px,1.21vw,24px); line-height:1.875; margin:0; }
.fx-kc2-safe__cards{ list-style:none; margin:clamp(24px,2.58vw,51px) 0 0; padding:0; }
.fx-kc2-safe__card{ box-sizing:border-box; width:min(51.6%,609px); min-height:clamp(120px,9.09vw,180px);
  background:#c7e5ff; border-radius:10px; padding:clamp(14px,1.31vw,26px) clamp(16px,1.41vw,28px); }
.fx-kc2-safe__card + .fx-kc2-safe__card{ margin-top:clamp(24px,2.53vw,50px); }
.fx-kc2-safe__ctitle{ margin:0 0 clamp(6px,0.51vw,10px); font-weight:800; color:#005dab;
  font-size:clamp(17px,1.41vw,28px); line-height:1.4; }
.fx-kc2-safe__cdesc{ margin:0; color:#005dab; font-weight:300;
  font-size:clamp(14px,1.21vw,24px); line-height:1.667; }
.fx-kc2-safe__fmc{ display:block; margin-top:clamp(24px,2.27vw,45px);
  width:clamp(140px,12.07vw,239px); height:auto; mix-blend-mode:darken; }
.fx-kc2-safe__machine{ position:absolute; top:clamp(64px,7.88vw,156px); right:7.42%;
  width:min(49.24vw,975px); height:auto; mix-blend-mode:darken; pointer-events:none; }

/* ⑥ EMERGENCY — 카드 3행(1257x130 r10 #005656 10%) + 배너(1257x700 r10) */
.fx-kc2-emg{ padding:clamp(64px,8.59vw,170px) 0 0; }
.fx-kc2-emg .fx-body{ font-size:clamp(15px,1.21vw,24px); line-height:1.875; margin:0; }
.fx-kc2-emg__cards{ list-style:none; margin:clamp(32px,3.79vw,75px) 0 0; padding:0; }
.fx-kc2-emg__card{ box-sizing:border-box; min-height:clamp(80px,6.57vw,130px); border-radius:10px;
  background:rgba(0,86,86,.1); padding:clamp(14px,1.26vw,25px) clamp(20px,1.67vw,33px); }
.fx-kc2-emg__card + .fx-kc2-emg__card{ margin-top:clamp(14px,1.52vw,30px); }
.fx-kc2-emg__ctitle{ margin:0 0 clamp(4px,0.56vw,11px); font-weight:700; color:var(--fx-ink);
  font-size:clamp(17px,1.41vw,28px); line-height:1.4; }
.fx-kc2-emg__cdesc{ margin:0; color:var(--fx-ink); font-weight:300;
  font-size:clamp(14px,1.21vw,24px); line-height:1.4; }
.fx-kc2-emg__banner{ margin-top:clamp(24px,3.08vw,61px); border-radius:10px; overflow:hidden; line-height:0; }
.fx-kc2-emg__banner img{ width:100%; height:auto; aspect-ratio:1257/700; object-fit:cover; }

/* ⑦ CONTACT — 운영시간 3행(피치 120) + 직통상담 카드 549x341 (#122 fx-hc-contact 재사용·치수만 보정) */
.fx-kc2-contact{ padding:clamp(96px,12.17vw,241px) 0 clamp(72px,7.83vw,155px); }
.fx-kc2-contact .fx-heading{ margin-bottom:0; }
.fx-kc2-contact .fx-hc-contact__cols{ grid-template-columns:1fr clamp(300px,27.73vw,549px);
  margin-top:clamp(28px,3.23vw,64px); }
.fx-kc2-contact .fx-hc-contact__hours div + div{ margin-top:clamp(20px,2.12vw,42px); }
.fx-kc2-contact .fx-hc-contact__card{ aspect-ratio:549/341; }

@media (max-width:900px){
  .fx-kc2-wide{ width:100%; }
  .fx-kc2-prof__inner{ grid-template-columns:1fr; row-gap:32px; }
  .fx-kc2-prof__badge{ margin-top:0; justify-self:center; width:min(60%,320px); }
  .fx-kc2-safe__card{ width:100%; }
  .fx-kc2-safe__machine{ position:static; display:block; width:min(80%,480px); margin:32px auto 0; }
}

/* ════════════════════════════════════════════════════════════
   #130 가정간호(199:419) 9월 재정합 — 사진 배너 + CONTACT 운영시간
   ════════════════════════════════════════════════════════════ */
/* 사진 배너(715:112): hc2-banner 1257x700 r10 — 연녹 종료(5554)→카드(5709) 155 */
.fx-hc-banner{ padding:clamp(64px,7.83vw,155px) 0 0; }
.fx-hc-banner__card{ border-radius:10px; overflow:hidden; line-height:0; }
.fx-hc-banner__card img{ width:100%; height:auto; aspect-ratio:1257/700; object-fit:cover; }
/* CONTACT 운영시간(715:107~126): 카드 584x341 상단정렬(y6774 = hours 동일), 평일 문자안내 20/30, 하단 205 */
.fx-hc-contact--hours{ padding:clamp(56px,6.41vw,127px) 0 clamp(72px,10.35vw,205px); }
.fx-hc-contact--hours .fx-hc-contact__cols{ grid-template-columns:1fr clamp(320px,29.49vw,584px);
  align-items:start; margin-top:clamp(24px,2.53vw,50px); }
.fx-hc-contact--hours .fx-hc-contact__card{ aspect-ratio:584/341; }
.fx-hc-contact--hours .fx-hc-contact__hours div + div{ margin-top:clamp(28px,3.18vw,63px); }
.fx-hc-contact__note{ margin:clamp(10px,0.96vw,19px) 0 0; font-weight:300; color:var(--fx-ink);
  font-size:clamp(13px,1.01vw,20px); line-height:1.5; }

/* 면역 비교 차트 막대 상승(#133): is-anim(JS 프라이밍) 진입 전 막대 0, is-in 시 인라인 % 높이로 성장.
   스태거 delay 는 JS 인라인 transition-delay. 곡선·감소 라벨은 막대 성장 뒤 페이드인. no-JS/reduced-motion 은 클래스 미부여로 정적 풀 막대. */
.fx-cc-chart__card.is-anim .fx-cc-chart__bar{ transition:height .9s cubic-bezier(.22,.8,.3,1); }
.fx-cc-chart__card.is-anim:not(.is-in) .fx-cc-chart__bar{ height:0 !important; transition:none; }
.fx-cc-chart__card.is-anim .fx-cc-chart__curve,
.fx-cc-chart__card.is-anim .fx-cc-chart__drop{ opacity:0; transition:opacity .6s ease .7s; }
.fx-cc-chart__card.is-anim.is-in .fx-cc-chart__curve,
.fx-cc-chart__card.is-anim.is-in .fx-cc-chart__drop{ opacity:1; }

/* ════════════════════════════════════════════════════════════
   #155 통합암센터 PC STEP 1~4 펼침 카드 (Figma 196:56, 프레임 y5241~14456)
   · 아코디언 제거. 공용 .fx-acc(+ site.js [data-acc])는 재활·비급여가 계속 쓰므로 무변경이고,
     암센터 전용이던 .fx-cc-step__list / .fx-ccp 규칙만 이 블록으로 대체했다.
   · 카드 폭 = Figma x300~1680 = 1380(본문 wrap 1180 보다 좌우 100 씩 바깥) → .fx-cc-step__cards.
   · 카드 내부는 절대배치. --cw/--ch = Figma 카드 크기(px), --u = 카드폭 1 디자인 px(컨테이너 쿼리).
     자식은 인라인 --x/--y/--w/--h/--fs 로 Figma 좌표를 그대로 적는다.
   ════════════════════════════════════════════════════════════ */
.fx-cc-step__cards{ width:min(100% - 48px, 1380px); margin:clamp(32px,3.33vw,66px) auto 0; }
.fx-cc-step__cards > * + *,
.fx-ccs-col > * + *{ margin-top:clamp(20px,2.02vw,40px); }
.fx-ccs-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:2.899%; align-items:start; }   /* 갭 40/1380 */
.fx-ccs-col{ display:flex; flex-direction:column; }
/* 출처(10px · 우측 정렬, 카드 하단 6) */
.fx-ccs-src{ text-align:right; color:rgba(0,86,86,.5); font-weight:400;
  font-size:clamp(9px,.51vw,10px); line-height:1.4; }
.fx-ccs-src b{ font-weight:700; }
.fx-cc-step__cards > .fx-ccs-src,
.fx-ccs-col > .fx-ccs-src{ margin-top:clamp(3px,.3vw,6px); }
.fx-cc-step__cards > .fx-ccs-src + *,
.fx-ccs-col > .fx-ccs-src + *{ margin-top:clamp(14px,1.36vw,27px); }

/* ── 카드 ───────────────────────────────────────────────── */
.fx-ccs{ position:relative; container-type:inline-size; width:100%;
  aspect-ratio:var(--cw) / var(--ch); border-radius:10px; }
.fx-ccs--tint{ background:rgba(229,238,238,.6); }   /* #e5eeee 60% */
.fx-ccs--white{ background:#fff; }
.fx-ccs--mint{ background:#eff5f5; }
/* --u = 카드 폭 기준 1 디자인 px (컨테이너 자신에는 cqw 를 쓸 수 없어 자손에 선언) */
.fx-ccs *{ --u:calc(100cqw / var(--cw)); }
.fx-ccs > *{ position:absolute; margin:0;
  left:calc(var(--x,0) * var(--u)); top:calc(var(--y,0) * var(--u)); }
.fx-ccs__vec{ position:absolute; left:0; top:0; width:100%; height:100%; overflow:visible; }
.fx-ccs__pic,.fx-ccs__img,.fx-ccs__bar,.fx-ccs__dot,.fx-ccs__pill,.fx-ccs__badge,.fx-ccs__rule{
  width:calc(var(--w,0) * var(--u)); height:calc(var(--h,0) * var(--u)); }
/* 사진: --w/--h 는 Figma 마스크(보이는 창), --ix/--iy/--iw/--ih 는 원본 이미지 박스 */
.fx-ccs__pic{ overflow:hidden; border-radius:calc(10 * var(--u)); }
.fx-ccs__pic > img{ position:absolute; max-width:none; object-fit:cover;
  left:calc(var(--ix,0) * var(--u) * -1); top:calc(var(--iy,0) * var(--u) * -1);
  width:calc(var(--iw) * var(--u)); height:calc(var(--ih) * var(--u)); }
.fx-ccs__pic--r5{ border-radius:calc(5 * var(--u)); }
.fx-ccs__pic--line{ border:1px solid var(--fx-ink); }
.fx-ccs__pic--on{ border:calc(4 * var(--u)) solid var(--fx-ink); }
.fx-ccs__img{ object-fit:cover; max-width:none; }
.fx-ccs__img--sh{ box-shadow:0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.25); }
/* 막대 — 세로 기본, --h 붙이면 가로(그라데이션 방향도 Figma 회전에 맞춰 뒤집는다) */
.fx-ccs__bar{ border-radius:calc(2 * var(--u)) calc(2 * var(--u)) 0 0; }
.fx-ccs__bar--d{ background:var(--fx-teal); }
.fx-ccs__bar--g{ background:linear-gradient(180deg,#005656 0%,#009b9b 100%); }
.fx-ccs__bar--h{ border-radius:0 calc(2 * var(--u)) calc(2 * var(--u)) 0; }
.fx-ccs__bar--h.fx-ccs__bar--g{ background:linear-gradient(to left,#005656 0%,#009b9b 100%); }
.fx-ccs__dot--g{ background:var(--fx-ink); }
.fx-ccs__dot--d{ background:var(--fx-teal); }
.fx-ccs__rule{ background:var(--fx-ink); }
.fx-ccs__rule--o40{ opacity:.4; }
.fx-ccs__pill{ border-radius:calc(5 * var(--u)); background:rgba(0,86,86,.1); }
.fx-ccs__badge{ z-index:1; display:flex; align-items:center; justify-content:center;
  text-align:center; border-radius:calc(5 * var(--u)); background:var(--fx-ink); color:#fff;
  font-weight:800; font-size:calc(var(--fs,18) * var(--u)); line-height:var(--lh,1.2);
  white-space:nowrap; }
.fx-ccs__badge--sh{ box-shadow:0 calc(4 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.25); }
/* 텍스트 — --fs(디자인 px) · --lh(행간 배수) · --ls(자간 디자인 px) */
.fx-ccs__tx{ color:var(--fx-ink); font-weight:400; white-space:nowrap;
  font-size:calc(var(--fs,20) * var(--u)); line-height:var(--lh,1.2);
  letter-spacing:calc(var(--ls,0) * var(--u)); }
.fx-ccs__tx--c{ transform:translateX(-50%); text-align:center; }
.fx-ccs__tx--r{ transform:translateX(-100%); text-align:right; }
.fx-ccs__tx--eb{ font-weight:800; }
.fx-ccs__tx--dp{ font-family:var(--fx-display); font-weight:800; }
.fx-ccs__tx--w{ color:#fff; }
.fx-ccs__tx--o40{ opacity:.4; }
.fx-ccs__tx--o70{ opacity:.7; }

/* ── 818:2749 면역 주사 클리닉 다크 풀블리드(1980x2690) ───────────
   라벨 y8878(섹션 top+112) · 헤딩 8915 · 본문 9014 · 카드 9235 · 하단 여백 170 */
.fx-cc-inj{ margin-top:clamp(47px,4.75vw,94px); background:var(--fx-teal);
  padding:clamp(56px,5.66vw,112px) 0 clamp(85px,8.59vw,170px); }
.fx-cc-inj__label{ margin:0; text-align:center; color:#fff; font-weight:400;
  font-size:clamp(12px,.76vw,15px); line-height:1.2; letter-spacing:.02em; }
.fx-cc-inj__title{ margin:clamp(10px,.96vw,19px) 0 0; text-align:center; color:#fff;
  font-family:var(--fx-display); font-weight:800;
  font-size:clamp(26px,2.02vw,40px); line-height:1; }
.fx-cc-inj__body{ margin:clamp(30px,2.98vw,59px) 0 0; text-align:center; color:#fff;
  font-weight:400; font-size:clamp(17px,1.21vw,24px); line-height:1.875; }
.fx-cc-inj .fx-cc-step__cards{ margin-top:0; }
.fx-cc-inj__body + .fx-ccs-grid{ margin-top:clamp(43px,4.34vw,86px); }

/* ── 재활 PART 아코디언 펼침 패널(#136, Figma 209:576 실측) ─────────────────────
   공용 .fx-acc__inner p/img 규칙(cancer·dialysis·homecare·non-covered 공용)은 건드리지 않고
   .fx-part 스코프로만 오버라이드한다.
   실측(프레임 1980): 이미지 폭 590(=우측 컬럼 전체) · 라운드 없음 · 헤드 하단→이미지 12 ·
   이미지→본문 33 · 본문→다음 구분선 33 · 본문 Pretendard Regular 20/35 #005656 ·
   문단 사이 빈 줄 1행(=1.75em). */
.fx-part .fx-acc__inner img{ width:100%; max-width:none; border-radius:0; display:block;
  margin:clamp(6px,.61vw,12px) 0 clamp(18px,1.67vw,33px); }
.fx-part .fx-acc__inner p{ color:var(--fx-ink); font-weight:400;
  font-size:clamp(15px,1.01vw,20px); line-height:1.75; padding-bottom:0; }
.fx-part .fx-acc__inner p + p{ margin-top:1.75em; }
/* 하단 여백은 마지막 문단에 준다 — .fx-acc__inner 에 패딩을 주면 접힘(0fr) 상태에서도 높이가 남는다 */
.fx-part .fx-acc__inner p:last-child{ padding-bottom:clamp(18px,1.67vw,33px); }

/* ── #139 고속도로 지도 늘봄 나무 마커 통통 튀기 ─────────────────────────────
   Figma 675:1108/675:1109(129.65x148 @447,288) 의 위치·크기는 그대로 두고 transform 만 움직인다
   (left/top % 은 ⑦ 섹션 규칙 유지 → 핀 좌표·레이아웃 무영향).
   2단 바운스: 45% 최고점 → 62% 착지 → 74% 작은 되튐(진폭 28%) → 86% 착지 후 정지.
   지면 점(.fx-hwmap__dot)은 정지 — 나무만 떠올랐다 내려와야 "지면 위에서 튄다"는 인상이 난다. */
@keyframes fx-tree-bounce{
  0%  { transform:translateY(0);                                 animation-timing-function:cubic-bezier(.33,0,.25,1); }
  45% { transform:translateY(calc(var(--tree-hop) * -1));        animation-timing-function:cubic-bezier(.6,0,.9,.45); }
  62% { transform:translateY(0);                                 animation-timing-function:cubic-bezier(.33,0,.25,1); }
  74% { transform:translateY(calc(var(--tree-hop) * -.28));      animation-timing-function:cubic-bezier(.6,0,.9,.45); }
  86%,
  100%{ transform:translateY(0); }
}
.fx-hwmap__tree{ --tree-hop:clamp(4px,.6vw,10px);   /* 1980 기준 ~10px(마커 높이 148 의 약 7%) */
  animation:fx-tree-bounce 1.6s infinite; will-change:transform; }
/* 카드가 화면 밖이면 일시정지 — is-anim 은 site.js 가 부여하므로 no-JS/IO 미지원은 항상 재생(폴백) */
.fx-hwmap__card.is-anim:not(.is-view) .fx-hwmap__tree{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .fx-hwmap__tree{ animation:none; transform:none; }
}

/* ── #140: 온라인 문의 플로팅 버튼(FAB) — Figma 818:2705(Group 476) ──────────
   실측(1980x1120 프레임): 버튼 96x96 · r32 · #002323 · shadow 0 0 14px 5px rgba(0,0,0,.25),
   라벨 ExtraBold 20/30 흰색 2줄("온라인"/"문의"), 빨간 점 14px(#FF0000) 중심이 버튼 우상단 꼭짓점
   (점 1876,924 ↔ 버튼 1787,931 → 오프셋 -지름/2), 화면 여백 우 97px / 하 93px.
   → 프레임 폭 1980 기준 vw 로 환산해 비율 유지(96/1980=4.85vw, 97=4.9vw, 32=1.62vw, 14=0.71vw).
   z-index 60: 스티키 상단바(50) 위, 모바일 드로어(80) 아래. */
.fx-fab{
  --fab-dot:clamp(10px,0.71vw,14px);
  position:fixed; right:clamp(16px,4.9vw,97px); bottom:clamp(16px,4.7vw,93px);
  width:clamp(64px,4.85vw,96px); aspect-ratio:1;
  border-radius:clamp(21px,1.62vw,32px);
  background:var(--fx-teal,#002323); box-shadow:0 0 14px 5px rgba(0,0,0,.25);
  display:flex; align-items:center; justify-content:center; text-align:center;
  color:#fff; font-weight:800; font-size:clamp(14px,1.01vw,20px); line-height:1.5;
  text-decoration:none; z-index:60;
  transition:transform .2s ease, box-shadow .2s ease, opacity .25s ease;
}
.fx-fab__label{ display:block; }
.fx-fab__dot{
  position:absolute; width:var(--fab-dot); height:var(--fab-dot);
  top:calc(var(--fab-dot) / -2); right:calc(var(--fab-dot) / -2);
  border-radius:50%; background:#FF0000;
}
.fx-fab:hover{ transform:translateY(-2px); box-shadow:0 4px 18px 5px rgba(0,0,0,.3); }
.fx-fab:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
/* #141: 스크롤 중 반투명(20%) — site.js 가 스크롤 동안만 is-scrolling 부여(멈춘 뒤 250ms 제거).
   버튼에 올리거나 포커스하면 스크롤 중이어도 선명. pointer-events 는 그대로라 반투명 상태에서도 클릭된다. */
.fx-fab.is-scrolling{ opacity:.2; }
.fx-fab.is-scrolling:hover, .fx-fab.is-scrolling:focus-visible{ opacity:1; }
/* #147: FAB 는 링크→모달 토글 버튼. 모달이 열린 동안(aria-expanded=true)은 스크롤 중이어도 불투명 유지. */
.fx-fab{ border:0; padding:0; margin:0; font-family:inherit; cursor:pointer; }
.fx-fab[aria-expanded="true"].is-scrolling{ opacity:1; }
/* #149: 모달이 열린 동안(aria-expanded=true) 우상단 빨간 점 숨김 — Figma 856:146(824:3931 「'문의 남기기' 버튼 클릭 시」 의 FAB
   Rectangle 461 96x96 @1787,931: 라벨 "온라인/문의" 만 있고 점(#FF0000 14px) 없음). 닫히면(aria-expanded=false) 기본 상태
   818:2705 대로 점 복귀(#140 무회귀). 마크업·JS 무변경 — enquiry-modal.js 가 aria-expanded 를 토글한다. no-JS 는 열릴 수 없어 항상 점 표시. */
.fx-fab[aria-expanded="true"] .fx-fab__dot{ display:none; }
@media (prefers-reduced-motion: reduce){ .fx-fab{ transition:none; } }
@media print{ .fx-fab{ display:none; } }

/* ════════════════════════════════════════════════════════════
   #147 온라인 문의 오버레이 모달 — Figma 810:2400(폼) / 824:4007(접수 완료)
   덤프 docs/plans/figma-dumps/enquiry-modal-810-2400.jsx.txt 모달 상대좌표 축자.
   박스 447x663 · r20 · #fff · shadow 0 0 30px 1px 25% · 배경 dim 없음.
   위치: 우측선 = FAB 우측선(right 동일 clamp), 하단 = FAB 상단 + 22px
   (bottom = FAB bottom + FAB 높이 + 22). 뷰포트가 낮으면 max-height 로 내부 스크롤.
   세로 흐름(덤프 y): 제목 38~98 → 연락처 130 → input 163(36) → 문의 유형 218 → 체크 257/263
   → 내용 316 → textarea 351(107) → 버튼 488(51) → note 559(2행) → 운영시간 616 → 하단 663.
   ════════════════════════════════════════════════════════════ */
.fx-enq-modal{
  --enq-bottom:calc(clamp(16px,4.7vw,93px) + clamp(64px,4.85vw,96px) + 22px);  /* FAB bottom + FAB h + 22 */
  position:fixed; right:clamp(16px,4.9vw,97px); bottom:var(--enq-bottom);
  width:447px; max-width:calc(100vw - 32px); box-sizing:border-box;
  max-height:calc(100vh - var(--enq-bottom) - 16px); overflow:auto;
  background:#fff; border-radius:20px; box-shadow:0 0 30px 1px rgba(0,0,0,.25);
  color:var(--fx-ink); z-index:65; text-align:left;
}
.fx-enq-modal[hidden]{ display:none; }
/* 닫기 X(824:3785): 19px 라인 2개 ±45° #005656, 중심 우 18 / 상 27 → 36x36 히트영역 right 0 / top 9 */
.fx-enq-modal__close{
  position:absolute; top:9px; right:0; width:36px; height:36px; margin:0; padding:0;
  background:none; border:0; cursor:pointer; z-index:1;
}
.fx-enq-modal__close::before,.fx-enq-modal__close::after{
  content:""; position:absolute; left:50%; top:50%; width:19px; height:1.5px; margin:-1px 0 0 -9.5px;
  background:var(--fx-ink); transform:rotate(45deg);
}
.fx-enq-modal__close::after{ transform:rotate(-45deg); }
.fx-enq-modal__close:focus-visible{ outline:2px solid var(--fx-ink); outline-offset:-4px; border-radius:8px; }
/* ── 폼 상태(824:3895) ── */
.fx-enq-modal__form{ margin:0; padding:38px 24px 27px 40px; }   /* 좌 40(input/버튼 x40), 우 24(textarea 42+381=423 → 447-423) */
.fx-enq-modal__title{ font-family:var(--fx-display); font-weight:800; font-size:20px; line-height:30px;
  margin:0 0 0 -1px; letter-spacing:0; color:var(--fx-ink); }   /* 전역 h2 색 무시 */                 /* 810:2403 @(39,38) */
.fx-enq-modal__label{ display:block; margin:0; padding:0; font-weight:800; font-size:16px; line-height:30px; color:var(--fx-ink); }
.fx-enq-modal__label--phone{ margin-top:32px; }        /* 98 → 130 */
.fx-enq-modal__input,.fx-enq-modal__textarea{
  display:block; box-sizing:border-box; background:rgba(0,86,86,.08); border:0; border-radius:5px;
  color:var(--fx-ink); font:inherit; font-size:14px; padding:0 12px;
}
.fx-enq-modal__input{ width:369px; max-width:100%; height:36px; margin-top:3px; }   /* 810:2404 (40,163) 369x36 */
.fx-enq-modal__input:focus,.fx-enq-modal__textarea:focus{ outline:2px solid rgba(0,86,86,.35); outline-offset:0; }
.fx-enq-modal__cats{ margin:19px 0 0; padding:0; border:0; min-width:0; }           /* 199 → 218 */
.fx-enq-modal__catrow{ position:relative; height:30px; margin-top:9px; }           /* 248 → 257 */
/* 체크 4종(814:2431): 박스 x40/129/258/350 → 모달 padding 40 기준 0/89/218/310, 라벨 = 박스+25 */
.fx-enq-modal__cat{ position:absolute; top:0; display:inline-flex; align-items:center; height:30px; color:var(--fx-ink);
  cursor:pointer; white-space:nowrap; font-size:13px; line-height:30px; font-weight:400; }
.fx-enq-modal__cat:nth-child(1){ left:0; }
.fx-enq-modal__cat:nth-child(2){ left:89px; }
.fx-enq-modal__cat:nth-child(3){ left:218px; }
.fx-enq-modal__cat:nth-child(4){ left:310px; }
.fx-enq-modal__cat input{ appearance:none; -webkit-appearance:none; width:18px; height:18px; margin:0 7px 0 0;
  flex:none; background:#e5eeee; border:0; border-radius:5px; cursor:pointer; }
/* 체크 상태 디자인은 Figma 에 없음 → 최소 표시(#005656 채움 + 흰 체크) */
.fx-enq-modal__cat input:checked{ background:var(--fx-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' d='M4 12l6 6L20 6'/%3E%3C/svg%3E") center/12px 12px no-repeat; }
.fx-enq-modal__cat input:focus-visible{ outline:2px solid var(--fx-ink); outline-offset:1px; }
.fx-enq-modal__label--content{ margin-top:29px; }      /* 287 → 316 */
.fx-enq-modal__textarea{ width:381px; max-width:100%; height:107px; margin:5px 0 0 2px; padding:8px 12px; resize:none; } /* 810:2417 (42,351) */
/* 버튼 810:2427 (40,488) 381x51 r10 #002323, 라벨 EB 16 흰색 */
.fx-enq-modal__submit{ display:block; width:381px; max-width:100%; height:51px; margin:30px 0 0;
  background:var(--fx-teal); border:0; border-radius:10px; color:#fff; font:inherit; font-weight:800;
  font-size:16px; line-height:30px; cursor:pointer; transition:background .15s,color .15s; }
.fx-enq-modal__submit:hover{ background:var(--fx-ink); }
/* #124 가드 재사용: 필수값 미완성 비활성 — Figma 648:251(흰 배경, 테두리·텍스트 #d3d3d3) */
.fx-enq-modal__submit:disabled{ background:#fff; box-shadow:inset 0 0 0 1px #d3d3d3; color:#d3d3d3; cursor:not-allowed; }
.fx-enq-modal__msg{ margin:8px 0 0; text-align:center; color:#b3261e; font-size:13px; line-height:18px; }
/* note 815:2432: R 14/20 50%, 중앙 x232 → 폭 384(40+192=232) 안 중앙정렬 */
.fx-enq-modal__note{ width:384px; max-width:100%; margin:20px 0 0; text-align:center; opacity:.5; color:var(--fx-ink);
  font-size:14px; line-height:20px; }
.fx-enq-modal__hours{ width:384px; max-width:100%; margin:17px 0 0; display:flex; flex-wrap:wrap; justify-content:center;
  gap:0 8px; opacity:.5; font-size:12px; line-height:20px; color:var(--fx-ink); }
/* ── 완료 상태(824:3931): 같은 박스, 중앙 블록 y214/239/294/332 ── */
.fx-enq-modal__done{ min-height:663px; box-sizing:border-box; padding:214px 40px 0; text-align:center; }
.fx-enq-modal__done[hidden]{ display:none; }
.fx-enq-modal__done p{ margin:0; color:var(--fx-ink); }
.fx-enq-modal__done-label{ opacity:.5; font-size:14px; line-height:20px; }
.fx-enq-modal__done-phone{ margin-top:5px !important; font-weight:800; font-size:20px; line-height:30px; }  /* 234 → 239 */
.fx-enq-modal__done-title{ margin-top:25px !important; font-family:var(--fx-display); font-weight:800;
  font-size:20px; line-height:30px; }                                                        /* 269 → 294 */
.fx-enq-modal__done-sub{ margin-top:8px !important; opacity:.5; font-size:14px; line-height:20px; }      /* 324 → 332 */
@media print{ .fx-enq-modal{ display:none; } }

/* ── #148 스크린리더 전용(시각 숨김) — 연락처 자동 하이픈 힌트(PC/모바일 공용) ── */
.fx-sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ═══════════ #169 둘러보기(VR) — Figma 627:30 「병원안내 -> 둘러보기」 ═══════════
   1980 프레임 실측: 라벨 y364 / 헤딩 y403~551(Challan EB 48, 2행) / 「VR로 둘러보기」 y648~698(EB 32/50)
   / VR 영역 y739~1510 = x0~1980 풀블리드 1980x771(2.568:1).
   헤드 블록은 공용 .fx-subpage/.fx-label/.fx-heading 재사용(오시는 길과 동일 패턴), 아래 규칙은 .fx-tour 스코프 전용. */
.fx-tour .fx-subpage__head{ margin-bottom:clamp(40px,5.15vw,102px); }
/* 헤딩 박스(403~551, leading 74) ↔ VR 제목 박스(648~698, leading 50) 사이 Figma 실측 여백 = 글리프 기준 119.
   .fx-heading 는 line-height 1.35(=64.8) 이므로 리딩 차이를 보정해 CSS 마진은 102px(1980 기준 5.15vw). */
.fx-tour .fx-heading{ margin-bottom:0; }
/* 875:40 — Kakao Big Sans ExtraBold 32/50 은 미반입 폰트 → 프로젝트 공용 --fx-display 800 으로 통일 */
.fx-tour__vrtitle{ font-family:var(--fx-display); font-weight:800; color:var(--fx-ink);
  font-size:clamp(20px,1.62vw,32px); line-height:1.5625; margin:0 0 clamp(20px,2.07vw,41px); }
/* 818:3152 — 랩(1180) 이 아니라 프레임 전폭. 섹션에 좌우 패딩이 없으므로 그대로 100% 가 풀블리드 */
.fx-tour__frame{ position:relative; width:100%; aspect-ratio:1980 / 771; background:var(--fx-teal); overflow:hidden; }
.fx-tour__vr{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
/* 좁은 화면에서는 2.568:1 이 지나치게 납작해 VR 조작이 어렵다 → 4:3 으로 완화 */
@media (max-width:900px){
  .fx-tour__frame{ aspect-ratio:4 / 3; }
}

/* ════════════════════════════════════════════════════════════
   #176 오시는 길 — 카카오 지도 iframe(map.kakao.com/link/map 핀 URL, 키 불필요)
   창은 Figma 245:2609(1180 x 621, .fx-loc__mapimg). 카카오맵 데스크톱 레이아웃의 좌측 검색패널은
   폭 390px 고정이므로 iframe 을 390px 넓히고 왼쪽으로 390px 밀어 래퍼 overflow:hidden 으로 잘라낸다
   (슬롯이 vw 비례로 줄어도 패널 폭은 고정이라 픽셀 오프셋 유지). 아래 정적 이미지는 로드 전 바탕.
   ════════════════════════════════════════════════════════════ */
.fx-loc__kakaomap{ position:absolute; top:0; left:-390px; width:calc(100% + 390px); height:100%;
  border:0; display:block; }
.fx-loc__mapimg:focus-within{ outline:2px solid var(--fx-ink); outline-offset:3px; }

/* #183 강동철 한방원장 사진(doc-06)은 2x 원본(810x780) → Figma 903:150 마스크 405x390(@x1175, 카드폭 1180 중 34.32%)로 표시.
   doc-01~03 은 1x 원본이 Figma 크기와 같아 자연 크기 렌더(위 max-width 규칙 유지). */
.fx-doc__photo[src$="/doctors/doc-06.png"]{ width:min(34.32%,405px); max-width:none; }