*{margin:0;padding:0;box-sizing:border-box;}
html{scrollbar-gutter: stable;}
a{text-decoration:none;}
ul,li{list-style:none;}
a,span,p,div,ul,li,strong,button,b,h1,h2,h3,h4,h5,h6,em,dl,dt,dd,input,select{color:#1e293b;}


.wrapper{overflow:visible;}
.counsel-btn{display:none;}
.basic-body{padding:0;}
.basic-body-main{padding:0;}
.main-wrap{margin-left:0;margin-right:0;}
.basic-body-main.left-main{width:100%;}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{max-width:100%;padding-right:0;padding-left:0;}
.header-wrap{border-bottom:none;background:transparent;position:fixed;top:0;left:0;right:0;}
.header-title{border-bottom:none;}
.header-title .title-logo img{height:80px;}
.header-wrap{display:flex;align-items:center;justify-content:space-between;padding:0 100px;}
.navbar-nav a{color:#fff;transition:color .3s ease;}
.navbar-nav a.scrolled{color:#1e293b;}
.eb-backtotop{display:none;}
.navbar-nav>li>.nav-link:hover{color:#4f8fc0;}
.navbar-nav .dropdown-toggle::after{display:none;}
.page-title-wrap,.sidebar-user-btn.mo-btn,.navbar-mobile-toggler{display:none;}
.root_daum_roughmap .cont,.root_daum_roughmap .wrap_controllers{display:none !important;}
.root_daum_roughmap{width:100% !important;height:520px;}
.root_daum_roughmap .wrap_map{height:520px !important;}

@media (max-width:991px){
.root_daum_roughmap{height:320px;}
.root_daum_roughmap .wrap_map{height:320px !important;}
}

#navBar.on-light{color:#1e293b;background:#fff;}
#navBar.on-dark{ color:#ffffff;}
#navBar{ transition:opacity .5s ease, color .3s ease, background .3s ease, backdrop-filter .3s ease, transform .3s ease; }
#navBar.nav-hidden{ transform:translateY(-100%); }
#navBar.pre{ opacity:0; }
#navBar.scroll-fast{ backdrop-filter:none; }

.main-section .intro{
  position:relative; height:100vh; width:100%; background:#ffffff; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center; padding:0 5% 0 8%; z-index:90;
}
.main-section .intro-headline{position:absolute; top:25%; left:50%; right:0; transform:translateX(-50%);max-width:500px; z-index:5;text-align:center;}
.main-section .intro-headline .line-wrap{ overflow:hidden;/*  width:max-content;  */}
.main-section .intro-headline .line-wrap2{}
.main-section .intro-headline .line{
  font-size:clamp(28px,4.2vw,54px); font-weight:800; line-height:1.3; white-space:pre;
  transition:transform .6s cubic-bezier(.16,.85,.3,1);
}
.main-section .intro-headline .line1{transform:translateX(-100%);font-size:70px;}
.main-section .intro-headline .line2{ color:#4f8fc0; transform:translateX(100%);font-size:85px;letter-spacing:0.14em;padding-left:0.14em;/* margin-right:-0.14em; */}
.main-section .intro-headline .line.in{
  transform:translateX(0);
}
.main-section .intro-headline .line1.out{
  transform:translateX(-100%);
  transition:transform .8s cubic-bezier(.45,0,.15,1);
}
.main-section .intro-headline .line2.out{
  transform:translateX(100%);
  transition:transform .8s cubic-bezier(.45,0,.15,1);
}

.main-section .intro-grid{
  display:grid; grid-template-columns:.9fr 1.7fr 1.1fr; grid-template-rows:1.15fr .85fr;
  gap:50px; height:80vh;
  opacity:0;
  transform:translateY(80vh);
  transition:opacity .9s cubic-bezier(.45,0,.15,1), transform .9s cubic-bezier(.45,0,.15,1);
}
.main-section .intro-grid.settled{ opacity:1; transform:translateY(46vh); }
.main-section .intro-grid.risen{ opacity:1; transform:translateY(0);}
.main-section .intro-tile{
  position:relative; border-radius:12px; overflow:hidden; color:#fff;
  display:flex; align-items:flex-end; padding:14px; font-weight:700; font-size:14px;
}
.main-section .intro-tile .tag{ position:absolute; top:12px; right:12px; font-size:19px; opacity:.95; }
.main-section .intro-tile.crane{grid-column:1; grid-row:1; align-self:start; margin-top:150px; height:58%;background:linear-gradient(155deg,#0c2f52,#1c5f9e 65%,#8fc0e6);}
.main-section .intro-tile.coal{grid-column:1; grid-row:2; align-self:start; margin-top:0; height:90%;background:linear-gradient(155deg,#20180f,#4a3626 65%,#7c6247);opacity:0; transform:scale(.92);transition:opacity .4s ease, transform .4s cubic-bezier(.45,0,.15,1);}
.main-section .intro-tile.coal.in{ opacity:1; transform:scale(1); }
.main-section .intro-tile.coil{
  grid-column:2; grid-row:1 / span 2; border-radius:16px; font-size:0;
  /* 영상이 뜨기 전까지 보이는 자리 표시(placeholder) 배경 — #coilOverlay와 동일한
     그라데이션이라 나중에 영상이 화면 전체로 확대될 때 이질감 없이 이어집니다.
     이게 빠져 있으면 영상이 뜨기 전까지 이 타일이 그냥 흰 박스로 보입니다. */
  background:#fff;
}
.main-section .intro-tile.coil video {width: 100%;height: 100%;display: block;object-fit: cover;}
.main-section .intro-tile.pile{
  grid-column:3; grid-row:1; align-self:start; margin-top:16px; height:90%;
  background:linear-gradient(155deg,#2a2a2a,#050505 70%);
}
.main-section .intro-tile.corn{
  grid-column:3; grid-row:2; align-self:start; margin-top:0; height:88%;
  background:linear-gradient(155deg,#f6c94a,#dd8f28);
}

/* =====================================================================
   첫 화면 심볼 인트로 — #intro에 data-intro="A"(심볼 창) 또는 "B"(로고 그대로)일 때만 적용
   data-intro="tiles"(또는 속성 없음)면 예전 네모 타일 그대로 나옵니다.
   ===================================================================== */
.main-section .intro-symbol{ display:none; }
.main-section .intro[data-intro="A"],
.main-section .intro[data-intro="B"]{ padding:0; }
.main-section .intro[data-intro="A"] .intro-grid,
.main-section .intro[data-intro="B"] .intro-grid{ display:flex; align-items:center; justify-content:center; }
.main-section .intro[data-intro="A"] .intro-tile,
.main-section .intro[data-intro="B"] .intro-tile{ display:none; }
/* 심볼 자리(눈에 안 보이는 기준 상자) — 그리드와 같이 올라오고, JS가 이 자리에 로고와 영상 창을 맞춥니다 */
.main-section .intro[data-intro="A"] .intro-symbol,
.main-section .intro[data-intro="B"] .intro-symbol{ display:block; width:min(60vw, 52vh * 86 / 47); aspect-ratio:86 / 47; }
.main-section .intro-symbol-art{ position:fixed; inset:0; z-index:4; width:100%; height:100%; pointer-events:none; overflow:visible; }
@media (max-width:991px){
  .main-section .intro[data-intro="A"] .intro-symbol,
  .main-section .intro[data-intro="B"] .intro-symbol{ width:84vw; }
}

.main-section #coilOverlay{
  position:fixed; inset:0; z-index:200; overflow:hidden;
  pointer-events:none; opacity:0; border-radius:16px;
  background:radial-gradient(circle at 15% 20%, rgba(255,190,120,.55), transparent 45%), radial-gradient(circle at 75% 60%, rgba(60,20,10,.9), transparent 55%), linear-gradient(120deg, #3a1a0e, #a5471f 55%, #e08a3c);
  clip-path:inset(0 0 0 0 round 16px);
  transition:none;
}
.main-section #coilOverlay.no-anim{ transition:none !important; }

.main-section .hero-copy.pre, .main-section .hero-cta.pre{ opacity:0; transform:translateY(14px); pointer-events:none; }

/* =====================================================================
   메인 인트로 — "환자의 고통을 / 감탄으로!" 아래 모래시계 아이콘 + 뜻풀이 한 줄
   ===================================================================== */
.main-section .ih-def{
  display:flex; align-items:center; justify-content:center; gap:8px; margin:22px 0 0;
  font-size:17px; white-space:nowrap;
  opacity:0; transform:translateY(8px); animation:ihIn .7s ease .6s forwards;
}
.main-section .ih-def strong{ font-weight:800; color:#1b3a5f; }
.main-section .ih-def span{ color:#64748b; }
.main-section .ih-hg{ width:11px; height:18px; flex:none; margin-right:2px; fill:#1b3a5f; }
@keyframes ihIn{ to{ opacity:1; transform:none; } }
/* 스크롤(또는 자동)로 제목이 빠질 때 같이 사라짐 */
.main-section .intro-headline:has(.line1.out) .ih-def{ opacity:0 !important; transition:opacity .4s ease; animation:none; }
@media (max-width:991px){
  .main-section .ih-def{ margin-top:16px; font-size:14px; gap:6px; }
  .main-section .ih-hg{ width:9px; height:15px; }
}

.main-section .stage{position:relative;height:115vh;}
.main-section .pin{position:absolute;top:0;left:0;height:100vh;width:100%;overflow:hidden;background:#ffffff;}
.main-section .pin.js-pin-fixed{position:fixed;top:0;}
.main-section .pin.js-pin-bottom{position:absolute;top:auto;bottom:0;}
.main-section .media{position:absolute;top:0; left:0;width:100%; height:100%;border-radius:0px;overflow:hidden;z-index:20;transition:width 1.8s cubic-bezier(.65,0,.35,1), height 1.8s cubic-bezier(.65,0,.35,1),
           top 1.8s cubic-bezier(.65,0,.35,1), left 1.8s cubic-bezier(.65,0,.35,1),
           border-radius 1.8s ease;}
.main-section .media.shrunk{width:50vw; height:60vh; top:35vh; left:25vw; border-radius:18px;}
@keyframes drift{
	from{ background-position:0 0, 13px 19px; }
    to{ background-position:-400px 300px, -300px -260px; }
}
.main-section .hero-copy{ position:absolute; left:6%; bottom:calc(9% + 84px); z-index:30; color:#fff; max-width:760px; transition:opacity .3s ease, transform .3s ease; }
.main-section .hero-copy h1{ font-size:clamp(34px, 4.6vw, 64px); font-weight:800; line-height:1.14; letter-spacing:-.5px; margin-bottom:22px;color:#fff;}
.main-section .hero-copy p{font-size:20px; font-weight:500; opacity:.92; padding-top:18px; border-top:1px solid rgba(255,255,255,.4); display:inline-block;color:#fff;}
.main-section .hero-cta{ position:absolute; left:6%; bottom:9%; z-index:30; display:flex; align-items:center; gap:14px; padding:7px 7px 7px 24px; border:1.4px solid rgba(255,255,255,.75); border-radius:999px; overflow:hidden; isolation:isolate; transition:all .3s ease; }
.main-section .hero-cta:hover{ border-color:#4f8fc0; }
.main-section .hero-cta .hero-cta-txt{ color:#fff; font-size:14px; font-weight:700; white-space:nowrap; }
.main-section .hero-cta .hero-cta-dot{ position:relative; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; flex:none; }
.main-section .hero-cta .hero-cta-dot::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:50%; background:#4f8fc0; transition:transform .55s cubic-bezier(.7,0,.2,1); }
.main-section .hero-cta .hero-cta-arr{ display:inline-block; color:#fff; font-size:15px; line-height:1; transition:transform .4s cubic-bezier(.2,.8,.2,1); }
.main-section a:hover .hero-cta .hero-cta-dot::before, .main-section a:focus-visible .hero-cta .hero-cta-dot::before{ transform:scale(14); }
.main-section a:hover .hero-cta .hero-cta-arr, .main-section a:focus-visible .hero-cta .hero-cta-arr{ transform:translateX(2px) rotate(-45deg); }
.main-section .hero-copy.out, .hero-cta.out{ opacity:0; transform:translateY(-18px); pointer-events:none; }
.main-section .media-slide{ position:absolute; inset:0; }
.main-section .media-slide.base{ z-index:1; }
.main-section .media-slide.incoming{z-index:2;opacity:0;transform:translateY(100%);pointer-events:none;transition:transform 1s cubic-bezier(.45,0,.15,1), opacity 1s cubic-bezier(.45,0,.15,1);}
.main-section .media-slide.incoming.rising{ opacity:1; transform:translateY(0); }
.main-section .media-slide.no-anim{ transition:none !important; }
.main-section .media-slide .bg{ position:absolute; inset:0; }
/* .main-section .media-slide .grain{position:absolute; inset:0;background-image:radial-gradient(rgba(0,0,0,.35) 1px, transparent 1.4px),radial-gradient(rgba(255,220,180,.25) 1px, transparent 1.4px);background-size:26px 26px, 38px 38px;background-position:0 0, 13px 19px;mix-blend-mode:overlay;animation:drift 14s linear infinite;opacity:.8;} */
.main-section .media-slide .scrim{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); }
.main-section .media-label{ position:absolute; left:26px; right:26px; bottom:22px; z-index:31;  opacity:1;pointer-events:none;}
.main-section .media-label .tag{display:none;width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.16);align-items:center;justify-content:center; margin-bottom:12px; font-size:16px; }
.main-section .media-label h3{ font-size:40px; font-weight:800; margin-bottom:8px;color:#fff;}
.main-section .media-label p{ font-size:18px; line-height:1.5; opacity:.9; max-width:92%;color:#fff;}
.main-section .media-corner{ position:absolute; top:20px; right:20px; z-index:31; width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.92); color:#0c2340; display:flex;align-items:center;justify-content:center; font-size:16px; opacity:1; text-decoration:none; cursor:pointer; transition:transform .2s ease, background .2s ease; }
.main-section a.media-corner:hover{ transform:scale(1.08); background:#fff; }
.main-section .media-link{ position:absolute; inset:0; z-index:30; }   /* 카드 전체가 센터 페이지 링크 */
.main-section .media-link:hover ~ .media-corner{ transform:scale(1.08); background:#fff; }
.main-section .biz-heading{position:absolute; top:12%; left:0; right:0; text-align:center; z-index:15;opacity:0; transform:translateY(30px);transition:opacity .5s ease, transform .5s cubic-bezier(.22,.9,.32,1);}
.main-section .biz-heading.in{ opacity:1; transform:translateY(0); }
.main-section .biz-heading .eyebrow{ display:inline-block; font-size:16px; font-weight:600; letter-spacing:2px;  margin-bottom:14px; }
.main-section .biz-heading h2{ font-size:48px; font-weight:800; line-height:1.35; color:#1e293b;}
.main-section .biz-heading h2 em{color:#4f8fc0; font-style:normal; font-weight:800;}
.main-section .side-card{position:absolute; top:40%; width:19vw; min-width:210px; height:52vh;border-radius:14px; overflow:hidden; z-index:10; color:#fff;opacity:0; transform:translateY(100%);transition:transform 1s cubic-bezier(.45,0,.15,1); isolation:isolate; -webkit-mask-image:-webkit-radial-gradient(white, black);}
.main-section .side-card.in{ opacity:1; transform:translateY(0); }
.main-section .side-card.no-anim{ transition:none !important; }
.main-section .side-card.left{ left:4.5%; }
.main-section .side-card.right{right:4.5%; }
.main-section .side-card.peek{ width:16vw; min-width:150px; z-index:9; }
.main-section .side-card.peek.left{ left:-13%; }
.main-section .side-card.peek.right{ right:-13%; }
.main-section .side-slide{ position:absolute; inset:0; }
.main-section .side-slide.base{ z-index:1; }
.main-section .side-slide.incoming{ z-index:2; pointer-events:none; }
.main-section .side-slide.no-anim{ transition:none !important; }
.main-section .side-slide:before{ content:''; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.05) 60%); z-index:1; }
.main-section .side-slide .bg{ position:absolute; inset:0; }
.main-section .side-slide .side-icon{display:none;position:absolute; top:16px; right:16px; z-index:2; width:32px;height:32px;border-radius:50%; background:rgba(255,255,255,.9);align-items:center;justify-content:center; font-size:14px; color:#0c2340; }
.main-section .side-slide .side-label{ position:absolute; left:20px; right:20px; bottom:20px; z-index:2; font-weight:800; font-size:24px;color:#fff;}
.main-section .car-nav{position:absolute; top:52%; transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:#fff; border:1px solid rgba(12,35,64,.1);color:var(--navy); font-size:18px; cursor:pointer;z-index:40; opacity:0; pointer-events:none;display:flex; align-items:center; justify-content:center;transition:opacity .3s ease, background .2s ease, color .2s ease, transform .2s ease;box-shadow:0 8px 20px rgba(12,35,64,.14);}
.main-section .car-nav:hover{ background:#4f8fc0; color:#fff; transform:translateY(-50%) scale(1.06); }
.main-section .car-nav.prev{ left:1.4%; }
.main-section .car-nav.next{ right:1.4%; }
.main-section .carousel-active .car-nav{ opacity:1; pointer-events:auto; }
.main-section .car-dots{ position:absolute; left:0; right:0; bottom:8%; display:flex; justify-content:center; gap:8px; z-index:40; opacity:0; transition:opacity .3s ease;display:none;}
.main-section .carousel-active .car-dots{ opacity:1; }
.main-section .car-dots button{ width:7px;height:7px;border-radius:50%; border:none; background:rgba(12,35,64,.22); cursor:pointer; padding:0; transition:all .25s ease; }
.main-section .car-dots button.active{ background:#4f8fc0; width:22px; border-radius:4px; }
/* .main-section .progress-track{ position:absolute; left:0; bottom:0; height:3px; width:100%; background:rgba(12,35,64,.08); z-index:70; }
.main-section .progress-fill{ height:100%; width:0%; background:#4f8fc0; } */
.main-section .next-section{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:linear-gradient(180deg,#ffffff, #eef3f8); padding:80px 24px; }
.main-section .next-section .eyebrow{ color:#4f8fc0; font-weight:800; letter-spacing:2px; font-size:13px; margin-bottom:16px; }
.main-section .next-section h2{ font-size:clamp(22px,3vw,32px); font-weight:800; color:var(--navy); margin-bottom:14px;}
.main-section .next-section p{ color:#5b6b7c; font-size:15px; max-width:520px; line-height:1.6; }

.main-section .vision-stage{ background:#fdfeff; }
.main-section .vision-pin{
  background:#fdfeff;
  color:#fff;
  transition:color 1s ease;
  z-index:1;
}
.main-section .vision-pin::before, .main-section .vision-pin::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
}
.main-section .vision-pin::before{
  /* 이제 이 레이어는 그냥 항상 완전히 불투명한 고정 배경이에요. opacity로 안 건드립니다 —
     ::after가 같은 z-index에서 나중에 그려지는 요소라 항상 이 위에 덮이기 때문에,
     ::after의 "보이는 영역"만 키워도 ::before를 가리기엔 충분해요. */
  background:linear-gradient(135deg, #0e2338 0%, #1b3a5f 55%, #2b6ca8 100%);
}
.main-section .vision-pin::after{
  background:#fdfeff;
  /* 핵심: opacity 대신 clip-path로 "보이는 영역" 자체를 애니메이션합니다.
     inset(top right bottom left) 중 top 값을 100%(아예 안 보임, 바닥에 0높이로 붙어있는
     상태) → 0%(전체 다 보임)로 바꾸면, 보이는 영역이 바닥에서부터 위로 자라나요.
     이게 정확히 "흰색이 밑에서 올라오는" 효과예요. */
  clip-path: inset(100% 0 0 0);
  -webkit-clip-path: inset(100% 0 0 0);
  transition: clip-path 1s ease, -webkit-clip-path 1s ease;
}
.main-section .vision-pin.phase-light::after,
.main-section .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5)::after{
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}
.main-section .vision-pin.phase-light, .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5){
  color:#1e293b;
}
.main-section .vision-pin.phase-light .vision-copy{color:#1e293b;}
.main-section .vision-rings{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, transparent 389px, rgba(90,170,255,.09) 390px, rgba(90,170,255,.09) 392px, transparent 393px),
    radial-gradient(circle at 50% 50%, transparent 459px, rgba(90,170,255,.09) 460px, rgba(90,170,255,.09) 462px, transparent 463px),
    radial-gradient(circle at 50% 50%, transparent 529px, rgba(90,170,255,.09) 530px, rgba(90,170,255,.09) 532px, transparent 533px);
  opacity:1; transition:opacity .8s ease;
}
.main-section .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5) .vision-rings{ opacity:0; }

.main-section .vision-copy{
  position:absolute; left:50%; top:56%; transform:translate(-50%,0);
  max-width:560px; text-align:center; font-size:20px; line-height:1.85; opacity:.72;
  transition:opacity .5s ease, color 1s ease;
  color:#fff;
}
.main-section .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5) .vision-copy{ opacity:0; pointer-events:none; }

.main-section .vision-orb-wrap{
  position:absolute; width:640px; height:640px; top:50%; left:50%; margin:-320px 0 0 -320px;
  transition:left 1.1s cubic-bezier(.65,0,.35,1), top 1.1s cubic-bezier(.65,0,.35,1),
    width 1.1s cubic-bezier(.65,0,.35,1), height 1.1s cubic-bezier(.65,0,.35,1), margin 1.1s cubic-bezier(.65,0,.35,1);
}
.main-section .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5) .vision-orb-wrap{
  left:70%; top:47%;
}
.main-section .vision-orb{
  position:absolute; inset:0; border-radius:50%;
  border:none; background:transparent;
  box-shadow:0 0 60px rgba(70,150,255,.25) inset, 0 0 40px rgba(70,150,255,.18);
  display:flex; align-items:center; justify-content:center;
  transition:background 1s ease, box-shadow 1s ease;
}
@property --ring-angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
/* .main-section .vision-orb::before{
  content:''; position:absolute; inset:0; border-radius:50%; padding:5px;
  background:conic-gradient(from var(--ring-angle),
    rgba(255,255,255,.95), rgba(110,180,255,.25) 22%, rgba(70,150,255,.95) 50%,
    rgba(110,180,255,.25) 78%, rgba(255,255,255,.95) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ring-rotate 3s linear infinite;
  opacity:1; transition:opacity .8s ease;
} */
.main-section .vision-orb::before{
  content:''; position:absolute; inset:0; border-radius:50%; padding:10px;
  background:conic-gradient(from var(--ring-angle),
    rgba(255,255,255,.95), rgba(110,180,255,.25) 22%, rgba(70,150,255,.95) 50%,
    rgba(110,180,255,.25) 78%, rgba(255,255,255,.95) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ring-rotate 3s linear infinite;
  animation-play-state:paused; /* 화면 근처에 올 때만 JS(IntersectionObserver)가 재생시킵니다 */
  opacity:1; transition:opacity .8s ease;
}
.main-section .vision-pin.in-view .vision-orb::before{ animation-play-state:running; }
@keyframes ring-rotate{ to{ --ring-angle:360deg; } }
/* stays a plain outlined+glowing ring through phase-light too — only fills in once
   a doctor is actually showing, and bin asked for the ring/glow to be fully gone
   right at that exact moment (not lingering as a softer glow) — so box-shadow drops
   to a plain grounding drop-shadow only, no ring, no halo. */
.main-section .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5) .vision-orb{
  background:#f1f4f8;
  box-shadow:0 20px 50px rgba(10,30,60,.18);
}
.main-section .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5) .vision-orb::before{ opacity:0; }
.main-section .vision-orb-label{ position:absolute; font-size:48px;color:#fff; font-weight:800; letter-spacing:3px; opacity:1; transition:opacity .4s ease; }
.main-section .vision-orb-icon{
  position:absolute; inset:0; border-radius:50%;
  background-size:cover; background-position:center 30%;
  opacity:0; transition:opacity .4s ease, background-image .45s ease;
}
.main-section .vision-pin:is(.phase-light,.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5) .vision-orb-label{ opacity:0; }
.main-section .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5) .vision-orb-icon{ opacity:1; }

/* 의료진 썸네일 — 사진 동그라미 왼쪽 둘레를 따라 위에서 아래로 놓임.
   .vision-orb-wrap과 같은 중심(left:70% / top:47%)에서, 각자 각도(--a)만큼 돌려 반지름(--r)만큼 떨어진 자리에 섭니다.
   선택된 원장님은 썸네일에서 큰 동그라미 쪽으로 선이 그어지고 끝에 점이 찍힘 */
.main-section .doctor-nav{
  --r:392px;                 /* 동그라미 중심에서 썸네일까지 거리 (큰 동그라미 반지름 320 + 여백) */
  position:absolute; left:70%; top:47%; width:0; height:0;
  opacity:0; pointer-events:none; transition:opacity .5s ease;
}
.main-section .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5) .doctor-nav{
  opacity:1; pointer-events:auto;
  transition:opacity .5s ease .95s;
}
.main-section .doctor-thumb{
  position:absolute; left:-26px; top:-26px; width:52px; height:52px; border-radius:50%; cursor:pointer;
  transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}
.main-section .doctor-thumb:nth-child(1){ --a:-140deg; }
.main-section .doctor-thumb:nth-child(2){ --a:-165deg; }
.main-section .doctor-thumb:nth-child(3){ --a:-190deg; }
.main-section .doctor-thumb:nth-child(4){ --a:-215deg; }
.main-section .doctor-thumb:nth-child(5){ --a:-240deg; }
.main-section .doctor-thumb-photo{
  width:100%; height:100%; border-radius:50%; background-color:#eaf1f9; background-size:cover; background-position:center 30%;
  box-shadow:0 4px 12px rgba(20,40,80,.18);
  opacity:.5; scale:.86; transition:opacity .35s ease, scale .35s ease, box-shadow .35s ease;
}
.main-section .doctor-thumb:hover .doctor-thumb-photo{ opacity:.85; }
.main-section .doctor-thumb.active .doctor-thumb-photo{
  opacity:1; scale:1.12;
  box-shadow:0 6px 18px rgba(20,40,80,.3), 0 0 0 3px #fff, 0 0 0 5px #4f8fc0;
}
/* 선택된 원장님 → 큰 동그라미까지 이어지는 선 + 끝 점 */
.main-section .doctor-thumb::before,
.main-section .doctor-thumb::after{
  content:''; position:absolute; left:50%; top:50%; pointer-events:none;
  transform-origin:0 50%;
}
.main-section .doctor-thumb::before{   /* 선 */
  width:calc(var(--r) - 320px - 34px); height:2px; margin-top:-1px; border-radius:2px;
  background:linear-gradient(90deg, #4f8fc0, rgba(79,143,192,.35));
  transform:rotate(calc(var(--a) + 180deg)) translateX(34px) scaleX(0);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.main-section .doctor-thumb::after{    /* 동그라미 테두리에 닿는 점 */
  width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:#4f8fc0; box-shadow:0 0 0 4px rgba(79,143,192,.2);
  transform-origin:50% 50%;
  transform:rotate(calc(var(--a) + 180deg)) translateX(calc(var(--r) - 320px)) scale(0);
  transition:transform .3s ease;
}
.main-section .doctor-thumb.active::before{ transform:rotate(calc(var(--a) + 180deg)) translateX(34px) scaleX(1); transition-delay:.1s; }
.main-section .doctor-thumb.active::after{ transform:rotate(calc(var(--a) + 180deg)) translateX(calc(var(--r) - 320px)) scale(1); transition-delay:.45s; }
/* 1600px 이하(노트북·일반 모니터): 동그라미·썸네일을 함께 줄이고 살짝 오른쪽으로, 약력 글씨도 조금 줄여서 서로 겹치지 않게 */
@media (max-width:1600px){
  .main-section .vision-orb-wrap,
  .main-section .doctor-nav{ scale:.7; }
  .main-section .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5) .vision-orb-wrap,
  .main-section .doctor-nav{ left:72%; }
  .main-section .vision-pin .vision-core-text .doctor-columns{ gap:40px; }
  .main-section .vision-pin .vision-core-text .doctor-col{ max-width:280px; }
  .main-section .vision-pin .vision-core-text .doctor-col li{ font-size:15.5px; word-break:keep-all; }
}

.main-section .vision-core-text{
  position:absolute; left:5%; top:50%; transform:translateY(-50%); max-width:750px;
  opacity:0; pointer-events:none; transition:opacity .5s ease;height:550px;
}
.main-section .vision-pin:is(.phase-value1,.phase-value2,.phase-value3,.phase-value4,.phase-value5) .vision-core-text{
  opacity:1; pointer-events:auto;
}
.main-section .vision-core-text .eyebrow{ display:block; font-size:16px; font-weight:800; letter-spacing:2px; color:#4f8fc0; margin-bottom:16px; }
.main-section .vision-core-text h2{ font-size:48px; font-weight:800; margin-bottom:18px; }
.main-section .vision-core-text .doctor-dept{
  display:inline-block; font-size:13px; font-weight:700; color:#4f8fc0;
  background:rgba(28,95,158,.09); padding:5px 13px; border-radius:999px; margin-bottom:22px;
}
.main-section .vision-core-text .doctor-columns{ display:flex; gap:80px; }
.main-section .vision-core-text .doctor-col h3{
  font-size:16px; font-weight:800; color:var(--navy); margin-bottom:13px;
}
.main-section .vision-core-text .doctor-col ul{ list-style:none; }
.main-section .vision-core-text .doctor-col li{
  position:relative; padding-left:15px; margin-bottom:10px;
  font-size:17px; line-height:1.55; color:#4a5568;
}
.main-section .vision-core-text .doctor-col li::before{
  content:''; position:absolute; left:0; top:50%;
  width:5px; height:5px; border-radius:50%; background:#4f8fc0;transform:translateY(-50%);
}

/* =====================================================================
   메인 MEDICAL TEAM — 밝아지는 단계(phase-light)에 진료과 5개가 링 둘레에 떠올라 천천히 돌고, 문구가 바뀜
   ===================================================================== */
.main-section .vision-depts{ position:absolute; inset:-70px; pointer-events:none; animation:vdept-spin 60s linear infinite paused; }
.main-section .vision-dept{ position:absolute; left:50%; top:50%; width:0; height:0; transform:rotate(var(--a)) translateY(-385px); }
.main-section .vision-dept span{
  position:absolute; left:0; top:0; transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)));
  white-space:nowrap; padding:12px 22px; border-radius:99px; background:#fff; color:#1b3a5f; font-size:17px; font-weight:800;
  box-shadow:0 14px 30px -14px rgba(14,35,56,.35), 0 0 0 1px #e3ebf4;
  opacity:0; scale:.6; transition:opacity .25s ease, scale .3s ease;
  animation:vdept-counter 60s linear infinite paused;   /* 링이 도는 만큼 반대로 돌려서 글자는 항상 똑바로 */
}
.main-section .vision-dept span i{ font-style:normal; color:#4f8fc0; margin-right:6px; }
/* 밝아지면 등장 + 회전 시작 (링과 글자가 같은 순간에 같이 출발해야 글자가 기울지 않음) */
.main-section .vision-pin.phase-light .vision-depts,
.main-section .vision-pin.phase-light .vision-dept span{ animation-play-state:running; }
.main-section .vision-pin.phase-light .vision-dept span{ opacity:1; scale:1; transition:opacity .5s ease, scale .6s cubic-bezier(.2,1.4,.4,1); }
.main-section .vision-pin.phase-light .vision-dept:nth-child(1) span{ transition-delay:.35s; }
.main-section .vision-pin.phase-light .vision-dept:nth-child(2) span{ transition-delay:.47s; }
.main-section .vision-pin.phase-light .vision-dept:nth-child(3) span{ transition-delay:.59s; }
.main-section .vision-pin.phase-light .vision-dept:nth-child(4) span{ transition-delay:.71s; }
.main-section .vision-pin.phase-light .vision-dept:nth-child(5) span{ transition-delay:.83s; }
@keyframes vdept-spin{ to{ transform:rotate(360deg); } }
@keyframes vdept-counter{ from{ rotate:0deg; } to{ rotate:-360deg; } }

/* 밝아질 때 문구 교체 — 어두울 때 문구(.vision-copy)는 숨기고 새 문구(.vision-copy2)가 떠오름 */
.main-section .vision-pin.phase-light .vision-copy{ opacity:0; }
.main-section .vision-copy2{
  position:absolute; left:50%; top:56%; transform:translate(-50%,14px); max-width:600px; text-align:center;
  font-size:21px; line-height:1.8; color:#1e293b; opacity:0; pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;   /* 사라질 땐 바로 (원장님 사진과 겹치지 않게) */
}
.main-section .vision-copy2 b{ color:#1b3a5f; font-weight:800; }
.main-section .vision-pin.phase-light .vision-copy2{ opacity:1; transform:translate(-50%,0); transition:opacity .6s ease .35s, transform .6s ease .35s; }
.main-section .vision-orb-sym{ position:absolute; width:150px; height:auto; opacity:0; translate:0 -2px; transition:opacity .25s ease, translate .25s ease; }
.main-section .vision-pin.phase-light .vision-orb-sym{ opacity:1; translate:0 -14px; transition:opacity .5s ease .25s, translate .6s ease .25s; }

.main-section .stage.connect-stage{ height:115vh; }
.main-section .connect-pin{
  display:flex; align-items:center; justify-content:center;
  background-image:linear-gradient(180deg, #ffffff 0%, #eaf5ff 9%, #bfe0fb 20%, #7fb9e8 34%, #3f7fc0 52%, #1c4d84 72%, #0a2c54 90%, #071f3d 100%);
  background-size:100% 320%;
  background-position:50% 0%;
  transition:background-position-y 1.15s ease;
}
.main-section .connect-pin.connect-step-1{ background-position-y:38%; }
.main-section .connect-pin.connect-step-2{ background-position-y:68%; }
.main-section .connect-pin.connect-step-3{ background-position-y:100%; }

.main-section .connect-lines{ position:absolute; inset:0; pointer-events:none; opacity:.55; }
.main-section .connect-lines svg{ width:100%; height:100%; }
.main-section .cl{ fill:none; stroke:rgba(255,255,255,.45); stroke-width:1.5; }
.main-section .cl-1{ stroke-dasharray:14 10; animation:clFlow 6s linear infinite; }
.main-section .cl-2{ stroke-dasharray:10 15; animation:clFlow 7.6s linear infinite reverse; }
.main-section .cl-3{ stroke-dasharray:18 8; animation:clFlow 5.2s linear infinite; }
.main-section .cl-4{ stroke-dasharray:9 13; animation:clFlow 8.4s linear infinite reverse; }
.main-section .cl-5{ stroke-dasharray:16 11; animation:clFlow 6.8s linear infinite; }
.main-section .cl-1,.main-section .cl-2,.main-section .cl-3,.main-section .cl-4,.main-section .cl-5{ animation-play-state:paused; }
.main-section .connect-pin.in-view :is(.cl-1,.cl-2,.cl-3,.cl-4,.cl-5){ animation-play-state:running; }
@keyframes clFlow{ to{ stroke-dashoffset:-240; } }

/* 그라데이션 섹션 — "어디가 불편하세요?" 아픈 부위로 진료센터 찾기
   휠 1: 질문만 크게 (밝은 배경) / 휠 2: 배경이 짙어지며 부위 카드 5개가 차례로 / 휠 3: 전화 문의 버튼 */
.main-section .connect-find{ position:relative; z-index:2; width:min(1180px, 90vw); text-align:center; }
/* 처음(도착했을 때): 질문만 화면 가운데, 원래 남색 글씨
   휠 1번째: 배경이 파래지면서 글씨가 흰색으로 / 휠 2번째부터: 카드가 나오면서 질문은 위로 */
.main-section .cf-head{ transform:translateY(170px); transition:transform .8s cubic-bezier(.22,.9,.32,1); }
.main-section .connect-pin:is(.connect-step-2,.connect-step-3) .cf-head{ transform:none; }
.main-section .cf-head small{ display:block; font-size:15px; font-weight:800; letter-spacing:.3em; color:#1b3a5f; opacity:.7; transition:color .8s, opacity .8s; }
.main-section .cf-head h2{ margin:14px 0 0; font-size:64px; font-weight:800; letter-spacing:-.03em; color:#0e2338; transition:color .8s, font-size .8s; }
.main-section .cf-head p{ margin:16px 0 0; font-size:20px; color:#334155; transition:color .8s; }
.main-section .connect-pin:is(.connect-step-1,.connect-step-2,.connect-step-3) .cf-head small{ color:#fff; opacity:.8; }
.main-section .connect-pin:is(.connect-step-1,.connect-step-2,.connect-step-3) .cf-head h2{ color:#fff; }
.main-section .connect-pin:is(.connect-step-1,.connect-step-2,.connect-step-3) .cf-head p{ color:rgba(255,255,255,.88); }
.main-section .connect-pin:is(.connect-step-2,.connect-step-3) .cf-head small{ color:#9dc3e0; opacity:1; }
.main-section .connect-pin:is(.connect-step-2,.connect-step-3) .cf-head h2{ font-size:48px; }

.main-section .cf-grid{ display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:16px; margin-top:48px; }
.main-section .cf-card{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px; min-height:220px; padding:28px 24px 24px; border-radius:24px; text-align:left; text-decoration:none;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  opacity:0; transform:translateY(40px); pointer-events:none;
  transition:opacity .6s ease, transform .7s cubic-bezier(.22,.9,.32,1), background .3s ease, border-color .3s ease;
}
.main-section .cf-ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:#fff; color:#1b3a5f; transition:background .3s, color .3s; }
.main-section .cf-ico svg{ width:28px; height:28px; }
.main-section .cf-card b{ font-size:23px; font-weight:800; line-height:1.35; color:#fff; word-break:keep-all; transition:color .3s; }
.main-section .cf-card em{ font-style:normal; font-size:15px; font-weight:600; color:rgba(255,255,255,.75); transition:color .3s; }
.main-section .cf-card i{ margin-top:auto; font-style:normal; font-size:18px; color:#9dc3e0; transition:transform .3s, color .3s; }
.main-section .cf-card:hover{ background:#fff; border-color:#fff; }
.main-section .cf-card:hover b{ color:#0e2338; }
.main-section .cf-card:hover em{ color:#4f8fc0; }
.main-section .cf-card:hover .cf-ico{ background:#1b3a5f; color:#fff; }
.main-section .cf-card:hover i{ color:#1b3a5f; transform:translateX(4px); }
.main-section .connect-pin:is(.connect-step-2,.connect-step-3) .cf-card{ opacity:1; transform:none; pointer-events:auto; }
.main-section .connect-pin.connect-step-2 .cf-card:nth-child(2){ transition-delay:.08s; }
.main-section .connect-pin.connect-step-2 .cf-card:nth-child(3){ transition-delay:.16s; }
.main-section .connect-pin.connect-step-2 .cf-card:nth-child(4){ transition-delay:.24s; }
.main-section .connect-pin.connect-step-2 .cf-card:nth-child(5){ transition-delay:.32s; }

.main-section .cf-help{
  display:inline-flex; align-items:center; gap:28px; margin-top:40px; padding:10px 10px 10px 30px; border-radius:99px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); text-align:left;
  opacity:0; transform:translateY(20px); pointer-events:none; transition:opacity .6s ease .2s, transform .6s ease .2s;
}
.main-section .cf-help-txt{ display:flex; flex-direction:column; gap:3px; margin:0; }
.main-section .cf-help-txt strong{ font-size:17px; font-weight:700; color:#fff; }
.main-section .cf-help-txt small{ font-size:13.5px; color:rgba(255,255,255,.6); }
.main-section .cf-help-call{ display:flex; align-items:center; gap:12px; padding:10px 26px 10px 10px; border-radius:99px; background:#fff; text-decoration:none; transition:background .25s; }
.main-section .cf-help-call i{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; background:#1b3a5f; transition:background .25s; }
.main-section .cf-help-call svg{ width:20px; height:20px; fill:#fff; }
.main-section .cf-help-call span{ display:flex; flex-direction:column; line-height:1.2; color:#1b3a5f; }
.main-section .cf-help-call b{ font-size:21px; font-weight:800; letter-spacing:.01em; color:#0e2338; }
.main-section .cf-help-call:hover{ background:#eaf3fb; }
.main-section .cf-help-call:hover i{ background:#4f8fc0; }
.main-section .connect-pin.connect-step-3 .cf-help{ opacity:1; transform:none; pointer-events:auto; }

@media (max-width:1200px){
  .main-section .cf-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .main-section .cf-card{ min-height:0; }
}
@media (max-width:991px){
  .main-section .cf-head h2{ font-size:32px; }
  .main-section .connect-pin:is(.connect-step-2,.connect-step-3) .cf-head h2{ font-size:28px; }
  .main-section .cf-head p{ font-size:15px; }
  .main-section .cf-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; margin-top:24px; }
  .main-section .cf-card{ flex-direction:row; align-items:center; gap:10px; padding:14px; border-radius:16px; }
  .main-section .cf-card:last-child{ grid-column:1 / -1; }
  .main-section .cf-ico{ width:38px; height:38px; border-radius:12px; flex:none; }
  .main-section .cf-ico svg{ width:20px; height:20px; }
  .main-section .cf-card b{ font-size:15px; }
  .main-section .cf-card em, .main-section .cf-card i{ display:none; }
  .main-section .cf-help{ flex-direction:column; align-items:stretch; gap:12px; margin-top:22px; padding:16px; border-radius:22px; text-align:center; }
  .main-section .cf-help-txt strong{ font-size:15px; }
  .main-section .cf-help-call{ justify-content:center; padding:8px 20px 8px 8px; }
  .main-section .cf-help-call i{ width:38px; height:38px; }
  .main-section .cf-help-call b{ font-size:18px; }
}

.main-section .connect-eyebrow{
  font-size:45px; font-weight:600; letter-spacing:6px;
  color:rgba(255,255,255,.55); margin-bottom:30px;
}
.main-section .connect-highlight{
  font-size:45px; font-weight:800; letter-spacing:4px;
  color:rgba(255,255,255,.8); margin-bottom:30px;
}
.main-section .connect-title{
  font-size:45px; font-weight:800; letter-spacing:.5px; color:#fff;
}

.main-section .flower-section{ max-width:90%; margin:0 auto; padding:90px 0 110px; }
.main-section .flower-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  flex-wrap:wrap; gap:16px; margin-bottom:26px;
}
.main-section .flower-header .eyebrow{ display:block; color:#4f8fc0; font-weight:600; font-size:16px; letter-spacing:2px; margin-bottom:14px; }
.main-section .flower-header h2{ font-size:48px; font-weight:800;line-height:1.35; color:#1e293b; }
.main-section .flower-cta{
  display:inline-flex; align-items:center; gap:6px; padding:11px 20px; border-radius:999px;
  border:1px solid #dbe3ec; font-size:13px; font-weight:700; color:var(--navy);
  text-decoration:none; white-space:nowrap; background:#fff;
}

.main-section .flower-panel{ position:relative; height:600px; border-radius:20px; overflow:hidden; background:#0c1c2e; }
.main-section .flower-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1s ease; }
.main-section .flower-bg.active{ opacity:1; }
.main-section .flower-bg-1{background-image:url(../image/main/flower-zone01.jpg);}
.main-section .flower-bg-2{background-image:url(../image/main/flower-zone02.jpg);}
.main-section .flower-bg-3{background-image:url(../image/main/flower-zone03.jpg);}
.main-section .flower-overlay{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(5,15,30,.7) 0%, rgba(5,15,30,.32) 45%, rgba(5,15,30,.12) 100%);
}

.main-section .flower-zones{ position:relative; height:100%; display:flex; }
.main-section .flower-zone{
  flex:1; position:relative; padding:34px 30px; display:flex; flex-direction:column;
  justify-content:space-between; /* cursor:pointer; */
  border-right:1px solid rgba(255,255,255,.18);
}
.main-section .flower-zone:last-child{ border-right:none; }
.main-section .flower-zone-info{ opacity:0; transform:translateY(10px); transition:opacity .5s ease, transform .5s ease;}
.main-section .flower-zone.active .flower-zone-info{ opacity:1; transform:translateY(0); }
.main-section .flower-icon{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; background:#4f8fc0; font-size:19px; margin-bottom:14px;
}
.main-section .flower-icon i{color:#fff;}
.main-section .flower-zone-info p{ color:#fff; font-size:20px; line-height:1.7; font-weight:600; text-shadow:0 1px 4px rgba(0,0,0,.35); }
.main-section .flower-zone-label{
  font-size:28px; font-weight:800; line-height:1.35;
  color:rgba(255,255,255,.55); transition:color .5s ease;
}
.main-section .flower-zone.active .flower-zone-label{ color:#fff; }

/* 원장님이 바뀔 때: 글자·사진이 살짝 사라졌다가 새 원장님이 아래에서 떠오르듯 (tail의 is-swapping과 짝) */
.main-section .vision-core-text > h2,
.main-section .vision-core-text > .doctor-dept,
.main-section .vision-core-text > .doctor-columns{ transition:opacity .4s ease, transform .4s ease; }
.main-section .vision-core-text > .doctor-columns{ transition-delay:.06s; }
.main-section .vision-pin.is-swapping .vision-core-text > h2,
.main-section .vision-pin.is-swapping .vision-core-text > .doctor-dept,
.main-section .vision-pin.is-swapping .vision-core-text > .doctor-columns{ opacity:0; transform:translateY(10px); transition-duration:.25s; transition-delay:0s; }

.site-footer{
 position:relative; overflow:hidden;
 background:linear-gradient(165deg, #0d2444 0%, #0a1c38 45%, #060f20 100%);
 color:rgba(255,255,255,.72);
 padding:100px 40px 0;}

.site-footer .footer-top{
 max-width:1550px; margin:0 auto;
 display:flex; justify-content:space-between; flex-wrap:wrap; gap:60px;
 padding-bottom:70px;}

.site-footer .footer-brand .footer-logo{
 display:flex; align-items:center; gap:9px;
 font-size:19px; font-weight:800; letter-spacing:.3px; color:#fff; margin-bottom:14px;}

.site-footer .footer-brand .footer-logo img{height:180px;}

.site-footer .footer-brand .footer-logo .mark{
 width:9px; height:9px; border-radius:2px; background:#4f8fc0; flex:none;}

.site-footer .footer-brand .footer-desc{ font-size:13.5px; color:rgba(255,255,255,.5); max-width:260px; line-height:1.7;text-align:center;}
.site-footer .footer-nav{ display:flex; gap:70px; flex-wrap:wrap; }
.site-footer .footer-col{ display:flex; flex-direction:column; gap:13px; min-width:110px; }
.site-footer .footer-col-title{ font-size:17px; font-weight:700; color:rgba(255,255,255,.38); letter-spacing:1px; margin-bottom:2px; }
.site-footer .footer-col a{ font-size:17px; color:rgba(255,255,255,.78); text-decoration:none; transition:color .2s ease; }
.site-footer .footer-col a:hover{ color:#fff; }

.site-footer .footer-meta{
  max-width:1550px; margin:0 auto; padding:26px 0;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:16px; color:rgba(255,255,255,.4); line-height:1.85;
}
.site-footer .footer-meta p{color:#fff;}
.site-footer .footer-legal{
  max-width:1550px; margin:0 auto;
  display:flex; gap:22px; flex-wrap:wrap; padding-bottom:60px;
}
.site-footer .footer-legal a{ font-size:12.5px; color:rgba(255,255,255,.55); text-decoration:none; }
.site-footer .footer-legal a:hover{ color:#fff; }
.site-footer .footer-legal a:first-child{ color:rgba(255,255,255,.85); font-weight:600; }

/* 하단에 걸리는 대형 워드마크 — goodai-global 레퍼런스처럼 화면 오른쪽 끝에서
   일부러 잘리도록 두는 게 포인트입니다. 가운데 정렬/한 화면에 다 들어오게 축소하지 마세요. */
.site-footer .footer-wordmark{
  font-size:clamp(64px, 13vw, 210px);
  font-weight:800; letter-spacing:-2px; line-height:.86;
  color:rgba(255,255,255,.09);
  white-space:nowrap;
  padding:0 40px;
  user-select:none;
}

/* =====================================================================
   빠른 상담 버튼 — PC: 흰 유리 도크 하나(맨 위로까지 합침) / 모바일: 화면 아래 고정 바
   ===================================================================== */
.fab-wrap{ position:fixed; right:32px; bottom:40px; z-index:300; display:block !important; }
.fab-dock{
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px;
  border-radius:99px; background:rgba(255,255,255,.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.6); box-shadow:0 14px 34px -14px rgba(14,35,56,.45);
}
.fab-item, .fab-dock button.up{
  position:relative; display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:50%;
  background:none; color:#1b3a5f; text-decoration:none; cursor:pointer; transition:background .2s, color .2s;
}
.fab-dock button.up{ color:#4f8fc0; }
.fab-item svg, .fab-dock button.up svg{ width:25px; height:25px; }
.fab-item:hover, .fab-item:focus-visible, .fab-dock button.up:hover, .fab-dock button.up:focus-visible{ background:#1b3a5f; color:#fff; }
.fab-sep{ width:24px; height:1px; margin:4px 0; background:#e3ebf4; }
/* 마우스를 올리면 왼쪽에 이름 */
.fab-tip{ position:absolute; right:calc(100% + 14px); top:50%; transform:translate(8px,-50%); padding:8px 13px; border-radius:10px; background:#1b3a5f; font-size:13.5px; font-weight:700; color:#fff; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; }
.fab-tip::after{ content:""; position:absolute; left:100%; top:50%; margin-top:-5px; border:5px solid transparent; border-left-color:#1b3a5f; }
.fab-item:hover .fab-tip, .fab-item:focus-visible .fab-tip, .fab-dock button.up:hover .fab-tip{ opacity:1; transform:translate(0,-50%); }

/* 모바일 고정 바 — PC에서는 숨김 */
.fab-mbar{ display:none; }

@media (max-width:991px){
  /* 도크는 "맨 위로"만 남겨서 고정 바 위 오른쪽에 작은 흰 동그라미로 */
  .fab-wrap{ right:14px; bottom:calc(84px + env(safe-area-inset-bottom)); }
  .fab-dock{ padding:4px; }
  .fab-dock .fab-item, .fab-dock .fab-sep{ display:none; }
  .fab-dock button.up{ width:40px; height:40px; }
  .fab-dock button.up svg{ width:18px; height:18px; }
  .fab-dock .fab-tip{ display:none; }

  .fab-mbar{ position:fixed; left:0; right:0; bottom:0; z-index:300; display:grid; grid-template-columns:repeat(4,1fr); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); background:#fff; border-top:1px solid #e5e9f0; box-shadow:0 -10px 24px -18px rgba(14,35,56,.35); }
  .fab-mbar-item{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:6px 0; text-decoration:none; color:#1b3a5f; }
  .fab-mbar-ico{ display:grid; place-items:center; width:26px; height:26px; color:#1b3a5f; }
  .fab-mbar-ico svg{ width:23px; height:23px; }
  .fab-mbar-txt{ font-size:11.5px; font-weight:700; color:#334155; }
  .fab-mbar-item.is-main{ margin:-18px 4px 0; padding:10px 0 8px; border-radius:16px; background:#1b3a5f; box-shadow:0 10px 20px -10px rgba(14,35,56,.6); }
  .fab-mbar-item.is-main .fab-mbar-ico, .fab-mbar-item.is-main .fab-mbar-txt{ color:#fff; }
  /* 고정 바에 페이지 맨 아래(푸터)가 가려지지 않게 */
  body{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); }
}

/* ===== 서브페이지 히어로 (구 page-title-wrap 대체) =====
   시작 상태는 어두운 배너가 아니라 poscoflow CI소개 페이지와 같은 흰 배경 +
   가운데 정렬 제목입니다. 사진은 제목 바로 아래(제목 높이만큼)부터만 드러나 있다가
   스크롤하면 위/좌우 클립이 걷히면서 화면 전체로 펼쳐집니다. */
.sub-stage{ position:relative; height:220vh; }
.sub-pin{ position:relative; height:100vh; overflow:hidden; }
.sub-pin.js-pin-fixed{ position:fixed; top:0; left:0; right:0; }
.sub-pin.js-pin-bottom{ position:absolute; top:120vh; left:0; right:0; }

.sub-hero{ position:relative; width:100%; height:100vh; overflow:hidden; background:#fff; word-break:keep-all; overflow-wrap:break-word; }

.sub-hero-title{
  position:relative; z-index:5; text-align:center;
  padding:180px 60px 0; /* 180px ≈ 고정 헤더(90px) + 여백 */
}
.sub-hero-label{letter-spacing:2px;color:#4f8fc0;font-size:20px;margin-bottom:14px;font-weight:600;}
.sub-hero-name{ margin:0; font-size:80px; font-weight:800;}

.sub-hero-bg{
  position:absolute; inset:0; z-index:1;
  /* 시작 상태: 위 33%/좌우 12%가 잘려서 사진이 제목 아래부터만 보입니다.
     둥근 카드 모서리는 없습니다 — 참고 사이트에도 없었습니다. */
  clip-path:inset(50% 15% 0 15%);
}
.sub-hero-bg :is(img, video){ width:100%; height:100%; object-fit:cover; display:block; }
.sub-hero-bg:has(> video)::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.2); pointer-events:none; } /* 영상만 30% 어둡게 (이미지는 이미 어둡게 작업됨) */

.sub-hero-caption{
  position:absolute; left:50%; bottom:50%;z-index:2; text-align:center;font-size:70px; line-height:1.5; font-weight:700; color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.5); /* 사진 전체를 어둡게 덮지 않고, 문구만 그림자로 가독성 확보 */
  opacity:0; transform:translate(30px);
 --cap-shift: translate(-50%, 50%);display:flex; flex-direction:column; align-items:center; gap:14px;
}
/* v6: .sub-hero-name/.sub-hero-caption에 모바일 대응 폭이 없어서, "고주파 열 치료술 (IDET)"처럼
   긴 이름이 80px 그대로 4줄 넘게 wrap되며 100vh 히어로를 넘칠 수 있었습니다. 비수술치료 페이지뿐
   아니라 sub-hero를 쓰는 다른 서브페이지에도 공통으로 적용되는 안전한 반응형 보정입니다. */
@media (max-width:991px){
  .sub-hero-title{ padding:120px 20px 0; }
  .sub-hero-label{ font-size:13px; margin-bottom:8px; }
  .sub-hero-name{ font-size:40px; line-height:1.3; }
  .sub-hero-bg{ clip-path:inset(50% 6% 0 6%); }
  .sub-stage{ height:170vh; }
  .sub-pin.js-pin-bottom{ top:70vh; }
  .sub-hero-caption{ width:calc(100% - 40px); gap:10px; font-size:28px; }
  .sub-hero-caption img{ width:100%; height:auto; }
}
@media (max-width:480px){
  .sub-hero-name{ font-size:32px; }
  .sub-hero-caption{ font-size:22px; }
}

.sub-breadcrumb-bar{ padding:20px 0; border-bottom:1px solid #eef1f4; }

.sub-section{width:75%;margin:5% auto;}
.section01{display:flex;justify-content:flex-start;flex-wrap:wrap;gap:50px;}
/* =====================================================================
   의료진 소개 — 카드 목록(.dc-card) + 팝업(.dc-modal)
   ※ 사이트 전역에서 a/span/p/div/li/strong/b 글자색을 지정하고 있어서, 글자색은 모두 따로 지정합니다.
   ===================================================================== */
.dc-wrap{ max-width:1400px; }
.dc-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:32px; }

/* 카드 */
.dc-card{ position:relative; display:grid; grid-template-columns:44% minmax(0,1fr); min-height:400px; border:1px solid #e5e9f0; border-radius:22px; overflow:hidden; background:#fff; text-decoration:none;
  transition:border-color .3s, box-shadow .35s, transform .35s cubic-bezier(.2,.8,.2,1); }
.dc-card:hover{ border-color:rgba(79,143,192,.55); box-shadow:0 26px 50px -30px rgba(14,35,56,.35); }
/* 마우스 올림: 카드 아래에 파란 선이 왼쪽부터 그어짐 (사진은 확대하지 않아 깨지지 않음) */
.dc-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; z-index:2; height:3px; background:#4f8fc0; transform:scaleX(0); transform-origin:left; transition:transform .45s cubic-bezier(.6,0,.2,1); }
.dc-card:hover::after{ transform:scaleX(1); }
.dc-card:focus-visible{ outline:3px solid rgba(79,143,192,.45); outline-offset:3px; }
.dc-photo{ position:relative; display:block; background:#eaf1f9; overflow:hidden; }
.dc-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
/* 마우스 올림: 사진 아래쪽에 남색 그림자가 은은하게 차오름 */
.dc-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,35,56,.38) 0%, rgba(14,35,56,0) 45%); opacity:0; transition:opacity .45s; }
.dc-card:hover .dc-photo::after{ opacity:1; }
.dc-body{ display:flex; flex-direction:column; min-width:0; padding:36px 34px 30px; }
.dc-chip{ align-self:flex-start; padding:7px 14px; border-radius:99px; background:#eaf1f9; color:#1b3a5f; font-size:14px; font-weight:700; }
.dc-name{ display:block; margin:16px 0 22px; font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.2; color:#0e2338; }
.dc-name small{ margin-left:8px; font-size:18px; font-weight:600; color:#64748b; }
.dc-list{ margin:0; padding:18px 0 0; list-style:none; border-top:1px solid #e5e9f0; }
.dc-list li{ position:relative; padding:5px 0 5px 16px; font-size:16px; line-height:1.55; color:#334155; word-break:keep-all; }
.dc-list li::before{ content:""; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%; background:#4f8fc0; }
.dc-more{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:24px; }
.dc-more > span{ font-size:16px; font-weight:700; color:#1b3a5f; }
.dc-more em{ font-style:normal; color:#1b3a5f; }
.dc-more i{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; border:1px solid #d3dce7; color:#1b3a5f; flex:none; transition:background .3s, border-color .3s, color .3s; }
.dc-more i svg{ width:17px; height:17px; transition:transform .3s; }
.dc-card:hover .dc-more i{ background:#1b3a5f; border-color:#1b3a5f; color:#fff; }
.dc-card:hover .dc-more i svg{ transform:translateX(2px); }

/* 팝업 (부트스트랩 모달) */
.dc-modal .modal-dialog{ max-width:1000px; margin:40px auto; padding:0 20px; }
.dc-modal .modal-content{ position:relative; border:0; border-radius:26px; overflow:hidden; background:#fff; box-shadow:0 40px 80px -30px rgba(14,35,56,.5); }
.dc-close{ position:absolute; top:18px; right:18px; z-index:3; display:grid; place-items:center; width:46px; height:46px; padding:0; border:0; border-radius:50%; background:#fff; color:#1b3a5f; cursor:pointer; box-shadow:0 6px 18px -8px rgba(14,35,56,.4); transition:transform .3s; }
.dc-close:hover{ transform:rotate(90deg); }
.dc-close svg{ width:18px; height:18px; }

.dc-m-top{ display:grid; grid-template-columns:40% minmax(0,1fr); background:#eaf1f9; }
.dc-m-photo{ position:relative; min-height:520px; }
.dc-m-photo img{ position:absolute; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:contain; object-position:center bottom; }
.dc-m-info{ padding:56px 52px 44px 24px; }
.dc-m-mark{ display:block; width:44px; height:auto; margin-bottom:22px; }
.dc-eyebrow{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.18em; color:#4f8fc0; }
.dc-m-name{ margin:10px 0 6px; font-size:42px; font-weight:800; letter-spacing:-.03em; line-height:1.2; color:#0e2338; }
.dc-m-name small{ margin-left:8px; font-size:20px; font-weight:600; color:#64748b; }
.dc-m-dept{ margin:0; font-size:16px; color:#334155; }

.dc-sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:36px 0 14px; }
.dc-sec-head h4{ margin:4px 0 0; font-size:20px; font-weight:800; color:#0e2338; }
.dc-legend{ display:flex; gap:14px; }
.dc-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#64748b; }
.dc-legend i{ width:11px; height:11px; border-radius:3px; }
.dc-legend .lg-on{ background:#1b3a5f; }
.dc-legend .lg-op{ background:#fff; border:1px solid #cbd5e1; }
.dc-legend .lg-alt{ background:#dbe9f6; border:1px solid #9dc3e0; }

.dc-sch{ width:100%; margin:0; border-collapse:separate; border-spacing:0; table-layout:fixed; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px #e5e9f0; }
.dc-sch th, .dc-sch td{ height:48px; padding:0; text-align:center; vertical-align:middle; font-size:15px; }
.dc-sch thead th{ background:#1b3a5f; color:#fff; font-weight:700; }
.dc-sch thead th:first-child{ width:64px; }
.dc-sch tbody th{ background:#f5f8fb; color:#64748b; font-weight:700; }
.dc-sch tbody tr + tr > *{ border-top:1px solid #e5e9f0; }
.dc-sch b{ display:inline-grid; place-items:center; min-width:46px; height:30px; padding:0 8px; border-radius:8px; font-size:13.5px; font-weight:700; }
.dc-sch .dc-on{ background:#1b3a5f; color:#fff; }
.dc-sch .dc-op{ border:1px solid #cbd5e1; color:#64748b; font-weight:600; }
.dc-sch .dc-off{ color:#b6c0cd; }
.dc-sch .dc-alt{ gap:1px; background:#eaf3fb; border:1px solid #9dc3e0; color:#1b3a5f; line-height:1.15; }
.dc-sch .dc-alt small{ display:none; font-size:11.5px; font-weight:600; color:#4f8fc0; }
.dc-sch td[rowspan] .dc-alt{ height:auto; padding:10px 8px; }
.dc-sch td[rowspan] .dc-alt small{ display:block; }
.dc-sch-note{ margin:10px 0 0; font-size:13.5px; color:#64748b; }

.dc-m-bottom{ padding:14px 56px 48px; }
.dc-m-cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:48px; }
.dc-m-list, .dc-papers{ margin:0; padding:0; list-style:none; border-top:1px solid #e5e9f0; }
.dc-m-list li{ position:relative; padding:9px 0 9px 16px; border-bottom:1px solid #f0f3f7; font-size:15.5px; line-height:1.55; color:#334155; word-break:keep-all; }
.dc-m-list li::before{ content:""; position:absolute; left:0; top:18px; width:6px; height:6px; border-radius:50%; background:#4f8fc0; }
.dc-m-papers .dc-sec-head{ margin-top:44px; }
.dc-papers{ counter-reset:dcp; }
.dc-papers li{ position:relative; padding:12px 0 12px 40px; border-bottom:1px solid #f0f3f7; font-size:14.5px; line-height:1.65; color:#475569; word-break:keep-all; overflow-wrap:anywhere; counter-increment:dcp; }
.dc-papers li::before{ content:counter(dcp, decimal-leading-zero); position:absolute; left:0; top:13px; font-size:12.5px; font-weight:800; letter-spacing:.04em; color:#4f8fc0; }

/* 팝업 맨 아래: 이전 / 다음 의료진 */
.dc-m-nav{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:44px; border-top:2px solid #1b3a5f; }
.dc-m-nav a{ display:flex; align-items:center; gap:16px; min-width:0; padding:22px 8px; text-decoration:none; transition:background .25s; }
.dc-m-nav a.is-next{ justify-content:flex-end; text-align:right; border-left:1px solid #e5e9f0; }
.dc-m-nav a:hover{ background:#f5f8fb; }
.dc-m-nav i{ display:grid; place-items:center; width:44px; height:44px; flex:none; border-radius:50%; background:#eaf1f9; color:#1b3a5f; transition:background .25s, color .25s; }
.dc-m-nav i svg{ width:18px; height:18px; }
.dc-m-nav a.is-prev i svg{ transform:scaleX(-1); }
.dc-m-nav a:hover i{ background:#1b3a5f; color:#fff; }
.dc-m-nav span{ min-width:0; }
.dc-m-nav small{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.1em; color:#94a3b8; }
.dc-m-nav strong{ display:block; margin-top:2px; font-size:18px; font-weight:800; color:#0e2338; }
.dc-m-nav em{ display:block; font-style:normal; font-size:14px; color:#64748b; word-break:keep-all; }

@media (max-width:1200px){
  .dc-grid{ grid-template-columns:1fr; max-width:760px; margin:0 auto; }
}
@media (max-width:991px){
  .dc-wrap{ width:calc(100% - 32px); }
  .dc-grid{ gap:18px; }
  .dc-card{ grid-template-columns:38% minmax(0,1fr); min-height:0; border-radius:18px; }
  .dc-body{ padding:22px 18px 20px; }
  .dc-chip{ padding:5px 11px; font-size:12.5px; }
  .dc-name{ margin:10px 0 14px; font-size:24px; }
  .dc-name small{ font-size:14.5px; margin-left:5px; }
  .dc-list{ padding-top:12px; }
  .dc-list li{ padding:3px 0 3px 13px; font-size:13.5px; }
  .dc-list li::before{ top:11px; width:5px; height:5px; }
  .dc-more{ padding-top:16px; }
  .dc-more > span{ font-size:14px; }
  .dc-more em{ display:none; }
  .dc-more i{ width:36px; height:36px; }

  .dc-modal .modal-dialog{ margin:0; padding:0; max-width:none; min-height:100%; }
  .dc-modal .modal-content{ border-radius:0; min-height:100vh; }
  .dc-close{ top:12px; right:12px; width:42px; height:42px; }
  .dc-m-top{ grid-template-columns:1fr; }
  .dc-m-photo{ order:2; min-height:300px; }
  .dc-m-photo:empty{ display:none; }
  .dc-m-info{ padding:40px 20px 16px; }
  .dc-m-name{ font-size:32px; }
  .dc-m-name small{ font-size:17px; }
  .dc-sec-head{ margin-top:28px; }
  .dc-sec-head h4{ font-size:18px; }
  .dc-legend{ gap:10px; }
  .dc-sch th, .dc-sch td{ height:44px; font-size:13px; }
  .dc-sch thead th:first-child{ width:44px; }
  .dc-sch b{ min-width:0; height:26px; padding:0 5px; font-size:12px; }
  .dc-sch td[rowspan] .dc-alt{ padding:8px 5px; }
  .dc-m-bottom{ padding:10px 20px 36px; }
  .dc-m-cols{ grid-template-columns:1fr; gap:0; }
  .dc-m-list li{ font-size:14.5px; }
  .dc-papers li{ padding-left:34px; font-size:13.5px; }
  .dc-m-nav{ margin-top:32px; }
  .dc-m-nav a{ gap:10px; padding:18px 4px; }
  .dc-m-nav i{ width:34px; height:34px; }
  .dc-m-nav i svg{ width:15px; height:15px; }
  .dc-m-nav small{ font-size:11.5px; letter-spacing:.06em; }
  .dc-m-nav strong{ font-size:16px; }
  .dc-m-nav em{ font-size:12.5px; }
}

/* =====================================================================
   진료안내 및 오시는 길 (.vi-)
   ※ 사이트 전역에서 a/span/p/div/li/strong/b/dt/dd 글자색을 지정하고 있어서, 글자색은 모두 따로 지정합니다.
   ===================================================================== */
.vi-wrap{ width:min(1200px, calc(100% - 48px)); }
.vi-sec{ padding:40px 0 60px; }
.vi-sec + .vi-sec{ padding-top:60px; }
.vi-head{ margin-bottom:40px; text-align:center; }
.vi-eyebrow{ display:block; font-size:16px; font-weight:600; letter-spacing:2px; color:#4f8fc0; }
.vi-head h2{ margin:14px 0 0; font-size:48px; font-weight:800; line-height:1.35; color:#1e293b; }

/* 진료시간 */
.vi-hours{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:24px; }
.vi-hours-card{ display:flex; flex-direction:column; padding:28px; border-radius:26px; background:#f5f8fb; border:1px solid #e5e9f0; }
.vi-hgrid{ flex:1; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
.vi-hbox{ display:flex; flex-direction:column; justify-content:space-between; gap:22px; padding:24px 24px 22px; border-radius:20px; background:#fff; border:1px solid #e5e9f0; transition:transform .3s, box-shadow .3s; }
.vi-hbox:hover{ transform:translateY(-3px); box-shadow:0 18px 32px -22px rgba(14,35,56,.4); }
.vi-hbox-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.vi-hbox-top span{ font-size:17px; font-weight:800; color:#1e293b; }
.vi-hbox-top i{ display:grid; place-items:center; width:42px; height:42px; border-radius:12px; background:#eaf1f9; color:#1b3a5f; flex:none; }
.vi-hbox-top i svg{ width:20px; height:20px; }
.vi-hbox small{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.14em; color:#94a3b8; }
.vi-hbox strong{ display:block; margin-top:4px; font-size:30px; font-weight:800; letter-spacing:.01em; color:#1b3a5f; white-space:nowrap; }
.vi-hbox.is-main{ background:#eaf1f9; border-color:#cfe0ef; }
.vi-hbox.is-main small{ color:#4f8fc0; }
.vi-hbox.is-main .vi-hbox-top i{ background:#fff; }
.vi-hbox.is-lunch strong{ color:#64748b; }
.vi-hbox.is-lunch .vi-hbox-top i{ background:#fff4df; color:#c98a16; }
.vi-hbox.is-off{ background:#fdf3f3; border-color:#f6dcdc; }
.vi-hbox.is-off strong{ color:#d14343; }
.vi-hbox.is-off .vi-hbox-top i{ background:#fbe1e1; color:#d14343; }
.vi-hnote{ margin:16px 0 0; font-size:15px; color:#64748b; }

.vi-call{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:30px; padding:40px 38px; border-radius:26px; overflow:hidden;
  background:radial-gradient(120% 120% at 100% 0%, #2b6ca8 0%, #1b3a5f 45%, #0e2338 100%); }
.vi-call-mark{ position:absolute; right:-24px; bottom:-18px; width:220px; height:auto; opacity:.08; pointer-events:none; }
.vi-call > div{ position:relative; }
.vi-call small{ display:block; font-size:14px; font-weight:700; letter-spacing:.14em; color:#9dc3e0; }
.vi-call h3{ margin:10px 0 6px; font-size:20px; font-weight:700; color:#fff; }
.vi-call a.vi-call-tel{ display:inline-block; font-size:44px; font-weight:800; letter-spacing:.01em; color:#fff; }
.vi-call p{ margin:14px 0 0; font-size:16px; line-height:1.7; color:rgba(255,255,255,.72); }
.vi-call-btns{ position:relative; display:flex; gap:10px; }
.vi-call-btns a{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:56px; border-radius:99px; font-size:16px; font-weight:800; transition:background .25s; }
.vi-call-btns svg{ width:18px; height:18px; }
.vi-call-btns a.is-white{ background:#fff; color:#1b3a5f; }
.vi-call-btns a.is-white:hover{ background:#eaf1f9; }
.vi-call-btns a.is-line{ border:1.5px solid rgba(255,255,255,.45); color:#fff; }
.vi-call-btns a.is-line:hover{ background:rgba(255,255,255,.1); }

/* 오시는 길 */
.vi-loc{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:24px; align-items:stretch; }
.vi-map{ position:relative; min-height:520px; border-radius:26px; overflow:hidden; background:#eef2f7; }
.vi-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }   /* 지도를 iframe으로 넣는 경우 칸에 꽉 차게 */
.vi-addr{ display:flex; flex-direction:column; padding:38px 36px; border-radius:26px; border:1px solid #e5e9f0; background:#fff; box-shadow:0 30px 60px -45px rgba(14,35,56,.35); }
.vi-addr small{ font-size:13px; font-weight:800; letter-spacing:.14em; color:#4f8fc0; }
.vi-addr h3{ margin:10px 0 6px; font-size:25px; font-weight:800; line-height:1.45; color:#1e293b; word-break:keep-all; }
.vi-addr .vi-addr-old{ margin:0; font-size:15.5px; color:#64748b; }
.vi-copy{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:14px; padding:8px 14px; border-radius:99px; border:1px solid #e5e9f0; background:#fff; font:inherit; font-size:14px; font-weight:700; color:#1b3a5f; cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
.vi-copy span{ color:inherit; }
.vi-copy svg{ width:15px; height:15px; }
.vi-copy:hover{ border-color:#9dc3e0; }
.vi-copy.is-done{ background:#1b3a5f; border-color:#1b3a5f; color:#fff; }
.vi-addr dl{ margin:26px 0 0; padding:0; border-top:1px solid #e5e9f0; }
.vi-addr dl div{ display:flex; justify-content:space-between; gap:12px; padding:14px 0; border-bottom:1px solid #e5e9f0; }
.vi-addr dt{ font-size:16px; font-weight:700; color:#64748b; }
.vi-addr dd, .vi-addr dd a{ margin:0; font-size:16px; font-weight:800; color:#1e293b; }
.vi-maps{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:auto; padding-top:26px; }
.vi-maps a{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:54px; padding:0 10px; border-radius:14px; font-size:15px; font-weight:800; color:#fff; white-space:nowrap; transition:transform .2s, box-shadow .2s; }
.vi-maps a:hover{ color:#fff; transform:translateY(-2px); box-shadow:0 12px 22px -12px rgba(0,0,0,.4); }
.vi-maps img{ height:24px; width:auto; }
.vi-maps a.is-kakao{ background:#3c1e1e; }
.vi-maps a.is-naver{ background:#03b963; }

.vi-trans{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:24px; margin-top:24px; }
.vi-tcard{ padding:34px 36px; border-radius:26px; background:#f5f8fb; border:1px solid #e5e9f0; }
.vi-thead{ display:flex; align-items:center; gap:14px; margin-bottom:24px; }
.vi-thead i{ display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:#1b3a5f; color:#fff; flex:none; }
.vi-thead i svg{ width:24px; height:24px; }
.vi-thead h4{ margin:0; font-size:22px; font-weight:800; color:#1e293b; }
.vi-thead p{ margin:2px 0 0; font-size:14.5px; color:#64748b; }
.vi-steps{ margin:0; padding:0; list-style:none; }
.vi-steps li{ position:relative; display:flex; gap:14px; padding:0 0 20px; }
.vi-steps li::before{ content:""; position:absolute; left:15px; top:32px; bottom:2px; width:2px; background:#d3e0ed; }
.vi-steps li:last-child{ padding-bottom:0; }
.vi-steps li:last-child::before{ display:none; }
.vi-steps b{ display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid #4f8fc0; font-size:13px; font-weight:800; color:#1b3a5f; flex:none; overflow:hidden; }
.vi-steps span{ padding-top:5px; font-size:16.5px; line-height:1.5; color:#334155; word-break:keep-all; }
.vi-steps li.is-goal b{ border-color:#1b3a5f; background:#fff; }
.vi-steps li.is-goal b img{ width:22px; height:auto; }
.vi-steps li.is-goal span{ font-weight:800; color:#1b3a5f; }
.vi-stops{ display:flex; flex-direction:column; gap:18px; }
.vi-stop{ padding-bottom:18px; border-bottom:1px solid #dfe6ee; }
.vi-stop:last-child{ padding-bottom:0; border-bottom:0; }
.vi-stop strong{ display:block; margin-bottom:10px; font-size:16.5px; font-weight:800; color:#1e293b; }
.vi-stop strong em{ margin-left:4px; font-style:normal; font-weight:600; color:#64748b; }
.vi-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.vi-chips span{ display:inline-grid; place-items:center; min-width:40px; height:30px; padding:0 10px; border-radius:99px; background:#386de8; font-size:13.5px; font-weight:800; color:#fff; }
.vi-chips span.green{ background:#3cc344; }
.vi-chips span.yg{ background:#87c700; }
.vi-bus-legend{ display:flex; flex-wrap:wrap; gap:8px 18px; margin:22px 0 0; padding:16px 0 0; list-style:none; border-top:1px solid #dfe6ee; }
.vi-bus-legend li{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600; color:#64748b; }
.vi-bus-legend i{ width:11px; height:11px; border-radius:50%; background:#386de8; }
.vi-bus-legend i.green{ background:#3cc344; }
.vi-bus-legend i.yg{ background:#87c700; }

@media (max-width:1100px){
  .vi-hbox strong{ font-size:24px; }
  .vi-call a.vi-call-tel{ font-size:36px; }
}
@media (max-width:900px){
  .vi-head h2{ font-size:24px; }
  .vi-hours, .vi-loc, .vi-trans{ grid-template-columns:1fr; }
  .vi-hours-card{ padding:16px; border-radius:20px; }
  .vi-call, .vi-addr, .vi-tcard{ padding:28px 22px; border-radius:20px; }
  .vi-hgrid{ gap:10px; }
  .vi-hbox{ padding:18px 16px; gap:16px; border-radius:16px; }
  .vi-hbox strong{ font-size:20px; }
  .vi-hbox-top span{ font-size:15px; }
  .vi-hbox-top i{ width:34px; height:34px; }
  .vi-map{ min-height:320px; border-radius:20px; }
  .vi-addr h3{ font-size:20px; }
}
@media (max-width:991px){
  .vi-wrap{ width:calc(100% - 32px); }
  .vi-sec{ padding:20px 0 40px; }
  .vi-sec + .vi-sec{ padding-top:40px; }
  .vi-eyebrow{ font-size:13px; }
  .vi-head{ margin-bottom:26px; }
  .vi-call a.vi-call-tel{ font-size:32px; }
  .vi-call p{ font-size:14.5px; }
  .vi-call-btns a{ height:50px; font-size:14.5px; }
  .vi-maps{ grid-template-columns:1fr; }
  .vi-steps span{ font-size:15px; }
}
@media (max-width:560px){
  .vi-hgrid{ grid-template-columns:1fr; }
  .vi-hbox{ flex-direction:row; align-items:center; gap:12px; padding:14px 16px; }
  .vi-hbox-top{ flex-direction:row-reverse; justify-content:flex-end; gap:12px; }
  .vi-hbox > div:last-child{ text-align:right; }
  .vi-hbox small{ display:none; }
  .vi-hbox strong{ margin:0; font-size:18px; }
}

/* =====================================================================
   시설 안내 (.fc-) — 큰 사진 + 사진 위 설명·번호 + 썸네일 탭
   ※ 사이트 전역에서 a/span/p/div/button/h3/em 글자색을 지정하고 있어서, 글자색은 모두 따로 지정합니다.
   ===================================================================== */
.fc-wrap{ width:min(1200px, calc(100% - 48px)); }

/* 큰 사진 */
.fc-stage{ position:relative; aspect-ratio:16/9.7; border-radius:24px; overflow:hidden; background:#0e2338; clip-path:inset(0 round 24px); contain:paint; }
.fc-slide{ position:absolute; inset:0; will-change:transform; backface-visibility:hidden; }
.fc-slide.is-base{ z-index:1; }
.fc-slide.is-active{ z-index:2; }
.fc-slide img{ display:block; width:100%; height:100%; object-fit:cover; }
.fc-stage::after{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none; background:linear-gradient(0deg, rgba(10,26,44,.78) 0%, rgba(10,26,44,.35) 28%, rgba(10,26,44,0) 50%); }

/* 사진 위 설명 · 번호 · 화살표 */
.fc-cap{ position:absolute; left:40px; right:40px; bottom:34px; z-index:5; display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.fc-cap-text{ min-width:0; }
.fc-cap-text small{ display:block; font-size:13px; font-weight:800; letter-spacing:.2em; color:#9dc3e0; }
.fc-cap-text h3{ margin:6px 0 0; font-size:40px; font-weight:800; letter-spacing:-.02em; line-height:1.25; color:#fff; }
.fc-cap-text p{ margin:8px 0 0; font-size:17px; color:rgba(255,255,255,.85); }
.fc-cap-text > *{ animation:fcCapIn .55s cubic-bezier(.2,.7,.2,1) both; }
.fc-cap-text > h3{ animation-delay:.05s; }
.fc-cap-text > p{ animation-delay:.1s; }
@keyframes fcCapIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.fc-ctrl{ display:flex; align-items:center; gap:14px; flex:none; }
.fc-count{ font-size:15px; font-weight:700; letter-spacing:.06em; color:rgba(255,255,255,.6); }
.fc-count b{ font-size:22px; color:#fff; }
.fc-count span{ color:rgba(255,255,255,.6); }
.fc-arrows{ display:flex; gap:8px; }
.fc-arrows button{ display:grid; place-items:center; width:48px; height:48px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.45); background:rgba(255,255,255,.08); color:#fff; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .25s, border-color .25s, color .25s; }
.fc-arrows button:hover{ background:#fff; border-color:#fff; color:#1b3a5f; }
.fc-arrows svg{ width:18px; height:18px; }

/* 자동 넘김 진행 선 */
.fc-bar{ position:absolute; left:0; right:0; top:0; z-index:5; height:3px; background:rgba(255,255,255,.15); }
.fc-bar span{ display:block; width:0; height:100%; background:#9dc3e0; }
.fc-bar span.is-run{ animation:fcBar 5s linear forwards; }
@keyframes fcBar{ to{ width:100%; } }

/* 썸네일 탭 */
.fc-thumbs{ display:flex; gap:14px; margin-top:16px; padding:4px 2px 6px; overflow-x:auto; scrollbar-width:none; }
.fc-thumbs::-webkit-scrollbar{ display:none; }
.fc-thumb{ flex:1 0 180px; display:flex; flex-direction:column; gap:10px; padding:0; border:0; background:none; cursor:pointer; text-align:left; font:inherit; }
.fc-thumb-img{ position:relative; display:block; aspect-ratio:16/10; border-radius:14px; overflow:hidden; background:#eaf1f9; }
.fc-thumb-img img{ display:block; width:100%; height:100%; object-fit:cover; opacity:.7; filter:grayscale(.4) brightness(.9); transition:opacity .3s, filter .3s; }
.fc-thumb-img::after{ content:""; position:absolute; inset:0; border-radius:14px; box-shadow:inset 0 0 0 3px transparent; transition:box-shadow .3s; }
.fc-thumb .fc-thumb-name{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#94a3b8; transition:color .3s; }
.fc-thumb .fc-thumb-name em{ font-style:normal; font-size:12px; font-weight:800; color:#c3cfdd; }
.fc-thumb:hover img{ opacity:1; filter:none; }
.fc-thumb:hover .fc-thumb-name{ color:#334155; }
.fc-thumb:focus-visible{ outline:3px solid rgba(79,143,192,.45); outline-offset:3px; border-radius:14px; }
.fc-thumb.is-active img{ opacity:1; filter:none; }
.fc-thumb.is-active .fc-thumb-img::after{ box-shadow:inset 0 0 0 3px #1b3a5f; }
.fc-thumb.is-active .fc-thumb-name{ font-weight:800; color:#1b3a5f; }
.fc-thumb.is-active .fc-thumb-name em{ color:#4f8fc0; }

@media (max-width:991px){
  .fc-wrap{ width:calc(100% - 32px); }
  .fc-stage{ aspect-ratio:4/3; border-radius:18px; clip-path:inset(0 round 18px); }
  .fc-stage::after{ background:linear-gradient(0deg, rgba(10,26,44,.88) 0%, rgba(10,26,44,.55) 40%, rgba(10,26,44,0) 72%); }
  .fc-cap{ left:18px; right:18px; bottom:18px; flex-direction:column; align-items:flex-start; gap:14px; }
  .fc-cap-text h3{ font-size:26px; }
  .fc-cap-text p{ font-size:14.5px; }
  .fc-ctrl{ width:100%; justify-content:space-between; }
  .fc-arrows button{ width:40px; height:40px; }
  .fc-thumb{ flex:0 0 42%; }
  .fc-thumb .fc-thumb-name{ font-size:13.5px; }
}

/* =====================================================================
   장비 소개 (.eq-) — 사진 반 · 설명 반 카드 + 카드 아래 전체 폭 펼침
   ※ 사이트 전역에서 span/p/li/button/h3 글자색을 지정하고 있어서, 글자색은 모두 따로 지정합니다.
   ===================================================================== */
.equip-list{ max-width:1200px; margin:0 auto; }
.equip-item{ display:none; }   /* 장비 정보를 적어두는 칸 — 화면에는 안 보이고 스크립트가 읽어서 카드로 만듭니다 */
.equip-cards{ display:flex; flex-direction:column; gap:28px; }

.eq-card{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); border:1px solid #e5e9f0; border-radius:24px; overflow:hidden; background:#fff; box-shadow:0 30px 60px -45px rgba(14,35,56,.35); transition:border-color .3s, box-shadow .3s; }
.eq-card:hover{ border-color:#cfe0ef; box-shadow:0 30px 60px -38px rgba(14,35,56,.42); }

/* 사진 — 높이 고정(펼쳐도 그대로) */
.eq-photo{ position:relative; min-height:400px; background:#0e2338; }
.eq-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.eq-photo.is-empty{ background:#1b2430; }

/* 설명 */
.eq-info{ display:flex; flex-direction:column; justify-content:center; min-width:0; padding:48px 52px; }
.eq-top{ display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.eq-ico{ display:grid; place-items:center; width:44px; height:44px; border-radius:12px; background:#1b3a5f; flex:none; }
.eq-ico i{ font-size:19px; color:#fff; }
.eq-chip{ padding:6px 13px; border-radius:99px; background:#eaf1f9; font-size:13.5px; font-weight:700; color:#1b3a5f; }
.eq-info h3{ margin:0 0 20px; font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.3; color:#0e2338; word-break:keep-all; }
.eq-specs{ margin:0; padding:0; list-style:none; }
.eq-specs li{ position:relative; padding:7px 0 7px 18px; font-size:16.5px; line-height:1.55; color:#334155; word-break:keep-all; }
.eq-specs li::before{ content:""; position:absolute; left:0; top:17px; width:6px; height:6px; border-radius:50%; background:#4f8fc0; }
.eq-more{ align-self:flex-start; display:inline-flex; align-items:center; gap:10px; margin-top:26px; padding:12px 20px 12px 22px; border-radius:99px; border:1px solid #d3dce7; background:#fff; font:inherit; font-size:15px; font-weight:700; color:#1b3a5f; cursor:pointer; transition:background .25s, border-color .25s, color .25s; }
.eq-more span{ color:inherit; }
.eq-more svg{ width:16px; height:16px; transition:transform .3s; }
.eq-more:hover{ border-color:#1b3a5f; }
.eq-more[aria-expanded="true"]{ background:#1b3a5f; border-color:#1b3a5f; color:#fff; }
.eq-more[aria-expanded="true"] svg{ transform:rotate(180deg); }

/* 지그재그: 짝수 카드는 사진이 오른쪽 */
.eq-card.is-rev .eq-photo{ order:2; }
.eq-card.is-rev .eq-info{ order:1; }

/* 펼침 — 카드 맨 아래 전체 폭. 0fr↔1fr 전환이라 내용 길이가 바뀌어도 잘리지 않고 부드럽게 열립니다 */
.eq-detail{ order:3; grid-column:1 / -1; display:grid; grid-template-rows:0fr; background:#f5f8fb; transition:grid-template-rows .4s cubic-bezier(.65,0,.35,1); }
.eq-detail.is-open{ grid-template-rows:1fr; }
.eq-detail-clip{ overflow:hidden; min-height:0; }
.eq-detail-in{ display:grid; grid-template-columns:180px minmax(0,1fr); gap:30px; padding:34px 52px 38px; border-top:1px solid #e5e9f0; }
.eq-detail-head small{ display:block; font-size:13px; font-weight:800; letter-spacing:.16em; color:#4f8fc0; }
.eq-detail-head h4{ margin:6px 0 0; font-size:19px; font-weight:800; color:#0e2338; }
.eq-detail-body p{ margin:0 0 12px; font-size:16px; line-height:1.8; color:#475569; word-break:keep-all; }
.eq-detail-body p:last-child{ margin-bottom:0; }

@media (max-width:900px){
  .eq-card, .eq-card.is-rev{ grid-template-columns:1fr; }
  .eq-card.is-rev .eq-photo{ order:0; }
  .eq-photo{ min-height:0; aspect-ratio:16/10; }
  .eq-info{ padding:28px 22px 30px; }
  .eq-info h3{ font-size:23px; }
  .eq-specs li{ font-size:15px; }
  .eq-detail-in{ grid-template-columns:1fr; gap:10px; padding:24px 22px 28px; }
}
@media (max-width:991px){
  .equip-list{ width:100%; }
  .equip-cards{ gap:18px; }
  .eq-card{ border-radius:20px; }
}

/* ===================== /* =====================================================================
   비급여 안내 (.np-) — 안내 상자 + 검색 + 분류별 펼침 표(항목명 · 가격 · 비고)
   ※ 사이트 전역에서 span/p/div/button/strong/b 글자색을 지정하고 있어서, 글자색은 모두 따로 지정합니다.
   ===================================================================== */
.np-wrap{ width:min(1240px, calc(100% - 48px)); }
.nonpay-item{ display:none; }   /* 항목을 적어두는 칸 — 화면에는 안 보이고 스크립트가 읽어서 표로 만듭니다 */

/* 안내 상자 */
.np-notice{ display:flex; gap:16px; padding:22px 24px; border-radius:18px; background:#f5f8fb; border:1px solid #e5e9f0; }
.np-notice > i{ display:grid; place-items:center; width:40px; height:40px; border-radius:12px; background:#1b3a5f; color:#fff; flex:none; }
.np-notice > i svg{ width:20px; height:20px; }
.np-notice strong{ display:block; font-size:17px; font-weight:800; color:#0e2338; }
.np-notice p{ margin:6px 0 0; font-size:15px; line-height:1.7; color:#64748b; word-break:keep-all; }

/* 검색 · 항목 수 · 전체 펼치기 */
.np-bar{ display:flex; align-items:center; gap:12px; margin:26px 0 16px; }
.np-search{ flex:1; display:flex; align-items:center; gap:10px; height:52px; margin:0; padding:0 18px; border-radius:99px; border:1px solid #d6dee8; background:#fff; cursor:text; transition:border-color .2s, box-shadow .2s; }
.np-search:focus-within{ border-color:#4f8fc0; box-shadow:0 0 0 4px rgba(79,143,192,.15); }
.np-search svg{ width:19px; height:19px; color:#94a3b8; flex:none; }
.np-search input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:none; font:inherit; font-size:16px; color:#1e293b; }
.np-search input::placeholder{ color:#a8b3c2; }
.np-count{ font-size:15px; font-weight:600; color:#64748b; white-space:nowrap; }
.np-count b{ color:#1b3a5f; }
.np-toggle{ height:52px; padding:0 22px; border-radius:99px; border:1px solid #d3dce7; background:#fff; font:inherit; font-size:15px; font-weight:700; color:#1b3a5f; cursor:pointer; white-space:nowrap; transition:border-color .2s; }
.np-toggle:hover{ border-color:#1b3a5f; }

/* 분류 */
.np-cats{ display:flex; flex-direction:column; gap:12px; }
.np-cat{ position:relative; border:1px solid #e5e9f0; border-radius:18px; background:#fff; overflow:hidden; transition:border-color .25s, box-shadow .25s; }
.np-cat::before{ content:""; position:absolute; left:0; top:0; bottom:0; z-index:1; width:4px; background:#1b3a5f; transform:scaleY(0); transition:transform .3s; }
.np-cat.is-open{ border-color:#cfe0ef; box-shadow:0 20px 40px -32px rgba(14,35,56,.4); }
.np-cat.is-open::before{ transform:scaleY(1); }
.np-cat[hidden]{ display:none; }
.np-head{ display:flex; align-items:center; gap:14px; width:100%; padding:22px 24px 22px 28px; border:0; background:none; font:inherit; text-align:left; cursor:pointer; transition:background .2s; }
.np-head:hover{ background:#f8fafc; }
.np-cat.is-open .np-head{ background:#f5f8fb; }
.np-head .np-no{ font-size:13.5px; font-weight:800; letter-spacing:.04em; color:#94a3b8; }
.np-cat.is-open .np-head .np-no{ color:#4f8fc0; }
.np-head .np-name{ flex:1; font-size:20px; font-weight:800; color:#0e2338; }
.np-head .np-num{ padding:5px 12px; border-radius:99px; background:#eaf1f9; font-size:13.5px; font-weight:700; color:#1b3a5f; }
.np-head .np-arrow{ display:grid; place-items:center; width:36px; height:36px; border-radius:50%; border:1px solid #d3dce7; color:#1b3a5f; transition:transform .3s, background .25s, border-color .25s, color .25s; }
.np-head .np-arrow svg{ width:16px; height:16px; }
.np-cat.is-open .np-head .np-arrow{ transform:rotate(180deg); background:#1b3a5f; border-color:#1b3a5f; color:#fff; }

/* 펼침 — 0fr↔1fr 전환이라 항목 수가 바뀌어도 잘리지 않습니다 */
.np-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.65,0,.35,1); }
.np-cat.is-open .np-body{ grid-template-rows:1fr; }
.np-body-clip{ overflow:hidden; min-height:0; }

/* 표 */
.np-scroll{ overflow-x:auto; padding:0 18px 18px; -webkit-overflow-scrolling:touch; }
.np-table{ width:100%; margin:0; border-collapse:collapse; font-size:14px; }
.np-table.np-cols-12{ min-width:1160px; }
.np-table.np-cols-9{ min-width:960px; }
.np-table th{ padding:10px 8px; background:#f5f8fb; border:1px solid #e3e9f1; font-size:13px; font-weight:700; line-height:1.35; color:#475569; text-align:center; word-break:keep-all; }
.np-table th.c-group{ background:#eaf1f9; color:#1b3a5f; }
.np-table td{ padding:11px 10px; border:1px solid #edf1f6; vertical-align:middle; line-height:1.5; color:#334155; word-break:keep-all; }
.np-table td.c-mid{ width:84px; background:#fafcfe; text-align:center; font-weight:700; color:#1b3a5f; }
.np-table td.c-sub{ width:116px; background:#fafcfe; text-align:center; font-size:13px; color:#475569; }
.np-table td.c-code{ width:96px; text-align:center; font-size:12.5px; color:#64748b; white-space:nowrap; }
.np-table td.c-name{ min-width:200px; font-weight:700; color:#1e293b; }
.np-table td.c-kind{ width:76px; text-align:center; font-size:13px; }
.np-table td.c-cost, .np-table td.c-min, .np-table td.c-max{ width:92px; text-align:right; white-space:nowrap; font-weight:700; color:#1b3a5f; }
.np-table td.c-mat, .np-table td.c-drug{ width:62px; text-align:center; }
.np-table th.c-mat, .np-table th.c-drug{ word-break:break-all; }   /* "치료재료대포함여부"처럼 긴 칸 이름은 두 줄로 */
.np-table td.c-note{ min-width:150px; font-size:13px; color:#64748b; }
.np-table td.c-date{ width:96px; text-align:center; white-space:nowrap; font-size:13px; color:#64748b; }
.np-table .np-tags{ display:none; }
.np-table mark{ padding:0 1px; border-radius:3px; background:#fde68a; color:inherit; }
.np-empty{ display:none; padding:60px 20px; border:1px dashed #d6dee8; border-radius:18px; text-align:center; font-size:15.5px; color:#94a3b8; }
.np-empty.is-on{ display:block; }

@media (max-width:991px){
  .np-wrap{ width:calc(100% - 32px); }
  .np-notice{ gap:12px; padding:18px; }
  .np-notice > i{ width:34px; height:34px; }
  .np-notice p{ font-size:14px; }
  .np-bar{ flex-wrap:wrap; }
  .np-search{ flex:1 1 100%; height:48px; }
  .np-toggle{ height:40px; margin-left:auto; padding:0 16px; font-size:13.5px; }
  .np-head{ gap:10px; padding:18px 16px 18px 20px; }
  .np-head .np-name{ font-size:17px; }
  .np-head .np-num{ padding:4px 9px; font-size:12px; }
  /* 표 → 한 줄씩 카드 (칸 이름 : 값). 중분류·소분류는 명칭 위에 작게 */
  .np-scroll{ padding:0; overflow:visible; }
  .np-table, .np-table tbody, .np-table tr, .np-table td{ display:block; }
  .np-table.np-cols-12, .np-table.np-cols-9{ min-width:0; }
  .np-table thead{ display:none; }
  .np-table tr{ display:flex; flex-direction:column; padding:14px 18px; border-top:1px solid #f0f3f7; }
  .np-table td{ display:grid; grid-template-columns:128px 1fr; gap:8px; width:auto !important; padding:2px 0; border:0; background:none !important; text-align:left !important; font-size:13.5px; }
  .np-table td::before{ content:attr(data-label); font-size:12.5px; font-weight:600; color:#94a3b8; }
  .np-table td.c-mid, .np-table td.c-sub, .np-table td.is-empty{ display:none; }
  .np-table td.c-name{ display:block; order:-1; margin-bottom:6px; font-size:15.5px; }   /* 명칭을 맨 위로 */
  .np-table td.c-name::before{ content:none; }
  .np-table .np-tags{ display:block; margin-bottom:3px; font-size:12px; font-weight:700; color:#4f8fc0; }
}

/* =====================================================================
   환자의 권리와 의무 (.rt-) — 소개 문장 + 권리 카드(2열) + 의무 카드(연한 파란 띠)
   ※ 사이트 전역에서 span/p/em/h3/h4 글자색을 지정하고 있어서, 글자색은 모두 따로 지정합니다.
   ===================================================================== */
.rt-wrap{ width:min(1100px, calc(100% - 48px)); }

.rt-intro{ max-width:780px; margin:0 auto 80px; text-align:center; }
.rt-mark{ display:block; width:64px; height:auto; margin:0 auto 26px; }
.rt-intro p{ margin:0; font-size:21px; line-height:1.75; font-weight:600; color:#1e293b; word-break:keep-all; }
.rt-intro p em{ font-style:normal; font-weight:800; color:#4f8fc0; }

.rt-head{ margin-bottom:24px; }
.rt-head small{ display:block; font-size:14px; font-weight:700; letter-spacing:.18em; color:#4f8fc0; }
.rt-head h3{ margin:8px 0 0; font-size:34px; font-weight:800; letter-spacing:-.02em; color:#0e2338; }

.rt-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.rt-grid .rt-card:last-child:nth-child(odd){ grid-column:1 / -1; }   /* 개수가 홀수면 마지막 카드는 전체 폭 */
.rt-card{ display:flex; gap:20px; padding:30px 30px 32px; border-radius:22px; border:1px solid #e5e9f0; background:#fff; transition:border-color .3s, box-shadow .3s, transform .3s; }
.rt-card:hover{ border-color:#cfe0ef; box-shadow:0 24px 44px -32px rgba(14,35,56,.4); transform:translateY(-3px); }
.rt-ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:#eaf1f9; color:#1b3a5f; flex:none; }
.rt-ico svg{ width:24px; height:24px; }
.rt-card em{ display:block; font-style:normal; font-size:13px; font-weight:800; letter-spacing:.08em; color:#4f8fc0; }
.rt-card h4{ margin:4px 0 10px; font-size:20px; font-weight:800; color:#0e2338; word-break:keep-all; }
.rt-card p{ margin:0; font-size:16px; line-height:1.8; color:#475569; word-break:keep-all; }

.rt-duty{ margin-top:70px; padding:44px 44px 48px; border-radius:28px; background:#f5f8fb; border:1px solid #e5e9f0; }

@media (max-width:991px){
  .rt-wrap{ width:calc(100% - 32px); }
  .rt-intro{ margin-bottom:50px; }
  .rt-mark{ width:50px; }
  .rt-intro p{ font-size:17px; }
  .rt-head h3{ font-size:24px; }
  .rt-grid{ grid-template-columns:1fr; gap:12px; }
  .rt-card{ flex-direction:column; gap:14px; padding:22px 20px; border-radius:18px; }
  .rt-ico{ width:44px; height:44px; border-radius:13px; }
  .rt-card h4{ font-size:18px; }
  .rt-card p{ font-size:15px; }
  .rt-duty{ margin-top:50px; padding:28px 16px 18px; border-radius:22px; }
}

.section03{width:100%;margin:5% auto 0;}
.section03 section{width:75%;margin:7% auto;}

@media (max-width:991px){
  .sub-section.section03{ width:100%; }
  .section03 section{ width:90%; }
}

.sctr-wrap{margin:0 auto;/*  padding:40px 24px 100px;  */}
.sctr-wrap section{ margin-bottom:56px; }

/* ===================== 1. 히어로 =====================
   배경 카드를 없애고 흰색 배경 + 오른쪽 이미지 영역으로 단순하게 바꿨습니다.
   (지금은 목업 단계라 자리표시자가 들어가 있고, 실제 이미지로 교체하면 됩니다.) */
.sctr-hero{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:48px;
  background:#fff;
  border-radius:20px;
  padding:50px 0;
  color:#1e293b;
}
.sctr-hero-text{min-width:0; }
.sctr-hero-label{
  display:inline-block;
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
  background:#eaf1f9;
  color:#1b3a5f;
  padding:6px 14px;
  border-radius:50px;
  margin-bottom:18px;
}
.sctr-hero-text h2{ font-size:48px; font-weight:800; line-height:1.35; margin:0 0 30px;}
.sctr-hero-accent{color:#4f8fc0;}
.sctr-hero-text p{ font-size:20px; line-height:1.7; color:#64748b; max-width:480px; margin:0 0 30px; }
.sctr-hero-stats{ display:flex; flex-wrap:wrap; }
.sctr-hero-stat{
  flex:0 0 150px;
  padding:20px;
  border-radius:10px;
  margin:0 5px;
}
.sctr-hero-stat:nth-child(1){background:#1b3a5f;margin-left:0;}
.sctr-hero-stat:nth-child(2){background:#4f8fc0}
.sctr-hero-stat:nth-child(3){background:#64748b}
.sctr-hero-stat strong{ display:block; font-size:24px; font-weight:800; margin-bottom:2px;color:#fff;}
.sctr-hero-stat span{ display:block; font-size:12.5px; color:#94a3b8; line-height:1.4; word-break:keep-all;color:#fff;}

.sctr-hero-visual{ position:relative; /* flex:0 0 380px;  */}
.sctr-hero-image-placeholder{
  width:100%;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
}
.sctr-hero-image-placeholder span{
  font-size:13px;
  font-weight:600;
  line-height:1.6;
  color:#8592a3;
}
.sctr-hero-image-placeholder img{ display:block; width:100%; height:auto; }

/* 스크롤/진입 시 서서히 떠오르는 리빌 — 사이트 다른 섹션(의료진 소개 등)에서
   쓰는 것과 같은 opacity+translateY 트랜지션입니다. */
.sctr-reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,.9,.32,1); }
.sctr-reveal.is-visible{ opacity:1; transform:translateY(0); }
.sctr-reveal.sctr-d1{ transition-delay:.05s; }
.sctr-reveal.sctr-d2{ transition-delay:.16s; }
.sctr-reveal.sctr-d3{ transition-delay:.27s; }
.sctr-reveal.sctr-d4{ transition-delay:.38s; }

.sctr-hero-floatbadge{
  position:absolute;
  left:-18px;
  bottom:-18px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  color:#1b3a5f;
  padding:12px 18px;
  border-radius:14px;
  box-shadow:0 16px 30px rgba(15,23,42,.14);
  transform:rotate(-6deg);
  z-index:2;
}
.sctr-hero-floatbadge i{ font-size:18px; color:#4f8fc0; }
.sctr-hero-floatbadge span{ font-size:13px; font-weight:700; line-height:1.3; }

/* ===================== 2. 섹션 공통 헤더 ===================== */
.sctr-section-head{text-align:center;margin-bottom:50px; }
.sctr-section-head p.eyebrow{ font-size:15px; font-weight:600; color:#4f8fc0; letter-spacing:2px; margin:0 0 8px; }
.sctr-section-head h2{ font-size:32px; margin:0 0 10px;font-weight:700;}
.sctr-section-head p.desc{ font-size:17px; color:#64748b; margin:0; }

.sctr-check-wrap{background:#eaf1f9;padding:5% 0;}
.sctr-check{/* background:#fff;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(15,23,42,.12);
  padding:36px; */margin:0 auto !important;}

/* ===================== 3. 일상 동작 카드 =====================
   보내주신 '질환정보' 참고 화면(왼쪽 탭 + 오른쪽에 사진 → 설명/원인/증상)
   레이아웃을 참고했습니다. 탭은 왼쪽에서 예전 카드 그리드처럼 2개씩
   넓게 보이도록 했고, 사진은 설명 위쪽에 오도록 구성했습니다. */
.sctr-activity-layout{
  display:flex;
  gap:36px;
  flex-direction:column;
}
.sctr-activity-tabs{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:14px;
  align-content:start;
}
.sctr-activity-tab{
  width:100%;
  padding:20px 16px;
  border-radius:14px;
  border:1.5px solid #9dc3e0;
  background:#f8fafc;
  color:#1e293b;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  line-height:1.4;
  text-align:left;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease;
  text-align:center;
}
.sctr-activity-tab:hover{ border-color:#4f8fc0;}
.sctr-activity-tab.is-active{
  background:#1b3a5f;
  border-color:transparent;
  color:#fff;
  box-shadow:0 14px 30px rgba(15,35,56,.28);
}

.sctr-activity-panel{display:flex;justify-content:space-between;background:#fff;
  border-radius:20px;
  box-shadow:0 20px 50px rgba(15,23,42,.12);
  padding:36px;}
/* 활동 탭을 고르면 그 동작에 맞는 그림이 설명 위쪽에 먼저 보이도록 했습니다.
   (지금은 목업용 일러스트이며, 실제 사진으로 교체할 수 있습니다.) */
.sctr-activity-photo{ margin-bottom:24px;width:40%;}
.sctr-activity-photo img{ display:block; width:100%;border-radius:16px; }
.sctr-activity-info{ min-width:0;width:55%;}
.sctr-map-badge{
  display:inline-block;
  background:#eaf1f9;
  color:#1b3a5f;
  font-size:15px;
  font-weight:700;
  padding:5px 14px;
  border-radius:50px;
  margin-bottom:14px;
}
.sctr-activity-info h3{ font-size:26px; margin:0 0 14px;}
.sctr-activity-desc{ font-size:16px; line-height:1.7; color:#475569; margin:0 0 28px; }
.sctr-activity-subhead{ font-size:16px; font-weight:700; color:#1b3a5f; margin:0 0 14px; }
.sctr-activity-causes{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:10px 28px;
  list-style:none;
  margin:0 0 30px;
  padding:0;
}
.sctr-activity-causes li{
  border-left:3px solid #4f8fc0;
  padding:3px 0 3px 14px;
  font-size:15px;
  color:#334155;
  line-height:1.6;
}
.sctr-activity-symptom-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
  margin:0 0 30px;
}
.sctr-activity-symptom-box{
  border:1.5px solid #e2e8f0;
  border-radius:12px;
  padding:16px 12px;
  text-align:center;
  font-size:14px;
  color:#334155;
  line-height:1.5;
}
.sctr-activity-treat-list{ list-style:none; margin:0; padding:0;display:flex;}
.sctr-activity-treat-list li{ position:relative; padding:5px 30px 5px 18px; font-size:16px; color:#334155; line-height:1.6; }
.sctr-activity-treat-list li::before{ content:''; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:#4f8fc0; }

/* ===================== 4. 대표 질환 (참고: 질환정보 상세페이지의 카드 스타일) =====================
   아이콘 배지 + 관절 태그 + 제목 + 설명 + '자세히 보기' 링크 구성을,
   보내주신 질환정보 카드 참고 이미지의 형식을 살려 그대로 가져왔습니다. */
.sctr-condition-layout{
display:flex;
align-items:center;
gap:36px;
height:633px;
}
.sctr-condition-layout--flat{
  display:block;
  height:auto;
}
.sctr-condition-layout--flat .sctr-legend{
  flex-direction:row;
  flex-wrap:wrap;
  width:100%;
  gap:10px;
  margin-bottom:28px;
}
.sctr-condition-layout--flat .sctr-legend-item{
  width:auto;
  background:#f5f8fb;
  border:1px solid #e5e9f0;
  border-radius:50px;
  padding:9px 18px;
}
.sctr-condition-layout--flat .sctr-legend-item:hover{ background:#eaf1f9; }
.sctr-condition-layout--flat .sctr-legend-item.is-active{ background:#eaf1f9; border-color:#9dc3e0; }
.sctr-condition-layout--flat .sctr-condition-grid{
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width: 900px){
  .sctr-condition-layout--flat .sctr-condition-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .sctr-condition-layout--flat .sctr-condition-grid{ grid-template-columns:1fr; }
}
.sctr-bodyfigure{
position:relative;
/* flex:0 0 500px; */
height:750px;
}
.sctr-bodyfigure-dual{height:auto;}
.sctr-bodyfigure img{ display:block; width:auto; height:100%;/* opacity:0.4; */}
.sctr-figure-dot{
position:absolute;
transform:translate(-50%, -50%);
width:34px;
height:34px;
border-radius:50%;
background:#fff;
border:2px solid #4f8fc0;
color:#4f8fc0;
font-family:inherit;
font-size:14px;
font-weight:800;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
padding:0;
outline:none;
box-shadow:0 1px 4px rgba(15,28,46,.18);
transition:background .18s ease, color .18s ease, transform .15s ease;
}
.sctr-figure-dot:hover{ transform:translate(-50%, -50%) scale(1.1); }
.sctr-figure-dot:focus-visible{ box-shadow:0 0 0 3px rgba(79,143,192,.4); }
.sctr-figure-dot.is-active{ background:#4f8fc0; color:#fff; }
.sctr-legend{
flex:0 0 190px;
width:190px;
display:flex;
flex-direction:column;
gap:8px;
}
.sctr-legend-item{
position:relative;
display:flex;
align-items:center;
gap:11px;
width:100%;
text-align:left;
background:none;
border:none;
font-family:inherit;
cursor:pointer;
padding:9px 8px;
border-radius:10px;
outline:none;
transition:background .15s ease;
}
.sctr-legend-item:hover{ background:#f4f8fc; }
.sctr-legend-item:focus-visible{ background:#eaf1f9; box-shadow:0 0 0 2px #9dc3e0 inset; }
.sctr-legend-num{
flex:0 0 auto;
display:flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
border-radius:50%;
background:#eaf1f9;
color:#4f8fc0;
font-size:12px;
font-weight:800;
transition:background .18s ease, color .18s ease;
}
.sctr-legend-item.is-active .sctr-legend-num{ background:#4f8fc0; color:#fff; }
.sctr-legend-label{ font-size:15.5px; font-weight:600; color:#64748b; transition:color .18s ease; }
.sctr-legend-item:hover .sctr-legend-label{ color:#1b3a5f; }
.sctr-legend-item.is-active .sctr-legend-label{ color:#1b3a5f; font-weight:700; }
.sctr-legend-count{ font-size:12.5px; font-weight:700; color:#c9d9ea; }
.sctr-legend-item.is-active .sctr-legend-count{ color:#4f8fc0; }
.sctr-condition-grid{
 flex:1;
 min-width:0;
  display:grid;
  grid-template-columns:1fr;
gap:18px;
 align-content:start;
}
.sctr-condition-card[hidden]{ display:none; }
.sctr-condition-card{
  display:block;
  width:100%;
  text-align:left;
  font-family:inherit;
  cursor:pointer;
  background:#fff;
  border:1px solid #eef1f5;
  border-radius:18px;
  padding:26px 24px;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
  transition:transform .2s ease, box-shadow .2s ease;
}
.sctr-condition-card:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(15,23,42,.1);border:1px solid #4f8fc0;}
.sctr-condition-tag{
  display:inline-block;
  background:#eaf1f9;
  color:#1b3a5f;
  font-size:15px;
  font-weight:700;
  padding:4px 12px;
  border-radius:50px;
  margin-bottom:12px;
}
.sctr-condition-card h4{ font-size:24px; margin:0 0 8px;}
.sctr-condition-card p{ font-size:17px; line-height:1.6; color:#64748b; margin:0 0 16px; }
.sctr-condition-link{
  display:inline-block;
  font-size:15px;
  font-weight:700;
  color:#4f8fc0;
}
.sctr-condition-card:hover .sctr-condition-link{ text-decoration:underline; }

.sctr-strength-wrap{background:#1b3a5f;padding:5% 0;}
.sctr-strength-wrap section{margin:0 auto;}
.sctr-strength-wrap .sctr-section-head h2{color:#fff;}
.sctr-strength-wrap .sctr-section-head p.desc{color:#fff;}
.sctr-strength-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.sctr-strength-card{
  background:#fff;
  border:1px solid #eef1f5;
  border-radius:18px;
  padding:32px 26px;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.sctr-strength-num{
  display:block;
  font-size:28px;
  font-weight:800;
  color:#c9d9ea;
  margin-bottom:14px;
}
.sctr-strength-card h4{ font-size:19px; margin:0 0 10px;}
.sctr-strength-card p{ font-size:14.5px; line-height:1.65; color:#64748b; margin:0; }

/* =========================================================
   4. JOINT CENTER : TREATMENT PHILOSOPHY
========================================================= */

.sctr-philosophy-wrap {
	width:100%;
	padding:0;
	background:#eaf1f9;
}

.sctr-philosophy-wrap > section {
margin:7% auto 0;
}


/* 전체 박스
--------------------------------------------------------- */

.sctr-philosophy-box {
	display:flex;
	width:100%;
	min-height:520px;
	overflow:hidden;
}


/* 이미지
--------------------------------------------------------- */

.sctr-philosophy-image {
	position:relative;
	width:50%;
	flex-shrink:0;
	overflow:hidden;
}

.sctr-philosophy-image img {
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
	transition:transform 1s ease;
}

.sctr-philosophy-box:hover .sctr-philosophy-image img {
	transform:scale(1.03);
}


/* 텍스트 영역
--------------------------------------------------------- */

.sctr-philosophy-content {
	display:flex;
	flex:1;
	flex-direction:column;
	justify-content:center;
	padding:0;
	box-sizing:border-box;
}

.sctr-philosophy-content .sctr-section-head {
	margin:0;
	text-align:left;
}


/* 프로세스
--------------------------------------------------------- */

.sctr-philosophy-process {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	margin-top:55px;
	padding-top:25px;
	border-top:1px solid rgba(35,73,108,.15);
}

.sctr-philosophy-item {
	position:relative;
	min-width:0;
	padding-left:18px;
	border-left:1px solid rgba(35,73,108,.12);
	box-sizing:border-box;
}

.sctr-philosophy-item:first-child {
	padding-left:0;
	border-left:0;
}

.sctr-philosophy-item > span {
	display:block;
	margin-bottom:10px;
	color:#1b3a5f;
}

.sctr-philosophy-item strong {
	display:block;
	margin-bottom:8px;
	color:#1b3a5f;
	font-size:17px;
}

.sctr-philosophy-item p {
	margin:0;
	line-height:1.55;
	font-size:17px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1200px) {

	.sctr-philosophy-wrap {
		padding:100px 0;
	}

	.sctr-philosophy-content {
		padding:55px 45px;
	}

	.sctr-philosophy-process {
		margin-top:45px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:991px) {

	.sctr-philosophy-wrap {
		padding:70px 0;
	}

	.sctr-philosophy-wrap > section {
		max-width:calc(100% - 40px);
	}

	.sctr-philosophy-box {
		display:block;
		min-height:0;
	}

	.sctr-philosophy-image {
		width:100%;
		height:300px;
	}

	.sctr-philosophy-content {
		padding:45px 25px 40px;
	}

	.sctr-philosophy-content .sctr-section-head {
		text-align:left;
	}

	.sctr-philosophy-process {
		grid-template-columns:repeat(2,1fr);
		row-gap:25px;
		margin-top:40px;
	}

	.sctr-philosophy-item:nth-child(3) {
		padding-left:0;
		border-left:0;
	}

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width:480px) {

	.sctr-philosophy-wrap {
		padding:55px 0;
	}

	.sctr-philosophy-wrap > section {
		max-width:calc(100% - 30px);
	}

	.sctr-philosophy-image {
		height:240px;
	}

	.sctr-philosophy-content {
		padding:38px 20px 35px;
	}

}

.sctr-cta{
  position:relative;
  border-radius:28px;
  padding:56px 60px;
  overflow:hidden;
}
.sctr-cta::before{
  content:'';
  position:absolute;
  top:-120px;
  right:-80px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,143,192,.18) 0%, rgba(79,143,192,0) 70%);
}
.sctr-cta::after{
  content:'';
  position:absolute;
  bottom:-140px;
  left:-60px;
  width:280px;
  height:280px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(79,143,192,.12) 0%, rgba(79,143,192,0) 70%);
}
.sctr-cta-inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:48px;
}
.sctr-cta-copy{ flex:1; min-width:0; }
.sctr-cta-copy .sctr-section-head{text-align:left;}
.sctr-cta-eyebrow{
  display:inline-block;
  letter-spacing:2px;
  font-size:12.5px;
  font-weight:700;
  color:#4f8fc0;
  margin-bottom:12px;
}
.sctr-cta-copy h3{
  font-size:28px;
  font-weight:800;
  margin:0 0 12px;
  line-height:1.35;
}
.sctr-cta-copy > p{
  font-size:15px;
  line-height:1.7;
  color:#64748b;
  margin:0 0 22px;
  max-width:440px;
}
.sctr-cta-points{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sctr-cta-points li{
  font-size:17px;
  font-weight:600;
  color:#1b3a5f;
  display:flex;
  align-items:center;
  gap:10px;
}
.sctr-cta-points i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  color:#4f8fc0;
  font-size:11px;
  flex:0 0 auto;
}
.sctr-cta-divider{
  flex:0 0 1px;
  align-self:stretch;
  background:rgba(27,58,95,.12);
}
.sctr-cta-action{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.sctr-cta-btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:linear-gradient(135deg, #0e2338 0%, #1b3a5f 55%, #2b6ca8 100%);
  color:#fff;
  font-weight:800;
  font-size:16px;
  padding:16px 34px;
  border-radius:50px;
  text-decoration:none;
  white-space:nowrap;
  box-shadow:0 12px 26px rgba(15,28,46,.18);
  transition:transform .2s ease, box-shadow .2s ease;
}
.sctr-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 16px 32px rgba(15,28,46,.24); }
.sctr-cta-btn i{ color:#9dc3e0; }
.sctr-cta-tel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#1b3a5f;
  font-weight:700;
  font-size:19px;
  text-decoration:none;
}
.sctr-cta-tel i{ color:#4f8fc0; }
.sctr-cta-hint{ font-size:12.5px; color:#94a3b8; }

/* ===================== 6. 질환 상세 모달 =====================
   대표 질환 카드를 눌렀을 때 다른 페이지로 이동하는 대신, 이 페이지
   안에서 바로 원인·증상·치료 방법과 간단한 그림을 보여줍니다. */
.sctr-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; padding:24px; }
.sctr-modal[aria-hidden="true"]{ display:none; }
.sctr-modal-backdrop{ position:absolute; inset:0; background:rgba(15,23,42,.55); }
.sctr-modal-panel{
  position:relative;
  background:#fff;
  border-radius:20px;
  max-width:750px;
  width:100%;
  max-height:85vh;
  overflow-y:auto;
  padding:40px 36px;
  box-shadow:0 30px 70px rgba(15,23,42,.3);
}
.sctr-modal-close{
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  border-radius:50%;
  border:none;
  background:#f1f5f9;
  color:#64748b;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sctr-modal-close:hover{ background:#e2e8f0; }
.sctr-modal-tag{ display:inline-block; background:#eaf1f9; color:#1b3a5f; font-size:13px; font-weight:700; padding:5px 14px; border-radius:50px; margin-bottom:14px; }
.sctr-modal-body h3{ font-size:22px; margin:0 0 6px;}
.sctr-modal-body > p.sctr-modal-summary{ font-size:14.5px; line-height:1.7; color:#475569; margin:0 0 20px; }
.sctr-modal-illustration{ display:block; width:180px; max-width:60%; margin:0 auto 8px; }
.sctr-modal-illustration-caption{ display:block; text-align:center; font-size:12px; color:#94a3b8; margin:0 0 22px; }
.sctr-modal-section{ margin-bottom:22px; }
.sctr-modal-section:last-child{ margin-bottom:0; }
.sctr-modal-section h4{ font-size:13px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px; }
.sctr-modal-section ul{ list-style:none; margin:0; padding:0; }
.sctr-modal-section li{ position:relative; padding:5px 0 5px 18px; font-size:14.5px; color:#334155; line-height:1.6; }
.sctr-modal-section li::before{ content:''; position:absolute; left:0; top:13px; width:6px; height:6px; border-radius:50%; background:#4f8fc0; }
.sctr-modal-markers{ background:#f5f8fb; border:1px solid #e5e9f0; border-radius:14px; padding:14px 16px; margin:0 0 22px; }
.sctr-modal-markers-title{ font-size:13px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; margin:0 0 10px; }
.sctr-modal-markers-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.sctr-modal-marker-chip{ display:inline-block; background:#ffffff; border:1px solid #dbe7f3; color:#1b3a5f; font-size:13px; font-weight:600; padding:6px 12px; border-radius:50px; }
@media (max-width: 900px){
  .sctr-activity-layout{ flex-direction:column; }
  .sctr-activity-tabs{ flex:1 1 auto; width:100%; }
  .sctr-activity-photo img{ max-width:420px; }
  .sctr-activity-symptom-grid{ grid-template-columns:repeat(2, 1fr);}
  .sctr-condition-layout{ flex-direction:column; align-items:center; gap:20px; }
.sctr-bodyfigure{ width:170px; }
.sctr-legend{ flex:0 0 auto; width:100%; max-width:320px; display:grid; grid-template-columns:repeat(2, 1fr); gap:4px 8px; }
.sctr-condition-grid{ width:100%; grid-template-columns:repeat(2, 1fr); }
.sctr-strength-grid{ grid-template-columns:repeat(2, 1fr); }
.sctr-cta{ padding:40px 28px; }
.sctr-cta-inner{ flex-direction:column; align-items:stretch; gap:28px; text-align:center; }
.sctr-cta-copy > p{ max-width:none; }
.sctr-cta-points{ align-items:center; }
.sctr-cta-divider{ display:none; }
}
@media (max-width: 560px){
  .sctr-condition-grid{ grid-template-columns:1fr; }
  .sctr-strength-grid{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .sctr-hero{ flex-direction:column; align-items:flex-start; gap:28px; }
  .sctr-hero-visual{ flex:0 0 auto; width:100%; max-width:320px; align-self:center; }
}
@media (max-width: 600px){
  .sctr-hero-floatbadge{ display:none; }
}
@media (max-width: 520px){
  .sctr-hero{ padding:32px 0; }
  .sctr-hero-text h2{ font-size:26px; }
  .sctr-hero-text p{ font-size:16px; margin-bottom:24px; }
  .sctr-section-head{ margin-bottom:28px; }
  .sctr-section-head p.eyebrow{ font-size:13px; }
  .sctr-section-head h2{ font-size:24px; }
  .sctr-section-head p.desc{ font-size:15px; }
  .sctr-activity-info h3{ font-size:20px; }
  .sctr-activity-desc{ font-size:15px; }
  .sctr-condition-card h4{ font-size:19px; }
  .sctr-condition-card{ padding:20px 18px; }
  .sctr-condition-tag{ font-size:13px; margin-bottom:10px; }
  .sctr-condition-card p{ font-size:15px; margin-bottom:12px; }
  .sctr-condition-link{ font-size:14px; }
  .sctr-hero-stats{ gap:0 20px; }
  .sctr-hero-stat{ padding:0 20px 0 0; border-left:none; flex:0 0 auto; }
  .sctr-activity-tabs{ gap:10px; }
  .sctr-activity-tab{ padding:14px 12px; font-size:14px; }
  .sctr-activity-causes{ grid-template-columns:1fr; }
  .sctr-activity-symptom-grid{ grid-template-columns:1fr 1fr; }
  .sctr-modal-panel{ padding:32px 20px; }
  .sctr-modal-illustration{ width:150px; }
}


/* ============================================================
   비수술치료 페이지 전용 — 좌우 분할 탭리스트 + 상세패널
   (센터 페이지들의 탭+바디맵+카드+모달 구조와는 다른, 이 페이지만의 레이아웃)
============================================================ */
.nstx-layout{ display:flex; gap:40px; align-items:flex-start; }
.nstx-tablist{ flex:0 0 300px; display:flex; flex-direction:column; gap:10px; }
.nstx-tab{
  display:block;
  width:100%;
  text-align:left;
  background:#fff;
  border:1px solid #e5e9f0;
  border-left:4px solid transparent;
  border-radius:14px;
  padding:16px 20px;
  cursor:pointer;
  font-family:inherit;
  outline:none;
  transition:background .15s ease, border-color .15s ease;
}
.nstx-tab:hover{ background:#f4f8fc; }
.nstx-tab:focus-visible{ box-shadow:0 0 0 2px #9dc3e0 inset; }
.nstx-tab-name{ display:block; font-size:16.5px; font-weight:700; color:#1f2937; margin-bottom:4px; transition:color .15s ease; }
.nstx-tab-desc{ display:block; font-size:13px; color:#94a3b8; line-height:1.5; }
.nstx-tab.is-active{ background:#eaf1f9; border-left-color:#4f8fc0; }
.nstx-tab.is-active .nstx-tab-name{ color:#1b3a5f; }

.nstx-panel{ flex:1; min-width:0; background:#fff; border:1px solid #e5e9f0; border-radius:20px; padding:40px 44px; }
.nstx-panel-tag{ display:inline-block; background:#eaf1f9; color:#1b3a5f; font-size:13px; font-weight:700; padding:5px 14px; border-radius:50px; margin-bottom:14px; }
.nstx-panel h3{ font-size:26px; margin:0 0 10px;}
.nstx-panel-duration{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#4f8fc0; font-weight:700; margin:0 0 18px; }
.nstx-panel-summary{ font-size:15px; line-height:1.8; color:#475569; margin:0 0 28px; }
.nstx-panel-section{ margin-bottom:26px; }
.nstx-panel-section:last-child{ margin-bottom:0; }
.nstx-panel-section h4{ font-size:13px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; margin:0 0 12px; }
.nstx-panel-section ul{ list-style:none; margin:0; padding:0; }
.nstx-panel-section li{ position:relative; padding:6px 0 6px 20px; font-size:14.5px; color:#334155; line-height:1.6; }
.nstx-panel-section li::before{ content:''; position:absolute; left:0; top:14px; width:6px; height:6px; border-radius:50%; background:#4f8fc0; }
.nstx-process-list{ list-style:none; margin:0; padding:0; counter-reset:nstx-step; }
.nstx-process-list li{ position:relative; padding:8px 0 8px 34px; font-size:14.5px; color:#334155; line-height:1.6; }
.nstx-process-list li::before{
  counter-increment:nstx-step;
  content:counter(nstx-step);
  position:absolute; left:0; top:6px;
  width:22px; height:22px; border-radius:50%;
  background:#4f8fc0; color:#fff; font-size:12px; font-weight:800;
  display:flex; align-items:center; justify-content:center;
}
.nstx-cta{
  margin-top:56px;
  background:#f5f8fb;
  border:1px solid #e5e9f0;
  border-radius:20px;
  padding:36px 32px;
  text-align:center;
}
.nstx-cta p{ font-size:16px; color:#334155; margin:0 0 18px; }
.nstx-cta-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.nstx-cta-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:50px;
  font-size:14.5px; font-weight:700;
  text-decoration:none;
}
.nstx-cta-btn.is-primary{ background:#1b3a5f; color:#fff; }
.nstx-cta-btn.is-secondary{ background:#fff; color:#1b3a5f; border:1px solid #dbe7f3; }

@media (max-width: 900px){
  .nstx-layout{ flex-direction:column; }
  .nstx-tablist{ flex-direction:row; flex-wrap:wrap; width:100%; }
  .nstx-tab{ flex:1 1 45%; }
  .nstx-panel{ width:100%; padding:28px 24px; }
}
@media (max-width: 560px){
  .nstx-tab{ flex:1 1 100%; }
}

/* ============================================================
   비수술치료 개별 항목 상세 페이지 템플릿. 접두사 txsvc- (treatment service page)
   ※ v4: 사용자가 참고 이미지로 보내주신 레퍼런스(왼쪽 고정 카테고리 사이드바 +
   큰 타이틀/일러스트 히어로 + 아이콘 카드형 "치료 효과" 섹션 + 하단 CTA 바)
   구조를 그대로 반영했습니다. 사이드바는 비수술치료 7개 항목을 오가는
   섹션 내비게이션 역할이고, 그 안의 로고/워딩은 실제 사이트 고유 브랜드가
   아니라 이 섹션 제목("비수술치료")으로 대체했습니다.
   ※ v6: bin님이 실제 사이트에 통합하며 폰트 크기·간격을 site 톤에 맞게
   키우고, 사이드바 top 오프셋을 고정 헤더 높이에 맞춰 조정했습니다. 이 CSS는
   그 조정을 그대로 반영한 버전입니다. 대표 이미지도 인라인 SVG 대신 실제
   사진을 넣을 자리(EYOOM_THEME_URL 경로)로 바뀌었습니다.
   ※ "주요 적응증"(txsvc-indication-groups/-part)은 이 조정 이후에 추가된
   기능이라 bin님이 보내주신 버전엔 아직 없어서, 새 폰트 스케일에 맞춰
   여기 다시 넣었습니다.
============================================================ */
.txsvc-page{ display:flex; align-items:flex-start; background:#fff; word-break:keep-all; overflow-wrap:break-word; }

/* v7: 스크롤하며 콘텐츠가 살짝 떠오르는 등장 효과. 자바스크립트(IntersectionObserver)가
   .is-visible 클래스를 붙여주면 애니메이션됩니다 — 각 tx_*.html.php 하단 스크립트 참고. */
.txsvc-reveal{ opacity:0; transform:translateY(26px); transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.txsvc-reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .txsvc-reveal{ opacity:1; transform:none; transition:none; }
}

/* 왼쪽 카테고리 사이드바 — 비수술치료 7개 항목을 오가는 섹션 내비게이션. */
.txsvc-sidenav{
  flex:0 0 260px;
  position:sticky;
  top:65px;
  align-self:flex-start;
  background:#fff;
  border-right:1px solid #e5e9f0;
  padding:28px 18px;
}
.txsvc-sidenav-title{ font-size:12.5px; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:.04em; margin:0 0 16px; padding:0 6px; }
.txsvc-sidenav-list{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:4px; }
.txsvc-sidenav-link{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:12px; text-decoration:none; color:#475569; font-size:14px; font-weight:600; transition:background .2s ease, color .2s ease, transform .2s ease; }
.txsvc-sidenav-link:hover{ background:#f5f8fb; transform:translateX(3px); }
.txsvc-sidenav-link.is-active{ background:#eaf1f9; color:#1b3a5f; font-weight:800; }
.txsvc-sidenav-icon{ width:34px; height:34px; border-radius:10px; background:#f0f4f8; display:flex; align-items:center; justify-content:center; color:#4f8fc0; flex-shrink:0; transition:transform .2s ease; }
.txsvc-sidenav-link:hover .txsvc-sidenav-icon{ transform:scale(1.08); }
.txsvc-sidenav-icon svg{ width:17px; height:17px; }
.txsvc-sidenav-link.is-active .txsvc-sidenav-icon{ background:#1b3a5f; color:#fff; }

.txsvc-sidenav-contact{ background:#f5f8fb; border-radius:14px; padding:18px; }
.txsvc-sidenav-contact h5{ font-size:12.5px; color:#94a3b8; font-weight:700; margin:0 0 10px; }
.txsvc-sidenav-contact .txsvc-tel{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; color:#1b3a5f; margin:0 0 12px; text-decoration:none; }
.txsvc-sidenav-contact .txsvc-tel svg{ width:16px; height:16px; color:#4f8fc0; }
.txsvc-sidenav-contact a.txsvc-cta-mini{ display:flex; align-items:center; justify-content:center; gap:6px; background:#1b3a5f; color:#fff; border-radius:50px; padding:10px; font-size:13.5px; font-weight:700; text-decoration:none; }

.txsvc-main{ flex:1; min-width:0; padding:32px 44px 56px; }
.txsvc-breadcrumb{ font-size:13px; color:#94a3b8; margin:0 0 22px; }
.txsvc-breadcrumb a{ color:#94a3b8; text-decoration:none; }
.txsvc-breadcrumb .sep{ margin:0 6px; }
.txsvc-breadcrumb .current{ color:#1b3a5f; font-weight:700; }

.txsvc-title-row{ display:flex; align-items:center; gap:36px; margin:0 0 44px; }
.txsvc-title-col{ flex:1; min-width:0; }
.txsvc-title-col h1{font-size:48px; font-weight:800;margin:0 0 30px;line-height:1.35}
/* v11: 제목 옆에 작게 들어가던 txsvc-hero-visual 사진을 뺐습니다(바로 아래 큰 사진 배너와
   중복돼 보인다는 피드백). 사진이 빠진 만큼 리드 문단 폭을 넓혀 여백이 붕 뜨지 않게 했습니다. */
.txsvc-hero-sub{ font-size:20px; color:#64748b; line-height:1.7; margin:0; }
.txsvc-quickpills{ display:flex; flex-wrap:wrap; gap:9px; margin:18px 0 0; }
.txsvc-quickpill{ display:inline-flex; align-items:center; gap:6px; background:#f5f8fb; border:1px solid #e5e9f0; border-radius:50px; padding:7px 14px; font-size:12.5px; font-weight:700; color:#475569; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.txsvc-quickpill:hover{ transform:translateY(-2px); box-shadow:0 8px 16px -8px rgba(27,58,95,.2); border-color:#c7d7e7; }
.txsvc-quickpill svg{ width:13px; height:13px; color:#4f8fc0; }

.txsvc-eyebrow-dot{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:700; color:#4f8fc0; margin:0 0 8px;letter-spacing:2px;}
.txsvc-eyebrow-dot::before{ content:''; width:7px; height:7px; border-radius:50%; background:#4f8fc0; flex-shrink:0; }

.txsvc-lede{font-size:17px;}

.txsvc-section{ margin:clamp(80px, 9vw, 140px) 0; }
.txsvc-section-label{ display:block; font-size:15px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:#4f8fc0; margin:0 0 8px; }
/* v14: 섹션 제목마다 style="font-size:...px"로 크기를 따로 주던 걸 없애고, 전부
   같은 크기(txsvc-section-title 기본값)로 통일했습니다. */
.txsvc-section-title{font-size:32px; font-weight:700;margin:0 0 24px; }

/* 치료의 효과: 아이콘+제목+설명 카드 3개. */
.txsvc-effect-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.txsvc-effect-card{ background:#fff; border:1px solid #e5e9f0; border-radius:18px; padding:26px 22px;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.txsvc-effect-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px -16px rgba(27,58,95,.28); border-color:#c7d7e7; }
.txsvc-effect-icon{ width:50px; height:50px; border-radius:50%; background:#eaf1f9; display:flex; align-items:center; justify-content:center; color:#4f8fc0; margin:0 0 16px; transition:transform .3s ease; }
.txsvc-effect-icon svg{ width:23px; height:23px; }
.txsvc-effect-card:hover .txsvc-effect-icon{ transform:scale(1.12) rotate(-6deg); }
.txsvc-effect-card h4{ font-size:17px; font-weight:800;margin:0 0 8px; }
.txsvc-effect-card p{ font-size:15px; color:#64748b; line-height:1.65; margin:0; }
/* v7: 카드 3개가 전부 같은 남색이라 단조로워 보인다는 피드백이 있어, 사이트에 이미 있는
   3가지 톤(블루/골드/그린)을 아이콘 배경에 순환시켜 화사하게 보이도록 했습니다. */
.txsvc-effect-icon--b{ background:rgba(221,143,40,.13); color:#dd8f28; }
.txsvc-effect-icon--c{ background:rgba(3,185,99,.13); color:#03b963; }

/* v10: 페이지 전체에 대표 사진 하나(txsvc-hero-visual)만 작게 들어가 있어서 허전하다는
   피드백을 받아, 실제 사진을 넣을 수 있는 가로 배너를 섹션 사이사이에 추가했습니다.
   각 tx_*.html.php에 2개씩 배치했고, 경로는 전부 placeholder라 실제 사진으로 교체가 필요합니다. */
.txsvc-photo-band{ margin:40px 0; border-radius:20px; overflow:hidden; position:relative; background:#eef3f8; }
.txsvc-photo-band img{ width:100%; height:320px; object-fit:cover; display:block; }
.txsvc-photo-band-caption{
  position:absolute; left:0; right:0; bottom:0; padding:22px 26px 18px;
  background:linear-gradient(0deg, rgba(14,35,56,.78) 0%, rgba(14,35,56,.35) 55%, transparent 100%);
  color:#fff; font-size:14.5px; font-weight:700; line-height:1.5;
}
@media (max-width:640px){
  .txsvc-photo-band img{ height:200px; }
  .txsvc-photo-band-caption{ font-size:13px; padding:16px 18px 14px; }
}

/* 자가 체크리스트: "이런 증상이 있다면 확인해보세요" 형태의 자가진단 박스. */
.txsvc-checklist{ background:#f5f8fb; border-radius:20px; padding:32px 36px; }
.txsvc-checklist-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 28px; margin:6px 0 0; }
.txsvc-checklist-item{ display:flex; align-items:center; gap:12px; font-size:15px; font-weight:700; color:#334155; }
.txsvc-checklist-check{ flex:0 0 auto; width:26px; height:26px; border-radius:8px; background:#fff; border:2px solid #4f8fc0; color:#4f8fc0; display:flex; align-items:center; justify-content:center; transition:background .22s ease, color .22s ease, transform .22s ease; }
.txsvc-checklist-check svg{ width:15px; height:15px; }
.txsvc-checklist-item:hover .txsvc-checklist-check{ background:#4f8fc0; color:#fff; transform:scale(1.1) rotate(-6deg); }
@media (max-width: 640px){
  .txsvc-checklist{ padding:24px 22px; }
  .txsvc-checklist-grid{ grid-template-columns:1fr; }
}

/* 자주 묻는 질문: 아코디언. 열고 닫힐 때 부드럽게 애니메이션되도록 JS로 높이를 제어합니다
   (네이티브 <details>는 닫힐 때 애니메이션이 끊겨서, 버튼+높이 트랜지션 방식으로 구현). */
.txsvc-faq{ display:flex; flex-direction:column; gap:12px; }
.txsvc-faq-item{ border:1px solid #e5e9f0; border-radius:14px; background:#fff; overflow:hidden; transition:box-shadow .25s ease, border-color .25s ease; }
.txsvc-faq-item.is-open{ border-color:#dbe7f3; box-shadow:0 14px 28px -18px rgba(27,58,95,.3); }
.txsvc-faq-q{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; width:100%; }
.txsvc-faq-q-text{ flex:1; font-size:15.5px; font-weight:700; color:#1b3a5f; }
.txsvc-faq-q-mark{ flex-shrink:0; width:26px; height:26px; border-radius:50%; background:#eaf1f9; color:#4f8fc0; display:flex; align-items:center; justify-content:center; margin-right:14px; font-weight:800; font-size:13px; }
.txsvc-faq-toggle{ flex-shrink:0; width:20px; height:20px; color:#94a3b8; transition:transform .3s ease; }
.txsvc-faq-item.is-open .txsvc-faq-toggle{ transform:rotate(45deg); }
.txsvc-faq-item.is-open .txsvc-faq-q{ border-bottom:1px solid #eef1f5; }
.txsvc-faq-a-wrap{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.txsvc-faq-a-inner{ padding:2px 22px 20px 62px; }
.txsvc-faq-a{ margin:0; font-size:14.5px; color:#64748b; line-height:1.75; }

/* 주요 적응증: 태그칩. */
.txsvc-tags{ display:flex; flex-wrap:wrap; gap:10px; }
.txsvc-tag{ background:#eaf1f9; color:#1b3a5f; font-size:15px; font-weight:700; padding:9px 16px; border-radius:50px; border:1px solid #dbe7f3;
  transition:background .22s ease, color .22s ease, border-color .22s ease, transform .22s ease; }
.txsvc-tag:hover{ background:#1b3a5f; color:#fff; border-color:#1b3a5f; transform:translateY(-2px); }

/* v11: 부위별로 그냥 나열만 하던 주요 적응증을, 몇 초마다 저절로 다음 부위로 넘어가는
   탭으로 바꿨습니다. 각 탭 아래 얇은 진행바가 차오르면서 다음 전환 시점을 보여주고,
   직접 클릭하면 그 자리에서 멈췄다가 다시 순환합니다. */
.txsvc-indtabs-nav{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; }
.txsvc-indtabs-tab{
  position:relative; overflow:hidden;
  padding:12px 20px 15px; border:1px solid #e5e9f0; border-radius:12px;
  background:#fff; cursor:pointer; font-size:14.5px; font-weight:700; color:#94a3b8;
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.txsvc-indtabs-tab:hover{ color:#2c6ca0; border-color:#c7d7e7; }
.txsvc-indtabs-tab.is-active{ color:#1b3a5f; border-color:#a9c5e0; background:#f2f7fc; }
.txsvc-indtabs-tab-label{ position:relative; z-index:1; }
.txsvc-indtabs-tab-progress{
  position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(44,108,160,.1);
}
.txsvc-indtabs-tab-progress-fill{ display:block; height:100%; width:0%; background:#2c6ca0; }
@keyframes txsvcIndtabFill{ from{ width:0%; } to{ width:100%; } }
.txsvc-indtabs-panels{ position:relative; }
.txsvc-indtabs-panel{ display:none; }
.txsvc-indtabs-panel.is-active{ display:block; animation:txsvcIndtabFade .4s ease; }
@keyframes txsvcIndtabFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width: 560px){
  .txsvc-indtabs-nav{ gap:8px; }
  .txsvc-indtabs-tab{ flex:1 1 calc(50% - 8px); padding:10px 14px 13px; font-size:13.5px; text-align:center; }
}
@media (prefers-reduced-motion: reduce){
  .txsvc-indtabs-panel.is-active{ animation:none; }
}

/* =====================================================================
   비수술치료 v6 — 주요 적응증: 가로 줄 목록 (.txsvc-indlist)
   부위 이름은 왼쪽에 크게, 질환은 오른쪽에 점 목록. 질환 수가 달라도 줄만 길어집니다.
   (예전 카드 쌓기 .txsvc-indstack, 사진+문장 .txsvc-photo-split 은 더 이상 쓰지 않습니다)
   ===================================================================== */
.txsvc-indlist{ border-top:2px solid #1b3a5f; }
.txsvc-indrow{ display:grid; grid-template-columns:260px minmax(0,1fr); align-items:center; gap:30px; padding:26px 8px; border-bottom:1px solid #e3ebf4; transition:background .3s, padding .3s, opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1); }
.txsvc-indrow:hover{ background:#f5f8fb; padding-left:20px; }
.txsvc-indrow-name{ display:flex; align-items:center; gap:16px; }
.txsvc-indrow-ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:16px; background:#eaf1f9; color:#1b3a5f; flex:none; transition:background .3s, color .3s; }
.txsvc-indrow-ico svg{ width:26px; height:26px; }
.txsvc-indrow:hover .txsvc-indrow-ico{ background:#1b3a5f; color:#fff; }
.txsvc-indrow-name small{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.1em; color:#94a3b8; }
.txsvc-indrow-name h4{ margin:2px 0 0; font-size:24px; font-weight:800; color:#0e2338; word-break:keep-all; }
.txsvc-indrow-list{ display:flex; flex-wrap:wrap; gap:6px 26px; margin:0; padding:0; list-style:none; }
.txsvc-indrow-list li{ position:relative; padding-left:14px; font-size:17px; font-weight:600; color:#334155; word-break:keep-all; }
.txsvc-indrow-list li::before{ content:""; position:absolute; left:0; top:50%; width:6px; height:6px; margin-top:-3px; border-radius:50%; background:#4f8fc0; }
@media (max-width:900px){
  .txsvc-indrow{ grid-template-columns:1fr; gap:14px; padding:22px 4px; }
  .txsvc-indrow:hover{ padding-left:4px; }
  .txsvc-indrow-ico{ width:44px; height:44px; border-radius:13px; }
  .txsvc-indrow-name h4{ font-size:20px; }
  .txsvc-indrow-list li{ font-size:15.5px; }
}

/* 진행 과정: 가로 진행 바 형태. 아이콘/컬러 블록 여러 버전을 시도하다가, bin님이
   "이 섹션 자체는 화려할 필요 없다"고 하셔서 타이포 + 라인 중심의 조용한 버전으로
   정리했습니다. 치료마다 단계 수가 3~4개로 달라 flex로 처리합니다. */
.txsvc-process-steps{ display:flex; gap:20px; }
.txsvc-process-step{ flex:1; min-width:0; text-align:center; }
.txsvc-process-step-num{ font-size:22px; font-weight:800; color:#2c6ca0; margin:0 0 8px; line-height:1; }
.txsvc-process-step-bar{ height:3px; background:#2c6ca0; border-radius:2px; margin:0 0 14px; }
.txsvc-process-step-text{ font-size:13.5px; font-weight:700; color:#334155; line-height:1.5; }
@media (max-width: 640px){
  .txsvc-process-steps{ flex-wrap:wrap; row-gap:24px; }
  .txsvc-process-step{ flex:0 0 calc(50% - 10px); }
}

/* 하단 CTA 바. */
.txsvc-ctabar{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; background:#eaf1f9; border-radius:20px; padding:28px 32px; margin:48px 0 0; }
.txsvc-ctabar-left{ display:flex; align-items:center; gap:16px; }
.txsvc-ctabar-icon{ width:48px; height:48px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; color:#1b3a5f; flex-shrink:0; }
.txsvc-ctabar-icon svg{ width:22px; height:22px; }
.txsvc-ctabar h3{ font-size:17px; font-weight:800;margin:0 0 4px; }
.txsvc-ctabar p{ font-size:13px; color:#64748b; margin:0; }
.txsvc-ctabar-btn{ display:inline-flex; align-items:center; gap:6px; background:#1b3a5f; color:#fff; border-radius:50px; padding:14px 24px; font-weight:700; font-size:14.5px; text-decoration:none; white-space:nowrap; transition:transform .22s ease, box-shadow .22s ease, gap .22s ease; }
.txsvc-ctabar-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 28px -10px rgba(27,58,95,.45); gap:10px; }

.txsvc-footer{ margin:28px 0 0; text-align:left; }
.txsvc-disclaimer{ font-size:12.5px; color:#94a3b8; margin:0 0 14px; line-height:1.6; }
.txsvc-back{ display:inline-flex; align-items:center; gap:6px; font-size:14px; color:#64748b; text-decoration:none; }
.txsvc-back:hover{ color:#1b3a5f; }

/* 모바일: 사이드바를 상단 가로 스크롤 탭으로, 히어로/CTA는 세로로 쌓습니다. */
@media (max-width: 900px){
  .txsvc-page{ flex-direction:column; }
  .txsvc-sidenav{ position:static; width:100%; border-right:none; border-bottom:1px solid #e5e9f0; padding:20px 20px 16px; }
  .txsvc-sidenav-list{ flex-direction:row; overflow-x:auto; gap:8px; margin:0 0 16px; padding-bottom:4px; }
  .txsvc-sidenav-link{ flex:0 0 auto; white-space:nowrap; }
  .txsvc-main{ padding:28px 20px 48px; }
  .txsvc-title-row{ text-align:center; }
  .txsvc-hero-sub{ margin:0 auto; }
  .txsvc-quickpills{ justify-content:center; }
  .txsvc-effect-grid{ grid-template-columns:1fr; }
  .txsvc-ctabar{ flex-direction:column; text-align:center; }
  .txsvc-ctabar-left{ flex-direction:column; }
}



@media (max-width:991px){
.main-section .nav-menu{ display:none; }
.main-section .side-card{ width:26vw; height:40vh; top:32%; font-size:14px; padding:14px;}
.main-section .hero-copy{ max-width:88%;bottom:calc(5% + 76px); }
.main-section .hero-cta{bottom:5%; }
.main-section .car-nav{ width:38px;height:38px; font-size:15px; }
.main-section .side-card.peek{ display:none; }

}

@media (max-width:991px){
  /* 메인 첫 화면 글·버튼이 아래 고정 바(플로팅 버튼)에 가려지지 않게 */
  .main-section .hero-cta{ bottom:calc(104px + env(safe-area-inset-bottom)); }
  .main-section .hero-copy{ bottom:calc(166px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   관절센터(sub0201) 레이아웃 개선 — .sctr-v2 범위 안에서만 적용
   (다른 센터 페이지에도 적용하려면 <div class="sub-section section03"> 에
    sctr-v2 클래스만 추가하면 됩니다.)
   ===================================================================== */

/* ③ 인트로 통계 칩 — 세 개 모두 같은 톤으로 통일 */
.sctr-v2 .sctr-hero-stats{ display:flex; gap:10px; flex-wrap:nowrap; }
.sctr-v2 .sctr-hero-stat,
.sctr-v2 .sctr-hero-stat:nth-child(1),
.sctr-v2 .sctr-hero-stat:nth-child(2),
.sctr-v2 .sctr-hero-stat:nth-child(3){
  flex:1 1 0; min-width:0; margin:0;
  padding:18px 18px 16px;
  background:#f5f8fb;
  border:1px solid #e3ecf5;
  border-top:3px solid #4f8fc0;
  border-radius:12px;
}
.sctr-v2 .sctr-hero-stat strong{ color:#1b3a5f; }
.sctr-v2 .sctr-hero-stat span{ color:#64748b; font-size:13px; }

/* ④ 증상 체크 패널 — 그림 칸이 패널 높이만큼 꽉 차도록 */
.sctr-v2 .sctr-activity-panel{ align-items:stretch; gap:40px; }
.sctr-v2 .sctr-activity-photo{
  position:relative; flex:0 0 40%; width:auto; margin:0;
  min-height:380px; border-radius:16px; overflow:hidden;
  background:linear-gradient(135deg,#eaf3fb,#dbe7f3);
}
.sctr-v2 .sctr-activity-photo img{
  position:absolute; inset:0; width:100%; height:100%; max-width:none;
  object-fit:cover; object-position:center; border-radius:0;
}
.sctr-v2 .sctr-activity-info{ flex:1 1 auto; width:auto; }

/* ① 치료 방법 — 비수술치료 페이지로 가는 링크 칩 */
.sctr-v2 .sctr-activity-treat-list{ display:flex; flex-wrap:wrap; gap:8px; }
.sctr-v2 .sctr-activity-treat-list li{ padding:0; font-size:15px; }
.sctr-v2 .sctr-activity-treat-list li::before{ display:none; }
.sctr-v2 .sctr-activity-treat-list li:not(:has(a)){
  padding:8px 14px; border-radius:50px; background:#f1f5f9; color:#64748b;
}
.sctr-v2 a.sctr-treat-link{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px 8px 16px; border-radius:50px;
  background:#eaf1f9; border:1px solid #cfe0ee;
  color:#1b3a5f; font-weight:700; text-decoration:none;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.sctr-v2 a.sctr-treat-link::after{ content:'→'; font-weight:700; transition:transform .18s ease; }
.sctr-v2 a.sctr-treat-link:hover{ background:#1b3a5f; border-color:#1b3a5f; color:#fff; }
.sctr-v2 a.sctr-treat-link:hover::after{ transform:translateX(3px); }

/* ② 대표 질환 — 인체도 + (부위 탭 / 카드) 두 칸 구성 */
.sctr-v2 .sctr-condition-layout{ align-items:flex-start; gap:40px; height:auto; }
.sctr-v2 .sctr-bodyfigure{ flex:0 0 auto; height:700px; }
.sctr-v2 .sctr-condition-side{ flex:1 1 auto; min-width:0; padding-top:24px; }
.sctr-v2 .sctr-legend{
  flex:none; width:100%;
  flex-direction:row; flex-wrap:wrap; gap:6px; margin:0 0 22px;
}
.sctr-v2 .sctr-legend-item{
  width:auto; gap:4px;
  padding:8px 13px; border-radius:50px;
  background:#f5f8fb; border:1px solid #e5e9f0;
}
.sctr-v2 .sctr-legend-item:hover{ background:#eaf1f9; }
.sctr-v2 .sctr-legend-item.is-active{ background:#1b3a5f; border-color:#1b3a5f; }
.sctr-v2 .sctr-legend-item.is-active .sctr-legend-label{ color:#fff; }
.sctr-v2 .sctr-legend-item.is-active .sctr-legend-count{ color:#9dc3e0; }

/* 인체도 점: 번호 대신 작은 점 + 부위 이름표 */
.sctr-v2 .sctr-figure-dot{ width:18px; height:18px; border-width:3px; }
.sctr-v2 .sctr-figure-dot::before{
  content:''; position:absolute; inset:-9px; border-radius:50%;
  border:2px solid rgba(79,143,192,.45); opacity:0; pointer-events:none;
}
.sctr-v2 .sctr-figure-dot.is-active::before{ animation:sctrDotPulse 1.8s ease-out infinite; }
@keyframes sctrDotPulse{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(1.5); opacity:0; } }
.sctr-v2 .sctr-figure-dot-label{
  position:absolute; top:50%; left:calc(100% + 10px); transform:translateY(-50%);
  white-space:nowrap; font-size:13px; font-weight:700; line-height:1;
  padding:6px 10px; border-radius:50px;
  background:#fff; color:#1b3a5f; box-shadow:0 4px 12px rgba(15,28,46,.14);
  transition:background .18s ease, color .18s ease;
}
.sctr-v2 .sctr-figure-dot--left .sctr-figure-dot-label{ left:auto; right:calc(100% + 10px); }
.sctr-v2 .sctr-figure-dot.is-active .sctr-figure-dot-label{ background:#1b3a5f; color:#fff; }

@media (max-width: 900px){
  .sctr-v2 .sctr-activity-panel{ flex-direction:column; gap:24px; padding:24px; }
  .sctr-v2 .sctr-activity-photo{ flex:none; width:100%; min-height:260px; }
  .sctr-v2 .sctr-condition-layout{ flex-direction:column; align-items:stretch; gap:8px; }
  .sctr-v2 .sctr-bodyfigure{ width:auto; height:460px; align-self:center; }
  .sctr-v2 .sctr-condition-side{ display:contents; }   /* 폰: 부위 버튼을 인체 그림 위로 올리려고 감싼 틀을 풀어줌 */
  .sctr-v2 .sctr-legend{ order:-1; margin-bottom:6px; }
  .sctr-v2 .sctr-legend{ display:flex; max-width:none; justify-content:center; }
  .sctr-v2 .sctr-condition-grid{ grid-template-columns:1fr; }
}
@media (max-width: 520px){
  .sctr-v2 .sctr-hero-stats{ gap:8px; }
  .sctr-v2 .sctr-hero-stat,
  .sctr-v2 .sctr-hero-stat:nth-child(1),
  .sctr-v2 .sctr-hero-stat:nth-child(2),
  .sctr-v2 .sctr-hero-stat:nth-child(3){ padding:14px 12px 12px; }
  .sctr-v2 .sctr-hero-stat strong{ font-size:17px; }
  .sctr-v2 .sctr-hero-stat span{ font-size:12.5px; }
  .sctr-v2 .sctr-activity-panel{ padding:20px 16px; }
  .sctr-v2 .sctr-activity-photo{ min-height:220px; }
  .sctr-v2 .sctr-bodyfigure{ height:380px; }
  .sctr-v2 .sctr-legend-item{ padding:8px 14px; }
}
.sctr-v2 .sctr-activity-info h3,
.sctr-v2 .sctr-activity-causes li,
.sctr-v2 .sctr-activity-symptom-box{ word-break:keep-all; }
.sctr-v2 .sctr-legend-label{ font-size:15px; }
.sctr-v2 .sctr-section-head h2,
.sctr-v2 .sctr-hero-text h2{ word-break:keep-all; }
@media (max-width: 560px){
  /* 모바일: 증상 탭이 세로 글씨로 찌그러지던 문제 → 3칸 그리드 */
  .sctr-v2 .sctr-activity-tabs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
  .sctr-v2 .sctr-activity-tab{ width:auto; padding:12px 4px; font-size:14px; writing-mode:horizontal-tb; }
  /* 모바일: 통계 칩은 한 줄씩 */
  .sctr-v2 .sctr-hero-stats{ flex-direction:column; }
  .sctr-v2 .sctr-hero-stat,
  .sctr-v2 .sctr-hero-stat:nth-child(1),
  .sctr-v2 .sctr-hero-stat:nth-child(2),
  .sctr-v2 .sctr-hero-stat:nth-child(3){
    display:flex; align-items:center; gap:12px;
    border-top-width:1px; border-left:3px solid #4f8fc0; padding:12px 14px;
  }
  .sctr-v2 .sctr-hero-stat strong{ margin:0; flex:0 0 auto; }
}

/* 수부·족부(sub0203): 손/발 두 장짜리 그림 — 높이 고정 대신 카드 두 장이 나란히 */
.sctr-v2 .sctr-bodyfigure-dual{ flex:1 1 55%; min-width:0; height:auto; }
.sctr-v2 .sctr-bodyfigure-dual .sctr-bodyfigure-card{ flex:1 1 240px !important; }
.sctr-v2 .sctr-bodyfigure-dual ~ .sctr-condition-side{ flex:1 1 45%; }
/* 점이 서로 가까울 때 이름표를 위/아래로 */
.sctr-v2 .sctr-figure-dot--top .sctr-figure-dot-label,
.sctr-v2 .sctr-figure-dot--bottom .sctr-figure-dot-label{ left:50%; right:auto; transform:translateX(-50%); }
.sctr-v2 .sctr-figure-dot--top .sctr-figure-dot-label{ top:auto; bottom:calc(100% + 8px); }
.sctr-v2 .sctr-figure-dot--bottom .sctr-figure-dot-label{ top:calc(100% + 8px); }
/* 류마티스(sub0204): 인체도 없는 카드형 — 기존 3/2/1칸 그리드 유지 */
@media (max-width: 900px){
  .sctr-v2 .sctr-bodyfigure-dual{ width:100%; height:auto; }
  .sctr-v2 .sctr-condition-layout--flat .sctr-condition-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 560px){
  .sctr-v2 .sctr-condition-layout--flat .sctr-condition-grid{ grid-template-columns:1fr; }
}

/* =====================================================================
   센터 치료 철학 — 가로로 흘러가는 카드 (.sctr-hz)
   세로 스크롤 동안 화면이 멈추고 카드가 옆으로 지나갑니다. 높이/이동 거리는
   각 센터 페이지 하단 스크립트가 계산합니다. 카드에 사진을 넣으면(inline
   background-image) 기본 그라데이션 대신 사진이 깔리고, 위에 어두운 막이 덮여
   글씨가 잘 보입니다.
   ===================================================================== */
.sctr-hz{ position:relative; background:#eaf1f9; }
.sctr-hz-sticky{
  position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:center;
}
.sctr-hz-track{ display:flex; align-items:center; gap:28px; padding:0 8vw; will-change:transform; }
.sctr-hz-intro{ flex:0 0 400px; display:flex; flex-direction:column; }
.sctr-hz-intro .sctr-section-head{ text-align:left; margin-bottom:24px; }
.sctr-hz-intro .sctr-section-head h2{ line-height:1.35; }
.sctr-hz-intro .sctr-section-head p.desc{ line-height:1.65; }
.sctr-hz-intro-img{ border-radius:18px; overflow:hidden; margin-bottom:24px; max-height:30vh; }
.sctr-hz-intro-img img{ display:block; width:100%; height:100%; max-height:30vh; object-fit:cover; }
.sctr-hz-hint{ display:inline-flex; align-items:center; gap:10px; font-size:13px; font-weight:800; letter-spacing:2px; color:#1b3a5f; }
.sctr-hz-hint i{ position:relative; display:inline-block; width:40px; height:2px; background:#1b3a5f; animation:sctrHzNudge 1.6s ease-in-out infinite; }
.sctr-hz-hint i::after{ content:''; position:absolute; right:0; top:-4px; width:9px; height:9px; border-top:2px solid #1b3a5f; border-right:2px solid #1b3a5f; transform:rotate(45deg); }
@keyframes sctrHzNudge{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(8px); } }

.sctr-hz-card{
  position:relative; flex:0 0 400px; height:min(62vh, 540px); min-height:400px;
  border-radius:26px; padding:34px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:space-between;
  background-size:cover; background-position:center;
  box-shadow:0 30px 60px -30px rgba(14,35,56,.55);
}
.sctr-hz-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(0deg, rgba(10,26,44,.55) 0%, rgba(10,26,44,.1) 60%, rgba(10,26,44,0) 100%);
}
.sctr-hz-card--1{ background-image:linear-gradient(150deg,#123456 0%,#1b3a5f 50%,#3a79b4 100%); }
.sctr-hz-card--2{ background-image:linear-gradient(150deg,#0f3b52 0%,#1d5f7e 55%,#4f9fc0 100%); }
.sctr-hz-card--3{ background-image:linear-gradient(150deg,#16294a 0%,#28508a 55%,#5b8fd6 100%); }
.sctr-hz-card--4{ background-image:linear-gradient(150deg,#0e3a3a 0%,#1b5f5a 55%,#3fae94 100%); }
.sctr-hz-ico{
  position:relative; z-index:1; width:60px; height:60px; border-radius:18px;
  background:rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center;
}
.sctr-hz-ico svg{ width:28px; height:28px; }
.sctr-hz-card-text{ position:relative; z-index:1; }
.sctr-hz-step{ display:block; font-size:15px; font-weight:700; letter-spacing:3px; color:rgba(255,255,255,.72); }
.sctr-hz-card h3{ font-size:34px; font-weight:800; letter-spacing:1px; color:#fff; margin:10px 0 12px; }
.sctr-hz-card p{ font-size:20px; line-height:1.55; color:rgba(255,255,255,.9); margin:0; }
.sctr-hz-num{
  position:absolute; right:-6px; bottom:-38px; z-index:0;
  font-size:210px; font-weight:900; line-height:1; letter-spacing:-8px;
  color:rgba(255,255,255,.08); pointer-events:none;
}
.sctr-hz-bar{ position:absolute; left:8vw; right:8vw; bottom:6vh; height:3px; border-radius:3px; background:rgba(27,58,95,.12); }
.sctr-hz-bar span{ display:block; width:0; height:100%; border-radius:3px; background:#1b3a5f; }

/* 모션 줄이기 설정 사용자: 멈춤 없이 일반 가로 스크롤 */
.sctr-hz.is-static .sctr-hz-sticky{ position:static; height:auto; padding:80px 0; overflow-x:auto; }
.sctr-hz.is-static .sctr-hz-bar{ display:none; }

@media (max-width: 991px){
  .sctr-hz-track{ gap:16px; padding:0 6vw; }
  .sctr-hz-intro{ flex:0 0 80vw; }
  .sctr-hz-intro .sctr-section-head h2{ font-size:26px; }
  .sctr-hz-intro .sctr-section-head p.desc{ font-size:15px; }
  .sctr-hz-intro-img, .sctr-hz-intro-img img{ max-height:22vh; }
  .sctr-hz-card{ flex:0 0 78vw; height:56vh; min-height:340px; padding:26px; }
  .sctr-hz-card h3{ font-size:28px; }
  .sctr-hz-card p{ font-size:17px; }
  .sctr-hz-num{ font-size:150px; bottom:-26px; }
}
@media (max-width: 520px){
  .sctr-hz-intro .sctr-section-head h2{ font-size:24px; }
  .sctr-hz-card h3{ font-size:24px; }
  .sctr-hz-card p{ font-size:15px; }
  .sctr-hz-num{ font-size:110px; bottom:-18px; }
}
/* 휴대폰: 화면을 멈추는 방식(100vh) 대신 손가락으로 넘기는 가로 스크롤 — 각 센터 페이지 스크립트가 is-static을 붙임 */
@media (max-width: 767px){
  .sctr-hz.is-static .sctr-hz-sticky{ padding:48px 0; scroll-snap-type:x mandatory; scroll-padding-left:6vw; scrollbar-width:none; }
  .sctr-hz.is-static .sctr-hz-sticky::-webkit-scrollbar{ display:none; }
  .sctr-hz.is-static .sctr-hz-intro,
  .sctr-hz.is-static .sctr-hz-card{ scroll-snap-align:start; }
  .sctr-hz.is-static .sctr-hz-card{ height:auto; min-height:300px; }
}

/* =====================================================================
   이럴 때 아프신가요? — 세로 폴더 탭 (.sctr-activity-layout--folder)
   왼쪽 목록에서 고른 탭이 오른쪽 패널과 이어진 폴더처럼 보입니다.
   탭/패널 전환 자체는 tail.sub.html.php 엔진이 그대로 처리합니다.
   ===================================================================== */
.sctr-activity-layout--folder{ flex-direction:row; align-items:stretch; gap:0; }
.sctr-activity-layout--folder .sctr-activity-tabs{
  flex:0 0 230px; display:flex; flex-direction:column; gap:6px; padding:30px 0;
}
.sctr-activity-layout--folder .sctr-activity-tab{
  position:relative; display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:18px 22px; text-align:left;
  border:none; border-radius:16px 0 0 16px; background:transparent; box-shadow:none;
  font-size:17px; font-weight:700; color:#64748b;
  transition:background .25s ease, color .25s ease;
}
.sctr-activity-layout--folder .sctr-activity-tab::after{
  content:'→'; color:#4f8fc0; opacity:0; transform:translateX(-6px); transition:opacity .25s ease, transform .25s ease;
}
.sctr-activity-layout--folder .sctr-activity-tab:hover{ background:rgba(255,255,255,.55); color:#1b3a5f; border-color:transparent; }
.sctr-activity-layout--folder .sctr-activity-tab.is-active{
  background:#fff; color:#1b3a5f; box-shadow:-12px 12px 30px -20px rgba(15,23,42,.3);
}
.sctr-activity-layout--folder .sctr-activity-tab.is-active::before{
  content:''; position:absolute; left:0; top:16px; bottom:16px; width:4px; border-radius:4px; background:#1b3a5f;
}
.sctr-activity-layout--folder .sctr-activity-tab.is-active::after{ opacity:1; transform:none; }
.sctr-activity-layout--folder .sctr-activity-panel{ flex:1 1 auto; min-width:0; }
/* 탭을 바꿀 때 내용이 부드럽게 떠오르며 바뀝니다 (엔진이 내용을 새로 그릴 때마다 재생) */
.sctr-activity-layout--folder .sctr-activity-panel > *{ animation:sctrPanelIn .5s cubic-bezier(.2,.7,.2,1) both; }
.sctr-activity-layout--folder .sctr-activity-panel > .sctr-activity-info{ animation-delay:.06s; }
@keyframes sctrPanelIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (max-width: 1500px){
  .sctr-activity-layout--folder .sctr-activity-panel .sctr-activity-photo{ flex-basis:34%; }
  .sctr-activity-layout--folder .sctr-activity-symptom-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width: 900px){
  .sctr-activity-layout--folder{ flex-direction:column; }
  .sctr-activity-layout--folder .sctr-activity-tabs,
  .sctr-v2 .sctr-activity-layout--folder .sctr-activity-tabs{
    flex:none; display:flex; flex-direction:row; gap:4px; padding:0 44px 0 0; overflow-x:auto; scrollbar-width:none;
  }
  .sctr-activity-layout--folder .sctr-activity-tabs::-webkit-scrollbar{ display:none; }
  .sctr-activity-layout--folder .sctr-activity-tab,
  .sctr-v2 .sctr-activity-layout--folder .sctr-activity-tab{
    flex:0 0 auto; width:auto; padding:14px 18px; font-size:15px; white-space:nowrap; border-radius:14px 14px 0 0;
  }
  .sctr-activity-layout--folder .sctr-activity-tab::after,
  .sctr-activity-layout--folder .sctr-activity-tab.is-active::before{ display:none; }
  .sctr-activity-layout--folder .sctr-activity-panel{ border-radius:0 0 20px 20px; }
    /* 탭이 옆으로 더 있다는 표시 — 오른쪽 ›가 움직이고, 끝까지 넘기면(is-tabs-end) 왼쪽 ‹로 바뀜 */
  .sctr-activity-layout--folder{ position:relative; }
  .sctr-activity-layout--folder::before,
  .sctr-activity-layout--folder::after{
    position:absolute; top:0; z-index:2; width:56px; height:49px; display:flex; align-items:center;
    font-size:26px; font-weight:700; line-height:1; color:#1b3a5f; pointer-events:none; transition:opacity .25s ease;
  }
  .sctr-activity-layout--folder::after{
    content:'›'; right:0; justify-content:flex-end; padding-right:8px;
    background:linear-gradient(90deg, rgba(234,241,249,0), #eaf1f9 55%);
    animation:sctrTabNudgeR 1.2s ease-in-out infinite;
  }
  .sctr-activity-layout--folder::before{
    content:'‹'; left:0; justify-content:flex-start; padding-left:8px; opacity:0;
    background:linear-gradient(270deg, rgba(234,241,249,0), #eaf1f9 55%);
    animation:sctrTabNudgeL 1.2s ease-in-out infinite;
  }
  .sctr-activity-layout--folder.is-tabs-end::after{ opacity:0; }
  .sctr-activity-layout--folder.is-tabs-end::before{ opacity:1; }
  @keyframes sctrTabNudgeR{ 0%,100%{ padding-right:8px; } 50%{ padding-right:1px; } }
  @keyframes sctrTabNudgeL{ 0%,100%{ padding-left:8px; } 50%{ padding-left:1px; } }
  @media (prefers-reduced-motion: reduce){
    .sctr-activity-layout--folder::before,
    .sctr-activity-layout--folder::after{ animation:none; }
  }
}

/* =====================================================================
   대표 질환 — 인체도 확대(줌) (.sctr-zoom)
   부위를 고르면 인체도가 그 관절로 확대·이동합니다(각 센터 페이지 하단 스크립트).
   점과 이름표는 확대돼도 원래 크기로 보이도록 반대로 축소합니다.
   ===================================================================== */
.sctr-v2 .sctr-zoom{
  position:relative; flex:0 0 460px; width:460px; height:700px; overflow:hidden;
  border-radius:26px; background:radial-gradient(circle at 50% 40%, #ffffff 0%, #eef3f9 72%);
  box-shadow:inset 0 0 0 1px #e5ecf4;
}
.sctr-zoom-fig{ position:absolute; top:0; left:0; height:100%; transform-origin:0 0; transition:transform 1s cubic-bezier(.65,0,.35,1); }
.sctr-zoom-fig img{ display:block; height:100%; width:auto; }
.sctr-v2 .sctr-zoom .sctr-figure-dot{
  --dz:1; transform:translate(-50%,-50%) scale(var(--dz));
  transition:transform 1s cubic-bezier(.65,0,.35,1), opacity .4s ease, background .18s ease;
}
.sctr-v2 .sctr-zoom .sctr-figure-dot:hover{ transform:translate(-50%,-50%) scale(calc(var(--dz) * 1.1)); }
.sctr-v2 .sctr-zoom.is-zoomed .sctr-figure-dot{ --dz:var(--dz-z, .476); }
.sctr-v2 .sctr-zoom.is-zoomed .sctr-figure-dot:not(.is-active){ opacity:.45; }
.sctr-zoom-reset{
  position:absolute; top:18px; right:18px; z-index:3;
  padding:8px 15px; border:none; border-radius:50px; background:#fff; cursor:pointer;
  font-family:inherit; font-size:13px; font-weight:700; color:#1b3a5f;
  box-shadow:0 6px 16px rgba(15,23,42,.1); opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.sctr-zoom.is-zoomed .sctr-zoom-reset{ opacity:1; pointer-events:auto; }
.sctr-zoom-cap{ position:absolute; left:26px; bottom:24px; z-index:3; pointer-events:none; opacity:0; transition:opacity .3s ease; }
.sctr-zoom.is-zoomed .sctr-zoom-cap{ opacity:1; }
.sctr-zoom-cap small{ display:block; font-size:13px; font-weight:700; letter-spacing:2px; color:#4f8fc0; margin-bottom:2px; }
.sctr-zoom-cap strong{ font-size:40px; font-weight:800; color:#1b3a5f; }

/* 부위 탭 안의 작은 부위 그림 — 인체도 사진에서 해당 관절만 확대해 잘라 보여줍니다 */
.sctr-legend-thumb{
  --t:30px; display:block; flex:none; width:var(--t); height:var(--t); border-radius:50%;
  background-color:#fff; background-image:var(--fig); background-repeat:no-repeat;
  background-size:calc(var(--t) * 3) calc(var(--t) * 4.5);
  background-position:calc(var(--t) * .5 - var(--x) * var(--t) * 3) calc(var(--t) * .5 - var(--y) * var(--t) * 4.5);
}
.sctr-v2 .sctr-legend--thumbs .sctr-legend-item{ gap:8px; padding:5px 15px 5px 5px; }

/* 카드가 차례로 떠오르기 */
.sctr-condition-card.is-in{ animation:sctrCardIn .55s cubic-bezier(.2,.7,.2,1) both; }
@keyframes sctrCardIn{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

@media (max-width: 900px){
  .sctr-v2 .sctr-zoom{ flex:none; width:100%; height:440px; align-self:stretch; }
}
@media (max-width: 520px){
  .sctr-v2 .sctr-zoom{ height:400px; }
  .sctr-zoom-cap strong{ font-size:22px; }
}
@media (prefers-reduced-motion: reduce){
  .sctr-zoom-fig, .sctr-v2 .sctr-zoom .sctr-figure-dot{ transition:none; }
  .sctr-condition-card.is-in, .sctr-activity-layout--folder .sctr-activity-panel > *{ animation:none; }
}

/* 수부·족부(sub0203): 손·발 카드 안의 정사각형 그림도 같은 방식으로 확대됩니다 */
.sctr-v2 .sctr-zoom.sctr-zoom--card{
  flex:none; position:relative; width:100%; max-width:320px; height:auto; aspect-ratio:1/1; margin:0 auto;
  border-radius:14px; background:transparent; box-shadow:none;
}
.sctr-zoom--card .sctr-zoom-fig{ width:100%; height:100%; }
.sctr-zoom--card .sctr-zoom-reset{ top:8px; right:8px; padding:6px 11px; font-size:12px; }

/* =====================================================================
   비수술치료 v3 — 섹션마다 배치를 달리해 리듬을 줍니다
   인트로(핵심 정보 3칸) → 큰 사진 → 자가 체크(2단+원형 게이지) → 효과(남색 패널)
   → 적응증(카드 쌓기) → 사진 카드 → 진행 과정(가운데 정렬) → FAQ(2단) → 큰 예약 배너
   ===================================================================== */
/* 인트로: 치료 시간·마취·권장 주기를 큰 사진 아래쪽에 반투명 유리 칩으로 */
.txsvc-photo-band--facts img{ height:420px; }
.txsvc-photo-band--facts .txsvc-photo-band-caption{ padding:120px 28px 96px; font-size:16px; }
.txsvc-band-facts{ position:absolute; left:26px; right:26px; bottom:24px; z-index:2; display:flex; flex-wrap:wrap; gap:10px; }
.txsvc-band-fact{
  display:flex; align-items:center; gap:10px; padding:12px 18px; border-radius:16px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); color:#fff;
}
.txsvc-band-fact svg{ width:18px; height:18px; flex:none; color:#fff; opacity:.9; }
.txsvc-band-fact span{ font-size:13px; font-weight:600; color:rgba(255,255,255,.8); }
.txsvc-band-fact strong{ font-size:16.5px; font-weight:800; color:#fff; }
@media (max-width: 640px){
  /* 모바일: 사진은 위에 그대로, 치료 정보 3개는 사진 아래 3칸으로 */
  .txsvc-photo-band--facts{ background:#fff; border:1px solid #e3ebf4; }
  .txsvc-photo-band--facts img{ height:230px; }
  .txsvc-photo-band--facts .txsvc-photo-band-caption{ bottom:auto; top:0; height:230px; display:flex; align-items:flex-end; padding:0 18px 16px; font-size:14px; }
  .txsvc-band-facts{ position:relative; left:auto; right:auto; bottom:auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; padding:10px; background:#fff; }
  .txsvc-band-fact{ flex-direction:column; justify-content:flex-start; gap:4px; padding:14px 6px 12px; border-radius:14px; text-align:center; background:#f3f7fb; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .txsvc-band-fact svg{ width:20px; height:20px; color:#4f8fc0; opacity:1; }
  .txsvc-band-fact span{ font-size:12px; color:#64748b; }
  .txsvc-band-fact strong{ font-size:14px; line-height:1.35; color:#0e2338; word-break:keep-all; text-wrap:balance; }
}

/* 자가 체크: 한 장의 패널 — 위에 제목과 결과(원형 게이지), 아래에 눌러서 고르는 타일 */
.txsvc-selfcheck{ background:#eef4fa; border-radius:28px; padding:48px 48px 44px; }
.txsvc-selfcheck-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:30px; }
.txsvc-selfcheck-intro{ max-width:560px; }
.txsvc-selfcheck-intro .txsvc-section-title{ margin-bottom:10px; }
.txsvc-selfcheck-desc{ font-size:16px; line-height:1.7; color:#64748b; margin:0; }
.txsvc-selfcheck .txsvc-checklist{ background:none; padding:0; border-radius:0; }
.txsvc-selfcheck .txsvc-checklist-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:0; }

.txsvc-checklist-item{
  position:relative; width:100%; text-align:left; font-family:inherit; cursor:pointer;
  background:#fff; border:1.5px solid transparent; border-radius:14px; padding:14px 18px;
  line-height:1.5; box-shadow:0 4px 14px -10px rgba(15,23,42,.25);
  transition:border-color .2s ease, background .25s ease, color .25s ease, transform .2s ease, box-shadow .2s ease;
}
.txsvc-selfcheck .txsvc-checklist-item{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:22px;
  min-height:150px; padding:22px 22px 24px; border-radius:20px; font-size:16.5px; font-weight:700; color:#1e293b;
}
.txsvc-checklist-item:hover{ border-color:#c7d7e7; transform:translateY(-4px); box-shadow:0 16px 30px -18px rgba(15,35,60,.35); }
.txsvc-checklist-no{ position:absolute; right:20px; top:20px; font-size:13px; font-weight:800; letter-spacing:1px; color:#c3d3e3; transition:color .25s ease; }
.txsvc-checklist-item .txsvc-checklist-check svg{ opacity:0; transform:scale(.4); transition:opacity .2s ease, transform .25s cubic-bezier(.3,1.6,.5,1); }
.txsvc-checklist-item:hover .txsvc-checklist-check{ background:#fff; color:#4f8fc0; transform:none; }
.txsvc-checklist-item.is-checked{ border-color:#1b3a5f; background:#f4f8fd; color:#1b3a5f; }
.txsvc-checklist-item.is-checked .txsvc-checklist-check,
.txsvc-checklist-item.is-checked:hover .txsvc-checklist-check{ background:#1b3a5f; border-color:#1b3a5f; color:#fff; }
.txsvc-checklist-item.is-checked .txsvc-checklist-check svg{ opacity:1; transform:none; }
/* 타일은 체크하면 남색으로 채워집니다 */
.txsvc-selfcheck .txsvc-checklist-item.is-checked{ background:#1b3a5f; border-color:#1b3a5f; color:#fff; box-shadow:0 18px 32px -18px rgba(27,58,95,.7); }
.txsvc-selfcheck .txsvc-checklist-item.is-checked .txsvc-checklist-check,
.txsvc-selfcheck .txsvc-checklist-item.is-checked:hover .txsvc-checklist-check{ background:#fff; border-color:#fff; color:#1b3a5f; }
.txsvc-selfcheck .txsvc-checklist-item.is-checked .txsvc-checklist-no{ color:rgba(255,255,255,.45); }

/* 결과: 흰 카드 안의 원형 게이지 */
.txsvc-checkresult{ display:flex; align-items:center; gap:18px; }
.txsvc-selfcheck .txsvc-checkresult{ flex:none; background:#fff; border-radius:22px; padding:16px 24px 16px 16px; box-shadow:0 12px 30px -20px rgba(15,35,60,.35); }
.txsvc-ring{ position:relative; flex:none; width:96px; height:96px; }
.txsvc-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.txsvc-ring circle{ fill:none; stroke-width:10; }
.txsvc-ring-bg{ stroke:#e3ebf4; }
.txsvc-ring-fg{ stroke:#1b3a5f; stroke-linecap:round; transition:stroke-dashoffset .6s cubic-bezier(.2,.7,.2,1); }
.txsvc-ring-label{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:3px; }
.txsvc-ring-num{ font-size:30px; font-weight:800; line-height:1; color:#1b3a5f; }
.txsvc-ring-label span{ font-size:14px; font-weight:700; color:#94a3b8; margin-top:6px; }
.txsvc-checkresult-body{ width:230px; }
.txsvc-checkresult-text{ margin:0 0 10px; font-size:15px; font-weight:700; line-height:1.55; color:#475569; }
.txsvc-checkresult.is-on .txsvc-checkresult-text{ color:#1b3a5f; }
.txsvc-checkresult-btn{
  display:inline-flex; align-items:center; gap:6px; padding:10px 18px; border-radius:50px;
  background:#1b3a5f; color:#fff; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap;
  opacity:.35; pointer-events:none; transition:opacity .35s ease, box-shadow .2s ease;
}
.txsvc-checkresult.is-on .txsvc-checkresult-btn{ opacity:1; pointer-events:auto; }
.txsvc-checkresult-btn:hover{ color:#fff; box-shadow:0 12px 24px -10px rgba(27,58,95,.5); }
@media (max-width: 1100px){
  .txsvc-selfcheck-head{ flex-direction:column; align-items:stretch; }
  .txsvc-selfcheck .txsvc-checklist-grid{ grid-template-columns:repeat(2, 1fr); }
  .txsvc-checkresult-body{ width:auto; flex:1; }
}
@media (max-width: 640px){
  .txsvc-selfcheck{ padding:30px 18px 22px; border-radius:22px; }
  .txsvc-selfcheck .txsvc-checklist-grid{ grid-template-columns:1fr; gap:10px; }
  .txsvc-selfcheck .txsvc-checklist-item{ flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; min-height:0; padding:16px 44px 16px 16px; font-size:15px; }
  .txsvc-checklist-no{ top:50%; transform:translateY(-50%); right:16px; }
  .txsvc-ring{ width:80px; height:80px; } .txsvc-ring-num{ font-size:26px; }
}

/* 치료의 효과: 남색 패널 */
.txsvc-section--dark{
  position:relative; overflow:hidden; border-radius:28px; padding:56px 48px 52px;
  background:linear-gradient(135deg,#0e2338 0%,#1b3a5f 55%,#2b6ca8 100%);
}
.txsvc-section--dark::after{
  content:''; position:absolute; right:-120px; top:-120px; width:360px; height:360px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%); pointer-events:none;
}
.txsvc-section--dark .txsvc-eyebrow-dot{ color:#9dc3e0; }
.txsvc-section--dark .txsvc-eyebrow-dot::before{ background:#9dc3e0; }
.txsvc-section--dark .txsvc-section-title{ color:#fff; margin-bottom:32px; }
.txsvc-section--dark .txsvc-effect-card{ position:relative; overflow:hidden; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); padding:30px 26px 34px; }
.txsvc-section--dark .txsvc-effect-card:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); box-shadow:0 20px 40px -20px rgba(0,0,0,.45); }
.txsvc-section--dark .txsvc-effect-icon,
.txsvc-section--dark .txsvc-effect-icon--b,
.txsvc-section--dark .txsvc-effect-icon--c{ background:rgba(255,255,255,.14); color:#fff; }
.txsvc-section--dark .txsvc-effect-card h4{ color:#fff; font-size:19px; }
.txsvc-section--dark .txsvc-effect-card p{ color:rgba(255,255,255,.78); }
.txsvc-effect-num{ position:absolute; right:18px; top:14px; font-size:54px; font-weight:900; line-height:1; letter-spacing:-2px; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.28); }

/* 사진 움직임: 액자 밖으로 넘치지 않게 */
.txsvc-photo-band img{ will-change:transform; }

/* 진행 과정: 가운데 정렬 + 도착하면 바가 순서대로 차오름 */
.txsvc-section--center{ text-align:center; }
.txsvc-section--center .txsvc-lede{ max-width:680px; margin:0 auto 36px; }
.txsvc-section--center .txsvc-process-step-num{ font-size:30px; margin-bottom:12px; }
.txsvc-section--center .txsvc-process-step-text{ font-size:17px; }
.txsvc-process-step-bar{ position:relative; background:#dfe8f2; }
.txsvc-process-step-bar::after{
  content:''; position:absolute; inset:0; border-radius:2px; background:#2c6ca0;
  transform:scaleX(0); transform-origin:left center; transition:transform .6s cubic-bezier(.65,0,.35,1);
}
.txsvc-process-step.is-visible .txsvc-process-step-bar::after{ transform:scaleX(1); }
.txsvc-process-step:nth-child(1) .txsvc-process-step-bar::after{ transition-delay:.15s; }
.txsvc-process-step:nth-child(2) .txsvc-process-step-bar::after{ transition-delay:.7s; }
.txsvc-process-step:nth-child(3) .txsvc-process-step-bar::after{ transition-delay:1.25s; }
.txsvc-process-step:nth-child(4) .txsvc-process-step-bar::after{ transition-delay:1.8s; }

/* FAQ: 2단 */
.txsvc-faqwrap{padding:clamp(64px, 7vw, 100px) 0; background:#f5f8fb; box-shadow:0 0 0 100vmax #f5f8fb; clip-path:inset(0 -100vmax);display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr); gap:40px; align-items:start; }
.txsvc-faqwrap-side .txsvc-section-title{ margin-bottom:14px; }
.txsvc-faqwrap-desc{ font-size:16px; line-height:1.7; color:#64748b; margin:0; }

/* 큰 예약 배너 */
.txsvc-ctabanner{ position:relative; overflow:hidden; border-radius:28px; min-height:320px; margin:56px 0 0; display:flex; align-items:center; background:linear-gradient(100deg, #0e2338 0%, #1b3a5f 55%, #2b6ca8 100%); }
/* .txsvc-ctabanner-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform; }
.txsvc-ctabanner::after{ content:''; position:absolute; inset:0; background:linear-gradient(100deg, rgba(14,35,56,.94) 0%, rgba(27,58,95,.85) 55%, rgba(43,108,168,.55) 100%); } */
.txsvc-ctabanner-inner{ position:relative; z-index:1; padding:56px 52px; max-width:620px; }
.txsvc-ctabanner-eyebrow{ font-size:14px; font-weight:700; letter-spacing:3px; color:#9dc3e0; margin:0 0 12px; }
.txsvc-ctabanner h3{ font-size:30px; font-weight:800; line-height:1.4; color:#fff; margin:0 0 12px; }
.txsvc-ctabanner p{ font-size:16px; line-height:1.7; color:rgba(255,255,255,.82); margin:0 0 28px; }
.txsvc-ctabanner-btn{ display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:50px; background:#fff; color:#1b3a5f; font-size:15px; font-weight:800; text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.txsvc-ctabanner-btn:hover{ color:#1b3a5f; transform:translateY(-3px); box-shadow:0 16px 30px -12px rgba(0,0,0,.45); }

@media (max-width: 1100px){
  .txsvc-faqwrap{ grid-template-columns:1fr; gap:24px; }
}
@media (max-width: 900px){
  .txsvc-section--dark{ padding:40px 22px 36px; border-radius:22px; }
  .txsvc-section--dark .txsvc-section-title{ margin-bottom:22px; }
  .txsvc-ctabanner{ min-height:0; border-radius:22px; }
  .txsvc-ctabanner-inner{ padding:40px 26px; }
  .txsvc-ctabanner h3{ font-size:23px; }
}
@media (prefers-reduced-motion: reduce){
  .txsvc-process-step-bar::after{ transition:none; transform:none; }
}

/* =====================================================================
   비수술치료 v3 — 왼쪽 메뉴 대신 위쪽 떠 있는 탭 줄 + 페이지 끝 "다른 비수술치료" 카드
   본문이 센터 페이지처럼 넓어집니다.
   탭 줄이 스크롤해도 따라오는 위치(--txsvc-tabbar-top)는 상단 헤더 높이에 맞춰 조절하세요.
   ===================================================================== */
.txsvc-page--wide{ display:block; --txsvc-tabbar-top:100px; }   /* 헤더 높이(100px)와 같게 */
.txsvc-page--wide .txsvc-main{ padding:28px 0 64px; }
.txsvc-tabbar{ position:sticky; top:var(--txsvc-tabbar-top); z-index:50; display:flex; justify-content:center; padding:10px 0; transition:top .3s ease; pointer-events:none; }
body:has(#navBar.nav-hidden) .txsvc-tabbar{ top:14px; }
.txsvc-tabbar-inner{
  pointer-events:auto; display:inline-flex; align-items:center; gap:4px; max-width:100%;
  padding:6px; border-radius:999px; overflow-x:auto; scrollbar-width:none;
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid #e3ebf4; box-shadow:0 14px 34px -18px rgba(15,35,60,.35);
}
.txsvc-tabbar-inner::-webkit-scrollbar{ display:none; }
.txsvc-tabbar-title{ flex:none; padding:0 12px 0 14px; font-size:12.5px; font-weight:800; letter-spacing:1px; color:#94a3b8; border-right:1px solid #e3ebf4; margin-right:4px; }
.txsvc-tab{
  flex:none; padding:10px 17px; border-radius:999px; white-space:nowrap;
  font-size:14.5px; font-weight:700; color:#475569; text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.txsvc-tab:hover{ background:#eef3f9; color:#1b3a5f; }
.txsvc-tab.is-active, .txsvc-tab.is-active:hover{ background:#1b3a5f; color:#fff; box-shadow:0 8px 18px -8px rgba(27,58,95,.6); }

.txsvc-more{ margin:64px 0 0; }
.txsvc-more-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
.txsvc-more-card{
  position:relative; display:flex; flex-direction:column; gap:10px; padding:26px 24px 50px;
  border-radius:20px; background:#f5f8fb; border:1px solid transparent; text-decoration:none;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.txsvc-more-card:hover{ transform:translateY(-5px); background:#fff; border-color:#dbe7f3; box-shadow:0 20px 38px -22px rgba(15,35,60,.35); }
.txsvc-more-ico{ width:46px; height:46px; border-radius:14px; background:#fff; color:#4f8fc0; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px -8px rgba(15,35,60,.3); }
.txsvc-more-ico svg{ width:22px; height:22px; }
.txsvc-more-card strong{ font-size:18px; font-weight:800; color:#1b3a5f; }
.txsvc-more-card p{ margin:0; font-size:14.5px; line-height:1.6; color:#64748b; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.txsvc-more-go{ position:absolute; right:22px; bottom:18px; font-size:18px; font-weight:800; color:#4f8fc0; transition:transform .25s ease; }
.txsvc-more-card:hover .txsvc-more-go{ transform:translateX(5px); }
.txsvc-more-card:hover .txsvc-more-ico{ background:#1b3a5f; color:#fff; }

@media (max-width: 1600px){
  .txsvc-tabbar-title{ display:none; }
  .txsvc-tab{ padding:10px 14px; font-size:14px; }
}
@media (max-width: 900px){
  .txsvc-page--wide{ --txsvc-tabbar-top:72px; }
  .txsvc-tabbar{ justify-content:flex-start; }
  .txsvc-tabbar-inner{ border-radius:16px; }
  /* 탭 줄: 옆에 탭이 더 있으면 화살표가 까딱이며 알려줌, 끝까지 가면 반대쪽 화살표 */
  .txsvc-tabbar::before, .txsvc-tabbar::after{ position:absolute; top:11px; bottom:11px; z-index:2; width:46px; display:flex; align-items:center; font-size:24px; font-weight:700; line-height:1; color:#1b3a5f; pointer-events:none; opacity:0; transition:opacity .25s ease; }
  .txsvc-tabbar::after{ content:'›'; right:1px; justify-content:flex-end; padding-right:9px; border-radius:0 15px 15px 0; background:linear-gradient(90deg, rgba(255,255,255,0), #fff 60%); animation:sctrTabNudgeR 1.2s ease-in-out infinite; }
  .txsvc-tabbar::before{ content:'‹'; left:1px; justify-content:flex-start; padding-left:9px; border-radius:15px 0 0 15px; background:linear-gradient(270deg, rgba(255,255,255,0), #fff 60%); animation:sctrTabNudgeL 1.2s ease-in-out infinite; }
  .txsvc-tabbar.has-more:not(.is-end)::after, .txsvc-tabbar.has-more:not(.is-start)::before{ opacity:1; }
  .txsvc-tabbar-title{ display:none; }
  .txsvc-page--wide .txsvc-main{ padding:18px 0 48px; }
  .txsvc-more-grid{ grid-template-columns:1fr; }
}

/* =====================================================================
   비수술치료 v4 — "네모 반복" 줄이기
   사진·카드 쌓기·예약 배너만 네모로 두고, 나머지는 박스 없이 선과 글자,
   알약 모양, 화면 끝까지 이어지는 띠로 바꿔 모양에 변화를 줍니다.
   ===================================================================== */
/* 1) 자가 체크: 패널/타일 없이 — 가운데 정렬 + 알약 모양 선택지 + 아래 결과 */
.txsvc-selfcheck{padding:clamp(64px, 7vw, 100px) 0; background:#f5f8fb; box-shadow:0 0 0 100vmax #f5f8fb; clip-path:inset(0 -100vmax);border-radius:0;display:flex; flex-direction:column; align-items:center; text-align:center; }
.txsvc-selfcheck-head{ display:contents; }
.txsvc-selfcheck-intro{ order:1; max-width:640px; margin:0 auto 30px; }
.txsvc-selfcheck-intro .txsvc-eyebrow-dot{ justify-content:center; }
.txsvc-selfcheck .txsvc-checklist{ order:2; width:100%; }
.txsvc-selfcheck .txsvc-checkresult{ order:3; background:none; box-shadow:none; padding:0; margin-top:34px; text-align:left; }
.txsvc-selfcheck .txsvc-checklist-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:980px; margin:0 auto; }
.txsvc-selfcheck .txsvc-checklist-item{
  width:auto; min-height:0; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px;
  padding:13px 24px 13px 14px; border-radius:999px; border:1.5px solid #d5e1ee; background:#fff;
  box-shadow:none; font-size:16px; font-weight:700;
}
.txsvc-selfcheck .txsvc-checklist-item:hover{ transform:translateY(-3px); border-color:#9dc3e0; box-shadow:0 12px 24px -16px rgba(15,35,60,.35); }
.txsvc-selfcheck .txsvc-checklist-item .txsvc-checklist-check{ border-radius:50%; }
.txsvc-selfcheck .txsvc-checklist-no{ display:none; }
.txsvc-selfcheck .txsvc-checklist-item.is-checked{ box-shadow:0 12px 26px -14px rgba(27,58,95,.6); }

/* 2) 치료의 효과: 화면 끝까지 이어지는 남색 띠 + 박스 없는 3단(세로 선으로 구분) */
.txsvc-section--dark{
  border-radius:0; padding:88px 0 84px; background:#14304f;
  box-shadow:0 0 0 100vmax #14304f; clip-path:inset(0 -100vmax);
}
.txsvc-section--dark::after{ right:-10%; top:-160px; width:520px; height:520px; }
.txsvc-section--dark .txsvc-section-title{ margin-bottom:44px; }
.txsvc-section--dark .txsvc-effect-grid{ gap:0; }
.txsvc-section--dark .txsvc-effect-card,
.txsvc-section--dark .txsvc-effect-card:hover{
  background:none; border:none; border-left:1px solid rgba(255,255,255,.16); border-radius:0; box-shadow:none;
  padding:6px 34px 10px; transform:none;
}
.txsvc-section--dark .txsvc-effect-card:first-child{ border-left:none; padding-left:0; }
.txsvc-section--dark .txsvc-effect-num{ position:static; display:block; margin:0 0 22px; font-size:64px; -webkit-text-stroke:1.5px rgba(255,255,255,.35); transition:color .3s ease; }
.txsvc-section--dark .txsvc-effect-card:hover .txsvc-effect-num{ color:rgba(255,255,255,.9); }
.txsvc-section--dark .txsvc-effect-icon{ display:none; }


/* 4) FAQ: 박스 대신 가로 선으로 구분 */
.txsvc-faqwrap .txsvc-faq{ gap:0; border-top:2px solid #1b3a5f; }
.txsvc-faqwrap .txsvc-faq-item,
.txsvc-faqwrap .txsvc-faq-item.is-open{ border:none; border-bottom:1px solid #e3ebf4; border-radius:0; background:none; box-shadow:none; }
.txsvc-faqwrap .txsvc-faq-q{ padding:22px 4px; }
.txsvc-faqwrap .txsvc-faq-q-mark{ background:#fff; }
.txsvc-faqwrap .txsvc-faq-item.is-open .txsvc-faq-q{ border-bottom:none; }
.txsvc-faqwrap .txsvc-faq-q-text{ font-size:17px; }
.txsvc-faqwrap .txsvc-faq-a-inner{ padding:0 44px 24px 60px; }
.txsvc-faqwrap .txsvc-faq-a{ font-size:15.5px; }

/* 5) 다른 비수술치료: 카드 대신 줄 목록(2단) */
.txsvc-more-grid{ grid-template-columns:repeat(2, 1fr); gap:0 48px; border-top:2px solid #1b3a5f; }
.txsvc-more-card,
.txsvc-more-card:hover{
  display:grid; grid-template-columns:36px 1fr 28px; grid-template-rows:auto auto; column-gap:16px; row-gap:4px; align-items:center;
  padding:22px 6px; border:none; border-bottom:1px solid #e3ebf4; border-radius:0; background:none; box-shadow:none; transform:none;
}
.txsvc-more-ico,
.txsvc-more-card:hover .txsvc-more-ico{ grid-row:1 / span 2; width:36px; height:36px; border-radius:50%; background:#eef4fa; box-shadow:none; color:#4f8fc0; }
.txsvc-more-ico svg{ width:18px; height:18px; }
.txsvc-more-card strong{ grid-column:2; font-size:18px; transition:color .2s ease; }
.txsvc-more-card p{ grid-column:2; font-size:14px; -webkit-line-clamp:1; }
.txsvc-more-go{ position:static; grid-column:3; grid-row:1 / span 2; text-align:right; }
.txsvc-more-card:hover strong{ color:#4f8fc0; }

@media (max-width: 900px){
  .txsvc-section--dark{ padding:60px 0 56px; }
  .txsvc-section--dark .txsvc-effect-card,
  .txsvc-section--dark .txsvc-effect-card:hover{ border-left:none; border-top:1px solid rgba(255,255,255,.16); padding:24px 0; }
  .txsvc-section--dark .txsvc-effect-card:first-child{ border-top:none; padding-top:0; }
  .txsvc-section--dark .txsvc-effect-num{ font-size:48px; margin-bottom:12px; }
  .txsvc-more-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .txsvc-selfcheck .txsvc-checklist-item{ width:100%; border-radius:16px; font-size:15px; }
  .txsvc-selfcheck .txsvc-checkresult{ align-self:stretch; }
}
.txsvc-section--dark::after{ display:none; }

/* =====================================================================
   비수술치료 v5 — 자가 체크를 말풍선으로
   환자분들이 흔히 하시는 말처럼, 증상이 좌우로 엇갈린 말풍선으로 놓입니다.
   누르면 말풍선이 남색으로 채워지며 "나도 그래요"로 체크됩니다.
   ===================================================================== */
.txsvc-selfcheck .txsvc-checklist-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:22px 34px; align-items:start;
  max-width:920px; margin:0 auto; padding-bottom:40px;
}
.txsvc-selfcheck .txsvc-checklist-item{
  position:relative; width:100%; overflow:visible;
  display:flex; flex-direction:row; align-items:center; gap:12px;
  padding:18px 24px 18px 18px; border-radius:26px 26px 26px 8px;
  border:1.5px solid #d5e1ee; background:#fff; box-shadow:0 10px 24px -20px rgba(15,35,60,.45);
  font-size:16px; font-weight:700; line-height:1.5; text-align:left;
}
/* 말풍선 꼬리 */
.txsvc-selfcheck .txsvc-checklist-item::after{
  content:''; position:absolute; bottom:-8px; left:26px; width:15px; height:15px;
  background:inherit; border:solid; border-color:inherit; border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg); transition:inherit;
}
/* 오른쪽 줄은 한 칸 내려서 엇갈리게, 꼬리는 오른쪽 */
.txsvc-selfcheck .txsvc-checklist-item:nth-child(even){ margin-top:40px; border-radius:26px 26px 8px 26px; }
.txsvc-selfcheck .txsvc-checklist-item:nth-child(even)::after{ left:auto; right:26px; }
.txsvc-selfcheck .txsvc-checklist-item:hover{ transform:translateY(-3px); border-color:#9dc3e0; box-shadow:0 16px 28px -18px rgba(15,35,60,.45); }
.txsvc-selfcheck .txsvc-checklist-item.is-checked{ background:#1b3a5f; border-color:#1b3a5f; color:#fff; box-shadow:0 16px 30px -16px rgba(27,58,95,.6); }
.txsvc-selfcheck .txsvc-checklist-item.is-checked::before{
  content:'나도 그래요'; position:absolute; top:-11px; right:18px;
  padding:3px 10px; border-radius:50px; background:#4f8fc0; color:#fff; font-size:11.5px; font-weight:800;
}
.txsvc-selfcheck .txsvc-checklist-item:nth-child(even).is-checked::before{ right:auto; left:18px; }
@media (max-width: 760px){
  .txsvc-selfcheck .txsvc-checklist-grid{ display:flex; flex-direction:column; gap:20px; padding-bottom:10px; }
  .txsvc-selfcheck .txsvc-checklist-item{ width:88%; font-size:15px; border-radius:22px 22px 22px 6px; }
  .txsvc-selfcheck .txsvc-checklist-item:nth-child(even){ margin-top:0; align-self:flex-end; border-radius:22px 22px 6px 22px; }
}

/* 자가 체크 결과: 덩그러니 놓인 게이지 대신 "감탄병원의 답장" 말풍선 */
.txsvc-selfcheck .txsvc-checkresult{
  width:100%; max-width:920px; margin:6px auto 0; padding:0;
  display:flex; align-items:flex-end; gap:12px; background:none; box-shadow:none; text-align:left;
}
.txsvc-checkresult-avatar{
  flex:none; width:48px; height:48px; border-radius:50%; background:#1b3a5f;
  display:flex; align-items:center; justify-content:center; box-shadow:0 8px 18px -10px rgba(27,58,95,.6);
}
.txsvc-checkresult-avatar img{ width:62%; height:auto; display:block; filter:brightness(0) invert(1); }
.txsvc-checkresult-bubble{
  position:relative; flex:1; min-width:0; display:flex; align-items:center; gap:18px;
  padding:16px 22px 16px 16px; border-radius:26px 26px 26px 8px;
  background:#eaf1f9; border:1.5px solid #d3e2f0;
}
.txsvc-checkresult-bubble::after{
  content:''; position:absolute; left:-8px; bottom:14px; width:15px; height:15px;
  background:#eaf1f9; border:solid #d3e2f0; border-width:0 0 1.5px 1.5px; transform:rotate(45deg);
}
.txsvc-checkresult-bubble .txsvc-ring{ width:76px; height:76px; }
.txsvc-checkresult-bubble .txsvc-ring-num{ font-size:24px; }
.txsvc-checkresult-bubble .txsvc-ring-label span{ font-size:12.5px; margin-top:4px; }
.txsvc-checkresult-bubble .txsvc-ring-bg{ stroke:#fff; }
.txsvc-selfcheck .txsvc-checkresult-body{ flex:1; width:auto; }
.txsvc-checkresult-from{ display:block; font-size:12.5px; font-weight:800; letter-spacing:1px; color:#4f8fc0; margin-bottom:3px; }
.txsvc-checkresult-bubble .txsvc-checkresult-text{ margin:0; font-size:16.5px; }
.txsvc-checkresult-bubble .txsvc-checkresult-btn{ flex:none; padding:13px 22px; font-size:14.5px; }
@media (max-width: 760px){
  .txsvc-checkresult-avatar{ width:40px; height:40px; }
  .txsvc-checkresult-bubble{ flex-wrap:wrap; gap:12px 14px; padding:14px 16px; }
  .txsvc-checkresult-bubble .txsvc-ring{ width:60px; height:60px; }
  .txsvc-checkresult-bubble .txsvc-ring-num{ font-size:20px; }
  .txsvc-checkresult-bubble .txsvc-checkresult-text{ font-size:15px; }
  .txsvc-checkresult-bubble .txsvc-checkresult-btn{ width:100%; justify-content:center; }
}

/* 비수술치료 — 휴대폰 글자 크기·간격 (PC 크기 그대로라 너무 크던 제목·숫자를 줄임) */
@media (max-width: 640px){
  .txsvc-section{ margin:64px 0; }
  .txsvc-title-col h1{ font-size:30px; margin-bottom:16px; }
  .txsvc-hero-sub{ font-size:16px; }
  .txsvc-lede{ font-size:15.5px; }
  .txsvc-eyebrow-dot,
  .txsvc-section-label{ font-size:13px; }
  .txsvc-section-title{ font-size:24px; margin-bottom:18px; }
  .txsvc-selfcheck-desc,
  .txsvc-faqwrap-desc{ font-size:15px; }
  .txsvc-indrow-name h4{ font-size:18px; }
  .txsvc-section--dark .txsvc-effect-num{ font-size:36px; }
  .txsvc-section--dark .txsvc-effect-card h4{ font-size:17px; }
  .txsvc-section--center .txsvc-process-step-num{ font-size:24px; }
  .txsvc-section--center .txsvc-process-step-text{ font-size:15px; }
  .txsvc-faqwrap .txsvc-faq-q-text{ font-size:15.5px; }
  .txsvc-faqwrap .txsvc-faq-a-inner{ padding-right:8px; }
  .txsvc-faqwrap .txsvc-faq-a{ font-size:14.5px; }
  .txsvc-more-card strong{ font-size:16px; }
  .txsvc-ctabanner h3{ font-size:21px; }
}

/* =====================================================================
   센터 대표 질환 모달 — 좌우 분할 + 탭 (.sctr-cm2)
   왼쪽 남색 패널(질환명·요약·그림) / 오른쪽 탭(개요·원인증상·치료·수술 안내)
   ===================================================================== */
.sctr-modal-panel.is-rich{ max-width:1000px; padding:0; overflow:hidden; }
.sctr-modal-panel.is-rich .sctr-modal-close{ z-index:5; }
.sctr-cm2{ display:grid; grid-template-columns:360px 1fr; grid-template-rows:minmax(0,1fr); height:min(680px, 85vh); }
.sctr-cm2-side{
  display:flex; flex-direction:column; gap:14px; padding:40px 32px 32px; overflow-y:auto;
  background:linear-gradient(160deg,#0e2338 0%,#1b3a5f 60%,#2b6ca8 100%); color:#fff;
}
.sctr-cm2-tag{ align-self:flex-start; padding:5px 12px; border-radius:50px; background:rgba(255,255,255,.14); color:#cfe2f3; font-size:13px; font-weight:700; }
.sctr-cm2-side h3{ margin:0; font-size:28px; font-weight:800; line-height:1.35; color:#fff; word-break:keep-all; }
.sctr-cm2-sum{ margin:0; font-size:14.5px; line-height:1.75; color:rgba(255,255,255,.8); }
.sctr-cm2-fig{ margin:auto 0 0; }
.sctr-cm2-frame{ height:210px; border-radius:18px; background:#fff; display:flex; align-items:center; justify-content:center; overflow:hidden; /* padding:14px; */ }
.sctr-cm2-frame img{ max-width:100%; max-height:100%; object-fit:contain; display:block; }
.sctr-cm2-frame svg{ width:80%; height:auto; max-height:100%; }
.sctr-cm2-fig figcaption{ margin-top:8px; font-size:12.5px; color:rgba(255,255,255,.6); text-align:center; }
.sctr-cm2-markers{ margin-top:auto; padding:16px; border-radius:16px; background:rgba(255,255,255,.1); }
.sctr-cm2-markers small{ display:block; font-size:12.5px; font-weight:700; color:#9dc3e0; margin-bottom:10px; }
.sctr-cm2-markers div{ display:flex; flex-wrap:wrap; gap:6px; }
.sctr-cm2-markers em{ font-style:normal; padding:6px 11px; border-radius:50px; background:#fff; color:#1b3a5f; font-size:12.5px; font-weight:700; }

.sctr-cm2-main{ position:relative; overflow-y:auto; padding:0 36px 36px; background:#fff; }
.sctr-cm2-tabs{
  position:sticky; top:0; z-index:2; display:flex; gap:6px; flex-wrap:wrap;
  margin:0 -36px 26px; padding:30px 70px 16px 36px; background:#fff; border-bottom:1px solid #eef2f7;
}
.sctr-cm2-tab{
  padding:9px 16px; border-radius:50px; border:1.5px solid #e3ebf4; background:#fff; cursor:pointer;
  font-family:inherit; font-size:14.5px; font-weight:700; color:#64748b; transition:all .2s ease;
}
.sctr-cm2-tab:hover{ border-color:#9dc3e0; color:#1b3a5f; }
.sctr-cm2-tab.is-active{ background:#1b3a5f; border-color:#1b3a5f; color:#fff; }
.sctr-cm2-pane{ display:none; }
.sctr-cm2-pane.is-active{ display:block; animation:sctrPanelIn .45s cubic-bezier(.2,.7,.2,1) both; }
.sctr-cm2-h{ margin:26px 0 14px; font-size:16px; font-weight:800; color:#1b3a5f; }
.sctr-cm2-pane > .sctr-cm2-h:first-child{ margin-top:0; }
.sctr-cm2-intro p{ margin:0 0 16px; font-size:16px; line-height:1.9; color:#334155; }
.sctr-cm2-intro p:first-child{ font-size:17.5px; font-weight:700; color:#1b3a5f; line-height:1.75; }

.sctr-cm2-causes{ list-style:none; margin:0; padding:0; border-top:1px solid #eef2f7; }
.sctr-cm2-causes li{ display:flex; gap:16px; align-items:baseline; padding:13px 0; border-bottom:1px solid #eef2f7; font-size:15.5px; color:#334155; }
.sctr-cm2-causes li::before{ display:none; }
.sctr-cm2-causes b{ flex:none; font-size:13px; font-weight:800; color:#4f8fc0; letter-spacing:1px; }
.sctr-cm2-symptoms{ display:flex; flex-wrap:wrap; gap:8px; }
.sctr-cm2-symptoms span{ display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:50px; background:#eef4fa; color:#1b3a5f; font-size:14.5px; font-weight:700; }
.sctr-cm2-symptoms span::before{ content:''; width:6px; height:6px; border-radius:50%; background:#4f8fc0; }

.sctr-cm2-path{ list-style:none; margin:0; padding:0; }
.sctr-cm2-path li{ position:relative; display:flex; align-items:flex-start; gap:16px; padding:0 0 22px; font-size:15.5px; line-height:1.6; color:#334155; }
.sctr-cm2-path li::before{ content:''; position:absolute; left:15px; top:30px; bottom:0; width:2px; background:#dbe7f3; }
.sctr-cm2-path li:last-child{ padding-bottom:0; }
.sctr-cm2-path li:last-child::before{ display:none; }
.sctr-cm2-path i{ flex:none; width:32px; height:32px; border-radius:50%; background:#eef4fa; color:#1b3a5f; font-style:normal; font-size:14px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid #cfe0ee; }
.sctr-cm2-path span{ padding-top:5px; }

.sctr-cm2-surg-head span{ display:inline-block; padding:5px 12px; border-radius:50px; background:#1b3a5f; color:#fff; font-size:12.5px; font-weight:800; }
.sctr-cm2-surg-head h4{ margin:12px 0 8px; font-size:22px; font-weight:800; color:#1b3a5f; }
.sctr-cm2-surg-head p{ margin:0 0 20px; font-size:15.5px; font-weight:700; line-height:1.7; color:#334155; }
.sctr-cm2-fig--wide .sctr-cm2-frame{ height:240px; background:#f5f8fc; border:1px solid #e5edf5; }
.sctr-cm2-fig--wide figcaption{ color:#94a3b8; }
.sctr-cm2-desc{ margin:18px 0 0; font-size:15.5px; line-height:1.85; color:#334155; }
.sctr-cm2-flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--n), 1fr); gap:12px; counter-reset:none; }
.sctr-cm2-flow li{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; font-size:14px; line-height:1.55; color:#334155; }
.sctr-cm2-flow li::before{ content:''; position:absolute; left:34px; right:-12px; top:15px; height:2px; background:#dbe7f3; }
.sctr-cm2-flow li:last-child::before{ display:none; }
.sctr-cm2-flow i{ position:relative; z-index:1; width:30px; height:30px; border-radius:50%; background:#1b3a5f; color:#fff; font-style:normal; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center; }
.sctr-cm2-benefits{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.sctr-cm2-benefits div{ display:flex; align-items:flex-start; gap:10px; padding:14px 16px; border-radius:14px; background:#f5f8fc; font-size:14.5px; line-height:1.55; color:#1e293b; font-weight:600; }
.sctr-cm2-benefits svg{ flex:none; width:18px; height:18px; margin-top:1px; color:#4f8fc0; }
.sctr-cm2-note{ margin-top:22px; padding:18px 20px; border-radius:16px; border-left:4px solid #4f8fc0; background:#f8fafc; }
.sctr-cm2-note strong{ display:block; margin-bottom:6px; font-size:15px; font-weight:800; color:#1b3a5f; }
.sctr-cm2-note p{ margin:0; font-size:14.5px; line-height:1.8; color:#64748b; }

@media (max-width: 860px){
  .sctr-modal-panel.is-rich{ overflow-y:auto; }
  .sctr-cm2{ grid-template-columns:1fr; grid-template-rows:auto; height:auto; }
  .sctr-cm2-side{ padding:30px 22px 22px; overflow:visible; }
  .sctr-cm2-side h3{ font-size:23px; }
  .sctr-cm2-frame{ height:170px; }
  .sctr-cm2-main{ overflow:visible; padding:0 20px 26px; }
  .sctr-cm2-tabs{ margin:0 -20px 20px; padding:14px 20px; flex-wrap:nowrap; overflow-x:auto; }
  .sctr-cm2-tab{ flex:none; }
  .sctr-cm2-flow{ grid-template-columns:1fr; gap:10px; }
  .sctr-cm2-flow li{ flex-direction:row; align-items:center; }
  .sctr-cm2-flow li::before{ left:14px; right:auto; top:30px; bottom:-10px; width:2px; height:auto; }
  .sctr-cm2-benefits{ grid-template-columns:1fr; }
}

/* =====================================================================
   게시판 — 공지사항(gamtan_notice) · 상담신청(gamtan_counsel) 공통
   ===================================================================== */
.gtb{
  --gt-navy:#1b3a5f; --gt-dark:#0e2338; --gt-accent:#4f8fc0; --gt-blue:#2b6ca8;
  --gt-ink:#1e293b; --gt-text:#334155; --gt-mute:#64748b; --gt-faint:#94a3b8;
  --gt-line:#e5e9f0; --gt-soft:#f5f8fb; --gt-tint:#eaf1f9;
  max-width:1240px; margin:0 auto; padding:0 20px 80px; color:var(--gt-text); font-size:16px; line-height:1.6; letter-spacing:-.01em;
}
.gtb *, .gtb *::before, .gtb *::after{ box-sizing:border-box; }
.gtb a{ color:inherit; text-decoration:none; }
.gtb .sound_only{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.gtb-req{ color:#d14343; font-weight:700; }
.gtb-muted{ color:var(--gt-mute); }
.gtb-eyebrow{ display:inline-block; font-size:12px; font-weight:800; letter-spacing:.18em; color:var(--gt-accent); }

/* 관리자 바 */
.gtb-admin-bar{ display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-bottom:18px; font-size:13px; }
.gtb-admin-label{ padding:3px 10px; border-radius:99px; background:var(--gt-dark); color:#fff; font-weight:700; }
.gtb-admin-bar a{ padding:4px 12px; border:1px solid var(--gt-line); border-radius:99px; color:var(--gt-mute); }
.gtb-admin-bar a:hover{ border-color:var(--gt-navy); color:var(--gt-navy); }

/* 버튼 */
.gtb-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; min-width:96px; height:46px; padding:0 22px; border:1px solid var(--gt-navy); border-radius:99px; background:var(--gt-navy); color:#fff !important; font-size:15px; font-weight:700; cursor:pointer; transition:background .2s, border-color .2s, color .2s, transform .2s; font-family:inherit; }
.gtb-btn:hover{ background:var(--gt-dark); border-color:var(--gt-dark); }
.gtb-btn--line{ background:#fff; color:var(--gt-navy) !important; border-color:#cfd9e6; }
.gtb-btn--line:hover{ background:var(--gt-soft); border-color:var(--gt-navy); }
.gtb-btn--lg{ height:54px; padding:0 30px; font-size:16px; }
.gtb-btn[disabled]{ opacity:.55; cursor:default; }

/* 상단 툴바 · 검색 */
.gtb-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.gtb-count{ margin:0; font-size:15px; color:var(--gt-mute); }
.gtb-count strong{ color:var(--gt-navy); font-weight:800; }
.gtb-toolbar-note{ display:flex; align-items:center; gap:6px; margin:0; font-size:13px; color:var(--gt-mute); }
.gtb-toolbar-note svg{ width:15px; height:15px; color:var(--gt-accent); flex:none; }
.gtb-search{ display:flex; align-items:center; height:46px; padding:0 4px 0 6px; border:1px solid var(--gt-line); border-radius:99px; background:#fff; transition:border-color .2s, box-shadow .2s; }
.gtb-search:focus-within{ border-color:var(--gt-accent); box-shadow:0 0 0 4px rgba(79,143,192,.14); }
.gtb-search select{ height:100%; padding:0 26px 0 12px; border:0; background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center/14px; font:inherit; font-size:14px; color:var(--gt-text); -webkit-appearance:none; appearance:none; outline:0; }
.gtb-search input{ width:220px; height:100%; padding:0 10px; border:0; border-left:1px solid var(--gt-line); background:transparent; font:inherit; font-size:14px; outline:0; }
.gtb-search button{ display:grid; place-items:center; width:38px; height:38px; border:0; border-radius:50%; background:var(--gt-navy); color:#fff; cursor:pointer; flex:none; }
.gtb-search button svg{ width:17px; height:17px; }
.gtb-search--sm{ height:42px; }
.gtb-search--sm input{ width:150px; }
.gtb-search--sm button{ width:34px; height:34px; }

/* 하단: 페이지 번호 + 버튼 */
.gtb-bottom{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; margin-top:34px; }
.gtb-btns{ grid-column:3; justify-self:end; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gtb-paging{ grid-column:2; display:flex; justify-content:center; }
.gtb-paging nav, .gtb-paging .pg_wrap, .gtb-paging .pg{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:0; padding:0; float:none; }
.gtb-paging .sound_only{ display:none; }
.gtb-paging a, .gtb-paging strong{ display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 10px; border-radius:99px; border:1px solid transparent; font-size:14px; font-weight:600; color:var(--gt-mute); background:transparent; }
.gtb-paging a:hover{ border-color:var(--gt-line); color:var(--gt-navy); background:#fff; }
.gtb-paging strong, .gtb-paging .pg_current{ background:var(--gt-navy); color:#fff; }
.gtb-paging .pg_start, .gtb-paging .pg_prev, .gtb-paging .pg_next, .gtb-paging .pg_end{ font-size:13px; }

.gtb-empty{ padding:80px 20px; text-align:center; color:var(--gt-faint); list-style:none; }
.gtb-badge{ display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:99px; background:var(--gt-navy); color:#fff; font-size:12px; font-weight:700; flex:none; }
.gtb-cate{ color:var(--gt-accent); font-weight:700; }

/* ---------------- 공지사항 목록 ---------------- */
.gtb-nlist{ margin:0; padding:0; list-style:none; border-top:2px solid var(--gt-navy); }
.gtb-nitem{ border-bottom:1px solid var(--gt-line); }
.gtb-nitem > a{ display:flex; align-items:center; gap:28px; padding:22px 24px; transition:background .2s; }
.gtb-nitem > a:hover{ background:var(--gt-soft); }
.gtb-nitem.is-notice > a{ background:linear-gradient(90deg, var(--gt-tint), rgba(234,241,249,.25)); }
.gtb-nitem.is-current > a{ box-shadow:inset 3px 0 0 var(--gt-accent); }
.gtb-ndate{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:88px; flex:none; line-height:1.1; }
.gtb-ndate strong{ font-size:23px; font-weight:800; color:var(--gt-navy); letter-spacing:-.02em; }
.gtb-ndate em{ margin-top:6px; font-style:normal; font-size:13px; letter-spacing:.04em; color:var(--gt-faint); font-weight:600; }
.gtb-nitem.is-notice .gtb-ndate strong{ color:var(--gt-blue); }
.gtb-nbody{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:6px; }
.gtb-ntitle{ display:flex; align-items:center; gap:8px; min-width:0; font-size:17.5px; font-weight:700; color:var(--gt-ink); }
.gtb-ntext{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gtb-nitem > a:hover .gtb-ntext{ color:var(--gt-navy); text-decoration:underline; text-underline-offset:4px; text-decoration-color:#9dc3e0; }
.gtb-new{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:#e0564a; color:#fff; font-size:10px; font-weight:800; flex:none; }
.gtb-clip{ width:16px; height:16px; color:var(--gt-faint); flex:none; }
.gtb-nmeta{ display:flex; gap:14px; font-size:13.5px; color:var(--gt-faint); }
.gtb-nmeta-date{ display:none; }
.gtb-go{ display:grid; place-items:center; width:40px; height:40px; border-radius:50%; border:1px solid var(--gt-line); color:var(--gt-mute); font-size:16px; flex:none; transition:all .25s; }
.gtb-nitem > a:hover .gtb-go{ background:var(--gt-navy); border-color:var(--gt-navy); color:#fff; transform:translateX(3px); }

/* ---------------- 공지사항 보기 ---------------- */
.gtb-view-head{ padding:0 4px 26px; border-bottom:2px solid var(--gt-navy); }
.gtb-view-badges{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.gtb-view-badges:empty{ display:none; }
.gtb-view-title{ margin:0; font-size:30px; line-height:1.4; font-weight:800; color:var(--gt-ink); letter-spacing:-.02em; word-break:keep-all; }
.gtb-view-meta{ display:flex; gap:16px; margin:12px 0 0; font-size:14px; color:var(--gt-faint); }
.gtb-view-meta span + span::before{ content:""; display:inline-block; width:1px; height:11px; margin-right:16px; background:var(--gt-line); vertical-align:0; }
.gtb-files{ display:flex; gap:18px; align-items:flex-start; margin-top:18px; padding:16px 20px; border-radius:14px; background:var(--gt-soft); }
.gtb-files-label{ flex:none; font-size:14px; color:var(--gt-navy); padding-top:2px; }
.gtb-files ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:6px; min-width:0; }
.gtb-files a{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; color:var(--gt-text); word-break:break-all; }
.gtb-files a:hover span{ color:var(--gt-navy); text-decoration:underline; }
.gtb-files svg{ width:16px; height:16px; color:var(--gt-accent); flex:none; }
.gtb-files em{ font-style:normal; color:var(--gt-faint); font-size:13px; }
.gtb-view-body{ padding:44px 4px 56px; min-height:240px; border-bottom:1px solid var(--gt-line); }
.gtb-view-images img, .gtb-view-con img{ max-width:100%; height:auto; border-radius:10px; }
.gtb-view-images:empty{ display:none; }
.gtb-view-con{ font-size:16.5px; line-height:1.9; color:var(--gt-text); word-break:keep-all; overflow-wrap:anywhere; }
.gtb-prevnext{ display:flex; flex-direction:column; border-bottom:1px solid var(--gt-line); }
.gtb-prevnext a{ display:flex; align-items:center; gap:20px; padding:16px 8px; font-size:15px; }
.gtb-prevnext a + a{ border-top:1px solid var(--gt-line); }
.gtb-prevnext a:hover .gtb-pn-title{ color:var(--gt-navy); text-decoration:underline; }
.gtb-pn-label{ width:64px; flex:none; font-size:13px; font-weight:700; color:var(--gt-accent); }
.gtb-pn-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--gt-text); }
.gtb-view-btns{ display:flex; justify-content:space-between; gap:8px; margin-top:30px; }
.gtb-view-btns > div{ display:flex; gap:8px; }

/* ---------------- 글쓰기 공통 폼 ---------------- */
.gtb-write-head{ padding-bottom:18px; margin-bottom:26px; border-bottom:2px solid var(--gt-navy); }
.gtb-write-head h2{ margin:0; font-size:26px; font-weight:800; color:var(--gt-ink); }
.gtb-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.gtb-field{ margin-bottom:22px; }
.gtb-field > label{ display:block; margin-bottom:8px; font-size:14.5px; font-weight:700; color:var(--gt-ink); }
.gtb-field input[type=text], .gtb-field input[type=tel], .gtb-field input[type=password], .gtb-field input[type=email], .gtb-field select, .gtb-field textarea{
  display:block; width:100%; height:52px; padding:0 16px; border:1px solid #d6dee8; border-radius:12px; background:#fff; font:inherit; font-size:15.5px; color:var(--gt-ink); outline:0; transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none; }
.gtb-field textarea{ height:auto; min-height:170px; padding:14px 16px; line-height:1.7; resize:vertical; }
.gtb-field input::placeholder, .gtb-field textarea::placeholder{ color:#a8b3c2; }
.gtb-field input:focus, .gtb-field select:focus, .gtb-field textarea:focus{ border-color:var(--gt-accent); box-shadow:0 0 0 4px rgba(79,143,192,.15); }
.gtb-field select, .gtb-select select{ padding-right:44px; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231b3a5f' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center/16px; cursor:pointer; }
.gtb-field.is-error input, .gtb-field.is-error textarea, .gtb-field.is-error select{ border-color:#d14343; box-shadow:0 0 0 4px rgba(209,67,67,.12); }
.gtb-help{ margin:8px 0 0; font-size:13px; color:var(--gt-mute); }
.gtb-options{ display:flex; gap:20px; flex-wrap:wrap; margin:-6px 0 22px; }
.gtb-check{ display:inline-flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:15px; color:var(--gt-text); }
.gtb-check input{ -webkit-appearance:none; appearance:none; width:22px; height:22px; margin:1px 0 0; border:1.5px solid #c3cfdd; border-radius:7px; background:#fff; flex:none; cursor:pointer; transition:all .2s; }
.gtb-check input:checked{ background:var(--gt-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/15px; border-color:var(--gt-navy); }
.gtb-check input:focus-visible{ box-shadow:0 0 0 4px rgba(79,143,192,.2); }
.gtb-check.is-error input{ border-color:#d14343; box-shadow:0 0 0 4px rgba(209,67,67,.14); }
.gtb-check--sm{ font-size:13.5px; }
.gtb-editor textarea{ min-height:320px; }
.gtb-filelist{ display:flex; flex-direction:column; gap:10px; }
.gtb-fileitem{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:12px 14px; border:1px dashed #cfd9e6; border-radius:12px; background:var(--gt-soft); }
.gtb-fileitem input[type=file]{ font-size:14px; }
.gtb-fileitem input[type=text]{ flex:1 1 220px; height:42px; }
.gtb-write-btns{ display:flex; justify-content:center; gap:10px; margin-top:34px; }
.gtb-write-btns .gtb-btn--lg{ min-width:200px; }

/* ---------------- 상담신청: 목록 ---------------- */
.gtb-cintro{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:36px; padding:40px 44px; border-radius:24px; overflow:hidden;
  background:radial-gradient(120% 140% at 100% 0%, #2b5b8a 0%, var(--gt-navy) 45%, var(--gt-dark) 100%); color:#fff; }
.gtb-cintro::after{ content:""; position:absolute; right:-60px; bottom:-90px; width:260px; height:260px; border-radius:50%; border:40px solid rgba(255,255,255,.05); pointer-events:none; }
.gtb-cintro-text{ position:relative; max-width:560px; }
.gtb-cintro .gtb-eyebrow{ color:#9dc3e0; }
.gtb-cintro h2{ margin:8px 0 10px; font-size:30px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.gtb-cintro p{ margin:0; font-size:15.5px; color:rgba(255,255,255,.78); word-break:keep-all; }
.gtb-cintro-actions{ position:relative; z-index:1; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.gtb-cintro .gtb-btn{ background:#fff; color:var(--gt-navy) !important; border-color:#fff; }
.gtb-cintro .gtb-btn:hover{ background:var(--gt-tint); border-color:var(--gt-tint); }
.gtb-cintro-tel{ display:flex; align-items:center; gap:12px; padding:10px 20px 10px 12px; border-radius:99px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff !important; }
.gtb-cintro-tel svg{ width:38px; height:38px; padding:9px; border-radius:50%; background:rgba(255,255,255,.14); }
.gtb-cintro-tel span{ display:flex; flex-direction:column; line-height:1.3; }
.gtb-cintro-tel small{ font-size:12px; color:rgba(255,255,255,.7); }
.gtb-cintro-tel strong{ color:#fff; font-size:19px; font-weight:800; letter-spacing:.01em; }

.gtb-clist{ border-top:2px solid var(--gt-navy); }
.gtb-crow{ display:grid; grid-template-columns:70px 180px minmax(0,1fr) 100px 110px 110px; align-items:center; gap:10px; padding:18px 16px; border-bottom:1px solid var(--gt-line); font-size:15px; transition:background .2s; }
.gtb-crow.is-admin{ grid-template-columns:70px 180px minmax(0,1fr) 100px 130px 110px 110px; }
a.gtb-crow:hover{ background:var(--gt-soft); }
.gtb-crow--head{ padding:13px 16px; background:var(--gt-soft); font-size:13.5px; font-weight:700; color:var(--gt-mute); }
.gtb-crow--head span{ text-align:center; }
.gtb-crow--head span:nth-child(3){ text-align:left; }
.gtb-c-num, .gtb-c-name, .gtb-c-date, .gtb-c-status, .gtb-c-tel, .gtb-c-field{ text-align:center; }
.gtb-c-num{ color:var(--gt-faint); font-size:14px; }
.gtb-c-field em{ display:inline-block; max-width:100%; padding:4px 12px; border-radius:99px; background:var(--gt-tint); color:var(--gt-blue); font-style:normal; font-size:13px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gtb-c-subj{ display:flex; align-items:center; gap:8px; min-width:0; font-weight:700; color:var(--gt-ink); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.gtb-c-subj svg{ width:15px; height:15px; color:var(--gt-faint); flex:none; }
a.gtb-crow:hover .gtb-c-subj{ color:var(--gt-navy); }
.gtb-c-name{ color:var(--gt-text); }
.gtb-c-date, .gtb-c-tel{ color:var(--gt-mute); font-size:14px; }
.gtb-status{ display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:99px; font-size:13px; font-weight:700; white-space:nowrap; }
.gtb-status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.gtb-status.is-received{ background:var(--gt-tint); color:var(--gt-blue); }
.gtb-status.is-progress{ background:#fff3df; color:#b0690b; }
.gtb-status.is-done{ background:#e5f5ec; color:#1d7a4c; }

/* ---------------- 상담신청: 보기 ---------------- */
.gtb-cview-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:26px; border-bottom:2px solid var(--gt-navy); }
.gtb-cview-head h2{ margin:6px 0 0; font-size:28px; font-weight:800; color:var(--gt-ink); letter-spacing:-.02em; }
.gtb-steps{ display:flex; margin:0; padding:0; list-style:none; }
.gtb-steps li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:6px; width:92px; font-size:13px; font-weight:600; color:var(--gt-faint); }
.gtb-steps li + li::before{ content:""; position:absolute; top:15px; right:50%; width:100%; height:2px; background:var(--gt-line); z-index:0; }
.gtb-steps li.is-past::before, .gtb-steps li.is-now::before{ background:var(--gt-accent); }
.gtb-steps i{ position:relative; z-index:1; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:#fff; border:2px solid var(--gt-line); font-style:normal; font-size:13px; font-weight:800; }
.gtb-steps li.is-past i{ background:var(--gt-tint); border-color:var(--gt-accent); color:var(--gt-blue); }
.gtb-steps li.is-past, .gtb-steps li.is-now{ color:var(--gt-navy); }
.gtb-steps li.is-now i{ background:var(--gt-navy); border-color:var(--gt-navy); color:#fff; box-shadow:0 0 0 5px rgba(79,143,192,.18); }
.gtb-cview-grid{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:28px; margin-top:30px; align-items:start; }
.gtb-cinfo{ margin:0; padding:10px 24px; border-radius:20px; background:var(--gt-soft); border:1px solid var(--gt-line); position:sticky; top:110px; }
.gtb-cinfo > div{ padding:16px 0; border-bottom:1px solid var(--gt-line); }
.gtb-cinfo > div:last-child{ border-bottom:0; }
.gtb-cinfo dt{ margin-bottom:5px; font-size:12.5px; font-weight:700; color:var(--gt-mute); letter-spacing:.02em; }
.gtb-cinfo dd{ margin:0; font-size:16.5px; font-weight:700; color:var(--gt-ink); word-break:keep-all; }
.gtb-cinfo dd a{ color:var(--gt-blue); text-decoration:underline; text-underline-offset:3px; }
.gtb-cinfo dd.gtb-muted{ font-size:13px; font-weight:500; }
.gtb-chip{ display:inline-block; padding:4px 12px; border-radius:99px; background:#fff; border:1px solid #cfe0f0; color:var(--gt-blue); font-style:normal; font-size:14px; }
.gtb-cview-main{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.gtb-cbox{ padding:26px 28px; border:1px solid var(--gt-line); border-radius:20px; background:#fff; }
.gtb-cbox h3{ display:flex; align-items:center; gap:10px; margin:0 0 14px; font-size:17px; font-weight:800; color:var(--gt-navy); }
.gtb-cbox-body{ font-size:16px; line-height:1.85; color:var(--gt-text); word-break:keep-all; overflow-wrap:anywhere; }
.gtb-cbox-body p{ margin:0; }
.gtb-cbox--answer{ background:linear-gradient(180deg, var(--gt-tint), #fff 70%); border-color:#d4e3f2; }
.gtb-cbox--answer.is-empty{ background:#fff; border-style:dashed; }
.gtb-answer-ico{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fff; border:1px solid #d4e3f2; overflow:hidden; }
.gtb-answer-ico img{ width:22px; height:22px; object-fit:contain; }
.gtb-cadmin{ padding:22px 24px; border:1.5px dashed #b9cbe0; border-radius:20px; background:#fbfcfe; }
.gtb-cadmin h3{ display:flex; align-items:baseline; gap:10px; margin:0 0 14px; font-size:16px; font-weight:800; color:var(--gt-dark); }
.gtb-cadmin h3 small{ font-size:12px; font-weight:500; color:var(--gt-faint); }
.gtb-cadmin-status{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.gtb-radio input{ position:absolute; opacity:0; pointer-events:none; }
.gtb-radio span{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:99px; border:1px solid #cfd9e6; background:#fff; font-size:14px; font-weight:700; color:var(--gt-mute); cursor:pointer; transition:all .2s; }
.gtb-radio input:checked + span{ background:var(--gt-navy); border-color:var(--gt-navy); color:#fff; }
.gtb-radio input:focus-visible + span{ box-shadow:0 0 0 4px rgba(79,143,192,.2); }
.gtb-cadmin textarea{ display:block; width:100%; padding:12px 14px; border:1px solid #d6dee8; border-radius:12px; font:inherit; font-size:15px; line-height:1.6; resize:vertical; outline:0; }
.gtb-cadmin textarea:focus{ border-color:var(--gt-accent); box-shadow:0 0 0 4px rgba(79,143,192,.15); }
.gtb-cadmin-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:10px; font-size:13px; }

/* ---------------- 상담신청: 신청서 ---------------- */
.gtb-cwrite{ display:grid; grid-template-columns:330px minmax(0,1fr); gap:56px; align-items:start; width:calc(100% - 40px); max-width:1200px; margin:0 auto 80px; padding:0; }
/* 왼쪽 안내: 흰 바탕 · 폼을 따라 내려옴 */
.gtb-cwrite-side{ position:sticky; top:130px; }
.gtb-cwrite-mark{ display:block; width:54px; aspect-ratio:86/48; overflow:hidden; margin-bottom:22px; }
.gtb-cwrite-mark img{ display:block; width:100%; max-width:none; height:auto;}
.gtb-cwrite-side h2{ margin:8px 0 12px; font-size:30px; font-weight:800; letter-spacing:-.02em; color:var(--gt-dark); }
.gtb-cwrite-side > p{ margin:0 0 28px; font-size:15px; line-height:1.7; color:var(--gt-mute); word-break:keep-all; }
.gtb-flow{ margin:0 0 28px; padding:0; list-style:none; border-top:1px solid var(--gt-line); }
.gtb-flow li{ display:flex; gap:16px; padding:16px 0; border-bottom:1px solid var(--gt-line); }
.gtb-flow em{ padding-top:2px; font-style:normal; font-size:13px; font-weight:800; color:var(--gt-accent); flex:none; }
.gtb-flow strong{ display:block; font-size:15.5px; color:var(--gt-dark); }
.gtb-flow span{ display:block; margin-top:3px; font-size:13.5px; color:var(--gt-mute); word-break:keep-all; }
.gtb-cwrite-tel{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 22px; border-radius:18px; background:var(--gt-navy); transition:background .25s; }
.gtb-cwrite-tel:hover{ background:var(--gt-dark); }
.gtb-cwrite-tel small{ display:block; font-size:12.5px; color:rgba(255,255,255,.7); }
.gtb-cwrite-tel strong{ display:block; margin-top:3px; font-size:23px; font-weight:800; letter-spacing:.01em; color:#fff; }
.gtb-cwrite-tel i{ display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.14); color:#fff; flex:none; }
.gtb-cwrite-tel i svg{ width:19px; height:19px; }
/* 오른쪽 폼: 카드 */
.gtb-cwrite-form{ min-width:0; padding:44px 48px; border:1px solid var(--gt-line); border-radius:24px; background:#fff; box-shadow:0 30px 60px -45px rgba(14,35,56,.35); }
.gtb-form-title{ display:flex; align-items:baseline; justify-content:space-between; margin:0 0 18px; padding-bottom:12px; border-bottom:1px solid var(--gt-line); font-size:18px; font-weight:800; color:var(--gt-navy); }
.gtb-form-title small{ font-size:12.5px; font-weight:500; color:var(--gt-faint); }
.gtb-field + .gtb-form-title, .gtb-grid2 + .gtb-form-title{ margin-top:36px; }
.gtb-agree{ display:flex; flex-direction:column; gap:12px; }
.gtb-agree-box{ max-height:170px; overflow:auto; padding:16px 18px; border-radius:14px; background:var(--gt-soft); border:1px solid var(--gt-line); font-size:13.5px; color:var(--gt-mute); }
.gtb-agree-box table{ width:100%; border-collapse:collapse; margin-bottom:8px; }
.gtb-agree-box th, .gtb-agree-box td{ padding:7px 0; border-bottom:1px solid #e3e9f1; text-align:left; vertical-align:top; }
.gtb-agree-box th{ width:78px; color:var(--gt-ink); font-weight:700; }
.gtb-agree-box p{ margin:0; line-height:1.6; }
.gtb-agree-box--sm{ margin-top:8px; max-height:none; }
.gtb-agree .gtb-check{ padding-left:2px; font-size:14.5px; }
.gtb-captcha{ margin-top:26px; }
.gtb-cwrite .gtb-write-btns{ justify-content:flex-end; margin-top:30px; }

/* ---------------- 반응형 ---------------- */
@media (max-width:1024px){
  .gtb-cview-grid{ grid-template-columns:1fr; }
  .gtb-cinfo{ position:static; display:grid; grid-template-columns:1fr 1fr; column-gap:24px; }
  .gtb-cinfo > div:nth-last-child(2):nth-child(odd){ border-bottom:1px solid var(--gt-line); }
  .gtb-cwrite{ grid-template-columns:1fr; gap:34px; }
  .gtb-cwrite-side{ position:static; }
  .gtb-cwrite-form{ padding:36px 30px; }
}
@media (max-width:991px){
  .gtb{ font-size:15px; padding:0 16px 60px; }
  .gtb-cwrite{ width:calc(100% - 32px); }
  .gtb-toolbar{ flex-direction:column; align-items:stretch; }
  .gtb-search input{ flex:1; width:auto; min-width:0; }
  .gtb-nitem > a{ gap:14px; padding:18px 6px; }
  .gtb-ndate{ display:none; }
  .gtb-nmeta-date{ display:inline; }
  .gtb-ntitle{ font-size:16px; flex-wrap:wrap; }
  .gtb-ntext{ white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; flex:1 1 100%; order:5; }
  .gtb-go{ width:32px; height:32px; font-size:14px; }
  .gtb-bottom{ display:flex; flex-direction:column-reverse; align-items:stretch; }
  .gtb-btns{ margin-left:0; justify-content:flex-end; }
  .gtb-view-title{ font-size:23px; }
  .gtb-view-body{ padding:30px 2px 40px; }
  .gtb-view-con{ font-size:15.5px; }
  .gtb-files{ flex-direction:column; gap:8px; }
  .gtb-prevnext a{ gap:12px; }
  .gtb-pn-label{ width:52px; }
  .gtb-view-btns .gtb-btn{ min-width:72px; height:42px; padding:0 16px; font-size:14px; }
  .gtb-grid2{ grid-template-columns:1fr; }
  .gtb-write-btns{ position:sticky; bottom:0; margin:28px -4px 0; padding:12px 4px; background:linear-gradient(180deg, rgba(255,255,255,0), #fff 30%); }
  .gtb-write-btns .gtb-btn{ flex:1; min-width:0; }
  .gtb-write-btns .gtb-btn--lg{ flex:2; }

  .gtb-cintro{ padding:30px 24px; border-radius:20px; }
  .gtb-cintro h2{ font-size:24px; }
  .gtb-cintro-actions{ width:100%; flex-direction:column; align-items:stretch; }
  .gtb-cintro-tel{ justify-content:flex-start; }
  .gtb-crow--head{ display:none; }
  .gtb-crow, .gtb-crow.is-admin{ grid-template-columns:auto 1fr auto; grid-template-areas:"field field status" "subj subj subj" "name date date"; gap:8px 10px; padding:18px 6px; }
  .gtb-c-num{ display:none; }
  .gtb-c-field{ grid-area:field; text-align:left; }
  .gtb-c-status{ grid-area:status; text-align:right; }
  .gtb-c-subj{ grid-area:subj; font-size:15.5px; }
  .gtb-c-name{ grid-area:name; text-align:left; font-size:13.5px; color:var(--gt-mute); }
  .gtb-c-date{ grid-area:date; text-align:right; font-size:13px; }
  .gtb-c-tel{ display:none; }
  .gtb-toolbar-note{ align-items:flex-start; }

  .gtb-cview-head{ flex-direction:column; align-items:flex-start; }
  .gtb-cview-head h2{ font-size:23px; }
  .gtb-steps{ width:100%; }
  .gtb-steps li{ flex:1; width:auto; }
  .gtb-cinfo{ grid-template-columns:1fr; padding:6px 20px; border-radius:16px; }
  .gtb-cbox, .gtb-cadmin{ padding:22px 20px; border-radius:16px; }

  .gtb-cwrite-mark{ width:46px; margin-bottom:18px; }
  .gtb-cwrite-side h2{ font-size:25px; }
  .gtb-cwrite-side > p{ margin-bottom:22px; }
  .gtb-flow{ margin-bottom:22px; }
  .gtb-flow li{ padding:14px 0; }
  .gtb-cwrite-tel strong{ font-size:21px; }
  .gtb-cwrite-form{ padding:28px 20px; border-radius:20px; }
  .gtb-cwrite .gtb-write-btns{ justify-content:stretch; }
}

/* 게시판 — 이윰 페이지 번호 / 관리자 선택삭제 */
.gtb .gtb-paging .eb-pagination-wrap{ margin:0; padding:0; border:0; text-align:center; }
.gtb .gtb-paging ul, .gtb .gtb-paging .eb-pagination{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; border:0; }
.gtb .gtb-paging li{ list-style:none; margin:0; padding:0; float:none; border:0; }
.gtb .gtb-paging li a, .gtb .gtb-paging li span{ display:inline-grid; place-items:center; min-width:38px; height:38px; padding:0 10px; margin:0; float:none; border:1px solid transparent; border-radius:99px; background:transparent; font-size:14px; font-weight:600; line-height:1; color:var(--gt-mute); }
.gtb .gtb-paging li a:hover{ border-color:var(--gt-line); background:#fff; color:var(--gt-navy); }
.gtb .gtb-paging li.active a, .gtb .gtb-paging li.active span, .gtb .gtb-paging li a.active{ background:var(--gt-navy); border-color:var(--gt-navy); color:#fff; }
.gtb .gtb-paging li.disabled a{ opacity:.35; pointer-events:none; }
.gtb .gtb-paging li .sound_only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

.gtb-btn--sm{ min-width:0; height:36px; padding:0 16px; font-size:13.5px; }
.gtb-rowchk{ display:grid; place-items:center; width:44px; flex:none; align-self:stretch; cursor:pointer; }
.gtb-rowchk input{ -webkit-appearance:none; appearance:none; width:20px; height:20px; margin:0; border:1.5px solid #c3cfdd; border-radius:6px; background:#fff; cursor:pointer; transition:all .2s; }
.gtb-rowchk input:checked{ background:var(--gt-navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center/14px; border-color:var(--gt-navy); }
.gtb-nlist.has-check .gtb-nitem{ display:flex; align-items:stretch; }
.gtb-nlist.has-check .gtb-nitem > a{ flex:1; min-width:0; padding-left:8px; }
.gtb-crow-line{ display:flex; align-items:stretch; border-bottom:1px solid var(--gt-line); }
.gtb-crow-line > .gtb-crow{ flex:1; min-width:0; border-bottom:0; }
.gtb-crow-line--head{ background:var(--gt-soft); }
.gtb-admin-actions{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:10px 14px; border-radius:12px; background:var(--gt-soft); }
.gtb-admin-actions .gtb-check input{ width:20px; height:20px; border-radius:6px; }
@media (max-width:991px){
  .gtb-rowchk{ width:34px; }
  .gtb-nlist.has-check .gtb-nitem > a{ padding-left:2px; }
}

/* 게시판 상단 타이틀 띠 — 고정 헤더 아래로 내용이 겹치지 않게 */
.gtb-hero{ position:relative; display:flex; align-items:flex-end; min-height:420px; padding:150px 0 64px; margin:0 0 64px; overflow:hidden; background:#0e2338; }
.gtb-hero-bg{ position:absolute; inset:0; }
.gtb-hero-bg img{ width:100%; height:100%; object-fit:cover; opacity:.55; }
.gtb-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,35,56,.75) 0%, rgba(14,35,56,.35) 45%, rgba(14,35,56,.85) 100%); }
.gtb-hero-inner{ position:relative; z-index:1; width:100%; max-width:1200px; margin:0 auto; padding:0 20px; }
.gtb-hero-label{ margin:0 0 10px; font-size:13px; font-weight:800; letter-spacing:.22em; color:#9dc3e0; }
.gtb-hero-title{ margin:0; font-size:46px; font-weight:800; line-height:1.2; letter-spacing:-.02em; color:#fff; }
.gtb-hero-desc{ margin:14px 0 0; font-size:16.5px; color:rgba(255,255,255,.78); word-break:keep-all; }
@media (max-width:991px){
  .gtb-hero{ min-height:300px; padding:110px 0 40px; margin-bottom:40px; }
  .gtb-hero-title{ font-size:30px; }
  .gtb-hero-bg img{ object-position:50% 20%; }
}

/* =====================================================================
   헤더 — 메뉴별 드롭다운(네이비 · 사진 왼쪽) + 전화 · 상담 · 전체메뉴
   ※ 이 사이트는 a/span/div 글자색이 전역으로 지정돼 있어서, 헤더 안 글자색은 모두 따로 지정합니다.
   ===================================================================== */
#navBar.gh{ height:100px; z-index:1000; gap:0; }
.gh-logo{ position:relative; display:flex; align-items:center; height:100%; flex:none; }
.gh-logo img{ display:block; height:80px; width:auto; }
.gh-logo .gh-logo-open{ position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0; visibility:hidden; transition:opacity .2s; }
#navBar.gh-open #main-logo{ visibility:hidden; }
#navBar.gh-open .gh-logo-open{ opacity:1; visibility:visible; }

/* 네비는 헤더 정가운데, 로고는 왼쪽 · 전화/상담/전체메뉴는 오른쪽 */
.gh-nav{ position:absolute; top:0; left:50%; height:100%; transform:translateX(-50%); }
#navBar .gh-gnb{ --gh-px:30px; display:flex; flex-direction:row; align-items:stretch; height:100%; gap:10px; margin:0; padding:0; }
.gh-gnb > .gh-item{ position:relative; display:flex; align-items:center; }
#navBar .gh-gnb > .gh-item > a{ position:relative; isolation:isolate; display:flex; align-items:center; height:100%; padding:0 var(--gh-px) !important; /* 이윰 기본 .nav-link 여백이 덮어써서 !important */ font-size:17px; font-weight:600; letter-spacing:-.01em; white-space:nowrap; }
/* 호버: 글자 뒤에 둥근 배경이 살짝 차오름 */
#navBar .gh-gnb > .gh-item > a::before{ content:""; position:absolute; z-index:-1; left:calc(var(--gh-px) - 16px); right:calc(var(--gh-px) - 16px); top:50%; height:42px; margin-top:-21px; border-radius:99px; background:rgba(79,143,192,.12); opacity:0; transform:scale(.85); transition:opacity .25s, transform .3s cubic-bezier(.2,.8,.2,1); }
#navBar:not(.on-light):not(.gh-intro) .gh-gnb > .gh-item > a::before, #navBar.gh-open .gh-gnb > .gh-item > a::before{ background:rgba(255,255,255,.12); }
#navBar .gh-gnb > .gh-item.is-hover > a::before, #navBar .gh-gnb > .gh-item:hover > a::before{ opacity:1; transform:scale(1); }
#navBar .gh-gnb > .gh-item.is-hover > a{ color:#4f8fc0; }
/* 현재 페이지: 밑줄 고정 + 굵게 */
#navBar .gh-gnb > .gh-item > a::after{ content:""; position:absolute; left:var(--gh-px); right:var(--gh-px); bottom:28px; height:2px; background:#4f8fc0; transform:scaleX(0); transition:transform .25s; }
#navBar .gh-gnb > .gh-item.is-current > a{ font-weight:800; }
#navBar .gh-gnb > .gh-item.is-current > a::after{ transform:scaleX(1); }
#navBar.gh-open .gh-gnb > .gh-item > a{ color:#fff; }
#navBar:not(.on-light):not(.gh-intro) .gh-gnb > .gh-item.is-hover > a, #navBar.gh-open .gh-gnb > .gh-item.is-hover > a{ color:#9dc3e0; }
#navBar.gh-open .gh-gnb > .gh-item.is-current > a::after{ background:#9dc3e0; }

.gh-util{ display:flex; align-items:center; height:100%; flex:none; margin-left:auto; }
.gh-divider{ width:1px; height:18px; margin:0 26px 0 22px; background:rgba(255,255,255,.35); }
#navBar .gh-tel, #navBar .gh-tel span{ display:flex; align-items:center; gap:8px; font-size:15.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap; color:#fff; }
.gh-tel svg{ width:18px; height:18px; color:#9dc3e0; flex:none; }
#navBar .gh-cta{ display:inline-flex; align-items:center; height:44px; margin-left:20px; padding:0 22px; border-radius:99px; background:#fff; transition:background .25s, transform .25s; }
#navBar .gh-cta span{ color:#1b3a5f; font-size:15px; font-weight:800; white-space:nowrap; }
#navBar .gh-cta:hover{ transform:translateY(-1px); }
.gh-burger{ display:grid; place-items:center; width:46px; height:46px; margin-left:12px; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:transparent; color:#fff; cursor:pointer; transition:border-color .25s, background .25s; }
.gh-burger:hover{ background:rgba(79,143,192,.18); }
.gh-burger i{ position:relative; display:block; width:18px; height:2px; border-radius:2px; background:currentColor; }
.gh-burger i::before, .gh-burger i::after{ content:""; position:absolute; left:0; width:18px; height:2px; border-radius:2px; background:currentColor; transition:width .25s; }
.gh-burger i::before{ top:-6px; } .gh-burger i::after{ top:6px; width:12px; }
.gh-burger:hover i::after{ width:18px; }
/* 흰 배경 상태(서브페이지 · 메인 스크롤 후) */
#navBar.on-light .gh-divider{ background:rgba(30,41,59,.2); }
#navBar.on-light .gh-tel, #navBar.on-light .gh-tel span{ color:#1e293b; }
#navBar.on-light .gh-tel svg{ color:#4f8fc0; }
#navBar.on-light .gh-cta{ background:#1b3a5f; }
#navBar.on-light .gh-cta span{ color:#fff; }
#navBar.on-light .gh-burger{ color:#1e293b; border-color:#d3dce7; }
/* 드롭다운이 열렸을 때 — 헤더 전체가 남색 */
#navBar.gh-open, #navBar.gh-open.on-light{ background:rgba(14,35,56,.97); box-shadow:0 1px 0 rgba(255,255,255,.08); transform:none; }
#navBar.gh-open .gh-divider{ background:rgba(255,255,255,.3); }
#navBar.gh-open .gh-tel, #navBar.gh-open .gh-tel span{ color:#fff; }
#navBar.gh-open .gh-tel svg{ color:#9dc3e0; }
#navBar.gh-open .gh-cta{ background:#fff; }
#navBar.gh-open .gh-cta span{ color:#1b3a5f; }
#navBar.gh-open .gh-burger{ color:#fff; border-color:rgba(255,255,255,.35); }

/* 드롭다운 패널 */
.gh-mega{ position:absolute; left:0; right:0; top:100%; overflow:hidden; background:rgba(14,35,56,.97); border-top:1px solid rgba(255,255,255,.08); box-shadow:0 30px 50px -30px rgba(0,0,0,.55); clip-path:inset(0 0 100% 0); opacity:0; visibility:hidden; transition:clip-path .4s cubic-bezier(.6,0,.2,1), opacity .3s ease, visibility 0s linear .4s; }   /* 닫힐 땐 헤더 배경(.3초)과 같은 속도로 함께 사라짐 */
.gh-mega.is-open{ clip-path:inset(0 0 0 0); opacity:1; visibility:visible; transition:clip-path .4s cubic-bezier(.6,0,.2,1), opacity .15s ease, visibility 0s; }
.gh-mega-inner{ display:grid; grid-template-columns:440px minmax(0,1fr) 300px; min-height:300px; }
.gh-mega-photo{ position:relative; overflow:hidden; }
.gh-ph{ position:absolute; inset:0; background:#1d4470 center/cover no-repeat; opacity:0; transform:scale(1.06); transition:opacity .5s, transform 1.2s cubic-bezier(.2,.7,.2,1); }
.gh-ph.is-on{ opacity:1; transform:scale(1); }
.gh-ph::before{ content:""; position:absolute; inset:0; background:radial-gradient(90% 90% at 85% 10%, rgba(79,143,192,.45), rgba(79,143,192,0) 60%); }
.gh-ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,35,56,.1) 20%, rgba(14,35,56,.88) 100%); }
.gh-ph-cap{ position:absolute; left:100px; right:36px; bottom:36px; z-index:1; }
#navBar .gh-ph-cap em{ display:block; font-style:normal; font-size:12px; font-weight:800; letter-spacing:.2em; color:#9dc3e0; }
#navBar .gh-ph-cap strong{ display:block; margin:6px 0 8px; font-size:30px; font-weight:800; letter-spacing:-.02em; line-height:1.25; color:#fff; }
#navBar .gh-ph-cap p{ margin:0; max-width:300px; font-size:14.5px; line-height:1.65; color:rgba(255,255,255,.8); word-break:keep-all; }
.gh-mega-links{ display:flex; align-items:center; padding:34px 56px; }
.gh-links{ display:none; width:100%; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:4px 36px; margin:0; padding:0; list-style:none; }
.gh-links.is-on{ display:grid; animation:ghFade .35s ease both; }
@keyframes ghFade{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
#navBar .gh-links a{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 2px; border-bottom:1px solid rgba(255,255,255,.12); border-radius:0; transition:background .25s, padding .25s; }
#navBar .gh-links a span{ font-size:16.5px; font-weight:600; color:rgba(255,255,255,.8); white-space:nowrap; transition:color .2s; }
#navBar .gh-links a i{ font-style:normal; color:rgba(255,255,255,.35); transition:transform .25s, color .2s; }
/* 마우스 올림: 아래 선이 왼쪽부터 그어지며 글자가 밝아짐 */
#navBar .gh-links a::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:#4f8fc0; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.6,0,.2,1); }
#navBar .gh-links a:hover::after{ transform:scaleX(1); }
#navBar .gh-links a:hover span{ color:#fff; }
#navBar .gh-links a:hover i{ color:#9dc3e0; transform:translateX(4px); }
/* 지금 보고 있는 페이지: 은은한 하늘색 칸 + 왼쪽 막대 + 하늘색 글자 */
#navBar .gh-links a.is-current{ padding:15px 14px 15px 18px; border-bottom-color:transparent; border-radius:10px; background:rgba(79,143,192,.16); }
#navBar .gh-links a.is-current::before{ content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:3px; background:#9dc3e0; }
#navBar .gh-links a.is-current::after{ display:none; }
#navBar .gh-links a.is-current span{ color:#9dc3e0; font-weight:800; }
#navBar .gh-links a.is-current i{ color:#9dc3e0; }
#navBar .gh-links a.is-current:hover{ background:rgba(79,143,192,.26); }
.gh-mega-side{ display:flex; flex-direction:column; justify-content:center; gap:10px; padding:30px 100px 30px 0; }
#navBar .gh-card{ display:flex; flex-direction:column; gap:4px; padding:18px 20px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); transition:background .25s, transform .25s; }
#navBar .gh-card small{ font-size:12px; font-weight:700; color:rgba(255,255,255,.55); }
#navBar .gh-card strong{ font-size:16px; font-weight:800; color:#fff; }
#navBar .gh-card:hover{ transform:translateY(-2px); background:rgba(255,255,255,.1); }
#navBar .gh-card.is-hours{ gap:0; padding:16px 16px 12px; background:#fff; border-color:#fff; }
#navBar .gh-card.is-hours small{ display:flex; justify-content:space-between; margin-bottom:8px; color:#4f8fc0; }
#navBar .gh-card.is-hours small i{ font-style:normal; color:#4f8fc0; transition:transform .25s; }
#navBar .gh-card.is-hours:hover small i{ transform:translateX(3px); }
#navBar .gh-hours-row{ display:flex; justify-content:space-between; gap:8px; padding:5px 0; border-top:1px solid #eef2f6; font-size:13.5px; }
#navBar .gh-hours-row em{ font-style:normal; white-space:nowrap; color:#64748b; }
#navBar .gh-hours-row b{ min-width:7em; font-weight:800; white-space:nowrap; text-align:center; font-variant-numeric:tabular-nums; color:#1b3a5f; }
#navBar .gh-hours-row.is-off b{ color:#e0413b; }
.gh-dim{ position:fixed; inset:0; z-index:999; background:rgba(14,35,56,.4); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.gh-dim.is-on{ opacity:1; visibility:visible; }

/* 전체메뉴 */
html.gh-lock{ overflow:hidden; }
.gh-all{ position:fixed; inset:0; z-index:10050; overflow-y:auto; overscroll-behavior:contain; background:#0e2338; clip-path:circle(0% at calc(100% - 123px) 50px); visibility:hidden; transition:clip-path .6s cubic-bezier(.7,0,.2,1), visibility 0s linear .6s; }
.gh-all.is-open{ clip-path:circle(150% at calc(100% - 123px) 50px); visibility:visible; transition:clip-path .6s cubic-bezier(.7,0,.2,1), visibility 0s; }
.gh-all-top{ position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; height:100px; padding:0 100px; background:#0e2338; }
.gh-all-logo img{ display:block; height:72px; width:auto; }
.gh-all-close{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; cursor:pointer; transition:transform .3s, background .3s; }
.gh-all-close:hover{ transform:rotate(90deg); background:rgba(255,255,255,.08); }
.gh-all-close svg{ width:18px; height:18px; }
.gh-all-body{ display:grid; grid-template-columns:360px minmax(0,1fr); gap:70px; padding:30px 100px 80px; }
.gh-all-side{ display:flex; flex-direction:column; }
.gh-all .gh-all-eyebrow{ margin:0; font-size:13px; font-weight:800; letter-spacing:.22em; color:#9dc3e0; }
.gh-all .gh-all-lead{ margin:10px 0 28px; font-size:28px; line-height:1.4; font-weight:800; letter-spacing:-.02em; color:#fff; word-break:keep-all; }
.gh-all-info{ display:flex; flex-direction:column; gap:12px; padding:24px; border-radius:18px; background:linear-gradient(150deg, #2b5b8a, #1b3a5f 60%, #16324f); border:1px solid rgba(255,255,255,.12); }
.gh-all .gh-all-label{ font-size:13px; color:rgba(255,255,255,.65); }
.gh-all .gh-all-tel{ font-size:28px; font-weight:800; letter-spacing:.01em; color:#fff; }
.gh-all-row{ display:flex; justify-content:space-between; gap:12px; }
.gh-all .gh-all-row span{ font-size:14px; color:rgba(255,255,255,.65); }
.gh-all .gh-all-row b{ min-width:7em; font-size:14px; text-align:center; font-variant-numeric:tabular-nums; color:#fff; }
.gh-all .gh-all-row.is-off b{ color:#ff9b8f; }
.gh-all .gh-all-btn{ display:flex; align-items:center; justify-content:center; height:48px; margin-top:6px; border-radius:99px; background:#fff; font-weight:800; font-size:15px; color:#1b3a5f; }
.gh-all-admin{ display:flex; gap:14px; margin-top:18px; }
.gh-all .gh-all-admin a{ font-size:13px; color:rgba(255,255,255,.5); text-decoration:underline; text-underline-offset:3px; }
.gh-all-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:40px; align-content:start; }
.gh-all-col{ opacity:0; transform:translateY(24px); transition:opacity .5s, transform .5s; }
.gh-all.is-open .gh-all-col{ opacity:1; transform:none; }
.gh-all.is-open .gh-all-col:nth-child(1){ transition-delay:.3s; } .gh-all.is-open .gh-all-col:nth-child(2){ transition-delay:.38s; }
.gh-all.is-open .gh-all-col:nth-child(3){ transition-delay:.46s; } .gh-all.is-open .gh-all-col:nth-child(4){ transition-delay:.54s; }
.gh-all.is-open .gh-all-col:nth-child(n+5){ transition-delay:.6s; }
.gh-all .gh-all-col em{ display:block; font-style:normal; font-size:13px; font-weight:800; letter-spacing:.1em; color:#4f8fc0; }
.gh-all-col h3{ display:flex; align-items:center; justify-content:space-between; margin:8px 0 20px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.15); }
.gh-all .gh-all-col h3 a{ font-size:28px; font-weight:800; letter-spacing:-.02em; color:#fff; }
.gh-all-toggle{ display:none; }
.gh-all-sub ul{ margin:0; padding:0; list-style:none; }
.gh-all .gh-all-sub a{ display:inline-flex; align-items:center; gap:8px; padding:7px 0; font-size:16px; color:rgba(255,255,255,.66); transition:color .2s; }
.gh-all .gh-all-sub a::before{ content:""; width:0; height:2px; background:#4f8fc0; transition:width .25s; }
.gh-all .gh-all-sub a:hover{ color:#fff; }
.gh-all .gh-all-sub a:hover::before{ width:12px; }
.gh-all .gh-all-sub a.is-current{ color:#9dc3e0; font-weight:800; }

@media (max-width:1600px){
  .header-wrap.gh{ padding:0 48px; }
  #navBar .gh-gnb{ --gh-px:24px; gap:4px; }
  #navBar .gh-gnb > .gh-item > a{ font-size:16px; }
  #navBar .gh-tel span{ display:none; }
  .gh-divider{ margin:0 16px 0 14px; }
  .gh-mega-inner{ grid-template-columns:360px minmax(0,1fr) 260px; }
  .gh-ph-cap{ left:48px; } .gh-mega-side{ padding-right:48px; } .gh-mega-links{ padding:30px 40px; }
  .gh-all-top{ padding:0 48px; } .gh-all-body{ padding:30px 48px 70px; gap:50px; grid-template-columns:320px minmax(0,1fr); }
  .gh-all{ clip-path:circle(0% at calc(100% - 71px) 50px); } .gh-all.is-open{ clip-path:circle(150% at calc(100% - 71px) 50px); }
}
@media (max-width:1200px){
  #navBar .gh-gnb{ --gh-px:17px; gap:0; }
}
@media (max-width:1024px){
  #navBar.gh{ height:72px; }
  .header-wrap.gh{ padding:0 18px; }
  .gh-logo img{ height:52px; }
  .gh-nav, .gh-divider, #navBar .gh-tel, .gh-mega, .gh-dim{ display:none; }
  #navBar .gh-cta{ height:38px; margin-left:0; padding:0 15px; }
  #navBar .gh-cta span{ font-size:13.5px; }
  .gh-burger{ width:40px; height:40px; margin-left:8px; }
  .gh-all{ clip-path:circle(0% at calc(100% - 38px) 36px); } .gh-all.is-open{ clip-path:circle(160% at calc(100% - 38px) 36px); }
  .gh-all-top{ height:72px; padding:0 18px; }
  .gh-all-logo img{ height:50px; }
  .gh-all-close{ width:40px; height:40px; }
  .gh-all-body{ grid-template-columns:1fr; gap:34px; padding:10px 22px 60px; }
  .gh-all-side{ order:2; }
  .gh-all .gh-all-lead{ font-size:22px; margin-bottom:18px; }
  .gh-all-grid{ grid-template-columns:1fr; gap:0; }
  .gh-all-col{ border-bottom:1px solid rgba(255,255,255,.12); }
  .gh-all .gh-all-col em{ display:none; }
  .gh-all-col h3{ margin:0; padding:16px 0; border:0; cursor:pointer; }
  .gh-all .gh-all-col h3 a{ font-size:20px; }
  .gh-all-toggle{ display:grid; place-items:center; width:40px; height:40px; margin-right:-10px; border:0; background:transparent; cursor:pointer; }
  .gh-all-toggle span{ display:block; width:10px; height:10px; border-right:2px solid rgba(255,255,255,.6); border-bottom:2px solid rgba(255,255,255,.6); transform:rotate(45deg) translateY(-3px); transition:transform .25s; }
  .gh-all-col.is-exp .gh-all-toggle span{ transform:rotate(-135deg); }
  .gh-all-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s; }
  .gh-all-sub > ul{ overflow:hidden; }
  .gh-all-col.is-exp .gh-all-sub{ grid-template-rows:1fr; }
  .gh-all-col.is-exp .gh-all-sub > ul{ padding-bottom:14px; }
  .gh-all .gh-all-sub a{ display:flex; width:100%; font-size:15px; padding:10px 0; }
}

/* 헤더 보정 — 이윰 style.css의 .navbar-nav{max-height:59px} 때문에 메뉴가 위로 쏠리던 문제 */
#navBar .gh-gnb{ max-height:none; }
/* 메인 인트로(흰 화면) 동안: 남색 로고 · 남색 글자 */
.gh-logo .gh-logo-intro{ position:absolute; left:0; top:50%; transform:translateY(-50%); opacity:0; visibility:hidden; transition:opacity .2s; }
#navBar.gh-intro:not(.gh-open) #main-logo{ visibility:hidden; }
#navBar.gh-intro:not(.gh-open) .gh-logo-intro{ opacity:1; visibility:visible; }
#navBar.gh-intro:not(.gh-open) .gh-gnb > .gh-item > a{ color:#1e293b; }
#navBar.gh-intro:not(.gh-open) .gh-gnb > .gh-item.is-hover > a{ color:#4f8fc0; }
#navBar.gh-intro:not(.gh-open) .gh-divider{ background:rgba(30,41,59,.2); }
#navBar.gh-intro:not(.gh-open) .gh-tel, #navBar.gh-intro:not(.gh-open) .gh-tel span{ color:#1e293b; }
#navBar.gh-intro:not(.gh-open) .gh-tel svg{ color:#4f8fc0; }
#navBar.gh-intro:not(.gh-open) .gh-cta{ background:#1b3a5f; }
#navBar.gh-intro:not(.gh-open) .gh-cta span{ color:#fff; }
#navBar.gh-intro:not(.gh-open) .gh-burger{ color:#1e293b; border-color:#d3dce7; }
/* 헤더 보정 2 — 드롭다운 뒤로 페이지 글자가 비치지 않게 불투명 처리 */
#navBar.gh-open, #navBar.gh-open.on-light{ background:#0e2338; }
.gh-mega{ background:#0e2338; }

/* =====================================================================
   비급여 안내 게시판(gamtan_nonpay) — 관리자 바 · 수정 링크 · 항목 추가/보기 화면
   (표·검색·분류 디자인은 위쪽 "비급여 안내 (.np-)" 블록을 씁니다)
   ===================================================================== */
/* 관리자만 보이는 안내 줄 */
.np-admin{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:16px; padding:12px 14px 12px 18px; border:1px dashed #cfd9e6; border-radius:14px; background:#fbfcfe; }
.np-admin p{ margin:0; font-size:13.5px; color:#64748b; word-break:keep-all; }
.np-admin p b{ margin-right:8px; padding:3px 10px; border-radius:99px; background:#0e2338; font-size:12px; color:#fff; }
.np-admin-btns{ display:flex; gap:8px; }
.np-admin-link, .np-admin-add{ display:inline-flex; align-items:center; height:38px; padding:0 16px; border-radius:99px; font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap; }
.np-admin-link{ border:1px solid #cfd9e6; background:#fff; color:#1b3a5f; }
.np-admin-add{ background:#1b3a5f; color:#fff; }
.np-admin-add:hover{ background:#0e2338; }

/* 표 안 "수정" (관리자만) */
.np-table td.c-name .np-item-name{ color:#1e293b; }
.np-edit{ display:inline-block; margin-left:8px; padding:2px 9px; border:1px solid #cfd9e6; border-radius:99px; font-size:12px; font-weight:700; color:#4f8fc0; text-decoration:none; vertical-align:2px; }
.np-edit:hover{ border-color:#1b3a5f; color:#1b3a5f; }

/* 항목 추가·수정 화면 — 엑셀 칸과 같은 입력칸 */
.np-write{ max-width:860px; padding-top:20px; }
.np-help-top{ margin:0 0 22px; padding:12px 16px; border-radius:12px; background:#f5f8fb; font-size:14px; color:#64748b; word-break:keep-all; }
.np-grid{ display:grid; gap:0 14px; }
.np-grid--2{ grid-template-columns:1fr 1fr; }
.np-grid--code{ grid-template-columns:.8fr 2fr; }
.np-grid--4{ grid-template-columns:repeat(4, 1fr); }
.np-grid .gtb-field select{ width:100%; }
.np-help-tight{ margin:-6px 0 22px; line-height:1.6; word-break:keep-all; }
.np-warn{ margin:0; padding:12px 14px; border-radius:12px; background:#fff7ed; font-size:14px; color:#9a3412; word-break:keep-all; }

/* 항목 하나 보기 */
.np-view{ max-width:760px; padding-top:20px; }
.np-view-card{ padding:30px 32px; border:1px solid #e5e9f0; border-radius:20px; background:#fff; }
.np-view-cate{ display:inline-block; padding:4px 12px; border-radius:99px; background:#eaf1f9; font-size:13px; font-weight:700; color:#1b3a5f; }
.np-view-name{ margin:12px 0 18px; font-size:24px; font-weight:800; color:#0e2338; word-break:keep-all; }
.np-view-list{ margin:0; border-top:1px solid #eef2f6; }
.np-view-list > div{ display:grid; grid-template-columns:150px 1fr; gap:12px; padding:11px 0; border-bottom:1px solid #f0f3f7; }
.np-view-list dt{ font-size:14px; font-weight:600; color:#94a3b8; }
.np-view-list dd{ margin:0; font-size:15px; color:#1e293b; word-break:keep-all; }
.np-view-empty{ color:#cbd5e1; }
.np-view-order{ margin:12px 0 0; font-size:13px; color:#94a3b8; }

/* 항목 추가·수정 팝업 */
.np-modal{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(8,20,36,.55); backdrop-filter:blur(3px); }
.np-modal[hidden]{ display:none; }
.np-modal-box{ position:relative; width:min(820px, 100%); height:min(88vh, 900px); border-radius:22px; overflow:hidden; background:#fff; box-shadow:0 30px 70px -20px rgba(8,20,36,.5); }
.np-modal-box iframe{ display:block; width:100%; height:100%; border:0; }
.np-modal-x{ position:absolute; right:14px; top:14px; z-index:2; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:#f1f5f9; color:#1b3a5f; cursor:pointer; }
.np-modal-x svg{ width:18px; height:18px; }
.np-modal-x:hover{ background:#1b3a5f; color:#fff; }
html.np-modal-open, html.np-modal-open body{ overflow:hidden; }
.np-modal-saving{ position:absolute; inset:0; z-index:1; display:none; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:#fff; font-size:15px; font-weight:700; color:#1b3a5f; }
.np-modal-box.is-saving .np-modal-saving{ display:flex; }
.np-spin{ width:34px; height:34px; border-radius:50%; border:3px solid #e3ebf4; border-top-color:#1b3a5f; animation:npSpin .8s linear infinite; }
@keyframes npSpin{ to{ transform:rotate(360deg); } }
html.np-leaving body{ visibility:hidden; }
.np-no-anim .np-body, .np-no-anim .np-cat, .np-no-anim .np-head .np-arrow{ transition:none !important; }
.np-del-link{ margin:22px 0 0; text-align:center; }
.np-del-link a{ font-size:13.5px; color:#94a3b8; text-decoration:underline; }
.np-del-link a:hover{ color:#d14343; }

/* 팝업 안에서 열린 화면: 사이트 헤더·푸터·빠른버튼 등은 숨기고 입력 화면만 */
html.np-in-modal #navBar, html.np-in-modal .site-footer, html.np-in-modal .fab-wrap, html.np-in-modal .fab-mbar,
html.np-in-modal .sub-stage, html.np-in-modal .np-hide-in-modal, html.np-in-modal #hd-h1, html.np-in-modal .to-content{ display:none !important; }
html.np-in-modal body{ padding:0 !important; background:#fff; }
html.np-in-modal .np-write, html.np-in-modal .np-view{ padding-top:28px; padding-bottom:40px; }

@media (max-width:991px){
  .np-admin{ padding:12px 14px; }
  .np-admin-btns{ width:100%; }
  .np-admin-btns a{ flex:1; justify-content:center; }
  .np-grid--2, .np-grid--code, .np-grid--4{ grid-template-columns:1fr 1fr; gap:0 10px; }
  .np-view-card{ padding:24px 20px; }
  .np-view-name{ font-size:21px; }
  .np-view-list > div{ grid-template-columns:116px 1fr; }
  .np-view .gtb-view-btns{ flex-direction:column; }
  .np-view .gtb-view-btns > div{ display:flex; gap:8px; }
  .np-view .gtb-view-btns .gtb-btn{ flex:1; min-width:0; white-space:nowrap; }
  .np-modal{ padding:0; }
  .np-modal-box{ width:100%; height:100%; border-radius:0; }
}



@media (max-width:991px){
  /* 인트로 문구 */
  .main-section .intro-headline{ top:22%; left:0; right:0; transform:none; max-width:none; padding:0 16px; }
  .main-section .intro-headline .line1{ font-size:40px; }
  .main-section .intro-headline .line2{ font-size:50px; }
 
  /* 히어로: 한 화면 그대로, 고정·축소 없음 (진료센터 카드는 아래 새 섹션으로) */
  .main-section #stage{ height:auto; }
  .main-section #pinEl{ position:relative; height:100svh; }
  .main-section #pinEl :is(.biz-heading, .side-card, .car-nav, .car-dots){ display:none; }
  .main-section .hero-copy{ left:20px; right:20px; max-width:none; }
  .main-section .hero-copy h1{ font-size:32px; margin-bottom:16px; }
  .main-section .hero-copy p{ font-size:15px; line-height:1.6; padding-top:14px; }
  .main-section .hero-cta{ left:20px; padding:5px 5px 5px 18px; gap:10px; }
  .main-section .hero-cta .hero-cta-txt{ font-size:13px; }
  .main-section .hero-cta .hero-cta-dot{ width:30px; height:30px; }
  .main-section .hero-cta .hero-cta-arr{ font-size:13px; }
 
  /* 공통: 섹션 제목 + 옆으로 넘기는 카드 줄 */
  .main-section .m-sec{ padding:64px 0 56px; }
  .main-section .m-head{ padding:0 20px; }
  .main-section .m-head .eyebrow{ display:block; margin-bottom:10px; font-size:12.5px; font-weight:800; letter-spacing:.2em; color:#4f8fc0; }
  .main-section .m-head h2{ margin:0; font-size:24px; font-weight:800; line-height:1.4; letter-spacing:-.02em; color:#0e2338; word-break:keep-all; }
  .main-section .m-head h2 em{ display:block; font-style:normal; color:#4f8fc0; }
  .main-section .m-head h2 em + br{ display:none; }
  .main-section .m-head p{ margin:12px 0 0; font-size:14.5px; line-height:1.7; color:#64748b; word-break:keep-all; }
  .main-section .m-track{
    display:flex; align-items:flex-start; gap:12px; margin-top:26px; padding:0 20px 6px;
    overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 20px; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .main-section .m-track::-webkit-scrollbar{ display:none; }
  .main-section .m-dots{ display:flex; justify-content:center; margin-top:14px; }
  .main-section .m-dots button{ position:relative; width:14px; height:22px; min-width:0; padding:0; border:0; border-radius:0; background:none; -webkit-appearance:none; appearance:none; cursor:pointer; transition:width .3s ease; }
  .main-section .m-dots button::before{ content:''; position:absolute; left:4px; right:4px; top:50%; height:6px; margin-top:-3px; border-radius:3px; background:#cbd5e1; transition:background-color .3s ease; }
  .main-section .m-dots button.is-on{ width:28px; }
  .main-section .m-dots button.is-on::before{ background:#1b3a5f; }
 
  /* ① 진료센터 카드 */
  .main-section .m-biz-card{
    position:relative; flex:0 0 min(78%, 340px); height:400px; padding:22px; border-radius:22px; overflow:hidden; scroll-snap-align:start;
    display:flex; flex-direction:column; justify-content:flex-end; background:#12233a; text-decoration:none;
  }
  .main-section .m-biz-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .main-section .m-biz-shade{ position:absolute; inset:0; background:linear-gradient(0deg, rgba(5,15,30,.78) 0%, rgba(5,15,30,0) 62%); }
  .main-section .m-biz-num{ position:absolute; left:22px; top:20px; font-size:13px; font-weight:800; letter-spacing:.1em; color:rgba(255,255,255,.75); }
  .main-section .m-biz-txt{ position:relative; display:flex; flex-direction:column; gap:8px; }
  .main-section .m-biz-txt b{ font-size:25px; font-weight:800; color:#fff; }
  .main-section .m-biz-txt em{ font-style:normal; font-size:14px; line-height:1.6; color:rgba(255,255,255,.85); word-break:keep-all; }
  .main-section .m-biz-go{ position:absolute; right:18px; top:16px; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:#fff; font-style:normal; font-size:16px; color:#0e2338; }
 
  /* ② 의료진 카드 (원래 의료진 섹션은 숨김) */
  .main-section .vision-stage{ display:none; }
  /* ② 의료진 — 화면에 멈춘 채로 파란 배경에서 흰색이 밑에서 차오르며 진료과가 떠오름 (PC 비전 섹션의 모바일판) */
  .main-section .m-team{ padding-top:0; background:#fdfeff; }
  .main-section .m-vis-wrap{ height:calc(100svh - 148px + 55svh); }   /* 멈춘 채로 55svh만큼 더 내려야 풀림 */
  .main-section .m-vis{ position:sticky; top:72px; height:calc(100svh - 148px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; isolation:isolate; }   /* 148px = 헤더 72 + 하단바 76 */
  .main-section .m-vis::before, .main-section .m-vis::after{ content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; }
  .main-section .m-vis::before{ background:linear-gradient(160deg, #0e2338 0%, #1b3a5f 55%, #2b6ca8 100%); }
  .main-section .m-vis::after{ background:#fdfeff; clip-path:inset(100% 0 0 0); -webkit-clip-path:inset(100% 0 0 0); transition:clip-path 1s ease, -webkit-clip-path 1s ease; }
  .main-section .m-team.is-light .m-vis::after{ clip-path:inset(0 0 0 0); -webkit-clip-path:inset(0 0 0 0); }
  .main-section .m-vis-stage{ position:relative; flex:none; height:320px; }
  .main-section .m-vis-stage::before{ content:''; position:absolute; left:50%; top:160px; width:420px; height:420px; margin:-210px 0 0 -210px; pointer-events:none;
    background:radial-gradient(circle, transparent 104px, rgba(90,170,255,.12) 105px, rgba(90,170,255,.12) 106px, transparent 107px),
               radial-gradient(circle, transparent 144px, rgba(90,170,255,.1) 145px, rgba(90,170,255,.1) 146px, transparent 147px),
               radial-gradient(circle, transparent 184px, rgba(90,170,255,.08) 185px, rgba(90,170,255,.08) 186px, transparent 187px); }
  .main-section .m-vis-orb{ position:absolute; left:50%; top:160px; width:124px; height:124px; margin:-62px 0 0 -62px; border-radius:50%; display:grid; place-items:center;
    box-shadow:0 0 40px rgba(70,150,255,.25) inset, 0 0 30px rgba(70,150,255,.18); }
  .main-section .m-vis-orb::before{ content:''; position:absolute; inset:0; border-radius:50%; padding:6px;
    background:conic-gradient(from var(--ring-angle), rgba(255,255,255,.95), rgba(110,180,255,.25) 22%, rgba(70,150,255,.95) 50%, rgba(110,180,255,.25) 78%, rgba(255,255,255,.95) 100%);
    -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
    animation:ring-rotate 3s linear infinite paused; }
  .main-section .m-team.in-view .m-vis-orb::before{ animation-play-state:running; }
  .main-section .m-team.is-light .m-vis-orb::before{ background:conic-gradient(from var(--ring-angle), #2b6ca8, rgba(79,143,192,.25) 22%, #4f8fc0 50%, rgba(79,143,192,.25) 78%, #2b6ca8 100%); }
  .main-section .m-vis-label{ grid-area:1/1; width:min-content; text-align:center; font-size:17px; line-height:1.2; font-weight:800; letter-spacing:2px; color:#fff; transition:opacity .4s ease; }
  .main-section .m-vis-sym{ grid-area:1/1; width:70px; height:auto; opacity:0; translate:0 6px; transition:opacity .25s ease, translate .25s ease; }
  .main-section .m-team.is-light .m-vis-label{ opacity:0; }
  .main-section .m-team.is-light .m-vis-sym{ opacity:1; translate:0 0; transition:opacity .5s ease .25s, translate .6s ease .25s; }
  .main-section .m-vis-depts > span{ position:absolute; left:50%; top:160px; translate:calc(-50% + var(--x)) calc(-50% + var(--y)); white-space:nowrap; padding:8px 13px; border-radius:99px; background:#fff; color:#1b3a5f; font-size:12px; font-weight:800;
    box-shadow:0 12px 24px -12px rgba(14,35,56,.35), 0 0 0 1px #e3ebf4; opacity:0; scale:.6; transition:opacity .25s ease, scale .3s ease; }
  .main-section .m-vis-depts > span i{ font-style:normal; color:#4f8fc0; margin-right:5px; }
  .main-section .m-vis-depts > span:nth-child(1){ --x:0px;     --y:-138px; }
  .main-section .m-vis-depts > span:nth-child(2){ --x:116px;   --y:-42.6px; }
  .main-section .m-vis-depts > span:nth-child(3){ --x:71.7px;  --y:111.6px; }
  .main-section .m-vis-depts > span:nth-child(4){ --x:-71.7px; --y:111.6px; }
  .main-section .m-vis-depts > span:nth-child(5){ --x:-116px;  --y:-42.6px; }
  .main-section .m-team.is-light .m-vis-depts > span{ opacity:1; scale:1; animation:mVisBob 3.2s ease-in-out infinite; animation-delay:calc(var(--i) * -.64s);
    transition:opacity .5s ease calc(.35s + var(--i) * .12s), scale .6s cubic-bezier(.2,1.4,.4,1) calc(.35s + var(--i) * .12s); }
  @keyframes mVisBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }
  .main-section .m-vis-copies{ display:grid; margin:10px 20px 0; text-align:center; }
  .main-section .m-vis-copies p{ grid-area:1/1; margin:0; font-size:15px; line-height:1.75; word-break:keep-all; }
  .main-section .m-vis-copy{ color:rgba(255,255,255,.78); transition:opacity .5s ease; }
  .main-section .m-vis-copy2{ color:#1e293b; opacity:0; transform:translateY(10px); transition:opacity .25s ease, transform .25s ease; }
  .main-section .m-vis-copy2 b{ color:#1b3a5f; font-weight:800; }
  .main-section .m-team.is-light .m-vis-copy{ opacity:0; }
  .main-section .m-team.is-light .m-vis-copy2{ opacity:1; transform:none; transition:opacity .6s ease .35s, transform .6s ease .35s; }
  .main-section .m-team .m-track{ margin-top:30px; }
  @media (prefers-reduced-motion: reduce){ .main-section .m-team.is-light .m-vis-depts > span{ animation:none; } }
  .main-section .m-doc{ display:flex; flex-direction:column; flex:0 0 min(72%, 300px); border-radius:22px; overflow:hidden; background:#fff; text-decoration:none; scroll-snap-align:start; box-shadow:0 0 0 1px #e3ebf4, 0 18px 36px -24px rgba(14,35,56,.35); }
  .main-section .m-doc-photo{ display:block; height:250px; background:#e8eef5 center top / cover no-repeat; }
  .main-section .m-doc-body{ display:flex; flex-direction:column; align-items:flex-start; padding:18px 18px 16px; }
  .main-section .m-doc-dept{ display:inline-block; padding:4px 11px; border-radius:99px; background:rgba(28,95,158,.09); font-size:12px; font-weight:700; color:#4f8fc0; }
  .main-section .m-doc-name{ margin:9px 0 4px; font-size:21px; font-weight:800; color:#0e2338; }
  .main-section .m-doc-line{ font-size:13.5px; line-height:1.5; color:#64748b; word-break:keep-all; }
  .main-section .m-doc-go{ display:flex; align-items:center; justify-content:space-between; align-self:stretch; margin-top:14px; padding-top:12px; border-top:1px solid #eef2f6; font-size:13.5px; font-weight:700; color:#1b3a5f; }
  .main-section .m-doc-go i{ font-style:normal; color:#4f8fc0; }
  .main-section .m-more-wrap{ margin-top:22px; padding:0 20px; }
  .main-section .m-more{ display:flex; align-items:center; justify-content:center; gap:8px; height:50px; border:1px solid #d5e0ec; border-radius:99px; font-size:14.5px; font-weight:700; color:#1b3a5f; text-decoration:none; }
  .main-section .m-more i{ font-style:normal; color:#4f8fc0; }
  .main-section .m-more i{ font-style:normal; color:#9dc3e0; }
 
  /* ③ 어디가 불편하세요? — 고정 없이, 처음부터 카드·전화 버튼까지 다 보임 */
  .main-section .stage.connect-stage{ height:auto; }
  .main-section .connect-pin{ position:relative; height:auto; padding:68px 0 72px; background:linear-gradient(180deg, #3f7fc0 0%, #1c4d84 45%, #0a2c54 100%); }
  .main-section .connect-find{ width:100%; padding:0 20px; }
 
  /* ④ 간호·간병 병동 — 세 가지 특징을 세로로 쌓아서 모두 보이게 */
  .main-section .flower-section{ max-width:none; padding:64px 20px 56px; }
  .main-section .flower-header{ gap:14px; margin-bottom:20px; }
  .main-section .flower-header .eyebrow{ font-size:12.5px; margin-bottom:10px; }
  .main-section .flower-header h2{ font-size:24px; }
  .main-section .flower-cta{ white-space:normal; font-size:12.5px; padding:9px 16px; }
  .main-section .flower-panel{ height:auto; border-radius:20px; }
  .main-section .flower-overlay{ background:rgba(5,15,30,.6); }
  .main-section .flower-zones{ flex-direction:column; }
  .main-section .flower-zone{ gap:10px; padding:22px 20px; border-right:none; border-bottom:1px solid rgba(255,255,255,.18); }
  .main-section .flower-zone:last-child{ border-bottom:none; }
  .main-section .flower-zone-info{ display:flex; align-items:center; gap:10px; opacity:1; transform:none; }
  .main-section .flower-icon{ width:34px; height:34px; margin:0; border-radius:10px; font-size:15px; }
  .main-section .flower-zone-info p{ font-size:12px; letter-spacing:.06em; line-height:1.4; }
  .main-section .flower-zone-label{ font-size:18px; color:#fff; }
 
  /* 푸터 */
  .site-footer{ padding:52px 20px 0; }
  .site-footer .footer-top{ gap:34px; padding-bottom:36px; }
  .site-footer .footer-brand .footer-logo img{ height:72px; }
  .site-footer .footer-brand .footer-desc{ text-align:left; }
  .site-footer .footer-nav{ display:grid; grid-template-columns:1fr 1fr; gap:28px 16px; }
  .site-footer .footer-col{ gap:9px; min-width:0; }
  .site-footer .footer-col-title{ font-size:13px; }
  .site-footer .footer-col a{ font-size:14px; }
  .site-footer .footer-meta{ padding:20px 0; font-size:12.5px; line-height:1.8; }
  .site-footer .footer-legal{ gap:14px; padding-bottom:26px; }
  .site-footer .footer-wordmark{ padding:0; font-size:64px; }
  
  .sub-section{width:90%;}
}

/* 질환 모달 "치료 방법" 안의 치료 페이지 링크 — 번호 줄 높이에 맞춰 작게 */
.sctr-v2 .sctr-cm2-path a.sctr-treat-link{ padding:2px 12px 2px 14px; margin:-2px 0; font-size:15px; }

/* =====================================================================
   약관·정책 페이지 (.lg-) — 개인정보처리방침 · 이용약관 · 이메일무단수집거부
   ===================================================================== */
.lg-page{ padding:170px 0 120px; background:#f5f8fb; }
.lg-wrap{ width:min(920px, calc(100% - 40px)); margin:0 auto; }
.lg-page .lg-eyebrow{ display:block; font-size:13px; font-weight:800; letter-spacing:.22em; color:#4f8fc0; }
.lg-page .lg-title{ margin:10px 0 0; font-size:40px; font-weight:800; letter-spacing:-.02em; color:#0e2338; }
.lg-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:28px 0 24px; }
.lg-page .lg-tabs a{ padding:10px 18px; border-radius:99px; border:1px solid #d3dce7; background:#fff; font-size:14.5px; font-weight:700; color:#475569; text-decoration:none; transition:border-color .2s, color .2s; }
.lg-page .lg-tabs a:hover{ border-color:#1b3a5f; color:#1b3a5f; }
.lg-page .lg-tabs a.is-on{ border-color:#1b3a5f; background:#1b3a5f; color:#fff; }

.lg-doc{ padding:48px 52px; border:1px solid #e5e9f0; border-radius:24px; background:#fff; font-size:15.5px; line-height:1.85; color:#334155; word-break:keep-all; }
.lg-doc > :first-child{ margin-top:0; }
.lg-doc p{ margin:0 0 12px; color:#334155; }
.lg-doc .lg-ch{ margin:46px 0 18px; padding-bottom:12px; border-bottom:2px solid #1b3a5f; font-size:21px; font-weight:800; letter-spacing:-.01em; color:#0e2338; scroll-margin-top:130px; }
.lg-doc h4{ margin:28px 0 8px; font-size:16.5px; font-weight:800; color:#1b3a5f; }
.lg-doc ol.lg-num{ margin:6px 0 14px; padding-left:1.7em; }
.lg-doc ol.lg-num li{ margin:3px 0; padding-left:2px; }
.lg-doc ol.lg-num li::marker{ font-weight:700; color:#4f8fc0; }
.lg-doc .lg-circ{ margin:6px 0 14px; padding:0; list-style:none; }
.lg-doc .lg-circ > li{ margin:6px 0; padding-left:1.35em; text-indent:-1.35em; }
.lg-doc .lg-circ > li > ol{ text-indent:0; }
.lg-doc .lg-dot{ margin:6px 0 14px; padding:0; list-style:none; }
.lg-doc .lg-dot li{ position:relative; margin:6px 0; padding-left:16px; }
.lg-doc .lg-dot li::before{ content:""; position:absolute; left:2px; top:.8em; width:6px; height:6px; border-radius:50%; background:#4f8fc0; }

/* 이용약관 목차 */
.lg-doc .lg-toc{ display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 28px; margin:0 0 10px; padding:22px 26px; border-radius:16px; background:#f5f8fb; list-style:none; }
.lg-page .lg-toc a{ font-weight:700; color:#1b3a5f; text-decoration:none; }
.lg-page .lg-toc a:hover{ color:#4f8fc0; }
.lg-doc .lg-date{ padding:14px 18px; border-radius:12px; background:#f5f8fb; color:#475569; }

/* 개인정보처리방침 */
.lg-doc .lg-intro{ margin:0 0 6px; padding:22px 26px; border-radius:16px; background:#f5f8fb; }
.lg-doc .lg-intro p:last-child{ margin-bottom:0; }
.lg-doc .lg-kv{ margin:10px 0 16px; border-top:1px solid #e5e9f0; }
.lg-doc .lg-kv > div{ display:grid; grid-template-columns:110px 1fr; gap:12px; padding:10px 4px; border-bottom:1px solid #eef2f6; }
.lg-doc .lg-kv dt{ font-weight:700; color:#1b3a5f; }
.lg-doc .lg-kv dd{ margin:0; }
.lg-doc .lg-table{ width:100%; margin:6px 0 0; border-collapse:collapse; font-size:14.5px; }
.lg-doc .lg-table th{ padding:11px 12px; background:#f5f8fb; border-top:2px solid #1b3a5f; border-bottom:1px solid #e3e9f1; font-weight:700; color:#1b3a5f; text-align:left; }
.lg-doc .lg-table td{ padding:11px 12px; border-bottom:1px solid #eef2f6; vertical-align:top; }
.lg-doc .lg-table td:nth-child(2){ white-space:nowrap; font-weight:700; color:#1b3a5f; }

/* 이메일무단수집거부 */
.lg-doc .lg-lead{ margin-bottom:26px; font-size:16.5px; font-weight:600; color:#1e293b; }
.lg-doc .lg-law{ padding:24px 28px; border-radius:16px; background:#f5f8fb; border-left:4px solid #1b3a5f; }
.lg-doc .lg-law-title{ margin:0 0 10px; font-size:17px; font-weight:800; color:#0e2338; }
.lg-doc .lg-law-title span{ font-weight:600; color:#64748b; }
.lg-doc .lg-law ol.lg-num{ margin-bottom:0; }
.lg-doc .lg-warn{ display:inline-block; margin:22px 0 0; padding:10px 18px; border-radius:99px; background:#fdecea; font-weight:800; color:#e0413b; }

@media (max-width:1024px){ .lg-page{ padding-top:120px; } }
@media (max-width:991px){
  .lg-page{ padding:110px 0 80px; }
  .lg-wrap{ width:calc(100% - 32px); }
  .lg-page .lg-title{ font-size:28px; }
  .lg-tabs{ gap:6px; margin:20px 0 16px; }
  .lg-page .lg-tabs a{ padding:8px 13px; font-size:13px; }
  .lg-doc{ padding:28px 20px; border-radius:18px; font-size:14.5px; line-height:1.8; }
  .lg-doc .lg-ch{ margin-top:36px; font-size:18px; }
  .lg-doc h4{ font-size:15.5px; }
  .lg-doc .lg-toc{ grid-template-columns:1fr; padding:18px 20px; }
  .lg-doc .lg-intro, .lg-doc .lg-law{ padding:18px 20px; }
  .lg-doc .lg-kv > div{ grid-template-columns:84px 1fr; }
  .lg-doc .lg-table thead{ display:none; }
  .lg-doc .lg-table, .lg-doc .lg-table tbody, .lg-doc .lg-table tr, .lg-doc .lg-table td{ display:block; }
  .lg-doc .lg-table tr{ padding:12px 0; border-bottom:1px solid #eef2f6; }
  .lg-doc .lg-table td{ padding:0; border:0; }
  .lg-doc .lg-table td:first-child{ font-weight:700; color:#1e293b; }
  .lg-doc .lg-table td:nth-child(3){ font-size:13px; color:#64748b; }
}

/* 확대된 인체도: 마우스로 끌어서 이동 */
.sctr-zoom.is-zoomed .sctr-zoom-fig{ cursor:grab; }
.sctr-zoom.is-dragging .sctr-zoom-fig{ cursor:grabbing; transition:none; }
.sctr-zoom.is-zoomed{ touch-action:none; }   /* 확대 중엔 손가락 끌기를 브라우저 스크롤 대신 그림 이동으로 */
.sctr-zoom.is-dragging{ user-select:none; }

/* 인체도가 없는 센터(류마티스내과): 부위 탭·질환 카드를 제목처럼 가운데로 (카드가 2개뿐이어도 가운데) */
@media (min-width:768px){
  .sctr-condition-layout:not(:has(.sctr-bodyfigure)) .sctr-legend{ display:flex; flex-wrap:wrap; justify-content:center; }
  .sctr-condition-layout:not(:has(.sctr-bodyfigure)) .sctr-condition-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
  .sctr-condition-layout:not(:has(.sctr-bodyfigure)) .sctr-condition-card{ flex:0 1 calc((100% - 20px) / 2); }
}
@media (min-width:1025px){
  .sctr-condition-layout:not(:has(.sctr-bodyfigure)) .sctr-condition-card{ flex-basis:calc((100% - 40px) / 3); }
}