/* 안중한의원 홈페이지 - 모바일 우선 반응형 스타일 */

@font-face {
  font-family: "Paperlogy";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Paperlogy";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Shilla_CultureB-Bold";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/Shilla_CultureB-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "BareunBatang";
  src: url("/assets/fonts/bareunbatang/BareunBatangOTFB.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #31584a;
  --color-primary-dark: #193c32;
  --color-primary-light: #ecf1ee;
  --color-accent: #31584a;   /* 2026-10-15 고침 42 흰 바탕 가: 갈색 강조를 짙은 초록으로(종전 #8e6840) */
  --color-text: #222622;
  --color-text-muted: #5d625e;
  --color-bg: #ffffff;   /* 2026-10-15 고침 42 흰 바탕 가(원장 10-14 23:05 「흰바탕 ㄱ」 · 10-15 00:52 「4가」). 종전 #f7f4ed */
  --color-bg-deep: #f4f5f4;
  /* 머리줄 띠 색은 두 판이다(원장 10-15 01:04 「3ㄱ」, 고르시기 전). 지금은 ㄱ 옅은 띠. ㄴ(쪽 바탕과 같은 흰색, 띠가 사라지고 아래 가는 줄만)으로 바꾸려면 아래 한 줄을 rgba(255, 255, 255, 0.97) 로 */
  --color-header-bg: rgba(244, 246, 245, 0.97);
  --color-surface: #ffffff;
  --color-border: #e2e5e3;
  --w-tint: #f4f5f4;   /* 흰 바탕 위 옅은 칸 */
  --w-ink: #193c32;
  --color-danger-bg: #fff4e8;
  --font-display: "Paperlogy", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Paperlogy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 104px;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --max-width: 1120px;
  --max-width-wide: 1320px;
  --header-h: 60px;
  --section-padding: 72px;
  /* 속 페이지 공통 틀 — 본문 층 (2026-09-21)
     레퍼런스 스무 곳 대비 우리 본문이 16px·한 줄 70자로 가장 긴 축이었다.
     한 줄을 32자로 묶고 본문을 17px로 올리고 제목 층을 벌린다. */
  --text-body: 1.0625rem;  /* 17px */
  --text-lead: 1.1875rem;  /* 19px */
  --text-h1: 1.75rem;      /* 28px — 390px 폭 */
  --text-h2: 1.3125rem;    /* 21px */
  --text-h3: 1.125rem;     /* 18px */
  --leading-body: 1.8;
  /* 뜻이 다른 셋이다. 섞어 쓰면 한쪽이 조용히 어긋난다.
     --measure      한 줄에 담을 **자수**. em 이라 글씨가 작은 자리는 폭도 같이 줄어 자수가 유지된다
     --measure-col  글 기둥의 **픽셀 폭**. 글씨 크기와 무관해야 하므로 rem 이다
     --measure-wide 사진처럼 글 밖으로 나가는 것이 설 수 있는 가장 넓은 폭 */
  --measure: 32em;         /* 본문 17px 에서 544px */
  --measure-col: 34rem;    /* 544px */
  --measure-wide: 54rem;   /* 864px */
  --measure-lead: 30em;
  /* ※ 1024px 부터는 아래 고침 16 묶음에서 --measure · --measure-col · --measure-lead 셋 다 100% 가 된다. 그 셋의 위 숫자는 1023px 까지의 값(--measure-wide 864px 는 그대로) */
  /* 글 기둥의 들여쓰기 — 담는 상자 가운데에 --measure-col 폭 기둥을 세울 때 왼쪽에 남는 폭.
     % 는 여기서 풀리지 않고 **이 값을 쓰는 자리의 담는 상자** 기준으로 풀린다. 쓰는 곳은 속 쪽 공통 틀.
     ⚠️ 안의 var(--measure-col) 은 :root 에서 풀려 굳는다 — --measure-col 은 :root 에서만 바꿀 것.
     어느 상자에서 국소로 바꾸면 요소 폭(max-width)만 따라가고 들여쓰기는 그대로 남아 축이 어긋난다. */
  --col-inset: max(0px, (100% - var(--measure-col)) / 2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 18px 48px rgba(25, 60, 50, 0.12);
  --transition-fast: 160ms ease;
  --transition-base: 320ms cubic-bezier(0.22, 1, 0.36, 1);
  font-size: 16px;
}

@media (min-width: 1024px) {
  :root {
    --text-h1: 2.375rem;   /* 38px — 본문 17px의 2.24배 */
    --text-h2: 1.5625rem;  /* 25px */
    --text-h3: 1.25rem;    /* 20px */
  }
}
/* 넓은 화면(1024px 부터)에서는 글 기둥을 쪽 폭까지 넓힌다 (2026-10-08 원장 지시 · 고침 16)
   「모니터로 볼 때는 내용들 폭이 너무 좁아」 · 「홈페이지 컨텐츠들 전부 다」. 가격표 · 본문 글 · 목록 · 안내 상자 · 머리 글 · 소식 글 본문이
   544px 기둥에 묶이지 않고 .container 안쪽 폭(화면 1120px 부터 1,064px)을 다 쓴다.
   폭 변수 셋을 100% 로 풀면 --col-inset 은 (100% - 100%) / 2 = 0 이 되어 글이 쪽 왼쪽 끝에서 시작해 오른쪽 끝까지 간다.
   9월 27일에 푼 문제(544px 글이 왼쪽에 붙어 오른쪽이 휑하던 것)는 되살아나지 않는다. 글 상자가 쪽 폭을 다 쓰기 때문이다.
   --measure-wide(사진이 설 수 있는 폭 864px)는 그대로 둔다. 소식 글의 사진은 제 크기대로 가운데 선다.
   1023px 까지(휴대폰 · 태블릿)는 이 묶음이 걸리지 않아 종전 그대로다. */
@media (min-width: 1024px) {
  :root {
    --measure: 100%;
    --measure-col: 100%;
    --measure-lead: 100%;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); overflow-x: clip; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4 { line-height: 1.35; margin: 0 0 0.6em; font-weight: 700; }
p { margin: 0 0 1em; color: var(--color-text-muted); }
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
.container-wide { max-width: var(--max-width-wide); margin: 0 auto; padding: 0 20px; }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fff;
  color: var(--color-primary-dark);
  font-weight: 700;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
:focus-visible { outline: 3px solid #b56a1c; outline-offset: 3px; }
/* 짙은 바탕(띠·바닥글)에서는 종전 밝은 색이 더 잘 보인다 — 짙은 바탕 구역을 새로 만들거나 되살리면(예: 사진 위 슬라이드쇼 단추) 여기에 더할 것 */
.cta-banner :focus-visible, footer.site-footer :focus-visible { outline-color: #d28a3f; }
body.nav-open { overflow: hidden; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
  height: var(--header-h);
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.brand-logo { height: 34px; width: auto; display: block; }
.header-actions { display: flex; align-items: center; gap: 6px; }
.header-booking .btn { min-height: 42px; padding: 9px 14px; font-size: 0.88rem; }
@media (min-width: 820px) { .brand-logo { height: 42px; } }

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 200;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-primary-dark);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  position: fixed;
  top: 0;
  right: 0;
  width: min(320px, 86vw);
  height: 100vh;
  background: var(--color-surface);
  padding: calc(var(--header-h) + 16px) 20px 32px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
}
.site-nav.open { transform: translateX(0); }
.nav-menu { display: flex; flex-direction: column; gap: 2px; }
.nav-menu > li { border-bottom: 1px solid var(--color-border); }
.nav-menu > li > a {
  display: block;
  padding: 14px 4px;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--color-text);
}
.has-sub { position: relative; }
.sub-toggle {
  position: absolute;
  right: 0;
  top: 4px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: transform 0.2s ease;
}
.sub-toggle[aria-expanded="true"] { transform: rotate(180deg); }
.sub-menu {
  max-height: 0;
  overflow: hidden;
  /* 접혀 있는 동안에는 Tab 순서에서도 빠져야 한다.
     max-height:0 만으로는 안 보이는 링크에 초점이 그대로 들어간다. */
  visibility: hidden;
  transition: max-height 0.25s ease;
}
.sub-menu.open {
  max-height: 1200px; /* 미용 클리닉 메뉴의 일곱 갈래를 다 펼치면 960px 쯤이다(시술 열넷) */
  visibility: visible;
}
.sub-menu li a,
.sub-menu li .fly-head {
  display: block;
  padding: 9px 4px 9px 14px;
  font-size: 0.94rem;
  color: var(--color-text-muted);
  border-left: 2px solid var(--color-border);
}
.sub-menu li a:hover,
.sub-menu li .fly-head:hover { color: var(--color-primary); border-left-color: var(--color-primary); }
/* 미용 클리닉 메뉴의 갈래 이름: 링크가 아니라 시술 이름을 펴는 단추다. 단추의 기본 꼴을 걷고 곁의 링크 줄과 같은 글꼴로 맞춘다 */
.sub-menu li .fly-head { width: 100%; margin: 0; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; background: none; font-family: inherit; font-weight: inherit; line-height: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }

.nav-cta { display: flex; gap: 8px; margin-top: 18px; }
.nav-cta .btn { flex: 1; text-align: center; padding: 12px 10px; font-size: 0.92rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 18px;
  min-height: 44px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-call { background: var(--color-accent); color: #fff; }
.btn-call:hover { background: var(--color-primary-dark); }
/* 보기 9-ㄱ — 짙은 초록 띠 위에서는 갈색 단추 상자가 묻히므로(구분 3 : 1 미만) 밝은 갈색 테두리를 두른다 */
.cta-banner .btn-call { border-color: rgba(255, 255, 255, 0.55); }
/* 쪽의 색을 따르는 띠 단추(안중 미백 클리닉 쪽의 감청. 고침 37): 색은 layout.mjs 의 ctaBanner 가 --cta-call 로 넘긴다 */
.cta-banner[style*="--cta-call"] .btn-call { background: var(--cta-call); border-color: rgba(255, 255, 255, 0.55); }
.cta-banner[style*="--cta-call"] .btn-call:hover { filter: brightness(0.88); } /* 올리면 짙게(밝게 하면 흰 글자 대비가 떨어진다. 2026-10-15 검토) */
.btn-outline { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-light); }
.btn-lg { padding: 14px 22px; font-size: 1.05rem; }
.btn-compact { min-height: 44px; width: auto; }

/* ---------- Hero ---------- */
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 18px; }
.hero-placeholder {
  margin: 24px auto 0;
  max-width: 420px;
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  background: repeating-linear-gradient(135deg, #eef2ef, #eef2ef 12px, #e5ebe6 12px, #e5ebe6 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  font-size: 0.85rem;
  padding: 20px;
  text-align: center;
  border: 1px dashed var(--color-border);
}

/* ---------- P1 Round 1: Hero ---------- */
.home-hero {
  position: relative;
  overflow: hidden;
  padding: 52px 0 0;
  background: var(--color-surface);
}
.home-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  display: none;
  width: 44%;
  height: 100%;
  background: var(--color-bg-deep);
}
.home-hero-grid {
  position: relative;
  display: grid;
  gap: var(--space-6);
}
.home-hero-copy { position: relative; z-index: 2; width: 100%; padding-bottom: var(--space-6); }
.home-hero h1 {
  max-width: 100%;
  margin-bottom: var(--space-4);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 12vw, 5.2rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  word-break: keep-all;
  text-wrap: balance;
}
.home-hero h1 span { white-space: nowrap; }
.home-hero-lead {
  max-width: 31em;
  margin-bottom: 0;
  color: #424943;
  font-size: 1.05rem;
  line-height: 1.8;
  word-break: keep-all;
}
.home-hero-lead span { display: block; }
.home-hero-lead span:last-child,
.home-hero-heritage {
  width: auto;
  text-align: left;
}
.home-hero-heritage {
  margin-bottom: var(--space-5);
  color: #049944;
  font-size: 1.48rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.home-hero-visual {
  position: relative;
  align-self: end;
  min-height: 330px;
  margin: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.home-hero-image-field {
  display: none;
}
.home-hero-visual img {
  position: relative;
  z-index: 1;
  width: min(100%, 600px);
  object-fit: contain;
  object-position: center bottom;
  mix-blend-mode: multiply;
}
.home-hero-visual figcaption {
  position: absolute;
  z-index: 2;
  right: 12px;
  bottom: 12px;
  padding: 5px 8px;
  background: rgba(25, 60, 50, 0.9);
  color: #fff;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* ---------- Trust bar ---------- */
.trust-bar { background: var(--color-primary-dark); color: #fff; }
.trust-bar-inner {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 4vw, 46px);
}
.trust-item { font-size: clamp(0.92rem, 2.5vw, 1.12rem); font-weight: 700; white-space: nowrap; }
.trust-divider { width: 1px; height: 18px; background: rgba(255, 255, 255, 0.38); }

/* ---------- Clinic domains ---------- */
.clinic-domains-section { padding: var(--section-padding) 0; background: var(--color-surface); }
.editorial-section-head { max-width: 700px; margin-bottom: var(--space-7); }
.editorial-section-head h2 {
  margin-bottom: var(--space-4);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 4.2rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
  word-break: keep-all;
}
.editorial-section-head > p:last-child { max-width: none; margin-bottom: 0; font-size: 1.02rem; line-height: 1.75; word-break: keep-all; }
.clinic-domains { display: grid; border-top: 1px solid var(--color-text); }
.clinic-domain {
  display: grid;
  grid-template-columns: minmax(112px, 38%) 1fr;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--color-border);
}
.clinic-domain-image { min-height: 184px; overflow: hidden; background: var(--color-bg-deep); }
.clinic-domain-image picture { width: 100%; height: 100%; display: block; }
.clinic-domain-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-base), filter var(--transition-base);
}
.clinic-domain:nth-child(1) .clinic-domain-image img { object-position: 54% center; }
.clinic-domain:nth-child(2) .clinic-domain-image img { object-position: center; }
.clinic-domain:nth-child(3) .clinic-domain-image img { object-position: center; }
.clinic-domain-copy { display: flex; flex-direction: column; min-width: 0; }
.clinic-domain-title { display: flex; align-items: baseline; gap: var(--space-3); }
.clinic-domain-character {
  color: var(--color-primary-dark);
  font-family: "BareunBatang", serif;
  font-weight: 700;
  font-size: clamp(3rem, 13vw, 5rem);
  line-height: 1;
}
.clinic-domain-title h3 { margin: 0; color: var(--color-text); font-size: 1.35rem; }
.clinic-domain-description { margin: var(--space-4) 0; line-height: 1.75; word-break: keep-all; text-wrap: pretty; }
.clinic-domain-description span { display: block; }
.clinic-domain-treatments { margin: auto 0 var(--space-3); color: var(--color-primary); font-size: 0.86rem; font-weight: 700; }
.clinic-domain-treatments ~ .clinic-domain-link { margin-top: 0; }
.clinic-domain-link {
  margin-top: auto;            /* 설명 길이와 무관하게 언제나 밑바닥 */
  color: var(--color-text);
  font-size: 0.9rem;
  font-weight: 700;
}
.clinic-domain:hover .clinic-domain-image img,
.clinic-domain:focus-visible .clinic-domain-image img { transform: scale(1.035); filter: saturate(0.9) contrast(1.03); }
.clinic-domain:hover .clinic-domain-link,
.clinic-domain:focus-visible .clinic-domain-link { color: var(--color-primary); }

/* ---------- Heritage story ---------- */
.heritage-section {
  padding: clamp(88px, 10vw, 144px) 0 clamp(48px, 6vw, 80px);
  background: var(--w-tint);
}
.heritage-section-head {
  max-width: 960px;
  margin-bottom: clamp(64px, 8vw, 112px);
}
.heritage-section-head h2 {
  max-width: 13em;
  margin-bottom: var(--space-5);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 7vw, 5rem);
  line-height: 1.12;
  letter-spacing: -0.05em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.heritage-section-head > p {
  max-width: 43em;
  margin: 0;
  color: #4e554f;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
  line-height: 1.85;
  word-break: keep-all;
}
.heritage-lines { display: inline; }
.heritage-lines-tablet,
.heritage-lines-desktop { display: none; }
.heritage-timeline {
  position: relative;
  margin: 0 0 0 10px;
  padding-left: 30px;
  border-left: 1px solid rgba(25, 60, 50, 0.32);
  list-style: none;
}
.heritage-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-bottom: clamp(72px, 12vw, 120px);
}
.heritage-entry:last-child { margin-bottom: 0; }
.heritage-marker {
  position: absolute;
  top: 4px;
  left: -39px;
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-primary-dark);
  border-radius: 50%;
  background: var(--w-tint);
}
.heritage-marker span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-primary-dark);
}
.heritage-media {
  order: 2;
  margin: 0;
}
.heritage-media img {
  width: 100%;
  display: block;
  background: var(--w-tint);
}
.heritage-media-cover img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.heritage-media-contain img {
  max-height: 620px;
  object-fit: contain;
  object-position: center bottom;
}
.heritage-entry-3 .heritage-media-contain img {
  width: min(75%, 451px);
  aspect-ratio: 1;
  max-height: none;
  margin-inline: auto;
  object-fit: contain;
  background: transparent;
}
.heritage-media figcaption {
  margin-top: 10px;
  color: #6b706b;
  font-size: 0.78rem;
  line-height: 1.5;
}
.heritage-copy { order: 1; }
.heritage-generation {
  margin-bottom: var(--space-3);
  color: #037b37;   /* 보기 9-ㄱ — 종전 #049944 */
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}
.heritage-copy h3 {
  max-width: 14em;
  margin-bottom: var(--space-4);
  color: var(--color-primary-dark);
  font-family: var(--font-display);
  font-size: clamp(2rem, 7vw, 3.2rem);
  line-height: 1.22;
  letter-spacing: -0.045em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.heritage-name {
  margin-bottom: var(--space-3);
  color: var(--color-text);
  font-size: 1.05rem;
  font-weight: 800;
}
.heritage-description {
  max-width: 34em;
  margin: 0;
  color: #535953;
  font-size: 1rem;
  line-height: 1.85;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.heritage-links {
  margin-top: clamp(72px, 10vw, 128px);
  display: grid;
  background: var(--color-primary-dark);
}
.heritage-links a {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 2rem);
  font-weight: 800;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.heritage-links a:last-child { border-bottom: 0; }
.heritage-links a:hover { background: rgba(255, 255, 255, 0.08); color: #8fd2a1; }
.heritage-links a:focus-visible {
  outline: 3px solid #fff;
  outline-offset: -6px;
}

@media (min-width: 760px) {
  .heritage-lines-mobile { display: none; }
  .heritage-lines-tablet { display: inline; }
  .heritage-timeline {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .heritage-timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(25, 60, 50, 0.32);
    transform: translateX(-0.5px);
  }
  .heritage-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
  }
  .heritage-media { grid-column: 1; grid-row: 1; order: initial; }
  .heritage-marker {
    position: relative;
    top: auto;
    left: auto;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }
  .heritage-copy { grid-column: 3; grid-row: 1; order: initial; padding-left: var(--space-4); }
  .heritage-entry:nth-child(even) .heritage-media { grid-column: 3; }
  .heritage-entry:nth-child(even) .heritage-copy { grid-column: 1; padding-right: var(--space-4); padding-left: 0; }
  .heritage-media-cover img { aspect-ratio: 5 / 4; }
  .heritage-media-contain img { max-height: 540px; }
  .heritage-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .heritage-links a { min-height: 112px; padding: clamp(24px, 4vw, 48px); }
  .heritage-links a:first-child { border-right: 1px solid rgba(255, 255, 255, 0.24); border-bottom: 0; }
}

@media (min-width: 760px) and (max-width: 1023px) {
  .heritage-copy h3 { font-size: 2.35rem; }
}

@media (min-width: 1024px) {
  .heritage-lines-tablet { display: none; }
  .heritage-lines-desktop { display: inline; }
  .heritage-section-head {
    max-width: none;
  }
  .heritage-section-head > p {
    max-width: none;
    font-size: clamp(0.88rem, 1.2vw, 1.08rem);
    letter-spacing: -0.02em;
    white-space: nowrap;
  }
  .heritage-entry {
    grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
    gap: var(--space-5);
  }
  .heritage-copy { padding-left: var(--space-4); }
  .heritage-entry:nth-child(even) .heritage-copy { padding-right: var(--space-4); }
  .heritage-description {
    font-size: clamp(1.4rem, 2.1vw, 1.875rem);
    line-height: 1.75;
    letter-spacing: -0.025em;
  }
}

.btn-outline-invert {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
}
.btn-outline-invert:hover { background: rgba(255, 255, 255, 0.12); }

.btn-icon { width: 20px; height: 20px; border-radius: 5px; object-fit: contain; }
.btn-naver { background: var(--color-primary-dark); color: #fff; }
.btn-naver:hover { background: var(--color-primary); }

@media (min-width: 760px) {
  :root { --section-padding: 96px; }
  .container, .container-wide { padding-left: 28px; padding-right: 28px; }
  .home-hero { padding-top: var(--space-8); }
  .home-hero-copy { max-width: 34rem; }
  .home-hero h1 { font-size: clamp(4.4rem, 10vw, 4.8rem); }
  .home-hero-lead { max-width: none; font-size: 1.76rem; }
  .home-hero-heritage { font-size: 2.45rem; }
  .home-hero-copy { padding-bottom: var(--space-7); }
  .home-hero-visual { min-height: 500px; }
  .home-hero-visual img { width: min(82%, 650px); }
  .home-hero-visual figcaption { right: 10%; bottom: 18px; }
  .editorial-section-head > p:last-child {
    font-size: clamp(0.78rem, 1.3vw, 1.02rem);
    letter-spacing: -0.025em;
    white-space: nowrap;
  }
}

@media (min-width: 1024px) {
  .home-hero { padding-top: 16px; }
  .home-hero::before { display: block; }
  .home-hero-grid { grid-template-columns: minmax(0, 1.18fr) minmax(430px, 0.82fr); align-items: center; gap: var(--space-7); }
  .home-hero-copy { align-self: center; max-width: 37.5rem; padding: var(--space-5) 0; }
  .home-hero h1 { font-size: clamp(4.75rem, 5.9vw, 5.5rem); white-space: nowrap; }
  .home-hero-lead { font-size: 1.94rem; }
  .home-hero-heritage { font-size: 2.65rem; }
  .home-hero-visual { min-height: 480px; }
  .home-hero-image-field {
    position: absolute;
    z-index: 0;
    top: -16px;
    left: 50%;
    display: block;
    width: min(145%, 690px);
    height: calc(100% + 16px);
    background: var(--color-bg-deep);
    transform: translateX(-50%);
  }
  .home-hero-visual img { width: min(145%, 690px); max-width: none; }
  .home-hero-visual figcaption { right: 0; }
  .clinic-domains { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--color-text); }
  .clinic-domain {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, 21vw) 1fr;
    gap: 0;
    padding: 0;
    border-bottom: 0;
    border-right: 1px solid var(--color-border);
  }
  .clinic-domain:first-child { border-left: 1px solid var(--color-border); }
  .clinic-domain-image { min-height: 0; }
  .clinic-domain-copy { min-height: 240px; padding: 22px 20px 20px; }
  .clinic-domain-title { gap: var(--space-5); }
  .clinic-domain-character { font-size: clamp(4.5rem, 7vw, 7rem); }
  .clinic-domain-title h3 { font-size: 3rem; letter-spacing: -0.045em; }
  .clinic-domain-description { font-size: 1.05rem; letter-spacing: -0.035em; }
}

@media (max-width: 1023px) {
  .clinic-domain { grid-template-columns: minmax(150px, 44%) minmax(0, 1fr); }
  .clinic-domain-title h3 { font-size: 2rem; letter-spacing: -0.045em; }
  .clinic-domain-description {
    margin: var(--space-3) 0;
    font-size: 1.02rem;
    line-height: 1.65;
    letter-spacing: -0.04em;
  }
  .clinic-domain-description span { display: block; }
}

@media (max-width: 759px) {
  .clinic-domain {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
  }
  .clinic-domain-image { min-height: 124px; }
  .clinic-domain-character { font-size: clamp(3.2rem, 15vw, 4.5rem); }
  .clinic-domain-title h3 { font-size: 1.65rem; }
  .clinic-domain-description {
    font-size: 0.9rem;          /* 14.4px — 11.5px 는 본문으로 너무 작았다 */
    line-height: 1.65;
    letter-spacing: -0.035em;
    overflow-wrap: break-word;  /* keep-all 이라 못 자르는 낱말이 넘치는 것만 막는다 */
  }
  .clinic-domain-link { font-size: 0.875rem; }
}

@media (max-width: 480px) {
  .home-hero { padding-top: 44px; }
  .home-hero h1 { font-size: clamp(2.65rem, 11.8vw, 2.95rem); }
  .home-hero-lead { font-size: 0.98rem; line-height: 1.78; }
}

@media (max-width: 350px) {
  .home-hero h1 span { display: block; }
}

/* ---------- Section ---------- */
.section { padding: 44px 0; }
.section-alt { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.section-head { text-align: center; margin-bottom: 28px; }
.section-head h2 { font-size: 1.5rem; color: var(--color-primary-dark); }
.section-head p { max-width: 40em; margin: 0 auto; }
.section-foot { text-align: center; margin-top: 26px; }

/* ---------- Cards grid ---------- */
.grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.category-card, .treatment-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.category-card:hover, .treatment-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.category-icon { font-size: 1.8rem; }
.category-card h3 { margin: 10px 0 8px; color: var(--color-primary-dark); }
.category-card p { word-break: keep-all; overflow-wrap: break-word; }
.treatment-card h4 { margin-bottom: 8px; color: var(--color-primary-dark); font-size: 1.05rem; }
.category-link, .treatment-link { color: var(--color-accent); font-weight: 700; font-size: 0.9rem; }

.treatment-card-short { padding: 0; overflow: hidden; }
.treatment-photo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  font-size: 2rem;
  background: linear-gradient(135deg, var(--color-primary-light), var(--w-tint));
  color: var(--color-primary-dark);
}
.treatment-card-short h4 { margin: 14px 20px 6px; font-size: 1rem; color: var(--color-primary-dark); }
.treatment-card-short p { margin: 0 20px 18px; font-size: 0.86rem; color: var(--color-text-muted); }

/* ---------- Doctors ---------- */
/* 카드 셋은 글 길이가 달라도 진료 요일 띠와 「학력 · 경력 더보기」 줄이 같은 높이에 서게, 소개 글 칸이 남는 높이를 맡는다(2026-10-15 고침 42. 원장 「두 번째 사진 카드 줄 정렬 예쁘게」) */
.doctor-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.doctor-card > p { flex: 1 0 auto; word-break: keep-all; }
/* 진료 요일 띠는 글이 두 줄로 접히는 폭(1024px 언저리)에서도 머리가 같은 높이에 서게 두 줄 높이를 잡아 둔다 */
.doctor-card .doctor-schedule { align-self: flex-start; word-break: keep-all; }
@media (min-width: 860px) and (max-width: 1099px) { .doctor-card .doctor-schedule { min-height: calc(2 * 1.6em + 12px); display: inline-flex; align-items: center; } }
.doctor-photo-placeholder {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 14px;
  overflow: hidden;
}
.doctor-photo-placeholder img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.doctor-gen { color: var(--color-accent); font-weight: 700; font-size: 0.85rem; }
.doctor-card h3 { margin: 4px 0 10px; }
.doctor-schedule {
  display: inline-block;
  margin-top: 6px;
  padding: 5px 12px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}
.doctor-detail summary { cursor: pointer; color: var(--color-primary); font-weight: 700; margin-top: 12px; }
.doctor-detail ul { margin: 10px 0; padding-left: 1.1em; list-style: disc; color: var(--color-text-muted); }
.doctor-detail li { margin-bottom: 4px; }
.paper-list { font-size: 0.86rem; color: var(--color-text-muted); }

/* ---------- 한의원 소개 슬라이드쇼 ---------- */
.home-slideshow {
  position: relative;
  margin: 0 0 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-primary-dark);
  touch-action: pan-y;
}
.slideshow-track {
  display: flex;
  transition: transform 0.45s ease;
}
.slide {
  position: relative;
  flex: 0 0 100%;
  aspect-ratio: 16/9;
}
.slide img { width: 100%; height: 100%; object-fit: cover; }
.slide-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 28px 18px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
  color: #fff;
  font-size: 0.9rem;
}
.slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slide-arrow:hover { background: rgba(0, 0, 0, 0.55); }
.slide-pause {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.48);
  color: #fff;
  cursor: pointer;
}
.slide-prev { left: 10px; }
.slide-next { right: 10px; }
.slide-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
}
.slide-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
}
.slide-dot.is-active { background: #fff; width: 20px; border-radius: 4px; }
@media (min-width: 640px) {
  .slide { aspect-ratio: 21/9; }
  .slide-caption { font-size: 1rem; }
}

/* ---------- Process steps ---------- */
.process-steps { display: grid; gap: 14px; grid-template-columns: 1fr; counter-reset: step; }
/* 640~1023 은 두 칸씩 두 줄, 1024 부터 네 칸 (2026-10-05) — 종전에는 640 부터 네 칸이라
   태블릿(768)에서 칸 속 글 폭이 134px, 한 줄 9자로 토막났다. 두 칸이면 768 에서 22자, 네 칸은 1024 에서 14자부터다. */
@media (min-width: 640px) { .process-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-steps { grid-template-columns: repeat(4, 1fr); } }
.process-step {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 18px 16px;
  text-align: left;
}
.process-step .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-weight: 800;
  font-size: 0.9rem;
  margin-bottom: 10px;
}
.process-step h4 { margin-bottom: 6px; font-size: 1rem; }
.process-step p { font-size: 0.88rem; margin: 0; }

/* ---------- FAQ ---------- */
.faq-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 4px 18px;
  margin-bottom: 10px;
}
.faq-item summary { cursor: pointer; list-style: none; padding: 14px 26px 14px 0; position: relative; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 12px;
  font-size: 1.3rem;
  color: var(--color-accent);
  font-weight: 700;
}
.faq-item[open] summary::after { content: "–"; }
.faq-q { display: inline; font-size: 1rem; color: var(--color-text); margin: 0; }
.faq-q::before { content: "Q. "; color: var(--color-primary); font-weight: 800; }
.faq-a { padding: 0 0 16px; color: var(--color-text-muted); }
.faq-a::before { content: "A. "; color: var(--color-accent); font-weight: 800; }

/* ---------- Table ---------- */
.table-scroll { overflow-x: auto; margin: 16px 0; border-radius: var(--radius); border: 1px solid var(--color-border); }
.data-table { width: 100%; border-collapse: collapse; min-width: 480px; font-size: 0.92rem; }
.data-table th, .data-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.data-table th { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 700; }
.data-table tr:last-child td { border-bottom: none; }

/* 가격표 — 회차 줄 목록 (2026-10-08 원장 지시 · 고침 13). 표가 아니라 목록이다: 시술 이름 → 구성 한 줄 → 줄마다 옅은 띠(왼쪽 회차, 오른쪽 값).
   글 기둥(--measure-col)에 세운다. 값 색 --color-primary 는 띠 바탕 --color-bg-deep 위에서 대비 6.5:1, 취소선 값 --color-text-muted 는 4.7:1.
   휴대폰(759px 까지)에서는 값이 회차 아랫줄 오른쪽으로 내려간다. 목록 안에서 가장 작은 글씨는 취소선 값 · 띠 안 구성 줄 · 부가세 한 줄의 14px(그 아래 ※ 문구 13.6px 은 종전부터의 예외. 좁은 화면에서 줄어드는 이름 아랫줄 · 띠 안 구성 줄은 아래 고침 17 의 예외).
   띠 안 구성 줄(.price-row-note, 고침 15)은 구성이 적힌 회차에서만 회차 글자 아래에 찍힌다(구성 글이 배열이면 한 줄씩 여러 줄. 고침 32 의 미백 10회). 색은 취소선 값과 같은 --color-text-muted(4.7:1).
   이름 아랫줄(.price-item-detail)과 띠 안 구성 줄은 화면 360px 부터 어느 폭에서나 한 줄이다(2026-10-08 원장 지시 · 고침 17). 좁은 화면에서는 그 두 갈래만 글씨가 줄어든다:
   .price-item 을 폭 기준 상자(container)로 삼아, 가장 긴 줄이 그 폭에 들어가는 크기를 cqi 로 셈한다. 같은 갈래의 줄은 쪽이 달라도 같은 크기다.
   나눗수 25.63 · 25.4 는 가장 긴 줄의 폭(크롬에서 Paperlogy 로 잰 24.50em · 24.26em)에 4.5% 남짓 여유를 둔 값이다(이름 아랫줄의 가장 긴 줄을 줄여 30 에서 내림 · 고침 20). 더 긴 줄을 넣으면 이 숫자도 올려야 한다(안 올리면 낱말 단위로 꺾인다).
   760px 부터는 띠가 가로 배치라 구성 줄이 값과 한 줄을 나눠 쓴다. 지금은 구성 줄이 있는 회차에 취소선 값이 없어 들어간다. 구성 줄이 있는 항목에 1회 줄(취소선 값)이 생기면 다시 재야 한다.
   이름 아랫줄은 item 폭 410px(화면 약 450px)부터 16px, 띠 안 구성 줄은 item 폭 388px(화면 약 428px)부터 14px 로 종전과 같다. 이 두 갈래만은 휴대폰 작은 글씨 14px 바닥(2026-10-05 검수 8)의 예외다: 화면 360px 에서 약 12.5px · 11.3px.
   cqi 를 모르는 브라우저는 둘째 font-size 를 버리고 종전 크기로 꺾인다. */
.price-list { margin-block: 8px 0; margin-inline-start: var(--col-inset); max-width: var(--measure-col); }
.price-list .price-group-title {
  margin: 28px 0 0;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--text-h3);
  line-height: 1.4;
}
.price-item { padding: 22px 0; border-bottom: 1px solid var(--color-border); container-type: inline-size; }
.price-item:last-child { border-bottom: none; padding-bottom: 8px; }
.price-list .price-item-name { margin: 0; font-size: 1.375rem; line-height: 1.4; color: var(--color-text); }
.price-item-detail { margin: 2px 0 0; font-size: 1rem; font-size: min(1rem, calc(100cqi / 25.63)); line-height: 1.6; color: var(--color-text-muted); word-break: keep-all; overflow-wrap: anywhere; }
.price-rows { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--color-bg-deep);
}
.price-row-label { font-size: 1.125rem; font-weight: 700; line-height: 1.5; color: var(--color-text); }
.price-row-head { flex: 1 1 auto; min-width: 0; }
.price-row-note { display: block; margin-top: 2px; font-size: 0.875rem; font-size: min(0.875rem, calc((100cqi - 32px) / 25.4)); line-height: 1.5; color: var(--color-text-muted); word-break: keep-all; overflow-wrap: anywhere; }
.price-row-values { display: flex; align-items: baseline; justify-content: flex-end; flex-wrap: wrap; gap: 0 10px; margin-inline-start: auto; }
.price-was { font-size: 0.875rem; color: var(--color-text-muted); text-decoration: line-through; white-space: nowrap; }
.price-now { font-size: 1.375rem; font-weight: 700; line-height: 1.4; color: var(--color-primary); white-space: nowrap; }
.block > .price-vat-note { margin-top: 4px; font-size: 0.875rem; color: var(--color-text-muted); }
/* 체험가 줄(고침 37): 회차 줄 위에 서는 한 줄. 「첫 시술 시」 알약 · 지운 정가 · 체험가. 대상 · 기간 · 조건은 가격표 아래 한 줄(.price-trial-note) */
.price-trial { background: var(--color-primary-light); }
.price-trial-tag { display: inline-block; margin-inline-end: 8px; padding: 1px 9px; border-radius: 999px; background: var(--color-primary); color: #fff; font-size: 0.875rem; font-weight: 700; line-height: 1.6; vertical-align: 2px; white-space: nowrap; }
.price-trial .price-row-label { word-break: keep-all; }
.price-trial-note { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.6; color: var(--color-text-muted); word-break: keep-all; }
.price-trial-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 819px) { .price-trial-note a { display: flex; align-items: center; min-height: 44px; width: fit-content; } }
@media (max-width: 759px) {
  .price-list .price-item-name { font-size: 1.25rem; }
  .price-row { flex-direction: column; align-items: stretch; }
}

/* ---------- Callout / legal notice ---------- */
.callout {
  background: var(--color-primary-light);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 0.92rem;
}
.callout p:last-child { margin-bottom: 0; }
/* 글 본문의 인용 상자는 줄바꿈을 그대로 살린다(옮겨 온 블로그 글의 인용이 여러 줄이다. 고침 37) */
.article-body .callout p { white-space: pre-line; }
.article-video { max-width: var(--measure); margin: 24px auto; aspect-ratio: 16 / 9; }
.article-video iframe { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius); }
.callout a { color: var(--color-primary-dark); font-weight: 700; text-decoration: underline; }
.confirm-needed { color: var(--color-accent); font-weight: 700; }

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: 0.85rem; color: var(--color-text-muted); padding: 14px 0 0; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.crumb-sep { margin: 0 6px; }

/* ---------- CTA banner ---------- */
.cta-banner { background: var(--color-primary-dark); color: #fff; padding: 34px 0; }
.cta-banner-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; text-align: center; }
.cta-banner-text { color: #eef4f1; font-size: 1.05rem; font-weight: 600; margin-bottom: 16px; }
.cta-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
/* 띠 안의 진료예약(네이버 예약으로 이어지는) 단추 (2026-10-05) — .btn-naver 의 바탕이 띠 바탕과 같은 색(--color-primary-dark)이라
   띠 안에서는 상자가 안 보이고 글자만 떴다. 띠 안에서만 밝은 바탕 + 짙은 초록 글자로 뒤집는다.
   머리줄·메뉴·진료시간 쪽의 .btn-naver 는 밝은 바탕 위라 그대로 둔다. */
.cta-banner .btn-naver { background: var(--color-surface); color: var(--color-primary-dark); }
.cta-banner .btn-naver:hover { background: var(--color-primary-light); }

/* ---------- Detail page blocks (속 페이지 공통 틀) ---------- */
/* 이 네 선택자(.detail-header / .detail-oneliner / .block / 목록)가 홈을 뺀
   모든 속 페이지의 공통 틀이다. 새 속 페이지는 subpageShell()(layout.mjs)로 찍는다. */
.detail-header { padding: 34px 0 10px; }
.detail-header h1 { font-size: var(--text-h1); color: var(--color-primary-dark); line-height: 1.3; }
.detail-oneliner { font-size: var(--text-lead); line-height: 1.7; max-width: var(--measure-lead); }
/* ↑ (숫자는 1023px 까지의 것. 1024px 부터는 고침 16 으로 부모도 이것도 100%) 2026-09-27 부터 이 max-width(570px)는 걸리지 않는다 — 부모 .detail-header 가 기둥 폭(544px)으로 묶여 더 좁다.
   --measure-lead 를 바꿔도 화면이 안 바뀌면 이 때문이다. */
.block { margin: 36px 0; }
.block h2 {
  font-size: var(--text-h2);
  color: var(--color-primary-dark);
  border-left: 4px solid var(--color-accent);
  padding-left: 12px;
  line-height: 1.35;
}
.block h3 { font-size: var(--text-h3); color: var(--color-primary-dark); margin-top: 24px; }
.block > p { font-size: var(--text-body); line-height: var(--leading-body); max-width: var(--measure); }
.check-list { padding-left: 1.2em; list-style: none; font-size: var(--text-body); max-width: var(--measure); }
.check-list li { position: relative; padding-left: 1.5em; margin-bottom: 10px; color: var(--color-text-muted); line-height: var(--leading-body); }
.check-list li::before { content: "✔"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }
.plain-list { padding-left: 1.2em; list-style: disc; color: var(--color-text-muted); font-size: var(--text-body); max-width: var(--measure); }
.plain-list li { margin-bottom: 8px; line-height: var(--leading-body); }
/* 공통 틀이 닿지 않던 자리 — 머리글 아래 문단, 안내 상자 */
.detail-header > p:not(.detail-oneliner) {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  max-width: var(--measure);
}
.callout { max-width: var(--measure); }
/* ※ 1024px 부터는 :root 의 고침 16 묶음이 폭 변수를 100% 로 풀어 들여쓰기 0 · 폭 전부가 된다. 이 주석부터 아래 규칙 묶음 둘의 주석까지는 1023px 까지의 모습이다.
   글 기둥을 쪽 가운데 축에 세운다 (2026-09-27 원장 지시 — 소식 글 쪽(9/22)과 같은 축)
   종전에는 .container 안쪽(1064px — 상한 1120px 에서 좌우 여백 28px 씩 뺀 폭) 안에서 글만 544px 로 묶여 왼쪽에 붙었고, 1440px 화면에서 오른쪽이 약 500px 비었다.
   글 요소마다 **왼쪽 가장자리를 기둥 왼쪽에**(--col-inset) 둔다. 요소마다 margin-inline:auto 로 가운데 세우지 않는
   까닭 — 안내 상자(471px)처럼 폭이 다른 요소는 왼쪽 가장자리가 제각각이 된다.
   넓은 칸(사진·사진 격자·진료 절차·자주 묻는 질문·표·지도·카드 격자)은 .container 폭 그대로 둔다.
   기둥도 넓은 칸도 .container 한가운데가 축이라 한 축에 선다.
   .container 안쪽 폭이 기둥보다 좁으면(화면 584px 미만) 들여쓰기가 0 이 되어 종전과 같다.
   그보다 조금 넓은 화면(584~759px)에서는 들여쓰기가 몇 px~수십 px 만 생긴다 — 소식 글 쪽도 같은 셈이라 맞춰 두었다.
   한 줄 길이는 넓히지 않았다 — 기둥 폭은 --measure-col 하나에서 온다. */

/* 폭이 묶여 있지 않던 것 — 묶지 않으면 기둥 왼쪽에서 시작해 오른쪽 끝까지 뻗어 축을 벗어난다.
   머리(.detail-header)를 묶으므로 한 줄 소개(--measure-lead 30em = 570px)도 544px 에 묶인다.
   단추 줄(.hero-actions)은 진료시간·오시는 길 칸 맨 아래 — 제목·문단과 같은 기둥에서 시작한다.
   단추 셋의 폭은 오시는 길 515px · 진료시간 397px(1440px 에서 잰 값)라 한 줄에 든다. 단추가 늘면 두 줄로 꺾인다.
   빵부스러기 — 소식 글 쪽은 .article-page > .breadcrumb 가 특이도로 이겨 제 규칙(가운데)대로 선다. */
.breadcrumb,
.detail-header,
.block > h2,
.block > h3,
.block > .info-list,
.block > .hero-actions {
  margin-inline-start: var(--col-inset);
  max-width: var(--measure-col);
}
/* 폭은 이미 --measure 로 묶여 있는 것 — 들여쓰기만 */
.block > p,
.block > .check-list,
.block > .plain-list,
.container > .callout,
.privacy-intro,
.privacy-article {
  margin-inline-start: var(--col-inset);
}

/* ---------- 안중 소식 — 목록 쪽 ---------- */
.news-search { margin: 8px 0 18px; }
.news-search-field { position: relative; max-width: 420px; }
.news-search-field input {
  width: 100%;
  font-family: inherit;
  font-size: var(--text-body);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 12px 44px 12px 18px;
}
.news-search-field input::placeholder { color: var(--color-text-muted); }
.news-search-field button {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-primary);
  font-size: 1.1rem;
  cursor: pointer;
}

.news-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 14px;
}
/* 찾기 칸과 분류 단추도 글 기둥 왼쪽에서 시작한다 (2026-09-27) — 제목만 기둥에 서고 이 둘이 왼쪽에 남으면
   한 쪽 머리에 시작점이 둘이 된다. 분류 단추 아래 구분선은 카드 격자 폭 그대로 두려고 margin 이 아닌 padding 으로 민다.
   (위 .news-search 의 margin 줄임꼴 · .news-tabs 의 padding 줄임꼴이 덮지 않도록 그 뒤에 둔다) */
.news-search { margin-inline-start: var(--col-inset); }
.news-tabs { padding-inline-start: var(--col-inset); }
.news-tab {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.news-tab:hover { color: var(--color-primary-dark); }
.news-tab[aria-pressed="true"] {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

/* 바둑판 — 넓은 화면 3열 · 태블릿 2열 · 휴대폰 1열 (2026-09-22 원장 지시)
   종전에는 한 줄에 가로로 긴 카드 하나였다. */
.news-list { display: grid; gap: 14px; grid-template-columns: 1fr; }
/* 640 — 1열 구간의 위끝. 여기까지 한 장씩 두면 759px 화면에서 카드 한 장이 560px 이 되어
   한 화면에 한 장 반밖에 안 들어온다(썸네일이 16:9 라 폭이 넓어지는 만큼 키도 자란다).
   1176 — 컨테이너가 상한(1120px)에 닿는 폭보다 56px 위. 1120~1175 를 2열로 남겨 카드가
   531px 로 넉넉히 선 뒤 3열(340px)로 넘어간다. 1176 위로는 컨테이너가 안 자라므로 340px 로 고정된다.
   1024(아이패드 가로)에서 3열로 가르면 카드가 313px 로 좁아져, 화면이 넓어졌는데 제목이 더 잘린다. */
@media (min-width: 640px) { .news-list { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1176px) { .news-list { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

/* 카드는 세로로 쌓는다 — 사진이 위, 글이 아래. 글칸이 남는 높이를 먹어 한 줄의 카드 키가 고르게 선다. */
.news-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.news-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); }
.news-card-thumb {
  display: block;
  flex: 0 0 auto;
  aspect-ratio: 16/9;
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
.news-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 사진이 없는 글 — 격자에서 빈 구멍처럼 보이지 않게 한의원 마크를 깔아 자리를 채운다 */
.news-card-thumb-blank { display: flex; align-items: center; justify-content: center; }
/* 로고는 투명 마크가 아니라 초록 색면 락업이다 — 옅게 깔면 흐린 띠로만 보이고 안의 흰 글자가 안 읽힌다.
   작게, 진하게 두어 「일부러 놓은 딱지」로 보이게 한다. */
.news-card-thumb-blank img { width: 46%; height: auto; opacity: 0.8; }
.news-card-text { display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 18px; }
.news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.news-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: 0.78rem;
  font-weight: 700;
}
.news-date { font-size: 0.82rem; color: var(--color-accent); font-weight: 700; }
/* 격자 칸이 좁아 제목·맛보기가 길면 카드 키가 들쭉날쭉해진다 — 줄 수로 묶는다(두 줄·세 줄).
   잘린 글은 눈에만 안 보일 뿐 검색은 data-news-text 를 훑으므로 걸러내기에는 영향이 없다. */
.news-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  margin: 0 0 8px;
  /* --text-h3 를 쓰지 않는다 — 그 토큰은 1024px 에서 18→20px 로 커지는데,
     격자 칸은 되레 좁아지는 구간이라 화면이 넓어질수록 제목이 더 잘렸다. */
  font-size: 1.125rem;   /* 18px 고정 */
  color: var(--color-text);
  line-height: 1.4;
}
.news-card-summary {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--color-text-muted);
}
.news-empty {
  margin: 0;
  padding: 44px 20px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-body);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}
.news-empty[hidden] { display: none; }
.news-card[hidden] { display: none; }
/* ---------- 안중 소식 — 글 한 편 쪽 ---------- */
/* ※ 1024px 부터는 :root 의 고침 16 묶음과 아래 1024px 규칙(.article max-width: none)이 글을 쪽 폭까지 넓힌다. 아래 설명은 1023px 까지의 모습이다.
   글 기둥을 쪽 가운데에 세운다 (2026-09-22 원장 지시)
   종전에는 본문만 544px로 묶여 왼쪽에 붙었고 1440px 화면에서 오른쪽이 휑하게 비었다.
   .article 자체를 글 폭으로 묶어 가운데 세우면 빵부스러기·제목·본문·사진·목록 단추가 한 축에 선다.
   한 줄 길이(544px)는 넓히지 않았다. */
.article-page > .breadcrumb { max-width: var(--measure-col); margin-inline: auto; }
/* (1023px 까지. 1024px 부터는 아래 고침 16) 바깥 상자는 「사진이 설 수 있는 폭」(864px)까지만 넓고, 그 안에서 글만 544px 로 다시 묶어 가운데 세운다.
   쪽이 좁아지면 상자가 통째로 줄고 사진도 따라 줄므로 **어느 화면 폭에서도 넘칠 자리가 없다.**
   (첫 판은 사진에 -158px·-80px 를 물려 밖으로 밀어냈는데, 그 값이 쪽 여백 28px·글 폭 544px·
    중단점 760px 셋에 묶여 있으면서 파일 안에 아무 연결이 없었다. 셋 중 하나만 바뀌면 조용히 잘렸다.) */
.article { padding-bottom: 8px; max-width: var(--measure-wide); margin-inline: auto; }
.article > :not(.article-body) { max-width: var(--measure-col); margin-inline: auto; }
.article-body > :not(.article-figure) { max-width: var(--measure-col); margin-inline: auto; }
/* 넓은 화면에서는 바깥 상자도 쪽 폭까지 (고침 16). 글은 위 변수로 넓어지고, 사진은 .article-figure 의 제 셈(864px 까지)대로 가운데 선다. */
@media (min-width: 1024px) { .article { max-width: none; } }
.article-header { padding: 30px 0 18px; border-bottom: 1px solid var(--color-border); margin-bottom: 26px; }
.article-header h1 {
  font-size: var(--text-h1);
  color: var(--color-primary-dark);
  line-height: 1.3;
  margin: 12px 0 0;
}
.article-body { font-size: var(--text-body); }
/* 아래 margin 들은 줄임꼴로 쓰지 않는다 — `margin: a 0 b` 는 좌우 여백까지 0 으로 밀어
   가운데 세우기(margin-inline:auto)와 우선순위 다툼을 벌인다. 세로만 건드린다. */
.article-body p {
  font-size: var(--text-body);
  line-height: var(--leading-body);
  margin-block: 0 1.35em;
}
.article-lines { color: var(--color-text); }
.article-body h2 {
  font-size: var(--text-h2);
  color: var(--color-primary-dark);
  margin-block: 1.8em 0.6em;
  line-height: 1.35;
}
.article-body ul { list-style: disc; padding-left: 1.2em; color: var(--color-text-muted); margin-block: 0 1.35em; }
.article-body li { font-size: var(--text-body); line-height: var(--leading-body); margin-bottom: 8px; }
/* 1023px 까지는 사진이 글 폭(544px)을 넘어 바깥 상자 폭(864px)까지 쓴다.
   1024px 부터는 글이 쪽 폭을 쓰고 사진만 864px 한도(--measure-wide)로 가운데 선다(고침 16). 그때 넘치지 않는 것은 ② 한도 864px 가 쪽 안쪽 폭(968px 이상)보다 좁아서다. ① 100% 는 화면 920px 아래에서만 걸린다.
   액자 폭은 **세 값 중 가장 작은 것**이다 —
     ① 쪽이 내주는 폭(100%)   ② 사진 한도 864px(--measure-wide)   ③ 키를 648px 로 묶었을 때의 폭
   ③ 이 정사각·세로로 긴 사진을 줄인다. 648 = 864 × 3/4 — **4:3 가로 사진이 딱 닿지 않는 값**이다.
   옮겨 온 사진 예순 장 중 4:3 계열이 열여섯인데, 뚜껑이 그보다 낮으면 평범한 가로 사진까지 걸린다.

   ③ 을 셈하려면 가로세로 비가 있어야 한다. build.mjs 가 원본 JPEG 머리에서 읽어
   `--figure-ratio` 로 넘긴다(한도 864·648 은 여기에만 있고 build.mjs 는 비만 넘긴다).
   비를 못 읽었으면 ③ 이 아주 커져 ② 가 이긴다.

   ④ 원본 폭(--figure-w). 사진을 제 크기보다 키우지 않는다 — 키우면 흐려질 뿐이다.
   build.mjs 는 원본에서 읽은 **사실**(비와 폭)만 넘기고, 한도 864·648 은 이 파일에만 있다.

   ⚠️ 액자 폭을 fit-content 에 맡기지 않는 까닭 — <img> 에 width·height 가 붙어 브라우저가
   내려받기 전에도 고유 치수를 알지만, 고유 폭에 퍼센트·min() 이 섞인 셈은 브라우저마다 갈린다.
   여기서 네 값으로 못박는 편이 어디서나 같다. */
.article-figure {
  width: min(
    100%,
    var(--measure-wide),
    calc(var(--measure-wide) * 3 / 4 * var(--figure-ratio, 999)),
    var(--figure-w, 100%)
  );
  margin: 28px auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}
/* 글자가 든 세로 안내 그림(content.mjs 의 tall: true)은 ③ 키 한도를 풀고 ①②④ 만 본다.
   ③ 에 묶이면 606×2269 그림이 173px 폭으로 줄어 글자가 안 읽힌다.
   ④ 에 2px 를 더하는 것은 액자 테두리(좌우 1px씩) 몫이다 — 안 더하면 그림이 원본보다 2px 좁게
   다시 그려져 글자 획이 무뎌진다. ①② 가 이기는 좁은 화면에서는 이 2px 가 쓰이지 않는다. */
.article-figure-tall {
  width: min(100%, var(--measure-wide), calc(var(--figure-w, 100%) + 2px));
}
/* 키는 <img> 의 width·height 속성이 만드는 가로세로 비가 정한다 — 그래서 찌그러지지 않는다. */
.article-figure img { display: block; width: 100%; height: auto; }
.article-figure figcaption {
  padding: 10px 14px;
  font-size: 0.87rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
}
.article-source {
  margin-block: 34px 0;
  padding: 14px 18px;
  background: var(--color-primary-light);
  border-radius: var(--radius);
  font-size: 0.92rem;
}
.article-source a { color: var(--color-primary-dark); font-weight: 700; text-decoration: underline; }
.article-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-block: 30px 10px;
  padding-top: 22px;
  border-top: 1px solid var(--color-border);
}
.article-back {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--color-primary);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.95rem;
}
.article-back:hover { background: var(--color-primary-light); }

/* ---------- 홈페이지 진료시간·오시는 길 패널 ---------- */
.hl-panel {
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: 26px 20px;
}
.hl-grid { display: grid; gap: 30px; grid-template-columns: 1fr; }
@media (min-width: 780px) {
  .hl-grid { grid-template-columns: 1.15fr 1fr; gap: 0; }
  .hl-col-hours { padding-right: 30px; border-right: 1px solid rgba(47, 93, 79, 0.18); }
  .hl-col-location { padding-left: 30px; }
}
.hl-col h3 { color: var(--color-primary-dark); font-size: 1.1rem; margin-bottom: 14px; }
/* 대문의 진료시간 칸: 진료시간 쪽과 같은 요일 · 시각 표(visit.css 의 .hv-*)를 칸 폭에 맞춰 줄인 것(2026-10-15 고침 42. 옛 진료시간 표 그림 open-time.webp 를 갈음) */
.hl-hours-board .hv-group { grid-template-columns: 112px 1fr; padding: 14px 0; }
.hl-hours-board .hv-days { font-size: 1rem; padding-left: 14px; }
.hl-hours-board .hv-time { font-size: 1.02rem; }
.hl-hours-board .hv-row { font-size: 0.95rem; padding-top: 6px; }

.transit-block { margin-bottom: 18px; }
.transit-block h4 { font-size: 0.92rem; color: var(--color-primary-dark); margin-bottom: 6px; }
.transit-block p { margin: 0; font-size: 0.88rem; }
.route-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.route-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.naver-map {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  overflow: hidden;
  background: var(--color-primary-light);
}
.naver-map-mini { margin-bottom: 16px; }
@media (min-width: 640px) {
  .naver-map:not(.naver-map-mini) { aspect-ratio: 16/7; }
}
.parking-bar {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(47, 93, 79, 0.18);
  font-size: 0.88rem;
}
.parking-bar strong { color: var(--color-primary-dark); }
/* 글이 길어져도 60자쯤에서 꺾이게 글만 묶는다(위의 가로 금은 칸 폭 그대로). 지금 글(57자 · 약 39.7em)은 한 줄 그대로다(대체 글꼴이 조금 넓어도 한 줄이게 여유를 둠) */
.parking-text { display: inline-block; max-width: 44em; vertical-align: top; }

/* ---------- 사진 (노션 원천자료 이미지) ---------- */
.single-photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border);
}
.single-photo img { width: 100%; height: auto; display: block; }

/* ---------- Info list (location/hours) ---------- */
.info-list { display: grid; gap: 10px; }
.info-row { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.info-row .label { flex: 0 0 84px; font-weight: 700; color: var(--color-primary-dark); }
.info-row .value { color: var(--color-text-muted); }
.map-placeholder {
  aspect-ratio: 16/9;
  border-radius: var(--radius);
  border: 1px dashed var(--color-border);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary-dark);
  font-size: 0.9rem;
  text-align: center;
  padding: 20px;
}

/* ---------- Privacy ---------- */
.privacy-article { margin-bottom: 30px; max-width: var(--measure); }
.privacy-article h2 { font-size: var(--text-h3); color: var(--color-primary-dark); line-height: 1.4; }
.privacy-article p { font-size: var(--text-body); line-height: var(--leading-body); }
.privacy-intro { font-size: var(--text-body); line-height: var(--leading-body); max-width: var(--measure); }

footer.site-footer {
  background: var(--color-primary-dark);
  color: #cfe0d8;
  padding: 34px 0;
  margin-top: 40px;
}
/* 쪽이 초록 띠(.cta-banner)로 끝나면 바닥글을 띠에 바로 붙인다 (2026-10-05) — 같은 초록 둘 사이에
   크림색 틈 40px 이 끼어 있었다. 띠 없이 끝나는 쪽(개인정보처리방침)에서는 바닥글의 위 여백을 아래 「쪽 끝 여백」이 정한다.
   :has() 를 모르는 옛 브라우저에서는 종전처럼 틈이 남을 뿐 깨지지 않는다. */
main:has(> .cta-banner:last-child) + footer.site-footer { margin-top: 0; }
/* 쪽 끝 여백 (2026-10-08, 고침 18) — 쪽의 마지막 내용과 그 아래 진한 녹색 띠(상담 띠 .cta-banner,
   띠가 없는 쪽은 바닥글) 사이를 칸 사이 간격(--section-padding: 72px, 760px 부터 96px)만큼 띄운다.
   띠의 위 바깥 여백으로 주므로 마지막 내용의 아래 바깥 여백(.block 36px 등)과는 겹쳐져 더해지지 않는다.
   아래 안쪽 여백을 따로 가진 끝 칸(홈의 .section 44px · 소식 글 .article 8px)은 그 여백을 걷어 같은 값으로 맞춘다.
   띠가 없는 쪽(개인정보처리방침)은 바닥글의 위 여백을 같은 값으로 올린다.
   :has() 를 모르는 옛 브라우저에서는 개인정보 쪽이 종전 40px, 홈이 44px 더 벌어질 뿐 깨지지 않는다.
   통증 클리닉 쪽(.pm-section · .pb-section)은 끝 칸이 제 안쪽 여백으로 띠와 떨어지므로 띠 여백을 주지 않고,
   그 안쪽 여백을 같은 값으로 맞춘다(파일 맨 아래 「쪽 끝 여백」). */
main > .cta-banner:last-child { margin-top: var(--section-padding); }
main > .pm-section:nth-last-child(2) + .cta-banner,
main > .pb-section:nth-last-child(2) + .cta-banner { margin-top: 0; }
main > .section:nth-last-child(2):has(+ .cta-banner) { padding-bottom: 0; }
main > .article-page:nth-last-child(2) > .article:last-child { padding-bottom: 0; }
main:not(:has(> .cta-banner:last-child)) + footer.site-footer { margin-top: var(--section-padding); }
.footer-inner { max-width: var(--max-width); margin: 0 auto; padding: 0 20px; }
/* 맨 아래 칸의 세 칸(고침 37. 2026-10-12 원장 지시): 한의원 정보 · 진료시간 · 약도. 넓은 화면은 한 줄, 좁은 화면은 위에서 아래로.
   휴대폰에서는 약도를 접어 두고 단추를 누르면 편다(2026-10-13 원장 「1ㄴ」. 고침 40). 스크립트가 돌기 전에는 단추가 없고 약도가 펴져 있다 */
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 26px 44px; align-items: start; margin-bottom: 18px; }
@media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.9fr) 320px; } }
.footer-head { margin: 0 0 10px; color: #fff; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; }
.footer-hours { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; border-top: 1px solid rgba(207, 224, 216, 0.28); }
.footer-hours li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid rgba(207, 224, 216, 0.28); }
.footer-hours b { color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.footer-hours-note { margin: 8px 0 0; font-size: 0.875rem; color: #9db6ac; }
.footer-map a { display: block; max-width: 320px; border-radius: 10px; }
.footer-map img { display: block; width: 100%; height: auto; border-radius: 10px; }
.footer-map-toggle { display: none; }
@media (max-width: 899px) { .footer-map a { max-width: 220px; } }
@media (max-width: 819px) {
  .footer-map-toggle:not([hidden]) { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em; cursor: pointer; }
  .footer-map-toggle::after { content: ""; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
  .footer-map-toggle[aria-expanded="true"]::after { margin-top: 4px; transform: rotate(-135deg); }
  .footer-map.is-fold .footer-head { display: none; }
  .footer-map.is-fold .footer-map-toggle[aria-expanded="false"] + a { display: none; }
  .footer-map.is-fold .footer-map-toggle[aria-expanded="true"] + a { margin-top: 6px; }
}
/* 오시는 길 쪽의 큰 약도 */
.loc-sketch { margin: 0 0 20px; max-width: 360px; }
.loc-sketch img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--color-border); }
.footer-clinic { color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: 10px; }
.footer-info { font-size: 0.86rem; margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
.footer-info a { color: #cfe0d8; text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.86rem; margin-bottom: 14px; }
.footer-links a:hover { color: #fff; }
.footer-copy { font-size: 0.78rem; color: #9db6ac; }

/* 휴대폰 아래 붙박이 예약 띠(layout.mjs 의 mobileBookBar). 폭 767px 이하의 모든 쪽에 선다(고침 41. 전에는 시술 쪽에만 있던 띠를 크기 · 색 그대로 옮김). 글꼴은 그 쪽의 글꼴을 따른다(시술 쪽만 Pretendard. proc/frame.css).
   메뉴 서랍(z 200)보다 아래에 둔다. 쪽 끝 글과 바닥글이 띠에 가리지 않게 body 아래에 띠 높이만큼 비운다 */
.mo-book-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: calc(70px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); box-sizing: border-box; background: var(--color-primary); z-index: 100; }
.mo-book-bar a { flex: 1; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; font-size: 16px; font-weight: 700; }
.mo-book-bar a:first-child { background: var(--color-primary-dark); border-right: 1px solid rgba(255, 255, 255, 0.1); }
.mo-book-bar :focus-visible { outline-color: #d28a3f; outline-offset: -4px; }
@media (max-width: 767px) {
  .mo-book-bar { display: flex; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } /* 자판으로 옮겨 간 고리가 띠 밑에 깔리지 않게 */
  body.nav-open .mo-book-bar { display: none; } /* 메뉴 서랍을 연 동안은 서랍 옆으로 드러난 띠가 눌리지 않게 숨긴다 */
}
@media print { .mo-book-bar { display: none; } }

/* ---------- Desktop nav ---------- */
@media (min-width: 820px) {
  :root { --header-h: 68px; }
  .header-inner { padding: 0 20px; }
  .header-actions { display: none; }
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    background: none; /* 서랍 바탕(#ffffff)이 남으면 머리줄 안에서 메뉴 자리만 흰 네모로 보인다 */
    box-shadow: none;
    overflow: visible; /* 모바일 드로어용 overflow-y:auto가 desktop에서 서브메뉴를 잘라내던 원인 */
    display: flex;
    align-items: center;
    gap: 20px;
    transform: none;
  }
  .nav-menu { flex-direction: row; align-items: center; gap: 4px; }
  .nav-menu > li { border-bottom: none; }
  .nav-menu > li > a { padding: 10px 12px; font-size: 0.95rem; border-radius: 8px; }
  .nav-menu > li > a:hover { background: var(--color-primary-light); }
  .has-sub { position: relative; }
  .sub-toggle { display: none; }

  /* 서브메뉴: 문서 흐름에서 완전히 빼내는 오버레이. display를 토글하지 않고
     opacity/visibility로만 열고 닫아서, 어떤 경우에도 페이지 콘텐츠를 밀어내지 않는다. */
  .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    max-height: none;
    overflow: visible;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    min-width: 220px;
    padding: 8px;
    z-index: 9999; /* 헤더·히어로 등 페이지의 다른 모든 요소보다 확실히 위 */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    /* 닫힐 때는 빠르게(100ms) — 다른 메인 메뉴로 옮겨갈 때 이전 서브메뉴가 남아 겹쳐 보이지 않도록 */
    transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s;
  }
  /* 모바일에서 쓰던 .open 이 남은 채 데스크톱 폭으로 넘어와도
     오버레이 규칙을 따르게 한다. 이것이 없으면 안 보이는 채로
     Tab 순서에만 남는다(모바일 기본값 .sub-menu.open 이 더 세다). */
  .sub-menu.open {
    max-height: none;
    visibility: hidden;
    transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s;
  }
  .has-sub.open .sub-menu,
  .has-sub:focus-within .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    /* 열릴 때는 조금 더 자연스럽게(180ms) */
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  }
  /* 메뉴~서브메뉴 사이 여백을 마우스가 지나갈 수 있는 보이지 않는 히트 영역으로 이어붙임 */
  .has-sub::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
  }
  .sub-menu li a, .sub-menu li .fly-head { border-left: none; border-radius: 6px; padding: 9px 12px; }
  .sub-menu li a:hover, .sub-menu li .fly-head:hover { background: var(--color-primary-light); }
  .nav-cta { margin-top: 0; }
}

@media (max-width: 819px) {
  .site-nav { visibility: hidden; pointer-events: none; }
  .site-nav.open { visibility: visible; pointer-events: auto; }
  /* 모바일 드로어의 예약 CTA 단추(지금은 진료예약 하나)를 서랍 폭에 꽉 채운다 */
  .nav-cta { flex-direction: column; }
  .nav-cta .btn { width: 100%; }
}

/* ---------- 휴대폰 · 태블릿에서 누를 자리 44px (2026-10-05) ----------
   글씨 크기는 그대로 두고 누를 자리의 높이만 44px 이상으로 키운다.
   처음에는 759px 까지(휴대폰)만 걸었다가 같은 날 원장 지시로 1023px 까지(세워 든 태블릿 768 · 820 · 834)로 넓혔다.
   1024px 부터(노트북 — 이 파일이 「노트북부터」로 쓰는 문턱)는 종전 그대로다. 눕혀 든 태블릿(폭 1024px 이상)도 여기서 빠진다.
   태블릿(760~1023px)에서 딸려 달라지는 자리(768px 실측) — 의료진 더보기 아래가 10px 내려가고, 소식 탭 줄이 6px 높아지며,
   바닥글은 링크 줄 위아래 여백을 링크 상자가 맡아 6px 짧아진다. 휴대폰에서 이미 그렇게 보이던 것과 같다.
   머리줄 진료예약(.header-booking)은 820px 부터 화면에서 빠지므로 실제로는 819px 까지만 먹는다. */
@media (max-width: 1023px) {
  /* 머리줄 진료예약 — 43px 이었다 */
  .header-booking .btn { min-height: 44px; }
  /* 맨 위 길 안내 · 오시는 길 전화번호 — 글줄 속 링크라 안쪽 여백으로 누를 자리를 키운다.
     inline 상자의 위아래 여백은 줄 높이를 바꾸지 않아 글자 자리는 그대로고 누를 자리만 커진다.
     inline 상자의 키는 글꼴마다 조금 달라(Paperlogy 13.6px 에서 16px — 검수 8 로 휴대폰에서 14px 이 된 뒤로는 17px. 태블릿은 13.6px 그대로라 16px), 대체 글꼴로 그려져도 44px 을 넘도록 여유를 둔다.
     좌우도 8px 씩 넓히되 같은 만큼 음수 margin 으로 되돌려 글자 자리를 지킨다(길 안내의 「홈」이 폭 12px 이었다.
     전화번호는 안쪽으로 당긴 초점 테두리가 숫자 위에 그려지지 않게 하려는 것이다).
     8px 인 까닭 — 링크 사이 구분표 자리가 17px 쯤이라 그보다 넓히면 앞뒤 링크의 누를 자리가 겹친다.
     초점 테두리는 둘 다 안쪽으로 당긴다 — 넓어진 상자 밖에 그리면 길 안내는 구분표를 덮고 윗변이 머리줄 밑에 가리며,
     전화번호는 줄 아래 경계선을 덮는다. */
  .breadcrumb a { padding: 15px 8px; margin: 0 -8px; }
  .breadcrumb a:focus-visible { outline-offset: -4px; }
  .info-row .value a[href^="tel:"] { padding: 14px 8px; margin: 0 -8px; }
  .info-row .value a[href^="tel:"]:focus-visible { outline-offset: -4px; }
  /* 의료진 학력·경력 더보기 — 한 줄 25.6px 이었다. 위 여백 12px 가운데 10px 을 안쪽 여백으로 옮겨
     「더보기」 글자 자리는 그대로고, 아래 안쪽 여백 10px 만큼 그 아래(카드 끝 · 펼친 목록)가 내려간다.
     (글자 자리가 그대로인 것은 바로 앞이 진료 요일 띠 .doctor-schedule 일 때다 — 지금 더보기가 있는 두 분이 다 그렇다.
      앞이 문단 <p> 이면 그 아래 여백 16px 과 겹치던 것이 풀려 글자가 10px 내려간다) */
  .doctor-detail summary { margin-top: 2px; padding: 10px 0; }
  /* 안중 소식 분류 단추 · 찾기 단추 — 38px 이었다 */
  .news-tab { min-height: 44px; }
  .news-search-field input { padding-right: 50px; }
  .news-search-field button { width: 44px; height: 44px; right: 2px; }
  /* 바닥글 링크 셋 — 16px 이었다. 줄 사이 14px 과 위아래 margin 14px 을 걷고 그만큼을 44px 링크 상자가 맡는다.
     링크 셋은 390px 에서 한 줄에 선다(실측 — 검수 8 로 14px 이 된 뒤 320 · 360 · 390px 에서 다시 재도 한 줄) */
  .footer-info { margin-bottom: 0; }
  .footer-links { row-gap: 0; margin-bottom: 0; }
  .footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 바닥글 대표전화 번호 — 휴대폰 · 태블릿에서 누를 자리 44px (2026-10-05 원장 지시 · 링크 상자 높이가 17px 이었다 — 390px 실측).
   글씨는 그대로 두고 링크 상자만 44px 로 세운다. 그만큼 대표전화 줄의 키가 22.4px → 44px 로 늘어
   글자가 위 주소 줄에서 10.8px, 아래 링크 줄에서 10.8px 더 떨어진다(휴대폰 쪽 높이 +21.6px).
   위 숫자는 휴대폰(390px) 기준이다. 태블릿은 바닥글 글씨가 13.76px 이라 링크 상자 16px → 44px · 줄 22px → 44px · 위아래 11px 씩 · 쪽 높이 +22px(768px 실측).
   안쪽 여백으로 줄을 안 벌리고 키우는 길(길 안내처럼)은 쓰지 않았다 — 바로 아래 바닥글 링크의 누를 자리와 겹친다.
   처음에는 759px 까지(휴대폰)만 걸었다가 2026-10-06 원장 지시로 1023px 까지(세워 든 태블릿)로 넓혔다 — 위 묶음의 오시는 길 전화번호와 같은 폭 조건이다.
   1024px 부터(노트북 · 눕혀 든 태블릿)는 종전 그대로다.
   초점 테두리는 안쪽으로 당긴다 — 기본값(3px 굵기 · 3px 띄움)이면 상자 밖 6px 로 나가 위 주소 줄 · 아래 링크 줄의 상자 안으로 2px · 6px 들어간다(글자를 덮지는 않는다).
   좌우 4px 은 그 안쪽 테두리가 첫 숫자 · 끝 숫자 위에 그려지지 않게 넓힌 것이고, 같은 만큼 음수 margin 으로 되돌려 글자 자리는 그대로다.
   4px · 테두리 2px 인 까닭 — 앞의 「대표전화:」 쌍점과 숫자 사이가 빈칸 하나(Paperlogy 14px 기준 4px 쯤)뿐이라 더 넓히면 테두리가 쌍점을 덮는다(390px 에서 그려 봄. 태블릿 768 · 820 · 1023px 에서도 그려 봄 — 테두리가 쌍점에 바짝 붙지만 숫자도 쌍점도 덮지 않는다).
   되돌리려면 이 묶음만 지우면 된다. */
@media (max-width: 1023px) {
  .footer-info a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin: 0 -4px; }
  .footer-info a[href^="tel:"]:focus-visible { outline-width: 2px; outline-offset: -2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 검수 8 — 휴대폰에서 본문(17px)보다 한참 작던 글씨를 14px 까지 올린다 (2026-10-05).
   759px 까지만 건다 — 태블릿 · 노트북의 글씨는 그대로다. 14px 이상이던 것은 건드리지 않는다.
   일부러 뺀 둘(올리면 낱말 끝 한두 글자만 다음 줄로 떨어진다) — 저작권 줄 .footer-copy(12.48px) ·
   가격표 아래 ※ 문구(build.mjs 에 직접 적은 0.85rem, 360px 에서 꺾인다). */
@media (max-width: 759px) {
  .breadcrumb,
  .footer-info,
  .footer-links,
  .news-tag,
  .news-date,
  .treatment-card-short p,
  .doctor-gen,
  .doctor-schedule,
  .route-badge,
  .home-hero-visual figcaption,
  .article-figure figcaption { font-size: 0.875rem; }
}

/* ==========================================================================
   통증 클리닉 — 몸 그림 첫 화면 (.pm-*) · 부위 게시판 (.pb-*)   2026-10-05 원장 지시
   모양은 안티그래비티가 낸 판을 옮겨 심은 것이다 — 클래스 이름과 색 변수 이름만 사이트 것으로 바꿨고 값은 그대로다.
   사이트 틀에 맞추느라 덧댄 규칙은 묶음마다 맨 아래 「사이트 틀에 맞춤」 아래에 따로 모았다.
   ========================================================================== */

/* ---------- 몸 그림 첫 화면 (/clinics/clinic-pain/) ---------- */
/* 2026-10-15 다시 짬(원장 15:40): 길 안내 줄과 물음 한 줄(.fd-ask 꼴)은 .pm-top(미용 클리닉 얼굴 문과 같은 자리), 그 아래 가운데에 몸 그림,
   몸 그림 아래에 교통사고 사진 판(.hb-feat 꼴). 큰 제목 · 소개 세 줄 · 왼쪽 글 기둥은 걷었다. 휴대폰도 같은 차례로 위에서 아래로 선다 */
.pm-top > .breadcrumb { margin-inline-start: 0; max-width: none; }
.pm-top .pm-ask { margin: 30px 0 0; }
.pm-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 8px 24px 40px;
}
.pm-image-panel { width: 100%; max-width: 900px; }

/* 반응형 그림 상자 여백 설정 */
@media (max-width: 767.98px) {
  .pm-image-panel {
    width: auto;
    align-self: stretch;
    padding-left: 16px;
    padding-right: 16px;
    margin-left: -24px;
    margin-right: -24px;
  }
}

@media (min-width: 768px) {
  .pm-image-panel {
    /* 가로 스크롤 방지 · 바깥으로 나오는 이름표 자리 */
    padding: 3% 40px;
  }
}

/* 교통사고 사진 판: 안중 클리닉 첫 쪽의 큰 사진 판(.hb-feat)을 그대로 쓰고 폭과 높이만 이 자리에 맞춘다 */
.pm-car { width: 100%; max-width: 820px; border-radius: 8px; }
.pm-car img { object-position: 50% 40%; }
.pm-car .hb-feat-tx strong { font-weight: 800; letter-spacing: -0.03em; }
@media (min-width: 900px) {
  .pm-car { min-height: 360px; }
  .pm-car .hb-feat-tx { padding: 30px; }
  .pm-car .hb-feat-tx strong { font-size: 2rem; }
}

/* 인터랙티브 몸 그림 영역 */
.pm-body {
  position: relative;
  width: 100%;
  font-size: 0;
  line-height: 0;
}

.pm-body > .pm-body-img {
  width: 100%;
  height: auto;
  display: block;
  /* 네모 경계가 보이지 않도록 끝부분만 투명하게 녹이는 부드러운 타원 마스크 */
  -webkit-mask-image: radial-gradient(ellipse 95% 98% at 50% 50%, black 80%, transparent 100%);
  mask-image: radial-gradient(ellipse 95% 98% at 50% 50%, black 80%, transparent 100%);
}

/* 이름표 · 점 · 줄 자리. 넓은 화면과 휴대폰이 같은 배치다(2026-10-15 고침 43) */
.pm-view-wide {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
}

/* 휴대폰: 몸 둘을 나란히 둔 채 그림 좌우의 빈 바탕(양쪽 그림 폭 100px 씩)만 잘라 화면 폭에 채운다 — 대문 단추 · 몸 그림이 한 화면에 든다(원장 10-15 「한 화면에 다 보이게끔」) */
@media (max-width: 767.98px) {
  .pm-image-panel { overflow: hidden; }
  /* 좌우는 그림 폭 100px 씩, 위는 20px · 아래는 40px 의 빈 바탕을 잘라 낸다(여백 % 는 칸 폭 기준이라 그림 좌표 × 1.2 / 1200 과 같다) */
  .pm-body { width: 120%; margin: -2% -10% -4%; }
  .pm-section { padding-top: 18px; gap: 16px; }
  .pm-top .pm-ask { margin-top: 22px; }
}

/* 호버/포커스 처리를 위한 핫스팟 그룹 */
.pm-hotspot {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}
/* 이름표는 모든 점 · 줄 · 누를 자리 위에 선다(가운데 줄에 선 이름표 옆으로 가까운 팔 손목의 누를 자리가 지나가도 이름표를 누르면 제 부위로. 2026-10-15 고침 43) */
.pm-hotspot .pm-label { z-index: 2; }

/* SVG 오버레이 */
.pm-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
}

.pm-svg-link {
  pointer-events: auto;
  outline: none;
}

.pm-hit {
  fill: rgba(255, 255, 255, 0);
  cursor: pointer;
}

.pm-line {
  stroke: var(--color-primary);
  stroke-width: 3;
  stroke-dasharray: 6 6;
  stroke-linecap: round;
  fill: none;
  transition: all 0.3s ease;
}

.pm-dot {
  fill: var(--color-surface);
  stroke: var(--color-accent);
  stroke-width: 4;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
  transition: all 0.3s ease;
}

/* 이름표 */
.pm-label {
  position: absolute;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  padding: 10px 24px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-dark);
  white-space: nowrap;
  text-align: center;
  line-height: 1.4;
  box-shadow: 0 4px 12px rgba(49, 88, 74, 0.15);
  transition: all 0.3s ease;
  pointer-events: auto;
  cursor: pointer;
}
.pm-label:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 4px;
}

@media (max-width: 767.98px) {
  .pm-label {
    /* 두 몸 사이 틈(390 폭에서 허리 높이 약 110px)에 들게 작게. 보이는 높이 약 32px, 누를 자리는 아래 ::after 로 약 44px(inset 은 테두리 2px 안쪽에서 재므로 -8px 이 테두리 밖 6px) */
    font-size: 14px;
    padding: 4px 10px;
    border-width: 2px;
    box-shadow: 0 2px 6px rgba(49, 88, 74, 0.15);
    /* 이름표 한 줄 유지 규칙 */
    white-space: nowrap !important;
  }
  .pm-label::after { content: ""; position: absolute; inset: -8px -4px; }
}

@media (min-width: 768px) {
  .pm-label {
    font-size: 18px;
    padding: 12px 28px;
  }
}

/* 마우스 오버 및 키보드 포커스 효과 연동 */
.pm-hotspot:hover .pm-label,
.pm-hotspot:focus-within .pm-label {
  background: var(--color-primary);
  color: var(--color-surface);
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(49, 88, 74, 0.25);
}
.pm-hotspot:hover .pm-line,
.pm-hotspot:focus-within .pm-line {
  stroke: var(--color-accent);
  stroke-dasharray: none;
  stroke-width: 4;
}
.pm-hotspot:hover .pm-dot,
.pm-hotspot:focus-within .pm-dot {
  fill: var(--color-accent);
  stroke: var(--color-surface);
  stroke-width: 6;
}

/* =======================================
   이름표 배치 — 앞 · 뒤 두 몸 사이 가운데 한 줄, 위에서부터 부위 높이대로(2026-10-15 고침 43. 원장 09:27 그림).
   top(%) × 896 이 pain.mjs 의 SPOTS from 의 y 와 같다. 둘을 함께 고친다.
   머리 · 목어깨 · 팔꿈치손목 사이를 13.5% 띄워, 휴대폰 390 폭에서 이웃한 이름표의 누를 자리(약 44px)가 맞닿는다(겹침 1px 미만. 더 좁은 폭에서는 몇 px 겹치고 그 띠는 아래 이름표로 간다)
   ======================================= */
.pm-d-head { left: 50%; top: 8%; transform: translate(-50%, -50%); }
.pm-d-neck { left: 50%; top: 21.5%; transform: translate(-50%, -50%); }
.pm-d-elbow { left: 50%; top: 35%; transform: translate(-50%, -50%); }
.pm-d-waist { left: 50%; top: 50%; transform: translate(-50%, -50%); }
.pm-d-knee { left: 50%; top: 69%; transform: translate(-50%, -50%); }
.pm-d-ankle { left: 50%; top: 88%; transform: translate(-50%, -50%); }

/* 1024~1199px 구간 맞춤 — 이름표를 줄인다(2026-10-15 글 기둥을 걷기 전에는 그림이 그 옆으로 가며 좁아지던 폭이다) */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .pm-label {
    font-size: 14px;
    padding: 6px 12px;
  }
  /* 사이트 틀에 맞춤 — 이 구간의 이름표는 높이 약 36px(35.6) 이다. 보이는 모양은 두고 누를 자리만 위아래 5px 씩 넓혀 약 46px 로.
     inset 은 테두리(2px) 안쪽에서 재므로 -7px 이라야 테두리 밖으로 5px 나간다 */
  .pm-label::after { content: ""; position: absolute; inset: -7px 0; }
}

.pm-label:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) {
  .pm-label, .pm-line, .pm-dot, .pm-car img { transition: none; }
  .pm-car:hover img { transform: none; }
}

/* ---------- 부위 게시판 (/clinics/clinic-pain/<부위>/) ---------- */
/* 낱장의 바탕 규칙(여백 0 · 줄 간격 1.5 · 자간)을 이 묶음 안으로만 들인다. :where 로 특이도를 낮춰 아래 클래스 규칙이 이긴다.
   제목(h1·h2)은 사이트의 h1~h4 { line-height: 1.35 } 대신 낱장처럼 묶음의 줄 간격을 물려받게 한다 */
.pb-section { line-height: 1.5; letter-spacing: -0.02em; }
:where(.pb-section) h1, :where(.pb-section) h2, :where(.pb-section) p, :where(.pb-section) ul { margin: 0; padding: 0; }
:where(.pb-section) h1, :where(.pb-section) h2 { line-height: inherit; }

.pb-section :focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pb-section {
  width: 100%;
  background-color: var(--color-bg);
}

.pb-layout {
  display: flex;
  min-height: calc(100vh - var(--header-h));
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
}

/* ==============================
   왼쪽 띠 (Sidebar)
   ============================== */
.pb-sidebar {
  width: clamp(260px, 28vw, 360px);
  background-color: var(--color-primary-dark);
  flex-shrink: 0;
}
.pb-sidebar a:focus-visible {
  outline-color: var(--color-surface);
}

.pb-sidebar-sticky {
  position: sticky;
  top: var(--header-h);
  padding: 40px 32px;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) var(--color-primary-dark);
}

.pb-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--color-primary-light);
  margin-bottom: 24px;
  opacity: 0.8;
}
.pb-breadcrumb a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0 4px;
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s;
}
.pb-breadcrumb a:hover {
  opacity: 1;
  text-decoration: underline;
}
.pb-breadcrumb .pb-current {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--color-surface);
  font-weight: 700;
}
.pb-breadcrumb .pb-sep {
  margin: 0 2px;
}

.pb-title {
  font-size: clamp(2.5rem, 3.5vw, 4rem);
  font-weight: 700;
  color: var(--color-surface);
  margin-bottom: 16px;
  word-break: keep-all;
}

.pb-intro {
  font-size: 16px;
  color: var(--color-primary-light);
  margin-bottom: 48px;
  line-height: 1.6;
  word-break: keep-all;
}

.pb-nav ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 48px;
}
.pb-nav a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 20px;
  font-size: 18px;
  color: var(--color-primary-light);
  text-decoration: none;
  border-radius: 24px;
  border: 1px solid rgba(232, 239, 234, 0.15);
  transition: all 0.2s;
}
.pb-nav a:hover {
  background-color: rgba(232, 239, 234, 0.1);
}
.pb-nav li.pb-active a {
  background-color: var(--color-surface);
  color: var(--color-primary-dark);
  font-weight: 700;
  border-color: var(--color-surface);
}
.pb-active-dot {
  width: 6px;
  height: 6px;
  background-color: var(--color-primary-dark);
  border-radius: 50%;
  margin-right: 12px;
}

.pb-home-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 24px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-surface);
  text-decoration: none;
  border: 1px solid rgba(255, 253, 248, 0.3);
  border-radius: 24px;
  margin-top: 48px;
  align-self: flex-start;
  transition: background-color 0.2s;
}
.pb-home-link:hover {
  background-color: rgba(255, 253, 248, 0.1);
}

/* ==============================
   오른쪽 밝은 칸 (Main Content)
   ============================== */
.pb-main {
  flex: 1;
  min-width: 0;
  padding: 60px 4vw;
  display: flex;
  justify-content: center;
}
@media (min-width: 1440px) {
  .pb-main {
    padding: 80px 5vw;
  }
}

.pb-main-inner {
  width: 100%;
  max-width: 1100px;
  display: flex;
  /* stretch로 해야 모바일 column 상태에서 목록이 쪼그라들지 않고 꽉 찹니다 */
  align-items: stretch; 
  gap: 40px;
}

/* --- 몸 그림 영역 --- */
.pb-figure {
  width: 180px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--header-h) + 40px);
}

/* 부위마다 달라지는 것은 이 div의 인라인 CSS 변수뿐입니다 */
.pb-body-figure {
  width: 100%;
  aspect-ratio: var(--fig-ratio, 600 / 896); 
  position: relative;
  overflow: hidden;
  mix-blend-mode: multiply; 
  pointer-events: none;
}
.pb-figure-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--img-scale, 200%); 
  height: 100%;
  transform: translateX(var(--view-shift, 0%)); 
}
.pb-figure-inner img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.pb-figure-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: var(--color-text);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px rgba(34, 38, 34, 0.1);
}

/* --- 게시글 목록 --- */
.pb-list {
  flex: 1;
  min-width: 0; 
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--color-text);
}

.pb-empty {
  padding: 120px 0;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}
.pb-empty p {
  font-size: 18px;
  color: var(--color-text-muted);
}

.pb-post {
  display: flex;
  flex-direction: column;
  padding: 32px 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
  transition: opacity 0.2s;
}
.pb-post:hover .pb-post-title {
  color: var(--color-accent);
  text-decoration: underline;
}

/* 첫 글 (강조) */
.pb-post.pb-featured {
  border-bottom: 2px solid var(--color-text);
  padding: 40px 0;
}

.pb-post-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pb-post-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text-muted);
}
.pb-tag {
  background-color: var(--color-primary-light);
  color: var(--color-primary-dark);
  padding: 4px 10px;
  border-radius: 4px;
  font-weight: 700;
}

.pb-post-title {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  word-break: keep-all;
}
.pb-post.pb-featured .pb-post-title {
  font-size: clamp(1.5rem, 2vw, 1.875rem);
}

.pb-post-summary {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-post.pb-featured .pb-post-summary {
  font-size: 16px;
  -webkit-line-clamp: 3;
}

.pb-thumb {
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--color-bg-deep);
  border: 1px dashed #c0bbb1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  overflow: hidden;
}

/* 데스크톱 & 태블릿(가로) */
@media (min-width: 768px) {
  .pb-post.pb-with-image {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }
  .pb-post.pb-with-image .pb-thumb {
    width: 180px;
    height: auto;
  }
  .pb-post.pb-featured {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }
  .pb-post.pb-featured .pb-thumb {
    width: 320px;
  }
}

/* ==============================
   모바일 & 태블릿(세로) 반응형
   ============================== */
@media (max-width: 1024.98px) {
  .pb-layout {
    flex-direction: column;
  }
  .pb-sidebar {
    width: 100%;
    padding: 32px 24px;
  }
  .pb-sidebar-sticky {
    position: static;
    padding: 0;
    max-height: none;
    overflow-y: visible;
  }
  .pb-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
  }
  .pb-home-link {
    margin-top: 16px;
  }

  .pb-main {
    padding: 40px 24px;
  }
  .pb-main-inner {
    flex-direction: column; /* 글 목록이 위, 그림이 밑으로 오게 변경 */
    align-items: stretch; /* 좁아지지 않고 전체 화면 폭을 쓰도록 보장 */
    gap: 48px;
  }
  .pb-figure {
    position: static;
    width: 100%;
    max-width: 160px; /* 모바일에서는 살짝 아담하게 */
    margin: 0 auto;
  }
}

@media (max-width: 767.98px) {
  .pb-sidebar {
    padding: 24px 16px;
  }
  .pb-title {
    font-size: 2.25rem;
  }
  .pb-main {
    padding: 32px 16px;
  }

  /* 일반 이미지 글: 가로 배치, 작은 썸네일 우측 */
  .pb-post.pb-with-image:not(.pb-featured) {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .pb-post.pb-with-image:not(.pb-featured) .pb-thumb {
    width: 100px;
    aspect-ratio: 16 / 9;
    margin: 0;
    order: 1; /* 글 뒤에 오게 */
    flex-shrink: 0;
  }

  /* 첫 글 (강조): 세로 배치, 큰 썸네일 상단 */
  .pb-post.pb-featured {
    flex-direction: column;
  }
  .pb-post.pb-featured .pb-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 0;
    margin-bottom: 20px;
    order: -1; /* 글 위에 오게 */
  }
}

/* 사이트 틀에 맞춤 — 낱장의 그림 자리는 글자 상자였다. 실제 대표 그림은 그 칸을 채운다 */
.pb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pb-figure-inner img { max-width: none; }
/* 작은 몸 그림이 따라 내려오게(sticky) — 늘어난 채(stretch)로는 움직일 자리가 없다. 좁은 폭의 가운데 정렬(margin auto)은 그대로다 */
.pb-figure { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) {
  .pb-section * { transition: none; }
}

/* 쪽 끝 여백 (2026-10-08, 고침 18) — 통증 클리닉 쪽은 상담 띠에 위 여백을 주지 않는다(바닥글 규칙 옆 설명).
   부위 쪽은 왼쪽 진한 녹색 메뉴 칸이 띠까지 이어져야 하므로 오른쪽 칸의 아래 안쪽 여백만 칸 사이 간격으로 올린다
   (종전 767px 까지 32px · 1024px 까지 40px · 1439px 까지 60px · 1440px 부터 80px).
   몸 그림 첫 화면도 모든 폭에서 칸 사이 간격으로 올린다(2026-10-15 전에는 767px 까지만. 그 위 폭은 맨 아래 이름표가 띠와 이미 떨어져 있었다). */
.pb-main { padding-bottom: var(--section-padding); }
.pm-section { padding-bottom: var(--section-padding); }

/* ---------- 머리줄 미용 클리닉 메뉴: 갈래 곁의 시술 이름 (2026-10-08, 고침 27) ----------
   갈래 이름(.fly-head)은 묶음 제목이다. 링크가 아니라 단추이고 누르면 시술 이름을 펴기만 한다(고침 31 에서 갈래 쪽을 걷음). 다른 쪽으로 가는 것은 시술 이름뿐이다.
   넓은 화면: 갈래에 올리면 곁에(자리가 모자라면 왼쪽에) 시술 이름이 뜬다. 부제가 있는 시술은 이름 아래 작은 줄(.fly-sub)이 붙는다.
   휴대폰: 갈래 줄을 누르면 그 아래로 시술 이름이 펼쳐진다. 움직임은 main.js 맨 아래. */
.fly-sub { display: block; margin-top: 2px; font-size: 0.875rem; font-weight: 500; line-height: 1.45; color: var(--color-text-muted); white-space: normal; word-break: keep-all; }

@media (min-width: 820px) {
  .sub-menu > li.has-fly { position: relative; }
  .sub-menu > li.has-fly > .fly-head { position: relative; padding-right: 34px; }
  /* 오른쪽에 더 있다는 표시 */
  .sub-menu > li.has-fly > .fly-head::after {
    content: "";
    position: absolute;
    right: 14px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-top: 2px solid var(--color-accent);
    border-right: 2px solid var(--color-accent);
    transform: translateY(-50%) rotate(45deg);
    transition: right 0.15s ease;
  }
  .sub-menu > li.has-fly.fly-open > .fly-head,
  .sub-menu > li.has-fly:focus-within > .fly-head { background: var(--color-primary-light); color: var(--color-primary-dark); }
  .sub-menu > li.has-fly.fly-open > .fly-head::after,
  .sub-menu > li.has-fly:focus-within > .fly-head::after { right: 10px; }

  .fly-menu {
    position: absolute;
    top: -9px; /* 판의 안쪽 여백 8px + 테두리 1px: 첫 시술 줄이 갈래 줄과 같은 높이에 선다 */
    left: calc(100% + 14px);
    min-width: 190px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-primary);
    border-radius: 4px 10px 10px 4px;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-6px);
    transition: opacity 0.1s ease, transform 0.1s ease, visibility 0.1s;
    white-space: nowrap;
  }
  /* 갈래 줄과 뜬 판 사이 빈 틈(14px)을 마우스가 건너갈 수 있게 잇는다 */
  .fly-menu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -18px; width: 18px; }
  .has-sub.open .has-fly.fly-open > .fly-menu,
  .has-sub:focus-within .has-fly:focus-within > .fly-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  }
  .fly-menu li a { font-weight: 700; color: var(--color-primary-dark); }
  /* 부제가 붙은 시술 이름(스팟 레이저): 이름 아래 작은 두 줄 */
  .fly-menu .fly-sub { width: 232px; }

  /* 오른쪽에 자리가 없을 때(좁은 노트북): 왼쪽으로 띄운다 */
  .sub-menu.fly-left > li.has-fly > .fly-head { padding-right: 12px; padding-left: 34px; }
  .sub-menu.fly-left > li.has-fly > .fly-head::after { right: auto; left: 14px; transform: translateY(-50%) rotate(-135deg); }
  .sub-menu.fly-left .fly-menu {
    left: auto;
    right: calc(100% + 14px);
    border-left: 1px solid var(--color-border);
    border-right: 3px solid var(--color-primary);
    border-radius: 10px 4px 4px 10px;
    transform: translateX(6px);
  }
  .sub-menu.fly-left .fly-menu::before { left: auto; right: -18px; }
}

@media (max-width: 819px) {
  .sub-menu > li.has-fly { position: relative; }
  /* 갈래 줄 전체가 펴는 단추다. 오른쪽 끝의 꺾쇠가 펼침을 알린다 */
  .sub-menu > li.has-fly > .fly-head { position: relative; padding-right: 48px; }
  .sub-menu > li.has-fly > .fly-head::after {
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-text-muted);
    border-bottom: 2px solid var(--color-text-muted);
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .sub-menu > li.has-fly > .fly-head[aria-expanded="true"]::after { transform: translateY(-30%) rotate(-135deg); }
  .fly-menu { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.22s ease; }
  .sub-menu.open .fly-menu.open { max-height: 300px; visibility: visible; }
  .sub-menu .fly-menu li a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px 0 30px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
    border-left: 2px solid var(--color-primary);
    background: var(--color-primary-light);
  }
  .sub-menu .fly-menu li a.has-flysub { flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 8px; padding-bottom: 8px; }
  /* 단추(44px)와 줄 높이를 맞춘다. 미용 클리닉 메뉴에만 건다(다른 메뉴의 줄 높이는 그대로) */
  .sub-menu:has(> li.has-fly) > li > a { min-height: 44px; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }
  /* 갈래 단추는 따로 적는다. 위 줄에 함께 적으면 :has 를 모르는 브라우저가 줄째 버려 단추의 누를 높이가 줄어든다 */
  .sub-menu > li.has-fly > .fly-head { min-height: 44px; display: flex; align-items: center; padding-top: 0; padding-bottom: 0; }

}

@media (min-width: 820px) {
  /* 왼쪽으로 띄울 때는 딸린 줄이 없는 갈래도 글머리를 맞춘다 */
  .sub-menu.fly-left > li > a, .sub-menu.fly-left > li > .fly-head { padding-left: 34px; }
}

/* ---------- 시술 쪽으로 가는 색 카드 (2026-10-08, 고침 27) ----------
   시술 쪽 첫 화면의 색 바탕에 이름 · 한 줄 · 그림. 색(--pc · --pcd)과 그림은 beauty.mjs 의 card 에서 온다. 얼굴 문에서는 한 줄에 한 장씩 선다.
   2026-10-15 부터 미용 시술 쪽으로 거는 링크는 모두 이 카드다(원장 「앞으로 미용클리닉 쪽 글로 하이퍼링크 걸 때는 항상 그런 꼴로」): 함께 보는 시술 · 볼뉴머의 슈링크 링크 · 미용 칼럼 맺는 면.
   얼굴 문 밖에서는 .pc1-row 로 줄을 짠다(procedure.mjs 의 procedureCardRow). 글꼴은 어느 쪽에 서든 얼굴 문과 같게 사이트 글꼴(Paperlogy)로 못 박는다. */
.pc1 { display: grid; gap: 16px; margin-top: 18px; grid-template-columns: minmax(0, 1fr); }
.pc1-card {
  position: relative;
  display: flex;
  min-height: 248px;
  padding: 28px 26px 24px;
  overflow: hidden;
  border-radius: 6px 28px 6px 6px;
  color: #fff;
  background: linear-gradient(150deg, var(--pc) 0%, var(--pcd) 78%);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pc1-card:hover, .pc1-card:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(20, 30, 40, 0.22); }
.pc1-txt { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 10px; width: 58%; }
.pc1-txt strong { font-size: 1.7rem; line-height: 1.2; letter-spacing: -0.01em; word-break: keep-all; }
.pc1-line { font-size: 0.95rem; line-height: 1.55; color: rgba(255, 255, 255, 0.88); word-break: keep-all; }
.pc1-go { margin-top: auto; padding-top: 10px; font-size: 0.9rem; font-weight: 700; }
.pc1-img { position: absolute; right: 4%; bottom: 0; width: auto; max-width: 40%; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.28)); }
/* 기기를 크게 키워 머리 쪽만 보인다(리프팅의 슈링크 유니버스 · 볼뉴머. 2026-10-12 원장 「전처럼 머리 쪽만 크게」. 고침 37 에서 되살림) */
.pc1-img.pc-fit-tall { top: 18px; bottom: auto; height: 190%; right: 7%; max-width: none; }
.pc1-img.pc-fit-mid { height: 88%; bottom: -6%; }
/* 기울인 약병: 병이 카드 안에 통째로 선다(2026-10-11 원장 「ㄴ」 벌 나. 고침 36) */
.pc1-img.pc-fit-vial { height: 84%; bottom: 8%; max-width: 44%; }
/* 기기 사진 둘(스팟 레이저: CO2 레이저와 피코 레이저). 둘을 오른쪽에 나란히 세우고 글 칸은 그만큼 좁힌다 */
.pc1-img.pc-fit-duo { height: 80%; bottom: -5%; max-width: 24%; object-position: 50% 100%; }
.pc1-img.pc-duo-1 { right: 23%; height: 70%; }
.pc1-img.pc-duo-2 { right: 2%; }
.pc1-duo .pc1-txt { width: 52%; }
/* 병 둘(안중 여드름 클리닉: 쎄라필 병과 연아 약병): 둘 다 카드 안에 통째로 */
.pc1-vials .pc1-img.pc-fit-duo { height: 78%; bottom: 8%; max-width: 27%; }
.pc1-vials .pc1-img.pc-duo-1 { right: 27%; }
/* 그림이 없는 카드: 글이 카드 폭을 넉넉히 쓴다 */
.pc1-noimg .pc1-txt { width: 86%; }
/* 어두운 카드(셀엑소좀 블랙라벨): 그림 뒤를 옅게 밝혀 검은 라벨이 바탕에 묻히지 않게 한다 */
.pc1-glow { background: radial-gradient(circle at 80% 62%, rgba(255, 255, 255, 0.2) 0%, transparent 44%), linear-gradient(150deg, var(--pc) 0%, var(--pcd) 78%); }
@media (max-width: 899px) {
  .pc1 { gap: 12px; }
  .pc1-card { min-height: 168px; padding: 22px 20px 18px; }
  .pc1-txt strong { font-size: 1.4rem; }
  .pc1-line { font-size: 0.9rem; }
}
/* 얼굴 문 밖의 카드 줄(procedure.mjs 의 procedureCardRow). 글꼴은 어느 쪽에 서든 얼굴 문과 같게 */
.pc1-card { font-family: "Paperlogy", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
.pc1-row { margin-top: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pc1-row.pc1-one { grid-template-columns: minmax(0, 480px); }
@media (max-width: 1023px) { .pc1-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .pc1-row, .pc1-row.pc1-one { grid-template-columns: minmax(0, 1fr); } }

/* ================= 미용 클리닉 첫 쪽의 얼굴 문 (face-door.mjs · 움직임은 main.js 맨 끝) =================
   왼쪽 고민 단추 줄 · 가운데 삽화 · 오른쪽 시술 카드. 휴대폰은 삽화가 위, 단추가 둘씩 아래, 고른 갈래의 카드가 그 밑.
   세워 든 태블릿 폭(700 ~ 899px)은 삽화가 왼쪽, 단추 일곱이 오른쪽에 나란히 서고 카드는 그 아래로 펼쳐진다.
   고민 단추(.fd-pick)는 링크가 아니라 고르기만 하는 단추다. 쪽의 큰 제목을 걷어 물음 한 줄(.fd-ask)이 첫 큰 글이다. */
.fd { --fd-bg: #f4ebdd; margin: 30px 0 12px; }
/* 큰 제목을 걷은 이 쪽에서는 길 안내 줄을 문과 같은 왼쪽 끝에 세운다(1023px 까지는 다른 쪽처럼 기둥 폭만큼 들여 서던 줄) */
.container:has(> .fd) > .breadcrumb { margin-inline-start: 0; max-width: none; }
.fd-ask { margin: 0 0 22px; font-size: clamp(1.7rem, 3.2vw, 2.6rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.03em; color: var(--color-primary-dark); word-break: keep-all; }
/* 물음 한 줄은 미용 · 통증 첫 쪽 모두 Pretendard(원장 10-15 「3ㄱ, 미용도 프리텐다드로」). 미용 첫 쪽의 다른 글자는 사이트 공통 Paperlogy 그대로. 글꼴은 build.mjs 가 그 쪽 머리에서 부른다 */
.fd-ask { font-family: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif; }
.fd-list { list-style: none; margin: 0; padding: 0; }

/* 삽화: 여러 장을 한자리에 겹쳐 두고 고른 것만 보인다. 바뀔 때 스르륵 겹쳐 넘긴다 */
.fd-art { position: relative; overflow: hidden; background: var(--fd-bg); border-radius: 6px 44px 6px 6px; }
.fd-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; opacity: 0; transition: opacity 0.45s ease; }
.fd-img.is-on { opacity: 1; }
.fd-img:not([src]), .fd-panel .pc1-img:not([src]) { visibility: hidden; }

/* 고민 단추 */
.fd-pick { display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; min-height: 60px; margin: 0; border: 0; border-radius: 0; background: none; font: inherit; text-align: left; color: var(--color-primary-dark); cursor: pointer; -webkit-appearance: none; appearance: none; }
.fd-pick strong { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.02em; word-break: keep-all; }
.fd-pick span { font-size: 0.875rem; color: var(--color-text-muted); }

/* 곁에 뜨는 면 */
.fd-pt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; }
.fd-pt strong { font-size: 1.35rem; color: var(--color-primary-dark); letter-spacing: -0.02em; }
.fd-pt em { font-style: normal; font-size: 0.95rem; color: var(--color-text-muted); }
.fd-panel .pc1 { margin-top: 0; gap: 10px; }
.fd-panel .pc1-card { min-height: 146px; padding: 20px 20px 16px; border-radius: 6px 24px 6px 6px; }
.fd-panel .pc1-txt strong { font-size: 1.3rem; }
.fd-panel .pc1-line { font-size: 0.9rem; }
.fd-panel .pc1-go { padding-top: 4px; }
/* 아무 고민도 안 고른 때 오른쪽 칸의 글(넓은 화면에만 선다). 큰 글 두 줄 · 안내 두 줄. 줄 끝은 글에서 정한 그대로이고 한 줄이 한 줄로 선다.
   글씨는 이 칸의 폭(cqw)과 화면 폭(vw) 가운데 작은 쪽을 따라 커진다. 칸 폭은 화면 폭 900px 에서 가장 좁고(326px) 1199px 에서 가장 넓다(546px).
   vw 쪽은 물음 한 줄(.fd-ask, 3.2vw)보다 늘 작게 서도록 건 것이다. cqw 를 모르는 옛 브라우저는 앞의 px 값으로 선다(가장 좁은 칸에도 들어가는 크기) */
.fd-rest { container-type: inline-size; }
.fd-rest p { margin: 0; }
.fd-rest > p span { display: block; white-space: nowrap; word-break: keep-all; }
.fd-rest-big { font-size: 24px; font-size: clamp(24px, min(9.4cqw, 2.7vw), 36px); font-weight: 800; line-height: 1.32; letter-spacing: -0.03em; color: var(--color-primary-dark); }
.fd-rest-guide { margin-top: 20px; font-size: 17px; font-size: clamp(17px, min(5.8cqw, 1.9vw), 21px); font-weight: 500; line-height: 1.6; letter-spacing: -0.01em; color: #474c46; }

/* 스크립트가 안 도는 브라우저: 고를 수 없으므로 일곱 갈래의 시술 카드를 모두 펼쳐 둔다(.is-js 는 문 바로 아래의 한 줄 스크립트가 붙인다) */
.fd:not(.is-js) .fd-grid, .fd:not(.is-js) .fd-list, .fd:not(.is-js) .fd-item { display: block; }
.fd:not(.is-js) .fd-art, .fd:not(.is-js) .fd-pick { display: none; }
.fd:not(.is-js) .fd-panel { display: block; visibility: visible; opacity: 1; transform: none; padding: 0 0 22px; }

/* 넓은 화면 (900px 부터): 세 칸. 목록(ul · li)은 격자에 펼친다 */
@media (min-width: 900px) {
  .fd-list, .fd-item { display: contents; }
  /* 줄 수는 갈래 수(일곱)다. 갈래를 더하면 repeat 의 수도 올린다 */
  .fd-grid { display: grid; column-gap: 36px; align-items: start; grid-template-columns: minmax(200px, 250px) minmax(300px, 390px) minmax(0, 1fr); grid-template-rows: repeat(7, auto) 1fr; }
  .fd-art { grid-column: 2; grid-row: 1 / -1; aspect-ratio: 4 / 5; }
  .fd-pick { grid-column: 1; padding: 8px 14px 8px 16px; border-top: 1px solid var(--color-primary-dark); border-left: 4px solid transparent; transition: background 0.15s ease, border-color 0.15s ease, padding 0.15s ease; }
  .fd-item:last-child .fd-pick { border-bottom: 1px solid var(--color-primary-dark); }
  .fd-item.is-on .fd-pick, .fd-pick:focus-visible { background: var(--color-primary-dark); border-left-color: #c9a06a; padding-left: 22px; }
  .fd-item.is-on .fd-pick strong, .fd-pick:focus-visible strong { color: #fff; }
  .fd-item.is-on .fd-pick span, .fd-pick:focus-visible span { color: rgba(255, 255, 255, 0.78); }
  .fd-panel, .fd-rest { grid-column: 3; grid-row: 1 / -1; align-self: start; }
  .fd-panel { visibility: hidden; opacity: 0; transform: translateX(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
  .fd-item.is-on .fd-panel { visibility: visible; opacity: 1; transform: none; }
  .fd-rest { transition: opacity 0.2s ease; padding-top: 18px; border-top: 2px solid var(--color-primary-dark); }
  .fd.is-open .fd-rest { opacity: 0; visibility: hidden; }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .fd-grid { grid-template-columns: minmax(170px, 200px) minmax(220px, 270px) minmax(0, 1fr); column-gap: 24px; }
}
/* 그림 없는 반 칸 카드(.pc1-half)가 있는 면은 두 칸으로 짜서 그 둘을 한 줄에 세운다(지금 쓰는 카드는 없다. 고침 34).
   넓은 화면에서는 이름과 화살표만 있는 낮은 카드다. 다섯을 모두 큰 카드로 쌓으면 문이 삽화보다 300px 넘게 길어진다. 좁은 화면에서는 다른 카드와 같은 꼴로 한 줄에 하나씩 선다 */
@media (min-width: 900px) {
  .fd-panel .pc1:has(.pc1-half) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-panel .pc1:has(.pc1-half) .pc1-card:not(.pc1-half) { grid-column: 1 / -1; }
  .fd-panel .pc1-half { min-height: 60px; padding: 12px 14px 12px 16px; align-items: center; border-radius: 6px 18px 6px 6px; }
  .fd-panel .pc1-half .pc1-txt { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; }
  .fd-panel .pc1-half .pc1-txt strong { font-size: 1.1rem; }
  .fd-panel .pc1-half .pc1-line, .fd-panel .pc1-half .pc1-go { display: none; }
  .fd-panel .pc1-half .pc1-txt::after { content: "→"; font-weight: 700; }
}

/* 휴대폰 · 좁은 화면 (899px 까지): 삽화가 위, 단추가 둘씩 넉 줄, 고른 갈래의 카드가 그 아래 */
@media (max-width: 899px) {
  .fd { margin-top: 22px; }
  .fd-ask { margin-bottom: 14px; }
  .fd-list, .fd-item { display: contents; }
  .fd-grid { display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-art { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 1 / 0.86; margin-bottom: 4px; }
  .fd-panel { display: none; grid-column: 1 / -1; grid-row: 6; padding-top: 10px; }
  .fd-item.is-on .fd-panel { display: block; }
  .fd-pick { min-height: 56px; padding: 6px 10px 6px 12px; border: 1.5px solid var(--color-primary-dark); border-radius: 6px 16px 6px 6px; background: var(--color-surface); }
  .fd-pick strong { font-size: 1.05rem; }
  .fd-item.is-on .fd-pick { background: var(--color-primary-dark); }
  .fd-item.is-on .fd-pick strong { color: #fff; }
  .fd-item.is-on .fd-pick span { color: rgba(255, 255, 255, 0.78); }
}
/* 세워 든 태블릿 폭 (700 ~ 899px): 삽화를 왼쪽, 단추 일곱을 오른쪽에 나란히 세워 접힌 모습이 한 화면에 든다(2026-10-08 원장 지시). 고른 갈래의 카드는 그 아래 여덟째 줄 */
@media (min-width: 700px) and (max-width: 899px) {
  .fd-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); column-gap: 20px; }
  .fd-art { grid-column: 1; grid-row: 1 / span 7; aspect-ratio: auto; height: 100%; margin-bottom: 0; }
  .fd-pick { grid-column: 2; min-height: 72px; padding-left: 16px; }
  .fd-pick strong { font-size: 1.15rem; }
  .fd-panel { grid-row: 8; padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-img, .fd-panel, .fd-rest, .fd-pick { transition: none !important; }
}

/* ---------- 따로 서는 시술로 가는 띠 (2026-10-10 고침 34 · 2026-10-11 원장 지시로 자리를 옮김, 고침 36. 올인원 케어) ----------
   얼굴 문 오른쪽 칸의 안내 글 아래에 선다(.fd-rest 안). 고민을 고르면 칸째 가려진다. 오른쪽 칸이 없는 좁은 화면(899px 까지)에서는 얼굴 문 아래에 띠만 남는다.
   색 카드(.pc1-card)와 한 식구: 같은 색 바탕 · 같은 모서리 · 같은 글 차례. 아래에 기기 그림 다섯을 같은 크기의 옅은 칸에 같은 키 · 같은 바닥선으로 세운다
   (그림 파일이 여백 없이 같은 키로 맞춰져 있어 칸 안에서 높이를 채우면 한 줄로 선다). */
.pb1 {
  display: flex; flex-direction: column; gap: 14px;
  margin: 26px 0 0; padding: 20px 20px 18px 22px; border-radius: 6px 24px 6px 6px;
  color: #fff; text-decoration: none;
  background: linear-gradient(150deg, var(--pc) 0%, var(--pcd) 78%);
  box-shadow: 0 6px 16px rgba(20, 30, 40, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.pb1:hover, .pb1:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(20, 30, 40, 0.22); }
.pb1-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-width: 0; }
.pb1-txt strong { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; word-break: keep-all; white-space: nowrap; }
.pb1-line { flex: 1 1 12em; font-size: 0.9rem; line-height: 1.5; color: rgba(255, 255, 255, 0.88); word-break: keep-all; white-space: normal; }
.pb1-go { flex-basis: 100%; font-size: 0.9rem; font-weight: 700; white-space: normal; }
/* 기기 다섯(2026-10-12 원장 「흰색배경은 빼고 기기사진만 … 겹쳐도 됨 … 키울 수 있는 최대로 … 부분만 나와도 돼」. 고침 37): 흰 네모를 걷고 다섯을 겹쳐 띠 폭을 채운다.
   키가 띠 높이를 넘어 머리 쪽만 보이고 아래는 띠 끝에서 잘린다. 칸마다의 폭 비는 그림 다섯의 실제 폭(같은 키일 때 207 · 129 · 183 · 201 · 270)이다 */
.pb1-imgs { display: flex; align-items: flex-start; aspect-ratio: 5 / 2.1; margin: 2px -6px -18px; overflow: hidden; }
.pb1-tile { display: block; min-width: 0; margin-left: -5.5%; }
.pb1-tile:first-child { margin-left: 0; }
.pb1-tile:nth-child(1) { flex: 207 1 0; } .pb1-tile:nth-child(2) { flex: 129 1 0; } .pb1-tile:nth-child(3) { flex: 183 1 0; } .pb1-tile:nth-child(4) { flex: 201 1 0; } .pb1-tile:nth-child(5) { flex: 270 1 0; }
.pb1-tile img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.3)); }
/* 넓은 화면: 안내 글과 띠가 오른쪽 칸에 함께 선다. 안내 글의 한 줄 맞춤(nowrap)이 띠 안으로 번지지 않게 띠의 글은 위에서 따로 풀었다 */
@media (max-width: 899px) {
  .fd-rest { display: block; grid-column: 1 / -1; grid-row: 9; }
  .fd-rest > p { display: none; }
  .pb1 { margin: 10px 0 0; }
}
.fd:not(.is-js) .fd-rest { display: block; border-top: 0; padding-top: 0; margin-bottom: 26px; }
.fd:not(.is-js) .fd-rest > p { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pb1 { transition: none !important; }
}

/* ===================================================================
   고침 35 (2026-10-11) — 한의원 소개 쪽(.ab-*) · 의료진 쪽(.dr-*) ·
   안중 클리닉 첫 쪽(.hb-*) · 칼럼 게시판(.pb-column) · 칼럼으로 가는 길(.col-door)
   =================================================================== */

/* ---------- 한의원 소개: 짧게 접는 판 ---------- */
/* 맨 위 한의원 영상(2026-10-15 고침 42): 제목 · 설명 · 손그림 · 병원 특징을 걷고 그 자리에 영상 하나. 소리 없음, 되풀이. 오른쪽 아래 멈춤 단추 */
.ab-film { position: relative; margin: 20px 0 28px; border-radius: var(--radius-lg); overflow: hidden; background: var(--w-tint); }
.ab-film video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ab-film-toggle { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(25, 60, 50, 0.72); cursor: pointer; display: grid; place-items: center; }
.ab-film-toggle span { display: block; width: 14px; height: 16px; border-left: 4px solid #fff; border-right: 4px solid #fff; box-sizing: border-box; }
.ab-film-toggle[data-paused] span { width: 0; height: 0; border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent #fff; margin-left: 4px; }
.ab-film-toggle[hidden] { display: none; }
.ab-film-toggle:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
@media (min-width: 900px) { .ab-film { margin: 32px 0 44px; } }
.ab-name { position: relative; display: grid; gap: 10px; padding: 30px 24px 32px; background: var(--color-primary-dark); color: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.ab-name-mark { font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: 1; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.22); }
.ab-name p { margin: 0; font-size: var(--text-lead); line-height: 1.8; word-break: keep-all; color: #fff; max-width: none; }
.ab-gallery { padding: 40px 0 8px; }
.ab-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 2px solid var(--color-primary-dark); }
.ab-tabs button { min-height: 48px; font: inherit; font-weight: 700; font-size: 1rem; color: var(--color-text-muted); background: none; border: 0; border-radius: 8px 8px 0 0; cursor: pointer; }
.ab-tabs button[aria-selected="true"] { background: var(--color-primary-dark); color: #fff; }
.ab-tabs button:focus-visible, .ab-thumbs button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.ab-pane { display: grid; gap: 14px; padding-top: 18px; }
.ab-pane[hidden] { display: none; }
.ab-pane-name { font-size: 1.15rem; color: var(--color-primary-dark); }
/* 자바스크립트가 돌면 이름표가 묶음 이름을 맡으므로 묶음 안의 이름은 숨긴다(안 돌면 이름표가 숨고 세 묶음이 이름과 함께 펴져 보인다) */
.ab-view:not([data-ab-ready]) .ab-tabs { display: none; }
.ab-view[data-ab-ready] .ab-pane-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab-stage { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--color-border); }
.ab-stage img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ab-pane-equipment .ab-stage img { object-fit: contain; }
.ab-stage figcaption { padding: 12px 16px; font-size: 1rem; line-height: 1.5; background: var(--color-surface); border-top: 1px solid var(--color-border); word-break: keep-all; }
.ab-thumbs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 4px 8px; }
.ab-thumbs button { flex: 0 0 84px; padding: 0; border: 2px solid var(--color-border); border-radius: 8px; overflow: hidden; background: #fff; cursor: pointer; }
.ab-thumbs button[aria-pressed="true"] { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); }
.ab-thumbs img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ab-pane-equipment .ab-thumbs img { aspect-ratio: 1 / 1; object-fit: contain; }
.ab-next { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; margin: 32px 0 56px; padding: 16px 22px; background: var(--color-bg-deep); border-left: 4px solid var(--color-accent); color: var(--color-primary-dark); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.ab-next:hover { background: var(--color-primary-light); }
@media (min-width: 900px) {
  .ab-name { grid-template-columns: 200px 1fr; gap: 40px; align-items: center; padding: 40px 44px 40px 40px; }
  .ab-name-mark { font-size: 4.6rem; letter-spacing: 0.08em; }
  .ab-tabs { display: flex; }
  .ab-tabs button { padding: 0 30px; }
  .ab-pane { grid-template-columns: 1.6fr 1fr; gap: 20px; align-items: start; }
  .ab-thumbs { flex-wrap: wrap; overflow: visible; padding: 0; }
  .ab-thumbs button { flex: 0 0 calc((100% - 16px) / 3); }
  .ab-pane-equipment .ab-thumbs button { flex-basis: calc((100% - 24px) / 4); }
}

/* ---------- 의료진: 세대 이야기 아래의 원장 카드와 진료 현장 줄 ---------- */
.dr-after { padding-top: 48px; }
.dr-scenes { margin-top: 48px; }

/* ---------- 안중 클리닉 첫 쪽: 크기로 차례를 주는 판 ---------- */
.hb a { text-decoration: none; }
/* 큰 제목 · 머리 두 줄은 2026-10-15 걷었다(원장 「안중클리닉 제목이랑 같이」). 길 안내 줄 바로 아래에 사진 판이 선다 */
.hb > h1.visually-hidden + .hb-feats { margin-top: 18px; }
.hb-feats { display: grid; gap: 14px; }
.hb-feat { position: relative; display: block; min-height: 300px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-primary-dark); color: #fff; }
.hb-feat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.hb-feat:hover img { transform: scale(1.03); }
.hb-feat::after { content: ""; position: absolute; inset: 25% 0 0; background: linear-gradient(transparent, rgba(12, 30, 24, 0.55) 45%, rgba(12, 30, 24, 0.92)); }
.hb-feat-tx { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 22px; display: grid; gap: 4px; }
.hb-feat-tx strong { font-size: 1.6rem; line-height: 1.25; color: #fff; }
.hb-feat-tx span { font-size: 1rem; color: rgba(255, 255, 255, 0.88); }
.hb-feat-tx em, .hb-band em, .hb-prod-tx em, .hb-col-card em { font-style: normal; font-weight: 700; font-size: 0.95rem; }
.hb-feat-tx em { margin-top: 10px; color: #fff; }
.hb-band { display: grid; gap: 4px 24px; margin: 14px 0; padding: 20px 24px; min-height: 72px; background: var(--color-primary-dark); color: #fff; border-radius: var(--radius-lg); align-items: center; }
.hb-band-tx { display: grid; gap: inherit; align-items: center; width: 100%; }
/* 사진을 얹은 띠(2026-10-12 원장 「나」. 고침 37): 좁은 화면은 글 아래에 사진, 넓은 화면은 오른쪽 34% 에 사진 */
.hb-band-photo { padding: 0; overflow: hidden; gap: 0; }
.hb-band-photo .hb-band-tx { padding: 24px 24px 22px; gap: 4px 24px; }
.hb-band-photo img { display: block; width: 100%; height: 150px; object-fit: cover; object-position: 50% 45%; }
.hb-band strong { font-size: 1.3rem; color: #fff; }
.hb-band span { color: rgba(255, 255, 255, 0.85); }
.hb-band em { color: #fff; }
.hb-prods { display: grid; gap: 14px; }
.hb-prod { display: grid; grid-template-columns: 40% 1fr; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; color: inherit; }
.hb-prod-ph { background: #fff; }
.hb-prod-ph img { display: block; width: 100%; height: 100%; min-height: 150px; object-fit: cover; }
.hb-prod-contain .hb-prod-ph img { object-fit: contain; padding: 10px; }
.hb-prod-tx { padding: 18px 20px; display: grid; gap: 6px; align-content: center; }
.hb-prod-tx strong { font-size: 1.35rem; color: var(--color-primary-dark); }
.hb-prod-short { font-size: 0.95rem; color: var(--color-text-muted); word-break: keep-all; }
.hb-prod-tx em { color: var(--color-accent); margin-top: 6px; }
.hb-feat:focus-visible, .hb-band:focus-visible, .hb-prod:focus-visible, .hb-col-card:focus-visible, .hb-col-more:focus-visible, .col-door:focus-visible, .ab-next:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.hb-col { margin: 48px 0 56px; padding-top: 30px; border-top: 2px solid var(--color-primary-dark); }
.hb-col-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; }
.hb-col-head h2 { font-size: 1.5rem; color: var(--color-primary-dark); line-height: 1.3; }
.hb-col-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--color-accent); }
.hb-col-cards { display: grid; gap: 12px; }
.hb-col-card { display: grid; gap: 4px; padding: 18px 20px; min-height: 76px; background: var(--color-bg-deep); border-top: 3px solid var(--color-accent); color: inherit; }
.hb-col-card strong { font-size: 1.15rem; color: var(--color-primary-dark); }
.hb-col-card span { font-size: 0.95rem; color: var(--color-text-muted); word-break: keep-all; }
.hb-col-card em { color: var(--color-accent); margin-top: 8px; }
.hb-col-card:hover { background: var(--color-primary-light); }
/* 대표 그림이 있는 칼럼 카드: 칼럼 게시판 목록(.pb-thumb)과 같은 16:9 칸을 카드 머리에 */
.hb-col-card.hb-col-with-image { padding-top: 12px; align-content: start; }
.hb-col-thumb { display: block; aspect-ratio: 16 / 9; margin: 0 -8px 10px; border-radius: 8px; overflow: hidden; background: var(--color-bg-deep); }
.hb-col-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 휴대폰 폭: 칼럼 게시판 목록의 휴대폰 꼴처럼 글 오른쪽에 작은 그림(쪽을 길게 늘이지 않게) */
@media (max-width: 759.98px) {
  .hb-col-card.hb-col-with-image { grid-template-columns: 1fr 112px; column-gap: 14px; padding-top: 18px; }
  .hb-col-with-image > :not(.hb-col-thumb) { grid-column: 1; }
  .hb-col-with-image .hb-col-thumb { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin: 2px 0 0; }
}
/* 칼럼 카드: 글이 넷(2026-10-15 전립선을 두 편으로)이라 3열이면 한 장이 홀로 남아, 넓은 화면은 넷이 한 줄 · 중간 폭은 둘씩 */
@media (min-width: 1100px) { .hb-col .hb-col-cards { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) {
  .hb-col-cards { grid-template-columns: repeat(2, 1fr); }
  .hb-band-tx { grid-template-columns: auto 1fr auto; }
  .hb-band-photo { grid-template-columns: 66% 34%; align-items: stretch; }
  .hb-band-photo img { height: 100%; min-height: 200px; max-height: 204px; }
  .hb-feats { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .hb > h1.visually-hidden + .hb-feats { margin-top: 24px; }
  .hb-feat { min-height: 440px; }
  .hb-feat-tx { padding: 30px; }
  .hb-feat-tx strong { font-size: 2rem; }
  .hb-prods { grid-template-columns: 1fr 1fr; }
  .hb-prod { grid-template-columns: 44% 1fr; }
  .hb-prod-tx { padding: 24px 26px; }
}

/* ---------- 칼럼 게시판(통증 부위 게시판의 틀) · 칼럼으로 가는 길 · 칼럼 글의 물음 묶음 ---------- */
.pb-column .pb-home-link { margin-top: 28px; }
.col-door { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; margin: 20px 0 8px; padding: 16px 22px; background: var(--color-bg-deep); border-left: 4px solid var(--color-accent); color: var(--color-primary-dark); font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.col-door:hover { background: var(--color-primary-light); }
.article-body .check-list, .article-body .process-steps, .article-body .callout, .article-faq { margin-block: 0 1.35em; }
.article-body .check-list { list-style: none; padding-left: 0; }

/* ---- 대문 세대 이야기, 세 분이 한 줄에(2026-10-12 원장 「다 로 하자」. 고침 35 의 시안 다를 고침 37 에서 넣음). 얼굴 사진 셋이 굵은 바닥 줄 위에 나란히 서고 대 이름이 가장 크다 ---- */
.hx h2 { margin: 0; color: var(--color-primary-dark); font-family: var(--font-display); line-height: 1.14; letter-spacing: -0.05em; word-break: keep-all; }
.hx ol { padding: 0; list-style: none; }
.hx figure { margin: 0; }
.hx h3 { margin: 0; color: var(--color-primary-dark); font-family: var(--font-display); letter-spacing: -0.04em; line-height: 1.3; word-break: keep-all; }
.hx .hx-name { margin: 0; color: var(--color-text); font-weight: 800; font-size: 1.05rem; }
.hx-da-head { font-size: clamp(2.2rem, 8.6vw, 4.2rem); }
.hx-da-row { display: grid; gap: 36px; margin: 36px 0 0; }
.hx-da-item { display: grid; grid-template-columns: 44% 1fr; gap: 18px; align-items: end; border-bottom: 5px solid var(--color-primary-dark); }
.hx-da-item figure { display: flex; align-items: flex-end; height: 100%; }
.hx-da-item img { display: block; width: 100%; height: auto; }
.hx-da-item-2 img, .hx-da-item-3 img { mix-blend-mode: multiply; }
.hx-da-cap { padding-bottom: 16px; }
.hx-da-gen { margin: 0 0 10px; color: #037b37; font-family: var(--font-display); font-weight: 800; font-size: 3.4rem; line-height: 1; letter-spacing: -0.06em; }
.hx-da-item h3 { margin-top: 8px; font-size: 1.12rem; }
.hx .heritage-links { margin-top: clamp(48px, 7vw, 88px); }
@media (min-width: 900px) {
  .hx-da-row { grid-template-columns: 0.72fr 1fr 1fr; gap: 0; margin: 40px 0 0; align-items: start; }
  .hx-da-item { display: block; border-bottom: 0; }
  .hx-da-item figure { height: clamp(300px, 31vw, 440px); border-bottom: 6px solid var(--color-primary-dark); }
  .hx-da-item img { width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: left bottom; }
  .hx-da-cap { padding: 22px 24px 0 0; }
  .hx-da-gen { font-size: clamp(4.6rem, 7.4vw, 6.8rem); }
  .hx-da-item h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); margin-top: 10px; }
}

/* ============ 체험가 이벤트 글의 값 상자 (고침 38. 2026-10-13 원장이 고른 시안 가 벌. 틀 src/trial-event.mjs, 글 content.mjs 의 trialEvent) ============
   색은 원내 포스터에서 가져왔다: 짙은 밤색 바탕 · 크림 종이 · 단풍 적갈색 값. 값 면의 체험가 줄(초록)과 맞추지 않는다(원장 「2ㄱ」). */
.te { --te-ink: #2b1c14; --te-cream: #f7f0e3; --te-rust: #9a4a22; --te-line: #e3d7c2; --te-mute: #6f5f52; word-break: keep-all; margin-block: 0 8px; }
.te h2, .te h3, .te p, .te ul { margin: 0; padding: 0; }
.te ul { list-style: none; color: inherit; }
.te li { margin: 0; font-size: inherit; line-height: inherit; }
.te-price { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.te-price del { color: #8f8171; font-size: 0.9375rem; text-decoration-thickness: 1px; }
.te-price strong { color: var(--te-rust); font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.te-price strong small { font-size: 0.7em; margin-inline-start: 1px; }
.article-body > .te-a { max-width: 880px; margin-inline: auto; }
.tea-cover { margin: 0; border-radius: 18px; overflow: hidden; }
.tea-cover img { display: block; width: 100%; height: auto; }
.te .tea-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 14px 0 30px; font-size: 0.9375rem; line-height: 1.6; color: var(--te-mute); }
.tea-strip span + span::before { content: ""; display: inline-block; width: 1px; height: 0.8em; margin-inline: 12px; background: #c9bca8; vertical-align: -1px; }
.tea-box { border: 1px solid var(--te-line); border-radius: 18px; padding: 10px 10px 4px; background: #fff; }
.tea-box + .tea-box { margin-top: 22px; }
.te .tea-box > h2 { padding: 11px 20px; border-radius: 10px; background: var(--te-ink); color: #f1dcae; font-size: 1.1875rem; line-height: 1.4; letter-spacing: 0.02em; }
.tea-item { padding: 22px 14px 20px; }
.tea-item + .tea-item { border-top: 1px solid var(--te-line); }
.te .tea-item h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 1.25rem; line-height: 1.4; color: var(--te-ink); }
.tea-item h3 span { font-size: 0.9375rem; font-weight: 400; color: var(--te-mute); }
.te .tea-rows { margin-top: 12px; display: grid; gap: 8px; }
/* 폭이 모자라면 값이 아랫줄 오른쪽으로 내려간다(이름표와 값은 낱낱이 한 줄이라 줄어들 길이 없다) */
.tea-rows li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 54px; padding: 8px 20px; border-radius: 10px; background: var(--te-cream); }
.tea-rows .te-price { margin-inline-start: auto; }
.tea-label { font-size: 1.0625rem; font-weight: 700; color: var(--te-ink); white-space: nowrap; }
.te .tea-note { margin-top: 10px; padding-inline-start: 1.1em; text-indent: -1.1em; font-size: 0.875rem; line-height: 1.6; font-weight: 700; color: var(--te-mute); }
.tea-note::before { content: "※ "; }
.tea-more { margin-top: 22px; border-radius: 14px; background: var(--te-cream); }
.tea-more summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 22px; font-weight: 700; color: var(--te-ink); cursor: pointer; list-style: none; border-radius: 14px; }
.tea-more summary::-webkit-details-marker { display: none; }
.tea-more summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--te-rust); border-bottom: 2px solid var(--te-rust); transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.2s; }
.tea-more[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
@media (prefers-reduced-motion: reduce) { .tea-more summary::after { transition: none; } }
.tea-more-body { padding: 2px 22px 20px; }
.te .tea-more-body p { font-size: 0.9375rem; line-height: 1.9; color: #5b4c40; text-wrap: balance; }
.tea-hours span { white-space: nowrap; }
.te .tea-more-body .tea-hours { margin-top: 12px; padding-top: 12px; border-top: 1px solid #e6d9c2; color: var(--te-mute); }
@media (max-width: 599px) {
  .tea-strip span { flex-basis: 100%; text-align: center; }
  .tea-strip span + span::before { display: none; }
  .tea-box { padding: 8px 8px 2px; }
  .tea-item { padding: 18px 8px 16px; }
  .tea-rows li { gap: 4px 8px; padding: 8px 14px; }
  .tea-label { font-size: 1rem; }
  .te-price { gap: 8px; }
  .te-price del { font-size: 0.875rem; }
  .te .tea-note { text-wrap: balance; }
  .te .tea-more-body p { line-height: 1.7; }
  .te .tea-more-body p + p { margin-top: 6px; }
}
@media (max-width: 374px) {
  .tea-rows li { padding-inline: 12px; }
  .te-price { gap: 6px; }
  .te-price strong { font-size: 1.3125rem; }
}

/* ==========================================================================
   통증 클리닉 쪽 글꼴 · 부위 게시판 목록 판 (2026-10-15 가지 content/pain-posts-1b)
   ========================================================================== */

/* 글꼴: 통증 클리닉 첫 쪽 · 부위 게시판 · 통증 글은 Pretendard(원장 10-15 「글꼴 ㄱ」). 미용 시술 쪽(body.proc-page)처럼 body 이름으로 걸고,
   머리줄 · 상담 띠 · 맨 아래 칸은 사이트 공통이라 건드리지 않는다. Pretendard 는 그 쪽 머리에서만 부른다(build.mjs 의 PAIN_FONT) */
body.pain-page main > :not(.cta-banner), body.herb-page main > :not(.cta-banner) {
  --font-display: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  --font-body: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", sans-serif;
  font-family: var(--font-body);
}
body.pain-page main > :not(.cta-banner) :is(h1, h2, h3, .pb-title), body.herb-page main > :not(.cta-banner) :is(h1, h2, h3) { font-family: var(--font-display); }
/* 안중 클리닉 첫 쪽 · 진료 쪽 · 안중 칼럼 글도 같은 글꼴(2026-10-15 가지 content/anjung-infographic. 거는 자리는 build.mjs 의 HERB_BODY, 나머지 모양은 herb-info.css) */

/* 목록 판 공통: 날짜 · 큰 첫 글 · 점선 테두리 · 작은 몸 그림 없음. 글은 _order.json 차례 그대로 */
.pbx { list-style: none; margin: 0; padding: 0; }
.pbx a { color: inherit; text-decoration: none; }
.pbx-arrow { width: 22px; height: 22px; flex: none; transition: transform 0.2s; }
.pbx a:hover .pbx-arrow, .pbx a:focus-visible .pbx-arrow { transform: translateX(4px); }
.pbl .pb-main-inner { display: block; }
.pbl .pb-list { border: 0; }

/* 판 a 이름 줄(자생 꼴): 굵은 이름이 크게, 한 줄은 오른쪽에 작게 */
.pbx-a { border-top: 2px solid var(--color-primary-dark); }
.pbx-a a { display: grid; grid-template-columns: minmax(0, 1fr) auto 22px; align-items: baseline; gap: 24px; padding: 30px 4px 28px; border-bottom: 1px solid var(--color-border, #dcd8cc); }
.pbx-a .pbx-name { font-size: clamp(28px, 3vw, 44px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; color: var(--color-primary-dark); }
.pbx-a .pbx-lead { font-size: 17px; color: var(--color-text-muted); text-align: right; }
.pbx-a .pbx-arrow { align-self: center; color: var(--color-primary); }
.pbx-a a:hover .pbx-name { color: var(--color-primary); }
@media (max-width: 767.98px) {
  .pbx-a a { grid-template-columns: minmax(0, 1fr) 22px; gap: 4px 12px; padding: 18px 2px 16px; }
  .pbx-a .pbx-name { font-size: 25px; }
  .pbx-a .pbx-lead { grid-row: 2; font-size: 15px; text-align: left; }
  .pbx-a .pbx-arrow { grid-row: 1 / 3; grid-column: 2; }
}

/* 판 b 그림 띠: 해부 그림을 가로 띠로, 이름은 왼쪽 짙은 판 위에 */
.pbx-b { display: grid; gap: 14px; }
.pbx-b a { position: relative; display: flex; align-items: flex-end; min-height: 210px; border-radius: 10px; overflow: hidden; background: var(--color-primary-dark); color: #fff; }
.pbx-b img { position: absolute; inset: 0 0 0 30%; width: 70%; height: 100%; object-fit: cover; object-position: 60% 35%; }
.pbx-b a::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--color-primary-dark) 30%, rgba(25, 60, 50, 0.55) 52%, rgba(25, 60, 50, 0) 75%); z-index: 1; }
.pbx-b .pbx-text { position: relative; z-index: 2; display: grid; gap: 8px; padding: 30px 32px 28px; max-width: 60%; }
.pbx-b .pbx-name { font-size: clamp(26px, 2.6vw, 38px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.15; }
.pbx-b .pbx-lead { font-size: 16px; color: rgba(255, 255, 255, 0.78); }
.pbx-b .pbx-arrow { position: absolute; right: 22px; bottom: 26px; z-index: 2; }
@media (max-width: 767.98px) {
  .pbx-b { gap: 10px; }
  .pbx-b a { min-height: 132px; }
  .pbx-b img { inset: 0 0 0 38%; width: 62%; }
  .pbx-b a::before { background: linear-gradient(90deg, var(--color-primary-dark) 42%, rgba(25, 60, 50, 0.5) 62%, rgba(25, 60, 50, 0) 88%); }
  .pbx-b .pbx-text { padding: 18px 18px 16px; max-width: 68%; gap: 4px; }
  .pbx-b .pbx-name { font-size: 22px; }
  .pbx-b .pbx-lead { font-size: 14px; }
  .pbx-b .pbx-arrow { display: none; }
}

/* 판 c 증상 말: 환자분 말(글 머리의 한 줄)이 크게, 질환 이름은 작게, 해부 그림은 동그란 창(글 끝 면의 창과 같은 꼴) */
.pbx-c a { display: grid; grid-template-columns: minmax(0, 1fr) 132px; grid-template-rows: auto auto; column-gap: 32px; row-gap: 14px; align-items: center; padding: 34px 0 32px; border-bottom: 1px solid var(--color-border, #dcd8cc); }
.pbx-c li:first-child a { border-top: 2px solid var(--color-primary-dark); }
.pbx-c .pbx-lead { grid-column: 1; font-size: clamp(24px, 2.4vw, 34px); font-weight: 300; line-height: 1.32; letter-spacing: -0.03em; color: var(--color-text); }
.pbx-c .pbx-name { grid-column: 1; display: inline-flex; align-items: center; gap: 10px; justify-self: start; padding: 7px 14px 8px 16px; border-radius: 999px; background: var(--color-primary-dark); color: #fff; font-size: 17px; font-weight: 700; }
.pbx-c .pbx-name .pbx-arrow { width: 18px; height: 18px; }
.pbx-c .pbx-orb { grid-column: 2; grid-row: 1 / 3; width: 132px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--color-border, #dcd8cc); }
.pbx-c .pbx-orb img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; transform: scale(1.35); }
.pbx-c a:hover .pbx-lead { color: var(--color-primary-dark); }
@media (max-width: 767.98px) {
  .pbx-c a { grid-template-columns: minmax(0, 1fr) 84px; column-gap: 16px; row-gap: 10px; padding: 20px 0 18px; }
  .pbx-c .pbx-lead { font-size: 20px; }
  .pbx-c .pbx-name { font-size: 15px; padding: 5px 12px 6px 13px; }
  .pbx-c .pbx-orb { width: 84px; }
}

/* 스크롤 효과(2026-10-15 고침 42): 아래에서 살짝 올라오며 나타남. 고르는 일과 때는 main.js 맨 끝. 움직임 줄이기를 켠 기기에서는 스크립트가 숨기지 않고, 여기서도 한 번 더 막는다 */
.rv-pre { opacity: 0; transform: translate3d(0, 28px, 0); }
.rv-go { transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
@media (prefers-reduced-motion: reduce) {
  .rv-pre { opacity: 1; transform: none; }
  .rv-go { transition: none; }
}

/* 흰 바탕 가(2026-10-15 고침 42): 색 변수만으로 안 바뀌는 자리. 시안 가지 mock/mobile-short-white 의 mock-white.css 판 가를 옮김 */
.home-hero::before { background: var(--w-tint); }

/* ==========================================================================
   휴대폰 길이(2026-10-15 고침 42. 원장 10-14 22:31 · 10-15 00:52). 시안 가지 mock/mobile-short-white 의 mock-mobile.css 를 옮기고, 단추 줄은 지을 때 세운다(mobile-fold.mjs)
   ========================================================================== */
/* 누름 칸: 스크립트가 돌기 전에는 단추 줄이 숨고(hidden) 면이 다 펴진다. .mt-all 은 넓은 화면에서도, 나머지는 휴대폰(819px 까지)에서만 */
.mt-tabs { display: none; }
.mt-tabs[hidden] { display: none !important; }
.mt-tabs .mt-tab, .pz .mt-tabs .mt-tab {
  flex: none; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; min-height: 44px;
  padding: 10px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--color-border); background: #fff; color: var(--color-text);
}
.mt-tabs .mt-tab[aria-selected="true"], .pz .mt-tabs .mt-tab[aria-selected="true"] { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.mt-tabs .mt-tab:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.mt-tabs.mt-all { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.mt-all ~ .mt-off { display: none; }
@media (max-width: 819px) {
  .mt-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .mt-tabs::-webkit-scrollbar { display: none; }
  .mt-off { display: none !important; }
  .pz .mt-proc { padding: 14px 16px !important; margin: 0; background: #fff; border-bottom: 1px solid var(--color-border); }
  .mt-home { margin: 0 0 16px; }
  .pz .mt-price { flex-wrap: wrap; margin: 0 0 18px; }
}

/* 시술 쪽: 휴대폰 위아래 여백(면마다 100 · 160px → 52px)과 함께 보는 시술(시술 카드 꼴) 옆으로 넘기기 */
@media (max-width: 819px) {
  .pz > :not(.pz-sec-hero):not(.pn-hero):not(.mt-tabs):not(.pz-sec-target-wrap) { padding-top: 52px !important; padding-bottom: 52px !important; }
  .pz .pz-target-bottom { padding-top: 40px !important; padding-bottom: 40px !important; }
  .pz .pz-how-title { padding-top: 0 !important; }
  .pz .pn-related-title { margin-bottom: 20px; font-size: 26px; }
  .pz .pn-related .pc1-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin-inline: -5vw; padding: 0 5vw 6px; scrollbar-width: none; }
  .pz .pn-related .pc1-card { flex: 0 0 82%; scroll-snap-align: start; }
}

/* 적응증 면(얼굴 + 번호): 휴대폰에서는 사진 먼저, 그 아래 번호 단추와 풀이 한 줄(원장 00:52 「3ㄷ」). 스크립트가 돌기 전(data-ind-ready 없음)과 넓은 화면은 번호 목록 그대로 */
.ind-chips, .ind-line { display: none; }
@media (max-width: 819px) {
  .pz .pz-sec-target[data-ind-ready] { display: flex; flex-direction: column; padding: 44px 5vw 36px; }
  .pz [data-ind-ready] > .pz-target-left { display: contents; }
  .pz [data-ind-ready] .pz-ment-eyebrow { order: 1; }
  .pz [data-ind-ready] .pz-ment-main { order: 2; }
  .pz [data-ind-ready] .pz-ment-line { order: 3; }
  .pz [data-ind-ready] .pz-ment-sub { order: 4; margin-bottom: 20px !important; }
  .pz [data-ind-ready] > .pz-target-right { order: 5; padding: 0 !important; margin: 0 !important; min-height: 0; width: 100%; display: block; border-radius: 6px; }
  .pz [data-ind-ready] .ind-chips { order: 6; display: flex; gap: 10px; margin-top: 16px; }
  .pz [data-ind-ready] .ind-line { order: 7; display: grid; gap: 2px; min-height: 3.6em; margin: 12px 0 0; color: rgba(255, 255, 255, 0.88); font-size: 15px; line-height: 1.45; word-break: keep-all; }
  .pz [data-ind-ready] .ind-line b { color: #fff; font-size: 18px; }
  .pz [data-ind-ready] .pz-face-list { display: none; }
  .pz [data-ind-ready] .ind-chips button { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.7); background: transparent; color: #fff; font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; }
  .pz [data-ind-ready] .ind-chips button[aria-pressed="true"] { background: #fff; color: #111; border-color: #fff; }
  .pz [data-ind-ready] .ind-chips button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
  .pz [data-ind-ready] .pz-face-frame, .pz [data-ind-ready] .pz-zone-frame { margin: 0 !important; min-height: 0 !important; padding: 0 !important; }
  .pz [data-ind-ready] .pz-face-frame { aspect-ratio: 5 / 4; overflow: hidden; align-items: flex-start; border-radius: 6px; }
  .pz [data-ind-ready] .pz-face-photo { width: 100%; margin-top: -14%; }
  .pz [data-ind-ready] .pz-tip-photo { width: 52%; max-width: 220px; margin: 8px auto 0; }
  .pz [data-ind-ready] .pz-tip-area { position: static; display: flex; align-items: center; gap: 12px; padding: 4px 14px 14px; }
  .pz [data-ind-ready] .pz-tip-sq { width: 56px; height: 56px; flex: none; }
  .pz [data-ind-ready] .pz-tip-area b { font-size: 24px; }
  .pz [data-ind-ready] .pz-tip-area span { font-size: 14px; margin-top: 4px; }
  .pz [data-ind-ready] .pz-zone-arch { width: 74%; margin: 0 auto; padding: 36px 18px 0; }
  .pz [data-ind-ready] .pz-zone-tag { font-size: 14px; padding: 4px 10px; }
  .pz [data-ind-ready] .pz-dot { cursor: pointer; }
  .pz [data-ind-ready] .pz-dot.on { transform: translate(-50%, -50%) scale(1.22); }
}

/* 긴 글: 휴대폰에서만 본문 16px · 줄 간격 1.7(글은 접지 않는다. 원장 10-14 23:10 「3ㄴ」) */
@media (max-width: 819px) {
  .article-body { --text-body: 1rem; --leading-body: 1.7; }
}

/* 안중 소식 목록: 여섯 장씩 쪽 넘기기(모든 화면. 원장 00:52 「5ㄱ」) */
.pg-off { display: none !important; }
.mt-pager { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; }
.mt-pager[hidden] { display: none; }
.mt-pager button { min-width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--color-border); background: #fff; color: var(--color-text); font: inherit; font-weight: 700; cursor: pointer; }
.mt-pager button[aria-current="page"] { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.mt-pager button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* 대문: 세 진료 카드를 휴대폰에서 옆으로 넘기기 */
@media (max-width: 819px) {
  .clinic-domains { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; border-top: 0; margin-inline: -16px; padding: 0 16px 6px; scrollbar-width: none; }
  .clinic-domain { flex: 0 0 84%; scroll-snap-align: start; border-top: 1px solid var(--color-text); grid-template-columns: 1fr; gap: 14px; padding-top: 0; }
  .clinic-domain-image { min-height: 0; height: 150px; }
}

/* 대문 세대 이야기: 휴대폰에서 좌우로 넘기기(2026-10-15 고침 42). 넓은 화면은 세 분이 한 줄에 그대로. .hx-slide-wide 는 넓은 화면도 넘기는 판(지금 안 씀) */
.hx-dots { display: none; }
@media (max-width: 899px) {
  .hx-da-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .hx-da-row::-webkit-scrollbar { display: none; }
  .hx-da-item { flex: 0 0 88%; scroll-snap-align: center; }
  .hx-dots:not([hidden]) { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
}
.hx-dots button { min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--color-border); background: #fff; color: var(--color-primary-dark); font: inherit; font-weight: 800; cursor: pointer; }
.hx-dots button[aria-current="true"] { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.hx-dots button:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }
@media (min-width: 900px) {
  .hx-slide-wide .hx-da-row { display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .hx-slide-wide .hx-da-row::-webkit-scrollbar { display: none; }
  .hx-slide-wide .hx-da-item { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: minmax(0, 0.9fr) 1fr; align-items: end; gap: 48px; border-bottom: 6px solid var(--color-primary-dark); }
  .hx-slide-wide .hx-da-item figure { border-bottom: 0; }
  .hx-slide-wide .hx-da-cap { padding: 0 0 36px; }
  .hx-slide-wide .hx-dots:not([hidden]) { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
}

/* 의료진 쪽 학력 · 경력(더보기 안) 글씨를 줄임. 2026-10-15 원장 「13-2ㄴ」(개편안 나 판 값. 본사 강실장자료/작업창/보고-디자인국-미용칼럼-의료진-개편안-20261014.md)
   학력 · 경력 목록 17px → 14px · 줄 간격 1.6, 칸 이름(現 · 학력 · 前 경력 …) → 15.5px, 논문 → 13px(휴대폰은 14px 바닥. 검수 8 의 휴대폰 14px 줄) */
.doctor-detail h3 { font-size: 0.97rem; margin: 16px 0 4px; }
.doctor-detail .plain-list { font-size: 0.875rem; }
.doctor-detail .plain-list li { line-height: 1.6; margin-bottom: 3px; }
.doctor-detail .paper-list { font-size: 0.8125rem; }
@media (max-width: 759px) { .doctor-detail .paper-list { font-size: 0.875rem; } }