@charset "utf-8";
/* ════════════════════════════════════════════════════════════════
   커스텀치과 성인교정 랜딩 — 반응형 재작성
   · 절대좌표 캔버스(1920 고정)를 흐름(flow) 구조로 다시 짰습니다.
   · 글자·여백은 vw 기반 clamp() 로, 1920px 에서 피그마 원본 값과 같아지고
     화면이 좁아지면 비율대로 줄다가 모바일에서 최소값으로 고정됩니다.
   · 브레이크포인트는 768px(모바일) 하나만 씁니다.
   ════════════════════════════════════════════════════════════════ */

/* ──────── 웹폰트 ──────── */
@font-face{font-family:'GmarketSans';font-weight:300;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansLight.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansLight.woff') format('woff');}
@font-face{font-family:'GmarketSans';font-weight:500;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansMedium.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansMedium.woff') format('woff');}
@font-face{font-family:'GmarketSans';font-weight:700;font-style:normal;font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.woff2') format('woff2'),
      url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.woff') format('woff');}

/* ──────── 토큰 ──────── */
:root{
  --메인:#0081cc;
  --서브:#7ecef4;
  --먹:#161c2a;
  --선:#e3e3e6;

  /* 본문 최대 폭 : 피그마 좌우 여백 210px 기준 (1920 - 210*2) */
  --content:1500px;
  --gutter:clamp(20px,2.6vw,50px);

  /* 글자 크기 배율 : 1 = 기준. 페이지에서 :root{--fs-k:.85} 로 덮어 전체 축소 가능 */
  --fs-k:1;

  /* 유동 글자 크기 : 1920px 에서 이름 그대로의 px 이 됩니다 */
  --fs-75:calc(clamp(30px,3.91vw,75px) * var(--fs-k));
  --fs-64:calc(clamp(26px,3.34vw,64px) * var(--fs-k));
  --fs-55:calc(clamp(23px,2.87vw,55px) * var(--fs-k));
  --fs-50:calc(clamp(22px,2.61vw,50px) * var(--fs-k));
  --fs-45:calc(clamp(20px,2.35vw,45px) * var(--fs-k));
  --fs-40:calc(clamp(19px,2.09vw,40px) * var(--fs-k));
  --fs-35:calc(clamp(16px,1.83vw,35px) * var(--fs-k));
  --fs-32:calc(clamp(15px,1.67vw,32px) * var(--fs-k));
  --fs-30:calc(clamp(15px,1.57vw,30px) * var(--fs-k));
  --fs-28:calc(clamp(14px,1.46vw,28px) * var(--fs-k));
  --fs-24:calc(clamp(13px,1.25vw,24px) * var(--fs-k));
  --fs-20:calc(clamp(12px,1.05vw,20px) * var(--fs-k));

  /* 섹션 상하 여백 */
  --sec-y:clamp(40px,4.27vw,82px);
}

/* ──────── 리셋 ──────── */
*{margin:0;padding:0;box-sizing:border-box}
html{background:#fff;-webkit-text-size-adjust:100%}
body{font-family:'GmarketSans','Malgun Gothic','맑은 고딕',sans-serif;font-weight:500;color:#000;
  line-height:1.5;letter-spacing:-0.03em;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  word-break:keep-all;overflow-wrap:break-word;
  position:relative}
/* 배경 띠 섹션은 화면 전체 폭. 1920 제한이 필요한 블록만 아래에서 개별 지정 */
.duo{max-width:1920px;margin-inline:auto}
/* 배경 패럴랙스 레이어.
   레이어가 스스로를 클립하므로 섹션에는 overflow:hidden 을 걸지 않습니다.
   (섹션에 걸면 위로 튀어나오게 설계한 단계 뱃지 .step--on-dark 가 같이 잘립니다)
   실제로 움직이는 건 ::before 이고, 이동량은 JS 가 --py 로 넣어 줍니다. */
.fix_bg{position:absolute;inset:0;z-index:0;overflow:hidden;
  background-position:center center;background-size:cover;background-repeat:no-repeat}
.fix_bg::before{content:"";position:absolute;left:0;right:0;top:-35%;bottom:-35%;
  background-image:inherit;background-position:inherit;background-size:inherit;
  background-repeat:inherit;
  transform:translate3d(0,var(--py,0px),0);will-change:transform}
img{display:block;max-width:100%;border:0}
b,strong{font-weight:700}
em{font-style:normal}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.faq-q,[role=tab],label{cursor:pointer}
button:disabled{cursor:default}

/* ──────── 공통 ──────── */
.wrap{width:min(100% - var(--gutter)*2,var(--content));margin-inline:auto}
.sec{padding-block:var(--sec-y)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* 섹션 머리말 (WHY 뱃지 · 큰 제목 · 밑줄) */
.head{text-align:center}
.head__eyebrow{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1vw,18px);
  margin-bottom:clamp(12px,1.1vw,21px)}
.head__badge{
  flex:none;
  display:grid;
  place-items:center;
  width:clamp(52px,5.26vw,101px);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--메인);
  color:#fff;
  font-weight:700;
  font-size:calc(clamp(13px,1.56vw,30px) * var(--fs-k));
  letter-spacing:-0.03em}
.head__eyebrow>span:not(.head__badge){font-size:var(--fs-40);font-weight:500}
.head__title{font-size:var(--fs-64);font-weight:700;line-height:1.573;color:var(--먹)}
.head__title em{color:var(--메인)}
.head__rule{width:min(100%,1069px);margin:clamp(6px,0.57vw,11px) auto 0}

/* ════════════════════════════════════════════════════════════════
   상단 고정바 (로고 · 앵커 메뉴 · 상담신청 · 전화)
   ════════════════════════════════════════════════════════════════ */
:root{--nav-h:clamp(56px,4.17vw,80px)}
html{scroll-behavior:smooth}
.sec,.banner,.duo,.flow,.cost,.hero{scroll-margin-top:var(--nav-h)}
/* 상담신청 버튼은 안내 버튼줄부터 보이도록 (상단 고정바 높이만큼 띄움) */
#counsel{scroll-margin-top:calc(var(--nav-h) + clamp(12px,1.6vw,30px))}

.lnav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid #e3e3e6}
.lnav__in{width:min(100% - var(--gutter)*2,var(--content));margin-inline:auto;
  display:flex;align-items:center;gap:clamp(12px,1.25vw,24px);height:var(--nav-h)}
.lnav__logo{flex:none;display:flex;align-items:center}
.lnav__logo img{width:clamp(120px,10.4vw,200px);height:auto}
.lnav__menu{display:flex;justify-content:center;flex:1;gap:clamp(12px,1.35vw,26px);
  overflow-x:auto;scrollbar-width:none}
.lnav__menu::-webkit-scrollbar{display:none}
.lnav__menu a{position:relative;display:block;padding:.35em 0;color:#4b5160;
  font-size:clamp(13px,0.86vw,16.5px);font-weight:700;white-space:nowrap;
  transition:color .15s ease}
.lnav__menu a:hover{color:var(--메인)}
.lnav__menu a.is-on{color:var(--메인)}
.lnav__menu a.is-on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;
  height:2px;background:var(--메인);border-radius:2px}
.lnav__cta{flex:none;display:inline-flex;align-items:center;justify-content:center;
  padding:0 clamp(12px,1.15vw,22px);height:clamp(34px,2.4vw,46px);border-radius:999px;
  background:var(--메인);color:#fff;font-weight:700;font-size:clamp(13px,0.94vw,18px);
  line-height:1;padding-top:.18em;transition:filter .15s ease}
.lnav__cta:hover{filter:brightness(1.08)}
.lnav__tel{flex:none;display:none;place-items:center;width:clamp(34px,2.4vw,46px);aspect-ratio:1;
  border-radius:50%;background:#eef4f8}
.lnav__tel svg{width:52%;height:52%;fill:var(--메인)}
.fixbar{display:none}

/* ════════ 맨 위로 버튼 (우측 하단) ════════ */
.gotop{position:fixed;right:var(--gutter);bottom:var(--gutter);z-index:85;
  display:grid;place-items:center;width:clamp(46px,3.44vw,66px);aspect-ratio:1;
  border-radius:50%;background:rgba(32,36,43,.82);color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 20px rgba(0,0,0,.22);
  opacity:0;visibility:hidden;transform:translateY(14px);pointer-events:none;
  transition:opacity .25s ease,transform .25s ease,visibility .25s,background .15s ease}
.gotop.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.gotop:hover{background:var(--메인)}
.gotop svg{width:44%;height:44%;fill:currentColor}
@media (prefers-reduced-motion:reduce){.gotop{transition:opacity .25s ease,visibility .25s}}
.lnav__toggle{display:none;flex:none;width:34px;height:34px;position:relative}
.lnav__toggle span,.lnav__toggle span::before,.lnav__toggle span::after{
  position:absolute;left:6px;width:22px;height:2px;background:#20242b;border-radius:2px;
  transition:transform .22s ease,opacity .22s ease}
.lnav__toggle span{top:16px}
.lnav__toggle span::before{content:"";left:0;top:-7px}
.lnav__toggle span::after{content:"";left:0;top:7px}
.lnav.is-open .lnav__toggle span{background:transparent}
.lnav.is-open .lnav__toggle span::before{transform:translateY(7px) rotate(45deg)}
.lnav.is-open .lnav__toggle span::after{transform:translateY(-7px) rotate(-45deg)}

/* ════════════════════════════════════════════════════════════════
   01 · 히어로
   ════════════════════════════════════════════════════════════════ */
/* 높이·배경폭·글상자 위치를 모두 같은 식(--hero-img)으로 계산합니다.
   vw 는 스크롤바를 포함하고 % 는 제외하므로, 둘을 섞으면 그 차이만큼
   섹션이 사진보다 높아져서 아래에 틈이 생깁니다. 그래서 전부 vw 로 통일.
   aspect-ratio + max-height 조합은 쓰지 않습니다 — 브라우저가 max-height 를
   비율로 전이시켜 max-width 로도 걸어 버려서 섹션이 1920 으로 줄어듭니다. */
.hero{--hero-img:min(100vw,1920px);
  position:relative;overflow:hidden;background:#c0c4d0;
  height:min(calc(100vw * 1045 / 1920),1045px)}
.hero__fix{position:absolute;inset:0;z-index:0;background-repeat:no-repeat;
  background-position:center top;background-size:var(--hero-img) auto}
/* 글상자는 화면이 아니라 "1920 으로 잘린 사진" 의 왼쪽 절반 한가운데.
   = 화면 중앙에서 사진 폭의 1/4 만큼 왼쪽 */
.hero__box{
  position:absolute;
  left:50%;
  top:22%;
  margin-left:calc(var(--hero-img) * -0.25);
  transform:translateX(-50%);
  width:min(calc(var(--hero-img) * 0.44),860px);
  text-align:center
  }
.hero__badge{
  display:inline-block;
  padding:clamp(8px,0.9vw,17px) clamp(18px,2.1vw,40px);
  border-radius:999px;
  background:var(--서브);
  color:#fff;
  font-weight:400;
  font-size:var(--fs-40);
  line-height:1.15;
  font-family: 'Nanum Myeongjo', serif;
  }
.hero__title{margin-top:clamp(14px,1.7vw,32px);font-size:var(--fs-64);font-weight:700;
  line-height:1.28;color:#000}
.hero__title em{color:var(--메인)}
.hero__rule{width:min(100%,856px);margin:clamp(12px,1.8vw,34px) auto 0}
.hero__list{margin-top:clamp(14px,1.9vw,36px);display:grid;gap:clamp(4px,0.55vw,10px);
  font-size:var(--fs-32);line-height:1.5}

/* ════════════════════════════════════════════════════════════════
   02 · 왜 미루게 될까요 (2×2 카드)
   ════════════════════════════════════════════════════════════════ */
.why__grid{display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(24px,3.2vw,61px);row-gap:clamp(48px,7.03vw,135px);
  margin-top:clamp(70px,9.06vw,174px)}
.why-card{position:relative;
  padding:clamp(78px,8.1vw,156px) clamp(20px,3.4vw,65px) clamp(30px,3.6vw,70px)}
.why-card__photo{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);z-index:3;
  width:clamp(120px,13.5vw,260px);aspect-ratio:1;border-radius:50%;object-fit:cover;
  background:#fff}
.why-card__q{font-size:calc(clamp(18px,2.06vw,39.6px) * var(--fs-k));font-weight:700;line-height:1.5;text-align:center}
.why-card__a{
  display:flex;
  gap:clamp(10px,1.25vw,24px);
  margin-top:clamp(14px,1.7vw,33px);
  font-size:var(--fs-35);
  line-height:1.43;
  align-items: flex-start;
  }
.why-card__a b{color:var(--메인)}
.why-card__arrow{flex:none;width:clamp(26px,3.07vw,59px);aspect-ratio:59/28.87;margin-top:.5em}

/* 형광펜 강조 문장 */
.mark{margin-top:clamp(46px,5.73vw,110px);text-align:center;font-size:var(--fs-55);font-weight:700;
  line-height:1.45}
.mark span{background:linear-gradient(rgba(126,206,244,0) 58%,rgba(126,206,244,.35) 58%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em}
.mark b{color:var(--메인)}

.why{padding-bottom:clamp(56px,6.09vw,117px)}

/* ════════════════════════════════════════════════════════════════
   03 · 성인교정 무엇이 다를까요 (사진 배너)
   ════════════════════════════════════════════════════════════════ */
/* overflow:hidden 금지 — .banner__dots 가 아래 경계로 내려와야 합니다.
   배경 클립은 .fix_bg 가 자체적으로 처리합니다. */
.banner{position:relative;aspect-ratio:1920/555;background:#243447}
.banner__inner{z-index:1}
.banner__inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:clamp(4px,0.5vw,10px);color:#fff;text-align:center;
  background:rgba(0,0,0,.6)}
.banner__sub{font-size:calc(clamp(26px,3.83vw,73.5px) * var(--fs-k));font-weight:500;line-height:1.41}
.banner__title{font-size:calc(clamp(30px,4.43vw,85px) * var(--fs-k));font-weight:700;line-height:1.22}
.banner__title em{color:var(--서브)}
.banner__dots{
  position:absolute;
  left:50%;
  bottom:calc(-1 * clamp(24px,3.18vw,61px));
  transform:translateX(-50%);
  display:grid;
  gap:clamp(22px,3vw,57px);
  justify-items:center;
  z-index: 10;
  }
.banner__dots i{width:clamp(11px,1.27vw,24.4px);aspect-ratio:1;border-radius:50%;background:#fff}
.banner__dots i:last-child{background:#161c2a}

/* ════════════════════════════════════════════════════════════════
   04 · 성장기 교정 vs 성인교정
   ════════════════════════════════════════════════════════════════ */
.compare{padding-top:clamp(74px,9.9vw,190px);padding-bottom:clamp(38px,4.17vw,80px)}
.duo-intro{padding-top:0}
.duo-intro .mark{margin-top:0}
.head__title--plain{color:#000;font-weight:500;line-height:1.17}
.head__title--plain b{font-weight:700}
.lead{margin-top:clamp(28px,3.6vw,69px);text-align:center;font-size:var(--fs-35);line-height:1.43}

.cmp{--gap:clamp(20px,4.06vw,78px);
  --cmpw:min(100vw - var(--gutter)*2,var(--content));
  --colw:calc((var(--cmpw) - var(--gap))/2);
  --ph:calc(var(--colw)*372/711);
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);
  margin-top:clamp(30px,3.6vw,69px)}
.cmp__photo{position:relative;aspect-ratio:711/372;overflow:hidden}
.cmp__photo img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.cmp__item--adult .cmp__photo{border:clamp(5px,0.68vw,13px) solid var(--서브)}
.cmp__photo figcaption{position:absolute;left:0;right:0;bottom:clamp(6px,0.9vw,17px);
  text-align:center;color:#fff;font-size:var(--fs-40);line-height:1.2}
.cmp__list{margin-top:clamp(20px,2.45vw,47px);text-align:center;font-size:var(--fs-35);
  line-height:1.7}
.cmp__dept{margin-top:.15em;font-weight:700;font-size:var(--fs-40)}
.cmp__dept--point{color:var(--메인)}
.cmp__vs{position:absolute;left:50%;top:calc(var(--ph)/2);transform:translate(-50%,-50%);
  width:clamp(64px,6.51vw,125px);aspect-ratio:1;display:grid;place-items:center;z-index:2}
.cmp__vs img{position:absolute;width:114.4%;height:114.4%;max-width:none}
.cmp__vs span{position:relative;font-weight:700;font-size:calc(clamp(32px,3.23vw,62px) * var(--fs-k));line-height:1;
  letter-spacing:-0.03em;transform:translateY(.075em)}

/* ════════════════════════════════════════════════════════════════
   05 · 2인 전문의 협진
   ════════════════════════════════════════════════════════════════ */
.sec--tight{padding-bottom:0}
.mark--sm{font-size:var(--fs-50)}

/* 노란 테두리 단계 뱃지 (01 · 02 …) */
.step{position:relative;z-index:2;margin-top:clamp(38px,4.74vw,91px);display:flex;justify-content:center}
.sec--step{padding-top:0}
.sec--step .step{margin-top:clamp(2px,0.16vw,3px)}
.step span{display:grid;place-items:center;width:clamp(73px,7.45vw,143px);aspect-ratio:1;
  border:clamp(5px,0.47vw,9px) solid #ffc300;border-radius:50%;background:#fff;
  font-weight:700;font-size:calc(clamp(38px,3.91vw,75px) * var(--fs-k));line-height:1;color:#000;
  letter-spacing:-0.04em;padding-top:.15em}

/* 두 전문의 사진 띠 */
.duo{position:relative;margin-top:calc(-1 * clamp(36px,3.72vw,71.5px))}
.duo__photos{display:grid;grid-template-columns:1fr 1fr}
.duo__photos img{width:100%;height:100%;aspect-ratio:960/1115;object-fit:cover}
.duo__inner{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:0 var(--gutter);
  color:#fff;text-align:center;text-shadow:0 1px 12px rgba(0,0,0,.28)}
.duo__title{font-size:var(--fs-55);font-weight:700;line-height:1.4}
.duo__title i{font-style:normal;font-weight:500}
.duo__title .is-gold{color:#f4d877}
.duo__title .is-sky{color:#afe5ff}
.duo__title2{font-weight:500}
.duo__docs{position:absolute;left:50%;bottom:clamp(24px,3.6vw,70px);transform:translateX(-50%);
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,5.6vw,107px);width:min(100%,1400px)}
.duo__doc:first-child{text-align:right}
.duo__doc:last-child{text-align:left}
.duo__name{font-size:var(--fs-40);font-weight:500;line-height:1.2}
.duo__role{margin-top:.25em;font-size:calc(clamp(12px,1.2vw,23px) * var(--fs-k));opacity:.85}
.duo__desc{margin-top:clamp(10px,1.3vw,25px);font-size:var(--fs-30);line-height:1.5;font-weight:500}
.duo__desc b{font-weight:700}

/* 전문의 자격 + 보건복지부 로고 */
.cert{display:flex;align-items:center;justify-content:center;
  gap:clamp(16px,3.4vw,66px);text-align:center}
.cert__txt{font-size:var(--fs-45);font-weight:500;line-height:1.45}
.cert__txt b{font-weight:700}
.cert__logo{flex:none;display:flex;align-items:center;gap:clamp(5px,0.73vw,14px)}
.cert__logo-sym{width:clamp(38px,4.53vw,87px);height:auto}
.cert__logo-txt{width:clamp(94px,11.25vw,216px);height:auto}

/* 협진이 필요한 순간 */
.need{
  width: min(100%,1360px);
  margin-inline:auto;
  margin-top:clamp(34px,4.2vw,80px);
  padding:clamp(26px,3.2vw,62px) clamp(20px,4.6vw,88px) clamp(30px,3.6vw,70px)
  }
.need__title{display:flex;align-items:center;gap:clamp(10px,1.6vw,30px);
  font-size:var(--fs-40);font-weight:700}
.need__ico{position:relative;flex:none;width:clamp(46px,5.29vw,101.5px);aspect-ratio:101.5/94.5}
.need__ico img{width:100%;height:100%}
.need__list{margin-top:clamp(18px,2.2vw,42px);font-size:var(--fs-35);line-height:1.83}
.need__list li{position:relative;padding-left:clamp(16px,1.6vw,30px)}
.need__list li::before{content:"";position:absolute;left:0;top:.75em;
  width:clamp(5px,0.42vw,8px);aspect-ratio:1;border-radius:50%;background:#000}
.need__note{margin-top:clamp(20px,2.4vw,46px);font-size:var(--fs-35);font-weight:700;
  line-height:1.49}
.need__note b{color:var(--메인)}

/* ════════════════════════════════════════════════════════════════
   06 · 세 가지 디지털 장비
   ════════════════════════════════════════════════════════════════ */
.head--gap{margin-top:clamp(24px,3.1vw,60px)}
.dev__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,0.52vw,10px);
  margin-top:clamp(34px,4.2vw,80px)}

.dev-card__photo{width:100%;aspect-ratio:453/263;object-fit:cover}
.dev-card__name{margin-top:clamp(14px,1.4vw,27px);padding-inline:clamp(6px,0.94vw,18px);
  text-align:center;font-size:var(--fs-40);font-weight:500}
.dev-card__dl{margin-top:clamp(10px,1.15vw,22px);padding-inline:clamp(6px,0.94vw,18px);
  text-align:center;font-size:var(--fs-24);line-height:1.5}
.dev-card__dl dt{font-weight:700;color:var(--메인)}
.dev-card__dl dd+dt{margin-top:clamp(8px,0.94vw,18px)}

/* ════════════════════════════════════════════════════════════════
   07 · 통합 분석 · 결과 미리보기
   ════════════════════════════════════════════════════════════════ */
.sim__pills{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.95vw,37px);
  margin-top:clamp(34px,4.22vw,81px);text-align:center;color:#fff}
.sim__pills li{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(4px,0.5vw,10px);aspect-ratio:475/202;border-radius:clamp(20px,2.1vw,40px)}
.sim__pills li:nth-child(1){background:#48bcff}
.sim__pills li:nth-child(2){background:#1fa7f6}
.sim__pills li:nth-child(3){background:var(--메인)}
.sim__pills b{font-size:var(--fs-40);font-weight:700}
.sim__pills span{font-size:var(--fs-35);font-weight:500}
/* 세 갈래가 한 곳으로 모이는 선 */
.sim__join{display:block;width:100%;height:clamp(40px,5.05vw,97px);margin-top:0}
.sim__join path{fill:none;stroke:#161c2a;stroke-width:2;vector-effect:non-scaling-stroke}
.sim__join .sim__head{fill:#161c2a;stroke:none}
/* 아래로 향하는 화살표 */
.sim__down{display:block;width:clamp(17px,2.1vw,40.4px);height:auto;
  margin:clamp(1px,0.1vw,2px) auto 0}
.sim__down path{fill:var(--메인)}
.sim__down--mo{display:none}

.sim__view{position:relative;margin-top:clamp(16px,1.67vw,32px);background:#000}
.sim__view img{width:100%;aspect-ratio:1497/855;object-fit:cover}
.sim__cap{position:absolute;color:#fff;font-weight:700;line-height:1.25}
.sim__cap--top{left:0;right:0;top:clamp(60px,1.3vw,25px);text-align:center;font-size:var(--fs-50)}
.sim__cap--left{left:clamp(16px,4.6vw,89px);bottom:clamp(24px,3.2vw,62px);font-size:var(--fs-40)}
.sim__cap--right{right:clamp(16px,1.9vw,37px);bottom:clamp(24px,2.9vw,55px);text-align:right;
  font-size:var(--fs-40)}
.sim .mark{margin-top:clamp(16px,1.82vw,35px)}
.sim__note{margin-top:clamp(24px,2.81vw,54px);text-align:center;font-size:var(--fs-30);line-height:1.6}

/* ════════════════════════════════════════════════════════════════
   08 · 교정 방식 비교표
   ════════════════════════════════════════════════════════════════ */
.kinds__scroll{margin-top:clamp(28px,3.5vw,67px);overflow-x:auto;-webkit-overflow-scrolling:touch}
.kinds__tb{width:100%;min-width:660px;border-collapse:collapse;text-align:center;
  font-size:var(--fs-24);line-height:1.4}
.kinds__tb caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.kinds__tb th,.kinds__tb td{border:1px solid #c9ccd2;padding:clamp(10px,1.15vw,22px) clamp(6px,0.8vw,15px)}
.kinds__tb thead th{color:#fff;font-weight:700;padding-block:clamp(12px,1.4vw,27px)}
.kinds__tb thead th:nth-child(1){background:#e9eaec;color:#000}
.kinds__tb thead th:nth-child(2){background:#48bcff}
.kinds__tb thead th:nth-child(3){background:#1fa7f6}
.kinds__tb thead th:nth-child(4){background:#0d93e8}
.kinds__tb thead th:nth-child(5){background:var(--메인)}
.kinds__tb tbody th{font-weight:500;background:#fafafb;width:17%}
.kinds__hint{display:none}
.kinds__note{margin-top:clamp(20px,2.4vw,46px);text-align:center;font-size:var(--fs-28);line-height:1.55}
.kinds{padding-bottom:clamp(30px,3.18vw,61px)}
.invis{padding-top:0}

/* ════════════════════════════════════════════════════════════════
   09 · 인비절라인 공식 인증
   ════════════════════════════════════════════════════════════════ */
.invis__box{text-align:center;
  padding:clamp(30px,4.2vw,80px) var(--gutter) clamp(34px,4.6vw,88px)}
.invis__logos{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.6vw,30px)}
.invis__logo1{width:clamp(180px,20.7vw,397px)}
.invis__logo2{width:clamp(160px,18.6vw,357px)}
.invis__x{font-size:calc(clamp(18px,2.1vw,40px) * var(--fs-k));color:#161c2a}
.invis__aligner{width:clamp(70px,10.1vw,194px);margin-left:clamp(-10px,-0.5vw,0px)}
.invis__title{margin-top:clamp(18px,2.3vw,44px);font-size:var(--fs-40);font-weight:500}
.invis__title b{font-weight:700;color:var(--메인)}
.invis__desc{margin-top:clamp(16px,2.1vw,40px);font-size:var(--fs-28);line-height:1.65}

/* ════════════════════════════════════════════════════════════════
   10 · 치료 전후 사례
   ════════════════════════════════════════════════════════════════ */
/* 사례 목록 : 2열 그리드(모바일 1열) — 탭 필터·페이징 없이 전부 노출 */
.cases__list{margin-top:clamp(24px,2.9vw,56px);
  display:grid;grid-template-columns:repeat(2,1fr);
  column-gap:clamp(20px,2.6vw,50px);row-gap:clamp(24px,2.6vw,50px);align-content:start}
.case__photos{display:grid;grid-template-columns:1fr 1fr;gap:clamp(4px,0.26vw,5px)}
.case__photos img{width:100%;aspect-ratio:310/207;object-fit:cover}
.case__title{margin-top:clamp(12px,1.5vw,29px);padding-inline:clamp(6px,0.73vw,14px);
  text-align:center;font-size:var(--fs-28);
  font-weight:700}
.case__title span{margin-left:.5em;font-size:var(--fs-24);font-weight:500}
.case__spec{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(12px,1.5vw,29px);
  padding-inline:clamp(6px,0.73vw,14px);
  row-gap:clamp(2px,0.3vw,6px);margin-top:clamp(12px,1.5vw,29px);
  font-size:var(--fs-24);line-height:1.5}
.case__spec dt{color:#6d727c;font-size:var(--fs-20);align-self:center}
.case__spec dd{color:var(--메인);font-weight:700}

/* ════════════════════════════════════════════════════════════════
   11 · 진단부터 유지관리까지 5단계
   ════════════════════════════════════════════════════════════════ */
/* overflow:hidden 금지 — .step--on-dark 뱃지가 위 경계로 튀어나와야 합니다.
   배경 클립은 .fix_bg 가 자체적으로 처리합니다. */
.flow{position:relative;background:#2c2f33;color:#fff;
  margin-top:clamp(42px,4.48vw,86px)}
.flow__inner{background:rgba(44,47,51,.45);z-index:1}
/* flow-root : .step--on-dark 의 음수 마진이 밖으로 상쇄되어
   어두운 오버레이까지 끌어올리는 것을 막습니다. 뱃지만 위로 넘칩니다. */
.flow__inner{position:relative;display:flow-root;padding-bottom:clamp(44px,5.2vw,100px)}
.step--on-dark{margin-top:calc(clamp(73px,7.45vw,143px) / -2)}
.flow__title{margin-top:clamp(18px,2.4vw,46px);text-align:center;font-size:var(--fs-64);
  font-weight:500;line-height:1.35}
.flow__title em{font-weight:700;color:var(--서브)}
.flow__circles{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.6vw,30px);
  margin-top:clamp(28px,3.6vw,70px);text-align:center}
.flow__circles img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover}
.flow__circles span{display:block;margin-top:clamp(10px,1.25vw,24px);font-size:var(--fs-35);
  font-weight:700}
@counter-style circled-num{system:fixed;symbols:"①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨";suffix:""}
.flow__list{width:min(100%,1420px);margin:clamp(26px,3.4vw,65px) auto 0;
  display:grid;gap:clamp(6px,0.7vw,13px);font-size:var(--fs-28);line-height:1.786;
  counter-reset:flow}
.flow__list li{counter-increment:flow;text-indent:0}
.flow__list li::before{content:counter(flow,circled-num);margin-right:.25em;font-weight:500}
.flow__list b{font-weight:700;color:var(--서브)}

/* ════════════════════════════════════════════════════════════════
   12 · 회사를 그만두지 않고도 + 진료시간
   ════════════════════════════════════════════════════════════════ */
.life{padding-top:clamp(46px,5.47vw,105px)}
.life__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,0.8vw,15px);
  margin-top:clamp(28px,3.4vw,66px)}
.life-card{border:1px solid #686868;border-radius:clamp(12px,1.33vw,25.6px);
  padding:clamp(20px,2.9vw,56px) clamp(14px,1.5vw,28px);text-align:center}
.life-card h3{display:flex;align-items:center;justify-content:center;
  min-height:calc(clamp(17px,1.87vw,35.8px) * 1.34 * 2);
  font-size:calc(clamp(17px,1.87vw,35.8px) * var(--fs-k));font-weight:700;line-height:1.34;color:var(--메인)}
.life-card p{margin-top:clamp(12px,1.5vw,29px);font-size:calc(clamp(13px,1.33vw,25.6px) * var(--fs-k));
  line-height:1.6}

/* 진료시간 표 — 실사이트(/html2/introduce/time.html) 색상 그대로 */
.time-panel{margin-top:clamp(28px,3.4vw,66px);background:#f4f4f4;
  padding:clamp(24px,4.2vw,80px) clamp(16px,5.2vw,100px)}
.time-panel__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.time-tb{width:100%;min-width:600px;border-collapse:collapse;text-align:center;color:#fff}
.time-tb caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.time-tb thead th{position:relative;height:clamp(66px,6.8vw,130px);padding:0;border:0;text-align:right}
.time-tb thead th span{position:absolute;right:0;top:0;transform:translateX(50%);display:block;
  width:clamp(52px,5vw,96px);padding:clamp(6px,0.63vw,12px) 0;border-radius:clamp(8px,0.73vw,14px);
  background:#6f6f6f;color:#fff;font-size:calc(clamp(13px,1.25vw,24px) * var(--fs-k));line-height:1.15;
  font-weight:500;text-align:center}
.time-tb thead th em{position:absolute;right:0;bottom:0;width:1px;height:clamp(26px,2.6vw,50px);
  background:#ccc}
.time-tb td,.time-tb tbody th{border:1px solid #ccc;border-right:0;vertical-align:middle;
  font-size:calc(clamp(15px,1.61vw,31px) * var(--fs-k));font-weight:500}
.time-tb tbody th{width:7%;background:#2b3440;color:#fff}
.time-tb td p{height:clamp(44px,4.7vw,90px);line-height:clamp(44px,4.7vw,90px);
  margin:clamp(11px,1.15vw,22px) -1px;background:var(--메인);color:#fff}
.time-tb td p.day{background:var(--서브)}
.time-tb td.break{background:#fff0cf;color:#222;line-height:1.45;padding:clamp(10px,1vw,20px) 0}
.time-tb .c-day{width:7%}   .time-tb .c-am{width:25%}    .time-tb .c-lunch{width:10.5%}
.time-tb .c-pm1{width:10.5%} .time-tb .c-night{width:15%} .time-tb .c-end{width:7%}

/* ════════════════════════════════════════════════════════════════
   13 · 비용안내
   ════════════════════════════════════════════════════════════════ */
/* 배경 띠 섹션은 클립하지 않습니다 (.fix_bg 가 스스로 클립) */
.cost{position:relative;background:#1d2530;color:#fff}
.cost__inner{background:rgba(29,37,48,.62);z-index:1}
.cost__inner{position:relative;padding-block:clamp(50px,6.25vw,120px);text-align:center}
.cost__eyebrow{display:flex;align-items:center;justify-content:center;gap:clamp(8px,0.94vw,18px);
  font-size:var(--fs-64);font-weight:700}
.cost__ico{flex:none;width:clamp(34px,5.63vw,108px)}
.cost__ico svg,.cost__list svg{width:100%;height:auto;display:block}
.cost__ico circle,.cost__list circle{fill:var(--메인)}
.cost__title{margin-top:clamp(16px,2.1vw,40px);font-size:var(--fs-64);font-weight:500;line-height:1.35}
.cost__lead{margin-top:clamp(14px,1.7vw,32px);font-size:var(--fs-40);line-height:1.5}
.cost__box{margin-top:clamp(26px,3.4vw,66px);
  padding:clamp(26px,3.6vw,70px) clamp(16px,2.6vw,50px) clamp(30px,4.2vw,80px)}
.cost__boxtitle{font-size:var(--fs-50);font-weight:700}
.cost__boxtitle em{color:var(--서브)}
.cost__list{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(10px,1.7vw,33px) clamp(14px,2.4vw,46px);margin-top:clamp(18px,2.4vw,46px);
  font-size:var(--fs-35);line-height:1.4}
.cost__list li{display:flex;align-items:center;gap:clamp(6px,0.63vw,12px)}
.cost__break{flex:0 0 100%;height:0;margin:0}
.cost__list svg{flex:none;width:clamp(20px,2.45vw,47px)}
.cost__cta{margin-top:clamp(22px,2.9vw,56px)}
.cost__cta a{display:inline-flex;align-items:center;justify-content:center;
  padding-top:.18em;
  min-width:min(100%,689px);min-height:clamp(52px,5.52vw,106px);padding:0 clamp(20px,2vw,38px);
  border-radius:999px;background:var(--서브);color:#fff;font-size:var(--fs-40);font-weight:700;
  line-height:1.2;transition:filter .15s ease}
.cost__cta a:hover{filter:brightness(1.06)}
.cost__note{margin-top:clamp(18px,2.2vw,42px);font-size:var(--fs-28);line-height:1.5;opacity:.92}

/* ════════════════════════════════════════════════════════════════
   14 · FAQ
   ════════════════════════════════════════════════════════════════ */
.round-badge{display:inline-grid;place-items:center;width:clamp(84px,11.4vw,219px);aspect-ratio:1;
  border-radius:50%;background:var(--메인);color:#fff;font-weight:700;
  font-size:calc(clamp(24px,3.1vw,60px) * var(--fs-k));letter-spacing:-0.02em;padding-top:.13em;
  margin-bottom:clamp(14px,1.7vw,32px)}
.round-badge--long{
  width:clamp(210px,24vw,460px);
  height: clamp(84px,1.4vw,219px);
  aspect-ratio:auto;
  border-radius: 100px;
  font-size:calc(clamp(16px,2.09vw,40px) * var(--fs-k));
  letter-spacing:-0.02em
  }
.faq{margin-top:clamp(26px,3.4vw,66px);font-family:'GmarketSans',sans-serif;color:#000}
.faq-item{border-top:1px solid #000}
.faq-item:last-child{border-bottom:1px solid #000}
.faq-q{position:relative;padding:clamp(16px,1.72vw,33px) clamp(44px,5.2vw,100px)
  clamp(20px,2.24vw,43px) clamp(12px,1.46vw,28px);
  font-weight:700;font-size:var(--fs-40);line-height:1.38;cursor:pointer;user-select:none}
.faq-q:hover{color:var(--메인)}
.faq-mark{position:absolute;right:clamp(6px,1.1vw,21px);top:50%;
  width:clamp(16px,1.3vw,25px);aspect-ratio:1;transform:translateY(-50%)}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;background:var(--메인)}
.faq-mark::before{left:0;top:34%;width:100%;height:32%}
.faq-mark::after{left:34%;top:0;width:32%;height:100%;transition:opacity .18s ease}
.faq-item.is-open .faq-mark::after{opacity:0}
.faq-a{display:grid;grid-template-rows:0fr;opacity:0;
  transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1),opacity .4s ease}
.faq-a__in{overflow:hidden;
  padding:0 clamp(12px,2.1vw,40px) 0 clamp(20px,3.96vw,76px);
  font-weight:500;font-size:var(--fs-35);line-height:1.29}
.faq-item.is-open .faq-a{grid-template-rows:1fr;opacity:1}
.faq-item.is-open .faq-a__in{padding-bottom:clamp(28px,5.2vw,100px)}
.faq-q{transition:color .18s ease}

/* ════════════════════════════════════════════════════════════════
   15 · 오시는 길 · 상담 신청
   ════════════════════════════════════════════════════════════════ */
.c-main{color:var(--메인)}
.contact__addr{margin-top:clamp(14px,1.9vw,36px);font-size:var(--fs-35);line-height:1.5}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(10px,2.7vw,52px);margin-top:clamp(20px,2.6vw,50px)}
.cta-btn{display:flex;align-items:center;justify-content:center;gap:clamp(8px,0.73vw,14px);
  width:clamp(150px,19.3vw,370px);height:clamp(48px,4.11vw,79px);border-radius:999px;
  font-family:'Inter','GmarketSans',sans-serif;font-weight:700;font-size:calc(clamp(14px,1.57vw,30px) * var(--fs-k));
  line-height:1;white-space:nowrap;transition:filter .15s ease,transform .15s ease}
.cta-btn:hover{filter:brightness(1.05);transform:translateY(-2px)}
.cta-btn--tel{background:#6e78bf;color:#fff}
.cta-btn--kakao{background:#fae80c;color:#3b2c30}
.cta-btn--home{background:var(--메인);color:#fff}
.cta-ico{flex:none;width:clamp(18px,1.98vw,38px);height:clamp(18px,1.98vw,38px);fill:currentColor}
/* 카카오 아이콘은 말풍선이라 같은 크기면 작아 보여 조금 키운다 */
.cta-ico--kakao{width:clamp(23px,2.5vw,48px);height:clamp(23px,2.5vw,48px);margin-block:-.35em}
.cta-btn span{transform:translateY(-.01em)}  /* 글자 잉크 상하 중앙 보정 (실측값) */

.contact__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3.1vw,60px);
  align-items:stretch;margin-top:clamp(24px,3.4vw,66px);
  border-top:1px solid #c9ccd2;border-bottom:1px solid #c9ccd2;
  padding-block:clamp(28px,3.02vw,58px)}
.map-wrap{position:relative;overflow:hidden;background:#e9e9e9;min-height:clamp(240px,34.7vw,666px)}
.map-box{width:100%;height:100%}
.map-pin{position:relative;padding:clamp(8px,0.63vw,12px) clamp(12px,1.05vw,20px);
  border-radius:clamp(8px,0.63vw,12px);background:var(--메인);color:#fff;text-align:center;
  font-family:'GmarketSans',sans-serif;white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.map-pin b{display:block;font-weight:700;font-size:calc(clamp(14px,0.94vw,18px) * var(--fs-k));line-height:1.25}
.map-pin span{display:block;margin-top:.2em;font-weight:500;font-size:calc(clamp(11px,0.68vw,13px) * var(--fs-k));opacity:.88}
.map-pin i{position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);
  border:7px solid transparent;border-top-color:var(--메인);border-bottom:0}
.map-link{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;
  gap:8px;height:clamp(36px,2.4vw,46px);padding:0 clamp(14px,1.15vw,22px);border-radius:999px;
  background:var(--메인);color:#fff;font-weight:700;font-size:calc(clamp(13px,1.05vw,20px) * var(--fs-k));line-height:1;
  box-shadow:0 4px 14px rgba(0,0,0,.25)}
.map-link svg{width:1em;height:1em;fill:currentColor}

.cform{display:flex;flex-direction:column;gap:0}
.cform>*+*{margin-top:clamp(16px,1.72vw,33px)}
.cform__row{display:grid;grid-template-columns:clamp(56px,5.94vw,114px) 1fr;align-items:center;
  gap:0}
.cform__row--col{grid-template-columns:1fr;row-gap:clamp(12px,1.4vw,27px)}
.cform{font-family:'Inter','GmarketSans',sans-serif}
.cform__row>label{font-size:var(--fs-30);font-weight:700;line-height:1.2}
.cform input[type=text],.cform input[type=tel],.cform textarea{
  width:100%;border:1px solid #000;background:#fff;padding:clamp(8px,0.83vw,16px) clamp(10px,1.05vw,20px);
  font-family:inherit;font-size:var(--fs-30);font-weight:400;color:#000;border-radius:0}
.cform input[type=text],.cform input[type=tel]{height:clamp(42px,3.07vw,59px);padding-block:0}
.cform textarea{min-height:clamp(120px,9.9vw,190px);resize:vertical;line-height:1.5}
.cform ::placeholder{color:#989898;font-weight:300}
.cform textarea::placeholder{font-size:calc(clamp(13px,1.15vw,22px) * var(--fs-k))}
.cform__agree{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(8px,0.94vw,18px);
  align-items:start;
  font-size:calc(clamp(12px,0.94vw,18px) * var(--fs-k));
  /* font-weight:300; */
  line-height:1.444;
  cursor:pointer;
  margin-top:clamp(12px,1.25vw,24px)
  }
.cform__agree input{width:clamp(18px,1.3vw,25px);height:clamp(18px,1.2vw,23px);margin-top:.15em;
  accent-color:var(--메인)}
.form-submit{margin-top:clamp(18px,1.77vw,34px);width:100%;height:clamp(46px,2.86vw,55px);
  padding-top:.18em;
  display:flex;align-items:center;justify-content:center;border:0;border-radius:999px;
  background:var(--메인);color:#fff;font-family:'GmarketSans',sans-serif;font-weight:700;
  font-size:calc(clamp(15px,1.25vw,24px) * var(--fs-k));line-height:1;transition:filter .15s ease}
.form-submit:hover{filter:brightness(1.08)}
.form-submit:disabled{opacity:.55;cursor:default}

/* ════════════════════════════════════════════════════════════════
   16 · 푸터
   ════════════════════════════════════════════════════════════════ */
.foot{background:#2b2b2b;color:#fff;text-align:center;
  padding:clamp(30px,2.76vw,53px) var(--gutter);font-family:'Pretendard','GmarketSans',sans-serif;
  font-size:var(--fs-24);line-height:1.5}
.foot p+p{margin-top:.6em}



/* ════════════════════════════════════════════════════════════════
   카드 테두리 — 원본 피그마와 동일한 '엇갈린 선(#)' 형태
   · 가로선 : 카드 폭 전체, 위·아래 끝에서 25px 안쪽
   · 세로선 : 카드 높이 전체, 좌·우 끝에서 22px 안쪽
   · 색 : 1px 순수 검정 (원본 a003/a062/a138/a035/a071/a006/a017 모두 stroke:black)
   ════════════════════════════════════════════════════════════════ */
.why-card,.dev-card,.case,.need,.invis__box,.cost__box{
  --lh:clamp(12px,1.3vw,25px);
  --lv:clamp(10px,1.15vw,22px);
  --lc:#000;
  position:relative;border:0}
/* 선은 사진 위에 그려져야 하므로 오버레이(가상요소)로 올립니다 */
.why-card::before,.dev-card::before,.case::before,
.need::before,.invis__box::before,.cost__box::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:linear-gradient(var(--lc),var(--lc)),linear-gradient(var(--lc),var(--lc)),
                   linear-gradient(var(--lc),var(--lc)),linear-gradient(var(--lc),var(--lc));
  background-repeat:no-repeat;
  background-size:100% 1px,100% 1px,1px 100%,1px 100%;
  background-position:0 var(--lh),0 calc(100% - var(--lh)),
                      var(--lv) 0,calc(100% - var(--lv)) 0}
/* 어두운 배경 위(비용안내)에서는 흰 선 */
.cost__box{--lc:rgba(255,255,255,.55)}
/* 선이 안쪽으로 들어온 만큼 위·아래 여백을 더해 글자 간격을 유지 */
.why-card{padding-top:calc(clamp(78px,8.1vw,156px) + var(--lh));
  padding-bottom:calc(clamp(30px,3.6vw,70px) + var(--lh))}
.why-card__photo{top:var(--lh)}
.dev-card{padding:var(--lh) var(--lv) calc(clamp(20px,2.4vw,46px) + var(--lh))}
.case{padding:var(--lh) var(--lv) calc(clamp(18px,2.1vw,40px) + var(--lh))}
.need{padding-top:calc(clamp(26px,3.2vw,62px) + var(--lh));
  padding-bottom:calc(clamp(30px,3.6vw,70px) + var(--lh))}
.invis__box{padding-top:calc(clamp(30px,4.2vw,80px) + var(--lh));
  padding-bottom:calc(clamp(34px,4.6vw,88px) + var(--lh))}
.cost__box{padding-top:calc(clamp(26px,3.6vw,70px) + var(--lh));
  padding-bottom:calc(clamp(30px,4.2vw,80px) + var(--lh))}

/* ════════════════════════════════════════════════════════════════
   모바일 (768px 미만)
   ════════════════════════════════════════════════════════════════ */
@media (max-width:767px){
  :root{--sec-y:52px}

  /* 상단바 : 햄버거 · 가운데 로고 · 전화버튼 (상담신청은 하단 고정바로) */
  .lnav__toggle{display:block}
  .lnav__tel{display:grid;width:40px;background:var(--메인)}
  .lnav__tel svg{fill:#fff}
  .lnav__cta{display:none}
  .lnav__logo{position:absolute;left:50%;transform:translateX(-50%)}
  .lnav__logo img{width:132px}
  .lnav__in{position:relative;gap:8px;justify-content:space-between}

  /* 하단 고정바 */
  body{padding-bottom:calc(47px + env(safe-area-inset-bottom))}
  .fixbar{position:fixed;left:0;right:0;bottom:0;z-index:90;
    display:grid;grid-template-columns:repeat(3,1fr);background:#20242b;
    padding-bottom:env(safe-area-inset-bottom)}
  .fixbar a{display:flex;align-items:center;justify-content:center;gap:6px;
    padding:15px 6px;padding-top:calc(15px + .09em);color:#fff;
    font-size:calc(14px * var(--fs-k));font-weight:700;line-height:1.1}
  .fixbar a+a{box-shadow:inset 1px 0 0 rgba(255,255,255,.18)}
  .fixbar a.is-hi{background:var(--메인)}
  .fixbar svg{flex:none;width:16px;height:16px;fill:currentColor}
  /* 하단 고정바(47px)에 가리지 않게 그 위로 */
  .gotop{right:14px;bottom:calc(47px + env(safe-area-inset-bottom) + 14px);
    box-shadow:0 4px 14px rgba(0,0,0,.28)}
  .lnav__menu{position:absolute;left:0;right:0;top:100%;flex-direction:column;
    gap:0;background:#fff;border-bottom:1px solid #e3e3e6;
    box-shadow:0 12px 24px rgba(0,0,0,.08);
    max-height:0;overflow:hidden;transition:max-height .3s ease}
  .lnav.is-open .lnav__menu{max-height:70vh;overflow-y:auto}
  .lnav__menu li+li{border-top:1px solid #f0f0f2}
  .lnav__menu a{padding:14px var(--gutter);font-size:15px}
  .lnav__menu a.is-on::after{display:none}
  .lnav__cta{height:34px;font-size:13px;padding:0 12px;padding-top:.18em}

  /* 모바일은 패럴랙스 없이 정지 — 오버스캔·이동량 모두 제거 */
  .fix_bg::before{top:0;bottom:0;transform:none;will-change:auto}

  /* 히어로 : 사진 위 · 글 아래로 분리 */
  .hero{display:block;height:auto;padding-top:104vw;background:#f3f5f7}
  .hero__fix{top:0;bottom:auto;height:104vw;
    background-image:url('../assets/hero-model-m.jpg') !important;
    background-position:center top;background-size:cover}
  .hero__box{position:static;transform:none;margin-left:0;width:100%;
    padding:26px var(--gutter) 34px;background:#f3f5f7}
  .hero__title{line-height:1.32}
  .hero__rule{width:82%}
  .hero__list{font-size:calc(14px * var(--fs-k));gap:6px}

  /* 카드 : 1열 */
  .why__grid{grid-template-columns:1fr;row-gap:74px;margin-top:64px}
  .why-card,.dev-card,.case,.need,.invis__box,.cost__box{--lh:10px;--lv:8px}
  .why-card{padding:74px 20px 26px}
  .why-card__q{font-size:calc(19px * var(--fs-k))}
  .why-card__a{font-size:calc(15px * var(--fs-k));gap:8px}

  .head__eyebrow>span:not(.head__badge){font-size:calc(16px * var(--fs-k))}
  .head__title{font-size:calc(24px * var(--fs-k));line-height:1.4}
  .lead{font-size:calc(15px * var(--fs-k));margin-top:14px}
  .pc-br{display:none}
  .mark{font-size:calc(19px * var(--fs-k));margin-top:40px}

  /* 배너 : 세로로 조금 더 높게 */
  .banner{aspect-ratio:auto;min-height:270px}
  .banner__inner{padding:20px}
  .banner__sub{font-size:calc(16px * var(--fs-k))}
  .banner__title{font-size:calc(24px * var(--fs-k))}
  .banner__dots{gap:16px;bottom:-16px}

  /* 비교 : 세로 스택 · VS 는 두 사진 사이 */
  .cmp{display:flex;flex-direction:column;gap:26px;margin-top:30px}
  .cmp__item{order:1}
  .cmp__vs{order:2;position:relative;left:auto;top:auto;transform:none;margin:0 auto;width:64px}
  .cmp__item--adult{order:3}
  .cmp__list{margin-top:14px;font-size:calc(15px * var(--fs-k));line-height:1.85}
  .cmp__dept{font-size:calc(17px * var(--fs-k))}
  .cmp__photo figcaption{font-size:calc(16px * var(--fs-k));bottom:8px}

  /* 05 · 2인 협진 */
  .step{margin-top:26px}
  .duo__photos{grid-template-columns:1fr 1fr}
  .duo__photos img{aspect-ratio:5/8}          /* 두 원장님 사진을 반씩 */
  .duo__inner{padding:62px 20px 20px;justify-content:flex-start}
  .duo__title{font-size:calc(20px * var(--fs-k));line-height:1.45}
  .duo__docs{position:static;transform:none;width:100%;margin-top:auto}
  .duo__name{font-size:calc(17px * var(--fs-k))}
  .duo__role{font-size:calc(12px * var(--fs-k))}
  .duo__desc{margin-top:8px;font-size:calc(13px * var(--fs-k))}
  .duo__docs{gap:14px}
  .cert{flex-direction:column;gap:16px}
  .cert__txt{font-size:calc(17px * var(--fs-k))}
  .cert__logo-sym{width:44px}
  .cert__logo-txt{width:110px}
  .need{margin-top:28px;padding:22px 18px 26px}
  .need__title{font-size:calc(18px * var(--fs-k));gap:10px}
  .need__list{margin-top:16px;font-size:calc(15px * var(--fs-k));line-height:1.75}
  .need__list li{padding-left:14px}
  .need__note{margin-top:18px;font-size:calc(15px * var(--fs-k));line-height:1.55}

  /* 06 · 디지털 장비 */
  .dev__grid{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .dev-card{padding:var(--lh) var(--lv) 20px}
  .dev-card__name{font-size:calc(19px * var(--fs-k));margin-top:12px}
  .dev-card__dl{font-size:calc(14px * var(--fs-k));margin-top:10px}

  /* 07 · 통합 분석 */
  .sim__pills{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .sim__pills li{aspect-ratio:auto;padding:14px 10px;border-radius:16px}
  .sim__pills b{font-size:calc(17px * var(--fs-k))}
  .sim__pills span{font-size:calc(14px * var(--fs-k))}
  .sim__join{display:none}
  .sim__down--mo{display:block}
  .sim__down{width:22px;margin-top:10px}
  .sim__cap--top{font-size:calc(17px * var(--fs-k));top:10px}
  .sim__cap--left,.sim__cap--right{font-size:calc(13px * var(--fs-k));bottom:12px}
  .sim__cap--left{left:12px}
  .sim__cap--right{right:12px}
  .sim__note{font-size:calc(14px * var(--fs-k));margin-top:16px;line-height:1.65}

  /* 08 · 비교표 */
  .kinds__scroll{margin-top:22px}
  .kinds__tb{font-size:calc(13px * var(--fs-k));min-width:620px}
  .kinds__hint{display:block;margin-top:8px;text-align:right;font-size:calc(12px * var(--fs-k));color:#8b8f97}
  .kinds__note{margin-top:18px;font-size:calc(14px * var(--fs-k))}

  /* 09 · 인비절라인 */
  .invis__box{padding:26px 16px 30px}
  .invis__logos{flex-wrap:wrap;gap:8px}
  .invis__logo1{width:150px}
  .invis__logo2{width:135px}
  .invis__aligner{width:64px}
  .invis__title{font-size:calc(18px * var(--fs-k));margin-top:16px}
  .invis__desc{font-size:calc(14px * var(--fs-k));margin-top:14px;line-height:1.7}

  /* 10 · 치료 전후 */
  .cases__list{grid-template-columns:1fr;row-gap:16px;margin-top:20px}
  .case{padding:var(--lh) var(--lv) 16px}
  .case__title{font-size:calc(16px * var(--fs-k));margin-top:10px}
  .case__title span{font-size:calc(13px * var(--fs-k))}
  .case__spec{font-size:calc(14px * var(--fs-k));margin-top:10px;column-gap:12px}
  .case__spec dt{font-size:calc(12px * var(--fs-k))}

  /* 11 · 5단계 */
  .flow__title{font-size:calc(22px * var(--fs-k));margin-top:10px}
  .flow__circles{grid-template-columns:repeat(2,1fr);gap:16px 14px;margin-top:24px}
  .flow__circles li:last-child{grid-column:1/-1;width:50%;margin-inline:auto}
  .flow__circles span{font-size:calc(15px * var(--fs-k));margin-top:8px}
  .flow__list{font-size:calc(14px * var(--fs-k));margin-top:24px;gap:8px}
  .flow__list li{padding-left:26px}
  .flow__list li::before{width:22px}

  /* 12 · 진료 편의 + 진료시간 */
  .life__grid{grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .life-card{padding:18px 12px;border-radius:12px}
  .life-card h3{font-size:calc(15px * var(--fs-k))}
  .life-card p{font-size:calc(13px * var(--fs-k));margin-top:8px;line-height:1.5}
  .time-panel{margin-top:22px;padding:18px 14px}
  .time-tb{min-width:560px}

  /* 13 · 비용안내 */
  .cost__eyebrow{font-size:calc(20px * var(--fs-k));gap:8px}
  .cost__ico{width:38px}
  .cost__title{font-size:calc(21px * var(--fs-k));margin-top:12px}
  .cost__lead{font-size:calc(15px * var(--fs-k));margin-top:12px;line-height:1.6}
  .cost__box{margin-top:22px;padding:22px 14px 26px}
  .cost__boxtitle{font-size:calc(19px * var(--fs-k))}
  .cost__list{font-size:calc(14px * var(--fs-k));gap:10px 14px;margin-top:16px}
  .cost__list svg{width:18px}
  .cost__cta a{font-size:calc(15px * var(--fs-k));min-height:50px;width:100%}
  .cost__note{font-size:calc(13px * var(--fs-k));margin-top:16px;line-height:1.6}

  /* 14 · FAQ */
  .round-badge--long{width:auto;height:56px;padding-inline:24px;
    font-size:calc(24px * var(--fs-k));margin-bottom:14px}
  .faq{margin-top:22px}
  .faq-q{font-size:calc(16px * var(--fs-k));padding:14px 36px 16px 4px}
  .faq-a__in{font-size:calc(14px * var(--fs-k));padding:0 4px 0 4px;line-height:1.55}
  .faq-item.is-open .faq-a__in{padding-bottom:20px}

  /* 15 · 오시는 길 */
  .contact__addr{font-size:calc(14px * var(--fs-k));margin-top:12px}
  .cta-row{gap:8px;margin-top:18px}
  .cta-btn{width:calc(50% - 4px);font-size:calc(14px * var(--fs-k));height:46px}
  .cta-btn--home{width:100%}
  .contact__body{grid-template-columns:1fr;gap:20px;margin-top:22px;padding-block:28px}
  .map-wrap{aspect-ratio:4/3;order:2}
  .cform{order:1}   /* 모바일은 상담폼을 지도보다 먼저 */
  .cform__row>label{font-size:calc(15px * var(--fs-k))}
  .cform input[type=text],.cform input[type=tel],.cform textarea{font-size:calc(15px * var(--fs-k))}
  .cform__row{grid-template-columns:56px 1fr;gap:0}
  .cform__row--col{grid-template-columns:1fr;row-gap:14px}
  .cform__agree{font-size:calc(12px * var(--fs-k))}
  .form-submit{font-size:calc(15px * var(--fs-k));height:46px}

  /* 16 · 푸터 */
  .foot{font-size:calc(12px * var(--fs-k));padding:24px 20px}
}

/* ──── 아이콘 그룹 (index.html 에서 복사: fg501) ──── */
.fg502{width:100%;height:100%}