/* =========================================================
   장형석한의원 — 2026 리뉴얼 (C안 · 차분한 의료, 2026-09-07)
   외부 의존성 없음 (Pretendard 웹폰트 CDN 1건만 선택적)

   2026-09-07 C안 반영 — README 27번 절.
   그라데이션·글로우·유리 효과·스크롤 등장·떠오르는 카드를 걷어내고
   파랑 하나(--acc)와 옅은 그림자 한 겹만 남겼습니다. 모서리는 8/12/16/20px 넷,
   제목 굵기는 700, 본문 폭은 760px 입니다. 첫 화면과 푸터는 어두운 남색 판이
   아니라 옅은 회색 바탕(--surface-2)에 검은 글씨입니다.
   ========================================================= */

/* ---------- 토큰 ---------- */
:root{
  /* ⚠ 2026-09-07 C안. 푸른 기운이 돌던 바탕(#F1F5FF)을 흰색으로, 글자를 중립 회색
     계열로 바꿨습니다. 잔글씨 --ink-3 는 흰 바탕 5.4:1 · --surface-2 위 4.8:1 로
     WCAG AA(4.5:1)를 넘깁니다(16-1 절과 같은 기준). */
  --bg:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#F3F5F8;
  --ink:#1A1F26;
  --ink-2:#4A5563;
  --ink-3:#5F6B7A;
  --line:rgba(26,31,38,.10);
  --line-2:rgba(26,31,38,.18);

  /* 포인트는 파랑 하나뿐입니다(흰 바탕 대비 6.6:1).
     ⚠ --acc-2 · --acc-3 는 예전 그라데이션의 시안·바이올렛이었습니다. 쓰는 자리
       (.gate .g-eng · footer 링크 hover 등)가 남아 있어 이름만 두고 같은 파랑을
       넣었습니다. 새로 쓰실 때는 --acc 를 쓰세요.
     --acc-ink  파랑 위에 얹는 글씨색. 어두운 화면에서는 파랑이 밝아지므로 검정이 됩니다.
     --acc-hover 버튼을 올렸을 때의 한 단계 진한 파랑.
     --acc-soft  옅은 파란 면(인용 상자·분류 딱지·초점 링). 예전 --grad-soft 자리입니다. */
  --acc:#1D5BB0;
  --acc-2:#1D5BB0;
  --acc-3:#1D5BB0;
  --acc-ink:#FFFFFF;
  --acc-hover:#174A91;
  --acc-soft:#EAF1FB;

  /* 남색 — 띠 배너(.band)와 시안 페이지의 옛 히어로 카드에만 씁니다.
     첫 화면과 푸터는 2026-09-07 부터 --surface-2 를 씁니다. */
  --deep:#17365E;
  --deep-2:#1E4677;
  --on-deep:#FFFFFF;
  --on-deep-2:rgba(255,255,255,.82);

  /* 그림자는 세 단계 다 '옅은 한 겹'입니다. 글로우는 없습니다. */
  --shadow-s:0 1px 2px rgba(26,31,38,.06);
  --shadow-m:0 2px 8px rgba(26,31,38,.08);
  --shadow-l:0 8px 24px rgba(26,31,38,.10);

  /* 모서리는 이 넷뿐입니다. px 값을 직접 적지 마세요. */
  --r-s:8px; --r:12px; --r-l:16px; --r-xl:20px;
  /* 본문 폭. 2026-08 에 1240 → 1400 으로 넓혔다가 2026-09-07 C안에서 1200 으로
     되돌렸습니다. 1400 은 한 줄이 너무 길어 눈이 줄을 놓쳤습니다.
     긴 글(.orig-body)은 따로 760px 로 묶습니다. */
  --wrap:1280px;  /* 2026-09-29 1200 → 1280 — 헤더 · 홈 본문과 좌우 끝을 맞춤 */
  --nav-h:84px;
  --ease:cubic-bezier(.22,1,.36,1);

  /* ---------- 타입 스케일 ----------
     정리 전에는 고유 글자크기가 41종이었고, 그중 27종이 .72~1.06rem 구간에
     0.01rem 간격으로 몰려 있었습니다. 눈으로는 구분되지 않으면서 요소끼리
     기준선만 미묘하게 어긋나 화면이 지저분해 보이는 원인이었습니다.
     아래 8단계(약 1.1배씩)로 통일하고, 새 크기가 필요하면 단계를 늘리지 말고
     가장 가까운 토큰을 쓰세요.

       2xs 13.1px  라벨·배지          md  18.2px  본문(=body)
       xs  14.7px  메타·출처          lg  20.8px  리드문
       sm  16.3px  보조 설명·표        h5  23.0px  카드 제목
                                      h4  27.5px  의료진 이름·큰 카드 제목
                                      h3  28.8~36px 소제목(.res-h)
                                      h2  30.4~41.6px 섹션 제목(h2.title) ← 2026-09-07 C안에서 줄임

     ⚠ rem 기준은 <html> 의 16px 입니다. body 가 16.5px 였던 탓에 rem 로 지정한
       글씨와 그냥 상속받은 글씨가 0.5px 씩 어긋나 있었습니다. 이제 body 도
       --fs-md 를 쓰므로 두 값이 일치합니다.

     ⚠ 2026-08 확대 개편으로 각 단계를 약 8~20% 키웠습니다. 병원 홈페이지는 고령
       환자 비중이 높아 본문 16.8px 은 작다는 판단입니다(→ 18.2px).
       단계 간 비율은 그대로라 위계는 유지됩니다. */
  --fs-2xs:.82rem;
  --fs-xs:.92rem;
  --fs-sm:1.02rem;
  --fs-md:1.14rem;
  --fs-lg:1.3rem;
  --fs-h5:1.44rem;
  /* 위쪽 세 단계는 화면 폭에 따라 줄어듭니다. 좁은 화면에서 고정값을 쓰면
     48px 와 30px 이 나란히 서면서 단계 차이가 1.09배까지 좁아져 위계가 무너집니다.
     아래 값이면 375px 에서 32 → 26.4 → 20.8 → 16.8 로 약 1.25배씩 유지됩니다. */
  --fs-h4:clamp(1.45rem,2.8vw,1.72rem);
  --fs-h3:clamp(1.8rem,3.2vw,2.25rem);
  /* ⚠ h2 는 2026-09-07 C안에서 57.6px → 41.6px 로 내렸습니다. 굵기 700 에 이 크기면
       본문(18.2px)의 2.3배로 위계가 충분하고, 57px 은 병원 홈에서 광고처럼 읽혔습니다. */
  --fs-h2:clamp(1.9rem,3.4vw,2.6rem);

  /* ---------- 여백 스케일 ----------
     정리 전에는 여백 고유값이 63종이었고, 그중 25종이 1rem 미만 구간에
     .35 / .36 / .38 · .5 / .52 / .55 처럼 0.02rem(0.3px) 간격으로 몰려
     있었습니다. 글자 크기를 41종에서 8단계로 줄였던 것과 똑같은 문제입니다.
     눈으로는 구분되지 않으면서 요소끼리 기준선만 어긋나 있었습니다.

     아래 9단계(4px 격자, 단계 간 1.25~1.5배)로 통일했습니다. 새 여백이
     필요하면 단계를 늘리지 말고 가장 가까운 토큰을 쓰세요.

     기존에 가장 많이 쓰이던 1rem(62회)·.5rem(40회)·1.5rem(17회)·2rem(21회)
     을 움직이지 않고 그 위에 스케일을 앉혔습니다. 그래서 590개 선언 중
     93%가 2.5px 이내로만 이동했습니다(평균 1.04px). 2026-09-06 정리.

     ⚠ 스케일에 넣지 않은 것이 둘 있습니다.
       · 4px 미만(.1~.2rem) 20개 — 체크박스·배지를 글자 기준선에 맞추는
         광학 정렬입니다. 레이아웃 리듬이 아니므로 그대로 둡니다.
       · clamp()·calc() 안의 값 — 화면 폭에 따라 변하는 반응형 곡선입니다.
         자주 쓰이는 것만 아래 --rhythm-* 으로 이름을 붙였습니다.

     ⚠ 음수 마진은 calc(var(--sp-N) * -1) 로 씁니다. 카드 패딩과 짝을 이루는
       음수 마진(.sym ↔ .sym-ph)이 같은 토큰을 쓰게 되어 한쪽만 고쳐
       사진이 카드 밖으로 삐져나오는 일이 없습니다. */
  --sp-1:.25rem;    /*  4px */
  --sp-2:.5rem;     /*  8px */
  --sp-3:.75rem;    /* 12px */
  --sp-4:1rem;      /* 16px */
  --sp-5:1.25rem;   /* 20px */
  --sp-6:1.5rem;    /* 24px */
  --sp-7:2rem;      /* 32px */
  --sp-8:2.5rem;    /* 40px */
  --sp-9:3rem;      /* 48px */

  /* ---------- 반응형 리듬 ----------
     화면 폭에 따라 변하는 큰 여백입니다. 정리 전 28종의 clamp() 곡선이
     대부분 한 번씩만 쓰이고 있었는데, 곡선을 함부로 합치면 폭에 따라
     10~40px 씩 움직여서 360~1600px 전 구간의 편차를 계산해 4px 이내인
     것만 묶었습니다. 나머지 21종은 의도된 곡선으로 보고 그대로 뒀습니다.
     (특히 .hx 의 히어로 아래 여백 3단은 분기별 사다리라 유지) */
  --rhythm-section:clamp(4.5rem,8.5vw,9rem);  /* 72 → 144px  섹션 위아래 */
  --rhythm-block:clamp(3rem,6vw,5rem);        /* 48 →  80px  큰 덩어리 사이 */
  --rhythm-lg:clamp(2.5rem,5vw,4.5rem);       /* 40 →  72px  넓은 카드 안쪽 */
  --rhythm-card:clamp(2rem,4.5vw,3.6rem);     /* 32 →  58px  카드 안쪽 */
  --rhythm-sm:clamp(1.5rem,4vw,2.4rem);       /* 24 →  38px  작은 카드 안쪽 */
  --rhythm-xs:clamp(1rem,4vw,2rem);           /* 16 →  32px  좁은 여백 */
}

/* 어두운 화면. 파랑을 밝혀 어두운 바탕 위에서 4.5:1 을 넘기고,
   파랑 위에 얹는 글씨(--acc-ink)는 흰색 대신 어두운 색을 씁니다. 2026-09-07 C안. */
html[data-theme="dark"]{
  --bg:#0F1419;
  --surface:#151B22;
  --surface-2:#1D2530;
  --ink:#E8ECF1;
  --ink-2:#AAB4C0;
  --ink-3:#8D98A6;
  --line:rgba(232,236,241,.10);
  --line-2:rgba(232,236,241,.20);
  --acc:#8FBCF5;
  --acc-2:#8FBCF5;
  --acc-3:#8FBCF5;
  --acc-ink:#0F1419;
  --acc-hover:#B0D0F9;
  --acc-soft:rgba(143,188,245,.14);
  --deep:#111C2B;
  --deep-2:#182740;
  --shadow-s:0 1px 2px rgba(0,0,0,.4);
  --shadow-m:0 2px 8px rgba(0,0,0,.45);
  --shadow-l:0 8px 24px rgba(0,0,0,.5);
}

/* ---------- 리셋 ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
[id]{scroll-margin-top:calc(var(--nav-h) + 24px)}
/* 본문 서체: Pretendard (orioncactus). 2026-09-07 C안에서 SUITE 에서 바꿨습니다.
   SUITE 는 획 끝이 둥근 부드러운 서체라 인상은 좋았지만, 긴 본문(질환 페이지 8,000px)
   을 읽기에는 자형이 넓고 자간이 조여 있어 눈이 빨리 지쳤습니다. Pretendard 는
   국내 병원·공공 사이트가 널리 쓰는 중립 서체라 읽는 데 힘이 들지 않습니다.
   CDN 이 죽어도 시스템 한글 서체로 자연스럽게 떨어집니다.
   ⚠ 각 페이지 <head> 의 <link> 도 함께 바꿨습니다(53개). 새 페이지를 만드실 때는
     index.html 의 <head> 를 복사하세요. */
body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
    "Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:var(--fs-md);
  line-height:1.8;
  letter-spacing:-.005em;
  word-break:keep-all;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* 제목 자간은 각 규칙에서 직접 관리합니다.
   여기에 한꺼번에 몰아 쓰면 뒤에 오는 개별 규칙에 덮여 적용되지 않습니다. */
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:where(a,button,summary,input,[tabindex]):focus-visible{
  outline:2.5px solid var(--acc);outline-offset:3px;border-radius:8px;
}
/* tabindex="-1" 은 스크립트가 옮겨 주는 초점 자리(제목 등) — Tab 으로 닿지 않으니 테두리를 그리지 않습니다(치료후기 동의 뒤 제목 상자, 2026-10-01). */
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
@media (max-width:767px){ .wrap{width:min(100% - 1.75rem,var(--wrap))} }
/* 화면을 꽉 채우는 넓은 블록용. 좌우 여백만 남기고 최대 폭 제한을 두지 않습니다. */
.wrap-wide{width:min(100% - 3rem,1720px);margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:-100px;left:1rem;z-index:200;background:var(--acc);color:var(--acc-ink);
  padding:var(--sp-3) var(--sp-6);border-radius:var(--r);font-weight:700;transition:top .2s}
.skip:focus{top:1rem}

/* ---------- 스크롤 진행바 ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:120;
  transform-origin:0 50%;transform:scaleX(0);background:var(--acc)}

/* ---------- 내비 ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .35s var(--ease)}
/* ⚠ transition 에 all 을 쓰지 마세요. backdrop-filter 까지 함께 부드럽게 변하는데,
   메가메뉴가 열릴 때 이 값이 0.35초 동안 남아 있으면 그동안 .nav-inner 가
   '고정 위치의 기준(containing block)' 노릇을 계속합니다. 그러면 화면 끝까지
   펼쳐져야 할 메가메뉴가 그 시간만큼 1400px 안에 갇혔다가 갑자기 넓어집니다.
   그래서 backdrop-filter 는 빼고 나머지만 부드럽게 바꿉니다. */
.nav-inner{display:flex;align-items:center;gap:var(--sp-4);height:var(--nav-h);
  padding-inline:var(--sp-6)}
/* 스크롤을 내리면 헤더가 흰 판이 됩니다. 2026-09-07 C안 — 예전에는 .nav-inner 가
   반투명 유리(backdrop-filter) + 둥근 아래 모서리 + 그림자였는데, 화면 끝까지 닿는
   흰 판에 선 하나로 바꿨습니다. 색은 .nav 에 칠해야 판이 화면 끝까지 갑니다
   (.nav-inner 는 1200px 짜리라 거기에 칠하면 양옆이 비었습니다). */
.nav.stuck{background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;flex:none}
/* 헤더 로고 — 2026-09-29 새 로고로 교체(원본 F:/동영상 고화질 변환/장형석한의원 새로고 투명배경 최종.png, 여백을 잘라 900×280). 2026-09-08 ~ 09-29 는 959×280 옛 로고였습니다.
   그전에는 206×70 짜리 흰 배경 JPG 였습니다. 화면에 182px 로 쓰는데 원본이
   206px 뿐이라 고해상도 화면에서 흐렸고, 흰 배경을 지우려고 밝은 테마에서는
   mix-blend-mode:multiply 를, 어두운 테마에서는 흰 칩을 깔아야 했습니다.
   원본이 투명해지면서 두 보정이 다 필요 없어졌습니다.
   ⚠ 원본은 병원 로고 파일 '장형석한의원로고(원본)투명.png' 입니다. 959px 이라
     182px 표시 기준 5.3배 — 3배 화면에서도 또렷합니다. */
.brand-logo{width:182px;height:auto;display:block}
/* 어두운 화면에서는 흰 글자 판을 씁니다. 로고의 글자(장형석 한의원)가 짙은 남색이라
   어두운 바탕에서 묻힙니다. 파란 원은 두 파일이 같습니다.
   ⚠ content 로 그림만 바꿉니다. <img> 를 두 개 두지 않아도 되어 53개 페이지의
     마크업을 건드리지 않습니다. alt 는 그대로 살아 있습니다. */
html[data-theme="dark"] .brand-logo{content:url("../img/logo-white.png")}
@media (max-width:768px){.brand-logo{width:min(136px,36vw)}}

/* 메뉴 묶음(<nav>)이 남는 자리를 먹고 오른쪽 버튼 묶음을 끝으로 밀어냅니다.
   ⚠ 이 auto 가 없으면 메뉴가 접히는 폭(≤1440px)에서 <nav> 가 0폭이 되면서
     햄버거·예약 버튼이 로고 바로 옆에 붙어버립니다. */
.nav-inner > nav{margin-left:auto}
.menu{display:flex;gap:.15rem}
/* white-space:nowrap — 메뉴 글자가 두 줄로 접히지 않게. 8개가 한 줄에 들어가는
   최소 폭이 약 1440px 이라(2026-09-20 에 '특수 클리닉' 이 늘어 아홉 개가 되면서 1300 → 1440),
   그보다 좁아지면 아래에서 햄버거로 바뀝니다.
   ⚠ 메뉴 이름이 길어져서('비수술 척추디스크 치료법' …) 본문 글자 크기(--fs-sm,
     16.3px)로는 본문 폭 1400px 안에 여덟 개가 들어가지 않습니다. 그래서 헤더에서만
     한 단계 작은 글자를 씁니다. 이름을 더 늘리시면 아래 두 값을 함께 줄이세요. */
.menu > li > a{display:block;white-space:nowrap;padding:var(--sp-3) var(--sp-3);border-radius:var(--r-s);font-weight:700;
  font-size:var(--fs-xs);color:var(--ink-2);transition:color .2s,background .2s}
.menu > li > a:hover{color:var(--acc);background:var(--surface-2)}
/* 현재 보고 있는 페이지 표시 — 대형 병원 홈처럼 상단에서 위치를 알 수 있게 */
.menu > li > a[aria-current="page"]{color:var(--acc);background:var(--surface-2)}

.nav-act{display:flex;align-items:center;gap:var(--sp-2);flex:none}
.icon-btn{width:48px;height:48px;border-radius:var(--r-s);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-2);background:var(--surface);
  transition:color .2s,border-color .2s}
.icon-btn:hover{color:var(--acc);border-color:var(--acc)}
.burger{display:none}

/* ---------- 버튼 ----------
   2026-09-07 C안 — 알약 모양(999px) 대신 모서리 12px, 파랑 단색, 올려도 떠오르지
   않고 색만 한 단계 진해집니다(--acc-hover). 그림자·글로우 없음. */
.btn{--pad:1.7rem;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:56px;padding:var(--sp-4) var(--pad);border-radius:var(--r);
  font-weight:600;font-size:var(--fs-sm);letter-spacing:-.01em;white-space:nowrap;
  transition:background .2s,color .2s,border-color .2s}
.btn-fill{background:var(--acc);color:var(--acc-ink)}
.btn-fill:hover{background:var(--acc-hover);color:var(--acc-ink)}
.btn-line{border:1.5px solid var(--line-2);color:var(--ink);background:var(--surface)}
.btn-line:hover{border-color:var(--acc);color:var(--acc);background:var(--surface)}
.btn-lg{min-height:66px;--pad:2.3rem;font-size:var(--fs-md)}
/* 어두운 배경 위 (띠 배너 .band 등) */
.on-deep .btn-line{border-color:rgba(255,255,255,.26);color:#fff;background:rgba(255,255,255,.07)}
.on-deep .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.14);color:#fff}

/* ---------- 히어로 카드 (옛 부품 · 지금은 theme-preview.html 에서만 씁니다) ----------
   2026-09-07 C안 — 움직이는 블루 메시(.mesh/.blob/drift) · 커서 스포트라이트 ·
   그레인은 지웠습니다. 홈의 실제 첫 화면은 아래 '① 풀블리드 히어로'(.hx) 입니다. */
.hero{padding-top:calc(var(--nav-h) + var(--sp-4));padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero-card{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:var(--r-xl);background:var(--surface-2);color:var(--ink);
  padding:clamp(2.2rem,5vw,4.4rem);border:1px solid var(--line);
}
.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(2rem,4vw,3.5rem);align-items:center}

/* 첫 화면 위 휴진 안내 딱지 */
.pill{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  border-radius:999px;border:1px solid var(--line);background:var(--surface);
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);margin-bottom:var(--sp-6)}
.pill b{background:var(--acc);color:var(--acc-ink);padding:.2rem var(--sp-3);border-radius:999px;
  font-size:var(--fs-2xs);font-weight:700}

h1.display{font-size:clamp(2.4rem,6.2vw,4.8rem);line-height:1.07;letter-spacing:-.038em;
  font-weight:700;margin-bottom:var(--sp-6)}
/* 제목 안의 강조 낱말. 예전에는 그라데이션 글씨였고 지금은 파랑 단색입니다. */
.grad-text{color:var(--acc)}

.lede{font-size:var(--fs-lg);color:var(--ink-2);max-width:32em;margin-bottom:var(--sp-7)}
.lede strong{color:var(--ink)}
.hero-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.hero-note{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);
  color:var(--ink-2);margin-top:var(--sp-6)}

/* 신뢰 칩 */
.chips{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-7);padding-top:var(--sp-7);
  border-top:1px solid var(--line)}
.chips li{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:999px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  font-size:var(--fs-xs);font-weight:600}
.chips .dot{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none}

/* 예약 카드 (옛 부품). 폼은 밝은 배경에 어두운 글씨여야 읽기 편합니다. */
.glass{position:relative;border-radius:var(--r-l);padding:var(--sp-7);
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--shadow-m)}
html[data-theme="dark"] .glass{background:#0E1633;color:var(--ink);
  border-color:rgba(255,255,255,.14)}
.glass h2{font-size:var(--fs-lg);letter-spacing:-.035em;margin-bottom:var(--sp-1);color:var(--ink)}
.glass .sub{font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:var(--sp-5)}
/* 예약 폼 (어두운 유리 카드 위) */
.field{margin-bottom:var(--sp-3)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.field label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);
  margin-bottom:var(--sp-2);letter-spacing:-.02em}
.field .req{color:var(--acc)}
.field input,.field select{
  width:100%;min-height:48px;padding:var(--sp-3) var(--sp-4);border-radius:var(--r);
  border:1.5px solid var(--line-2);background:var(--bg);
  color:var(--ink);font:inherit;font-size:var(--fs-sm);transition:.2s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%234C5A7C' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;padding-right:var(--sp-8);
}
.field input::placeholder{color:var(--ink-3)}
/* 2026-09-07 — .field 밖의 입력칸(self-check 의 키·몸무게)이 브라우저 기본 회색(#757575)이라
   어두운 화면에서 3.8:1 이었습니다. 전부 --ink-3 로 맞춥니다(README 29-2 절). opacity:1 은 Firefox 용. */
input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:1}
.field input:focus,.field select:focus{outline:none;border-color:var(--acc);
  background:var(--surface);box-shadow:0 0 0 3px var(--acc-soft)}
.field input[aria-invalid="true"],.field input.err{border-color:#E5484D;
  box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.field small{display:block;font-size:var(--fs-2xs);color:var(--ink-3);margin-top:var(--sp-1)}
.field input[type="date"]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
html[data-theme="dark"] .field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1)}

.consent{display:flex;gap:var(--sp-2);align-items:flex-start;margin:var(--sp-4) 0 var(--sp-4);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r);background:var(--acc-soft);
  border:1px solid var(--line)}
.consent input{flex:none;width:20px;height:20px;margin-top:.15rem;accent-color:var(--acc);cursor:pointer}
.consent label{font-size:var(--fs-2xs);line-height:1.6;color:var(--ink-2);cursor:pointer}
.consent strong{color:var(--acc)}
.consent .u{text-decoration:underline;white-space:nowrap}
.consent.err{border-color:#E5484D;background:rgba(229,72,77,.1)}

.form-error{font-size:var(--fs-xs);color:#C62A2F;font-weight:700;margin-bottom:var(--sp-3);
  display:flex;align-items:center;gap:var(--sp-2)}
html[data-theme="dark"] .form-error{color:#FF9DA2}
.form-error::before{content:"!";flex:none;width:17px;height:17px;border-radius:50%;
  background:#C62A2F;color:#fff;display:grid;place-items:center;font-size:var(--fs-2xs);font-weight:700}

.form-done{text-align:center;padding:var(--sp-6) var(--sp-2)}
.form-done svg{margin:0 auto var(--sp-4);color:var(--acc)}
.form-done p{font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2);margin-bottom:var(--sp-5)}
.form-done strong{color:var(--ink)}
.tel-row{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) var(--sp-4);border-radius:var(--r-l);
  margin-top:var(--sp-4);background:var(--surface-2);border:1px solid var(--line);
  transition:.25s var(--ease)}
.tel-row:hover{border-color:var(--acc)}
.tel-row .ic{width:42px;height:42px;border-radius:var(--r);background:var(--acc);
  display:grid;place-items:center;color:var(--acc-ink);flex:none}
.tel-row span{display:block;font-size:var(--fs-2xs);color:var(--ink-3);font-weight:600;line-height:1.3}
.tel-row strong{font-size:var(--fs-h5);letter-spacing:-.032em;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- 마퀴 ---------- */
.marquee{border-block:1px solid var(--line);background:var(--surface);padding:var(--sp-4) 0;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:var(--sp-8);width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee li{display:flex;align-items:center;gap:var(--sp-8);font-weight:700;font-size:var(--fs-md);
  color:var(--ink-2);letter-spacing:-.025em;white-space:nowrap}
.marquee li::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- 섹션 공통 ---------- */
section{padding:var(--rhythm-section) 0;position:relative}
.head{max-width:56rem;margin-bottom:clamp(2.6rem,4.5vw,4rem)}
.head.center{margin-inline:auto;text-align:center}
.kicker{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-2xs);font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--acc);
  margin-bottom:var(--sp-4)}
h2.title{font-size:var(--fs-h2);line-height:1.25;letter-spacing:-.025em;
  font-weight:700;margin-bottom:var(--sp-3)}
.head p{color:var(--ink-2);font-size:var(--fs-lg);line-height:1.8}
/* 머리글 자리에 창구를 한 줄씩 적는 목록 (2026-09-08 홈 '상담 · 예약' 절).
   글자 크기·색은 위 .head p 와 같게 두어 문단이 목록으로 바뀐 것만 보이게 합니다.
   ⚠ 이름과 설명 사이의 가운뎃점은 글자가 아니라 ::after 로 그립니다. 낱말이
     아니라 구분 기호라서, 낭독기가 '가운뎃점'이라고 읽지 않게 하려는 것입니다.
   ⚠ 화면이 좁으면 이름과 설명이 한 줄에 안 들어가므로 이름을 윗줄로 올립니다. */
.ways{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-3)}
.ways li{color:var(--ink-2);font-size:var(--fs-lg);line-height:1.7}
.ways b{color:var(--ink);font-weight:700}
.ways b::after{content:'·';margin:0 .5em;color:var(--ink-3,var(--ink-2));font-weight:400}
@media (max-width:560px){
  .ways b{display:block}
  .ways b::after{display:none}
}

/* ---------- 증상 레일 ---------- */
.seg{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);border-radius:999px;
  background:var(--surface-2);border:1px solid var(--line);margin-bottom:var(--sp-7);flex-wrap:wrap}
.seg button{padding:var(--sp-3) var(--sp-6);border-radius:999px;font-weight:700;font-size:var(--fs-sm);
  color:var(--ink-2);transition:.25s var(--ease);min-height:46px}
.seg button[aria-selected="true"]{background:var(--acc);color:var(--acc-ink)}

.rail{display:flex;gap:var(--sp-6);overflow-x:auto;scroll-snap-type:x mandatory;
  padding:var(--sp-2) var(--sp-2) var(--sp-7);margin:calc(var(--sp-2) * -1) calc(var(--sp-2) * -1) 0;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:6px}
.rail::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
.rail > li{scroll-snap-align:start;flex:0 0 clamp(262px,25vw,336px)}
/* 카드는 선 1px 뿐이고, 올리면 테두리만 파랗게 됩니다(2026-09-07 C안 — 예전에는
   6px 떠오르며 그림자가 생기고 옅은 파란 면이 깔렸습니다). */
.sym{display:flex;flex-direction:column;height:100%;min-height:236px;padding:var(--sp-6);
  border-radius:var(--r);border:1px solid var(--line);background:var(--surface);
  transition:border-color .2s;position:relative;overflow:hidden}
.sym:hover{border-color:var(--acc)}
.sym > *{position:relative}
.sym .n{font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);letter-spacing:.12em;margin-bottom:auto}
.sym h3{font-size:var(--fs-h5);letter-spacing:-.03em;margin-bottom:var(--sp-2);line-height:1.35}
.sym p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.62}
.sym .go{margin-top:var(--sp-5);display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);font-weight:600;color:var(--acc)}
.sym .go::after{content:"→"}
/* 아직 상세 페이지가 없는 질환 카드.
   죽은 링크(href="#")를 두면 눌러도 아무 일이 없어 고장난 것처럼 보이므로,
   아예 클릭되지 않는 카드로 표시합니다. 페이지를 만들면 다시 <a> 로 바꾸세요. */
/* 2026-09-07 — opacity:.72 를 지웠습니다. 글자까지 흐려져 대비가 3.05:1 로 떨어졌습니다(README 29-2 절).
   대신 옅은 면과 점선 테두리로 "아직 없음" 을 표시합니다. 글자색은 그대로라 4.5:1 을 넘깁니다. */
.sym-soon{cursor:default;background:var(--surface-2);border-style:dashed}
.sym-soon:hover{border-color:var(--line)}
.sym-soon .go{color:var(--ink-3)}
.sym-soon .go::after{content:"";display:none}

.rail-hint{font-size:var(--fs-xs);color:var(--ink-3);display:flex;align-items:center;gap:var(--sp-2)}

/* ---------- 증상별 안내 격자 (symptoms.html) ----------
   2026-09-15 — 세 탭(척추질환 · 관절질환 · 교통사고·기타)의 카드를 옆으로 밀던 .rail 대신 한 화면에 모두 보이는 격자로 바꿨습니다
   (병원 요청 — "옆으로 밀어서 더 보기 형태가 불편하니 한 페이지에서 바로 볼 수 있도록").
   카드(.sym)는 그대로 쓰고 칸 수만 폭에 따라 4 → 3(1024px 이하) → 2(768px 이하)로 줄입니다.
   560px 이하는 사진을 왼쪽에 작게 둔 한 줄 목록이라 관절질환 12개도 짧게 훑어볼 수 있습니다.
   ⚠ .rail 은 랜딩 · 상세 · 치료법 페이지의 카드 줄에서 그대로 쓰므로 고치지 마세요. */
.sym-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6)}
/* 2026-09-27 — 격자 카드의 제목 높이를 맞춥니다. 번호(.n)의 margin-bottom:auto 가 남는 높이를 번호 밑에 몰아 줘서,
   설명이 한 줄인 카드만 제목이 아래로 처졌습니다. 빈 높이는 제목 · 설명 밑(자세히 보기 위)으로 옮깁니다. */
.sym-grid .sym .n{margin-bottom:var(--sp-2)}
.sym-grid a.sym .go{margin-top:auto;padding-top:var(--sp-5)}
@media (max-width:1024px){ .sym-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5)} }
@media (max-width:768px){ .sym-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)} }
@media (max-width:560px){
  .sym-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-3)}
  /* 사진(왼쪽, 두 줄에 걸침) · 제목 · 설명. 제목은 윗줄 아래에, 설명은 아랫줄 위에 붙여 글 묶음이 사진 가운데 높이에 옵니다. */
  .sym-grid .sym{display:grid;grid-template-columns:112px minmax(0,1fr);grid-template-areas:"ph h" "ph p";
    column-gap:var(--sp-4);min-height:0;padding:var(--sp-4) var(--sp-7) var(--sp-4) var(--sp-4)}
  .sym-grid .sym-ph{grid-area:ph;align-self:center;margin:0;aspect-ratio:4/3;border-radius:calc(var(--r) * .6)}
  .sym-grid .sym h3{grid-area:h;align-self:end;margin-bottom:var(--sp-1);font-size:var(--fs-md)}
  .sym-grid .sym p{grid-area:p;align-self:start;line-height:1.5}
  .sym-grid .sym .n,
  .sym-grid a.sym .go{display:none}
  /* '자세히 보기' 대신 오른쪽 꺾쇠. 읽어 주는 글자는 없습니다(content 의 / "" ). */
  .sym-grid a.sym::after{content:"›";content:"›" / "";position:absolute;right:var(--sp-4);top:50%;transform:translateY(-50%);
    font-size:1.6rem;line-height:1;color:var(--acc)}
  .sym-grid .sym-soon{grid-template-columns:minmax(0,1fr);grid-template-areas:"h" "p" "go";padding-right:var(--sp-4)}
  .sym-grid .sym-soon .go{grid-area:go;margin-top:var(--sp-2)}
}

/* ---------- 치료 철학 (philosophy.html) ----------
   2026-09-15 — 병원소개 메뉴 '연구 · 특허' 밑에 새로 만든 페이지입니다(병원 요청).
   맨 위에 병원이 준 안내 그림(.ph-fig), 그 아래에 같은 내용을 글로 풀어 네 원칙 카드(.ph-list)로 둡니다.
   그림 속 글씨는 휴대폰에서 읽기 어려워 같은 내용을 글로 한 번 더 싣습니다.
   페이지 제목(h1)은 그림 속 큰 제목과 겹쳐 화면에서는 숨기고(.sr-only) 화면낭독기에만 읽힙니다. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ph-hero{padding-bottom:0}
.ph-fig{margin:var(--sp-5) 0 0;border-radius:var(--r-l);overflow:hidden;border:1px solid var(--line);
  background:#fff;box-shadow:var(--shadow-l)}
.ph-fig img{display:block;width:100%;height:auto}
.ph-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
.ph-item{display:flex;flex-direction:column;padding:var(--sp-7);border-radius:var(--r);border:1px solid var(--line);background:var(--surface)}
/* 그림의 금색 번호를 따랐습니다. 밝은 화면 #8A6A1F 는 흰 바탕에서 5:1, 어두운 화면은 밝은 금색으로 바꿉니다. */
.ph-num{font-size:clamp(2.2rem,3.4vw,2.8rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:#8A6A1F;margin-bottom:var(--sp-4)}
html[data-theme="dark"] .ph-num{color:#D9B86C}
.ph-item h3{font-size:var(--fs-h5);line-height:1.4;letter-spacing:-.03em;margin-bottom:var(--sp-3)}
.ph-item p{color:var(--ink-2);line-height:1.8}
.ph-item p + p{margin-top:var(--sp-2)}
.ph-item .ph-quote{color:var(--ink);font-weight:600}
.ph-link{margin-top:auto;padding-top:var(--sp-5);align-self:flex-start;display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:44px;font-size:var(--fs-sm);font-weight:700;color:var(--acc)}
.ph-link::after{content:"→"}
.ph-close{margin-top:clamp(2.4rem,4.4vw,3.6rem);text-align:center;font-size:clamp(1.25rem,2.2vw,1.6rem);font-weight:700;
  line-height:1.55;letter-spacing:-.03em;color:var(--ink)}
@media (max-width:768px){
  .ph-list{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .ph-item{padding:var(--sp-6)}
  .ph-close br{display:none}
}

.feature-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--sp-7);align-items:center}
.steps{display:grid;gap:var(--sp-3)}
.step{display:flex;gap:var(--sp-4);align-items:flex-start;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-l);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.step b{width:26px;height:26px;border-radius:50%;background:var(--acc);color:var(--acc-ink);
  display:grid;place-items:center;font-size:var(--fs-2xs);flex:none;margin-top:.15rem}
.step span{font-size:var(--fs-sm);line-height:1.6}

/* ---------- 의료진 ---------- */
.docs{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.doc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:var(--sp-8);position:relative;overflow:hidden}
.doc::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--acc)}
.doc-top{min-width:0;display:flex;align-items:center;gap:var(--sp-4);padding-bottom:var(--sp-5);
  margin-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.avatar{width:62px;height:62px;border-radius:var(--r-xl);background:var(--acc);color:var(--acc-ink);
  display:grid;place-items:center;font-size:1.7rem;font-weight:700;flex:none;
  letter-spacing:-.04em}

/* ── 의료진 실제 사진 ──────────────────────────────
   두 분 다 개별 사진 파일을 씁니다. 어떤 파일을 어떻게 자르는지는 아래쪽
   '의료진 사진' 절(.doc-photo.jang · .doc-photo.kwak)에 있습니다.
   ⚠ 2026-09-09 이전에는 경력 시트 한 장(doctor-sheet-1.jpg, 730×970)에서
     좌표로 얼굴만 잘라 썼습니다. 두 분 다 개별 사진으로 바뀌면서 그 시트를
     쓰는 곳이 없어져 파일과 좌표 계산식을 함께 지웠습니다. */
.doc-photo{
  width:116px;height:141px;border-radius:var(--r-xl);flex:none;
  background-repeat:no-repeat;
  border:1px solid var(--line);
}

/* 인사말 서명란의 작은 사진 */
.greeting cite .doc-photo{width:54px;height:66px;border-radius:var(--r)}
/* ⚠ 경력·저서·논문·특허는 이 사이트에서 가장 중요한 신뢰 근거입니다.
   사진(책 표지·배지·실험 사진)이 크게 들어가 있어 글씨가 작으면 그냥 지나칩니다.
   그래서 이 영역의 글자는 본문(16.5px)에 준하거나 그보다 크게 잡고,
   색도 한 단계 진하게(ink-3 → ink-2) 씁니다. 2026-08 조정. */
.doc h3{font-size:var(--fs-h4);letter-spacing:-.042em;line-height:1.3}
.doc h3 span{font-size:var(--fs-md);font-weight:600;color:var(--ink-2);letter-spacing:-.02em}
.doc-role{font-size:var(--fs-md);color:var(--acc);font-weight:700}
.creds{display:grid;gap:var(--sp-3)}
.creds li{position:relative;padding-left:var(--sp-5);font-size:var(--fs-md);line-height:1.72;color:var(--ink-2)}
.creds li::before{content:"";position:absolute;left:0;top:.66em;width:6px;height:6px;
  border-radius:50%;background:var(--acc)}
.creds strong{color:var(--ink);font-weight:700}
.more{margin-top:var(--sp-5);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.more summary{cursor:pointer;font-size:var(--fs-md);font-weight:700;color:var(--acc);
  list-style:none;display:flex;align-items:center;gap:var(--sp-2);min-height:44px}
.more summary::-webkit-details-marker{display:none}
.more summary::before{content:"＋";font-weight:700}
.more[open] summary::before{content:"－"}
.more .creds{margin-top:var(--sp-3)}

/* ---------- 통계 ---------- */
/* ⚠ 2026-09-08 네 칸 → 다섯 칸. 칸이 좁아진 만큼 좌우 여백과 글자를 줄였습니다.
   1200px 기준 한 칸이 227px 이고, 예전 좌우 여백(2rem×2)을 그대로 두면 글자가
   들어갈 폭이 163px 뿐이라 '전문서적 5권'·'국제학술지' 가 두 줄로 깨졌습니다. */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4)}
.stat{min-width:0;padding:var(--sp-6) var(--sp-4);border-radius:var(--r);border:1px solid var(--line);
  background:var(--surface);text-align:center}
/* ⚠ 2026-09-08 다섯 칸의 큰 글씨를 하나의 크기로 통일했습니다.
   그전에는 숫자 칸(30년·10년)만 35.6px 이고 낱말 칸(발명특허·국제학술지·
   전문서적 5권)은 20.7px 이었습니다. font-weight 는 둘 다 700 으로 같았지만,
   작은 글자는 같은 굵기라도 얇아 보여 "볼드가 다르다"로 읽혔습니다.
   ⚠ 크기를 정한 기준 — 가장 긴 '전문서적 5권' 이 한 줄에 들어가야 합니다.
     5열이 유지되는 가장 좁은 구간은 뷰포트 1025px 이고 그때 칸 안쪽이 150.6px,
     1440px 이상에서는 195.2px 입니다. 이 글자는 크기 100px 일 때 496.9px 이라
     각각 30.3px · 39.3px 이 한계입니다. 2.5vw 는 1025px 에서 25.6px,
     1440px 에서 36px(상한)이라 양쪽 모두 여유가 있습니다.
     ▸ 글자를 더 키우시려면 이 한계부터 확인하세요. 넘기면 두 줄로 깨집니다.
     ▸ 칸 이름을 더 긴 말로 바꾸실 때도 마찬가지입니다. */
.stat b{display:block;font-size:clamp(1.35rem,2.5vw,2.25rem);font-weight:700;letter-spacing:-.03em;
  line-height:1.15;color:var(--acc);font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:var(--sp-2);font-size:var(--fs-sm);line-height:1.5;
  color:var(--ink-2);font-weight:700}

/* ---------- 연구·특허 ----------
   논문·특허는 '자랑'이 아니라 '근거'로 읽혀야 하므로, 카드에 요약(무엇을 확인했나)과
   서지사항(어디서 확인할 수 있나)을 나눠 담고 원문 링크를 답니다. */
/* 소제목('대표원장 저서'·'국제학술지 게재 논문'·'치료 한약 발명특허')이
   본문과 거의 같은 크기(1.06rem)라 큰 사진 옆에서 묻혔습니다.
   h2 와 본문 사이에 확실한 한 단계를 만들고, 아래 실선으로 구역을 끊습니다. */
.res-h{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  font-size:var(--fs-h3);font-weight:700;letter-spacing:-.035em;
  line-height:1.35;margin:0 0 var(--sp-5);padding-bottom:var(--sp-3);
  border-bottom:2px solid var(--line-2)}
.res-h .cnt{margin-left:auto;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);letter-spacing:.03em}

.papers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));gap:var(--sp-6)}
.patents{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.paper,.patent{display:flex;flex-direction:column;min-width:0;padding:var(--sp-7);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);transition:border-color .2s}
.paper:hover,.patent:hover{border-color:var(--acc)}
.res-tag{align-self:flex-start;max-width:100%;font-size:var(--fs-xs);font-weight:700;letter-spacing:.03em;
  padding:var(--sp-1) var(--sp-4);border-radius:999px;margin-bottom:var(--sp-4);
  background:var(--acc-soft);color:var(--acc);border:1px solid var(--line)}
/* ⚠ 근거 카드의 제목은 페이지마다 단계가 다릅니다 (2026-09-07).
     about.html 은 h2 → h3(.res-h) → h4 로 세 단계라 h4 가 맞고,
     질환 페이지 20개는 h2 바로 아래에 카드가 오므로 h3 여야 합니다.
     두 단계 모두 같은 옷을 입힙니다 — 보이는 크기는 어느 쪽이나 같습니다. */
.paper h3,.patent h3,
.paper h4,.patent h4{font-size:var(--fs-h5);letter-spacing:-.038em;line-height:1.42;margin-bottom:var(--sp-3)}
.patent h4 strong{color:var(--acc)}
.res-sum{font-size:var(--fs-md);line-height:1.78;color:var(--ink-2)}
.res-sum + .res-sum{margin-top:var(--sp-3)}
/* 서지사항·출처는 카드 높이가 달라도 아래에 붙습니다 (margin-top:auto) */
.res-ref{margin-top:auto;padding-top:var(--sp-4);border-top:1px solid var(--line);
  font-size:var(--fs-sm);line-height:1.72;color:var(--ink-2);word-break:break-word}
.res-ref em{font-style:normal;color:var(--ink)}
.res-ref b{color:var(--ink);font-weight:700}
.res-who{display:block;font-size:var(--fs-md);font-weight:700;color:var(--acc);margin-bottom:var(--sp-1)}
.res-go{margin-top:var(--sp-4);align-self:flex-start;display:inline-flex;align-items:center;gap:var(--sp-1);
  font-size:var(--fs-md);font-weight:700;color:var(--acc);text-decoration:underline;
  text-underline-offset:.25em;text-decoration-thickness:2px}
.res-go::after{content:"↗"}

/* 기존 사이트에서 쓰던 표기 (2026-09-03 복원).
   같은 논문을 모바일 첫 화면에서는 다른 문구로 부르고 있었습니다. */
.res-orig{margin-top:var(--sp-3);font-size:var(--fs-xs);font-weight:600;line-height:1.7;
  color:var(--ink-3)}
.res-orig span{display:inline-block;margin-left:var(--sp-1);padding:.1rem var(--sp-2);
  border-radius:5px;background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--fs-2xs);font-weight:700;font-variant-numeric:tabular-nums}

/* 기존 사이트 모바일 첫 화면에 있던 TV 보도 영상 (2026-09-03 복원) */
.res-mov{margin:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--surface);max-width:760px}
.res-mov figcaption{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);font-weight:700;
  line-height:1.6;color:var(--ink-2);border-top:1px solid var(--line);
  background:var(--surface-2)}

/* 논문 전체 목록 (접힘) */
.paper-all{margin-top:var(--sp-4);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--sp-6) var(--sp-6)}
.paper-all summary{cursor:pointer;font-size:var(--fs-md);font-weight:700;color:var(--acc);
  display:flex;align-items:center;gap:var(--sp-2);list-style:none;min-height:44px}
.paper-all summary::-webkit-details-marker{display:none}
.paper-all summary::before{content:"＋";font-weight:700}
.paper-all[open] summary::before{content:"－"}
.paper-list{counter-reset:pl;display:grid;gap:var(--sp-4);margin-top:var(--sp-5)}
.paper-list li{counter-increment:pl;position:relative;padding-left:var(--sp-8);
  font-size:var(--fs-md);line-height:1.65}
.paper-list li::before{content:counter(pl,decimal-leading-zero);position:absolute;left:0;top:.1rem;
  font-size:var(--fs-xs);font-weight:700;color:var(--acc);font-variant-numeric:tabular-nums}
.paper-list .venue{display:block;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600;margin-top:.2rem}

.res-note{margin-top:var(--sp-6);display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-5) var(--sp-5);border-radius:var(--r-l);background:var(--surface-2);
  font-size:var(--fs-sm);line-height:1.72;color:var(--ink-2)}
.res-note svg{flex:none;width:18px;height:18px;margin-top:var(--sp-1);color:var(--ink-3)}

/* ---------- 후기 ---------- */
.reviews{background:var(--surface);border-block:1px solid var(--line);overflow:hidden}
.cases{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:var(--sp-6)}
/* 치료후기 맨 위 인용 카드 — 모든 줄의 카드 높이를 가장 긴 카드에 맞춥니다(2026-09-19 병원 요청).
   다른 페이지의 .cases 는 그대로입니다. */
#rvCases{grid-auto-rows:1fr}
.case{min-width:0;padding:var(--sp-7);border-radius:var(--r);background:var(--bg);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--sp-3);transition:border-color .2s}
.case:hover{border-color:var(--acc)}
.case .tag{align-self:flex-start;font-size:var(--fs-2xs);font-weight:700;padding:var(--sp-1) var(--sp-3);
  border-radius:999px;background:var(--acc-soft);color:var(--acc);border:1px solid var(--line)}
.case h3{font-size:var(--fs-md);line-height:1.5;letter-spacing:-.032em}
/* 후기 카드는 해당 글로 넘어가는 링크입니다. 밑줄과 링크색은 지웁니다. */
a.case{color:inherit;text-decoration:none}
.case-quote{font-size:var(--fs-sm);line-height:1.78;color:var(--ink-2);word-break:keep-all}
.case-meta{margin-top:auto;font-size:var(--fs-2xs);color:var(--ink-3);font-weight:700}

/* ---------- 정보 ---------- */
.info{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-6)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:var(--sp-8)}
.panel h3{font-size:var(--fs-h4);letter-spacing:-.038em;margin-bottom:var(--sp-6)}
.hours{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
.hours th,.hours td{text-align:left;padding:var(--sp-4) 0;border-bottom:1px solid var(--line)}
.hours th{font-weight:600;color:var(--ink-2)}
.hours td{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.hours tr:last-child th,.hours tr:last-child td{border-bottom:0}
.hours .off{color:var(--ink-3)}
.live{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-4);border-radius:999px;
  background:var(--acc-soft);border:1px solid var(--line);font-size:var(--fs-xs);font-weight:700;
  margin-bottom:var(--sp-5)}
.live .dot{width:8px;height:8px;border-radius:50%;background:var(--acc)}
.addr{font-style:normal;line-height:1.9;margin-bottom:0}
.addr .lb{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--acc);
  letter-spacing:.1em;margin-top:var(--sp-4)}
.addr .lb:first-child{margin-top:0}
/* '위치 안내' 아래에 들어가는 작은 갈래 이름(주소). .lb 보다 한 단 낮습니다. (2026-09-03) */
.addr .lb2{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);
  letter-spacing:.06em;margin-top:var(--sp-2)}
/* 오시는 길 지도 칸 (2026-09-13 — 방문자에게 보이던 개발용 '지도 자리' 안내 글을 걷어내고 네이버 지도를 넣었습니다).
   지도가 뜨기 전(키가 비어 있거나 인증 실패)에는 안의 위치 카드(.map-card)가 보이고, 지도가 뜨면
   main.js 가 .is-live 를 붙여 지도(.map-canvas)가 카드 자리를 덮습니다. 동작은 main.js '13. 네이버 지도'.
   ⚠ 16:10 모양은 aspect-ratio 가 아니라 ::before 의 padding-top(62.5%)으로 잡고, 카드와 같은 격자 칸에 겹쳐 둡니다.
     그래야 좁은 화면에서 카드 글이 16:10 높이보다 길 때 칸이 글만큼 늘어납니다. aspect-ratio 로 두었을 때는 칸이 늘지 않아
     375px 에서 핀과 '위치 보기' 줄이 칸 밖으로 넘쳤습니다(2026-09-13 확인). 모서리 깎기(overflow:hidden)는 지도(.map-canvas)에만 줍니다.
   ⚠ main.js '12' 는 target="_blank" 링크에 '(새 창 열림)' 을 붙입니다. 이 카드는 aria-label 이 있어 그 뒤에 붙지만,
     label 을 지우면 <span class="sr"> 가 들어오므로 안쪽 글자는 span 전체가 아니라 .map-addr · .map-go 로 골라 칠합니다. */
.map{position:relative;display:grid;border-radius:var(--r);background:var(--surface-2);
  border:1px solid var(--line);margin-bottom:var(--sp-6)}
.map::before{content:"";grid-area:1/1;padding-top:62.5%}
.map-card{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-1);padding:var(--sp-6) var(--sp-5);border-radius:inherit;text-align:center;color:var(--ink);text-decoration:none}
.map-card:focus-visible{outline:2px solid var(--acc);outline-offset:-4px}
.map-pin{width:32px;height:32px;color:var(--acc);margin-bottom:var(--sp-2)}
.map-card .map-name{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.03em}
.map-card .map-addr{font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.map-card .map-go{margin-top:var(--sp-3);font-size:var(--fs-xs);font-weight:700;color:var(--acc)}
.map-card .map-go::after{content:" →";content:" →" / ""}
.map-card:hover .map-go,.map-card:focus-visible .map-go{text-decoration:underline;text-underline-offset:3px}
.map-canvas{position:absolute;inset:0;border-radius:inherit;overflow:hidden}
.map.is-live .map-card{visibility:hidden}
/* 지도 아래 '[네이버지도 크게보기]' — 기존 사이트에 있던 링크입니다. (2026-09-03) */
.map-more{margin:calc(var(--sp-4) * -1) 0 var(--sp-5);font-size:var(--fs-xs);font-weight:700}
.map-more a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.todo{font-size:var(--fs-xs);color:var(--ink-3);border-top:1px solid var(--line);
  padding-top:var(--sp-4);margin-top:var(--sp-5);line-height:1.65}
.todo b{color:var(--acc)}

/* 버스 노선 */
.bus{border-top:1px solid var(--line);padding-top:var(--sp-4);margin-top:var(--sp-5)}
.bus summary{cursor:pointer;font-size:var(--fs-sm);font-weight:700;color:var(--acc);
  list-style:none;display:flex;align-items:center;gap:var(--sp-2);min-height:44px}
.bus summary::-webkit-details-marker{display:none}
.bus summary::before{content:"＋";font-weight:700}
.bus[open] summary::before{content:"－"}
.bus dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-4);margin-top:var(--sp-2);font-size:var(--fs-xs)}
.bus dt{font-weight:700;color:var(--acc);white-space:nowrap}
.bus dd{color:var(--ink-2);font-variant-numeric:tabular-nums;word-break:break-word}

/* 기존 사이트 찾아오시는길 아래에 있던 교통정보 사이트 안내 (2026-09-03 복원).
   2026-09-13 병원 요청으로 도메인이 사라진 algoga.org 줄을 지워 서울특별시 교통정보센터 한 곳만 남았습니다(취소선 .tm-dead 도 지움). */
.transit-more{border-top:1px solid var(--line);padding-top:var(--sp-4);margin-top:var(--sp-5);
  font-size:var(--fs-xs);line-height:1.8;color:var(--ink-3)}
.tm-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem var(--sp-2);
  margin-top:var(--sp-2);font-size:var(--fs-sm);font-weight:700;color:var(--ink-2)}
.tm-row a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.tm-u{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);word-break:break-all}

/* ---------- 진료시간 · 오시는 길 — 위아래로 넓게 (visit.html, 2026-09-13 병원 요청) ----------
   진료시간과 오시는 길을 좌우 반씩 두었더니 폭이 좁아 답답해 보여, 위아래로 쌓고 칸마다 넓은 폭에 맞게 다시 짰습니다.
   ⚠ .info(좌우 두 칸)는 랜딩페이지 23곳이 함께 쓰므로 건드리지 않고 visit.html 만 .visit-stack 을 씁니다.
   ⚠ 오시는 길의 지도 자리는 병원이 준 위치 안내 그림(.vs-map)으로 바뀌어, 위의 .map · .map-card 옷과 main.js '13. 네이버 지도' 는
     지금 쓰이지 않습니다(키로 실제 지도를 다시 켤 때를 위해 남겨 둠 — README 끝 2026-09-13 절).
   · 진료시간 — 넓은 화면에서는 왼쪽에 제목 · 오늘 상태 · 휴진 안내, 오른쪽에 시간표를 둡니다. HTML 순서(제목 → 상태 → 시간표 → 휴진 안내)는
     그대로 두고 격자 자리(grid-template-areas)로만 옮겼습니다. 좁은 화면에서는 예전처럼 차례대로 쌓입니다.
   · 오시는 길 — 그림을 칸 폭 가득 싣고(글자가 든 그림이라 넓을수록 읽힙니다), 그 아래 위치 안내 · 지하철 · 주차장을 세 칸으로 나눕니다. */
.visit-stack{display:grid;gap:var(--sp-6)}
.visit-stack > .panel{padding:var(--rhythm-card)}
.vs-hours{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);grid-template-rows:auto auto 1fr;
  grid-template-areas:"head table" "live table" "todo table";column-gap:var(--rhythm-lg);align-items:start}
.vs-hours > h3{grid-area:head}
.vs-hours > .live{grid-area:live;justify-self:start}
.vs-hours > .hours{grid-area:table}
.vs-hours > .todo{grid-area:todo;margin-top:var(--sp-2);padding:var(--sp-5);border-top:0;border-radius:var(--r);
  background:var(--surface-2);font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2)}
.vs-map{margin:0 0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.vs-map a{display:block}
.vs-map img{display:block;width:100%;height:auto}
.vs-map figcaption{padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--line);background:var(--surface);
  font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);text-wrap:balance}
.vs-way .map-more{margin:0 0 var(--sp-6)}
.vs-way-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-6);
  padding-top:var(--sp-6);border-top:1px solid var(--line)}
.vs-way-grid > .addr + .addr{border-left:1px solid var(--line);padding-left:var(--sp-6)}
@media (max-width:900px){
  .vs-hours{display:block}
  .vs-hours > .todo{margin-top:var(--sp-5)}
  .vs-way-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .vs-way-grid > .addr + .addr{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:var(--sp-5)}
}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);align-items:start}
.qa{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .2s}
.qa[open]{border-color:var(--acc)}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:var(--sp-4);align-items:flex-start;
  padding:var(--sp-6) var(--sp-7);font-weight:600;font-size:var(--fs-md);line-height:1.55;letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::before{content:"Q";flex:none;width:24px;height:24px;border-radius:6px;
  background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;
  font-size:var(--fs-2xs);font-weight:700;margin-top:.15rem}
.qa summary::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;margin-top:var(--sp-2);
  border-right:2.2px solid var(--ink-3);border-bottom:2.2px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .3s var(--ease)}
.qa[open] summary::after{transform:rotate(-135deg)}
.qa .a{padding:0 var(--sp-7) var(--sp-6) 4.1rem;font-size:var(--fs-md);line-height:1.8;color:var(--ink-2)}
.qa .a p + p{margin-top:var(--sp-3)}
/* 원문 질문 앞에 붙어 있던 분류([척추디스크]·[식사법]·[관절염]).
   대괄호를 그대로 두면 질문 문장과 뒤엉켜 읽혀서 딱지로 뽑았습니다. (2026-09-03) */
.qa-cat{flex:none;display:inline-block;margin-right:var(--sp-2);padding:.12em .5em;border-radius:6px;
  background:var(--acc-soft);border:1px solid var(--line);
  font-size:var(--fs-2xs);font-weight:700;color:var(--acc);letter-spacing:0;
  vertical-align:.12em}
/* 원문 답변에 딸린 그림(방산통 그림 · 퇴행성디스크 MRI).
   원본이 348px 짜리 작은 그림이라 늘리면 뭉개집니다. 제 크기까지만 키웁니다. */
.qa .a .orig-fig{margin:.2rem 0 var(--sp-4)}
.qa .a .orig-fig img{width:100%;max-width:348px;height:auto;display:block;border-radius:var(--r-s);
  border:1px solid var(--line)}
/* 2026-09-14 — 누르지 않아도 펼쳐져 있는 문답(herbal-tonic.html 공진단). <details> 대신 <article class="qa qa-open"> + <h3 class="qa-q">.
   질문 줄은 .qa summary 와 같은 Q 딱지를 달되 누르는 표시(꺾쇠 · 손가락 모양)는 없습니다.
   긴 답이 두 칸에서 들쭉날쭉하지 않게 한 칸으로 세웁니다(.faq-open). */
.faq-open{grid-template-columns:minmax(0,1fr)}
.qa-q{display:flex;gap:var(--sp-4);align-items:flex-start;margin:0;padding:var(--sp-6) var(--sp-7) var(--sp-4);
  font-weight:700;font-size:var(--fs-md);line-height:1.55;letter-spacing:-.02em;color:var(--ink)}
.qa-q::before{content:"Q";flex:none;width:24px;height:24px;border-radius:6px;
  background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;
  font-size:var(--fs-2xs);font-weight:700;margin-top:.15rem}

/* ---------- 비급여 진료비용 ---------- */
.fee-note{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-4) var(--sp-5);border-radius:var(--r);
  background:var(--acc-soft);border:1px solid var(--line);font-size:var(--fs-xs);
  color:var(--ink-2);margin-bottom:var(--sp-6)}
.fee-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.fee{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:520px}
.fee caption{text-align:left;padding:var(--sp-5) var(--sp-6) var(--sp-2);font-weight:700;font-size:var(--fs-sm);letter-spacing:-.03em}
.fee th,.fee td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--line);text-align:left}
.fee thead th{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;color:var(--ink-3);
  text-transform:uppercase;background:var(--surface-2)}
.fee tbody th{font-weight:600;color:var(--ink-2)}
.fee .cat{font-weight:700;color:var(--acc);white-space:nowrap;vertical-align:top}
.fee .won{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fee .memo{color:var(--ink-3);font-size:var(--fs-xs)}
.fee tbody tr:last-child th,.fee tbody tr:last-child td{border-bottom:0}

/* ---------- 인사말 ---------- */
.greeting{position:relative;border-radius:var(--r-xl);padding:var(--rhythm-card);
  background:var(--surface);border:1px solid var(--line);overflow:hidden}
.greeting::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--acc)}
.greeting blockquote{font-size:clamp(1.15rem,2.3vw,1.6rem);line-height:1.55;letter-spacing:-.04em;
  font-weight:700;margin-bottom:var(--sp-6)}
.greeting .body{color:var(--ink-2);font-size:var(--fs-md);max-width:52em}
.greeting .body p + p{margin-top:var(--sp-4)}
.greeting cite{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-7);font-style:normal}
.greeting cite .avatar{width:46px;height:46px;border-radius:var(--r);font-size:var(--fs-h5)}
.greeting cite b{display:block;font-size:var(--fs-md);letter-spacing:-.03em}
.greeting cite span{font-size:var(--fs-xs);color:var(--ink-3);font-weight:600}

/* ---------- 자가진단 페이지 ---------- */
.page-check{background:var(--bg)}
.check-main{padding:calc(var(--nav-h) + clamp(2rem,5vw,4rem)) 0 var(--rhythm-block)}
.check-wrap{max-width:760px}
.check-head{text-align:center;margin-bottom:var(--sp-7)}
.check-title{font-size:clamp(1.7rem,4.2vw,2.7rem);line-height:1.2;letter-spacing:-.032em;
  font-weight:700;margin-bottom:var(--sp-3)}
.check-sub{color:var(--ink-2)}
.check-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  overflow:hidden;box-shadow:var(--shadow-m)}
.progress-wrap{height:4px;background:var(--surface-2)}
.progress-wrap .bar{display:block;height:100%;background:var(--acc);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--ease)}
.q-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-5) var(--rhythm-sm) 0}
.q-prev{display:inline-flex;align-items:center;gap:var(--sp-1);font-size:var(--fs-xs);font-weight:700;
  color:var(--ink-2);min-height:44px;padding:var(--sp-1) .1rem;transition:color .2s}
.q-prev:hover:not(:disabled){color:var(--acc)}
.q-prev:disabled{opacity:.32;cursor:default}
.q-count{font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);font-variant-numeric:tabular-nums}
#stage{padding:var(--sp-2) var(--rhythm-sm) var(--rhythm-sm);outline:none}
.q-no{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;color:var(--acc);
  margin-bottom:var(--sp-2)}
.q-text{font-size:clamp(1.15rem,2.6vw,1.5rem);line-height:1.45;letter-spacing:-.028em;
  font-weight:700;margin-bottom:var(--sp-2)}
.q-hint{font-size:var(--fs-xs);color:var(--ink-2);margin-bottom:var(--sp-4)}
.opts{display:grid;gap:var(--sp-2);margin-top:var(--sp-5)}
.opt{display:flex;align-items:flex-start;gap:var(--sp-3);text-align:left;width:100%;
  min-height:56px;padding:var(--sp-4) var(--sp-5);border-radius:var(--r);border:1.5px solid var(--line);
  background:var(--bg);font-size:var(--fs-sm);line-height:1.55;font-weight:600;
  transition:.22s var(--ease)}
.opt:hover{border-color:var(--acc);background:var(--surface)}
.opt .mark{flex:none;width:21px;height:21px;border-radius:50%;border:2px solid var(--line-2);
  margin-top:.15rem;transition:.2s var(--ease);position:relative}
.opt:hover .mark{border-color:var(--acc)}
.opt.on{border-color:transparent;background:var(--acc);color:var(--acc-ink)}
.opt.on .mark{border-color:var(--acc-ink);background:var(--acc-ink)}
.opt.on .mark::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--acc)}

/* 표준체중 계산기 */
.bmi{display:grid;grid-template-columns:1fr 1fr auto;gap:var(--sp-2);align-items:end;
  padding:var(--sp-4);border-radius:var(--r-l);background:var(--surface-2);border:1px solid var(--line)}
.bmi-in label{display:block;font-size:var(--fs-2xs);font-weight:700;color:var(--ink-2);margin-bottom:var(--sp-1)}
.bmi-in input{width:100%;min-height:46px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r);
  border:1px solid var(--line-2);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-sm)}
.bmi-in input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.bmi-out{min-width:130px;text-align:center;font-size:var(--fs-2xs);color:var(--ink-3);line-height:1.4;
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r);background:var(--surface);border:1px dashed var(--line-2)}
.bmi-out b{display:block;font-size:var(--fs-h4);font-weight:700;letter-spacing:-.03em;color:var(--acc)}
.bmi-out span{display:block;font-size:var(--fs-2xs)}

/* 결과 */
#result{padding:clamp(1.8rem,5vw,3rem) var(--rhythm-sm);text-align:center;outline:none}
.r-label{display:inline-block;padding:var(--sp-2) var(--sp-5);border-radius:999px;font-weight:700;
  font-size:var(--fs-sm);margin-bottom:var(--sp-5);color:#fff}
/* 결과 딱지 색 — 2026-09-07 흰 글씨가 안 읽히던 것을 고쳤습니다(README 29-2 절).
   빨강 #E5484D → #C62A2F (흰 글씨 5.6:1) · 라임 #3E9B4F → #2F7D3D (5.1:1) ·
   주황·노랑은 색을 두고 글씨를 검게 (6.5 · 7.0:1). 흰 글씨로는 어떤 노랑도 4.5:1 이 안 됩니다. */
.r-label.red{background:#C62A2F}.r-label.orange{background:#E8891A;color:#1A1F26}
.r-label.yellow{background:#C8A20A;color:#1A1F26}.r-label.lime{background:#2F7D3D}
.r-label.green{background:var(--acc);color:var(--acc-ink)}
.r-score{display:flex;align-items:baseline;justify-content:center;gap:var(--sp-1);margin-bottom:var(--sp-4)}
.r-score b{font-size:clamp(2.8rem,8vw,4rem);font-weight:700;letter-spacing:-.03em;line-height:1;
  color:var(--acc);font-variant-numeric:tabular-nums}
.r-score span{font-size:var(--fs-sm);color:var(--ink-3);font-weight:700}
.r-gauge{height:9px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-bottom:var(--sp-6)}
.r-gauge span{display:block;height:100%;border-radius:999px;background:var(--acc);
  transition:width .9s var(--ease)}
.r-lead{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.035em;
  line-height:1.5;margin-bottom:var(--sp-4)}
.r-body{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.75;max-width:34em;margin:0 auto var(--sp-6)}
.r-disc{font-size:var(--fs-xs);color:var(--ink-3);line-height:1.65;max-width:34em;margin:0 auto var(--sp-7);
  padding-top:var(--sp-5);border-top:1px solid var(--line)}
.r-cta{display:flex;gap:var(--sp-2);justify-content:center;flex-wrap:wrap}
.check-foot{text-align:center;margin-top:var(--sp-7);font-size:var(--fs-sm);color:var(--ink-2)}
.check-foot a{font-weight:700;color:var(--acc)}

/* 홈의 자가진단 유도 카드 */
.cta-check{display:grid;grid-template-columns:1fr auto;gap:var(--sp-7);align-items:center;
  padding:clamp(1.8rem,4vw,2.6rem);border-radius:var(--r-xl);
  background:var(--surface-2);border:1px solid var(--line)}
.cta-check h3{font-size:clamp(1.2rem,2.6vw,1.6rem);letter-spacing:-.04em;margin-bottom:var(--sp-2)}
.cta-check p{color:var(--ink-2);font-size:var(--fs-sm)}

/* ---------- 질환 상세 페이지 ----------
   2026-09-07 C안: 방사형 그라데이션 대신 옅은 회색 판(--surface-2)입니다. */
.dx-hero{position:relative;overflow:hidden;
  padding:calc(var(--nav-h) + clamp(3.2rem,6vw,5.6rem)) 0 clamp(3.4rem,6vw,5rem);
  background:var(--surface-2);
  border-bottom:1px solid var(--line)}
.dx-hero > .wrap{position:relative;z-index:1}
.crumb{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--ink-3);
  margin-bottom:var(--sp-6);flex-wrap:wrap}
.crumb a{color:var(--ink-2);font-weight:600}
.crumb a:hover{color:var(--acc)}
.crumb [aria-current]{color:var(--acc);font-weight:700}
.dx-eng{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);margin-bottom:var(--sp-2)}
.dx-title{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.025em;font-weight:700;line-height:1.15}
.dx-alt{font-size:var(--fs-lg);color:var(--ink-3);font-weight:600;margin-top:var(--sp-2)}
.dx-lead{font-size:var(--fs-lg);color:var(--ink-2);max-width:40em;margin-top:var(--sp-6);line-height:1.85}
/* 첫 문단에 들어간 역학 수치의 출처 줄입니다 (2026-09-06).
   의료법 제56조는 "객관적으로 인정되지 않거나 근거가 없는 내용"의 광고를 금지하므로,
   수치를 쓴 페이지는 이 줄로 근거를 함께 밝힙니다. README '출처 표기 체크리스트' 참고. */
.dx-src{max-width:40em;margin-top:var(--sp-4);font-size:var(--fs-xs);line-height:1.7;color:var(--ink-3)}
.dx-src a{color:var(--ink-2);font-weight:700;border-bottom:1px solid var(--line)}
.dx-src a:hover{color:var(--acc);border-bottom-color:var(--acc)}
.dx-src em{font-style:italic}
.dx-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-top:var(--sp-7)}
.dx-facts li{padding:var(--sp-5) var(--sp-6);border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line)}
.dx-facts .k{display:block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.09em;
  color:var(--ink-3);margin-bottom:var(--sp-2)}
.dx-facts b{display:block;font-size:var(--fs-lg);letter-spacing:-.035em;margin-bottom:var(--sp-1)}
.dx-facts .v{font-size:var(--fs-xs);color:var(--ink-2)}
.dx-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-7)}

/* ---------- 질환 페이지 섹션 바로가기 (2026-09-05, README 17번 절) ----------
   무릎통증은 모바일에서 24.5화면, 목디스크는 22.9화면입니다. 그런데 페이지 안을
   건너뛸 방법이 하나도 없어서, 원하는 대목을 찾으려면 처음부터 끝까지 굴려야
   했습니다. 환자분은 보통 '내 증상이 이건가' 아니면 '치료가 뭔가' 하나만 보러
   오십니다.

   ⚠ 마크업은 손으로 넣지 않습니다. main.js 의 10절이 본문의 <h2> 를 읽어
     자동으로 만듭니다(id 도 그때 붙입니다). 페이지 HTML 은 한 곳도 안 고칩니다.

   두 벌입니다.
     .secnav  히어로 바로 밑에 한 번 나오는 판. 질환별로 묶어서 전부 보여줍니다.
     .secbar  그 판을 지나 내려가면 헤더 밑에 붙는 얇은 띠. 지금 보고 있는
              대목이 파랗게 표시되고, 옆으로 밀어 이동합니다. */

.secnav{background:var(--surface);border-bottom:1px solid var(--line);
  padding:clamp(1.5rem,2.6vw,2.1rem) 0}
.secnav-k{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;
  color:var(--ink-3);margin-bottom:var(--sp-4)}
.secnav-gs{display:flex;flex-wrap:wrap;gap:var(--sp-6) var(--sp-8)}
/* ⚠ 2026-09-07. 이름이 없는 묶음(main.js 10절의 loose — '치료의 근거' · '아침에
     손마디가 …' 처럼 제목이 하나뿐인 절을 모아 둔 칸)에는 위에 붙는 .secnav-gt
     한 줄이 없습니다. 그래서 그 묶음의 칩만 34px 위로 떠서, 옆 묶음의 이름
     글자와 나란히 서 있었습니다(20개 질환 페이지 중 13쪽).
     묶음을 세로 flex 로 두고 아래로 붙이면, 줄의 높이는 이름이 있는 묶음이
     정하고 칩은 어느 묶음이든 같은 줄에 앉습니다. 이름 줄을 빈 칸으로 흉내내는
     방법과 달리 화면낭독기에 없는 것을 읽히지 않습니다. */
.secnav-g{min-width:0;display:flex;flex-direction:column;justify-content:flex-end}
/* 질환 이름은 칩 위에 한 번만 씁니다. 그래서 칩 글자가 '원인·증상·치료' 처럼
   짧아집니다. 이름을 칩마다 반복하면 '반월상연골파열의 예방·관리는?' 이
   다섯 번 나와서 눈이 짚을 데가 없습니다. */
.secnav-gt{font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);
  margin-bottom:var(--sp-2);letter-spacing:-.02em}
.secnav-cs{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.secnav-cs a,.secbar a{display:inline-flex;align-items:center;
  min-height:40px;padding:var(--sp-2) var(--sp-4);border-radius:999px;
  font-size:var(--fs-sm);font-weight:700;letter-spacing:-.02em;white-space:nowrap;
  background:var(--bg);border:1px solid var(--line);color:var(--ink-2);
  transition:.22s var(--ease)}
.secnav-cs a:hover,.secbar a:hover{border-color:var(--acc);color:var(--acc);
  background:var(--surface)}

/* 헤더 밑에 붙는 띠. 처음에는 위로 걷어 두었다가 .show 가 붙으면 내려옵니다. */
.secbar{position:fixed;left:0;right:0;top:var(--nav-h);z-index:94;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  transform:translateY(-105%);opacity:0;pointer-events:none;
  /* ⚠ visibility 까지 꺼야 합니다. opacity:0 만으로는 안 보일 뿐 살아 있어서,
     키보드로 Tab 을 누르면 보이지도 않는 링크 17개를 지나가게 됩니다.
     숨길 때만 0.3초 뒤에 끄도록(transition 의 0s .3s) 미뤄, 걷히는 동안은 보입니다. */
  visibility:hidden;
  transition:transform .3s var(--ease),opacity .3s var(--ease),visibility 0s .3s}
.secbar.show{transform:translateY(0);opacity:1;pointer-events:auto;visibility:visible;
  transition:transform .3s var(--ease),opacity .3s var(--ease),visibility 0s 0s}
.secbar-track{display:flex;gap:var(--sp-2);overflow-x:auto;scrollbar-width:none;
  padding:var(--sp-2) var(--rhythm-xs)}
.secbar-track::-webkit-scrollbar{display:none}
.secbar a{min-height:38px;font-size:var(--fs-xs);background:transparent;border-color:transparent}
/* 지금 보고 있는 대목 */
.secbar a[aria-current]{background:var(--acc);color:var(--acc-ink);border-color:transparent;
  }
.secbar a[aria-current]:hover{color:var(--acc-ink);background:var(--acc)}

/* 링크로 뛰었을 때 제목이 헤더와 띠에 가리지 않도록 여백을 더 줍니다.
   기본값은 110번 줄의 [id]{scroll-margin-top:calc(var(--nav-h) + 24px)} 이고,
   여기서 띠 높이(--secbar-h, main.js 가 실측해 넣습니다)만큼 더합니다. */
.has-secnav [id]{scroll-margin-top:calc(var(--nav-h) + var(--secbar-h,0px) + 24px)}

@media (max-width:768px){
  .secnav{padding:var(--sp-5) 0}
  .secnav-gs{gap:var(--sp-4)}
  /* 좁은 화면에서는 질환마다 한 줄씩 내려 쌓습니다. */
  .secnav-g{flex:1 1 100%;min-width:0}
  /* 칩을 접어 내리면 판이 화면의 78% 를 차지했습니다(무릎통증 638px/812px).
     한 줄로 두고 옆으로 밀게 바꿔 묶음마다 76px 로 잡았습니다.
     이 페이지의 .rail 과 같은 방식이라 손에도 익은 동작입니다.
     ⚠ 옆으로 밀 수 있다는 것이 보이도록 오른쪽 끝을 흐리게 처리했습니다. */
  .secnav-cs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
  .secnav-cs::-webkit-scrollbar{display:none}
  .secnav-cs li{flex:none}
}
/* 손가락으로 누르는 칩이라 최소 높이를 40px 로 잡았습니다(WCAG 2.5.8 최소 24).
   화면이 아주 낮을 때는 띠가 본문을 너무 가려서 아예 띄우지 않습니다. */
@media (max-height:520px){ .secbar{display:none} }

.checklist{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.checklist li{position:relative;padding:var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-9);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);font-size:var(--fs-sm);line-height:1.6;
  font-weight:600;transition:border-color .2s}
.checklist li:hover{border-color:var(--acc)}
.checklist li::before{content:"";position:absolute;left:1.1rem;top:1.15rem;width:19px;height:19px;
  border-radius:6px;background:var(--acc-soft);border:1.5px solid var(--acc)}
.checklist li::after{content:"";position:absolute;left:1.45rem;top:1.42rem;width:9px;height:5px;
  border-left:2.2px solid var(--acc);border-bottom:2.2px solid var(--acc);transform:rotate(-45deg)}

.alert{display:flex;gap:var(--sp-3);align-items:flex-start;margin-top:var(--sp-6);
  padding:var(--sp-5) var(--sp-5);border-radius:var(--r);
  background:rgba(229,72,77,.09);border:1px solid rgba(229,72,77,.3);color:#B4262B;
  font-size:var(--fs-sm);line-height:1.65}
html[data-theme="dark"] .alert{background:rgba(229,72,77,.14);color:#FF9DA2}
.alert strong{display:block}

.cite-box{margin:0 0 var(--sp-5);padding:var(--sp-5) var(--sp-6);border-radius:var(--r-l);
  background:var(--surface-2);border-left:4px solid var(--acc);
  font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2)}
.cite-box cite{display:block;margin-top:var(--sp-3);font-style:normal;font-size:var(--fs-xs);
  font-weight:700;color:var(--ink-3)}
.a-sub{font-weight:700;color:var(--ink);margin-top:var(--sp-5)}
.ord{counter-reset:o;display:grid;gap:var(--sp-4);margin-top:var(--sp-3)}
.ord li{counter-increment:o;position:relative;padding-left:var(--sp-7);font-size:var(--fs-sm);line-height:1.72}
.ord li::before{content:counter(o);position:absolute;left:0;top:.1rem;width:24px;height:24px;
  border-radius:8px;background:var(--acc);color:var(--acc-ink);display:grid;place-items:center;
  font-size:var(--fs-2xs);font-weight:700}
.ord b{color:var(--ink)}
.todo-inline{font-size:var(--fs-xs);color:var(--ink-3);padding-top:var(--sp-3);margin-top:var(--sp-3);
  border-top:1px dashed var(--line-2)}

.tx-list{display:grid;gap:var(--sp-3)}
.tx-list li{display:flex;gap:var(--sp-6);padding:var(--sp-6);border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);transition:border-color .2s}
.tx-list li:hover{border-color:var(--acc)}
.tx-list .n{flex:none;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;
  color:var(--acc);padding-top:.2rem}
.tx-list h3{font-size:var(--fs-lg);letter-spacing:-.035em;margin-bottom:var(--sp-2)}
.tx-list p{color:var(--ink-2);font-size:var(--fs-sm);line-height:1.72}
/* 질환 페이지의 치료법 · 원인 감별 항목을 통째로 누를 수 있게 (2026-08-22).
   제목 글자를 링크로 만들고 그 링크의 ::before 를 항목 전체로 늘립니다.
   제목이 곧 링크 이름이라 줄이 늘지 않고, 낭독기에도 링크가 하나만 읽힙니다.
   ⚠ 늘어나는 기준은 .tx-list li 의 position:relative 입니다. 지우지 마세요.
   ⚠ 링크를 걸지 않은 항목(예: '생활 관리')은 그냥 두면 됩니다. */
.tx-list li{position:relative}
.tx-list li:has(.tx-go){cursor:pointer}
.tx-list h3 .tx-go{color:inherit}
.tx-list h3 .tx-go::after{content:"→";margin-left:var(--sp-1);color:var(--acc);
  font-size:.8em;display:inline-block}
.tx-list li:hover .tx-go{color:var(--acc)}
.tx-list .tx-go::before{content:"";position:absolute;inset:0;z-index:1}

/* ---------- 공지사항 페이지 ---------- */
.notice{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:clamp(1.5rem,3.5vw,2.2rem);margin-bottom:var(--sp-4);transition:border-color .2s}
.notice:hover{border-color:var(--acc)}
.notice:target{border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-soft)}
.notice-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap}
.notice-badge{font-size:var(--fs-2xs);font-weight:700;padding:var(--sp-1) var(--sp-3);border-radius:999px;
  background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line)}
.notice-badge.new{background:var(--acc);color:var(--acc-ink);border-color:transparent}
.notice-head time{font-size:var(--fs-xs);color:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums}
.notice h2{font-size:clamp(1.15rem,2.6vw,1.45rem);letter-spacing:-.038em;margin-bottom:var(--sp-4)}
.notice-days{display:grid;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.notice-days li{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-4);
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r);background:var(--acc-soft);border:1px solid var(--line)}
.notice-days b{font-size:var(--fs-md);letter-spacing:-.03em;min-width:11rem}
.notice-days span{font-size:var(--fs-sm);color:var(--acc);font-weight:700}
.notice-body{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.75}
.notice-img{margin-top:var(--sp-4);border-top:1px solid var(--line);padding-top:var(--sp-4)}
.notice-img summary{cursor:pointer;font-size:var(--fs-xs);font-weight:700;color:var(--acc);
  list-style:none;display:flex;align-items:center;gap:var(--sp-2);min-height:44px}
.notice-img summary::-webkit-details-marker{display:none}
.notice-img summary::before{content:"＋";font-weight:700}
.notice-img[open] summary::before{content:"－"}
.notice-img img{width:100%;max-width:420px;height:auto;border-radius:var(--r);
  border:1px solid var(--line);margin-top:var(--sp-3)}
.notice-more{text-align:center;font-size:var(--fs-xs);color:var(--ink-3);margin-top:var(--sp-7)}

/* ---------- 소식 ---------- */
.news{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.news-item{display:flex;justify-content:space-between;gap:var(--sp-4);align-items:center;
  padding:var(--sp-4) 0;border-bottom:1px solid var(--line);min-height:52px}
.news-item:last-child{border-bottom:0}
.news-item:hover strong{color:var(--acc)}
.news-item strong{font-weight:600;font-size:var(--fs-sm)}
.news-item time{font-size:var(--fs-xs);color:var(--ink-3);flex:none;font-variant-numeric:tabular-nums}

/* ---------- CTA 밴드 ----------
   사이트에서 유일하게 남은 어두운 판입니다(남색 --deep, 흰 글씨). 2026-09-07 C안 —
   그라데이션·그레인을 빼고 왼쪽 정렬로 바꿨습니다. 2026-10-16 사용자 지시로 다시 가운데 정렬(글 · 단추 모두).
   게시판(.rv-cta)의 PC 두 칸 배치(왼쪽 글 · 오른쪽 단추)는 그 절에서 따로 왼쪽으로 둡니다. */
.band{position:relative;border-radius:var(--r-l);padding:var(--rhythm-lg);
  background:var(--deep);color:#fff;overflow:hidden;text-align:center}
.band h2{font-size:clamp(1.7rem,3.2vw,2.4rem);letter-spacing:-.025em;line-height:1.25;margin-bottom:var(--sp-3);
  font-weight:700}
.band p{color:rgba(255,255,255,.85);margin-bottom:var(--sp-7);font-size:var(--fs-md)}
.band .btns{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}
.band .btn-fill{background:#fff;color:var(--deep)}
.band .btn-fill:hover{background:#fff;color:var(--deep-2)}
.band .btn-line{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.1)}
.band .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.2);color:#fff}

/* ---------- 푸터 ----------
   2026-09-07 C안: 남색 판 대신 옅은 회색 바탕(--surface-2)에 본문 글씨색입니다. */
footer{background:var(--surface-2);color:var(--ink-2);border-top:1px solid var(--line);
  padding:clamp(3rem,5vw,4.5rem) 0 calc(var(--sp-7) + env(safe-area-inset-bottom));font-size:var(--fs-sm)}
/* 푸터 로고. 2026-09-08 에 흰 칩(배경·테두리·안여백)을 걷어냈습니다 — 로고가
   투명 배경 PNG 로 바뀌어 판을 깔 이유가 없어졌습니다. 클래스 이름은 53개
   페이지에 흩어져 있어 그대로 두고, 자리만 잡는 데 씁니다. */
.logo-chip{display:inline-block;margin-bottom:var(--sp-4)}
.logo-chip img{width:186px;height:auto;display:block}
/* 헤더와 같은 이유로 어두운 화면에서는 흰 글자 판을 씁니다. */
html[data-theme="dark"] .logo-chip img{content:url("../img/logo-white.png")}
.f-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--sp-7);padding-bottom:var(--sp-8)}
/* ⚠ 푸터 칸 제목은 2026-09-07 에 h4 → h2 로 올렸습니다. 본문 마지막 제목이
     h2 인 페이지에서 h2 다음에 h4 가 오면서 단계를 건너뛰었기 때문입니다
     (스크린리더의 제목 목록에서 한 칸이 사라진 것처럼 읽힙니다).
     푸터는 그 자체가 하나의 표지(contentinfo)라 h2 로 다시 시작해도 됩니다.
     글자 크기는 그대로입니다 — 보이는 모습은 하나도 바뀌지 않았습니다.
     h4 도 함께 남겨 둡니다: 아직 h4 로 되어 있는 푸터가 있다면 그대로 보입니다. */
footer .f-top h2,footer h4{font-size:var(--fs-xs);margin-bottom:var(--sp-4);
  letter-spacing:-.02em;color:var(--ink)}
footer li{margin-bottom:var(--sp-2)}
footer li a{color:var(--ink-2);transition:color .2s}
footer li a:hover{color:var(--acc)}
.biz{color:var(--ink-3);font-size:var(--fs-xs);line-height:1.9;margin-top:var(--sp-5)}
.f-bot{border-top:1px solid var(--line);padding-top:var(--sp-6);display:flex;
  justify-content:space-between;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.social{display:flex;gap:var(--sp-2)}
.social a{width:42px;height:42px;border-radius:var(--r);border:1px solid var(--line-2);
  display:grid;place-items:center;color:var(--ink-2);transition:color .2s,border-color .2s}
.social a:hover{color:var(--acc);border-color:var(--acc);background:var(--surface)}

/* ---------- 모바일 독 ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom));
  background:var(--surface);
  border-top:1px solid var(--line);transform:translateY(110%);transition:transform .35s var(--ease)}
.dock.show{transform:translateY(0)}
.dock a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;min-height:54px;border-radius:var(--r);font-size:var(--fs-2xs);font-weight:700}
.dock .primary{flex:1.5;background:var(--acc);color:var(--acc-ink)}
.dock .alt{border:1px solid var(--line);color:var(--ink-2)}

/* ---------- 스크롤 등장 (2026-09-07 C안에서 없앴습니다) ----------
   예전에는 .reveal 이 붙은 요소가 처음에 숨겨졌다가(opacity:0 · 26px 아래 · 흐림)
   화면에 들어올 때 0.8초에 걸쳐 나타났습니다. 페이지마다 수십 개가 순서대로
   떠오르는 것이 중장년 방문자에게는 '아직 안 뜬 것'으로 읽혔고, 스크린리더·
   인쇄에서도 이득이 없었습니다. HTML 의 class="reveal" 은 그대로 두었습니다 —
   이제 아무 규칙도 없는 이름이라 지우지 않아도 됩니다(52쪽 · 1,400여 곳). */

/* ---------- 운동요법 페이지 ----------
   사진은 기존 사이트(/m/img/cpp05_*, gpp05_*)에서 가져온 원본 그대로입니다.
   흰 배경 JPG 라서 어두운 테마에서 튀지 않도록 밝기만 살짝 낮춥니다. */
.ex-list{display:grid;gap:var(--sp-4)}
.ex{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:var(--sp-6);transition:border-color .2s}
.ex:hover{border-color:var(--acc)}
.ex h3{font-size:var(--fs-lg);letter-spacing:-.03em;margin-bottom:var(--sp-4);
  display:flex;gap:var(--sp-3);align-items:baseline}
.ex h3 .n{flex:none;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.06em;color:var(--acc)}
.ex figure{margin:0 0 var(--sp-5)}
.ex img{display:block;width:100%;max-width:568px;height:auto;border-radius:var(--r);
  background:#fff;border:1px solid var(--line)}
html[data-theme="dark"] .ex img{filter:brightness(.92)}
.ex-note{margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--ink-3);line-height:1.6}
@media (max-width:768px){ .ex{padding:var(--sp-5)} }

/* ---------- 반응형 ---------- */
/* 메뉴가 9개라 1440px 아래에서는 로고 + 메뉴 + 예약 버튼이 한 줄에 들어가지 않습니다.
   (예전에는 768px 아래에서만 접혀서, 태블릿 가로 폭에서 예약 버튼이 화면 밖으로
    밀려나 보이지 않았습니다.) 그 아래로는 햄버거로 접습니다. */
@media (max-width:1023px){
  /* ⚠ 닫힌 메뉴는 clip-path 로 '잘려서' 안 보일 뿐, 화면에는 그대로 있습니다.
       그래서 2026-09-07 전에는 키보드 Tab 이 보이지도 않는 항목 여덟 개를
       지나갔고, 스크린리더도 닫힌 메뉴를 읽었습니다(햄버거 버튼을 누르기도
       전에 '병원소개 · 척추질환 …' 이 먼저 읽혔습니다).
       visibility:hidden 을 함께 주면 초점도 낭독도 함께 사라집니다.
     ⚠ visibility 는 0초로 바꾸되 '접힐 때만' .4s 늦춥니다. 늦추지 않으면
       접히는 동안 글자가 먼저 사라져 애니메이션이 끊겨 보입니다. */
  .menu{position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;gap:0;
    background:var(--surface);border-bottom:1px solid var(--line);
    padding:var(--sp-4) var(--sp-6) var(--sp-7);box-shadow:var(--shadow-l);
    max-height:calc(100dvh - var(--nav-h));overflow:auto;
    visibility:hidden;clip-path:inset(0 0 100% 0);
    transition:clip-path .4s var(--ease),visibility 0s linear .4s}
  .menu[data-open="true"]{visibility:visible;clip-path:inset(0 0 0 0);
    transition:clip-path .4s var(--ease),visibility 0s}
  .menu > li > a{padding:var(--sp-4) var(--sp-1);font-size:var(--fs-md);border-radius:0;
    border-bottom:1px solid var(--line);color:var(--ink)}
  .menu > li > a[aria-current="page"]{background:transparent}
  .burger{display:grid}
}
@media (max-width:1024px){
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-8)}
  .feature-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  /* ⚠ 다섯 칸이라 2열로 쌓으면 마지막 하나가 혼자 남습니다. 첫 칸('30년')을
     한 줄 전체로 펴서 1 + 2 + 2 로 떨어지게 했습니다. */
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats > .stat:first-child{grid-column:1 / -1}
  .f-top{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  /* 모바일에서 본문만 16px 로 줄이던 규칙은 없앴습니다. 이 값 하나 때문에
     rem 로 지정한 글씨와 상속받은 글씨의 기준이 화면 폭에 따라 달라졌습니다. */
  .hero{padding-top:calc(var(--nav-h) + var(--sp-2))}
  .hero-card{border-radius:var(--r-l)}
  .nav-act .btn{display:none}
  .nav .nav-inner{padding-inline:0}
  .nav.stuck .nav-inner{padding-inline:var(--sp-4)}
  .info,.news,.docs,.faq,.papers,.patents{grid-template-columns:1fr}
  /* 좁은 화면에서는 소제목 옆의 부가정보(.cnt)가 아랫줄로 내려갑니다.
     margin-left:auto 그대로면 오른쪽 끝에 혼자 떨어져 붙으므로 왼쪽으로 되돌립니다. */
  .res-h .cnt{margin-left:0}
  .qa .a{padding-left:var(--sp-6)}
  .field-row{grid-template-columns:1fr}
  .dx-facts,.checklist{grid-template-columns:1fr}
  .tx-list li{flex-direction:column;gap:var(--sp-3)}
  .bmi{grid-template-columns:1fr 1fr}
  .bmi-out{grid-column:1 / -1;min-width:0}
  .cta-check{grid-template-columns:1fr;gap:var(--sp-5)}
  .cta-check .btn{width:100%}
  .f-top{grid-template-columns:1fr;gap:var(--sp-6)}
  .dock{display:flex}
  footer{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}
  /* 2026-09-19 병원 지적 — 휴대폰 메뉴는 화면 끝까지 내려와 아래 독(.dock, 약 72px)에 마지막 줄이 가렸습니다
     (고객센터를 펼치면 '개인정보처리방침'). 메뉴 아래쪽에 독 높이만큼 여백을 두어 끝까지 올려 볼 수 있게 합니다. */
  .menu{padding-bottom:calc(var(--sp-7) + 5rem + env(safe-area-inset-bottom))}
  .rev{width:280px}
}

/* ---------- 모션 최소화 ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ══════════════════════════════════════════════════════════════
   사진 (2026-08 추가)
   기존 janghs.com 데스크톱·모바일 사이트에서 추출한 실제 사진입니다.
   출처와 용도는 janghs-assets/IMAGE-CATALOG.md 에 정리해 두었습니다.

   원본이 최대 750px 라 2x 레티나에는 모자랍니다. 재촬영 전까지는
   표시 크기를 원본 이하로 유지해 흐려 보이지 않게 합니다.
   ══════════════════════════════════════════════════════════════ */

/* ---------- 증상 카드 썸네일 ----------
   .sym 의 패딩과 같은 토큰(--sp-6)으로 음수 마진을 줘 카드 폭을 꽉 채웁니다.
   토큰이 같으므로 카드 패딩을 바꾸면 사진도 함께 따라갑니다. 2026-09-06.
   .sym 에 overflow:hidden 이 이미 있어 위쪽 모서리는 자동으로 깎입니다. */
.sym-ph{display:block;margin:calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);aspect-ratio:16/10;
  overflow:hidden;background:var(--surface-2)}
.sym-ph img{width:100%;height:100%;object-fit:cover;display:block}
/* 사진이 없는 '준비 중' 카드는 높이를 맞추지 않습니다. 빈 회색 박스보다 낫습니다. */
.sym-soon .sym-ph{display:none}


/* ---------- 의료진 사진 ----------
   기존에는 doctor-sheet-1.jpg(약력 시트) 에서 얼굴만 배경 위치로 잘라 썼습니다.
   ⚠ 2026-09-09 곽태경 원장 사진도 원본으로 교체하면서 두 분 다 시트를 쓰지 않게
     되어, 시트 파일(350KB)과 좌표 계산 규칙을 함께 지웠습니다. */
.doc-photo.jang{
  background-image:url("../img/doctor/jang-portrait.jpg");
  background-size:cover;
  background-position:50% 20%;
}
.greeting cite .doc-photo.jang{background-size:cover;background-position:50% 20%}
.doc-photo.kwak{
  background-image:url("../img/doctor/kwak-portrait.jpg");
  background-size:cover;
  background-position:50% 50%;
}

/* ---------- 진료 장면 ---------- */
.doc-scene{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-6)}
.doc-scene figure{margin:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--surface)}
.doc-scene img{width:100%;height:auto;display:block;aspect-ratio:16/10;object-fit:cover}
.doc-scene figcaption{padding:var(--sp-4) var(--sp-4);font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);
  border-top:1px solid var(--line)}

/* ---------- 척추�관절 갈림 카드 ----------
   치료법 페이지에서 척추�관절 두 갈래로 보내는 자리입니다(2026-08-27).
   .rail 은 옆으로 미는 띠라 카드 두 장만 두면 왼쪽에 몰려 보여서, 두 칸 격자로 따로 뒀습니다.
   카드 생김새는 .sym 을 그대로 씁니다. */
.pick{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);margin-top:var(--sp-6);
  list-style:none;padding:0}
.pick > li{margin:0}

/* ---------- 치료 노하우 도해 · 원본 치료 사진 (.knowhow · .shots) ----------
   .knowhow — 기존 사이트 /m/cpp01.php · /m/gpp01.php 의 삼각 도해.
   .shots   — 기존 사이트 치료요법 페이지(/m/cpp02~04.php · /m/gpp02~04.php)에서
              그대로 옮겨온 사진들(2026-08-30). 생김새가 같아 규칙을 함께 씁니다.
   둘 다 글자가 그림 안에 박혀 있어 자르면 라벨이 잘립니다.
   ⚠ .doc-scene 처럼 aspect-ratio+cover 를 주지 마세요. height:auto 로 통째로 보여야 합니다.
   어두운 배경에서 흰 도해가 뜨는 것을 막기 위해 판을 항상 흰색으로 깝니다.
   .shots.one 은 한 장짜리(가로가 넓은 그림), .shots.tri 는 세 칸입니다. */
.knowhow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);margin-top:var(--sp-6)}
/* ⚠ .shots 는 격자가 아니라 단(column)입니다.
   원본 사진은 세로가 제각각이라(600×273 ~ 426×595) 격자로 깔면 한 줄의 높이가
   가장 큰 사진에 맞춰져, 옆칸 아래로 빈 자리가 크게 남습니다.
   단으로 흘리면 빈 자리 없이 붙습니다. 읽는 차례는 왼칸을 다 읽고 오른칸입니다. */
.shots{columns:2;column-gap:var(--sp-4);margin-top:var(--sp-6)}
.shots.one{columns:1;max-width:760px}
.shots.tri{columns:3}
.knowhow figure,.shots figure{margin:0;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#fff}
.shots figure{break-inside:avoid;margin-bottom:var(--sp-4)}
.knowhow img,.shots img{width:100%;height:auto;display:block}
.knowhow figcaption,.shots figcaption{padding:var(--sp-4) var(--sp-4);font-size:var(--fs-sm);line-height:1.6;
  color:var(--ink-2);border-top:1px solid var(--line);background:var(--surface)}
.knowhow figcaption b,.shots figcaption b{display:block;margin-bottom:.2rem;color:var(--ink);font-weight:700}

/* ---------- 기존 사이트에서 그대로 옮겨온 본문 (.orig) ----------
   2026-08-31. tools\import-original.ps1 이 만들어 넣는 블록의 옷입니다.
   원문은 한 글자도 고치지 않았고, 태그만 여기 규칙으로 갈아끼웠습니다.
   ⚠ 글이 길어서 .wrap(1200px) 을 그대로 쓰면 한 줄이 너무 길어 읽기 어렵습니다.
     .orig-body 로 760px 에 묶습니다 — 18px 글씨로 한 줄 약 40자입니다.
     (2026-09-07 C안에서 900px → 760px. 900px 은 한 줄 50자가 넘어 눈이 줄을 놓쳤습니다.) */
.orig-body{max-width:760px}
/* ⚠ 2026-09-05 선택자를 .orig-body > p.orig-src 로 올렸습니다.
     그냥 .orig-src(0,1,0) 는 아래 .orig-body > p(0,1,1) 에 져서, 작게 띄우려던
     출처 배지가 본문과 똑같은 18.2px · --ink-2 로 그려지고 있었습니다.
     본문 맨 앞에서 본문만 한 크기로 서 있어 글이 시작되기 전에 한 번 걸렸습니다. */
.orig-body > p.orig-src{font-size:var(--fs-xs);color:var(--ink-3);font-weight:700;
  padding:var(--sp-3) var(--sp-4);border-radius:var(--r-s);background:var(--surface-2);
  display:inline-block;margin-bottom:var(--sp-7);line-height:1.6}
.orig-src b{color:var(--ink-2)}
.orig-body > h2.title{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.035em;
  margin:var(--sp-9) 0 var(--sp-4)}
.orig-body > h2.title:first-of-type{margin-top:0}
/* 제목 앞의 '1.' — 원문 글자라 지울 수 없어서 색만 달리합니다.
   여덟 개가 이어진 차례라는 것이 한눈에 보입니다. import-original.ps1 이 감쌉니다. */
.orig-body > h2.title .orig-n{color:var(--acc);font-variant-numeric:tabular-nums}
.orig-body > h3.res-h{margin:var(--sp-7) 0 var(--sp-4)}
/* ⚠ 2026-09-05 본문 조판 손봄. 두 가지가 잘못돼 있었습니다.
     ① 색이 --ink-2(#4C5A7C) 였습니다. 짧은 설명글에는 맞는 색이지만 이 블록은
        한 페이지에 8,600px 씩 이어지는 긴 글이라, 흐린 색으로 길게 읽으면 눈이
        먼저 지칩니다. 본문 색(--ink)으로 올립니다. 흰 배경 대비 6.6:1 → 17.9:1.
     ② 문단이 바뀌는 자리가 충분히 안 벌어졌습니다. 줄과 줄은 34.7px 씩 떨어지는데
        문단과 문단은 34.7+16=51px 로 1.5배밖에 안 되어, 여섯 줄짜리 문단 여럿이
        한 덩어리로 뭉쳐 보였습니다. margin 을 1rem → 1.9rem 으로 올려 문단 사이를
        65px(1.9배)로 벌립니다. */
.orig-body > p{font-size:var(--fs-md);line-height:1.9;color:var(--ink);margin-bottom:var(--sp-7)}
.orig-body > p.lede{font-size:var(--fs-lg);line-height:1.85;color:var(--ink);
  font-weight:600;margin-bottom:var(--sp-6)}
.orig-body a{color:var(--acc);font-weight:700;text-decoration:underline;
  text-underline-offset:3px}
.c-blue{color:var(--acc)}
.c-red{color:#C62A2F}  /* 2026-09-07 — #E5484D 는 흰 바탕 3.9:1 (README 29-2 절) */
html[data-theme="dark"] .c-red{color:#FF9DA2}

/* 본문에서 중요한 어구만 굵게 (2026-09-06).
   ⚠ 어구 목록은 tools\keywords.json 에 있고, import-original.ps1 이 <b class="key"> 로
     감쌉니다. 원문 글자를 고친 것이 아니라 태그만 씌운 것입니다.
   ⚠ 굵기를 700 으로 둡니다. 본문이 400, 제목·라벨이 800 이라 800 을 주면 본문 안에서
     제목처럼 튀어 문단이 도리어 끊겨 보입니다.
   ⚠ 색은 본문색 그대로 둡니다(c-blue·c-red 는 원문이 색을 준 자리라 다릅니다).
     굵기와 색을 같이 바꾸면 한 문단에 강조가 두 겹으로 걸립니다. */
.orig-body b.key,.orig-list b.key{font-weight:700;color:inherit}

/* 원문의 <ul><li> — 질환 페이지 본문은 거의 전부 이것입니다. */
.orig-list{list-style:none;padding:0;margin:0 0 var(--sp-6)}
/* ⚠ 색은 위 .orig-body > p 와 같은 이유로 --ink-2 → --ink 로 올렸습니다.
     질환 페이지 본문이 거의 전부 이 목록이라 여기가 안 바뀌면 같은 사이트 안에서
     본문 색이 두 가지가 됩니다. */
.orig-list > li{position:relative;padding-left:var(--sp-6);margin-bottom:var(--sp-4);
  font-size:var(--fs-md);line-height:1.9;color:var(--ink)}
.orig-list > li::before{content:"";position:absolute;left:.3rem;top:.85em;
  width:5px;height:5px;border-radius:50%;background:var(--acc)}
.orig-ol{counter-reset:o}
.orig-ol > li{counter-increment:o;padding-left:var(--sp-7)}
.orig-ol > li::before{content:counter(o);left:0;top:.36em;width:1.5rem;height:1.5rem;
  border-radius:50%;background:var(--acc-soft);color:var(--acc);opacity:1;
  display:grid;place-items:center;font-size:var(--fs-2xs);font-weight:700}

/* 원문 사진. 글자가 그림 안에 박혀 있으니 자르지 않습니다(.shots 와 같은 이유). */
.orig-fig{margin:var(--sp-6) 0 var(--sp-7);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#fff}
.orig-fig img{width:100%;height:auto;display:block}
/* 가로로 긴 안내 그림 — 글 칸(760px)에 맞추면 그림 안 글씨가 너무 작아져, 960px 까지만 넓혀 둡니다 (2026-09-20).
   폭은 .wrap 과 같은 좌우 여백(3rem)을 지키므로 좁은 화면에서도 가로 스크롤이 생기지 않습니다. */
.orig-fig.is-wide{width:min(960px, 100vw - 3rem)}
.orig-fig figcaption{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);font-weight:700;
  line-height:1.6;color:var(--ink-2);border-top:1px solid var(--line);
  background:var(--surface)}

/* 네이버TV·유튜브 영상 15개. 원본은 http:// 인 것이 많아 https 로만 올렸습니다.
   영상에도 설명이 붙는 자리가 있어 그림과 같이 <figure> 안에 넣습니다. */
.orig-video{position:relative;aspect-ratio:16/10;background:#000}
.orig-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* 유튜브 표지 — 누르기 전에는 방송 화면 사진만 보여 줍니다(2026-09-09).
   iframe 을 처음부터 두면 브라우저가 그리지 않아 검은 상자로만 보이는 일이
   있었습니다. 사정은 about.html 의 해당 자리 주석에 적어 두었습니다. */
.yt-cover{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;
  display:block;background:#000;cursor:pointer}
.yt-cover img{width:100%;height:100%;object-fit:contain;display:block}
.yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:68px;height:48px;border-radius:12px;background:rgba(18,18,18,.78);
  transition:background .2s}
.yt-play::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-40%,-50%);border-style:solid;border-width:11px 0 11px 19px;
  border-color:transparent transparent transparent #fff}
.yt-cover:hover .yt-play,.yt-cover:focus-visible .yt-play{background:#c00}
.orig-cap{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);
  margin:calc(var(--sp-2) * -1) 0 var(--sp-6)}

/* 원문에 표가 하나 있습니다(스포츠손상 종류). */
.orig-table{margin:var(--sp-6) 0 var(--sp-7);overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface)}
.orig-table table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.orig-table th,.orig-table td{padding:var(--sp-4) var(--sp-4);text-align:left;line-height:1.7;
  border-bottom:1px solid var(--line);vertical-align:top}
.orig-table th{width:9rem;white-space:nowrap;font-weight:700;color:var(--ink);
  background:var(--surface-2)}
.orig-table td{color:var(--ink-2)}
.orig-table tr:last-child th,.orig-table tr:last-child td{border-bottom:0}

/* ---------- 기존 사이트 질환 페이지에 [뉴스기사보기] 로 실려 있던 기사 (.news-arts) ----------
   원본은 제목을 누르면 펴지는 아코디언(faqShow)이었습니다. 기사가 길어서
   같은 방식으로 접어 둡니다. <details> 라 자바스크립트가 필요 없고,
   브라우저 안에서 Ctrl+F 로 찾으면 접힌 것도 펴집니다.
   ⚠ 기사에 딸려 있던 사진은 언론사 자산이라 옮기지 않았습니다. */
.news-arts .orig-src{margin-bottom:var(--sp-6)}
.news-art{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  margin-bottom:var(--sp-3);overflow:hidden}
.news-art > summary{list-style:none;cursor:pointer;padding:var(--sp-4) var(--sp-9) var(--sp-4) var(--sp-5);
  position:relative;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-1) var(--sp-4)}
.news-art > summary::-webkit-details-marker{display:none}
.news-art > summary:hover{background:var(--surface-2)}
.news-art > summary:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.news-art > summary::after{content:"";position:absolute;right:1.3rem;top:1.45rem;
  width:.6rem;height:.6rem;border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);transform:rotate(45deg);
  transition:transform .18s ease}
.news-art[open] > summary::after{transform:rotate(-135deg);top:1.7rem}
.news-art[open] > summary{background:var(--surface-2);border-bottom:1px solid var(--line)}
.na-t{font-weight:700;font-size:var(--fs-md);line-height:1.5;letter-spacing:-.02em;
  color:var(--ink)}
.na-m{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.na-body{padding:var(--sp-6) var(--sp-5) var(--sp-6)}
.na-body > .na-h{font-size:var(--fs-lg);font-weight:700;line-height:1.45;
  letter-spacing:-.03em;color:var(--ink);margin:0 0 var(--sp-2)}
.na-body > .na-meta{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);
  margin:0 0 var(--sp-4);padding-bottom:var(--sp-4);border-bottom:1px solid var(--line)}
.na-body > .na-sub{font-size:var(--fs-md);font-weight:700;line-height:1.7;
  color:var(--ink);margin:0 0 var(--sp-4)}
.na-body > p{font-size:var(--fs-sm);line-height:1.95;color:var(--ink-2);margin:0 0 var(--sp-4)}
.na-body > .na-g{font-size:var(--fs-md);font-weight:700;letter-spacing:-.02em;
  color:var(--ink);margin:var(--sp-6) 0 var(--sp-3)}
.na-ol{list-style:none;counter-reset:na;padding:0;margin:0 0 var(--sp-5)}
.na-ol > li{counter-increment:na;position:relative;padding-left:var(--sp-7);
  margin-bottom:var(--sp-2);font-size:var(--fs-sm);line-height:1.9;color:var(--ink-2)}
.na-ol > li::before{content:counter(na);position:absolute;left:0;top:.42em;
  width:1.4rem;height:1.4rem;border-radius:50%;background:var(--surface-2);
  border:1px solid var(--line);font-size:var(--fs-2xs);font-weight:700;color:var(--ink-2);
  display:flex;align-items:center;justify-content:center}
.na-body > .na-by{font-size:var(--fs-xs);font-weight:600;color:var(--ink-3);
  line-height:1.75;margin:var(--sp-5) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--line)}
.na-body > .na-by + .na-by{margin-top:.2rem;padding-top:0;border-top:0}
@media (max-width:768px){
  .news-art > summary{padding:var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-4)}
  .na-m{white-space:normal}
  .na-body{padding:var(--sp-5) var(--sp-4) var(--sp-6)}
}

/* ---------- 저서 ---------- */
.books{display:grid;grid-template-columns:repeat(5,1fr);column-gap:var(--sp-4);row-gap:var(--sp-7);margin-top:var(--sp-5)}
/* 2026-09-13 — 책마다 표지 · 제목 · 출간 정보 · 버튼을 네 줄로 두고, subgrid 로 한 줄에 놓인 책끼리 같은 줄을 쓰게 합니다.
   제목이 한 줄인 책(2006 관절염)만 버튼이 위로 올라가 줄이 어긋나던 것을 고쳤습니다(병원 요청).
   subgrid 를 모르는 브라우저에서는 줄만 안 맞고 위에서 아래로 그대로 쌓입니다. */
.books figure{margin:0;display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
.books img{width:100%;height:auto;display:block;border-radius:var(--r-s);
  border:1px solid var(--line)}
/* 표지 이미지 옆에서 책 제목이 안 보이던 문제(0.74rem·ink-3)를 고쳤습니다.
   제목은 본문 크기·굵게, 출간연도·출판사만 작고 연하게 둡니다. */
.books figcaption{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;
  margin-top:var(--sp-3);font-size:var(--fs-md);line-height:1.45;
  font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.books .bk-title{display:block}
.books .bk-meta{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);
  font-weight:600;color:var(--ink-2)}
/* 2026-09-13 — 표지 밑 '자세히 보기' · '네이버 바로가기' 버튼 두 줄(병원 요청 — 옛 홈페이지 저술도서의 회색 버튼 참고).
   .btn .btn-line 을 그대로 쓰고 표지 폭만큼 늘립니다. 옛 버튼처럼 옅은 회색 바탕이고, 올리면 테두리 · 글자만 파랗게 바뀝니다(C안 — 그림자 없음).
   누르는 높이 44px(WCAG 2.5.5). '네이버 바로가기' 는 새 창이라 ↗ 를 붙입니다(글자가 아니라 ::after — 화면낭독기는 aria-label 만 읽습니다). */
.books .bk-links{display:flex;flex-direction:column;gap:var(--sp-2);margin-top:var(--sp-3)}
.books .bk-btn{width:100%;min-height:44px;padding:var(--sp-2) var(--sp-3);background:var(--surface-2)}
.books .bk-btn[target="_blank"]::after{content:"↗";font-weight:400;opacity:.75}
/* 2018년 책 칸은 원문 블록 바깥의 두 번째 .book-details 에 있습니다. 두 묶음 사이가 벌어지지 않게 합니다. */
.book-details + .book-details{margin-top:0}
/* 다섯 번째 책(2018)은 표지 이미지가 없습니다. 자리를 비우는 대신 제목만 세웁니다. */
.books .no-cover{display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:231/302;border-radius:var(--r-s);border:1px dashed var(--line-2);
  background:var(--surface-2);padding:var(--sp-3);font-size:var(--fs-xs);line-height:1.5;
  color:var(--ink-2);font-weight:700}
/* ---------- 저술도서 서지정보·책소개·목차 (2026-09-03) ----------
   기존 사이트 /m/page03.php 를 그대로 옮긴 것입니다. 책마다 목차가 200줄 가까이
   되므로 표지 목록 아래에 접어 둡니다. 펼치는 장치는 .more 를 그대로 씁니다. */
.book-details{margin-top:var(--sp-2)}
.book-details .book-detail{margin-top:0}
.book-details .book-detail + .book-detail{margin-top:0}
.book-detail summary{font-weight:700;letter-spacing:-.02em}
/* 값이 '장형석 박사' 처럼 짧아서 1fr 로 두면 화면 끝까지 늘어납니다. 왼쪽으로 붙입니다. */
.book-meta{display:grid;grid-template-columns:auto minmax(0,max-content);gap:var(--sp-1) var(--sp-4);
  justify-content:start;margin:var(--sp-4) 0 var(--sp-5);font-size:var(--fs-sm);line-height:1.6}
.book-meta dt{font-weight:700;color:var(--ink-2);white-space:nowrap}
.book-meta dd{margin:0;color:var(--ink)}
.book-detail h4{margin:var(--sp-5) 0 var(--sp-2);font-size:var(--fs-md);font-weight:700;
  letter-spacing:-.02em;color:var(--ink)}
.book-detail p{font-size:var(--fs-md);line-height:1.75;color:var(--ink-2);margin:var(--sp-2) 0}
/* 목차는 글머리표를 빼고 들여쓰기만 줍니다. Part 줄만 굵게 띄웁니다. */
.book-detail .toc{list-style:none;padding-left:0;margin:var(--sp-2) 0}
.book-detail .toc li{padding-left:var(--sp-4);font-size:var(--fs-sm);line-height:1.7;
  color:var(--ink-2)}
.book-detail .toc li::before{content:none}
.book-detail .toc .toc-part{padding-left:0;margin-top:var(--sp-4);color:var(--ink)}
.book-detail .toc .toc-part:first-child{margin-top:0}

/* 저서 → 연구·특허 로 넘어가는 안내 링크.
   원래 .rail-hint(.83rem·ink-3) 잔글씨였는데, 이 링크가 논문·특허로 가는 유일한
   통로라 눈에 띄어야 합니다. 본문보다 크게 잡고 밑줄을 넣었습니다. */
.res-more{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;
  font-size:var(--fs-md);font-weight:700;color:var(--acc);letter-spacing:-.02em;
  text-decoration:underline;text-underline-offset:.28em;text-decoration-thickness:2px}

/* ---------- 논문·특허 카드의 인증 썸네일 ----------
   기존에는 인증 배지 4장이 별도의 띠(.res-badges)로 논문·특허 목록 위에 있었습니다.
   배지에 적힌 문구가 바로 아래 카드 제목과 같은 내용이라, 같은 말을 두 번 하면서
   정작 서로 무관해 보였습니다. 이제 각 배지를 해당 카드 안으로 넣습니다.

   원본 PNG 는 [이미지 + 화살표 + 한글 설명] 이 한 장에 붙어 있는 형태입니다.
   설명 문구는 카드 제목과 같은 내용이라 버리고, 이미지 쪽만 잘라 씁니다.
   화살표는 그 설명을 가리키던 것이라 함께 잘라냅니다.
   아래 좌표는 원본을 열 단위로 훑어 내용이 끊기는 지점을 찾은 값입니다.
     논문 스캔  원본 320×131 · 크롭 x 16–140, y 0–130  (125×131)
                 ※ x 141–153 은 화살표. 여기까지 넣으면 꼬리가 남습니다.
     특허 인장  원본 320×120 · 크롭 x 18–91,  y 3–74   (74×72)
   계산식: 배율 = 표시높이(77px) / 크롭높이
           background-size     = 원본너비×배율, 원본높이×배율
           background-position = -크롭x×배율, -크롭y×배율
           표시너비            = 크롭너비×배율
   ⚠ 설명·화살표 없는 이미지를 따로 받으시면 이 계산이 전부 필요 없습니다.
     그때는 .res-thumb 를 <img> 로 바꾸세요. */
.res-top{min-width:0;display:flex;align-items:center;gap:var(--sp-4);margin-bottom:var(--sp-4)}
/* 320px 급 좁은 화면에서 '사진 + 글' 가로줄의 글 칸이 그리드·플렉스 기본값
   min-width:auto 때문에 줄어들지 못해 페이지가 가로로 넘쳤습니다.
   사진 쪽은 flex:none 이라 이 규칙의 영향을 받지 않습니다. 2026-09-07. */
.res-top > *,.doc-top > *{min-width:0}
/* 320px 급 화면에서 'Ethnopharmacology' 처럼 끊기지 않는 라틴 낱말이 칸을 넘습니다.
   break-word 는 낱말이 실제로 안 들어갈 때만 끊으므로 넓은 화면에는 영향이 없습니다.
   2026-09-07. */
.res-tag,.doc-role{overflow-wrap:break-word}
/* .res-tag 자체가 align-self:flex-start 라 가로 배치에서는 위로 붙습니다. 되돌립니다. */
.res-top .res-tag{margin-bottom:0;align-self:center}
/* 배지 PNG 는 투명 배경이라 다크 테마에서 그림이 묻힙니다.
   그래서 썸네일 바탕만 흰색으로 고정합니다. 인증마크 카드도 같은 이유입니다. */
.res-thumb{height:77px;flex:none;border-radius:var(--r-s);
  border:1px solid var(--line);background-color:#fff;background-repeat:no-repeat;
  box-shadow:var(--shadow-s)}
.rt-paper05,.rt-paper09{width:73px;background-size:188.1px 77px;background-position:-9.4px 0}
.rt-paper05{background-image:url("../img/research/badge-paper-1.png")}
.rt-paper09{background-image:url("../img/research/badge-paper-2.png")}
/* 등록특허 표시 — 2026-09-29 메인 개편 5-5. 예전의 인장 그림 둘(patent-spine.png · patent-joint.png, SPINE / JOINT)은
   특허가 두 건인 것처럼 보여 쓰지 않고, 한 가지 증서 아이콘으로 통일했습니다. */
.patents > .patent:only-child{grid-column:1 / -1}
.rt-patent{width:77px;background-position:center;background-size:44px 44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5BB0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h5M8 7h7M8 11h5'/%3E%3Ccircle cx='17' cy='15' r='3.5' fill='%231D5BB0' fill-opacity='.16'/%3E%3Cpath d='M15.5 18.2L15 22l2-1 2 1-.5-3.8'/%3E%3C/svg%3E")}

/* ---------- 치료 전후 실험 사진 ----------
   세포·조직 실험 사진입니다. 사람의 치료 결과가 아니라는 점을
   캡션과 아래 res-note 에서 함께 밝힙니다. */
.eff{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);margin-top:var(--sp-6)}
.eff figure{margin:0;border:1px solid var(--line);border-radius:var(--r-s);
  overflow:hidden;background:var(--surface)}
.eff img{width:100%;height:auto;display:block}
.eff figcaption{padding:var(--sp-4) var(--sp-4);font-size:var(--fs-sm);line-height:1.55;color:var(--ink-2);
  border-top:1px solid var(--line)}
.eff figcaption b{color:var(--ink);font-weight:700}
/* ⚠ 2026-09-08 — 이 여섯 칸의 설명은 .sr 로 화면에서만 숨겼습니다(about.html).
   새 이미지가 같은 설명을 그림 안에 담고 있어 화면에는 두 번 나왔습니다.
   글을 지우지 않은 이유 — 그림 속 글자는 화면낭독기가 읽지 못하고 검색에도
   안 잡힙니다. 여기 남겨 두면 눈으로는 안 보여도 낭독기·검색엔진은 읽습니다.
   ⚠ .eff figcaption 이 .sr 보다 선택자가 세서 안여백·윗선이 그대로 먹습니다.
     .sr 이 clip 으로 잘라내 화면에는 안 보이지만, 값을 0 으로 눌러 둡니다. */
.eff figcaption.sr{padding:0;border-top:0}

/* ---------- 방송 보도 ----------
   방송사 화면 캡처라 화질이 낮습니다. 작게 깔고 어두운 배경에 얹어
   '자료 화면'으로 읽히게 합니다. */
.tv{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4)}
.tv figure{margin:0;border-radius:var(--r-s);overflow:hidden;
  background:#080E24;border:1px solid var(--line)}
.tv img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block}
.tv figcaption{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);line-height:1.55;
  color:rgba(245,248,255,.9)}
.tv figcaption b{color:#fff;font-weight:700;display:block;margin-bottom:.2rem;font-size:var(--fs-xs);
  letter-spacing:.02em}
.awards{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:var(--sp-5)}
.awards img{height:64px;width:auto;border:1px solid var(--line);border-radius:var(--r-s);
  background:var(--surface)}

/* ---------- 청정 한약재 인증 ---------- */
.certs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);margin-top:var(--sp-5)}
.certs figure{margin:0;border:1px solid var(--line);border-radius:var(--r-s);
  overflow:hidden;background:#fff}
.certs img{width:100%;height:auto;display:block}
.certs figcaption{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);line-height:1.5;font-weight:700;
  color:var(--ink-2);border-top:1px solid var(--line);background:var(--surface)}

@media (max-width:1024px){
  .tv{grid-template-columns:repeat(2,1fr)}
  .eff{grid-template-columns:repeat(2,1fr)}
  .books{grid-template-columns:repeat(3,1fr)}
  .shots.tri{columns:2}
}
@media (max-width:768px){
  .eff,.doc-scene{grid-template-columns:1fr}
  .knowhow{grid-template-columns:1fr}
  .shots,.shots.tri{columns:1}
  .pick{grid-template-columns:1fr}
  .certs{grid-template-columns:repeat(2,1fr)}
  .books{grid-template-columns:repeat(2,1fr)}
  .sym-ph{aspect-ratio:2/1}
}

/* ══════════════════════════════════════════════════════════════
   홈 랜딩 (2026-08 개편)

   바뀐 것: 홈이 하나의 긴 페이지였는데, 첫 화면과 짧은 소개만 남기고
   나머지는 상단 메뉴로 들어가는 개별 페이지로 나눴습니다.
   (증상별 안내 · 치료법 · 병원소개 · 진료안내 · 자주 묻는 질문)

   참고 기준 — 자생한방병원·나누리·바른세상 등 최근 국내 대형 병원 홈의 공통 구조:
     ① 화면을 꽉 채우는 첫 화면(풀블리드 · 한 문장 카피 · 큰 인물컷)
     ② 그 아래 걸쳐 올라오는 바로가기 4칸(진료시간·오시는 길·치료비·상담)
     ③ 짧은 병원 소개 + 숫자
     ④ 큰 사진 카드로 나뉜 섹션 입구
     ⑤ 화면 오른쪽에 늘 떠 있는 예약·전화 버튼
   ══════════════════════════════════════════════════════════════ */

/* ---------- ⓪ 첫 화면 위에 얹히는 헤더 ----------
   홈에서만 헤더가 첫 화면 위에 투명하게 놓입니다(.nav.on-hero, 스크롤을 내리면 .stuck).
   2026-09-07 C안 — 첫 화면이 밝은 회색 판이 되면서, 예전에 여기 있던 '흰 글씨 메뉴 +
   흰 칩 로고' 규칙은 전부 지웠습니다. 평소 헤더 색 그대로 얹으면 됩니다. */

/* ---------- ⓪-b 메가메뉴 ----------
   상단 메뉴에 마우스를 올리거나 누르면 헤더 아래로 판이 펼쳐집니다.

   ⚠ 2026-09-02 개편 — 고른 칸 하나만 펼칩니다.
     예전에는 어느 항목을 골라도 8칸(항목 60여 개)이 한꺼번에 펼쳐지고 고른
     칸만 옅은 판으로 강조됐습니다. 기존 사이트(janghs.com)의 전체메뉴를 그대로
     옮긴 모습이었는데, 한 번에 읽어야 할 글이 너무 많고 글자도 작아 오히려
     찾기 어려웠습니다. 지금은 자생한방병원처럼 고른 칸만 남기고 나머지는
     감춥니다. 판에 칸이 하나뿐이니 글자를 두 단계 키우고(.82rem → 1.02rem)
     줄 간격도 넓혔습니다.

   판의 구성 — 가로 세 덩어리
     .mega-side   왼쪽.   칸 이름 + 한 줄 설명 (그 칸의 페이지로는 상단 메뉴를 눌러서 갑니다)
     .mega-list   가운데. 그 칸의 항목만. 한 단에 여섯 줄까지, 넘치면 두 단
     .mega-aside  오른쪽. 진료 문의(전화 · 진료시간). 칸이 바뀌어도 그대로 있습니다

   ⚠ .mega 와 .mega-panel 에 display 를 지정하지 마세요. 열고 닫는 일은 HTML 의
     hidden 속성을 main.js 가 붙였다 떼는 방식이고, 리셋의
     `[hidden]{display:none!important}` 가 그것을 실제로 감춥니다.
     여기서 display 를 주면 처음부터 8칸이 다 펼쳐진 채로 나옵니다.
     ⚠ 리셋의 !important 를 빼지 마세요. .mega-panel 은 display:grid 라
       !important 가 없으면 hidden 이 무시됩니다(우선순위가 같아 뒤에 온 쪽이 이김). */

/* 판의 기준 상자는 헤더(.nav) 자체입니다. .nav 는 position:fixed 라
   화면 폭 그대로이고, 그 덕에 판이 본문 폭(1400px)을 넘어 화면 끝까지 펼쳐집니다.
   ⚠ .nav-inner 에 position 을 주지 마세요. 주는 순간 판이 다시 1400px 안에
     갇힙니다(2026-08-21 이전 모습). */

/* 상위 메뉴에 붙는 아래 꺾쇠 (.qa summary::after 와 같은 방식) */
/* 2026-10-01 — 글자보다 눈에 덜 띄게: 작게(4.5px) · 가늘게(1.2px) · 연회색(#9CA3AF) · 글자와 6px.
   올리거나 펼치면 글자와 같은 파랑으로 바뀌고, 펼친 동안은 위로 뒤집힙니다. */
.menu > li.has-mega > a{display:flex;align-items:center;gap:6px}
.menu > li.has-mega > a::after{content:"";flex:none;width:4.5px;height:4.5px;
  border-right:1.2px solid #9CA3AF;border-bottom:1.2px solid #9CA3AF;
  transform:rotate(45deg) translate(-1px,-1px);
  transition:transform .25s var(--ease),border-color .2s}
.menu > li.has-mega > a:is(:hover,:focus-visible)::after{border-color:var(--acc)}
.menu > li.has-mega > a[aria-expanded="true"]{color:var(--acc);background:var(--surface-2)}
.menu > li.has-mega > a[aria-expanded="true"]::after{
  transform:rotate(-135deg) translate(-1px,-1px);border-color:var(--acc)}

/* ⚠ 배경은 반드시 불투명해야 합니다.
   헤더 막대에 쓰는 유리 효과(반투명 + backdrop-filter)를 이 판에도 쓰면,
   부모인 .nav-inner 에도 backdrop-filter 가 걸려 있어서 크롬이 제대로 겹쳐
   그리지 못합니다. 절반쯤 비쳐서 뒤 글씨가 판을 뚫고 보입니다. */
/* 화면 끝에서 끝까지 펼칩니다(2026-08-21). 100vw 는 세로 스크롤바 폭까지 세어서
   가로 스크롤이 생기므로 쓰지 않고, .nav 에 붙은 left:0/right:0 을 그대로 물려받습니다.
   화면 끝까지 닿는 판이라 모서리는 둥글리지 않고 좌우 테두리도 두지 않습니다. */
.mega{position:absolute;left:0;right:0;top:100%;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  box-shadow:var(--shadow-l);
  max-height:calc(100dvh - var(--nav-h));overflow-y:auto}
@media (prefers-reduced-motion:no-preference){
  .mega{animation:mega-in .26s var(--ease) both}
}
@keyframes mega-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* 판이 화면 끝까지 펼쳐지므로, 열려 있는 동안에는 헤더 막대도 같은 흰 판으로
   만들어 위아래를 한 장으로 잇습니다. 색만 .nav 로 옮겨 칠하는 것이라 로고·메뉴는
   1400px 자리에 그대로 있습니다.
   ⚠ 여기서 .nav-inner 의 폭을 넓히지 마세요. 열리는 순간 메뉴 글자가 옆으로
     밀리면서 마우스가 항목에서 벗어나 메뉴가 깜빡이며 닫힙니다. */
.nav.mega-open{background:var(--surface)}

/* 판은 화면 끝까지 가되, 안쪽 내용은 본문과 같은 1200px 로 묶어 가운데 세웁니다.
   ⚠ 예전(8칸)에는 1760px 이었습니다. 칸이 하나뿐이라 그만큼 넓힐 이유가 없고,
     본문과 같은 폭이라야 헤더 로고·메뉴와 왼쪽 끝이 맞습니다. */
.mega-inner{display:grid;grid-template-columns:minmax(0,1fr) 15.5rem;
  gap:var(--sp-9);align-items:start;
  width:min(100% - 3rem,var(--wrap));margin-inline:auto;
  padding:var(--sp-8) 0 var(--sp-8)}

/* 여덟 칸이 같은 자리에 겹쳐 있고, 그중 하나만 hidden 이 벗겨집니다.
   ⚠ 판의 높이는 펼친 칸의 항목 수에 따라 달라집니다. 오른쪽 진료 문의가
     기준 높이(약 13rem)를 잡아 주므로 항목이 적은 칸에서도 판이 납작해지지 않습니다. */
.mega-panel{display:grid;grid-template-columns:17rem minmax(0,1fr);gap:var(--sp-9)}

.mega-side h4{font-size:var(--fs-h5);line-height:1.32;letter-spacing:-.022em;color:var(--ink)}
/* ⚠ 설명글이 13.1px 이라 이 판에서 가장 작은 글씨였습니다. 제목이 23px 인데
     한 번에 1.76배 떨어지면서 위계가 끊기고 읽기 힘들었습니다. 한 단계 올립니다.
     (14.7px — 항목 18.2px 보다는 확실히 작아 여전히 보조 설명으로 읽힙니다) */
.mega-side p{margin-top:var(--sp-2);font-size:var(--fs-xs);line-height:1.62;color:var(--ink-3)}
/* ⚠ 여기 있던 .mega-all(○○ 전체보기)은 2026-09-02 에 없앴습니다 — 상단 메뉴를
   누르면 그 페이지로 갑니다. main.js 3-b 의 설명 참고. */

/* 항목 — 위에서 아래로 채우고, 여섯 줄이 넘으면 옆 단으로 넘어갑니다.
   ⚠ --rows 는 main.js 가 항목 수를 세어 넣습니다(4개면 4줄 한 단, 10개면 5줄 두 단).
     JS 가 없으면 6줄 기준으로 접힙니다. 여기서 손댈 것은 없습니다. */
/* ⚠ 단 너비는 2026-09-05 에 14.5rem 고정에서 max-content 로 바꿨습니다.
     '척추봉침요법' 은 글자 폭이 112px 인데 칸이 232px 이라 절반 넘게 비었고,
     항목이 저마다 넓은 빈칸 안에 하나씩 떠 있는 것처럼 보였습니다. 7개짜리
     칸(4줄+3줄)에서는 오른쪽 아래 빈자리까지 크게 뚫려 보였습니다.
     칸이 글자를 감싸면 두 단이 한 덩어리로 읽힙니다. */
.mega-list{display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(var(--rows,6),auto);
  grid-auto-columns:max-content;
  justify-content:start;gap:.2rem 4.5rem}
/* ⚠ 항목은 이 판의 주인공입니다. 예전에는 16.3px·600·--ink-2 라 옆의 설명글
     (13.1px)보다 3px 클 뿐이어서 '눌러서 갈 곳' 으로 보이지 않았습니다.
     한 단계 키우고(18.2px) 본문 색으로 올렸습니다. */
.mega-list li a{display:block;padding:var(--sp-2) var(--sp-2);margin-inline:calc(var(--sp-2) * -1);
  border-radius:var(--r-s);font-size:var(--fs-md);line-height:1.5;font-weight:700;
  color:var(--ink);transition:color .18s,background .18s}
.mega-list li a:hover{color:var(--acc);background:var(--surface-2)}

/* 오른쪽 진료 문의 — 어느 칸을 펼쳐도 같은 자리에 있습니다.
   ⚠ 진료시간은 visit.html 에도 적혀 있습니다. 바뀌면 두 곳을 함께 고치세요. */
.mega-aside{align-self:stretch;border-left:1px solid var(--line);padding-left:var(--sp-7)}
.mega-aside-k{font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);letter-spacing:.05em}
.mega-aside-tel{display:block;margin-top:var(--sp-1);font-size:var(--fs-h5);font-weight:700;
  letter-spacing:-.025em;color:var(--acc);font-variant-numeric:tabular-nums}
.mega-hours{margin-top:var(--sp-4);display:grid;gap:var(--sp-1)}
.mega-hours li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  font-size:var(--fs-2xs);line-height:1.5}
.mega-hours span{color:var(--ink-3);font-weight:600}
.mega-hours b{color:var(--ink-2);font-weight:700;font-variant-numeric:tabular-nums}
.mega-hours b.off{color:var(--ink-3);font-weight:600}
.mega-aside-links{display:flex;gap:var(--sp-2);margin-top:var(--sp-5)}
.mega-aside-links a{flex:1 1 0;text-align:center;padding:var(--sp-2) var(--sp-2);
  border:1px solid var(--line-2);border-radius:999px;
  font-size:var(--fs-2xs);font-weight:700;color:var(--ink-2);
  transition:color .18s,border-color .18s,background .18s}
.mega-aside-links a:hover{color:var(--acc);border-color:var(--acc);background:var(--surface-2)}

/* 메뉴가 햄버거로 접히는 구간에서는 메가메뉴를 통째로 끕니다.
   터치에는 hover 가 없고, 좁은 화면에서는 판이 화면을 거의 다 덮습니다.
   ⚠ 아래 1440px 은 main.js 의 min-width:1441px 과 짝입니다.
     한쪽만 고치면 빈 판이 열리거나 영영 안 열립니다. */
@media (max-width:1023px){
  .mega{display:none}
  .menu > li.has-mega > a::after{display:none}
  .menu > li.has-mega > a{display:block}
  /* 열린 채로 창을 줄이면 JS 가 접어 주지만, 그 사이 헤더가 흰 판으로 남지 않게
     원래 막대 모습으로 되돌려 둡니다. */
  .nav.mega-open{background:none}
}

/* ---------- 모바일 메뉴의 세부 항목 (main.js 3-c, 2026-09-15) ----------
   햄버거 메뉴(1440px 이하)에서만 보입니다. 상위 항목 오른쪽 꺾쇠 단추를 누르면 그 칸의 세부 항목(메가메뉴와 같은 목록)이
   두 줄로 펼쳐집니다. 지금 보고 있는 페이지가 든 칸은 처음부터 펼쳐져 있습니다. 데스크톱은 메가메뉴 그대로라 둘 다 숨깁니다. */
.m-sub-toggle,.m-sub{display:none}
@media (max-width:1023px){
  .menu > li.has-mega{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;border-bottom:1px solid var(--line)}
  .menu > li.has-mega > a{border-bottom:0}
  .m-sub-toggle{display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;border-radius:var(--r-s);
    background:transparent;color:var(--ink-3);cursor:pointer}
  .m-sub-toggle:hover{background:var(--surface-2);color:var(--ink)}
  .m-sub-toggle::before{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-3px) rotate(45deg);transition:transform .25s var(--ease)}
  .m-sub-toggle[aria-expanded="true"]{color:var(--acc)}
  .m-sub-toggle[aria-expanded="true"]::before{transform:translateY(3px) rotate(-135deg)}
  .m-sub{grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-4);
    margin:0;padding:0 0 var(--sp-3) var(--sp-3);list-style:none}
  .m-sub[hidden]{display:none}
  .m-sub a{display:flex;align-items:center;min-height:44px;padding:var(--sp-1);font-size:var(--fs-sm);line-height:1.4;color:var(--ink-2)}
  .m-sub a:hover{color:var(--acc)}
  .m-sub a[aria-current="page"]{color:var(--acc);font-weight:700}
}
@media (max-width:359px){ .m-sub{grid-template-columns:minmax(0,1fr)} }

/* ---------- ① 첫 화면 ----------
   2026-09-07 C안 — 화면을 꽉 채우던(100vh) 남색 판을 옅은 회색 판(--surface-2)에
   검은 글씨로 바꾸고, 높이는 내용만큼만 차지합니다. 커서 스포트라이트 · 그레인 ·
   움직이는 구름(.mesh)도 지웠습니다.
   ⚠ 아래 여백은 바로가기 4칸(.qwrap, 음수 마진 최대 -80px)이 이 판 밑단에 걸쳐
     올라오는 몫까지 포함한 값입니다. 줄이면 신뢰 칩(.chips)과 4칸이 겹칩니다. */
.hx{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;
  padding:calc(var(--nav-h) + var(--rhythm-block)) 0 clamp(6rem,8vw,8rem);
  background:var(--surface-2);color:var(--ink);
  border-bottom:1px solid var(--line);
}

/* 두 칸 비율 · 사이 간격 — 2026-08-31 에 배너 쪽으로 넘겼습니다.
   전체 폭은 2026-09-07 부터 본문과 같은 --wrap(1200px) 입니다. 제목이 62px 로 작아져
   왼쪽 칸 520px 에서도 '잘라내지 않고' 가 한 줄에 들어갑니다.

   ⚠ 2026-09-08 — .92fr / 1.08fr 을 1fr / 1fr 로 바꿨습니다. 왼쪽 글 칸을 오른쪽
     배너와 같은 폭으로 맞춰 달라는 요청입니다(1440px 기준 476.9px → 518.4px,
     배너는 559.8px → 518.4px 로 둘이 정확히 같아집니다).
     ▸ 배너를 지금 크기(559.8px)로 둔 채 왼쪽만 키우려면 이 칸 전체가 1283px 이
       되어야 하는데, 그러면 헤더·아래 섹션(전부 --wrap 1200px)과 왼쪽 끝이 어긋나고
       오른쪽 고정 버튼(.fixcta)을 배너가 파고듭니다. 그래서 틀은 그대로 두고
       두 칸 비율만 맞췄습니다.
     ▸ 덤 — 배너 원본이 600px(1번 472px) 이라 559.8px 도 이미 확대 표시였는데,
       518.4px 로 줄면 확대가 사라져 그림 속 글자가 오히려 또렷해집니다. */
.hx-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,3.6vw,4.5rem);
  align-items:center;width:min(100% - 3rem,var(--wrap))}
/* ⚠ 오른쪽 고정 버튼(.fixcta — 폭 80px + 여백, 769px 이상에서만 보입니다)이
   첫 화면 오른쪽 칸을 덮습니다. 예전에는 그 자리에 폭 420px 인물컷이 가운데
   놓여 여유가 있었는데, 2026-08-31 에 배너가 들어오면서 칸을 거의 꽉 채우게 되어
   화살표가 버튼 밑으로 들어갔습니다. 버튼이 보이는 폭에서만 오른쪽을 비웁니다.
   ⚠ 이 분기와 아래 .fixcta{display:none} 은 반드시 짝으로 움직입니다.
      2026-09-07 에 900/901 에서 768/769 로 함께 내렸습니다 (README 수정 이력 참고).

   ⚠⚠ 2026-09-08 — 이 여백(7rem)을 걷어냈습니다. 배너 오른쪽 끝을 아래 바로가기
      카드(‘온라인 상담’)의 오른쪽 끝, 즉 --wrap(1200px) 의 오른쪽 끝과 맞춰 달라는
      요청입니다. 여백이 있으면 배너가 112px 안쪽에서 끝나 카드와 어긋납니다.
      ▸ 대신 화면이 좁으면 고정 버튼(.fixcta)이 배너 오른쪽 위를 덮습니다.
        .fixcta 는 화면 오른쪽에 붙는 position:fixed 라 왼쪽 끝이 늘 (뷰포트 − 97.6px)
        입니다. --wrap 오른쪽 끝이 그보다 오른쪽에 오는 조건은 뷰포트 1395px 미만이고,
        그 아래에서는 겹칩니다. 1400px 이상에서는 겹치지 않습니다.
      ▸ 이건 배너만의 문제가 아닙니다. 아래 바로가기 카드·본문 섹션도 전부 --wrap
        이라 같은 폭에서 이미 버튼 밑으로 들어갑니다. 배너는 사진이라 더 눈에 띌 뿐입니다.
      ▸ 되돌리시려면 아래 한 줄의 주석을 풀면 됩니다. */
/* @media (min-width:769px){ .hx-inner{padding-right:7rem} } */



/* 기존 사이트 첫 화면 카피(2026-09-03 복원). h1 위에 두 줄로 얹습니다.
   h1 보다 작고 연하게 두어 제목을 가리지 않게 했습니다. */
.hx-kicker{font-size:clamp(1rem,1.35vw,1.2rem);line-height:1.65;font-weight:600;
  letter-spacing:-.01em;color:var(--ink-2);margin:0 0 var(--sp-4);
  padding-left:var(--sp-4);border-left:3px solid var(--acc)}
/* 제목. 2026-09-07 C안에서 96px → 62px. 굵기 700. */
h1.hx-title{font-size:clamp(2.4rem,4.6vw,3.9rem);line-height:1.15;letter-spacing:-.03em;
  font-weight:700;margin-bottom:var(--sp-7)}
.hx-lede{font-size:clamp(1.16rem,1.6vw,1.42rem);line-height:1.8;color:var(--ink-2);
  max-width:30em;margin-bottom:var(--sp-8)}
.hx-lede strong{color:var(--ink)}
.hx-cta{display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center}
.hx-note{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-sm);
  color:var(--ink-2);margin-top:var(--sp-6)}

/* 첫 화면 오른쪽 칸.
   2026-08-31 부터 여기에 롤링 배너가 들어갑니다(예전에는 대표원장 인물컷이었고,
   인물컷은 아래 '병원 소개'의 .doc-card 로 옮겼습니다). */
.hx-media{position:relative;justify-self:center;width:min(100%,420px)}
/* ⚠⚠ --roll-max 가 배너를 얼마나 크게 보여줄지 정하는 단 하나의 값입니다.
   ▸ 2026-08-31(2차) 에 600px → 760px 로 올렸습니다. 작아 보인다는 지적을 받아
     오른쪽 칸도 함께 넓혔습니다(.hx-inner 두 칸 비율 · 간격 · 전체 폭).
   ▸ ⚠ 원본이 600px(1번은 472px) 뿐이라 760px 로 보여 주면 1.27배(1번은 1.6배)
     늘어납니다. 그림 안에 박힌 글자가 그만큼 무릅니다. 지금은 "크게"를 택한 값이니
     선명한 쪽이 좋으시면 600px 으로 되돌리시면 됩니다.
   ▸ 1200px 짜리 새 배너를 넣으시면 여기 하나만 900px 쯤으로 올리시면 됩니다
     (그러면 늘어나지 않고 커집니다). 아래 반응형에서 화면 크기별로 다시 잡는 곳도
     같은 이름이라 함께 따라옵니다.
   ▸ 새 그림 규격은 README 11-4 절에 적어 두었습니다. */
.hx-roll{--roll-max:760px}
/* ⚠ 선택자를 `.hx-media.hx-roll` 로 겹쳐 쓴 데는 이유가 있습니다. 아래 반응형에는
   `.hx-media{width:…}` 로 폭을 다시 잡는 곳이 세 군데 있는데(짧은 노트북 360px ·
   1024px 이하 340px · 768px 이하 300px), 그쪽이 파일 뒤에 있어서 클래스 하나짜리
   선택자로는 --roll-max 가 통째로 묻혔습니다. 2026-09-01 까지 실제로 묻혀 있었고,
   그래서 1366×768 노트북에서 배너가 600px 이 아니라 360px 로 나왔습니다.
   ⚠ 여기를 다시 클래스 하나로 낮추면 그 버그가 그대로 돌아옵니다. */
.hx-media.hx-roll{width:min(100%,var(--roll-max))}
.hx-roll .roll{max-width:none}
/* 밝은 판 위라 배너는 본문과 같은 선·그림자를 씁니다(2026-09-07 C안 — 예전의 어두운
   배경용 흰 테두리·뒤쪽 빛·큰 그림자는 지웠습니다). */
.hx-roll .roll-view{background:var(--surface);box-shadow:var(--shadow-l)}
/* 화살표는 그림 위가 아니라 그림 아래 점 줄(.roll-bar)의 양 끝에 둡니다(2026-09-19 병원 지적 —
   그림 가운데 높이에 두면 배너 글씨를 가렸습니다. 휴대폰에서 먼저 내렸고, 같은 날 PC 도 같게 했습니다).
   점 줄 높이를 화살표에 맞춰 화살표 · 점 · 멈춤 단추가 한 줄로 가운데가 맞습니다. */
.hx-roll .roll-bar{min-height:48px}
.hx-roll .roll-arw{top:auto;bottom:0;transform:none}
.hx-roll .roll-arw:active{transform:scale(.94)}
.hx-roll .roll-arw.prev{left:0}
.hx-roll .roll-arw.next{right:0}
/* 스크롤 유도 표시(.hx-scroll 'SCROLL' + 떨어지는 선)는 2026-09-07 C안에서 지웠습니다.
   첫 화면이 화면을 꽉 채우지 않으니 아래에 더 있다는 것이 보입니다. */

/* ---------- ② 히어로에 걸쳐 올라오는 바로가기 4칸 ---------- */
.qwrap{position:relative;z-index:5;margin-top:clamp(-5rem,-6vw,-3.5rem)}
.qlinks{display:grid;grid-template-columns:repeat(4,1fr);
  border-radius:var(--r-l);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-l)}
.ql{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-7) var(--sp-7);
  border-right:1px solid var(--line);transition:.25s var(--ease)}
.ql:last-child{border-right:0}
.ql:hover{background:var(--surface-2)}
.ql .ic{width:52px;height:52px;border-radius:var(--r-l);flex:none;display:grid;place-items:center;
  background:var(--acc-soft);color:var(--acc)}
.ql b{display:block;font-size:var(--fs-md);letter-spacing:-.03em}
.ql span{display:block;font-size:var(--fs-xs);color:var(--ink-3);font-weight:600;line-height:1.5}

/* ---------- ②-b 롤링 배너 (기존 사이트 첫 화면 배너 7장) ----------
   ⚠ 원본 그림이 가로 600px 뿐입니다. 그보다 크게 늘리면 흐려지므로
     .roll 의 max-width 를 720px 로 묶어 두었습니다. 더 큰 화면에서 키우시려면
     그림을 새로 만드셔야 합니다(글자가 그림 안에 박혀 있어 확대가 특히 티납니다).
   ⚠ 일곱 장을 6:5 로 맞춰 두었습니다(원본 472×474 · 568×500 은 아래를 잘라
     600×500 과 같은 비율로 만들었습니다). 새 그림도 6:5 로 넣어야 안 흔들립니다. */
/* .roll 은 지금 첫 화면 오른쪽 칸(.hx-roll) 안에서만 씁니다. 다른 자리에 다시
   쓰실 때를 위해 홀로 서도 되게 max-width 를 남겨 두었습니다. */
.roll{position:relative;max-width:720px;margin:0 auto}
.roll-view{overflow:hidden;border-radius:var(--r-l);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow-s)}
.roll-track{display:flex;margin:0;padding:0;list-style:none;
  transition:transform .55s var(--ease);will-change:transform}
/* 자바스크립트가 첫 장을 앉힐 때만 잠깐 껐다가 다음 프레임에 다시 켭니다.
   (칸 이동을 % 로 하므로 창 크기가 바뀌어도 다시 계산할 일은 없습니다.) */
.roll-track.no-anim{transition:none}
.roll-item{flex:0 0 100%;min-width:0}
/* ⚠ overflow 는 아래 transform:scale 과 한 벌입니다. 이것이 없으면 키운 그림이 제 칸을
     넘어 옆 장을 덮습니다(.roll-view 의 overflow 는 판 바깥만 자릅니다). 2026-09-07. */
.roll-item a{display:block;aspect-ratio:6/5;background:var(--surface);overflow:hidden}
/* ⚠ 2026-09-07. 사방을 3% 씩 잘라 냅니다(1.064배로 키워 .roll-view 의 overflow 로 자름).
     병원에서 받은 배너 원본 7장에는 남색 둥근 액자가 그림 안에 그려져 있습니다
     (28번 절의 flatten-banners.ps1 이 그라데이션 액자를 평면 --deep 로 칠한 그 액자입니다).
     아래 .roll-view 의 1px 선·둥근 모서리와 겹쳐 테두리가 두 겹으로 보였습니다.
     ⚠ 그림 파일을 자르지 않고 CSS 로 하는 이유 — ① flatten-banners.ps1 을 다시 돌리면
       액자가 그대로 돌아옵니다 ② 파일을 자르는 스크립트는 두 번 돌리면 두 번 잘립니다.
     ⚠ 화질은 문제가 없습니다. 그림이 1,379px 인데 화면에서는 561px 로 그려집니다.
     ⚠ 5·6·7번 배너는 왼쪽 칸 자체가 남색 디자인이라 그 면은 그대로 남습니다(액자가 아닙니다).
     ⚠ 배너를 새로 받으시면 이 3% 가 글자를 먹지 않는지 한 번 보세요. 되돌리려면 transform 한 줄. */
.roll-item img{width:100%;height:100%;display:block;object-fit:cover;
  transform:scale(1.064);
  -webkit-user-drag:none;user-select:none}
/* ⚠ 2026-09-26 병원 지적 — 1번 배너(roll-1.jpg)는 맨 아래 아이콘 줄(비수술적 통증 치료 · 관절 기능 회복 …)이
     그림 아래 끝에서 1.6% 안쪽까지 내려와 있어, 위의 '사방 3%' 에 원 아래쪽과 글자가 잘렸습니다.
     이 장만 아래 끝을 붙여 두고 키운 만큼을 위쪽에서만 잘라 냅니다(좌우는 그대로 3%씩).
     위쪽 6% 는 제목 위 어깨 배경이라 잘려도 글자가 없습니다. 아래 끝은 원래 남색 띠라 두 겹 테두리도 생기지 않습니다.
     2번 배너도 아래 아이콘 줄이 있지만 끝에서 4% 떨어져 있어 그대로 둡니다. 배너를 새로 받으면 아래 끝 여백을 한 번 보세요. */
.roll-item.is-keep-bottom img{transform-origin:50% 100%}

/* 화살표. 그림 위에 겹치지만, 좁은 화면에서는 아래 .roll-bar 옆으로 내려갑니다. */
.roll-arw{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-s);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.roll-arw:hover{background:var(--acc);border-color:transparent;color:var(--acc-ink)}
.roll-arw:active{transform:translateY(-50%) scale(.94)}

.roll-bar{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-4)}
.roll-dots{display:flex;align-items:center;gap:14px}
/* 점은 10px 그대로 둡니다. 손가락이 닿는 자리만 투명하게 넓힙니다.
   10×10 은 WCAG 2.5.8(최소 24×24)에 한참 못 미쳐 어르신들이 자주 빗나갑니다.
   ::after 로 24×44 판을 덮어 씌우는 방식이라 보이는 모양은 하나도 바뀌지 않습니다.
   gap 을 .5rem(8px) → 14px 로 벌린 것은, 좌우로 7px 씩 넓어진 이웃 점의 영역과
   겹치지 않게 하려는 것입니다(7+7=14). 2026-09-05 추가. */
.roll-dot{position:relative;width:10px;height:10px;padding:0;border:0;border-radius:50%;
  cursor:pointer;background:var(--line-2);transition:.25s var(--ease)}
.roll-dot::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:calc(100% + 14px);height:44px}
.roll-dot:hover{background:var(--ink-3)}
.roll-dot[aria-selected="true"]{width:30px;border-radius:6px;background:var(--acc)}
.roll-play{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  cursor:pointer;transition:.22s var(--ease)}
.roll-play:hover{color:var(--acc);border-color:var(--acc)}

@media (max-width:768px){
  .roll-arw{width:42px;height:42px}
  /* 화살표 자리(점 줄 양 끝)는 위 '.hx-roll .roll-arw' 규칙 그대로이고, 높이만 42px 에 맞춥니다. */
  .hx-roll .roll-bar{min-height:42px}
}
/* 아주 좁은 화면(400px 이하, 예: 320px) — 화살표 · 점 · 멈춤 단추가 한 줄에 들어가게 조금씩 좁힙니다.
   점 사이를 10px 로 줄이는 만큼 손가락 닿는 판(::after)도 +10px 로 줄여 이웃 점과 겹치지 않게 둡니다. */
@media (max-width:400px){
  .hx-roll .roll-arw{width:36px;height:36px}
  .hx-roll .roll-bar{min-height:36px;gap:var(--sp-2)}
  .hx-roll .roll-dots{gap:10px}
  .hx-roll .roll-dot::after{width:calc(100% + 10px)}
}

/* ---------- ③ 짧은 병원 소개 ---------- */
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,5vw,5.5rem);
  align-items:center}
.intro-copy .title{margin-bottom:var(--sp-6)}
.intro-copy p{font-size:var(--fs-lg);line-height:1.9;color:var(--ink-2)}
.intro-copy p + p{margin-top:var(--sp-4)}
.intro-points{display:grid;gap:var(--sp-4)}
.ipt{display:flex;gap:var(--sp-5);align-items:flex-start;padding:var(--sp-7) var(--sp-7);
  border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);
  transition:border-color .2s}
.ipt:hover{border-color:var(--acc)}
.ipt .no{flex:none;width:44px;height:44px;border-radius:var(--r);background:var(--acc);color:var(--acc-ink);
  display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm)}
.ipt h3{font-size:var(--fs-h5);letter-spacing:-.035em;margin-bottom:var(--sp-1)}
.ipt p{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.7}
/* 2026-08-31 — 소개글 오른쪽 칸을 인물컷에 내주고, 세 가지 약속은 아래로 내려
   가로 세 칸으로 폈습니다. */
.intro-below{margin-top:clamp(2.5rem,4vw,3.6rem)}
.intro-points.row{grid-template-columns:repeat(3,1fr);align-items:start}

/* 대표원장 인물컷 (예전 첫 화면 오른쪽에 있던 것).
   ⚠ 원본이 418×500 뿐이라 이보다 크게 표시하면 흐려집니다.
     재촬영 전까지 폭 420px 상한을 지키세요. */
.doc-card{position:relative;margin:0;justify-self:center;width:min(100%,420px)}
/* 배지가 왼쪽 밖으로 삐져나오므로 overflow:hidden 은 쓰지 않고,
   모서리는 이미지 자체에 둥글게 줍니다. */
/* ⚠ 2026-09-08 — 새 사진(840×1041) 의 실제 비율로 맞췄습니다. 예전 41/50 은
   418×500 사진에 맞춘 값이고, 그대로 두면 object-fit:cover 가 새 사진의
   위아래를 잘라냅니다. 사진을 다시 바꾸시면 이 비율도 함께 고치세요.
   비율이 사진과 같으면 잘리는 곳이 없어 object-position 은 무의미합니다. */
.doc-card-ph{position:relative;aspect-ratio:840/1041}
.doc-card-ph img{display:block;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;
  border-radius:var(--r-xl);background:var(--surface-2);
  border:1px solid var(--line);box-shadow:var(--shadow-l)}
/* 흰 가운 위에서도 배지가 떠 보이도록 아래쪽만 살짝 어둡게 깔아 주던 것입니다.
   ⚠ 2026-09-08 — 배지를 빼면서 함께 껐습니다(index.html 의 .doc-card-badge 주석 참고).
   배지가 없으면 사진 아래 3분의 1 이 이유 없이 어두워져 얼룩으로만 보입니다.
   배지를 되살리실 때 이 규칙도 같이 되살리세요.
.doc-card-ph::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;z-index:1;
  pointer-events:none;border-radius:0 0 var(--r-xl) var(--r-xl);
  background:linear-gradient(180deg,transparent,rgba(6,14,44,.45))} */
/* 이름표는 사진 위가 아니라 사진 아래에 둡니다.
   ⚠ 다시 사진 안으로 넣으면 왼쪽 아래 배지에 이름이 가려집니다. */
.doc-card figcaption{margin-top:var(--sp-5);font-size:var(--fs-sm);line-height:1.6;
  color:var(--ink-2)}
.doc-card figcaption b{display:block;font-size:var(--fs-h5);letter-spacing:-.035em;
  color:var(--ink);margin-bottom:.15rem}
/* 사진에 살짝 걸치는 신뢰 배지 */
.doc-card-badge{position:absolute;z-index:2;left:-1.6rem;bottom:1.8rem;
  padding:var(--sp-4) var(--sp-6);border-radius:var(--r-xl);max-width:15rem;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--shadow-l)}
.doc-card-badge b{display:block;font-size:var(--fs-h5);letter-spacing:-.03em;color:var(--acc)}
.doc-card-badge span{font-size:var(--fs-xs);color:var(--ink-2);font-weight:700;line-height:1.5}

/* ---------- ④ 사진으로 나뉜 섹션 입구 ---------- */
.gates{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
/* 사진 위에 흰 글씨를 얹는 카드라 아래쪽을 어둡게 까는 그라데이션(::after)은 장식이
   아니라 글씨를 읽히게 하는 장치입니다. C안에서도 남깁니다. 떠오르기·확대는 뺐습니다. */
.gate{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(300px,32vw,430px);padding:var(--sp-8);overflow:hidden;
  border-radius:var(--r-l);color:#fff;isolation:isolate;
  border:1px solid var(--line);background:#0B1638}
.gate img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.gate::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,16,45,.2) 0%,rgba(8,16,45,.6) 45%,rgba(6,12,36,.93) 100%)}
.gate .g-eng{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.78);margin-bottom:var(--sp-3)}
.gate h3{font-size:var(--fs-h4);letter-spacing:-.03em;line-height:1.25;margin-bottom:var(--sp-2)}
.gate p{font-size:var(--fs-sm);line-height:1.68;color:rgba(255,255,255,.85);max-width:24em}
.gate .go{margin-top:var(--sp-5);display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-sm);font-weight:600}
.gate .go::after{content:"→"}
.gate:hover .go{text-decoration:underline;text-underline-offset:.25em}
.gate.wide{grid-column:span 2}

/* ---------- ⑤ 상담 + 네이버 예약 ----------
   인터넷 예약 폼은 없앴습니다. 접수 창구는 ⓐ 전화 ⓑ 온라인 상담 게시판
   ⓒ 네이버 예약 셋뿐입니다. 네이버 카드는 일부러 좁고 길쭉하게 잡아
   두 창구가 눈으로 바로 구분되게 했습니다. */
.duo{display:grid;grid-template-columns:1.5fr .8fr;gap:var(--sp-6);align-items:stretch}
/* 창구가 셋일 때 (2026-09-08 홈). 온라인 상담은 목록과 단추가 들어가 넓게 두고,
   전화예약·네이버 예약은 같은 폭입니다. 1200px 기준 각각 537 / 285 / 285px. */
.duo.trio{grid-template-columns:1.5fr .8fr .8fr}
.duo-main{min-width:0;display:flex;flex-direction:column;padding:clamp(2rem,4vw,3rem);
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line)}
.duo-main h3{font-size:var(--fs-h3);letter-spacing:-.03em;margin-bottom:var(--sp-3)}
.duo-main > p{font-size:var(--fs-md);color:var(--ink-2);line-height:1.8;margin-bottom:var(--sp-7)}
.duo-list{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-7)}
.duo-list li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm);
  line-height:1.7;color:var(--ink-2)}
.duo-list li::before{content:"";flex:none;width:20px;height:20px;margin-top:var(--sp-1);border-radius:7px;
  background:var(--acc-soft);border:1.5px solid var(--acc)}
.duo-act{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:auto}

/* 전화예약 카드 — 2026-09-08 신설. 네이버 카드(.nv)와 같은 뼈대이고 색만 다릅니다.
   ⚠ 카드 전체가 tel: 링크입니다. 휴대폰에서 아무 데나 눌러도 통화 화면이 열립니다.
     그래서 안쪽에 다른 링크를 넣지 마세요 — 링크 안의 링크는 눌리지 않습니다. */
.tel-card{display:flex;flex-direction:column;padding:clamp(2rem,3.5vw,2.6rem);
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);
  color:var(--ink);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.tel-card:hover{border-color:var(--acc);box-shadow:var(--shadow-l)}
.tel-ic{width:48px;height:48px;border-radius:var(--r);background:var(--acc-soft);color:var(--acc);
  display:grid;place-items:center;margin-bottom:var(--sp-6)}
.tel-card h3{font-size:var(--fs-h4);letter-spacing:-.04em;line-height:1.25;margin-bottom:var(--sp-3)}
.tel-card > p{font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2)}
.tel-card ul{margin-top:var(--sp-6);display:grid;gap:var(--sp-2)}
.tel-card ul li{display:flex;justify-content:space-between;gap:var(--sp-3);
  font-size:var(--fs-sm);line-height:1.6}
.tel-card ul li span{color:var(--ink-2)}
.tel-card ul li b{font-weight:700;font-variant-numeric:tabular-nums}
/* 번호는 이 카드에서 가장 크게 둡니다 — 눌러야 할 곳이 어디인지가 먼저 보여야 합니다. */
.tel-card .tel-go{margin-top:auto;padding-top:var(--sp-7);display:inline-flex;align-items:center;
  gap:var(--sp-2);font-size:var(--fs-h5);font-weight:700;letter-spacing:-.03em;color:var(--acc);
  font-variant-numeric:tabular-nums}
.tel-card:hover .tel-go{text-decoration:underline;text-underline-offset:.25em}

/* 네이버 예약 — 네이버 브랜드 그린(#03C75A)을 그대로 씁니다.
   환자분들이 아는 색이라 "누르면 네이버로 간다"가 설명 없이 전달됩니다.
   ⚠ 글씨는 흰색이 아니라 짙은 초록(#052E17)입니다 — 2026-09-07. 초록 위 흰 글씨는 대비
     2.25:1 로 큰 글자 기준(3:1)에도 못 미쳤습니다. 짙은 초록은 6.6:1 입니다(README 29-2 절).
     .nv-logo 의 흰 칩 위 초록 N 은 로고라 대비 기준에서 빠집니다. */
.nv{position:relative;overflow:hidden;display:flex;flex-direction:column;
  padding:clamp(2rem,3.5vw,2.6rem);border-radius:var(--r-xl);
  background:#03C75A;color:#052E17}
.nv > *{position:relative}
.nv-logo{width:48px;height:48px;border-radius:var(--r);background:#fff;color:#03C75A;
  display:grid;place-items:center;font-weight:700;font-size:1.45rem;letter-spacing:-.06em;
  margin-bottom:var(--sp-6)}
/* qna.html 은 이 카드가 h1 바로 밑에 오는 유일한 자리라 h2 입니다
   (h1 다음에 h3 가 나오면 제목 단계를 건너뜁니다). index.html 은 h2 아래라 h3 그대로.
   2026-09-05 — 두 태그를 함께 잡습니다. */
.nv h3,.nv h2{font-size:var(--fs-h4);letter-spacing:-.04em;line-height:1.25;margin-bottom:var(--sp-3)}
.nv p{font-size:var(--fs-sm);line-height:1.7;color:inherit}
.nv ul{margin-top:var(--sp-6);display:grid;gap:var(--sp-2)}
.nv ul li{font-size:var(--fs-sm);font-weight:600;display:flex;gap:var(--sp-2);align-items:center;
  color:inherit}
.nv ul li::before{content:"✓";font-weight:700}
.nv .nv-go{margin-top:auto;padding-top:var(--sp-7);display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-md);font-weight:700}
.nv .nv-go::after{content:"→"}
.nv:hover .nv-go{text-decoration:underline;text-underline-offset:.25em}

/* 온라인 상담 화면 — 왼쪽 상담 게시판, 오른쪽에 길쭉한 네이버 예약 카드.
   카드는 스크롤을 따라오도록 붙여 두었습니다(sticky). */
.qna-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--sp-6);align-items:start}
.nv-side{position:sticky;top:calc(var(--nav-h) + var(--sp-5));min-height:26rem}
@media (max-width:1024px){
  .qna-grid{grid-template-columns:1fr}
  /* ⚠ static 이 아니라 relative 입니다 (2026-09-07).
     예전에 .nv 오른쪽 위에 있던 장식 원(.nv::after, 2026-09-07 C안에서 지움)이
     `.nv{position:relative}` 를 기준으로 잘리고 있었는데, 여기서 static 으로
     되돌리면 기준을 잃어 원이 화면 밖으로 넘쳤습니다. 원은 없어졌지만 같은 종류의
     사고를 막기 위해 relative + top:auto 를 그대로 둡니다. */
  .nv-side{position:relative;top:auto;min-height:0}
}

/* ---------- ⑥ 오른쪽에 늘 떠 있는 예약 버튼 (데스크톱) ---------- */
/* ⚠ 여기에 '네이버예약' 을 다시 넣지 마세요 (2026-09-05 에 뺐습니다).
   헤더의 네이버 예약 단추가 position:fixed 라 늘 화면에 있는데, 이 띠에도
   같은 단추가 있어서 데스크톱에서 같은 곳으로 가는 단추가 두 번 보였습니다.
   폭에 따라 이렇게 나뉘고, 어느 폭에서도 네이버 예약으로 가는 길은 하나입니다.
     901px~   이 띠(전화·상담·TOP) + 헤더 단추        ← 헤더 것 하나
     769~900  이 띠 숨김(아래 media) + 헤더 단추       ← 헤더 것 하나
     ~768     헤더 단추 숨김(.nav-act .btn) + .dock    ← 독 것 하나
   .fixcta a.naver 규칙은 남겨 두었습니다. 나중에 다시 쓰실 수도 있고,
   지워 봐야 줄어드는 무게가 없습니다. */
/* ⚠ 2026-09-08 — 아래 여백을 1.6rem → 6rem 으로 올렸습니다(약 70px 상승).
   "너무 밑에 있다"는 지적입니다. 화면 아래 모서리에 붙어 있어 1440×900 에서
   묶음 중심이 화면 중앙보다 304px 아래였습니다.
   ▸ 세로 가운데 정렬(top:50% + translateY)로 가지 않은 이유 — 접을 때 쓰는
     .gone 의 transform:translateX(14px) 와 충돌해 규칙 두 개를 함께 고쳐야 합니다.
     여백만 바꾸면 접힘 동작과 겹침 판정이 그대로 따라옵니다.
   ▸ main.js 의 겹침 판정은 이 값을 computed bottom 으로 읽어 쓰므로
     여기만 고치면 됩니다. 숫자를 따로 맞출 곳이 없습니다. */
.fixcta{position:fixed;right:1.1rem;bottom:6rem;z-index:95;display:grid;gap:var(--sp-2);
  width:80px;text-align:center;transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s}
/* 푸터가 화면에 들어오면 접습니다 — 안 접으면 푸터 오른쪽 끝의 SNS 아이콘
   두 개를 덮어서 눌리지 않습니다. 자세한 사정은 main.js 의 onScroll 주석에. */
.fixcta.gone{opacity:0;visibility:hidden;transform:translateX(14px);pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility 0s linear .25s}
.fixcta a{display:grid;gap:var(--sp-1);place-items:center;padding:var(--sp-4) var(--sp-2);border-radius:var(--r-l);
  font-size:var(--fs-2xs);font-weight:700;line-height:1.3;
  background:var(--surface);border:1px solid var(--line);color:var(--ink-2);
  box-shadow:var(--shadow-m);transition:color .2s,border-color .2s,background .2s}
.fixcta a:hover{color:var(--acc);border-color:var(--acc)}
.fixcta a.tel{background:var(--acc);color:var(--acc-ink);border-color:transparent}
.fixcta a.tel:hover{background:var(--acc-hover);color:var(--acc-ink)}
.fixcta a.naver{background:#03C75A;color:#fff;border-color:transparent}
.fixcta a.naver:hover{color:#fff}
@media (max-width:768px){ .fixcta{display:none} }

/* ---------- 홈 반응형 ---------- */
/* 세로가 짧은 노트북(1366×768 등)에서는 첫 화면이 한 번에 들어오도록 줄입니다.
   글자 크기를 가로폭(vw)으로만 잡으면 세로 720px 화면에서 CTA 가 접힙니다. */
@media (min-width:1025px) and (max-height:840px){
  h1.hx-title{font-size:clamp(2.2rem,4vw,3.2rem);margin-bottom:var(--sp-6)}
  .hx-lede{margin-bottom:var(--sp-7)}
  .chips{margin-top:var(--sp-6);padding-top:var(--sp-6)}
  .hx{padding-bottom:clamp(5rem,7vw,6.5rem)}
  .hx-media{width:min(100%,360px)}
  /* 세로가 짧아 배너 높이(폭의 5/6)가 화면을 밀어냅니다. 그래도 왼쪽 글이
     짧아진 만큼은 키웠습니다. 더 올리면 첫 화면이 한 번에 안 들어옵니다. */
  .hx-roll{--roll-max:600px}
}
@media (max-width:1300px){
  .qlinks{grid-template-columns:repeat(2,1fr)}
  .ql:nth-child(2){border-right:0}
  .ql:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:1024px){
  .hx{padding-bottom:clamp(7rem,12vw,9rem)}
  .hx-inner{grid-template-columns:1fr;gap:var(--sp-9)}
  .hx-media{order:-1;width:min(100%,340px);justify-self:start}
  /* 배너는 좁은 화면에서 글보다 위로 올리고 폭을 다 씁니다(원본 모바일과 같은 순서). */
  /* 여기서는 배너가 글보다 위(order:-1)라 너무 키우면 제목이 첫 화면 밖으로
     밀려납니다. 640px 이 원본(600px)에 거의 맞으면서 제목도 살아 있는 선입니다. */
  .hx-roll{--roll-max:640px;justify-self:center}
  .intro-grid{grid-template-columns:1fr;gap:var(--sp-8)}
  .intro-points.row{grid-template-columns:1fr 1fr}
  .doc-card{justify-self:start}
  .doc-card-badge{left:auto;right:-1rem;bottom:1.6rem;max-width:13rem}
  .gates{grid-template-columns:1fr 1fr}
  .duo{grid-template-columns:1fr}
  /* 셋일 때는 1024px 이하에서 온라인 상담이 한 줄을 다 쓰고, 전화·네이버가
     아래에 나란히 섭니다. 셋 다 한 줄씩 쌓으면 세로로 너무 길어집니다. */
  .duo.trio{grid-template-columns:1fr 1fr}
  .duo.trio > .duo-main{grid-column:1 / -1}
}
@media (max-width:768px){
  .qwrap{margin-top:calc(var(--sp-9) * -1)}
  .qlinks{grid-template-columns:1fr}
  .ql{border-right:0;border-bottom:1px solid var(--line);padding:var(--sp-6) var(--sp-6)}
  .ql:last-child{border-bottom:0}
  .gates{grid-template-columns:1fr}
  .gate.wide{grid-column:span 1}
  .gate{min-height:280px;padding:var(--sp-7)}
  .hx-media{width:min(100%,300px)}
  .hx-roll{--roll-max:100%}
  .intro-points.row{grid-template-columns:1fr}
  .doc-card{width:min(100%,300px)}
  .duo-act .btn{width:100%}
  /* 768px 이하에서는 전화·네이버도 한 줄씩. 나란히 두면 카드가 너무 좁습니다. */
  .duo.trio{grid-template-columns:1fr}
}

/* ---------- 질환 페이지 Q&A (기존 PC 사이트에서 그림으로만 있던 것) ----------
   2026-09-03. 원본 PC `/sub_0*` 질환 14쪽의 Q&A 117개를 글로 옮기면서 넣었습니다.
   틀은 faq.html 의 .faq / .qa 를 그대로 씁니다. 여기서는 답변 안에 들어가는
   번호 목록·인용·안내줄만 더합니다. */
.orig-qa{background:var(--surface-2)}
.orig-qa .head{margin-bottom:var(--sp-7)}
/* ⚠ 128줄의 `ul,ol{list-style:none}` 때문에 번호가 안 나오고 있었습니다 (2026-09-04 고침).
   원문의 번호 매긴 목록을 옮긴 자리라 번호가 보여야 합니다 — 턱관절장애 「유발 원인」의
   <li value="7"> (원문이 6번을 건너뜁니다) 도 이 규칙이 있어야 뜻이 통합니다. */
.qa-ol{margin:var(--sp-3) 0 0;padding-left:var(--sp-5);display:grid;gap:var(--sp-2);list-style:decimal}
.qa-ol li{padding-left:.2rem;display:list-item}
.qa-quote{margin:0 0 var(--sp-4);padding:var(--sp-4) var(--sp-5);border-left:3px solid var(--acc);
  background:var(--acc-soft);border-radius:0 var(--r-s) var(--r-s) 0}
.qa-quote p{margin:0}
.qa-quote cite{display:block;margin-top:var(--sp-2);font-style:normal;font-size:var(--fs-sm);
  font-weight:700;color:var(--ink-3);text-align:right}
/* 어두운 화면에서는 --ink-3 가 --acc-soft 위에서 4.47:1 로 아슬아슬하게 못 미쳤습니다(2026-09-07, README 29-2 절). 한 단계 진하게. */
html[data-theme="dark"] .qa-quote cite{color:var(--ink-2)}
.qa-more{margin-top:var(--sp-4);font-size:var(--fs-sm);font-weight:700}
.qa-more a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
/* 원문 답변이 언론사 기사 전문이라 옮기지 못한 자리에 붙는 안내줄입니다.
   저작권 확인 뒤 기사를 넣으시면 이 <p> 만 지우면 됩니다. */
.qa-hold{margin:0 0 var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-s);
  background:var(--surface-2);border:1px dashed var(--line);
  font-size:var(--fs-sm);color:var(--ink-3)}
/* 원문 답변이 「닥터Q&A」·「도움말」 형식의 기고문이었던 것.
   글 앞의 안내줄과 끝의 자문 표기입니다. */
.qa-src-note{margin:0 0 var(--sp-4);font-size:var(--fs-sm);color:var(--ink-3)}
.qa-by{margin-top:var(--sp-4);font-size:var(--fs-sm);font-weight:700;color:var(--ink-3);text-align:right}
.qa-ul{margin:var(--sp-3) 0 0;padding-left:var(--sp-4);display:grid;gap:var(--sp-2);list-style:none}
.qa-ul li{position:relative;padding-left:var(--sp-4)}
.qa-ul li::before{content:"□";position:absolute;left:0;color:var(--acc)}
/* 원문 답변이 기사 전문이었던 4건의 기사 제목입니다. (2026-09-03) */
.qa-art-title{margin:0 0 var(--sp-3);font-size:var(--fs-md);font-weight:700;
  color:var(--acc);letter-spacing:-.02em;line-height:1.5}

/* ══════════ 청정한약재 인증 상세 · 공진단 효능 (2026-09-04, README 15-15 절) ══════════
   기존 사이트 PC판 /sub_06/sub_01a~d · /sub_06/sub_03b 의 그림 속 글을 옮기면서
   답변 안에 소제목·단계도해·두 칸 비교표가 필요해져 규칙 넷을 더했습니다.
   위의 .qa-ol · .qa-ul · .qa-src-note 와 같은 자리에서 함께 쓰입니다. */

/* 답변 안의 소제목 — 원문의 「도입효과」·「심볼마크의 의미」 같은 회색 라벨입니다. */
.qa-h{margin:var(--sp-6) 0 var(--sp-2);font-size:var(--fs-sm);font-weight:700;color:var(--ink);
  letter-spacing:-.01em;display:inline-block;padding:var(--sp-1) var(--sp-3);border-radius:var(--r-s);
  background:var(--surface-2);border:1px solid var(--line)}
.qa-h:first-child{margin-top:0}

/* 단계 도해 — GAP 3단계, 이력추적 5단계처럼 옆으로 이어지는 칸입니다. */
.qa-steps{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-2);
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.qa-steps li{padding:var(--sp-3) var(--sp-4);border-radius:var(--r-s);background:var(--acc-soft);
  border:1px solid var(--line);font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.qa-steps b{display:block;color:var(--ink);font-weight:700;margin-bottom:.2rem}

/* 두 칸 비교 — 원문의 「일반농산물 ↔ 특화농산물」 표입니다. */
.qa-cmp{margin:var(--sp-4) 0 0;display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.qa-cmp > div{padding:var(--sp-4) var(--sp-4);border-radius:var(--r-s);border:1px solid var(--line)}
.qa-cmp > div:first-child{background:var(--surface-2)}
.qa-cmp > div:last-child{background:var(--acc-soft)}
.qa-cmp h3{margin:0 0 var(--sp-2);font-size:var(--fs-sm);font-weight:700;color:var(--ink);
  text-align:center;padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.qa-cmp ul{margin:0;padding-left:var(--sp-4);display:grid;gap:var(--sp-1);list-style:none;
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.qa-cmp li{position:relative;padding-left:var(--sp-3)}
.qa-cmp li::before{content:"○";position:absolute;left:0;font-size:.8em;top:.15em}

/* 원본 자체의 잘못(엉뚱한 문단이 붙어 있는 곳)을 표시하는 줄입니다.
   원문 그대로 두되 어디가 원본의 실수인지 알 수 있게 했습니다. */
.qa-origerr{margin:var(--sp-2) 0 0;padding:var(--sp-2) var(--sp-3);border-left:3px solid var(--line);
  font-size:var(--fs-xs);color:var(--ink-3);line-height:1.7}

/* ---------- 랜딩페이지 2판 .lp2 (2026-09-11 · 허리디스크 시범) ----------
   검토 의견 7가지 가운데 여백 · 글자 · 첫 화면 · 치료 목표 · 응급 신호 · 출처 줄을 모았습니다.
   <body class="lp2"> 인 페이지에만 걸립니다. 지금은 lp-herniated-disc.html 한 곳입니다.
   ⚠ 다른 랜딩페이지로 넓히실 때는 body 에 lp2 를 붙이고, 마크업(첫 화면 두 칸 · 치료 세 목표 ·
     응급 신호 상자 · 출처 줄)도 그 페이지에 함께 옮겨 주세요. 클래스만 붙이면 여백과 글자만 바뀝니다.

   ▸ 여백 — 섹션 위아래 72→144px 를 58→115px 로(약 −20%). 머리글 아래 여백과 CTA 띠 안쪽도
     같은 비율로 줄였습니다. 변수만 덮어쓰므로 섹션마다 따로 고칠 곳이 없습니다.
   ▸ 글자 — 이 페이지 본문은 이미 18~21px 이라 그대로 두고, 16px 이던 진단 단계와 증상 체크
     문항만 18px 로 올렸습니다. 카드 설명(16px)은 검토 의견의 '15px 전후' 안에 있습니다. */
.lp2{--rhythm-section:clamp(3.6rem,6.8vw,7.2rem);--rhythm-lg:clamp(2.2rem,4.2vw,3.8rem)}
.lp2 .head{margin-bottom:clamp(2.1rem,3.6vw,3.2rem)}
.lp2 .step span,.lp2 .checklist li{font-size:var(--fs-md)}

/* 첫 화면 — 왼쪽 글, 오른쪽 대표 이미지.
   ⚠ 마크업 순서는 제목 → 부제 → 첫 문단 → 버튼 → 그림 → 칩입니다. 넓은 화면에서는
     grid-template-areas 로 그림만 오른쪽 칸에 세우고, 1024px 이하에서는 grid 를 풀어
     마크업 순서대로 쌓습니다. 그래서 좁은 화면에서는 예약 버튼 밑에 그림이 옵니다.
     (그림을 부제 밑에 두었더니 375×812 에서 예약 버튼이 첫 화면 밖으로 밀려났습니다.) */
.lp2 .dx-hero{padding:calc(var(--nav-h) + clamp(2.4rem,4.4vw,4.4rem)) 0 clamp(2.8rem,5vw,4rem)}
.lp-hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  column-gap:clamp(2rem,4.4vw,4rem);align-items:start;
  grid-template-areas:"eng fig" "title fig" "alt fig" "lead fig" "alert fig" "cta fig" "chips fig";
  grid-template-rows:auto auto auto auto auto auto 1fr}
/* 2026-09-20 — '먼저 확인하세요' 한 줄이 설명 문단보다 위에 있는 페이지(척추압박골절)용 변형입니다.
   1024px 이하에서는 격자가 풀려 글 차례가 그대로라, 두 칸일 때도 같은 차례가 되도록 자리만 바꿉니다. */
.lp-hero-grid.lp-alert-first{
  grid-template-areas:"eng fig" "title fig" "alt fig" "alert fig" "lead fig" "cta fig" "chips fig"}
/* 2026-09-13 — 허리통증 랜딩페이지(lp-low-back-pain.html)도 두 칸을 씁니다. 제목 위 영문 표시(.dx-eng) 줄을 맨 위에 더했습니다.
   허리디스크 랜딩페이지에는 .dx-eng 가 없어 그 줄 높이가 0 이라 모양이 그대로입니다. */
.lp-hero-grid > .dx-eng{grid-area:eng}
/* 2026-09-13 — 두 칸이면 글 칸이 좁아 제목이 세 줄로 넘어가는 페이지(퇴행성디스크)만 lp-title-long 을 붙여,
   두 칸일 때 허리디스크 페이지(.lp2)와 같은 최대 48px 로 줄입니다. 한 칸으로 쌓이는 1024px 이하에서는 원래 크기입니다. */
@media (min-width:1025px){ .lp-hero-grid > .dx-title.lp-title-long{font-size:clamp(2.1rem,3.8vw,3rem)} }
/* 2026-09-20 — 첫 문단 밑에 출처 줄(.dx-src)이 있는 페이지용 변형입니다(허리통증 상세페이지).
   기본 차례에는 출처 줄 자리가 없어 두 칸일 때 엉뚱한 곳에 놓입니다. */
.lp-hero-grid.lp-has-src{
  grid-template-areas:"eng fig" "title fig" "alt fig" "lead fig" "src fig" "alert fig" "cta fig" "chips fig";
  grid-template-rows:auto auto auto auto auto auto auto 1fr}
.lp-hero-grid > .dx-src{grid-area:src}
.lp-hero-grid > .lp-hero-alert{grid-area:alert}
.lp-hero-grid > .dx-title{grid-area:title}
.lp-hero-grid > .dx-alt{grid-area:alt}
.lp-hero-grid > .dx-lead{grid-area:lead}
.lp-hero-grid > .dx-cta{grid-area:cta}
.lp-hero-grid > .chips{grid-area:chips}
/* 두 칸이 되면서 글 칸이 좁아져, 제목이 두 줄에 들어가도록 최대 크기를 54 → 48px 로 낮췄습니다. */
.lp2 .dx-title{font-size:clamp(2.1rem,3.8vw,3rem)}
/* 제목 맨 윗줄의 질환명. h1 안에 두어 화면낭독기와 검색엔진이 '허리디스크' 부터 읽습니다. */
.lp-dz{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
  margin-bottom:var(--sp-4);line-height:1.3}
.lp-dz b{display:inline-flex;align-items:center;padding:.3rem .85rem;border-radius:999px;
  background:var(--acc-soft);color:var(--acc);font-size:var(--fs-sm);font-weight:700;letter-spacing:-.02em}
.lp-dz span{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.lp-hero-fig{grid-area:fig;align-self:center;margin:0;border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-l)}
.lp-hero-fig img{width:100%;height:auto;display:block}
/* 배경이 없는(누끼) 사진 — 병원 요청(2026-09-20 "배경 주변에 테두리 하지 말 것")으로
   판 · 테두리 · 그림자를 모두 없애고 첫 화면 바탕에 그대로 얹습니다. */
.lp-hero-fig.is-plain{background:none;border:0;box-shadow:none;border-radius:0}
/* ⚠ 흰 바탕이 남아 있는 사진 임시 처리 (2026-09-20, disease-low-back-pain.html).
   병원이 주신 파일 중 남성 사진은 배경을 지운 파일이 아니라 흰 바탕이 그대로 있는 사진입니다.
   밝은 화면에서는 곱하기(multiply)로 흰 부분이 첫 화면 바탕에 묻히게 했습니다.
   어두운 화면에서는 이 방법을 쓰면 사진이 새까매져서, 흰 판 위에 얹어 보여 줍니다.
   ▶ 배경을 지운(투명한) 파일을 주시면 이 규칙과 is-white-bg 를 지우면 됩니다. */
.lp-hero-fig.is-white-bg{background:var(--surface-2)}
.lp-hero-fig.is-white-bg img{mix-blend-mode:multiply}
html[data-theme="dark"] .lp-hero-fig.is-white-bg img{mix-blend-mode:normal}
html[data-theme="dark"] .lp-hero-fig.is-white-bg{background:#fff;border-radius:var(--r-xl);overflow:hidden}


/* 첫 화면 오른쪽 카드에 유튜브 영상(봉침요법, 2026-10-23) — 16:9 칸에 표지 → 플레이어 */
.lp-hero-video{position:relative;aspect-ratio:16/9;background:#000}
.lp-hero-video .yt-cover img{object-fit:cover}
.lp-hero-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* 영상 칸만 둥근 카드로 두고, 아래 제목 · 설명은 흰 판 없이 바탕 위에(2026-10-23 병원 요청) */
.lp-hero-fig.is-video{background:none;border:0;box-shadow:none;border-radius:0;overflow:visible}
.lp-hero-fig.is-video .lp-hero-video{overflow:hidden;border-radius:var(--r-xl);box-shadow:var(--shadow-l)}
.lp-hero-fig.is-video figcaption{padding:var(--sp-4) var(--sp-1) 0;border-top:0;font-size:var(--fs-sm);color:var(--ink-3)}
.lp-hero-fig.is-video figcaption b{display:block;margin:0 0 .3rem;font-size:var(--fs-md);font-weight:800;letter-spacing:-.03em}
@media (max-width:640px){ .lp-hero-fig.is-video .lp-hero-video{border-radius:var(--r-l)} }
.lp-hero-fig figcaption{padding:var(--sp-3) var(--sp-5);font-size:var(--fs-xs);line-height:1.6;
  color:var(--ink-2);border-top:1px solid var(--line)}
.lp-hero-fig figcaption b{color:var(--ink);font-weight:700;margin-right:.45em}
.lp2 .chips{margin-top:var(--sp-6);padding-top:var(--sp-6)}
.lp2 .dx-facts{margin-top:var(--sp-8)}

/* 응급 신호 — 증상 체크 목록 바로 밑.
   2026-09-11 에 붉은 안내 상자(.alert)를 모두 뺀 뒤라 붉은 판 · 붉은 글씨는 쓰지 않고,
   왼쪽 굵은 선과 느낌표 하나로만 경고임을 알립니다. #C62A2F 는 흰 글씨 5.6:1 입니다. */
.lp-redflag{margin-top:var(--sp-6);padding:var(--sp-6) var(--sp-7);border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line-2);border-left:5px solid #C62A2F}
html[data-theme="dark"] .lp-redflag{border-left-color:#FF6B70}
.lp-redflag-h{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4);
  font-size:var(--fs-lg);font-weight:700;letter-spacing:-.03em;line-height:1.4}
.lp-redflag-i{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;
  background:#C62A2F;color:#fff;font-size:var(--fs-sm);font-weight:800;line-height:1}
.lp-redflag-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.lp-redflag-list li{padding:var(--sp-4) var(--sp-5);border-radius:var(--r);background:var(--surface-2);
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2)}
.lp-redflag-list b{display:block;margin-bottom:var(--sp-1);font-size:var(--fs-md);color:var(--ink);letter-spacing:-.02em}
.lp-redflag-f{margin-top:var(--sp-4);font-size:var(--fs-md);line-height:1.7;color:var(--ink-2)}
.lp-redflag-f strong{color:var(--ink)}

/* 치료 — 치료법 여섯 장을 세 가지 목표로 묶었습니다. 목표가 앞에 서고, 치료법은 그 아래 설명입니다. */
.lp-goals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);align-items:start}
.lp-goal{display:flex;flex-direction:column;min-width:0;padding:var(--sp-7);border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line)}
.lp-goal-n{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;color:var(--acc);margin-bottom:var(--sp-2)}
.lp-goal > h3{font-size:var(--fs-h5);letter-spacing:-.035em;line-height:1.35;margin-bottom:var(--sp-3)}
.lp-goal-sum{font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2);
  padding-bottom:var(--sp-5);margin-bottom:var(--sp-5);border-bottom:1px solid var(--line)}
.lp-tx{display:grid;gap:var(--sp-6)}
.lp-tx h4{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-md);line-height:1.45;letter-spacing:-.03em;margin-bottom:var(--sp-2)}
.lp-tx .tag{flex:none;font-size:var(--fs-2xs);font-weight:700;padding:.15rem var(--sp-3);border-radius:999px;
  background:var(--acc-soft);color:var(--acc);letter-spacing:0}
.lp-tx p{font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2)}
.lp-tx .res-go{margin-top:var(--sp-2)}

/* 출처 줄 — 수치 · 특허 · 수상 옆에 작은 글씨로 붙입니다(검토 의견 7). */
.lp-src{display:block;margin-top:.2rem;font-size:var(--fs-xs);font-weight:600;line-height:1.55;color:var(--ink-3)}
.lp-src a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
.lp-src a:hover{color:var(--acc);text-decoration-color:var(--acc)}
/* 근거 카드의 게재 정보 — 누르면 DOI 원문으로 갑니다. 기본 a 에는 밑줄이 없어 링크로 안 보이므로 밑줄을 줍니다. */
.lp2 .res-ref a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-2);
  text-underline-offset:3px;overflow-wrap:anywhere}
.lp2 .res-ref a:hover{color:var(--acc);text-decoration-color:var(--acc)}
.lp2 .paper .lp-src{margin-top:var(--sp-3)}

@media (max-width:1024px){
  .lp-hero-grid{display:block}
  .lp-hero-fig{margin-top:var(--sp-6);max-width:560px}
  .lp-goals{grid-template-columns:1fr}
}
@media (max-width:768px){
  .lp2 .dx-hero{padding:calc(var(--nav-h) + var(--sp-5)) 0 var(--sp-8)}
  .lp2 .crumb{margin-bottom:var(--sp-4)}
  .lp2 .dx-title{font-size:clamp(1.65rem,7.2vw,2.2rem)}
  .lp2 .dx-lead{font-size:var(--fs-md);margin-top:var(--sp-5)}
  .lp-hero-fig{margin-top:var(--sp-5);border-radius:var(--r-l)}
  .lp2 .dx-cta .btn{flex:1 1 100%}
  /* 세 칸을 카드 셋으로 쌓으면 첫 화면이 길어져서, 한 판 안의 세 줄로 접습니다. */
  .lp2 .dx-facts{gap:0;margin-top:var(--sp-6);border:1px solid var(--line);border-radius:var(--r);
    background:var(--surface);overflow:hidden}
  .lp2 .dx-facts li{display:grid;grid-template-columns:4.8rem minmax(0,1fr);column-gap:var(--sp-3);
    padding:var(--sp-4) var(--sp-5);border:0;border-radius:0;background:none}
  .lp2 .dx-facts li + li{border-top:1px solid var(--line)}
  .lp2 .dx-facts .k{grid-row:1 / span 2;margin:.3rem 0 0}
  .lp2 .dx-facts b{font-size:var(--fs-md)}
  .lp2 .dx-facts .v{grid-column:2}
  /* ↓ 2026-09-11 측정 — 응급 신호 · 치료 목표 · 출처를 넣고 나니 모바일(375px) 페이지가
       18,223 → 19,572px 로 오히려 길어졌습니다. 새로 넣은 덩어리를 좁은 화면에서만 촘촘하게 하고,
       섹션 첫 문단(.head p)을 21 → 18px 로 맞췄습니다. 데스크톱 글자 크기는 그대로입니다. */
  .lp2 .head p{font-size:var(--fs-md)}
  .lp2 .chips{margin-top:var(--sp-5);padding-top:var(--sp-5)}
  .lp2 .chips li{padding:.3rem .75rem;font-size:var(--fs-2xs)}
  .lp-redflag{padding:var(--sp-5)}
  .lp-redflag-h{align-items:flex-start;font-size:var(--fs-md)}
  .lp-redflag-list{grid-template-columns:1fr;gap:var(--sp-4)}
  .lp-redflag-list li{padding:0 0 0 var(--sp-4);border-radius:0;background:none;border-left:3px solid var(--line-2)}
  .lp-redflag-f{font-size:var(--fs-sm)}
  .lp-goal{padding:var(--sp-5) var(--sp-4)}
  .lp-goal-sum{padding-bottom:var(--sp-4);margin-bottom:var(--sp-4)}
  .lp-tx{gap:var(--sp-5)}
  .lp-tx p{line-height:1.65}
  .lp2 .case,.lp2 .paper,.lp2 .patent,.lp2 .panel{padding:var(--sp-6)}
  .lp2 .paper-list li{font-size:var(--fs-sm)}
}

/* ---------- 랜딩페이지 '공개 전 수정 지시서' 반영 부품 (2026-09-11) ----------
   병원이 받은 수정 지시서 20건(README '2026-09-11 추가 — 수정 지시서' 절)을 반영하면서
   여러 랜딩페이지가 함께 쓰는 부품입니다. lp2 가 아닌 페이지에서도 그대로 씁니다.
   ▸ .lp-redflag     응급 · 위험 신호(위 lp2 절에 정의). .is-top 은 체크 목록보다 앞에 둘 때.
   ▸ .lp-hero-alert  첫 화면 버튼 바로 위 한 줄 경고. 예약보다 먼저 봐야 할 신호가 있는 질환만 씁니다.
   ▸ .lp-ddx         감별표. 좁은 화면에서는 표 안에서 옆으로 밉니다(.orig-table 과 같은 방식).
   ▸ .lp-note        '치료보다 검사 · 협진이 먼저인 경우' 같은 안내.
   ▸ .lp-paths       허브 페이지의 경로 카드(스포츠손상).
   ▸ .lp-triage      응급 · 당일 · 일반 예약으로 나눈 행동 기준. */
.lp-redflag.is-top{margin:0 0 var(--sp-6)}
.lp-hero-alert{display:flex;gap:var(--sp-3);align-items:flex-start;max-width:40em;margin-top:var(--sp-6);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line-2);border-left:4px solid #C62A2F;
  font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2)}
html[data-theme="dark"] .lp-hero-alert{border-left-color:#FF6B70}
.lp-hero-alert .lp-redflag-i{width:1.4rem;height:1.4rem;margin-top:.15rem;font-size:var(--fs-2xs)}
.lp-hero-alert b{color:var(--ink)}
.lp-hero-alert a{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lp-ddx{margin-top:var(--sp-6);overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.lp-ddx table{width:100%;min-width:36rem;border-collapse:collapse;font-size:var(--fs-sm);line-height:1.65}
.lp-ddx caption{caption-side:bottom;padding:var(--sp-3) var(--sp-4);text-align:left;
  font-size:var(--fs-xs);color:var(--ink-3);border-top:1px solid var(--line)}
.lp-ddx th,.lp-ddx td{padding:var(--sp-3) var(--sp-4);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.lp-ddx thead th{background:var(--surface-2);font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.lp-ddx tbody th{font-weight:700;color:var(--ink)}
.lp-ddx td{color:var(--ink-2)}
.lp-ddx tbody tr:last-child th,.lp-ddx tbody tr:last-child td{border-bottom:0}
/* 이 페이지의 질환 줄은 옅은 파랑으로 표시해 다른 줄과 견주기 쉽게 합니다. */
.lp-ddx tr.is-self th,.lp-ddx tr.is-self td{background:var(--acc-soft)}
.lp-note{margin-top:var(--sp-6);padding:var(--sp-5) var(--sp-6);border-radius:var(--r);background:var(--surface-2);
  border-left:4px solid var(--acc);font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2)}
.lp-note-h{margin-bottom:var(--sp-2);font-size:var(--fs-md);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.lp-note strong{color:var(--ink)}
.lp-note ul{display:grid;gap:var(--sp-1)}
.lp-note li{position:relative;padding-left:var(--sp-4)}
.lp-note li::before{content:"";position:absolute;left:.2rem;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.lp-note > p + p,.lp-note > ul + p,.lp-note > p + ul{margin-top:var(--sp-2)}
.lp-paths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4)}
.lp-path{display:flex;flex-direction:column;min-width:0;padding:var(--sp-6);border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line)}
.lp-path .n{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;color:var(--acc);margin-bottom:var(--sp-2)}
.lp-path h3{font-size:var(--fs-lg);letter-spacing:-.03em;line-height:1.35;margin-bottom:var(--sp-2)}
.lp-path > p{font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2)}
.lp-path ul{margin-top:auto;padding-top:var(--sp-4);display:grid}
.lp-path li a,.lp-path li span{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-2);
  min-height:44px;padding:var(--sp-2) 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.lp-path li a{font-weight:600;color:var(--ink)}
.lp-path li a::after{content:"→";color:var(--acc);flex:none}
.lp-path li a:hover{color:var(--acc)}
.lp-path li span{color:var(--ink-3)}
.lp-triage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4)}
.lp-triage > li{padding:var(--sp-5) var(--sp-6);border-radius:var(--r);background:var(--surface);
  border:1px solid var(--line);border-top:4px solid var(--line-2);font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2)}
.lp-triage > li.is-er{border-top-color:#C62A2F}
.lp-triage > li.is-today{border-top-color:#E8891A}
.lp-triage > li.is-routine{border-top-color:var(--acc)}
html[data-theme="dark"] .lp-triage > li.is-er{border-top-color:#FF6B70}
.lp-triage h3{margin-bottom:var(--sp-2);font-size:var(--fs-md);letter-spacing:-.02em;color:var(--ink)}
.lp-triage ul{display:grid;gap:var(--sp-1)}
.lp-triage ul li{position:relative;padding-left:var(--sp-4)}
.lp-triage ul li::before{content:"";position:absolute;left:.2rem;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
@media (max-width:1024px){
  .lp-paths{grid-template-columns:1fr 1fr}
  .lp-triage{grid-template-columns:1fr}
}
@media (max-width:768px){
  .lp-note{padding:var(--sp-4) var(--sp-5)}
  .lp-hero-alert{padding:var(--sp-3) var(--sp-4)}
}
@media (max-width:560px){ .lp-paths{grid-template-columns:1fr} }

/* =========================================================
   랜딩 ↔ 상세 연결 (2026-09-12)
   질환마다 랜딩페이지(lp-*)를 기본 페이지로 두고, 상세페이지(disease-*)를
   '더 자세히'로 잇는 부품입니다.
   ▸ .page-lvl  크럼 바로 밑 '핵심 안내 | 상세 안내' 전환. 지금 보고 있는 쪽에
                aria-current="page". 랜딩페이지에는 .is-lp, 상세페이지에는 .is-dz 가 붙습니다.
   ▸ .lp-more   랜딩페이지 끝(마지막 예약 띠 다음, 다른 질환 목록 앞)의 상세 안내 카드.
                카드 전체가 링크라 안의 '상세 안내 보기' 는 버튼 모양의 span 입니다.

   ▶ 2026-09-12 '상세 안내가 있는 줄 모르겠다'는 지적 → ④안(지금 모양 + 반짝)에 노란 칠로 결정.
     · 판 바탕이 첫 화면 바탕(--surface-2)과 같은 색이라 보이지 않았습니다. 한 단계 진한 --line 으로 바꿨습니다.
     · 랜딩(.is-lp)의 '상세 안내' — 노란 칠 · 검은 글씨 · → · 페이지를 열 때 테두리가 세 번 퍼집니다.
     · 상세(.is-dz)의 '핵심 안내' — 흰 칠 · 파란 글씨 · ←. 긴 글을 읽는 페이지라 반짝이지 않습니다.
     ⚠ 노랑은 사이트에서 이 칩 하나에만 씁니다(포인트 색은 파랑 하나라는 C안 원칙의 예외).
       어두운 화면에서도 노랑 · 검은 글씨 그대로입니다.
     ⚠ 반짝임은 1.5초 × 3번 = 4.5초에 끝납니다. 5초를 넘기면 WCAG 2.2.2 에 따라 멈춤 버튼이
       있어야 하므로 횟수 · 길이를 늘리지 마세요. 기기에서 '동작 줄이기'를 켜면 반짝이지 않습니다.
   ========================================================= */
.crumb:has(+ .page-lvl){margin-bottom:var(--sp-4)}
.page-lvl{display:inline-flex;gap:var(--sp-1);padding:var(--sp-1);margin-bottom:var(--sp-6);
  border-radius:999px;background:var(--line);border:1px solid var(--line)}
.page-lvl a{position:relative;display:inline-flex;align-items:center;gap:var(--sp-2);min-height:44px;
  padding:0 var(--sp-5);border-radius:999px;font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);
  transition:background-color .2s var(--ease),color .2s var(--ease)}
.page-lvl a:hover{color:var(--acc)}
.page-lvl a[aria-current]{background:var(--acc);color:var(--acc-ink)}
.page-lvl.is-lp a:not([aria-current]){background:#FFD43B;color:#1A1F26;box-shadow:inset 0 0 0 1px rgba(160,110,0,.35)}
.page-lvl.is-lp a:not([aria-current]):hover{background:#FCC419;color:#1A1F26}
.page-lvl.is-lp a:not([aria-current])::after{content:"→"}
.page-lvl.is-lp a:not([aria-current])::before{content:"";position:absolute;inset:-2px;border-radius:inherit;
  border:2px solid #F59F00;opacity:0;pointer-events:none;animation:lvl-ring 1.5s ease-out .6s 3}
.page-lvl.is-dz a:not([aria-current]){background:var(--surface);color:var(--acc)}
.page-lvl.is-dz a:not([aria-current])::before{content:"←"}
.page-lvl.is-dz a:not([aria-current]):hover{text-decoration:underline;text-underline-offset:3px}
@keyframes lvl-ring{0%{inset:-2px;opacity:.9}100%{inset:-10px;opacity:0}}
@media (prefers-reduced-motion:reduce){ .page-lvl.is-lp a:not([aria-current])::before{animation:none} }
.lp-more{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--sp-2) var(--sp-7);
  padding:var(--sp-7) var(--sp-8);border-radius:var(--r-l);background:var(--surface-2);border:1px solid var(--line);
  color:var(--ink);transition:border-color .2s var(--ease)}
.lp-more:hover{border-color:var(--acc)}
.lp-more-k,.lp-more-t,.lp-more-d{grid-column:1}
.lp-more-k{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;color:var(--acc)}
.lp-more-t{font-size:var(--fs-h5);font-weight:700;letter-spacing:-.03em;line-height:1.35}
.lp-more-d{font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2)}
.lp-more-go{grid-column:2;grid-row:1 / span 3;display:inline-flex;align-items:center;gap:var(--sp-2);
  min-height:56px;padding:0 var(--sp-7);border-radius:var(--r);background:var(--surface);
  border:1.5px solid var(--line-2);font-weight:700;color:var(--acc);white-space:nowrap}
.lp-more-go::after{content:"→"}
.lp-more:hover .lp-more-go{border-color:var(--acc)}
@media (max-width:768px){
  .page-lvl{margin-bottom:var(--sp-4)}
  .lp-more{grid-template-columns:1fr;padding:var(--sp-6)}
  .lp-more-go{grid-column:1;grid-row:auto;justify-content:center;margin-top:var(--sp-3)}
}

/* =========================================================
   청정한약과 보약 — 옛 홈페이지 그림 · 플래시 (2026-09-12)
   herbal-tonic.html 에 기존 사이트 /sub_06/* 의 사진 · 도표 · 인증마크와 플래시 두 개를
   옮기면서 더한 부품입니다. 그림 속 글은 본문 글자로 옮겨져 있으므로, 그림은 글 부분을
   잘라 낸 사진 · 도표만 넣었습니다(README 끝 2026-09-12 '청정한약과 보약' 절).
   ▸ .ht-slogan  네 페이지 맨 위에 돌던 플래시(fla/sub_intro_06.swf)의 세 마디. 움직임 없이 글자로 옮겼습니다.
   ▸ .ht-fig     원본보다 커지지 않는 그림 한 장. style="--w:○○px" 에 원본 폭을 적습니다.
                 ⚠ 옛 그림은 작습니다(폭 230~750px). 100% 로 늘리면 흐려집니다.
                 .is-left 는 왼쪽에 붙이고, .is-float 는 글 오른쪽에 띄웁니다(768px 이하는 가운데로).
                 .is-float 를 담는 상자에는 .ht-flow 를 붙여 아래 글이 그림 옆으로 말려 올라오지 않게 합니다.
   ▸ .ht-mgmt    한약재 관리 플래시(fla/sub_banner_01.swf)의 여덟 장면. .shots 와 같은 두 단(column) 배치이고,
                 사진은 원본 크기 그대로 가운데에 둡니다.
   ▸ .case-ph    인증 카드 위의 인증 그림(care-herbal.html 과 같은 파일).
   ========================================================= */
.ht-slogan{margin:0 0 var(--sp-8);padding:var(--sp-6) var(--sp-7);border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line);text-align:center}
.ht-slogan p{font-size:clamp(1.12rem,2.1vw,1.45rem);font-weight:700;letter-spacing:-.03em;line-height:1.7;
  color:var(--ink-3);word-break:keep-all}
.ht-slogan b{color:var(--acc)}
.ht-fig{max-width:min(100%,var(--w,760px));margin:var(--sp-6) auto;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:#fff}
.ht-fig img{display:block;width:100%;height:auto}
.ht-fig figcaption{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);
  border-top:1px solid var(--line);background:var(--surface)}
.ht-fig.is-left{margin-inline:0}
.ht-fig.is-float{float:right;width:var(--w);margin:var(--sp-1) 0 var(--sp-5) var(--sp-7)}
/* 아코디언(.faq 두 칸) 안에서는 칸이 좁아 원본 폭 그대로 띄우면 글이 한 줄에 몇 자밖에 안 들어갑니다. */
.qa .a .ht-fig.is-float{width:min(var(--w),42%);margin-left:var(--sp-5)}
.ht-flow{display:flow-root}
.ht-mgmt{columns:2;column-gap:var(--sp-4);margin-top:var(--sp-6)}
.ht-mgmt figure{break-inside:avoid;margin:0 0 var(--sp-4);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:#fff}
.ht-mgmt img{display:block;width:auto;max-width:100%;height:auto;margin:0 auto}
.ht-mgmt figcaption{padding:var(--sp-4) var(--sp-5);font-size:var(--fs-sm);line-height:1.72;color:var(--ink-2);
  border-top:1px solid var(--line);background:var(--surface);word-break:keep-all}
.ht-mgmt figcaption b{display:block;margin-bottom:var(--sp-1);color:var(--ink);font-size:var(--fs-md);letter-spacing:-.03em}
.ht-mgmt figcaption p + p{margin-top:var(--sp-2)}
.case-ph{display:block;width:100%;height:auto;border-radius:var(--r-s);border:1px solid var(--line);background:#fff}
/* 인증 그림을 누르면 아래 해당 인증 아코디언(#cert-gap 등)이 펼쳐집니다. 원본에서도 인증별 설명 탭으로 이어졌습니다. */
.case-ph-link{display:block;border-radius:var(--r-s)}
.case-ph-link:hover .case-ph,.case-ph-link:focus-visible .case-ph{border-color:var(--acc)}
@media (max-width:768px){
  .ht-slogan{padding:var(--sp-5)}
  .ht-mgmt{columns:1}
  .ht-fig.is-float{float:none;width:auto;margin:var(--sp-5) auto}
  .qa .a .ht-fig.is-float{width:min(var(--w),70%);margin:var(--sp-5) auto}
}

/* ---------- 바로가기로 들어온 감별표 줄 (2026-09-12) ----------
   lp-knee-pain.html 무릎 위치 카드의 '내측 · 외측 측부인대 손상' · '십자인대 손상' 이
   lp-knee-ligament.html 감별표의 해당 줄(#collateral · #cruciate)로 바로 옵니다.
   어느 줄로 왔는지 보이도록 그 줄만 옅은 파랑으로 칠합니다. */
.lp-ddx tr:target > *{background:var(--acc-soft)}

/* ---------- 치료 노하우 새 그림 (2026-09-12) ----------
   care.html #spine · #joint 의 옛 삼각 도해를 병원이 준 인포그래픽(1454×1082)으로 바꿨습니다.
   글자가 작아 본문 폭(.orig-body 760px)에 넣으면 읽기 어려워, 이 그림만 .wrap 폭(최대 1200px)까지 넓힙니다.
   ⚠ 100cqw 는 가장 가까운 컨테이너, 곧 .orig .wrap 의 폭입니다. :has 를 모르는 옛 브라우저에서는 760px 로 보입니다.
   ⚠ 두 그림은 2026-09-12 저녁 care-knowhow-spine.html · care-knowhow-joint.html 로 옮겨 갔습니다.
     2026-09-13 두 페이지를 tools/import-original.ps1 대상에서 뺐으므로, 그림을 바꾸실 때는 두 페이지의 figure 줄만 고치면 됩니다. */
.orig .wrap:has(> .orig-body > .orig-fig.orig-wide){container-type:inline-size}
.orig-body > .orig-fig.orig-wide{width:100cqw;max-width:none}
.orig-fig.orig-wide a{display:block;text-decoration:none}


/* ---------- 보약이 필요한 네 가지 허약한 증상 — herbal-tonic.html #tonic (2026-09-13) ----------
   병원 원고(기허증 · 양허증 · 혈허증 · 음허증)를 유형마다 가로로 긴 카드 한 장에 담았습니다.
   왼쪽 — 동그라미 한자 · 이름 · 한 줄 요약 · 설명 두 문단 / 오른쪽 — '이런 증상이 나타날 수 있습니다' 체크 목록(옅은 회색 판).
   ⚠ 포인트 색은 파랑 하나입니다(C안 원칙). 옛 그림처럼 유형마다 색을 달리하지 않고, 한자 동그라미로 구별합니다.
   ⚠ 원고에서 굵게 한 요약 문장(<strong>)은 글자색은 그대로 두고 아래쪽에만 옅은 파랑을 깔았습니다. 효과를 말하는 문장이 아니라
     상태를 풀어 쓴 문장이라 강조해도 광고 강조가 되지 않는다고 보았습니다.
   ⚠ 900px 이하에서는 카드 안을 위아래로 쌓고, 길어진 절을 건너뛸 수 있게 바로가기 칩(.tonic-idx)을 보입니다.
     (769~900px 에서 두 칸으로 두면 설명 글이 한 줄 20자 안팎으로 좁아져서 기준을 사이트 공통 768px 이 아니라 900px 로 잡았습니다.) */
/* 제목 · 그림 두 칸 (2026-09-27) — 제목 판(.head)은 왼쪽, 병원 그림은 오른쪽. 900px 이하에서는 위아래로 쌓습니다. */
.tonic-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,4.4vw,4rem);align-items:center;
  margin-bottom:clamp(2.6rem,4.5vw,4rem)}
.tonic-intro > .head{margin-bottom:0}
.tonic-intro-fig{margin:0;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-l)}
.tonic-intro-fig img{display:block;width:100%;height:auto}
@media (max-width:900px){
  .tonic-intro{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .tonic-intro-fig{max-width:560px;border-radius:var(--r-l)}
}
.tonic-idx{display:none;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-6)}
.tonic-idx a{display:inline-flex;align-items:center;gap:var(--sp-2);padding:.35rem .95rem .35rem .4rem;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);font-size:var(--fs-sm);font-weight:700;color:var(--ink);text-decoration:none}
.tonic-idx a:hover,.tonic-idx a:focus-visible{border-color:var(--acc);color:var(--acc)}
.tonic-idx .tonic-badge{width:1.9rem;height:1.9rem;font-size:var(--fs-sm)}
.tonic-types{display:grid;gap:var(--sp-5)}
.tonic-card{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--rhythm-sm);align-items:start;
  padding:var(--rhythm-sm);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);
  scroll-margin-top:calc(var(--nav-h) + var(--sp-5))}
.tonic-head{display:flex;align-items:center;gap:var(--sp-4);padding-bottom:var(--sp-5);margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--line)}
.tonic-badge{flex:none;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;
  background:var(--acc-soft);color:var(--acc);font-size:1.55rem;font-weight:700;line-height:1}
.tonic-head .tonic-name{font-size:var(--fs-h5);line-height:1.3;letter-spacing:-.03em}
/* 줄바꿈 다듬기 (2026-09-13 헤드리스 Edge 캡처로 확인하고 고침)
   · 부제는 두 줄로 넘어갈 때 '상태' 한 단어만 떨어지지 않게 줄 길이를 고르게(balance) 합니다.
   · 설명 문단 · 증상 항목은 마지막 줄에 한 단어만 남지 않게(pretty) 합니다. 이 두 속성을 모르는 브라우저는 예전처럼 줄을 바꿉니다.
   · 요약 문장 끝의 '상태”로' · '상태”라고' 는 .tonic-nw 로 묶어 줄 첫머리에 조사만 오지 않게 했습니다.
     그래서 <strong> 이 둘로 나뉘어 있습니다(글자는 원고 그대로). 1440px 에서 '로 이해하면 쉽습니다' 가 줄 첫머리로 떨어졌습니다. */
.tonic-head .tonic-sub{margin-top:.2rem;font-size:var(--fs-md);font-weight:600;line-height:1.5;color:var(--ink-2);text-wrap:balance}
.tonic-body > p{font-size:var(--fs-md);line-height:1.85;color:var(--ink);text-wrap:pretty}
.tonic-body > p + p{margin-top:var(--sp-4)}
.tonic-body strong{font-weight:700;background:linear-gradient(transparent 62%,var(--acc-soft) 62%)}
.tonic-nw{white-space:nowrap}
.tonic-sym{padding:var(--sp-6);border-radius:var(--r);background:var(--surface-2)}
.tonic-sym .tonic-sym-h{margin-bottom:var(--sp-3);font-size:var(--fs-sm);font-weight:700;color:var(--acc)}
.tonic-sym ul{display:grid;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.tonic-sym li{position:relative;padding-left:1.75rem;font-size:var(--fs-sm);line-height:1.6;color:var(--ink);text-wrap:pretty}
.tonic-sym li::before{content:"";position:absolute;left:.1rem;top:.3em;width:1.05rem;height:1.05rem;border-radius:4px;
  background:var(--surface);border:1.5px solid var(--acc)}
.tonic-sym li::after{content:"";position:absolute;left:.4rem;top:.55em;width:.48rem;height:.26rem;
  border-left:2px solid var(--acc);border-bottom:2px solid var(--acc);transform:rotate(-45deg)}
@media (max-width:900px){
  .tonic-idx{display:flex}
  .tonic-card{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .tonic-card{padding:var(--sp-5)}
  .tonic-badge{width:2.75rem;height:2.75rem;font-size:var(--fs-lg)}
  .tonic-sym{padding:var(--sp-5)}
}

/* ---------- 보약 자가진단 (herbal-tonic.html, 2026-09-27) ----------
   네 가지 허약 증상 카드 밑에 처음부터 펼쳐 둡니다(제목 '보약 유형 자가 체크 해보기'). 병원 인포그래픽의 글을 그대로 옮기고 옷만 C안(파랑 하나)으로 맞췄습니다.
   문항 판 넷은 넓은 화면에서 두 칸, 900px 이하에서 한 칸입니다. */
.tonic-quiz{margin-top:var(--sp-7);scroll-margin-top:calc(var(--nav-h) + var(--sp-5));padding:var(--rhythm-sm);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.tonic-quiz-head{text-align:center;margin-bottom:var(--sp-6)}
.tonic-quiz-head h3{font-size:var(--fs-h5);letter-spacing:-.03em}
.tonic-quiz-head p{margin-top:var(--sp-2);font-size:var(--fs-md);color:var(--ink-2);text-wrap:balance}
.tonic-quiz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.tonic-q{margin:0;min-width:0;padding:var(--sp-5);border:0;border-radius:var(--r);background:var(--surface-2)}
.tonic-q legend{float:left;width:100%;display:flex;align-items:center;gap:var(--sp-2);padding:0;
  font-size:var(--fs-lg);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.tonic-q-n{flex:none;padding:.15rem .55rem;border-radius:6px;background:var(--acc);color:var(--acc-ink);font-size:var(--fs-2xs);font-weight:700;letter-spacing:0}
.tonic-q-sub{clear:both;padding-top:var(--sp-1);margin-bottom:var(--sp-3);font-size:var(--fs-sm);color:var(--ink-3)}
.tonic-q label{display:flex;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--r-s);cursor:pointer;
  font-size:var(--fs-md);line-height:1.55;color:var(--ink);transition:background .15s}
.tonic-q label:hover{background:var(--surface)}
.tonic-q input{flex:none;width:1.25rem;height:1.25rem;margin:.15em 0 0;accent-color:var(--acc);cursor:pointer}
.tonic-q label:has(input:checked){background:var(--acc-soft)}
.tonic-quiz-calc{display:flex;width:100%;max-width:28rem;margin:var(--sp-7) auto 0}
.tonic-quiz-result{margin-top:var(--sp-6);padding:var(--sp-7) var(--sp-6);border-radius:var(--r-l);border:2px solid var(--acc);
  text-align:center;outline:none}
.tonic-quiz-k{font-size:var(--fs-sm);font-weight:700;color:var(--ink-3)}
.tonic-quiz-title{margin-top:var(--sp-2);font-size:var(--fs-h4);font-weight:700;letter-spacing:-.03em;color:var(--acc)}
.tonic-quiz-desc{max-width:42em;margin:var(--sp-5) auto 0;padding:var(--sp-5);border-radius:var(--r);background:var(--surface-2);
  text-align:left;font-size:var(--fs-md);line-height:1.8}
.tonic-quiz-desc p + p{margin-top:var(--sp-3)}
.tonic-quiz-note{margin:var(--sp-5) 0;font-size:var(--fs-xs);color:var(--ink-3)}
@media (max-width:900px){ .tonic-quiz-grid{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .tonic-quiz{padding:var(--sp-5)}
  .tonic-quiz-result .btn{width:100%}
  .tonic-quiz-result{padding:var(--sp-6) var(--sp-4)}
}

/* ---------- 공진단이 필요한 경우 (herbal-gongjindan.html, 2026-09-27) ----------
   병원 인포그래픽의 네 묶음 카드. 넓은 화면 — 카드 2×2, 768px 이하 — 한 칸.
   카드 위 금색 띠 대신 파랑(C안)을 씁니다. */
.gjd-need-lead{margin-bottom:var(--sp-4);font-weight:700;color:var(--ink)}
.gjd-cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.gjd-cat{padding:var(--sp-5);border-radius:var(--r);background:var(--surface-2);border-top:3px solid var(--acc)}
.gjd-cat h4{margin-bottom:var(--sp-3);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line);
  font-size:var(--fs-lg);letter-spacing:-.03em;color:var(--ink)}
.gjd-cat ul{display:grid;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.gjd-cat li{position:relative;padding-left:1rem;font-size:var(--fs-sm);line-height:1.65;word-break:keep-all}
.gjd-cat li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--acc)}
.gjd-cat strong{color:var(--ink);font-weight:700}
@media (max-width:768px){ .gjd-cats{grid-template-columns:minmax(0,1fr)} }

/* ---------- 원문 묶음 제목 (.orig-lead) — 2026-09-19 ----------
   원문 블록(.orig) 여러 개를 한 주제로 묶는 제목입니다(예: disease-neck-disc.html 의 '목통증 유발 질환').
   tools\import-original.ps1 의 $Lead 표가 블록 바로 앞에 내보냅니다. 위로는 윗절과 선으로 나누고,
   아래 원문 절과는 붙여서 그 절들의 제목으로 읽히게 합니다. */
.orig-lead{padding-top:0;padding-bottom:0}
.orig-lead .orig-body{border-top:1.5px solid var(--line-2);padding-top:var(--sp-8)}
/* .orig-body 의 본문 문단 · 제목 규칙이 이기지 않도록 한 단계 세게 씁니다. 안쪽 원문 제목(24px)보다 크게. */
.orig-lead .orig-body > p.kicker{font-size:var(--fs-2xs);color:var(--acc);margin-bottom:var(--sp-3)}
.orig-lead .orig-body > h2.title{font-size:var(--fs-h2);margin-bottom:0}
.orig-lead + section.orig{padding-top:var(--sp-8)}
/* ── 진료안내 (services.html) — 2026-09-20 ────────────────────────────
   병원이 주신 '진료과목과 전문진료' 표를 그림 대신 HTML 로 옮긴 자리입니다.
   진료과목은 알약 모양 목록, 전문진료는 부위 이름 + 질환 목록 두 칸입니다.
   좁은 화면(640px 이하)에서는 두 칸이 위아래로 쌓입니다. */
.svc-sec{background:var(--surface-2)}
.svc-chips{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3)}
.svc-chips li{padding:.55rem 1.05rem;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.svc-rows{display:grid;gap:var(--sp-3)}
.svc-row{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:var(--sp-3) var(--sp-5);
  align-items:baseline;padding:var(--sp-5) var(--sp-6);border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface)}
.svc-row > dt{font-size:var(--fs-md);font-weight:700;letter-spacing:-.03em;color:var(--acc)}
.svc-row > dd{font-size:var(--fs-sm);line-height:1.9;color:var(--ink-2);word-break:keep-all}
.svc-row a{color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--line-2);text-underline-offset:3px}
.svc-row a:hover{color:var(--acc);text-decoration-color:var(--acc)}
.svc-note{margin-top:var(--sp-5);font-size:var(--fs-xs);line-height:1.7;color:var(--ink-3)}
.svc-more{display:grid;gap:var(--sp-2)}
.svc-more a{display:block;padding:var(--sp-4) var(--sp-5);border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.svc-more a:hover{border-color:var(--acc);color:var(--acc)}
@media (max-width:640px){
  .svc-row{grid-template-columns:1fr;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5)}
}

/* ══════════ 상세페이지 공통 디자인 시스템 (.md-*) — 2026-09-27 파일럿 ══════════
   기준 페이지(Master Detail Page) 시안: care-beevenom-spine.html(척추봉침요법) 한 곳에만 씁니다.
   병원이 확정하면 나머지 상세페이지도 이 부품들로 옮깁니다(그 전에는 다른 페이지에 쓰지 않음).
   부품 — 섹션(.md-sec · .is-tint) / 섹션 제목(.md-head · .md-num · .md-h2) / 글 + 그림 두 칸(.md-split · .is-rev)
          / 본문(.md-body) / 의료 그림(.md-fig · .md-frame · .md-cap) / 강조 박스(.md-hl) / 카드(.md-cards · .md-card · .md-h3)
          / 인용(.md-quote). 첫 화면(.dx-hero) · 맺음 CTA(.band) · 다른 치료법 줄(.rail)은 사이트 공통 부품을 그대로 씁니다.
   규칙 — 섹션 위아래 여백은 --rhythm-block 하나, 배경은 흰색 ↔ --surface-2 를 번갈아, 포인트 색은 파랑(--acc) 하나.
          그림은 모두 4:3 틀 안에 자르지 않고(contain) 넣고, 세로로 긴 자료만 4:5 틀(.is-tall)을 씁니다.
          두 칸은 PC 에서 글 55 : 그림 45, .is-rev 로 좌우를 바꿉니다. 900px 이하에서는 글 → 그림 한 칸. */
.md-sec{padding:var(--rhythm-block) 0}
.md-sec.is-tint{background:var(--surface-2)}
.md-head{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.md-head-center{justify-content:center;margin-bottom:var(--sp-7);text-align:center}
.md-num{flex:none;padding:.2rem .6rem;border-radius:6px;background:var(--acc-soft);color:var(--acc);
  font-size:var(--fs-sm);font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1.4}
.md-h2{font-size:var(--fs-h4);font-weight:700;line-height:1.35;letter-spacing:-.03em;color:var(--ink);text-wrap:balance}
.md-h3{font-size:var(--fs-lg);font-weight:700;line-height:1.4;letter-spacing:-.03em;color:var(--ink);margin-bottom:var(--sp-3)}
/* 그림은 글 옆 위쪽에 붙입니다 — 가운데 맞춤이면 글이 길 때 그림이 아래로 처집니다(2026-10-01). */
.md-split{display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.md-split.is-rev{grid-template-columns:minmax(0,9fr) minmax(0,11fr)}
.md-split.is-rev > .md-text{order:2}
.md-body{max-width:36em}
.md-body p,.md-quote p{font-size:var(--fs-md);line-height:1.85;color:var(--ink-2);word-break:keep-all;text-wrap:pretty}
.md-body p + p{margin-top:var(--sp-4)}
.md-body strong,.md-card strong,.md-hl strong{font-weight:700;color:var(--ink)}
.md-quote{margin:0;padding-left:var(--sp-5);border-left:3px solid var(--acc)}
.md-fig{margin:0}
.md-frame{position:relative;aspect-ratio:4/3;border-radius:var(--r-l);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-s);overflow:hidden}
.md-frame.is-tall{aspect-ratio:4/5}
.md-frame img{position:absolute;inset:var(--sp-4);width:calc(100% - 2 * var(--sp-4));height:calc(100% - 2 * var(--sp-4));
  object-fit:contain;border-radius:var(--r-s)}
.md-cap{margin-top:var(--sp-3);font-size:var(--fs-xs);line-height:1.6;color:var(--ink-3);text-align:center;word-break:keep-all}
.md-hl{padding:var(--sp-6) var(--sp-7);border-radius:var(--r);background:var(--acc-soft);border-left:4px solid var(--acc)}
.md-hl-h{margin-bottom:var(--sp-2);font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;color:var(--acc)}
.md-hl p:not(.md-hl-h){font-size:var(--fs-md);line-height:1.8;color:var(--ink);word-break:keep-all}
.md-hl p:not(.md-hl-h) + p{margin-top:var(--sp-3)}
.md-hl-intro{margin-bottom:var(--rhythm-block)}
.md-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-bottom:var(--sp-6)}
.md-card{padding:var(--rhythm-sm);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.md-card p{font-size:var(--fs-sm);line-height:1.8;color:var(--ink-2);word-break:keep-all}
.md-card p + p{margin-top:var(--sp-3)}
@media (max-width:900px){
  .md-split,.md-split.is-rev{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .md-split.is-rev > .md-text{order:0}
  .md-fig{max-width:560px}
  .md-cards{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .md-hl{padding:var(--sp-5)}
  .md-frame img{inset:var(--sp-3);width:calc(100% - 2 * var(--sp-3));height:calc(100% - 2 * var(--sp-3))}
}
/* ── 상세페이지 공통 디자인 — 여러 페이지로 넓히며 더한 부품 (2026-09-27) ──
   tools/md-convert.pl 이 원문 블록을 옮기면서 쓰는 것들입니다.
   · 글만 있거나 그림이 여럿인 섹션: 제목(.md-head-wrap) → 넓은 본문(.md-body-wide) → 그림 격자(.md-figs, 두 칸)
   · 제 비율 틀(.is-free): 기사 띠 · 영상 · 가로로 긴 안내 그림. 격자에서 한 줄을 다 씁니다(.md-fig.is-wide). */
.md-head-wrap > .md-head{margin-bottom:var(--sp-5)}
.md-body-wide{max-width:48em}
.md-body ul.orig-list,.md-body ol.orig-list{margin:var(--sp-2) 0 var(--sp-5)}
.md-body ul.orig-list:last-child,.md-body ol.orig-list:last-child{margin-bottom:0}
.md-body .orig-list > li{font-size:var(--fs-md);line-height:1.85;color:var(--ink-2);margin-bottom:var(--sp-3);word-break:keep-all}
.md-body .res-h,.md-body h3{margin:var(--sp-7) 0 var(--sp-3);font-size:var(--fs-lg);font-weight:700;letter-spacing:-.03em;color:var(--acc)}  /* 소제목은 파랑(2026-10-03 병원 요청) */
.md-body > h3:first-child,.md-body > .res-h:first-child{margin-top:0}
.md-body a{color:var(--acc);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.md-body b.key,.md-body b{font-weight:700;color:var(--ink)}
.md-body .c-blue{color:var(--acc)}
.md-body .orig-table{margin:var(--sp-5) 0;overflow-x:auto}
.md-figs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6);margin-top:var(--sp-7);align-items:start}
.md-figs.is-one{grid-template-columns:minmax(0,1fr);max-width:640px}
.md-figs > .md-fig.is-wide,.md-figs.is-one > .md-fig.is-wide{grid-column:1 / -1;max-width:960px}
.md-figs.is-one:has(> .md-fig.is-wide){max-width:960px}
.md-body-wide + .md-figs,.md-head-wrap + .md-figs{margin-top:var(--sp-6)}
.md-hl-intro + .md-figs{margin-top:0;margin-bottom:var(--rhythm-block)}
.md-frame > a{display:contents}
.md-frame.is-free{aspect-ratio:auto}
.md-frame.is-free img{position:static;inset:auto;width:100%;height:auto;display:block;border-radius:0}
.md-frame.is-free .orig-video{margin:0}
@media (max-width:900px){
  .md-figs{grid-template-columns:minmax(0,1fr)}
  .md-figs .md-fig:not(.is-wide){max-width:560px}
}
/* 손으로 쓴 상세페이지의 머리(tools/md-convert-head.pl) — 제목 위 작은 글 · 제목 밑 설명 */
.md-kicker{margin-bottom:var(--sp-2);font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;color:var(--ink-3)}
.md-lead{max-width:40em;margin-top:calc(var(--sp-5) * -.4);margin-bottom:var(--sp-6);font-size:var(--fs-md);line-height:1.8;color:var(--ink-2)}
.md-head-wrap{margin-bottom:var(--sp-5)}
.md-head-wrap > .md-head{margin-bottom:var(--sp-4)}
/* 회색 섹션 바로 뒤에 오는 맺음 CTA · 다른 치료법 줄은 원래 위 여백이 0(style="padding-top:0")이라 회색 판에 붙어 버립니다. */
.md-sec.is-tint + section[style*="padding-top:0"]{padding-top:var(--rhythm-block) !important}
.md-figs > .md-fig.is-wide:has(.orig-video){max-width:760px}
/* 관련 언론 보도 (2026-09-27) — 본문 곳곳의 신문 기사 배너를 맺음 CTA(전화 · 네이버 예약) 바로 위로 모았습니다(tools/md-convert.pl).
   병원 요청으로 배너 크기를 예전(본문 폭 · 최대 960px)의 절반 이하로 줄였습니다 — 한 장 최대 460px, 두 장씩. */
.md-press-sec{padding-bottom:var(--sp-9)}
.md-press{display:grid;grid-template-columns:repeat(2,minmax(0,460px));gap:var(--sp-5);align-items:start}
.md-press .md-fig{max-width:460px}
.md-press .md-frame{box-shadow:none}
.md-press .md-frame a{display:block}
@media (max-width:640px){ .md-press{grid-template-columns:minmax(0,1fr)} }
/* 비교표(.md-cmp) — 두 질환을 나란히 견주는 표(2026-09-27, 척추관협착증 · 허리디스크). 상세페이지 공통 디자인 부품입니다.
   왼쪽 칸은 파랑(.is-a · --acc), 오른쪽 칸은 남색(.is-b · --deep). 항목 이름(발생 원인 …)은 두 칸에 걸친 줄로 둡니다. */
.md-cmp-wrap{max-width:860px;margin-top:var(--sp-7)}
.md-cmp{width:100%;border-collapse:separate;border-spacing:var(--sp-3);table-layout:fixed;margin:calc(var(--sp-3) * -1)}
.md-cmp caption{caption-side:top;text-align:left;padding:0 var(--sp-3) var(--sp-3)}
.md-cmp caption b{display:block;font-size:var(--fs-lg);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.md-cmp caption span{display:block;margin-top:.2rem;font-size:var(--fs-sm);color:var(--ink-3)}
.md-cmp thead th{padding:var(--sp-4);border-radius:var(--r);color:#fff;font-size:var(--fs-lg);font-weight:700;text-align:center}
.md-cmp thead th.is-a{background:var(--acc)}
.md-cmp thead th.is-b{background:var(--deep)}
html[data-theme="dark"] .md-cmp thead th.is-a{color:var(--acc-ink)}
.md-cmp .md-cmp-k th{padding:var(--sp-3) 0 0;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;color:var(--ink-3);text-align:center}
.md-cmp td{padding:var(--sp-5);border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  font-size:var(--fs-md);line-height:1.7;color:var(--ink-2);text-align:center;vertical-align:middle;word-break:keep-all}
.md-sec:not(.is-tint) .md-cmp td{background:var(--surface-2);border-color:transparent}
.md-cmp strong{font-weight:700}
.md-cmp strong.is-a{color:var(--acc)}
.md-cmp strong.is-b{color:var(--deep)}
html[data-theme="dark"] .md-cmp strong.is-b{color:var(--ink)}
@media (max-width:560px){
  .md-cmp{border-spacing:var(--sp-2);margin:calc(var(--sp-2) * -1)}
  .md-cmp thead th{padding:var(--sp-3);font-size:var(--fs-md)}
  .md-cmp td{padding:var(--sp-3);font-size:var(--fs-sm)}
}
/* 카드 변형 (2026-09-27, 척추약침요법) — 넷 한 줄(.is-four, 좁으면 둘 · 하나), 카드 번호(.md-card-n), 왼쪽 파란 선(.is-accent), 작은 안내 줄(.md-note) */
.md-cards.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.md-card-n{display:inline-block;margin-bottom:var(--sp-3);padding:.15rem .6rem;border-radius:999px;background:var(--acc-soft);
  color:var(--acc);font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.md-cards.is-accent .md-card{border-left:4px solid var(--acc)}
.md-sec.is-tint .md-card{box-shadow:none}
.md-note{margin-top:var(--sp-5) !important;padding-top:var(--sp-4);border-top:1px solid var(--line);font-size:var(--fs-xs) !important;color:var(--ink-3) !important;line-height:1.7}
.md-text > .md-kicker + .md-head{margin-top:0}
.md-text > .md-lead{margin-top:calc(var(--sp-2) * -1)}
@media (max-width:1100px){ .md-cards.is-four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:900px){ .md-cards.is-four{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .md-cards.is-four{grid-template-columns:minmax(0,1fr)} }
/* 차례 흐름(.md-flow) — 강조 박스 안의 '관절 주변 압통 → 근육의 긴장 → …' (2026-09-27, 관절약침요법). 화살표는 CSS 로 그려 낭독기가 읽지 않습니다. */
.md-hl-flow{padding:var(--rhythm-sm)}
.md-hl-flow > .md-h3{color:var(--acc)}
.md-hl-flow > p{max-width:44em}
.md-flow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-2);list-style:none;margin:var(--sp-6) 0 0;padding:0}
.md-flow > li{padding:.55rem 1.1rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  font-size:var(--fs-sm);font-weight:700;color:var(--ink);white-space:nowrap}
.md-flow > li{position:relative}
.md-flow > li + li::before{content:"→";content:"→" / "";position:absolute;left:calc(var(--sp-4) * -1 - .2rem);top:50%;transform:translateY(-50%);color:var(--acc);font-weight:700}
.md-flow > li + li{margin-left:var(--sp-4)}
@media (max-width:560px){ .md-flow{flex-direction:column;align-items:flex-start;gap:var(--sp-5)} .md-flow > li + li{margin-left:0} .md-flow > li + li::before{content:"↓";content:"↓" / "";left:1.1rem;top:calc(var(--sp-5) * -1);transform:translateY(-15%)} }
/* 치료노하우 두 쪽 (2026-09-27 저녁, tools/md-convert-kh.pl) — 가운데 머리(.md-head-intro)와 핵심포인트 칩(.md-tags) */
.md-sec-intro{padding-bottom:var(--sp-8)}
.md-head-intro{max-width:44em;margin:0 auto;text-align:center}
.md-head-intro > .md-h2{font-size:var(--fs-h3);line-height:1.3}
.md-head-intro > .md-lead{margin:var(--sp-3) auto 0}
.md-head-wrap > .md-head + .md-lead{margin-top:calc(var(--sp-2) * -1)}
.md-hl-key{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4);margin-top:var(--sp-6);max-width:48em}
.md-hl-key > .md-hl-h{margin:0}
.md-tags{display:flex;flex-wrap:wrap;gap:var(--sp-2);list-style:none;margin:0;padding:0}
.md-tags li{padding:.25rem .85rem;border-radius:999px;background:var(--surface);border:1px solid var(--line);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink)}

/* ══════════ SCI 연구 섹션 (.md-sci-*) · 언론 보도 카드 (.md-news) — 2026-09-27 ══════════
   척추봉침요법(2005 항염 분자기전 연구) · 관절봉침요법(2009 유전자 발현 마이크로어레이 연구) 두 쪽의 봉독 연구 근거 전용.
   병원 작업 오더(인포그래픽 작업.docx) — 두 쪽 같은 구조: 작은 제목(SCI RESEARCH · 연도) → 큰 제목 → 논문 정보 →
   핵심 카드 4장 → 작용 도식 → 연구 결과 요약. 새 class 만 더했고 기존 공통 CSS 는 바꾸지 않았습니다. */
.md-sci{background:linear-gradient(180deg,var(--acc-soft) 0%,var(--surface) 70%)}
.md-sci.is-tint{background:var(--surface-2)}
html[data-theme="dark"] .md-sci{background:var(--surface-2)}
.md-sci-eyebrow{display:inline-block;margin-bottom:var(--sp-3);padding:.25rem .8rem;border-radius:999px;background:var(--acc);color:var(--acc-ink);
  font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em}
.md-sci-head{max-width:46em}
.md-sci-head .md-h2{font-size:var(--fs-h3);line-height:1.3}
.md-sci-sub{margin-top:var(--sp-3);font-size:var(--fs-md);color:var(--ink-2);line-height:1.7}
.md-sci-sub b{color:var(--ink)}
.md-sci-paper{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:var(--sp-6);align-items:center;margin-top:var(--sp-7);
  padding:var(--sp-6);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.md-sci-journal{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);font-weight:700;color:var(--ink-2)}
.md-sci-journal .tag{padding:.1rem .5rem;border-radius:6px;background:var(--deep);color:#fff;font-size:var(--fs-2xs);letter-spacing:.04em}
.md-sci-title{margin-top:var(--sp-3);font-size:var(--fs-lg);font-weight:700;line-height:1.45;color:var(--ink);letter-spacing:-.01em}
.md-sci-authors{margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2)}
.md-sci-authors b{color:var(--acc)}
.md-sci-doi{display:inline-block;margin-top:var(--sp-3);font-size:var(--fs-xs);font-weight:700;color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.md-sci-thumb{margin:0}
.md-sci-thumb a{display:block;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-m)}
.md-sci-thumb img{display:block;width:100%;height:auto}
.md-sci-thumb figcaption{margin-top:var(--sp-2);font-size:var(--fs-2xs);color:var(--ink-3);text-align:center;line-height:1.5}
.md-sci-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-6)}
.md-sci-card{padding:var(--sp-5);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);transition:border-color .2s,box-shadow .2s}
.md-sci-card:hover{border-color:var(--acc);box-shadow:var(--shadow-m)}
.md-sci-card .k{display:inline-block;padding:.12rem .55rem;border-radius:6px;background:var(--acc-soft);color:var(--acc);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.03em}
.md-sci-card b{display:block;margin-top:var(--sp-3);font-size:var(--fs-h5);font-weight:800;line-height:1.3;letter-spacing:-.03em;color:var(--ink)}
.md-sci-card p{margin-top:var(--sp-2);font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2);word-break:keep-all}
.md-sci-flow-wrap{margin-top:var(--sp-7);padding:var(--sp-6);border-radius:var(--r-l);background:var(--deep);color:#fff}
.md-sci-flow-wrap > h3{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em;color:#fff}
.md-sci-flow-wrap > p{margin-top:var(--sp-2);font-size:var(--fs-sm);color:rgba(255,255,255,.75)}
.md-sci-flow{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--sp-6);margin:var(--sp-6) 0 0;padding:0;list-style:none;counter-reset:s}
.md-sci-flow > li{position:relative;padding:var(--sp-5);border-radius:var(--r);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);counter-increment:s}
.md-sci-flow > li::before{content:"STEP " counter(s);display:block;margin-bottom:var(--sp-2);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.1em;color:rgba(255,255,255,.6)}
.md-sci-flow > li + li::after{content:"→";content:"→" / "";position:absolute;left:calc(var(--sp-6) * -.5 - .45rem);top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.55);font-weight:700}
.md-sci-flow b{display:block;font-size:var(--fs-md);font-weight:700;color:#fff;line-height:1.4}
.md-sci-flow span{display:block;margin-top:var(--sp-2);font-size:var(--fs-sm);line-height:1.6;color:rgba(255,255,255,.78);word-break:keep-all}
.md-sci-flow > li.is-hit{background:rgba(143,188,245,.16);border-color:#8FBCF5}
.md-sci-flow > li.is-hit em{display:inline-block;margin-top:var(--sp-3);padding:.15rem .6rem;border-radius:999px;background:#8FBCF5;color:#0F1419;
  font-size:var(--fs-2xs);font-weight:800;font-style:normal}
.md-sci-summary{margin-top:var(--sp-6);padding:var(--sp-6) var(--sp-7);border-radius:var(--r);background:var(--surface);border-left:4px solid var(--acc);max-width:52em}
.md-sci-summary .h{margin-bottom:var(--sp-2);font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;color:var(--acc)}
.md-sci-summary p:not(.h){font-size:var(--fs-md);line-height:1.85;color:var(--ink);word-break:keep-all}
.md-sci-summary p:not(.h) + p{margin-top:var(--sp-3)}
.md-sci-bars{margin-top:var(--sp-6);padding:var(--sp-6);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.md-sci-bars > h3{font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.md-sci-bars .legend{display:flex;gap:var(--sp-5);margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--ink-2)}
.md-sci-bars .legend i{display:inline-block;width:.8rem;height:.8rem;margin-right:.35rem;border-radius:3px;vertical-align:-1px}
.md-sci-bars .up{background:var(--acc)}
.md-sci-bars .dn{background:var(--deep)}
html[data-theme="dark"] .md-sci-bars .dn{background:#5F6B7A}
.md-sci-bar-row{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--sp-4);align-items:center;margin-top:var(--sp-5)}
.md-sci-bar-row > b{font-size:var(--fs-sm);color:var(--ink)}
.md-sci-bar-row > b small{display:block;font-size:var(--fs-2xs);font-weight:600;color:var(--ink-3)}
.md-sci-bar{display:flex;height:2.1rem;border-radius:8px;overflow:hidden;background:var(--surface-2)}
.md-sci-bar > span{display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:800;color:#fff;white-space:nowrap}
.md-sci-bars .note{margin-top:var(--sp-4);font-size:var(--fs-2xs);color:var(--ink-3)}
.md-sci-genes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-4)}
.md-sci-gene{padding:var(--sp-4) var(--sp-5);border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.md-sci-gene b{display:block;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--fs-md);color:var(--ink)}
.md-sci-gene span{display:block;margin-top:.2rem;font-size:var(--fs-xs);color:var(--ink-2);line-height:1.5}
.md-sci-gene small{display:inline-block;margin-top:var(--sp-2);padding:.08rem .5rem;border-radius:6px;background:var(--acc-soft);color:var(--acc);font-size:var(--fs-2xs);font-weight:700}
.md-sci-genes-h{margin-top:var(--sp-7);font-size:var(--fs-lg);font-weight:700;color:var(--ink)}
.md-sci-genes-p{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--ink-3)}
.md-news{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-5)}
.md-news figure{margin:0;padding:var(--sp-3);border-radius:var(--r);background:var(--surface);border:1px solid var(--line);transition:border-color .2s}
.md-news figure:hover{border-color:var(--acc)}
.md-news img{display:block;width:100%;height:auto;border-radius:var(--r-s)}
.md-news figcaption{margin-top:var(--sp-2);font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2)}
.md-news figcaption b{display:block;color:var(--ink);font-size:var(--fs-2xs);letter-spacing:.04em}
@media (max-width:1100px){
  .md-sci-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-sci-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-sci-flow > li:nth-child(odd)::after{display:none}
  .md-news{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .md-sci-paper{grid-template-columns:minmax(0,1fr) 96px;padding:var(--sp-5);gap:var(--sp-4)}
  .md-sci-genes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .md-sci-cards,.md-sci-flow,.md-sci-genes{grid-template-columns:minmax(0,1fr)}
  .md-sci-paper{grid-template-columns:minmax(0,1fr)}
  .md-sci-thumb{max-width:140px}
  .md-sci-head .md-h2{font-size:var(--fs-h4)}
  .md-sci-title{font-size:var(--fs-md)}
  .md-sci-flow{gap:var(--sp-5)}
  .md-sci-flow > li + li::after,.md-sci-flow > li:nth-child(odd)::after{display:block;content:"↓";content:"↓" / "";left:50%;top:calc(var(--sp-5) * -.5 - .1rem);transform:translate(-50%,-50%)}
  .md-sci-flow-wrap,.md-sci-bars{padding:var(--sp-5)}
  .md-sci-summary{padding:var(--sp-5)}
  .md-sci-bar-row{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}
  .md-news{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
}
/* 봉독에 의한 산화질소 억제 그래프 (.md-sci-chart, 2026-09-27) — 척추봉침요법 2005 연구 섹션. SVG 막대그래프, 값은 병원 파일 그대로.
   색 — 정상: 회색(--ink-3), 염증세포군: 빨강(.c-red 와 같은 #C62A2F), 봉독 투여군: 파랑(--acc). 글자 · 축은 currentColor. */
.md-sci-chart{margin:var(--sp-6) 0 0;padding:var(--sp-6);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.md-sci-chart > h3{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em}
.md-sci-chart-sub{margin-top:var(--sp-1);font-size:var(--fs-sm);color:var(--ink-3)}
.md-sci-chart svg{display:block;width:100%;max-width:820px;height:auto;margin:var(--sp-4) auto 0;font-family:inherit;overflow:visible}
.md-sci-chart .ax line,.md-sci-chart .grp line{stroke:currentColor;stroke-width:1}
.md-sci-chart .err path{stroke:currentColor;stroke-width:1.4;fill:none}
.md-sci-chart text{fill:currentColor;font-size:14px}
.md-sci-chart .yt text{font-size:13px;fill:var(--ink-2)}
.md-sci-chart .yl,.md-sci-chart .grp text{font-size:14px;fill:var(--ink-2)}
.md-sci-chart .xt text{font-size:15px;font-weight:600}
.md-sci-chart .star text{font-size:17px;font-weight:800}
.md-sci-chart .val text{font-size:13px;font-weight:700;fill:var(--ink-2)}
.md-sci-chart .b-norm{fill:#8A95A3}
.md-sci-chart .b-infl{fill:#C62A2F}
.md-sci-chart .b-bv{fill:var(--acc)}
html[data-theme="dark"] .md-sci-chart .b-infl{fill:#FF9DA2}
.md-sci-chart figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--ink-2)}
.md-sci-chart .lg i{display:inline-block;width:.8rem;height:.8rem;margin-right:.35rem;border-radius:3px;vertical-align:-1px}
.md-sci-chart .lg i.b-norm{background:#8A95A3}
.md-sci-chart .lg i.b-infl{background:#C62A2F}
.md-sci-chart .lg i.b-bv{background:var(--acc)}
.md-sci-chart .note{flex-basis:100%;color:var(--ink-3)}
@media (max-width:560px){
  .md-sci-chart{padding:var(--sp-4)}
  .md-sci-chart-scroll{overflow-x:auto;margin:0 calc(var(--sp-4) * -1);padding:0 var(--sp-4);-webkit-overflow-scrolling:touch}
  .md-sci-chart-scroll svg{width:620px;max-width:none}
  .md-sci-chart-scroll::after{content:"옆으로 밀어서 보기 →";display:block;margin-top:var(--sp-1);font-size:var(--fs-2xs);color:var(--ink-3)}
}

/* ══════════ 봉침요법 허브 페이지 부품 (care-beevenom.html, 2026-09-27 병원 수정 오더) ══════════
   새 class 만 더했습니다(기존 공통 CSS 는 그대로). 갈림길 · 연구 카드(.md-hub) · 척추/관절 두 칸(.md-dual)
   · 연구 카드 속 작은 그림(.md-sci-mini) · 연구 원자료 줄(.md-refs) · 맞춤 치료 도식(.md-orbit) · 인용 강조(.md-hl-quote). */
.dx-lead > p + p{margin-top:var(--sp-3)}
.md-hl-quote{align-self:center;padding:var(--rhythm-sm)}
.md-hl-quote p:not(.md-hl-h){font-size:var(--fs-h5) !important;font-weight:700;line-height:1.6 !important;letter-spacing:-.02em}
/* 척추 / 관절 두 칸 */
.md-dual{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.md-dual-col{padding:var(--sp-6);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.md-dual-col > .md-h3{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4)}
.md-dual-col > .md-h3::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--acc)}
.md-dual-col .md-tags li{font-size:var(--fs-sm);padding:.35rem .9rem}
.md-dual + .md-note{margin-top:var(--sp-5) !important}
/* 갈림길 · 연구 카드 — 같은 크기 두 장 */
.md-hub{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-5)}
.md-hub-card{display:flex;flex-direction:column;padding:var(--rhythm-sm);border-radius:var(--r-l);background:var(--surface);
  border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .2s,box-shadow .2s}
.md-hub-card:hover,.md-hub-card:focus-visible{border-color:var(--acc);box-shadow:var(--shadow-m)}
.md-hub-k{align-self:flex-start;padding:.18rem .7rem;border-radius:999px;background:var(--acc-soft);color:var(--acc);font-size:var(--fs-xs);font-weight:800;letter-spacing:.04em}
.md-hub-card h3{margin-top:var(--sp-4);font-size:var(--fs-h4);font-weight:800;letter-spacing:-.03em;line-height:1.3}
.md-hub-sub{margin-top:var(--sp-2);font-size:var(--fs-md);font-weight:700;color:var(--acc)}
.md-hub-card p:not(.md-hub-sub){margin-top:var(--sp-3);font-size:var(--fs-md);line-height:1.75;color:var(--ink-2);word-break:keep-all}
.md-hub-go{margin-top:auto;padding-top:var(--sp-6);font-size:var(--fs-md);font-weight:800;color:var(--acc)}
.md-hub-sec{background:linear-gradient(180deg,var(--surface) 0%,var(--acc-soft) 100%)}
html[data-theme="dark"] .md-hub-sec{background:var(--surface)}
.md-research{margin-top:var(--sp-6)}
/* 연구 카드 속 작은 그림 — 인포그래픽을 줄인 것 */
.md-sci-mini{margin-top:var(--sp-5);padding:var(--sp-4);border-radius:var(--r);background:var(--surface-2)}
.md-sci-mini svg{display:block;width:100%;max-width:300px;height:auto}
.md-sci-mini line{stroke:var(--ink-3);stroke-width:1}
.md-sci-mini .n{fill:#8A95A3}
.md-sci-mini .i{fill:#C62A2F}
.md-sci-mini .b{fill:var(--acc)}
.md-sci-mini .d{fill:var(--deep)}
html[data-theme="dark"] .md-sci-mini .d{fill:#5F6B7A}
.md-sci-mini text{fill:var(--ink-2);font-size:13px;font-weight:700}
.md-sci-mini > span{display:block;margin-top:var(--sp-2);font-size:var(--fs-xs);color:var(--ink-3)}
/* 연구 원자료 · 방송 보도 — 작은 네 칸(연구 카드보다 비중을 낮춤) */
.md-refs-h{margin-top:var(--sp-8);font-size:var(--fs-md);font-weight:700;color:var(--ink-2)}
.md-refs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-3);max-width:760px}
.md-refs figure{margin:0;padding:var(--sp-2);border-radius:var(--r-s);background:var(--surface);border:1px solid var(--line)}
.md-refs a{display:block}
.md-refs img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:top;border-radius:6px}
.md-refs figcaption{margin-top:var(--sp-2);font-size:var(--fs-2xs);line-height:1.45;color:var(--ink-2)}
.md-refs figcaption b{display:block;color:var(--acc);font-size:var(--fs-2xs)}
/* 환자 맞춤 치료 — 가운데 원, 둘레에 치료 여섯 */
.md-orbit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"a . b" "c m d" "e . f";gap:var(--sp-4);
  max-width:760px;margin:var(--sp-7) auto 0;align-items:center}
.md-orbit-core{grid-area:m;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;background:var(--deep);color:#fff;text-align:center;padding:var(--sp-4)}
.md-orbit-core b{font-size:var(--fs-lg);font-weight:800;line-height:1.35;letter-spacing:-.02em}
.md-orbit-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);border-radius:999px;background:var(--surface);
  border:1px solid var(--line);font-size:var(--fs-md);font-weight:700;color:var(--ink);text-decoration:none;transition:border-color .2s}
.md-orbit-item:hover,.md-orbit-item:focus-visible{border-color:var(--acc)}
.md-orbit-item i{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:50%;background:var(--acc-soft);color:var(--acc);
  font-style:normal;font-size:var(--fs-2xs);font-weight:800}
.md-orbit-item:nth-of-type(1){grid-area:a}.md-orbit-item:nth-of-type(2){grid-area:b}.md-orbit-item:nth-of-type(3){grid-area:c}
.md-orbit-item:nth-of-type(4){grid-area:d}.md-orbit-item:nth-of-type(5){grid-area:e}.md-orbit-item:nth-of-type(6){grid-area:f}
@media (max-width:900px){
  .md-dual,.md-hub{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .md-refs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .md-orbit{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"m m" "a b" "c d" "e f";gap:var(--sp-3)}
  .md-orbit-core{aspect-ratio:auto;border-radius:var(--r-l);padding:var(--sp-5)}
  .md-orbit-item{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm)}
}

/* 약침요법 개요 페이지 (care-pharmacopuncture.html, 2026-09-27 병원 수정 오더) — 봉침요법 개요 부품에 두 가지만 더함.
   .md-hub-img: 갈림길 카드 위 그림(두 카드 같은 16:9 틀) / .md-sci-flow-6: 설명 없이 이름만 있는 6단계 차례. */
.md-hub-img{margin:calc(var(--rhythm-sm) * -1) calc(var(--rhythm-sm) * -1) var(--sp-5);aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-l) var(--r-l) 0 0;background:var(--surface-2)}
.md-hub-img img{display:block;width:100%;height:100%;object-fit:cover}
.md-sci-flow-6 > li{padding:var(--sp-4) var(--sp-4) var(--sp-5)}
.md-sci-flow-6 b{font-size:var(--fs-md)}
@media (max-width:1100px){ .md-sci-flow-6{grid-template-columns:repeat(3,minmax(0,1fr))} .md-sci-flow-6 > li:nth-child(odd)::after{display:block} .md-sci-flow-6 > li:nth-child(3n+1)::after{display:none} }
@media (max-width:560px){ .md-sci-flow-6{grid-template-columns:minmax(0,1fr)} .md-sci-flow-6 > li:nth-child(3n+1)::after{display:block} .md-sci-flow-6 > li:first-child::after{display:none} }
@media (max-width:560px){ .md-sci-flow > li:first-child::after{display:none !important} } /* 휴대폰 세로 흐름에서 첫 칸 위에 ↓ 가 붙던 것 (2026-09-27) */

/* 전침요법 개요 페이지 (care-electroacupuncture.html, 2026-09-27) — 부위별 전침치료 그림 줄(.md-parts, 1:1 일곱 장). 나머지는 봉침 · 약침 개요 부품 그대로. */
.md-parts{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--sp-3);margin-top:var(--sp-3)}
.md-parts figure{margin:0}
.md-parts img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.md-parts figcaption{margin-top:var(--sp-2);font-size:var(--fs-sm);font-weight:700;text-align:center;color:var(--ink-2)}
@media (max-width:900px){ .md-parts{grid-template-columns:repeat(4,minmax(0,1fr))} }
@media (max-width:560px){ .md-parts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)} }

/* 한약요법 개요 페이지 (care-herbal.html, 2026-09-27 병원 수정 오더) — 한약처방 체계 부품. 나머지는 봉침 · 약침 · 전침 개요 부품 그대로.
   .md-rx-main: 맞춤 탕약 큰 카드(그림 16:9 + 글, 환제 카드보다 한 단계 크게) / .md-pills · .md-pill: 척추고 · 관절고 · 재생고 세 장(같은 4:5 그림 · 같은 글 틀)
   / .md-rx-rel: 탕약과 환제 비교 / .md-roles: '쉽게 구분하면' 네 칸(한약 칸만 .is-self 로 강조). 가격 · 구매 요소 없음. */
.md-rx-main{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);border-radius:var(--r-l);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-m)}
.md-rx-img{min-height:100%;background:var(--surface-2)}
.md-rx-img img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.md-rx-body{padding:var(--rhythm-sm)}
.md-rx-body h3{margin-top:var(--sp-4);font-size:var(--fs-h3);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.md-rx-body p:not(.md-rx-quote){margin-top:var(--sp-3);font-size:var(--fs-md);line-height:1.8;color:var(--ink-2);word-break:keep-all}
.md-rx-quote{margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);border-radius:var(--r);background:var(--acc-soft);border-left:4px solid var(--acc);
  font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.md-rx-h{margin-top:var(--sp-9);font-size:var(--fs-h5);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.md-rx-p{margin-top:var(--sp-2);max-width:48em;font-size:var(--fs-md);line-height:1.8;color:var(--ink-2)}
.md-pills{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-5)}
.md-pill{display:flex;flex-direction:column;padding:var(--sp-5);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.md-pill-img{margin:calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-5);aspect-ratio:4/5;overflow:hidden;border-radius:var(--r-l) var(--r-l) 0 0;background:#111}
.md-pill-img img{display:block;width:100%;height:100%;object-fit:cover}
.md-pill h4{font-size:var(--fs-h5);font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.md-pill-sub{margin-top:var(--sp-1);font-size:var(--fs-sm);font-weight:700;color:var(--acc)}
.md-pill p:not(.md-pill-sub){margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2);word-break:keep-all}
.md-rx-rel{margin-top:var(--sp-9);padding:var(--rhythm-sm);border-radius:var(--r-l);background:var(--surface-2)}
.md-roles{margin-top:var(--sp-3)}
.md-roles a.md-card{text-decoration:none;color:inherit;transition:border-color .2s}
.md-roles a.md-card:hover,.md-roles a.md-card:focus-visible{border-color:var(--acc)}
.md-roles .md-h3{margin-bottom:0;font-size:var(--fs-md)}
.md-roles .md-card.is-self{background:var(--deep);border-color:var(--deep)}
.md-roles .md-card.is-self .md-h3{color:#fff}
.md-roles .md-card.is-self .md-card-n{background:rgba(255,255,255,.15);color:#fff}
@media (max-width:900px){
  .md-rx-main{grid-template-columns:minmax(0,1fr)}
  .md-rx-img{min-height:0}
  .md-pills{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
  .md-pill{padding:var(--sp-4)}
  .md-pill-img{margin:calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-4)}
}
@media (max-width:640px){
  .md-pills{grid-template-columns:minmax(0,1fr)}
  .md-pill{display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-areas:"img h" "img s" "img p";column-gap:var(--sp-4);align-items:start}
  .md-pill-img{grid-area:img;margin:0;border-radius:var(--r)}
  .md-pill h4{grid-area:h}.md-pill-sub{grid-area:s}.md-pill p:not(.md-pill-sub){grid-area:p;margin-top:var(--sp-2)}
  .md-rx-rel{padding:var(--sp-5)}
}



/* 비수술 재건치료(옛 6대 치료요법) 연결도 (care.html #therapies, 2026-09-27) — 병원 인포그래픽(원형도)을 따른 그림. 가운데 원을 여섯 요법 원이 육각형(위 꼭짓점, 반지름 37)으로 둘러싸고
   가운데 ↔ 각 요법 · 이웃한 요법끼리 선으로 잇습니다(SVG 0~100 좌표). .tx-n.n1~n6: 봉침(위) → 약침 → 전침 → 한약(아래) → 추나 → 운동, 시계 방향.
   한 요법에 마우스를 올리면 그 요법에 닿은 선만 진해집니다(:has). 640px 이하에서는 선을 숨기고 가운데 칸 + 2열 카드.
   .tx-syn: 아래 '함께 쓸 때 이렇게 이어집니다' 카드 3장. */
.tx-net{position:relative;width:100%;max-width:800px;aspect-ratio:1;margin:var(--sp-6) auto 0}
.tx-net::before{content:"";position:absolute;inset:6%;border-radius:50%;background:radial-gradient(closest-side,var(--acc-soft),transparent);pointer-events:none}
.tx-net-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tx-halo{fill:none;stroke:var(--acc);stroke-opacity:.08;stroke-width:.3}
.tx-l{stroke:var(--deep);stroke-opacity:.35;stroke-width:.3;stroke-linecap:round;transition:stroke-opacity .2s,stroke-width .2s,stroke .2s}
.tx-dots circle{fill:var(--acc);stroke:var(--surface);stroke-width:.4}
.tx-core{position:absolute;left:50%;top:50%;width:34%;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-content:center;justify-items:center;gap:var(--sp-2);
  border-radius:50%;background:radial-gradient(circle at 50% 35%,#24507F,var(--deep) 70%);color:#fff;text-align:center;padding:var(--sp-5);
  box-shadow:0 0 0 8px var(--acc-soft),0 18px 40px rgba(23,54,94,.28)}
.tx-core-k{font-size:var(--fs-md);font-weight:600;color:rgba(255,255,255,.85)}
.tx-core b{font-size:var(--fs-h3);font-weight:800;letter-spacing:-.03em;line-height:1.15;color:#F3E3B5}
.tx-core-v{margin-top:var(--sp-1);padding-top:var(--sp-2);border-top:1px solid rgba(255,255,255,.3);font-size:var(--fs-xs);color:rgba(255,255,255,.8);word-break:keep-all}
.tx-nodes{list-style:none;margin:0;padding:0}
.tx-n{position:absolute;width:25%;aspect-ratio:1;transform:translate(-50%,-50%)}
.tx-n.n1{left:50%;top:13%}.tx-n.n2{left:82.04%;top:31.5%}.tx-n.n3{left:82.04%;top:68.5%}
.tx-n.n4{left:50%;top:87%}.tx-n.n5{left:17.96%;top:68.5%}.tx-n.n6{left:17.96%;top:31.5%}
.tx-n a{display:grid;place-content:center;justify-items:center;gap:.25rem;width:100%;height:100%;padding:var(--sp-3);border-radius:50%;
  background:var(--surface);border:1px solid var(--line);box-shadow:0 0 0 6px color-mix(in srgb,var(--surface) 70%,transparent),0 10px 26px rgba(23,54,94,.12);
  text-align:center;text-decoration:none;color:var(--ink);transition:border-color .2s,transform .2s,box-shadow .2s}
.tx-n a:hover,.tx-n a:focus-visible{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 0 0 6px var(--acc-soft),0 14px 30px rgba(29,91,176,.2)}
.tx-n svg{width:3rem;height:3rem;margin-bottom:.15rem;fill:none;stroke:var(--deep);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.tx-n a:hover svg,.tx-n a:focus-visible svg{stroke:var(--acc)}
.tx-n b{font-size:var(--fs-h5);font-weight:800;letter-spacing:-.03em}
.tx-n span{font-size:var(--fs-xs);line-height:1.4;color:var(--ink-3);word-break:keep-all}
.tx-net:has(.n1 a:hover,.n1 a:focus-visible) :is(.s1,.r12,.r61),
.tx-net:has(.n2 a:hover,.n2 a:focus-visible) :is(.s2,.r12,.r23),
.tx-net:has(.n3 a:hover,.n3 a:focus-visible) :is(.s3,.r23,.r34),
.tx-net:has(.n4 a:hover,.n4 a:focus-visible) :is(.s4,.r34,.r45),
.tx-net:has(.n5 a:hover,.n5 a:focus-visible) :is(.s5,.r45,.r56),
.tx-net:has(.n6 a:hover,.n6 a:focus-visible) :is(.s6,.r56,.r61){stroke:var(--acc);stroke-opacity:1;stroke-width:.55}
.tx-net-note{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);margin-top:var(--sp-6);font-size:var(--fs-md);color:var(--ink-2);text-align:center;word-break:keep-all}
.tx-net-note::before,.tx-net-note::after{content:"";flex:0 1 5rem;height:1px;background:var(--acc);opacity:.4}
.tx-syn-h{margin-top:var(--sp-9);font-size:var(--fs-h5);font-weight:800;letter-spacing:-.03em;color:var(--ink);text-align:center}
.tx-syn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);margin-top:var(--sp-5)}
.tx-syn-card{padding:var(--sp-6) var(--sp-5);border-radius:var(--r-l);background:var(--surface-2);border-top:4px solid var(--acc);text-align:center}
.tx-syn-n{font-size:var(--fs-2xs);font-weight:800;letter-spacing:.1em;color:var(--acc)}
.tx-syn-card h4{margin-top:var(--sp-2);font-size:var(--fs-md);font-weight:800;color:var(--ink)}
.tx-syn-k{margin-top:var(--sp-2);font-weight:800;color:var(--deep)}
.tx-syn-k a{color:inherit;text-decoration:underline;text-decoration-color:var(--acc-soft);text-underline-offset:3px}
.tx-syn-k a:hover{color:var(--acc)}
.tx-syn-card p:not(.tx-syn-k){margin-top:var(--sp-3);font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2);word-break:keep-all}
@media (max-width:900px){
  .tx-n a{padding:var(--sp-2)}
  .tx-n svg{width:2rem;height:2rem}
  .tx-n b{font-size:var(--fs-md)}
  .tx-n span{font-size:var(--fs-2xs)}
  .tx-core b{font-size:var(--fs-h4)}
  .tx-syn{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .tx-net{aspect-ratio:auto;display:grid;gap:var(--sp-3)}
  .tx-net::before,.tx-net-lines{display:none}
  .tx-core{position:static;width:auto;aspect-ratio:auto;transform:none;border-radius:var(--r-l);padding:var(--sp-5);box-shadow:none}
  .tx-nodes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
  .tx-n{position:static;width:auto;aspect-ratio:auto;transform:none}
  .tx-n a{height:100%;align-content:start;border-radius:var(--r-l);padding:var(--sp-4) var(--sp-3);box-shadow:var(--shadow-m)}
  .tx-n span{font-size:var(--fs-xs)}
  .tx-net-note::before,.tx-net-note::after{flex-basis:1.5rem}
}

/* ══════════ 비수술 치료법 리뉴얼 (care.html, 2026-09-28 병원 시안) — .cr-* ══════════
   시안(남색 그라데이션 · 금색 · 단계별 세 색)을 C안 기준(파랑 하나 · 흰색 ↔ 회색 판 · 모서리 8/12/16/20)으로 옮기며 새로 만든 부품만 모았습니다.
   나머지는 공통 부품(.dx-hero · .md-* · .md-hub · .tx-net · .seg · .qa · .band)을 그대로 씁니다.
   .cr-facts: 첫 화면 요약 다섯 칸 / .cr-vs: 비교 두 칸(오른쪽 .is-deep) / .tx-st: 연결도 요법 원 위 단계 딱지
   / .cr-steps: 치료 순서 세 카드 + 화살표 / .cr-seg · .cr-panel: 요법별 탭 칸 / .cr-dl: 척추 · 관절 카드 속 정의 목록
   / .cr-tl: 근거 연표 / .cr-proc: 진료 과정 다섯 칸 / .cr-band-info: 맺음 CTA 밑 진료시간 줄. */
.cr-facts{grid-template-columns:repeat(5,minmax(0,1fr))}
.cr-facts-sec{padding:var(--sp-7) 0 0}
.cr-facts-sec .dx-facts{margin-top:0}
.cr-facts b{font-size:var(--fs-h5)}
@media (max-width:1000px){ .cr-facts{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .cr-facts{grid-template-columns:repeat(2,minmax(0,1fr))} .cr-facts li{padding:var(--sp-4)} }

.cr-vs-list{list-style:none;margin:0;padding:0}
.cr-vs-list li{padding:var(--sp-3) 0;border-top:1px dashed var(--line-2);font-size:var(--fs-md);color:var(--ink-2)}
.cr-vs-list li:first-child{border-top:0;padding-top:0}
.md-dual-col.is-deep{background:var(--deep);border-color:var(--deep)}
.md-dual-col.is-deep > .md-h3{color:#fff}
.md-dual-col.is-deep > .md-h3::before{background:#fff}
.md-dual-col.is-deep .cr-vs-list li{color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.2)}

.tx-n a{position:relative}
.tx-st{position:absolute;top:4%;right:4%;padding:.1rem .5rem;border-radius:999px;background:var(--acc);color:var(--acc-ink);
  font-style:normal;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.02em;line-height:1.5}
@media (max-width:640px){ .tx-st{top:var(--sp-2);right:var(--sp-2)} }

.cr-steps{list-style:none;padding:0}
.cr-steps > .md-card{position:relative;display:flex;flex-direction:column;border-top:3px solid var(--acc)}
.cr-steps > .md-card > p + p{margin-top:var(--sp-3)}
.cr-steps .cr-step-sub{margin-top:calc(var(--sp-2) * -1);font-size:var(--fs-md);font-weight:700;color:var(--acc)}
.cr-steps .md-tags{margin-top:auto;padding-top:var(--sp-5)}
.cr-steps .md-tags li{background:var(--acc-soft);border-color:transparent;color:var(--acc);font-size:var(--fs-xs);font-weight:700}
/* 2026-10-16 '치료의 세 가지 방향' — 함께 적용하는 방향이라 카드 사이 화살표 없음. 아래 안내 상자(.cr-info)는 왼쪽 줄 대신 i 표 */
.md-hl.cr-info{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-5);border-left:0}
.md-hl.cr-info::before{content:"i";flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;
  background:var(--acc);color:var(--acc-ink);font:800 1rem/1 Georgia,serif}
.md-hl.cr-info p{font-size:var(--fs-sm)}

.cr-seg-wrap{display:flex;justify-content:center;margin-bottom:var(--sp-6)}
.cr-seg{flex-wrap:wrap;justify-content:center}
.cr-panel{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-radius:var(--r-xl);overflow:hidden;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-m)}
.cr-panel + .cr-panel{margin-top:var(--sp-5)} /* JS 가 없어 여섯 칸이 다 보일 때 */
.cr-panel-side{display:flex;flex-direction:column;padding:var(--rhythm-sm);background:var(--deep);color:#fff}
.cr-pill{align-self:flex-start;padding:.2rem .75rem;border-radius:999px;background:rgba(255,255,255,.14);
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.02em}
.cr-panel-side h3{margin-top:var(--sp-4);font-size:var(--fs-h3);font-weight:800;letter-spacing:-.03em;line-height:1.2}
.cr-panel-side > p:not(.cr-big){margin-top:var(--sp-3);font-size:var(--fs-md);line-height:1.8;color:rgba(255,255,255,.85);word-break:keep-all}
.cr-big{margin-top:auto;padding-top:var(--sp-6);border-top:1px solid rgba(255,255,255,.2)}
.cr-panel-side > p + .cr-big{margin-top:auto}
.cr-panel-side > p:not(.cr-big){margin-bottom:var(--sp-7)}
.cr-big b{display:block;font-size:var(--fs-h4);font-weight:800;letter-spacing:-.03em;line-height:1.25}
.cr-big span{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:rgba(255,255,255,.75)}
.cr-panel-main{padding:var(--rhythm-sm)}
.cr-panel-main h4{margin-bottom:var(--sp-3);font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em;color:var(--acc)}
.cr-panel-main .md-tags{margin-bottom:var(--sp-6)}
.cr-points{list-style:none;margin:0 0 var(--sp-6);padding:0;display:grid;gap:var(--sp-3)}
.cr-points li{position:relative;padding-left:2rem;font-size:var(--fs-md);line-height:1.75;color:var(--ink-2);word-break:keep-all}
.cr-points li::before{content:"";position:absolute;left:0;top:.3em;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--acc-soft)}
.cr-points li::after{content:"";position:absolute;left:.47rem;top:.52em;width:.36rem;height:.62rem;border-right:2.5px solid var(--acc);border-bottom:2.5px solid var(--acc);transform:rotate(45deg)}
.cr-points strong{font-weight:700;color:var(--ink)}
.cr-links{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.cr-links a{padding:.5rem 1rem;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--surface);
  font-size:var(--fs-sm);font-weight:700;color:var(--acc);transition:border-color .2s,background .2s,color .2s}
.cr-links a:hover,.cr-links a:focus-visible{border-color:var(--acc)}
.cr-links a.is-main{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.cr-links a.is-main:hover,.cr-links a.is-main:focus-visible{background:var(--acc-hover);border-color:var(--acc-hover)}
@media (max-width:900px){ .cr-panel{grid-template-columns:minmax(0,1fr)} }

.cr-dl{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--sp-2) var(--sp-4);margin:var(--sp-5) 0 0;padding:var(--sp-5) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:var(--fs-sm);line-height:1.7}
.cr-dl dt{font-weight:800;color:var(--ink)}
.cr-dl dd{margin:0;color:var(--ink-2);word-break:keep-all}
@media (max-width:560px){ .cr-dl{grid-template-columns:minmax(0,1fr);gap:0} .cr-dl dd{margin-bottom:var(--sp-3)} }
/* care.html 절 제목 01~08(2026-10-16, 06 시안으로 통일) — 파란 번호 + 소제목 한 줄 · 제목 가운데. 06 표, 표는 줄마다 선 · 이름과 내용 사이 짧은 세로선 */
.cr-head-tag{display:flex;justify-content:center;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);font-size:var(--fs-md);color:var(--ink-2)}
.cr-head-tag .md-num{background:var(--acc);color:var(--acc-ink)}
.cr-head-tag + .md-head-center{margin-bottom:var(--sp-3)}
.cr-head-tag + .md-head-center .md-h2{font-size:var(--fs-h3);line-height:1.3}
.md-head-wrap:has(> .cr-head-tag){margin-bottom:var(--sp-7)}
.cr-hub .md-hub-sub{font-size:var(--fs-h5);line-height:1.45;letter-spacing:-.02em}
.cr-dl.is-rows{grid-template-columns:6.5rem minmax(0,1fr);gap:0;padding:0;font-size:var(--fs-md)}
.cr-dl.is-rows > dt,.cr-dl.is-rows > dd{display:flex;align-items:center;padding:var(--sp-4) 0}
.cr-dl.is-rows > dd{position:relative;display:block;padding-left:var(--sp-5)}
.cr-dl.is-rows > dd::before{content:"";position:absolute;left:0;top:50%;height:1.6em;width:1px;transform:translateY(-50%);background:var(--line-2)}
.cr-dl.is-rows > dt:not(:first-of-type),.cr-dl.is-rows > dt:not(:first-of-type) + dd{border-top:1px solid var(--line)}
@media (max-width:560px){
  .cr-dl.is-rows{grid-template-columns:5rem minmax(0,1fr);font-size:var(--fs-sm)}
  .cr-dl.is-rows > dd{margin-bottom:0;padding-left:var(--sp-4)}
}

.cr-tl{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4);list-style:none;margin:var(--sp-4) 0 0;padding:0}
.cr-tl::before{content:"";position:absolute;left:0;right:0;top:.5rem;height:2px;background:var(--acc-soft)}
.cr-tl li{position:relative;padding-top:var(--sp-7)}
.cr-tl li::before{content:"";position:absolute;left:0;top:0;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--surface);border:3px solid var(--acc)}
.cr-tl-y{display:block;font-size:var(--fs-h5);font-weight:800;letter-spacing:-.02em;color:var(--acc);font-variant-numeric:tabular-nums}
.cr-tl h3{margin-top:var(--sp-1);font-size:var(--fs-md);font-weight:700;line-height:1.45;letter-spacing:-.02em;color:var(--ink);word-break:keep-all}
.cr-tl p{margin-top:var(--sp-1);font-size:var(--fs-xs);line-height:1.6;color:var(--ink-3)}
.cr-tl a{display:inline-block;margin-top:var(--sp-2);font-size:var(--fs-xs);font-weight:700;color:var(--acc)}
@media (max-width:900px){
  .cr-tl{grid-template-columns:minmax(0,1fr);gap:var(--sp-5);padding-left:var(--sp-7)}
  .cr-tl::before{left:.45rem;right:auto;top:0;bottom:0;width:2px;height:auto}
  .cr-tl li{padding-top:0}
  .cr-tl li::before{left:calc(var(--sp-7) * -1);top:.35rem}
}

.cr-proc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3);list-style:none;margin:0;padding:0}
.cr-proc li{display:flex;flex-direction:column;padding:var(--sp-5);border-radius:var(--r-l);background:var(--surface);border:1px solid var(--line)}
.cr-proc li > .md-card-n{align-self:flex-start}
.cr-proc b{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.03em;color:var(--ink)}
.cr-proc li > span:not(.md-card-n){margin-top:var(--sp-1);font-size:var(--fs-sm);line-height:1.6;color:var(--ink-2);word-break:keep-all}
@media (max-width:1000px){ .cr-proc{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:560px){ .cr-proc{grid-template-columns:repeat(2,minmax(0,1fr))} .cr-proc li{padding:var(--sp-4)} }

.band .cr-band-info{margin:var(--sp-6) 0 0;font-size:var(--fs-xs);line-height:1.8;color:rgba(255,255,255,.72)}
.cr-steps > .md-card > .md-card-n{align-self:flex-start}
/* 가운데 머리(02 · 04 · 05) — 번호를 제목 위에 따로 세웁니다(옆에 두면 가운데 정렬이 번호만큼 비뚤어 보임). */
.md-head.cr-head-stack{flex-direction:column;gap:var(--sp-2)}
@media (min-width:901px){ .cr-tl.is-six{grid-template-columns:repeat(6,minmax(0,1fr))} } /* 근거 연표 여섯 칸(1996 되살림, 2026-09-28) */

/* ══════════ 무릎통증 상세 — 네 가지 질환 개요 (disease-knee-pain.html, 2026-09-28) — .kp-* ══════════
   체크 목록(.cr-points) · 정의 목록(.cr-dl)은 비수술 치료법(care.html) 부품을 그대로 씁니다.
   .sym-ph.is-fit: 질환 카드의 해부 그림을 자르지 않고 흰 바탕에 통째로(병원 그림이 흰 바탕이라 어두운 화면에서도 흰 판)
   / .kp-h: 개요 속 작은 제목 / .kp-go: 상세페이지로 가는 줄 / .kp-cmp: 네 질환 비교표(좁으면 옆으로 밉니다). */
.sym-ph.is-fit{background:#fff}
.sym-ph.is-fit img{object-fit:contain;padding:var(--sp-2)}
.kp-h{margin:var(--sp-6) 0 var(--sp-3);font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em;color:var(--acc)}
.md-text .cr-points{margin-bottom:0}
.md-text .cr-dl{margin-top:var(--sp-6)}
.kp-go{display:inline-block;margin-top:var(--sp-5);font-size:var(--fs-md);font-weight:800;color:var(--acc)}
.kp-go:hover{text-decoration:underline;text-underline-offset:3px}
.md-frame:has(img[src*="-hero.webp"]){background:#fff}
.kp-cmp-wrap{overflow-x:auto;border-radius:var(--r-l);border:1px solid var(--line);background:var(--surface)}
.kp-cmp{width:100%;min-width:760px;border-collapse:collapse;table-layout:fixed;font-size:var(--fs-sm);line-height:1.65}
.kp-cmp th,.kp-cmp td{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line);text-align:left;vertical-align:top;word-break:keep-all}
.kp-cmp tbody tr:last-child > *{border-bottom:0}
.kp-cmp thead th{background:var(--acc-soft);font-size:var(--fs-md);font-weight:800;color:var(--ink)}
.kp-cmp thead th:first-child{width:8.5rem}
.kp-cmp thead a{color:var(--acc)}
.kp-cmp thead a:hover{text-decoration:underline;text-underline-offset:3px}
.kp-cmp tbody th{font-weight:800;color:var(--ink);background:var(--surface-2)}
.kp-cmp td{color:var(--ink-2)}
@media (max-width:560px){ .kp-cmp th,.kp-cmp td{padding:var(--sp-3)} .kp-cmp thead th:first-child{width:6.5rem} }
/* 무릎통증 상세 — 회색 비교표(06)와 회색 근거(07) 사이에 끼어 세 판이 한 덩어리로 보여, 이 페이지의 문답만 흰 바탕으로 (2026-09-28). */
.orig-qa.is-plain{background:var(--bg)}
.kp-cmp tbody th,.kp-cmp thead th:first-child{position:sticky;left:0;z-index:1} /* 옆으로 밀어도 항목 이름 칸은 남깁니다 */
.kp-cmp thead th:first-child{background:linear-gradient(var(--acc-soft),var(--acc-soft)),var(--surface)} /* 어두운 화면의 --acc-soft 는 반투명이라 밑 글자가 비치지 않게 */
/* 무릎통증 랜딩(lp-knee-pain.html) 감별 절 — 세 조직 그림 한 줄 (2026-09-28) */
.kp-trio ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2);list-style:none;margin:0;padding:var(--sp-3)}
.kp-trio li{text-align:center}
.kp-trio img{width:100%;aspect-ratio:1;object-fit:contain}
.kp-trio li span{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);font-weight:700;color:#4A5563}
/* ══════════ 그림 자리 표시 (.img-todo) — 2026-09-28 ══════════
   병원 그림을 아직 받지 못한 자리입니다. HTML 에서 'img-todo' 로 찾아 <img> 로 바꿔 주세요. 공개 전에 모두 채워야 합니다. */
.img-todo{display:grid;place-content:center;gap:var(--sp-1);aspect-ratio:4/3;margin-bottom:var(--sp-4);padding:var(--sp-4);
  border:2px dashed #D99A00;border-radius:var(--r);background:#FFF7DD;color:#7A5600;text-align:center;font-size:var(--fs-sm);font-weight:800;line-height:1.5}
.img-todo small{font-size:var(--fs-xs);font-weight:600}
.md-frame > .img-todo{position:absolute;inset:0;margin:0;aspect-ratio:auto;border-radius:inherit}
.kp-links{margin-top:var(--sp-3) !important;font-size:var(--fs-sm) !important;font-weight:700}
.kp-links a,.kp-cmp td a{color:var(--acc);font-weight:700}
/* ══════════ 상세페이지 '이런 증상이라면' (.sx-*) — 2026-09-28 병원 요청('답답해 보인다')으로 다시 짠 틀 ══════════
   손가락관절염 · 아킬레스건염 · 척추전방전위증 · 손목터널증후군 · 척추압박골절 상세의 #check 절.
   제목은 한 줄로 넓게, 아래는 그림(왼쪽 5) : 점검 목록(오른쪽 7). 목록은 칸(타일) 대신 넉넉한 줄 간격의 한 줄 목록. */
.sx-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;margin-top:var(--sp-6)}
.sx-fig .md-frame{box-shadow:var(--shadow-m)}
.sx-h{font-size:var(--fs-sm);font-weight:800;letter-spacing:.02em;color:var(--acc);margin-bottom:var(--sp-3)}
.sx-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-2)}
.sx-list li{position:relative;padding:var(--sp-4) 0 var(--sp-4) 2.4rem;border-bottom:1px solid var(--line);
  font-size:var(--fs-md);line-height:1.7;color:var(--ink-2);word-break:keep-all}
.sx-list li::before{content:"";position:absolute;left:0;top:calc(var(--sp-4) + .2em);width:1.5rem;height:1.5rem;border-radius:50%;background:var(--acc-soft)}
.sx-list li::after{content:"";position:absolute;left:.55rem;top:calc(var(--sp-4) + .45em);width:.4rem;height:.72rem;
  border-right:2.5px solid var(--acc);border-bottom:2.5px solid var(--acc);transform:rotate(45deg)}
.sx-list b{color:var(--ink);font-weight:700}
.sx-red{margin-top:var(--rhythm-block) !important}
@media (max-width:900px){
  .sx-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-7)}
  .sx-fig{max-width:520px}
}
.md-sec .sx-grid + .lp-redflag.sx-red{margin-top:var(--rhythm-block) !important}
/* ══════════ 랜딩페이지 문단 · 줄간격 통일 (body.lp-page, 2026-09-28 병원 요청) ══════════
   병원: '문단마다 너무 떨어진 곳도, 붙은 곳도 있으니 일관성 있게'. 재어 보니 본문 글 줄간격이 1.55 ~ 1.90 으로 부품마다 달랐고,
   목록 간격(12 · 16px), 머리 → 본문 간격(51 · 64px), 점검 목록 → 신호 상자(0 · 24px)가 페이지마다 달랐습니다. 랜딩페이지 28곳만 한 기준으로 맞춥니다.
   기준 — 읽는 글(16px 이상) 줄간격 1.75 · 작은 글(15px 이하 딱지 · 안내 줄) 1.6 · 목록 항목 사이 12px · 문단 사이 12px
          · 머리(.head) 아래 64px(넓은 화면) · 점검 목록 아래 신호 상자 24px. */
.lp-page main :is(p,li){line-height:1.75}
.lp-page main :is(.dx-eng,.res-tag,.rail-hint,.lp-src,.kicker,.dx-facts .k,.dx-facts .v,.lp-hero-alert){line-height:1.6}
.lp-page main h2.title,.lp-page main .dx-title{line-height:1.25}
.lp-page .orig-list > li{margin-bottom:var(--sp-3)}
.lp-page main :is(.head,.band,.lp-note,.a,.orig-body) p + p{margin-top:var(--sp-3)}
.lp-page .head{margin-bottom:clamp(2.6rem,4.5vw,4rem)}
.lp-page .checklist + .lp-redflag{margin-top:var(--sp-6)}
.lp-page .lp-hero-grid + .dx-facts{margin-top:var(--sp-7)}
.lp-page .feature-grid{align-items:start} /* 긴 그림 옆 글이 가운데로 내려가 제목 아래가 비어 보이던 것 — 글을 위에 붙입니다 */
/* 랜딩페이지 섹션 사이 여백 (2026-09-28 병원 지적 — 흰 섹션이 이어지면 위아래 여백이 겹쳐 문단 사이가 240px 가까이 비었습니다).
   섹션 위아래를 --rhythm-lg(40~72px)로 줄여 섹션 사이가 최대 약 144px. 인라인 padding-top:0 은 그대로 우선합니다. */
.lp-page main > section:not(.dx-hero){padding-top:var(--rhythm-lg);padding-bottom:var(--rhythm-lg)}
/* 제목(.head)이 있는 본문 섹션인데 HTML 에 padding-top:0 이 박혀 앞 섹션에 바싹 붙던 곳(예: 척추전방전위증 '수술에 대하여', 71px)을
   다른 섹션과 같은 간격(약 140px)으로. 맺음 상담 띠(.band) · 다른 질환 보기 줄처럼 끝에 모아 둔 덩어리는 그대로 붙여 둡니다. (2026-09-28) */
.lp-page main > section[style*="padding-top:0"]:has(> .wrap > .head){padding-top:var(--rhythm-lg) !important}
.lp-page .orig-list:last-child{margin-bottom:0}
.md-card > .kp-card-img{margin-bottom:var(--sp-4);background:#fff}
/* 2026-09-28 — 장식용 예전 그림을 뺀 뒤 그림 칸 없이 글만 남은 두 칸(.md-split)은 한 칸으로 넓게. */
.md-split:not(:has(> .md-fig)){grid-template-columns:minmax(0,1fr)}
.md-split:not(:has(> .md-fig)) .md-body{max-width:48em}
.ht-mgmt img{max-height:460px;object-fit:contain} /* 2026-09-29 새 사진(옹기 약탕기 등 세로로 긴 것)이 한 칸에서 너무 길어지지 않게 */
/* ══════════ 한약재관리 (herbal-care.html) 다시 편집 — 2026-09-29 병원 '산만해 보인다' ══════════
   여덟 단계를 세 묶음 같은 크기 카드로. 사진은 모두 같은 4:3 틀에 자르지 않고(흰 바탕), 세 칸(마지막 묶음은 두 칸). */
.hc-flow{justify-content:center;margin-top:var(--sp-7)}
.hc-cards .md-card{display:flex;flex-direction:column}
.hc-cards .md-card > .md-card-n{align-self:flex-start}
.hc-img{margin:calc(var(--rhythm-sm) * -1) calc(var(--rhythm-sm) * -1) var(--sp-5);border-radius:var(--r-l) var(--r-l) 0 0;border:0;border-bottom:1px solid var(--line);box-shadow:none;background:#fff}
.hc-img img{inset:var(--sp-3);width:calc(100% - 2 * var(--sp-3));height:calc(100% - 2 * var(--sp-3))}
.hc-cards.is-two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){ .hc-cards.is-two{grid-template-columns:minmax(0,1fr)} }

/* ══════════════════════════════════════════════════════════════
   2026-09-29 메인 개편 — 공통 헤더 6칸 · 드롭다운 · 휴대폰 메뉴 · 하단 고정바
   (docs/redesign/main-redesign-order.md 5절, 시안 docs/redesign/design/nav-*.dc.html)
   ⚠ 1024px 이상 = 메뉴 6칸이 펼쳐져 보임 / 1023px 이하 = 햄버거 + 하단 고정바.
     main.js 의 min-width:1024px 과 짝입니다.
   ══════════════════════════════════════════════════════════════ */
/* 2026-10-15 병원 요청 — 상단 메뉴 글씨를 볼드(700)로(그전 600) */
.menu > li > a{font-size:var(--fs-sm);font-weight:700;padding-inline:var(--sp-3)}
.m-quick{display:none}
.nav-act .btn{min-height:48px;--pad:1.1rem;font-size:var(--fs-xs);font-weight:700;gap:.45rem}
.nav-act .btn-line{border-color:var(--acc);color:var(--acc)}
.nav-act .btn svg{flex:none}
/* 2026-10-15 병원 요청 — 1280px 이상에서 예약 두 버튼(+ 화면 테마 버튼)을 조금 작게(실제 높이 60 → 46px, 위아래 안쪽 여백을 줄임),
   메뉴 칸 사이를 조금 넓게(2.4 → 8px). 1024~1279px 는 여섯 칸 + 버튼이 겨우 한 줄에 들어가므로 그 구간 값은 그대로 둡니다. */
@media (min-width:1280px){
  .menu{gap:var(--sp-2)}
  .nav-act .btn{min-height:46px;padding-block:var(--sp-2);--pad:.95rem}
  .nav-act .btn svg{width:16px;height:16px}
  .nav-act .icon-btn{width:46px;height:46px}
}
/* 1024~1279px — 여섯 칸 + 두 버튼이 한 줄에 들어가게 글자와 여백을 줄이고, 전화 버튼은 아이콘만 남깁니다. */
@media (min-width:1024px) and (max-width:1279px){
  .brand-logo{width:150px}
  .nav-inner{gap:var(--sp-2);padding-inline:var(--sp-4)}
  .menu > li > a{font-size:var(--fs-xs);padding-inline:var(--sp-2)}
  .nav-act .nav-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-act .nav-tel{--pad:.8rem}
  #theme{display:none}
}
@media (max-width:1023px){ .nav-act .btn{display:none} }

/* 화면 폭 전체 메가메뉴(증상별 질환 · 비수술 치료) — 묶음별 단 */
.mega-inner{grid-template-columns:minmax(0,1fr)}
.mega-panel.mega-wide{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(15rem,1.2fr);gap:var(--sp-7)}
.mega-panel.mega-wide-4{grid-template-columns:minmax(15rem,1.2fr) repeat(3,minmax(0,1fr))}
.mega-col{display:grid;align-content:start;gap:var(--sp-5)}
.mega-h{font-size:var(--fs-xs);font-weight:800;color:var(--acc);padding-bottom:var(--sp-2);
  border-bottom:2px solid var(--acc);margin-bottom:var(--sp-3);letter-spacing:-.01em}
.mega-links{display:grid;gap:.15rem;margin:0;padding:0;list-style:none}
.mega-links a{display:block;padding:.3rem var(--sp-2);margin-inline:calc(var(--sp-2) * -1);border-radius:var(--r-s);
  font-size:var(--fs-sm);font-weight:600;line-height:1.45;color:var(--ink);transition:color .18s,background .18s}
.mega-links a:hover{color:var(--acc);background:var(--surface-2)}
.mega-box{display:grid;align-content:start;align-self:start;gap:var(--sp-3);padding:var(--sp-5);border-radius:var(--r-l);background:var(--acc-soft)}
.mega-box p{font-size:var(--fs-xs);line-height:1.6;color:var(--ink-2)}
.mega-box .mega-box-t{font-size:var(--fs-sm);font-weight:800;color:var(--ink)}
.mega-box-btn{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:var(--r-s);
  background:var(--surface);border:1px solid var(--line-2);font-size:var(--fs-xs);font-weight:700;color:var(--ink)}
.mega-box-btn:hover{border-color:var(--acc);color:var(--acc)}
.mega-box-more{font-size:var(--fs-xs);font-weight:700;color:var(--acc)}
.mega-roles{display:grid;gap:.2rem;margin:0;font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2)}
.mega-roles dt{font-weight:800;color:var(--ink);margin-top:var(--sp-2)}
.mega-roles dt:first-child{margin-top:0}
.mega-roles dt a{color:inherit}
.mega-roles dt a:hover{color:var(--acc)}
.mega-roles dd{margin:0}

/* 일반 드롭다운(data-drop) — 그 메뉴 바로 밑의 작은 판. left 는 main.js 가 메뉴 글자 위치로 맞춥니다. */
.mega.is-drop{right:auto;min-width:14rem;max-width:calc(100vw - 2rem);
  border:1px solid var(--line);border-radius:0 0 var(--r) var(--r)}
.mega.is-drop .mega-inner{width:auto;padding:var(--sp-3) var(--sp-3)}
.mega.is-drop .mega-panel{grid-template-columns:minmax(0,1fr);gap:0}
.mega.is-drop .mega-links a{margin:0;padding:.55rem var(--sp-4);white-space:nowrap}

/* 휴대폰 메뉴 — 맨 위 전화 · 네이버 예약, 대메뉴 6칸 아코디언, 증상별 질환은 부위별 칩 */
@media (max-width:1023px){
  .m-quick{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2);padding:var(--sp-2) 0 var(--sp-4);
    border-bottom:1px solid var(--line)}
  .menu > li.m-quick > a.btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0;
    border-radius:10px;font-size:var(--fs-sm);font-weight:700}
  .menu > li.m-quick > a.btn-fill{color:var(--acc-ink);border:0}
  .menu > li.m-quick > a.btn-line{border:1.5px solid var(--acc);color:var(--acc)}
  .menu > li.has-mega.is-open > a{color:var(--acc)}
  .m-sub{display:block;padding:0 0 var(--sp-4)}
  .m-sub ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-4);margin:0;padding:0 0 0 var(--sp-3);list-style:none}
  .m-sub-h{margin:var(--sp-3) 0 var(--sp-1);padding-left:var(--sp-3);font-size:var(--fs-2xs);font-weight:800;color:var(--acc)}
  .m-sub.m-chips ul{display:flex;flex-wrap:wrap;gap:6px}
  .m-sub.m-chips a{min-height:36px;padding:.3rem .8rem;border-radius:999px;border:1px solid var(--line-2);
    background:var(--surface);font-size:var(--fs-xs);color:var(--ink)}
  .m-sub.m-chips a[aria-current="page"]{border-color:var(--acc)}
}

/* 하단 고정바 — '전화상담 | 네이버 예약' 두 칸. 1023px 이하에서 보입니다. */
.dock a{flex:1;flex-direction:row;gap:var(--sp-2);font-size:var(--fs-sm)}
.dock .primary{flex:1}
.dock .alt{background:var(--surface);border:1.5px solid var(--acc);color:var(--acc)}
@media (max-width:1023px){
  .dock{display:flex}
  footer{padding-bottom:calc(6rem + env(safe-area-inset-bottom))}
}
/* 맨 위로 — 오른쪽 아래 작은 원형 버튼. 휴대폰에서는 고정바 위로 띄웁니다. */
.to-top{position:fixed;right:1rem;bottom:1.2rem;z-index:105;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;background:var(--surface);color:var(--ink-2);border:1px solid var(--line-2);
  box-shadow:var(--shadow-m);opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .25s,transform .25s var(--ease),visibility 0s linear .25s}
.to-top.show{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s var(--ease)}
.to-top:hover{color:var(--acc);border-color:var(--acc)}
@media (max-width:1023px){ .to-top{bottom:calc(5.2rem + env(safe-area-inset-bottom))} }

/* 헤더 폭 통일 — 2026-09-29 병원 지적("페이지를 옮길 때마다 헤더가 줄었다 늘었다 한다").
   예전에는 홈만 1280px(본문 .hm-wrap 과 맞춤), 나머지 페이지는 1200px(--wrap) + 안쪽 여백 24px 이었습니다.
   이제 모든 페이지가 같은 폭 · 같은 바깥 여백을 씁니다. 홈 본문(home.css --hm-wrap)과 좌우 끝이 맞습니다.
   ⚠ 메뉴는 로고 바로 옆에 붙이고(margin-left 고정), 전화 · 예약 버튼만 오른쪽 끝으로 밉니다. */
:root{--nav-wrap:var(--wrap)}
.nav .nav-inner,.nav.stuck .nav-inner{width:min(100% - 2.5rem,var(--nav-wrap));padding-inline:0}
.mega-inner{width:min(100% - 2.5rem,var(--nav-wrap))}
.nav-inner > nav{margin-left:3rem}
.nav-act{margin-left:auto}
@media (min-width:1024px) and (max-width:1279px){ .nav-inner > nav{margin-left:1.25rem} }
@media (max-width:767px){
  .nav .nav-inner,.nav.stuck .nav-inner{width:min(100% - 1.75rem,var(--nav-wrap))}
}

/* ---------- [비수술 치료] 메가메뉴 세 칸 (2026-09-29 병원 수정 오더 · 2026-09-30 최종 수정 오더) ----------
   왼쪽 통합 가이드 카드 30% | 척추질환 치료법 35% | 관절질환 치료법 35%. 척추 · 관절 사이는 옅은 세로선.
   왼쪽 카드의 세 항목은 설명이고 링크는 아래 버튼 하나입니다 — 버튼의 ::after 가 카드 전체를 덮어 카드 어디를 눌러도 care.html 로 갑니다.
   가운데 · 오른쪽은 항목마다 링크 카드(.mega-col-rows a)입니다. 이름 <b> + 보조 설명 <small> + 오른쪽 꺾쇠(::after). */
.mega-panel.mega-care3{grid-template-columns:30fr 35fr 35fr;gap:0;align-items:stretch}
.mega-care3 .mega-col-rows{padding-inline:clamp(1.5rem,3vw,3rem)}
.mega-care3 .mega-col-rows:last-child{padding-right:0}
.mega-care3 .mega-col-rows + .mega-col-rows{border-left:1px solid var(--line)}
.mega-feature{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-6);
  border-radius:var(--r-l);background:#E3ECFA;transition:background .2s}
.mega-feature:hover{background:#DAE6F9}
.mega-feature-k{align-self:flex-start;padding:.2rem .65rem;border-radius:999px;background:#fff;
  font-size:var(--fs-2xs);font-weight:800;color:var(--acc)}
.mega-feature-t{font-size:var(--fs-h4);font-weight:800;letter-spacing:-.02em;line-height:1.3;color:#0E1B33;word-break:keep-all}
.mega-feature-d{font-size:var(--fs-xs);line-height:1.6;color:var(--ink-2);word-break:keep-all}
.mega-feature-list{display:grid;gap:var(--sp-5);margin:var(--sp-3) 0 var(--sp-5);padding:0;list-style:none}
.mega-feature-list li{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-xs);color:var(--ink-2);line-height:1.4;word-break:keep-all}
.mega-feature-list b{display:block;font-size:var(--fs-sm);font-weight:800;color:#0E1B33}
.mega-feature-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:#fff;color:var(--acc)}
.mega-feature-btn{display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:auto;
  border-radius:var(--r);background:var(--acc);color:var(--acc-ink);font-size:var(--fs-sm);font-weight:700}
.mega-feature-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.mega-feature:hover .mega-feature-btn{background:var(--acc-hover)}
.mega-feature-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
html[data-theme="dark"] .mega-feature{background:var(--acc-soft)}
html[data-theme="dark"] .mega-feature-t,html[data-theme="dark"] .mega-feature-list b{color:var(--ink)}
html[data-theme="dark"] .mega-feature-k,html[data-theme="dark"] .mega-feature-ic{background:var(--surface)}
/* 링크 카드 — 아주 옅은 청색 바탕 + 청회색 1px 테두리. 올리면 바탕 · 테두리 · 이름이 파래지고 꺾쇠가 3px 오른쪽으로 갑니다.
   ⚠ 색은 --row-* 세 개로 묶었습니다(어두운 화면은 아래에서 바꿔 끼움). 휴대폰 아코디언(.m-acc-body)도 같은 색을 씁니다. */
.mega,.m-sub{--row-bg:#F6F9FE;--row-line:#C9D6EA;--row-on:#E6EEFB;--row-t:#0E1B33}
html[data-theme="dark"] :is(.mega,.m-sub){--row-bg:var(--surface-2);--row-line:var(--line-2);--row-on:var(--acc-soft);--row-t:var(--ink)}
.mega-col-rows .mega-links{gap:var(--sp-2)}
.mega-col-rows .mega-links a{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  margin:0;min-height:58px;padding:.45rem var(--sp-4);border:1px solid var(--row-line);border-radius:var(--r-s);
  background:var(--row-bg);cursor:pointer;transition:background .18s,border-color .18s}
.mega-col-rows .mega-links a::after{content:"";flex:none;width:8px;height:8px;margin-right:2px;color:var(--acc);
  border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .18s}
.mega-row-tx{display:grid;gap:.1rem;min-width:0;word-break:keep-all}
.mega-row-tx b{font-size:var(--fs-sm);font-weight:800;line-height:1.35;letter-spacing:-.015em;color:var(--row-t);transition:color .18s}
.mega-row-tx small{font-size:var(--fs-2xs);font-weight:500;line-height:1.4;color:var(--ink-3)}
.mega-col-rows .mega-links a:is(:hover,:focus-visible){background:var(--row-on);border-color:var(--acc)}
.mega-col-rows .mega-links a:is(:hover,:focus-visible) b{color:var(--acc)}
.mega-col-rows .mega-links a:is(:hover,:focus-visible)::after{transform:translateX(3px) rotate(45deg)}
.mega-col-rows .mega-links a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------- 청정한약 · 의료진·연구 · 치료후기 · 진료안내·상담 메가메뉴 (2026-09-30 병원 오더) ----------
   위 [비수술 치료] 부품(.mega-care3 · .mega-feature · .mega-col-rows)을 그대로 쓰고 칸 나눔만 바꿉니다.
     .mega-g32  안내 카드 32 | 34 | 34          (청정한약 · 진료안내·상담)
     .mega-g4   안내 카드 30 | 같은 폭 세 단     (의료진·연구)
     .mega-rv   안내 카드 32 | 대표 카드 세 장   (치료후기, .mega-rcards)
   안내 카드 항목의 변형: .is-solo(이름만) · .is-plain(작은 아이콘 + 한 줄) · .mega-steps(01 · 02 · 03 단계). */
.mega-panel.mega-care3.mega-g32{grid-template-columns:32fr 34fr 34fr}
.mega-panel.mega-care3.mega-g4{grid-template-columns:minmax(0,9fr) repeat(3,minmax(0,7fr))}
.mega-panel.mega-care3.mega-rv{grid-template-columns:32fr 68fr}
.mega-g4 .mega-col-rows{padding-inline:clamp(.9rem,1.5vw,1.4rem)}
.mega-g4 .mega-col-rows .mega-links{grid-auto-rows:1fr}
.mega-g4 .mega-col-rows .mega-links li{display:grid}
.mega-g4 .mega-col-rows .mega-links a{padding-inline:var(--sp-3)}
.mega-feature-acc{color:var(--acc)}
.mega-feature-list.is-solo b{font-size:var(--fs-sm)}
.mega-feature-list.is-plain{gap:var(--sp-2);margin-block:0 var(--sp-4)}
.mega-feature-list.is-plain .mega-feature-ic{width:24px;height:24px;border-radius:0;background:none}
.mega-feature-list.is-plain svg{width:20px;height:20px}
.mega-steps{display:grid;gap:var(--sp-4);margin:var(--sp-2) 0 0;padding:0;list-style:none}
.mega-steps li{position:relative;display:flex;align-items:center;gap:var(--sp-4)}
.mega-steps b{font-size:var(--fs-sm);font-weight:800;color:#0E1B33}
.mega-step-n{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:var(--acc);color:var(--acc-ink);font-size:var(--fs-2xs);font-weight:800;font-variant-numeric:tabular-nums}
.mega-steps li + li::before{content:"";position:absolute;left:17px;bottom:calc(100% + 3px);height:calc(var(--sp-4) - 6px);
  border-left:2px dotted var(--acc)}
.mega-feature-note{margin-bottom:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--row-line);
  font-size:var(--fs-2xs);line-height:1.55;color:var(--ink-3);word-break:keep-all}
html[data-theme="dark"] .mega-steps b{color:var(--ink)}
/* 치료후기 대표 카드 — 아이콘 · 이름 · 설명 · 구분선 · '자세히 보기 →'. 세 장의 높이와 줄 위치가 같습니다. */
.mega-rcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-4);margin:0;
  padding:0 0 0 clamp(1.5rem,3vw,3rem);list-style:none}
.mega-rcard{display:flex;flex-direction:column;height:100%;padding:var(--sp-5);border:1px solid var(--row-line);
  border-radius:var(--r);background:var(--row-bg);transition:background .18s,border-color .18s}
.mega-rcard-ic{display:grid;place-items:center;width:56px;height:56px;margin-bottom:var(--sp-4);border-radius:50%;
  background:var(--row-on);color:var(--acc)}
.mega-rcard-ic svg{width:28px;height:28px}
.mega-rcard .mega-row-tx{gap:var(--sp-2);margin-bottom:var(--sp-5)}
.mega-rcard .mega-row-tx b{font-size:var(--fs-md)}
.mega-rcard .mega-row-tx small{font-size:var(--fs-xs)}
.mega-rcard-go{margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--row-line);
  font-size:var(--fs-xs);font-weight:700;color:var(--acc)}
.mega-rcard-go::after{content:"→";display:inline-block;margin-left:.45em;transition:transform .18s}
.mega-rcard:is(:hover,:focus-visible){background:var(--row-on);border-color:var(--acc)}
.mega-rcard:is(:hover,:focus-visible) .mega-rcard-ic{background:var(--surface)}
.mega-rcard:is(:hover,:focus-visible) b{color:var(--acc)}
.mega-rcard:is(:hover,:focus-visible) .mega-rcard-go::after{transform:translateX(3px)}
.mega-rcard:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
/* 휴대폰 메뉴의 [비수술 치료] 아코디언 — 6대 치료법 통합 가이드 · 척추질환 치료법 · 관절질환 치료법 (main.js 3-c, data-acc)
   한 번에 한 묶음만 펼칩니다. 척추 · 관절 묶음은 한 줄에 하나씩, 이름 + 보조 설명 + 꺾쇠. 줄 전체가 링크입니다(44px 이상). */
@media (max-width:1023px){
  .m-acc-btn{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;margin:0;
    padding:0 var(--sp-3);border:0;border-radius:var(--r-s);background:transparent;cursor:pointer;
    font:inherit;font-size:var(--fs-sm);font-weight:700;color:var(--ink);text-align:left}
  .m-acc-btn::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .2s;opacity:.6}
  .m-acc-btn[aria-expanded="true"]{color:var(--acc);background:var(--acc-soft)}
  .m-acc-btn[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .m-acc-btn:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
  .m-acc-btn + .m-acc-body{padding:var(--sp-2) 0 var(--sp-3)}
  .m-acc-body[hidden]{display:none}
  .m-sub ul.m-acc-roles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-3);margin:0;padding:var(--sp-1) var(--sp-3) 0;list-style:none;
    font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2);word-break:keep-all}
  .m-acc-roles b{display:block;font-size:var(--fs-sm);font-weight:800;color:var(--ink)}
  .m-sub a.m-acc-more{display:flex;justify-content:center;min-height:48px;margin:var(--sp-4) var(--sp-3) 0;border-radius:var(--r);
    background:var(--acc);color:var(--acc-ink);font-weight:700}
  .m-sub .m-acc-body > ul:not(.m-acc-roles){grid-template-columns:minmax(0,1fr);gap:var(--sp-2);padding:0 var(--sp-3)}
  .m-sub .m-acc-body li > a{justify-content:space-between;gap:var(--sp-3);min-height:56px;padding:.45rem var(--sp-3);
    border:1px solid var(--row-line);border-radius:var(--r-s);background:var(--row-bg)}
  .m-sub .m-acc-body li > a::after{content:"";flex:none;width:8px;height:8px;margin-right:2px;color:var(--acc);
    border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
  .m-sub .m-acc-body li > a:is(:hover,:focus-visible,[aria-current="page"]){background:var(--row-on);border-color:var(--acc)}
  .m-sub .m-acc-body li > a:is(:hover,:focus-visible,[aria-current="page"]) b{color:var(--acc)}
  .m-sub .m-acc-body li > a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  /* 2026-09-30 — 뒤 네 칸. 단계(01 · 02 · 03) · 아랫줄 안내 · 접지 않는 묶음(치료후기 카드 세 장) */
  .m-acc-roles li:has(.mega-step-n){display:flex;align-items:center;gap:var(--sp-3)}
  .m-acc-roles .mega-step-n{width:30px;height:30px}
  .m-sub p.m-acc-note{margin:var(--sp-3) var(--sp-3) 0;font-size:var(--fs-2xs);line-height:1.55;color:var(--ink-3);word-break:keep-all}
  .m-acc-flat{padding-top:var(--sp-2)}
  .m-acc-body .mega-rcard-ic,.m-acc-body .mega-rcard-go{display:none}
}
/* 유튜브 표지 — 누른 뒤 플레이어가 뜰 때까지 재생 단추 자리에 도는 표시(main.js '유튜브 표지', 2026-09-29) */
.yt-cover.is-loading{cursor:progress}
.yt-cover.is-loading .yt-play{width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.55);
  border:4px solid rgba(255,255,255,.35);border-top-color:#fff;animation:yt-spin .8s linear infinite}
.yt-cover.is-loading .yt-play::after{display:none}
@keyframes yt-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* ---------- 푸터 개편 (2026-09-30 병원 오더) ----------
   큰 푸터(partials/footer.html → tools/sync-footer.ps1)의 옷입니다. 위 '푸터' 절의 값을 여기서 덮어씁니다.
     .f-top   한의원 기본정보(.f-info) 36 | 치료 안내 21 | 상담·예약 21 | 한의원 소개 22(.f-nav 안의 .f-col 세 개)
     .f-bot   저작권 | 정책 링크(.f-policy) ……… SNS(.social)
   1023px 이하: 기본정보가 위, 세 묶음이 아래 세 단. 767px 이하: 세 묶음이 아코디언(main.js 14).
   '홈으로 돌아가기' 한 줄짜리 작은 푸터(.f-bot 만 있는 페이지)는 그대로 보이게 .f-top 안쪽 · 새 클래스에만 옷을 입혔습니다. */
.f-top{grid-template-columns:36fr 64fr;gap:0;padding-bottom:var(--sp-7)}
.f-info{padding-right:var(--sp-7)}
.f-info .logo-chip img{width:200px}
address.biz{display:grid;justify-items:start;margin:0;font-style:normal;line-height:1.85}
.f-addr{color:inherit;text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:4px}
.f-tel{color:var(--acc);font-weight:700}
.f-cta{display:flex;gap:var(--sp-2);max-width:23rem;margin-top:var(--sp-4)}
.f-btn{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:46px;padding:0 var(--sp-3);
  border:1.5px solid var(--acc);border-radius:var(--r-s);background:var(--surface);color:var(--acc);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap;transition:background .18s}
.f-btn svg{flex:none}
.f-btn:hover{background:var(--acc-soft)}
.f-nav{display:grid;grid-template-columns:21fr 21fr 22fr}
.f-col{padding-inline:var(--sp-7);border-left:1px solid var(--line)}
.f-col:last-child{padding-right:0}
footer .f-top .f-col h2{margin-bottom:var(--sp-3);font-size:var(--fs-sm);font-weight:800;color:var(--ink)}
.f-col ul{display:grid;margin:0;padding:0;list-style:none}
.f-col ul[hidden]{display:none}
.f-col li{margin:0}
.f-col li a{display:inline-block;padding:.3rem 0;font-size:var(--fs-xs)}
/* 링크 공통 — 올리면 파란색 + 밑줄, 키보드 포커스는 파란 테두리 */
footer :is(.f-col li a,.f-addr,.f-tel,.f-policy a):hover{color:var(--acc);text-decoration:underline;
  text-decoration-color:currentColor;text-underline-offset:4px}
footer :is(.f-col li a,.f-addr,.f-tel,.f-policy a,.f-btn,.social a,.f-acc,.logo-chip):focus-visible{
  outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.f-top + .f-bot{justify-content:flex-start;gap:var(--sp-3) var(--sp-5);padding-top:var(--sp-5)}
.f-copy{margin:0;font-size:var(--fs-xs);color:var(--ink-3)}
.f-policy{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none;font-size:var(--fs-xs)}
.f-policy li{margin:0;padding-inline:var(--sp-4);border-left:1px solid var(--line-2);line-height:1}
.f-policy a{display:inline-block;padding:.35rem 0;color:var(--ink-3);transition:color .2s}
.f-policy a.is-strong{font-weight:700;color:var(--ink)}
.f-bot .f-policy ~ .social{margin-left:auto}
@media (max-width:1023px){
  .f-top{grid-template-columns:minmax(0,1fr)}
  .f-info{padding:0 0 var(--sp-6)}
  .f-nav{grid-template-columns:repeat(3,minmax(0,1fr));padding-top:var(--sp-6);border-top:1px solid var(--line)}
  .f-col:first-child{padding-left:0;border-left:0}
}
@media (max-width:767px){
  .f-top{padding-bottom:0}
  .f-nav{grid-template-columns:minmax(0,1fr);padding-top:0;border-top:0}
  .f-col,.f-col:last-child{padding:0;border-left:0;border-top:1px solid var(--line)}
  footer .f-top .f-col h2{margin:0}
  /* JS 가 없을 때(단추가 안 생김) 제목이 목록에 붙지 않게 */
  .f-col h2:not(:has(.f-acc)){padding:var(--sp-4) 0 var(--sp-2)}
  .f-acc{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;margin:0;padding:0;
    border:0;background:transparent;cursor:pointer;font:inherit;color:inherit;text-align:left}
  .f-acc::after{content:"";flex:none;width:8px;height:8px;margin-right:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:translateY(-2px) rotate(45deg);transition:transform .2s;opacity:.6}
  .f-acc[aria-expanded="true"]{color:var(--acc)}
  .f-acc[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
  .f-col ul{padding-bottom:var(--sp-3)}
  .f-col li a{display:flex;align-items:center;min-height:44px;padding:0;font-size:var(--fs-sm)}
  .f-cta{max-width:none}
  /* 정책 링크 → SNS → 저작권 순서 */
  .f-top + .f-bot{flex-direction:column;align-items:flex-start;gap:var(--sp-4)}
  .f-policy{order:1}
  .f-policy li:first-child{padding-left:0;border-left:0}
  .f-policy a{padding:.8rem 0}
  .f-bot .f-policy ~ .social{order:2;margin-left:0}
  .f-copy{order:3}
}
@media (max-width:359px){ .f-cta{flex-direction:column} .f-btn{flex:none} }
@media (max-width:767px){ .f-addr,.f-tel{display:inline-block;padding-block:.3rem} address.biz{line-height:1.6} }
/* ---------- 네이버 예약 버튼 공통 (.btn-naver, 2026-09-30 병원 오더) ----------
   흰 바탕 + 로열블루 테두리 · 글자 + 네이버 그린 N 심벌. 그린은 심벌에만 씁니다(버튼을 그린 · 파랑으로 채우지 않음).
   N 심벌은 assets/img/naver-n.svg 한 파일이고 ::before 로 붙습니다 — HTML 에는 글자 '네이버 예약'만 둡니다.
   쓰는 곳: 헤더(.btn.btn-naver.nav-book) · 휴대폰 메뉴(.m-quick) · 본문 CTA(.btn.btn-naver[.btn-lg]) · 푸터(.f-btn.btn-naver) · 하단 고정바(.dock .btn-naver).
   크기는 자리마다 옆의 전화 버튼과 같게 두고, 모양(색 · 테두리 · 심벌 · 호버 · 포커스)만 여기서 정합니다.
   주소 · target · rel · aria-label 은 main.js 0번이 한곳에서 채웁니다(HTML 의 값은 JS 가 꺼졌을 때의 예비). */
.btn-naver,.btn.btn-naver{align-items:center;justify-content:center;gap:.7rem;white-space:nowrap;
  background:var(--surface);border:1.5px solid var(--acc);border-radius:10px;color:var(--acc);font-weight:700;
  transition:background .18s,border-color .18s,transform .18s}
.btn-naver::before{content:"";flex:none;width:1.05em;height:1.05em;background:url("../img/naver-n.svg") center/contain no-repeat}
.btn-naver:hover,.btn.btn-naver:hover{background:var(--acc-soft);border-color:var(--acc-hover);color:var(--acc);transform:translateY(-1px)}
.btn-naver:active,.btn.btn-naver:active{background:#DCE8FA;transform:none}
.btn-naver:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
html[data-theme="dark"] .btn-naver:active{background:var(--acc-soft)}
@media (prefers-reduced-motion:reduce){ .btn-naver:hover,.btn.btn-naver:hover{transform:none} }
@media (forced-colors:active){ .btn-naver{border:2px solid ButtonText} }
/* 본문 CTA — 옆 버튼과 같은 모서리(12px). 남색 띠(.band) 위에서도 흰 바탕 그대로입니다. */
.btn.btn-naver{border-radius:var(--r)}
/* 헤더 — 전화 버튼과 높이 · 모서리 · 글자 크기를 맞춥니다. */
.nav-act .btn{border-radius:10px}
/* 휴대폰 메뉴 맨 위 */
.menu > li.m-quick > a.btn-naver{border:1.5px solid var(--acc);color:var(--acc);gap:.6rem}
/* 푸터 — 전화 버튼과 같은 크기 */
.f-btn{min-height:48px;border-radius:10px}
.f-btn:hover{border-color:var(--acc-hover)}
/* 하단 고정바 — 두 버튼 모두 흰 바탕 + 로열블루 테두리. 전화 아이콘은 파랑, N 심벌만 그린. */
.dock a{border-radius:10px;white-space:nowrap}
.dock .primary{background:var(--surface);border:1.5px solid var(--acc);color:var(--acc)}
.dock .primary:hover{background:var(--acc-soft)}
@media (max-width:359px){ .dock a{font-size:var(--fs-xs);gap:.4rem} .dock{padding-inline:var(--sp-2)} }
/* 네이버 예약 안내 카드(qna.html .nv) — 그린으로 채우던 것을 같은 체계로. N 은 글자가 아니라 심벌 그림입니다. */
.nv{background:var(--surface);border:1.5px solid var(--acc);color:var(--ink-2)}
.nv h2,.nv h3{color:var(--ink)}
.nv-logo{background:url("../img/naver-n.svg") center/26px no-repeat var(--surface-2)}
.nv .nv-go{color:var(--acc)}
.nv:hover{background:var(--acc-soft)}
/* 헤더 전화 버튼 문구가 '전화 예약·상담'으로 길어져(2026-09-30) 1280~1399px 에서도 아이콘만 남깁니다(1279px 이하는 위 규칙). */
@media (min-width:1280px) and (max-width:1399px){
  .nav-act .nav-tel span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .nav-act .nav-tel{--pad:.8rem}
}
/* ---------- [증상별 질환] 메가메뉴 (2026-09-30 병원 오더) ----------
   안내 카드 25 | 분류 네 단 75. 질환은 한 줄짜리 링크 행(.is-compact, 42px), 턱관절·특수 진료만 설명 카드(이름 + 보조 설명).
   안내 카드 안에는 링크가 셋(자가진단 둘 + 전체 보기)이라 카드 전체를 덮는 ::after 를 끕니다. */
.mega-panel.mega-care3.mega-sym{grid-template-columns:minmax(0,25fr) repeat(4,minmax(0,18.75fr))}
.mega-sym .mega-col-rows{padding-inline:clamp(.7rem,1.1vw,1.1rem)}
.mega-sym .mega-col-rows:last-child{padding-right:0}
.mega-sym .mega-col-rows + .mega-col-rows{border-left:0}
.mega-sym .mega-feature{padding:var(--sp-5)}
.mega-sym .mega-feature-btn::after{display:none}
.mega-sym .mega-feature:hover{background:#E3ECFA}
html[data-theme="dark"] .mega-sym .mega-feature:hover{background:var(--acc-soft)}
.mega-sym .mega-feature-btn:hover{background:var(--acc-hover)}
.mega-col-rows.is-compact .mega-links{gap:6px}
.mega-col-rows.is-compact .mega-links a{min-height:42px;padding:.3rem var(--sp-3);font-size:var(--fs-xs);font-weight:600;color:var(--row-t)}
.mega-col-rows.is-compact .mega-links a:is(:hover,:focus-visible){color:var(--acc)}
.mega-feature-links{display:grid;gap:var(--sp-2);margin-top:var(--sp-2)}
.mega-check{display:flex;align-items:center;gap:var(--sp-3);min-height:48px;padding:0 var(--sp-4);border:1px solid var(--row-line);
  border-radius:var(--r-s);background:var(--surface);color:var(--row-t);font-size:var(--fs-sm);font-weight:700;
  transition:background .18s,border-color .18s,color .18s}
.mega-check svg{flex:none;color:var(--acc)}
.mega-check::after{content:"";flex:none;width:7px;height:7px;margin-left:auto;color:var(--acc);border-right:2px solid currentColor;
  border-top:2px solid currentColor;transform:rotate(45deg);transition:transform .18s}
.mega-check:is(:hover,:focus-visible){border-color:var(--acc);color:var(--acc);background:var(--row-bg)}
.mega-check:is(:hover,:focus-visible)::after{transform:translateX(3px) rotate(45deg)}
.mega-check:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mega-sym .mega-feature-note{margin:var(--sp-3) 0 0;padding-top:var(--sp-4)}
.mega-feature-hint{font-size:var(--fs-2xs);line-height:1.5;color:var(--ink-3);word-break:keep-all}
.mega-sym .mega-feature-btn{margin-top:0}
/* ---------- 랜딩 치료 세 축 카드 (.lp-tri, 2026-09-30 병원 시안) ----------
   lp-herniated-disc.html 의 '허리디스크 치료 접근'. 카드 세 장의 높이가 같고, 위에 번호 원 1 · 2 · 3 과 이음선이 놓입니다.
   카드: 치료 방향 딱지 → 제목(아래 짧은 파란 줄) → 치료 항목 → 설명. 아래에 안내문(.lp-tri-info) · 단추 하나(.lp-tri-go, 2026-10-16).
   980px 이하에서는 한 줄에 한 장, 번호 원은 카드 오른쪽 위로 들어갑니다. 새 클래스라 다른 페이지에는 영향이 없습니다. */
.lp-tri{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-7);margin:0;
  padding:4.5rem 0 0;list-style:none;counter-reset:tri}
.lp-tri::before{content:"";position:absolute;top:27px;left:16.666%;right:16.666%;height:3px;background:var(--line-2)}
.lp-tri-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--sp-7) var(--sp-6) var(--sp-6);
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);counter-increment:tri;word-break:keep-all}
.lp-tri-card::before{content:counter(tri);position:absolute;top:-4.5rem;left:50%;transform:translateX(-50%);z-index:1;
  display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--acc);color:var(--acc-ink);
  font-size:var(--fs-md);font-weight:700}
.lp-tri-k{align-self:flex-start;margin-bottom:var(--sp-5);padding:.35rem .75rem;border-radius:999px;background:var(--acc-soft);
  color:var(--acc);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.02em}
.lp-tri-card > h3{font-size:var(--fs-h5);letter-spacing:-.03em;line-height:1.35}
.lp-tri-card > h3::after{content:"";display:block;width:44px;height:3px;margin-top:var(--sp-4);border-radius:3px;background:var(--acc)}
.lp-tri-m{margin-top:var(--sp-5);font-size:var(--fs-sm);font-weight:700;color:var(--ink)}
.lp-tri-d{margin-top:var(--sp-2);font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2)}
.lp-tri-info{display:flex;align-items:flex-start;gap:var(--sp-3);margin-top:var(--sp-5);padding:var(--sp-4) var(--sp-5);
  border-radius:var(--r);background:var(--acc-soft);font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2);word-break:keep-all}
.lp-tri-info::before{content:"i";flex:none;display:grid;place-items:center;width:1.35rem;height:1.35rem;margin-top:.15rem;
  border:1.5px solid var(--acc);border-radius:50%;color:var(--acc);font-size:.8rem;font-weight:800;line-height:1;font-family:Georgia,serif}
.lp-tri-go{margin-top:var(--sp-5);text-align:center}
.lp-tri-link{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:48px;padding:.6rem var(--sp-4);
  border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--acc-soft);color:var(--acc);font-size:var(--fs-sm);font-weight:700;
  line-height:1.35;transition:border-color .18s,background .18s,transform .18s}
.lp-tri-link::after{content:"→";flex:none;transition:transform .18s}
.lp-tri-link:is(:hover,:focus-visible){border-color:var(--acc);background:var(--surface);transform:translateY(-1px)}
.lp-tri-link:is(:hover,:focus-visible)::after{transform:translateX(3px)}
.lp-tri-link:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media (max-width:980px){
  .lp-tri{grid-template-columns:minmax(0,1fr);gap:var(--sp-5);padding-top:0}
  .lp-tri::before{display:none}
  .lp-tri-card{padding:var(--sp-6) var(--sp-5) var(--sp-5)}
  .lp-tri-card::before{top:var(--sp-5);left:auto;right:var(--sp-5);transform:none;width:44px;height:44px;font-size:var(--fs-sm)}
  .lp-tri-card > h3{padding-right:3.4rem}
}
@media (prefers-reduced-motion:reduce){ .lp-tri-link,.lp-tri-link::after{transition:none} .lp-tri-link:is(:hover,:focus-visible){transform:none} }
/* ---------- 랜딩 오시는 길 세 카드 (.lp-visit, 2026-09-30 병원 시안) ----------
   lp-herniated-disc.html 의 '오시는 길 · 진료 안내'. 진료시간 | 오시는 길 | 예약·문의 세 장의 높이가 같습니다.
   아래쪽 링크 버튼은 치료 카드의 .lp-tri-link 를 그대로 씁니다. 1050px 이하에서는 한 줄에 한 장. */
.lp-visit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-7)}
.lp-visit-card{display:flex;flex-direction:column;min-width:0;padding:var(--sp-7) var(--sp-6);border:1px solid var(--line);
  border-radius:var(--r-xl);background:var(--surface);word-break:keep-all}
.lp-visit-h{display:flex;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-5);border-bottom:3px solid var(--acc);
  font-size:var(--fs-h5);letter-spacing:-.03em;line-height:1.3}
.lp-visit-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--acc-soft);color:var(--acc)}
/* 2026-10-14 병원 시안 — 회색 상자 대신 가는 줄로 나눈 표, 왼쪽 이름 · 오른쪽 시간은 같은 세로줄에서 시작(일요일 · 공휴일은 한 줄) */
.lp-visit-hours{display:grid;grid-template-columns:fit-content(8.5em) minmax(0,1fr);column-gap:var(--sp-5);margin:var(--sp-6) 0 0;border-top:1px solid var(--line)}
.lp-visit-hours > div{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;min-height:62px;
  padding:var(--sp-3) var(--sp-3);border-bottom:1px solid var(--line)}
.lp-visit-hours dt{font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.lp-visit-hours dd{margin:0;white-space:nowrap;font-size:var(--fs-sm);font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.lp-visit-note{margin-top:auto;padding:var(--sp-5) 0 var(--sp-4);font-size:var(--fs-xs);line-height:1.6;color:var(--ink-3)}
.lp-visit-hours + .lp-visit-note{margin-top:auto;padding:var(--sp-4) 0 0;border-top:1px solid var(--line)}
.lp-visit-hours{margin-bottom:var(--sp-7)}
.lp-visit-note a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.lp-visit-note a:hover{color:var(--acc)}
.lp-visit-card > .lp-tri-link:last-child,.lp-visit-end{margin-top:auto}
p.lp-visit-end{padding-bottom:0;border-top:1px solid var(--line);padding-top:var(--sp-4)}
.lp-visit-k{margin:var(--sp-6) 0 var(--sp-2);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.08em;color:var(--acc)}
.lp-visit-addr{font-style:normal;font-size:var(--fs-sm);font-weight:800;line-height:1.7;color:var(--ink)}
.lp-visit-addr span{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--ink-2)}
.lp-visit-list{display:grid;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-6);padding:0;list-style:none}
.lp-visit-list li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:var(--sp-3);min-height:70px;
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);
  font-size:var(--fs-xs);color:var(--ink-3)}
.lp-visit-list b{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--ink)}
.lp-visit-badge{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--acc-soft);color:var(--acc);
  font-size:var(--fs-2xs);font-weight:800}
.lp-visit-tel{font-size:clamp(1.8rem,2.6vw,2.3rem);font-weight:800;letter-spacing:.01em;line-height:1.2;font-variant-numeric:tabular-nums}
.lp-visit-tel a{color:var(--ink)}
.lp-visit-tel a:hover{color:var(--acc)}
.lp-visit-d{margin:var(--sp-2) 0 var(--sp-6);font-size:var(--fs-xs);color:var(--ink-3)}
.lp-visit-act{display:grid;gap:var(--sp-3);margin-bottom:var(--sp-6)}
.lp-visit-act .btn{width:100%}
.lp-visit-act .btn-line{border-color:var(--acc);color:var(--acc)}
@media (max-width:1050px){
  .lp-visit{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .lp-visit-card{padding:var(--sp-6) var(--sp-5)}
  .lp-visit-hours{margin-bottom:0}
  .lp-visit-hours + .lp-visit-note{border-top:0}
}
/* ---------- 랜딩 대표원장 카드 (.lp-doc, 2026-09-30 병원 시안) ----------
   lp-herniated-disc.html 의 대표원장 소개. 한 장의 큰 카드 — 왼쪽 옅은 청색 사진 칸 | 오른쪽 제목 · 경력 네 칸 · 요약 · 약력 버튼.
   1080px 이하: 사진 칸이 좁아지고 버튼이 한 줄 전체. 800px 이하: 위아래로 쌓임. */
.lp-doc{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);overflow:hidden;border:1px solid var(--line);
  border-radius:var(--r-xl);background:var(--surface);word-break:keep-all}
.lp-doc-side{padding:var(--sp-9) var(--sp-8);background:var(--acc-soft)}
.lp-doc-k{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-6);color:var(--acc);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.1em}
.lp-doc-k::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--acc)}
.lp-doc-fig{margin:0;border-radius:var(--r-l);overflow:hidden;background:var(--surface)}
.lp-doc-fig img{display:block;width:100%;height:auto;aspect-ratio:370/442;object-fit:cover;object-position:center top}
.lp-doc-fig figcaption{padding:var(--sp-5) var(--sp-6);font-size:var(--fs-xs);color:var(--ink-3)}
.lp-doc-fig figcaption b{display:block;margin-bottom:.3rem;font-size:var(--fs-h5);letter-spacing:-.03em;color:var(--ink)}
.lp-doc-body{display:flex;flex-direction:column;min-width:0;padding:var(--sp-9) clamp(1.5rem,4vw,3.5rem)}
.lp-doc-badge{align-self:flex-start;margin-bottom:var(--sp-5);padding:.4rem 1.2rem;border-radius:999px;background:var(--acc-soft);
  color:var(--acc);font-size:var(--fs-xs);font-weight:800}
.lp-doc-t{font-size:var(--fs-h2);line-height:1.25;letter-spacing:-.04em}
.lp-doc-lead{margin-top:var(--sp-5);font-size:var(--fs-md);line-height:1.75;color:var(--ink-2)}
.lp-doc-creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-4);margin:var(--sp-7) 0 0;padding:0;list-style:none}
.lp-doc-creds li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:var(--sp-3);min-height:78px;
  padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);
  font-size:var(--fs-xs);color:var(--ink-3)}
.lp-doc-creds b{display:block;margin-bottom:.2rem;font-size:var(--fs-sm);color:var(--ink)}
.lp-doc-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--acc-soft);color:var(--acc);
  font-size:var(--fs-2xs);font-weight:800}
.lp-doc-sum{display:grid;grid-template-columns:1fr 1.15fr 1.1fr;gap:var(--sp-4);margin-top:auto;padding-top:var(--sp-7)}
.lp-doc-sum p{display:flex;flex-direction:column;justify-content:center;min-height:64px;padding:var(--sp-3) var(--sp-5);border-radius:var(--r);background:var(--acc-soft)}
.lp-doc-sum small{font-size:var(--fs-2xs);color:var(--ink-3)}
.lp-doc-sum b{margin-top:.2rem;font-size:var(--fs-md);color:var(--ink)}
.lp-doc-go{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);min-height:64px;padding:0 var(--sp-5);
  border-radius:var(--r);background:var(--acc);color:var(--acc-ink);font-size:var(--fs-sm);font-weight:700;transition:background .18s,transform .18s}
.lp-doc-go::after{content:"→";transition:transform .18s}
.lp-doc-go:is(:hover,:focus-visible){background:var(--acc-hover);color:var(--acc-ink);transform:translateY(-2px)}
.lp-doc-go:is(:hover,:focus-visible)::after{transform:translateX(3px)}
.lp-doc-go:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (max-width:1080px){
  .lp-doc{grid-template-columns:minmax(0,320px) minmax(0,1fr)}
  .lp-doc-side{padding:var(--sp-8) var(--sp-6)}
  .lp-doc-sum{grid-template-columns:1fr 1fr}
  .lp-doc-go{grid-column:1 / -1}
}
@media (max-width:800px){
  .lp-doc{grid-template-columns:minmax(0,1fr)}
  .lp-doc-side{padding:var(--sp-6) var(--sp-5)}
  .lp-doc-fig{max-width:340px}
  .lp-doc-body{padding:var(--sp-7) var(--sp-5)}
  .lp-doc-creds{grid-template-columns:minmax(0,1fr)}
  .lp-doc-sum{margin-top:0}
}
@media (max-width:560px){ .lp-doc-fig{max-width:none} .lp-doc-sum{grid-template-columns:minmax(0,1fr)} .lp-doc-go{grid-column:auto} }
@media (prefers-reduced-motion:reduce){ .lp-doc-go,.lp-doc-go::after{transition:none} .lp-doc-go:is(:hover,:focus-visible){transform:none} }
/* ---------- 랜딩 대표원장 영상 카드 (.lp-dv, 2026-10-23 병원 시안) ----------
   척추 10곳 · 퇴행성관절염 · 무릎 3곳 · 반월상연골파열 랜딩의 대표원장 소개. 한 장의 흰 카드 —
   왼쪽 방송 인터뷰 영상(유튜브 표지) · 영상 제목 · 숫자 두 칸 | 오른쪽 딱지 · 제목 · 경력 네 칸(아이콘) · 약력 버튼.
   1080px 이하: 경력 칸 한 줄에 하나. 860px 이하: 위아래로 쌓임. 560px 이하: 숫자 두 칸도 글씨를 줄임. */
.lp-dv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.75rem);padding:clamp(1.25rem,3.4vw,3rem);
  border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);word-break:keep-all}
.lp-dv-media,.lp-dv-body{display:flex;flex-direction:column;min-width:0}
.lp-dv-k{margin-bottom:var(--sp-4);color:var(--acc);font-size:var(--fs-sm);font-weight:800;letter-spacing:-.02em}
.lp-dv-video{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-l);background:#000;box-shadow:0 10px 28px rgba(15,35,70,.14)}
.lp-dv-video .yt-cover img{object-fit:cover}
.lp-dv-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lp-dv-video .yt-cover:focus-visible{outline:3px solid var(--acc);outline-offset:-3px}
.lp-dv-vt{margin-top:var(--sp-5);font-size:var(--fs-h4);font-weight:800;line-height:1.35;letter-spacing:-.04em;color:var(--ink)}
.lp-dv-vd{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-3)}
.lp-dv-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin-top:auto;padding-top:var(--sp-6)}
.lp-dv-stats p{display:flex;flex-direction:column;justify-content:center;min-height:96px;padding:var(--sp-4) var(--sp-6);border-radius:var(--r);background:var(--acc-soft)}
.lp-dv-stats b{font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:800;line-height:1.15;letter-spacing:-.04em;color:var(--acc)}
.lp-dv-stats b span{font-size:.62em;letter-spacing:-.02em}
.lp-dv-stats small{margin-top:.25rem;font-size:var(--fs-sm);color:var(--ink-3)}
.lp-dv-badge{align-self:flex-start;margin-bottom:var(--sp-5);padding:.45rem 1.25rem;border-radius:999px;background:var(--acc-soft);
  color:var(--acc);font-size:var(--fs-xs);font-weight:800}
.lp-dv-t{font-size:var(--fs-h2);line-height:1.28;letter-spacing:-.045em}
.lp-dv-lead{margin-top:var(--sp-5);font-size:var(--fs-md);line-height:1.75;color:var(--ink-2)}
.lp-dv-creds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin:var(--sp-7) 0 var(--sp-5);padding:0;list-style:none}
.lp-dv-creds li{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:var(--sp-3);min-height:92px;
  padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);
  font-size:var(--fs-xs);color:var(--ink-3)}
.lp-dv-creds b{display:block;margin-bottom:.25rem;font-size:var(--fs-sm);font-weight:800;color:var(--ink)}
.lp-dv-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--acc-soft);color:var(--acc)}
.lp-dv-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lp-dv-go{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);position:relative;min-height:64px;margin-top:auto;padding:0 var(--sp-8);
  border-radius:var(--r);background:var(--acc);color:var(--acc-ink);font-size:var(--fs-md);font-weight:700;transition:background .18s,transform .18s}
.lp-dv-go::after{content:"→";position:absolute;right:var(--sp-6);font-size:1.2em;transition:transform .18s}
.lp-dv-go:is(:hover,:focus-visible){background:var(--acc-hover);color:var(--acc-ink);transform:translateY(-2px)}
.lp-dv-go:is(:hover,:focus-visible)::after{transform:translateX(3px)}
.lp-dv-go:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
@media (max-width:1080px){
  .lp-dv-creds{grid-template-columns:minmax(0,1fr)}
  .lp-dv-creds li{min-height:76px}
  .lp-dv-br{display:none}
}
@media (max-width:860px){
  .lp-dv{grid-template-columns:minmax(0,1fr)}
  .lp-dv-creds{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-dv-go{margin-top:var(--sp-6)}
}
@media (max-width:600px){
  .lp-dv-creds{grid-template-columns:minmax(0,1fr)}
  .lp-dv-creds li{grid-template-columns:42px minmax(0,1fr);gap:var(--sp-3);min-height:0;padding:var(--sp-3) var(--sp-4)}
  .lp-dv-ic{width:42px;height:42px}
  .lp-dv-stats p{min-height:80px;padding:var(--sp-3) var(--sp-4)}
  .lp-dv-stats b{font-size:1.5rem}
}
@media (prefers-reduced-motion:reduce){ .lp-dv-go,.lp-dv-go::after{transition:none} .lp-dv-go:is(:hover,:focus-visible){transform:none} }
/* 상세 안내 배너 — 질환 이름이 길면(손목건초염(드퀘르벵병) 등) 좁은 화면에서 버튼 글이 넘쳤습니다. 줄바꿈을 허용합니다. (2026-09-30) */
@media (max-width:640px){ .lp-more{grid-template-columns:minmax(0,1fr)} .lp-more-go{white-space:normal;text-align:center} }

/* ---------- 질환 상세페이지 목차 · 링크 묶음 (.dz-toc · .dz-links, 2026-09-30) ----------
   disease-herniated-disc.html 의 위험 신호 아래 목차와, 절 끝의 치료 페이지 링크 묶음. 좁은 화면에서는 목차가 여러 줄로 접힙니다. */
.dz-toc{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-6);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r);background:var(--acc-soft)}
.dz-toc a{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--sp-4);border-radius:var(--r-s);
  font-size:var(--fs-sm);font-weight:700;color:var(--acc);white-space:nowrap;transition:background .18s}
.dz-toc a:is(:hover,:focus-visible){background:var(--surface)}
.dz-toc a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.dz-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:var(--sp-3);margin-top:var(--sp-6)}
/* 치료 페이지 링크 묶음 — 제목이 달린 상자 안에 세 칸씩(여섯 개 = 두 줄). 900px 이하 두 칸, 560px 이하 한 칸. (2026-09-30) */
.dz-rel{margin-top:var(--sp-7);padding:var(--sp-6);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface)}
.dz-rel-t{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-4);font-size:var(--fs-sm);font-weight:800;color:var(--ink)}
.dz-rel-t::before{content:"";width:4px;height:1.1em;border-radius:2px;background:var(--acc)}
.dz-rel .dz-links{margin-top:0}
.dz-links.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){ .dz-links.is-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .dz-links.is-3{grid-template-columns:minmax(0,1fr)} .dz-rel{padding:var(--sp-5)} }
/* ---------- 질환 상세페이지 보조 부품 (2026-09-30) ----------
   .dz-flow       진단 흐름 — 가로 네 칸 + 사이 화살표(900px 이하 두 칸, 560px 이하 한 칸)
   .dz-two        좌우 두 칸 비교(비수술을 고려할 때 | 수술 평가를 지체하지 않아야 할 때). .is-alert 는 왼쪽에 붉은 줄
   .dz-swipe      좁은 화면에서만 보이는 '표를 좌우로 밀어 보세요' 안내
   .dz-paper-wide 근거 카드 가운데 임상논문 카드를 한 줄 전체로 펴고 목록을 두 단으로 */
.dz-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6);margin:0 0 var(--sp-7);padding:0;list-style:none}
.dz-flow li{position:relative;display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-5);border:1px solid var(--line);
  border-radius:var(--r-l);background:var(--surface);font-size:var(--fs-sm);line-height:1.65;color:var(--ink-2);word-break:keep-all}
.dz-flow b{font-size:var(--fs-md);color:var(--ink)}
.dz-flow-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--acc);color:var(--acc-ink);
  font-size:var(--fs-sm);font-weight:700}
.dz-flow li + li::before{content:"";position:absolute;left:calc(var(--sp-6) * -.5 - 5px);top:50%;width:9px;height:9px;
  border-right:2px solid var(--acc);border-top:2px solid var(--acc);transform:translateY(-50%) rotate(45deg)}
.dz-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-6)}
.dz-two-col{max-width:none;padding:var(--sp-7);border:1px solid var(--line);border-radius:var(--r-l);background:var(--surface);
  border-top:4px solid var(--acc)}
.dz-two-col.is-alert{border-top-color:#C9252D}
html[data-theme="dark"] .dz-two-col.is-alert{border-top-color:#FF6B70}
.dz-swipe{display:none;margin:var(--sp-5) 0 calc(var(--sp-4) * -1);font-size:var(--fs-2xs);font-weight:700;color:var(--ink-3);text-align:right}
.papers > .dz-paper-wide{grid-column:1 / -1}
.papers:has(> .dz-paper-wide){grid-template-columns:repeat(2,minmax(0,1fr))}
.dz-paper-wide .paper-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-7)}
@media (max-width:900px){
  .dz-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dz-flow li:nth-child(3)::before{display:none}
  .dz-two{grid-template-columns:minmax(0,1fr)}
  .dz-paper-wide .paper-list{grid-template-columns:minmax(0,1fr)}
  .papers:has(> .dz-paper-wide){grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){ .dz-swipe{display:block} .dz-two-col{padding:var(--sp-5)} }
@media (max-width:560px){ .dz-flow{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)} .dz-flow li + li::before{display:none} }
/* 목차 이름이 긴 페이지(질문형 제목)에서는 칩 안에서 줄바꿈합니다. (2026-09-30) */
.dz-toc a{white-space:normal;text-align:center;padding-block:.4rem;line-height:1.4;word-break:keep-all}
/* 4:3 사진(assets/img/detail) — 틀을 꽉 채움 */
.md-frame.is-photo img{inset:0;width:100%;height:100%;object-fit:cover;border-radius:0}
/* 상세페이지 — 모든 띠의 위아래 여백을 .md-sec 와 같게(문단 간격 통일) */
main:has(> .md-sec) > section:not(.dx-hero){padding-top:var(--rhythm-block);padding-bottom:var(--rhythm-block)}
/* .lp-more.has-photo — 대표 사진이 든 상세 안내 카드(사진 · 질환명 · 주소만 바꿔 다른 질환에 재사용)
   사진은 상세페이지 첫 화면의 배경 없는 인물 사진 원본, 카드 아래 끝에 붙입니다. */
.lp-more.has-photo{grid-template-columns:auto minmax(0,1fr) auto;padding-block:var(--sp-6) 0;padding-left:var(--sp-7);
  column-gap:var(--sp-8);row-gap:var(--sp-2);overflow:hidden;min-height:184px}
.lp-more.has-photo .lp-more-ph{grid-column:1;grid-row:1 / span 3;align-self:end;display:block;width:160px;height:160px}
.lp-more.has-photo .lp-more-ph img{width:100%;height:100%;object-fit:contain;object-position:bottom}
.lp-more.has-photo .lp-more-k,.lp-more.has-photo .lp-more-t,.lp-more.has-photo .lp-more-d{grid-column:2}
.lp-more.has-photo .lp-more-k{align-self:end}
.lp-more.has-photo .lp-more-d{align-self:start;padding-bottom:var(--sp-6)}
.lp-more.has-photo .lp-more-go{grid-column:3}
.lp-more.has-photo:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
@media (max-width:768px){
  .lp-more.has-photo{grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-4);padding:var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-3)}
  .lp-more.has-photo .lp-more-ph{width:104px;height:104px;grid-row:1 / span 3;align-self:end}
  .lp-more.has-photo .lp-more-d{padding-bottom:0}
  .lp-more.has-photo .lp-more-t{font-size:var(--fs-md);line-height:1.4}
  .lp-more.has-photo .lp-more-d{font-size:var(--fs-xs)}
  .lp-more.has-photo .lp-more-go{grid-column:1 / -1;grid-row:auto;margin-top:var(--sp-3)}
}
@media (max-width:380px){
  .lp-more.has-photo .lp-more-ph{width:84px;height:84px}
}
/* .md-trio — 정사각형 사진 세 컷을 한 줄로(추나 요추 · 경추 · 골반 교정) */
.md-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.md-trio figure{margin:0}
.md-trio img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--r);border:1px solid var(--line)}
.md-trio figcaption{margin-top:var(--sp-2);font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);text-align:center}

/* ---------- 랜딩페이지 리뉴얼 2차(.lp-v2, 2026-10-01 병원 시안) ----------
   body 에 lp-v2 가 붙은 랜딩페이지에만 적용합니다. 허리디스크 먼저, 확인 후 나머지 질환으로. */
.lp-v2 .case h3{color:var(--acc)}
.lp-v2 .lp-redflag{background:#FFF4F4;border:1.5px solid #E9A5A8;border-left-width:1.5px}
.lp-v2 .lp-redflag-list li{background:var(--surface)}
.lp-v2 .lp-redflag-f{padding-top:var(--sp-4);border-top:1px solid #F0CFD1}
html[data-theme="dark"] .lp-v2 .lp-redflag{background:rgba(255,107,112,.08);border-color:rgba(255,107,112,.45)}
html[data-theme="dark"] .lp-v2 .lp-redflag-f{border-top-color:rgba(255,107,112,.25)}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]) .lp-v2 .lp-redflag{background:rgba(255,107,112,.08);border-color:rgba(255,107,112,.45)}
  html:not([data-theme="light"]) .lp-v2 .lp-redflag-f{border-top-color:rgba(255,107,112,.25)}
}
/* 치료 세 축 — 위 번호 원 · 이음선을 빼고 카드 안 STEP 딱지만 */
.lp-v2 .lp-tri{padding-top:0}
.lp-v2 .lp-tri::before,.lp-v2 .lp-tri-card::before{content:none;display:none}
/* 자주 묻는 질문 — 번호를 단 펼친 목록(누르지 않아도 답이 보임) */
.lp-faq{list-style:none;margin:0;padding:0;counter-reset:faq;border-top:1px solid var(--line)}
.lp-faq > li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--sp-6);padding:var(--sp-6) 0;
  border-bottom:1px solid var(--line);counter-increment:faq}
.lp-faq > li::before{content:counter(faq,decimal-leading-zero);grid-row:1 / span 2;display:grid;place-items:center;
  width:2.6rem;height:2.6rem;border-radius:50%;background:var(--acc-soft);color:var(--acc);font-size:var(--fs-xs);font-weight:800}
.lp-faq-q{margin:.35rem 0 var(--sp-2);font-size:var(--fs-h5);line-height:1.45;letter-spacing:-.03em;color:var(--acc)}
.lp-faq-a{font-size:var(--fs-md);line-height:1.8;color:var(--ink-2);word-break:keep-all}
.lp-faq-a p + p{margin-top:var(--sp-2)}
.lp-faq-a .res-go{font-weight:700}
@media (max-width:640px){
  .lp-faq > li{column-gap:var(--sp-4);padding:var(--sp-5) 0}
  .lp-faq > li::before{width:2.2rem;height:2.2rem}
  .lp-faq-q{font-size:var(--fs-md);margin-top:.25rem}
}
/* 마지막 띠 — 네이버(흰 버튼) · 온라인 상담 · 전화 */
.lp-v2 .band .btn-naver{background:#fff;color:var(--deep);border-color:#fff}
.lp-v2 .band .btn-tel::before{content:"";flex:none;width:1.05em;height:1.05em;margin-right:.55rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:640px){
  .lp-v2 .band .btns{flex-direction:column}
  .lp-v2 .band .btns .btn{width:100%;justify-content:center;white-space:normal}
}
@media (max-width:640px){ .lp-v2 .band .btns .btn-tel{white-space:nowrap;font-size:var(--fs-sm);padding-inline:var(--sp-4)} }
/* 소제목(.kicker · .hm-kick) — 모두 파란색 */
.lp-v2 .kicker,.lp-v2 .hm-kick,.lp-v2 .lp-more-k,.lp-v2 .lp-dz span{color:var(--acc);font-weight:800}
/* 치료 세 축 — 제목 줄 수가 달라도 치료 항목 · 설명이 세 카드에서 같은 높이에서 시작하도록(subgrid) */
@media (min-width:981px){
  .lp-v2 .lp-tri{grid-template-rows:repeat(4,auto);row-gap:0}
  .lp-v2 .lp-tri-card{display:grid;grid-template-rows:subgrid;grid-row:span 4;align-content:start}
  .lp-v2 .lp-tri-k{justify-self:start;align-self:start}
}
@media (max-width:980px){ .lp-v2 .lp-tri-card > h3{padding-right:0} }

/* ---------- 치료법 바로가기(2026-10-02) ----------
   ① 메뉴 .mega-quick — [비수술 치료] 판 위쪽 한 줄, 대표 페이지 여섯 곳
   ② 본문 .care-tabs — 치료법 페이지 15쪽 첫 화면 아래, 같은 부위의 다른 치료법으로 */
#mm-care > .mega-feature{grid-row:1 / span 2}
#mm-care > .mega-col-rows{grid-row:2}
.mega-quick{grid-column:2 / -1;grid-row:1;display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;
  margin:0 0 var(--sp-5) clamp(1.5rem,3vw,3rem);padding:.8rem 1rem;border-radius:var(--r);background:var(--surface-2);border:1px solid var(--line)}
.mega-quick-k{margin-right:.4rem;font-size:var(--fs-2xs);font-weight:800;color:var(--acc);white-space:nowrap}
.mega-quick a{display:inline-flex;align-items:center;gap:.35rem;min-height:38px;padding:0 .95rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--line-2);font-size:var(--fs-xs);font-weight:700;color:var(--ink);white-space:nowrap;
  transition:border-color .15s,color .15s,background .15s}
.mega-quick a::after{content:"→";font-size:.8em;color:var(--ink-3)}
.mega-quick a:is(:hover,:focus-visible),.mega-quick a[aria-current]{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
.mega-quick a[aria-current]::after{color:var(--acc)}
@media (max-width:1024px){
  .mega-quick{margin:0 0 var(--sp-4);grid-column:auto;grid-row:auto}
  #mm-care > .mega-feature,#mm-care > .mega-col-rows{grid-row:auto}
}
.care-tabs-wrap{padding-top:var(--sp-6)}
.care-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem;padding:.6rem;border-radius:var(--r-l);
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.care-tabs a{display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 .5rem;border-radius:var(--r);
  font-weight:700;color:var(--ink-2);white-space:nowrap;transition:background .15s,color .15s}
.care-tabs a:hover{background:var(--surface-2);color:var(--acc)}
.care-tabs a[aria-current]{background:var(--acc);color:var(--acc-ink)}
@media (max-width:640px){
  .care-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .care-tabs a{min-height:44px;font-size:var(--fs-sm)}
}
/* 휴대폰 메뉴 — 비수술 치료 안의 '치료법별 바로가기' 여섯 개는 세 칸 칩으로 */
/* 2026-10-24 — 알약 칩에서 글자가 잘려 둥근 네모 카드(이름 + 바로 옆 꺾쇠, 가운데 정렬)로. 위 '비교·안내 보기' 단추도 같은 결로 키웠습니다.
   칩 · 단추는 좌우 여백 없이 판 너비를 다 씁니다. 360px 이하 좁은 폰도 세 칸(글자 · 꺾쇠만 조금 작게). */
#msub-mm-care .m-acc-flat ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;padding:0}
#msub-mm-care .m-acc-flat a{display:flex;align-items:center;justify-content:center;gap:.3rem;min-height:52px;
  padding:0 .3rem;border-radius:var(--r-l);border:1px solid var(--row-line);background:var(--surface);
  font-size:var(--fs-xs);font-weight:800;letter-spacing:-.02em;color:var(--row-t);white-space:nowrap}
#msub-mm-care .m-acc-flat a::after{margin-right:0}
/* 꺾쇠와 같은 폭의 빈 칸을 이름 왼쪽에 두어 이름 자체가 카드 한가운데 오게 합니다. */
#msub-mm-care .m-acc-flat a::before{content:"";flex:none;width:10px}
#msub-mm-care .m-acc-flat a[aria-current]{border-color:var(--acc);color:var(--acc);background:var(--acc-soft)}
@media (max-width:1023px){
  #msub-mm-care a.m-acc-more{align-items:center;min-height:56px;margin-inline:0;border-radius:var(--r-l);
    font-size:var(--fs-sm);font-weight:800;letter-spacing:-.01em;white-space:nowrap}
}
@media (max-width:360px){
  #msub-mm-care .m-acc-flat ul{gap:.35rem}
  #msub-mm-care .m-acc-flat a{gap:.1rem;min-height:48px;padding:0;font-size:.8rem;letter-spacing:-.04em}
  #msub-mm-care .m-acc-flat a::after{width:6px;height:6px}
  #msub-mm-care .m-acc-flat a::before{width:8px}
  #msub-mm-care a.m-acc-more{font-size:var(--fs-xs)}
}

/* ══════════ 관절 자가진단 (joint-check.html, body.jc-v2 · 2026-10-02 시안) ══════════ */
.jc-v2 main{background:#F6F9FD}
.jc-top{padding-bottom:0}
.jc-top .crumb,.sc-top .crumb{margin-bottom:var(--sp-7)}
.jc-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-7);align-items:center;
  padding:var(--sp-7) var(--sp-8) var(--sp-7) calc(var(--sp-8) + 14px);background:#fff;border:1px solid #DCE6F2;border-radius:24px;overflow:hidden}
.jc-hero::before{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:#1F5F9E}
.jc-eng{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;color:#1F5F9E;margin-bottom:var(--sp-3)}
.jc-title{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:800;letter-spacing:-.04em;color:#163A63;line-height:1.15}
.jc-alt{margin-top:var(--sp-2);font-size:var(--fs-md);font-weight:700;color:#163A63}
.jc-lead{margin-top:var(--sp-5);font-size:var(--fs-sm);line-height:1.9;color:#5D7896;word-break:keep-all}
.jc-link{display:inline-flex;align-items:center;justify-content:space-between;gap:var(--sp-8);margin-top:var(--sp-6);
  padding:var(--sp-3) var(--sp-5);border:1px solid #DCE6F2;border-radius:8px;background:#F6F9FD;font-weight:700;font-size:var(--fs-sm);color:#163A63}
.jc-link:hover{border-color:#1F5F9E}
.jc-facts{display:grid;grid-template-columns:repeat(3,170px);gap:var(--sp-4)}
.jc-facts li{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:216px;padding:var(--sp-5) var(--sp-3);
  border-radius:14px;background:#F6F9FD;border:1px solid #DCE6F2}
.jc-facts .n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#E6EFF9;color:#163A63;
  font-size:var(--fs-md);font-weight:600;margin-bottom:var(--sp-4)}
.jc-facts .k{font-size:var(--fs-2xs);color:#4A5E75}
.jc-facts b{margin-top:var(--sp-1);font-size:var(--fs-md);color:#163A63}
.jc-facts .v{margin-top:auto;font-size:var(--fs-2xs);line-height:1.6;color:#4A5E75}
.jc-facts .is-acc{background:#EAF3FC}
.jc-facts .is-acc .n{background:#1F5F9E;color:#fff}
.jc-step{font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;color:#1F5F9E}
.jc-step1{padding:var(--sp-6) 0 var(--sp-7);border-bottom:1px solid #DCE6F2}
.jc-h2{margin:var(--sp-2) 0 var(--sp-5);font-size:var(--fs-lg);font-weight:700;color:#163A63;letter-spacing:-.03em}
.jc-step1-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6)}
.jc-tabs{display:flex;gap:var(--sp-3);flex:1 1 auto;max-width:880px}
.jc-tabs a{display:grid;place-items:center;flex:1 1 0;min-width:0;height:54px;border-radius:8px;background:#fff;border:1px solid #DCE6F2;
  font-weight:700;font-size:var(--fs-sm);color:#163A63}
.jc-tabs a:hover{border-color:#1F5F9E}
.jc-tabs a[aria-selected="true"]{background:#1F5F9E;border-color:#1F5F9E;color:#fff}
.jc-note{display:flex;align-items:center;gap:var(--sp-4);flex:0 1 440px;padding:var(--sp-3) var(--sp-5);
  border:1px solid #F3C9C9;border-radius:8px;background:#FFF6F5;font-size:var(--fs-2xs);line-height:1.6;color:#4A5E75}
.jc-note b{color:#163A63}
.jc-note .ic{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#FBE1E1;color:#C33;font-weight:800;font-size:12px}
.jc-part{padding-top:var(--sp-7)}
.jc-part[hidden]{display:none}
.jc-title2{margin-top:var(--sp-3);font-size:clamp(1.8rem,3vw,2.4rem);font-weight:700;color:#163A63;letter-spacing:-.035em}
.jc-sub{margin-top:var(--sp-2);font-size:var(--fs-sm);color:#5D7896}
.jc-head{margin-bottom:var(--sp-7)}
.jc-v2 .cases{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-6)}
.jc-v2 .case{padding:var(--sp-5) var(--sp-5) var(--sp-4);background:#fff;border:1px solid #DCE6F2;border-radius:14px;gap:var(--sp-4)}
.jc-v2 .case:hover{border-color:#1F5F9E}
.jc-v2 .case .tag{padding:var(--sp-1) var(--sp-4);border-radius:999px;background:#E6EFF9;color:#163A63;font-size:var(--fs-xs);font-weight:700}
.jc-v2 .case-quote{color:#5D7896;line-height:1.9}
.jc-v2 .case-meta{padding-top:var(--sp-4);border-top:1px solid #DCE6F2;font-size:var(--fs-sm);color:#5D7896;font-weight:600}
.jc-v2 .case-meta a{display:flex;justify-content:space-between;align-items:center;color:#163A63;font-weight:700}
.jc-v2 .case-meta a:hover{color:#1F5F9E}
@media (max-width:1279px){
  .jc-hero{grid-template-columns:1fr}
  .jc-v2 .cases{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jc-step1-row{flex-wrap:wrap}
  .jc-tabs{flex-basis:100%;max-width:none}
}
@media (max-width:860px){.jc-v2 .cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){
  .jc-hero{padding:var(--sp-6) var(--sp-5) var(--sp-6) calc(var(--sp-5) + 8px)}
  .jc-hero::before{width:8px}
  .jc-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-2)}
  .jc-facts li{min-height:0}
  .jc-tabs{display:grid;grid-template-columns:repeat(3,1fr);width:100%}
  .jc-v2 .cases{grid-template-columns:1fr}
  .jc-note{max-width:none}
}

/* 척추 자가진단(self-check.html) 첫 화면 — 관절 자가진단 .jc-hero 를 같이 씀 (2026-10-02) */
.sc-top{margin-bottom:var(--sp-8)}

/* 척추 자가진단(self-check.html) 첫 화면 — 관절 자가진단 .jc-hero 를 같이 씀 (2026-10-02) */
.sc-top{margin-bottom:var(--sp-8)}

/* 상위 메뉴 6칸 — 링크 아님(href 없음, 2026-10-02) */
.menu a[data-mega]{cursor:pointer}

/* 휴대폰 메뉴 — 펼친 세부 메뉴가 어디까지인지 보이게(2026-10-02 병원 요청)
   펼친 칸 전체를 연한 바탕 상자로 묶고 왼쪽에 파란 띠, 상위 항목은 굵게 */
@media (max-width:1023px){
  .menu > li.has-mega.is-open{margin:var(--sp-2) 0;border-radius:12px;background:var(--surface-2);
    box-shadow:inset 3px 0 0 var(--acc);border-bottom-color:transparent}
  .menu > li.has-mega.is-open > a{font-weight:800;padding-left:var(--sp-4)}
  .menu > li.has-mega.is-open > .m-sub{padding:var(--sp-1) var(--sp-3) var(--sp-4) var(--sp-4);
    border-top:1px solid var(--line-2)}
}

/* 사진 줄 바로 뒤에 글이 이어질 때 — 사진과 다음 글(소제목) 사이를 띄움 (2026-10-03, 허리디스크 'MRI와 X-ray는…') */
.md-figs + .md-body{margin-top:var(--sp-8)}
/* 좁게 붙어 있던 곳 간격(2026-10-03 전 페이지 점검)
   · 글+사진 짝(.md-split) 바로 뒤 넓은 글 — 허리디스크 '퇴행성디스크와…' · '일반적인 증상과…'
   · Q&A 본문의 목록 뒤 문단 — 퇴행성관절염 · 턱관절 · 청정한약
   · 첫 진료 단계 목록 뒤 안내 상자 — 홈 · 랜딩 28쪽
   · 옆으로 넘기는 카드 줄 아래 '옆으로 밀어서 더 보기' — 척추 · 관절질환 치료 */
.md-split + .md-body{margin-top:var(--sp-8)}
.qa-ol + p,.qa-ul + p,.qa-ul + .qa-ol,.qa-ol + .qa-ul{margin-top:var(--sp-4)}
.hm-steps + .hm-notes{margin-top:var(--sp-7)}
.rail + .rail-hint{margin-top:var(--sp-3)}

/* 허리통증 상세 03 — 동의보감 십종요통 카드 열 장(2026-10-03) */
.dz-tcm-sum{margin-top:var(--sp-5);max-width:52em;padding:var(--sp-5) var(--sp-6);border-radius:var(--r);
  background:var(--acc-soft);font-size:var(--fs-md);line-height:1.8;color:var(--ink);word-break:keep-all}
.dz-tcm{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5);
  margin:var(--sp-7) 0 0;padding:0;list-style:none}
.dz-tcm-card{padding:var(--sp-6);border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  border-top:4px solid var(--acc);word-break:keep-all}
.dz-tcm-h{display:flex;align-items:center;gap:var(--sp-3);padding-bottom:var(--sp-3);margin-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.dz-tcm-n{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--acc);color:var(--acc-ink);
  font-size:var(--fs-sm);font-weight:700}
.dz-tcm-h h3{margin:0;font-size:var(--fs-md);font-weight:800;color:var(--ink);letter-spacing:-.02em}
.dz-tcm-h small{font-size:var(--fs-sm);font-weight:500;color:var(--ink-3)}
.dz-tcm-card > p{margin:0;font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2)}
.dz-tcm-card > p.dz-tcm-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--sp-4)}
.dz-tcm-tags span{padding:4px 12px;border-radius:999px;background:var(--acc-soft);color:var(--acc);font-size:var(--fs-xs);font-weight:600}
@media (min-width:600px){.dz-tcm{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.dz-tcm{grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-4)}.dz-tcm-card{padding:var(--sp-5)}}
/* 십종요통 카드 — 설명 길이가 달라도 태그 줄이 카드 아래에 같은 높이로, 태그는 한 줄에 하나씩 */
.dz-tcm-card{display:flex;flex-direction:column}
.dz-tcm-card > p.dz-tcm-tags{flex-direction:column;align-items:flex-start;margin-top:auto;padding-top:var(--sp-4)}
/* 2026-10-17 사용자 지시 — 제목이 두 줄인 카드도 번호가 같은 높이(제목 첫 줄)에 오고, 같은 줄 카드끼리 제목 아래 선 · 설명 시작 높이를 맞춤(subgrid) */
.dz-tcm-h{align-items:flex-start}
.dz-tcm-h h3{line-height:1.5;padding-top:2px}
@media (min-width:600px){
  .dz-tcm-card{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:0;align-content:start}
  .dz-tcm-card > p.dz-tcm-tags{align-self:end;margin-top:0}
}

/* ---------- 질환 상세 목차 카드형(2026-10-03 시안) — 28쪽 .dz-toc 공통 ----------
   한 줄 네 칸 카드, 왼쪽 파란 띠, 오른쪽 아래 화살표, 마지막 칸(연구 근거 등)은 연한 파랑 */
.dz-toc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-5);padding:0;border:0;background:none}
.dz-toc a{position:relative;display:flex;align-items:center;justify-content:flex-start;min-height:170px;
  padding:var(--sp-6) calc(var(--sp-6) + 1.4em) var(--sp-6) calc(var(--sp-6) + 6px);
  border:1px solid #DCE6F2;border-radius:18px;background:var(--surface);box-shadow:0 6px 18px rgba(22,58,99,.06);
  font-size:var(--fs-md);font-weight:500;line-height:1.75;color:#163A63;text-align:left;word-break:keep-all;overflow:hidden}
.dz-toc a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:#1F5F9E}
.dz-toc a::after{content:"→";position:absolute;right:var(--sp-5);bottom:var(--sp-5);color:#1F5F9E;font-size:var(--fs-md)}
.dz-toc a:last-child{background:#EEF4FB;border-color:#B9CFE8}
.dz-toc a:is(:hover,:focus-visible){background:#F6F9FD;border-color:#1F5F9E}
.dz-toc a:last-child:is(:hover,:focus-visible){background:#E3EDF9}
@media (max-width:1023px){.dz-toc{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}.dz-toc a{min-height:110px}}
@media (max-width:480px){.dz-toc a{min-height:88px;padding:var(--sp-4) calc(var(--sp-4) + 1.2em) var(--sp-4) calc(var(--sp-4) + 6px);font-size:var(--fs-sm)}
  .dz-toc a::after{right:var(--sp-3);bottom:var(--sp-3)}}
:root[data-theme="dark"] .dz-toc a{border-color:var(--line);color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dz-toc a{border-color:var(--line);color:var(--ink)}}

/* 목디스크 상세 03 — 자가진단 체크리스트(2026-10-03). 누르면 체크, 3개 이상이면 안내 문구가 빨강 */
.nd-check{margin-top:var(--sp-8);padding:var(--sp-7);border-radius:var(--r);background:var(--surface-2);text-align:center}
.nd-check-h{font-size:var(--fs-xl);font-weight:800;color:var(--ink);letter-spacing:-.03em}
.nd-check-alert{display:inline-block;margin-top:var(--sp-4);padding:.6rem 1.6rem;border-radius:999px;border:2px solid #F3B4B4;
  background:#FDECEC;color:#B42318;font-weight:700}
.nd-check-alert b{color:#D92D20;font-size:1.1em}
.nd-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3);margin:var(--sp-6) 0 0;padding:0;list-style:none;text-align:left}
.nd-check-list label{display:flex;align-items:flex-start;gap:var(--sp-3);height:100%;padding:var(--sp-4) var(--sp-5);border-radius:var(--r-s,10px);
  background:var(--surface);border:1px solid var(--line);cursor:pointer;line-height:1.6;color:var(--ink);word-break:keep-all}
.nd-check-list label:hover{border-color:var(--acc)}
.nd-check-list input{flex:none;width:22px;height:22px;margin:.15em 0 0;accent-color:var(--acc);cursor:pointer}
.nd-check-list b{color:var(--acc);font-weight:700}
.nd-check-list label:has(input:checked){border-color:var(--acc);background:var(--acc-soft)}
.nd-check-out{margin-top:var(--sp-5);font-weight:700;color:var(--ink-2)}
.nd-check-out span{color:var(--acc);font-size:1.2em}
.nd-check-out.is-warn,.nd-check-out.is-warn span{color:#D92D20}
@media (max-width:767px){.nd-check{padding:var(--sp-5)}.nd-check-list{grid-template-columns:1fr}.nd-check-alert{border-radius:12px}}

/* ---------- 질환 상세 '치료의 근거'(#s-evi) · '관련 언론 보도' 카드(2026-10-03 시안, 28쪽 공통) ---------- */
#s-evi .head .title{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:800;color:#163A63}
#s-evi .head .kicker{display:inline-block;padding-bottom:4px;border-bottom:2px solid var(--acc)}
#s-evi .papers{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:var(--sp-5)}
#s-evi .paper,#s-evi .patent{padding:var(--sp-6);border:1px solid #DCE6F2;border-radius:16px;background:var(--surface);box-shadow:0 4px 14px rgba(22,58,99,.05)}
#s-evi .res-top{gap:var(--sp-3);margin-bottom:var(--sp-5)}
#s-evi .res-top::before{content:"";flex:none;width:52px;height:52px;border-radius:12px;background:#EEF4FB center/26px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5BB0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M14 3l5 5h-5z'/%3E%3Ccircle cx='16' cy='16' r='3'/%3E%3Cpath d='m18.5 18.5 2.5 2.5'/%3E%3C/svg%3E")}
#s-evi .patent .res-top::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5BB0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M14 3l5 5h-5z'/%3E%3Ccircle cx='16' cy='15' r='3'/%3E%3Cpath d='m14.5 17.5-1 4 2.5-1.5 2.5 1.5-1-4'/%3E%3C/svg%3E")}
#s-evi .res-thumb{display:none}
#s-evi .res-tag{padding:.35rem .9rem;border-radius:999px;background:#EEF4FB;color:var(--acc);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.02em}
#s-evi .paper h3,#s-evi .patent h3{font-size:var(--fs-lg);font-weight:800;color:#163A63;line-height:1.45}
#s-evi .res-sum{font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2)}
#s-evi .res-ref{margin-top:auto;padding:var(--sp-4);border:0;border-radius:12px;background:#F4F8FD;font-size:var(--fs-xs);line-height:1.65;color:var(--ink-3)}
#s-evi .res-who{font-size:var(--fs-sm);color:#163A63}
#s-evi .paper-list li{font-size:var(--fs-sm);line-height:1.6;color:var(--ink)}
#s-evi .paper-list .venue{font-size:var(--fs-xs);color:var(--ink-3);font-weight:500}
#s-evi .res-go{margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--line);align-self:stretch;
  font-weight:700;color:var(--acc);text-decoration:none}
#s-evi .res-go::after{content:"→";margin-left:.3em}
#s-evi .res-go:hover{text-decoration:underline;text-underline-offset:4px}

.md-press-sec .md-head-wrap{padding-top:var(--sp-6);border-top:1px solid var(--line)}
.md-press{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));align-items:stretch}
.md-pcard{display:flex;flex-direction:column;gap:var(--sp-3);padding:var(--sp-5);border:1px solid #DCE6F2;border-radius:16px;
  background:var(--surface);box-shadow:0 4px 14px rgba(22,58,99,.05);color:inherit;text-decoration:none}
.md-pcard:hover{border-color:var(--acc)}
.md-pcard-src{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-sm);font-weight:700;color:var(--acc)}
.md-pcard-src::before{content:"";flex:none;width:40px;height:40px;border-radius:10px;background:#EEF4FB center/20px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D5BB0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E")}
.md-pcard-img{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.md-pcard-img img{display:block;width:100%;height:auto}
.md-pcard-go{margin-top:auto;padding-top:var(--sp-3);border-top:1px solid var(--line);font-weight:700;color:var(--acc)}
.md-pcard-go::after{content:"→";margin-left:.3em}
.md-pcard:hover .md-pcard-go{text-decoration:underline;text-underline-offset:4px}
.md-press{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1023px){.md-press{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.md-press{grid-template-columns:minmax(0,1fr)}}

/* 질환 상세 목차 — 카드형이 자리를 많이 차지해 표 모양으로 압축(2026-10-03 시안) */
.dz-toc{gap:1px;padding:0;border:1px solid #DCE6F2;border-radius:16px;background:#DCE6F2;overflow:hidden;box-shadow:0 4px 14px rgba(22,58,99,.04)}
.dz-toc a{min-height:0;padding:var(--sp-4) var(--sp-6);justify-content:space-between;gap:var(--sp-4);
  border:0;border-radius:0;box-shadow:none;background:var(--surface);font-size:var(--fs-sm);font-weight:500;line-height:1.5}
.dz-toc a::before{content:none}
.dz-toc a::after{position:static;flex:none;color:var(--acc)}
.dz-toc a:first-child{color:var(--acc);font-weight:700}
.dz-toc a:last-child{background:#F2F7FD;border:0}
.dz-toc a:is(:hover,:focus-visible),.dz-toc a:last-child:is(:hover,:focus-visible){background:#EEF4FB;border:0;color:var(--acc)}
@media (max-width:1023px){.dz-toc{gap:1px}.dz-toc a{min-height:0}}
@media (max-width:480px){.dz-toc a{min-height:0;padding:var(--sp-3) var(--sp-4)}}
.dz-toc a{padding:var(--sp-3) var(--sp-5);line-height:1.45}
/* 목차 — 글자색 한 가지 · 배경 없음(첫 칸 파랑 · 마지막 칸 바탕 해제) */
.dz-toc a,.dz-toc a:first-child,.dz-toc a:last-child{color:var(--ink);font-weight:500;background:var(--surface)}
.dz-toc a:is(:hover,:focus-visible),.dz-toc a:last-child:is(:hover,:focus-visible){background:var(--surface);color:var(--acc)}
/* 목차 빈칸도 흰 바탕 — 칸 사이 선을 틈(gap) 대신 각 칸의 그림자 선으로 */
.dz-toc{gap:0;background:var(--surface)}
.dz-toc a{box-shadow:1px 0 0 #DCE6F2,0 1px 0 #DCE6F2}
/* 칸 사이 선 — 옆 칸 바탕에 가려지지 않게 칸 안쪽(inset)에 그림. 맨 오른쪽 칸은 바깥 테두리와 겹치지 않게 아래 선만 */
.dz-toc a{box-shadow:inset -1px 0 0 #DCE6F2,inset 0 -1px 0 #DCE6F2}
@media (min-width:1024px){.dz-toc a:nth-child(4n){box-shadow:inset 0 -1px 0 #DCE6F2}}
@media (max-width:1023px){.dz-toc a:nth-child(2n){box-shadow:inset 0 -1px 0 #DCE6F2}}

/* 질환 상세 맨 아래 '다른 척추·관절질환 보기' — 옆으로 밀어야 보이던 줄(.rail)을 모두 보이는 격자로(2026-10-03)
   같은 무리(척추 10 · 관절 16) 전체를 싣고, 칸은 낮게 */
.dz-more{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:var(--sp-3);margin:0;padding:0;list-style:none}
.dz-more .sym{height:100%;min-height:0;padding:var(--sp-4) var(--sp-5);gap:var(--sp-1)}
.dz-more .sym .n{font-size:var(--fs-2xs)}
.dz-more .sym h3{margin-top:var(--sp-1);font-size:var(--fs-md)}
.dz-more .sym p{font-size:var(--fs-xs);line-height:1.55}
.dz-more .sym .go{margin-top:var(--sp-2);font-size:var(--fs-xs)}
/* 번호 칸을 뺀 뒤 — 제목은 맨 위에서 나란히, '자세히 보기'는 맨 아래 */
.dz-more .sym h3{margin-top:0}
.dz-more .sym .go{margin-top:auto;padding-top:var(--sp-3)}
/* 목통증 상세 '목통증 유발 질환' 머리말 — 제목과 글 사이는 띄우고, 두 문단 사이 · 아래 01 절까지는 좁게(2026-10-03) */
#neck-pain .orig-body .title{margin-bottom:var(--sp-4)}
#neck-pain .orig-body p:not(.kicker){margin:0;line-height:1.8;color:var(--ink-2)}
#neck-pain .orig-body p:not(.kicker) + p{margin-top:var(--sp-2)}
.orig-lead#neck-pain{padding-bottom:0}
#neck-pain + section,#neck-pain ~ #s01{padding-top:var(--sp-8)}

/* 추나요법 04 '척추와 관절은 서로 연결되어 있습니다' — 시안(2026-10-04): 굵은 요약 한 줄, 카드 제목 앞 파란 고리 · 부제, 연한 파란 알약이 한 줄로 */
.md-link-lead{font-weight:700;color:#163A63}
.md-link-cards .md-card{padding:var(--sp-6)}
.md-link-cards .md-h3{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-1)}
.md-link-cards .md-h3::before{content:"";flex:none;width:14px;height:14px;border:3px solid var(--acc);border-radius:50%}
.md-link-sub{margin:0 0 0 calc(14px + var(--sp-3));font-size:var(--fs-sm);color:var(--ink-3)}
.md-link-cards .md-flow{flex-wrap:nowrap;gap:0;margin-top:var(--sp-5)}
.md-link-cards .md-flow > li{flex:0 1 auto;padding:.5rem .95rem;border:0;background:#EAF1FB;color:#163A63;font-weight:600;white-space:nowrap}
.md-link-cards .md-flow > li + li{margin-left:1.6rem}
.md-link-cards .md-flow > li + li::before{left:-1.25rem}
@media (max-width:480px){.md-link-cards .md-flow{flex-wrap:wrap;row-gap:var(--sp-2)}}
/* 첫 화면 부제를 크게(2026-10-04 좌골신경통) — 기본 .dx-alt 의 두 배 · 굵게 */
.dx-alt.is-big{font-size:calc(var(--fs-lg) * 2);font-weight:800;line-height:1.3;color:var(--ink);letter-spacing:-.03em}
@media (max-width:600px){.dx-alt.is-big{font-size:calc(var(--fs-lg) * 1.5)}}
/* 척추전방전위증 06 — 증상 목록 아래 안내 문단 */
.sx-note{margin-top:var(--sp-4);font-size:var(--fs-sm);line-height:1.75;color:var(--ink-2);word-break:keep-all}
/* 위험 신호가 네 개인 곳 — 두 칸씩 두 줄로 나란히(2026-10-04 척추압박골절) */
@media (min-width:769px){.lp-redflag-list:has(> li:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 근거 카드 — 가로형 연구 연혁 (2026-10-05, 카드가 하나뿐인 질환 3쪽: 교통사고 · 스포츠손상 · 척추전방전위증)
   연도별 3열 · 핵심 결과는 크게, 서지는 아래 띠에 작게, DOI 링크는 띠 오른쪽. 아이콘은 위 #s-evi .res-top::before */
#s-evi .paper-tl,.paper-tl{padding:var(--sp-6) var(--sp-7)}
#s-evi .paper-tl h3,.paper-tl h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:var(--sp-5)}
.paper-tl-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;margin:0;padding:0}
.paper-tl-list li{display:flex;flex-direction:column;gap:var(--sp-1);padding:0 var(--sp-6);border-left:1px solid var(--line);word-break:keep-all}
.paper-tl-list li:first-child{padding-left:0;border-left:0}
.paper-tl-y{font-size:clamp(2rem,3.2vw,2.75rem);font-weight:800;line-height:1.1;letter-spacing:-.02em;color:var(--acc)}
.paper-tl-list b{margin-top:var(--sp-1);font-size:var(--fs-lg);font-weight:800;color:#163A63}
.paper-tl-list li > span:last-child{font-size:var(--fs-md);line-height:1.6;color:var(--ink-2)}
.paper-tl-foot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-5);margin-top:var(--sp-6);
  padding:var(--sp-4) var(--sp-5);border-radius:12px;background:#F4F8FD}
#s-evi .paper-tl-foot .res-ref,.paper-tl-foot .res-ref{margin:0;padding:0;border:0;background:none;border-radius:0}
#s-evi .paper-tl-foot .res-go,.paper-tl-foot .res-go{margin:0;padding:0;border:0;align-self:center;flex:none;white-space:nowrap}
@media (max-width:760px){
  #s-evi .paper-tl{padding:var(--sp-5)}
  .paper-tl-list{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .paper-tl-list li,.paper-tl-list li:first-child{padding:0 0 0 var(--sp-4);border-left:3px solid #DCE6F2}
  .paper-tl-foot{flex-direction:column;align-items:flex-start}
  #s-evi .paper-tl-foot .res-go{align-self:flex-start}
}
/* 허리디스크 10 — 임상 보고 카드 간결하게 (2026-10-05): 왼쪽 제목 · 안내 · 링크, 오른쪽 논문 두 편 */
@media (min-width:901px){
  .papers > .dz-paper-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:auto auto 1fr auto;column-gap:var(--sp-8);align-items:start}
  .dz-paper-wide > .res-top,.dz-paper-wide > h3,.dz-paper-wide > .lp-src,.dz-paper-wide > .res-go{grid-column:1}
  .dz-paper-wide > .paper-list{grid-column:2;grid-row:1 / -1;margin:0;align-self:center}
  .dz-paper-wide > .lp-src{margin-top:0}
}

/* =========================================================
   상세페이지 개편 dz-v2 (2026-10-07, 병원 오더 중 골라 적용) — body.dz-v2 인 페이지만.
   ① 첫 화면 높이 줄이기 + 첫 화면 버튼 없음 ② 3줄 핵심 요약 ③ 연구 · 특허 · 언론보도 접기
   ④ 휴대폰 아래쪽 버튼 띠를 처음부터 표시. 접기 동작은 assets/js/dz-v2.js.
   ========================================================= */
/* ① 첫 화면 — 데스크톱 높이 약 600px, 사진 420px(비율 그대로 · 자르지 않음) */
.dz-v2 .dx-hero{padding:calc(var(--nav-h) + var(--sp-6)) 0 var(--sp-7)}
.dz-v2 .dx-hero .crumb{margin-bottom:var(--sp-3)}
.dz-v2 .dx-hero .page-lvl{margin-bottom:var(--sp-2)}
.dz-v2 .dzv-hero{align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);
  grid-template-areas:". fig" "eng fig" "title fig" "alt fig" "lead fig" "src fig" ". fig";
  grid-template-rows:1fr auto auto auto auto auto 1fr}
.dz-v2 .dzv-hero > .dx-src{grid-area:src}
.dz-v2 .dzv-chip{justify-self:start;display:inline-block;margin:0 0 var(--sp-3);padding:.4rem 1rem;border-radius:999px;
  background:var(--acc-soft);color:var(--deep);font-size:var(--fs-xs);font-weight:700;letter-spacing:0;text-transform:none}
.dz-v2 .dzv-hero .dx-title{font-size:clamp(2.6rem,5.2vw,4.2rem);font-weight:800;letter-spacing:-.035em;color:var(--deep)}
.dz-v2 .dzv-hero .dx-lead{margin-top:var(--sp-3);font-size:clamp(1.1rem,1.8vw,1.45rem);line-height:1.5;color:var(--ink-2)}
.dz-v2 .dzv-hero .lp-hero-fig{align-self:center;justify-self:end;margin:0}
.dz-v2 .dzv-hero .lp-hero-fig img{width:auto;height:420px;max-width:100%;object-fit:contain}
@media (max-width:1024px){
  .dz-v2 .dzv-hero .lp-hero-fig{margin:var(--sp-5) auto 0;max-width:440px}
  .dz-v2 .dzv-hero .lp-hero-fig img{width:100%;height:auto}
}

/* ② 3줄 핵심 요약 */
.dzv-sum{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,2.3fr);align-items:center;gap:var(--sp-6);
  padding:var(--sp-6) var(--sp-7);border:1.5px solid var(--deep);border-radius:var(--r-l);background:var(--surface)}
.dzv-sum-h{margin:0;padding-right:var(--sp-6);border-right:1px solid var(--line);text-align:center;
  font-size:clamp(1.35rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-.03em;color:var(--deep)}
.dzv-sum-list{counter-reset:dzs;margin:0;padding:0;list-style:none;display:grid;gap:var(--sp-2)}
/* 2026-10-07 28쪽 공통 — 번호와 문장을 세로 가운데로 맞춤. PC(1180px 이상)에서는 문장마다 한 줄(병원 검수 기준 3),
   그보다 좁으면 문장 단위로 자연스럽게 줄바꿈. 글자 크기는 줄이지 않습니다. */
.dzv-sum-list li{counter-increment:dzs;display:flex;align-items:center;gap:.8rem;font-size:var(--fs-md);line-height:1.6;color:var(--ink);word-break:keep-all}
.dzv-sum-list li::before{content:counter(dzs);flex:none;width:1.6rem;height:1.6rem;border-radius:50%;
  display:grid;place-items:center;border:1.5px solid var(--acc);background:var(--acc-soft);color:var(--deep);font-size:var(--fs-xs);font-weight:800}
@media (min-width:1180px){
  .dzv-sum{grid-template-columns:auto minmax(0,1fr);gap:var(--sp-7)}
  .dzv-sum-h{padding-right:var(--sp-7);white-space:nowrap}
  .dzv-sum-list li{white-space:nowrap}
}
@media (max-width:760px){
  .dzv-sum{grid-template-columns:minmax(0,1fr);gap:var(--sp-4);padding:var(--sp-5)}
  .dzv-sum-h{padding:0 0 var(--sp-3);border-right:0;border-bottom:1px solid var(--line);text-align:left}
}
.dz-v2 .dzv-top .lp-redflag{margin-top:var(--sp-5)}

/* ③ 연구논문 · 등록특허 · 언론보도 접기 */
.dzv-accs{display:grid;gap:var(--sp-3)}
.dzv-acc{border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.dzv-acc h3{margin:0;font-size:inherit}
.dzv-acc button{width:100%;display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-5) var(--sp-6);
  border:0;background:none;font:inherit;font-weight:700;font-size:var(--fs-md);line-height:1.55;letter-spacing:-.02em;color:var(--ink);
  text-align:left;cursor:pointer;border-radius:var(--r)}
.dzv-acc button svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--deep);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dzv-acc button::after{content:"";flex:none;margin-left:auto;width:9px;height:9px;
  border-right:2.2px solid var(--ink-3);border-bottom:2.2px solid var(--ink-3);transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.dzv-acc button[aria-expanded="true"]::after{transform:translateY(2px) rotate(-135deg)}
.dzv-acc button:hover{color:var(--acc)}
.dzv-acc button:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.dzv-acc-body{padding:0 var(--sp-6) var(--sp-6)}
.dzv-acc-body > .md-lead{margin:0 0 var(--sp-5)}
@media (max-width:560px){.dzv-acc button{padding:var(--sp-4)}.dzv-acc-body{padding:0 var(--sp-4) var(--sp-4)}}

/* ④ 휴대폰 아래쪽 버튼 띠 — 화면을 내리지 않아도 처음부터 보입니다(첫 화면에 예약 버튼이 없어서) */
.dz-v2 .dock{transform:translateY(0)}

/* =========================================================
   랜딩페이지 첫 화면 높이 줄이기 (2026-10-07 병원 「랜딩페이지 수정」 4절) — 28쪽 body.lp-v2 공통.
   글 · 그림 · 문구는 그대로 두고 여백과 그림 카드 높이만 줄입니다. 첫 화면 예약 버튼(.dx-cta)은 HTML 에서 뺐습니다.
   데스크톱 전체 높이 약 620~680px · 그림 카드 약 480~520px · 그림은 자르지 않음(object-fit:contain).
   ========================================================= */
@media (min-width:1025px){
  .lp-v2 .dx-hero{padding:calc(var(--nav-h) + 44px) 0 44px}
  .lp-v2 .dx-hero .crumb{margin-bottom:26px}
  .lp-v2 .lp-hero-grid{align-items:center;column-gap:56px;
    grid-template-areas:". fig" "eng fig" "title fig" "alt fig" "lead fig" "alert fig" "cta fig" "chips fig" ". fig";
    grid-template-rows:1fr auto auto auto auto auto auto auto 1fr}
  .lp-v2 .lp-dz{margin-bottom:18px}
  .lp-v2 .dx-lead{margin-top:26px}
  .lp-v2 .dx-lead > span{margin-top:14px !important}
  .lp-v2 .lp-hero-alert{margin-top:22px}
  .lp-v2 .lp-hero-grid > .chips{margin-top:22px;padding-top:22px}
  .lp-v2 .lp-hero-fig{align-self:center}
  .lp-v2 .lp-hero-fig img{height:458px;width:100%;object-fit:contain;background:var(--surface)}
  .lp-v2 .lp-hero-fig.is-plain img{height:500px;background:none}
  .lp-v2 .lp-hero-fig.is-white-bg img{background:none}
  .lp-v2 .lp-hero-fig figcaption{display:flex;align-items:center;min-height:42px;padding:.45rem 1.25rem;line-height:1.4}
}
/* 태블릿 — 그림 카드 약 420~460px */
@media (min-width:769px) and (max-width:1024px){
  .lp-v2 .lp-hero-fig img{height:400px;width:100%;object-fit:contain;background:var(--surface)}
  .lp-v2 .lp-hero-fig.is-plain img,.lp-v2 .lp-hero-fig.is-white-bg img{background:none}
  .lp-v2 .lp-hero-fig figcaption{padding:.5rem 1.25rem;line-height:1.4}
}
/* 휴대폰 — 높이 고정 없이 폭 100% · 높이 자동(기존과 같음) */

/* 예약·문의 카드 — 버튼 대신 첫 진료 안내(2026-10-07, 2절 A) */
.lp-visit-first{margin-bottom:var(--sp-6);padding:var(--sp-4) var(--sp-5);border-radius:var(--r);background:var(--acc-soft)}
.lp-visit-first p{margin:0;font-size:var(--fs-sm);line-height:1.7;color:var(--ink-2);word-break:keep-all}
.lp-visit-first .lp-visit-first-h{margin-bottom:var(--sp-1);font-weight:800;color:var(--deep)}

/* 랜딩 치료후기 안내 카드 (2026-10-07 병원 시안) — 왼쪽 따옴표 원 · 가운데 '치료후기' + 문장 · 오른쪽 테두리 버튼.
   후기 카드는 싣지 않고 후기 게시판 검색으로만 잇습니다(B안). 휴대폰은 위아래로 쌓입니다. */
/* 위 「진료 근거」 절과 같은 바탕에 이어 붙여 하나처럼 보이게 합니다(위쪽 여백 없음). */
.lp-page main > section.lp-rv{padding-top:0;padding-bottom:var(--sp-8);margin-top:-24px;background:rgb(244,247,251)}
html[data-theme="dark"] .lp-rv{background:var(--surface-2)}
.lp-rv-btn span{margin-left:.4em}
.lp-rv-card{display:flex;align-items:center;gap:var(--sp-6);padding:var(--sp-6) var(--sp-7);border:1px solid #CFDDEE;
  border-radius:var(--r-l);background:#F6F9FD}
.lp-rv-ic{flex:none;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:#E3ECF8;
  color:var(--deep);font-family:Georgia,'Times New Roman',serif;font-size:3.4rem;font-weight:700;line-height:1;padding-top:.9rem}
.lp-rv-tx{flex:1;min-width:0}
.lp-rv-k{margin:0 0 .3rem;font-size:var(--fs-md);font-weight:700;color:var(--acc)}
.lp-rv-t{margin:0;font-size:clamp(1.15rem,2vw,1.6rem);font-weight:800;line-height:1.4;letter-spacing:-.03em;color:var(--deep);word-break:keep-all}
.lp-rv-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:60px;padding:0 var(--sp-7);
  border:2px solid var(--acc);border-radius:var(--r);background:var(--surface);color:var(--acc);font-weight:700;text-decoration:none;white-space:nowrap}
.lp-rv-btn:hover,.lp-rv-btn:focus-visible{background:var(--acc);color:#fff}
.lp-rv-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
html[data-theme="dark"] .lp-rv-card{background:var(--surface-2);border-color:var(--line)}
html[data-theme="dark"] .lp-rv-ic{background:var(--surface)}
@media (max-width:760px){
  .lp-rv-card{flex-wrap:wrap;gap:var(--sp-4);padding:var(--sp-5)}
  .lp-rv-ic{width:56px;height:56px;font-size:2.4rem;padding-top:.6rem}
  .lp-rv-tx{flex:1 1 calc(100% - 56px - var(--sp-4))}
  .lp-rv-btn{width:100%;min-height:52px;white-space:normal}
}

/* 랜딩 첫 화면 단순화 (2026-10-07) — 큰 제목은 질환명만(.lp-name), 위 작은 태그(.lp-dz)는 질환 분류. PC 에서 한 줄,
   제목이 짧아진 만큼 첫 화면 높이와 그림 카드도 줄입니다(그림은 자르지 않음). */
.lp-hero-grid > .lp-dz{grid-area:eng}
.lp-v2 .dx-title.lp-name{font-size:clamp(2.3rem,4.6vw,3.8rem);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:var(--deep)}
.lp-v2 .dx-title.lp-name small{margin-left:.15em;font-size:.48em;font-weight:700;letter-spacing:-.02em;color:var(--ink-3)}
@media (min-width:1025px){
  .lp-v2 .dx-title.lp-name{white-space:nowrap}
  .lp-v2 .lp-hero-grid > .lp-dz{margin-bottom:16px}
  .lp-v2 .lp-hero-fig img{height:380px}
  .lp-v2 .lp-hero-fig.is-plain img{height:420px}
}
/* 그림 아래 설명 줄이 없는 쪽도 그림 카드 높이를 설명 줄이 있는 쪽(그림 380 + 설명 약 44px)과 같게 맞춥니다(2026-10-07). */
@media (min-width:1025px){ .lp-v2 .lp-hero-fig:not(.is-plain):not(:has(figcaption)) img{height:424px} }

/* 랜딩 첫 화면 설명 두 줄(2026-10-07 병원 문서) — 위 질환별 진료 방향(.lp-lead-dz, 조금 크고 굵게) · 아래 공통 진료 문구(.lp-lead-common).
   PC 는 문서의 줄바꿈(br.br-pc)대로, 휴대폰은 그 줄바꿈을 풀고 화면 폭에 맞춰 자연스럽게 넘깁니다. */
.lp-hero-grid > .lp-lead-dz{grid-area:alt}
.lp-hero-grid > .lp-lead-common{grid-area:lead}
.lp-v2 .dx-lead.lp-lead-dz{margin-top:22px;font-size:clamp(1.12rem,1.6vw,1.32rem);font-weight:700;line-height:1.6;color:var(--ink);word-break:keep-all}
.lp-v2 .dx-lead.lp-lead-common{margin-top:14px;font-size:var(--fs-md);line-height:1.7;color:var(--ink-2);word-break:keep-all}
@media (max-width:768px){ .lp-v2 .br-pc{display:none} .lp-v2 .dx-lead.lp-lead-dz{margin-top:16px} .lp-v2 .dx-lead.lp-lead-common{margin-top:10px} }

/* 진료 프로세스(첫 진료) 바로 위에 얇은 흰 띠를 두어 위 치료후기 안내 · 진료 근거와 칸을 나눕니다(2026-10-07). */
.lp-page main > section#first-visit{border-top:8px solid #fff;padding-top:var(--sp-8) !important}
html[data-theme="dark"] .lp-page main > section#first-visit{border-top-color:var(--bg)}

/* 어두운 상담 띠 위의 공통 단추 묶음 — 랜딩페이지 마지막 띠(.lp-v2 .band)와 같은 단추(2026-10-09).
   청정 한약재 · 한약재 관리 · 보약 처방 · 공진단의 아래 상담 띠가 씁니다. 순서: 네이버 예약 · 전화 예약·상담 · 온라인 상담 */
.btns-on-dark{display:flex;flex-wrap:wrap;gap:var(--sp-3)}
.btns-on-dark .btn-naver{background:#fff;color:var(--deep);border-color:#fff}
.btns-on-dark .btn-naver:hover{background:#fff;color:var(--deep-2)}
.btns-on-dark .btn-line{border-color:rgba(255,255,255,.45);color:#fff;background:rgba(255,255,255,.1)}
.btns-on-dark .btn-line:hover{border-color:#fff;background:rgba(255,255,255,.2);color:#fff}
/* 2026-10-15 — 남색 띠 위(.btns-on-dark)에만 붙던 전화 아이콘을 모든 전화 단추(.btn-tel)로. 병원 소개 하단 · Q&A 상담 카드의 전화 단추에 아이콘이 없었습니다 */
.btn-tel::before{content:"";flex:none;width:1.05em;height:1.05em;margin-right:.55rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:640px){
  .btns-on-dark{flex-direction:column}
  .btns-on-dark .btn{width:100%;justify-content:center}
}

/* 딱지 한 줄로(2026-10-09 — 봉침과 한약 카드 '척추한약 · 척추고 / 관절한약 · 관절고 / 봉침 병행'). 좁은 휴대폰에서만 줄바꿈 허용 */
.md-tags.is-one-line{flex-wrap:nowrap;gap:4px}
.md-tags.is-one-line li{white-space:nowrap;padding:.25rem .5rem;font-size:var(--fs-xs);letter-spacing:-.03em}
@media (max-width:420px){ .md-tags.is-one-line{flex-wrap:wrap} }

/* 치료 철학 맺음 — 가운데 두 줄(둘째 줄 파랑) + 단추 둘(2026-10-09) */
.ph-end{margin-top:var(--sp-8);text-align:center}
.ph-end-t{margin:0;font-size:clamp(1.3rem,2.4vw,1.85rem);font-weight:800;line-height:1.5;letter-spacing:-.03em;color:var(--ink);word-break:keep-all}
.ph-end-t span{color:var(--acc)}
.ph-end-btns{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.ph-end-btns .btn{min-width:200px;justify-content:center}
@media (max-width:640px){ .ph-end-btns .btn{width:100%} }
.ab-research-links{display:flex;flex-wrap:wrap;gap:12px}

/* 2026-10-09 사진은 항상 배경 앞에 — 흰 배경 인물 그림(.lp-hero-fig.is-white-bg)을 multiply 로 바탕에 섞던 것을 끄고, 칸 바탕을 흰색으로 */
.lp-hero-fig.is-white-bg{background:#fff}
.lp-hero-fig.is-white-bg img{mix-blend-mode:normal}

/* 2026-10-09 첫 화면 사진 카드 — 사진 비율이 칸과 달라 위아래 빈 여백이 생기는 곳은 is-cover 로 칸을 꽉 채움(교통사고 후유증 랜딩) */
.lp-v2 .lp-hero-fig.is-cover img{object-fit:cover;background:none}

/* 언론보도(press.html) 첫 화면 — 사진 오른쪽, 왼쪽으로 진한 색 막(2026-10-09) */
.dx-hero.pr-hero{min-height:calc(var(--nav-h) + 380px);display:flex;align-items:center}
.pr-hero-bg{position:absolute;inset:0;width:100%;height:100% !important;object-fit:cover;object-position:right center;z-index:0}
.pr-hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-2) 30%,rgba(243,245,248,.6) 45%,rgba(243,245,248,0) 60%)}
.pr-hero > .wrap{position:relative;z-index:2;width:min(100% - 2.5rem,var(--wrap))}
html[data-theme="dark"] .pr-hero::before{background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-2) 35%,rgba(29,37,48,.7) 50%,rgba(29,37,48,.2) 70%)}
@media (max-width:768px){ .pr-hero::before{background:rgba(243,245,248,.85)} html[data-theme="dark"] .pr-hero::before{background:rgba(29,37,48,.85)} }
.pr-hero-bg{object-position:100% 42%}.dx-hero.pr-hero{min-height:calc(var(--nav-h) + 440px)}

/* ---------- 허리디스크 랜딩 첫 화면(.hd-*) — 2026-10-10 병원 오더, lp-herniated-disc.html 만 씁니다 ---------- */
.hd-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 36px) 0 48px;background:linear-gradient(90deg,#FFFFFF 0%,#F8FAFD 40%,#F3F7FC 100%)}
.hd-hero::before{content:"";position:absolute;right:-6%;top:6%;width:52%;height:120%;border-radius:50%;background:radial-gradient(closest-side,#E3EDF9 0%,rgba(227,237,249,.55) 60%,rgba(227,237,249,0) 100%);pointer-events:none}
.hd-grid{position:relative;display:grid;grid-template-columns:55fr 45fr;gap:52px;align-items:center}
.hd-crumb{margin:0 0 28px;font-size:var(--fs-xs);font-weight:500}
.hd-crumb [aria-current]{color:var(--acc)}
.hd-cat{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:0;font-size:var(--fs-xs);color:var(--ink-2)}
.hd-cat b{padding:6px 16px;border-radius:999px;background:var(--acc-soft);color:var(--deep);font-size:var(--fs-sm);font-weight:600}
.hd-cat span{padding-left:14px;border-left:1px solid #C9D5E3;font-weight:500}
.hd-hero .hd-title{margin:22px 0 0;font-size:clamp(3rem,6vw,5.4rem);font-weight:800;line-height:1.12;letter-spacing:-.03em;color:var(--deep)}
.hd-key{margin:30px 0 0;font-size:clamp(1.25rem,1.9vw,1.7rem);font-weight:700;line-height:1.55;letter-spacing:-.02em;color:var(--deep)}
.hd-sub{margin:32px 0 0;font-size:var(--fs-md);line-height:1.65;font-weight:500;color:var(--ink-2)}
.hd-sub b{font-weight:700;color:var(--deep)}
.hd-fig{margin:0;border-radius:20px;background:#fff;box-shadow:0 12px 32px rgba(23,54,94,.10);overflow:hidden}
.hd-fig img{display:block;width:100%;height:auto;aspect-ratio:1120/880;object-fit:cover;object-position:50% 38%}
.hd-fig figcaption{margin:0 18px;padding:16px 0 18px;border-top:1px solid #DCE5EF;text-align:center;font-size:var(--fs-xs);line-height:1.5;color:var(--ink-2)}
.hd-band{padding:0;background:#fff;border-bottom:1px solid #DCE5EF}
.hd-band-list{display:grid;grid-template-columns:repeat(3,1fr);list-style:none;margin:0 auto;padding:32px 0}
.hd-band-list li{display:flex;align-items:center;justify-content:center;gap:22px}
.hd-band-list li+li{border-left:1px solid #DCE5EF}
.hd-band-list svg{flex:none;width:46px;height:46px;fill:none;stroke:var(--deep);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hd-band-list b{display:block;font-size:21px;font-weight:700;color:var(--deep);line-height:1.3}
.hd-band-list span{display:block;margin-top:6px;font-size:var(--fs-sm);font-weight:500;color:var(--ink-2)}
.hd-band + section{padding-top:56px !important}
html[data-theme="dark"] .hd-hero{background:var(--surface-2)}
html[data-theme="dark"] .hd-hero::before{opacity:.15}
html[data-theme="dark"] .hd-band{background:var(--surface);border-bottom-color:var(--line)}
html[data-theme="dark"] .hd-band-list svg{stroke:var(--ink)}
html[data-theme="dark"] .hd-hero .hd-title,html[data-theme="dark"] .hd-key,html[data-theme="dark"] .hd-sub b,html[data-theme="dark"] .hd-band-list b{color:var(--ink)}
@media (max-width:900px){
  .hd-grid{grid-template-columns:1fr;gap:28px}
  .hd-band-list{grid-template-columns:1fr;padding:8px 0}
  .hd-band-list li{justify-content:flex-start;padding:18px 0}
  .hd-band-list li+li{border-left:0;border-top:1px solid #DCE5EF}
}
@media (max-width:640px){
  .hd-hero .wrap,.hd-band .wrap{width:calc(100% - 40px)}
  .hd-hero{padding-top:calc(var(--nav-h) + 20px)}
  .hd-hero .hd-title{font-size:2.8rem}
  .hd-key{font-size:var(--fs-lg);margin-top:22px}
  .hd-sub{font-size:var(--fs-sm);margin-top:22px}
  .hd-band-list b{font-size:var(--fs-md)}
}
.lp-v2 .hd-hero{padding:calc(var(--nav-h) + 40px) 0 52px !important}
.lp-v2 .hd-band{padding:0 !important}
.hd-grid > *{min-width:0}
.hd-key,.hd-sub{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:640px){ .lp-v2 .hd-hero{padding:calc(var(--nav-h) + 20px) 0 32px !important} }
/* 2026-10-10 그림 카드 — 그림 위 · 아래 · 좌우 여백을 같게, 랜딩 28쪽 공통 */
.hd-fig{padding:18px}
.hd-fig img{aspect-ratio:5/4 !important;object-fit:contain !important;object-position:50% 50% !important;border-radius:10px;background:#fff}
.hd-fig.is-cover img{object-fit:cover !important}
.hd-fig figcaption{margin:18px 0 0 !important;padding:16px 0 0 !important}
.hd-title small{display:block;margin-top:.3rem;font-size:.42em;font-weight:700;letter-spacing:-.02em}
/* 비수술 치료법 첫 화면 아래 다섯 칸 띠 — 허리디스크 랜딩 .hd-band 와 같은 모양 */
.hd-band.is-five{padding:0 !important}
.hd-band.is-five .hd-band-list{grid-template-columns:repeat(5,1fr);padding:28px 0}
.hd-band.is-five .hd-band-list li{gap:14px;padding:0 14px}
.hd-band.is-five .hd-band-list svg{width:40px;height:40px}
.hd-band.is-five .hd-band-list b{font-size:var(--fs-md)}
.hd-band.is-five .hd-band-list span{font-size:var(--fs-xs);word-break:keep-all}
@media (max-width:1200px) and (min-width:901px){ .hd-band.is-five .hd-band-list li{flex-direction:column;text-align:center} }
.hd-band.is-links .hd-band-list a{display:flex;align-items:center;gap:inherit;color:inherit;text-decoration:none;border-radius:var(--r);padding:6px 8px;transition:background .15s}
.hd-band.is-links .hd-band-list a:hover,.hd-band.is-links .hd-band-list a:focus-visible{background:var(--surface-2,#F3F6FA)}
@media (max-width:1200px) and (min-width:901px){ .hd-band.is-five.is-links .hd-band-list a{flex-direction:column;text-align:center} }
/* .head 안 소제목(.kicker)도 파란색 — '.head p' 회색 규칙에 덮이지 않게 */
.head p.kicker{color:var(--acc)}

/* 2026-10-11 봉침 · 약침 첫 화면 약병 그림 — 잘리지 않게 그림 전체를 오른쪽에 맞춰 보여 줌(왼쪽 빈 곳은 색 막이 덮음) */
@media (min-width:769px){
  .dx-hero.pr-hero:has(.is-whole){min-height:calc(var(--nav-h) + clamp(440px,36vw,560px));background:#fff}
  html[data-theme="dark"] .dx-hero.pr-hero:has(.is-whole){background:var(--surface-2)}
  .pr-hero:has(.is-whole)::before{display:none}
  .pr-hero:has(.is-whole) .dx-lead{max-width:min(560px,48%)}
  .pr-hero-bg.is-whole{top:var(--nav-h);left:auto;right:max(1.25rem,(100% - var(--wrap)) / 2);width:auto;max-width:none;height:calc(100% - var(--nav-h)) !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%);mask-image:linear-gradient(90deg,transparent 0,#000 25%)}
}

/* 2026-10-11 상단 배경 변형 .is-fade-right — 그림을 화면 오른쪽 끝까지 붙이고, 무릎 그림 오른쪽부터 흰색으로 덮어 바탕에 녹임(비수술 치료 첫 페이지) */
@media (min-width:769px){
  .pr-hero.is-fade-right .pr-hero-bg.is-whole{right:4cm;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 86%,transparent 97%);mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 86%,transparent 97%)}
}

/* 2026-10-11 다섯 칸 띠(.hd-band.is-five) 휴대폰 — 다섯 칸이 한 줄에 그대로 남아 화면이 옆으로 넘치던 것(페이지 전체가 축소돼 보임)을 고침.
   병원 요청으로 휴대폰에서는 둘째 칸(시술 40만회+ / 치료 경험 40만 회+)을 숨기고 네 칸을 2 × 2 로. 칸 사이 선은 ul 바탕색 + 1px 간격으로 */
@media (max-width:900px){
  .hd-band.is-five:not(.is-links) .hd-band-list > li:nth-child(2){display:none}
  .hd-band.is-five .hd-band-list{grid-template-columns:1fr 1fr;gap:1px;padding:0;background:#DCE5EF}
  .hd-band.is-five .hd-band-list li{flex-direction:row;text-align:left;justify-content:flex-start;gap:12px;padding:16px 10px;border:0;background:#fff;min-width:0}
  .hd-band.is-five .hd-band-list li+li{border:0}
  .hd-band.is-five.is-links .hd-band-list li:last-child:nth-child(odd){grid-column:1 / -1}
  .hd-band.is-five .hd-band-list svg{width:30px;height:30px}
  .hd-band.is-five .hd-band-list b{font-size:var(--fs-xs)}
  .hd-band.is-five .hd-band-list span{font-size:var(--fs-2xs);margin-top:3px}
  .hd-band.is-five.is-links .hd-band-list a{flex-direction:row;text-align:left;padding:0}
  html[data-theme="dark"] .hd-band.is-five .hd-band-list{background:var(--line)}
  html[data-theme="dark"] .hd-band.is-five .hd-band-list li{background:var(--surface)}
}/* 2026-10-11 휴대폰 — 다섯 칸 띠 설명 글이 두 줄로 꺾이지 않게 한 줄로, 'SCI ' 는 휴대폰에서 뺌 */
.hd-band-list .hd-m-hide{font-style:normal}
@media (max-width:900px){
  .hd-band.is-five .hd-band-list li{gap:10px;padding:16px 8px}
  .hd-band.is-five:not(.is-long) .hd-band-list span{white-space:nowrap}
  .hd-band.is-five .hd-band-list .hd-m-hide{display:none}
}/* 2026-10-11 옆으로 미는 카드 줄(.rail)의 카드 — 설명 줄 수가 달라도 제목 줄이 같은 높이에 오도록,
   번호 아래 빈 곳(margin-bottom:auto)을 없애고 '자세히 보기'를 카드 맨 아래로 */
.rail .sym .n{margin-bottom:var(--sp-5)}
.rail .sym .go{margin-top:auto;padding-top:var(--sp-5)}/* 2026-10-12 운동요법 — 병원이 준 단계별 사진 50장. 동작마다 '사진 + 번호 · 설명' 칸을 나란히(.ex-steps).
   --cols: 한 줄 칸 수(아주 넓은 누운 자세 1 · 가로 사진 2 · 세로 사진 4), --ar: 그 동작 사진 가운데 가장 넓은 비율 — 칸 높이를 맞춰 사진이 한 줄로 가지런하게 */
.ex-steps{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:var(--sp-6) var(--sp-5);margin-top:var(--sp-2)}
.ex-steps[style*="--cols:1"]{gap:var(--sp-4)}
.ex-step{margin:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.ex .ex-step .ex-ph{aspect-ratio:var(--ar,1.5);background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--sp-3)}
.ex .ex-step img{width:100%;height:100%;max-width:none;object-fit:contain;border-radius:0;border:0;box-shadow:none}
.ex-step figcaption,.ex-more{position:relative;padding-left:32px;font-size:var(--fs-sm);line-height:1.68;color:var(--ink-2)}
.ex-no{position:absolute;left:0;top:.15em;width:22px;height:22px;border-radius:50%;background:var(--acc);color:#fff;font-size:var(--fs-2xs);font-weight:700;display:flex;align-items:center;justify-content:center}
.ex-more{grid-column:1 / -1;margin:0}
html[data-theme="dark"] .ex .ex-step .ex-ph{background:#fff}
@media (max-width:900px){ .ex-steps{grid-template-columns:repeat(min(var(--cols,2),2),minmax(0,1fr))} }
@media (max-width:560px){ .ex-steps{grid-template-columns:1fr;gap:var(--sp-5)} .ex-steps[style*="--cols:4"]{grid-template-columns:1fr 1fr;gap:var(--sp-5) var(--sp-3)} }/* 아주 넓은 누운 자세(--cols:1)는 사진 왼쪽 · 설명 오른쪽으로 한 줄씩 — 오른쪽이 비지 않게 */
@media (min-width:901px){
  .ex-steps[style*="--cols:1"] .ex-step{flex-direction:row;align-items:center;gap:var(--sp-6)}
  .ex-steps[style*="--cols:1"] .ex-step .ex-ph{flex:0 0 62%;aspect-ratio:auto;height:230px}
  .ex-steps[style*="--cols:1"] .ex-step figcaption{flex:1}
}
@media (max-width:900px){ .ex-steps[style*="--cols:1"] .ex-step .ex-ph{aspect-ratio:auto;height:clamp(140px,40vw,230px)} }

/* 2026-10-12 사진 두 장짜리 동작은 한 줄 2장(큰 틀)로 — 세로 사진이 너무 길어지지 않게 틀 높이 상한 */
.ex .ex-steps[style*="--cols:2"] .ex-step .ex-ph{max-height:560px}

/* 2026-10-12 상단 배경 그림 높이 묶기(.is-low) — 첫 화면 글이 길어 칸이 높아져도 그림이 커지며 사람이 글 쪽으로 밀려오지 않게 아래에 붙여 높이를 고정(운동요법) */
@media (min-width:769px){
  .pr-hero-bg.is-whole.is-low{top:auto;bottom:0;height:min(400px,calc(100% - var(--nav-h))) !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%),linear-gradient(180deg,transparent 0,#000 10%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 25%),linear-gradient(180deg,transparent 0,#000 10%);mask-composite:intersect}
  .pr-hero:has(.is-low) .dx-lead{max-width:min(540px,44%)}
}

/* 2026-10-12 .is-lower — 척추 · 관절 치료노하우: 그림 위끝을 왼쪽 글(현재 위치 줄) 위끝에 맞추고 아래는 칸 끝까지 */
@media (min-width:769px){ .pr-hero-bg.is-whole.is-low.is-lower{right:max(0px,calc(max(1.25rem,(100% - var(--wrap)) / 2) - 4cm));top:calc(var(--nav-h) + clamp(2.4rem,4.4vw,4.4rem));bottom:auto;height:min(calc(100% - var(--nav-h) - clamp(2.4rem,4.4vw,4.4rem)),32vw) !important} }

/* ══════════ 2026-10-13 치료후기 페이지 개선(review.html, main.rv-v2) — 같은 게시판 모양을 닥터칼럼 · 공지사항 · 언론보도(main.bd-v2)에도 씀 ══════════
   병원 오더 「치료후기 페이지 전체 디자인 개선」. 이 절의 규칙은 모두 :is(.rv-v2,.bd-v2) 아래에서만 걸려
   다른 게시판(공지 · 언론보도 · 상담 등)과 board.css 공통 모양은 그대로입니다.
   순서: 상단 배너 → 진료 근거 띠 → 후기 카드 → 게시판(옅은 파란 바탕) → 상담·예약 띠. 좌우 정렬선은 공통 .wrap(1280px). */

/* ① 상단 배너 — 제목 · 설명 크기 */
:is(.rv-v2,.bd-v2) .dx-hero .dx-title{font-size:clamp(3rem,5.4vw,5rem);font-weight:800;line-height:1.15;letter-spacing:-.03em}
:is(.rv-v2,.bd-v2) .dx-hero .dx-lead{font-size:clamp(1.0625rem,1.35vw,1.3rem);line-height:1.6}

/* ③ 후기 카드 — 데스크톱 4열 · 태블릿 2열 · 휴대폰 1열, 같은 줄 카드 높이 맞춤(글자는 자르지 않음) */
:is(.rv-v2,.bd-v2) .reviews{padding-bottom:clamp(48px,6vw,72px)}
:is(.rv-v2,.bd-v2) .cases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
:is(.rv-v2,.bd-v2) .case{display:flex;flex-direction:column;gap:14px;height:100%;padding:26px;background:#fff;border:1px solid #DCE6F2;border-radius:14px;box-shadow:none}
:is(.rv-v2,.bd-v2) .case:hover{border-color:#B9CDE8}
:is(.rv-v2,.bd-v2) .case .tag{background:var(--acc-soft);color:var(--acc);border:0;border-radius:999px;font-weight:700}
:is(.rv-v2,.bd-v2) .case-quote{font-size:clamp(1rem,1.1vw,1.0625rem);line-height:1.7;color:var(--ink);word-break:keep-all}
:is(.rv-v2,.bd-v2) .case-meta{margin-top:auto;font-size:var(--fs-xs);font-weight:500;color:var(--ink-3)}
@media (max-width:1100px){ :is(.rv-v2,.bd-v2) .cases{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:640px){ :is(.rv-v2,.bd-v2) .cases{grid-template-columns:1fr} }
html[data-theme="dark"] :is(.rv-v2,.bd-v2) .case{background:var(--surface);border-color:var(--line)}

/* ④ 게시판 — 화면 전체 옅은 파란 바탕, 내용은 공통 너비 */
:is(.rv-v2,.bd-v2) .rv-board{background:#F3F7FC;padding:clamp(48px,5vw,64px) 0}
html[data-theme="dark"] :is(.rv-v2,.bd-v2) .rv-board{background:var(--surface-2)}
.rv-board-head{text-align:center;margin:0 0 28px}
.rv-board-kicker{margin:0 0 6px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;color:var(--acc)}
.rv-board-title{margin:0;font-size:clamp(1.75rem,2.6vw,2.25rem);font-weight:700;letter-spacing:-.03em;color:var(--deep)}
html[data-theme="dark"] .rv-board-title{color:var(--ink)}
/* 게시글 상세보기는 읽기 너비를 따로 둡니다 */
:is(.rv-v2,.bd-v2) .bd-view{max-width:960px;margin-inline:auto}

/* 개인정보 안내 상자 — 게시판과 같은 너비, 흰 판 · 왼쪽 파란 줄 */
:is(.rv-v2,.bd-v2) #board .bd-notice{width:100%;margin:0 0 24px;padding:22px 24px;background:#fff;border:1px solid #DCE6F2;border-left:4px solid var(--acc);border-radius:12px}
:is(.rv-v2,.bd-v2) #board .bd-notice .bd-note-h{font-size:var(--fs-sm);font-weight:700;color:var(--ink);margin:0 0 8px}
:is(.rv-v2,.bd-v2) #board .bd-notice p{font-size:clamp(.9375rem,1vw,1rem);line-height:1.75;color:var(--ink-2);margin:0;word-break:keep-all}
:is(.rv-v2,.bd-v2) #board .bd-notice p + p{margin-top:8px}
html[data-theme="dark"] :is(.rv-v2,.bd-v2) #board .bd-notice{background:var(--surface);border-color:var(--line);border-left-color:var(--acc)}

/* 분류 탭(왼쪽) · 검색창(오른쪽) */
:is(.rv-v2,.bd-v2) #board .bd-tools{gap:8px;margin-bottom:16px}
:is(.rv-v2,.bd-v2) #board .bd-cats{gap:8px}
:is(.rv-v2,.bd-v2) #board .bd-cat{min-height:44px;padding:0 18px;font-size:clamp(.9375rem,1vw,1rem);font-weight:600;background:#fff;border:1px solid #D3DEEC;color:var(--ink-2)}
:is(.rv-v2,.bd-v2) #board .bd-cat.on{background:var(--acc);border-color:var(--acc);color:#fff}
:is(.rv-v2,.bd-v2) #board .bd-search input{width:300px;min-height:44px;height:44px;background:#fff;border:1px solid #D3DEEC}
html[data-theme="dark"] :is(.rv-v2,.bd-v2) #board .bd-cat:not(.on),html[data-theme="dark"] :is(.rv-v2,.bd-v2) #board .bd-search input{background:var(--surface);border-color:var(--line)}

/* 목록 — 흰 바탕 · 옅은 회색 머리 · 얇은 줄, 제목 칸이 가장 넓고 작성자 · 조회는 좁은 고정 칸 */
:is(.rv-v2,.bd-v2) #board .bd-head{background:#F6F8FB;border:1px solid #E3EAF3;border-bottom:0;border-radius:12px 12px 0 0;padding:12px 22px;font-size:var(--fs-2xs)}
:is(.rv-v2,.bd-v2) #board .bd-list{background:#fff;border:1px solid #E3EAF3;border-radius:0 0 12px 12px;overflow:hidden}
:is(.rv-v2,.bd-v2) #board .bd-row{border-bottom:1px solid #EDF1F6}
:is(.rv-v2,.bd-v2) #board .bd-row:last-child{border-bottom:0}
:is(.rv-v2,.bd-v2) #board .bd-row > a{min-height:72px;padding:0 22px;border-radius:0}
:is(.rv-v2,.bd-v2) #board .bd-row > a:hover{background:#F3F7FD}
:is(.rv-v2,.bd-v2) #board .bd-title{font-size:clamp(1rem,1.2vw,1.125rem);font-weight:600}
:is(.rv-v2,.bd-v2) #board .bd-w,:is(.rv-v2,.bd-v2) #board .bd-d,:is(.rv-v2,.bd-v2) #board .bd-v{font-size:var(--fs-xs);font-weight:500;color:var(--ink-3)}
@media (min-width:769px){
  :is(.rv-v2,.bd-v2) #board .bd-head,:is(.rv-v2,.bd-v2) #board .bd-row > a{grid-template-columns:minmax(0,1fr) 7rem 6rem 4.5rem}
  :is(.rv-v2,.bd-v2) #board .no-d.bd-head,:is(.rv-v2,.bd-v2) #board .no-d .bd-row > a{grid-template-columns:minmax(0,1fr) 7rem 4.5rem}
  :is(.rv-v2,.bd-v2) #board .no-w.no-d.bd-head,:is(.rv-v2,.bd-v2) #board .no-w.no-d .bd-row > a{grid-template-columns:minmax(0,1fr) 4.5rem}
}
html[data-theme="dark"] :is(.rv-v2,.bd-v2) #board .bd-list{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] :is(.rv-v2,.bd-v2) #board .bd-head{background:var(--surface-2);border-color:var(--line)}
html[data-theme="dark"] :is(.rv-v2,.bd-v2) #board .bd-row{border-color:var(--line)}

/* 페이지 번호 */
:is(.rv-v2,.bd-v2) #board .bd-pager{gap:7px;margin-top:32px}
:is(.rv-v2,.bd-v2) #board .bd-pager button{min-width:42px;height:42px;background:#fff;border:1px solid #D3DEEC;border-radius:10px}
:is(.rv-v2,.bd-v2) #board .bd-pager button.on{background:var(--acc);border-color:var(--acc);color:#fff}
html[data-theme="dark"] :is(.rv-v2,.bd-v2) #board .bd-pager button:not(.on){background:var(--surface);border-color:var(--line)}

/* ⑤ 상담 · 예약 띠 — 2026-10-16 사용자 지시로 다른 페이지 띠(.band)와 같은 가운데 정렬.
   그전의 PC 두 칸 배치(왼쪽 제목 · 설명 / 오른쪽 단추)는 뺐습니다. 단추 셋은 PC 에서 한 줄(2026-10-15 병원 요청). */
:is(.rv-v2,.bd-v2) .rv-cta{padding:clamp(48px,5vw,64px) 0}
@media (min-width:1025px){ :is(.rv-v2,.bd-v2) .rv-cta .band > .btns{flex-wrap:nowrap} }

/* ⑫ 휴대폰 */
@media (max-width:768px){
  :is(.rv-v2,.bd-v2) #board .bd-search{width:100%}
  :is(.rv-v2,.bd-v2) #board .bd-search input{width:100%}
  :is(.rv-v2,.bd-v2) #board .bd-head{display:none}
  :is(.rv-v2,.bd-v2) #board .bd-list{border-radius:12px}
  :is(.rv-v2,.bd-v2) #board .bd-row > a{min-height:0;padding:16px 18px;grid-template-columns:auto auto 1fr;grid-template-areas:"t t t" "w v .";gap:6px 14px}
  :is(.rv-v2,.bd-v2) #board .bd-title-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  :is(.rv-v2,.bd-v2) #board .bd-d{display:none}
  :is(.rv-v2,.bd-v2) #board .bd-w{grid-area:w;text-align:left}
  :is(.rv-v2,.bd-v2) #board .bd-w:empty{display:none}
  :is(.rv-v2,.bd-v2) #board .bd-v{display:block;grid-area:v;text-align:left}
  :is(.rv-v2,.bd-v2) #board .bd-v::before{content:"조회 "}
  :is(.rv-v2,.bd-v2) #board .bd-pager button{min-width:44px;height:44px}
  :is(.rv-v2,.bd-v2) .rv-cta .band .btns .btn{flex:1 1 100%}
}
/* 닥터칼럼 · 공지사항 · 언론보도(.bd-v2)는 날짜가 중요해 휴대폰 목록에서도 날짜를 보임 — 제목 아래 '작성자 · 날짜 · 조회' */
@media (max-width:768px){
  .bd-v2 #board .bd-row > a{grid-template-columns:auto auto auto 1fr;grid-template-areas:"t t t t" "w d v ."}
  .bd-v2 #board .bd-d{display:block;grid-area:d;text-align:left}
  .bd-v2 #board .bd-d:empty,.bd-v2 #board .bd-w:empty{display:none}
}

/* 게시판 위 안내문(.bd-guide — 온라인 상담 등)도 치료후기 안내 상자와 같은 모양 */
:is(.rv-v2,.bd-v2) #board .bd-guide{margin:0 0 24px;padding:20px 24px;background:#fff;border:1px solid #DCE6F2;border-left:4px solid var(--acc);border-radius:12px;font-size:clamp(.9375rem,1vw,1rem);line-height:1.75;color:var(--ink-2);word-break:keep-all}
html[data-theme="dark"] :is(.rv-v2,.bd-v2) #board .bd-guide{background:var(--surface);border-color:var(--line);border-left-color:var(--acc)}

/* ══════════ 2026-10-13 봉침요법 페이지 중간 영역 너비 · 디자인 개선(care-beevenom.html, main.bv-v2) ══════════
   병원 오더 「봉침요법 페이지 디자인 개선」. 모든 규칙은 .bv-v2 아래에서만 — 공통 .md-* 너비는 다른 페이지 그대로.
   바깥 정렬선은 공통 .wrap(1280px), 긴 문장은 680~800px 읽기 폭. */
.bv-v2 .md-sec{padding:clamp(56px,6vw,72px) 0}
.bv-v2 .md-h2{font-size:clamp(1.75rem,2.4vw,2.25rem);font-weight:700}
.bv-v2 .md-head-wrap{margin-bottom:24px}
.bv-v2 .md-body{max-width:800px}
.bv-v2 .md-body p{font-size:clamp(1.0625rem,1.2vw,1.125rem);line-height:1.75}
.bv-v2 .md-note{max-width:none}
.bv-v2 .md-sci-flow-wrap{margin-top:32px}
.bv-v2 .md-dual + .md-note{margin-top:28px !important}

/* 09 · 10 비교 — 공통 너비, 두 열 같은 너비 · 옅은 바탕 · 얇은 구분선 */
.bv-v2 .md-cmp-wrap{max-width:none;margin-top:0}
.bv-v2 .md-cmp{border-collapse:collapse;border-spacing:0;margin:0;border:1px solid #D7E3F2;border-radius:12px;overflow:hidden;background:#fff}
.bv-v2 .md-cmp thead th{border-radius:0;padding:20px 28px;font-size:clamp(1.0625rem,1.2vw,1.1875rem);background:#EAF1FB;border-bottom:1px solid #D7E3F2}
.bv-v2 .md-cmp thead th.is-a{background:#EAF1FB;color:var(--acc)}
.bv-v2 .md-cmp thead th.is-b{background:#EAF1FB;color:var(--deep)}
.bv-v2 .md-cmp thead th + th,.bv-v2 .md-cmp td + td{border-left:1px solid #D7E3F2}
.bv-v2 .md-cmp td{border-radius:0;border:0;border-top:1px solid #E6EDF6;background:#fff !important;padding:24px 28px;font-size:clamp(1.0625rem,1.2vw,1.125rem);line-height:1.6;text-align:center;color:var(--ink)}
.bv-v2 .md-cmp tbody tr:first-child td{border-top:0}
.bv-cmp-foot{display:flex;align-items:baseline;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin-top:20px}
.bv-cmp-foot p{margin:0;font-size:clamp(1rem,1.1vw,1.0625rem);line-height:1.7;color:var(--ink-2)}
.bv-cmp-foot a{flex:none;font-weight:700;color:var(--acc);text-decoration:underline;text-underline-offset:4px}
html[data-theme="dark"] .bv-v2 .md-cmp,html[data-theme="dark"] .bv-v2 .md-cmp td{background:var(--surface) !important;border-color:var(--line)}
html[data-theme="dark"] .bv-v2 .md-cmp thead th{background:var(--surface-2);border-color:var(--line)}

/* 11 — 왼쪽 제목 · 설명 · 강조 문구 / 오른쪽 6대 치료요법 그림(45:55) */
.bv-split{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:48px;align-items:center}
.bv-split-tx .md-body{max-width:none;column-count:1 !important}
.bv-split-tx .md-body p + p{margin-top:16px !important}
.bv-split-tx .md-hl{margin-top:28px}
.bv-split-fig{margin:0;max-width:640px;justify-self:center;width:100%}
.bv-split-fig img{width:100%;height:auto;display:block}
@media (max-width:1024px){ .bv-split{grid-template-columns:1fr;gap:32px} .bv-split-fig{max-width:560px} }

/* 강조 상자 · 13 주의사항 — 공통 너비 */
.bv-v2 .md-hl{max-width:none}
.bv-v2 .md-hl.is-caution{padding:30px 32px}
.bv-v2 .md-hl.is-caution .md-hl-h{font-size:clamp(1.125rem,1.3vw,1.25rem);font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.bv-v2 .md-hl.is-caution p:not(.md-hl-h){font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.75}
.bv-v2 .md-hl.is-caution p:not(.md-hl-h) + p{margin-top:12px}

/* 08 연구 — 카드 2열 같은 높이, 캡션 크기 통일 */
.bv-v2 .md-research{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.bv-v2 .md-refs figcaption{font-size:var(--fs-xs)}

@media (max-width:768px){
  .bv-v2 .md-cmp thead th,.bv-v2 .md-cmp td{padding:16px 14px;font-size:var(--fs-sm)}
  .bv-v2 .md-hl.is-caution{padding:22px 20px}
  .bv-v2 .md-research{grid-template-columns:1fr}
}
/* 2026-10-13 비교표 구분선 — 공통 규칙(.md-sec:not(.is-tint) .md-cmp td 의 투명 테두리)이 이겨 선이 안 보이던 것을 바로잡음 */
.bv-v2 .md-cmp td{border-top:1px solid #E1E9F3 !important;border-left:0;border-right:0;border-bottom:0}
.bv-v2 .md-cmp tbody tr:first-child td{border-top:0 !important}
.bv-v2 .md-cmp td + td,.bv-v2 .md-cmp thead th + th{border-left:1px solid #E1E9F3 !important}
.bv-v2 .md-cmp{outline:1px solid #D7E3F2;outline-offset:-1px}

/* 2026-10-13 봉침요법 12 — 세 칸 카드(상태 확인 · 부위 선택 · 농도·용량 조절) + 한 줄 정리 */
.bv-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.bv-step{display:flex;align-items:flex-start;gap:18px;padding:26px 24px;background:#fff;border:1px solid #DCE6F2;border-radius:14px}
.bv-step-ic{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#EAF1FB;color:var(--acc)}
.bv-step-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bv-step h3{margin:4px 0 8px;font-size:clamp(1.125rem,1.3vw,1.25rem);font-weight:700;letter-spacing:-.02em;color:var(--deep)}
.bv-step p{margin:0;font-size:clamp(.9375rem,1vw,1rem);line-height:1.7;color:var(--ink-2);word-break:keep-all}
.bv-steps-foot{margin:20px 0 0;font-size:clamp(1rem,1.1vw,1.0625rem);color:var(--ink-2)}
html[data-theme="dark"] .bv-step{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .bv-step h3{color:var(--ink)}
@media (max-width:900px){ .bv-steps{grid-template-columns:1fr} }
/* 2026-10-13 봉침요법 08 연구 원자료 · 방송 보도 — 760px 제한을 풀고 공통 폭 4열, 카드 · 그림 비율 · 캡션을 다른 카드와 같은 모양으로 */
.bv-v2 .md-refs-h{margin-top:48px;font-size:clamp(1.125rem,1.3vw,1.25rem);font-weight:700;color:var(--deep)}
.bv-v2 .md-refs{max-width:none;gap:20px;margin-top:16px}
.bv-v2 .md-refs figure{display:flex;flex-direction:column;padding:14px;background:#fff;border:1px solid #DCE6F2;border-radius:14px}
.bv-v2 .md-refs img{aspect-ratio:4/3;object-fit:contain;object-position:center;background:#F6F8FB;border-radius:8px}
.bv-v2 .md-refs figcaption{margin-top:14px;padding:0 4px 2px;font-size:clamp(.9375rem,1vw,1rem);line-height:1.5;color:var(--ink-2)}
.bv-v2 .md-refs figcaption b{margin-bottom:4px;font-size:var(--fs-xs);color:var(--acc)}
.bv-v2 .md-refs a:hover img{outline:2px solid var(--acc);outline-offset:-2px}
.bv-v2 #research .rail-hint{margin-top:24px !important}
html[data-theme="dark"] .bv-v2 .md-refs figure{background:var(--surface);border-color:var(--line)}
@media (max-width:900px){ .bv-v2 .md-refs{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} }
/* ══════════ 2026-10-13 홈페이지 전체 — 폭이 좁게 묶여 있던 곳 정리(봉침요법 .bv-v2 와 같은 기준) ══════════
   병원 요청 「다른 페이지들도 특정 부위들이 폭이 좁은 곳이 많다. 전체를 확인해서 모두 수정」.
   상세 · 치료법 페이지(.md-sec)의 바깥 정렬선을 공통 .wrap(1280px)에 맞춥니다. 글자 크기 · 색은 페이지마다 그대로. */
/* 글 묶음(48em) — 공통 폭 한 단(좌우로 나누지 않음, 2026-10-13 병원 지시) */
.md-sec .md-body-wide{max-width:800px}
.bv-split-tx .md-body-wide{column-count:1 !important;max-width:none}
.bv-split-tx .md-body-wide > p + p{margin-top:16px !important}
/* 강조 상자 · 주의사항 · 안내 줄 — 공통 너비 */
.md-sec .md-hl,.md-sec .md-note{max-width:none}
.bv-split-tx .md-hl{margin-top:28px}
/* 비교표 — 860px 제한 해제, 봉침요법과 같은 표 모양(옅은 파란 머리 · 얇은 구분선) */
.md-sec .md-cmp-wrap{max-width:none}
.md-sec .md-cmp{border-collapse:collapse;border-spacing:0;margin:0;outline:1px solid #D7E3F2;outline-offset:-1px;border-radius:12px;overflow:hidden;background:#fff}
.md-sec .md-cmp thead th{border-radius:0;padding:20px 28px;background:#EAF1FB !important;border-bottom:1px solid #D7E3F2}
.md-sec .md-cmp thead th.is-a{color:var(--acc)}
.md-sec .md-cmp thead th.is-b{color:var(--deep)}
.md-sec .md-cmp td{border-radius:0;border:0;border-top:1px solid #E1E9F3 !important;background:#fff !important;padding:22px 28px;line-height:1.6;color:var(--ink)}
.md-sec .md-cmp tbody tr:first-child td{border-top:0 !important}
.md-sec .md-cmp td + td,.md-sec .md-cmp thead th + th,.md-sec .md-cmp th + td{border-left:1px solid #E1E9F3 !important}
html[data-theme="dark"] .md-sec .md-cmp,html[data-theme="dark"] .md-sec .md-cmp td{background:var(--surface) !important}
html[data-theme="dark"] .md-sec .md-cmp thead th{background:var(--surface-2) !important}
@media (max-width:768px){ .md-sec .md-cmp thead th,.md-sec .md-cmp td{padding:14px 12px} }
/* 연구 원자료 줄 · 연구 카드 */
.md-sec .md-refs{max-width:none}
.md-sec .md-research{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:768px){ .md-sec .md-research{grid-template-columns:1fr} }
/* 2026-10-13 약침요법 06 · 10 (병원 시안) — 제목 오른쪽 설명 줄(.bv-headrow) · 결정 차례 네 칸(.bv-flow). 카드는 봉침요법 12 의 .bv-step 과 같은 모양 */
.bv-headrow{display:flex;align-items:baseline;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;margin-bottom:24px}
.bv-headrow .md-head{margin:0}
.bv-headrow > p{margin:0;font-size:clamp(1rem,1.1vw,1.0625rem);color:var(--ink-2)}
.bv-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px}
.bv-flow li{position:relative;display:flex;align-items:center;gap:16px;padding:22px 20px;background:#fff;border:1px solid #DCE6F2;border-radius:14px}
.bv-flow li + li::before{content:"";position:absolute;left:-26px;top:50%;width:12px;height:12px;border-top:2.5px solid var(--acc);border-right:2.5px solid var(--acc);transform:translateY(-50%) rotate(45deg)}
.bv-flow-n{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#EAF1FB;color:var(--acc);font-weight:700;font-size:var(--fs-sm)}
.bv-flow h3{margin:0 0 4px;font-size:clamp(1.0625rem,1.2vw,1.1875rem);font-weight:700;color:var(--deep)}
.bv-flow p{margin:0;font-size:var(--fs-xs);line-height:1.6;color:var(--ink-2);word-break:keep-all}
html[data-theme="dark"] .bv-flow li{background:var(--surface);border-color:var(--line)}
html[data-theme="dark"] .bv-flow h3{color:var(--ink)}
@media (max-width:1024px){ .bv-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px} .bv-flow li + li::before{display:none} }
@media (max-width:600px){ .bv-flow{grid-template-columns:1fr} }
/* 2026-10-13 결정 차례 네 칸 — 설명 줄 수가 달라도 번호 · 제목이 같은 줄에 오게 위쪽 맞춤 */
.bv-flow li{align-items:flex-start}
.bv-flow h3{margin-top:11px}

/* 2026-10-13 병원 요청 — 문단을 좌우 두 단으로 나누지 않고 한 단으로(두 단 규칙 취소), 폭은 공통 너비 */
.md-sec .md-body-wide,.bv-v2 .md-body-wide{column-count:1 !important;max-width:none}
.md-sec .md-body-wide > p{margin:0}
.md-sec .md-body-wide > p + p{margin-top:16px !important}

/* 2026-10-13 추나요법 01 — 교정 사진 세 컷을 글 아래 공통 폭으로 크게 */
.md-trio-wide{margin:32px 0 0;max-width:none}
.md-trio-wide .md-trio{gap:24px}
.md-trio-wide .md-trio figcaption{margin-top:12px;font-size:clamp(1rem,1.1vw,1.0625rem)}
.md-trio-wide > .md-cap{margin-top:16px;text-align:center}
.md-text .md-body{max-width:none}

/* 2026-10-13 척추 · 관절추나 01 — 사진 한 장을 글 아래 공통 폭으로(가로로 넓게, 높이 560px 이하로 잘라 보임) */
.md-photo-wide{margin:32px 0 0;max-width:none}
.md-photo-wide .md-frame{aspect-ratio:16/7;max-height:none}
.md-photo-wide .md-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.md-photo-wide > .md-cap{margin-top:14px;text-align:center}
@media (max-width:768px){ .md-photo-wide .md-frame{aspect-ratio:4/3} }

/* 2026-10-13 푸터 주소 → 오시는 길 지도(#map)로 바로 — 위 메뉴 줄에 가리지 않게 */
#map{scroll-margin-top:calc(var(--nav-h) + 24px)}

/* 2026-10-13 비수술 치료 첫 페이지 — 그림을 메뉴 줄 바로 아래부터(봉침요법 첫 화면 높이와 비슷하게), 위쪽 가장자리도 아래쪽처럼 흐리게 */
@media (min-width:769px){
  .pr-hero.is-fade-right .pr-hero-bg.is-whole.is-lower{top:var(--nav-h);height:min(calc(100% - var(--nav-h)),34vw) !important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 86%,transparent 97%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(90deg,transparent 0,#000 25%,#000 86%,transparent 97%),linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);mask-composite:intersect}
}

/* 2026-10-13 허리디스크 랜딩 첫 화면 — 그림 카드 위아래 여백을 같게(메뉴 줄 아래 40px · 아래 40px) */
.lp-v2 .hd-hero{padding-bottom:calc(var(--nav-h) * 0 + 39px) !important}

/* 2026-10-13 '온라인 상담' 단추 앞 말풍선 아이콘(.btn-qna) — 전화 단추(.btn-tel)와 같은 크기 · 10-14 모양을 홈 「증상 남기기」 카드의 말풍선(#i-chat-lines)과 같게 */
.btn-qna{display:inline-flex;align-items:center;justify-content:center}
.btn-qna::before{content:"";flex:none;width:1.2em;height:1.2em;margin-right:.55rem;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E") center/contain no-repeat}

/* 2026-10-14 랜딩페이지 첫 화면 그림 — 상세페이지처럼 배경 · 카드 없이(투명 배경 그림이 페이지 바탕 위에 바로 놓이게) */
.hd-fig{background:none !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important;overflow:visible}
.hd-fig img{background:none !important;border-radius:0 !important;aspect-ratio:auto !important;width:auto !important;max-width:100%;height:420px !important;object-fit:contain !important;margin:0 auto}
.hd-fig figcaption{border-top:0 !important;margin:10px 0 0 !important;padding:0 !important}
@media (max-width:900px){ .hd-fig img{height:auto !important;max-height:360px;width:100% !important} }

/* 2026-10-14 상세페이지 첫 화면 문구(병원 「상세페이지 상단에 들어갈 문구 정리」) — 배지 · 큰 제목 · 보조 명칭(.dzv-sub) · 개요(.dzv-lead) */
.dz-v2 .dzv-hero > .dzv-sub{grid-area:alt;margin:14px 0 0;font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.35;letter-spacing:-.02em;color:var(--deep);font-weight:500}
.dz-v2 .dzv-hero > .dzv-sub b{font-weight:800}
.dz-v2 .dzv-hero > .dzv-lead{margin-top:22px;max-width:36em;font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.75;color:var(--ink-2);word-break:keep-all}
.dz-v2 .dzv-hero > .dzv-lead strong{font-weight:700;color:var(--ink)}
html[data-theme="dark"] .dz-v2 .dzv-hero > .dzv-sub{color:var(--ink)}
/* 2026-10-14 첫 화면 그림의 잘린 가장자리를 흐리게 — 랜딩 *-hero-cut · 상세 *-person 그림 중 곧게 잘린 변만.
   변마다 0 = 실제 그림이 시작하는 곳(투명 여백 다음) · 1 = 다 보이기 시작하는 곳, img style 에 그림별로(표는 tools/hero-edge-fade.pl).
   상자 = 그림 크기여야 % 가 그림에 맞으므로 width · height:auto */
.edge-fade{
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--ft0,0%),#000 var(--ft1,0%),#000 calc(100% - var(--fb1,0%)),transparent calc(100% - var(--fb0,0%))),
                     linear-gradient(to right,transparent var(--fl0,0%),#000 var(--fl1,0%),#000 calc(100% - var(--fr1,0%)),transparent calc(100% - var(--fr0,0%)));
          mask-image:linear-gradient(to bottom,transparent var(--ft0,0%),#000 var(--ft1,0%),#000 calc(100% - var(--fb1,0%)),transparent calc(100% - var(--fb0,0%))),
                     linear-gradient(to right,transparent var(--fl0,0%),#000 var(--fl1,0%),#000 calc(100% - var(--fr1,0%)),transparent calc(100% - var(--fr0,0%)));
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hd-fig img.edge-fade,.dz-v2 .dzv-hero .lp-hero-fig img.edge-fade{width:auto !important;height:auto !important;max-width:100%;max-height:420px}
@media (max-width:900px){ .hd-fig img.edge-fade{max-height:360px} }

/* 2026-10-14 상세페이지(dz-v2 28쪽) 첫 화면 오른쪽 그림을 왼쪽으로 2cm — PC 에서만(1024px 이하는 글 아래 가운데라 그대로) */
@media (min-width:1025px){ .dz-v2 .dzv-hero .lp-hero-fig{margin-right:2cm} }

/* 2026-10-15 운동요법 무릎 02(자전거 타기) — 무릎 01 과 같은 배율 · 같은 정수리 위치로 그리려고, 사진을 무릎 01 과 같은 폭(1448)에
   머리 크기 · 정수리 x 를 맞춰 다시 만들었고(높이 556 대 438), 틀 높이도 그 비율(×1.2694)로 늘립니다(.ex-tall) */
@media (min-width:901px){ .ex-steps.ex-tall[style*="--cols:1"] .ex-step .ex-ph{height:calc((230px - 2 * var(--sp-3)) * 1.2694 + 2 * var(--sp-3))} }
@media (max-width:900px){ .ex-steps.ex-tall[style*="--cols:1"] .ex-step .ex-ph{height:calc((clamp(140px,40vw,230px) - 2 * var(--sp-3)) * 1.2694 + 2 * var(--sp-3))} }

/* ---------- Q&A 새 틀 (.qa-v2) — 2026-10-15 ----------
   병원 시안(「약침요법 Q&A」·「허리디스크 Q&A」 그림) — 가운데 제목, 한 장의 카드 안에 Q01 · Q02 … 번호와 오른쪽 + / − 표시.
   치료법 6쪽(봉침·약침·전침·추나·한약·운동)과 질환 상세 26쪽의 Q&A 에 씁니다. 처음에는 모두 닫혀 있습니다(<details> 에 open 없음).
   기존 .faq / .qa 를 그대로 두고 그 위에 덮습니다. 다른 페이지(faq.html 등)의 .qa 는 바뀌지 않습니다. */
.qa-v2 .head{margin-inline:auto;text-align:center;margin-bottom:clamp(2rem,3.5vw,3rem)}
.qa-v2 .head .kicker{gap:var(--sp-4)}
.qa-v2 .head .kicker::before,.qa-v2 .head .kicker::after{content:"";width:2.4rem;height:1px;background:currentColor;opacity:.55}
.qa-v2 .head p.qa-lead{margin-top:var(--sp-3);font-size:var(--fs-md);color:var(--ink-2)}
.qa-v2 .faq{display:block;max-width:72rem;margin-inline:auto;counter-reset:qa;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.qa-v2 .qa{counter-increment:qa;border:0;border-radius:0;background:none}
.qa-v2 .qa + .qa{border-top:1px solid var(--line)}
.qa-v2 .qa summary{display:grid;grid-template-columns:3.4rem minmax(0,1fr) 1.4rem;gap:var(--sp-4);align-items:center;
  padding:var(--sp-5) var(--sp-7);font-size:var(--fs-md);font-weight:700;color:var(--ink);transition:background-color .2s}
.qa-v2 .qa summary:hover{background:var(--surface-2)}
.qa-v2 .qa[open] summary{background:var(--acc-soft)}
.qa-v2 .qa summary::before{content:"Q" counter(qa,decimal-leading-zero);width:auto;height:auto;margin:0;
  background:none;color:var(--acc);font-size:var(--fs-sm);font-weight:700;display:block;letter-spacing:0}
/* + 와 − : 가로줄은 늘 있고, 세로줄만 열리면 사라집니다 */
.qa-v2 .qa summary::after{content:"";width:1.1rem;height:1.1rem;margin:0;border:0;transform:none;justify-self:end;
  background:linear-gradient(var(--acc),var(--acc)) center/100% 2px no-repeat,
             linear-gradient(var(--acc),var(--acc)) center/2px 100% no-repeat}
.qa-v2 .qa[open] summary::after{background:linear-gradient(var(--acc),var(--acc)) center/100% 2px no-repeat;transform:none}
.qa-v2 .qa .a{padding:var(--sp-5) var(--sp-7) var(--sp-6) calc(var(--sp-7) + 3.4rem + var(--sp-4));
  font-size:var(--fs-sm);line-height:1.85;color:var(--ink-2);border-top:1px solid var(--line)}
.qa-v2 .qa .a strong{color:var(--ink);font-weight:700}
.qa-v2 .qa-ul{margin:var(--sp-3) 0;display:grid;gap:var(--sp-2)}
.qa-v2 .qa-ul li{position:relative;padding-left:1.1rem}
.qa-v2 .qa-ul li::before{content:"";position:absolute;left:.15rem;top:.78em;width:5px;height:5px;border-radius:50%;background:var(--acc)}
.qa-v2 .qa-ul + p,.qa-v2 p + .qa-ul{margin-top:var(--sp-3)}
/* Q&A 아래 상담 카드 (질환 상세페이지) */
.qa-cta{max-width:72rem;margin:var(--sp-6) auto 0;display:flex;align-items:center;gap:var(--sp-6);
  padding:var(--sp-6) var(--sp-7);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.qa-cta-ic{flex:none;width:3rem;height:3rem;color:var(--ink);padding-right:var(--sp-6);box-sizing:content-box;border-right:1px solid var(--line)}
.qa-cta-tx{flex:1;min-width:0}
.qa-cta-tx b{display:block;font-size:var(--fs-lg);color:var(--ink);letter-spacing:-.02em}
.qa-cta-tx span{display:block;margin-top:var(--sp-1);font-size:var(--fs-xs);color:var(--ink-2)}
.qa-cta-btns{display:flex;gap:var(--sp-3);flex-wrap:wrap}
@media (max-width:760px){
  .qa-v2 .qa summary{grid-template-columns:2.6rem minmax(0,1fr) 1rem;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5)}
  .qa-v2 .qa summary::before{font-size:var(--fs-xs)}
  .qa-v2 .qa summary::after{width:.95rem;height:.95rem}
  .qa-v2 .qa .a{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
  .qa-v2 .head .kicker::before,.qa-v2 .head .kicker::after{width:1.4rem}
  .qa-cta{flex-direction:column;align-items:stretch;text-align:center;gap:var(--sp-4);padding:var(--sp-5)}
  .qa-cta-ic{display:none}
  .qa-cta-btns .btn{flex:1}
}

/* ---------- 자주 묻는 질문 페이지 (faq.html, .faq-hub) — 2026-10-15 병원 시안 「진료 전 FAQ 페이지」 ----------
   .qa-v2 의 카드 · + / − 를 그대로 쓰고, 질문 앞 표시만 Q01 대신 동그란 Q 로 바꿉니다.
   위쪽: 왼쪽 제목 · 오른쪽 검색창, 아래 분류 단추 다섯. 묶음마다 번호 · 아이콘 · 이름 제목. */
.faq-hub{background:var(--surface-2)}
.faq-hub .fh-top{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);margin-bottom:var(--sp-8)}
.faq-hub .fh-top .head{margin:0;text-align:left;max-width:none}
.faq-hub .fh-top .head p{margin-top:var(--sp-2);font-size:var(--fs-sm)}
.fh-search{position:relative;flex:0 1 22rem}
.fh-search svg{position:absolute;left:var(--sp-4);top:50%;width:1.2rem;height:1.2rem;transform:translateY(-50%);
  fill:none;stroke:var(--ink-3);stroke-width:2;stroke-linecap:round;pointer-events:none}
.fh-search input{width:100%;min-height:3.1rem;padding:0 var(--sp-4) 0 calc(var(--sp-4) + 1.7rem);border:1px solid var(--line);
  border-radius:var(--r-s);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--fs-sm)}
.fh-search input:focus{outline:2px solid var(--acc);outline-offset:1px}
.fh-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sp-3);margin-bottom:clamp(2rem,4vw,3rem)}
.fh-tab{min-height:3.1rem;padding:0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-s);background:var(--surface);
  color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.fh-tab:hover{border-color:var(--acc)}
.fh-tab[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink);font-weight:700}
.fh-none{padding:var(--sp-7);text-align:center;color:var(--ink-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.fh-group + .fh-group{margin-top:clamp(2rem,4vw,2.8rem)}
.fh-group[hidden],.faq-hub details.qa[hidden]{display:none}
.fh-g-h{display:flex;align-items:center;gap:var(--sp-4);margin:0 0 var(--sp-4);font-size:var(--fs-h5);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.fh-g-n{min-width:2.2rem;color:var(--acc);font-size:var(--fs-md);font-weight:700}
.fh-g-h svg{flex:none;width:2.4rem;height:2.4rem;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.faq-hub .faq{max-width:none}
.faq-hub .qa summary{grid-template-columns:1.5rem minmax(0,1fr) 1.2rem;font-size:var(--fs-sm);font-weight:600;padding:var(--sp-4) var(--sp-6)}
.faq-hub .qa summary::before{content:"Q";width:1.5rem;height:1.5rem;border-radius:50%;background:var(--acc);color:var(--acc-ink);
  display:grid;place-items:center;font-size:var(--fs-2xs);font-weight:700}
.faq-hub .qa summary::after{width:1rem;height:1rem}
.faq-hub .qa .a{padding:var(--sp-4) var(--sp-6) var(--sp-5) calc(var(--sp-6) + 1.5rem + var(--sp-4));font-size:var(--fs-sm)}
.faq-hub .qa .a a{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.faq-hub .fh-cta{max-width:none;margin-top:clamp(2.4rem,4.5vw,3.4rem);background:var(--acc-soft);border-color:transparent}
.faq-hub .fh-cta .qa-cta-ic{border-right-color:transparent;padding-right:0}
@media (max-width:900px){
  .faq-hub .fh-top{flex-direction:column;align-items:stretch;margin-bottom:var(--sp-7)}
  .fh-search{flex-basis:auto}
  .fh-tabs{display:flex;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--sp-5) * -1);padding-inline:var(--sp-5)}
  .fh-tabs::-webkit-scrollbar{display:none}
  .fh-tab{flex:none;padding:0 var(--sp-5)}
}
@media (max-width:760px){
  .fh-g-h{font-size:var(--fs-lg);gap:var(--sp-3)}
  .fh-g-h svg{width:2rem;height:2rem}
  .faq-hub .qa summary{grid-template-columns:1.4rem minmax(0,1fr) .95rem;padding:var(--sp-4)}
  .faq-hub .qa .a{padding:var(--sp-4)}
}

/* ---------- 비급여 안내 (fee.html, .fee-v2) — 2026-10-15 병원 시안 ----------
   가운데 제목(뒷말 파랑) · 적용일 안내 알약 · 바로가기 단추 셋 · '01 치료법' 처럼 번호 붙은 표 세 장.
   표 모양은 기존 .fee 를 쓰고 머리줄 바탕 · 가운데 정렬 칸 · 비용 글씨만 덮습니다. */
.fee-v2 .head{margin-bottom:var(--sp-6)}
.fee-v2 .head .title em{font-style:normal;color:var(--acc)}
.fee-v2 .head p{font-size:var(--fs-md)}
.fee-v2 .fee-note{width:fit-content;max-width:100%;margin:0 auto var(--sp-7);align-items:center;padding:var(--sp-3) var(--sp-6);
  border-radius:var(--r-s);background:var(--surface);border:1px solid var(--acc);color:var(--ink-2);font-size:var(--fs-sm)}
.fee-v2 .fee-note svg{flex:none;width:1.4rem;height:1.4rem;fill:var(--acc);stroke:var(--acc-ink);stroke-width:2.2;stroke-linecap:round}
.fee-v2 .fee-note strong{color:var(--ink);margin-right:var(--sp-3)}
.fee-tabs{display:flex;justify-content:center;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3rem)}
.fee-tabs a{min-width:8.5rem;padding:var(--sp-3) var(--sp-6);border:1.5px solid var(--acc);border-radius:999px;background:var(--surface);
  color:var(--acc);font-weight:700;font-size:var(--fs-sm);text-align:center;text-decoration:none;transition:background-color .2s,color .2s}
.fee-tabs a:hover{background:var(--acc-soft)}
.fee-tabs a[aria-current="true"]{background:var(--acc);color:var(--acc-ink)}
.fee-group{scroll-margin-top:7rem}
.fee-group + .fee-group{margin-top:clamp(2rem,4vw,2.8rem)}
.fee-g-h{display:flex;align-items:baseline;gap:var(--sp-3);margin:0 0 var(--sp-4);font-size:var(--fs-h5);font-weight:700;color:var(--ink);letter-spacing:-.02em}
.fee-g-h span{color:var(--acc)}
.fee-v2 .fee-scroll{box-shadow:0 1px 3px rgba(20,40,80,.05)}
.fee-v2 .fee{font-size:var(--fs-sm)}
.fee-v2 .fee thead th{background:var(--acc-soft);color:var(--ink-2);font-size:var(--fs-xs);letter-spacing:0;padding:var(--sp-3) var(--sp-5)}
.fee-v2 .fee th,.fee-v2 .fee td{padding:var(--sp-3) var(--sp-5)}
.fee-v2 .fee tbody th{color:var(--ink);font-weight:600}
.fee-v2 .fee .unit,.fee-v2 .fee .memo{text-align:center}
.fee-v2 .fee td + td,.fee-v2 .fee th + td{border-left:1px solid var(--line)}
.fee-v2 .fee thead th + th{border-left:1px solid var(--line)}
.fee-v2 .fee .won{color:var(--acc);font-size:var(--fs-md)}
/* 세 표의 칸 너비를 똑같이 — 항목 · 단위 · 비용 · 참고 */
.fee-v2 .fee{table-layout:fixed}
.fee-v2 .fee thead th:nth-child(1){width:34%}
.fee-v2 .fee thead th:nth-child(2){width:16%}
.fee-v2 .fee thead th:nth-child(3){width:24%}
.fee-v2 .fee thead th:nth-child(4){width:26%}
.fee-v2 .fee thead th.won{color:var(--ink-2);font-size:var(--fs-xs);text-align:center}
@media (max-width:760px){
  .fee-v2 .fee-note{flex-direction:column;align-items:flex-start;gap:var(--sp-2);text-align:left}
  .fee-v2 .fee-note strong{display:block}
  .fee-tabs a{min-width:0;flex:1;padding-inline:var(--sp-3)}
  /* 휴대폰에서도 비용 칸이 잘리지 않게 표를 화면 폭에 맞춥니다(가로 스크롤 없음) */
  .fee-v2 .fee{min-width:0;font-size:var(--fs-xs)}
  .fee-v2 .fee th,.fee-v2 .fee td{padding:var(--sp-3) var(--sp-2);word-break:keep-all}
  .fee-v2 .fee thead th{padding:var(--sp-3) var(--sp-2);font-size:var(--fs-2xs)}
  .fee-v2 .fee tbody th{padding-left:var(--sp-3)}
  .fee-v2 .fee .won{font-size:var(--fs-sm);text-align:right}
  .fee-v2 .fee .memo{font-size:var(--fs-2xs)}
  .fee-v2 .fee thead th:nth-child(1){width:33%}
  .fee-v2 .fee thead th:nth-child(2){width:15%}
  .fee-v2 .fee thead th:nth-child(3){width:28%}
  .fee-v2 .fee thead th:nth-child(4){width:24%}
}

/* ---------- 휴대폰 앱 설치 안내 (2026-10-22, main.js '휴대폰 앱(PWA)') ----------
   휴대폰 아래 독(.dock, 약 72px) 바로 위에 뜹니다. */
.app-hint{position:fixed;left:var(--sp-3);right:var(--sp-3);z-index:120;
  bottom:calc(84px + env(safe-area-inset-bottom));max-width:520px;margin:0 auto;
  display:flex;align-items:center;gap:14px;padding:16px 10px 16px 16px;
  background:var(--surface);color:var(--ink);border:1px solid var(--app-hint-line);border-radius:22px;
  box-shadow:0 10px 30px rgba(29,91,176,.14),0 2px 6px rgba(26,31,38,.06);animation:app-hint-in .35s var(--ease);
  --app-hint-line:#DCE6F5}
[data-theme="dark"] .app-hint{--app-hint-line:rgba(143,188,245,.22);box-shadow:0 10px 30px rgba(0,0,0,.45)}
.app-hint-ico{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:14px;
  background:#fff;border:1px solid var(--app-hint-line)}
.app-hint-ico img{width:44px;height:44px;border-radius:0}
.app-hint-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35;word-break:keep-all}
.app-hint-txt strong{font-size:1.08rem;font-weight:800;letter-spacing:-.01em}
.app-hint-txt span{font-size:.9rem;color:var(--ink-2)}
.app-hint-share{display:inline-block;vertical-align:-3px;color:var(--acc)}
.app-hint-nb{font-style:normal;white-space:nowrap}
.app-hint-go{flex:none;min-height:44px;padding:0 18px;border:0;border-radius:13px;
  background:var(--acc);color:var(--acc-ink);font:inherit;font-size:.98rem;font-weight:800;cursor:pointer;white-space:nowrap}
.app-hint-x{flex:none;width:40px;height:44px;display:grid;place-items:center;border:0;border-radius:var(--r);
  background:transparent;color:var(--ink-2);cursor:pointer}
/* [앱으로 설치하기] 단추(data-app-install) — 휴대폰 메뉴 맨 아래 · 푸터. 앱으로 열었거나 설치가 안 되는 곳(html 에 .app-ok 없음)에서는 숨김 */
html:not(.app-ok) [data-app-install]{display:none !important}
button.f-btn{font:inherit;font-size:var(--fs-xs);font-weight:700;cursor:pointer}
/* 눈에 띄게 연한 노란 바탕(2026-10-24 병원 지정 #FFFBE5). 화면에 처음 보일 때 5번 깜빡이고 노란색으로 남습니다(main.js 가 .is-blink) */
[data-app-install].f-btn{background:#FFFBE5}
[data-app-install].f-btn.is-blink{animation:app-blink .45s ease-in-out 9 alternate both}
@keyframes app-blink{from{background:#fff}to{background:#FFFBE5}}
[data-theme="dark"] [data-app-install].f-btn{background:rgba(255,226,120,.14)}
[data-theme="dark"] [data-app-install].f-btn.is-blink{animation-name:app-blink-dark}
@keyframes app-blink-dark{from{background:transparent}to{background:rgba(255,226,120,.14)}}
@media (prefers-reduced-motion:reduce){ [data-app-install].f-btn.is-blink{animation:none} }
.f-cta{flex-wrap:wrap}
.f-app{flex:1 0 100%}
@media (max-width:359px){ .f-app{flex:none} }
.m-app{display:none}
@media (max-width:1023px){
  .menu > li.m-app{display:block;padding:var(--sp-5) 0 var(--sp-2)}
  .m-app .f-btn{width:100%;min-height:52px;font-size:var(--fs-sm)}
}
/* 폭 380px 이하(작은 갤럭시 등) — [앱 설치] 단추를 글 아래 한 줄로 내려 글이 세로로 쪼개지지 않게 */
@media (max-width:380px){
  .app-hint{flex-wrap:wrap;gap:12px;padding:14px 8px 14px 14px}
  .app-hint-ico{width:46px;height:46px;border-radius:12px}
  .app-hint-ico img{width:38px;height:38px}
  .app-hint-go{order:3;flex:1 0 100%;margin-right:6px}
}
@keyframes app-hint-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.app-hint{animation:none}}