/* [만들어진 파일] work/v2/pagekit.py — 센터 속 쪽(교통사고·척추관절·산재·시설안내 …)만 쓴다. 손으로 고치지 말 것 — 다시 지으면 덮인다.
   토큰(--hm-*)과 **글자 사다리(--hm-t0~t6 · px 바닥)·카드 공통은 css/v2-home.css(body.dn_homepage · home.py) 한 곳** — 여기는 속 쪽만의 부품·간격·움직임.
   강조색은 --dn-accent 하나(extras · body.is-spine 이 덮는다). 값은 2026-09-22 design 진단(아티팩트 9458umHycLyCikqb17NThW)과 원장님 답 일곱.
   척추관절센터의 바탕·선·모래색(tokens.css)과 절 제목(.dn_hm__h2)·폰 카드 사진 높이도 v2-home.css 한 곳 — 홈과 속 쪽이 같아졌다(원장님 2026-09-22 답 ②③④). */

/* 첫 화면 — 왼쪽 단색 판 55%(--hm-bg · 글) + 오른쪽 사진 45%(cover · saturate .6) · 560px 이상 · 글은 세로 가운데. 글을 사진 위에 얹지 않으니 베일이 없다
   (원장님 2026-09-22 밤 「배경 사진 색감이 강해 가독성이 떨어져 → 단순한 사진 · 글이 잘 보이게」 · 앞 판의 전폭 띠+베일은 지웠다 · 「판 + 오른쪽 사진」 부품은 네 쪽 그대로 — 원장님 결정).
   글 덩이는 **판 가운데**(원장님 2026-09-22 밤 「첫 화면 글 배치가 왼쪽으로 쏠려 있음」) : .dn_band__in 은 inner 의 105rem·3rem 여백을 풀어 뷰포트 전체(55fr | 45fr = 사진의 left:55% 와 같은 선) ·
   글 덩이(.dn_band__txt)는 폭이 판의 88%(704 까지 · 2026-09-25 전에는 내용만큼)이고 칸 가운데(justify-self:center) → 좌우 여백이 늘 같다(1440 실측 전 : 왼 86 · 오른 57 · 뿌리 16px 인 넓은 창에서는 더 벌어졌다).
   88% 인 까닭 : 44px 주 문장 한 줄(「사고 직후에 진료를 받아야 합니다」)과 20px 서포트 한 줄이 1440 의 판(792)에서 ~690px — 80% 로 막으면 셋째 줄이 생긴다.
   글 : 작은 글 강조색 · kicker(옛 h1 자리 · t5/500 ink2) · 주 문장 **44px/700** 1.25 24ch(둘이면 둘 다 · 사이 44 · 원장님 밤 5 「더 강조되게」) · 서포트 **20px/500** 강조색(판 위 대비 4.5 이상을 잰다) · 부제 강조색 · 본문 ink2.
   1025~1440 은 주 문장·서포트가 뷰포트에 비례(clamp(30px,3.0556vw,44px) · clamp(16px,1.389vw,20px) — 1440 에서 꼭 44·20)해 판이 좁아져도 줄 수가 안 는다 · 폰(≤1024) 30/16.
   서포트는 **한 줄**(원장님 「줄바꿈 하지 말 것」) — 대시(—) 앞뒤 토막을 nowrap 으로 감싸(build 의 sp) 폰에서 두 줄이 불가피하면 대시 앞에서만 꺾인다. 사진이 없는 쪽은 판만 */
.dn_pg .dn_band{position:relative;min-height:560px;display:flex;align-items:center;padding:0;overflow:hidden;background:var(--hm-bg);color:var(--hm-ink)}
.dn_pg .dn_band__img{position:absolute;left:55%;top:0;width:45%;height:100%;object-fit:cover;display:block;filter:saturate(.6)}
.dn_pg .dn_band__in{position:relative;width:100%;max-width:none;display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);padding:max(4rem,64px) 0}
.dn_pg .dn_band__txt{grid-column:1;justify-self:center;width:min(88%,max(44rem,704px));min-width:0}   /* 폭은 **쪽마다 같게**(내용만큼이 아니라) — 판의 88% 와 본문(.dn_hero__p) 최대 폭 704 가운데 작은 것. 내용만큼(max-content)이면 글이 짧은 쪽의 덩이가 가운데로 모여 왼쪽 끝이 쪽마다 달랐다(원장님 2026-09-25 「수술 후 재활 첫 화면이 오른쪽으로 밀려 있다」 · 1440 왼쪽 끝 수술 후 재활 129.6 · 교통사고 56.1 · 척추교정·산재·시설 47.5 → 다섯 쪽 47.5) */
.dn_pg .dn_crumb{display:flex;gap:.5rem;align-items:center;font-size:var(--hm-t0);color:var(--hm-mute)}
.dn_pg .dn_crumb a{color:inherit}
.dn_pg .dn_crumb i{font-style:normal;opacity:.6}
.dn_pg .dn_crumb b{font-weight:600;color:var(--hm-ink)}
.dn_pg .dn_band .dn_hm__eb{margin-top:max(1.5rem,24px)}
.dn_pg .dn_band__k{margin-top:max(.875rem,14px);font-size:var(--hm-t5);font-weight:500;line-height:1.6;color:var(--hm-ink2)}
.dn_pg .dn_band__st{margin-top:max(1.5rem,24px)}
.dn_pg .dn_band__st+.dn_band__st{margin-top:max(2.75rem,44px)}   /* 두 덩이 사이 ≥40(원장님 2026-09-22 밤 5) */
.dn_pg .dn_band h1,.dn_pg .dn_band__m{margin:0;font-family:'dn-title',serif;font-weight:700;font-size:clamp(calc(30px*var(--dn-fs,1)),3.0556vw,calc(44px*var(--dn-fs,1)));line-height:1.25;letter-spacing:-.01em;max-width:15.45em;text-wrap:balance;color:var(--hm-ink)}   /* 15.45em = 을유1945 의 25ch(「0」 폭 .618em × 25) — 글꼴이 바뀌어도 상자 폭이 그대로이게 ch 대신 em(2026-09-25 제목 글꼴 dn-title · ch 는 글꼴마다 달라 본명조면 6.5% 좁아진다). 25ch 까닭 : 24ch(652.6px · 44px 을유)는 척추교정 둘째 줄 「틀어진 척추를 손으로 바로잡습니다」(자연 폭 662.6px)가 3줄로 꺾였다(audit 2026-09-23) */
.dn_pg .dn_band__l{display:block;font-family:inherit}   /* 주 문장의 줄(build 의 br) — <br> 대신 block span : <br> 이 있으면 Chromium 이 text-wrap:balance 를 끈다(2026-09-23 실측 · 폰 「합니다」 고아).
   ⚠ font-family:inherit — 원본 reset.css 의 `*{font-family:Pretendard,…}` 가 이 span 에도 걸려 h1 의 제목 글꼴(그때 을유 · 지금 'dn-title')을 덮었다(2026-09-23 실측 CSS.getPlatformFontsForNode : h1 = Pretendard-Bold · 둘째 주 문장 p = 을유 SemiBold → 원장님 「왜 글씨체가 다른거야」 · docs/63 5-20).
   computed font-family 는 h1 도 제목 글꼴이라 소스·computed 만 보면 같아 보인다 — 글자를 실제로 그린 글꼴을 재야 잡힌다 */
.dn_pg .dn_band__sp{margin-top:max(.875rem,14px);font-size:clamp(calc(16px*var(--dn-fs,1)),1.389vw,calc(20px*var(--dn-fs,1)));font-weight:500;line-height:1.6;color:var(--dn-accent);max-width:none}   /* 서포트 문장 — 주 문장 바로 아래 · 강조색(원장님 3) · 한 줄(폭 제한 없음) */
.dn_pg .dn_band__sp .nb,.dn_pg .dn_band__k .nb{white-space:nowrap}   /* 서포트는 대시 앞뒤 토막 — 꺾이려면 대시 앞에서만 · kicker 는 첫 쉼표 앞뒤 토막 — 꺾이려면 쉼표 뒤에서만(교통사고 폰 「…회복을 / 결정합니다」 · audit 2026-09-24) */
.dn_pg .dn_band .dn_hero__sub{margin-top:max(1.5rem,24px);font-size:1.375rem;font-weight:600;line-height:1.5}   /* 색은 홈 규칙(.dn_hm .dn_hero__sub 강조색) 그대로 */
.dn_pg .dn_band .dn_hero__p{margin-top:max(1.125rem,18px);font-size:max(1.0625rem,calc(17px*var(--dn-fs,1)));line-height:1.8;max-width:max(44rem,704px);color:var(--hm-ink2)}
.dn_pg .dn_band .dn_hero__act{margin-top:max(2rem,32px)}
.dn_pg .dn_band .dn_btn--brown{box-shadow:0 10px 24px rgba(20,30,32,.18)}
/* 첫 화면 아래 칸 줄(glance) — 판 바로 아래 제 절에(.dn_pg__glance) · 홈의 .dn_glance(v2-home.css) 위에 셋일 때의 칸 수와 무게만. 1024 아래는 한 줄씩 쌓는다(폰 규칙과 같은 선 · 홈의 두 칸 규칙이 걸리지 않게).
   교통사고 세 칸(원장님 2026-09-29 안 1) : 작은 줄 여럿(사이 .25rem) · 첫 칸 굵은 줄 강조색(크기는 다른 칸과 같음) · 「주차 안내」 글 링크(강조색 · 밑줄 3px 띄움) — 새 색·크기 없음 */
.dn_pg section.dn_pg__glance{padding:max(2.5rem,40px) 0 max(3rem,48px)}
.dn_pg .dn_glance{margin-top:0;padding-top:0;border-top:0}
.dn_pg .dn_glance--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dn_pg .dn_glance b{font-size:var(--hm-t5);font-weight:700}
.dn_pg .dn_glance span{font-size:var(--hm-t3);color:var(--hm-mute)}
.dn_pg .dn_glance>div>span+span{margin-top:.25rem}
.dn_pg .dn_glance>div>b,.dn_pg .dn_glance>div>span{text-wrap:pretty}   /* 줄 끝에 한 낱말만 남지 않게(320 셋째 칸 「… 주시면 / 됩니다」 · 2026-09-29 실측) — 줄 칸에만 건다 : 안쪽 .nb 에 걸면 그 white-space:nowrap 을 이겨 토막이 갈린다 */
.dn_pg .dn_glance .is-key b{color:var(--dn-accent)}
.dn_pg .dn_glance__park{color:var(--dn-accent);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
@media(min-width:1025px) and (max-width:1280px){.dn_pg .dn_glance--3>div:nth-child(3){padding-left:1.375rem;border-left:1px solid rgba(31,27,22,.14)}}   /* 홈의 ≤1280 두 칸 규칙(v2-home.css .dn_glance>div:nth-child(3))이 떼는 셋째 칸의 왼 여백·선을 세 칸 꼴에서 되돌린다 — 값은 .dn_glance>div 그대로 */
@media(max-width:1024px){.dn_pg .dn_glance--3{grid-template-columns:1fr;row-gap:0;padding-top:0}
  .dn_pg .dn_glance--3>div{padding:1rem 0;border-left:0;border-top:1px solid rgba(31,27,22,.14)}.dn_pg .dn_glance--3>div:first-child{border-top:0}}

/* 절의 호흡 — 절 제목(.dn_hm__h2 「얇고 크게」)은 v2-home.css 한 줄이 홈·속 쪽을 같이 덮는다(원장님 2026-09-22 답 ③) · 절 머리 위 hairline 1px 18% */
.dn_pg section{padding:5.5rem 0}
.dn_pg .dn_hm__head{position:relative;margin-bottom:2.75rem;padding-top:1.5rem}
.dn_pg .dn_hm__head::before,.dn_pg .dn_split__t::before{content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--hm-ink);opacity:.18}
.dn_pg .dn_hm__head>p{max-width:44rem;font-size:var(--hm-t2);line-height:var(--hm-lh)}
.dn_pg .dn_hm__h2row{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:max(1.5rem,24px);row-gap:0}   /* 제목 옆 인용 한 문장(section aside=) — 같은 .dn_hm__h2 꼴 · 같은 줄 · 좁으면(폰) 다음 줄. Ask 「“전화 한 통이면 됩니다”  “사고 직후 빠를수록 좋습니다.”」(원장님 2026-09-22 밤 10) */
.dn_pg .dn_hm__aside{color:var(--hm-ink)}
.dn_pg .dn_hm__h2--ask{text-wrap:pretty}   /* Ask 제목(큰따옴표 · section) — 폰 끝줄 한 낱말을 줄인다 : 시설안내 390 · 360 「… 물어보셔도 / 됩니다”」 → 「먼저 전화로 / 물어보셔도 됩니다”」 · 산재 390 「… 물어 / 주십시오”」 → 「… 바로 / 물어 주십시오”」(360 은 그대로). 교통사고 · 척추교정 · 재활은 1440 · 390 · 360 줄 나뉨 그대로(2026-09-27 실측 · Chromium 151). 모르는 브라우저는 그대로 */
.dn_pg section>.inner:not(.dn_band__in)>*+*:not(.dn_hm__head){margin-top:2.25rem}   /* 첫 화면 띠 안의 글(.dn_band__in)은 제 여백을 쓴다 — 2026-09-22 실측 h1·부제·본문이 전부 28.8px 로 벌어졌다 */

.dn_prose{max-width:62ch;display:flex;flex-direction:column;gap:1.75rem;font-size:var(--hm-t5);line-height:var(--hm-lh2);color:var(--hm-ink2)}
.dn_prose b,.dn_card__p b,.dn_check b,.dn_steps p b,.dn_note b{font-weight:700;color:var(--hm-ink)}
.dn_steps li p b{font-size:inherit;line-height:inherit}   /* 단계 글 안의 굵게(«…») — 단계 제목 규칙(.dn_steps li b · 한 단 크게)이 글 안의 굵게에도 걸려 글자가 커지던 것(2026-09-29 교통사고 「퇴근 뒤에도 오실 수 있습니다」에서 처음 씀) */

/* 카드 — 글자·안쪽 여백은 v2-home.css 공통 · 속 쪽은 사진 높이와 두·네 칸 격자, 아이콘 */
.dn_pg__cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dn_pg__cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:1025px){.dn_pg .dn_card>img{height:260px}}   /* PC 만 — 폰(≤1024)은 v2-home.css 의 .dn_card>img 180px 한 줄이 홈·속 쪽을 같이(원장님 2026-09-22 답 ④) */
.dn_pg .dn_card__b{gap:.625rem}
.dn_card--text{padding:1.5rem;background:var(--hm-bg)}
.dn_card--text .dn_card__b{padding:0}
.is-paper .dn_card--text{background:var(--hm-bg)}
.dn_pg section:not(.is-paper) .dn_card--text{background:var(--hm-paper)}
.dn_pg .dn_ic{flex:none;width:3rem;height:3rem;border-radius:.9rem;background:var(--hm-sand);color:var(--hm-brown);display:flex;align-items:center;justify-content:center;margin-bottom:.375rem}
.dn_pg .dn_ic svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dn_pg .dn_ic--fill svg{fill:currentColor;stroke:none}

/* 접힌 카드(fold) — <details> 로 만든 카드. 닫힘: 사진 · 작은 글 · 제목+「+」 · 한 줄 / 열림: 본문. 글 모듈은 cards(items, fold=True) · folds() · flow().
   값은 2026-09-22 design 명세(아티팩트 7votGaumaMpG1DCgm824Kk 3·4장) : 사진 410×168 · 몸 padding 16 gap 6 · 제목 t6 700 한 줄 · 한 줄 t3 · 「+」 22px 300 강조색 · 열린 본문 t2/1.8 mute.
   px 는 max(rem,px) 바닥 — 뿌리 rem 이 1440 에서 12.8px 라 rem 만 쓰면 20% 작게 먹는다. 여는 움직임 없음(details 기본) */
.dn_card--fold{display:block}
.dn_card--fold>summary{list-style:none;cursor:pointer;display:block}
.dn_card--fold>summary::-webkit-details-marker{display:none}
.dn_card--fold>summary:focus-visible{outline:2px solid var(--hm-brown);outline-offset:3px}
.dn_pg .dn_card--fold>summary>img{width:100%;height:168px;object-fit:cover;display:block;background:var(--hm-line);transition:transform .7s ease}
.dn_pg .dn_card--fold:hover>summary>img{transform:scale(1.04)}
/* 그림 카드(fig · _fold) — 사진 대신 자른 그대로 보이는 그림(X-ray·MRI 발췌 · 진단명 그림 · 1200×600) : 높이 고정·cover 로 자르지 않고 **2:1 비율대로** · 손 올려도 확대 없음 · 흰 바탕(원본이 흰 바탕) · 아래 선 하나.
   척추교정 Conditions(원장님 2026-09-23 「X-ray 는 발췌해 그대로」) — 폰은 두 칸이면 한 패널이 ~50px 이라 한 칸(.has-fig · 아래 폰 규칙) */
.dn_pg .dn_card--fold>summary>img.dn_card__fig{height:auto;aspect-ratio:2/1;object-fit:contain;background:var(--hm-paper);border-bottom:1px solid var(--hm-line)}
.dn_pg .dn_card--fold:hover>summary>img.dn_card__fig{transform:none}
.dn_pg .dn_card--fold .dn_card__b{padding:max(1rem,16px);gap:max(.375rem,6px)}
.dn_card--fold .dn_card__eb{line-height:1.4}
.dn_card--fold .dn_card__t{display:flex;justify-content:space-between;align-items:baseline;gap:.75rem;line-height:1.35}
.dn_card--fold .dn_card__t b{font-weight:700;min-width:0}
.dn_card--fold .dn_card__t i{flex:none;font-style:normal;line-height:1;color:var(--hm-brown)}
.dn_card--fold .dn_card__t i::before{content:"+";font-size:max(1.375rem,calc(22px*var(--dn-fs,1)));font-weight:300}
.dn_card--fold[open] .dn_card__t i::before{content:"–"}
.dn_card--fold .dn_card__1{font-size:var(--hm-t3);line-height:1.7;color:var(--hm-ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dn_card--fold>.dn_card__p{padding:0 max(1rem,16px) max(1rem,16px);display:flex;flex-direction:column;gap:max(1rem,16px)}   /* 문단 사이 ≥16px — .75rem 은 뿌리 12.8px 에서 9.6 이었다(검수 2026-09-23 · 폰 12) */
.dn_pg .dn_card--fold.is-text .dn_card__b{padding:max(1.5rem,24px)}
.dn_card--fold.is-text>.dn_card__p{padding:0 max(1.5rem,24px) max(1.5rem,24px)}
.dn_pg .is-paper .dn_card--fold.is-text{background:var(--hm-bg)}
.dn_pg section:not(.is-paper) .dn_card--fold.is-text{background:var(--hm-paper)}
.dn_folds{display:flex;flex-direction:column;gap:max(1rem,16px)}
/* 플로우 — 접힌 카드 3~5 마디를 화살표(49px 칸 · 선 24px 강조색)로. 마디 닫힘 높이(129)만큼 화살표를 가운데에 */
.dn_flow{display:grid;align-items:start}
.dn_flow--3{grid-template-columns:minmax(0,1fr) 49px minmax(0,1fr) 49px minmax(0,1fr)}
.dn_flow--4{grid-template-columns:minmax(0,1fr) 49px minmax(0,1fr) 49px minmax(0,1fr) 49px minmax(0,1fr)}
.dn_flow--5{grid-template-columns:minmax(0,1fr) 49px minmax(0,1fr) 49px minmax(0,1fr) 49px minmax(0,1fr) 49px minmax(0,1fr)}
.dn_flow__arr{display:flex;align-items:center;justify-content:center;min-height:129px;color:var(--hm-brown)}
.dn_flow__arr svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* 한 줄 details(unfold) — 제목과 「+」 한 줄, 열면 안의 덩이. FAQ 줄과 같은 꼴 */
.dn_unfold{border-top:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line)}   /* 전폭 — 견줌표 아래 「우리 사실」이 표(60%)와 사진 아래를 다 쓰게(원장님 2026-09-22 밤 8) */
.dn_unfold>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:max(1rem,16px) 0;font-size:var(--hm-t4);font-weight:700;line-height:1.45}
.dn_unfold>summary::-webkit-details-marker{display:none}
.dn_unfold>summary::after{content:"+";flex:none;font-weight:300;font-size:max(1.375rem,calc(22px*var(--dn-fs,1)));line-height:1;color:var(--hm-brown)}
.dn_unfold[open]>summary::after{content:"–"}
.dn_unfold__b{padding:0 0 max(1.25rem,20px);display:flex;flex-direction:column;gap:1.5rem}
.dn_unfold__b .dn_prose{font-size:var(--hm-t3);line-height:var(--hm-lh)}
/* 한 화면 절(fit) — Treatment 3×2 가 1440×900 안에 : 절 padding 56 · 머리 아래 32 · 소개 60rem · 격자 gap 20 */
.dn_pg section.dn_sec--fit{padding:max(3.5rem,56px) 0}
.dn_pg .dn_sec--fit .dn_hm__head{margin-bottom:max(2rem,32px)}
.dn_pg .dn_sec--fit .dn_hm__head>p{max-width:60rem}
.dn_pg .dn_sec--fit .dn_cards3{gap:max(1.25rem,20px)}

.dn_steps{counter-reset:step;display:flex;flex-direction:column;gap:1rem;max-width:56rem}
.dn_steps li{counter-increment:step;display:grid;grid-template-columns:2.75rem minmax(0,1fr);column-gap:1.25rem;row-gap:.4rem;padding:1.375rem 1.5rem;border:1px solid var(--hm-line);border-radius:14px;background:var(--hm-paper)}
.dn_steps li.has-ic{grid-template-columns:2.75rem minmax(0,1fr) 3rem}
.dn_steps li::before{content:counter(step);grid-row:1/3;grid-column:1;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--hm-brown);color:#fff;font-weight:700;font-size:var(--hm-t4);display:flex;align-items:center;justify-content:center}
.dn_steps li b{grid-column:2;font-size:var(--hm-t5);font-weight:700;line-height:1.4}
.dn_steps li p{grid-column:2;grid-row:2;font-size:var(--hm-t3);line-height:1.9;color:var(--hm-mute)}
.dn_steps li .dn_ic{grid-column:3;grid-row:1/3;margin:0;align-self:start}
.dn_pg section:not(.is-paper) .dn_steps li{background:var(--hm-paper)}
.dn_pg .is-paper .dn_steps li{background:var(--hm-bg)}
/* 다섯 단계 가로(row) — PC 만 : 5칸(틈 28) · 아이콘 위(56) · 제목 · 한 줄 가운데 · 칸 사이 화살(선 두 개로 그린 ›) · 번호는 칸 왼쪽 위 작은 동그라미. 폰은 위 세로 꼴 그대로(원장님 2026-09-22 밤 9 「왼쪽 쏠림 → 균형」) */
@media(min-width:1025px){
  .dn_steps--row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px;max-width:none}
  .dn_steps--row li,.dn_steps--row li.has-ic{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;padding:max(2rem,32px) max(1.125rem,18px) max(1.5rem,24px)}
  .dn_steps--row li .dn_ic{order:-1;width:3.5rem;height:3.5rem;margin:0 0 max(1rem,16px)}
  .dn_steps--row li::before{position:absolute;left:12px;top:12px;width:1.75rem;height:1.75rem;font-size:var(--hm-t0)}
  .dn_steps--row li b{font-size:var(--hm-t5)}
  .dn_steps--row li p{margin-top:max(.5rem,8px);font-size:var(--hm-t2);line-height:1.8}
  .dn_steps--row li:not(:last-child)::after{content:"";position:absolute;right:-19px;top:50%;width:10px;height:10px;border-top:2px solid var(--hm-brown);border-right:2px solid var(--hm-brown);transform:translateY(-50%) rotate(45deg)}
}

.dn_check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 2.5rem;max-width:60rem}
.dn_check li{position:relative;padding-left:1.875rem;font-size:var(--hm-t4);line-height:1.9;color:var(--hm-ink2)}
.dn_check li::before{content:"";position:absolute;left:.15rem;top:.7rem;width:.55rem;height:.3rem;border-left:2px solid var(--hm-brown);border-bottom:2px solid var(--hm-brown);transform:rotate(-45deg)}
.dn_kv--pg{margin-top:0;grid-template-columns:10rem minmax(0,1fr);max-width:56rem}
.dn_kv--pg dt{color:var(--hm-brown)}

.dn_split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.5rem;align-items:center}
.dn_split--flip .dn_split__f{order:-1}
.dn_split__t{position:relative;display:flex;flex-direction:column;gap:1.5rem;min-width:0;padding-top:1.5rem}
.dn_split__f{margin:0;border-radius:18px;overflow:hidden;background:var(--hm-line)}
.dn_split__f img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .7s ease}
.dn_split__f:hover img{transform:scale(1.04)}
/* 치료 하나의 세부(method · split 의 글 쪽) — 상자·배지 없이 선·간격·글자 크기로(원장님 2026-09-23 밤 「줄글 → 디자인 요소」 · 취향 「설명 띠·배지는 뺀다」).
   누가(t1 700 강조색 · 자간) · 이름(36px/300 · 절 제목과 같은 얇은 결) · 한 줄(t5 ink2) · 차례 = PC 가로 칸(칸마다 위 선 2px — 첫 칸만 강조색 · 번호 t1 700 강조색 · 제목 t4 700 · 글 t2 mute) · 짝 줄 = 용어 7rem | 설명(줄 아래 선 1px) */
.dn_mt{display:flex;flex-direction:column}
.dn_pg .dn_mt__who{font-size:var(--hm-t1);font-weight:700;letter-spacing:.06em;color:var(--dn-accent)}
.dn_pg .dn_mt__t{margin-top:max(.375rem,6px);font-size:max(2.25rem,calc(36px*var(--dn-fs,1)));font-weight:300;line-height:1.2;letter-spacing:-.02em;color:var(--hm-ink)}
.dn_pg .dn_mt__one{margin-top:max(.75rem,12px);font-size:var(--hm-t5);line-height:1.7;color:var(--hm-ink2);text-wrap:balance}   /* balance — 폰에서 「… 한의 / 치료입니다.」 한 낱말 줄(2026-09-23 실측) */
.dn_pg .dn_mt__how{margin:max(1.75rem,28px) 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:max(1.25rem,20px)}
.dn_pg .dn_mt__how--2{grid-template-columns:repeat(2,minmax(0,1fr))}.dn_pg .dn_mt__how--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dn_mt__how li{display:flex;flex-direction:column;gap:max(.375rem,6px);padding-top:max(.875rem,14px);border-top:2px solid var(--hm-line)}
.dn_mt__how li:first-child{border-top-color:var(--dn-accent)}
.dn_mt__how i{font-style:normal;font-size:var(--hm-t1);font-weight:700;letter-spacing:.08em;color:var(--dn-accent)}
.dn_mt__how b{font-size:var(--hm-t4);font-weight:700;line-height:1.45;color:var(--hm-ink)}
.dn_pg .dn_mt__how span{font-size:var(--hm-t2);line-height:1.75;color:var(--hm-mute);text-wrap:balance}   /* 폰 「… 어떻게 할지 / 정합니다.」 한 낱말 줄(2026-09-23 실측 둘) */
.dn_pg .dn_mt__kv{margin-top:max(1.75rem,28px);border-top:1px solid var(--hm-line)}   /* .dn_pg 를 붙인다 — .dn_hm dl{margin:0}(0,1,1) 이 이긴다 */
.dn_mt__kv>div{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:max(1rem,16px);padding:max(.875rem,14px) 0;border-bottom:1px solid var(--hm-line)}
.dn_mt__kv dt{font-size:var(--hm-t2);font-weight:700;line-height:1.75;color:var(--hm-brown)}
.dn_pg .dn_mt__kv dd{margin:0;font-size:var(--hm-t3);line-height:1.75;color:var(--hm-ink2);text-wrap:balance}   /* 폰 「… — 한 / 분 한 분 …」 꺾임(같은 날) */
.dn_split:has(.dn_mt){align-items:start}   /* 치료 세부 옆 사진은 위 맞춤 — 사진 위 끝 = 글 칸 위 끝(2026-09-23 PC 실측으로 정함 · 그때는 도수 글 칸에 손명철 카드가 들어 720px · 2026-09-24 카드는 split 밖으로) */
/* 글 3 : 사진 2(wide) — 사진이 글 칸 높이를 채운다(견줌표 옆 · 표의 오른쪽 빈자리를 사진으로) · 글 쪽 hairline 은 없다(표가 제 테두리를 가진다) */
.dn_split--wide{grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:max(2.5rem,40px);align-items:stretch}
.dn_split--wide .dn_split__t{padding-top:0}
.dn_split--wide .dn_split__t::before{display:none}
.dn_split--wide .dn_split__f{display:flex}
.dn_split--wide .dn_split__f img{height:100%;aspect-ratio:auto;object-fit:cover}
/* split(fill=True · 수술 후 재활 How : 사진 | 접힌 카드 다섯) — 폰·태블릿(쌓일 때) 사진 16:10(2026-09-24 부터의 비율 그대로 · PC 는 위 @media 가 칸 높이로 덮는다) */
.dn_split--fill .dn_split__f img{aspect-ratio:16/10}

/* 사진 여러 장 — 흑백으로 있다가 올리면 컬러 · 설명은 베일 위에(암 원본 sec05 의 손) · 폰은 손이 없으니 컬러·설명 고정 */
.dn_gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.dn_gal--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dn_gal--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.dn_gal figure{position:relative;margin:0;min-width:0;border-radius:14px;overflow:hidden;background:var(--hm-line);outline-offset:3px}
.dn_gal img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;filter:grayscale(1);transition:filter .6s ease,transform .7s ease}
.dn_gal figure:hover img,.dn_gal figure:focus-within img,.dn_gal figure:focus img{filter:none;transform:scale(1.04)}
.dn_gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:2.75rem 1.125rem 1rem;font-size:var(--hm-t2);line-height:1.5;color:#fff;background:linear-gradient(to top,rgba(20,24,24,.74),rgba(20,24,24,0));opacity:0;transform:translateY(.5rem);transition:opacity .45s ease,transform .45s ease}
.dn_gal figure:hover figcaption,.dn_gal figure:focus-within figcaption,.dn_gal figure:focus figcaption{opacity:1;transform:none}

/* 견줌표 — 마지막 칸(우리)만 모래색 바탕. 폰은 thead 를 숨기고 줄마다 쌓아 칸 이름(data-th)을 값 위에 */
.dn_cmp{max-width:64rem;overflow:hidden;border:1px solid var(--hm-line);border-radius:14px;background:var(--hm-paper)}
.dn_cmp table{width:100%;border-collapse:collapse;font-size:var(--hm-t3);line-height:1.75}
.dn_cmp th,.dn_cmp td{padding:1rem 1.125rem;text-align:left;vertical-align:top;border-top:1px solid var(--hm-line)}
.dn_cmp thead th{border-top:0;font-size:var(--hm-t2);font-weight:700;color:var(--hm-mute);background:var(--hm-bg)}
.dn_cmp tbody th{width:8rem;font-weight:700;color:var(--hm-ink)}
.dn_cmp td{color:var(--hm-ink2)}
.dn_cmp .is-us{background:var(--hm-sand);color:var(--hm-ink)}   /* 우리 칸 — compare(us=) 가 is-us 를 붙인다(기본은 마지막 칸) */
.dn_cmp thead th.is-us{color:var(--hm-brown)}
.dn_cmp td.is-us{font-weight:600}
/* 옛 표 꼴(grid) — 값 가운데 · 체크/대시 아이콘 20px(선 2.2) · 머리 52 · 줄 56 · 줄 이름 200(design 명세 6장) */
.dn_cmp--grid table{table-layout:fixed}   /* 값 칸 셋이 같은 폭(206)이 되게 — auto 면 글 길이대로 128~264 로 갈린다(2026-09-22 실측) */
.dn_cmp--grid th,.dn_cmp--grid td{padding:0 max(1rem,16px);text-align:center;vertical-align:middle}
.dn_cmp--grid thead th{height:52px}
.dn_cmp--grid th:first-child{width:200px}   /* 줄 이름 칸 폭 — table-layout:fixed 는 **첫 줄(thead)** 의 칸 폭을 쓴다 · tbody th 에만 주면 안 먹는다(2026-09-22 폰 실측 87×4) */
.dn_cmp--grid tbody th{height:56px;text-align:left;font-size:var(--hm-t4)}
.dn_cmp--grid tbody td{height:56px}
.dn_cmp__ok,.dn_cmp__no{display:inline-flex;vertical-align:middle}
.dn_cmp__ok{color:var(--hm-brown)}.dn_cmp__no{color:var(--hm-mute2)}
.dn_cmp--grid svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dn_cmp__tx{font-size:var(--hm-t4)}
.dn_cmp--grid td.is-us .dn_cmp__tx{font-weight:700;color:var(--hm-ink)}
/* 사람 카드 하나(person) — 홈의 .dn_doc 를 그대로, 칸 하나만 */
.dn_pg .dn_staff--solo{grid-template-columns:minmax(0,1fr)}
.dn_pg .dn_staff--solo .dn_doc__top>img{box-sizing:border-box;border:1px solid var(--hm-line)}   /* 사진 틀 선 1px — 손명철 사진은 흰 바탕이라 흰 카드에 붙어 틀이 안 보였다(audit 2026-09-24) · 크기는 그대로(border-box) · 홈 의료진 카드는 이 CSS 를 안 실어 안 바뀐다 */
/* split **바로 뒤**의 사람 카드(척추교정 · 수술 후 재활의 손명철) — 원장님 2026-09-24 「치료실장 상자가 좌측 사진과 정렬이 맞지 않음」(split 글 칸 안에서 사진 아래 끝을 71px 넘어 걸쳐 있었다) →
   카드를 split 밖 전폭 한 줄로(글 모듈 · 왼끝 = 사진 왼끝). PC 는 사진을 220 → 160(×211)으로 줄이고 이름·직함 → 약력 → 편지 링크를 한 칸에 위에서부터(링크는 사진 아래 끝) —
   검수 2026-09-24 B : 칸 셋(약력을 글 칸 선에)으로 두었더니 1440 에서 약력 아래 ~199px · 이름과 링크 사이 253px 가 비었다. 폰은 원래 카드 꼴.
   2026-10-07 수술 후 재활도 같은 꼴(원장님 「추천안대로」 — 사진 칸에 쌓던 카드가 약력 14줄로 접힌 카드보다 길어졌다) → 고르는 무늬를 「method split 뒤」에서 「split 뒤」로 넓혔다(사람 카드를 부르는 쪽은 이 둘뿐) */
@media(min-width:1025px){
  .dn_pg .dn_split+.dn_staff--solo .dn_doc{grid-template-columns:160px minmax(0,1fr)}
  .dn_pg .dn_split+.dn_staff--solo .dn_doc__top>img{width:160px;height:211px}
}

.dn_note{max-width:60rem;padding:1.375rem 1.625rem;border-left:3px solid var(--hm-brown);border-radius:0 14px 14px 0;background:var(--hm-sand);display:flex;flex-direction:column;gap:.5rem}
.dn_note b{font-size:var(--hm-t3)}
.dn_note p{font-size:var(--hm-t3);line-height:1.9;color:var(--hm-ink2)}

/* 상담 단추 셋(상담 신청 · 전화 · 카카오톡) 가로 큼직하게 — PC 높이 64 · 넓은 속 쪽에서 각 ≥220(원장님 2026-09-22 밤 11 · 좁은 칼럼 상자는 아래 단추 줄 주석) · 폰은 세로(전화는 아래 띠에 있어 숨김 · 앞 규칙 그대로). 글(text)은 있으면 위에 가운데.
   전화 단추 색은 홈 규칙(.dn_hm .dn_btn--tel 호박색 · main 이 2026-09-22 밤 되돌린 것) 그대로 · 카카오 색은 extras :root 의 --dn-kko 토큰 */
.dn_cta{display:flex;flex-direction:column;align-items:stretch;gap:max(1.5rem,24px);padding:max(2rem,32px);border:1px solid var(--hm-line);border-radius:18px;background:var(--hm-paper)}
.dn_pg .dn_cta p{font-size:var(--hm-t5);font-weight:600;line-height:1.6;text-align:center}
/* 단추 줄은 줄바꿈하는 flex(원장님 2026-10-05 「칼럼글 하단에 카카오상담 버튼 위치가 상자를 벗어남」) — 전에는 격자 세 칸 minmax(220px,1fr) 이라 세 칸 + 틈 둘 = 692px 가 바닥이어서,
   칼럼 글의 상자(읽는 칸 704 · 안 638)에서 카카오톡 단추가 상자 오른선 밖으로 21px 나갔다(1025~1920 · 글자 크기 보통). 이제 단추마다 바닥은 **제 글 폭**(max-content · 글은 안 꺾인다)이고
   남는 폭은 똑같이 나눈다(flex 1 1 0) → 들어가면 한 줄 세 칸 같은 폭 · 안 들어가면 줄을 바꾼다. 넓은 속 쪽(.inner)에서는 칸마다 220 을 훌쩍 넘어 전과 같다. 폰(≤1024)은 아래 @media 의 한 칸 격자 그대로 */
.dn_cta__act{display:flex;flex-wrap:wrap;gap:max(1rem,16px)}
.dn_pg .dn_cta__act .dn_btn{flex:1 1 0;min-width:max-content;height:64px;padding:0 1.5rem;font-size:var(--hm-t6);border-radius:16px;gap:.625rem}
.dn_pg .dn_cta__act .dn_btn svg,.dn_pg .dn_cta__act .dn_btn img{width:22px;height:22px;flex:none}
.dn_hm .dn_btn--kko{background:var(--dn-kko);color:var(--dn-kko-ink)}

/* FAQ — 암 서사 쪽(cancer/story/#faq · extras 의 .dn_faq__grid)과 **같은 꼴**(원장님 2026-09-22 밤 11 「본문 배경이 너무 타이트해서 안정감이 떨어짐 → 서사 쪽과 같은 디자인」) :
   두 칸 격자(틈 11.5 | 30.7 · 전폭) · 줄 위 hairline · 질문 앞 「Q」 동그라미(21.76 · 모래색 바탕 · 강조색 글자) · 오른끝 「+」(열리면 45° 회전) · 답은 Q 칸만큼 들여(33.3) 14px/300 1.8.
   라이브 서사 쪽 computed(1440 · 2026-09-22 실측) : summary 15px/600 1.5 padding 12.16 0 gap 11.52 · Q 21.75 원 #F3EADB 글자 강조색 13px/700 · + 16.64px/300 #8B8072 · p margin 0 0 12.8 33.28 14px/300 25.2 #3D362E · 줄 padding 2.56 0 border-top #E6DCC9.
   색은 토큰으로(#F3EADB → --hm-sand · #8B8072 → --hm-mute2 · #E6DCC9 → --hm-line2 · #3D362E → --hm-ink2) · 13px 은 사다리에 없어 t0(12px) · px 바닥은 max(rem,px).
   ⚠ 이름을 .dn_faq 에서 **.dn_qa** 로 바꿨다 — extras 의 `.dn_faq{background:#FDFBF6}`(암 원페이지 FAQ 절 이름 · v2-extra.css 는 모든 쪽에 실린다)이 이 상자에도 걸려 흰 종이 위에 크림 상자가 붙어 있었다
   (라이브 실측 background rgb(253,251,246) · 「본문 배경이 너무 타이트」의 정체 · 같은 이름 다른 물건 — docs/63 후보). 절 머리는 다른 절과 같은 자리(전폭) */
.dn_qa{display:grid;grid-template-columns:1fr 1fr;gap:max(.9rem,11.5px) max(2.4rem,30.7px);align-items:start}
.dn_qa__i{border-top:1px solid var(--hm-line2);padding:max(.2rem,2.5px) 0}
.dn_qa__i summary{list-style:none;cursor:pointer;display:flex;gap:max(.9rem,11.5px);align-items:flex-start;padding:max(.95rem,12px) 0;font-size:var(--hm-t4);font-weight:600;line-height:1.5;color:var(--hm-ink)}
.dn_qa__i summary::-webkit-details-marker{display:none}
.dn_qa__i summary::before{content:"Q";flex:0 0 max(1.7rem,21.75px);height:max(1.7rem,21.75px);border-radius:50%;background:var(--hm-sand);color:var(--hm-brown);font-size:var(--hm-t0);font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:.05rem}
.dn_qa__i summary::after{content:"+";margin-left:auto;font-size:max(1.3rem,calc(16.6px*var(--dn-fs,1)));font-weight:300;line-height:1;color:var(--hm-mute2);transition:transform .25s ease}
.dn_qa__i[open] summary::after{transform:rotate(45deg)}
.dn_pg .dn_qa__i p{margin:0 0 max(1rem,12.8px) max(2.6rem,33.3px);font-size:var(--hm-t2);font-weight:300;line-height:1.8;color:var(--hm-ink2)}

/* 가운데 문장(statement) — 36px/300 가운데 · 아래 작은 글 t4 mute · 「자세히」 details(design 명세 1장 · 새 크기는 이 둘만) */
.dn_state{text-align:center}
.dn_pg .dn_state__t{margin:0 auto;font-size:max(2.25rem,calc(36px*var(--dn-fs,1)));font-weight:300;line-height:1.4;letter-spacing:-.02em;color:var(--hm-ink);max-width:30ch;text-wrap:balance}
.dn_pg .dn_state__s{margin:max(1rem,16px) auto 0;font-size:var(--hm-t4);line-height:var(--hm-lh);color:var(--hm-mute);max-width:56ch}
.dn_state__m{display:inline-block;margin-top:max(.875rem,14px)}
.dn_state__m>summary{list-style:none;cursor:pointer;font-size:var(--hm-t2);font-weight:600;color:var(--hm-brown)}
.dn_state__m>summary::-webkit-details-marker{display:none}
.dn_state__m>summary::after{content:" +";font-weight:300}
.dn_state__m[open]>summary::after{content:" –"}
.dn_pg .dn_state__m p{margin:max(1rem,16px) auto 0;font-size:var(--hm-t2);line-height:var(--hm-lh);color:var(--hm-ink2);max-width:62ch;text-align:left}

/* 8주 타임라인(design 명세 2장) — PC : 자리 잡은 상자 250px · 띠 제목 위(y78) · 띠 32(y112~144 · r6 · 농도 85/60/40/22%) · 축 y150 1px ink 18% · 눈금 9(12px · 글 y166) ·
   마감선 3px 호박색(y104~200 · 라벨 아래 · left 는 날/56 · 마크업의 --tl-x) · 사고 점 r8 · 8주 점 r7 흰 속. 눌린 것은 안쪽 테두리 1.5px ink 50%. 패널은 JS 가 채운다(hidden 을 뗌) · JS 없으면 「주차별 세부 보기」 details */
.dn_tl__pc{position:relative;height:250px;margin:0 max(3rem,48px)}
.dn_tl__bands{position:absolute;left:0;right:0;top:76px;display:grid;grid-template-columns:var(--tl-cols,1fr 3fr 3fr 1fr);gap:2px}
.dn_tl__band{display:flex;flex-direction:column;align-items:center;gap:max(.9375rem,15px);padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
.dn_tl__band>span{font-size:var(--hm-t4);font-weight:700;line-height:1.4;white-space:nowrap}
.dn_tl__band>i{display:block;width:100%;height:32px;border-radius:6px;background:var(--hm-brown);background:color-mix(in srgb,var(--hm-brown) var(--tl-op,85%),var(--hm-paper));transition:box-shadow .2s}   /* 앞의 한 줄은 color-mix 를 모르는 브라우저용 대비책(띠가 통째로 비지 않게) */
.dn_tl__band:nth-child(2)>i{--tl-op:60%}.dn_tl__band:nth-child(3)>i{--tl-op:40%}.dn_tl__band:nth-child(4)>i{--tl-op:22%}
.dn_tl__band:hover>i,.dn_tl__band:focus-visible>i,.dn_tl__band[aria-pressed="true"]>i{box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--hm-ink) 50%,transparent)}
.dn_tl__band:focus-visible,.dn_tl__mark:focus-visible{outline:2px solid var(--hm-brown);outline-offset:3px}
.dn_tl__axis{position:absolute;left:0;right:0;top:150px;height:1px;background:var(--hm-edge2);background:color-mix(in srgb,var(--hm-ink) 18%,transparent)}
.dn_tl__dot{position:absolute;top:50%;left:0;width:16px;height:16px;border-radius:50%;background:var(--hm-brown);translate:-50% -50%}
.dn_tl__dot.is-end{left:100%;width:14px;height:14px;background:var(--hm-paper);border:2px solid var(--hm-brown)}
.dn_tl__ticks{position:absolute;left:0;right:0;top:144px;height:0}
.dn_tl__tick{position:absolute;top:0;left:var(--tl-x);translate:-50% 0;padding-top:22px;font-size:var(--hm-t0);font-weight:500;line-height:1.4;color:var(--hm-mute);white-space:nowrap}   /* 자리는 마크업의 --tl-x(주/전체 주 · timeline 이 센다) — 8주(12.5% 간격)도 12주도 같은 규칙 */
.dn_tl__tick::before{content:"";position:absolute;left:50%;top:0;width:1px;height:12px;background:var(--hm-edge2);background:color-mix(in srgb,var(--hm-ink) 30%,transparent)}
.dn_tl__tick.is-end{font-weight:700;color:var(--hm-ink)}
.dn_tl__mark{position:absolute;top:104px;height:96px;left:var(--tl-x);width:3px;padding:0;border:0;background:var(--hm-amber);cursor:pointer;font:inherit;color:inherit}
.dn_tl__mark>span{position:absolute;left:8px;top:100%;margin-top:10px;font-size:var(--hm-t0);font-weight:700;line-height:1.4;color:var(--hm-ink);white-space:nowrap}
.dn_tl__mark:hover>span,.dn_tl__mark[aria-pressed="true"]>span{text-decoration:underline;text-underline-offset:.2em}
/* 패널 — 제목 | 글 두 열(1fr ≥200 | 2.4fr · 글이 62ch 에 막혀 왼쪽에 쏠리던 것 · 원장님 2026-09-22 밤 7) + 아래 「← 이전 · n / 6 · 다음 →」 줄(JS 가 날짜순으로 돈다 · 끝에서는 disabled · 키보드는 native button) */
.dn_tl__p{margin-top:max(1.25rem,20px);padding:max(1.5rem,24px) max(1.75rem,28px) max(1.125rem,18px);border:1px solid var(--hm-line);border-radius:14px;background:var(--hm-paper)}
.dn_tl__pb{display:grid;grid-template-columns:minmax(200px,1fr) minmax(0,2.4fr);column-gap:max(2.5rem,40px);align-items:start;min-height:64px}
.dn_tl__p b{display:block;font-size:var(--hm-t5);font-weight:700;line-height:1.5}
.dn_pg .dn_tl__p p{margin:0;font-size:var(--hm-t4);line-height:var(--hm-lh);color:var(--hm-ink2)}
.dn_tl__nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:max(1.25rem,20px);padding-top:max(1rem,16px);border-top:1px solid var(--hm-line)}
.dn_tl__nav button{font:inherit;font-size:var(--hm-t3);font-weight:700;line-height:1;color:var(--hm-brown);background:var(--hm-paper);border:1px solid var(--hm-edge2);border-radius:999px;height:40px;padding:0 max(1.125rem,18px);cursor:pointer}
.dn_tl__nav button:hover{background:var(--hm-sand)}
.dn_tl__nav button:disabled{opacity:.35;cursor:default;background:var(--hm-paper)}
.dn_tl__nav button:focus-visible{outline:2px solid var(--hm-brown);outline-offset:3px}
.dn_tl__pos{font-size:var(--hm-t1);font-weight:600;color:var(--hm-mute)}
.dn_tl__more{margin-top:max(1.25rem,20px);max-width:64rem;border-top:1px solid var(--hm-line)}
.dn_tl__more>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:max(1rem,16px) 0;font-size:var(--hm-t4);font-weight:700}
.dn_tl__more>summary::-webkit-details-marker{display:none}
.dn_tl__more>summary::after{content:"+";font-weight:300;font-size:max(1.375rem,calc(22px*var(--dn-fs,1)));line-height:1;color:var(--hm-brown)}
.dn_tl__more[open]>summary::after{content:"–"}
.dn_tl__more .dn_steps{margin-bottom:max(1rem,16px)}
.dn_tl__ph{display:none}   /* 폰 세로 마디 — ≤1024 에서만 */

/* 몸 그림(design 명세 1장) — 360 | 64 | 1fr · 실루엣 선 1.6 ink 55% · 점 14(테두리 2 paper · 갈래 농도 100/60/30) · 손 올리면 halo 8px 강조색 18% · 목록 줄 84(12 | 120 | 1fr | auto | 16)
   그림 상자(.dn_body__pic)는 **고정 크기 360×558**(400:620) · 목록과 위 정렬(align-items:start) — 원장님 2026-09-22 밤 6 「카드가 늘어나면 사람 모양 크기도 변하는데 점 위치는 그대로여서 이상해 보임 → 고정값으로」.
   (그 전엔 그림 칸 높이 = 목록 높이(stretch)라 목록이 6줄일 때 293×454 로 줄었다 · 1440 실측.) 점의 % 자리는 그림 상자 기준이라 크기가 고정되면 점도 늘 같은 자리.
   ⚠ 점(.dn_body__dot)의 % 자리는 **그림 상자** 기준 — figure 기준이면 figcaption 높이만큼 아래로 밀려 손·발 점이 그림 밖으로 나간다(같은 날 실측 : figure 680 일 때 발 점이 그림 아래 54px) */
.dn_body{display:grid;grid-template-columns:360px minmax(0,1fr);gap:max(4rem,64px);align-items:start}
.dn_body__f{position:relative;margin:0;width:360px;max-width:100%;color:var(--hm-mute);color:color-mix(in srgb,var(--hm-ink) 55%,transparent)}   /* 실루엣 선 색 — 앞 줄은 color-mix 대비책 */
.dn_body__pic{position:relative;width:360px;height:558px;max-width:100%;margin:0}
.dn_body__f svg{display:block;width:100%;height:100%}
.dn_body__f figcaption{flex:none;margin-top:max(.75rem,12px);display:flex;gap:10px;align-items:flex-start;font-size:var(--hm-t2);line-height:1.6;color:var(--hm-mute)}
.dn_body__f figcaption i{flex:none;width:24px;height:0;border-top:1px dashed var(--hm-mute);margin-top:.7em}
.dn_body__dot{position:absolute;width:14px;height:14px;padding:0;border:2px solid var(--hm-paper);border-radius:50%;background:var(--hm-brown);translate:-50% -50%;cursor:pointer;transition:box-shadow .25s}
.dn_body__dot--b{background:color-mix(in srgb,var(--hm-brown) 60%,var(--hm-paper))}
.dn_body__dot--c{background:color-mix(in srgb,var(--hm-brown) 30%,var(--hm-paper))}
.dn_body__dot:hover,.dn_body__dot:focus-visible,.dn_body__dot.is-hot{box-shadow:0 0 0 8px color-mix(in srgb,var(--hm-brown) 18%,transparent);outline:none}
.dn_body__l{display:flex;flex-direction:column;border-top:1px solid var(--hm-line)}
.dn_body__i{border-bottom:1px solid var(--hm-line)}
/* 몸 그림 목록을 그림 높이에 고르게(body_map · .dn_body--fill · --rows = 줄 수) — 줄마다 최소 높이 = (그림 558 − 목록 위 선 1) ÷ 줄 수 − 줄 아래 선 1 → 닫힌 목록의 위 선 = 그림 위 · 아래 선 = 그림 아래.
   가운데 맞춤이 아니라 펼친 까닭 : 줄을 열면 그 아래 줄만 내려가고 위 줄은 제자리(가운데 맞춤은 열 때마다 위 줄이 반만큼 올라간다). 원장님 2026-09-24 「위쪽으로 쏠려있어 · 균형감 있게」 · PC 만(폰은 그림 아래 목록) */
@media(min-width:1025px){.dn_body--fill .dn_body__i>summary{min-height:calc(557px / var(--rows,5) - 1px)}}
.dn_body__i>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:12px 120px minmax(0,1fr) auto 16px;gap:max(1rem,16px);align-items:center;padding:max(1.125rem,18px) 0;min-height:84px;border-radius:8px;transition:background .2s}
.dn_body__i>summary::-webkit-details-marker{display:none}
.dn_body__i>summary i{width:12px;height:12px;border-radius:50%;background:var(--hm-brown)}
.dn_body__i--b>summary i{background:color-mix(in srgb,var(--hm-brown) 60%,var(--hm-paper))}
.dn_body__i--c>summary i{background:color-mix(in srgb,var(--hm-brown) 30%,var(--hm-paper))}
.dn_body__i--x>summary i{background:none;border-radius:0;height:0;border-top:1px dashed var(--hm-mute)}
.dn_body__i>summary b{font-size:var(--hm-t5);font-weight:700;line-height:1.4;color:var(--hm-ink)}
.dn_body__i>summary span{font-size:var(--hm-t4);line-height:1.5;color:var(--hm-ink2)}
.dn_body__i>summary em{font-style:normal;font-size:var(--hm-t1);font-weight:600;color:var(--hm-mute);white-space:nowrap}
.dn_body__i>summary::after{content:"+";grid-column:5;font-size:max(1.375rem,calc(22px*var(--dn-fs,1)));font-weight:300;line-height:1;color:var(--hm-brown);text-align:right}
.dn_body__i[open]>summary::after{content:"–"}
.dn_body__i.is-hot>summary,.dn_body__i>summary:hover{background:var(--hm-sand);margin:0 -12px;padding-left:12px;padding-right:12px}
.dn_pg .dn_body__i>p{padding:0 max(2rem,32px) max(1.125rem,18px) 164px;font-size:var(--hm-t2);line-height:var(--hm-lh);color:var(--hm-ink2)}   /* 열린 글은 핵심 단어 칸(12+16+120+16=164)에서 시작해 줄 오른끝(「+」 칸 16+틈 16)까지 — 62ch 로 막아 왼쪽에 쏠렸던 것(원장님 2026-09-22 밤) */

/* 척추 그림(spine_map · spine_svg.lateral) — 몸 그림의 상자·점·목록을 그대로 쓰고 선 그림만 다르다 : 뼈 흰 채움 + 선 1.4(currentColor = ink 55%) · 가시돌기 · 머리 타원 · 구역 괄호와 글자(테마 글꼴 12px · SVG text) */
.dn_spine .v{fill:var(--hm-paper);stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.dn_spine .sp{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.dn_spine .hd{fill:none;stroke:currentColor;stroke-width:1.6}
.dn_spine .rg{fill:none;stroke:currentColor;stroke-width:1}
.dn_spine text{font-size:calc(18px*var(--dn-fs,1));font-weight:600;fill:currentColor;letter-spacing:.02em}   /* viewBox 단위(400 폭) — 화면에서는 PC 360/400 → 16.2px · 폰 280/400 → 12.6px(토큰 사다리 최소 12 위). 12 였을 때 PC 10.8 · 폰 8.4 로 모자랐다(audit 2026-09-23) */
/* 척추 그림 목록(spine_map · _spine_row) — 2026-09-23 밤 원장님 「레벨과 신체 부위를 정확히 나눠 보기 편하게 · 지금은 산만」 : 머리 줄 + 줄마다
   [점 12 | 레벨 72(강조색) | 부위 1fr | 증상 1fr(가장 긴 증상 폭 아래로는 안 줄어듦) | + 16] **한 줄** — 같은 종류의 정보가 늘 같은 x. 열면 설명 + 신경 지도(살피는 척추 상태 · 근육·반사 · 장기(자율신경)).
   2026-09-26 원장님 C 「텍스트 밀도가 너무 높아 · 더 단순하고 직관적으로」 : 닫힌 줄의 구역 이름(레벨 밑 작은 글)과 살피는 척추 상태(증상 밑 · 넓으면 넷째 칸)를 빼고(상태는 열면 신경 지도 첫 칸),
     줄 높이 84 → 64(여덟 줄 + 머리 줄 ≈ 그림 558). 상자·배지는 더하지 않았다.
   같은 날 검수 F2 : 넷째 칸이 빠지며 줄 오른쪽이 다시 비었다(1440 221~312px · 원장님 2026-09-24 「카드 내용들이 왼쪽으로 쏠려있음」 때 238~326) →
     증상 칸을 **가장 긴 증상 글 폭**(--sp-key = 증상 글자 크기 × 16 · 재검수 J1 부터 16.5 · 재검수 s2 부터 16.2 · 가장 긴 줄이 15.6 배 · 2026-09-26 실측)으로 고정해 줄 오른끝(「+」 앞)에 붙이고, 남는 폭은 부위 칸(1fr)이 받는다 —
     레벨·부위는 왼쪽에, 증상은 오른끝에 줄 맞춤. 줄 오른쪽 빈 폭은 (증상 칸 − 그 줄 증상 글 폭) + 16 이 된다. ⚠ 증상 글을 더 길게 바꾸면 16 을 같이 키운다(안 키우면 그 줄만 두 줄로 꺾인다).
     열린 신경 지도의 dt 는 240 그대로 — 증상 칸 x 에 맞추면 dd 폭이 증상 칸(≈240)만 해져 긴 글이 세로로 늘어난다.
   재검수 J1(main 결정 2026-09-26 「반반」) : 위처럼 증상을 오른끝에 붙이니 빈 폭이 전부 부위↔증상 사이로 가서(1440 271~339 · 1920 531~608px) 두 목록처럼 갈라졌다 →
     부위 · 증상 칸을 **1 : 1**(증상 칸은 --sp-key 아래로 안 줄어든다 — 좁은 목록에서는 부위 칸이 나머지를 받는다)로 두어 빈 폭을 가운데와 오른쪽에 나눈다.
     넓은 화면(> 1440 · 원본 main.css 가 글자 뿌리를 90~100% 로 되돌리는 폭)에서는 부위·증상 글자를 사다리 한 단(t4 → t5) 키우고 목록 폭을 글자 크기 × 50 으로 묶어,
     1536 · 1920 에서도 가운데·오른쪽 빈 폭이 1440 수준이 되게 했다 — 남는 폭은 그림 칸이 받고 그림은 그 칸 가운데(그림 크기 360×558 · 점 자리는 그대로).
   .dn_spine 아래만 걸린다 — 몸 그림(body_map · 교통사고)의 줄 꼴은 그대로 */
.dn_spine{--sp-fs:var(--hm-t4);--sp-key:calc(var(--sp-fs) * 16.2)}   /* 부위·증상 글자 크기 · 증상 칸의 가장 좁은 폭(가장 긴 증상 15.6 배 + 여유 약 4% — 같은 웹 글꼴이라도 기기마다 폭이 조금 다를 수 있다 · 16.5 였다가 재검수 s2 로 아이폰 SE 가로 667 에서 부위가 한 줄에 들게 16.2) — 위 주석(검수 F2 · 재검수 J1) */
@media(min-width:1441px){   /* 넓은 화면 — 위 주석(재검수 J1) */
  .dn_spine{--sp-fs:var(--hm-t5)}
  .dn_spine.dn_body{grid-template-columns:minmax(360px,1fr) minmax(0,calc(var(--sp-fs) * 50))}
  .dn_spine .dn_body__f{justify-self:center}
}
.dn_spine .dn_body__l{border-top:0;container:spinelist / inline-size}   /* 목록 폭으로 줄 배치를 고른다(파일 끝 @container spinelist — 폭 600 이상은 PC 꼴 한 줄) */
.dn_spine__hd{display:grid;grid-template-columns:12px 72px minmax(0,1fr) minmax(var(--sp-key),1fr) 16px;gap:max(1rem,16px);padding:0 0 max(.625rem,10px);border-bottom:1px solid var(--hm-line);font-size:var(--hm-t1);font-weight:700;letter-spacing:.04em;line-height:1.4;color:var(--hm-mute)}
.dn_spine__hd span:first-child{grid-column:2}
.dn_spine .dn_body__i>summary{grid-template-columns:12px 72px minmax(0,1fr) minmax(var(--sp-key),1fr) 16px;min-height:64px;padding-block:max(.75rem,12px)}   /* 위아래만 — 좌우는 손 올림(:hover · is-hot) 규칙의 12px 를 남긴다 */
.dn_spine .dn_body__i>summary b{grid-column:2;font-size:var(--hm-t6);line-height:1.2;color:var(--hm-brown);white-space:nowrap}
.dn_spine .dn_body__i>summary strong{grid-column:3;font-size:var(--sp-fs);font-weight:700;line-height:1.45;color:var(--hm-ink)}
.dn_spine .dn_body__i>summary span{grid-column:4;font-size:var(--sp-fs)}
.dn_pg .dn_spine .dn_spine__more{padding:0 max(2rem,32px) max(1.25rem,20px) 116px}   /* 부위 칸(12+16+72+16=116)에서 시작 */
.dn_pg .dn_spine .dn_spine__more>p{font-size:var(--hm-t2);line-height:var(--hm-lh);color:var(--hm-ink2)}
.dn_spine__nv{display:grid;gap:max(.625rem,10px);margin:max(1rem,16px) 0 0;padding:max(1rem,16px) 0 0;border-top:1px dashed var(--hm-line)}
.dn_spine__nv>div{display:grid;grid-template-columns:minmax(0,1fr);gap:max(.125rem,2px)}
/* ↑ 열린 줄의 신경 지도 — 칸 이름(dt)을 설명(dd) **위**에 두고 둘 다 설명 글(p)과 같은 x(부위 칸 x 116)에서 시작한다 · 폭 전부(모든 폭 · 폰과 같은 꼴).
   재검수 20260926_hp0926c F3 : 그 전 dt 240 고정은 좁은 PC 목록(창 1025~1279)에서 dd 를 120~375px 로 줄여 가장 긴 설명(T1~T12 장기)이 83줄까지 늘어졌다.
   검수 제안(dt = 부위 칸 폭 → dd 가 증상 칸 x 에 섬)은 부위 · 증상 반반(J1)과 함께면 dd 폭 = 증상 칸 폭(1440 340 · 1025 248)이 되어
   「C 커밋 전(dd 1440 519 · 1025 200)보다 좁아지지 않게」를 1025~1440 에서 못 지킨다 — 폭을 지키는 쪽을 골랐다(dd = 목록 − 148 · 1440 695 · 1025 376). 세로 기준선은 116 하나. */
.dn_spine__nv dt{font-size:var(--hm-t1);font-weight:700;line-height:1.9;color:var(--hm-brown)}
.dn_spine__nv dd{margin:0;display:flex;flex-direction:column;gap:max(.25rem,4px);font-size:var(--hm-t2);line-height:1.7;color:var(--hm-ink2)}
.dn_spine__nv dd .is-lv{display:grid;grid-template-columns:4.5em minmax(0,1fr);column-gap:.5em}   /* 레벨 줄 — 둘째 줄이 레벨 글자 밑으로 돌아가지 않게 내어쓰기(검수 2026-09-24 · 폰 T1~T4) */
.dn_spine__nv dd .is-lv>b{font-weight:700;color:var(--hm-ink)}
.dn_spine__nv dd>span,.dn_spine__nv dd .is-lv>span{text-wrap:pretty}   /* 장기 칸 글이 길어져(2026-09-24) 끝줄 한 낱말을 줄인다 — 1440 L4~L5 첫 줄 끝줄 33px 였다 · 모르는 브라우저는 그대로 */
/* 그림 카드의 코드 그림(lordosis_fig · spine_svg.lordosis_*) — 발췌 그림(img.dn_card__fig)과 같은 2:1 · 흰 바탕 · 아래 선 한 줄. 몸 채움 sand · 윤곽 tan · 목뼈·허리뼈 brown · 등뼈 tan ·
   점선·벽 mute(벽 빗금 tan) · 앞으로 나온 거리와 허리 뒤 틈 amber · 글자 24 단위(PC 408/600 → 16.3px · 폰 348/600 → 13.9px). 열면 글 위에 실제 X-ray·MRI 예(.dn_card__ex) */
.dn_pg .dn_card--fold>summary>svg.dn_card__svg{display:block;width:100%;height:auto;aspect-ratio:2/1;background:var(--hm-paper);border-bottom:1px solid var(--hm-line)}
.dn_card__svg .bd{fill:var(--hm-sand);stroke:none}
.dn_card__svg .ol{fill:none;stroke:var(--hm-tan);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.dn_card__svg .arm{fill:var(--hm-sand);stroke:var(--hm-tan);stroke-width:2.2}
.dn_card__svg .cv{stroke:var(--hm-brown);stroke-width:12}
.dn_card__svg .th{stroke:var(--hm-tan);stroke-width:12}
.dn_card__svg .tl{stroke-width:18}
.dn_card__svg .sc{fill:var(--hm-tan)}
.dn_card__svg .pl{fill:none;stroke:var(--hm-mute);stroke-width:2;stroke-dasharray:7 6}
.dn_card__svg .wl{stroke:var(--hm-mute);stroke-width:3}
.dn_card__svg .wh{fill:none;stroke:var(--hm-tan);stroke-width:1.5}
.dn_card__svg .wt{font-size:calc(24px*var(--dn-fs,1));font-weight:700;fill:var(--hm-mute)}   /* 「벽」 이름표 — PC 408/600 → 16.3px · 폰 390 → 13.9px · 360 → 12.8px(22 였을 때 360 에서 11.7) */
.dn_card__svg .ear{fill:var(--hm-brown)}
.dn_card__svg .sh{fill:var(--hm-paper);stroke:var(--hm-ink2);stroke-width:2.5}
.dn_card__svg .gp{fill:none;stroke:var(--hm-amber);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.dn_card__svg .dv{stroke:var(--hm-line);stroke-width:1.5}
.dn_card__svg .lb{font-size:calc(24px*var(--dn-fs,1));font-weight:700;fill:var(--hm-ink2)}
.dn_card__ex{margin:0 calc(-1 * max(1rem,16px))}   /* 카드 안쪽 여백만큼 밖으로 — 닫힌 그림과 같은 폭(PC 407.6 · 폰 348)이라 옛 X-ray 한 장이 전보다 작아지지 않는다 */
.dn_card__ex img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:contain;background:var(--hm-paper);border-top:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line)}
.dn_card__ex figcaption{margin-top:max(.5rem,8px);padding:0 max(1rem,16px);font-size:var(--hm-t1);font-weight:600;line-height:1.5;color:var(--hm-mute)}
/* 저작자 표시 한 줄(_fold 의 ex 넷째 값 · CC BY-SA 그림만 · 2026-09-25 척추 분리증 X-ray) — 설명 바로 아래 · 설명보다 가볍게 · 링크는 밑줄 */
.dn_card__ex .dn_card__cr{display:block;margin-top:max(.25rem,4px);font-size:var(--hm-t1);font-weight:400;color:var(--hm-mute)}
.dn_card__ex .dn_card__cr a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* 교정 원리 그림 둘(goal_figs · 2026-09-24 오후 셋째 판 — 옆에서 본 허리뼈 둘 · 두 판이 같은 760×420 이라 폭이 같다) — 칸은 판 폭 비율(flex-grow = --qf-w · 기준 0) · 흰 판 선 1px 둥근 16 · 글은 아래 HTML.
   원장님 「한 페이지에 들어오게」 — 판을 1.8:1 로 넓혀 1440 에서 그림 높이 약 343px(전 442) · 절이 머리띠 아래 한 화면(잰 값은 커밋 글) */
.dn_qf{display:flex;gap:max(1.5rem,24px);align-items:flex-start}
.dn_qf__f{flex:var(--qf-w,1) 1 0;min-width:0;margin:0;display:flex;flex-direction:column;gap:max(.875rem,14px)}
.dn_qf__f svg{display:block;width:100%;height:auto;border:1px solid var(--hm-line);border-radius:16px;background:var(--hm-paper)}
.dn_qf figcaption b{display:block;font-size:var(--hm-t4);font-weight:700;line-height:1.4;color:var(--hm-ink)}
.dn_qf figcaption span{display:block;margin-top:max(.375rem,6px);font-size:var(--hm-t2);line-height:var(--hm-lh);color:var(--hm-mute)}
/* 코드 그림의 색(spine_svg.goal_* 의 class) — 토큰만 · 앞 줄은 color-mix 를 모르는 브라우저용 대비책. 색은 넷 갈래 : 뼈(크림 · 윤곽 먹색) · 디스크와 줄임(청록 둘) · 신경(호박) ·
   누름(빨강 --hm-stop · 높은 압력의 화살과 신경을 누르는 탈출 목·덩이 gf-hx — 원장님 2026-09-25 「디스크가 신경을 누르는 모습은 빨간 색상으로」 · 전엔 화살이 신경과 같은 호박이었다).
   선 굵기는 화면 px 로 고정(vector-effect) — 뼈 윤곽 2px(굵은 선 4px 의 바깥 절반 · 두 뼈가 맞닿는 관절돌기가 한 윤곽이 된다) > 디스크·신경 1.5 > 속선·관절선·이끔선 1~1.25 */
.dn_gf .gf-vo>*{fill:var(--hm-bg);fill:color-mix(in srgb,var(--hm-amber) 9%,var(--hm-paper));stroke:var(--hm-ink2);stroke-width:4px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dn_gf .gf-vf{fill:var(--hm-bg);fill:color-mix(in srgb,var(--hm-amber) 9%,var(--hm-paper));stroke:none}
.dn_gf .gf-ln{fill:none;stroke:var(--hm-edge2);stroke-width:1px;vector-effect:non-scaling-stroke}
.dn_gf .gf-an{fill:var(--hm-sand);fill:color-mix(in srgb,var(--hm-tan) 55%,var(--hm-paper));stroke:var(--hm-brown);stroke-width:1.5px;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dn_gf .gf-la{fill:none;stroke:var(--hm-brown);stroke-opacity:.4;stroke-width:1px;vector-effect:non-scaling-stroke}
.dn_gf .gf-nu{fill:var(--hm-brown)}
.dn_gf .gf-hx{fill:var(--hm-stop)}
.dn_gf .gf-nv{fill:var(--hm-amber);stroke:var(--hm-stone);stroke:color-mix(in srgb,var(--hm-amber) 55%,var(--hm-ink));stroke-width:1.5px;vector-effect:non-scaling-stroke}   /* 신경뿌리 줄기 — 호박색 그대로(전 호박 55% · 뼈 채움과 대비 1.41 → 2.0 · 검수 20260924_f3 원장님 판단 2 「신경으로 더 읽히게」) */
.dn_gf .gf-nv2{fill:none;stroke:var(--hm-stone);stroke:color-mix(in srgb,var(--hm-amber) 55%,var(--hm-ink));stroke-opacity:.5;stroke-width:1px;vector-effect:non-scaling-stroke}
.dn_gf .gf-nc{fill:var(--hm-paper);fill:color-mix(in srgb,var(--hm-amber) 55%,var(--hm-paper));stroke:var(--hm-stone);stroke:color-mix(in srgb,var(--hm-amber) 55%,var(--hm-ink));stroke-width:1.5px;vector-effect:non-scaling-stroke}   /* 신경뿌리 끝의 자른 면 — 줄기보다 한 단 옅게(줄기를 진하게 하며 25 → 55%) */
.dn_gf--low .gf-ar,.dn_gf .gf-fa{fill:var(--hm-brown)}
.dn_gf--high .gf-ar{fill:var(--hm-stop)}
.dn_gf .gf-mk{fill:var(--hm-tan);stroke:var(--hm-brown);stroke-width:1.5px;vector-effect:non-scaling-stroke}.dn_gf .gf-mk--o{fill:var(--hm-paper);stroke-width:2.5px}
.dn_gf .gf-ldc{fill:none;stroke:var(--hm-paper);stroke-width:4px;vector-effect:non-scaling-stroke}
.dn_gf .gf-ld{fill:none;stroke:var(--hm-ink2);stroke-width:1.25px;vector-effect:non-scaling-stroke}
.dn_gf .gf-ldd{fill:var(--hm-ink2);stroke:var(--hm-paper);stroke-width:1.5px;paint-order:stroke;vector-effect:non-scaling-stroke}
.dn_gf .gf-lb{font-size:calc(29px*var(--dn-fs,1));font-weight:700;letter-spacing:-.01em;fill:var(--hm-ink);paint-order:stroke;stroke:var(--hm-paper);stroke-width:8px;stroke-linejoin:round}   /* viewBox 단위 29 — 화면 px 는 판 폭 × 29/760(1920 29.8 · 1440 23.7 · 1280 22.5 · 1024 18.3 · 768 13.4 · 701 12.2 · 390 13.4 · 360 12.2 · 2026-09-24 저녁 잰 값) */
/* 움직임 — 1.8초 한 번 오갔다(가운데 45~60% 에서 멈칫) : 누름 = 위 뼈·신경뿌리·화살 ↓ · 아래 뼈·화살 ↑ · 디스크 납작(두께 36 → 26 = 뼈가 5씩 다가온 만큼) · 탈출 덩이가 밑동(왼쪽 아래)을 두고 신경 쪽(위·뒤)으로 부풂 /
   줄임 = 위 뼈·신경뿌리·화살 ↑ · 아래 뼈·화살 ↓ · 디스크 부풂(72 → 84 = 뼈가 6씩 벌어진 만큼) · 드는 화살·표가 디스크 쪽으로 →.
   뼈 하나가 g 둘(윤곽 gf-vo · 채움)로 나뉘어 있어도 같은 이름(gf-v-t · gf-v-b)이라 같이 움직인다.
   PC(hover:hover)는 그림에 손을 올리는 동안 되풀이 · 손 올림이 없는 기기는 v2-page.js 가 그림이 60% 보일 때 .is-play 를 붙여 한 번 · 움직임 줄이기면 없음(아래 reduce 블록) */
.dn_gf .gf-mv{transform-box:fill-box;transform-origin:center}
.dn_gf .gf-hern{transform-origin:0 100%}
.dn_gf--high .gf-ar-t{--gf-a:gf-dn12}.dn_gf--high .gf-v-t{--gf-a:gf-dn5}.dn_gf--high .gf-v-b{--gf-a:gf-up5}.dn_gf--high .gf-ar-b{--gf-a:gf-up12}.dn_gf--high .gf-disc{--gf-a:gf-sq}.dn_gf--high .gf-hern{--gf-a:gf-hn}
.dn_gf--low .gf-ar-t{--gf-a:gf-up12}.dn_gf--low .gf-v-t{--gf-a:gf-up6}.dn_gf--low .gf-v-b{--gf-a:gf-dn6}.dn_gf--low .gf-ar-b{--gf-a:gf-dn12}.dn_gf--low .gf-disc{--gf-a:gf-sw}.dn_gf--low .gf-flow{--gf-a:gf-rt}
@keyframes gf-dn12{0%,100%{transform:none}45%,60%{transform:translateY(12px)}}
@keyframes gf-up12{0%,100%{transform:none}45%,60%{transform:translateY(-12px)}}
@keyframes gf-dn5{0%,100%{transform:none}45%,60%{transform:translateY(5px)}}
@keyframes gf-up5{0%,100%{transform:none}45%,60%{transform:translateY(-5px)}}
@keyframes gf-dn6{0%,100%{transform:none}45%,60%{transform:translateY(6px)}}
@keyframes gf-up6{0%,100%{transform:none}45%,60%{transform:translateY(-6px)}}
@keyframes gf-sq{0%,100%{transform:none}45%,60%{transform:scale(1.05,.72)}}
@keyframes gf-sw{0%,100%{transform:none}45%,60%{transform:scale(1.02,1.17)}}
@keyframes gf-rt{0%,100%{transform:none}45%,60%{transform:translateX(12px)}}
@keyframes gf-hn{0%,100%{transform:none}45%,60%{transform:scale(1.14)}}
@media(hover:hover){.dn_qf__f:hover .dn_gf .gf-mv{animation:var(--gf-a) 1.8s ease-in-out infinite}}
.dn_qf__f.is-play .dn_gf .gf-mv{animation:var(--gf-a) 1.8s ease-in-out .3s 1}

/* 손을 올렸을 때 — 카드 4px 떠오름+그림자 · 사진 1.04 · 문·단추 살짝 */
.dn_pg .dn_card{transition:translate .35s ease,box-shadow .35s ease}
.dn_pg .dn_card:hover{translate:0 -4px;box-shadow:0 14px 34px rgba(20,40,42,.12)}
.dn_pg .dn_card>img{transition:transform .7s ease}
.dn_pg .dn_card:hover>img{transform:scale(1.04)}
.dn_pg .dn_door{transition:translate .35s ease}
.dn_pg .dn_door:hover{translate:0 -4px}
.dn_pg .dn_hero__p,.dn_pg .dn_qa__i p{text-wrap:pretty}   /* 속 쪽 첫 화면 글 · 자주 묻는 질문 답 — 끝 줄 한 낱말(검수 20261007_colwrap R1 : 붙은 점 잇기 뒤 척추교정 1920 「… 진료를 / 안내드립니다.」 · 교통사고 답 360 「… 신청할 수 / 있습니다.」). 칼럼 쪽도 이 한 줄(전엔 v2-column.css 에 따로) */
.dn_pg .dn_door p{text-wrap:balance}   /* 더 알아보기 문 글 — 끝 줄에 한 낱말만 남지 않게(원장님 취향 · main 2026-10-07 · 그 전 auto 에서 보통 9 폭 15쪽 154 = 칼럼 102 · 척추 속 쪽 52 · pretty 는 끝 줄 1/3 넘는 낱말을 안 만져 칼럼 쪽 18 이 남았다). 홈 둘의 문(.dn_hm 만 · .dn_pg 아님)은 이 줄 밖 */
.dn_pg .dn_btn{transition:translate .25s ease,filter .25s ease}
.dn_pg .dn_btn:hover{translate:0 -2px;filter:brightness(1.05)}

/* 나타나는 효과 — 암 원본 main.css 130줄 `[ani="up"]{opacity:0;transform:translateY(40px);transition:all 1s .5s}` 를 그대로, 트리거만 fullpage 의 .section.active 대신 section.is-in(js/v2-page.js).
   ⚠⚠ **html.js 가 있을 때만 숨긴다** — JS 가 안 실리거나 안 돌면(움직임 줄이기 포함) 글이 그대로 보인다. 카드·차례·문은 120ms 씩 차례로(--d). */
.dn_pg [ani]{opacity:1;transform:none;clip-path:none;transition:none}   /* ⚠⚠ 원본 main.css 130줄 `[ani="up"]{opacity:0 …}` 이 이 쪽에도 실린다 — JS 가 없으면 그 규칙만 남아 글이 잠긴다(2026-09-22 JS 끄고 실측 52개 숨음). 먼저 되돌리고, 아래 html.js 규칙이 그 위에서만 숨긴다 */
html.js .dn_pg [ani="up"]{opacity:0;transform:translateY(40px);transition:opacity 1s var(--d,.5s),transform 1s var(--d,.5s)}
html.js .dn_pg section.is-in [ani="up"]{opacity:1;transform:translateY(0)}
html.js .dn_pg [ani="clip"]{clip-path:inset(2rem round 18px);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1) var(--d,.3s)}
html.js .dn_pg section.is-in [ani="clip"]{clip-path:inset(0 round 18px)}
html.js .dn_pg .dn_card[ani="up"]{transition:opacity 1s var(--d,.5s),transform 1s var(--d,.5s),translate .35s ease,box-shadow .35s ease}
html.js .dn_pg .dn_door[ani="up"]{transition:opacity 1s var(--d,.5s),transform 1s var(--d,.5s),translate .35s ease}
.dn_band__txt>[ani]:nth-child(2){--d:.1s}.dn_band__txt>[ani]:nth-child(3){--d:.2s}.dn_band__txt>[ani]:nth-child(4){--d:.3s}.dn_band__txt>[ani]:nth-child(5){--d:.4s}.dn_band__txt>[ani]:nth-child(6){--d:.5s}.dn_band__txt>[ani]:nth-child(7){--d:.6s}
/* 절 머리 위 전폭 사진 띠(section band= · 소형 360px · 폰 200) — 절 위 여백은 띠가 대신한다 */
.dn_pg section.has-band{padding-top:0}
.dn_sec__band{margin:0 0 max(3.5rem,56px);height:360px;overflow:hidden;background:var(--hm-line)}
.dn_sec__band img{width:100%;height:100%;object-fit:cover;display:block}
/* 수술 그림(rehab_svg.fig · 수술 후 재활 Who 카드 여섯 · svg.dn_card__svg.dn_rx) — 몸 채움·윤곽·이름표 글자는 위 .dn_card__svg 의 .bd · .ol · .lb 그대로(전만 소실 그림과 한 결).
   여기는 그 그림만의 것 : 뼈 흰 채움 + 강조색 선 · 삽입물(인공관절·나사·막대·케이지) 옅은 회색 + 호박색 선 · 덜어 낸 자리 호박색 점선 — 호박색 = 수술한 자리. 원장님 2026-09-24 「카드별로 수술을 표현하는 이미지」 */
.dn_rx .bn{fill:var(--hm-paper);stroke:var(--hm-brown);stroke-width:2.2;stroke-linejoin:round}
.dn_rx .ho{fill:var(--hm-sand);stroke:var(--hm-brown);stroke-width:2.2}
.dn_rx .im{fill:var(--hm-line);stroke:var(--hm-amber);stroke-width:3;stroke-linejoin:round}
.dn_rx .dk{fill:var(--hm-sand);stroke:var(--hm-tan);stroke-width:2}
.dn_rx .sf{fill:var(--hm-tan);stroke:none}
.dn_rx .td{fill:none;stroke:var(--hm-tan);stroke-width:10;stroke-linecap:round}
.dn_rx .rm{fill:none;stroke:var(--hm-amber);stroke-width:3;stroke-dasharray:8 6;stroke-linejoin:round}
.dn_rx .st{fill:none;stroke:var(--hm-amber);stroke-width:3;stroke-linecap:round}
.dn_rx .pt{fill:var(--hm-paper);stroke:var(--hm-amber);stroke-width:3}
.dn_rx .ld{fill:none;stroke:var(--hm-mute);stroke-width:1.5}
.dn_rx .ldd{fill:var(--hm-mute)}
.dn_rx .lb{font-size:calc(26px*var(--dn-fs,1))}   /* 이름표 26 단위 — 24(전만 소실 그림)면 1280 폭에서 15.4px · 26 이면 1440 17.6 · 1280 16.7 · 폰 두 칸(폰 창) 390 13.2 · 360 12.0(rehab_svg 머리말) */
/* 그림 창 두 벌(rehab_svg 의 PC_VB · PH_VB · 원장님 2026-09-24 오후 R2 「한 페이지에 들어오게」) — PC 창 600×260(위아래 빈 곳을 덜어 1440×900 에 Who 절 한 화면) ·
   폰(≤639) 창 320×260(수술한 자리를 당겨 봄)으로 **두 칸** — 이름표 360 폭 12.0px · 390 13.2 · 639 23.4. 640~1024 는 PC 창 두 칸(그림 288~480 → 12.5~20.8px · 2026-09-24 실측) */
.dn_pg .dn_card--fold>summary>svg.dn_rx--pc{aspect-ratio:600/260}
.dn_pg .dn_card--fold>summary>svg.dn_rx--ph{display:none;aspect-ratio:320/260}
@media(max-width:1024px){.dn_pg .dn_cards--fold.has-fig:has(.dn_rx){grid-template-columns:1fr 1fr}}   /* 그림 카드 폰 규칙(한 칸)을 이 그림만 두 칸으로 */
@media(max-width:639px){.dn_pg .dn_card--fold>summary>svg.dn_rx--pc{display:none}.dn_pg .dn_card--fold>summary>svg.dn_rx--ph{display:block}}
@media(prefers-reduced-motion:reduce){
  html.js .dn_pg [ani]{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
  .dn_pg *{transition:none !important}
  .dn_gf .gf-mv{animation:none !important}   /* 원리 그림의 화살 움직임도 멈춘다 */
}

@media(max-width:1280px){.dn_pg__cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}.dn_gal--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1024px){
  /* 첫 화면 폰 — 사진 200px 이 위, 글이 아래(한 열 · 좌우 여백은 inner 의 1.25rem 을 여기서 다시 준다 — PC 규칙이 옆 여백을 0 으로 풀었다) · 주 문장 30px · 서포트 16px(대시 앞에서만 꺾임) */
  .dn_pg .dn_band{min-height:0;display:block}
  .dn_pg .dn_band__img{position:static;left:auto;width:100%;height:200px}
  .dn_pg .dn_band__img--up{object-position:50% 25%}   /* hero 셋째 값 "up" — 4:3 사진의 세로 68% 창을 위로(창 위 10% · 아래 78.6%). 교통사고 첫 화면 : 머리카락 위가 y≈16~18% 라 50% 창(16~84%)에서 잘렸다(2026-09-23 실측) */
  .dn_pg .dn_band__in{display:block;padding:max(1.25rem,20px) 1.25rem 1.75rem}
  .dn_pg .dn_band__txt,.dn_pg section.dn_pg__glance .dn_glance{width:min(100%,max(44rem,704px));min-width:min-content;max-width:none}   /* 폭을 **쪽마다 같게**(PC 규칙과 같은 까닭) — width:auto 면 위 justify-self:center 가 block 에서도 살아 글 덩이가 내용만큼 줄어 가운데로 가서, 글이 짧은 쪽(수술 후 재활 432 · 교통사고 466)의 왼쪽 끝이 1024 에서 296 · 279(나머지 160)였다(audit 20260925_live 고칠 것 1).
     704 는 본문(.dn_hero__p) 최대 폭 — 그 폭을 다 쓰던 세 쪽(척추교정·산재·시설)은 자리 그대로 · min-width:min-content 는 내용이 칸보다 넓을 때(교통사고 320 : 280.1)의 옛 폭을 지켜 폰 390·360·320 이 전과 같다 */
  .dn_pg section.dn_pg__glance .dn_glance{margin-inline:auto}   /* 판 아래 칸 줄(glance)도 판 글과 **한 규칙**의 폭 — 1024 이하에서 두 왼끝이 같다(전엔 1024 에서 판 글 160 · 칸 20 · 검수 20260929_accident J2 · J7 「둘째 벌을 만들지 말 것」). 판 글은 justify-self 로, 칸 줄은 여백으로 가운데 */
  .dn_pg .dn_band .dn_hm__eb{margin-top:0}
  .dn_pg .dn_band__k{margin-top:max(.625rem,10px);font-size:var(--hm-t3)}
  .dn_pg .dn_band__st{margin-top:max(1.125rem,18px)}.dn_pg .dn_band__st+.dn_band__st{margin-top:max(1.75rem,28px)}
  .dn_pg .dn_band h1,.dn_pg .dn_band__m{font-size:max(1.875rem,calc(30px*var(--dn-fs,1)));line-height:1.3}.dn_pg .dn_band__sp{margin-top:max(.5rem,8px);font-size:max(1rem,calc(16px*var(--dn-fs,1)))}
  .dn_pg .dn_band .dn_hero__sub{margin-top:max(1rem,16px);font-size:1.0625rem}.dn_pg .dn_band .dn_hero__p{font-size:var(--hm-t2);line-height:1.8}
  .dn_pg .dn_band .dn_hero__act{margin-top:1.25rem}
  .dn_pg section.dn_pg__glance{padding:1.5rem 0 2rem}
  .dn_sec__band{height:200px;margin-bottom:2rem}
  .dn_sec__band--right img{object-position:100% 50%}.dn_sec__band--left img{object-position:0 50%}   /* band 셋째 값 — 폰 창은 띠 가로의 25.6~74.4% 만 보인다. 교통사고 Ask 띠는 사람이 70~95% 에 있어 right(51.2~100%) · 2026-09-23 실측 */
  .dn_pg section{padding:3.25rem 0}
  .dn_pg .dn_hm__head{margin-bottom:1.75rem;padding-top:1.125rem}
  .dn_pg section>.inner:not(.dn_band__in)>*+*:not(.dn_hm__head){margin-top:1.75rem}
  .dn_prose{gap:1.25rem;font-size:var(--hm-t3);line-height:1.9}
  .dn_pg__cards--2,.dn_pg__cards--4{grid-template-columns:1fr}
  /* 접힌 카드 — 폰은 두 칸(167px) · 사진 110 · 몸 padding 12 gap 4 · 제목 16px ≤2줄 · 한 줄 13px ≤2줄(design 명세 4장) */
  .dn_pg .dn_cards--fold{grid-template-columns:1fr 1fr;gap:1rem}
  .dn_pg .dn_cards--fold>.dn_card:nth-child(2n+3):last-child{grid-column:1/-1}   /* 셋·다섯이면 마지막 카드가 한 줄 전체 — 두 칸에서 2+1 의 오른쪽 빈 칸(검수 2026-09-23 · 척추교정 Diagnosis 셋). 여섯(교통사고 Treatment)은 안 걸린다 */
  .dn_pg .dn_cards--fold.has-fig{grid-template-columns:1fr}   /* 그림 카드(X-ray·MRI·진단명 그림 2:1)는 한 칸 — 두 칸이면 세 패널 그림의 패널 하나가 ~50px(척추교정 Conditions · 2026-09-23) */
  .dn_pg .dn_card--fold>summary>img{height:110px}
  .dn_pg .dn_card--fold .dn_card__b{padding:.75rem;gap:.25rem}
  .dn_card--fold .dn_card__t{font-size:var(--hm-t3)}.dn_card--fold .dn_card__t i::before{font-size:1.125rem}
  .dn_card--fold .dn_card__1{font-size:var(--hm-t0);line-height:1.6;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .dn_card--fold>.dn_card__p{padding:0 .75rem .75rem;font-size:var(--hm-t0)}
  .dn_pg .dn_card--fold.is-text .dn_card__b{padding:1rem}.dn_card--fold.is-text>.dn_card__p{padding:0 1rem 1rem}
  .dn_card--fold.is-text .dn_card__t{font-size:var(--hm-t6)}.dn_card--fold.is-text .dn_card__1{font-size:var(--hm-t2)}
  .dn_flow,.dn_flow--3,.dn_flow--4,.dn_flow--5{display:flex;flex-direction:column;align-items:stretch}   /* PC 의 align-items:start 가 세로 flex 에서는 가로 폭을 내용만큼으로 줄인다(2026-09-22 실측 178~329px) */
  .dn_flow__arr{min-height:0;height:32px}.dn_flow__arr svg{transform:rotate(90deg)}
  .dn_pg section.dn_sec--fit{padding:3.25rem 0}
  .dn_pg .dn_state__t{font-size:1.5rem;font-weight:400}.dn_pg .dn_state__s{font-size:var(--hm-t2)}
  /* 타임라인 — 폰은 세로 마디 6(rail 6px · 마디 84 · 마감 마디는 호박색 점) · PC 자리 상자와 패널·「세부 보기」는 숨긴다(같은 글이 마디에 있다) */
  .dn_tl__pc,.dn_tl__p,.dn_tl__more{display:none}
  .dn_tl__ph{display:block;position:relative;margin:0;padding:0 0 0 52px;list-style:none}
  .dn_tl__ph::before{content:"";position:absolute;left:21px;top:24px;bottom:24px;width:6px;border-radius:3px;background:var(--hm-brown);background:linear-gradient(to bottom,color-mix(in srgb,var(--hm-brown) 85%,var(--hm-paper)),color-mix(in srgb,var(--hm-brown) 22%,var(--hm-paper)))}
  .dn_tl__node{position:relative;min-height:84px;border-bottom:1px solid var(--hm-line)}
  .dn_tl__node::before{content:"";position:absolute;left:-36px;top:18px;width:16px;height:16px;border-radius:50%;background:var(--hm-brown);border:2px solid var(--hm-paper);box-sizing:border-box}
  .dn_tl__node.is-warn::before{width:18px;height:18px;left:-37px;top:17px;background:var(--hm-amber)}
  .dn_tl__node>details>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 16px;column-gap:.75rem;align-items:center;padding:.875rem 0}
  .dn_tl__node>details>summary::-webkit-details-marker{display:none}
  .dn_tl__node>details>summary b{display:block;font-size:var(--hm-t4);font-weight:700;line-height:1.3}
  .dn_tl__node>details>summary span{display:block;margin-top:.2rem;font-size:var(--hm-t2);line-height:1.5;color:var(--hm-ink2)}
  .dn_tl__node>details>summary::after{content:"+";grid-column:2;grid-row:1;font-size:1.25rem;font-weight:300;line-height:1;color:var(--hm-brown);text-align:right}
  .dn_tl__node>details[open]>summary::after{content:"–"}
  .dn_tl__node>details>div{padding:0 0 .875rem}
  .dn_tl__node>details>div b{display:block;margin-top:.5rem;font-size:var(--hm-t2);font-weight:700}
  .dn_pg .dn_tl__node>details>div p{margin-top:.25rem;font-size:var(--hm-t2);line-height:var(--hm-lh);color:var(--hm-ink2)}
  /* 몸 그림 — 폰은 실루엣 280 가운데 · 점 16(단추 44) · 목록 아래(12 | 88 | 1fr | 16 · 갈래 라벨은 부위 아래) */
  .dn_body{display:block}
  .dn_body__f{display:block;width:280px;margin:0 auto}
  .dn_body__pic{width:100%;height:auto;aspect-ratio:400/620}   /* 폰은 280 폭에서 비율(400:620)대로 434 — PC 의 고정 360×558 을 푼다 */
  .dn_body__dot{width:44px;height:44px;border:0;background:none;box-shadow:none}
  .dn_body__dot::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;border:2px solid var(--hm-paper);background:var(--hm-brown);translate:-50% -50%;box-sizing:border-box}
  .dn_body__dot--b::before{background:color-mix(in srgb,var(--hm-brown) 60%,var(--hm-paper))}
  .dn_body__dot--c::before{background:color-mix(in srgb,var(--hm-brown) 30%,var(--hm-paper))}
  .dn_body__dot:hover,.dn_body__dot:focus-visible,.dn_body__dot.is-hot{box-shadow:none}
  .dn_body__dot:hover::before,.dn_body__dot:focus-visible::before,.dn_body__dot.is-hot::before{box-shadow:0 0 0 8px color-mix(in srgb,var(--hm-brown) 18%,transparent)}
  .dn_body__l{margin-top:1.75rem}
  .dn_body__i>summary{grid-template-columns:12px 88px minmax(0,1fr) 16px;gap:.75rem;padding:.875rem 0;min-height:60px}
  .dn_body__i>summary i{grid-row:1/3}
  .dn_body__i>summary b{grid-row:1;font-size:var(--hm-t3)}
  .dn_body__i>summary span{grid-row:1/3;font-size:var(--hm-t2)}
  .dn_body__i>summary em{grid-column:2;grid-row:2;font-size:var(--hm-t1);white-space:normal}
  .dn_body__i>summary::after{grid-column:4;grid-row:1/3}
  .dn_body__i.is-hot>summary,.dn_body__i>summary:hover{margin:0;padding-left:0;padding-right:0}
  .dn_pg .dn_body__i>p{padding-left:0}
  /* 척추 그림 목록 — 폰은 [점 | 레벨 64 | 부위 · 그 아래 증상 | +] : 레벨 칸 폭이 늘 같고 나머지는 한 칸에 위아래로(머리 줄은 두 칸 · 2026-09-26 C 부터 살피는 상태 줄 없음) */
  .dn_spine__hd{grid-template-columns:12px 64px minmax(0,1fr);gap:.75rem}
  .dn_spine__hd span:last-child{display:none}
  .dn_spine .dn_body__i>summary{grid-template-columns:12px 64px minmax(0,1fr) 16px;grid-template-rows:auto auto;gap:.25rem .75rem;align-items:start}
  .dn_spine .dn_body__i>summary i{grid-row:1;align-self:center}
  .dn_spine .dn_body__i>summary b{grid-column:2;grid-row:1/3;font-size:var(--hm-t4)}
  .dn_spine .dn_body__i>summary strong{grid-column:3;grid-row:1;font-size:var(--hm-t3)}
  .dn_spine .dn_body__i>summary span{grid-column:3;grid-row:2;align-self:start;font-size:var(--hm-t2)}   /* 폰 증상은 t2 — 위 PC 규칙의 --sp-fs(t4)가 이기지 않게(재검수 J1 뒤 390 목록 670 → 700 으로 늘었던 것) */
  .dn_spine .dn_body__i>summary::after{grid-column:4;grid-row:1;align-self:center}
  .dn_pg .dn_spine .dn_spine__more{padding:0 0 1rem 100px}   /* 부위 칸(점 12 + 틈 12 + 레벨 64 + 틈 12 = 100)에서 시작 — 88 은 틈 하나를 빠뜨려 12px 어긋났다(검수 2026-09-24) */
  .dn_card__ex{margin:0 -.75rem}.dn_card__ex figcaption{padding:0 .75rem}   /* 폰 카드 안쪽 여백(.75rem)만큼 밖으로 — 실제 예 그림 폭 = 닫힌 그림 폭 348 */
  .dn_check{grid-template-columns:1fr;gap:.75rem}.dn_check li{font-size:var(--hm-t3)}
  .dn_kv--pg{grid-template-columns:6.5rem minmax(0,1fr)}
  .dn_split,.dn_split--flip{grid-template-columns:1fr;gap:1.25rem}.dn_split--flip .dn_split__f{order:0}.dn_split__t{padding-top:1.125rem}
  /* 치료 세부(method) 폰 — 이름 28px · 차례는 세로(번호 칸 2.25rem | 제목·글 · 줄 위 선 1px) · 짝 줄은 용어 5.5rem */
  .dn_pg .dn_mt__t{font-size:max(1.75rem,calc(28px*var(--dn-fs,1)));font-weight:400}
  .dn_pg .dn_mt__how,.dn_pg .dn_mt__how--2,.dn_pg .dn_mt__how--4{grid-template-columns:1fr;gap:0;margin-top:1.25rem}
  .dn_mt__how li{display:grid;grid-template-columns:2.25rem minmax(0,1fr);column-gap:.75rem;row-gap:.25rem;padding:.875rem 0;border-top-width:1px}
  .dn_mt__how li:last-child{border-bottom:1px solid var(--hm-line)}
  .dn_mt__how:has(+ .dn_mt__kv) li:last-child{border-bottom:0}   /* 짝 줄이 뒤에 오면 그 위 선(kv border-top) 하나로 — 둘 다 두면 1px 두 줄이 20px 사이로 겹쳐 보였다(라이브 검수 2026-09-24 · 추나·도수) · 짝 줄이 없으면 위 줄이 목록을 닫는다 */
  .dn_mt__how i{grid-row:1/3;padding-top:.15rem}.dn_mt__how b,.dn_mt__how span{grid-column:2}
  .dn_pg .dn_mt__kv{margin-top:1.25rem}.dn_mt__kv>div{grid-template-columns:5.5rem minmax(0,1fr);gap:.75rem}
  .dn_gal,.dn_gal--2,.dn_gal--4{grid-template-columns:1fr 1fr;gap:.75rem 1rem;container-type:inline-size}
  .dn_gal figure:nth-child(2n+3):last-child{grid-column:1/-1}   /* 셋·다섯이면 마지막 사진이 한 줄 전체(2+1 빈 칸 · 검수 2026-09-23 · 재활치료실 셋) */
  .dn_gal figure:nth-child(2n+3):last-child img{height:calc((100cqw - 1rem) * .375)}   /* 전폭 사진의 높이 = 두 칸 사진의 높이((격자 폭 − 틈 1rem) ÷ 2 × 3/4) — 비율이 달라지지 않게 cover 로 자른다. 100cqw 를 모르는 브라우저는 이 줄을 버리고 4:3 그대로 */
  .dn_gal figure{border-radius:0;overflow:visible;background:none}.dn_gal img{border-radius:12px;filter:none}
  .dn_gal figcaption{position:static;padding:.5rem 0 0;opacity:1;transform:none;background:none;color:var(--hm-mute);font-size:var(--hm-t0)}
  .dn_steps li{grid-template-columns:2.25rem minmax(0,1fr);padding:1rem 1.125rem;column-gap:1rem}.dn_steps li.has-ic{grid-template-columns:2.25rem minmax(0,1fr)}.dn_steps li .dn_ic{display:none}
  .dn_steps li::before{width:2.25rem;height:2.25rem;font-size:var(--hm-t2)}.dn_steps li b{font-size:var(--hm-t4)}
  .dn_qa{grid-template-columns:1fr;gap:max(.3rem,4px)}   /* 서사 쪽 폰과 같이 한 칸 */
  .dn_cta{padding:1.25rem;gap:1.25rem}.dn_cta__act{display:grid;grid-template-columns:1fr}.dn_cta__act .dn_btn--tel{display:none}.dn_pg .dn_cta__act .dn_btn{height:56px;min-width:0}
  .dn_cmp:not(.dn_cmp--grid) thead{display:none}
  .dn_cmp:not(.dn_cmp--grid) tr,.dn_cmp:not(.dn_cmp--grid) tbody th,.dn_cmp:not(.dn_cmp--grid) td{display:block;width:auto}
  .dn_cmp:not(.dn_cmp--grid) tbody th{padding:1rem 1.125rem .25rem}.dn_cmp:not(.dn_cmp--grid) tbody tr:first-child th{border-top:0}
  .dn_cmp:not(.dn_cmp--grid) td{padding:.5rem 1.125rem;border-top:0}
  .dn_cmp:not(.dn_cmp--grid) td::before{content:attr(data-th);display:block;margin-bottom:.1rem;font-size:var(--hm-t0);font-weight:700;color:var(--hm-mute)}
  .dn_cmp:not(.dn_cmp--grid) td.is-us{margin-top:.5rem;padding:.75rem 1.125rem 1rem}
  /* 옛 표 꼴은 폰도 표 그대로 — 안쪽 350 = 줄 이름 104 + 값 82×3 · 머리 두 줄 12px · 줄 48 · 아이콘 18 */
  .dn_cmp--grid thead th{height:56px;font-size:var(--hm-t1);line-height:1.3;padding:0 4px}
  .dn_cmp--grid th:first-child{width:104px}
  .dn_cmp--grid tbody th{height:48px;padding:0 10px;font-size:var(--hm-t0);line-height:1.35}
  .dn_cmp--grid tbody td{height:48px;padding:0 4px}
  .dn_cmp--grid svg{width:18px;height:18px}.dn_cmp__tx{font-size:var(--hm-t0)}
}

/* 척추 그림 목록 — **목록 폭**(container spinelist)으로 줄 배치를 고른다 · 원장님 2026-09-24 「카드 내용들이 왼쪽으로 쏠려있음」(PC 1440 실측 : 줄 오른쪽 238~326px 가 비었다 · 태블릿 1024 는 폰 꼴이라 571~659px) :
   폭 600 이상 = PC 꼴 한 줄 [점 | 레벨 72 | 부위 1fr | 증상 1fr(--sp-key 아래로 안 줄어듦) | +] — PC 기본 꼴과 같은 값을 다시 적어 태블릿(≤1024 의 폰 규칙)을 되돌린다 · PC 에는 바뀌는 값이 없다.
   (2026-09-24 ~ 09-25 는 폭 740 이상에서 살피는 상태가 넷째 칸이었다 — 2026-09-26 원장님 C 로 닫힌 줄에서 상태를 빼며 그 칸도 없앴다.)
   (검수 F2 에서 660 으로 올렸다가 재검수 s2 로 600 으로 되돌림 — 창 640~699 가 폰 꼴이 되어 줄 오른쪽이 250~400px 비었다 · 아이폰 SE 가로 667.)
   폭 600~699(태블릿 · 폰 가로) 는 아래 블록이 레벨 칸 64 · 칸 사이 12 로 좁혀(폰 꼴과 같은 값) 한 줄에 들게 한다 — 태블릿 글자(17px)에서 증상 칸 --sp-key 275 + 가장 긴 부위 글 209 + 고정 140 = 624 이상이면 모든 줄 한 줄(아이폰 SE 가로 667 = 목록 627) ·
   600~623 은 가장 긴 부위 글(C7~C8 「팔 뒤·안쪽 · 가운데~새끼손가락」) 한 줄만 두 줄로 꺾인다.
   ⚠ 폰 규칙(위 ≤1024 블록)보다 **뒤에** 있어야 이긴다 — 선택자 무게는 같거나 크게 */
@container spinelist (min-width:600px){
  .dn_spine .dn_spine__hd{grid-template-columns:12px 72px minmax(0,1fr) minmax(var(--sp-key),1fr) 16px;gap:max(1rem,16px)}
  .dn_spine .dn_spine__hd span:last-child{display:block}
  .dn_spine .dn_body__i>summary{grid-template-columns:12px 72px minmax(0,1fr) minmax(var(--sp-key),1fr) 16px;grid-template-rows:auto;gap:max(1rem,16px);align-items:center;padding-block:max(.75rem,12px);min-height:64px}
  .dn_spine .dn_body__i>summary i{grid-row:1;align-self:center}
  .dn_spine .dn_body__i>summary b{grid-column:2;grid-row:1;font-size:var(--hm-t6)}
  .dn_spine .dn_body__i>summary strong{grid-column:3;grid-row:1;font-size:var(--sp-fs)}
  .dn_spine .dn_body__i>summary span{grid-column:4;grid-row:1;align-self:center;font-size:var(--sp-fs)}
  .dn_spine .dn_body__i>summary::after{grid-column:5;grid-row:1;align-self:center}
  .dn_pg .dn_spine .dn_spine__more{padding:0 max(2rem,32px) max(1.25rem,20px) 116px}
}
@media(max-width:1024px){@container spinelist (min-width:600px) and (max-width:699px){   /* 한 줄 꼴의 좁은 끝(태블릿 · 폰 가로만 — PC 창은 그대로) — 위 주석(재검수 s2) · 부위 칸 x = 12 + 12 + 64 + 12 = 100 */
  .dn_spine .dn_spine__hd,.dn_spine .dn_body__i>summary{grid-template-columns:12px 64px minmax(0,1fr) minmax(var(--sp-key),1fr) 16px;column-gap:.75rem}
  .dn_spine .dn_body__i>summary b{font-size:var(--hm-t4)}   /* 레벨 글자를 폰과 같은 t4(17px)로 — 태블릿 t6(20px)이면 「T1~T12」 69px 가 칸 64 를 5px 넘어 부위 글과 틈 6.9px(다른 폭 17~19 · 재검수 20260926_hp0926d s1) · t4 면 59px → 틈 17px */
  .dn_pg .dn_spine .dn_spine__more{padding-left:100px}
}}
/* 원리 그림 둘 — 좁은 폭(≤700)만 세로로 쌓는다(폭 = 글 폭 · 두 그림 폭이 같다). 검수 2026-09-24 A4 : ≤1024 에서 쌓으면 그림 글자가 절 제목보다 커져 태블릿은 나란히.
   2026-09-24 오후 셋째 판(760×400 · 이름표 29 단위)에서 끊는 자리를 600 → 700 : 나란히면 701 에서 그림 약 318px · 이름표 12.2px(폰 기준 12 이상) · 600 이면 9.6px 였다 */
@media(max-width:700px){.dn_qf{flex-direction:column;align-items:center}.dn_qf__f{flex:none;width:100%;max-width:calc(var(--qf-w,100000) * 1px)}}

/* 차례로 나타나기(120ms) — 만들어 넣은 줄 */
.dn_pg .dn_card:nth-child(2){--d:0.62s}.dn_pg .dn_card:nth-child(3){--d:0.74s}.dn_pg .dn_card:nth-child(4){--d:0.86s}.dn_pg .dn_card:nth-child(5){--d:0.98s}.dn_pg .dn_card:nth-child(6){--d:1.10s}.dn_pg .dn_card:nth-child(7){--d:1.22s}.dn_pg .dn_card:nth-child(8){--d:1.34s}
.dn_pg .dn_steps li:nth-child(2){--d:0.62s}.dn_pg .dn_steps li:nth-child(3){--d:0.74s}.dn_pg .dn_steps li:nth-child(4){--d:0.86s}.dn_pg .dn_steps li:nth-child(5){--d:0.98s}.dn_pg .dn_steps li:nth-child(6){--d:1.10s}.dn_pg .dn_steps li:nth-child(7){--d:1.22s}.dn_pg .dn_steps li:nth-child(8){--d:1.34s}
.dn_pg .dn_gal figure:nth-child(2){--d:0.62s}.dn_pg .dn_gal figure:nth-child(3){--d:0.74s}.dn_pg .dn_gal figure:nth-child(4){--d:0.86s}.dn_pg .dn_gal figure:nth-child(5){--d:0.98s}.dn_pg .dn_gal figure:nth-child(6){--d:1.10s}.dn_pg .dn_gal figure:nth-child(7){--d:1.22s}.dn_pg .dn_gal figure:nth-child(8){--d:1.34s}
.dn_pg .dn_door:nth-child(2){--d:0.62s}.dn_pg .dn_door:nth-child(3){--d:0.74s}.dn_pg .dn_door:nth-child(4){--d:0.86s}.dn_pg .dn_door:nth-child(5){--d:0.98s}.dn_pg .dn_door:nth-child(6){--d:1.10s}.dn_pg .dn_door:nth-child(7){--d:1.22s}.dn_pg .dn_door:nth-child(8){--d:1.34s}

/* 몸 그림 점 자리(BODY_DOTS · 실루엣 400×620 기준 %) + 척추 그림 점 자리(SPINE_DOTS · spine_svg.lateral 이 센 %) — 만들어 넣은 줄 */
.dn_body__dot[data-key="head"]{left:50%;top:9.0%}
.dn_body__dot[data-key="neck"]{left:50%;top:18.7%}
.dn_body__dot[data-key="chest"]{left:50%;top:30.6%}
.dn_body__dot[data-key="back"]{left:50%;top:45.5%}
.dn_body__dot[data-key="arm"]{left:30%;top:42.3%}
.dn_body__dot[data-key="hand"]{left:72.5%;top:55.5%}
.dn_body__dot[data-key="leg"]{left:58.5%;top:72.9%}
.dn_body__dot[data-key="foot"]{left:41.5%;top:90.3%}
.dn_body__dot[data-key="shoulder"]{left:62.5%;top:24.2%}
.dn_body__dot[data-key="c14"]{left:43.6%;top:19.2%}
.dn_body__dot[data-key="c56"]{left:46.6%;top:28.4%}
.dn_body__dot[data-key="c78"]{left:48.5%;top:31.9%}
.dn_body__dot[data-key="t"]{left:54.0%;top:50.5%}
.dn_body__dot[data-key="l13"]{left:44.2%;top:74.2%}
.dn_body__dot[data-key="l45"]{left:48.0%;top:87.8%}
.dn_body__dot[data-key="s1"]{left:52.5%;top:93.8%}

/* ── 2026-09-24 homepage-S 가 더한 것(산재 · 시설안내) — kv 의 rows · gallery 의 below · lists · rail. 기존 부품의 규칙은 건드리지 않고 **새 이름에만** 건다.
   상자·배지 없이 선 · 점 · 간격 · 글자 크기로(원장님 취향). 글자는 토큰 사다리(--hm-t*)만 · 색은 토큰(--hm-* · --dn-accent)만.
   문장으로 된 풀이(정의 줄 설명 · 사진 설명 · 갈래 목록 풀이 · 선 위 차례 글)는 **PC t4 · 폰 t3 · 줄 간격 1.9 · 글색 ink2** — 옛 판 같은 문장의 값(15/28.5 · 폰 16/30.4)과 같거나 크게.
   처음엔 t2 · 1.75 · mute 로 옛 판보다 작고 좁고 옅었다(audit 20260924_work_stay 고칠 것 1 · 원장님 2026-09-22 「줄 간격이 좁다」 다섯 번). */

/* 읽는 정의 줄(kv rows=True) — [용어 | 설명] · 줄 아래 선 1px · 폭 64rem(설명 ~40자/줄 @1440). split 의 글 쪽에서는 쌓인다.
   용어 칸은 220px 부터 가장 긴 용어만큼(최대 320 · dt max-width) — 「잠재적 증상을 관찰해야 할 때」 같은 긴 용어가 두 줄로 꺾이지 않게 · 짧은 용어 줄은 220 그대로 */
.dn_pg .dn_kv--rows{grid-template-columns:minmax(max(14rem,220px),max-content) minmax(0,1fr);row-gap:0;column-gap:0;max-width:max(64rem,880px);border-top:1px solid var(--hm-line);line-height:1.9}
.dn_pg .dn_kv--rows dt,.dn_pg .dn_kv--rows dd{padding:max(1.125rem,18px) 0;border-bottom:1px solid var(--hm-line)}
.dn_pg .dn_kv--rows dt{max-width:max(22rem,320px);padding-right:max(1.5rem,24px);font-size:var(--hm-t5);font-weight:700;line-height:1.6;color:var(--hm-brown)}
.dn_pg .dn_kv--rows dd{font-size:var(--hm-t4);color:var(--hm-ink2)}
.dn_pg .dn_split .dn_kv--rows{grid-template-columns:minmax(0,1fr)}
.dn_pg .dn_split .dn_kv--rows dt{padding:max(1rem,16px) 0 max(.25rem,4px);border-bottom:0}
.dn_pg .dn_split .dn_kv--rows dd{padding-top:0}
.dn_pg .dn_split .dn_kv--rows.is-short{grid-template-columns:112px minmax(0,1fr)}   /* 용어가 짧으면(6자 이하) 좁은 칸에서도 나란히 — 쌓으면 줄마다 한 줄씩 는다 */
.dn_pg .dn_split .dn_kv--rows.is-short dt{padding:max(.875rem,14px) max(1rem,16px) max(.875rem,14px) 0;border-bottom:1px solid var(--hm-line)}
.dn_pg .dn_split .dn_kv--rows.is-short dd{padding:max(.875rem,14px) 0}

/* 사진 여러 장 — 설명을 아래에(gallery cap="below") : 컬러 · 둥근 14 · 제목 t5 700 + 한 줄 t2 mute. 비율은 사본 크기 그대로(4:3 · 3:2). 6칸은 작은 사진 줄(제목 t3) */
.dn_gal--6{grid-template-columns:repeat(6,minmax(0,1fr))}
.dn_pg .dn_gal--4.dn_gal--below{grid-template-columns:repeat(4,minmax(0,1fr))}   /* 공용 ≤1280 규칙(.dn_gal--4 두 칸)을 이 꼴에서만 되돌린다 — 두 칸이면 「작은 사진 넷」이 위의 큰 사진 둘과 같은 크기가 되어 위계가 사라진다(1100 실측 499.6 = 499.6) */
.dn_gal--below{gap:max(2rem,32px) max(1.5rem,24px);align-items:start}
.dn_gal--6.dn_gal--below{row-gap:max(1.5rem,24px)}   /* 칸 사이는 3칸과 같은 24 — 6칸 둘이 3칸 하나와 모서리가 맞는다(방 셋 아래 설비 여섯) */
.dn_gal--below figure{border-radius:0;overflow:visible;background:none}
.dn_pg .dn_gal.dn_gal--below figure:nth-child(n) img{height:auto;aspect-ratio:auto;border-radius:14px;filter:none;background:var(--hm-line)}
.dn_gal--below figure:hover img,.dn_gal--below figure:focus-within img{transform:none}
.dn_pg .dn_gal--below figcaption{position:static;display:flex;flex-direction:column;gap:max(.25rem,4px);padding:max(.875rem,14px) 0 0;opacity:1;transform:none;background:none;color:var(--hm-ink)}
.dn_pg .dn_gal--below figcaption b{font-size:var(--hm-t5);font-weight:700;line-height:1.45}
.dn_pg .dn_gal--below figcaption span{font-size:var(--hm-t4);line-height:1.9;color:var(--hm-ink2)}
.dn_pg .dn_gal--6.dn_gal--below figcaption{padding-top:max(.625rem,10px)}
.dn_pg .dn_gal--6.dn_gal--below figcaption b{font-size:var(--hm-t3);font-weight:600}

/* 갈래 목록(lists) — 칸 2~3 · 칸 위 선 2px(첫 칸 강조색) · 줄 아래 선 1px */
.dn_lists{display:grid;gap:max(2.5rem,40px);align-items:start}
.dn_lists--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dn_lists--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.dn_lists__c{padding-top:max(1rem,16px);border-top:2px solid var(--hm-line);min-width:0}
.dn_lists__c:first-child{border-top-color:var(--dn-accent)}
.dn_pg .dn_lists__eb{font-size:var(--hm-t1);font-weight:700;letter-spacing:.06em;line-height:1.5;color:var(--dn-accent)}
.dn_pg .dn_lists__t{margin-top:max(.25rem,4px);font-size:var(--hm-t6);font-weight:700;line-height:1.4;color:var(--hm-ink)}
.dn_pg .dn_lists ul{margin-top:max(.5rem,8px)}
.dn_lists li{display:flex;flex-direction:column;gap:max(.25rem,4px);padding:max(.875rem,14px) 0;border-bottom:1px solid var(--hm-line)}
.dn_lists li b{font-size:var(--hm-t4);font-weight:700;line-height:1.5;color:var(--hm-ink)}
.dn_pg .dn_lists li span{font-size:var(--hm-t4);line-height:1.9;color:var(--hm-ink2)}

/* 선 위의 점(rail) — PC 가로 : [끝 56 | 마디 칸 | 끝 56] · 선 2px(처음 옅게 → 강조색) y20 · 점 14(바탕색 고리 4px로 선을 끊는다) · 번호 t1 700 강조색 · 제목 t5 700 · 한 줄 t3 ink2.
   세로(폰 · is-v) : 선 x20 · 마디는 왼쪽 56 들여 · 끝은 아이콘 옆에 라벨. 끝이 있으면 선 하나가 끝에서 끝까지, 없으면 점과 점 사이 토막 */
.dn_rail{--rl-bg:var(--hm-bg);--rl-gap:max(1.5rem,24px);position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.dn_pg section.is-paper .dn_rail{--rl-bg:var(--hm-paper)}
.dn_rail.has-ends{grid-template-columns:max(3.5rem,56px) minmax(0,1fr) max(3.5rem,56px);column-gap:var(--rl-gap)}
.dn_rail.has-ends::before{content:"";position:absolute;left:28px;right:28px;top:19px;height:2px;background:var(--hm-line);background:linear-gradient(90deg,color-mix(in srgb,var(--dn-accent) 25%,var(--rl-bg)),var(--dn-accent))}
.dn_rail__end{position:relative;display:flex;flex-direction:column;align-items:center;gap:max(.5rem,8px);min-width:0}
.dn_rail__ic{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--hm-line);background:var(--rl-bg);color:var(--dn-accent)}
.dn_rail__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dn_rail__end b{font-size:var(--hm-t2);font-weight:700;line-height:1.4;color:var(--hm-ink);white-space:nowrap}
.dn_pg .dn_rail__l{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--rl-gap);margin:0;padding:0;list-style:none}
.dn_rail__l li{position:relative;display:flex;flex-direction:column;gap:max(.375rem,6px);padding-top:44px;min-width:0}
.dn_rail__l li>i{position:absolute;left:0;top:13px;z-index:1;width:14px;height:14px;border-radius:50%;background:var(--dn-accent);box-shadow:0 0 0 4px var(--rl-bg)}
.dn_rail__l li:nth-child(1)>i{background:color-mix(in srgb,var(--dn-accent) 45%,var(--rl-bg))}
.dn_rail__l li:nth-child(2)>i{background:color-mix(in srgb,var(--dn-accent) 65%,var(--rl-bg))}
.dn_rail__l li:nth-child(3)>i{background:color-mix(in srgb,var(--dn-accent) 85%,var(--rl-bg))}
.dn_rail:not(.has-ends) .dn_rail__l li:not(:last-child)::after{content:"";position:absolute;left:7px;right:calc(-1 * var(--rl-gap) - 7px);top:19px;height:2px;background:var(--hm-line)}
.dn_rail__l em{display:block;margin-bottom:max(.375rem,6px);font-style:normal;font-size:var(--hm-t1);font-weight:700;letter-spacing:.08em;line-height:1.5;color:var(--dn-accent)}
.dn_rail__l b{font-size:var(--hm-t5);font-weight:700;line-height:1.45;color:var(--hm-ink)}
.dn_pg .dn_rail__l span{font-size:var(--hm-t4);line-height:1.9;color:var(--hm-ink2)}
/* 세로 꼴 — vertical=True(모든 폭)와 폰(≤1024) 이 같은 규칙. 폰은 아래 @media 에서 같은 줄을 한 번 더 건다 */
.dn_rail.is-v,.dn_rail.is-v.has-ends{grid-template-columns:minmax(0,1fr);row-gap:0}
.dn_rail.is-v.has-ends::before{left:19px;right:auto;top:20px;bottom:20px;width:2px;height:auto;background:linear-gradient(180deg,color-mix(in srgb,var(--dn-accent) 25%,var(--rl-bg)),var(--dn-accent))}
.dn_rail.is-v .dn_rail__end{flex-direction:row;gap:max(.75rem,12px)}
.dn_pg .dn_rail.is-v .dn_rail__l{grid-auto-flow:row;grid-auto-columns:auto;gap:0;padding:max(.25rem,4px) 0}
.dn_rail.is-v .dn_rail__l li{padding:max(.875rem,14px) 0 max(.875rem,14px) 56px}
.dn_rail.is-v .dn_rail__l li>i{left:13px;top:20px}
.dn_rail.is-v .dn_rail__l em{display:inline;margin:0 max(.625rem,10px) 0 0}   /* 세로는 번호를 제목 앞에 한 줄로 — 마디마다 한 줄 덜 */
.dn_rail.is-v:not(.has-ends) .dn_rail__l li:not(:last-child)::after{left:19px;right:auto;top:27px;bottom:-27px;width:2px;height:auto}
.dn_split .dn_rail.is-v{margin-top:max(.5rem,8px)}

@media(max-width:1024px){
  .dn_pg .dn_kv--rows{grid-template-columns:minmax(0,1fr)}
  .dn_pg .dn_kv--rows dt{padding:max(1rem,16px) 0 max(.25rem,4px);border-bottom:0}
  .dn_pg .dn_kv--rows dd{padding-top:0;font-size:var(--hm-t3)}
  .dn_pg .dn_gal--below figcaption span,.dn_pg .dn_lists li span,.dn_pg .dn_rail__l span{font-size:var(--hm-t3)}   /* 폰 풀이 글 16px · 1.9(옛 판 16/30.4) */
  .dn_pg .dn_kv--rows.is-short,.dn_pg .dn_split .dn_kv--rows.is-short{grid-template-columns:112px minmax(0,1fr)}
  .dn_pg .dn_kv--rows.is-short dt{padding:max(.875rem,14px) max(1rem,16px) max(.875rem,14px) 0;border-bottom:1px solid var(--hm-line)}
  .dn_pg .dn_kv--rows.is-short dd{padding:max(.875rem,14px) 0}
  /* 사진 아래 설명 — 태블릿(641~1024)은 PC 칸 수 그대로(6칸도 6칸 · ≤800 에서만 2칸은 한 칸 · 4칸은 두 칸) · 폰(≤640)은 아래 줄. 공용 폰 규칙(.dn_gal 두 칸 · 홀수 끝 사진 한 줄 전체)을 이 꼴에서만 되돌린다 */
  .dn_pg .dn_gal.dn_gal--below{gap:max(1.5rem,24px) 1rem}
  .dn_pg .dn_gal--2.dn_gal--below{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dn_pg .dn_gal--3.dn_gal--below{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dn_pg .dn_gal--4.dn_gal--below{grid-template-columns:repeat(4,minmax(0,1fr))}
  .dn_pg .dn_gal--6.dn_gal--below{grid-template-columns:repeat(6,minmax(0,1fr))}   /* 설비 여섯은 태블릿도 6칸 — 3칸이면 위의 방 셋과 같은 크기(1024 317 = 317 · 768 232 = 232)라 「방 크게 · 설비 작게」가 사라졌다(audit 고칠 것 2) · 틈 16 이 같아 6칸 둘 = 3칸 하나 */
  .dn_pg .dn_gal.dn_gal--below figure:nth-child(n){grid-column:auto}
  .dn_pg .dn_gal.dn_gal--below figure:nth-child(n) img{border-radius:12px}
  .dn_pg .dn_gal--below figcaption{padding-top:max(.625rem,10px)}
  .dn_pg .dn_gal--below figcaption b{font-size:var(--hm-t4)}
  .dn_pg .dn_gal--4.dn_gal--below figcaption b{font-size:var(--hm-t3)}
  .dn_pg .dn_gal--6.dn_gal--below figcaption{padding-top:max(.375rem,6px)}
  .dn_pg .dn_gal--6.dn_gal--below figcaption b{font-size:var(--hm-t0);font-weight:600;line-height:1.4}   /* 설비 이름 13px(옛 판 폰 설명 13px) */
  .dn_lists--2,.dn_lists--3{grid-template-columns:minmax(0,1fr);gap:max(1.75rem,28px)}
  .dn_lists li{display:block;padding:max(.75rem,12px) 0;line-height:1.9}   /* 폰은 굵은 말 뒤에 풀이를 이어 쓴다(한 줄 덜) · 이어 쓴 줄의 간격도 1.9 */
  .dn_lists li span{margin-left:max(.5rem,8px)}
  .dn_rail.has-ends{grid-template-columns:minmax(0,1fr);row-gap:0}
  .dn_rail.has-ends::before{left:19px;right:auto;top:20px;bottom:20px;width:2px;height:auto;background:linear-gradient(180deg,color-mix(in srgb,var(--dn-accent) 25%,var(--rl-bg)),var(--dn-accent))}
  .dn_rail__end{flex-direction:row;gap:max(.75rem,12px)}
  .dn_pg .dn_rail__l{grid-auto-flow:row;grid-auto-columns:auto;gap:0;padding:max(.25rem,4px) 0}
  .dn_rail__l li{padding:max(.875rem,14px) 0 max(.875rem,14px) 56px}
  .dn_rail__l li>i{left:13px;top:20px}
  .dn_rail:not(.has-ends) .dn_rail__l li:not(:last-child)::after{left:19px;right:auto;top:27px;bottom:-27px;width:2px;height:auto}
  .dn_rail__l em{display:inline;margin:0 max(.625rem,10px) 0 0}
}
@media(max-width:800px){   /* 태블릿 세로 — 작은 사진 넷(4칸 170px · 설명 5~7줄)은 두 칸, 그 위 큰 사진 둘은 한 칸 : 둘 다 두 칸이면 같은 크기가 되어 「둘 크게 · 넷 작게」가 사라진다(audit 고칠 것 2) */
  .dn_pg .dn_gal--2.dn_gal--below{grid-template-columns:minmax(0,1fr)}
  .dn_pg .dn_gal--4.dn_gal--below{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .dn_pg .dn_gal--3.dn_gal--below{grid-template-columns:minmax(0,1fr)}
  .dn_pg .dn_gal--4.dn_gal--below figcaption span{font-size:var(--hm-t2)}   /* 폰 두 칸(167px)의 설명 — 16px 이면 한 줄 9~10자로 6줄이 된다 · 15px 는 옛 판 카드 글(15/27 · mute)과 같은 크기에 줄 간격 1.9 · ink2 */
  .dn_pg .dn_gal--6.dn_gal--below{grid-template-columns:repeat(3,minmax(0,1fr));gap:max(1rem,16px) max(.625rem,10px)}
}

/* ── 2026-09-24 audit 20260924_ws2 고칠 것 4(시설안내 로비 · 검사) — 새 부품 panorama · split 의 small. 새 이름에만 건다 */
/* 넓은 사진 한 장 + 아래 글(panorama) — 사진은 절 폭 전체 · 원본 비율 그대로 · 둥근 18(split 사진과 같음). 글은 PC 두 칸 · 두 칸 다 위 선 1px(같은 높이) · ≤1024 쌓임 · 폰 사진 창 3:2 */
.dn_pano{display:flex;flex-direction:column;gap:max(2rem,32px)}
.dn_pano__f{margin:0;border-radius:18px;overflow:hidden;background:var(--hm-line)}
.dn_pano__f img{display:block;width:100%;height:auto}
.dn_pano__t{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:3.5rem;row-gap:0;align-items:start}
.dn_pano__t>div{min-width:0}
.dn_pg .dn_pano__t .dn_prose{max-width:none;padding-top:max(1.125rem,18px);border-top:1px solid var(--hm-line)}   /* max-width:none — 위 선이 prose 의 읽기 폭(62ch)에서 끊겨 칸보다 짧았다(1440 선 554 · 칸 611 · 1024 591 · 984 · audit 20260924_wsf 고칠 것 1) · 한 문장뿐이라 줄 길이 걱정 없음 */
.dn_pg .dn_pano .dn_kv--rows.is-short{grid-template-columns:112px minmax(0,1fr)}   /* 용어가 짧으면(로비 · 카페) 용어 칸 112 — 기본 220 이면 두 글자 옆이 빈다 */
/* 짧은 글 옆 작은 사진(split small=True) — 사진 한 칸 : 글 세 칸 · 칸과 틈이 작은 사진 넷(gallery cols=4 below)과 같아 사진 가장자리가 그 줄과 맞는다 · 사진 둥근 14(작은 사진과 같음) */
.dn_split--small{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:max(1.5rem,24px)}
.dn_split--small>*{grid-row:1}
.dn_split--small .dn_split__t{grid-column:1/4}
.dn_split--small .dn_split__f{grid-column:4;border-radius:14px}
.dn_split--small .dn_split__f:hover img{transform:none}   /* 작은 사진 넷(below)처럼 올려도 그대로 */
.dn_split--small.dn_split--flip .dn_split__t{grid-column:2/5}
.dn_split--small.dn_split--flip .dn_split__f{grid-column:1}
@media(max-width:1024px){
  .dn_pano{gap:1.25rem}
  .dn_pano__t{grid-template-columns:minmax(0,1fr)}
  .dn_pg .dn_split--small{column-gap:1rem}   /* 작은 사진 줄의 ≤1024 틈(1rem)과 같게 */
  .dn_pg .dn_split--small .dn_split__f{border-radius:12px}
}
@media(max-width:800px){
  .dn_pg .dn_split--small{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 작은 사진 넷이 두 칸이 되는 폭 — 사진 한 칸 : 글 한 칸 */
  .dn_pg .dn_split--small .dn_split__t{grid-column:1}
  .dn_pg .dn_split--small .dn_split__f{grid-column:2}
  .dn_pg .dn_split--small.dn_split--flip .dn_split__t{grid-column:2}
  .dn_pg .dn_split--small.dn_split--flip .dn_split__f{grid-column:1}
}
@media(max-width:640px){
  .dn_pano__f img{aspect-ratio:3/2;object-fit:cover}
  .dn_pg .dn_split--small{grid-template-columns:minmax(0,1fr)}   /* 폰은 다른 split 과 같이 쌓는다(글 → 사진) — 반폭 글(167px)은 여덟 줄이 된다 */
  .dn_pg .dn_split--small>.dn_split__t,.dn_pg .dn_split--small>.dn_split__f,
  .dn_pg .dn_split--small.dn_split--flip>.dn_split__t,.dn_pg .dn_split--small.dn_split--flip>.dn_split__f{grid-column:1;grid-row:auto}   /* ≤800 의 두 칸 자리(0,4,0)를 덮는다 */
}

/* ── 2026-09-24 수술 후 재활 검수 둘째 묶음(audit 20260924_r2)이 더한 것 — hint. **새 이름에만** 건다(dn_hint).
   (같은 묶음의 lists key · pair 규칙은 2026-09-25 에 치웠다 — 부르던 수술 후 재활 Stay 가 짝 견주기(vs · CSS_B)로 바뀌었다 · 되살릴 때는 git 6afe40ca) */
/* 덩이 바로 위 안내 한 줄(hint) — 절 머리 소개와 같은 글 · 아래 덩이와 사이 16(보통 36) */
.dn_pg .dn_hint{max-width:44rem;font-size:var(--hm-t2);line-height:var(--hm-lh);color:var(--hm-mute)}
.dn_pg section>.inner:not(.dn_band__in)>.dn_hint+*{margin-top:max(1rem,16px)}
/* 안내 바로 뒤의 흐름(PC ≥1025) — 흐름 틀(.dn_tl__pc)은 띠 이름 위에 76px 빈 곳을 두고 시작해(.dn_tl__bands top 76) 안내 ↔ 띠 이름이 97px 로 벌어지고
   안내가 위 문단(33px)의 꼬리말로 보였다(audit 20260924_f3 고칠 것 1 · 폰은 32 · 21). 이 조합에서만 틀 안의 것을 76 올리고 틀 높이를 그만큼 줄인다 —
   띠·축·눈금·마감선끼리의 자리와 눈금 아래 빈 곳은 그대로. 폰(≤1024)은 틀이 숨는다(display:none) */
.dn_pg .dn_hint+.dn_tl>.dn_tl__pc{height:calc(250px - 76px)}
.dn_pg .dn_hint+.dn_tl>.dn_tl__pc>*{translate:0 -76px}

/* ── 2026-09-25 수술 후 재활(원장님 넷째 묶음)이 더한 것 — vs(집에서는 | 입원하면 짝) · go(다른 쪽 절로 가는 글 링크) · split under 의 끝단 맞춤. **새 이름에만** 건다(split under 는 수술 후 재활 How 한 곳).
   상자·배지 없이 선 · 간격 · 글자 크기로(원장님 취향) : 걱정 줄은 위 선 1px · 옅은 아이콘 / 답 줄은 위 선 2px 강조색 · 우리 사진 · 진한 글. 글자는 토큰 사다리 · 색은 토큰만 */
.dn_vs{display:grid;grid-template-columns:max(7.5rem,120px) repeat(var(--n),minmax(0,1fr));grid-template-rows:auto auto;column-gap:max(1.5rem,24px)}
.dn_pg .dn_vs__lab{grid-column:1;margin:0;padding-top:max(1.125rem,18px);font-size:var(--hm-t5);font-weight:700;line-height:1.45}
.dn_pg .dn_vs__lab.is-home{grid-row:1;border-top:1px solid var(--hm-line);color:var(--hm-mute)}
.dn_pg .dn_vs__lab.is-stay{grid-row:2;border-top:2px solid var(--dn-accent);color:var(--dn-accent)}
.dn_vs__c{grid-row:1/3;display:grid;grid-template-rows:auto auto;grid-template-rows:subgrid;min-width:0}   /* subgrid 를 모르면 칸마다 제 높이(PC 나란히 그대로) */
.dn_vs__h{grid-row:1;min-width:0;padding:max(1.125rem,18px) 0 max(2rem,32px);border-top:1px solid var(--hm-line)}
.dn_vs__ic{display:block;width:32px;height:32px;color:var(--hm-mute)}
.dn_vs__ic svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dn_vs__h em{display:block;margin-top:max(.75rem,12px);font-style:normal;font-size:var(--hm-t1);font-weight:700;letter-spacing:.06em;line-height:1.5;color:var(--hm-mute)}
.dn_pg .dn_vs__h p{margin-top:max(.25rem,4px);font-size:var(--hm-t4);line-height:1.75;color:var(--hm-ink2);text-wrap:balance}
.dn_vs__s{grid-row:2;min-width:0;margin:0;padding-top:max(1.125rem,18px);border-top:2px solid var(--dn-accent)}
.dn_vs__s img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--hm-line)}
.dn_vs__s figcaption{display:flex;flex-direction:column;align-items:flex-start;gap:max(.25rem,4px);padding-top:max(.875rem,14px)}
.dn_pg .dn_vs__s b{font-size:var(--hm-t5);font-weight:700;line-height:1.5;color:var(--hm-ink);text-wrap:balance}
.dn_pg .dn_vs__s figcaption>span{font-size:var(--hm-t3);line-height:1.75;color:var(--hm-ink2);text-wrap:balance}
.dn_pg .dn_vs__foot{max-width:none;font-size:var(--hm-t3);line-height:1.8;color:var(--hm-mute)}
.dn_pg .dn_go{display:inline-flex;align-items:baseline;gap:.3em;font-size:var(--hm-t3);font-weight:700;line-height:1.6;color:var(--dn-accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;white-space:nowrap}
.dn_vs__s .dn_go{margin-top:max(.25rem,4px)}
/* split(fill=True)의 **끝단 맞춤**(PC) — 원장님 2026-09-25 「치료실장 프로필카드와 우측 카드 끝단 맞춰줘」 · 2026-10-07 「추천안대로」(카드는 split 밖 전폭 줄) :
   두 칸을 줄 높이만큼 늘이고(stretch) 사진은 줄 높이에 끼지 않게(absolute) 칸을 채운다(cover) → 사진 아래 끝 = 줄 아래 끝 = 접힌 카드 다섯의 아래 끝.
   사진 비율은 칸 높이에 따라 달라진다 · 접힌 카드를 열면 사진이 따라 길어진다. 사진은 최소 200(그보다 짧아지면 줄이 길어진다) */
@media(min-width:1025px){
  .dn_split--fill{align-items:stretch}
  .dn_split--fill>.dn_split__f{position:relative;min-height:max(12.5rem,200px)}
  .dn_split--fill>.dn_split__f img{position:absolute;inset:0;height:100%;aspect-ratio:auto}
}
@media(max-width:1024px){
  /* 폰 · 태블릿 — 주제가 줄 · [집에서는 | 입원하면] 두 칸(칸 이름은 맨 위 한 번) · 줄마다 아래 선 1px */
  .dn_vs{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;column-gap:max(1.25rem,20px)}
  .dn_pg .dn_vs__lab{grid-row:1;padding:max(.75rem,12px) 0 max(.25rem,4px);font-size:var(--hm-t4)}
  .dn_pg .dn_vs__lab.is-home{grid-column:1;border-top-width:2px}
  .dn_pg .dn_vs__lab.is-stay{grid-column:2;grid-row:1}
  .dn_vs__c{grid-column:1/-1;grid-row:auto;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-columns:subgrid;grid-template-rows:none;column-gap:max(1.25rem,20px);padding:max(1rem,16px) 0;border-bottom:1px solid var(--hm-line)}
  .dn_vs__h,.dn_vs__s{grid-row:1;padding:0;border-top:0}
  .dn_vs__h{grid-column:1}
  .dn_vs__s{grid-column:2}
  .dn_vs__ic{width:28px;height:28px}
  .dn_vs__h em{margin-top:max(.5rem,8px)}
  .dn_pg .dn_vs__h p{font-size:var(--hm-t3)}
  .dn_pg .dn_vs__s b{font-size:var(--hm-t4)}
  .dn_pg .dn_vs__s figcaption>span{font-size:var(--hm-t2)}
  .dn_vs__s figcaption{padding-top:max(.625rem,10px)}
}