/* ===========================================================
   Able Wellness Centre — 웹 디자인 시스템
   정본: 에이블웰니스_브랜드시트_2026-08-25.pdf + 소셜가이드라인 2026-08-23

   가이드라인은 1080×1350 캔버스 기준이라 비율로 환산했다.
     여백   76 / 1080 = 7.0%   → --pad
     모서리 44 / 1080 = 4.1%   → 카드 20px · 사진 24px
     로고  140 / 1080 = 13%    → 헤더 160px

   색 규칙 3개는 여기서 강제한다.
     1) 강조 #83725C는 면으로만. 그 위 글자는 흰색.
     2) 강조면 위 잉크 글자 금지 (3.06:1).
     3) 별 #FDDF5B는 흰 카드 위에서만.
   =========================================================== */

:root{
  --paper:#ECEDE7;
  --ink:#322928;
  --accent:#83725C;
  --star:#FDDF5B;
  --card:#FFFFFF;

  /* 잉크 파생. 종이 위 대비를 재서 정한 값이라 임의로 낮추지 말 것. */
  --ink-soft:rgba(50,41,40,.74);   /* 부제·본문 보조 — 종이 위 5.58:1 */
  /* 라벨·주석. .52였을 때 종이 위 3.02:1로 AA 미달이었다(라벨이 12px라
     큰글자 예외를 못 받는다). .68로 올려 4.68:1. 실측값이니 내리지 말 것. */
  --ink-faint:rgba(50,41,40,.68);
  /* 강조색을 종이 위 '글자'로 쓸 때만 쓰는 어두운 변형.
     정본 #83725C는 종이 위 3.94:1이라 12px 라벨에서 AA를 못 넘긴다.
     면(버튼·패널)에는 반드시 --accent를 쓴다. 같은 색상각, 명도만 낮췄다. */
  --accent-ink:#75654F;            /* 종이 4.78:1 · wash 5.10:1 */
  --line:rgba(50,41,40,.16);       /* 헤어라인 */
  --line-soft:rgba(50,41,40,.09);
  --wash:#F4F4F0;                  /* 종이보다 한 톤 밝은 면 */

  --pad:clamp(20px,7vw,88px);
  --maxw:1240px;
  --r-card:20px;
  --r-photo:24px;
  --r-pill:999px;

  /* 최소값은 iframe 하니스로 320~768을 실측해서 정했다.
     올캡스 + 자간 .04em이라 같은 px에서도 소문자보다 길다.
     (헤드리스 크롬은 --window-size를 500px 아래로 안 내려가니
      좁은 폭 측정은 반드시 iframe 안에서 재야 한다.) */
  --t-display:clamp(2.125rem,7vw,5rem);
  --t-h1:clamp(1.75rem,5.2vw,3.25rem);
  --t-h2:clamp(1.375rem,3.4vw,2.125rem);
  --t-h3:clamp(1.0625rem,1.6vw,1.3125rem);
  --t-lead:clamp(1.125rem,1.7vw,1.375rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-label:.75rem;

  --gap:clamp(28px,4vw,56px);
  /* 섹션 세로 리듬. 인접한 두 섹션의 패딩이 더해지므로 한쪽 값을 크게 잡으면
     화면에서 두 배로 벌어진다. 실측 후 132 → 104로 내렸다. */
  --sect:clamp(56px,7vw,104px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:var(--t-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:0 0 var(--r-card) 0}
.skip:focus{left:0}

/* ── 사진 보정. 피드·인쇄와 같은 값이라 채널 간 톤이 어긋나지 않는다. */
.ph{filter:saturate(.92) contrast(.97) sepia(.06)}

/* ── 레이아웃 ───────────────────────────────────────────── */

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:1560px;margin-inline:auto;padding-inline:var(--pad)}
.sect{padding-block:var(--sect)}
.sect-tight{padding-block:calc(var(--sect) * .58)}

/* 차트 리듬: 왼쪽은 필드 라벨, 오른쪽은 값. 진료기록이 읽히는 방식. */
.rail{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,2.4vw,40px)}
@media(min-width:900px){
  .rail{grid-template-columns:minmax(150px,1.6fr) minmax(0,7fr);gap:clamp(32px,5vw,72px)}
  .rail-head{position:sticky;top:104px}
}
.rail-head{align-self:start}

/* ── 타이포 ─────────────────────────────────────────────── */

.label{
  font-size:var(--t-label);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.4;
  overflow-wrap:break-word;
}
.label-ink{color:var(--ink)}
.display{
  font-size:var(--t-display);font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;line-height:1.02;overflow-wrap:break-word;
}
.h1{overflow-wrap:break-word;font-size:var(--t-h1);font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.08}
.h2{overflow-wrap:break-word;font-size:var(--t-h2);font-weight:800;letter-spacing:.04em;text-transform:uppercase;line-height:1.12}
.h3{overflow-wrap:break-word;font-size:var(--t-h3);font-weight:800;letter-spacing:.03em;text-transform:uppercase;line-height:1.3}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--ink-soft);max-width:46ch}
.body{max-width:66ch}
.body + .body{margin-top:1em}
.small{font-size:var(--t-small)}
.note{font-size:var(--t-small);font-weight:300;color:var(--ink-faint)}
.measure{max-width:62ch}

/* ── 버튼 ───────────────────────────────────────────────── */

.btn{
  display:inline-flex;align-items:center;gap:.6em;
  padding:.95em 1.7em;border-radius:var(--r-pill);border:1px solid transparent;
  font-size:var(--t-small);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;line-height:1;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
/* 규칙 1: 강조는 면으로만, 그 위 글자는 흰색 (4.64:1) */
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:#6E5F4C}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(50,41,40,.04)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#241D1C}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

.arrow{transition:transform .18s ease}
.btn:hover .arrow{transform:translateX(3px)}

/* ── 헤더 ───────────────────────────────────────────────── */

.hdr{position:sticky;top:0;z-index:50;background:rgba(236,237,231,.92);
  backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line-soft)}
.hdr-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  min-height:76px;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand img{width:192px}
.nav{display:none;margin-left:auto;align-items:center;gap:clamp(14px,1.8vw,26px)}
@media(min-width:1060px){.nav{display:flex}}
.nav a{
  font-size:var(--t-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);padding:6px 0;
  border-bottom:1.5px solid transparent;transition:color .16s,border-color .16s;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current]{color:var(--ink);border-bottom-color:var(--accent)}
.hdr .btn{padding:.75em 1.35em}
.nav-cta{margin-left:auto}
@media(min-width:1060px){.nav-cta{margin-left:8px}}

/* 320px에서 로고(160)+MENU+BOOK 합이 콘텐츠 폭 275px를 34px 넘겼다. 실측값. */
@media(max-width:399px){
  .brand img{width:132px}
  .hdr-in{gap:8px;min-height:64px;padding-inline:16px}
  .hdr .btn{padding:.68em .95em;letter-spacing:.04em;font-size:.8125rem}
  .menu summary{padding:10px 0;letter-spacing:.06em;font-size:.6875rem}
}

/* 모바일 메뉴 — details/summary라 JS 없이 동작한다 */
.menu{margin-left:auto;position:relative}
@media(min-width:1060px){.menu{display:none}}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5em;
  font-size:var(--t-label);font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 4px}
.menu summary::-webkit-details-marker{display:none}
.menu[open] .menu-panel{display:block}
.menu-panel{display:none;position:absolute;right:0;top:calc(100% + 10px);width:min(84vw,320px);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-card);
  padding:14px;box-shadow:0 18px 44px rgba(50,41,40,.14)}
.menu-panel a{display:block;padding:11px 12px;border-radius:12px;text-decoration:none;
  font-size:var(--t-small);font-weight:600}
.menu-panel a:hover{background:rgba(50,41,40,.05)}
.menu-panel hr{border:0;border-top:1px solid var(--line-soft);margin:8px 4px}
.menu-panel .sub{padding-left:24px;font-weight:400;color:var(--ink-soft)}

/* ── 히어로 ─────────────────────────────────────────────── */
/* 타입이 먼저 서고, 사진은 스크림 없이 그대로 보여준다.
   사진 위에 글자를 얹지 않는 것이 이 페이지의 절제 지점이다. */

.hero{padding-top:clamp(44px,7vw,88px)}
.hero-type{max-width:19ch}
.hero .lead{margin-top:clamp(18px,2.4vw,26px);max-width:52ch}
.hero .btn-row{margin-top:clamp(26px,3.2vw,38px)}
.hero-fig{margin-top:clamp(36px,5vw,64px);border-radius:var(--r-photo);overflow:hidden;
  background:var(--wash)}
.hero-fig img{width:100%;aspect-ratio:3/2;object-fit:cover}

/* ── 평점 · 수상 스트립 ─────────────────────────────────── */
/* 흰 카드 두 개였다가 반려(9/1 "흰박스 별로야 둘다 없애줘"). 카드를 걷고
   헤어라인만 남겼다. 카드가 없으면 별 #FDDF5B는 종이 위 1.12:1이라 못 쓴다.
   큰 숫자가 그 몫을 하고, 수상은 시상기관 공식 위너 배지를 쓴다. */

.proof{display:grid;gap:clamp(14px,2vw,26px);grid-template-columns:minmax(0,1fr);
  margin-top:clamp(26px,3.4vw,38px);padding-top:clamp(20px,2.6vw,28px);
  border-top:1px solid var(--line);max-width:780px}
@media(min-width:640px){
  .proof{grid-template-columns:auto 1fr;gap:clamp(20px,3.4vw,44px)}
  .proof-i + .proof-i{padding-left:clamp(20px,3.4vw,44px);
    border-left:1px solid var(--line)}
}
.proof-i{display:flex;align-items:center;gap:.85em;position:relative}
.proof-n{font-size:clamp(2rem,3.4vw,2.75rem);font-weight:800;line-height:1;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.proof-c{display:flex;flex-direction:column;gap:.28em;min-width:0}
.proof-s{font-size:var(--t-small);color:var(--ink-soft);line-height:1.35}
.medals{display:flex;gap:6px;flex:0 0 auto}
.medals img{width:clamp(56px,6vw,76px);height:auto;display:block}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}

/* ── 팩트 레일 ──────────────────────────────────────────── */
/* 필수정보 5종. "정보가 안 보인다"는 불만의 직접 답이라 히어로 바로 밑에 둔다. */

.facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:clamp(36px,5vw,60px)}
.facts-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:760px){.facts-in{grid-template-columns:repeat(5,minmax(0,1fr))}}
.fact{padding:clamp(18px,2.4vw,26px) clamp(14px,1.8vw,22px);
  border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.fact:last-child{border-right:0}
@media(min-width:760px){.fact{border-bottom:0}}
.fact .label{margin-bottom:.5em}
.fact-v{font-weight:600;line-height:1.32;font-size:var(--t-small)}

/* ── 증상 라우터 ────────────────────────────────────────── */

.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;align-items:center;gap:.55em;
  padding:.72em 1.15em;border-radius:var(--r-pill);
  border:1px solid var(--line);text-decoration:none;
  font-size:var(--t-small);font-weight:500;line-height:1;
  transition:border-color .16s,background-color .16s;
}
.chip:hover{border-color:var(--accent);background:rgba(131,114,92,.07)}
.chip .arrow{color:var(--ink-faint)}

/* ── 서비스 ─────────────────────────────────────────────── */
/* 8칸 균등 카드가 "밋밋하다"의 정체였다. 임상 4종은 크게, 운동 3종은 줄로. */

.svc-grid{display:grid;gap:clamp(18px,2.4vw,30px);grid-template-columns:minmax(0,1fr)}
@media(min-width:680px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.svc-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

.svc{display:flex;flex-direction:column;text-decoration:none;height:100%;
  border-radius:var(--r-photo);overflow:hidden;background:var(--wash);
  transition:transform .22s ease}
.svc:hover{transform:translateY(-3px)}
.svc-ph{aspect-ratio:3/4;overflow:hidden;background:var(--wash)}
.svc-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.svc:hover .svc-ph img{transform:scale(1.035)}
.svc-txt{padding:clamp(18px,2vw,24px);display:flex;flex-direction:column;gap:.6em;flex:1}
.svc-txt p{color:var(--ink-soft);font-size:var(--t-small);line-height:1.5}
/* 카드 칸이 좁아 "PHYSIOTHERAPY" 같은 한 단어가 넘쳐 잘렸다.
   카드 안에서만 제목을 한 단계 줄이고, 그래도 넘치면 줄바꿈을 허용한다. */
.svc .h3{font-size:clamp(1rem,1.25vw,1.1875rem);overflow-wrap:break-word}
.svc-go{margin-top:auto;padding-top:.5em;font-size:var(--t-label);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}

.svc-list{border-top:1px solid var(--line);margin-top:clamp(18px,2.4vw,30px)}
.svc-row{display:grid;gap:.35em 2em;align-items:baseline;text-decoration:none;
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line);
  grid-template-columns:minmax(0,1fr);transition:padding-inline-start .2s ease}
@media(min-width:820px){
  .svc-row{grid-template-columns:minmax(200px,3fr) minmax(0,6fr) auto;gap:2em}
}
.svc-row:hover{padding-inline-start:12px}
.svc-row p{color:var(--ink-soft);font-size:var(--t-small)}
.svc-row .svc-go{margin:0;padding:0;white-space:nowrap}

/* ── 시그니처: 자격증 선반 ──────────────────────────────── */
/* 리셉션 위 선반에 액자로 걸린 실제 자격증. "병원 같지 않고 가벼워 보인다"의
   정확한 반대말이고, 이 클리닉만 가진 물건이다.
   페이지에서 과감한 자리는 여기 하나뿐이고 나머지는 조용히 간다.

   ⚠️ 처음엔 사진을 어둡게 깔고 그 위에 글자를 얹었는데, 증거로 쓸 사진을
   텍스처로 죽이는 셈이라 앞뒤가 안 맞았다. 사진은 또렷하게 두고 옆에 글을 놓는다. */

.ledge{background:var(--ink);color:#fff;overflow:hidden}
.ledge-in{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch}
@media(min-width:900px){
  .ledge-in{grid-template-columns:minmax(0,5fr) minmax(0,4fr)}
}
.ledge-txt{padding:clamp(44px,6vw,88px) var(--pad);align-self:center;
  max-width:calc(var(--maxw) * .58);margin-left:auto;width:100%}
.ledge-ph{min-height:clamp(280px,44vw,560px)}
.ledge-ph img{width:100%;height:100%;object-fit:cover;object-position:center 56%}
.ledge .label{color:rgba(255,255,255,.62)}
.ledge-q{font-size:clamp(1.5rem,3.1vw,2.375rem);font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;line-height:1.18;max-width:18ch;margin-top:.6em}
.ledge-sub{margin-top:1.2em;max-width:42ch;color:rgba(255,255,255,.78);
  font-size:var(--t-small)}

/* ── 흰 카드 · 리뷰 ─────────────────────────────────────── */

.cards{display:grid;gap:clamp(16px,2vw,24px);grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:var(--card);border-radius:var(--r-card);padding:clamp(22px,2.6vw,32px);
  display:flex;flex-direction:column;gap:.85em;height:100%}
.card p{font-size:var(--t-small);line-height:1.6}
.card cite{font-style:normal;font-weight:600;font-size:var(--t-label);
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-top:auto;
  padding-top:.5em}
/* 규칙 3: 별은 흰 카드 위에서만 */
.stars{display:flex;gap:3px;color:var(--star)}
.stars svg{width:17px;height:17px;display:block}

/* ── 보험사 로고 ────────────────────────────────────────── */
/* 원본 로고가 전부 흰 배경이라 흰 카드에 올린다. 팔레트 안에서 해결된다. */

.logos{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){.logos{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:980px){.logos{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* aspect-ratio는 세로로 긴 로고(RWAM 414×280 등)에서 카드가 늘어나 줄이 어긋난다.
   높이를 못 박고 이미지를 안에서 맞춘다. */
.logo{background:var(--card);border-radius:14px;height:clamp(66px,7vw,88px);
  position:relative;overflow:hidden}
.logo img{position:absolute;inset:0;margin:auto;width:auto;height:auto;
  max-width:calc(100% - 30px);max-height:calc(100% - 22px);mix-blend-mode:multiply}

/* ── 정보 나열 (시간·단계·사전승인) ─────────────────────── */

.rows{border-top:1px solid var(--line)}
.row{display:grid;gap:.2em 2em;padding:clamp(14px,1.8vw,20px) 0;
  border-bottom:1px solid var(--line-soft);grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.row{grid-template-columns:minmax(160px,2fr) minmax(0,5fr)}}
.row dt,.row-t{font-weight:600;font-size:var(--t-small)}
.row dd{margin:0;color:var(--ink-soft);font-size:var(--t-small)}

.steps{counter-reset:s;display:grid;gap:clamp(16px,2vw,22px)}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1em 1.1em;align-items:start}
.step-n{width:2.1em;height:2.1em;border-radius:var(--r-pill);background:var(--accent);
  color:#fff;display:grid;place-items:center;font-weight:600;font-size:var(--t-small);
  flex:0 0 auto}
.step p{color:var(--ink-soft);font-size:var(--t-small);margin-top:.3em}

/* 큰 숫자 하나 — ICBC 사전승인 횟수처럼 숫자가 곧 정보인 자리에만 */
.figs{display:grid;gap:clamp(16px,2vw,22px);grid-template-columns:minmax(0,1fr)}
@media(min-width:680px){.figs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fig{background:var(--card);border-radius:var(--r-card);padding:clamp(24px,3vw,36px)}
.fig-n{font-size:clamp(2.4rem,5vw,3.6rem);font-weight:800;letter-spacing:.01em;line-height:1}
.fig p{margin-top:.7em;color:var(--ink-soft);font-size:var(--t-small)}

/* ── 사진 조합 ──────────────────────────────────────────── */

.figure{border-radius:var(--r-photo);overflow:hidden;background:var(--wash)}
.figure img{width:100%;height:100%;object-fit:cover}
.duo{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.duo{grid-template-columns:repeat(2,minmax(0,1fr))}}
.trio{display:grid;gap:clamp(14px,1.8vw,22px);grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ar-p{aspect-ratio:3/4}
.ar-l{aspect-ratio:3/2}
.ar-s{aspect-ratio:1}
.cap{margin-top:.7em;font-size:var(--t-label);font-weight:300;color:var(--ink-faint);
  letter-spacing:.02em;text-transform:none}

/* 원장 소개 */
.founder{display:grid;gap:clamp(26px,4vw,60px);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:900px){.founder{grid-template-columns:minmax(0,4fr) minmax(0,6fr)}}

/* ── 팀 ─────────────────────────────────────────────────── */

.team{display:grid;gap:clamp(14px,1.8vw,20px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:820px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1120px){.team{grid-template-columns:repeat(4,minmax(0,1fr))}}
.member{background:var(--wash);border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;min-height:150px}
.member-t{padding:clamp(15px,1.7vw,20px);display:flex;flex-direction:column;gap:.45em;flex:1}
.face{aspect-ratio:1;overflow:hidden;background:#5E5140}
.face img{width:100%;height:100%;object-fit:cover;object-position:center top}
.face-mono{display:grid;place-items:center;background:#5E5140}
.face-mono span{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;letter-spacing:.06em;
  color:rgba(255,255,255,.5)}
.member .h3{margin-bottom:.15em}
.member li{font-size:var(--t-small);color:var(--ink-soft);line-height:1.45}
.member-lead{background:var(--accent);color:#fff}
.member-lead li,.member-lead .svc-go{color:rgba(255,255,255,.86)}

/* ── FAQ ────────────────────────────────────────────────── */

.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;gap:1.5em;align-items:baseline;
  justify-content:space-between;padding:clamp(18px,2.4vw,26px) 0;font-weight:600}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";font-weight:400;font-size:1.5em;line-height:1;
  color:var(--ink-faint);flex:0 0 auto;transition:transform .2s ease}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa .ans{padding-bottom:clamp(18px,2.4vw,26px);color:var(--ink-soft);max-width:62ch}

/* 서비스 페이지 안 아코디언. FAQ보다 한 단계 조용하게. */
.qa-tight{border-top:1px solid var(--line)}
.qa-tight summary{padding:.95em 0;font-size:var(--t-small);font-weight:600}
.qa-tight summary::after{font-size:1.25em}
.qa-tight .ans{padding-bottom:1.05em;font-size:var(--t-small);line-height:1.62;
  max-width:62ch}
.qa summary:hover{color:var(--accent-ink)}

/* ── 푸터 ───────────────────────────────────────────────── */

.ftr{background:var(--ink);color:rgba(255,255,255,.78);margin-top:clamp(64px,9vw,120px)}
.ftr a{color:inherit;text-decoration:none}
.ftr a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ftr .label{color:rgba(255,255,255,.5)}
.ftr-in{display:grid;gap:clamp(30px,4vw,52px);padding-block:clamp(52px,7vw,84px);
  grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.ftr-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1060px){.ftr-in{grid-template-columns:1.4fr 1fr 1fr 1.2fr}}
.ftr-brand img{width:204px;margin-bottom:1.2em}
.ftr h3{color:#fff}
.ftr li{margin-bottom:.5em;font-size:var(--t-small)}
.ftr-btm{border-top:1px solid rgba(255,255,255,.14);padding-block:22px;
  display:flex;flex-wrap:wrap;gap:.8em 1.5em;justify-content:space-between;
  font-size:var(--t-label);color:rgba(255,255,255,.5)}
/* 강조 #83725C를 잉크 위에 올리면 2.4:1로 뭉갠다. 푸터 버튼은 종이색으로. */
.ftr .btn-primary{background:var(--paper);color:var(--ink)}
.ftr .btn-primary:hover{background:#fff}

/* ── 모션 ───────────────────────────────────────────────
   클리닉 사이트다. 흩뿌리지 않고 네 군데에만 몰아서 쓴다.
     1) 히어로 도착 시퀀스 (로드 직후 한 번)
     2) 팩트 레일 · 보험사 로고 순차 등장 (정보를 가로로 읽게 만든다)
     3) 스크롤 시 헤더가 자리를 잡는다
     4) 손이 닿는 것만 반응한다 (카드·칩·버튼)
   길이는 길게, 거리는 짧게. 튀지 않는 게 목적이다. */

@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.045)}to{transform:scale(1)}}

/* 스크롤 진입 */
.js .rise{opacity:0;transform:translateY(10px)}
.rise{
  transition:opacity .6s cubic-bezier(.22,.61,.36,1) var(--d,0s),
             transform .6s cubic-bezier(.22,.61,.36,1) var(--d,0s)}
.rise.in{opacity:1;transform:none}

/* 1) 히어로 — 로드 직후 위에서 아래로 순서대로 도착 */
.js .hero > *{animation:riseIn .72s cubic-bezier(.22,.61,.36,1) both}
.hero > :nth-child(1){animation-delay:.04s}
.hero > :nth-child(2){animation-delay:.12s}
.hero > :nth-child(3){animation-delay:.20s}
.hero > :nth-child(4){animation-delay:.28s}
.hero > :nth-child(5){animation-delay:.36s}
.hero > :nth-child(6){animation-delay:.44s}
/* 사진은 살짝 크게 시작해 제자리로 앉는다 */
.js .hero-fig img{animation:settle 1.5s cubic-bezier(.16,.72,.3,1) both;
  animation-delay:.44s}

/* 2) 정보 줄은 하나씩 — 눈이 가로로 훑게 된다 */
.facts.in .fact{animation:riseIn .5s cubic-bezier(.22,.61,.36,1) both}
.js .facts .fact{opacity:0}
.facts.in .fact:nth-child(1){animation-delay:.00s}
.facts.in .fact:nth-child(2){animation-delay:.07s}
.facts.in .fact:nth-child(3){animation-delay:.14s}
.facts.in .fact:nth-child(4){animation-delay:.21s}
.facts.in .fact:nth-child(5){animation-delay:.28s}

.logos.in .logo{animation:riseIn .46s cubic-bezier(.22,.61,.36,1) both}
.js .logos .logo{opacity:0}

/* 3) 스크롤하면 헤더가 자리를 잡는다 */
.hdr{transition:box-shadow .25s ease,border-color .25s ease}
.hdr.on{border-bottom-color:var(--line);box-shadow:0 1px 20px rgba(50,41,40,.06)}

/* 4) 손이 닿는 것 */
.chip{transition:border-color .18s,background-color .18s,transform .18s}
.chip:hover{transform:translateY(-1px)}
.svc{transition:transform .26s cubic-bezier(.22,.61,.36,1),box-shadow .26s ease}
.svc:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(50,41,40,.09)}
.logo{transition:transform .2s ease}
.logo:hover{transform:translateY(-2px)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;
    transition-duration:.001ms!important}
  .rise,.hero > *,.facts .fact,.logos .logo{opacity:1;transform:none}
  .svc:hover,.chip:hover,.logo:hover{transform:none}
  .svc:hover .svc-ph img{transform:none}
}


/* ── 진료 항목 픽토그램 ─────────────────────────────────── */
/* 12개가 글자로만 쌓이면 벽처럼 읽힌다. 아이콘 + 짧은 라벨의 격자로 편다. */

.pgrid{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:620px){.pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1080px){.pgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.pcell{display:flex;align-items:center;gap:.75em;background:var(--wash);
  border-radius:14px;padding:.9em 1em;font-size:var(--t-small);line-height:1.35;
  min-height:64px}
.pic{width:28px;height:28px;flex:0 0 auto;color:var(--accent-ink);
  stroke:currentColor;fill:none;stroke-width:1.7}
.pic-dot{width:26px;height:26px;flex:0 0 auto;display:block;position:relative}
.pic-dot::after{content:"";position:absolute;inset:9px;border-radius:50%;
  background:var(--accent-ink);opacity:.5}

/* ── 지금 열려 있는지 ───────────────────────────────────── */

.live{display:none;align-items:center;gap:.5em;margin:0 0 0 auto;
  font-size:var(--t-label);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.live[data-state]{display:inline-flex}
@media(max-width:719px){.live{display:none!important}}
.live-dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:var(--accent-ink);position:relative}
.live[data-state="closed"] .live-dot{background:transparent;
  box-shadow:inset 0 0 0 1.6px var(--ink-faint)}
.live[data-state="open"] .live-dot::after{content:"";position:absolute;inset:0;
  border-radius:50%;background:var(--accent-ink);animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(2.6);opacity:0}}
.nav-cta{margin-left:10px}
@media(min-width:1060px){.nav-cta{margin-left:10px}}

/* ── 보험사 로고 마키 ───────────────────────────────────── */
/* 20곳을 한 화면에 다 눌러 담기보다 천천히 흘려 보낸다. 실제로 움직이는 자리. */

.marq{overflow:hidden;position:relative;background:var(--paper);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq-t{display:flex;gap:10px;width:max-content;animation:slide 64s linear infinite}
.marq:hover .marq-t,.marq:focus-within .marq-t{animation-play-state:paused}
/* 흐르는 동안 흰 상자가 줄줄이 지나가는 게 거슬린다는 지적(9/1).
   원본 로고가 흰 배경이라 카드를 빼면 흰 사각이 남지만, mix-blend-mode:multiply가
   흰색을 종이에 그대로 녹여준다. 그래서 카드만 걷으면 된다. */
.marq .logo{width:clamp(140px,15vw,180px);flex:0 0 auto;
  background:var(--paper);border-radius:0}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media(prefers-reduced-motion:reduce){
  .marq-t{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
  .live-dot::after{animation:none!important}
  .js .proof-rating .stars svg{opacity:1;transform:none}
}

/* ── 모바일 터치 타깃 ────────────────────────────────────
   실측(390px): 로고 링크 132×18 · Book 65×33 · Menu 49×40 · 칩 39px.
   손가락으로 누르는 것은 최소 44px가 필요하다. 보이는 크기는 그대로 두고
   눌리는 영역만 키운다. */

@media(max-width:1059px){
  .brand{min-height:44px;align-items:center}
  .hdr .btn{min-height:44px;padding-block:0;display:inline-flex;align-items:center}
  .menu summary{min-height:44px;align-items:center}
  .chip{min-height:44px;padding-block:0;align-items:center}
  .svc-go{display:inline-flex;align-items:center;min-height:40px;font-size:.8125rem}
  .qa summary{min-height:48px;align-items:center}
  .nav a{min-height:44px;display:inline-flex;align-items:center}
  .ftr li a{display:inline-flex;min-height:44px;align-items:center}
  .ftr li{margin-bottom:0}
  .menu-panel a{min-height:44px;display:flex;align-items:center}
}

/* 라벨이 12px + 자간 .16em이라 모바일에서 작게 읽힌다. 한 단계 올린다. */
@media(max-width:719px){
  .label{font-size:.8125rem;letter-spacing:.13em}
  .proof-s,.cap{font-size:.9375rem}
}

@media print{
  .hdr,.menu,.btn{display:none}
  body{background:#fff}
}

/* ── 팀 바이오 (9/26) ─────────────────────────────────────
   원장님이 제인에 올린 바이오 원문을 창으로 띄운다. 카드 격자는 그대로 둔다. */
.member-lang{font-size:var(--t-small);color:var(--ink-faint);line-height:1.45}
.member-more{margin-top:auto;align-self:flex-start;background:none;border:0;padding:.5em 0 0;
  font:inherit;font-size:var(--t-small);font-weight:600;color:var(--accent-ink);cursor:pointer;
  min-height:44px;display:inline-flex;align-items:flex-end;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:.3em}
.member-more:hover{color:var(--ink)}
.bio{border:0;border-radius:var(--r-card);padding:clamp(22px,3.4vw,40px);
  width:min(640px,calc(100vw - 32px));max-height:calc(100dvh - 48px);overflow:auto;
  background:var(--paper);color:var(--ink);box-shadow:0 30px 80px rgba(50,41,40,.28)}
.bio::backdrop{background:rgba(50,41,40,.55)}
.bio-x{position:sticky;top:0;float:right;width:44px;height:44px;margin:-10px -10px 0 0;
  border:0;border-radius:50%;background:var(--wash);color:var(--ink);font-size:1.5rem;
  line-height:1;cursor:pointer}
.bio-head{display:flex;gap:18px;align-items:center;margin-bottom:clamp(18px,2.4vw,26px)}
.bio-face{width:96px;height:96px;flex:0 0 96px;border-radius:50%;overflow:hidden;background:#5E5140}
.bio-face img{width:100%;height:100%;object-fit:cover;object-position:center top}
.bio-t{font-size:var(--t-small);color:var(--ink-soft);margin-top:.3em;line-height:1.45}
.bio-meta{display:grid;grid-template-columns:auto 1fr;gap:.55em 1.2em;align-items:baseline;
  padding:1em 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bio-meta:empty{display:none}
.bio-f{font-size:var(--t-small);line-height:1.5;color:var(--ink-soft)}
.bio-body{margin:clamp(18px,2.4vw,24px) 0 clamp(22px,3vw,30px)}
.bio-body .body+.body{margin-top:.9em}
@media(max-width:520px){.bio-meta{grid-template-columns:1fr;gap:.2em}
  .bio-meta .bio-f{margin-bottom:.6em}}
.bio{border:none;outline:none}
.bio:focus,.bio:focus-visible{outline:none}
.member-lead .member-lang{color:rgba(255,255,255,.86)}

/* 9/27 치료 서비스 6개 → 3열 두 줄 (4열이면 4+2로 비어 보인다) */
@media(min-width:1080px){.svc-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* 9/27 픽토그램 칸 안 긴 단어(Musculoskeletal)가 320px에서 칸을 넘쳤다 → 칸 안에서 끊는다 */
.pcell span{min-width:0;overflow-wrap:break-word;hyphens:auto}