/* ============================================================
   두봄한의원 — 공용 디자인 시스템
   ============================================================ */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root{
  /* --- Color --- */
  --bg:         #F7F7F7;
  --bg-alt:     #FFFFFF;
  --bg-warm:    #F1EDE8;   /* REPO 성형 */
  --bg-cool:    #ECEFEE;   /* 통증·재활·난치 */
  --ink:        #323232;
  --ink-strong: #1A1A1A;
  --ink-mute:   #8A8A8A;
  --line:       #E2E2E2;
  --point:      #B24B2E;
  --point-soft: #F3E4DE;

  /* --- Type --- */
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Malgun Gothic", sans-serif;
  --fs-display: clamp(28px, 4.2vw, 54px);
  --fs-h2:      clamp(23px, 3vw, 40px);
  --fs-h3:      clamp(18px, 1.9vw, 25px);
  --fs-body:    clamp(14px, 1.1vw, 16.5px);
  --fs-eyebrow: 12px;

  /* --- Space --- */
  --s-1:8px; --s-2:16px; --s-3:24px; --s-4:40px;
  --s-5:64px; --s-6:96px; --s-7:140px; --s-8:200px; --s-9:270px;

  --maxw: 1320px;
  --pad: clamp(20px, 4.4vw, 56px);
  --radius: 20px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --hdr-h: 68px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:var(--fs-body);
  line-height:1.75;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
sup{font-size:.62em;vertical-align:super}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.wrap-narrow{max-width:920px;margin:0 auto;padding-inline:var(--pad)}
.spacer{height:var(--s-7)}
.spacer-lg{height:var(--s-9)}
.eyebrow{font-size:var(--fs-eyebrow);letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:500}
.h2{font-size:var(--fs-h2);font-weight:600;line-height:1.35;color:var(--ink-strong);letter-spacing:-.035em}
.h3{font-size:var(--fs-h3);font-weight:600;line-height:1.45;color:var(--ink-strong);letter-spacing:-.02em}
.lede{color:#5A5A5A;line-height:1.9}
.mute{color:var(--ink-mute)}
.fn{font-size:11.5px;color:var(--ink-mute);line-height:1.75}
.center{text-align:center}

.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}
}

/* ============================================================
   Header
   ============================================================ */
.hdr{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(247,247,247,.84);
  backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s}
.hdr.scrolled{border-bottom-color:var(--line)}
.hdr-in{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);height:var(--hdr-h);
  display:flex;align-items:center;justify-content:space-between}
.logo{font-size:19px;font-weight:700;letter-spacing:-.04em;color:var(--ink-strong)}
.logo span{font-size:11px;font-weight:500;letter-spacing:.18em;color:var(--ink-mute);margin-left:9px}
.hdr{position:fixed}
.gnb{display:flex;gap:32px;font-size:14px;font-weight:500;height:100%}
.gnb-i{display:flex;align-items:center;height:100%}
.gnb-i > a{color:#4A4A4A;transition:color .2s;display:inline-flex;align-items:center;gap:6px}
.gnb-i > a:hover,.gnb-i > a[aria-current]{color:var(--point)}
.gnb-i.has-menu > a::after{content:"";width:5px;height:5px;border-right:1.3px solid currentColor;
  border-bottom:1.3px solid currentColor;transform:rotate(45deg) translateY(-1px);
  opacity:.55;transition:transform .25s var(--ease)}
.gnb-i.has-menu:hover > a{color:var(--point)}
.gnb-i.has-menu:hover > a::after{transform:rotate(225deg) translateY(-2px)}

/* ---- 메가 메뉴 ---- */
.mega{position:absolute;left:0;right:0;top:100%;
  background:var(--bg-alt);border-top:1px solid var(--line);
  box-shadow:0 22px 44px -22px rgba(0,0,0,.16);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.gnb-i.has-menu:hover .mega,
.gnb-i.has-menu:focus-within .mega{opacity:1;visibility:visible;transform:none}
.mega.warm{background:#FBF9F7}
.mega.cool{background:#F8FAF9}
.mega-in{max-width:var(--maxw);margin:0 auto;padding:var(--s-4) var(--pad) var(--s-5)}
.mega-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
  padding-bottom:22px;margin-bottom:26px;border-bottom:1px solid rgba(0,0,0,.08)}
.mg-en{font-size:11px;letter-spacing:.2em;color:var(--ink-mute);font-weight:600}
.mg-ttl{margin-top:9px;font-size:21px;font-weight:700;letter-spacing:-.035em;color:var(--ink-strong)}
.mg-ttl span{display:block;margin-top:5px;font-size:12.5px;font-weight:500;
  letter-spacing:0;color:var(--ink-mute)}
.mg-all{font-size:13.5px;font-weight:600;color:var(--point);white-space:nowrap}

.mega-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:1180px){.mega-grid{grid-template-columns:repeat(3,1fr)}}
.mg-item{display:flex;flex-direction:column;gap:16px;padding:18px 16px;border-radius:12px;
  background:rgba(0,0,0,.022);transition:background .22s var(--ease),transform .22s var(--ease)}
.mg-item:hover{background:#fff;transform:translateY(-2px)}
.mg-item .ico{width:26px;height:26px;color:var(--point);opacity:.9}
.mg-nm{font-size:13.5px;font-weight:600;line-height:1.45;letter-spacing:-.025em;
  color:var(--ink-strong)}
.mg-item:hover .mg-nm{color:var(--point)}
.hdr-cta{display:inline-flex;align-items:center;height:38px;padding:0 20px;border-radius:999px;
  background:var(--point);color:#fff;font-size:13.5px;font-weight:600;transition:opacity .2s}
.hdr-cta:hover{opacity:.86}
.burger{display:none;width:40px;height:40px;border:0;background:none;cursor:pointer;padding:10px}
.burger i{display:block;height:1.5px;background:var(--ink-strong);margin:5px 0}
@media(max-width:960px){.gnb,.hdr-cta{display:none}.burger{display:block}}

/* 모바일 메뉴 */
.mnav{position:fixed;inset:var(--hdr-h) 0 0 0;z-index:99;background:var(--bg);
  padding:var(--s-4) var(--pad);overflow-y:auto;display:none}
.mnav.open{display:block}
.mnav h4{font-size:11px;letter-spacing:.2em;color:var(--ink-mute);margin-bottom:12px;font-weight:600}
.mnav a{display:block;padding:11px 0;border-bottom:1px solid var(--line);
  font-size:15.5px;font-weight:500;color:#3A3A3A}
.mnav .grp{margin-bottom:var(--s-4)}

/* ============================================================
   Opening — 2 Pillars
   ============================================================ */
.opening{padding-top:calc(var(--hdr-h) + var(--s-5))}
.opening-head{text-align:center;margin-bottom:var(--s-5)}
.opening-head h1{margin-top:16px;font-size:clamp(22px,2.9vw,38px);font-weight:600;
  line-height:1.35;letter-spacing:-.04em;color:var(--ink-strong)}
.opening-head .lede{margin-top:14px;font-size:clamp(13.5px,1.1vw,16px)}

.pillars{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,1.8vw,26px);align-items:stretch}
@media(max-width:900px){.pillars{grid-template-columns:1fr;gap:20px}}

.pillar{border-radius:var(--radius);padding:clamp(26px,2.9vw,46px);
  display:flex;flex-direction:column}
.pillar.warm{background:var(--bg-warm)}
.pillar.cool{background:var(--bg-cool)}

/* 상단부 : 텍스트 + 이미지 (성형=이미지 우측 / 통증=이미지 좌측) */
.p-top{display:grid;gap:clamp(18px,2vw,30px);align-items:start}
.pillar.warm .p-top{grid-template-columns:1fr .68fr}   /* 텍스트 → 이미지 */
.pillar.cool .p-top{grid-template-columns:.68fr 1fr}   /* 이미지 → 텍스트 */
@media(max-width:900px){
  .pillar.warm .p-top,.pillar.cool .p-top{grid-template-columns:1fr}
  .pillar.cool .p-media{order:2}
}

.p-tag{font-size:var(--fs-eyebrow);letter-spacing:.2em;color:var(--ink-mute);font-weight:600}
.pillar h2{margin-top:var(--s-2);font-size:clamp(22px,2.4vw,32px);font-weight:700;
  letter-spacing:-.035em;line-height:1.3;color:var(--ink-strong)}
.pillar h2 small{display:block;font-size:12.5px;font-weight:500;letter-spacing:0;
  color:var(--ink-mute);margin-top:8px}
.p-copy{margin-top:var(--s-3);font-size:clamp(14.5px,1.25vw,18px);line-height:1.8;
  font-weight:500;color:#3E3E3E;letter-spacing:-.02em}
.p-copy em{font-style:normal;color:var(--point);font-weight:700}

.p-media{border-radius:14px;aspect-ratio:9/16;display:grid;place-items:center;
  font-size:10.5px;letter-spacing:.18em;color:#B0AAA3;overflow:hidden}
.pillar.warm .p-media{background:radial-gradient(120% 90% at 30% 20%,#fff 0%,rgba(255,255,255,0) 62%),
  linear-gradient(140deg,#EDE7E1,#E2DAD1)}
.pillar.cool .p-media{background:radial-gradient(120% 90% at 30% 20%,#fff 0%,rgba(255,255,255,0) 62%),
  linear-gradient(140deg,#E4E8E7,#D5DCDA)}
@media(max-width:900px){.p-media{aspect-ratio:4/5;max-height:460px}}

/* 진료과목 2 x 3 픽토그램 박스 */
.p-grid{margin-top:var(--s-5);display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(8px,.85vw,12px)}
.p-item{background:rgba(255,255,255,.62);border-radius:14px;
  padding:clamp(18px,1.7vw,24px);display:flex;flex-direction:column;
  min-height:clamp(126px,10vw,150px);
  transition:background .25s var(--ease),transform .25s var(--ease)}
.p-item:hover{background:#fff;transform:translateY(-3px)}
.p-item-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.p-item .ico{width:clamp(26px,2.2vw,30px);height:clamp(26px,2.2vw,30px);
  color:var(--point);opacity:.9;flex:none}
.p-item .no{font-size:10.5px;letter-spacing:.14em;color:var(--ink-mute);
  font-weight:600;font-variant-numeric:tabular-nums;padding-top:3px}
.p-item .nm{margin-top:auto;padding-top:18px;font-size:clamp(14px,1.15vw,15.5px);
  font-weight:600;line-height:1.45;letter-spacing:-.025em;color:var(--ink-strong)}
.p-item:hover .nm{color:var(--point)}
@media(max-width:400px){.p-item{min-height:118px;padding:16px}}

.p-list{margin-top:var(--s-5);border-top:1px solid rgba(0,0,0,.09)}
.p-list li a{display:flex;align-items:center;gap:14px;padding:15px 2px;
  border-bottom:1px solid rgba(0,0,0,.09);font-size:15px;font-weight:500;color:#3A3A3A;
  transition:padding-left .25s var(--ease),color .25s}
.p-list li a:hover{padding-left:10px;color:var(--point)}
.p-list .num{font-size:11px;color:var(--ink-mute);font-variant-numeric:tabular-nums;min-width:18px}
.p-list .arw{margin-left:auto;font-size:15px;color:#B5B5B5;transition:transform .25s var(--ease)}
.p-list li a:hover .arw{transform:translateX(4px)}
.p-more{margin-top:var(--s-4);display:inline-flex;align-items:center;gap:10px;
  font-size:14px;font-weight:600;color:var(--point);align-self:flex-start}
.p-more span{transition:transform .25s var(--ease)}
.p-more:hover span{transform:translateX(5px)}

/* ============================================================
   Feature / Steps
   ============================================================ */
.feature{text-align:center}
.feature .lede{margin:var(--s-3) auto 0;max-width:620px}
.feature-visual{margin-top:var(--s-6);height:clamp(260px,42vw,480px);border-radius:var(--radius);
  background:linear-gradient(160deg,#E9E5E0,#DCDFDD);display:grid;place-items:center;
  color:#ADA8A2;font-size:12px;letter-spacing:.2em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-top:var(--s-6)}
@media(max-width:800px){.steps{grid-template-columns:1fr}}
.step{background:var(--bg-alt);border-radius:16px;padding:clamp(24px,2.5vw,34px);text-align:left}
.step .n{font-size:12px;letter-spacing:.2em;color:var(--point);font-weight:700}
.step h4{margin:14px 0 10px;font-size:18px;font-weight:600;letter-spacing:-.02em;color:var(--ink-strong)}
.step p{font-size:14.5px;color:#616161;line-height:1.8}

/* ============================================================
   Doctor
   ============================================================ */
.doctor{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(24px,4vw,72px);align-items:center}
@media(max-width:900px){.doctor{grid-template-columns:1fr}}
.doctor-img{height:clamp(320px,40vw,500px);border-radius:var(--radius);
  background:linear-gradient(150deg,#E7E3DE,#D9DDDB);display:grid;place-items:center;
  color:#ADA8A2;font-size:11px;letter-spacing:.2em}
.creds{margin-top:var(--s-4);border-top:1px solid var(--line)}
.creds li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:#4E4E4E;display:flex;gap:14px}
.creds li b{font-weight:600;color:var(--ink-strong);min-width:92px;font-size:13px}

/* ============================================================
   Info
   ============================================================ */
.info{background:#EFEFEF;border-radius:var(--radius);padding:clamp(28px,3.6vw,60px);
  display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,4vw,60px)}
@media(max-width:900px){.info{grid-template-columns:1fr}}
.map-ph{height:clamp(230px,28vw,360px);border-radius:14px;background:#E2E2E2;
  display:grid;place-items:center;color:#A9A9A9;font-size:12px;letter-spacing:.16em}
.hours{margin-top:var(--s-3);border-top:1px solid #DCDCDC}
.hours li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;
  border-bottom:1px solid #DCDCDC;font-size:14.5px}
.hours li span:first-child{color:var(--ink-mute)}
.hours li span:last-child{font-weight:600;color:var(--ink-strong);font-variant-numeric:tabular-nums}
.tel{display:inline-block;margin-top:var(--s-4);font-size:clamp(24px,2.8vw,34px);
  font-weight:700;letter-spacing:-.03em;color:var(--ink-strong)}

/* ============================================================
   CTA / Footer / Dock
   ============================================================ */
.cta{text-align:center}
.btns{margin-top:var(--s-4);display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;height:52px;padding:0 30px;border-radius:999px;
  font-size:15px;font-weight:600;transition:opacity .2s,background .2s}
.btn-p{background:var(--point);color:#fff}
.btn-p:hover{opacity:.86}
.btn-s{background:#E6E6E6;color:var(--ink-strong)}
.btn-s:hover{background:#DCDCDC}

footer{margin-top:var(--s-8);border-top:1px solid var(--line);padding:var(--s-5) 0 130px}
.foot{display:flex;flex-wrap:wrap;gap:var(--s-4);justify-content:space-between}
.foot p{font-size:13px;color:var(--ink-mute);line-height:1.9}
.foot-links{display:flex;gap:22px;font-size:13px;color:#5A5A5A;flex-wrap:wrap}

.dock{position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  grid-template-columns:repeat(3,1fr);background:var(--ink-strong)}
.dock a{padding:14px 0;text-align:center;color:#fff;font-size:12.5px;font-weight:500;
  border-left:1px solid rgba(255,255,255,.14)}
.dock a:first-child{border-left:0}
@media(max-width:960px){.dock{display:grid}}

/* ============================================================
   상세 페이지
   ============================================================ */
.page-head{padding-top:calc(var(--hdr-h) + var(--s-6))}
.crumb{display:flex;gap:9px;font-size:12.5px;color:var(--ink-mute);flex-wrap:wrap}
.crumb a:hover{color:var(--point)}
.crumb i{font-style:normal;color:#C4C4C4}
.page-head h1{margin-top:var(--s-3);font-size:var(--fs-display);font-weight:700;
  line-height:1.25;letter-spacing:-.045em;color:var(--ink-strong)}
.page-head .lede{margin-top:var(--s-3);max-width:660px;font-size:clamp(15px,1.25vw,18px)}
.tagrow{margin-top:var(--s-4);display:flex;gap:8px;flex-wrap:wrap}
.tag{font-size:12.5px;padding:7px 14px;border-radius:999px;background:#EAEAEA;color:#5A5A5A;font-weight:500}
.page-head.warm .tag{background:var(--bg-warm)}
.page-head.cool .tag{background:var(--bg-cool)}

.sec{display:grid;grid-template-columns:.42fr 1fr;gap:clamp(20px,3.4vw,64px);align-items:start}
@media(max-width:820px){.sec{grid-template-columns:1fr;gap:var(--s-3)}}
.sec + .sec{margin-top:var(--s-7)}
.sec-title h2{font-size:var(--fs-h3);font-weight:700;letter-spacing:-.03em;color:var(--ink-strong)}
.sec-title .eyebrow{margin-bottom:12px}
.sec-body p + p{margin-top:var(--s-2)}

.bullets{margin-top:var(--s-2);border-top:1px solid var(--line)}
.bullets li{padding:14px 0;border-bottom:1px solid var(--line);display:flex;gap:14px;
  font-size:15px;color:#454545}
.bullets li b{color:var(--point);font-weight:700;font-size:12.5px;min-width:20px;
  font-variant-numeric:tabular-nums;padding-top:2px}

.faq{margin-top:var(--s-2);border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 2px;font-size:15.5px;font-weight:600;
  color:var(--ink-strong);display:flex;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--ink-mute);font-weight:400;font-size:19px}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 2px 20px;font-size:14.5px;color:#5A5A5A;line-height:1.9}

.siblings{margin-top:var(--s-4);display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.siblings{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.siblings{grid-template-columns:1fr}}
.sib{background:var(--bg-alt);border-radius:14px;padding:20px 22px;display:flex;
  align-items:center;gap:12px;font-size:14.5px;font-weight:500;color:#3A3A3A;
  transition:background .2s,color .2s}
.sib:hover{background:#fff;color:var(--point)}
.sib .arw{margin-left:auto;color:#C0C0C0}

/* 상세 페이지 하단 히어로 */
.detail-hero{margin-top:var(--s-8);height:clamp(300px,50vw,600px);border-radius:var(--radius);
  display:grid;place-items:center;color:#B0AAA3;font-size:12px;letter-spacing:.2em;overflow:hidden}
.detail-hero.warm{background:radial-gradient(110% 80% at 28% 22%,#fff 0%,rgba(255,255,255,0) 60%),
  linear-gradient(140deg,#EDE7E1,#E0D7CD)}
.detail-hero.cool{background:radial-gradient(110% 80% at 28% 22%,#fff 0%,rgba(255,255,255,0) 60%),
  linear-gradient(140deg,#E4E8E7,#D3DBD8)}

/* 카테고리 허브 */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
@media(max-width:900px){.hub-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.hub-grid{grid-template-columns:1fr}}
.hub-card{border-radius:16px;padding:clamp(22px,2.2vw,30px);display:flex;flex-direction:column;
  min-height:230px;transition:transform .3s var(--ease)}
.hub-card:hover{transform:translateY(-4px)}
.hub-card.warm{background:var(--bg-warm)}
.hub-card.cool{background:var(--bg-cool)}
.hub-card .n{font-size:11.5px;letter-spacing:.18em;color:var(--ink-mute);font-weight:600}
.hub-card h3{margin-top:14px;font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--ink-strong)}
.hub-card p{margin-top:10px;font-size:14px;color:#5F5F5F;line-height:1.75}
.hub-card .go{margin-top:auto;padding-top:20px;font-size:13.5px;font-weight:600;color:var(--point)}

/* 의료광고 고지 */
.notice{margin-top:var(--s-6);padding:22px 24px;border-radius:14px;background:#EFEFEF}
.notice p{font-size:12.5px;color:#6E6E6E;line-height:1.85}


/* ============================================================
   네이버 리뷰
   ============================================================ */
.rv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s-3);
  flex-wrap:wrap;margin-bottom:var(--s-5)}
.rv-head .h2{margin-top:16px}
.rv-all{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 22px;
  border-radius:999px;background:#03C75A;color:#fff;font-size:14px;font-weight:600;
  transition:opacity .2s;white-space:nowrap}
.rv-all:hover{opacity:.88}
.rv-all b{font-weight:800;font-size:15px}

.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
@media(max-width:900px){.rv-grid{grid-template-columns:1fr}}
.rv-card{background:var(--bg-alt);border-radius:16px;padding:clamp(24px,2.4vw,32px);
  display:flex;flex-direction:column;min-height:220px}
.rv-stars{color:var(--point);font-size:14px;letter-spacing:.14em}
.rv-body{margin-top:16px;font-size:14.8px;line-height:1.85;color:#4A4A4A;
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rv-meta{margin-top:auto;padding-top:20px;font-size:12.5px;color:var(--ink-mute)}
.rv-tag{display:inline-block;margin-top:10px;font-size:11.5px;color:var(--ink-mute)}


/* ══════════════════════════════════════════════════════════════
   NEUMORPHISM LAYER
   ──────────────────────────────────────────────────────────────
   위쪽 기본 스타일 위에 얹는 뉴모피즘 외피입니다.
   되돌리려면 이 블록 전체(이 주석부터 파일 끝까지)를 지우면
   원래의 플랫 디자인으로 돌아갑니다. 마크업은 건드리지 않습니다.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* 표면 — 한 가지 색으로 통일하고, 형태는 그림자로만 만듭니다 */
  --bg:       #E7EAF0;
  --bg-alt:   #E7EAF0;
  --bg-warm:  #ECEAE9;   /* REPO — 아주 미세하게 따뜻하게 */
  --bg-cool:  #E4EAEE;   /* 근막 — 아주 미세하게 서늘하게 */
  --line:     rgba(140,152,175,.22);

  /* 그림자 페어 — 좌상단 광원 */
  --nm-d: #C4CBDA;
  --nm-l: #FFFFFF;

  --nm-out:    7px 7px 16px var(--nm-d), -7px -7px 16px var(--nm-l);
  --nm-out-lg: 13px 13px 30px var(--nm-d), -13px -13px 30px var(--nm-l);
  --nm-out-sm: 4px 4px 9px var(--nm-d), -4px -4px 9px var(--nm-l);
  --nm-in:     inset 6px 6px 12px var(--nm-d), inset -6px -6px 12px var(--nm-l);
  --nm-in-sm:  inset 3px 3px 7px var(--nm-d), inset -3px -3px 7px var(--nm-l);

  --radius: 24px;
}

body{ background:var(--bg) }

/* ───── Header ───── */
.hdr{
  background:rgba(231,234,240,.9);
  border-bottom:0 !important;
  box-shadow:0 6px 18px -10px var(--nm-d);
}
.hdr.scrolled{ box-shadow:0 10px 24px -12px var(--nm-d) }

.hdr-cta{
  background:var(--point); color:#fff;
  box-shadow:4px 4px 10px var(--nm-d), -4px -4px 10px var(--nm-l);
  transition:box-shadow .2s var(--ease), opacity .2s;
}
.hdr-cta:hover{ opacity:1; box-shadow:var(--nm-in-sm) }

.burger{
  border-radius:14px; background:var(--bg);
  box-shadow:var(--nm-out-sm); padding:11px 9px;
}
.burger:active{ box-shadow:var(--nm-in-sm) }

/* ───── 메가 메뉴 ───── */
.mega{
  border-top:0; border-radius:0 0 28px 28px;
  box-shadow:0 26px 46px -26px var(--nm-d);
}
.mega.warm{ background:var(--bg-warm) }
.mega.cool{ background:var(--bg-cool) }
.mega-head{ border-bottom-color:var(--line) }

.mg-item{
  background:transparent; border-radius:18px;
  box-shadow:var(--nm-out-sm);
  transition:box-shadow .25s var(--ease), transform .25s var(--ease);
}
.mg-item:hover{ background:transparent; transform:none; box-shadow:var(--nm-in-sm) }
.mg-item .ico{
  width:42px; height:42px; padding:9px; border-radius:50%;
  box-shadow:var(--nm-out-sm); opacity:1;
}
.mg-item:hover .ico{ box-shadow:var(--nm-in-sm) }

/* ───── 2기둥 ───── */
.pillar{ border-radius:30px; box-shadow:var(--nm-out-lg) }

/* 이미지 자리 — 파인 홈(inset)으로 */
.p-media,
.feature-visual,
.doctor-img,
.map-ph,
.detail-hero{
  box-shadow:var(--nm-in) !important;
  border-radius:24px;
}
.pillar.warm .p-media,
.pillar.cool .p-media,
.feature-visual,
.doctor-img,
.detail-hero.warm,
.detail-hero.cool{ background:transparent }
.map-ph{ background:transparent }

/* 진료과목 2x3 박스 */
.p-item{
  background:transparent; border-radius:20px;
  box-shadow:var(--nm-out);
  transition:box-shadow .28s var(--ease), transform .28s var(--ease);
}
.p-item:hover{ background:transparent; transform:none; box-shadow:var(--nm-in) }
.p-item .ico{
  width:54px; height:54px; padding:12px; border-radius:50%;
  box-shadow:var(--nm-out-sm); opacity:1;
  transition:box-shadow .28s var(--ease);
}
.p-item:hover .ico{ box-shadow:var(--nm-in-sm) }

/* 첫 항목만 채워진 강조 — 레퍼런스의 Session 01 */
.p-grid > .p-item:first-child .ico{
  background:var(--point); color:#fff;
  box-shadow:4px 4px 10px var(--nm-d), -4px -4px 10px var(--nm-l);
}
.p-grid > .p-item:first-child:hover .ico{
  box-shadow:inset 2px 2px 6px rgba(0,0,0,.28), inset -2px -2px 6px rgba(255,255,255,.18);
}

.p-more, .mg-all{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 22px; border-radius:999px;
  box-shadow:var(--nm-out-sm);
  transition:box-shadow .22s var(--ease);
}
.p-more:hover, .mg-all:hover{ box-shadow:var(--nm-in-sm) }

/* ───── 카드류 ───── */
.step, .rv-card, .hub-card, .sib{
  background:transparent; border-radius:22px;
  box-shadow:var(--nm-out);
  transition:box-shadow .28s var(--ease), transform .28s var(--ease);
}
.hub-card:hover, .sib:hover{ background:transparent; transform:none; box-shadow:var(--nm-in) }
.hub-card.warm{ background:transparent }
.hub-card.cool{ background:transparent }

.info, .notice{
  background:transparent; border-radius:26px;
  box-shadow:var(--nm-in);
}

/* ───── 리스트·구분선 ───── */
.bullets, .creds, .hours, .faq, .p-list{ border-top-color:var(--line) }
.bullets li, .creds li, .hours li, .faq details, .p-list li a{
  border-bottom-color:var(--line);
}
.hours{ border-top-color:var(--line) }
.hours li{ border-bottom-color:var(--line) }

/* FAQ — 아코디언을 개별 카드로 */
.faq{ border-top:0 }
.faq details{
  border-bottom:0; border-radius:18px; margin-bottom:12px;
  box-shadow:var(--nm-out-sm); padding:0 20px;
  transition:box-shadow .25s var(--ease);
}
.faq details[open]{ box-shadow:var(--nm-in-sm) }

/* ───── 태그·버튼 ───── */
.tag{
  background:transparent; box-shadow:var(--nm-out-sm);
  padding:9px 18px;
}
.page-head.warm .tag, .page-head.cool .tag{ background:transparent }

.btn{
  box-shadow:var(--nm-out); transition:box-shadow .22s var(--ease), opacity .2s;
}
.btn:hover{ box-shadow:var(--nm-in) }
.btn-s{ background:transparent }
.btn-s:hover{ background:transparent }
.btn-p{ background:var(--point) }
.btn-p:hover{
  opacity:1;
  box-shadow:inset 3px 3px 8px rgba(0,0,0,.28), inset -3px -3px 8px rgba(255,255,255,.16);
}

.rv-all{
  background:#03C75A; color:#fff;
  box-shadow:5px 5px 12px var(--nm-d), -5px -5px 12px var(--nm-l);
}
.rv-all:hover{
  opacity:1;
  box-shadow:inset 3px 3px 8px rgba(0,0,0,.26), inset -3px -3px 8px rgba(255,255,255,.16);
}

/* ───── 하단 고정바 ───── */
.dock{
  background:var(--bg);
  box-shadow:0 -8px 22px -12px var(--nm-d);
}
.dock a{
  color:var(--ink-strong); border-left:0;
  margin:10px 6px; border-radius:16px; padding:12px 0;
  box-shadow:var(--nm-out-sm);
}
.dock a:active{ box-shadow:var(--nm-in-sm) }

/* ───── 푸터·기타 ───── */
footer{ border-top-color:var(--line) }
.mnav{ background:var(--bg) }
.mnav a{ border-bottom-color:var(--line) }

/* 뉴모피즘은 대비가 낮아지기 쉬우므로 본문 글자는 오히려 진하게 */
.lede{ color:#4E5560 }
.step p, .rv-body{ color:#4E5560 }
.mute, .fn, .ink-mute{ color:#7A828F }

/* ───── 새긴 선화 (사진 없는 상태의 아트워크) ───── */
.nm-art{
  width:100%; height:100%; display:block; padding:clamp(8px,1.2vw,18px);
  filter:drop-shadow(1.5px 1.5px 1px rgba(255,255,255,.95))
         drop-shadow(-1.5px -1.5px 1px rgba(150,161,183,.55));
}
.nm-art .ln{
  fill:none; stroke:#A7B0C2; stroke-linecap:round; stroke-linejoin:round;
}
.nm-art .ln.ac{ stroke:var(--point); opacity:.9 }
.nm-art .art-label{
  fill:#8B93A2; font-family:var(--font); font-size:22px; font-weight:600;
  letter-spacing:-.02em;
}
.p-media, .feature-visual, .map-ph, .detail-hero{ display:block }
.detail-hero{ height:clamp(190px,22vw,300px) }

/* 원장 사진이 없을 때 — 한 단 구성 */
.doctor.no-photo{ grid-template-columns:1fr; max-width:780px; margin:0 auto; text-align:center }
.doctor.no-photo .creds li{ justify-content:center; text-align:left }
.doctor.no-photo .creds li b{ min-width:96px }

/* ═══════════ REPO 약침 · 침법 섹션 ═══════════ */
.yk-head{ text-align:center; max-width:760px; margin:0 auto }
.yk-head .h2 .bar{
  display:inline-block; margin:0 .42em; color:var(--ink-mute);
  font-weight:300; transform:translateY(-.04em);
}
.yk-sub{
  margin-top:16px; color:var(--point); font-weight:700;
  font-size:clamp(15.5px,1.65vw,21px); letter-spacing:-.025em;
}
.yk-head .lede{ margin-top:20px }

/* 히어로 — 파인 액자 + 지시선 라벨 */
.yk-hero{
  position:relative; margin:var(--s-6) 0 0;
  border-radius:24px; overflow:hidden;
}
.yk-hero img{ width:100%; height:auto; display:block }
.yk-hero::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:var(--nm-in); pointer-events:none;
}
.yk-labels{ position:absolute; inset:0; pointer-events:none }
.lbl{ position:absolute; display:flex; align-items:center; transform:translateY(-50%) }
.lbl em{
  font-style:normal; font-weight:700; white-space:nowrap;
  font-size:clamp(11.5px,1.05vw,15px); color:var(--ink-strong);
  text-shadow:0 1px 3px rgba(255,255,255,.85);
}
.lbl i{ flex:1; height:1px; background:#96907F; margin-left:12px }
.lbl b{ width:7px; height:7px; border-radius:50%; background:#2B2620; flex:none; margin-left:-1px }
.lbl.l1{ left:5%; width:32%; top:29% }
.lbl.l2{ left:5%; width:29%; top:40% }
.lbl.l3{ left:5%; width:32%; top:66% }

.yk-legend{ display:none }

/* 3단계 카드 */
.yk-steps{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.8vw,24px); margin-top:var(--s-6);
}
.yk-card{
  border-radius:22px; overflow:hidden; box-shadow:var(--nm-out);
  display:flex; flex-direction:column;
}
.yk-card-head{ display:flex; gap:16px; padding:clamp(22px,2.2vw,30px) }
.yk-num{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--point); color:#fff; display:grid; place-items:center;
  font-size:13.5px; font-weight:700; letter-spacing:.02em;
  box-shadow:3px 3px 8px var(--nm-d), -3px -3px 8px var(--nm-l);
}
.yk-card h3{ font-size:17.5px; font-weight:700; letter-spacing:-.025em; color:var(--ink-strong) }
.yk-card p{ margin-top:9px; font-size:14.5px; line-height:1.75; color:#4E5560 }
.yk-card img{ width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; margin-top:auto }

@media(max-width:860px){
  .yk-steps{ grid-template-columns:1fr }
  .yk-labels{ display:none }
  .yk-legend{
    display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:18px;
    justify-content:center;
  }
  .yk-legend li{ display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600 }
  .yk-legend i{ width:7px; height:7px; border-radius:50%; background:#2B2620; display:block }
}

/* ═══════════ 기둥 새 순서 : 이미지 → 설명 → 진료과목 ═══════════ */
.pillar > .p-media{
  position:relative; margin:0 0 var(--s-4);
  aspect-ratio:4/3; border-radius:20px; overflow:hidden;
  box-shadow:none;
}
.pillar > .p-media img{ width:100%; height:100%; object-fit:cover; display:block }
.pillar > .p-media::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:var(--nm-in); pointer-events:none;
}
.pillar .p-text{ padding:0 4px }
.pillar .p-grid{ margin-top:var(--s-5) }
@media(max-width:900px){
  .pillar > .p-media{ aspect-ratio:3/2; max-height:none }
}

/* 상세 페이지 하단 히어로에 사진이 들어갈 때 */
/* 사진은 원본 비율 그대로, 표면 위에 얹힌 카드로 */
.detail-hero.has-photo{
  display:grid; place-items:center; height:auto; aspect-ratio:auto;
  padding:0; overflow:visible; box-shadow:none !important;
}
.detail-hero.has-photo img{
  /* 높이를 확정값으로 두어야 <img width/height> 로 로드 전에 자리가 잡힌다.
     height:auto 로 두면 로드 순간 아래 콘텐츠가 밀린다(CLS). */
  width:auto; max-width:100%; height:min(620px,72vw); object-fit:contain;
  border-radius:22px; box-shadow:var(--nm-out-lg);
}
/* 모바일 — 폭이 확정값이므로 height:auto 로도 비율만큼 자리가 잡힌다 */
@media(max-width:700px){ .detail-hero.has-photo img{ width:100%; height:auto } }

/* 리뷰 6장 — 카드 높이 균일하게 */
.rv-grid{ grid-auto-rows:1fr }
.rv-body{ -webkit-line-clamp:8 }

/* 지도 자리 — 카카오맵으로 연결 */
.map-ph{ position:relative; display:grid; place-items:center; transition:box-shadow .25s var(--ease) }
.map-ph:hover{ box-shadow:var(--nm-out) }
.map-go{
  position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
  font-size:13px; font-weight:600; color:var(--point); white-space:nowrap;
}

/* 지도 — 실제 지도 임베드 */
.map-frame{
  position:relative; border-radius:16px; overflow:hidden;
  aspect-ratio:4/3; background:#E9ECF1;
}
.map-frame iframe,
.map-frame > div,
.map-frame .root_daum_roughmap{
  width:100% !important; height:100% !important; border:0; display:block;
}
.map-frame .root_daum_roughmap .wrap_map{ height:100% !important }
.map-frame::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow:var(--nm-in); pointer-events:none;
}
.map-links{ display:flex; gap:10px; margin-top:14px }
.map-links a{
  flex:1; text-align:center; padding:11px 0; border-radius:999px;
  font-size:13.5px; font-weight:600; color:var(--ink-strong);
  box-shadow:var(--nm-out-sm); transition:box-shadow .22s var(--ease), color .22s;
}
.map-links a:hover{ box-shadow:var(--nm-in-sm); color:var(--point) }
@media(max-width:900px){ .map-frame{ aspect-ratio:16/10 } }

/* ═══════════ 플로팅 예약 · 상담 메뉴 ═══════════ */
.fab{
  position:fixed; right:clamp(14px,1.6vw,26px); bottom:clamp(16px,2vw,30px);
  z-index:95; display:flex; flex-direction:column; gap:12px;
}
.fab-btn{
  position:relative; width:clamp(52px,4.2vw,60px); height:clamp(52px,4.2vw,60px);
  border-radius:50%; display:grid; place-items:center;
  box-shadow:6px 6px 14px rgba(90,102,128,.28), -5px -5px 12px rgba(255,255,255,.9);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fab-btn:hover{ transform:translateY(-2px) }
.fab-btn:active{ transform:none;
  box-shadow:inset 3px 3px 8px rgba(0,0,0,.24), inset -3px -3px 8px rgba(255,255,255,.25) }
.fab-ico{ width:26px; height:26px; display:block }
.fab-naver{ background:#03C75A; color:#fff }
.fab-naver .fab-ico{ font-size:23px; font-weight:800; line-height:26px; text-align:center;
  font-family:var(--font); letter-spacing:-.02em }
.fab-kakao{ background:#FEE500; color:#3C1E1E }
.fab-kakao .fab-ico{ fill:currentColor }
.fab-tel{ background:var(--point); color:#fff }

/* 라벨 — 데스크톱에서 왼쪽으로 펼쳐짐 */
.fab-lb{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%) translateX(6px);
  white-space:nowrap; padding:9px 16px; border-radius:999px;
  background:var(--ink-strong); color:#fff; font-size:13px; font-weight:600;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.fab-btn:hover .fab-lb,
.fab-btn:focus-visible .fab-lb{ opacity:1; visibility:visible; transform:translateY(-50%) translateX(0) }
@media(max-width:960px){
  .fab{ gap:10px }
  .fab-lb{ display:none }
}
@media (prefers-reduced-motion:reduce){ .fab-btn{ transition:none } }

footer{ padding-bottom:var(--s-6) }
@media(max-width:960px){ footer{ padding-bottom:calc(var(--s-6) + 40px) } }

/* ════════════════════════════════════════════════════════════
   리뉴얼 추가 — 상단 히어로 / 리뷰 페이드 게이트 / 비급여 표
   ════════════════════════════════════════════════════════════ */

/* 상세 페이지 — 제목 옆 상단 이미지 */
.page-head.has-photo{
  display:grid; grid-template-columns:1fr minmax(0,.86fr);
  gap:clamp(24px,4vw,64px); align-items:center;
}
.page-head.has-photo .ph-text{min-width:0}
.ph-media img{
  /* width 가 확정값이라 <img width/height> 비율만큼 로드 전에 자리가 잡힙니다 */
  width:100%; height:auto; display:block;
  border-radius:22px; box-shadow:var(--nm-out-lg);
}
@media(max-width:900px){
  .page-head.has-photo{grid-template-columns:1fr; gap:var(--s-4)}
  .page-head.has-photo .ph-media{order:2}
}

/* 리뷰 — 아래로 갈수록 흐려지고 '리뷰 확인'으로 카카오 채널 유도 */
.rv-fade{position:relative}
.rv-fade .rv-grid{
  max-height:clamp(280px,32vw,380px); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.35) 76%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0%,#000 42%,rgba(0,0,0,.35) 76%,transparent 100%);
}
.rv-veil{
  position:absolute; left:0; right:0; bottom:0; height:58%;
  background:linear-gradient(180deg,rgba(238,238,238,0) 0%,var(--bg,#EEEEEE) 82%);
  pointer-events:none;
}
.rv-more{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 26px; border-radius:999px;
  background:#FEE500; color:#191600;
  font-size:14px; font-weight:700; letter-spacing:-.02em;
  box-shadow:0 6px 20px rgba(0,0,0,.14);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease);
}
.rv-more:hover{transform:translateX(-50%) translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.18)}
.rv-more-ico{
  width:17px; height:17px; flex:0 0 auto; background:#191600;
  -webkit-mask:var(--kakao-ico) center/contain no-repeat;
          mask:var(--kakao-ico) center/contain no-repeat;
}
:root{
  --kakao-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.9 3 2.8 6.3 2.8 10.3c0 2.6 1.7 4.9 4.3 6.2l-1.1 4c-.1.4.3.7.6.5l4.7-3.1c.2 0 .5.1.7.1 5.1 0 9.2-3.3 9.2-7.7S17.1 3 12 3z'/%3E%3C/svg%3E");
}
@media(max-width:560px){
  .rv-fade .rv-grid{max-height:300px}
}

/* 비급여 항목 표 */
.nb-wrap{overflow-x:auto; border-radius:18px; box-shadow:var(--nm-out)}
.nb-table{width:100%; border-collapse:collapse; min-width:520px; background:transparent}
.nb-table th,.nb-table td{
  padding:16px 20px; text-align:left; font-size:15px;
  border-bottom:1px solid var(--line);
}
.nb-table thead th{
  font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-mute); font-weight:600;
}
.nb-table tbody tr:last-child td{border-bottom:0}
.nb-table td:first-child{color:var(--ink-mute); white-space:nowrap}
.nb-cost{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}