/* DM피부과(#150) 반응형 시안 — build_site.py 가 final/assets/site.css 로 복사한다.
   fs(모바일px, 데스크톱px) 는 빌드가 360~1920 사이 선형 clamp() 로 바꾼다.
   숫자는 Figma ver.2_수정 PC 보드(1920)·모바일 보드(360) 실측. 폭 구간: 모바일 <768 · 태블릿 768~1199 · 데스크톱 ≥1200(내용 폭 1440). 가로 메뉴 ≥1360. */
@font-face{font-family:'Pretendard Variable';src:url(fonts/pretendard.woff2) format('woff2');font-weight:45 920;font-display:swap}
@font-face{font-family:'Wanted Sans';src:url(fonts/wanted.woff2) format('woff2');font-weight:400 1000;font-display:swap}
@font-face{font-family:'Cormorant';src:url(fonts/cormorant.woff2) format('woff2');font-weight:300 700;font-display:swap}
:root{--ivory:#EAE6D7;--brown:#745D44;--brown2:#624B33;--gold:#B1885B;--sand:#E3B27A;--dark:#1A1005;--black:#090502;--green:#14302A;--teal:#2A9382;
  --ink:#222;--gray:#F3F3F3;--cream:#F9F1E8;--wine:#742E2E;--gut:20px;--tb:40px;--hdh:60px;--sec:clamp(60px, 43.846px + 4.4872vw, 130px);--lz:.74}
@media (min-width:768px){:root{--gut:40px}}
@media (min-width:1200px){:root{--tb:60px;--hdh:88px;--lz:1}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:var(--hdh)}
body{font-family:'Pretendard Variable',Pretendard,-apple-system,'Apple SD Gothic Neo',sans-serif;font-weight:500;color:var(--ink);letter-spacing:-.025em;
  line-height:1.6;word-break:keep-all;overflow-wrap:anywhere;background:#fff;text-rendering:geometricPrecision;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;letter-spacing:inherit}
b{font-weight:700}
.wrap{width:min(1440px,100% - var(--gut)*2);margin-inline:auto}
br.d{display:none}
br.m{display:inline}
@media (min-width:768px){br.m{display:none}}
@media (min-width:1200px){br.d{display:inline}}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:100;background:#fff;color:#000;padding:10px 16px}
.skip:focus{left:10px;top:10px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.off{cursor:default}
.ph{display:block;position:relative;overflow:hidden}
.ph picture{display:contents}
.ph img{width:100%;height:100%;object-fit:cover}
.ov{position:absolute;inset:0;pointer-events:none}

/* 공통 글자 */
.eb{font-family:'Cormorant',serif;font-weight:500;font-size:clamp(17px, 16.308px + 0.1923vw, 20px);line-height:1.4;letter-spacing:.2em;color:var(--gold)}
.eb.sand,.on-dark .eb{color:var(--sand)}
.h2{font-family:'Cormorant',serif;font-weight:500;font-size:clamp(28px, 22.923px + 1.4103vw, 50px);line-height:1.4}
.h2b{font-size:clamp(24px, 20.308px + 1.0256vw, 40px);font-weight:700;line-height:1.6}
.h3{font-size:clamp(17px, 16.308px + 0.1923vw, 20px);font-weight:700;line-height:1.6}
.body{font-size:clamp(15px, 14.769px + 0.0641vw, 16px);line-height:1.6}
.sec-hd{text-align:center;margin-bottom:clamp(30px, 25.385px + 1.2821vw, 50px)}
.sec-hd .h2{margin-top:8px}
.lead{margin-top:clamp(20px, 17.692px + 0.6410vw, 30px);font-size:clamp(15px, 14.308px + 0.1923vw, 18px)}
.on-dark{color:#fff}
.dv{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;font-family:'Cormorant',serif;font-size:clamp(15px, 14.769px + 0.0641vw, 16px);line-height:1;
  box-shadow:inset 0 0 0 1px currentColor;cursor:default;white-space:nowrap}
.dv-ar{width:14px;height:5px}
.dv.w{color:#fff}
.more{display:flex;justify-content:center;margin-top:clamp(30px, 25.385px + 1.2821vw, 50px)}

/* 상단 띠 + 헤더 */
.topbar{background:var(--cream);color:var(--ink);height:var(--tb);position:relative;z-index:60}
.tb-in{display:flex;align-items:center;height:100%;gap:clamp(16px, 15.077px + 0.2564vw, 20px);width:min(1440px,100% - var(--gut)*2);margin-inline:auto;font-family:'Wanted Sans',sans-serif;font-size:clamp(12px, 11.769px + 0.0641vw, 13px);line-height:1.5}
.hd{position:absolute;left:0;right:0;top:var(--tb);z-index:50;color:#fff;transition:background .3s,box-shadow .3s}
.hd.fixed{position:fixed;top:0;background:rgba(249,241,232,.96);box-shadow:0 2px 14px rgba(98,75,51,.12)}
@supports (backdrop-filter:blur(8px)){.hd.fixed{background:rgba(249,241,232,.86);backdrop-filter:blur(8px)}}
.hd-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--hdh);padding-inline:clamp(20px,5.21vw,100px);gap:16px}
.logo{display:inline-flex;align-items:center;gap:calc(6px*var(--lz));color:#fff;flex:none}
.logo .lg{width:auto;height:calc(40px*var(--lz))}
.hd .logo{justify-self:center}
.gnb{display:none;font-family:'Wanted Sans',sans-serif;font-size:15px;line-height:1.5}
.gnb a,.gnb span{white-space:nowrap;position:relative;padding:6px 0}
.gnb a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transition:transform .25s}
.gnb a:hover::after,.gnb a.on::after{transform:scaleX(1)}
.hd-util{justify-self:end;display:flex;align-items:center;gap:8px;font-family:'Wanted Sans',sans-serif;font-size:13px;line-height:1.5}
.hd-util>span,.hd-util>i{display:none}
.hd-util>i{width:1px;height:8px;background:#fff}
.menu-btn{justify-self:start;width:28px;height:28px;display:flex;flex-direction:column;justify-content:center;gap:5px}
.menu-btn i{display:block;width:24px;height:2px;background:#fff}
.menu-btn i:last-child{width:12px}
@media (min-width:768px){.hd-util>span,.hd-util>i{display:block}.hd .logo{justify-self:start}.hd-in{grid-template-columns:auto auto 1fr}}
@media (min-width:1360px){
  .hd-in{display:flex;gap:0}
  .menu-btn{display:none}
  .gnb{display:flex;gap:clamp(12px,calc(12px + (100vw - 1360px)/20),40px);margin-left:clamp(32px,calc(32px + (100vw - 1360px)/5),107px)}
  .hd-util{margin-left:auto}
}
.mnav{position:fixed;inset:0 auto 0 0;width:min(340px,86vw);background:var(--dark);color:#fff;z-index:90;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .3s;overflow-y:auto}
.mnav[hidden]{display:flex;visibility:hidden}
.mnav.open{transform:none;visibility:visible}
.mnav-hd{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.12)}
.mnav-x{font-size:30px;line-height:1;width:36px;height:36px}
.mnav-list{display:flex;flex-direction:column;padding:12px 0;font-family:'Wanted Sans',sans-serif;font-size:17px}
.mnav-list a,.mnav-list span{padding:12px 24px}
.mnav-list span{color:rgba(255,255,255,.55)}
.mnav-list a.on{color:var(--sand)}
.mnav-util{margin-top:auto;padding:20px 24px 28px;display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(255,255,255,.7)}
.mnav-util i{width:1px;height:10px;background:rgba(255,255,255,.4)}
.nav-dim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:80}
.nav-dim[hidden]{display:none}
body.nav-open{overflow:hidden}

/* 빠른 상담 */
.quick{position:fixed;z-index:40}
.q-box a,.q-box span{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--brown2);font-size:13px;line-height:1.6;white-space:nowrap}
.q-box img{width:40px;height:40px}
.q-top{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(0,0,0,.3);transition:opacity .3s}
.q-top svg{width:12px;height:16px}
.quick:not(.show) .q-top{opacity:0;pointer-events:none}
@media (min-width:1200px){
  .quick{right:20px;bottom:clamp(20px,4vh,60px);display:flex;flex-direction:column;align-items:center;gap:12px}
  .q-box{width:88px;padding:30px 0;border-radius:50px;background:rgba(255,255,255,.7);backdrop-filter:blur(10px);display:flex;flex-direction:column;align-items:center;gap:20px;
    box-shadow:0 4px 20px rgba(0,0,0,.06)}
  .q-box a:hover{color:var(--gold)}
}
@media (max-width:1199px){
  body{padding-bottom:64px}
  .quick{left:0;right:0;bottom:0}
  .q-box{display:grid;grid-template-columns:repeat(4,1fr);height:64px;background:rgba(255,255,255,.96);border-top:1px solid #e6e1d6;backdrop-filter:blur(8px)}
  .q-box a,.q-box span{justify-content:center;gap:2px;font-size:12px}
  .q-box img{width:28px;height:28px}
  .q-top{position:absolute;right:16px;bottom:78px}
}

/* 메인 히어로 */
.hero{position:relative;color:var(--ink);display:grid;place-items:center;text-align:center;overflow:hidden;
  height:max(560px,min(calc(100svh - var(--tb)),205.5vw))}
/* 첫 화면에 딱 맞게: 디자인 비율 높이가 화면(상단 띠 제외)보다 크면 화면 높이까지만 (2026-10-21 사용자 요청) */
@media (min-width:768px){.hero{height:max(480px,min(calc(100svh - var(--tb)),75vw))}}
@media (min-width:1200px){.hero{height:max(480px,min(calc(100svh - var(--tb)),53.125vw))}}
.hero-bg{position:absolute;inset:0}
.hero .ov{z-index:1}
.hero-in{position:relative;z-index:2;padding:var(--hdh) var(--gut) 0;max-width:1440px}
.hero .eb{color:var(--brown)}
.hero-t{margin-top:clamp(16px, 15.077px + 0.2564vw, 20px);font-size:clamp(36px, 30.462px + 1.5385vw, 60px);font-weight:700;line-height:1.6}
.hero-d{margin-top:clamp(16px, 15.077px + 0.2564vw, 20px);font-size:clamp(15px, 14.769px + 0.0641vw, 16px)}

/* 시그니처 */
.sig{position:relative;background:var(--ivory);padding:var(--sec) 0 clamp(60px, 36.923px + 6.4103vw, 160px);overflow:hidden}
.blob{position:absolute;border-radius:50%;background:rgba(199,192,174,.5);filter:blur(100px);pointer-events:none}
.b1{left:54.2%;top:0;width:25.3vw;height:25.3vw}
.b2{left:0;top:79%;width:38.2vw;height:38.2vw}
.sig .wrap,.sig-stage,.sig-dots{position:relative}
.sig .lead{font-size:clamp(15px, 14.769px + 0.0641vw, 16px)}
.sig-stage{--cw:clamp(260px,21.875vw,420px);height:calc(var(--cw) * 580 / 420);margin-top:clamp(0px, -6.923px + 1.9231vw, 30px);outline:none;touch-action:pan-y;user-select:none}
.sig-track{position:absolute;inset:0}
.sig-card{position:absolute;left:50%;top:50%;width:var(--cw);aspect-ratio:420/580;margin-left:calc(var(--cw) / -2);overflow:hidden;cursor:pointer;background:#d9d9d9;
  --tx:0%;--sc:1;transform:translate(var(--tx),-50%) scale(var(--sc));transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s;opacity:0}
.sig-card img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.sig-card[data-p="0"]{opacity:1;z-index:3;cursor:default}
.sig-card[data-p="1"],.sig-card[data-p="-1"]{opacity:1;z-index:2;--sc:.857}
.sig-card[data-p="2"],.sig-card[data-p="-2"]{opacity:1;z-index:1;--sc:.714}
.sig-card[data-p="1"]{--tx:104.76%}.sig-card[data-p="-1"]{--tx:-104.76%}
.sig-card[data-p="2"]{--tx:195.24%}.sig-card[data-p="-2"]{--tx:-195.24%}
.sig-card.jump{transition:none}
.sig-cap{position:absolute;left:30px;right:30px;bottom:30px;color:#F3F3F3;opacity:0;transform:translateY(10px);transition:opacity .45s .15s,transform .45s .15s}
.sig-card[data-p="0"] .sig-cap{opacity:1;transform:none}
.sig-cap h3{font-size:clamp(20px, 19.077px + 0.2564vw, 24px);font-weight:700;line-height:1.4}
.sig-cap p{margin-top:8px;font-size:clamp(16px, 15.538px + 0.1282vw, 18px)}
.sig-cap .dv{margin-top:clamp(20px, 17.692px + 0.6410vw, 30px)}
.dots{display:none;justify-content:center;gap:8px;margin-top:20px}
.dots button{width:8px;height:8px;border-radius:50%;background:rgba(34,34,34,.2);transition:background .3s,width .3s}
.dots button[aria-current]{background:var(--gold)}
@media (max-width:1199px){.dots{display:flex}}
@media (max-width:767px){
  .sig-stage{--cw:calc(100vw - 40px);height:calc(var(--cw) * 393 / 320)}
  .sig-card{aspect-ratio:320/393}
  .sig-card[data-p]{--sc:1}
  .sig-card[data-p="1"]{--tx:calc(100% + 20px)}.sig-card[data-p="-1"]{--tx:calc(-100% - 20px)}
  .sig-card[data-p="2"],.sig-card[data-p="-2"]{opacity:0}
  .sig-cap{left:20px;right:20px;bottom:24px}
}

/* TV */
.tv{background:var(--gray);padding:var(--sec) 0}

/* 가로 넘김(미디어·리뷰·이벤트·자격증) */
.sl{position:relative}
.sl-track{display:flex;gap:var(--g,40px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;outline:none;cursor:grab}
.sl-track::-webkit-scrollbar{display:none}
.sl-track.drag{cursor:grabbing;scroll-snap-type:none}
.sl-track>li{flex:0 0 var(--iw);scroll-snap-align:start}
.sl-prev,.sl-next{position:absolute;top:calc(var(--ah,50%) - 22px);width:44px;height:44px;border-radius:50%;background:#fff;transition:opacity .3s;z-index:2}
.sl-prev{left:-66px}.sl-next{right:-66px}
.sl-prev img,.sl-next img{width:44px;height:44px}
.sl-prev:disabled,.sl-next:disabled{opacity:.25;cursor:default}
.sl-prev.hide,.sl-next.hide{display:none}
@media (max-width:1799px){.sl-prev{left:-22px}.sl-next{right:-22px}} /* 1599→1799 (2026-10-20): 바깥쪽 화살표가 오른쪽 퀵메뉴와 겹치지 않는 폭부터 */
.media{padding:var(--sec) 0}
.sl-media{--g:40px;--iw:calc((100% - 120px) / 4)}
.mcard .ph{aspect-ratio:1}
.mcard h3{margin-top:20px;font-size:clamp(15px, 14.308px + 0.1923vw, 18px);line-height:1.6}
.date{font-size:clamp(15px, 14.769px + 0.0641vw, 16px);color:rgba(34,34,34,.7)}
@media (max-width:1199px){.sl-media{--iw:calc((100% - 80px) / 3)}}
@media (max-width:767px){
  .sl-wrap{width:100%}
  .sl-media,.sl-event{--g:20px;--iw:280px}
  .sl-media .sl-track,.sl-event .sl-track{padding-inline:calc(50% - 140px);scroll-padding-inline:calc(50% - 140px)}
  .sl-media .sl-track>li,.sl-event .sl-track>li{scroll-snap-align:center}
  .sl-media .sl-prev,.sl-media .sl-next{display:none}
  .sl-event .sl-prev{left:8px}.sl-event .sl-next{right:8px}
}

/* 대표원장 */
.doc{background:var(--ivory)}
.pg-about .doc{background:var(--gray)}
.doc-in{width:min(1440px,100% - var(--gut)*2);margin-inline:auto;display:grid;grid-template-columns:640fr 800fr;column-gap:clamp(40px, 35.385px + 1.2821vw, 60px)}
.pg-about .doc-in{column-gap:clamp(40px, 30.769px + 2.5641vw, 80px)}
/* 사진 칸: 디자인 비율을 최소 높이로(글이 더 길면 칸이 늘어나고 사진은 cover) — height:100%+aspect-ratio 는 태블릿에서 폭이 폭주했다 */
.doc-ph{position:relative}
.doc-ph::before{content:'';display:block;padding-top:128.9%}
.pg-about .doc-ph::before{padding-top:144.2%}
.doc-ph .ph{position:absolute;inset:0}
.doc-ph .ov{z-index:1}
.doc-tx{padding:clamp(30px, 6.923px + 6.4103vw, 130px) 0 clamp(60px, 43.846px + 4.4872vw, 130px)}
.pg-about .doc-tx{padding-top:clamp(30px, 18.462px + 3.2051vw, 80px)}
.doc-role{font-size:clamp(16px, 15.538px + 0.1282vw, 18px);font-weight:700;color:var(--brown2)}
.doc-name{margin-top:clamp(16px, 14.154px + 0.5128vw, 24px);font-size:clamp(32px, 27.846px + 1.1538vw, 50px);font-weight:700;line-height:1.4;color:var(--brown2)}
.doc-name span{margin-left:12px;font-size:clamp(15px, 14.769px + 0.0641vw, 16px);font-weight:500;color:rgba(34,34,34,.6);letter-spacing:-.025em}
.doc-bar{display:block;width:clamp(40px, 36.308px + 1.0256vw, 56px);height:2px;background:var(--brown2);margin:clamp(20px, 19.077px + 0.2564vw, 24px) 0}
.doc-head{font-size:clamp(20px, 19.077px + 0.2564vw, 24px);font-weight:700;color:var(--brown2)}
.doc-d{margin-top:clamp(16px, 15.077px + 0.2564vw, 20px);font-size:clamp(15px, 14.308px + 0.1923vw, 18px);color:rgba(34,34,34,.7)}
.career{display:grid;grid-template-columns:auto auto auto;justify-content:start;column-gap:40px;margin-top:clamp(30px, 23.077px + 1.9231vw, 60px);font-size:clamp(14px, 13.538px + 0.1282vw, 16px);color:rgba(34,34,34,.7)}
.career li+li{margin-top:12px}
.career li.now{font-weight:700;color:var(--brown2)}
.certs{margin-top:clamp(30px, 23.077px + 1.9231vw, 60px)}
.cert-t{font-family:'Cormorant',serif;font-weight:500;font-size:clamp(17px, 16.308px + 0.1923vw, 20px);letter-spacing:.2em;color:var(--brown2);line-height:1.4;padding-right:110px}
.sl-cert{margin-top:clamp(16px, 13.462px + 0.7051vw, 27px);--g:20px;--iw:calc((100% - 60px) / 4)}
.sl-cert .ph{aspect-ratio:165/104;background:#d9d9d9}
.sl-cert .sl-prev,.sl-cert .sl-next{top:-71px;background:transparent}
.sl-cert .sl-prev{left:auto;right:54px}.sl-cert .sl-next{right:0}
@media (max-width:1199px){.career{grid-template-columns:auto auto}.career ul:last-child{grid-column:1/-1;margin-top:20px}}
@media (max-width:767px){
  .doc-in{display:block;width:100%}
  .doc-ph::before,.pg-about .doc-ph::before{padding-top:111.67%}
  .doc-tx{padding:30px 20px 60px}
  .career{display:block}
  .career ul+ul{margin-top:20px}
  .career li+li{margin-top:8px}
  .sl-cert{--iw:145px;--g:10px}
  .sl-cert .sl-track{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
}

/* 리뷰 */
.review{background:var(--brown);color:#fff;padding:var(--sec) 0}
.sl-review{--g:clamp(20px,3.125vw,60px);--iw:clamp(280px,18.75vw,360px)}
.sl-review .sl-track{padding-inline:calc(50% - var(--iw) / 2);scroll-padding-inline:calc(50% - var(--iw) / 2)}
.sl-review .sl-track>li{scroll-snap-align:center}
.rcard{position:relative;color:#fff}
.rcard .ph{aspect-ratio:360/477}
.rc-cap{position:absolute;left:clamp(20px, 17.692px + 0.6410vw, 30px);bottom:clamp(20px, 17.692px + 0.6410vw, 30px);right:20px}
.rc-cap h3{font-size:clamp(15px, 14.308px + 0.1923vw, 18px)}
.rc-cap .date{color:rgba(255,255,255,.7)}
@media (max-width:767px){.sl-review .rcard .ph{aspect-ratio:280/370}}

/* 이벤트 */
.event{padding:var(--sec) 0}
.sl-event{--g:24px;--iw:calc((100% - 48px) / 3)}
.ec-ph{aspect-ratio:464/310;background:linear-gradient(rgba(218,218,218,.2),rgba(218,218,218,.2)),url(img/event_ph.png) center/contain no-repeat,#fff;
  box-shadow:inset 0 0 0 1px #f0eeea}
.ecard h3{margin-top:20px;font-size:clamp(15px, 14.308px + 0.1923vw, 18px)}
.sl-event .sl-prev,.sl-event .sl-next{--ah:calc(var(--iw) * 310 / 464 / 2)}
@media (max-width:767px){
  .sl-event{--g:20px;--iw:280px}
  .ec-ph{aspect-ratio:280/220}.sl-event .sl-prev,.sl-event .sl-next{--ah:110px}
}
.sl-media .sl-prev,.sl-media .sl-next{--ah:calc(var(--iw) / 2)}

/* 외국어 상담 */
.contact{background:var(--green);color:#fff;padding:var(--sec) 0}
.contact .eb{color:#fff}
.ct-h{font-size:clamp(32px, 23.231px + 2.4359vw, 70px)!important}
.ct-lead{margin-top:clamp(12px, 10.154px + 0.5128vw, 20px);font-size:clamp(15px, 13.846px + 0.3205vw, 20px)}
.contact .lead{margin-top:clamp(8px, 6.154px + 0.5128vw, 16px);font-size:clamp(15px, 14.308px + 0.1923vw, 18px)}
.ct-grid{display:grid;grid-template-columns:repeat(4,240px);gap:20px;justify-content:center}
.ct-card{position:relative;height:260px;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.ct-card>a{display:block;height:100%}
.ct-card .ct-ic{position:absolute;left:30px;top:30px}
.ct-card .ct-ic .ph{width:48px;height:32px}
.ct-phone{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--teal);margin:-2px 0 0 -4px}
.ct-phone img{width:28px;height:28px}
.ct-tx{position:absolute;left:30px;right:20px;top:148px;display:flex;flex-direction:column}
.ct-code{font-family:'Cormorant',serif;font-size:clamp(15px, 14.769px + 0.0641vw, 16px);letter-spacing:.2em;line-height:1.4;color:var(--sand)}
.ct-t{margin-top:8px;font-size:clamp(15px, 14.769px + 0.0641vw, 16px)}
.ct-d{font-size:14px;color:rgba(255,255,255,.7)}
.ct-ar{position:absolute;right:31px;top:44px;width:18px;height:16px;transition:transform .3s}
.ct-card.call:hover .ct-ar{transform:translateX(4px)}
.ct-card.call:hover{background:rgba(255,255,255,.16)}
@media (max-width:1199px){.ct-grid{grid-template-columns:repeat(2,240px)}}
@media (max-width:767px){
  .ct-grid{grid-template-columns:1fr;gap:10px}
  .ct-card{height:113px}
  .ct-card .ct-ic{left:20px;top:50%;transform:translateY(-50%)}
  .ct-phone{width:48px;height:48px;margin:0}
  .ct-tx{left:88px;top:20px}
  .ct-t{margin-top:4px}
  .ct-ar{right:20px;top:20px}
}

/* 위치·진료시간 */
.loc{display:grid;grid-template-columns:1fr 1fr;background:var(--dark);color:rgba(255,255,255,.7)}
.loc-tx{display:flex}
.loc-in{margin-left:max(var(--gut),calc((100vw - 1440px) / 2));padding:clamp(40px, 26.154px + 3.8462vw, 100px) var(--gut) clamp(40px, 30.769px + 2.5641vw, 80px) 0}
.loc-t{font-size:clamp(20px, 19.077px + 0.2564vw, 24px);font-weight:500;line-height:1.6}
.loc-d{margin-top:4px;font-size:clamp(15px, 14.769px + 0.0641vw, 16px)}
.hours{display:grid;grid-template-columns:clamp(56px, 55.077px + 0.2564vw, 60px) auto;column-gap:clamp(39px, 43.923px + -0.2564vw, 43px);row-gap:8px;margin-top:24px;font-size:clamp(15px, 14.769px + 0.0641vw, 16px)}
.hours dt{font-weight:700;white-space:nowrap}
.loc-map .ph{height:100%;min-height:420px}
@media (max-width:767px){.loc{grid-template-columns:1fr}.loc-in{padding:40px 20px;margin:0}.loc-map .ph{min-height:0;aspect-ratio:360/200}}

/* 푸터 */
.ft{background:var(--black);color:rgba(255,255,255,.7);padding:clamp(40px, 35.385px + 1.2821vw, 60px) 0 clamp(40px, 34.000px + 1.6667vw, 66px);font-size:14px}
.flogo{width:clamp(150px, 146.538px + 0.9615vw, 165px);height:auto}
.ft-links{display:flex;flex-wrap:wrap;align-items:center;margin-top:clamp(30px, 27.692px + 0.6410vw, 40px);font-size:clamp(12px, 11.538px + 0.1282vw, 14px);color:rgba(255,255,255,.6)}
.ft-links span+span::before{content:'';display:inline-block;width:1px;height:12px;background:rgba(255,255,255,.4);margin:0 clamp(10px, 7.692px + 0.6410vw, 20px);vertical-align:-1px}
.ft-links .nb{color:var(--gold);font-weight:700}
.ft-info{margin-top:clamp(20px, 17.692px + 0.6410vw, 30px)}
.ft-info p{display:flex;flex-wrap:wrap}
.ft-info p+p{margin-top:4px}
.ft-info span+span::before{content:'';display:inline-block;width:1px;height:12px;background:rgba(255,255,255,.4);margin:0 16px;vertical-align:-1px}
.copy{margin-top:clamp(20px, 19.077px + 0.2564vw, 24px);font-size:clamp(12px, 11.538px + 0.1282vw, 14px)}
@media (max-width:767px){.ft-info p{display:block}.ft-info span{display:block}.ft-info span+span::before{display:none}.ft-info p+p{margin-top:0}}

/* FAQ */
.faq{background:var(--ivory);padding:var(--sec) 0}
.faq-in{max-width:1024px}
.faq-t{text-align:center;margin-bottom:clamp(30px, 25.385px + 1.2821vw, 50px)}
.faq-it{border-bottom:1px solid #AFADA4}
.faq-it:first-of-type{border-top:1px solid #AFADA4}
.faq-it summary{display:grid;grid-template-columns:clamp(40px, 30.769px + 2.5641vw, 80px) 1fr 15px;align-items:center;column-gap:12px;padding:clamp(20px, 17.462px + 0.7051vw, 31px) 0 clamp(20px, 18.154px + 0.5128vw, 28px);cursor:pointer;list-style:none}
.faq-it summary::-webkit-details-marker{display:none}
.fn{font-family:'Cormorant',serif;font-size:clamp(20px, 19.077px + 0.2564vw, 24px);color:var(--brown2);line-height:1.4}
.fq{font-size:clamp(15px, 14.308px + 0.1923vw, 18px)}
.fi{position:relative;width:15px;height:15px;transition:transform .3s}
.fi::before,.fi::after{content:'';position:absolute;left:0;top:7px;width:15px;height:1px;background:var(--brown2)}
.fi::after{transform:rotate(90deg)}
.faq-it[open] .fi{transform:rotate(45deg)}
.fa{padding:0 0 clamp(20px, 17.923px + 0.5769vw, 29px) calc(clamp(40px, 30.769px + 2.5641vw, 80px) + 12px);font-size:clamp(14px, 13.538px + 0.1282vw, 16px);color:rgba(34,34,34,.7);margin-top:-4px}

/* 서브 히어로 */
.shero{position:relative;height:max(380px,33.333vw);color:#fff;display:grid;place-items:center;text-align:center;overflow:hidden}
.shero-bg{position:absolute;inset:0}
.shero .ov{z-index:1}
.shero-in{position:relative;z-index:2;padding-top:calc(var(--hdh) / 2)}
.shero .eb{color:#fff}
.shero-t{margin-top:8px;font-size:clamp(28px, 22.923px + 1.4103vw, 50px);font-weight:700;line-height:1.6}
.crumb{margin-top:clamp(16px, 15.077px + 0.2564vw, 20px);display:flex;align-items:center;justify-content:center;gap:clamp(14px, 12.615px + 0.3846vw, 20px);font-size:clamp(15px, 14.769px + 0.0641vw, 16px)}
.crumb .home svg{display:block;width:24px;height:24px}
.crumb .chev{width:6px;height:12px}

/* 소개 — 인사 */
.intro{background:var(--ivory);padding-top:var(--sec)}
.intro-in{display:grid;grid-template-columns:709fr 731fr;grid-template-rows:auto auto}
.intro-hd{grid-row:1/3}
.intro-hd .h2b{margin-top:8px}
.intro-tx{padding-top:clamp(0px, -12.462px + 3.4615vw, 54px)}
.intro-tx .body{margin-top:8px}
.intro-ph{margin-top:clamp(30px, 27.692px + 0.6410vw, 40px)}
.intro-ph .ph{aspect-ratio:731/480}
@media (max-width:767px){
  .intro-in{display:block;text-align:center}
  .intro-tx{margin-top:20px}
  .intro-ph{margin:30px calc(var(--gut) * -1) 0}
  .intro-ph .ph{aspect-ratio:360/280}
}
/* 소개 — About DM */
.aboutdm{background:var(--brown);color:#fff;padding:var(--sec) 0}
.ab-in{display:grid;grid-template-columns:600fr 840fr}
.ab-hd .h2b{margin-top:8px}
.ab-tx .body+.body{margin-top:8px}
.ab-ph{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px, 3.077px + 1.9231vw, 40px);margin-top:clamp(20px, 12.846px + 1.9872vw, 51px);align-items:start}
.ab-ph .ph{aspect-ratio:700/400}
.ab-ph .p2{margin-top:clamp(0px, -9.231px + 2.5641vw, 40px)}
@media (max-width:767px){
  .ab-in{display:block;text-align:center}
  .ab-tx{margin-top:20px}
  .ab-ph .ph{aspect-ratio:155/200}
  .ab-ph .p2{margin-top:0}
}
/* 소개 — 연구·장비 */
.research{padding:var(--sec) 0}
.rs-in{display:grid;grid-template-columns:676fr 764fr}
.rs-hd .h2b{margin-top:8px}
.rs-tx .body+.body{margin-top:8px}
.rs-ph{grid-column:1/-1;display:grid;grid-template-columns:520fr 880fr;grid-template-rows:auto auto;gap:clamp(20px, 15.385px + 1.2821vw, 40px);margin-top:clamp(30px, 25.385px + 1.2821vw, 50px)}
.rs-ph .r1{grid-row:1/3}
.rs-ph .r1 .ph{width:100%;height:100%}
.rs-ph .r2 .ph{aspect-ratio:880/440}
.rs-ph .r3 .ph{aspect-ratio:880/300}
@media (max-width:767px){
  .rs-in{display:block;text-align:center}
  .rs-tx{margin-top:20px}
  .rs-ph{display:flex;flex-direction:column}
  .rs-ph .r1{order:3}
  .rs-ph .ph,.rs-ph .r1 .ph{aspect-ratio:325/210;height:auto}
}

/* 포텐자 — 소개 */
.pz-intro{background:var(--ivory);padding:var(--sec) 0}
.pzi-in{display:grid;grid-template-columns:740fr 700fr}
.pzi-hd .h2b{margin-top:8px}
.tag{margin-top:8px;font-size:clamp(15px, 14.769px + 0.0641vw, 16px);font-weight:700}
.pzi-en{font-size:clamp(20px, 19.077px + 0.2564vw, 24px);font-weight:700;line-height:1.4;letter-spacing:-.025em}
.pzi-tx .body{margin-top:clamp(16px, 14.154px + 0.5128vw, 24px)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:clamp(16px, 14.154px + 0.5128vw, 24px)}
.chips li{display:inline-flex;align-items:center;gap:.26em;height:40px;padding:0 20px;border-radius:20px;background:var(--ivory);box-shadow:inset 0 0 0 1px var(--brown);
  font-size:clamp(15px, 14.769px + 0.0641vw, 16px);font-weight:700}
.chips .down{color:var(--brown)}
@media (max-width:767px){.pzi-in{display:block;text-align:center}.pzi-tx{margin-top:40px}.chips{justify-content:center}}
/* 포텐자 — 레이저 */
.laser{background:var(--cream);padding-top:var(--sec);overflow:hidden}
.ls-in{display:grid;grid-template-columns:830fr 610fr;align-items:end}
.ls-tx{padding-bottom:var(--sec)}
.pz-word{margin-top:16px;width:clamp(253px, 217.462px + 9.8718vw, 407px);height:auto}
.ls-tx .body{margin-top:clamp(20px, 17.692px + 0.6410vw, 30px)}
.lcards{display:grid;grid-template-columns:repeat(2,minmax(0,340px));margin-top:clamp(30px, 25.385px + 1.2821vw, 50px)}
.lc{background:#fff;text-align:center;padding-bottom:clamp(30px, 27.692px + 0.6410vw, 40px)}
.lc h3{height:clamp(44px, 40.308px + 1.0256vw, 60px);display:grid;place-items:center;color:#fff;font-size:clamp(16px, 15.538px + 0.1282vw, 18px);font-weight:700}
.lc.a h3{background:var(--gold)}.lc.b h3{background:var(--brown)}
.lc .ph{width:clamp(150px, 143.077px + 1.9231vw, 180px);aspect-ratio:1;margin:20px auto 0}
.lc p{margin-top:20px;font-size:clamp(15px, 14.769px + 0.0641vw, 16px);padding:0 16px}
.ls-dev .ph{aspect-ratio:610/804}
@media (max-width:1199px){.ls-in{grid-template-columns:600fr 340fr}} /* 1fr 340fr(오타: 글 칸이 1/341로 찌그러짐) → 600fr 340fr (2026-10-20) */
@media (max-width:767px){
  .ls-in{display:block;text-align:center}
  .ls-tx{padding-bottom:40px}
  .pz-word{margin-inline:auto}
  .lcards{grid-template-columns:1fr}
  .ls-dev .ph{aspect-ratio:320/422}
}
/* 포텐자 — 시술과정 */
.process{padding:var(--sec) 0}
.process .h2b,.effects .h2b{margin-top:8px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:60px;margin-top:clamp(20px, 13.077px + 1.9231vw, 50px)}
.st{position:relative}
.st+.st::before{content:'';position:absolute;left:-39px;top:calc(var(--sh) / 2 - 6px);width:18px;height:12px;background:url(g/step_arrow.png) center/18px 12px no-repeat}
.st{--sh:calc((min(1440px, 100vw - var(--gut) * 2) - 120px) / 3 * 260 / 440)}
.st .ph{aspect-ratio:440/260}
.st-lab{display:grid;grid-template-columns:auto 1fr;align-items:center;height:50px;padding:0 20px;background:#EDE2D7;color:var(--gold);font-size:clamp(16px, 15.538px + 0.1282vw, 18px);font-weight:700}
.st-lab span{margin-right:12px}
.st-lab{text-align:center}
.st-d{display:grid;place-items:center;min-height:84px;padding:12px 20px;background:var(--cream);text-align:center;font-size:clamp(15px, 14.769px + 0.0641vw, 16px)}
@media (max-width:767px){
  .process,.effects{text-align:center}
  .steps{grid-template-columns:1fr;gap:56px}
  .st{--sh:0px}
  .st+.st::before{left:50%;top:-34px;transform:translateX(-50%) rotate(90deg)}
  .st .ph{aspect-ratio:320/220}
}
/* 포텐자 — 효과 */
.effects{padding:0 0 var(--sec)}
.fxs{display:grid;grid-template-columns:1fr 40px 1fr 40px 1fr 40px 1fr;column-gap:20px;margin-top:clamp(20px, 13.077px + 1.9231vw, 50px);align-items:start}
.fx{border-top:2px solid var(--brown2);padding-top:18px}
.fx-n{display:block;font-family:'Cormorant',serif;font-size:50px;font-weight:700;color:var(--brown2);line-height:1.4}
.fx p{margin-top:8px;font-size:16px}
.fx .ph{margin-top:30px;aspect-ratio:300/180}
.fx-plus{align-self:start;margin-top:calc(152px + 27px)}
.fx-plus img{width:40px;height:40px}
@media (max-width:1199px){.fxs{grid-template-columns:1fr 1fr;gap:30px}.fx-plus{display:none}}
@media (max-width:767px){
  .fxs{grid-template-columns:1fr;gap:20px;max-width:300px;margin-inline:auto;text-align:left}
  .fx-plus{display:flex;justify-content:center;margin:0}
}
/* 포텐자 — 추천 */
.recommend{position:relative;background:var(--brown);color:#fff;padding:var(--sec) 0;overflow:hidden}
.rec-t{text-align:center}
.recs{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-top:clamp(30px, 25.385px + 1.2821vw, 50px)}
.rc{position:relative}
.rc .ph{aspect-ratio:272/331}
.rc-tx{position:absolute;left:20px;right:16px;bottom:20px}
.rc-lab{font-size:18px;font-weight:700;line-height:1.4;color:var(--sand)}
.rc-d{margin-top:8px;font-size:18px}
@media (max-width:1199px){.recs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.recs{grid-template-columns:1fr;max-width:272px;margin-inline:auto}}
/* 포텐자 — 주의사항 */
.care{padding:var(--sec) 0}
.care-in{display:grid;grid-template-columns:560fr 880fr}
.note{margin-top:20px;font-size:14px;color:rgba(34,34,34,.5)}
.cares{border-top:2px solid var(--gold)}
.cares li{display:flex;align-items:flex-start;gap:12px;padding:20px 20px;border-bottom:2px solid #DDD6C9;font-size:clamp(15px, 14.769px + 0.0641vw, 16px)}
.cares li img{width:24px;height:24px;flex:none;margin-top:1px}
@media (max-width:767px){.care-in{display:block}.care-hd{text-align:left}.cares{margin-top:30px}.cares li{padding:20px 0}}

/* 시안 이동 바(검토용) */
#fnav{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:4px;padding:6px;border-radius:30px;
  background:rgba(20,15,10,.82);backdrop-filter:blur(6px);font-size:13px;color:#fff;white-space:nowrap}
#fnav a{padding:6px 12px;border-radius:20px}
#fnav a.on{background:#fff;color:#111}
#fnav-x{width:28px;height:28px;font-size:18px;color:#fff}
#fnav-open{position:fixed;left:12px;bottom:12px;z-index:70;padding:6px 12px;border-radius:20px;background:rgba(20,15,10,.82);color:#fff;font-size:12px;display:none}
body.fnav-closed #fnav{display:none}
body.fnav-closed #fnav-open{display:block}
@media (max-width:1199px){#fnav{bottom:76px}#fnav-open{bottom:76px}}

/* 목차 */
.idx{background:#f4f1ea}
.idx-in{max-width:1100px;margin:0 auto;padding:60px 20px}
.idx h1{font-size:28px}
.idx-in>p{margin-top:8px;color:#555}
.idx-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:32px}
.idx-list a{display:block;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.idx-list img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top}
.idx-list span{display:block;padding:14px 16px;font-weight:700}
.idx-ref{margin-top:28px;font-size:14px}
.idx-ref a{margin-left:10px;text-decoration:underline}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* 실제 사이트 연결(2026-10-16) — 링크가 된 카드·버튼의 반응 */
a.dv{cursor:pointer;transition:background .25s,color .25s}
a.dv:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
a.dv.w:hover{background:#fff;color:var(--brown2);box-shadow:inset 0 0 0 1px #fff}
.mcard>a,.ecard>a{display:block}
.mcard .ph img,.ecard .ec-ph{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.mcard>a:hover .ph img{transform:scale(1.04)}
.mcard>a:hover h3,.ecard>a:hover h3{text-decoration:underline;text-underline-offset:3px}
.ct-card{transition:background .25s}
.ct-card:hover{background:rgba(255,255,255,.16)}
.ct-card:not(.call) a:hover .ct-t{text-decoration:underline;text-underline-offset:3px}
.ft-links a:hover,.hd-util>a:hover{text-decoration:underline;text-underline-offset:3px}
.hd-util>a{display:none}
@media (min-width:768px){.hd-util>a{display:block}}
.mnav-lang{display:flex;gap:14px;margin-left:auto}
.mnav-lang a{color:rgba(255,255,255,.8)}
/* 상단 메뉴 하위 메뉴 (2026-10-16 미러에서 추가 — 기존 사이트 하위 페이지 분류) */
.gnb{align-items:center;align-self:stretch}
.gnb .gi{position:relative;align-self:stretch;display:flex;align-items:center}
.gsub{position:absolute;top:100%;left:50%;min-width:160px;padding:10px 0;display:flex;flex-direction:column;background:rgba(26,16,5,.94);
  box-shadow:0 10px 24px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.gi:hover .gsub,.gi:focus-within .gsub{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.gnb .gsub a{padding:8px 22px;font-size:14px;text-align:center;color:rgba(255,255,255,.78)}
.gnb .gsub a::after{display:none}
.gnb .gsub a:hover,.gnb .gsub a.on{color:var(--sand)}
.mnav-list .mg>summary{padding:12px 24px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}
.mnav-list .mg>summary::-webkit-details-marker{display:none}
.mnav-list .mg>summary::after{content:'';width:7px;height:7px;margin-right:4px;border-right:1.5px solid;border-bottom:1.5px solid;opacity:.7;transform:rotate(45deg);transition:transform .2s}
.mnav-list .mg[open]>summary::after{transform:rotate(-135deg)}
.mnav-list .mg.on>summary{color:var(--sand)}
.mg-sub{display:flex;flex-direction:column;padding:2px 0 10px;background:rgba(255,255,255,.04)}
.mnav-list .mg-sub a{padding:9px 24px 9px 40px;font-size:15px;color:rgba(255,255,255,.75)}
.mnav-list .mg-sub a.on{color:var(--sand)}
/* 3단 메뉴(.gi2/.gsub2 · .mg2/.mg-sub2) + 페이지 없는 하위 항목(span.off, 회색) — 2026-10-20 */
.gnb .gsub span{padding:8px 22px;font-size:14px;text-align:center;color:rgba(255,255,255,.4)}
.gi2{position:relative;display:flex;flex-direction:column}
.gnb .gi2>a,.gnb .gi2>span{padding:8px 34px}
.gi2::after{content:'';position:absolute;right:16px;top:50%;width:5px;height:5px;border-top:1.5px solid;border-right:1.5px solid;opacity:.6;transform:translateY(-50%) rotate(45deg);pointer-events:none}
.gi2:hover,.gi2:focus-within{background:rgba(255,255,255,.06)}
.gsub2{position:absolute;left:100%;top:-10px;min-width:180px;padding:10px 0;display:flex;flex-direction:column;background:rgba(26,16,5,.94);border-left:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateX(-6px);transition:opacity .2s,transform .2s,visibility 0s .2s}
.gi2:hover>.gsub2,.gi2:focus-within>.gsub2{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mnav-list .mg-sub span{padding:9px 24px 9px 40px;font-size:15px;color:rgba(255,255,255,.4)}
.mnav-list .mg2>summary{padding:9px 24px 9px 40px;font-size:15px;color:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}
.mnav-list .mg2>summary::-webkit-details-marker{display:none}
.mnav-list .mg2>summary::after{content:'';width:6px;height:6px;margin-right:4px;border-right:1.5px solid;border-bottom:1.5px solid;opacity:.6;transform:rotate(45deg);transition:transform .2s}
.mnav-list .mg2[open]>summary::after{transform:rotate(-135deg)}
.mg-sub2{display:flex;flex-direction:column;padding:0 0 6px}
.mnav-list .mg-sub2 a,.mnav-list .mg-sub2 span{padding:8px 24px 8px 56px;font-size:14px}
/* TV — 분류 탭 + 큰 영상 + 목록 (2026-10-16 미러에서 변경) */
.tv-ch{display:inline-flex;align-items:center;gap:5px;margin-top:12px;font-size:15px;color:#666}
.tv-ch svg{width:10px;height:10px}
.tv-ch:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tv-tabs{display:flex;gap:clamp(22px,2.4vw,40px);overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(34,34,34,.12)}
.tv-tabs::-webkit-scrollbar{display:none}
.tv-tabs button{flex:none;margin-bottom:-1px;padding:0 2px 14px;border-bottom:2px solid transparent;font-size:clamp(15px, 14.538px + 0.1282vw, 17px);color:#888;white-space:nowrap;transition:color .2s,border-color .2s}
.tv-tabs button:first-child{margin-left:auto}.tv-tabs button:last-child{margin-right:auto}
.tv-tabs button:hover{color:var(--ink)}
.tv-tabs button[aria-pressed="true"]{color:var(--ink);font-weight:600;border-color:var(--gold)}
.tv-body{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;margin-top:clamp(28px, 24.769px + 0.8974vw, 42px)}
.tv-player{position:relative;aspect-ratio:16/9;background:#111;overflow:hidden}
.tv-player img,.tv-player iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.tv-play{position:absolute;left:50%;top:50%;width:clamp(56px, 51.385px + 1.2821vw, 76px);height:clamp(56px, 51.385px + 1.2821vw, 76px);border-radius:50%;background:rgba(255,255,255,.92);
  display:grid;place-items:center;transform:translate(-50%,-50%);box-shadow:0 6px 22px rgba(0,0,0,.28);transition:transform .2s}
.tv-play[hidden]{display:none}
.tv-play:hover{transform:translate(-50%,-50%) scale(1.07)}
.tv-play svg{width:34%;height:34%;margin-left:6%;fill:var(--dark)}
.tv-info{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:18px}
.tv-title{font-size:clamp(17px, 15.846px + 0.3205vw, 22px);font-weight:700;line-height:1.45}
.tv-tag{display:inline-block;margin-top:10px;padding:3px 11px;border-radius:20px;background:rgba(177,136,91,.16);color:var(--brown);font-size:13px;line-height:1.5}
.tv-yt{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:5px;font-size:14px;color:#666}
.tv-yt svg{width:17px;height:12px}
.tv-yt:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tv-list ul{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
.tv-list ul::-webkit-scrollbar{display:none}
.tv-list li{flex:0 0 200px;scroll-snap-align:start}
.tv-list li[hidden]{display:none}
.tv-item{display:flex;flex-direction:column;gap:8px;width:100%;text-align:left;color:var(--ink)}
.tv-th{position:relative;display:block;flex:none;aspect-ratio:16/9;overflow:hidden;background:#ddd;outline:2px solid transparent;outline-offset:-2px;transition:outline-color .2s}
.tv-th img{width:100%;height:100%;object-fit:cover}
.tv-it{font-size:14px;font-weight:500;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tv-item[aria-current="true"] .tv-th{outline-color:var(--gold)}
.tv-item[aria-current="true"] .tv-it{font-weight:700}
.tv-item:hover .tv-it{text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){.tv-info{flex-direction:column;gap:8px}.tv-yt{margin-top:0}}
@media (min-width:1024px){
  .tv-body{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:clamp(32px,2.6vw,50px)}
  .tv-list{position:relative}
  .tv-list ul{position:absolute;inset:0;flex-direction:column;gap:6px;overflow:hidden auto;scroll-snap-type:none;scrollbar-width:thin;scrollbar-color:rgba(34,34,34,.25) transparent;padding-right:8px}
  .tv-list ul::-webkit-scrollbar{display:block;width:4px}
  .tv-list ul::-webkit-scrollbar-thumb{background:rgba(34,34,34,.25)}
  .tv-list li{flex:none}
  .tv-item{flex-direction:row;align-items:center;gap:16px;padding:8px 0 8px 14px;border-left:2px solid transparent;transition:border-color .2s}
  .tv-item[aria-current="true"]{border-color:var(--gold)}
  .tv-item[aria-current="true"] .tv-th{outline-color:transparent}
  .tv-th{width:clamp(132px,9.4vw,180px)}
  .tv-it{font-size:15px}
}
/* 리뷰 — 화살표(가운데 카드 양옆 틈) + 아래 점 (2026-10-16) */
/* 화살표는 카드 줄 위 오른쪽 — 가운데 다음 카드의 오른쪽 끝에 맞춤 (2026-10-16 사용자 요청) */
.sl-review{--ar:var(--gut);padding-top:76px}
.sl-review .sl-prev,.sl-review .sl-next{top:0;width:56px;height:56px;background:transparent;transition:opacity .3s,background-color .25s}
.sl-review .sl-prev img,.sl-review .sl-next img{width:56px;height:56px;filter:brightness(0) invert(1)}
.sl-review .sl-prev:hover,.sl-review .sl-next:hover{background:rgba(255,255,255,.12)}
.sl-review .sl-prev{left:auto;right:calc(var(--ar) + 66px)}
.sl-review .sl-next{right:var(--ar)}
/* 1200px 이상: 오른쪽 퀵메뉴(오른쪽 20px + 폭 88px) 바로 왼쪽까지 — 24px 띄움 (2026-10-16 사용자 요청) */
@media (min-width:1200px){.sl-review{--ar:132px}}
.rv-dots{display:flex;margin-top:clamp(24px, 21.231px + 0.7692vw, 36px)}
.rv-dots button{background:rgba(255,255,255,.35)}
.rv-dots button[aria-current]{background:var(--sand)}

/* 스크롤 애니메이션 (2026-10-16): JS가 .rv를 붙이고, 화면에 들어오면 .rv-in */
.rv{opacity:0;transform:perspective(1200px) translateY(56px) rotateX(14deg);transform-origin:50% 0;transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rv.rv-in{opacity:1;transform:none}
/* 오시는 길: 실제 지도 + 네이버·카카오 지도 바로가기 (2026-10-16) */
.loc-map{position:relative}
.loc-frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.loc-links{position:absolute;left:62px;bottom:22px;display:flex;gap:8px}
.loc-links a{padding:9px 16px;border-radius:999px;background:#fff;color:var(--ink);font-size:14px;font-weight:600;line-height:1;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.loc-links a:hover{background:var(--cream)}
/* 메인 이벤트: 실제 이벤트 썸네일 (2026-10-16) */
.ec-ph img{display:block;width:100%;height:100%;object-fit:contain}
/* 3D 모션 (2026-10-16): 첫 화면 문구가 세워지며 등장 + 배경 깊이감(JS), 사진 카드 마우스 기울이기(JS가 .tilt 부여) */
.hero-in>*,.shero-in>*{animation:dm3dIn 1.1s cubic-bezier(.2,.7,.2,1) both}
.hero-in>:nth-child(2),.shero-in>:nth-child(2){animation-delay:.15s}
.hero-in>:nth-child(3),.shero-in>:nth-child(3){animation-delay:.3s}
@keyframes dm3dIn{from{opacity:0;transform:perspective(900px) translateY(40px) rotateX(40deg)}to{opacity:1;transform:none}}
.hero-in,.shero-in,.hero-bg img,.shero-bg img{transition:transform .6s cubic-bezier(.2,.7,.2,1);will-change:transform}
.tilt{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .7s cubic-bezier(.2,.7,.2,1),box-shadow .7s}
.tilt.tilt-on{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(1.025);transition:transform .15s ease-out,box-shadow .3s;box-shadow:0 26px 50px -20px rgba(0,0,0,.38);z-index:3}
.tilt-gl{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.3),rgba(255,255,255,0) 55%);opacity:0;transition:opacity .4s}
.tilt-on>.tilt-gl{opacity:1}
/* 지난 이벤트 '종료' 표시 — 2026-10-20 */
.ec-end{display:inline-block;margin-right:8px;padding:2px 9px;border-radius:999px;background:#8a8580;color:#fff;font-size:12px;line-height:1.5;vertical-align:2px}
.ecard.ended .ec-ph img{opacity:.55}
/* 기존 홈페이지에서 되살린 항목 — 2026-10-20: 퀵메뉴 6개(네이버예약·온라인상담 추가), 부작용 안내, 피부과의사회 배지, KAHF */
@media (min-width:1200px){.q-box{padding:22px 0;gap:14px}}
@media (max-width:1199px){.q-box{grid-template-columns:repeat(6,1fr)}.q-box a,.q-box span{font-size:11px;letter-spacing:-.04em}}
.ft-note{margin-top:clamp(16px, 14.154px + 0.5128vw, 24px);font-size:clamp(12px, 11.538px + 0.1282vw, 13px);line-height:1.6;color:rgba(255,255,255,.5)}
.doc-mark{display:flex;align-items:center;gap:14px;margin-top:clamp(30px, 23.077px + 1.9231vw, 50px)}
.dm-logo{flex:none;display:grid;place-items:center;padding:8px 12px;border-radius:8px;background:#76b82a}
.dm-logo img{width:94px;height:36px}
.doc-mark p{font-size:clamp(13px, 12.538px + 0.1282vw, 15px);line-height:1.5;color:rgba(34,34,34,.7)}
.doc-mark b{display:block;font-weight:700;color:var(--brown2)}
.kahf{display:flex;align-items:center;justify-content:center;gap:clamp(8px, 6.154px + 0.5128vw, 16px);margin:clamp(24px, 19.385px + 1.2821vw, 44px) auto clamp(30px, 25.385px + 1.2821vw, 50px);text-align:center;color:#ccb184}
.kahf img{width:auto;height:clamp(46px, 41.846px + 1.1538vw, 64px)}
.kahf-t{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(34px, 30.308px + 1.0256vw, 50px);line-height:1;letter-spacing:.08em}
.kahf-s{margin-top:6px;font-size:clamp(13px, 12.308px + 0.1923vw, 16px);color:rgba(255,255,255,.85)}
/* PC 오른쪽 고정 퀵메뉴(오른쪽 20px + 폭 88px)에 본문이 가리지 않게 — 1200px 이상에서 본문 좌우 여백을 136px로(슬라이더 화살표 반쪽 포함) (2026-10-20) */
@media (min-width:1200px){
  main{--gut:136px}
  .loc-map{margin-right:128px}
  .ct-grid{grid-template-columns:repeat(4,minmax(0,240px))}
}
/* 모바일 줄바꿈 정리 — 2026-10-20: 짧은 캡션은 줄 길이를 고르게 */
.sig-cap p{text-wrap:balance}
main p{text-wrap:pretty}
.rc-d,.st-lab{text-wrap:balance}
/* 외국어 상담 카드 → 실제 채널(위챗 QR 팝업·LINE·왓츠앱) — 2026-10-20 */
.ct-card>a:hover{background:rgba(255,255,255,.06)}
.ct-card>a:hover .ct-ar{transform:translateX(4px)}
.qr-dlg{margin:auto;border:0;border-radius:16px;padding:36px 32px 28px;width:min(340px,calc(100vw - 40px));text-align:center;color:var(--ink);background:#fff}
.qr-dlg::backdrop{background:rgba(0,0,0,.55)}
.qr-dlg img{display:block;width:234px;height:234px;margin:16px auto 0;image-rendering:pixelated}
.qr-t{font-size:18px;font-weight:700}
.qr-id{margin-top:14px;font-size:15px}
.qr-d{margin-top:6px;font-size:13px;line-height:1.5;color:#666}
.qr-x{position:absolute;top:8px;right:10px;width:40px;height:40px;font-size:28px;line-height:1;color:#888}
/* 모바일 터치 영역 넓히기(보이는 크기는 그대로) — 2026-10-20 */
.dots{gap:0;margin-top:8px}
.dots button{width:16px;height:32px;padding:12px 4px;background-clip:content-box}
.rv-dots{margin-top:calc(clamp(24px, 21.231px + 0.7692vw, 36px) - 12px)}
.menu-btn{width:44px;height:44px;padding:8px;margin:-8px}
.crumb .home{display:inline-grid;place-items:center;width:40px;height:40px;margin:-8px}
.tv-ch{padding:10px 0;margin-top:2px}
.tv-yt{padding-block:10px;margin-block:-10px}
@media (max-width:767px){
  .ft-links a{display:inline-block;padding:8px 0}
  .ft-links{margin-top:22px}
  .ft-info a{display:inline-block;padding:6px 0;margin-block:-6px}
}
/* 모바일 첫 로딩 폭 고정 — 2026-10-20: html 이 visible 이면 body 의 overflow-x:clip 이 뷰포트로 넘어가
   등장 애니메이션(원근 회전)·히어로 확대로 문서 폭이 화면보다 넓어진다(360px 폰에서 405px). html 에도 clip 을 걸어 body 가 직접 자른다. */
html{overflow-x:clip}
/* 밝은 헤더 — 밝은 히어로 위와 스크롤 고정 헤더: 짙은 글자·로고(원본 로고색 #3e3e3e)·밝은 하위메뉴 (2026-10-20, 10-21 서브 히어로도 밝아져 전 페이지) */
.hd{color:var(--ink)}
.hd .lg{filter:brightness(0) invert(.24)}
.hd .menu-btn i,.hd .hd-util>i{background:var(--ink)}
.hd .gsub,.hd .gsub2{background:rgba(249,241,232,.97);box-shadow:0 10px 24px rgba(98,75,51,.14)}
.hd .gsub2{border-left-color:rgba(98,75,51,.1)}
.hd .gnb .gsub a{color:rgba(34,34,34,.82)}
.hd .gnb .gsub span{color:rgba(34,34,34,.38)}
.hd .gnb .gsub a:hover,.hd .gnb .gsub a.on{color:var(--brown)}
.hd .gi2:hover,.hd .gi2:focus-within{background:rgba(98,75,51,.06)}
/* 밝은 색감 — 2026-10-21 사용자 참고 이미지 팔레트: 화이트 #FFF · 샴페인 베이지 #EADCCB · 샌드 #D9C3A5 · 브론즈 골드 #8A6B45 · 다크 브라운 #2A2420.
   어두운 구역(리뷰·외국어 상담·위치·푸터·About DM·포텐자 추천·서브 히어로·모바일 메뉴)을 밝게, 글자는 다크 브라운. 사진 위 글자(카드 캡션)는 그대로 흰색. */
:root{--champ:#EADCCB;--sandb:#D9C3A5;--ink:#2A2420;--ivory:#F4ECE1;--gray:#FAF6F1;--brown:#8A6B45}
.eb.sand,.on-dark .eb,.contact .eb,.shero .eb{color:var(--brown)}
.on-dark{color:var(--ink)}
.blob{background:rgba(217,195,165,.45)}
.faq-it,.faq-it:first-of-type{border-color:#CDB89C}
.nav-dim{background:rgba(42,36,32,.45)}
.q-top{background:rgba(138,107,69,.7)}
@media (min-width:1200px){.q-box{background:rgba(234,220,203,.9);box-shadow:0 4px 20px rgba(98,75,51,.12),inset 0 0 0 1px rgba(138,107,69,.16)}}
@media (max-width:1199px){.q-box{background:rgba(250,246,241,.97);border-top-color:#E6D9C8}}
/* 서브 히어로 — 사진은 원래 밝다(덮개만 50% 검정이었다) */
.shero{color:var(--ink)}
.crumb .chev{filter:brightness(0);opacity:.55}
/* 리뷰 */
.review{background:var(--champ);color:var(--ink)}
.review a.dv.w{color:var(--brown2)}
.review a.dv.w:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
.sl-review .sl-prev img,.sl-review .sl-next img{filter:none}
.sl-review .sl-prev:hover,.sl-review .sl-next:hover{background:rgba(42,36,32,.06)}
.rv-dots button{background-color:rgba(42,36,32,.2)}
.rv-dots button[aria-current]{background-color:var(--brown)}
.dots button[aria-current]{background-clip:content-box} /* 현재 점: 위 background 단축속성이 터치 영역용 clip 을 풀어 세로 알약 모양이 되던 것 */
/* 외국어 상담 */
.contact{background:var(--ivory);color:var(--ink)}
/* 카드는 진한 갈색(2026-10-21 사용자 요청: 흰 카드 → 어두운 갈색) */
.ct-card{background:#3D3027;box-shadow:none;color:#fff}
.ct-card:hover,.ct-card.call:hover{background:#4D3E33;box-shadow:0 14px 30px -14px rgba(42,36,32,.55)}
.ct-card>a:hover{background:transparent}
.ct-phone{background:var(--brown)}
.ct-code{color:var(--sandb)}
.ct-d{color:rgba(255,255,255,.72)}
.kahf{color:var(--brown)}
.kahf-s{color:rgba(42,36,32,.75)}
/* 위치·진료시간 */
.loc{background:#fff;color:rgba(42,36,32,.8)}
.loc-t{color:var(--ink)}
/* 푸터 */
.ft{background:var(--champ);color:#4B4036}
.ft .flogo{filter:brightness(0) invert(.24)}
.ft-links{color:#4B4036}
.ft-links span+span::before,.ft-info span+span::before{background:rgba(42,36,32,.25)}
.ft-links .nb{color:var(--brown2)}
.ft-note{color:#5E5246}
/* 소개 About DM · 포텐자 추천 */
.aboutdm{background:var(--champ);color:var(--ink)}
.recommend{background:var(--champ);color:var(--ink)}
.rc-tx{color:#fff}
/* 모바일 메뉴 */
.mnav{background:var(--cream);color:var(--ink)}
.mnav .lg{filter:brightness(0) invert(.24)}
.mnav-hd{border-bottom-color:rgba(98,75,51,.14)}
.mnav-list span,.mnav-list .mg-sub span{color:rgba(42,36,32,.4)}
.mnav-list a.on,.mnav-list .mg.on>summary,.mnav-list .mg-sub a.on{color:var(--brown)}
.mnav-list .mg-sub a,.mnav-list .mg2>summary{color:rgba(42,36,32,.78)}
.mg-sub{background:rgba(138,107,69,.06)}
.mnav-util,.mnav-lang a{color:rgba(42,36,32,.72)}
.mnav-util i{background:rgba(42,36,32,.3)}
/* 구역 배경 무늬·움직임 — 2026-10-21 사용자 요청("배경이 재미없다, 무늬나 움직이는 효과"). HTML·JS는 그대로, 구역의 가상요소만 쓴다.
   ::before 비단빛: 옅은 샴페인·흰 빛이 천천히 흐른다(가로로 넓게 깔고 translate만 → 위아래 끝은 mask로 흐려 구역 경계에 잘린 자국이 없다).
   ::after 비단결 선(bg_silk.svg, 천천히 일렁임) 또는 큰 외곽선 글자 흐름(구역 아래쪽). 첫 구역(히어로)·지도 구역은 제외. */
main>section:not(:first-child):not(.loc),.ft{position:relative;isolation:isolate;overflow:hidden;overflow:clip}
main>section:where(:not(:first-child):not(.loc):not(.sig))::before{content:'';position:absolute;inset:0 -35%;z-index:-2;pointer-events:none;
  background:radial-gradient(circle at 24% 42%,rgba(234,220,203,.9),rgba(234,220,203,0) min(30vw,460px)),
    radial-gradient(circle at 70% 60%,rgba(217,195,165,.42),rgba(217,195,165,0) min(26vw,400px)),
    radial-gradient(circle at 52% 34%,rgba(255,255,255,.9),rgba(255,255,255,0) min(22vw,340px));
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  animation:bgSilk 24s ease-in-out infinite alternate}
main>section:nth-child(even)::before{animation-duration:31s;animation-direction:alternate-reverse}
.review::before,.aboutdm::before,.recommend::before{background:radial-gradient(circle at 24% 42%,rgba(255,255,255,.6),rgba(255,255,255,0) min(30vw,460px)),
    radial-gradient(circle at 70% 60%,rgba(196,166,128,.5),rgba(196,166,128,0) min(26vw,400px)),
    radial-gradient(circle at 52% 30%,rgba(255,255,255,.45),rgba(255,255,255,0) min(22vw,340px))}
@keyframes bgSilk{from{transform:translate3d(-11%,-2%,0) scale(1)}to{transform:translate3d(11%,2%,0) scale(1.06)}}
.sig .b1{animation:bgBlob 17s ease-in-out infinite alternate}
.sig .b2{animation:bgBlob 23s ease-in-out infinite alternate-reverse}
@keyframes bgBlob{from{transform:translate3d(-6vw,-3vw,0) scale(.9)}to{transform:translate3d(7vw,4vw,0) scale(1.12)}}
/* 비단결 선 — 2026-10-21 물결 원(점·점선 원)이 촌스럽다는 사용자 의견으로 교체: 히어로 비단처럼 가는 선 다발이 꼬이며 흐른다.
   양 끝은 SVG 안에서 투명하게 흐려져 잘린 자국이 없고, 좌우로 조금씩 흔들리며 폭이 숨쉬듯 바뀐다. */
.doc::after,.event::after,.contact::after,.aboutdm::after,.faq::after,.pz-intro::after,.process::after,.care::after{content:'';position:absolute;z-index:-1;pointer-events:none;
  left:-6%;right:-6%;top:12%;height:clamp(220px,34vw,520px);background:url(g/bg_silk.svg) center/100% 100% no-repeat;animation:bgSilkLine 19s ease-in-out infinite alternate}
.event::after{top:auto;bottom:4%;scale:-1 1;animation-duration:23s}
.contact::after{top:6%}
.aboutdm::after{top:2%;scale:-1 1;animation-duration:22s}
.faq::after{top:16%}
.pz-intro::after{top:-4%;scale:-1 1}
.process::after{top:4%;animation-duration:23s}
.care::after{top:auto;bottom:2%;scale:-1 1}
@keyframes bgSilkLine{from{transform:translate3d(-3%,0,0) scaleY(.88)}to{transform:translate3d(3%,0,0) scaleY(1.12)}}
/* 큰 외곽선 글자 흐름 — 같은 글을 4번 이어 쓰고 -50%(2번 길이)만큼 옮겨 끊김 없이 돈다 */
.media::after,.review::after,.research::after,.recommend::after,.ft::after{position:absolute;left:0;bottom:-.2em;z-index:-1;pointer-events:none;width:max-content;white-space:nowrap;
  font-family:'Cormorant',serif;font-weight:500;font-size:clamp(84px,13vw,230px);line-height:1;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(138,107,69,.3);
  content:'DM DERMATOLOGY\2003\00B7\2003 DM DERMATOLOGY\2003\00B7\2003 DM DERMATOLOGY\2003\00B7\2003 DM DERMATOLOGY\2003\00B7\2003 ';animation:bgFlow 80s linear infinite}
.review::after{content:'DM REAL MODEL\2003\00B7\2003 DM REAL MODEL\2003\00B7\2003 DM REAL MODEL\2003\00B7\2003 DM REAL MODEL\2003\00B7\2003 ';-webkit-text-stroke-color:rgba(138,107,69,.34);animation-direction:reverse}
.recommend::after{content:'POTENZA\2003\00B7\2003 DM DERMATOLOGY\2003\00B7\2003 POTENZA\2003\00B7\2003 DM DERMATOLOGY\2003\00B7\2003 '}
.recommend::after{-webkit-text-stroke-color:rgba(138,107,69,.34);animation-direction:reverse}
.ft::after{-webkit-text-stroke-color:rgba(138,107,69,.32)}
.ft{padding-bottom:calc(clamp(84px,13vw,230px)*.62 + clamp(28px,3vw,44px))} /* 큰 글자가 저작권 줄 아래에 오게 */
@keyframes bgFlow{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media (max-width:767px){
  .media::after,.review::after,.research::after,.recommend::after,.ft::after{animation-duration:60s}
  .doc::after,.event::after,.contact::after,.aboutdm::after,.faq::after,.pz-intro::after,.process::after,.care::after{left:-80%;right:-80%;height:240px;opacity:.75} /* 좁은 화면: 가로로 넓게 깔아 완만한 가운데만 보이게 */
}
@media (prefers-reduced-motion:reduce){main>section::before,main>section::after,.ft::after,.sig .blob{animation:none!important}}
/* PC 퀵메뉴 마우스 올림 — 2026-10-21 사용자 요청("마우스 갖다대면 색상이 진해지는 효과"): 메뉴 전체가 한 톤 진해지고,
   올린 항목은 진한 칸 + 아이콘·글자 짙게. 항목에 칸 여백(위7·아래5)을 준 만큼 간격·안쪽여백을 줄여 전체 크기는 그대로. */
@media (min-width:1200px){
  .q-box{padding:15px 0 17px;gap:2px;transition:background-color .3s,box-shadow .3s}
  .q-box a{width:74px;padding:7px 0 5px;border-radius:18px;transition:background-color .25s}
  .q-box span{transition:color .25s}
  .q-box img{transition:filter .25s}
  .q-box:hover{background-color:rgba(222,201,174,.97);box-shadow:0 8px 26px rgba(98,75,51,.2),inset 0 0 0 1px rgba(138,107,69,.3)}
  .q-box a:hover,.q-box a:focus-visible{background-color:rgba(138,107,69,.26)}
  .q-box a:hover span,.q-box a:focus-visible span{color:#2A2420}
  .q-box a:hover img,.q-box a:focus-visible img{filter:brightness(.5)}
}
/* 밝게 + 포인트 강조 — 2026-10-21 사용자 요청("아직도 어두운 느낌… 더 밝게, 강조할 포인트·섹션은 임팩트 있게 눈에 바로 띄게").
   ① 바탕: 아이보리·샴페인을 한 단계 밝히고 구역 비단빛을 옅게. ② 사진 카드의 진한 덮개(검정 70%·짙은 갈색 60%)는 글자 밑에만.
   ③ 포인트: 머리말 선·제목·핵심 문구 형광펜·버튼·칩·STEP·번호를 브론즈 골드로 또렷하게. 외국어 상담 카드(진한 갈색)는 그대로. */
:root{--ivory:#FBF7F1;--champ:#F3EADF;--gray:#FDFBF8}
main>section::before{opacity:.6}
.blob{background:rgba(217,195,165,.3)}
/* 사진 카드 덮개 */
.sig-card .ov,.rcard .ov{background-image:linear-gradient(180deg,rgba(42,36,32,0) 50%,rgba(42,36,32,.16) 68%,rgba(42,36,32,.56) 100%)!important;transition:opacity .5s}
.sig-card:not([data-p="0"]) .ov{opacity:0}
.sig-cap,.rc-cap{text-shadow:0 1px 14px rgba(42,36,32,.4)}
.sig-cap .dv{text-shadow:none}
/* 포텐자 추천: 어두운 사진 위 글자 → 사진 + 흰 글상자 */
.rc{display:flex;flex-direction:column;background:#fff;box-shadow:0 18px 36px -22px rgba(98,75,51,.5)}
.rc .ov{display:none}
.rc-tx{position:static;flex:1;padding:18px 20px 22px;color:var(--ink);border-top:3px solid var(--brown)}
.rc-lab{font-size:15px;color:var(--brown)}
.rc-d{margin-top:6px;font-size:17px;font-weight:600;line-height:1.5}
/* 머리말(영문 작은 글자) — 굵게 + 양옆(가운데 정렬)·앞(왼쪽 정렬) 선 */
.eb{color:var(--brown);font-weight:600}
.sec-hd .eb,.intro-hd .eb,.ab-hd .eb,.rs-hd .eb,.pzi-hd .eb,.process .eb,.effects .eb{display:inline-flex;align-items:center;gap:14px}
.sec-hd .eb::before,.sec-hd .eb::after,.intro-hd .eb::before,.ab-hd .eb::before,.rs-hd .eb::before,.pzi-hd .eb::before,.process .eb::before,.effects .eb::before{
  content:'';flex:none;width:clamp(20px,2.2vw,36px);height:1px;background:currentColor;opacity:.7}
.sec-hd .eb::after{margin-left:-.2em} /* 글자 간격(.2em)이 끝에도 붙어 오른쪽 선이 멀어 보이던 것 */
/* 제목 */
.h2{font-weight:600;color:var(--ink);font-size:clamp(30px, 23.538px + 1.7949vw, 58px)}
.sig .h2 span{background:linear-gradient(100deg,#B48A52,#8A6B45 55%,#B48A52);-webkit-background-clip:text;background-clip:text;color:transparent!important}
/* 핵심 문구 형광펜 */
.ct-lead b,.rec-t span,.doc-head{color:var(--brown2)!important;background:linear-gradient(transparent 60%,rgba(217,195,165,.6) 60%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.doc-head{display:inline}
.rec-t span{padding:0 .08em}
/* 버튼 */
.sig-cap a.dv.w{background:#fff;color:var(--ink);box-shadow:none}
.sig-cap a.dv.w:hover{background:var(--ink);color:#fff;box-shadow:none}
/* 브론즈 채움 → 흰 바탕 + 브론즈 선·글자 (2026-10-21 사용자: 골드·브론즈로 채운 막대 색이 마음에 안 듦, 비교안 C 선택) */
.review a.dv.w{background:#fff;color:#6F5434;box-shadow:inset 0 0 0 1px var(--brown),0 8px 18px -12px rgba(98,75,51,.5);height:48px;padding:0 28px}
.review a.dv.w:hover{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1px var(--ink)}
/* 포텐자: 특징 칩·STEP·효과 번호·비침습/침습 카드 머리 */
.chips li{background:#fff;color:#6F5434;box-shadow:inset 0 0 0 1px var(--brown),0 8px 18px -12px rgba(98,75,51,.5);font-weight:700}
.chips .down{color:#B48A52}
.st-lab{background:var(--champ);color:var(--brown2)}
.st-lab span{padding:3px 10px;border-radius:14px;background:#fff;color:#6F5434;box-shadow:inset 0 0 0 1px var(--brown);font-size:.8em;letter-spacing:.04em}
.lc{box-shadow:0 14px 30px -20px rgba(98,75,51,.45)}
.lc h3,.lc.a h3,.lc.b h3{background:#fff;color:#6F5434;box-shadow:inset 0 3px 0 var(--brown),inset 0 -1px 0 var(--champ)}
.fx-n{background:linear-gradient(135deg,#C29A62,#8A6B45);-webkit-background-clip:text;background-clip:text;color:transparent}
.fx{border-top-color:var(--brown)}
/* FAQ: 펼친 질문을 띄움 */
.faq-it[open]{background:rgba(255,255,255,.75)}
.faq-it[open] .fq{font-weight:700;color:var(--brown2)}
.fn{color:var(--brown)}
/* 시그니처 카드 양옆 화살표 — 2026-10-21 사용자 요청("카드들을 옆으로 댕기는 화살표 추가").
   PC·태블릿: 가운데 카드와 옆 카드 사이 틈(가운데서 카드폭 × .5595)에 흰 원. 모바일: 카드 양끝 안쪽. 마우스 올리면 짙은 갈색(터치 기기는 누른 뒤 색이 남아 제외) */
.sig-prev,.sig-next{--ao:calc(var(--cw) * .5595);position:absolute;top:50%;z-index:4;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;
  background:#fff;box-shadow:0 10px 24px -8px rgba(42,36,32,.45);transition:background-color .25s,box-shadow .25s}
.sig-prev{left:calc(50% - var(--ao))}.sig-next{left:calc(50% + var(--ao))}
.sig-prev img,.sig-next img{width:100%;height:100%;transition:filter .25s}
@media (hover:hover){
  .sig-prev:hover,.sig-next:hover{background:var(--ink);box-shadow:0 12px 26px -8px rgba(42,36,32,.6)}
  .sig-prev:hover img,.sig-next:hover img{filter:invert(1)}
}
@media (max-width:767px){
  .sig-prev,.sig-next{--ao:calc(var(--cw) / 2 - 6px);width:40px;height:40px;margin:-20px 0 0 -20px;background:rgba(255,255,255,.88)}
}
/* 다국어 11개 — 2026-10-21 사용자 요청("knsy.co.kr처럼 11개 국어"). 둥근 국기 그림(g/flag/, flag-icons MIT — 윈도 크롬은 국기 이모지가 글자로 보여서).
   사이트가 있는 언어(한국어·English·简体中文·日本語·Русский)만 링크, 나머지 6개는 흐리게 + 누르면 '준비중'.
   맨 위 띠 오른쪽(768px~): 국기만, 이름은 말풍선 / 지구본 메뉴·모바일 메뉴: 2열 국기 + 이름 */
.lf{position:relative;display:flex;align-items:center;flex:none}
.lf img{width:24px;height:24px;flex:none;border-radius:50%;box-shadow:0 0 0 1px rgba(42,36,32,.16);transition:transform .2s,box-shadow .2s}
.lf[aria-current] img{box-shadow:0 0 0 2px #fff,0 0 0 3px var(--brown)}
.lf.soon{cursor:default}
.lf.soon img{opacity:.4;filter:grayscale(.6)}
@media (hover:hover){.lf:not(.soon):hover img{transform:translateY(-2px);box-shadow:0 0 0 1px var(--brown),0 5px 10px -4px rgba(42,36,32,.45)}}
.tb-lang{display:none;margin-left:auto;align-items:center;gap:7px}
@media (min-width:768px){.tb-lang{display:flex}}
.tb-lang .lf-n{position:absolute;left:50%;top:calc(100% + 8px);z-index:3;padding:5px 9px;border-radius:5px;background:var(--ink);color:#fff;
  font-family:'Pretendard Variable',sans-serif;font-size:12px;line-height:1.3;white-space:nowrap;pointer-events:none;
  opacity:0;visibility:hidden;transform:translate(-50%,-3px);transition:opacity .2s,transform .2s,visibility .2s}
.tb-lang .lf:nth-last-child(-n+2) .lf-n{left:auto;right:-4px;transform:translateY(-3px)} /* 끝쪽 말풍선은 오른쪽 맞춤(화면 밖으로 안 나가게) */
.tb-lang .lf-n small{margin-left:5px;color:var(--sandb);font-size:inherit}
.tb-lang .lf:hover .lf-n,.tb-lang .lf:focus-visible .lf-n,.tb-lang .lf.tip-on .lf-n{opacity:1;visibility:visible;transform:translate(-50%,0)}
.tb-lang .lf:nth-last-child(-n+2):is(:hover,:focus-visible,.tip-on) .lf-n{transform:none}
.mnav-util{flex-wrap:wrap}
.mnav-lang{flex-basis:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin:14px -8px 0}
.mnav-lang .lf{display:flex;gap:9px;min-height:44px;padding:6px 8px;border-radius:6px;text-align:left;line-height:1.3;color:var(--ink)}
.mnav-lang .lf.soon{color:rgba(42,36,32,.5)}
.mnav-lang .lf-n small{display:block;font-size:11px;color:var(--brown)}
/* 소개 페이지 보강 — 2026-10-21 사용자 요청("내용이 너무 없고 layout 너무 간단하고 재미없다 → 내용·layout·디자인 강화").
   문구는 모두 기존 사이트(진료안내 s1030·보유장비 s1040)·리뷰티 소개 페이지·이 페이지에 있던 것. 장비 사진은 s1040 원본(투명 PNG → eq/*.webp) */
/* 숫자로 보는 디엠 — 사진 아래쪽에 겹친 흰 판 */
.intro{padding-bottom:clamp(50px,5vw,90px)}
.facts{grid-column:1/-1;position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(-56px,-3vw,-28px);padding:clamp(26px,2.6vw,40px) 0;background:#fff;border-radius:18px;box-shadow:0 24px 50px -30px rgba(98,75,51,.4)}
.fact{padding:0 12px;text-align:center}
.fact+.fact{border-left:1px solid rgba(138,107,69,.22)}
.fact-n{display:flex;align-items:baseline;justify-content:center;gap:2px;font-family:'Cormorant',serif;font-weight:600;font-size:clamp(46px,4.6vw,76px);line-height:1;color:var(--brown2);font-variant-numeric:lining-nums tabular-nums}
.fact-n sup{align-self:flex-start;margin-top:.1em;font-size:.5em;color:var(--brown)}
.fact-n small{margin-left:4px;font-family:'Pretendard Variable',sans-serif;font-size:clamp(15px,1.2vw,18px);font-weight:600;color:var(--brown)}
.fact-l{margin-top:10px;font-size:clamp(14px,1vw,16px);color:rgba(42,36,32,.75)}
@media (max-width:767px){.facts{grid-template-columns:1fr 1fr;row-gap:24px;margin-top:-24px}.fact:nth-child(3){border-left:0}.fact-l{margin-top:6px}}
/* About DM — 번호 붙은 세 가지 + 큰 인용구 */
.ab-pts{display:grid;gap:clamp(18px,1.6vw,26px)}
.ab-pts li{display:grid;grid-template-columns:auto 1fr;align-items:start;column-gap:clamp(14px,1.4vw,22px);padding-bottom:clamp(18px,1.6vw,26px);border-bottom:1px solid rgba(138,107,69,.22)}
.ab-pts li:last-child{padding-bottom:0;border-bottom:0}
.ab-n{min-width:1.3em;font-family:'Cormorant',serif;font-weight:600;font-size:clamp(30px,2.6vw,44px);line-height:1;color:var(--brown)}
.ab-pt{font-size:clamp(17px,1.35vw,21px);font-weight:700;line-height:1.4;color:var(--ink)}
.ab-pt+.body{margin-top:6px}
.ab-quote{grid-column:1/-1;margin-top:clamp(56px,5.4vw,96px);text-align:center}
.ab-quote::before{content:'\201C';display:block;height:.42em;font-family:'Cormorant',serif;font-size:clamp(90px,9vw,150px);line-height:.62;color:var(--brown);opacity:.55}
.ab-quote p{font-size:clamp(20px,2.1vw,34px);font-weight:600;line-height:1.6;color:var(--ink);text-wrap:balance}
.ab-quote em{font-style:normal;color:var(--brown2);background:linear-gradient(transparent 62%,rgba(217,195,165,.65) 62%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ab-quote figcaption{margin-top:clamp(16px,1.6vw,24px);font-size:15px;color:rgba(42,36,32,.7)}
.ab-quote figcaption span{margin-left:8px;font-family:'Cormorant',serif;font-size:1.1em;letter-spacing:.12em;color:var(--brown)}
@media (max-width:767px){.ab-pts{text-align:left}}
/* 둘러보기 사진 이름표 */
.rs-tour{margin-bottom:12px;font-family:'Cormorant',serif;font-weight:600;font-size:15px;letter-spacing:.2em;color:var(--brown)}
.rs-tour span{margin-left:10px;font-family:'Pretendard Variable',sans-serif;font-size:14px;font-weight:500;letter-spacing:0;color:rgba(42,36,32,.6)}
.rs-cap{position:absolute;left:clamp(12px,1.4vw,22px);bottom:clamp(12px,1.4vw,22px);z-index:5;display:inline-flex;align-items:center;gap:10px;padding:7px 16px 7px 7px;border-radius:999px;
  background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px -8px rgba(42,36,32,.45);font-size:14px;font-weight:600;color:var(--ink)}
.rs-cap b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--brown);color:#fff;font-family:'Cormorant',serif;font-size:14px;font-weight:700}
/* 보유 장비 쇼룸 */
.equip{padding:var(--sec) 0;background:var(--champ)}
.eq-hd{text-align:center}
.eq-hd .h2b{margin-top:8px}
.eq-hd .h2b em{margin:0 2px;font-style:normal;font-family:'Cormorant',serif;font-size:1.5em;line-height:1;color:var(--brown)}
.eq-hd .body{margin-top:8px;color:rgba(42,36,32,.7)}
.eq-cats{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(24px,2.4vw,36px)}
.eq-cats button{height:42px;padding:0 18px;border-radius:999px;background:#fff;color:var(--brown2);font-size:15px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(138,107,69,.45);transition:background-color .25s,color .25s,box-shadow .25s}
.eq-cats button span{margin-left:3px;font-family:'Cormorant',serif;font-weight:700;color:var(--brown)}
.eq-cats button[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
.eq-cats button[aria-pressed=true] span{color:var(--sandb)}
.eq-stage{position:relative;margin-top:clamp(28px,3vw,48px);background:#fff;border-radius:24px;box-shadow:0 30px 60px -40px rgba(98,75,51,.5);overflow:hidden}
.eq-panels{display:grid}
.eq-p{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.eq-p.on{opacity:1;visibility:visible}
.eq-vis{position:relative;display:grid;place-items:center;min-height:clamp(320px,34vw,500px);padding:clamp(24px,3vw,48px);overflow:hidden;
  background:radial-gradient(closest-side circle at 50% 56%,#fff,rgba(255,255,255,0)),linear-gradient(160deg,#F7F0E6,#E8D9C5)}
.eq-bg{position:absolute;left:0;right:0;bottom:4%;padding-left:6%;font-family:'Cormorant',serif;font-weight:600;font-size:clamp(52px,6.4vw,108px);line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(138,107,69,.4);pointer-events:none} /* 영문 이름 한 줄 — 장비 아래쪽이 흐려지는 자리에 비침 */
.eq-vis img{position:relative;width:auto;height:auto;max-width:76%;max-height:clamp(250px,27vw,410px);filter:drop-shadow(0 26px 24px rgba(42,36,32,.2));
  -webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent);transform:translateY(18px) scale(.96);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.eq-p.on .eq-vis img{transform:none}
.eq-tx{display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.4vw,60px) clamp(24px,3.4vw,60px) clamp(84px,7vw,112px)}
.eq-tx>*{opacity:0;transform:translateY(12px);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1)}
.eq-p.on .eq-tx>*{opacity:1;transform:none}
.eq-p.on .eq-tx>:nth-child(2){transition-delay:.06s}
.eq-p.on .eq-tx>:nth-child(3){transition-delay:.12s}
.eq-p.on .eq-tx>:nth-child(4){transition-delay:.18s}
.eq-p.on .eq-tx>:nth-child(5){transition-delay:.24s}
.eq-no{font-family:'Cormorant',serif;font-weight:600;font-size:15px;letter-spacing:.2em;color:var(--brown)}
.eq-name{margin-top:8px;font-size:clamp(26px,2.4vw,40px);font-weight:700;line-height:1.3;color:var(--ink)}
.eq-name span{display:block;margin-top:2px;font-family:'Cormorant',serif;font-size:.5em;font-weight:600;letter-spacing:.12em;color:var(--brown)}
.eq-head{margin-top:clamp(14px,1.4vw,22px);padding-left:14px;border-left:3px solid var(--brown);font-size:clamp(16px,1.25vw,19px);font-weight:700;line-height:1.5;color:var(--brown2)}
.eq-desc{margin-top:12px;font-size:clamp(15px,1.05vw,16px);line-height:1.7;color:rgba(42,36,32,.82)}
.eq-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(16px,1.6vw,24px)}
.eq-tags li{padding:7px 14px;border-radius:999px;background:var(--ivory);box-shadow:inset 0 0 0 1px rgba(138,107,69,.4);font-size:14px;font-weight:600;color:#6F5434}
.eq-nav{position:absolute;right:clamp(20px,3.4vw,60px);bottom:clamp(20px,2.4vw,36px);z-index:2;display:flex;gap:10px}
.eq-nav button{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 8px 18px -8px rgba(42,36,32,.45);transition:background-color .25s}
.eq-nav img{width:100%;height:100%;transition:filter .25s}
.eq-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:clamp(18px,1.8vw,28px)}
.eq-thumbs [role=tab]{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px 10px;border-radius:14px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(138,107,69,.2);transition:background-color .25s,box-shadow .25s,transform .25s,opacity .25s}
.eq-thumbs [role=tab].dim{opacity:.4} /* 고른 분야 밖 장비: 숨기지 않고 흐리게 (18종은 늘 다 보임) */
.eq-thumbs img{width:auto;max-width:100%;height:64px;object-fit:contain}
.eq-thumbs [role=tab] span{font-size:13px;font-weight:600;line-height:1.3;text-align:center;color:rgba(42,36,32,.8)}
.eq-thumbs [aria-selected=true]{background:#fff;box-shadow:inset 0 0 0 2px var(--brown),0 12px 22px -14px rgba(98,75,51,.6)}
.eq-thumbs [aria-selected=true] span{color:var(--brown2)}
.eq-more{margin-top:clamp(24px,2.4vw,36px);text-align:center}
.eq-more .dv{color:var(--brown2)}
@media (hover:hover){
  .eq-cats button:not([aria-pressed=true]):hover{background:var(--ivory);box-shadow:inset 0 0 0 1px var(--brown)}
  .eq-nav button:hover{background:var(--ink)}
  .eq-nav button:hover img{filter:invert(1)}
  .eq-thumbs [role=tab]:hover{background:#fff;transform:translateY(-3px)}
}
@media (max-width:1023px){
  .eq-p{grid-template-columns:1fr}
  .eq-vis{min-height:0;aspect-ratio:16/10}
  .eq-vis img{position:absolute;inset:8% 12% 6%;width:76%;height:86%;max-width:none;max-height:none;object-fit:contain} /* 칸 높이가 사진에서 정해지지 않게 */
  .eq-tx{justify-content:flex-start;padding:24px 22px 84px}
}
@media (max-width:767px){
  .eq-cats,.eq-thumbs{flex-wrap:nowrap;overflow-x:auto;margin-inline:calc(var(--gut) * -1);padding-inline:var(--gut);scrollbar-width:none}
  .eq-cats::-webkit-scrollbar,.eq-thumbs::-webkit-scrollbar{display:none}
  .eq-cats{justify-content:flex-start;padding-block:2px}
  .eq-cats button{flex:none;height:38px;padding:0 14px;font-size:14px}
  .eq-stage{border-radius:18px}
  .eq-vis{aspect-ratio:4/3}
  .eq-thumbs{display:flex;gap:8px;padding-block:4px 8px}
  .eq-thumbs [role=tab]{flex:none;width:96px}
  .eq-thumbs img{height:52px}
  .eq-nav{right:16px;bottom:16px}
  .eq-nav button{width:40px;height:40px}
}
/* 상담이 먼저입니다 — 어두운 갈색 띠(리셉션 사진을 옅게 깔고) */
.cta{padding:clamp(70px,7vw,120px) 0;background:#2A2420;color:#fff}
.cta::before{content:none}
.cta-bg{position:absolute;inset:0;z-index:-1}
.cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.3;filter:grayscale(.3) sepia(.3)}
.cta-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(42,36,32,.94) 28%,rgba(42,36,32,.6))}
.cta-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:center;gap:clamp(30px,4vw,80px)}
.cta .eb{color:var(--sandb)}
.cta .h2b{margin-top:8px;font-size:clamp(28px,2.8vw,46px);color:#fff}
.cta .body{margin-top:12px;color:rgba(255,255,255,.75)}
.cta-btns{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cta-btns a{display:flex;align-items:center;gap:14px;height:100%;padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);transition:background-color .25s,transform .25s}
.cta-btns img{flex:none;width:42px;height:42px;filter:brightness(0) invert(1);transition:filter .25s}
.cta-btns span{display:flex;flex-direction:column;font-size:14px;line-height:1.45;color:rgba(255,255,255,.7);transition:color .25s}
.cta-btns b{font-size:17px;font-weight:700;color:#fff;transition:color .25s}
@media (hover:hover){
  .cta-btns a:hover{background:#fff;transform:translateY(-3px)}
  .cta-btns a:hover img{filter:none}
  .cta-btns a:hover span{color:rgba(42,36,32,.7)}
  .cta-btns a:hover b{color:var(--ink)}
}
@media (max-width:1023px){.cta-in{grid-template-columns:1fr}}
@media (max-width:767px){.cta-in{text-align:center}.cta-btns{grid-template-columns:1fr;gap:10px;text-align:left}.cta-btns a{padding:14px 16px}}
/* 오시는 길: 지하철·버스·자동차 — 2026-11-04 사용자 «푸터 부분도 직관적으로 바로 확인 가능하도록»: 오시는 길 페이지(.x-acc-w)처럼 교통수단 카드로 */
.loc-way{display:grid;gap:10px;margin-top:clamp(22px,2vw,30px);padding-top:clamp(18px,1.6vw,24px);border-top:1px solid rgba(138,107,69,.25)}
.lw{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;padding:16px 18px;border:1px solid #EFE5D8;border-radius:14px;background:#FBF7F1}
.lw-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:var(--brown);box-shadow:0 0 0 1px #E6D8C5}
.lw-ic svg{width:26px;height:26px}
.lw-h{display:block;font-size:13px;font-weight:700;line-height:1.4;color:var(--brown)}
.lw-ln{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:5px;font-size:16px;font-weight:700;line-height:1.4;color:#2a2420}
.lw-no{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#B85300;color:#fff;font-size:13px;font-weight:800}
.lw-ex{display:inline-flex;align-items:center;height:24px;padding:0 10px;border:1.5px solid #B85300;border-radius:12px;color:#B85300;font-size:13px;font-weight:700}
.lw-tx{margin-top:5px;font-size:14px;line-height:1.55;color:#4a4039}
.lw-st+.lw-st{margin-top:10px;padding-top:10px;border-top:1px dashed #E1D3C0}
.lw-sn{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin-top:5px;font-size:15px;font-weight:700;line-height:1.4;color:#2a2420}
.lw-ids{display:inline-flex;gap:6px}
.lw-id{padding:0 7px;border:1px solid #E6D8C5;border-radius:6px;background:#fff;font-size:12px;font-weight:600;line-height:20px;color:#6e6257;font-variant-numeric:tabular-nums}
.lw-rt{display:grid;gap:6px;margin-top:7px;font-size:14px;line-height:1.5}
.lw-r{display:flex;align-items:flex-start;gap:8px}
.lw-k{flex:none;display:inline-flex;align-items:center;height:21px;padding:0 8px;border-radius:11px;background:#0068B7;color:#fff;font-size:12px;font-weight:700}
.lw-k.g{background:#2B7F23}
.lw-n{font-weight:600;color:#2a2420;font-variant-numeric:tabular-nums}
.lw-q{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:5px}
.lw-qt{flex-basis:100%;font-size:13px;color:#6e6257}
.lw-s{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 13px;border:1px solid #E1D3C0;border-radius:16px;background:#fff;font-size:14px;font-weight:700;color:#2a2420}
.lw-s::before{content:"";flex:none;width:14px;height:14px;background:var(--brown);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.6 12.6 17 17'/%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 20 20' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.6 12.6 17 17'/%3E%3C/svg%3E") center/contain no-repeat}
.lw-pk{display:flex;align-items:flex-start;gap:8px;margin-top:8px}
.lw-p{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:4px;background:#1F5FAD;color:#fff;font-size:12px;font-weight:800;line-height:1}
@media (max-width:767px){.lw{grid-template-columns:36px minmax(0,1fr);column-gap:12px;padding:14px}.lw-ic{width:36px;height:36px}.lw-ic svg{width:22px;height:22px}}
/* 포텐자 페이지 보강 — 2026-10-21 사용자 요청(소개 페이지처럼 "내용·layout·디자인 강화"). 문구는 이 페이지·리뷰티 포텐자 페이지·메인/소개 페이지에 있던 것.
   숫자 판(.facts)·상담 띠(.cta)·교통(.loc-way)은 소개 페이지 것을 같이 쓴다 */
.pz-facts{margin-top:clamp(40px,4vw,64px)}
.fact-n.rng{font-size:clamp(40px,4vw,66px)}
.fact-n.rng small:first-child{margin:0 2px}
@media (max-width:767px){.pz-facts{margin-top:32px}.fact-n.rng{font-size:32px}}
/* 효과: 사진이 위로 오는 카드 */
.fx{display:flex;flex-direction:column;padding:0 0 22px;border-top:0;border-radius:16px;background:#fff;box-shadow:0 20px 40px -28px rgba(98,75,51,.55);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fx .ph{order:-1;margin:0;aspect-ratio:4/3;border-radius:16px 16px 0 0}
.fx-n{margin:18px 22px 0;font-size:44px;line-height:1}
.fx p{margin:8px 22px 0;font-size:17px;font-weight:700;line-height:1.45;color:var(--ink)}
.fxs{align-items:stretch}
.fx-plus{align-self:center;margin-top:0}
@media (hover:hover){.fx:hover{transform:translateY(-6px)}}
@media (max-width:767px){.fxs{max-width:320px}}
/* 전문의 직접 진단 · 책임 진료 */
.pz-doc{padding:var(--sec) 0;background:var(--ivory)}
.pzd-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(36px,5vw,96px)}
.pzd-ph{position:relative}
.pzd-ph::before{content:'';position:absolute;inset:22px -22px -22px 22px;border:1px solid var(--brown);border-radius:20px;opacity:.55}
.pzd-ph .ph{position:relative;aspect-ratio:4/5;border-radius:20px}
.pzd-ph img{object-position:50% 20%}
.pzd-tx .h2b{margin-top:8px}
.pzd-head{margin-top:clamp(16px,1.6vw,24px);font-size:clamp(18px,1.5vw,23px);font-weight:700;line-height:1.5;color:var(--brown2)}
.pzd-tx .body{margin-top:12px;color:rgba(42,36,32,.8)}
.pzd-name{margin-top:clamp(22px,2.2vw,32px);padding-top:clamp(18px,1.8vw,24px);border-top:1px solid rgba(138,107,69,.3);font-size:15px;color:rgba(42,36,32,.7)}
.pzd-name b{margin-right:6px;font-size:clamp(24px,2vw,30px);font-weight:700;color:var(--ink)}
.pzd-car{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin-top:14px;font-size:15px;color:rgba(42,36,32,.75)}
.pzd-car li{position:relative;padding-left:14px}
.pzd-car li::before{content:'';position:absolute;left:0;top:.7em;width:5px;height:5px;border-radius:50%;background:var(--brown)}
.pz-doc .doc-mark{margin-top:clamp(20px,2vw,28px)}
.pzd-more{margin-top:clamp(22px,2.2vw,32px)}
.pzd-more .dv{color:var(--brown2)}
@media (max-width:767px){
  .pzd-in{grid-template-columns:1fr}
  .pzd-ph{max-width:300px;margin:0 auto 12px}
  .pzd-ph::before{inset:14px -14px -14px 14px}
  .pzd-car{grid-template-columns:1fr}
}
/* 주의사항: 번호·제목 붙은 카드 */
.cares{display:grid;grid-template-columns:1fr 1fr;gap:14px;border-top:0}
.cares li{flex-direction:column;gap:8px;padding:24px 24px 26px;border-bottom:0;border-radius:16px;background:#fff;box-shadow:0 18px 36px -28px rgba(98,75,51,.55)}
.cr-n{font-family:'Cormorant',serif;font-weight:700;font-size:34px;line-height:1;background:linear-gradient(135deg,#C29A62,#8A6B45);-webkit-background-clip:text;background-clip:text;color:transparent}
.cr-t{font-size:clamp(17px,1.3vw,19px);font-weight:700;color:var(--ink)}
.cr-d{color:rgba(42,36,32,.78);line-height:1.65}
@media (max-width:767px){.cares{grid-template-columns:1fr;gap:10px}.cares li{padding:20px 20px 22px}}
/* 함께 보면 좋은 시술 */
.related{padding:var(--sec) 0;background:var(--champ)}
.rel-hd{text-align:center}
.rel-hd .h2b{margin-top:8px}
.rel-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,30px);margin-top:clamp(28px,3vw,48px)}
.rel-list a{display:flex;flex-direction:column;height:100%;border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 22px 44px -30px rgba(98,75,51,.6);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.rel-ph{display:block;aspect-ratio:4/3;overflow:hidden}
.rel-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rel-tx{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.rel-tx b{font-size:clamp(19px,1.5vw,22px);font-weight:700;color:var(--ink)}
.rel-tx>span{margin-top:6px;font-size:15px;line-height:1.6;color:rgba(42,36,32,.75)}
.rel-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:16px;font-style:normal;font-family:'Cormorant',serif;font-size:16px;font-weight:600;letter-spacing:.06em;color:var(--brown2)}
.rel-go .dv-ar{transition:transform .3s}
@media (hover:hover){
  .rel-list a:hover{transform:translateY(-6px)}
  .rel-list a:hover .rel-ph img{transform:scale(1.06)}
  .rel-list a:hover .rel-go .dv-ar{transform:translateX(4px)}
}
@media (max-width:1023px){.rel-list{grid-template-columns:1fr 1fr}.rel-list li:last-child{grid-column:1/-1}.rel-list li:last-child a{flex-direction:row}.rel-list li:last-child .rel-ph{flex:0 0 50%;aspect-ratio:auto}}
@media (max-width:767px){.rel-list{grid-template-columns:1fr;max-width:400px;margin-inline:auto}.rel-list li:last-child a{flex-direction:column}.rel-list li:last-child .rel-ph{aspect-ratio:4/3}}
/* 메인 첫 화면 새 시안 — 2026-10-21 사용자 시안(chrome_8XxeDqtrdj.png): 흰 헤더(두 줄 메뉴·KR 상자) · 로비+모델 히어로(영문 세리프 제목·금색 부제. 5개 언어 버튼은 10-21 사용자 요청으로 뺌) · 베이지 상담 판.
   사용자 결정: 메뉴·로고·맨 위 띠는 그대로, 메인(.pg-main)에만. 히어로 사진(hero_dm.webp)은 시안 그림에서 글자·버튼·상담판·커서를 지우고 메운 뒤 Real-ESRGAN 4배 → 2K(2560px)로 줄인 것 */
@media (min-width:1200px){.pg-main{--hdh:100px}}
.pg-main .hd,.pg-main .hd.fixed{background:rgba(255,255,255,.5);box-shadow:0 1px 0 rgba(42,36,32,.08);-webkit-backdrop-filter:none;backdrop-filter:none} /* 2026-10-22 사용자 요청: 흰 헤더 50% 투명 */
.pg-main .hd.fixed{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} /* 스크롤 중엔 뒤 본문 글자와 메뉴가 겹쳐 읽히지 않아 흐림만 더함(투명도는 그대로) */
.pg-main .gnb .gi>a,.pg-main .gnb .gi>span,.pg-main .gnb>a{display:flex;flex-direction:column;align-items:center;font-size:15px;font-weight:600;line-height:1.35}
.pg-main .gnb small{margin-top:2px;font-family:'Pretendard Variable',sans-serif;font-size:10px;font-weight:500;letter-spacing:.08em;color:rgba(42,36,32,.5)}
.pg-main .hd-util>a,.pg-main .hd-util>i{display:none!important} /* 시안엔 로그인·회원가입이 없음(모바일 메뉴에는 그대로) — 1360~1500px 에서 메뉴와 겹쳐 두 줄이 되던 것 */
/* 히어로 */
/* 히어로 사진을 투명 헤더 뒤까지 깔기: 위 여백(var(--hdh)) 대신 높이에 헤더 높이를 더하고, 글자는 그만큼 내림 (2026-10-22) */
.pg-main .hero-v2{display:block;margin-top:0;text-align:left;color:#fff;height:calc(max(520px,calc(100svh - var(--tb) - var(--hdh) - 64px)) + var(--hdh))}
@media (min-width:768px){.pg-main .hero-v2{height:calc(max(520px,min(calc(100svh - var(--tb) - var(--hdh)),62vw)) + var(--hdh))}}
.hero-v2 .hero-bg img{object-position:50% 0;transform:none!important}
@media (min-width:768px) and (max-width:1023px){.hero-v2 .hero-bg img{object-position:38% 0}} /* 태블릿: 제목 끝과 로비 DM 간판 사이 간격 확보 */ /* 사진 위(머리)는 남기고 아래(바닥)부터 잘림. 스크롤 깊이감(JS)의 1.12배 확대는 끔 — 시안보다 확대돼 보였음 */
.hero-v2 .ov{background:linear-gradient(90deg,rgba(62,46,36,.38),rgba(62,46,36,.30) 40%,rgba(62,46,36,0) 58%),linear-gradient(0deg,rgba(62,46,36,.16),rgba(62,46,36,0) 30%)}
.hero-v2 .hero-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;max-width:none;padding:calc(var(--hdh) + min(2.6vw,5vh)) var(--gut) 0 clamp(24px,13vw,300px)}
.hero-v2 .hero-t{margin:0;font-family:'Cormorant',serif;font-weight:500;font-size:clamp(44px,min(5vw,9vh),96px);line-height:1.08;letter-spacing:-.005em;color:#fff;text-shadow:0 1px 3px rgba(30,20,14,.5),0 3px 22px rgba(30,20,14,.5)}
.hero-v2 .hero-en{margin-top:clamp(14px,min(1.6vw,3vh),30px);font-family:'Cormorant',serif;font-weight:500;font-size:clamp(22px,min(2.45vw,4.4vh),46px);line-height:1.3;color:#EBD3A8;text-shadow:0 1px 2px rgba(30,20,14,.75),0 2px 8px rgba(30,20,14,.55),0 0 24px rgba(30,20,14,.45)}
.hero-v2 .hero-d{margin-top:clamp(16px,min(2vw,3.6vh),38px);font-size:clamp(15px,min(1.3vw,2.4vh),22px);font-weight:500;line-height:1.6;color:rgba(255,255,255,.96);text-shadow:0 1px 2px rgba(30,20,14,.8),0 1px 8px rgba(30,20,14,.6),0 0 20px rgba(30,20,14,.35)}
@media (max-width:767px){
  .hero-v2 .hero-bg img{object-position:72% 0}
  .hero-v2 .ov{background:linear-gradient(0deg,rgba(62,46,36,.62),rgba(62,46,36,.25) 55%,rgba(62,46,36,.1))}
  .hero-v2 .hero-in{justify-content:flex-end;padding:0 var(--gut) 48px}
}
/* 오른쪽 상담 메뉴 (PC): 동그란 버튼 세로 줄 — 2026-10-22 사용자 요청(판 → 동그란 버튼) · 휴대폰 아래 막대. 10-22 소개·포텐자에도 같은 마크업 → .pg-main 범위를 .q-box.q-v2 로 */
@media (min-width:1200px){
  .q-box.q-v2{width:auto;padding:0;gap:10px;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .q-box.q-v2,.q-box.q-v2:hover{background:none;box-shadow:none}
  .q-box.q-v2 a{width:72px;height:72px;justify-content:center;gap:3px;padding:0;border-radius:50%;background:#EBDDCB;color:#2E2722;
    box-shadow:0 8px 18px -8px rgba(42,36,32,.4),inset 0 0 0 1px rgba(138,107,69,.2);transition:background-color .25s,transform .25s}
  .q-box.q-v2 a:hover,.q-box.q-v2 a:focus-visible{background:#DCC6AA;transform:translateY(-2px)}
  .q-box.q-v2 svg{width:26px;height:26px}
  .q-box.q-v2 span{gap:0;font-size:0;line-height:1.2;color:#3A322C}
  .q-box.q-v2 b,.q-box.q-v2 .q-call,.q-box.q-v2 .q-mo{display:none} /* q-mo 온라인예약: 2026-10-22 사용자 요청으로 PC에서 뺌(휴대폰 막대엔 그대로) */
  .q-box.q-v2 em{font-style:normal;font-size:11px;font-weight:600;letter-spacing:-.03em}
}
/* 버튼 8개가 헤더(100px) 아래에 들어가게: 화면이 낮으면 동그라미를 줄이고, 아주 낮으면 아이콘만 */
@media (min-width:1200px) and (max-height:899px){
  .q-box.q-v2{gap:7px}
  .q-box.q-v2 a{width:62px;height:62px}
  .q-box.q-v2 svg{width:22px;height:22px}
  .q-box.q-v2 em{font-size:10.5px}
}
@media (min-width:1200px) and (max-height:739px){
  .q-box.q-v2{gap:6px}
  .q-box.q-v2 a{width:50px;height:50px}
  .q-box.q-v2 em{font-size:0}
}
@media (max-width:1199px){
  .q-box.q-v2{grid-template-columns:repeat(5,1fr)}
  .q-box.q-v2 .q-pc{display:none} /* 2026-10-22 추가한 PC 전용 4개(온라인상담·라인·인스타그램·유튜브) — 휴대폰 아래 막대는 5칸 그대로 */
  .q-box.q-v2 a{color:var(--brown2)}
  .q-box.q-v2 svg{width:26px;height:26px}
  .q-box.q-v2 span{font-size:0}
  .q-box.q-v2 b{display:none}
  .q-box.q-v2 em{font-style:normal;font-size:11px}
}

/* 둘러보기 사진 더보기 — 옛 일본어 사이트(japan_original) 갤러리 사진 6장, 가로 넘김 (2026-10-30) */
.sl-tour{grid-column:1/-1;margin-top:clamp(20px, 15.385px + 1.2821vw, 40px);--g:clamp(20px, 15.385px + 1.2821vw, 40px);--iw:calc((100% - var(--g) * 2) / 3)}
.sl-tour .ph{aspect-ratio:940/578}
@media (max-width:1199px){.sl-tour{--iw:calc((100% - var(--g)) / 2)}}
@media (max-width:767px){
  .sl-tour{--g:12px;--iw:280px}
  .sl-tour .sl-track{margin-inline:-20px;padding-inline:20px;scroll-padding-inline:20px}
  .sl-tour .sl-prev,.sl-tour .sl-next{display:none}
}

/* 빨간 포인트 — 아주 가끔, '지금 고른 것'과 '피부과 전문의'에만. 색은 윗줄 '피부과 전문의' 배지와 같은 옛 사이트 빨강 #DA2B2D (2026-10-30 메인 → 같은 날 전 페이지) */
:root{--point:#DA2B2D}
.tv-tabs button[aria-pressed="true"]{border-color:var(--point)}
.tv-play svg{fill:var(--point)}
.tv-item[aria-current="true"] .tv-th{outline-color:var(--point)}
@media (min-width:1024px){
  .tv-item[aria-current="true"]{border-color:var(--point)}
  .tv-item[aria-current="true"] .tv-th{outline-color:transparent}
}
.doc-name span{color:var(--point);font-weight:600}
.doc-bar{background:var(--point)}
.dots button[aria-current]{background-color:var(--point)}
.ct-phone{background:var(--point)}
.gnb a.on::after{height:2px;background:var(--point)}
.faq-it[open] .fi::before,.faq-it[open] .fi::after{background:var(--point)}
.eq-thumbs [aria-selected=true]{box-shadow:inset 0 0 0 2px var(--point),0 12px 22px -14px rgba(98,75,51,.6)}
/* 시술 페이지(pages.css 가 뒤에 읽혀서 .pg-x 로 한 단계 높임) */
.pg-x .x-dp-lab li.on b{color:var(--point)}
.pg-x .x-dp-tgt{border-color:var(--point);box-shadow:0 0 0 4px rgba(218,43,45,.12)}
.pg-x .x-dp-call{border-top-color:var(--point)}
.pg-x .x-dp-call::before{background:var(--point)}
.pg-x .x-c3-l li.on .x-c3-k{color:var(--point)}
.pg-x .x-rl-bar i{background:var(--point)}
.pg-x .x-pg-st li.on .x-pg-th{border-color:var(--point);box-shadow:0 0 0 4px rgba(218,43,45,.12)}

/* KAHF 인증마크 — 메인 첫 화면 제목 위 (2026-11-03 사용자: «인증마크 사용, 하단이 아닌 전면에 들어오자마자 인지». CONTACT 의 월계수 글자는 뺌). 마크는 옛 사이트 KAHF 슬라이드(pad_250522.png)에서 원으로 따냄 */
.hero-kahf{display:flex;align-items:center;gap:clamp(12px,1.1vw,18px);margin-bottom:clamp(20px,min(2.4vw,4vh),40px)}
.hero-kahf img{flex:none;width:clamp(64px,min(6.6vw,12vh),112px);height:auto;filter:drop-shadow(0 4px 14px rgba(30,20,14,.35))}
.hero-kahf p{display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 2px rgba(30,20,14,.8),0 1px 8px rgba(30,20,14,.6),0 0 20px rgba(30,20,14,.35)}
.hk-s{font-size:clamp(13px,min(1.1vw,2vh),18px);font-weight:500;line-height:1.4;color:rgba(255,255,255,.96)}
.hk-t{font-size:clamp(20px,min(1.9vw,3.4vh),32px);font-weight:600;line-height:1.25;color:#EBD3A8}
.hk-t [lang=en]{font-family:'Cormorant',serif;font-size:1.12em;letter-spacing:.06em}
.hero-v2 .hero-in>:nth-child(4){animation-delay:.45s}

/* 메인 첫 화면: 모델 없는 정면 리셉션 사진 hero_front.webp (2026-11-03 사용자: «헤더에 모델이 없고 원내 이미지가 정면으로 바라보는 시선»). 간판이 사진 폭의 66% 에 있어서, PC·태블릿은 사진을 오른쪽으로 옮겨 제목과 접수대가 겹치지 않게 함. 휴대폰 72% 는 간판이 화면 가운데 */
.hero-front .hero-bg img{object-position:15% 0}
@media (max-width:767px){.hero-front .hero-bg img{object-position:72% 0}}

/* 푸터 예약·상담 버튼 — 네이버 예약·구글 지도·카카오톡 채널·왓츠앱 (2026-11-04 사용자: «푸터에 네이버예약, 구글맵, 카카오톡채널, 왓즈앱 버튼»). 구글 지도는 Google 장소 «디엠피부과»(cid 15556551156199472896). 같은 날 옛 디자인 정책·언론보도 페이지도 새 디자인이 되어 이 규칙 한 곳만 쓴다 */
.ft-sns{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(24px, 21.692px + 0.6410vw, 32px)}
.ft-sns a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px 0 16px;border-radius:999px;color:#fff;font-size:14px;font-weight:600;line-height:1.2;white-space:nowrap;transition:filter .2s}
.ft-sns svg{flex:none;width:22px;height:22px}
/* 플랫폼 색 (2026-11-04 사용자: «버튼 컬러는 해당 플랫폼의 theme 컬러로») — 링크 주소로 고름 */
.ft-sns a[href*="naver.com"]{background:#03C75A}
.ft-sns a[href*="google.com"]{background:#1A73E8}
.ft-sns a[href*="kakao.com"]{background:#FEE500;color:#191919}
.ft-sns a[href*="kakao.com"] text{fill:#FEE500}
.ft-sns a[href*="wa.me"]{background:#25D366}
.ft-sns a:hover,.ft-sns a:focus-visible{filter:brightness(.92)}
@media (max-width:479px){.ft-sns{display:grid;grid-template-columns:1fr 1fr}.ft-sns a{padding:0 12px}}
/* 2026-11-04 사용자 «버튼 색상을 신경 좀 써줘. 해당 플랫폼의 theme color로 해야지»: 지도 버튼(오시는 길 access · 모든 페이지 loc)도 푸터처럼 플랫폼 색 */
.x-acc-btns a[href*="map.naver.com"],.loc-links a[href*="map.naver.com"]{background:#03C75A;border-color:#03C75A;color:#fff}
.x-acc-btns a[href*="map.kakao.com"],.loc-links a[href*="map.kakao.com"]{background:#FEE500;border-color:#FEE500;color:#191919}
.x-acc-btns a[href*="map.naver.com"]:hover,.x-acc-btns a[href*="map.naver.com"]:focus-visible{background:#03C75A;border-color:#03C75A;color:#fff;filter:brightness(.92)}
.x-acc-btns a[href*="map.kakao.com"]:hover,.x-acc-btns a[href*="map.kakao.com"]:focus-visible{background:#FEE500;border-color:#FEE500;color:#191919;filter:brightness(.92)}
.loc-links a[href*="map."]{transition:filter .2s}.loc-links a[href*="map."]:hover,.loc-links a[href*="map."]:focus-visible{filter:brightness(.92)}
/* 2026-11-04 사용자 «이 사이드바의 버튼 색상도»(PC 오른쪽 동그란 상담 버튼): 플랫폼 버튼은 그 플랫폼 색. 아이콘 속 글자·점(fill #EBDDCB = 옛 바탕색)은 새 바탕색으로. 온라인상담·맨 위로는 그대로 */
@media (min-width:1200px){
  .q-box.q-v2 a[href*="pf.kakao.com"]{--qb:#FEE500;--qi:#FEE500;--qf:#191919}
  .q-box.q-v2 a[href*="wa.me"]{--qb:#25D366;--qi:#25D366;--qf:#fff}
  .q-box.q-v2 a[data-dlg="wechat-dlg"]{--qb:#07C160;--qi:#07C160;--qf:#fff}
  .q-box.q-v2 a[href*="line.me"]{--qb:#06C755;--qi:#06C755;--qf:#fff}
  .q-box.q-v2 a[href*="instagram.com"]{--qb:radial-gradient(circle at 30% 107%,#FDF497 0%,#FDF497 5%,#FD5949 45%,#D6249F 60%,#285AEB 90%);--qi:#D6249F;--qf:#fff}
  .q-box.q-v2 a[href*="youtube.com"]{--qb:#FF0000;--qi:#FF0000;--qf:#fff}
  .q-box.q-v2 a:is([href*="pf.kakao.com"],[href*="wa.me"],[data-dlg="wechat-dlg"],[href*="line.me"],[href*="instagram.com"],[href*="youtube.com"]){background:var(--qb);color:var(--qf);transition:filter .25s,transform .25s}
  .q-box.q-v2 a:is([href*="pf.kakao.com"],[href*="wa.me"],[data-dlg="wechat-dlg"],[href*="line.me"],[href*="instagram.com"],[href*="youtube.com"]):is(:hover,:focus-visible){background:var(--qb);filter:brightness(.93)}
  .q-box.q-v2 a:is([href*="pf.kakao.com"],[href*="wa.me"],[data-dlg="wechat-dlg"],[href*="line.me"],[href*="instagram.com"],[href*="youtube.com"]) span{color:var(--qf)}
  .q-box.q-v2 a:is([href*="pf.kakao.com"],[href*="wa.me"],[data-dlg="wechat-dlg"],[href*="line.me"],[href*="instagram.com"],[href*="youtube.com"]) em{font-weight:700}
  .q-box.q-v2 a [fill="#EBDDCB"]{fill:var(--qi,#EBDDCB)}
}

/* 2026-11-05 체크리스트 01: 피부과 전문의 마크 + KAHF 마크를 한 세트로 모든 페이지 맨 위 띠에 크게. 메인 첫 화면 KAHF 옆에도 같은 마크(.hk-derm).
   빨간 마크 = 옛 홈페이지 머리글의 «피부과 전문의» 스티커(assets/img/common/header_pro.png 51px)를 원래 디자인대로 옮긴 dm2026/g/mark_derm.svg (만든 방법: ~/admin-backups/item01_marks_20261105/make_mark_derm.py) */
:root{--tb:52px}
@media (min-width:768px){:root{--tb:56px}}
@media (min-width:1200px){:root{--tb:72px}}
.tb-marks{display:flex;align-items:center;gap:6px;flex:none}
.tb-derm,.tb-kahf{flex:none;width:auto;height:44px}
.tb-k{display:none}
@media (min-width:768px){.tb-derm,.tb-kahf{height:46px}}
@media (min-width:1200px){.tb-marks{gap:8px}.tb-derm,.tb-kahf{height:58px}.tb-k{display:block}}
.hero-kahf .hk-derm{flex:none;width:clamp(56px,min(5.8vw,10.5vh),98px);height:auto;filter:drop-shadow(0 4px 14px rgba(30,20,14,.35))}

/* 2026-11-05 체크리스트 02: 두 마크(피부과 전문의 · KAHF)의 뜻을 알리는 섹션 — 메인 TV 섹션 바로 위 (사용자: 푸터 위가 아니라 TV 위).
   배경은 맨 위 띠와 같은 --cream, 두 칸은 상자 없이 가는 세로줄로 나눈다 (흰 상자 바둑판은 10-02 사용자 반려) */
.cred{background:var(--cream);padding:var(--sec) 0}
.cred-list{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,40px);max-width:1180px;margin-inline:auto}
.cred-it{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(16px,2vw,32px);align-items:start}
.cred-mk{width:clamp(76px,9vw,128px);height:auto}
.cred-k{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(13px,1vw,15px);letter-spacing:.16em;color:var(--brown);line-height:1.4}
.cred-it h3{margin-top:4px;font-size:clamp(20px,1.8vw,26px);font-weight:700;line-height:1.4;color:var(--ink)}
.cred-it p:not(.cred-k){margin-top:10px;font-size:clamp(15px,1.1vw,17px);line-height:1.75;color:rgba(34,34,34,.78);word-break:keep-all}
.cred-it .cred-d{color:var(--brown);font-weight:600}
@media (max-width:767px){.cred-it+.cred-it{padding-top:clamp(28px,4vw,40px);border-top:1px solid rgba(116,93,68,.2)}}
@media (min-width:768px){
  .cred-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .cred-it{padding-inline:clamp(20px,3vw,48px)}
  .cred-it+.cred-it{border-left:1px solid rgba(116,93,68,.22)}
}

/* 2026-11-05 체크리스트 03: PC 전체 메뉴. 헤더 오른쪽 ☰(.fm-btn, 1360px 이상 — 그 아래는 왼쪽 ☰가 모바일 메뉴를 연다) → 헤더 아래로 모든 메뉴를 펼친다(.fm).
   모양은 사용자 참고 이미지(11-05, 다른 병원 전체 메뉴): 반투명 바탕(사용자 «색상을 밝게» → 샴페인 크림), 열마다 영문 이름 + 대분류 + 가는 밑줄, 그 아래 세부 메뉴, 세로줄 없음.
   마우스를 올리면 글자가 상자 모양으로 색이 바뀐다 (사용자 11-05). 열은 각 페이지 인라인 스크립트가 .gnb 를 복사해 만든다 */
.fm-btn{display:none}
@media (min-width:1360px){
  .fm-btn{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:5px;flex:none;width:44px;height:44px;padding:10px;margin:-10px -10px -10px 14px}
  .fm-btn i{display:block;width:24px;height:2px;background:var(--ink);transition:width .25s,transform .25s,opacity .2s}
  .fm-btn i:last-child{width:12px}
  .fm-btn:is(:hover,:focus-visible) i:last-child{width:24px}
}
/* 열린 동안 헤더: 맨 위에 고정, 바탕 없이(뒤의 메뉴판 바탕이 비친다), 메뉴 줄은 숨기고 로고와 ×만 (사용자 11-05 «메뉴바가 안 보이게. 그래야 깔끔»), ☰ → × */
body.fm-open #hd{position:fixed;top:0;z-index:96;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
body.fm-open #hd .gnb{visibility:hidden}
body.fm-open #hd .fm-btn i{width:24px}
body.fm-open #hd .fm-btn i:first-child{transform:translateY(7px) rotate(45deg)}
body.fm-open #hd .fm-btn i:nth-child(2){opacity:0}
body.fm-open #hd .fm-btn i:last-child{transform:translateY(-7px) rotate(-45deg)}
body.fm-open{overflow:hidden}
.fm{position:fixed;inset:0;z-index:95;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--hdh) + clamp(12px,3vh,56px)) 0 clamp(24px,4vh,80px);background:rgba(250,246,241,.97);color:var(--ink);opacity:0;transition:opacity .3s}
@supports (backdrop-filter:blur(8px)){.fm{background:rgba(250,246,241,.95);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.fm[hidden]{display:none}
.fm.open{opacity:1}
.fm:not(.open){pointer-events:none}
.fm-cols{--fm-n:7;display:grid;grid-template-columns:repeat(var(--fm-n),minmax(0,1fr));gap:clamp(24px,4vh,56px) clamp(20px,1.8vw,32px);width:min(100% - 2*clamp(20px,5.21vw,100px),1600px);margin:0 auto;font-family:'Wanted Sans',sans-serif}
.fm-col{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.fm-h{align-self:stretch;display:flex;flex-direction:column;align-items:flex-start;padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid rgba(42,36,32,.16)}
.fm-en{font-family:'Cormorant',serif;font-size:13px;font-weight:600;letter-spacing:.06em;line-height:1.3;color:var(--brown)}
.fm-t{margin:2px 0 0 -10px;padding:3px 10px;border-radius:5px;font-size:18px;font-weight:700;line-height:1.4;color:var(--ink)}
.fm-t small{display:none}
.fm-sub{display:flex;flex-direction:column;align-items:flex-start;font-size:15px;line-height:1.45}
.fm-sub>a,.fm-g2>a{margin-left:-10px;padding:3px 10px;border-radius:5px;color:rgba(42,36,32,.72)}
.fm-sub span{padding:4px 0;color:rgba(42,36,32,.38)}
.fm-g2{display:flex;flex-direction:column;align-items:flex-start}
.fm-sub2{display:flex;flex-wrap:wrap;gap:0 2px;margin:0 0 4px;padding-left:4px;border-left:1px solid rgba(42,36,32,.16);font-size:13px}
.fm-sub2 a{padding:2px 6px;border-radius:4px;color:rgba(42,36,32,.55)}
.fm-cols a{transition:background-color .15s,color .15s}
.fm-cols a.on{color:var(--ink);text-decoration-line:underline;text-decoration-color:var(--point);text-decoration-thickness:2px;text-underline-offset:6px}
.fm-cols a:is(:hover,:focus-visible){background:var(--brown);color:#fff;text-decoration-line:none}
@media (max-height:820px){.fm-sub>a,.fm-g2>a{padding-block:2px}.fm-h{margin-bottom:8px;padding-bottom:8px}}

/* 2026-11-05 상단 메뉴 판 (사용자 «메뉴를 마우스 갖다대면 … 설명글도 있고, 모델 이미지도 있고, 카테고리도 보이는 구조», 참고: 모델로 상단 메뉴).
   대분류(.gi.gm)에 마우스를 올리면 헤더 너비 전체로 판(.gsub.gm-p)이 열린다: 왼쪽 크림 칸 = 영문 이름·대분류·한 줄·설명글, 가운데 = 세부 메뉴 2열(›), 오른쪽 = 사진.
   판 아래 페이지는 어둡게 가린다(그림자를 clip-path 로 판 아래쪽만 남김). 마크업은 dm2026_menu_gen.py 의 panel(), 사진은 인라인 스크립트가 마우스를 올릴 때 불러온다 */
.gnb .gi.gm{position:static}
.hd .gsub.gm-p{left:0;right:0;top:100%;min-width:0;padding:0;display:block;background:#fff;transform:translateY(-6px);
  box-shadow:0 0 0 100vmax rgba(42,36,32,.32);clip-path:inset(0 0 -100vmax 0)}
.gi.gm:hover .gsub.gm-p,.gi.gm:focus-within .gsub.gm-p{transform:none}
.gm-in{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr) auto;min-height:clamp(260px,30vh,340px)}
.gm-tx{padding:44px clamp(28px,3vw,64px) 48px clamp(20px,5.21vw,100px);background:var(--cream)}
.hd .gnb .gsub .gm-en{display:block;padding:0;font-family:'Cormorant',serif;font-size:14px;font-weight:600;letter-spacing:.08em;line-height:1.3;text-align:left;color:var(--brown)}
html[lang^="en"] .hd .gnb .gsub .gm-en{display:none}
.gm-t{margin-top:4px;font-size:28px;font-weight:700;line-height:1.3;color:var(--ink)}
.gm-h{margin-top:22px;font-size:16px;font-weight:700;line-height:1.5;color:var(--ink)}
.gm-d{margin-top:8px;max-width:34em;font-size:15px;font-weight:500;line-height:1.75;color:rgba(42,36,32,.6);word-break:keep-all}
.gm-l{display:grid;grid-auto-flow:column;grid-template-rows:repeat(6,auto);grid-auto-columns:max-content;justify-content:start;align-content:start;align-items:start;gap:2px clamp(24px,2.4vw,44px);padding:40px clamp(28px,3vw,56px) 44px}
.hd .gnb .gm-l a{display:inline-flex;align-items:center;justify-self:start;padding:6px 10px;margin-left:-10px;border-radius:5px;font-size:15px;text-align:left;color:rgba(42,36,32,.72);transition:background-color .15s,color .15s}
.hd .gnb .gm-l a::after{content:'';position:static;display:block;width:5px;height:5px;margin-left:8px;border-top:1.3px solid currentColor;border-right:1.3px solid currentColor;background:none;opacity:.5;transform:rotate(45deg);transition:none}
.hd .gnb .gm-l a:is(:hover,:focus-visible){background:var(--brown);color:#fff}
.hd .gnb .gm-l a.on{color:var(--point)}
.hd .gnb .gm-l a.on:is(:hover,:focus-visible){background:var(--point);color:#fff}
/* 3단(리쥬란·쥬베룩·얼굴윤곽·바디윤곽): 옆으로 펼치지 않고 부모 밑에 작은 글자로 */
.gm-l .gi2{display:flex;flex-direction:column;align-items:flex-start}
.gm-l .gi2::after{display:none}
.hd .gm-l .gi2:hover,.hd .gm-l .gi2:focus-within{background:none}
.hd .gm-l .gsub2{position:static;display:flex;flex-wrap:wrap;gap:0 2px;max-width:230px;min-width:0;margin:0 0 4px;padding:0 0 0 6px;opacity:1;visibility:inherit;transform:none;transition:none;background:none;box-shadow:none;border-left:1px solid rgba(42,36,32,.16)}
.hd .gnb .gm-l .gsub2 a{padding:2px 6px;margin-left:0;font-size:13px;color:rgba(42,36,32,.55)}
.hd .gnb .gm-l .gsub2 a::after{display:none}
.gm-ph{align-self:center;margin:40px clamp(20px,5.21vw,100px) 44px 0;width:clamp(220px,17vw,320px);aspect-ratio:1/1;overflow:hidden;border-radius:4px;background:var(--cream)}
.gm-ph img{display:block;width:100%;height:100%;object-fit:cover}
/* PC(1360+) 헤더 오른쪽 «로그인 | 회원가입»은 숨긴다 — /ko/ 는 라우터가 맨 위 띠(.tb-mem)로 옮기고 member.css 가 헤더 것을 숨긴다.
   /mirror/ 원본에는 그 규칙이 없어, 메뉴가 14개로 길어진 뒤 1360–1600px 에서 두 글자씩 두 줄로 깨졌다 (2026-11-05, 체크리스트 12 뒤) */
@media (min-width:1360px){.hd .hd-util>a,.hd .hd-util>i{display:none}}

/* 2026-11-05 체크리스트 05: 메인 시그니처 패키지 2개(원데이 브라이트닝 · 넥 패키지) — 대표 시술(#key) 바로 아래.
   구성 시술은 병원 자료(A1 · Q4)를 받으면 .pkg-tags 에 더한다. 넥 패키지 페이지가 생기면 Reservation 버튼을 그 페이지로 바꾼다.
   상자 없이 사진 + 글, 두 칸은 가는 세로줄로 나눈다 (흰 상자 바둑판은 사용자 반려) */
.pkg{background:linear-gradient(180deg,#F3EBDF 0%,var(--cream) 100%);padding:var(--sec) 0}
.pkg-list{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,6vw,56px);max-width:1180px;margin-inline:auto}
.pkg-it{display:flex;flex-direction:column}
.pkg-ph{display:block;aspect-ratio:6/5;overflow:hidden;background:#EADFCF}
.pkg-ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.pkg-tx{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding-top:clamp(20px,2.2vw,32px)}
.pkg-k{display:flex;align-items:baseline;gap:12px;font-family:'Cormorant',serif;font-weight:600;font-size:clamp(13px,1vw,15px);letter-spacing:.16em;color:var(--brown);line-height:1.2}
.pkg-k b{font-size:clamp(30px,2.6vw,40px);font-weight:500;letter-spacing:0;color:var(--gold);font-variant-numeric:lining-nums}
.pkg-tx h3{margin-top:6px;font-size:clamp(22px,2vw,30px);font-weight:700;line-height:1.35;color:var(--ink)}
.pkg-tx p:not(.pkg-k){margin-top:12px;font-size:clamp(15px,1.1vw,17px);line-height:1.75;color:rgba(34,34,34,.8);word-break:keep-all}
.pkg-tx p.pkg-n{margin-top:6px;font-size:clamp(14px,.95vw,15px);color:rgba(34,34,34,.6)}
.pkg-tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 clamp(22px,2vw,30px);list-style:none}
.pkg-tags li{padding:5px 12px;border:1px solid rgba(116,93,68,.35);border-radius:999px;font-size:14px;line-height:1.4;color:var(--brown2)}
.pkg-tx .dv{margin-top:auto;color:var(--brown2)} /* 두 칸의 글 길이가 달라도 버튼 높이를 맞춘다 */
@media (min-width:768px){
  .pkg-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
  .pkg-it{padding-inline:clamp(20px,3vw,48px)}
  .pkg-it+.pkg-it{border-left:1px solid rgba(116,93,68,.22)}
}

/* 2026-11-05 체크리스트 33: 메인 대표 시술 3개(시그니쳐 레이저 필링 · 흉터치료 · 디자인 리프팅) — 메인 첫 화면 바로 아래, 시그니처 패키지 위.
   카드 안쪽은 체크리스트 05 의 .pkg-* 를 같이 쓴다. 여기서는 3칸, 세로 사진, 링크 칩만 더한다 */
.key{background:#FFFDF9;padding:var(--sec) 0}
.key .pkg-list{max-width:1320px}
.key .pkg-ph{aspect-ratio:1/1}
.key .pkg-ph img{object-position:50% 25%}
.pkg-tags a{display:block;margin:-5px -12px;padding:5px 12px;border-radius:inherit;transition:background-color .2s,color .2s}
.pkg-tags a:is(:hover,:focus-visible){background:var(--brown2);color:#fff}
@media (min-width:768px){
  .key .pkg-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .key .pkg-it{padding-inline:clamp(14px,2.2vw,40px)}
  .key .pkg-ph{aspect-ratio:4/5}
}
/* 메뉴판에서 대표 시술 3개 이름 옆에 ★ — PC 전체 메뉴(.fm)와 휴대폰 메뉴(#mnav). 주소 일부로 고른다(/mirror/ · /ko/ · /en/ 모두 같은 낱말이 들어 있다) */
.fm-sub>a[href*="laser-peeling"]::after,.fm-t[href*="acne-scar"]::after,.fm-t[href*="shurink"]::after,
#mnav .mg-sub>a[href*="laser-peeling"]::after,#mnav a[href*="acne-scar"]::after,#mnav details.mg:has(>.mg-sub>a[href*="shurink"])>summary::before{
  content:"★";margin-left:.3em;color:var(--gold);font-size:.85em;vertical-align:.08em} /* 빨강(--point)은 지금 페이지·선택 표시에만 쓴다 */
/* 휴대폰 메뉴의 대분류 줄은 ::after 가 열고 닫는 화살표라 ★는 ::before 에 두고, 순서(order)로 글자 바로 뒤에 놓는다 */
#mnav details.mg:has(>.mg-sub>a[href*="shurink"])>summary::before{order:1;margin-right:auto}
#mnav details.mg:has(>.mg-sub>a[href*="shurink"])>summary::after{order:2}
.fm-cols a:is(:hover,:focus-visible)::after{color:inherit} /* 마우스를 올린 갈색 상자 안에서는 글자와 같은 흰색 */

/* 체크리스트 23 지메일 (2026-11-05, 사용자 «이메일 버튼은 진짜 구글 이메일의 로고로»): PC 빠른 메뉴의 이메일 원은 흰 바탕에 지메일 로고,
   「상담이 먼저입니다」의 지메일 로고는 흰색으로 바꾸지 않고 제 색 그대로 */
.q-box.q-v2 a[href^="mailto:"]{background:#fff;color:#3C4043;transition:filter .25s,transform .25s}
.q-box.q-v2 a[href^="mailto:"]:is(:hover,:focus-visible){background:#fff;filter:brightness(.94)}
.q-box.q-v2 a[href^="mailto:"] span{color:#3C4043}
.q-box.q-v2 a[href^="mailto:"] em{font-weight:700}
.cta-btns img[src*="q_gmail"]{filter:none}

/* 2026-11-06 사용자 «원장님이 직접 영어로 진료한다는 내용 … 메인 의료진 섹션에 크게 강조»: 메인 #doctor 의 강조 띠. 문구는 의료진소개 .x-call, 색은 메인 CONTACT 카드와 같다.
   글 칸 안에 넣으면 칸이 길어져 사진이 확대되고 가운 팔의 마크가 잘린다 → PC 는 사진·글 아래 전체 폭, 휴대폰은 사진 바로 아래 */
.doc-en{grid-area:2/1/auto/-1;display:flex;flex-wrap:wrap;align-items:center;gap:10px clamp(28px, 13.231px + 4.1026vw, 88px);margin-bottom:var(--sec);padding:clamp(24px, 20.308px + 1.0256vw, 40px) clamp(24px, 16.615px + 2.0513vw, 56px);background:#3D3027;color:#fff}
.doc-en-k{font-family:'Cormorant',serif;font-weight:600;font-size:clamp(14px, 13.308px + 0.1923vw, 17px);letter-spacing:.22em;color:#D9C3A5}
.doc-en-h{margin-top:6px;font-size:clamp(25px, 21.769px + 0.8974vw, 40px);font-weight:700;line-height:1.35;word-break:keep-all}
.doc-en-h em{font-style:normal;color:#D9C3A5}
.doc-en-d{flex:1 1 320px;font-size:clamp(15px, 14.538px + 0.1282vw, 17px);line-height:1.6;color:rgba(255,255,255,.8);word-break:keep-all;text-wrap:balance}
.doc-en-d strong{font-weight:700;color:#fff}
@media (max-width:767px){.doc-en{margin-bottom:0;padding-inline:20px}}