/* =========================================================
   홈(index.html) 전용 — 2026-09-29 메인 개편
   지시서 docs/redesign/main-redesign-order.md · 시안 docs/redesign/design/desktop-main.dc.html, mobile-main.dc.html
   ⚠ 이 파일은 index.html 에서만 읽습니다. 클래스는 모두 .hm- 로 시작합니다.
   ⚠ 주색 청색은 사이트 변수 --acc 를 그대로 씁니다(지시서 3-1: 기존 청색 변수가 있으면 그 값을 우선).
   ⚠ 주황(--c-warm)은 작은 소제목(의료진 · 연구, 진료 근거, 진료 프로세스, 봉침 치료)과 첫 진료 번호 01~06 에만 씁니다.
   ========================================================= */
:root{
  --c-blue:var(--acc);
  --c-warm:#B85C0E;
  --c-ink:#0E1B33;
  --c-ink-2:#2D3748;
  --c-ink-3:#4A5568;
  --c-bg2:#F4F7FB;
  --c-soft:#EAF0FA;
  --c-line:#E3E9F2;
  --c-navy:#0B1F4B;
  --c-navy-2:#13337A;
  --c-red:#E0473B;
  --c-card:#FFFFFF;
  --hm-wrap:var(--wrap);
  /* 듀오톤 원형 타일 */
  --tile-bg:linear-gradient(145deg,#F6F9FE 0%,#DDE8F8 100%);
  --tile-sh:inset 0 0 0 1px rgba(23,71,166,.14),0 6px 16px rgba(23,71,166,.10);
}
html[data-theme="dark"]{
  --c-warm:#F0A45C;
  --c-ink:var(--ink);
  --c-ink-2:var(--ink-2);
  --c-ink-3:var(--ink-3);
  --c-bg2:var(--bg);
  --c-soft:var(--acc-soft);
  --c-line:var(--line);
  --c-card:var(--surface);
  --tile-bg:linear-gradient(145deg,#243247 0%,#1B2638 100%);
  --tile-sh:inset 0 0 0 1px rgba(143,188,245,.22),0 6px 16px rgba(0,0,0,.3);
}

.hm{background:var(--c-bg2);color:var(--c-ink);word-break:keep-all}
.hm-sprite{position:absolute;width:0;height:0;overflow:hidden}
.hm svg.ic,.hm .hm-ic svg,.hm .hm-ring svg,.hm .hm-cc-ic svg,.hm .hm-chev{fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.hm em{font-style:normal;color:var(--c-blue)}
.hm-wrap{width:min(100% - 2.5rem,var(--hm-wrap));margin-inline:auto}
.hm-center{text-align:center}
.hm-sec{padding:clamp(3.5rem,6vw,5.5rem) 0 0}
.hm-white{background:var(--c-card);margin-top:clamp(3.5rem,6vw,5.5rem);padding-bottom:clamp(3rem,5vw,5rem)}

.hm-kick{font-size:var(--fs-xs);font-weight:700;color:var(--c-warm);margin-bottom:var(--sp-3)}
.hm-h2{font-size:clamp(1.45rem,1rem + 1.9vw,2.4rem);line-height:1.3;font-weight:900;letter-spacing:-1px;color:var(--c-ink)}
.hm-h3{font-size:clamp(1.35rem,1rem + 1.4vw,2rem);line-height:1.3;font-weight:900;letter-spacing:-1px;color:var(--c-ink)}

/* 버튼 */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:62px;padding:0 2.4rem;
  border-radius:10px;font-size:var(--fs-md);font-weight:700;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.hm-btn-fill{background:var(--c-blue);color:var(--acc-ink)}
.hm-btn-fill:hover{background:var(--acc-hover);color:var(--acc-ink)}
.hm-btn-line{border:1.5px solid var(--c-blue);color:var(--c-blue);background:var(--c-card)}
.hm-btn-line:hover{background:var(--c-soft)}
.hm-btn-sm{min-height:48px;padding:0 1.5rem;font-size:var(--fs-sm)}
.hm-more{font-size:var(--fs-sm);font-weight:700;color:var(--c-blue)}
.hm-more:hover{text-decoration:underline;text-underline-offset:3px}
.hm-more-lg{font-size:var(--fs-md)}
.hm-small{font-size:var(--fs-xs);color:var(--c-ink-3)}

/* 듀오톤 원형 아이콘 타일 */
.hm-ic{flex:none;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--tile-bg);box-shadow:var(--tile-sh);color:var(--c-blue)}
.hm-ic-sm{width:44px;height:44px}
.hm-ic-lg{width:60px;height:60px}
.hm-ic-xl{width:64px;height:64px}
.hm-ic-plain{width:48px;height:48px;background:var(--c-card);box-shadow:none}
.hm-ic-body{width:68px;height:68px}
.hm-ic-body svg{stroke:#1B2B4D;stroke-width:1.7}
.hm-ic-body .fill{fill:#1747A6;fill-opacity:.10;stroke:#1B2B4D}
.hm-ic-body .halo{fill:var(--c-red);fill-opacity:.16;stroke:none}
.hm-ic-body .dot{fill:var(--c-red);stroke:none}
html[data-theme="dark"] .hm-ic-body svg{stroke:#C9D6EA}
html[data-theme="dark"] .hm-ic-body .fill{stroke:#C9D6EA;fill:#8FBCF5}

/* ══════════ ① 히어로 ══════════ */
.hm-hero{background:var(--c-card);padding:calc(var(--nav-h) + clamp(1.5rem,3vw,3rem)) 0 clamp(1.5rem,2.5vw,2.5rem)}
.hm-hero-in{display:grid;grid-template-columns:minmax(0,660px) minmax(0,600px);justify-content:space-between;
  column-gap:clamp(3.2rem,4vw,4.5rem);align-items:start}
.hm-hero-copy{display:flex;flex-direction:column;gap:1.5rem;padding-top:clamp(0rem,2vw,1.5rem)}
.hm-hero-copy .pill{align-self:flex-start;margin:0}
.hm-hero-kick{display:flex;align-items:center;gap:.75rem;font-size:var(--fs-sm);font-weight:500;color:var(--c-blue)}
.hm-hero-kick::before{content:"";flex:none;width:3px;height:22px;background:var(--c-blue)}
.hm-hero-title{font-size:clamp(1.9rem,1.1rem + 2.6vw,3.1rem);line-height:1.3;font-weight:900;letter-spacing:-1.5px;color:var(--c-ink)}
.hm-hero-title em{color:var(--c-blue)}
.hm-hero-lede{font-size:clamp(1rem,.9rem + .35vw,1.14rem);line-height:1.75;color:var(--c-ink-2)}
.hm-hero-lede span{display:block;margin-top:.6rem;color:var(--c-ink-3)}
.hm-hero-lede strong{color:var(--c-ink);font-weight:700}
.hm-hero-cta{display:flex;gap:.75rem;flex-wrap:wrap;padding-top:.25rem}
.hm-hero-loc{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-xs);color:var(--c-ink-3)}
.hm-hero-loc .ic{color:var(--c-ink-3)}

/* 롤링 배너 — 원본 비율 그대로, 그림 위에는 아무것도 얹지 않습니다.
   ⚠ style.css 의 .roll-item img 는 사방 3% 를 잘라 냈습니다(scale 1.064). 여기서는 지시서대로 자르지 않습니다. */
.hm-roll{width:100%}
.hm-roll .roll{max-width:none}
.hm-roll .roll-view{border:0;border-radius:20px;box-shadow:0 12px 32px rgba(14,27,51,.14);background:var(--c-soft)}
.hm-roll .roll-item a{aspect-ratio:1380/1150;background:transparent;overflow:visible}
.hm-roll .roll-item img{object-fit:contain;transform:none;height:auto}
.hm-roll .roll-bar{justify-content:space-between;gap:var(--sp-3);margin-top:.75rem}
.hm-roll .roll-dots{gap:8px}
.hm-roll .roll-dot{width:10px;height:10px;background:#A9B7CC}
.hm-roll .roll-dot::after{width:calc(100% + 8px)}
.hm-roll .roll-dot[aria-selected="true"]{width:28px;border-radius:5px;background:var(--c-blue)}
.hm-roll-ctl{display:flex;align-items:center;gap:6px}
.hm-roll-count{min-width:44px;text-align:center;font-size:var(--fs-xs);font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums}
.hm-roll .roll-arw,.hm-roll .roll-play{position:static;transform:none;width:44px;height:44px;border-radius:50%;
  border:1px solid #C5CFDD;background:var(--c-card);color:var(--c-ink);box-shadow:none}
.hm-roll .roll-arw:hover,.hm-roll .roll-play:hover{background:var(--c-soft);color:var(--c-blue);border-color:var(--c-blue)}
.hm-roll .roll-arw:active{transform:scale(.94)}

/* 신뢰 바 — 배너와 겹치지 않게 띄웁니다(데스크톱 32px, 모바일 24px). */
.hm-trust{position:relative;margin:2rem 0 0;padding:1.5rem;list-style:none;border-radius:18px;background:var(--c-card);
  box-shadow:0 10px 30px rgba(14,27,51,.08);border:1px solid var(--c-line);
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.hm-trust li{display:flex;align-items:center;gap:.9rem;padding:0 1rem;border-right:1px solid var(--c-line);min-width:0}
.hm-trust li:last-child{border-right:0}
.hm-trust b{display:block;font-size:var(--fs-lg);font-weight:900;letter-spacing:-.3px;color:var(--c-blue);line-height:1.3}
.hm-trust small{display:block;margin-top:.2rem;font-size:var(--fs-2xs);color:var(--c-ink-3)}

/* ══════════ ② 이런 증상 ══════════ */
.hm-sym{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:2rem 0 0;padding:0;list-style:none}
.hm-sym a{display:flex;align-items:center;gap:1.25rem;height:100%;padding:1.35rem 1.6rem;border-radius:14px;
  background:var(--c-card);border:1px solid var(--c-line);color:var(--c-ink);transition:border-color .2s,box-shadow .2s}
.hm-sym a:hover{border-color:var(--c-blue);box-shadow:0 8px 20px rgba(23,71,166,.10)}
.hm-sym-t{flex:1;min-width:0;font-size:var(--fs-md);font-weight:500;line-height:1.5}
.hm-sym-t small{display:block;margin-top:.25rem;font-size:var(--fs-2xs);font-weight:700;color:var(--c-blue)}
.hm-chev{color:#6B7A90}
.hm-check{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-top:2rem;
  padding:1.25rem 1.75rem;border-radius:14px;background:var(--c-soft)}
.hm-check-t{display:flex;align-items:center;gap:1rem}
.hm-check h3{font-size:var(--fs-sm);font-weight:700;color:var(--c-ink)}
.hm-check p{font-size:var(--fs-xs);color:var(--c-ink-2)}
.hm-check-act{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.hm-chip-btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 1.4rem;border-radius:10px;
  background:var(--c-card);border:1px solid #C5CFDD;font-size:var(--fs-sm);font-weight:700;color:var(--c-ink)}
.hm-chip-btn:hover{border-color:var(--c-blue);color:var(--c-blue)}
.hm-check-act .hm-more{margin-left:.9rem}

/* ══════════ ③ 왜 장형석한의원인가 ══════════ */
.hm-why{display:flex;gap:3.5rem;align-items:flex-start}
.hm-why-side{flex:0 0 400px;display:flex;flex-direction:column;gap:1.1rem}
.hm-why-side .hm-kick{margin:0}
.hm-doc{margin:0}
.hm-doc img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:var(--c-soft)}
.hm-doc figcaption{margin-top:1.1rem;font-size:var(--fs-sm);color:var(--c-ink-2)}
.hm-doc figcaption b{display:block;font-size:1.38rem;font-weight:900;color:var(--c-ink)}
.hm-why-side .hm-btn{align-self:flex-start}
.hm-why-cards{flex:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:0;padding:5.5rem 0 0;list-style:none}
.hm-why-cards li{display:flex;gap:1.1rem;padding:1.75rem;border-radius:14px;background:var(--c-card);border:1px solid var(--c-line)}
.hm-why-cards h3{font-size:var(--fs-md);font-weight:700;color:var(--c-ink);margin-bottom:.5rem}
.hm-why-cards p{font-size:var(--fs-sm);line-height:1.65;color:var(--c-ink-2)}

/* ③-1 진료 근거 */
.hm-proof{margin-top:clamp(3rem,5vw,4.5rem);padding-top:2.5rem;border-top:1px solid var(--c-line)}
.hm-proof-head{display:grid;gap:.6rem}
.hm-proof-head .hm-kick{margin:0}
.hm-proof-head p:last-child{font-size:var(--fs-sm);color:var(--c-ink-3)}
.hm-proof-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:1.5rem 0 0;padding:0;list-style:none}
.hm-proof-cards > li{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--c-card);border:1px solid var(--c-line)}
/* 사진 칸은 넷 모두 16:9 */
.hm-proof-media{position:relative;display:block;aspect-ratio:16/9;width:100%;overflow:hidden;background:var(--c-soft)}
.hm-proof-media > img{width:100%;height:100%;object-fit:cover;display:block}
.hm-proof-media .yt-cover img{object-fit:cover}
.hm-proof-media .img-todo{position:absolute;inset:0;margin:0;aspect-ratio:auto;border-radius:0}
.hm-yt-tag{position:absolute;left:8px;bottom:8px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.72);
  color:#fff;font-size:var(--fs-2xs);font-weight:700}
.hm-proof-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hm-proof-body{display:flex;flex-direction:column;gap:.4rem;padding:1.25rem;flex:1}
.hm-proof-k{font-size:var(--fs-2xs);font-weight:700;color:var(--c-warm)}
.hm-proof-t{font-size:var(--fs-sm);font-weight:700;line-height:1.5;color:var(--c-ink)}
.hm-proof-body .hm-more{margin-top:auto;font-size:var(--fs-xs)}

/* ══════════ ④ 첫 진료 ══════════ */
.hm-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.75rem;margin:1.75rem 0 0;padding:0;list-style:none}
.hm-steps li{display:flex;flex-direction:column;gap:.9rem;padding:1.4rem 1.1rem;border-radius:14px;background:var(--c-card);
  border:1px solid var(--c-line);font-size:var(--fs-sm);font-weight:700;line-height:1.5;color:var(--c-ink)}
.hm-step-top{display:flex;justify-content:space-between;align-items:center}
.hm-no{font-size:1.6rem;font-weight:900;color:var(--c-warm);font-variant-numeric:tabular-nums}
.hm-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.75rem}
.hm-notes p{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.5rem;border-radius:12px;background:var(--c-soft);
  font-size:var(--fs-xs);line-height:1.6;color:var(--c-ink)}
.hm-notes .ic{color:var(--c-blue);stroke-width:1.8}
.hm-notes b{display:block;color:var(--c-blue)}

/* ══════════ ⑤ 치료 세 단계 ══════════ */
.hm-flow{display:flex;align-items:stretch;gap:3.25rem;margin:2rem 0 1.75rem;padding:0;list-style:none;counter-reset:none}
.hm-flow li{position:relative;flex:1;display:flex;align-items:center;gap:1.1rem;padding:1.75rem;border-radius:16px;
  background:var(--c-card);border:1px solid var(--c-line)}
/* 카드 사이의 화살표 */
.hm-flow li + li::before{content:"";position:absolute;left:-2.35rem;top:50%;width:1.4rem;height:1.4rem;transform:translateY(-50%);
  background:#6B8BC7;-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='M5 12h14M13 6l6 6-6 6'/%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='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.hm-flow-no{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--c-navy);
  color:#fff;font-size:var(--fs-xs);font-weight:900}
html[data-theme="dark"] .hm-flow-no{background:var(--acc);color:var(--acc-ink)}
.hm-flow h3{font-size:var(--fs-md);font-weight:700;margin-bottom:.35rem;color:var(--c-ink)}
.hm-flow p{font-size:var(--fs-xs);line-height:1.6;color:var(--c-ink-2)}

/* ══════════ ⑥ 봉침 ══════════ */
.hm-bee{display:flex;gap:3rem;align-items:center}
.hm-bee-copy{flex:0 0 360px;display:flex;flex-direction:column;gap:1rem}
.hm-bee-copy .hm-kick{margin:0}
.hm-bee-list{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}
.hm-bee-list li{position:relative;padding-left:1.1rem;font-size:var(--fs-xs);line-height:1.65;color:var(--c-ink-2)}
.hm-bee-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--c-blue)}
.hm-bee-flow{flex:1;display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin:0;padding:0;list-style:none}
.hm-bee-flow li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center;
  font-size:var(--fs-xs);font-weight:700;line-height:1.45;color:var(--c-ink)}
.hm-bee-flow li + li::before{content:"";position:absolute;left:-.9rem;top:43px;width:1.3rem;height:1.3rem;
  background:#6B8BC7;-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='M5 12h14M13 6l6 6-6 6'/%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='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.hm-ring{display:grid;place-items:center;width:110px;height:110px;border-radius:50%;border:2px solid var(--c-blue);
  background:var(--c-card);color:var(--c-blue)}
.hm-ring svg{stroke-width:1.5}
.hm-ring.is-soft{background:var(--tile-bg);box-shadow:var(--tile-sh)}

/* ══════════ ⑦ 상담 · 예약 ══════════ */
.hm-contact{margin-top:clamp(3.5rem,6vw,5.5rem);padding:clamp(3rem,5vw,4.5rem) 0;
  background:linear-gradient(135deg,var(--c-navy) 0%,var(--c-navy-2) 100%);color:#fff}
.hm-contact .hm-h2{color:#fff}
.hm-contact .hm-h2 em{color:#9FC0FF}
.hm-contact-lede{margin-top:.75rem;max-width:52rem;font-size:var(--fs-sm);line-height:1.7;color:#C8D3E8}
.hm-contact-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.hm-cc{display:flex;align-items:center;gap:1.1rem;padding:1.6rem;border-radius:16px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;transition:background .2s}
.hm-cc:hover{background:rgba(255,255,255,.14);color:#fff}
.hm-cc-ic{flex:none;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:#fff;color:var(--c-blue)}
.hm-cc-ic svg{stroke-width:2}
.hm-cc small{display:block;font-size:var(--fs-2xs);color:#C8D3E8}
.hm-cc b{display:block;margin:.1rem 0;font-size:1.38rem;font-weight:700;color:#fff}
.hm-cc b.hm-cc-tel{font-size:1.6rem;font-weight:900;font-variant-numeric:tabular-nums}
.hm-cc.is-white{background:#fff;border-color:#fff}
.hm-cc.is-white:hover{background:#F2F6FD}
.hm-cc.is-white .hm-cc-ic{background:#1747A6;color:#fff}
.hm-cc.is-white b{color:#1747A6}
.hm-cc.is-white small{color:#4A5568}
.hm-contact-info{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.16);font-size:var(--fs-xs);line-height:1.8;color:#C8D3E8}
.hm-contact-info b{display:block;color:#fff}
.hm-contact-info a{color:#9FC0FF;font-weight:700}
.hm-contact-info a:hover{color:#fff}
/* 상담 절 바로 아래가 푸터라 위 여백을 없앱니다. */
.hm + footer{border-top:0}

/* 상담 · 예약 선택창 */
.hm-dlg{width:min(100% - 2rem,420px);padding:1.25rem;border:0;border-radius:16px;background:var(--surface);color:var(--ink);
  box-shadow:0 24px 60px rgba(14,27,51,.3)}
.hm-dlg::backdrop{background:rgba(14,27,51,.45)}
.hm-dlg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}
.hm-dlg-head p{font-size:var(--fs-md);font-weight:800}
.hm-dlg-x{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);cursor:pointer}
.hm-dlg-x:hover{background:var(--surface-2)}
.hm-dlg-opt{display:flex;align-items:center;gap:.9rem;padding:.9rem 1rem;margin-top:.5rem;border-radius:12px;
  border:1px solid var(--line-2);color:var(--ink);font-size:var(--fs-xs);line-height:1.5}
.hm-dlg-opt b{display:block;font-size:var(--fs-sm)}
.hm-dlg-opt:hover{border-color:var(--acc);background:var(--acc-soft)}
.hm-dlg-opt .hm-ic svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ══════════ 반응형 ══════════ */
/* 1280px 이하 — 두 단이 빠듯해지므로 1199px 이하에서는 배너를 글 아래로 내립니다(겹침 방지). */
@media (max-width:1199px){
  .hm-hero-in{grid-template-columns:minmax(0,1fr);row-gap:2rem}
  .hm-roll{max-width:640px}
  .hm-why{flex-direction:column;gap:2rem}
  .hm-why-side{flex:none;width:100%;display:grid;grid-template-columns:auto 1fr;column-gap:1.5rem;align-items:start}
  .hm-why-side .hm-kick,.hm-why-side .hm-h2{grid-column:1 / -1}
  .hm-doc{grid-column:1 / -1;display:flex;gap:1.5rem;align-items:center}
  .hm-doc img{width:min(100%,420px);flex:none}
  .hm-why-side .hm-btn{grid-column:1 / -1}
  .hm-why-cards{padding-top:0;width:100%}
  .hm-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hm-bee{flex-direction:column;align-items:stretch}
  .hm-bee-copy{flex:none}
}
@media (max-width:1023px){
  .hm-trust{margin-top:1.5rem;grid-template-columns:repeat(6,minmax(0,1fr));gap:1rem .4rem;padding:1rem .75rem}
  .hm-trust li{grid-column:span 2;flex-direction:column;text-align:center;gap:.4rem;padding:0 .25rem;border-right:0}
  .hm-trust li:nth-child(n+4){grid-column:span 3;padding-top:.75rem;border-top:1px solid var(--c-line)}
  .hm-trust .hm-ic{width:40px;height:40px}
  .hm-trust .hm-ic svg{width:20px;height:20px}
  .hm-trust b{font-size:var(--fs-xs)}
  .hm-trust small{font-size:var(--fs-2xs)}
  .hm-hero{padding-bottom:0}
  .hm-sym{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-proof-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-flow{flex-direction:column;gap:2.25rem}
  .hm-flow li + li::before{left:50%;top:-1.85rem;transform:translateX(-50%) rotate(90deg)}
  .hm-contact-cards,.hm-contact-info{grid-template-columns:1fr}
}
@media (max-width:767px){
  .hm-wrap{width:min(100% - 1.75rem,var(--hm-wrap))}
  .hm-hero{padding-top:calc(var(--nav-h) + 1.25rem)}
  .hm-hero-copy{gap:1rem}
  .hm-hero-kick{font-size:var(--fs-2xs);gap:.5rem}
  .hm-hero-kick::before{height:15px}
  .hm-hero-cta{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .hm-btn{min-height:52px;padding:0 .75rem;font-size:var(--fs-sm)}
  .hm-btn .ic{display:none}
  .hm-hero-loc{font-size:var(--fs-2xs);align-items:flex-start}
  .hm-roll{max-width:none}
  .hm-roll .roll-view{border-radius:16px}
  .hm-roll .roll-arw,.hm-roll .roll-play{width:40px;height:40px}
  .hm-roll-count{min-width:36px}
  .hm-sym{grid-template-columns:1fr;gap:.5rem;margin-top:1.25rem}
  .hm-sym a{gap:.75rem;padding:.9rem 1rem;border-radius:12px}
  .hm-ic-body{width:48px;height:48px}
  .hm-ic-body svg{width:30px;height:30px}
  .hm-sym-t{font-size:var(--fs-sm)}
  .hm-sym-t br{display:none}
  .hm-check{flex-direction:column;align-items:stretch;padding:1.1rem;gap:1rem}
  .hm-check-t .hm-ic{display:none}
  .hm-check-act{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
  .hm-check-act .hm-more{grid-column:1 / -1;justify-self:center;margin:0}
  .hm-doc{flex-direction:column;align-items:stretch;gap:0}
  .hm-doc img{width:100%}
  .hm-why-cards{grid-template-columns:1fr}
  .hm-why-cards li{padding:1.1rem;gap:.9rem}
  .hm-why-cards .hm-ic{width:48px;height:48px}
  .hm-proof-body{padding:.9rem}
  .hm-proof-t{font-size:var(--fs-xs)}
  .hm-steps{grid-template-columns:1fr;gap:.5rem}
  .hm-steps li{flex-direction:row;align-items:center;padding:.9rem 1rem;font-size:var(--fs-xs)}
  .hm-step-top{flex:none;gap:.75rem}
  .hm-no{font-size:var(--fs-md);width:2rem}
  .hm-notes{grid-template-columns:1fr}
  .hm-notes p{padding:1rem}
  .hm-flow li{padding:1.1rem;gap:.8rem}
  .hm-ic-xl{width:52px;height:52px}
  /* 봉침 흐름도는 세로로 */
  .hm-bee-flow{flex-direction:column;align-items:stretch;gap:1.4rem}
  .hm-bee-flow li{flex-direction:row;text-align:left;gap:1rem}
  .hm-bee-flow li br{display:none}
  .hm-bee-flow li + li::before{left:30px;top:-1.3rem;transform:rotate(90deg);width:1rem;height:1rem}
  .hm-ring{width:64px;height:64px;flex:none}
  .hm-ring svg{width:28px;height:28px}
  .hm-cc{padding:1.1rem}
  .hm-cc-ic{width:48px;height:48px}
}
@media (max-width:374px){
  .hm-hero-cta{grid-template-columns:1fr}
  .hm-proof-cards{grid-template-columns:1fr}
}

/* 네이버 예약 카드 — 달력 대신 N 심벌(assets/img/naver-n.svg). 파란 원 대신 옅은 바탕 위에 둡니다. (2026-09-30) */
.hm-cc.is-white .hm-cc-ic{background:#EAF1FB}
/* 단계가 다섯 개인 페이지(척추압박골절 · 척추전방전위증 랜딩) — 다섯 칸으로 끝까지 채움(2026-10-04) */
@media (min-width:1200px){.hm-steps:has(> li:nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}}

/* 2026-10-10 첫 화면 버튼 · 위치 줄 삭제 뒤 — 글이 답답하지 않게: 배너와 세로 가운데 맞춤, 문단 사이 여유, 줄 길이 제한 */
.hm-hero-in{align-items:center}
.hm-hero-copy{gap:1.75rem;padding-top:0}
.hm-hero-lede{max-width:36em;line-height:1.85;word-break:keep-all}
.hm-hero-lede span{margin-top:1rem;color:var(--c-ink-2)}
@media (max-width:900px){ .hm-hero-copy{gap:1.25rem} .hm-hero-lede span{margin-top:.75rem} }