/* 광동병원 통증재활 페이지 공통 — 검색광고 랜딩 4종(kwangdong-lp)과 같은 결
   레이아웃: 휴대폰 한 줄 흐름, 1024px 이상에서 제목 왼쪽 고정 · 본문 오른쪽 두 단
   한 가지 모습(종이 바탕 + 밤색 히어로)으로 고정. 테마 전환 없음 */
:root {
  color-scheme: light;
  --paper: #F5F3ED; --paper-2: #EFECE3; --paper-3: #E7E3DA;
  --ink: #181614; --ink-2: #4A4842; --mute: #6E6D64;
  --night: #1A1614; --night-2: #26201D;
  --clay: #AE5237; --clay-d: #8E4029; --clay-l: #E3A285;
  --line: rgba(24,22,20,.13); --line-n: rgba(245,243,237,.16);
  --serif: 'Noto Serif KR', 'Apple Myungjo', serif;
  --label: 'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --num: 'Cormorant Garamond', Georgia, serif;
  --sans: Pretendard, 'Pretendard Variable', -apple-system, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --g: max(20px, env(safe-area-inset-left, 0px));
  --gr: max(20px, env(safe-area-inset-right, 0px));
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15.5px; line-height: 1.72; word-break: keep-all; overflow-wrap: anywhere; -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block }
a { color: inherit }
:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0 }
ul, ol { padding: 0; list-style: none }
h1, h2, h3 { text-wrap: balance; font-weight: 400 }
p { text-wrap: pretty }
.nw { white-space: nowrap }

/* 라벨: Cinzel 대문자 + 앞 24px 선 */
.cap { font-family: var(--label); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--clay); display: inline-flex; align-items: center; gap: 12px; line-height: 1.4 }
.cap::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: none }
.cap.bare::before { display: none }
.on-night .cap { color: var(--clay-l) }

/* 제목: 명조 400, 둘째 줄 점토 */
.h1 { font-family: var(--serif); font-size: clamp(32px, 8.4vw, 60px); line-height: 1.32; letter-spacing: -.03em }
.h2 { font-family: var(--serif); font-size: clamp(25px, 6.4vw, 38px); line-height: 1.38; letter-spacing: -.03em }
.h3 { font-family: var(--serif); font-size: 20px; line-height: 1.45; letter-spacing: -.02em; font-weight: 500 }
.h1 em, .h2 em, .h3 em { font-style: normal; color: var(--clay) }
.on-night .h1 em, .on-night .h2 em { color: var(--clay-l) }
.lead { font-size: 16px; color: var(--ink-2); max-width: 60ch }
.small { font-size: 13px; color: var(--mute); line-height: 1.65 }
.num { font-family: var(--num); font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums }

/* 상단 바 */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: rgba(245,243,237,.92); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border-bottom: 1px solid var(--line) }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 31; background: var(--paper) }
.top-in { display: flex; align-items: center; gap: 18px; height: 60px; padding-left: var(--g); padding-right: var(--gr); max-width: 1292px; margin: 0 auto; box-sizing: border-box }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; flex: none }
.brand b { font-family: var(--serif); font-weight: 500; font-size: 18px; letter-spacing: -.02em }
.brand span { font-family: var(--label); font-size: 9.5px; letter-spacing: .3em; color: var(--mute) }
.crumb { font-size: 12.5px; color: var(--mute); display: none; gap: 8px; align-items: center; min-width: 0 }
.crumb a { text-decoration: none }
.crumb a:hover { color: var(--ink) }
.top .call { margin-left: auto; display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; font-size: 13px; font-weight: 600; white-space: nowrap; transition: transform 160ms var(--ease), background-color 200ms ease }
.top .call:active { transform: scale(.97) }

/* 페이지 안 이동: 가로 칩 */
.toc { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 61px); z-index: 25; background: rgba(245,243,237,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.toc ol { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 10px var(--gr) 10px var(--g); max-width: 1292px; margin: 0 auto; box-sizing: border-box; scroll-padding-inline: 20px }
.toc ol::-webkit-scrollbar { display: none }
.toc a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; color: var(--ink-2); text-decoration: none; white-space: nowrap; transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease }
.toc a.on { background: var(--ink); border-color: var(--ink); color: var(--paper) }

/* 히어로: 어두운 실사 + 아래 층 스트립 */
.hero { position: relative; background: var(--night); color: var(--paper); overflow: hidden; isolation: isolate }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2 }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26,22,20,.45) 0%, rgba(26,22,20,.3) 28%, rgba(26,22,20,.88) 62%, rgba(26,22,20,.96) 100%) }
.hero-in { display: flex; flex-direction: column; gap: 18px; padding: 168px var(--gr) 30px var(--g); max-width: 1292px; margin: 0 auto; box-sizing: border-box; min-height: min(86vh, 780px); justify-content: flex-end }
.hero .lead { color: rgba(245,243,237,.82); font-size: 15.5px }
.hero .cta-row { margin-top: 6px }
.floors { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); border-top: 1px solid var(--line-n); max-width: 1292px; margin: 0 auto; padding-left: var(--g); padding-right: var(--gr); box-sizing: border-box }
.floors div { display: flex; flex-direction: column; gap: 2px; padding: 16px 0 20px }
.floors div + div { padding-left: 16px; border-left: 1px solid var(--line-n) }
.floors b { font-family: var(--num); font-size: 26px; font-weight: 500; line-height: 1; color: var(--clay-l) }
.floors span { font-size: 12.5px; color: rgba(245,243,237,.72) }

/* 버튼 */
.cta-row { display: flex; flex-wrap: wrap; gap: 10px }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: 999px; background: var(--clay); color: #fff; font-weight: 600; font-size: 15px; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; transition: transform 160ms var(--ease), background-color 200ms ease }
.btn:active { transform: scale(.97) }
.btn.ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor }
.btn.ink { background: var(--ink); color: var(--paper) }
.btn .ar { transition: transform 200ms var(--ease) }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--clay-d) }
  .btn.ghost:hover { background: rgba(245,243,237,.08) }
  .btn.ink:hover { background: #2E2824 }
  .btn:hover .ar { transform: translateX(3px) }
}
.lnk { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; align-self: flex-start; line-height: 1.2 }

/* 섹션 */
.s { padding: 88px var(--gr) 0 var(--g); max-width: 1292px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 22px }
.s-head { display: flex; flex-direction: column; gap: 16px }
.s-body { display: flex; flex-direction: column; gap: 22px; min-width: 0 }
.band { background: var(--night); color: var(--paper); margin-top: 88px }
.band .s { padding-top: 80px; padding-bottom: 80px }
.band .lead, .band .small { color: rgba(245,243,237,.72) }
.tint { background: var(--paper-2); margin-top: 88px }
.tint .s { padding-top: 72px; padding-bottom: 72px }

/* 전면 사진 */
.fig { position: relative; margin-top: 88px; overflow: hidden; background: var(--night) }
.fig img { width: 100%; height: 62vw; max-height: 620px; object-fit: cover }
.fig::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(180deg, rgba(26,22,20,0), rgba(26,22,20,.74)) }
.fig figcaption { position: absolute; z-index: 1; left: var(--g); right: var(--gr); bottom: 18px; color: var(--paper); display: flex; flex-direction: column; gap: 2px; max-width: 1180px; margin: 0 auto }
.fig figcaption b { font-family: var(--num); font-size: 22px; font-weight: 500; color: var(--clay-l); line-height: 1 }
.fig figcaption span { font-size: 13px; color: rgba(245,243,237,.86) }

/* 사진 가로 레일 */
.rail { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gr) * -1) 0 calc(var(--g) * -1); padding: 0 var(--gr) 4px var(--g); scroll-padding-inline: 20px; overscroll-behavior-x: contain }
.rail::-webkit-scrollbar { display: none }
.rail > * { scroll-snap-align: start; flex: none; width: 76%; max-width: 360px }
.shot { display: flex; flex-direction: column; gap: 10px }
.shot .ph { overflow: hidden; background: var(--paper-3); aspect-ratio: 4 / 3 }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease) }
.shot b { font-family: var(--num); font-size: 18px; font-weight: 500; color: var(--clay); margin-right: 8px }
.shot span { font-size: 14px }
@media (hover: hover) and (pointer: fine) { .shot:hover img { transform: scale(1.035) } }

/* 줄 목록(번호가 실제 순서일 때만) */
.steps { display: grid; border-top: 1px solid var(--line) }
.steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line) }
.steps li > b { font-family: var(--num); font-size: 24px; font-weight: 500; color: var(--clay); line-height: 1.1 }
.steps h3, .steps h4 { font-size: 16.5px; font-weight: 600; line-height: 1.45 }
.steps p { font-size: 14px; color: var(--ink-2); margin-top: 4px }
.on-night .steps { border-color: var(--line-n) }
.on-night .steps li { border-color: var(--line-n) }
.on-night .steps p { color: rgba(245,243,237,.7) }
.on-night .steps li > b { color: var(--clay-l) }

/* 칩 */
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; background: var(--paper-2); font-size: 13.5px; color: var(--ink-2); text-decoration: none; transition: background-color 200ms ease, color 200ms ease }
a.chip:hover { background: var(--ink); color: var(--paper) }

/* 의료진 */
.doc { display: grid; gap: 22px; align-items: start }
.doc-ph { position: relative; overflow: hidden; background: var(--paper-3); aspect-ratio: 4 / 5; max-width: 420px }
.doc-ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18% }
.doc-tx { display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.doc-name { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.doc-name b { font-family: var(--serif); font-size: 28px; font-weight: 500; letter-spacing: -.03em }
.doc-name span { font-size: 14px; color: var(--mute) }
.spec { display: inline-flex; align-self: flex-start; padding: 6px 12px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; border-radius: 999px }
.cv { border-top: 1px solid var(--line) }
.cv div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px }
.cv dt { font-family: var(--label); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); padding-top: 4px }
.cv dd { color: var(--ink-2) }
.quote { font-family: var(--serif); font-size: 21px; line-height: 1.55; letter-spacing: -.02em }
.quote + .small { margin-top: -4px }

/* 영상 카드 */
.vid { display: flex; flex-direction: column; gap: 10px; text-decoration: none }
.vid .ph { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--night) }
.vid .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease) }
.vid .ph::after { content: ""; position: absolute; left: 14px; bottom: 14px; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)) }
.vid span { font-size: 14px; line-height: 1.5 }
@media (hover: hover) and (pointer: fine) { .vid:hover img { transform: scale(1.035) } }

/* 질문 */
.faq { border-top: 1px solid var(--line) }
.faq details { border-bottom: 1px solid var(--line) }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding: 18px 0; font-weight: 600; font-size: 16px; min-height: 44px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: ""; width: 12px; height: 12px; justify-self: center; border-right: 1.5px solid var(--clay); border-bottom: 1.5px solid var(--clay); transform: translateY(-3px) rotate(45deg); transition: transform 220ms var(--ease) }
.faq details[open] summary::after { transform: translateY(3px) rotate(-135deg) }
.faq details > div { padding: 0 0 20px; color: var(--ink-2); font-size: 14.5px; display: flex; flex-direction: column; gap: 10px }

/* 신청서 */
.form { background: #FBFAF6; padding: 26px 20px 22px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 1px 0 var(--line), 0 24px 60px -30px rgba(26,22,20,.22) }
.seg { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 6px; padding: 5px; background: var(--paper-2); border-radius: 999px }
.seg label { position: relative; display: flex; align-items: center; justify-content: center; min-height: 42px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; text-align: center; line-height: 1.3; padding: 0 8px; transition: background-color 200ms ease, color 200ms ease }
.seg input { position: absolute; opacity: 0; pointer-events: none }
.seg label:has(input:checked) { background: var(--ink); color: var(--paper) }
.seg label:has(input:focus-visible) { outline: 2px solid var(--clay); outline-offset: 2px }
.fld { display: flex; flex-direction: column; gap: 6px }
.fld > label { font-size: 13px; font-weight: 600 }
.fld input, .fld textarea, .fld select { font: inherit; font-size: 16px; color: var(--ink); background: #fff; border: 1px solid rgba(24,22,20,.24); border-radius: 10px; padding: 12px 14px; min-height: 48px; box-sizing: border-box; width: 100% }
.fld textarea { min-height: 96px; resize: vertical }
.fld input:focus, .fld textarea:focus { outline: 2px solid var(--clay); outline-offset: 0; border-color: transparent }
.fld .err { font-size: 12.5px; color: #A1361E; display: none }
.fld.bad .err { display: block }
.fld.bad input { border-color: #A1361E }
.agree { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2) }
.agree input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--clay); flex: none }
.form .btn { width: 100% }
.form-note { font-size: 12.5px; color: var(--mute); text-align: center }
.done { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: var(--paper-2); font-size: 14px }
.done b { font-family: var(--serif); font-size: 18px; font-weight: 500 }

/* 오시는 길 */
.visit { display: flex; flex-direction: column; gap: 10px; padding: 26px 20px; background: var(--paper-2); font-size: 14px }
.visit h3 { font-family: var(--serif); font-weight: 500; font-size: 20px }
.visit p { color: var(--ink-2) }
.visit dl { border-top: 1px solid var(--line); margin-top: 6px }
.visit dl div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line) }
.visit dt { font-size: 12px; color: var(--mute); padding-top: 2px }
.visit dd b { font-size: 16px; user-select: all }
.visit dd span { display: block; font-size: 12px; color: var(--mute) }

/* 맺음 */
.close { padding: 112px var(--gr) 32px var(--g); max-width: 1292px; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; gap: 10px }
.close p.h1 { font-size: clamp(30px, 7vw, 46px) }
.foot { margin-top: 64px; padding: 36px var(--gr) calc(120px + env(safe-area-inset-bottom, 0px)) var(--g); background: var(--night); color: rgba(245,243,237,.66); font-size: 12.5px; line-height: 1.8 }
.foot > div { max-width: 1180px; margin: 0 auto; display: flex; flex-direction: column; gap: 6px }
.foot b { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--paper) }

/* 하단 바: 신청서가 보이면 숨김 */
.bar { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 52px 52px minmax(0, 1fr); gap: 8px; padding: 10px var(--gr) calc(12px + env(safe-area-inset-bottom, 0px)) var(--g); background: rgba(26,22,20,.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: transform 280ms var(--ease), opacity 200ms ease }
.bar.off { transform: translateY(115%); opacity: 0; pointer-events: none }
.bar a { display: inline-flex; align-items: center; justify-content: center; height: 50px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14.5px; transition: transform 160ms var(--ease) }
.bar a:active { transform: scale(.97) }
.bar .t { border: 1px solid rgba(245,243,237,.3); color: var(--paper); font-size: 12.5px }
.bar .k { border: 1px solid #FEE500; color: #FEE500; font-size: 12.5px }
.bar .r { background: var(--clay); color: #fff; gap: 8px }

/* 들어올 때: 처음 보이는 것은 그대로, 아래에 있는 것만 살짝 올라온다 */
@media (prefers-reduced-motion: no-preference) {
  .rv { transition: transform 700ms var(--ease), opacity 700ms var(--ease) }
  .rv.pre { opacity: .35; transform: translateY(18px) }
  .hero-in > * { animation: up 900ms var(--ease) both }
  .hero-in > *:nth-child(2) { animation-delay: 80ms }
  .hero-in > *:nth-child(3) { animation-delay: 160ms }
  .hero-in > *:nth-child(4) { animation-delay: 240ms }
  @keyframes up { from { opacity: 0; transform: translateY(14px) } }
}

@media (min-width: 640px) {
  .crumb { display: flex }
  .rail > * { width: 44%; max-width: none }
}

@media (min-width: 1024px) {
  :root { --g: max(56px, calc((100vw - 1180px) / 2)); --gr: max(56px, calc((100vw - 1180px) / 2)) }
  body { font-size: 16px }
  .top-in, .toc ol, .hero-in, .floors, .s { max-width: none }
  .hero-in { min-height: min(88vh, 860px); padding-bottom: 44px; gap: 22px }
  .hero-in > * { max-width: 680px }
  .hero::after { background: linear-gradient(90deg, rgba(26,22,20,.9) 0%, rgba(26,22,20,.6) 42%, rgba(26,22,20,.1) 80%), linear-gradient(180deg, rgba(26,22,20,.35), rgba(26,22,20,0) 30%, rgba(26,22,20,.7)) }
  .hero .lead { font-size: 17px }
  .floors div { padding: 22px 0 26px }
  .floors div + div { padding-left: 28px }
  .s { padding-top: 128px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(56px, 6vw, 112px); align-items: start }
  .s.one { display: flex }
  .s > .s-head { position: sticky; top: 140px }
  .band, .tint, .fig { margin-top: 128px }
  .band .s { padding-top: 112px; padding-bottom: 112px }
  .tint .s { padding-top: 104px; padding-bottom: 104px }
  .fig img { height: min(46vw, 620px) }
  .fig figcaption { bottom: 30px }
  .rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; overflow: visible }
  .rail > * { width: auto }
  .doc { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px }
  .form { padding: 36px 36px 30px }
  .close { padding-top: 160px }
  .bar { left: auto; right: 28px; bottom: 24px; padding: 8px; border-radius: 999px; grid-template-columns: auto auto auto; box-shadow: 0 18px 44px rgba(26,22,20,.28) }
  .bar a { padding: 0 18px }
  .bar .r { padding: 0 24px }
  .bar.off { transform: translateY(140%) }
  .foot { padding-bottom: 48px }
}

/* ── 만성·난치 상세 ── */
/* 환자의 말: 큰 명조 인용 + 확인하는 것 */
.voices { display: grid; border-top: 1px solid var(--line) }
.voices li { display: grid; gap: 6px; padding: 20px 0; border-bottom: 1px solid var(--line) }
.voices q { font-family: var(--serif); font-size: 21px; letter-spacing: -.02em; line-height: 1.4; quotes: "“" "”" }
.voices div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline }
.voices b { font-size: 14px; font-weight: 600; color: var(--clay) }
.voices span { font-size: 13px; color: var(--mute) }

/* 세 칸 흐름 */
.flow { display: grid; gap: 10px; counter-reset: f }
.flow li { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; background: var(--paper-2) }
.flow li:nth-child(2) { background: var(--ink); color: var(--paper) }
.flow li:nth-child(2) .cap { color: var(--clay-l) }
.flow .cap { font-size: 10px; margin-bottom: 4px }
.flow b { font-size: 15px; font-weight: 600 }
.flow li + li::before { content: ""; position: absolute; left: 26px; top: -10px; width: 1px; height: 10px; background: var(--clay) }

/* 두 프로그램 */
.progs { display: grid; gap: 14px; margin-top: 8px }
.prog { display: flex; flex-direction: column; background: var(--night-2); overflow: hidden }
.prog .ph { aspect-ratio: 16 / 10; overflow: hidden }
.prog .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--ease) }
@media (hover: hover) and (pointer: fine) { .prog:hover .ph img { transform: scale(1.03) } }
.prog-tx { display: flex; flex-direction: column; gap: 14px; padding: 24px 20px 26px }
.prog-en { font-family: var(--num); font-size: 44px; line-height: 1; color: var(--clay-l); letter-spacing: -.01em }
.prog .h3 { font-size: 23px; margin-top: -6px }
.prog-goal { font-size: 15.5px; color: rgba(245,243,237,.86) }
.kv div { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-top: 1px solid var(--line-n); border-bottom: 1px solid var(--line-n); font-size: 14px }
.kv dt { color: rgba(245,243,237,.55); font-size: 12.5px; padding-top: 1px }
.mini { display: grid; gap: 0; counter-reset: m }
.mini li { counter-increment: m; display: grid; grid-template-columns: 26px minmax(0, 1fr); font-size: 14px; padding: 6px 0; color: rgba(245,243,237,.86) }
.mini li::before { content: counter(m); font-family: var(--num); font-size: 17px; color: var(--clay-l); line-height: 1.4 }
.cand { display: flex; flex-direction: column; gap: 10px }
.cand > span { font-size: 12.5px; color: rgba(245,243,237,.55) }
.on-night .chip { background: rgba(245,243,237,.08); color: var(--paper); box-shadow: inset 0 0 0 1px var(--line-n) }
.base { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--line-n); margin-top: 6px }
.base .cap { color: rgba(245,243,237,.6); font-size: 10px }
.base ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px }
.base li { font-family: var(--serif); font-size: 17px; display: flex; align-items: center; gap: 10px }
.base li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--clay-l); flex: none }

/* 외래 · 입원 */
.vs { display: grid; gap: 14px }
.vs article { display: flex; flex-direction: column; gap: 10px; background: var(--paper); padding: 0 0 24px }
.vs article > *:not(.ph) { margin-left: 20px; margin-right: 20px }
.vs .ph { aspect-ratio: 16 / 9; overflow: hidden }
.vs .ph img { width: 100%; height: 100%; object-fit: cover }
.vs .h3 { margin-top: 10px }
.vs-sub { color: var(--clay); font-size: 14px; font-weight: 600; margin-top: -4px }
.vs ul { display: grid; border-top: 1px solid var(--line) }
.vs ul li { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px }

/* 경과 네 칸 */
.dom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line) }
.dom li { background: var(--paper); padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 8px; min-height: 112px }
.dom b { font-family: var(--serif); font-size: 18px; font-weight: 500 }
.dom span { font-size: 13.5px; color: var(--mute); line-height: 1.6 }
.dom-to { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 600; font-size: 14.5px }
.dom-to span:nth-child(2) { color: var(--clay) }

/* 함께 진료 */
.peer { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px; background: var(--paper-2) }
.peer img { width: 84px; height: 100px; object-fit: cover; object-position: 50% 15% }
.peer div { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.peer b { font-family: var(--serif); font-size: 17px; font-weight: 500 }
.peer p { font-size: 13.5px; color: var(--ink-2) }

@media (min-width: 720px) {
  .flow { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .flow li + li::before { left: -10px; top: 26px; width: 10px; height: 1px }
  .progs, .vs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .base { flex-direction: row; align-items: center; justify-content: space-between }
  .base ol { display: flex; gap: 28px }
  .dom { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}
@media (min-width: 1024px) {
  .s.one > .s-head { position: static; max-width: 720px }
  .prog-tx { padding: 32px 32px 34px }
  .voices q { font-size: 24px }
  .voices li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: baseline; gap: 24px }
  .voices div { flex-direction: column; gap: 2px }
}

/* 한글 라벨은 자간을 줄이고 본문 글꼴로 */
.cap.ko { font-family: var(--sans); letter-spacing: .04em; font-size: 12px; font-weight: 600; text-transform: none }
.flow .cap, .base .cap { font-family: var(--sans); letter-spacing: .04em; font-size: 12px; font-weight: 600; text-transform: none }
.done[hidden] { display: none }
@media (min-width: 1024px) { .close { max-width: none } }

/* ── 통증재활센터 ── */
/* 진료 찾기: 왼쪽 선택, 오른쪽 안내 (스크립트 없이 :has) */
.finder { display: grid; gap: 14px }
.need { border: 0; margin: 0; padding: 0; display: grid; gap: 6px }
.need legend { padding: 0; margin-bottom: 8px }
.need label { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; background: var(--paper-2); font-weight: 600; font-size: 15px; cursor: pointer; transition: background-color 200ms ease, color 200ms ease }
.need label::after { content: "→"; margin-left: auto; color: var(--clay); opacity: 0; transform: translateX(-6px); transition: opacity 200ms ease, transform 200ms var(--ease) }
.need input { position: absolute; opacity: 0; pointer-events: none }
.need label:has(input:checked) { background: var(--ink); color: var(--paper) }
.need label:has(input:checked)::after { opacity: 1; transform: none; color: var(--clay-l) }
.need label:has(input:focus-visible) { outline: 2px solid var(--clay); outline-offset: 2px }
@media (hover: hover) and (pointer: fine) { .need label:not(:has(input:checked)):hover { background: var(--paper-3) } }
.ans { display: none; flex-direction: column; gap: 10px; padding: 24px 22px; background: #FBFAF6; box-shadow: 0 1px 0 var(--line), 0 24px 60px -34px rgba(26,22,20,.3) }
.ans b { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -.03em; line-height: 1.35 }
.ans p { color: var(--ink-2); font-size: 15px }
.ans .cta-row { margin-top: 8px }
.ans .btn { height: 46px; padding: 0 20px; font-size: 14px }
.ans .btn.ghost { color: var(--ink) }
.finder:has(#n1:checked) [data-p="1"], .finder:has(#n2:checked) [data-p="2"], .finder:has(#n3:checked) [data-p="3"],
.finder:has(#n4:checked) [data-p="4"], .finder:has(#n5:checked) [data-p="5"], .finder:has(#n6:checked) [data-p="6"] { display: flex }
@media (prefers-reduced-motion: no-preference) { .ans { animation: up 360ms var(--ease) both } }

/* 여섯 클리닉: 크기가 다른 칸 */
.clin { display: grid; gap: 12px; margin-top: 8px }
.cl { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; background: var(--paper-2); scroll-margin-top: 120px }
.cl .ph { margin: -24px -20px 6px; aspect-ratio: 16 / 10; overflow: hidden }
.cl .ph img { width: 100%; height: 100%; object-fit: cover }
.cl-tx { display: flex; flex-direction: column; gap: 12px; min-width: 0 }
.cl-main { background: #FBFAF6; box-shadow: 0 1px 0 var(--line) }
.cl-dark { background: var(--night); color: var(--paper) }
.cl-dark .kv2 dt { color: rgba(245,243,237,.55) }
.cl-dark .kv2 div { border-color: var(--line-n) }
.cl-line { background: transparent; box-shadow: inset 0 0 0 1px var(--line) }
.tag { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--clay); padding: 4px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px currentColor }
.kv2 div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px }
.kv2 dt { font-size: 12.5px; color: var(--mute); padding-top: 2px }
.parts { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); margin-top: 4px }
.parts div { background: #FBFAF6; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 4px; scroll-margin-top: 120px }
.parts b { font-family: var(--serif); font-size: 16.5px; font-weight: 500 }
.parts span { font-size: 13px; color: var(--mute); line-height: 1.6 }
.parts div:target { background: #FFF6EF }
.pp { font-family: var(--num); font-size: 22px; color: var(--clay-l) }
.pp.sm { font-family: var(--sans); font-size: 13px; color: var(--mute) }

/* 프로그램 배치 */
.pmap { display: grid; gap: 1px; background: var(--line-n); border: 1px solid var(--line-n); margin-top: 8px }
.pmap li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 18px; background: var(--night) }
.pmap span { grid-column: 1 / -1; font-size: 12.5px; color: rgba(245,243,237,.55) }
.pmap b { font-family: var(--serif); font-size: 20px; font-weight: 500 }
.pmap i { font-family: var(--num); font-style: normal; color: var(--clay-l); margin-left: 6px; font-size: 19px }
.pmap em { font-style: normal; font-size: 14px; color: rgba(245,243,237,.75); grid-column: 1 }
.pmap a { grid-row: 2 / 4; grid-column: 2; align-self: center; text-decoration: none; color: var(--clay-l); font-weight: 600; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center }
.info { display: flex; flex-direction: column; gap: 14px; margin-top: 18px }
.info .h3 { color: var(--paper) }
.info ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.info li { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line-n) }
.info b { font-size: 15px }
.info span { font-size: 13px; color: rgba(245,243,237,.62) }

/* 입원 */
.wardpics { display: grid; grid-template-columns: 3fr 2fr; gap: 8px }
.wardpics img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover }
.wardpics img:first-child { aspect-ratio: auto; height: 100% }
.checks { display: grid; border-top: 1px solid var(--line) }
.checks li { display: flex; flex-direction: column; gap: 2px; padding: 15px 0 15px 30px; border-bottom: 1px solid var(--line); position: relative }
.checks li::before { content: ""; position: absolute; left: 2px; top: 22px; width: 12px; height: 6px; border-left: 1.5px solid var(--clay); border-bottom: 1.5px solid var(--clay); transform: rotate(-45deg) }
.checks b { font-size: 15.5px }
.checks span { font-size: 14px; color: var(--ink-2) }
.ph-wide { overflow: hidden; aspect-ratio: 16 / 9 }
.ph-wide img { width: 100%; height: 100%; object-fit: cover }

/* 의료진 둘 */
.doc2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.doc2 figure { display: flex; flex-direction: column; gap: 10px }
.doc2 img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 15%; background: var(--paper-3) }
.doc2 figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--mute) }
.doc2 figcaption b { font-family: var(--serif); font-size: 18px; font-weight: 500; color: var(--ink) }
.doc2 figcaption span:nth-child(2) { color: var(--clay); font-weight: 600 }

@media (min-width: 720px) {
  .clin { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .cl-main { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; padding: 0 }
  .cl-main .ph { margin: 0; aspect-ratio: auto; height: 100% }
  .cl-main .cl-tx { padding: 30px 30px 30px 0 }
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .cl-dark { grid-column: span 6; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px; padding: 0 }
  .cl-dark .ph { margin: 0; aspect-ratio: auto; height: 100%; order: 2 }
  .cl-dark .cl-tx { padding: 30px 0 30px 30px; justify-content: center }
  #postop, #sports { grid-column: span 3 }
  #function, #shingles { grid-column: span 3 }
  .pmap { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .info ol { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .finder { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start }
  .ans { position: sticky; top: 150px; padding: 32px 30px }
}

/* ── 통증재활과(진료과) ── */
.hero-sm .hero-in { min-height: min(68vh, 620px) }
.facts { display: grid; max-width: 1292px; margin: 0 auto; padding-left: var(--g); padding-right: var(--gr); box-sizing: border-box; border-top: 1px solid var(--line-n) }
.facts div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line-n); font-size: 13.5px }
.facts div:last-child { border-bottom: 0; padding-bottom: 18px }
.facts dt { font-family: var(--sans); color: rgba(245,243,237,.55); font-size: 12px; padding-top: 1px }
.facts dd { color: var(--paper) }
.methods { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line) }
.methods div { background: var(--paper); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 4px }
.methods b { font-family: var(--serif); font-size: 17px; font-weight: 500 }
.methods span { font-size: 13.5px; color: var(--ink-2) }
.axes { display: grid; gap: 12px; margin-top: 8px }
.axes article { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; background: var(--paper-2) }
.axes article.mid { background: var(--ink); color: var(--paper) }
.axes article.mid dt { color: rgba(245,243,237,.55) }
.axes article.mid dl div { border-color: var(--line-n) }
.axes article.mid .ax-n { color: var(--clay-l) }
.ax-n { font-family: var(--num); font-size: 30px; color: var(--clay); line-height: 1 }
.axes dl div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px }
.axes dt { font-size: 12.5px; color: var(--mute); padding-top: 2px }
.axes .lnk { margin-top: auto }
.body-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px }
.body-grid a { display: flex; flex-direction: column; gap: 6px; padding: 16px 14px 18px; background: var(--paper-2); text-decoration: none; transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease) }
.body-grid a:active { transform: scale(.98) }
.body-grid b { font-family: var(--serif); font-size: 17px; font-weight: 500; display: flex; justify-content: space-between; gap: 8px }
.body-grid b::after { content: "→"; color: var(--clay); font-family: var(--sans) }
.body-grid span { font-size: 12.5px; color: var(--mute); line-height: 1.6 }
@media (hover: hover) and (pointer: fine) { .body-grid a:hover { background: var(--ink); color: var(--paper) } .body-grid a:hover span { color: rgba(245,243,237,.7) } }
.docs { display: grid; gap: 40px; margin-top: 8px }
.sched { overflow-x: auto; margin-top: 12px; background: var(--paper) }
.sched table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.sched caption { text-align: left; padding: 16px 16px 8px; font-family: var(--serif); font-size: 17px }
.sched th, .sched td { padding: 12px 10px; border-top: 1px solid var(--line); text-align: center; font-weight: 400 }
.sched thead th { font-size: 12.5px; color: var(--mute) }
.sched tbody th { text-align: left; font-weight: 600; padding-left: 16px; white-space: nowrap }
.sched tbody th span { display: block; font-size: 12px; font-weight: 400; color: var(--mute) }
.sched td.hi { color: var(--clay); font-weight: 700 }
.go2 { display: grid; gap: 10px; margin-top: 8px }
.go2 a { display: grid; grid-template-columns: 96px minmax(0, 1fr) 24px; gap: 16px; align-items: center; padding: 10px 16px 10px 10px; background: var(--paper-2); text-decoration: none; transition: background-color 200ms ease, transform 160ms var(--ease) }
.go2 a:active { transform: scale(.98) }
.go2 img { width: 96px; height: 72px; object-fit: cover }
.go2 span { display: flex; flex-direction: column; gap: 2px; min-width: 0 }
.go2 b { font-family: var(--serif); font-size: 18px; font-weight: 500 }
.go2 em { font-style: normal; font-size: 13px; color: var(--mute) }
.go2 i { font-style: normal; color: var(--clay); transition: transform 200ms var(--ease) }
@media (hover: hover) and (pointer: fine) { .go2 a:hover { background: var(--paper-3) } .go2 a:hover i { transform: translateX(4px) } }
@media (min-width: 720px) {
  .methods { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .axes { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .body-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .facts div { grid-template-columns: 1fr; gap: 2px; border-bottom: 0; padding: 16px 0 22px }
  .facts div + div { padding-left: 24px; border-left: 1px solid var(--line-n) }
  .docs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px }
  .docs .doc { grid-template-columns: 1fr }
  .go2 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .go2 a { grid-template-columns: 1fr; padding: 0 0 18px; gap: 14px }
  .go2 img { width: 100%; height: auto; aspect-ratio: 4 / 3 }
  .go2 span, .go2 i { padding: 0 18px }
  .go2 i { display: none }
}
@media (min-width: 1024px) { .docs .doc-ph { max-width: 300px } }
@media (min-width: 1024px) { .s.one { align-items: stretch } }
.pp { font-family: var(--serif); font-size: 18px }
@media (min-width: 1024px) { .facts { max-width: none } }

/* ── 2026-10-29 비주얼 고도화 레이어 (유튜브 랜딩과 같은 문법) ─────────────
   모눈 무늬(재활) · 점토 빛 · 종이 질감 · 들어 올린 카드 · 그라데이션 버튼 · 히어로 보강 */
:root{
  --grid-d:linear-gradient(rgba(227,162,133,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(227,162,133,.11) 1px,transparent 1px),linear-gradient(rgba(227,162,133,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(227,162,133,.045) 1px,transparent 1px);
  --grid-l:linear-gradient(rgba(24,22,20,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(24,22,20,.065) 1px,transparent 1px),linear-gradient(rgba(24,22,20,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(24,22,20,.028) 1px,transparent 1px);
  --grid-size:60px 60px,60px 60px,12px 12px,12px 12px;
  --lift:0 1px 0 rgba(24,22,20,.06),0 18px 40px -24px rgba(60,40,28,.35);
}
body::after{content:"";position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .08 0 0 0 0 .07 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 히어로: 아래 점토 빛 + 모눈(아래쪽만) + 글 대비 강화 */
.hero::after{background:
  radial-gradient(70% 45% at 0% 100%,rgba(174,82,55,.4),transparent 70%),
  linear-gradient(180deg,rgba(21,17,15,.5) 0%,rgba(21,17,15,.18) 24%,rgba(21,17,15,.82) 58%,#15110F 100%)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grid-d);background-size:var(--grid-size);
  -webkit-mask-image:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 80%,#000);mask-image:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.85) 80%,#000)}
.hero .h1{text-shadow:0 2px 24px rgba(0,0,0,.4)}
.hero .h1::after{content:"";display:block;width:56px;height:2px;margin-top:22px;border-radius:2px;background:linear-gradient(90deg,var(--clay-l),rgba(227,162,133,0))}
.hero .who{display:flex;align-items:center;gap:12px}
.hero .who .av{width:48px;height:48px;border-radius:50%;overflow:hidden;flex:none;background:radial-gradient(circle at 50% 35%,#F7EFE8,#D9C9B9);box-shadow:0 0 0 2px rgba(227,162,133,.55),0 8px 20px -8px rgba(0,0,0,.6)}
.hero .who .av+.av{margin-left:-22px}
.hero .who .av img{width:100%;height:100%;object-fit:cover;object-position:50% 14%;transform:scale(1.3);transform-origin:50% 10%}
.hero .who b{display:block;font-family:var(--serif);font-weight:500;font-size:16.5px;color:var(--paper)}
.hero .who span{font-size:12.5px;color:rgba(245,243,237,.7)}
/* 층 · 사실 줄: 유리면 + 숫자 그라데이션 */
.floors,.facts{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0));backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.floors b{background:linear-gradient(180deg,#fff 30%,#F3C7B2);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (min-width:1024px){
  .hero::after{background:radial-gradient(55% 60% at 0% 100%,rgba(174,82,55,.38),transparent 70%),
    linear-gradient(90deg,rgba(21,17,15,.94) 0%,rgba(21,17,15,.7) 38%,rgba(21,17,15,.12) 78%),linear-gradient(180deg,rgba(21,17,15,.35),transparent 30%,rgba(21,17,15,.75))}
  .hero::before{-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 36%,transparent 58%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.6) 36%,transparent 58%)}
}

/* 어두운 띠 · 마무리: 점토 빛 두 점 + 가장자리로 사라지는 모눈 */
.band,.close{position:relative;isolation:isolate;
  background:radial-gradient(90% 60% at 0% 0%,rgba(174,82,55,.26),transparent 60%),radial-gradient(80% 60% at 100% 100%,rgba(227,162,133,.12),transparent 62%),linear-gradient(180deg,#1E1A17,#16120F)}
.band::before,.close::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grid-d);background-size:var(--grid-size);
  -webkit-mask-image:radial-gradient(75% 65% at 70% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(75% 65% at 70% 30%,#000 10%,transparent 75%)}
/* 밝은 띠: 종이 두 겹 + 위쪽 모눈 */
.tint{position:relative;isolation:isolate;background:linear-gradient(180deg,#EDE9DF 0%,#F2EEE6 55%,var(--paper) 100%)}
.tint::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grid-l);background-size:var(--grid-size);
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.cap::before{background:linear-gradient(90deg,transparent,currentColor)}

/* 카드: 위에서 빛이 드는 흰 면 + 따뜻한 그림자 */
.cl,.prog,.vs article,.axes article,.body-grid a,.doc,.form,.ans,.pmap li,.info,.voices li,.methods div,.go2 a,.peer,.finder,.base,.dom li,.faq details{
  background:linear-gradient(180deg,#FFFFFF,#FBF9F4);box-shadow:var(--lift),inset 0 1px 0 #fff;border-color:transparent}
.cl-dark{background:linear-gradient(160deg,#2A231F,#1A1614)!important;box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
.band .prog,.band .pmap li,.on-night .prog{background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.axes article.mid{background:linear-gradient(160deg,#2A231F,#1A1614);color:var(--paper)}
@media (hover:hover) and (pointer:fine){
  .body-grid a,.go2 a,.cl{transition:transform 240ms var(--ease),box-shadow 240ms var(--ease)}
  .body-grid a:hover,.go2 a:hover,.cl:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(24,22,20,.06),0 26px 50px -26px rgba(60,40,28,.45)}
}

/* 버튼 */
.btn{background:linear-gradient(180deg,#BC5D40,var(--clay));box-shadow:0 10px 24px -12px rgba(174,82,55,.8),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
.btn.ink{background:linear-gradient(180deg,#2E2824,var(--ink))}
.bar .r{background:linear-gradient(180deg,#BC5D40,var(--clay))}
.form::before{content:"";display:block;height:3px;margin:-1px 0 6px;border-radius:3px;background:linear-gradient(90deg,var(--clay),var(--clay-l))}

/* 사진: 아래쪽 점토빛 그늘 */
.fig::after{background:linear-gradient(180deg,rgba(26,22,20,0) 45%,rgba(26,22,20,.72)),linear-gradient(200deg,transparent 50%,rgba(174,82,55,.2))}
.doc-ph{background:radial-gradient(60% 55% at 50% 38%,#FFFFFF 0%,#F1ECE2 55%,#E2DACB 100%)}

/* PC: 키가 큰 사진을 줄인다 */
@media (min-width:1024px){
  .fig img{max-height:640px}
  .cl .ph img,.prog .ph img,.vs .ph img{aspect-ratio:4/3;height:auto;max-height:360px;object-fit:cover}
  .wardpics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wardpics img{aspect-ratio:4/3;max-height:340px;object-fit:cover}
  .ph-wide img{max-height:460px;object-fit:cover;width:100%}
}
/* 휴대폰: 제목 · 본문 간격 */
@media (max-width:640px){
  .h1{line-height:1.3}
  .h2{line-height:1.42}
  .lead{line-height:1.75}
  .s-head{gap:12px}
  .hero .who b{font-size:15.5px}
}
.hero::after{z-index:-2}
.close{color:var(--paper)}
.close p.h1{color:var(--paper)}
.close p.h1 em{color:var(--clay-l)}
.close .cap{color:var(--clay-l)}
/* 마무리는 원래대로 종이 위(본문 폭 상자라 어두운 면을 깔지 않는다), 모눈만 옅게 */
.close{background:transparent;color:var(--ink)}
.close p.h1{color:var(--ink)}
.close p.h1 em{color:var(--clay)}
.close .cap{color:var(--clay)}
.close::before{background-image:var(--grid-l);-webkit-mask-image:radial-gradient(60% 70% at 20% 60%,#000,transparent 75%);mask-image:radial-gradient(60% 70% at 20% 60%,#000,transparent 75%)}

/* 실제 접수(kd-send.js) 실패 안내 · 보내는 중 버튼 */
.fail { padding: 12px 14px; background: #F6E3DC; color: #A1361E; font-size: 13.5px }
.fail[hidden] { display: none }
.btn:disabled { opacity: .55; pointer-events: none }

/* ── v2 (2026-10-30): 갈라진 히어로 · 사진 초점 · 어두운 띠 안 상자 · 의료진 사진 톤 ── */
.h1-k{display:flex;align-items:center;gap:14px;margin-bottom:14px;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--clay-l)}
.h1-k::before{content:"";width:26px;height:1px;background:currentColor;opacity:.7}
.hero .cap:has(+ .h1 .h1-k){display:none}
/* 휴대폰: 사진 위 · 글은 아래 어두운 면 */
@media (max-width:1023px){
  .hero > img{height:min(52vh,460px);bottom:auto;-webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
  .hero::after{background:radial-gradient(90% 40% at 0% 100%,rgba(174,82,55,.34),transparent 70%),linear-gradient(180deg,rgba(21,17,15,.28) 0,rgba(21,17,15,0) 24%,rgba(21,17,15,.2) 36%,#15110F min(50vh,440px),#15110F)}
  .hero .hero-in{min-height:0;padding-top:calc(min(52vh,460px) - 34px)}
  .hero .h1{text-shadow:none}
}
/* PC: 왼쪽 글(모눈 · 점토 빛), 오른쪽 사진 */
@media (min-width:1024px){
  .hero > img{left:auto;width:56%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 38%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.55) 16%,#000 38%)}
  .hero::after{background:radial-gradient(48% 70% at 0% 100%,rgba(174,82,55,.36),transparent 70%),radial-gradient(30% 40% at 40% 0%,rgba(227,162,133,.1),transparent 70%),
    linear-gradient(90deg,#15110F 0%,#15110F 40%,rgba(21,17,15,.5) 56%,rgba(21,17,15,.06) 74%),linear-gradient(180deg,rgba(21,17,15,.3),transparent 26%,transparent 70%,rgba(21,17,15,.6))}
  .hero::before{-webkit-mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 34%,transparent 52%);mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.7) 34%,transparent 52%)}
  .hero .hero-in > *{max-width:560px}
  .hero .hero-in > .h1{max-width:720px}
  .hero .h1{text-shadow:none}
}
/* 이미지에 width·height 를 넣었으니, CSS 가 높이를 정하지 않은 곳은 비율대로 */
:where(img[height]){height:auto}
/* 가로로 긴 사진 띠: 덜 자르고, 얼굴 초점 */
.fig img{aspect-ratio:16/10}
@media (min-width:1024px){.fig img{aspect-ratio:auto;height:min(64vh,640px)}}
/* 어두운 띠 안 안내 상자: 흰 판 대신 유리면 */
.band .info{background:none;box-shadow:none;padding:0}
.band .info li{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));border-color:rgba(227,162,133,.22);border-radius:14px}
.band .info b{color:var(--paper)}
/* 의료진 사진: 배경 톤을 같은 종이빛으로 맞춘다 */
.doc-ph,.doc2 .ph,.peer .av,.docs .doc-ph{background:radial-gradient(120% 90% at 50% 20%,#FBF8F2,#E6DDD0)}
.doc-ph img,.doc2 img,.peer img{mix-blend-mode:multiply}