/* ══════════════════════════════════════════════════════════════
   류마성모신경과내과의원 — 공통 스타일
   색: 로고 남색(가톨릭 문장) + 류마티스내과 주황
   색만 바꾸고 싶으면 아래 :root 의 값만 고치면 전체에 반영됩니다.
   ══════════════════════════════════════════════════════════════ */
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/suit@2/fonts/variable/woff2/SUIT-Variable.css');

:root{
  --deep:#0A1D4A;      /* 짙은 남색 (로고 문장 색을 어둡게) */
  --deep2:#132E6B;
  --accent:#2451B8;    /* 로고 남색을 밝힌 색 — 신경과 · 공통 강조 */
  --accent-d:#1B3F95;
  --accent-l:#EDF2FC;
  --coral:#E8582F;     /* 류마티스내과 강조 (원래 사이트의 주황) */
  --coral-d:#C9431E;
  --coral-l:#FDF0EA;
  --body:#414B63;
  --gray:#7C8599;
  --line:#E3E7F0;
  --bg-soft:#F5F7FB;
  --naver:#03C75A;
  --ease:cubic-bezier(.16,1,.3,1);
  --maxw:1400px; --pad:32px; --r:6px; --hd:84px;
}
@media (max-width:1180px){:root{--pad:26px}}
@media (max-width:860px){:root{--pad:20px;--hd:64px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--body);
  font-family:'SUIT Variable','SUIT',-apple-system,BlinkMacSystemFont,'Pretendard','Apple SD Gothic Neo',sans-serif;
  font-size:16px;line-height:1.85;word-break:keep-all;overflow-x:hidden;
}
h1,h2,h3,h4,p,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
em,i{font-style:normal}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.m-only{display:none}
@media (max-width:860px){.m-only{display:inline}.pc-only{display:none}}

/* 스크롤 등장 효과 */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── 버튼 ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 28px;border-radius:999px;
  font-size:14.5px;font-weight:700;letter-spacing:-.03em;white-space:nowrap;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn svg{width:15px;height:15px;flex:none;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:hover svg{transform:translateX(4px)}
.btn-accent{background:var(--accent);color:#fff;box-shadow:0 10px 26px -10px rgba(36,81,184,.75)}
.btn-accent:hover{background:var(--accent-d)}
.btn-deep{background:var(--deep);color:#fff}
.btn-deep:hover{background:var(--accent)}
.btn-line{border:1px solid var(--line);color:var(--deep);background:#fff;height:46px;padding:0 22px;font-size:13.5px}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}

/* ══════════ 헤더 ══════════ */
#hd{position:fixed;top:0;left:0;right:0;z-index:9000;line-height:1.85}
#hd .bar{position:relative;height:var(--hd);display:flex;align-items:center;transition:height .35s var(--ease)}
#hd .bar::after{content:'';position:absolute;inset:0;z-index:-1;background:#fff;opacity:0;transition:opacity .3s var(--ease)}
#hd.solid .bar{height:70px}
#hd.solid .bar::after,#hd.open .bar::after{opacity:1}
#hd.solid:not(.open) .bar{box-shadow:0 1px 0 var(--line)}
/* 로고(왼쪽) · 메뉴(정가운데, 같은 간격) · 버튼(오른쪽) 3칸 배치 */
#hd .bar .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
#hd .logo{justify-self:start}

#hd .logo{display:flex;align-items:center;flex:none;line-height:1}
#hd .logo img{height:46px;width:auto;filter:brightness(0) invert(1);transition:filter .3s var(--ease),height .35s var(--ease)}
#hd.solid .logo img,#hd.open .logo img{filter:none}
#hd.solid .logo img{height:40px}
#hd.mo .logo img{filter:brightness(0) invert(1)}

#hd .gnb{display:flex;gap:clamp(2px,1.1vw,20px)}
#hd .gnb>li>a{display:block;padding:10px 16px;border-radius:999px;font-size:15px;font-weight:600;color:rgba(255,255,255,.88);transition:background .25s var(--ease),color .25s var(--ease)}
#hd .gnb>li>a:hover,#hd .gnb>li.hot>a{background:rgba(255,255,255,.14);color:#fff}
#hd.solid .gnb>li>a,#hd.open .gnb>li>a{color:var(--body)}
#hd.solid .gnb>li>a:hover,#hd.open .gnb>li>a:hover,#hd.open .gnb>li.hot>a{background:var(--accent-l);color:var(--deep)}

#hd .act{display:flex;align-items:center;gap:7px;flex:none;justify-self:end}
#hd .hbtn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 15px;border-radius:999px;font-size:12.5px;font-weight:700;letter-spacing:-.035em;white-space:nowrap;transition:background .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease),transform .25s var(--ease)}
#hd .hbtn svg{width:13px;height:13px;flex:none}
#hd .hbtn:hover{transform:translateY(-2px)}
#hd .b-blog{border:1px solid rgba(255,255,255,.3);color:#fff}
#hd .b-blog:hover{background:var(--naver);border-color:var(--naver)}
#hd.solid .b-blog,#hd.open .b-blog{border-color:var(--line);color:var(--body)}
#hd.solid .b-blog:hover,#hd.open .b-blog:hover{color:#fff}
#hd .b-map{background:var(--naver);color:#fff}
#hd .b-map:hover{background:#02B150}
#hd .b-tel{background:var(--accent);color:#fff;padding:0 17px;font-size:13px}
#hd .b-tel:hover{background:var(--accent-d)}
#hd.solid .b-tel,#hd.open .b-tel{background:var(--deep)}
#hd.solid .b-tel:hover,#hd.open .b-tel:hover{background:var(--accent)}

/* PC 전체메뉴 */
#hd .mega{background:#fff;border-top:1px solid var(--line);max-height:0;overflow:hidden;opacity:0;box-shadow:0 26px 40px -32px rgba(10,29,74,.5);transition:max-height .42s var(--ease),opacity .3s var(--ease)}
#hd.open .mega{max-height:420px;opacity:1}
#hd .mcols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 22px;padding:30px 0 38px}
#hd .mcol>b{display:block;font-size:14.5px;font-weight:800;color:var(--deep);letter-spacing:-.035em;padding-bottom:12px;margin-bottom:8px;border-bottom:1px solid var(--line);transition:color .25s var(--ease),border-color .25s var(--ease)}
#hd .mcol.hot>b{color:var(--accent-d);border-color:var(--accent)}
#hd .mcol a{display:block;padding:7px 0;font-size:13.5px;font-weight:500;color:var(--body);letter-spacing:-.035em;line-height:1.66;transition:color .2s var(--ease),padding-left .2s var(--ease)}
#hd .mcol a:hover{color:var(--accent-d);padding-left:4px}

/* 햄버거 + 모바일 메뉴 */
#hd .burger{display:none;width:44px;height:44px;margin-left:auto;position:relative;flex:none}
#hd .burger i{position:absolute;left:11px;width:22px;height:1.8px;background:#fff;border-radius:2px;transition:all .3s var(--ease)}
#hd .burger i:nth-child(1){top:16px}#hd .burger i:nth-child(2){top:22px}#hd .burger i:nth-child(3){top:28px}
#hd.solid .burger i{background:var(--deep)}
#hd.mo .burger i{background:#fff}
#hd.mo .burger i:nth-child(1){top:22px;transform:rotate(45deg)}
#hd.mo .burger i:nth-child(2){opacity:0}
#hd.mo .burger i:nth-child(3){top:22px;transform:rotate(-45deg)}
#hd.mo .bar::after{opacity:0}
#hd.mo .bar{box-shadow:none}

#hd .mm{position:fixed;inset:0;z-index:-2;background:var(--deep);padding:78px 20px 48px;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .35s var(--ease),visibility .35s,transform .35s var(--ease)}
#hd.mo .mm{opacity:1;visibility:visible;transform:none}
#hd .mg{border-bottom:1px solid rgba(255,255,255,.12)}
#hd .mh{display:flex;width:100%;align-items:center;justify-content:space-between;padding:18px 4px;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.04em}
#hd .mh svg{width:18px;height:18px;stroke:var(--accent);stroke-width:2.4;fill:none;flex:none;transition:transform .3s var(--ease)}
#hd .mg.on .mh svg{transform:rotate(180deg)}
#hd .mc{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
#hd .mg.on .mc{max-height:320px}
#hd .mc a{display:block;margin-left:3px;padding:11px 4px 11px 15px;border-left:1px solid rgba(255,255,255,.2);font-size:15px;font-weight:500;color:rgba(255,255,255,.74);letter-spacing:-.035em}
#hd .mc a:last-child{margin-bottom:18px}
#hd .mtel{margin-top:34px;display:grid;grid-template-columns:1fr 1fr;gap:9px}
#hd .mtel a{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:52px;border-radius:10px;font-size:14px;font-weight:700;letter-spacing:-.035em;color:#fff}
#hd .mtel a svg{width:14px;height:14px;flex:none}
#hd .mtel .p{background:var(--accent);grid-column:1 / -1}
#hd .mtel .n{background:var(--naver)}
#hd .mtel .g{border:1px solid rgba(255,255,255,.32)}

/* 흰 배경으로 시작하는 페이지 (헤더를 처음부터 흰색으로) */
body.hd-light #hd .bar::after{opacity:1}
body.hd-light #hd .logo img{filter:none}
body.hd-light #hd .gnb>li>a{color:var(--body)}
body.hd-light #hd .burger i{background:var(--deep)}
body.hd-light #hd .b-blog{border-color:var(--line);color:var(--body)}
body.hd-light #hd .b-blog:hover{color:#fff}
body.hd-light #hd .b-tel{background:var(--deep)}
body.hd-light #hd .b-tel:hover{background:var(--accent)}
body.hd-light #hd.mo .logo img{filter:brightness(0) invert(1)}
body.hd-light #hd.mo .burger i{background:#fff}
body.hd-light #hd.mo .bar::after{opacity:0}

@media (max-width:1240px){
  #hd .b-blog{display:none}
  #hd .gnb>li>a{padding:10px 11px;font-size:14.5px}
}
@media (max-width:1120px){#hd .b-map{display:none}}
@media (max-width:1024px){
  #hd .bar .wrap{display:flex}
  #hd .gnb,#hd .act,#hd .mega{display:none}
  #hd .burger{display:block}
}
@media (max-width:860px){
  #hd.solid .bar{height:60px}
  #hd .logo img,#hd.solid .logo img{height:36px}
}

/* ══════════ 메인 첫 화면 "펼쳐지는 창" ══════════
   스크롤하면 제목 속 알약 모양 사진(.hole 자리)이 화면 전체로 커집니다. 동작은 site.js */
.lb-badge{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 16px 0 13px;border-radius:999px;background:var(--accent-l);border:1px solid rgba(36,81,184,.22);font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--accent-d)}
.lb-badge>span{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sdot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--gray);flex:none}
.sdot.live{background:#1FA971;box-shadow:0 0 0 0 rgba(31,169,113,.5);animation:labPulse 2s infinite}
.sdot.rest{background:#E39B2D}
.sdot.off{background:#D4574A}
@keyframes labPulse{70%{box-shadow:0 0 0 9px rgba(31,169,113,0)}100%{box-shadow:0 0 0 0 rgba(31,169,113,0)}}
@keyframes labUp{from{opacity:0;transform:translateY(22px)}}
@keyframes labRise{from{transform:translateY(105%)}}

.ha{position:relative;height:250vh}
.ha-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#fff}
.ha-type{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--hd) var(--pad) 40px}
.ha-type .lb-badge{animation:labUp .9s var(--ease) both}
.ha-h1{margin:30px 0 26px;font-size:clamp(34px,6.6vw,100px);font-weight:800;line-height:1.24;letter-spacing:-.055em;color:var(--deep)}
.ha-h1 em{color:var(--accent)}
.ha-h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.ha-h1 .ln>span{display:block;animation:labRise 1.1s var(--ease) .1s backwards}
.ha-h1 .ln:last-child>span{animation-delay:.24s}
.ha-h1 .hole{display:inline-block;width:2.2em;height:.84em;border-radius:999px;vertical-align:-.1em;margin:0 .06em;background:var(--accent-l)}
.ha-h1 .hole.mo{display:none}
.ha-sub{font-size:clamp(15px,1.6vw,19px);color:var(--body);letter-spacing:-.025em;animation:labUp .9s var(--ease) .45s both}
.ha-hint{position:absolute;left:0;right:0;bottom:30px;display:flex;flex-direction:column;align-items:center;gap:10px;font-size:10.5px;font-weight:700;letter-spacing:.22em;color:var(--gray);animation:labUp .9s var(--ease) .9s both}
.ha-hint i{display:block;width:1px;height:38px;background:linear-gradient(var(--accent),rgba(36,81,184,0));animation:haHint 1.8s var(--ease) infinite}
@keyframes haHint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.ha-win{position:absolute;z-index:2;left:0;top:0;width:0;height:0;overflow:hidden;border-radius:999px;opacity:0;will-change:left,top,width,height;box-shadow:0 30px 60px -30px rgba(10,29,74,.5)}
.ha-win.ready{opacity:1;transition:opacity .6s var(--ease) .5s}
.ha-win img{width:100%;height:100%;object-fit:cover;object-position:74% 24%}
.ha-over{position:absolute;inset:0;z-index:3;display:flex;align-items:flex-end;padding-bottom:74px;opacity:0;pointer-events:none;background:linear-gradient(to top,rgba(8,22,58,.9) 0%,rgba(8,22,58,.45) 42%,rgba(8,22,58,.08) 75%)}
.ha-over.on{pointer-events:auto}
.ha-over .wrap{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.ha-say{font-size:clamp(32px,4.8vw,68px);font-weight:800;line-height:1.3;letter-spacing:-.05em;color:#fff}
.ha-say em{color:#9DB8FF}
.ha-say-s{margin-top:14px;font-size:clamp(15px,1.6vw,19px);color:rgba(255,255,255,.84)}
.ha-cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:10px}
.ha-ghost{border:1px solid rgba(255,255,255,.4);color:#fff}
.ha-ghost:hover{background:#fff;color:var(--deep)}
.lb-now.glass{flex:none;width:320px;padding:20px 22px;border-radius:18px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#fff}
.lb-now .nh{display:flex;justify-content:space-between;gap:10px;font-size:12px;font-weight:600;color:rgba(255,255,255,.66)}
.lb-now .state{display:flex;align-items:center;gap:10px;margin-top:8px;font-size:28px;font-weight:800;letter-spacing:-.05em;line-height:1.3}
.lb-now .until{margin-top:4px;font-size:13.5px;line-height:1.6;color:rgba(255,255,255,.84)}
.lb-now .until b{color:#fff}
@media (max-width:860px){
  .ha-h1 .hole.pc{display:none}
  .ha-h1 .hole.mo{display:block;width:min(64vw,280px);height:78px;margin:12px auto}
  .ha-h1{margin:22px 0 18px}
  .ha-over{padding-bottom:92px;background:linear-gradient(to top,rgba(8,22,58,.95) 0%,rgba(8,22,58,.74) 52%,rgba(8,22,58,.3) 100%)}
  .ha-over .wrap{flex-direction:column;align-items:stretch;gap:22px}
  .lb-now.glass{width:auto}
  .ha-hint{bottom:78px}
}
.ha-hint::after{content:'SCROLL'}
@media (min-width:1025px) and (max-width:1680px){.ha-over .wrap{padding-right:128px}}
@media (prefers-reduced-motion:reduce){.ha-h1 .ln>span,.ha-sub,.ha-type .lb-badge,.ha-hint,.ha-hint i{animation:none}}

/* ══════════ 섹션 공통 ══════════ */
.sec{padding:140px 0}
.sec.soft{background:var(--bg-soft)}
.sec.dark{background:var(--deep);color:#fff;position:relative;overflow:hidden}
.sec-head{margin-bottom:64px}
.sec-head.split{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.eyebrow{display:flex;align-items:center;gap:12px;font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--accent)}
.eyebrow .num{color:var(--gray);letter-spacing:.1em}
.eyebrow .bar{display:block;width:26px;height:1px;background:var(--accent);flex:none}
.sec.dark .eyebrow .num{color:rgba(255,255,255,.45)}
.h2{display:block;margin-top:20px;font-size:clamp(28px,4vw,48px);font-weight:800;line-height:1.36;letter-spacing:-.045em;color:var(--deep)}
.h2 em{color:var(--accent)}
.sec.dark .h2{color:#fff}
.lead{display:block;margin-top:20px;font-size:clamp(15px,1.5vw,17px);line-height:1.95;color:var(--body)}
.lead strong{color:var(--deep);font-weight:800}
.sec.dark .lead{color:rgba(255,255,255,.76)}
.sec.dark .lead strong{color:#fff}
@media (max-width:860px){
  .sec{padding:90px 0}
  .sec-head{margin-bottom:40px}
  .sec-head.split{display:block}
  .sec-head.split .btn{margin-top:26px}
}

/* ══════════ 의료진 ══════════ */
.doc-switch{display:flex;gap:8px;margin-bottom:46px}
.doc-switch button{height:44px;padding:0 22px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:700;color:var(--body);letter-spacing:-.03em;transition:all .3s var(--ease)}
.doc-switch button.on{background:var(--deep);border-color:var(--deep);color:#fff}
.doc{display:none;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:start}
.doc.on{display:grid}
.doc .photo{position:relative}
.doc .photo::before{content:'';position:absolute;left:-12%;top:-8%;width:92%;height:62%;border-radius:0 200px 0 0;background:linear-gradient(135deg,var(--accent-l),rgba(237,242,252,0));z-index:0}
.doc .frame{position:relative;z-index:1;background:#fff;border-bottom:3px solid var(--deep);aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.doc .frame img{height:100%;width:auto;object-fit:contain;object-position:bottom}
.doc .cap{display:flex;justify-content:space-between;margin-top:12px;font-size:12px;color:var(--gray)}
.doc .cap b{color:var(--accent);letter-spacing:.14em;font-weight:700}
.doc .name{display:block;margin-top:18px;font-size:clamp(32px,3.6vw,46px);font-weight:800;letter-spacing:-.05em;color:var(--deep);line-height:1.3}
.doc .name small{font-size:.5em;font-weight:700;margin-left:10px;color:var(--body)}
.doc .role{display:block;margin-top:8px;font-size:15px;font-weight:700;color:var(--accent)}
.doc .quote{margin-top:30px;padding-left:22px;border-left:2px solid var(--accent);font-size:clamp(16px,1.6vw,19px);line-height:1.9;color:var(--deep);font-weight:500}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.chip{display:inline-flex;align-items:center;height:34px;padding:0 15px;border-radius:999px;background:var(--accent-l);border:1px solid rgba(36,81,184,.22);font-size:12.5px;font-weight:700;color:var(--deep);letter-spacing:-.03em}
.chip.dk{background:var(--deep);border-color:var(--deep);color:#fff}
.career{margin-top:34px;border-top:1px solid var(--line)}
.career li{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--body);line-height:1.6}
.career li i{flex:none;width:22px;font-size:11px;font-weight:700;color:var(--accent);padding-top:3px;letter-spacing:.06em}
.doc .more{margin-top:34px}
@media (max-width:960px){
  .doc{grid-template-columns:1fr;gap:40px}
  .doc .photo{max-width:420px}
  .doc-switch button{flex:1;padding:0 10px}
}

/* ══════════ 의료진 "나란히 선 두 원장" ══════════
   마우스를 올리거나 누른 쪽 패널이 넓어지며 약력이 펼쳐집니다. 동작은 site.js */
.duo{display:flex;gap:16px;height:clamp(690px,84vh,770px)}
.dp{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:28px;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);box-shadow:inset 0 0 0 1px var(--line);transition:flex-grow .9s var(--ease),box-shadow .5s var(--ease)}
.dp.on{flex-grow:2.5;box-shadow:inset 0 0 0 1px rgba(36,81,184,.3),0 40px 70px -50px rgba(10,29,74,.5)}
.dp-photo{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;text-align:left}
.dp.on .dp-photo{cursor:default}
.dp-photo::before{content:attr(data-name);position:absolute;left:34px;top:18px;font-size:clamp(90px,10vw,160px);font-weight:800;letter-spacing:-.06em;line-height:1.1;color:rgba(36,81,184,.09);white-space:nowrap;opacity:0;transform:translateX(-30px);transition:opacity .8s var(--ease),transform 1.1s var(--ease)}
.dp.on .dp-photo::before{opacity:1;transform:none;transition-delay:.25s}
.dp-photo img{position:absolute;bottom:0;left:50%;height:94%;width:auto;max-width:none;transform:translateX(-50%);mix-blend-mode:multiply;filter:grayscale(.35);opacity:.8;transition:left .9s var(--ease),filter .6s var(--ease),opacity .6s var(--ease),height .9s var(--ease)}
.dp.on .dp-photo img{left:24%;height:97%;filter:none;opacity:1}
.dp-photo .tag{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 16px 0 22px;border-radius:999px;background:var(--deep);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;box-shadow:0 16px 30px -14px rgba(10,29,74,.6);transition:opacity .4s var(--ease),transform .5s var(--ease)}
.dp-photo .tag b{font-size:16px;font-weight:800;letter-spacing:-.03em}
.dp-photo .tag::after{content:'+';display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:4px;border-radius:50%;background:var(--accent);font-size:16px;font-weight:700;line-height:1}
.dp.on .dp-photo .tag{opacity:0;transform:translate(-50%,14px);pointer-events:none}
.dp-info{position:absolute;z-index:2;right:clamp(28px,3.4vw,56px);top:50%;width:min(470px,50%);transform:translateY(-50%);pointer-events:none}
.dp.on .dp-info{pointer-events:auto}
.dp-info>*{opacity:0;transform:translateX(34px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.dp.on .dp-info>*{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(.3s + var(--k,0) * 70ms)}
.dp-info>*:nth-child(2){--k:1}.dp-info>*:nth-child(3){--k:2}.dp-info>*:nth-child(4){--k:3}.dp-info>*:nth-child(5){--k:4}.dp-info>*:nth-child(6){--k:5}.dp-info>*:nth-child(7){--k:6}
.dp-info .name{display:block;margin-top:12px;font-size:clamp(32px,3.2vw,46px);font-weight:800;letter-spacing:-.05em;color:var(--deep);line-height:1.3}
.dp-info .name small{font-size:.5em;font-weight:700;margin-left:10px;color:var(--body)}
.dp-info .role{display:block;margin-top:6px;font-size:15px;font-weight:700;color:var(--accent)}
.dp-info .quote{margin-top:22px;padding-left:20px;border-left:2px solid var(--accent);font-size:clamp(15px,1.3vw,17px);line-height:1.8;color:var(--deep);font-weight:500}
.dp-info .chips{margin-top:20px}
.dp-info .career{margin-top:22px}
.dp-info .career li{padding:10px 0;font-size:14.5px}
.dp-info .more{margin-top:26px}
@media (max-width:1024px){
  /* 모바일: 위에 두 분 사진이 나란히, 누른 분의 약력이 아래에 펼쳐집니다 */
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;height:auto}
  .dp{display:contents}
  .dp-photo{position:relative;inset:auto;grid-row:1;aspect-ratio:3/4.1;height:auto;overflow:hidden;border-radius:22px;background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .4s var(--ease)}
  .dp.on .dp-photo{box-shadow:inset 0 0 0 2px var(--accent)}
  .dp-photo::before{left:14px;top:8px;font-size:54px}
  .dp-photo img,.dp.on .dp-photo img{left:50%;top:10%;bottom:auto;height:165%}
  .dp-photo .tag,.dp.on .dp-photo .tag{opacity:1;transform:translateX(-50%);bottom:12px;height:38px;padding:0 8px 0 14px;font-size:11.5px;gap:6px;pointer-events:auto}
  .dp-photo .tag b{font-size:13.5px}
  .dp-photo .tag::after{width:20px;height:20px;font-size:14px;transition:transform .4s var(--ease)}
  .dp.on .dp-photo .tag{background:var(--accent)}
  .dp.on .dp-photo .tag::after{background:#fff;color:var(--accent);transform:rotate(45deg)}
  .dp-info{position:static;grid-row:2;grid-column:1 / -1;width:auto;transform:none;display:none;padding:26px 4px 0}
  .dp.on .dp-info{display:block}
  .dp.on .dp-info>*{animation:duoUp .7s var(--ease) backwards;animation-delay:calc(var(--k,0) * 60ms);transition:none}
  .dp-info .career li{padding:12px 0;font-size:14.5px}
}
@keyframes duoUp{from{opacity:0;transform:translateY(18px)}}
@media (prefers-reduced-motion:reduce){.dp,.dp-photo img,.dp-photo::before,.dp-info>*{transition:none!important;animation:none!important}}

/* ══════════ 진료과목 카드 ══════════ */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.card{position:relative;display:block;aspect-ratio:4/3.1;border-radius:var(--r);overflow:hidden;background:var(--deep2);color:#fff}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(8,22,58,.9) 0%,rgba(8,22,58,.45) 45%,rgba(8,22,58,.08) 100%);transition:background .5s var(--ease)}
.card:hover img{transform:scale(1.06)}
.card .no{position:absolute;left:26px;top:22px;z-index:2;display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.14em}
.card .no::before{content:'';width:22px;height:1px;background:var(--accent)}
.card .tx{position:absolute;left:26px;right:26px;bottom:24px;z-index:2}
.card h3{font-size:clamp(20px,1.9vw,25px);font-weight:800;letter-spacing:-.045em;line-height:1.4}
.card p{margin-top:6px;font-size:13.5px;color:rgba(255,255,255,.8);line-height:1.6}
.card .go{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:12.5px;font-weight:700;color:#A9C0FF}
.card .go svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.card:hover .go svg{transform:translateX(4px)}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards{grid-template-columns:1fr}.card{aspect-ratio:16/10}}

/* ══════════ 진료과목 "겹쳐 쌓이는 카드" ══════════
   카드마다 화면 위쪽에 붙는 위치(top)가 조금씩 달라, 스크롤하면 차곡차곡 쌓입니다. 동작은 site.js */
.cstack{display:grid;gap:28px;padding-bottom:30px}
.cs{position:sticky;top:calc(92px + var(--i) * 16px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);height:clamp(360px,52vh,430px);border-radius:32px;overflow:hidden;background:#fff;color:var(--deep);box-shadow:0 -22px 46px -34px rgba(10,29,74,.45),inset 0 0 0 1px var(--line);transform-origin:center top;will-change:transform}
.cs-tx{position:relative;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,64px)}
.cs .no{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:800;letter-spacing:.08em;color:var(--accent)}
.cs .no::after{content:'/ 06';font-size:12px;font-weight:700;letter-spacing:.1em;opacity:.5}
.cs h3{margin-top:18px;font-size:clamp(28px,3.3vw,48px);font-weight:800;letter-spacing:-.05em;line-height:1.28}
.cs p{margin-top:14px;font-size:clamp(14.5px,1.25vw,17px);line-height:1.8;color:var(--body)}
.cs .go{display:inline-flex;align-items:center;gap:10px;margin-top:30px;font-size:14px;font-weight:700;color:var(--accent-d)}
.cs .go svg{width:42px;height:42px;padding:12px;border-radius:50%;background:var(--accent);color:#fff;transition:transform .5s var(--ease)}
a.cs:hover .go svg{transform:translateX(6px)}
.cs-ph{position:relative;display:block;margin:14px;border-radius:22px;overflow:hidden;background:var(--bg-soft)}
.cs-ph img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover;transform:translate3d(0,var(--py,0),0) scale(1.02);transition:transform .2s linear}
.cs.t-s{background:var(--accent-l);box-shadow:0 -22px 46px -34px rgba(10,29,74,.45),inset 0 0 0 1px rgba(36,81,184,.2)}
.cs.t-n{background:var(--deep);color:#fff;box-shadow:0 -22px 46px -34px rgba(10,29,74,.6)}
.cs.t-n p{color:rgba(255,255,255,.76)}.cs.t-n .no{color:#9DB8FF}
.cs.t-b{background:var(--accent);color:#fff;box-shadow:0 -22px 46px -34px rgba(10,29,74,.6)}
.cs.t-b p{color:rgba(255,255,255,.88)}.cs.t-b .no,.cs.t-b .go{color:#fff}
.cs.t-b .go svg{background:#fff;color:var(--accent)}
@media (min-width:1025px) and (max-width:1680px){.cstack{padding-right:112px}}
@media (max-width:1024px){
  .cstack{gap:18px;padding-bottom:16px}
  .cs{top:calc(72px + var(--i) * 10px);grid-template-columns:1fr;grid-template-rows:170px auto;height:auto;min-height:352px;border-radius:24px}
  .cs-ph{grid-row:1;margin:10px 10px 0;border-radius:16px}
  .cs-tx{grid-row:2;justify-content:flex-start;padding:22px 22px 26px}
  .cs h3{margin-top:10px;font-size:24px}
  .cs p{margin-top:8px;font-size:14px;line-height:1.7}
  .cs .go{margin-top:16px;font-size:13px}
  .cs .go svg{width:32px;height:32px;padding:9px}
}
@media (prefers-reduced-motion:reduce){.cs{transform:none!important;filter:none!important}.cs-ph img{transform:none}}

/* ══════════ 어두운 섹션 : 원칙 목록 ══════════ */
.sec.dark .glow{position:absolute;inset:0;pointer-events:none}
.sec.dark .glow::before{content:'';position:absolute;right:-180px;top:-180px;width:680px;height:680px;border-radius:50%;background:radial-gradient(circle,rgba(36,81,184,.22),rgba(36,81,184,0) 68%)}
.sec.dark .glow::after{content:'';position:absolute;left:-220px;bottom:-240px;width:760px;height:760px;border-radius:50%;background:radial-gradient(circle,rgba(36,81,184,.12),rgba(36,81,184,0) 66%)}
.sec.dark .wrap{position:relative;z-index:1}
.phi{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:70px;align-items:start}
.phi .col{position:sticky;top:104px}
.phi .pstage{position:relative;aspect-ratio:4/4.4;border-radius:var(--r);overflow:hidden;background:var(--deep2)}
.phi .pstage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.07);transition:opacity 1s var(--ease),transform 1.8s var(--ease)}
.phi .pstage img.on{opacity:1;transform:none}
.phi .pstage::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(6,17,46,.82) 0%,rgba(6,17,46,.16) 46%,rgba(6,17,46,.1) 100%)}
.phi .big{position:absolute;left:26px;bottom:12px;z-index:2;font-size:clamp(78px,9.4vw,150px);font-weight:800;line-height:.86;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.62)}
.phi .rail{position:relative;height:2px;margin-top:24px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.phi .fill{position:absolute;left:0;top:0;bottom:0;width:20%;background:var(--accent);transition:width .7s var(--ease)}
.phi .count{display:flex;align-items:baseline;gap:7px;margin-top:14px}
.phi .count b{font-size:16px;font-weight:800;color:var(--accent);letter-spacing:.06em}
.phi .count i{font-size:12.5px;font-weight:700;color:rgba(255,255,255,.46);letter-spacing:.1em}
.phi .item{position:relative;padding:30px 0 32px 34px;border-top:1px solid rgba(255,255,255,.15);opacity:.64;transition:opacity .7s var(--ease)}
.phi .item:last-child{border-bottom:1px solid rgba(255,255,255,.15)}
.phi .item::before{content:'';position:absolute;left:0;top:30px;bottom:32px;width:2px;background:var(--accent);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease)}
.phi .item.on{opacity:1}
.phi .item.on::before{transform:scaleY(1)}
.phi .no{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--accent)}
.phi .hd{display:block;margin-top:10px;font-size:clamp(19px,2vw,27px);font-weight:800;line-height:1.52;letter-spacing:-.045em;color:#fff}
.phi .ds{margin-top:8px;font-size:15px;color:rgba(255,255,255,.72);line-height:1.8}
.phi .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.phi .tag{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:rgba(36,81,184,.16);border:1px solid rgba(36,81,184,.4);font-size:12.5px;font-weight:700;color:#D6E1FF;letter-spacing:-.03em}
.phi .moimg{display:none;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r);margin-bottom:18px}
@media (max-width:960px){
  .phi{grid-template-columns:1fr;gap:0}
  .phi .col{display:none}
  .phi .item{padding:30px 0 34px;opacity:1}
  .phi .item::before{display:none}
  .phi .moimg{display:block}
}

/* ══════════ 내시경센터 5가지 원칙 "옆으로 지나가는 카드" ══════════
   기본은 손으로 옆으로 넘기는 목록이고, site.js 가 켜지면(.hx-on) 화면이 고정된 채 세로 스크롤에 맞춰 카드가 옆으로 지나갑니다 */
.sec.dark.hx{padding:0;overflow:visible;overflow:clip}
.hx-pin{display:flex;flex-direction:column;padding:120px 0 110px}
.hx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}
.hx-head .h2{margin-top:16px;font-size:clamp(26px,3.2vw,44px)}
.hx-head .lead{margin-top:12px}
.hx-prog{flex:none;width:220px;padding-bottom:8px}
.hx-prog .count{display:flex;align-items:baseline;gap:8px}
.hx-prog .count b{font-size:34px;font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1}
.hx-prog .count i{font-size:13px;font-weight:700;color:rgba(255,255,255,.46);letter-spacing:.1em}
.hx-prog .rail{position:relative;height:2px;margin-top:14px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.hx-prog .fill{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--accent);transform:scaleX(.2);transform-origin:left}
.hx-view{margin-top:44px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hx-view::-webkit-scrollbar{display:none}
.hx-track{display:flex;gap:26px;width:max-content;padding:0 max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));will-change:transform}
.hx-card{position:relative;flex:none;width:min(500px,80vw);display:flex;flex-direction:column;transform-origin:center bottom;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.hx.hx-on .hx-card{opacity:.4;transform:scale(.94)}
.hx.hx-on .hx-card.on{opacity:1;transform:none}
.hx-card .ph{position:relative;height:clamp(180px,calc(100svh - 520px),340px);border-radius:26px;overflow:hidden;background:var(--deep2)}
.hx-card .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.6s var(--ease)}
.hx-card.on .ph img{transform:scale(1)}
.hx-card .ph::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(6,17,46,.78) 0%,rgba(6,17,46,.1) 55%)}
.hx-card .big{position:absolute;left:22px;bottom:4px;z-index:1;font-size:clamp(80px,9vw,140px);font-weight:800;line-height:.9;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.7)}
.hx-card .no{margin-top:24px;font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--accent)}
.hx-card .hd{display:block;margin-top:8px;font-size:clamp(22px,2.2vw,30px);font-weight:800;line-height:1.45;letter-spacing:-.045em;color:#fff}
.hx-card .ds{margin-top:8px;font-size:15px;color:rgba(255,255,255,.74);line-height:1.8;min-height:3.6em}
.hx-card .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.hx-card .tag{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:rgba(36,81,184,.16);border:1px solid rgba(36,81,184,.4);font-size:12.5px;font-weight:700;color:#D6E1FF;letter-spacing:-.03em}
.hx.hx-on .hx-pin{position:sticky;top:0;height:100vh;height:100svh;justify-content:center;padding:84px 0 30px;overflow:hidden}
.hx.hx-on .hx-view{overflow:visible}
@media (min-width:1025px) and (max-width:1680px){.hx-head{padding-right:112px}}
@media (max-width:1024px){
  .hx-pin{padding:90px 0 80px}
  .hx-head{display:block}
  .hx-head .lead{font-size:14px;line-height:1.75}
  .hx-prog{width:auto;margin-top:18px;display:flex;align-items:center;gap:16px;padding:0}
  .hx-prog .count b{font-size:22px}
  .hx-prog .rail{flex:1;margin-top:0}
  .hx-view{margin-top:22px}
  .hx-track{gap:14px}
  .hx-card .ph{height:clamp(150px,calc(100svh - 590px),260px);border-radius:20px}
  .hx-card .big{font-size:72px;left:16px}
  .hx-card .no{margin-top:16px}
  .hx-card .hd{font-size:21px;margin-top:4px}
  .hx-card .ds{font-size:14px;line-height:1.7;margin-top:6px}
  .hx-card .tags{margin-top:10px;gap:6px}
  .hx-card .tag{height:28px;padding:0 11px;font-size:11.5px}
  .hx.hx-on .hx-pin{padding:70px 0 70px}
}

/* ══════════ 정보 카드 (건강검진 요약 등) ══════════ */
.info3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.icard{position:relative;display:flex;flex-direction:column;padding:38px 34px 34px;background:#fff;border:1px solid var(--line);border-radius:var(--r);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease)}
.icard:hover{border-color:rgba(36,81,184,.4);box-shadow:0 24px 40px -30px rgba(10,29,74,.45);transform:translateY(-3px)}
.icard .ic{width:52px;height:52px;border-radius:14px;background:var(--accent-l);display:flex;align-items:center;justify-content:center;color:var(--accent)}
.icard .ic svg{width:26px;height:26px}
.icard .k{margin-top:26px;font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--accent)}
.icard h3{margin-top:6px;font-size:22px;font-weight:800;letter-spacing:-.045em;color:var(--deep);line-height:1.45}
.icard p{margin-top:10px;font-size:14.5px;color:var(--body);line-height:1.8}
.icard ul{margin-top:18px;border-top:1px solid var(--line)}
.icard li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.icard li b{color:var(--deep);font-weight:700;flex:none}
.icard li span{text-align:right;color:var(--body)}
.icard .go{margin-top:auto;padding-top:24px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--accent)}
.icard .go svg{width:14px;height:14px}
@media (max-width:960px){.info3{grid-template-columns:1fr}.icard{padding:30px 24px 28px}}

/* ══════════ 건강검진 "내 나이로 확인하는 국가검진" ══════════ */
.agec{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);border-radius:32px;overflow:hidden;background:linear-gradient(140deg,var(--accent-l) 0%,#F7FBFE 60%,#fff 100%);box-shadow:inset 0 0 0 1px rgba(36,81,184,.2)}
.agec-l{padding:clamp(30px,4vw,60px);display:flex;flex-direction:column}
.agec .k{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--accent)}
.agec-l h3{margin-top:10px;font-size:clamp(24px,2.5vw,34px);font-weight:800;letter-spacing:-.045em;line-height:1.35;color:var(--deep)}
.agec .num{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:34px;color:var(--deep)}
.agec .num small{font-size:clamp(20px,2vw,28px);font-weight:800}
.agec .num b{font-size:clamp(84px,10vw,150px);font-weight:800;line-height:.95;letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--accent)}
.age-range{-webkit-appearance:none;appearance:none;width:100%;height:36px;margin-top:20px;background:transparent;cursor:pointer;--p:0%}
.age-range::-webkit-slider-runnable-track{height:8px;border-radius:8px;background:linear-gradient(to right,var(--accent) var(--p),rgba(10,29,74,.12) var(--p))}
.age-range::-moz-range-track{height:8px;border-radius:8px;background:linear-gradient(to right,var(--accent) var(--p),rgba(10,29,74,.12) var(--p))}
.age-range::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;margin-top:-13px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 10px 22px -8px rgba(36,81,184,.8);transition:transform .25s var(--ease)}
.age-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 10px 22px -8px rgba(36,81,184,.8)}
.age-range:active::-webkit-slider-thumb{transform:scale(1.15)}
.age-range:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:8px}
.agec .scale{display:flex;justify-content:space-between;margin-top:2px;font-size:12px;font-weight:700;color:var(--gray)}
.agec .sex{display:inline-flex;align-self:flex-start;gap:4px;margin-top:24px;padding:4px;border-radius:999px;background:rgba(10,29,74,.07)}
.agec .sex button{height:40px;padding:0 24px;border-radius:999px;font-size:14px;font-weight:700;color:var(--body);transition:background .3s var(--ease),color .3s var(--ease)}
.agec .sex button.on{background:var(--deep);color:#fff}
.agec-r{padding:clamp(22px,3vw,44px) clamp(22px,3vw,44px) clamp(22px,2.4vw,34px) 0}
@media (min-width:1025px) and (max-width:1680px){.agec-r{padding-right:124px}}
.agec-list{display:grid;gap:8px}
.agec-list li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"ck t st" "ck d st";column-gap:14px;align-items:center;padding:13px 18px 13px 14px;border-radius:18px;background:rgba(255,255,255,.35);opacity:.5;transition:opacity .5s var(--ease),background .5s var(--ease),box-shadow .5s var(--ease),transform .6s var(--ease)}
.agec-list .ck{grid-area:ck;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(10,29,74,.08);color:transparent;transition:background .4s var(--ease),transform .6s var(--ease)}
.agec-list .ck svg{width:18px;height:18px;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s var(--ease) .1s}
.agec-list b{grid-area:t;font-size:16.5px;font-weight:800;letter-spacing:-.04em;color:var(--deep);line-height:1.4}
.agec-list span{grid-area:d;font-size:13px;line-height:1.55;color:var(--body)}
.agec-list .st{grid-area:st;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:800;white-space:nowrap;background:rgba(10,29,74,.07);color:var(--gray);transition:background .4s var(--ease),color .4s var(--ease)}
.agec-list li.on{opacity:1;background:#fff;box-shadow:0 18px 34px -24px rgba(10,29,74,.5);transform:translateX(-10px)}
.agec-list li.on .ck{background:var(--accent);color:#fff;transform:scale(1.06)}
.agec-list li.on .ck svg{stroke-dashoffset:0}
.agec-list li.on .st{background:var(--accent);color:#fff}
.agec-list li.maybe{opacity:1;background:rgba(255,255,255,.75)}
.agec-list li.maybe .ck{background:var(--accent-l);color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.agec-list li.maybe .ck svg{stroke-dashoffset:0}
.agec-list li.maybe .st{background:#fff;color:var(--accent-d);box-shadow:inset 0 0 0 1.5px var(--accent)}
.agec .disc{margin-top:16px;font-size:12px;line-height:1.7;color:var(--gray)}
.cklinks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.cklinks a{position:relative;display:block;padding:28px 64px 28px 30px;border-radius:24px;border:1px solid var(--line);background:#fff;transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .9s var(--ease),opacity .9s var(--ease)}
.cklinks a:hover{border-color:rgba(36,81,184,.45);box-shadow:0 24px 40px -30px rgba(10,29,74,.45)}
.cklinks .k{font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--accent)}
.cklinks h3{margin-top:6px;font-size:21px;font-weight:800;letter-spacing:-.045em;color:var(--deep);line-height:1.45}
.cklinks h3 + p{margin-top:8px;font-size:13.5px;line-height:1.75;color:var(--body)}
.cklinks svg{position:absolute;right:24px;top:26px;width:34px;height:34px;padding:9px;border-radius:50%;background:var(--bg-soft);color:var(--deep);transition:background .3s var(--ease),color .3s var(--ease),transform .4s var(--ease)}
.cklinks a:hover svg{background:var(--accent);color:#fff;transform:translate(2px,-2px)}
@media (max-width:1024px){
  .agec{grid-template-columns:1fr;border-radius:24px}
  .agec-l{padding:28px 22px 8px}
  .agec .num{padding-top:18px}
  .agec .num b{font-size:88px}
  .agec-r{padding:18px 14px 22px}
  .agec-list li{padding:11px 12px 11px 10px;column-gap:10px;border-radius:14px}
  .agec-list li.on{transform:none}
  .agec-list b{font-size:15px}
  .agec-list span{font-size:12px}
  .agec-list .st{height:24px;padding:0 9px;font-size:11px}
  .agec-list .ck{width:30px;height:30px}
  .agec-list li{grid-template-columns:30px minmax(0,1fr) auto}
  .agec .disc{padding:0 6px}
  .cklinks{grid-template-columns:1fr;gap:8px}
  .cklinks a{padding:22px 58px 22px 22px;border-radius:18px}
  .cklinks svg{right:18px;top:20px}
}

/* ══════════ 둘러보기 슬라이더 ══════════ */
.tour{position:relative}
.tour .track{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;padding-left:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)));padding-right:var(--pad);scroll-padding-left:max(var(--pad),calc((100vw - var(--maxw)) / 2 + var(--pad)))}
.tour .track::-webkit-scrollbar{display:none}
.tour .track.drag{cursor:grabbing;scroll-snap-type:none}
.tour figure{position:relative;flex:none;width:clamp(260px,30vw,420px);aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;scroll-snap-align:start;background:var(--bg-soft)}
.tour figure img{width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}
.tour figure i{position:absolute;left:14px;bottom:10px;font-size:11px;font-weight:800;color:#fff;letter-spacing:.1em;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.tour .ctrl{display:flex;align-items:center;gap:22px;margin-top:28px}
.tour .prog{flex:1;height:1px;background:var(--line);position:relative}
.tour .prog b{position:absolute;left:0;top:-1px;height:3px;width:20%;background:var(--accent);transition:left .2s linear}
.tour .hint{font-size:12px;color:var(--gray)}
.tour .arr{display:flex;gap:6px}
.tour .arr button{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--deep);background:#fff;transition:all .3s var(--ease)}
.tour .arr button:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.tour .arr svg{width:16px;height:16px}
@media (max-width:860px){.tour .hint{display:none}.tour figure{width:78vw}}

/* ══════════ 둘러보기 "반대로 흐르는 두 줄 사진" + 크게 보기 ══════════ */
#tour{overflow:hidden}
.pflow{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
.pflow-row{overflow-x:auto;scrollbar-width:none}
.pflow-row::-webkit-scrollbar{display:none}
.pflow.run .pflow-row{overflow:visible}
.pflow-track{display:flex;gap:18px;width:max-content;padding:0 18px;will-change:transform}
.pflow.run .pflow-track{padding:0}
.pflow .fig{position:relative;flex:none;width:440px;height:310px;border-radius:26px;overflow:hidden;background:var(--line);cursor:zoom-in;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.pflow .sm .fig{width:350px;height:246px}
.pflow .fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.pflow .fig span{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;background:rgba(10,29,74,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:-.02em;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pflow .fig:hover,.pflow .fig:focus-visible{transform:translateY(-8px);box-shadow:0 30px 50px -30px rgba(10,29,74,.6)}
.pflow .fig:hover img{transform:scale(1.07)}
.pflow .fig:hover span,.pflow .fig:focus-visible span{opacity:1;transform:none}
.pflow-hint{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:600;color:var(--gray)}
.pflow-hint svg{width:16px;height:16px;color:var(--accent)}
@media (max-width:1024px){
  .pflow,.pflow-track{gap:10px}
  .pflow .fig{width:250px;height:178px;border-radius:18px}
  .pflow .sm .fig{width:204px;height:146px}
  .pflow .fig span{opacity:1;transform:none;left:8px;bottom:8px;height:26px;padding:0 10px;font-size:11px}
}
/* 크게 보기 */
.lbx{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:70px 76px;background:rgba(5,14,38,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.lbx.open{opacity:1;visibility:visible}
.lbx figure{margin:0;max-width:min(1200px,100%);transform:scale(.94);transition:transform .5s var(--ease)}
.lbx.open figure{transform:none}
.lbx img{display:block;max-width:100%;max-height:calc(100vh - 190px);max-height:calc(100svh - 190px);margin:0 auto;border-radius:18px;object-fit:contain}
.lbx figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-size:14px;font-weight:700;color:#fff}
.lbx figcaption i{font-weight:700;color:rgba(255,255,255,.55);letter-spacing:.08em}
.lbx button{position:absolute;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;transition:background .3s var(--ease)}
.lbx button:hover{background:var(--accent)}
.lbx button svg{width:22px;height:22px}
.lbx .x{right:22px;top:22px}
.lbx .pv{left:16px;top:50%;margin-top:-26px}
.lbx .nx{right:16px;top:50%;margin-top:-26px}
@media (max-width:860px){
  .lbx{padding:70px 12px 96px}
  .lbx .pv,.lbx .nx{top:auto;bottom:24px;margin:0}
  .lbx .pv{left:calc(50% - 60px)}.lbx .nx{right:calc(50% - 60px)}
}

/* ══════════ 진료시간 · 오시는 길 ══════════ */
.badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;max-width:520px}
.badges span{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;background:var(--accent-l);font-size:12px;font-weight:700;color:var(--deep);letter-spacing:-.03em}
.badges svg{width:12px;height:12px;color:var(--accent)}
.visit{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px}
.map{position:relative;min-height:380px;border-radius:var(--r);overflow:hidden;background:var(--bg-soft);border:1px solid var(--line)}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map .root_daum_roughmap{width:100%!important;border:0!important}
.map:has(.root_daum_roughmap){background:#fff}
.map .root_daum_roughmap .wrap_map{width:100%!important}
.vside{display:flex;flex-direction:column;gap:12px}
.addr{flex:1;padding:34px 32px;border-radius:var(--r);background:var(--deep);color:#fff;display:flex;flex-direction:column}
.addr .k{font-size:11px;font-weight:700;letter-spacing:.16em;color:#A9C0FF}
.addr h3{margin-top:12px;font-size:clamp(19px,1.8vw,23px);font-weight:800;letter-spacing:-.04em;line-height:1.5}
.addr p{margin-top:8px;font-size:14px;color:rgba(255,255,255,.7)}
.addr .links{margin-top:auto;padding-top:26px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.addr .links a{display:flex;align-items:center;justify-content:center;gap:8px;height:48px;border-radius:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:13.5px;font-weight:700;transition:background .3s var(--ease)}
.addr .links a:hover{background:rgba(255,255,255,.16)}
.addr .links i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:4px;font-size:11px;font-weight:900}
.addr .links .nv i{background:var(--naver)}
.addr .links .bl i{background:var(--naver)}
.telbox{padding:22px 26px;border-radius:var(--r);border:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}
.telbox small{display:block;font-size:12px;color:var(--gray);font-weight:600}
.telbox b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--deep);line-height:1.4}
.hours{margin-top:12px;padding:30px;border:1px solid var(--line);border-radius:var(--r)}
.hours h3{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:800;color:var(--deep);letter-spacing:-.03em}
.hours h3::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--accent)}
.hgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:20px}
.hcell{padding:20px 22px;border-radius:6px;background:var(--bg-soft);border:1px solid var(--line)}
.hcell small{display:block;font-size:12.5px;font-weight:700;color:var(--accent)}
.hcell b{display:block;margin-top:6px;font-size:21px;font-weight:800;color:var(--deep);letter-spacing:-.02em;line-height:1.3}
.hcell.dk{background:var(--deep);border-color:var(--deep)}
.hcell.dk small{color:#A9C0FF}.hcell.dk b{color:#fff}
.hcell.off b{color:var(--gray)}
.notes{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:18px;font-size:13px;color:var(--gray)}
.partners{margin-top:12px;padding:26px 30px;border:1px solid var(--line);border-radius:var(--r);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.partners h3{font-size:15px;font-weight:800;color:var(--deep);letter-spacing:-.03em;flex:none}
.partners ul{display:flex;flex-wrap:wrap;gap:8px}
.partners li{height:34px;padding:0 15px;display:inline-flex;align-items:center;border-radius:999px;background:var(--bg-soft);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--body)}
@media (max-width:960px){
  .visit{grid-template-columns:1fr}
  .map{min-height:300px}
  .hgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .badges{justify-content:flex-start;margin-top:22px}
  .hours{padding:24px 20px}
  .hcell{padding:16px}
  .hcell b{font-size:18px}
  .partners{padding:22px 20px;gap:14px}
}

/* ══════════ 푸터 ══════════ */
.ft{background:var(--bg-soft);border-top:1px solid var(--line);padding:70px 0 0;font-size:13.5px;color:var(--body)}
.ft .top{display:flex;justify-content:space-between;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.ft .flogo img{height:52px;width:auto}
.ft .fnav{display:flex;flex-wrap:wrap;gap:8px 28px;font-weight:600;color:var(--deep);align-content:flex-start;justify-content:flex-end}
.ft .fnav a:hover{color:var(--accent)}
.ft .info{padding:28px 0;display:flex;flex-wrap:wrap;gap:6px 22px;line-height:1.7}
.ft .info b{color:var(--deep);font-weight:700;margin-right:6px}
.ft .copy{padding-bottom:18px;color:var(--gray);font-size:12.5px}
.ft .disc{padding:0 0 40px;color:var(--gray);font-size:12.5px;line-height:1.8}
@media (max-width:860px){
  .ft{padding-top:50px;padding-bottom:70px}
  .ft .top{flex-direction:column;gap:26px}
  .ft .fnav{justify-content:flex-start;gap:8px 18px}
  .ft .info{flex-direction:column;gap:2px}
}

/* ══════════ 빠른 메뉴 ══════════ */
.quick{position:fixed;right:22px;top:50%;transform:translateY(-50%);z-index:800;width:78px;background:#fff;border-radius:12px;box-shadow:0 18px 40px -18px rgba(10,29,74,.45);overflow:hidden}
.quick a{display:flex;flex-direction:column;align-items:center;gap:5px;padding:14px 4px;font-size:11.5px;font-weight:700;color:var(--deep);border-bottom:1px solid var(--line);transition:background .25s var(--ease),color .25s var(--ease)}
.quick a:hover{background:var(--accent-l);color:var(--accent)}
.quick svg{width:20px;height:20px}
.quick .top{background:var(--deep);color:#fff;border:0}
.quick .top:hover{background:var(--accent);color:#fff}
.mbar{display:none}
@media (max-width:1024px){
  .quick{display:none}
  .mbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;left:0;right:0;bottom:0;z-index:800;background:#fff;border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
  .mbar a{display:flex;align-items:center;justify-content:center;gap:6px;height:56px;font-size:13.5px;font-weight:700;color:var(--deep)}
  .mbar a svg{width:16px;height:16px}
  .mbar .p{background:var(--accent);color:#fff}
  body{padding-bottom:56px}
}

/* ══════════ 서브페이지 ══════════ */
.sub-hero{position:relative;padding:calc(var(--hd) + 110px) 0 90px;background:var(--deep);color:#fff;overflow:hidden}
.sub-hero .bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32}
.sub-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(8,22,58,.96) 0%,rgba(8,22,58,.7) 55%,rgba(8,22,58,.35) 100%)}
.sub-hero .wrap{position:relative;z-index:1}
.sub-hero .crumb{font-size:12.5px;color:rgba(255,255,255,.6);display:flex;gap:8px}
.sub-hero .crumb a:hover{color:#fff}
.sub-hero h1{margin-top:18px;font-size:clamp(32px,4.6vw,56px);font-weight:800;letter-spacing:-.05em;line-height:1.36}
.sub-hero h1 em{color:#9DB8FF}
.sub-hero p{margin-top:16px;max-width:680px;font-size:clamp(15px,1.6vw,18px);color:rgba(255,255,255,.8);line-height:1.85}
.sub-hero .chips .chip{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff}
@media (max-width:860px){.sub-hero{padding:calc(var(--hd) + 60px) 0 60px}}

.subnav{position:sticky;top:70px;z-index:700;background:#fff;border-bottom:1px solid var(--line)}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{flex:none;padding:18px 18px;font-size:14.5px;font-weight:700;color:var(--gray);border-bottom:2px solid transparent;transition:color .25s var(--ease),border-color .25s var(--ease)}
.subnav a:hover,.subnav a.on{color:var(--deep);border-color:var(--accent)}
@media (max-width:860px){.subnav{top:60px}.subnav a{padding:15px 12px;font-size:14px}}

.block{padding:110px 0;scroll-margin-top:130px}
.block+.block{border-top:1px solid var(--line)}
.block.soft{background:var(--bg-soft);border-top:0}
.h3{font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--deep);letter-spacing:-.045em;line-height:1.45}
.h3 em{color:var(--accent)}
.sub-t{margin:70px 0 22px;display:flex;align-items:center;gap:10px;font-size:clamp(18px,1.9vw,22px);font-weight:800;color:var(--deep);letter-spacing:-.04em}
.sub-t::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--accent);flex:none}
.sub-t:first-child{margin-top:0}
.p-lead{margin-top:16px;font-size:16px;line-height:1.95;color:var(--body);max-width:820px}
@media (max-width:860px){.block{padding:70px 0}.sub-t{margin-top:50px}}

/* 소개(사진+글) */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center}
.intro .ph{border-radius:var(--r);overflow:hidden;aspect-ratio:3/2}
.intro .ph img{width:100%;height:100%;object-fit:cover}
.callout{margin-top:26px;padding:22px 26px;border-radius:var(--r);background:var(--accent-l);border-left:3px solid var(--accent);font-size:15px;color:var(--deep);line-height:1.85;font-weight:500}
@media (max-width:960px){.intro{grid-template-columns:1fr;gap:34px}}

/* 원칙 5카드 */
.five{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.five li{padding:30px 22px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-align:center}
.five .ic{width:54px;height:54px;margin:0 auto;border-radius:50%;background:var(--accent-l);color:var(--accent);display:flex;align-items:center;justify-content:center}
.five .ic svg{width:24px;height:24px}
.five b{display:block;margin-top:16px;font-size:17px;font-weight:800;color:var(--deep);letter-spacing:-.04em}
.five p{margin-top:6px;font-size:13.5px;line-height:1.75;color:var(--body)}
@media (max-width:1100px){.five{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:600px){.five{grid-template-columns:1fr 1fr}.five li{padding:24px 14px}.five li:last-child{grid-column:1 / -1}}

/* 장비 */
.equip{display:grid;grid-template-columns:260px 1fr;gap:60px;align-items:center;padding:44px 54px;border:1px solid var(--line);border-radius:12px;background:#fff}
.equip img{max-height:360px;margin:0 auto}
.equip .nm{display:inline-flex;align-items:baseline;gap:10px;padding:10px 18px;border-radius:6px;background:var(--deep);color:#fff}
.equip .nm b{font-size:18px;font-weight:800}
.equip .nm span{font-size:13px;color:#A9C0FF;font-weight:700}
.checks{margin-top:22px}
.checks li{position:relative;padding:9px 0 9px 30px;font-size:15px;color:var(--body);border-bottom:1px dashed var(--line)}
.checks li::before{content:'';position:absolute;left:0;top:15px;width:18px;height:18px;border-radius:50%;background:var(--accent-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232451B8' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/11px no-repeat}
@media (max-width:860px){.equip{grid-template-columns:1fr;gap:26px;padding:30px 22px}.equip img{max-height:260px}}

/* 검사 대상 (사진 카드) */
.targets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.targets li{border-radius:var(--r);overflow:hidden;background:#fff;border:1px solid var(--line)}
.targets img{width:100%;aspect-ratio:4/3;object-fit:cover}
.targets p{padding:16px 18px 18px;font-size:14.5px;font-weight:600;color:var(--deep);line-height:1.65;letter-spacing:-.03em}
@media (max-width:960px){.targets{grid-template-columns:1fr 1fr}.targets p{font-size:13.5px;padding:12px 14px 14px}}

/* 흐름/주기 */
.flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.flow li{position:relative;padding:26px 26px 28px;border-radius:var(--r);background:#fff;border:1px solid var(--line)}
.flow li small{display:block;font-size:12px;font-weight:800;letter-spacing:.12em;color:var(--accent)}
.flow li b{display:block;margin-top:8px;font-size:17px;font-weight:700;color:var(--deep);line-height:1.6;letter-spacing:-.035em}
.flow li strong{display:inline-flex;margin-top:14px;height:34px;padding:0 15px;align-items:center;border-radius:999px;background:var(--deep);color:#fff;font-size:14px;font-weight:800}
.flow li.hl{background:var(--accent-l);border-color:rgba(36,81,184,.3)}
@media (max-width:860px){.flow{grid-template-columns:1fr}}

/* 금식 안내 */
.fast{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fast li{padding:26px 28px;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.fast li small{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--accent-l);font-size:12.5px;font-weight:800;color:var(--accent-d)}
.fast li.pm small{background:#EEF0F8;color:#3B4A8C}
.fast li b{display:block;margin-top:12px;font-size:20px;font-weight:800;color:var(--deep);letter-spacing:-.04em;line-height:1.5}
@media (max-width:600px){.fast{grid-template-columns:1fr}}

.bul{margin-top:10px}
.bul li{position:relative;padding:12px 0 12px 22px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.75;color:var(--body)}
.bul li::before{content:'';position:absolute;left:4px;top:23px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.bul.warn li::before{background:#E0714A}

.tags2{display:flex;flex-wrap:wrap;gap:8px}
.tags2 li{height:40px;padding:0 18px;display:inline-flex;align-items:center;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14.5px;font-weight:700;color:var(--deep)}

/* AI 내시경 */
.ai-banner{position:relative;overflow:hidden;padding:56px 50px;border-radius:12px;background:linear-gradient(120deg,#0F2A66,#2F5CC8);color:#fff;text-align:center}
.ai-banner::after{content:'';position:absolute;right:-80px;top:-80px;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.07)}
.ai-banner h3{font-size:clamp(22px,2.8vw,32px);font-weight:800;letter-spacing:-.045em;line-height:1.5}
.ai-banner h3 em{color:#FFD45C}
.ai-banner p{margin-top:14px;font-size:15px;color:rgba(255,255,255,.82)}
.ai-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:10px}
.ai-why li{padding:28px 20px;border-radius:var(--r);background:#fff;border:1px solid var(--line);text-align:center;font-size:14.5px;color:var(--body)}
.ai-why li b{display:block;font-size:17px;color:var(--deep);font-weight:800;margin-top:2px}
.ai-cmp{margin-top:10px;display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:center;padding:34px;border-radius:12px;background:var(--deep);color:#fff}
.ai-cmp .lb b{display:block;font-size:20px;font-weight:800}
.ai-cmp .lb small{display:block;font-size:12.5px;color:rgba(255,255,255,.6);line-height:1.6}
.ai-cmp .lb .af b{color:#FFD45C}
.ai-cmp .lb .arrow{margin:14px 0;color:rgba(255,255,255,.4)}
.ai-cmp .imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ai-cmp figure{position:relative;border-radius:8px;overflow:hidden;border:2px solid rgba(255,255,255,.12);background:#000}
.ai-cmp figure.af{border-color:#FFD45C}
.ai-cmp figure img{width:100%;aspect-ratio:1.15/1;object-fit:cover}
.ai-cmp figure span{position:absolute;right:8px;bottom:8px;padding:2px 9px;border-radius:999px;background:#FFD45C;color:var(--deep);font-size:11px;font-weight:800}
@media (max-width:860px){.ai-banner{padding:40px 22px}.ai-why{grid-template-columns:1fr}.ai-cmp{grid-template-columns:1fr;padding:22px}}

/* 표 */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r);border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff}
.tbl .prh{text-align:right;width:190px}
.tbl .mdesc{display:none}
.tbl th,.tbl td{padding:14px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;line-height:1.6}
.tbl thead th{background:var(--deep);color:#fff;font-weight:700;font-size:14px}
.tbl tbody th{background:var(--bg-soft);color:var(--deep);font-weight:700}
.tbl tr:last-child td,.tbl tr:last-child th{border-bottom:0}
.tbl td.pr{text-align:right;font-weight:800;color:var(--deep);white-space:nowrap}
.tbl td small,.tbl th small{display:block;font-size:12.5px;color:var(--gray);font-weight:500}
.tbl .grp{background:var(--accent-l);color:var(--deep);font-weight:800}
.tbl.center th,.tbl.center td{text-align:center}
.fee-sec{margin-top:54px}
.fee-sec:first-child{margin-top:0}
.fee-sec h3{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:20px;font-weight:800;color:var(--deep);letter-spacing:-.04em}
.fee-sec h3::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--accent)}
.fee-note{margin-top:40px;padding:22px 26px;border-radius:var(--r);background:var(--bg-soft);font-size:13.5px;color:var(--gray);line-height:1.85}
@media (max-width:860px){.tbl{font-size:13.5px}.tbl th,.tbl td{padding:12px 12px}.tbl .prh{width:auto}.tbl .desc{display:none}.tbl .mdesc{display:block}.tbl td.pr{white-space:normal;min-width:92px}}

/* 5대암 */
.cancer{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.cancer li{padding:28px 18px;border-radius:var(--r);border:1px solid var(--line);background:#fff;text-align:center}
.cancer li b{display:block;font-size:19px;font-weight:800;color:var(--deep);letter-spacing:-.04em}
.cancer li .cy{display:inline-flex;margin-top:10px;height:30px;padding:0 13px;align-items:center;border-radius:999px;background:var(--deep);color:#fff;font-size:13px;font-weight:700}
.cancer li p{margin-top:12px;font-size:14px;color:var(--body);line-height:1.7}
.cancer li small{display:block;font-size:12.5px;color:var(--gray)}
@media (max-width:960px){.cancer{grid-template-columns:1fr 1fr}.cancer li:last-child{grid-column:1 / -1}}

/* 의료진 페이지 */
.docfull{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:80px;align-items:start}
.docfull+.docfull{margin-top:120px;padding-top:120px;border-top:1px solid var(--line)}
.docfull .frame{background:#fff;border-bottom:3px solid var(--deep);aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;position:sticky;top:110px}
.docfull .frame img{height:100%;width:auto;object-fit:contain}
.cgroups{margin-top:36px;display:grid;gap:30px}
.cgroups h4{font-size:12px;font-weight:800;letter-spacing:.16em;color:var(--accent);padding-bottom:10px;border-bottom:1px solid var(--deep)}
.cgroups ul li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--body);line-height:1.6}
@media (max-width:960px){.docfull{grid-template-columns:1fr;gap:34px}.docfull .frame{position:static;max-width:420px}.docfull+.docfull{margin-top:70px;padding-top:70px}}

/* 자주 묻는 질문 (FAQ) */
#faq{scroll-margin-top:130px}
.faq{border-top:1px solid var(--deep)}
.faq-item{border-bottom:1px solid var(--line);background:transparent}
.faq-item summary{list-style:none;cursor:pointer;position:relative;padding:26px 56px 26px 44px;font-size:18px;font-weight:700;color:var(--deep);line-height:1.55;letter-spacing:-.02em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{content:"Q";position:absolute;left:4px;top:25px;font-size:19px;font-weight:800;color:var(--accent)}
.faq-item summary::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px;margin-top:-8px;border-right:2px solid var(--deep);border-bottom:2px solid var(--deep);transform:rotate(45deg);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.faq-item summary:hover{color:var(--accent-d)}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq-item .a{position:relative;padding:0 56px 28px 44px}
.faq-item .a::before{content:"A";position:absolute;left:4px;top:-1px;font-size:19px;font-weight:800;color:var(--gray)}
.faq-item .a p{font-size:16px;color:var(--body);line-height:1.85}
@media (max-width:860px){
  .faq-item summary{padding:20px 38px 20px 32px;font-size:16px}
  .faq-item summary::before{top:19px;font-size:17px;left:2px}
  .faq-item summary::after{right:6px;width:9px;height:9px}
  .faq-item .a{padding:0 8px 22px 32px}
  .faq-item .a::before{font-size:17px;left:2px}
  .faq-item .a p{font-size:15px}
}

/* ══════════════════════════════════════════════════════════════
   류마성모신경과내과 전용 추가 스타일
   ══════════════════════════════════════════════════════════════ */

/* 류마티스내과 페이지: 강조색을 주황으로 바꿉니다 (구성은 신경과 페이지와 같음) */
body.th-coral{--accent:var(--coral);--accent-d:var(--coral-d);--accent-l:var(--coral-l)}
body.th-coral .sub-hero h1 em{color:#FFB08F}

/* ══════════ 두 진료과 "나란히 펼친 두 장" ══════════ */
.dept{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.dcol{position:relative;border-radius:32px;overflow:hidden;padding:clamp(28px,3.4vw,52px);background:var(--deep);color:#fff}
.dcol.rh{background:#2A1712}
.dcol::before{content:'';position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(36,81,184,.45),rgba(36,81,184,0) 70%)}
.dcol.rh::before{background:radial-gradient(circle,rgba(232,88,47,.42),rgba(232,88,47,0) 70%)}
.dcol>*{position:relative}
.dcol .k{font-size:11.5px;font-weight:700;letter-spacing:.18em;color:#A9C0FF}
.dcol.rh .k{color:#FFB08F}
.dcol h3{margin-top:10px;font-size:clamp(28px,3vw,42px);font-weight:800;letter-spacing:-.05em;line-height:1.3}
.dcol .ds{margin-top:10px;font-size:15px;line-height:1.8;color:rgba(255,255,255,.74)}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:30px}
.dgrid a{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:16/11;background:#000}
.dgrid img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:transform 1.1s var(--ease),opacity .5s var(--ease)}
.dgrid a::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.1) 60%)}
.dgrid b{position:absolute;left:16px;right:16px;bottom:13px;z-index:1;font-size:clamp(14.5px,1.25vw,17px);font-weight:800;letter-spacing:-.04em;line-height:1.4}
.dgrid a:hover img{transform:scale(1.07);opacity:1}
.dcol .btn{margin-top:26px}
.dcol .btn-w{background:#fff;color:var(--deep)}
.dcol .btn-w:hover{background:var(--accent);color:#fff}
.dcol.rh .btn-w:hover{background:var(--coral)}
@media (max-width:1024px){.dept{grid-template-columns:1fr}.dcol{border-radius:24px}}
@media (max-width:480px){.dgrid{gap:8px}.dgrid b{left:11px;right:11px;bottom:9px;font-size:13.5px}}

/* ══════════ 검사장비 : 옆으로 지나가는 카드의 흰 바탕 버전 ══════════ */
.hx.eq .hx-card{width:min(400px,76vw)}
.hx.eq .hx-card .ph{background:#fff}
.hx.eq .hx-card .ph img{object-fit:contain;padding:18px 18px 8px}
.hx.eq .hx-card .ph::after{display:none}
.hx.eq .hx-card .big{-webkit-text-stroke:2px rgba(10,29,74,.18);left:auto;right:18px}
.hx.eq .hx-card .ds{min-height:0}
.eq-note{margin-top:22px;font-size:13px;color:rgba(255,255,255,.55)}

/* ══════════ 유튜브 강의 ══════════ */
.yt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.yt a{display:block}
.yt .th{position:relative;border-radius:18px;overflow:hidden;aspect-ratio:16/9;background:#000}
.yt .th img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.yt .th::after{content:'';position:absolute;left:50%;top:50%;width:58px;height:40px;margin:-20px 0 0 -29px;border-radius:12px;background:#E62117 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5v14l11-7z'/%3E%3C/svg%3E") center/22px no-repeat;opacity:.92;transition:transform .4s var(--ease)}
.yt a:hover .th img{transform:scale(1.05)}
.yt a:hover .th::after{transform:scale(1.1)}
.yt .who{display:inline-flex;margin-top:14px;height:26px;padding:0 11px;align-items:center;border-radius:999px;background:var(--accent-l);font-size:12px;font-weight:800;color:var(--accent-d)}
.yt .who.rh{background:var(--coral-l);color:var(--coral-d)}
.yt h3{margin-top:8px;font-size:17px;font-weight:800;letter-spacing:-.04em;line-height:1.5;color:var(--deep)}
@media (max-width:1024px){.yt{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.yt{grid-template-columns:1fr}}

/* 오시는 길 : 약도 이미지 */
.map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map .open{position:absolute;right:14px;bottom:14px;z-index:1;display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-radius:999px;background:var(--naver);color:#fff;font-size:13px;font-weight:700;box-shadow:0 10px 20px -10px rgba(0,0,0,.5)}
.way{margin-top:14px;font-size:14px;color:rgba(255,255,255,.8);line-height:1.8}
.way b{color:#fff}

/* ══════════ 질환 안내 (신경과 · 류마티스내과 페이지) ══════════ */
.dz{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:70px;align-items:start}
.dz .ph{position:sticky;top:150px;border-radius:24px;overflow:hidden;aspect-ratio:4/3}
.dz .ph img{width:100%;height:100%;object-fit:cover}
.dz .h2{margin-top:14px}
.dz .kind{margin-top:34px;border-top:1px solid var(--deep)}
.dz .kind li{display:grid;grid-template-columns:minmax(120px,.34fr) 1fr;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px;line-height:1.7}
.dz .kind li b{color:var(--accent-d);font-weight:800;letter-spacing:-.03em}
.dz .kind.one li{grid-template-columns:1fr}
.dz .kind.one li b{color:var(--deep)}
.dz .kt{margin-top:34px;font-size:13px;font-weight:800;letter-spacing:.04em;color:var(--gray)}
.dz .kt + .kind{margin-top:10px}
.dz .care{margin-top:30px;padding:24px 26px;border-radius:14px;background:var(--accent-l);border-left:3px solid var(--accent)}
.dz .care h4{font-size:16px;font-weight:800;color:var(--deep);letter-spacing:-.03em}
.dz .care p{margin-top:6px;font-size:15px;line-height:1.85;color:var(--body)}
.dz .tst{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.dz .tst span{display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12.5px;font-weight:700;color:var(--deep)}
.dz .tst span::before{content:'관련 검사';margin-right:7px;font-size:10.5px;font-weight:800;color:var(--accent)}
.dz .tst span.tx::before{content:'진료'}
@media (max-width:960px){.dz{grid-template-columns:1fr;gap:28px}.dz .ph{position:static;order:-1;aspect-ratio:16/10;border-radius:18px}.dz .kind li{grid-template-columns:1fr;gap:2px;padding:13px 0}}

/* 진료분야 요약 (서브페이지 첫 구역) */
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fields a{display:block;padding:26px 26px 24px;border-radius:14px;background:#fff;border:1px solid var(--line);transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.fields a:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 22px 36px -28px rgba(10,29,74,.5)}
.fields small{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--accent)}
.fields b{display:block;margin-top:6px;font-size:19px;font-weight:800;letter-spacing:-.04em;color:var(--deep);line-height:1.45}
.fields p{margin-top:6px;font-size:13.5px;line-height:1.7;color:var(--body)}
@media (max-width:960px){.fields{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.fields{grid-template-columns:1fr}.fields a{padding:20px}}

/* 다른 진료과 안내 띠 */
.cross{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:36px 40px;border-radius:24px;background:var(--deep);color:#fff}
.cross.rh{background:#2A1712}
.cross p{font-size:clamp(18px,1.8vw,23px);font-weight:800;letter-spacing:-.04em;line-height:1.5}
.cross p small{display:block;font-size:14px;font-weight:500;color:rgba(255,255,255,.7);letter-spacing:-.02em}
.cross .btn-w{background:#fff;color:var(--deep)}
@media (max-width:760px){.cross{flex-direction:column;align-items:flex-start;padding:28px 24px}}

/* 장비 목록 */
.eqs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.eqs li{border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line)}
.eqs img{width:100%;aspect-ratio:388/302;object-fit:contain;background:#fff;padding:12px}
.eqs div{padding:18px 20px 22px;border-top:1px solid var(--line)}
.eqs b{display:block;font-size:17px;font-weight:800;letter-spacing:-.04em;color:var(--deep);line-height:1.45}
.eqs p{margin-top:6px;font-size:14px;line-height:1.7;color:var(--body)}
@media (max-width:1024px){.eqs{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.eqs{gap:8px}.eqs div{padding:14px 14px 16px}.eqs b{font-size:15px}.eqs p{font-size:13px}}

/* 헤더 로고 : 가로로 긴 로고라 조금 낮게 */
#hd .logo img{height:36px}
#hd.solid .logo img{height:32px}
@media (max-width:860px){#hd .logo img,#hd.solid .logo img{height:26px}}
.ft .flogo img{height:40px;width:auto}

.addr .links .bl i{background:#E62117;font-size:9px}
.map{display:block}