/* ══ 대문 시안 (/preview/) — 10구역 ═══════════════════════════════════════
   다이어트 페이지 문법을 그대로 씁니다: 아이브로우 → 제목 → 리드, 구역 여백은
   content.css 의 토큰(--band 계열), 안쪽 간격은 --gap 계열. 팔레트도 같습니다 —
   아이보리 · 차콜 · 웜그레이지, 반전은 딱 두 곳(숫자 띠 딥네이비, 마무리 차콜).

   조판 클래스는 .hm-* 로만 묶고 이 한 장에 둡니다. 옛 대문(static/index.html)의
   <style> 이 껍데기로 모든 페이지에 실리므로 이름이 겹치지 않게 했습니다.
   ══════════════════════════════════════════════════════════════════════ */
/* main 에 overflow 를 두지 않습니다 (2026-09-12 확정).
   overflow-x:hidden 은 물론 overflow-x:clip 도 크롬에서 main 을 스크롤 노드로 만들었고,
   첫 스크롤 제스처가 문서 대신 이 main(내용이 넘치지 않아 움직일 수 없는 가짜 스크롤러)에 걸려 통째로 삼켜졌습니다
   — 트레이스: ScrollTree::ScrollBy scroll_node_id=4(main), ScrollLayer nodeName=MAIN.hm. 둘째 제스처부터 문서로 갑니다.
   390·1440 모두 가로로 넘치는 요소가 0개라 잘라낼 것도 없습니다. 넘침이 생기면 그 요소를 고칩니다. */
.hm{font-family:AtoZ,"Malgun Gothic",sans-serif;
  background:#f6f2ea;color:#3d3833}
.hm-wrap{max-width:1180px;margin:0 auto;padding:0 40px}
.hm-eye{margin:0 0 26px;font-size:12px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:#9a8b78}
.hm h1{margin:0;font-weight:700;letter-spacing:-.045em;line-height:1.16;
  font-size:clamp(40px,5.2vw,68px);color:#26221e}
.hm h1 span,.hm-h2 span,.hm-lead span{display:block}
.hm-h2{margin:0 0 var(--gap-lg);font-weight:700;letter-spacing:-.04em;line-height:1.24;
  font-size:clamp(30px,3.4vw,46px);color:#26221e}
.hm-h2.tight{margin-bottom:var(--gap-sm)}
.hm-lead{margin:34px 0 0;font-size:17px;line-height:1.95;color:#5d554b;max-width:34em}
.hm-body{margin:0;max-width:34em;font-size:17px;line-height:1.95;color:#5d554b}
/* 리드 다음에 오는 블록은 --gap-lg 만큼 띄웁니다 */
.hm-lead + *{margin-top:var(--gap-lg)}

.hm-btn{display:inline-flex;align-items:center;justify-content:center;
  padding:19px 38px;border-radius:2px;font-size:16px;font-weight:700;
  background:#26221e;color:#f6f2ea;text-decoration:none}
.hm-btn.ghost{background:none;color:#26221e;box-shadow:inset 0 0 0 1px rgba(38,34,30,.24)}
.hm-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:52px}
.hm-link{display:inline-block;margin-top:var(--gap);font-size:16px;font-weight:700;
  color:#26221e;text-decoration:underline;text-underline-offset:6px}
.hm-ext:after{content:" \2197";font-weight:700}   /* 외부 링크 표시 ↗ */

/* 구역 페이드 없음 (2026-09-12 확정). .hm-sec 에 opacity:0 이나 transition:opacity 를 두면 대문의 첫 스크롤
   제스처가 통째로 삼켜졌습니다(크롬 휠·터치 재현, 아이폰 확인). 문서 크기의 합성 레이어를 만들어 렉의 원인이기도
   했습니다. 스크립트도 partial-home.php 에서 뺐습니다 — 다시 넣지 않습니다. */

/* ── 1 히어로 — 글 왼쪽 · 의료진 사진 오른쪽 ── */
.hm-hero{padding:var(--band-hero-t) 0 var(--band-hero-b)}
.hm-hero-in{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:center}
/* 두 열 히어로라 제목 폭이 절반 — 네 줄로 꺾이지 않게 한 단 줄입니다 */
.hm-hero h1{font-size:clamp(36px,3.9vw,56px)}
.hm-hero h1 em{font-style:normal;color:#b8552a}
.hm-hero-badges{display:flex;flex-wrap:wrap;gap:10px 22px;margin:var(--gap) 0 0;padding:0;list-style:none;
  font-size:14px;font-weight:700;letter-spacing:.02em;color:#7b7266}
.hm-hero-badges li:before{content:"";display:inline-block;width:6px;height:6px;margin:0 9px 2px 0;
  border-radius:50%;background:#b8552a}
.hm-hero-photo{margin:0}
.hm-hero-photo img{display:block;width:100%;height:auto;border-radius:4px}
.hm-hero-names{display:flex;flex-wrap:wrap;gap:6px 18px;margin:16px 0 0;padding:0;list-style:none;
  font-size:14px;color:#7b7266}
.hm-hero-names b{font-weight:700;color:#26221e}

/* ── 2 숫자 띠 — 여기만 딥네이비 ── */
.hm-stats-band{padding:var(--band-tight) 0;background:#12162e}
/* 6개 — 2줄×3. 안쪽 여백은 band-tight 그대로, 내용이 늘어 자연히 채워집니다 (2026-09-12) */
.hm-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-lg) var(--gap);margin:0;padding:0;list-style:none}
.hm-stats b{display:block;font-size:clamp(44px,5vw,70px);font-weight:700;
  letter-spacing:-.05em;line-height:1;color:#c9bff0;font-variant-numeric:tabular-nums}
.hm-stats b i{font-style:normal}
.hm-stats b small{font-size:.5em;letter-spacing:-.02em;margin-left:.08em}
.hm-stats span{display:block;margin-top:16px;font-size:14px;letter-spacing:.02em;color:#8d89a6;white-space:nowrap}
.hm-stats span.sub{margin-top:6px;font-size:13px;color:#6f6b8a}

/* ── 3 진료 분야 — 4카드 ── */
.hm-fields{padding:var(--band) 0;background:#efe8dd}
/* 데스크톱은 네 칸 한 줄 — 높이를 절반으로 줄이는 개편이라 카드가 세로로 쌓이지 않게 합니다 */
.hm-field-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap-sm)}
.hm-field{display:flex;flex-direction:column;background:#f6f2ea;border:1px solid rgba(154,139,120,.26);
  color:inherit;text-decoration:none}
.hm-field figure{margin:0;overflow:hidden}
.hm-field figure img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
.hm-field-body{padding:26px 26px 30px}
.hm-field b{display:block;font-size:12px;font-weight:700;letter-spacing:.2em;color:#9a8b78}
.hm-field h3{margin:12px 0 10px;font-size:22px;font-weight:700;letter-spacing:-.035em;color:#26221e}
.hm-field p{margin:0;font-size:15px;line-height:1.85;color:#5d554b}
.hm-field i{display:block;margin-top:22px;font-style:normal;font-size:15px;font-weight:700;color:#26221e}
.hm-field-more{margin:var(--gap) 0 0;font-size:16px;line-height:1.9;color:#7b7266}
.hm-field-more a{font-weight:700;color:#26221e;text-decoration:underline;text-underline-offset:6px}

/* ── 4 우리는 이런 병원 — 3카드 + 원칙 3줄 ── */
.hm-about{padding:var(--band) 0}
.hm-three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-sm);margin:0;padding:0;list-style:none}
.hm-three li{padding:44px 40px;background:#efe8dd;border:1px solid rgba(154,139,120,.26)}
.hm-three h3{margin:0 0 14px;font-size:clamp(26px,2.6vw,34px);font-weight:700;letter-spacing:-.04em;color:#26221e}
.hm-three p{margin:0;font-size:16px;line-height:1.9;color:#5d554b}
/* 셋째 카드만 반전 — 구역이 아니라 카드라 다크 구역 수에 넣지 않습니다 */
.hm-three li.is-dark{background:#26221e;border-color:#26221e}
.hm-three li.is-dark h3{color:#f6f2ea}
.hm-three li.is-dark p{color:#c8bfae}
.hm-rules{margin:var(--gap-lg) 0 0;padding:0;list-style:none;border-top:1px solid rgba(154,139,120,.34)}
.hm-rules li{display:grid;grid-template-columns:4em 1fr;gap:var(--gap-sm);align-items:baseline;
  padding:22px 0;border-bottom:1px solid rgba(154,139,120,.34);
  font-size:clamp(18px,1.6vw,22px);font-weight:700;letter-spacing:-.03em;color:#26221e}
.hm-rules span{font-size:12px;letter-spacing:.2em;color:#9a8b78}

/* ── 5 의료진 6인 ── */
.hm-docs{padding:var(--band) 0;background:#efe8dd}
/* 여섯 얼굴을 한 줄 띠로 — 이름·맡는 분야 한 줄이면 이 폭으로 충분합니다 */
.hm-doc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--gap-sm)}
.hm-doc figure{margin:0;overflow:hidden}
.hm-doc figure img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.hm-doc h3{margin:14px 0 6px;font-size:18px;font-weight:700;letter-spacing:-.035em;color:#26221e}
/* 직함은 이름 아래 한 줄 — '다이어트클리닉 센터장' 이 이름 옆에서 꺾이지 않게 */
.hm-doc h3 em{display:block;margin:4px 0 0;font-style:normal;font-size:13px;font-weight:400;color:#7b7266}
.hm-doc p{margin:0;font-size:13.5px;line-height:1.75;color:#5d554b}
.hm-doc a{color:#26221e;font-weight:700;text-decoration:underline;text-underline-offset:5px}

/* ── 6 공간 — 사진 6장 ── */
.hm-space{padding:var(--band) 0}
.hm-space-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-sm)}
.hm-space figure{margin:0}
.hm-space figure img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.hm-space figcaption{margin-top:14px;font-size:15px;line-height:1.7;color:#5d554b}
.hm-space figcaption b{display:inline-block;min-width:2.2em;font-size:12px;letter-spacing:.2em;color:#9a8b78}
.hm-space figcaption a{color:#26221e;font-weight:700;text-decoration:underline;text-underline-offset:5px}

/* ── 7 후기 — 배경 없음 ── */
.hm-review{padding:var(--band) 0}

/* ── 8 원장 노트 — 사이트 공통 카드(horangi_bubu_card) 를 그대로 받습니다 ── */
.hm-notes{padding:var(--band) 0;background:#efe8dd}
/* 사이트 공통 .intro/.hb-cats 는 가운데 정렬(margin auto) — 이 페이지 문법(왼쪽 정렬)으로 되돌립니다 */
.hm-notes .intro,.hm-notes .columns-cats{text-align:left;justify-content:flex-start;margin-left:0;margin-right:0;max-width:none}
.hm-notes .intro{max-width:34em}
.hm-notes .intro .eyebrow{display:block;margin:0 0 26px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#9a8b78}
.hm-notes .intro h2{margin:0 0 var(--gap-sm);font-weight:700;letter-spacing:-.04em;line-height:1.24;
  font-size:clamp(30px,3.4vw,46px);color:#26221e}
.hm-notes .intro p{margin:0;max-width:34em;font-size:17px;line-height:1.95;color:#5d554b}
.hm-notes .columns-cats{margin-top:var(--gap)}
.hm-notes .columns-grid{margin-top:var(--gap)}

/* ── 9 오시는 길·진료시간 ── */
.hm-visit{padding:var(--band) 0}
/* 왼쪽 안내(진료시간·주소·전화) · 오른쪽 지정주차장 6곳 목록 */
.hm-visit-in{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--gap-lg);align-items:start}
/* 정보 목록 — 라벨 고정 폭 · 값 좌측 · 줄 사이 얇은 구분선. 이 기본 규칙이 09-12 주차 목록 CSS 교체 때 같이 지워져
   글머리표가 드러났습니다(900 아래 규칙만 남아 있었음) — 2026-09-12 복구. */
.hm-visit-list{margin:0 0 var(--gap);padding:0;border-top:1px solid rgba(154,139,120,.34)}
.hm-visit-list > div{display:grid;grid-template-columns:7em 1fr;gap:16px;padding:14px 0;border-bottom:1px solid rgba(154,139,120,.34)}
.hm-visit-list dt{margin:0;font-weight:700;color:#26221e;line-height:1.8}
.hm-visit-list dd{margin:0;color:#5d554b;line-height:1.8;text-align:left}
.hm-visit-list dd a{color:#26221e;text-decoration:underline;text-underline-offset:4px}
.hm-visit-park .hm-eye{margin-bottom:14px}
.hm-lots{margin:0;padding:0;list-style:none;border-top:1px solid rgba(154,139,120,.34)}
.hm-lots li{padding:14px 0;border-bottom:1px solid rgba(154,139,120,.34)}
.hm-lot-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:16px;line-height:1.6}
.hm-lot-top b{font-weight:500;color:#3d3833}
.hm-lot-top span{flex:none;font-weight:700;color:#26221e}
.hm-lot-addr{margin:6px 0 0;font-size:14px;line-height:1.7;color:#7b7266}
.hm-lot-addr a{color:#5d554b;text-decoration:underline;text-underline-offset:4px}
.hm-lot-addr em{font-style:normal;margin-left:8px;color:#9a8b78}
.hm-lot-note{margin:14px 0 0;font-size:14px;line-height:1.7;color:#7b7266}
.hm-more{display:inline-block;margin-top:10px;font-weight:700;color:#26221e;text-decoration:underline;text-underline-offset:5px}

/* ── 10 마무리 — 차콜 반전 ── */
.hm-cta-band{padding:var(--band-tight) 0;background:#26221e;color:#f6f2ea}
.hm-cta-band .hm-eye{color:#c9bff0}
.hm-cta-band .hm-h2{color:#f6f2ea}
.hm-cta-band .hm-body{color:#c8bfae}
.hm-cta-band .hm-btn{background:#f6f2ea;color:#26221e}
.hm-cta-band .hm-btn.ghost{background:none;color:#f6f2ea;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}

@media(max-width:1100px){
  .hm-field-grid{grid-template-columns:repeat(2,1fr)}
  .hm-doc-grid{grid-template-columns:repeat(3,1fr)}
}

/* ── 900 아래 ── */
@media(max-width:900px){
  .hm-wrap{padding:0 22px}
  .hm-h2{margin-bottom:var(--gap)}
  .hm-hero-in{grid-template-columns:1fr}
  .hm-hero-in > *{max-width:none}
  .hm-btn{flex:1 1 auto}
  .hm-stats{grid-template-columns:1fr 1fr;gap:var(--gap)}   /* 3줄×2 */
  .hm-field-grid,.hm-three,.hm-visit-in{grid-template-columns:1fr}
  .hm-field-body{padding:28px 24px 30px}
  .hm-three li{padding:34px 28px}
  .hm-doc-grid{grid-template-columns:repeat(3,1fr);gap:var(--gap-sm)}
  .hm-space-grid{grid-template-columns:1fr 1fr;gap:var(--gap-sm)}
  .hm-doc h3{font-size:19px}
  .hm-doc p{font-size:14px}
  .hm-space figcaption{font-size:14px}
  .hm-rules li{grid-template-columns:3em 1fr;font-size:18px}
  .hm-visit-list > div{grid-template-columns:5em 1fr;gap:12px}
}
@media(max-width:560px){
  .hm-doc-grid{grid-template-columns:1fr 1fr}
}