/* =========================================================
   GUIDE V2 — 단독 프리뷰용 더미 토큰
========================================================= */

/* 어드민 편집 모드 — V2 ext 의 인라인 편집 가능 이미지/텍스트 시각화 */
body.sp-edit img[data-ext-sid][data-ext-field],
body.sp-edit video[data-ext-sid][data-ext-field]{
  outline:2px dashed rgba(124,58,237,.45);
  outline-offset:-2px;
  transition:outline-color .15s;
  cursor:pointer;
}
body.sp-edit img[data-ext-sid][data-ext-field]:hover,
body.sp-edit video[data-ext-sid][data-ext-field]:hover{
  outline-color:rgba(124,58,237,.85);
}
body.sp-edit [data-ext-sid][data-ext-field]:not(img):not(video){
  outline:1px dashed rgba(124,58,237,.35);
  outline-offset:2px;
  border-radius:2px;
  cursor:text;
  transition:outline-color .15s,background .15s;
}
body.sp-edit [data-ext-sid][data-ext-field]:not(img):not(video):hover,
body.sp-edit [data-ext-sid][data-ext-field]:not(img):not(video):focus{
  outline-color:rgba(124,58,237,.85);
  outline-style:solid;
  background:rgba(124,58,237,.06);
}
/* 내용을 모두 지운 텍스트 필드도 다시 클릭/커서진입 가능하도록 최소 클릭영역 확보.
   (빈 블록은 높이가, 인라인 span 은 가로폭이 0 이 돼 클릭 지점이 사라지던 버그) */
body.sp-edit [data-ext-sid][data-ext-field]:not(img):not(video):not(input):not(select):not(textarea):not(.sp-ext-img):not(.sp-imgf):empty{
  min-width:60px;
  min-height:1.3em;
}
body.sp-edit span[data-ext-sid][data-ext-field]:not(.sp-ext-img):not(.sp-imgf):empty,
body.sp-edit a[data-ext-sid][data-ext-field]:not(.sp-ext-img):not(.sp-imgf):empty{
  display:inline-block;
  vertical-align:middle;
  min-width:60px;
  min-height:1.3em;
}
/* 빈 필드 안내 문구 — data-ph(자체 placeholder) 가 있는 필드는 제외(sub_tpl 의 data-ph 규칙이 담당) */
body.sp-edit [data-ext-sid][data-ext-field]:not(img):not(video):not(input):not(select):not(textarea):not(.sp-ext-img):not(.sp-imgf):not([data-ph]):empty::before{
  content:"클릭하여 입력";
  opacity:.35;
  pointer-events:none;
  font-size:inherit;
  font-weight:inherit;
}

/* V2 항목 추가/삭제 버튼 — 어드민 편집 모드 전용 */
.sx-add-item-wrap{
  display:none;
  margin-top:16px;
  text-align:center;
}
body.sp-edit .sx-add-item-wrap{display:block}
.sx-add-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:10px 20px;
  background:rgba(124,58,237,.1);
  border:1px dashed rgba(124,58,237,.5);
  color:#7c3aed;
  font-family:'Pretendard',sans-serif;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  border-radius:6px;
  transition:all .15s;
}
.sx-add-item:hover{
  background:rgba(124,58,237,.18);
  border-style:solid;
  border-color:rgba(124,58,237,.8);
}
.sx-item-del{
  position:absolute;
  top:-8px;right:-8px;
  width:24px;height:24px;
  background:#ef4444;
  color:#fff;
  border:none;
  border-radius:50%;
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10;
  box-shadow:0 2px 4px rgba(0,0,0,.3);
}
body.sp-edit .sx-item-del{display:flex}
.sx-item-del:hover{background:#dc2626;transform:scale(1.1)}
.sx-item-host{position:relative}

/* V2 wrapper (.ba-section / section.yt / .sx-wrap) 안에만 한정 — 다른 일반 섹션에 글로벌 reset 새는 것 차단 */
.ba-section,.ba-section *,section.yt,section.yt *,.sx-wrap,.sx-wrap *{box-sizing:border-box}
.ba-section img,section.yt img,.sx-wrap img{display:block;max-width:100%;height:auto}
.ba-section .hive_b button,section.yt .hive_b button,.sx-wrap button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer}

/* 폰트 클래스 (CLAUDE.md 규칙) */
.pret{font-family:'Pretendard','Noto Sans KR',sans-serif;font-weight:400;font-style:normal !important}
.eng_b2{font-family:'Cormorant SC','Sorts Mill Goudy',Georgia,serif;font-weight:400;letter-spacing:0.02em;font-style:normal !important}
.eng_b2 .pret{letter-spacing:0}

/* index_f 시리즈 — 한글은 index_f30 까지만 사용 */
.index_f16{font-size:16px;line-height:1.75}
.index_f18{font-size:18px;line-height:1.7}
.index_f20{font-size:20px;line-height:1.55}
.index_f25{font-size:25px;line-height:1.4}
.index_f30{font-size:30px;line-height:1.3}
.index_f40{font-size:clamp(36px,4.4vw,52px);line-height:1.15}
.index_f50{font-size:clamp(44px,5.6vw,72px);line-height:1.1}
.index_f60{font-size:clamp(56px,7.6vw,108px);line-height:1.05;letter-spacing:-0.01em}

.index_h40{height:40px}.index_h60{height:60px}.index_h80{height:80px}.index_h100{height:100px}.index_h120{height:120px}.index_h160{height:160px}

.hive_b{width:95%;max-width:1320px;margin:0 auto}

/* italic 강제 비활성 — V2 마크업 안에서만 */
.ba-section em,.ba-section i,.ba-section blockquote,
section.yt em,section.yt i,section.yt blockquote,
.sx-wrap em,.sx-wrap i,.sx-wrap blockquote{font-style:normal !important}

/* 색 토큰 */
:root{
  --bg:#F2EEE5;
  --bg-soft:#EAE5D8;
  --ink:#1F2A22;
  --ink-mute:#5C6B5F;
  --paper:#FFFFFF;
  --leaf:#5B7754;
  --leaf-soft:#9CB096;
  --dawn:#C7CEA9;
  --cream:#252B1E;
  --line:rgba(31,42,34,0.12);
  --line-soft:rgba(31,42,34,0.06);
  --enter:cubic-bezier(0.16,1,0.3,1);
}

/* 진입 애니메이션 — 순수 BLUR FOCUS 컨셉
   translateY 없음 / scale 미세하게 / blur 가 핵심 */
[data-enter]{
  opacity:0;
  filter:blur(24px) saturate(1.1);
  transform:scale(1.025);
  transition:
    opacity 1.6s cubic-bezier(0.22,1,0.36,1),
    filter  1.6s cubic-bezier(0.22,1,0.36,1),
    transform 1.6s cubic-bezier(0.22,1,0.36,1);
  will-change:filter,opacity,transform;
}
[data-enter].is-in{
  opacity:1;
  filter:blur(0) saturate(1);
  transform:scale(1);
}
[data-enter].is-in.anim-done{will-change:auto}
[data-enter-delay="1"].is-in{transition-delay:.12s}
[data-enter-delay="2"].is-in{transition-delay:.24s}
[data-enter-delay="3"].is-in{transition-delay:.36s}
[data-enter-delay="4"].is-in{transition-delay:.48s}
[data-enter-delay="5"].is-in{transition-delay:.60s}
[data-enter-delay="6"].is-in{transition-delay:.72s}

/* 텍스트는 미묘하게 (blur 작게, scale 없음) — 가독성 우선 */
.sec-head[data-enter],
.intro-eyebrow[data-enter],
[data-enter].method-num,
[data-enter].why-card-en{
  filter:blur(14px);
  transform:none;
}
.sec-head[data-enter].is-in,
.intro-eyebrow[data-enter].is-in{
  filter:blur(0);
}

/* 섹션 공통 */
section{padding:var(--v2-pad-y,80px) 0}
@media(max-width:768px){section{padding:calc(var(--v2-pad-y,80px) / 2) 0}}
.sec-eyebrow{
  display:inline-block;
  letter-spacing:0.34em;
  color:var(--leaf);
  text-transform:uppercase;
  font-size:14px;
}
.sec-head{margin-bottom:80px;text-align:center}      /* BA V2 만 sub_tpl 의 layout echo 로 text-align var() override */
.sec-head h2{font-weight:400;color:var(--ink);margin-top:24px;word-break:keep-all;overflow-wrap:break-word}
.sec-head .lead{margin-top:32px;color:var(--ink-mute);max-width:620px;margin-left:auto;margin-right:auto;word-break:keep-all;overflow-wrap:break-word}
/* EN/KO 2줄 헤드라인은 <br> 에 의존하지 않고 span 자체를 블록으로 — 번역위젯/저장과정에서 직계 br 이
   사라져도 모바일 포함 항상 두 줄로 분리. (> span/br 로 직계만 → span 내부 nl2br 다줄 영문은 그대로 유지) */
h2.eng_b2.index_f50 > span{display:block}
h2.eng_b2.index_f50 > br{display:none}
.divider{width:1px;height:64px;background:var(--leaf);margin:32px auto}

/* 모바일 스와이프 인디케이터 — 768px 이하에서만 표시 */
.swipe-dots{
  display:none;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:32px;
}
.swipe-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:rgba(91,119,84,0.3);
  border:0;
  padding:0;
  cursor:pointer;
  transition:width 0.32s cubic-bezier(0.16,1,0.3,1), background 0.32s var(--enter);
}
.swipe-dot:hover{background:rgba(91,119,84,0.55)}
.swipe-dot.is-active{
  width:24px;
  border-radius:100px;
  background:var(--leaf);
}
.swipe-dot:focus-visible{outline:2px solid var(--leaf);outline-offset:4px}
@media (max-width:768px){.swipe-dots{display:flex}}

/* GUIDE 안내 (실제 페이지에서 삭제) */
.guide-note{
  position:fixed;top:16px;right:16px;z-index:9999;
  background:rgba(255,251,234,0.96);
  border-left:4px solid #C8A85A;
  padding:14px 18px;
  font-size:12px;color:#5C4A1A;
  max-width:280px;
  border-radius:2px;
}
.guide-note strong{color:#3B2F0E}

/* =========================================================
   01. HERO — 풀스크린 비주얼
========================================================= */
.hero{
  position:relative;
  height:100vh;min-height:720px;
  padding:0;
  overflow:hidden;
  color:#fff;
  background:#0F1A0D;
}
.hero-bg{
  position:absolute;inset:0;
  /* CSS 변수로 받은 이미지 우선, 없으면 기본 demo 이미지 */
  background:var(--hero-bg-pc, url('img/1.webp')) center 30% / cover no-repeat,#0F1A0D;
  /* --hero-bg-sx: 가로 부호(1=기본, -1=좌우 반전). zoom 애니메이션과 곱해져 함께 유지 */
  transform:scaleX(var(--hero-bg-sx,1)) scale(1.06);
  /* 사용자 옵션 — 밝기 (0.50~1.00, 기본 0.85) */
  filter:brightness(var(--hero-brightness, 0.85));
  animation:heroZoom 12s var(--enter) forwards;
}
/* 모바일 — 별도 이미지 있으면 사용, 없으면 PC 이미지 fallback */
@media (max-width:768px){
  .hero-bg{
    background:var(--hero-bg-mo, var(--hero-bg-pc, url('img/1.webp'))) center / cover no-repeat,#0F1A0D;
  }
}
@keyframes heroZoom{
  from{transform:scaleX(var(--hero-bg-sx,1)) scale(1.06)}
  to{transform:scaleX(var(--hero-bg-sx,1)) scale(1)}
}
.hero::before{
  content:'';
  position:absolute;inset:0;
  /* 텍스트 가독성용 그라데이션 — 사용자 옵션으로 opacity 조정 가능 (기본 1.0) */
  background:linear-gradient(180deg,rgba(15,26,13,0.20) 0%,rgba(15,26,13,0.00) 35%,rgba(15,26,13,0.65) 100%);
  opacity:var(--hero-overlay-opacity, 1);
  z-index:1;
}
.hero-inner{
  position:relative;z-index:2;
  height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 0 140px;
}
.hero-counter{
  display:inline-flex;align-items:center;gap:14px;
  color:rgba(255,255,255,0.7);
  letter-spacing:0.36em;
  font-size:13px;
  margin-bottom:56px;
}
.hero-mark{
  flex-shrink:0;
  color:var(--leaf-soft);
  opacity:0.9;
}
.hero-title{
  font-weight:300;
  color:#fff;
  line-height:0.92;
  letter-spacing:-0.025em;
}
.hero-title-line{display:block}
.hero-title-line:nth-child(2)::after{
  content:'.';
  color:var(--leaf-soft);
  margin-left:2px;
}
.hero-meta-line{
  margin-top:64px;
  display:flex;align-items:baseline;gap:24px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.18);
  max-width:560px;
}
.hero-ko{
  color:#fff;
  letter-spacing:-0.005em;
}
.hero-en{
  color:rgba(255,255,255,0.55);
  letter-spacing:0.24em;
  font-size:13px;
  text-transform:uppercase;
}
.hero-sub{
  margin-top:32px;
  max-width:480px;
  color:rgba(255,255,255,0.72);
  line-height:1.85;
}
.hero-meta{
  position:absolute;
  right:5%;bottom:120px;
  z-index:2;
  text-align:right;
  color:rgba(255,255,255,0.72);
}
.hero-meta dt{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  letter-spacing:0.32em;
  font-size:12px;
  color:rgba(255,255,255,0.5);
  margin-bottom:8px;
  text-transform:uppercase;
}
.hero-meta-icon{
  flex-shrink:0;
  color:var(--leaf-soft);
  opacity:0.85;
}
.hero-meta dd{margin-bottom:24px;color:rgba(255,255,255,0.92)}
.hero-meta dd:last-child{margin-bottom:0}
.scroll-hint{
  position:absolute;
  left:50%;bottom:48px;
  transform:translateX(-50%);
  z-index:2;
  text-align:center;
  color:rgba(255,255,255,0.72);
}
.scroll-hint span{
  display:block;
  font-size:12px;
  letter-spacing:0.32em;
  margin-bottom:12px;
}
.scroll-hint::after{
  content:'';
  display:block;
  width:1px;height:48px;
  background:linear-gradient(to bottom,rgba(255,255,255,0.5),transparent);
  margin:0 auto;
  animation:scrollPulse 2.4s var(--enter) infinite;
}
@keyframes scrollPulse{
  0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom}
  100%{transform:scaleY(0);transform-origin:bottom}
}
@media (max-width:900px){
  .hero{min-height:640px}
  .hero-meta{display:none}
  .hero-inner{padding-bottom:100px}
  .scroll-hint{display:none}
}

/* =========================================================
   02. INTRO — 임팩트 카피 + 본문
========================================================= */
.intro{background:var(--intro-bg,#F7F4EE);padding-top:calc(var(--v2-pad-y,80px) * .7);padding-bottom:calc(var(--v2-pad-y,80px) * .5)}
.intro-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:120px;
  align-items:start;
}
.intro-grid--no-body{grid-template-columns:minmax(0,820px);gap:0}
.intro-grid--no-head{grid-template-columns:minmax(0,780px);gap:0}
.intro-eyebrow{color:var(--leaf);margin-bottom:32px}
.intro-headline{
  font-weight:300;
  color:var(--ink);
  margin-bottom:0;
}
.intro-headline .en{display:block;color:var(--leaf)}
.intro-headline .ko{display:block;margin-top:var(--sp-enko-gap, 20px);color:var(--ink);word-break:keep-all;overflow-wrap:break-word}
/* V2 sec-head형(step_sticky/method_block/faq_v2/crd/cmp/column 등) 영문↔한글 간격 — 전역 --sp-enko-gap 공통 조절.
   한글 제목을 block 으로(margin-top 확실히 적용) + 영문/한글 구분 <br>(h2 직계만) 숨겨 이중 줄바꿈 방지.
   영문 제목 내부 줄바꿈 br 은 <span> 안이라 안 건드림. */
.sec-head h2 > br{display:none}
.sec-head h2 > .pret{display:block}
.sec-head h2 > .pret:not(:first-child){margin-top:var(--sp-enko-gap, 12px)}
.intro-body p{
  color:var(--ink);
  margin-bottom:32px;
  line-height:1.85;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.intro-body p:empty{display:none}
.intro-body p:last-child{margin-bottom:0}
.intro-body strong{
  font-weight:500;
  color:var(--ink);
  background:linear-gradient(transparent 60%,rgba(199,206,169,0.55) 60%);
  padding:0 4px;
}
@media (max-width:1024px){.intro-grid{grid-template-columns:1fr;gap:36px}.intro{padding-top:calc(var(--v2-pad-y,80px) * .55);padding-bottom:calc(var(--v2-pad-y,80px) * .35)}}

/* =========================================================
   2-2. BA — Eye Profile / Before & After (5:5 케이스 매칭)
========================================================= */
#ba{background:var(--bg);position:relative;overflow:hidden}
#ba::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 50% 0%, rgba(122,158,114,0.07), transparent 55%);
  pointer-events:none;
}
#ba .hive_b{position:relative;z-index:1}

/* Selector — 언더라인 탭 (가로 6개, 미니멀) */
.ba-selector{
  display:flex;
  gap:0;
  margin-top:64px;
  margin-bottom:64px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.ba-selector::-webkit-scrollbar{display:none}
.ba-type{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:12px;
  padding:20px 28px;
  background:transparent;
  border:0;
  cursor:pointer;
  white-space:nowrap;
  font:inherit;
  color:var(--ink-mute);
  transition:color 0.5s var(--enter);
  flex-shrink:0;
}
.ba-type::after{
  content:'';
  position:absolute;
  left:0;bottom:-1px;
  width:0;height:2px;
  background:var(--leaf);
  transition:width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.ba-type:hover{color:var(--ink)}
.ba-type.is-active{color:var(--ink)}
.ba-type.is-active::after{width:100%}
.ba-type-num{
  color:var(--leaf);
  font-weight:400;
  letter-spacing:0.06em;
  line-height:1;
}
.ba-type-name{line-height:1}
.ba-type:focus-visible{outline:2px solid var(--leaf);outline-offset:-4px}

/* Active Panel — 다크 5:5 분할 + 페어 carousel (뒤에 stack) */
.ba-stage{
  position:relative;
  color:#fff;
  overflow:visible;
  isolation:isolate;
  transition:opacity 0.5s cubic-bezier(0.65, 0, 0.35, 1), filter 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.ba-stage.is-loading{
  opacity:0.18;
  filter:blur(8px);
}
.ba-panel{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  /* ext_bg 가 .ba-section 에 인라인으로 들어오면 --ext-bg 도 함께 셋팅됨 → 패널도 같이 따라감 */
  background:var(--ext-bg, var(--ink));
  opacity:0;
  filter:blur(40px);
  transform:translateX(120%) scale(0.84);
  transform-origin:left center;
  /* 우아한 모션 — 길고 부드러운 ease-in-out, 속성별 시차 */
  transition:
    transform 1.4s cubic-bezier(0.83, 0, 0.17, 1),
    filter   1.0s cubic-bezier(0.65, 0, 0.35, 1) 0.08s,
    opacity  1.0s cubic-bezier(0.65, 0, 0.35, 1) 0.05s;
  pointer-events:none;
}
.ba-panel.is-active{
  position:relative;
  opacity:1;
  filter:blur(0);
  transform:translateX(0) scale(1);
  pointer-events:auto;
  z-index:5;
}
.ba-panel.is-next{
  opacity:0.45;
  filter:blur(16px);
  transform:translateX(70%) scale(0.94);
  z-index:2;
  pointer-events:none;
}
.ba-panel.is-next-2{
  opacity:0.22;
  filter:blur(26px);
  transform:translateX(108%) scale(0.88);
  z-index:1;
  pointer-events:none;
}
.ba-panel::before{
  content:'';
  position:absolute;
  left:50%;top:0;bottom:0;
  width:1px;
  background:rgba(255,255,255,0.14);
}

/* Carousel 네비게이션 */
.ba-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:32px;
  margin-top:48px;
}
.ba-nav-btn{
  width:48px;height:48px;
  border:1px solid var(--line);
  border-radius:50%;
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.4s var(--enter), color 0.4s var(--enter), border-color 0.4s var(--enter);
}
.ba-nav-btn:hover,
.ba-nav-btn:focus-visible{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
  outline:none;
}
.ba-nav-btn svg{width:14px;height:14px}
.ba-counter{
  display:inline-flex;
  align-items:baseline;
  gap:14px;
  color:var(--ink-mute);
  letter-spacing:0.32em;
}
.ba-counter-cur{color:var(--ink);font-weight:400}
.ba-side{padding:48px 48px 56px}
.ba-after{background:#14201A}
.ba-img-wrap{
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:#0F1A0D;
  margin-bottom:32px;
}
.ba-img-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--enter), opacity 0.6s var(--enter), filter 0.6s var(--enter);
}
.ba-label{
  position:absolute;
  left:20px;top:20px;
  padding:10px 18px;
  letter-spacing:0.32em;
  font-size:12px;
  z-index:2;
}
.ba-before .ba-label{
  background:rgba(255,255,255,0.95);
  color:var(--ink);
}
.ba-after .ba-label{
  background:#3F5638;
  color:#fff;
}
.ba-after .ba-img-wrap::after{
  content:'';
  position:absolute;inset:0;
  background:rgba(63,86,56,0.18);
  mix-blend-mode:multiply;
  pointer-events:none;
  z-index:1;
}
.ba-info{
  display:flex;flex-direction:column;
  gap:0;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.14);
}
.ba-info-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.ba-info-row:last-child{border-bottom:0}
.ba-info-label{color:rgba(255,255,255,0.5)}
.ba-info-value{color:#fff}
.ba-info-value.is-strong{color:var(--dawn)}

/* 신버전 — info dl 대신 제목 + 내용 + 시점 라벨 */
.ba-meta{
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.14);
}
.ba-meta-title{
  color:#fff;
  font-weight:400;
  margin:0 0 14px;
  letter-spacing:-.005em;
}
.ba-meta-desc{
  color:rgba(255,255,255,0.72);
  line-height:1.85;
  margin:0;
}
.ba-meta-after{
  position:relative;
}
.ba-phase-eyebrow{
  display:inline-block;
  color:var(--dawn);
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-bottom:14px;
}
.ba-label-after{
  background:#3F5638;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.24em;
}

/* 케이스 전환 — blur fade */
.ba-panel.is-changing .ba-img-wrap img{
  opacity:0;
  filter:blur(12px);
}
.ba-panel.is-changing .ba-info-value,
.ba-panel.is-changing .ba-info-label{
  opacity:0;
}
.ba-panel .ba-info-value,
.ba-panel .ba-info-label{
  transition:opacity 0.4s var(--enter);
}

/* 비슷한 케이스 CTA */
.ba-more-wrap{
  margin-top:56px;
  display:flex;
  justify-content:center;
}
.ba-more{
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:22px 40px;
  background:transparent;
  border:1px solid var(--ink);
  color:var(--ink);
  text-decoration:none;
  letter-spacing:0.04em;
  transition:background 0.5s var(--enter), color 0.5s var(--enter), gap 0.4s var(--enter);
}
.ba-more:hover{
  background:var(--ink);
  color:var(--bg);
  gap:24px;
}
.ba-more-count{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border:1px solid currentColor;
  border-radius:100px;
  letter-spacing:0.06em;
}

@media (max-width:1024px){
  .ba-side{padding:36px}
}
@media (max-width:768px){
  /* 셀렉터 — 가로 스크롤(언더라인 탭 그대로) */
  .ba-selector{
    padding:0 5vw;
    margin-left:-5vw;margin-right:-5vw;
    margin-bottom:40px;
  }
  .ba-type{padding:16px 18px}
  /* 5:5 분할 유지 — 사진은 정사각, 여백 컴팩트 */
  .ba-side{padding:12px 10px;cursor:pointer}
  .ba-img-wrap{aspect-ratio:1/1;margin-bottom:0}
  .ba-label{left:10px;top:10px;padding:6px 10px;letter-spacing:0.24em;font-size:10px}
  /* 정보 영역 — 클릭으로 토글 (.ba-info: 레거시 카운터 / .ba-meta: ba_v2 메타) */
  .ba-info,
  .ba-meta{
    max-height:0;
    overflow:hidden;
    padding-top:0;
    margin-top:0;
    border-top-color:transparent;
    transition:max-height 0.5s var(--enter), padding-top 0.5s var(--enter), margin-top 0.5s var(--enter), border-top-color 0.4s var(--enter);
  }
  .ba-panel.is-info-open .ba-info{
    max-height:320px;
    padding-top:14px;
    margin-top:12px;
    border-top-color:rgba(255,255,255,0.14);
  }
  .ba-panel.is-info-open .ba-meta{
    max-height:460px;
    padding-top:14px;
    margin-top:12px;
    border-top-color:rgba(255,255,255,0.14);
  }
  /* 토글 힌트 — 사진 우하단 작은 ⌄ 표시 */
  .ba-side .ba-img-wrap::before{
    content:'';
    position:absolute;
    right:10px;bottom:10px;
    width:26px;height:26px;
    border-radius:50%;
    background:rgba(0,0,0,0.55);
    z-index:3;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'><path d='M1 1l4 4 4-4' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat;
    background-position:center;
    transition:transform 0.4s var(--enter);
    pointer-events:none;
  }
  .ba-panel.is-info-open .ba-img-wrap::before{transform:rotate(180deg)}
  /* carousel 네비 여백 컴팩트 */
  .ba-nav{margin-top:24px;gap:24px}
  .ba-nav-btn{width:40px;height:40px}
  .ba-more-wrap{margin-top:32px}
}

/* =========================================================
   03. WHY — 3 가치 카드 (에디토리얼 리디자인)
========================================================= */
.why{background:var(--bg-soft);position:relative;overflow:hidden}
.why-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:64px 48px;
  margin-top:140px;
  position:relative;
}
.why-card{
  position:relative;
  background:transparent;
}
/* 카드 자체 [data-enter] 효과 무력화 — 내부 요소 개별 등장 */
.why-card[data-enter]{
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}
/* Ghost 넘버 — 카드 위 큰 아웃라인 영문 */
.why-card-num{
  position:absolute;
  top:-72px;left:-8px;
  font-size:clamp(96px,11vw,168px);
  line-height:1;
  font-weight:300;
  color:transparent;
  -webkit-text-stroke:1px rgba(91,119,84,0.22);
  letter-spacing:-0.02em;
  z-index:0;
  pointer-events:none;
  font-family:'Cormorant SC',serif;
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1.4s cubic-bezier(0.22,1,0.36,1),
             transform 1.4s cubic-bezier(0.22,1,0.36,1),
             -webkit-text-stroke 0.6s var(--enter);
}
.why-card.is-revealed .why-card-num{
  opacity:1;
  transform:none;
}
.why-card:hover .why-card-num{
  -webkit-text-stroke:1px rgba(91,119,84,0.5);
}
/* 이미지 — clip-path 마스크 등장 */
.why-card-img{
  position:relative;
  /* 비율: 옵션(이미지 비율) 미지정 시 기본 세로 3:4. 'orig'(원본) 선택 시 sub_tpl :root 가 auto 로 덮음 */
  aspect-ratio:var(--sp-why_pillars-img-ratio,3/4);
  overflow:hidden;
  background:var(--bg);
  z-index:1;
  border-radius:var(--sp-why_pillars-img-radius,0);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 1.4s cubic-bezier(0.22,1,0.36,1);
}
.why-card.is-revealed .why-card-img{
  clip-path:inset(0 0 0 0);
}
.why-card-img img{
  /* height/fit 도 var — 'orig' 일 때 height:auto + contain 으로 원본 비율 그대로 노출 */
  width:100%;height:var(--sp-why_pillars-imgfit-h,100%);
  object-fit:var(--sp-why_pillars-imgfit,cover);
  object-position:var(--sp-why_pillars-img-pos,center);
  transform:scale(1.12);
  transition:transform 1.6s cubic-bezier(0.22,1,0.36,1);
}
.why-card.is-revealed .why-card-img img{transform:scale(1)}
.why-card:hover .why-card-img img{transform:scale(1.05)}
.why-card-img-tag{
  position:absolute;
  left:20px;top:20px;
  padding:8px 14px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  font-size:11px;
  letter-spacing:0.32em;
  color:var(--ink);
  z-index:2;
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.8s 0.6s var(--enter),transform 0.8s 0.6s var(--enter);
}
.why-card.is-revealed .why-card-img-tag{opacity:1;transform:none}
/* 본문 — 라인 + 영문 + 한글 라벨 + 설명 */
.why-card-body{
  padding:36px 0 0;
  position:relative;
}
.why-card-body > *{
  opacity:0;
  filter:blur(12px);
  transition:opacity 0.9s var(--enter),filter 0.9s var(--enter);
}
.why-card.is-revealed .why-card-body > *{
  opacity:1;
  filter:blur(0);
}
.why-card.is-revealed .why-card-body > *:nth-child(1){transition-delay:0.5s}
.why-card.is-revealed .why-card-body > *:nth-child(2){transition-delay:0.6s}
.why-card.is-revealed .why-card-body > *:nth-child(3){transition-delay:0.7s}
.why-card.is-revealed .why-card-body > *:nth-child(4){transition-delay:0.8s}
.why-card-line{
  display:block;
  width:24px;height:1px;
  background:var(--leaf);
  margin-bottom:20px;
  transition:width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.why-card:hover .why-card-line{width:64px}
.why-card-en{
  color:var(--ink);
  letter-spacing:-0.01em;
  margin-bottom:14px;
  font-weight:300;
  line-height:1.1;
  word-break:keep-all;
  overflow-wrap:break-word;
}
.why-card-ko{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:24px;
}
.why-card-ko-en{
  color:var(--leaf);
  letter-spacing:0.28em;
}
.why-card-ko-bar{
  display:inline-block;
  width:14px;height:1px;
  background:var(--leaf);
  opacity:0.5;
  flex-shrink:0;
}
.why-card-ko-ko{color:var(--ink-mute);word-break:keep-all;overflow-wrap:break-word}
.why-card-desc{
  color:var(--ink);
  line-height:1.85;
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* 카드 개수별 그리드 — 1~4개 자연스럽게 */
.why-grid.cards-1{grid-template-columns:minmax(0,520px);justify-content:center}
.why-grid.cards-2{grid-template-columns:repeat(2,1fr);max-width:880px;margin-left:auto;margin-right:auto}
.why-grid.cards-3{grid-template-columns:repeat(3,1fr)}
.why-grid.cards-4{grid-template-columns:repeat(4,1fr);gap:48px 32px}
/* 카드별 stagger — 3장 기본 (지그재그). 1/2/4 장에선 stagger 없음 */
.why-card:nth-child(2){margin-top:80px}
.why-card:nth-child(3){margin-top:0}
.why-grid.cards-1 .why-card,
.why-grid.cards-2 .why-card,
.why-grid.cards-4 .why-card{margin-top:0 !important}
@media (max-width:1024px){
  .why-grid{grid-template-columns:1fr;gap:120px;margin-top:80px}
  .why-card:nth-child(2),
  .why-card:nth-child(3){margin-top:0}
}
/* 모바일 — 가로 스와이프 (HTML 구조 변경 없음) */
@media (max-width:768px){
  .why-grid{
    display:flex;
    flex-direction:row;
    gap:16px;
    margin-top:64px;
    overflow-x:auto;
    overflow-y:visible;
    /* scroll-snap 제거 — iOS Safari 가 가로 스크롤 후 세로 page scroll 을 hijack 하는 버그.
       카드 width 72% 로 peek 만 살리고, snap 없이 자연 스크롤. */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    padding:0 5vw 8px;
    margin-left:-5vw;
    margin-right:-5vw;
  }
  .why-grid::-webkit-scrollbar{display:none}
  .why-card{
    /* 72% — 다음 카드가 옆에 살짝 보이도록 (peek). snap-align 도 제거 */
    flex:0 0 72%;
  }
  .why-card-num{
    font-size:clamp(64px,17vw,108px);
    top:-46px;
  }
  /* 모바일 슬라이더 안에선 카드별 reveal 모션 비활성 — 다음 슬라이드도 항상 보이게 */
  .why-card .why-card-num{opacity:1;transform:none}
  .why-card .why-card-img{clip-path:inset(0 0 0 0)}
  .why-card .why-card-img img{transform:scale(1)}
  .why-card .why-card-img-tag{opacity:1;transform:none}
  .why-card .why-card-body > *{opacity:1;filter:blur(0)}
}

/* =========================================================
   04. METHOD — 4 방법 (좌우 교차 split)
========================================================= */
.method{background:var(--bg)}
.method-rows{display:flex;flex-direction:column;gap:140px;margin-top:80px}
.method-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:96px;
  align-items:center;
}
.method-row.reverse .method-img{order:2}
.method-img{
  position:relative;
  /* 비율: 옵션(이미지 비율) 미지정 시 기본 세로 5:6. 'orig'(원본) 선택 시 sub_tpl :root 가 auto 로 덮음 */
  aspect-ratio:var(--sp-method_block-img-ratio,5/6);
  overflow:hidden;
  background:var(--bg-soft);
  border-radius:var(--sp-method_block-img-radius,0);
}
/* height/fit 도 var — 'orig' 일 때 height:auto + contain 으로 원본 비율 그대로 노출 */
.method-img img{width:100%;height:var(--sp-method_block-imgfit-h,100%);object-fit:var(--sp-method_block-imgfit,cover);object-position:var(--sp-method_block-img-pos,center)}
.method-img-tag{
  position:absolute;
  left:24px;top:24px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  padding:10px 18px;
  letter-spacing:0.28em;
  color:var(--ink);
  font-size:12px;
}
.method-num{
  display:inline-block;
  color:var(--leaf);
  letter-spacing:0.32em;
  margin-bottom:32px;
  font-size:14px;
}
.method-name{
  font-weight:300;
  color:var(--ink);
  margin-bottom:8px;
  /* 항목 영문명 크기 = 전역 레이아웃 '제목'(--sp-t-hd) 직접 연동. 섹션 영문제목 설정 무시하고 무조건 제목 크기 따름.
     기존 index_f50 고정 대체. 한글명(.method-name-ko)은 자체 크기 유지. */
  font-size:var(--sp-t-hd) !important;
}
/* 영문 span 직접 타겟(상속 안 받는 경우 대비) + 높은 특이도. 한글명(.method-name-ko)은 제외 */
.method .method-name,
.method .method-name > span:not(.method-name-ko){font-size:var(--sp-t-hd) !important}
.method-name-ko{
  display:block;
  margin-top:12px;
  color:var(--ink);
  font-weight:400;
}
.method-desc{
  margin-top:40px;
  color:var(--ink);
  line-height:1.85;
}
.method-desc strong{
  font-weight:500;
  background:linear-gradient(transparent 60%,rgba(199,206,169,0.55) 60%);
  padding:0 4px;
}
.method-tags{
  margin-top:32px;
  display:flex;flex-wrap:wrap;gap:8px;
}
.method-tag{
  padding:8px 16px;
  border:1px solid var(--line);
  color:var(--ink-mute);
  border-radius:100px;
}
@media (max-width:1024px){
  .method-rows{gap:80px}
  .method-row{grid-template-columns:1fr;gap:40px}
  .method-row.reverse .method-img{order:0}
}
/* 모바일 — 가로 스와이프 (HTML 구조 변경 없음) */
@media (max-width:768px){
  .method-rows{
    flex-direction:row;
    overflow-x:auto;
    overflow-y:visible;
    /* scroll-snap 제거 — iOS Safari 가 가로 스크롤 후 세로 page scroll 을 hijack 하는 버그.
       카드 width 78% 로 peek 만 살리고, snap 없이 자연 스크롤. */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
    gap:16px;
    margin-top:48px;
    padding:0 5vw 8px;
    margin-left:-5vw;
    margin-right:-5vw;
  }
  .method-rows::-webkit-scrollbar{display:none}
  .method-row{
    /* 78% — 다음 카드가 옆에 살짝 보이도록 (peek). snap-align 도 제거 */
    flex:0 0 78%;
    align-content:start;
    gap:24px;
  }
  .method-row.reverse .method-img{order:0}
  /* 모바일 슬라이더 안에선 [data-enter] blur/scale 비활성 — 다음 슬라이드도 항상 보이게 */
  .method-row[data-enter]{
    opacity:1;
    filter:none;
    transform:none;
  }
}

/* =========================================================
   05. STATS — 수술방법별 수술정보 (4 메서드 카드 그리드)
========================================================= */
.stats{
  background:var(--cream);
  color:var(--bg);
  position:relative;
  overflow:hidden;
}
.stats::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(122,158,114,0.10), transparent 55%),
    radial-gradient(ellipse at 0% 100%, rgba(199,206,169,0.06), transparent 55%);
  pointer-events:none;
}
.stats .hive_b{position:relative;z-index:1}
.stats .sec-head h2,
.stats .sec-head .lead{color:var(--bg)}
.stats .sec-head .lead{color:rgba(255,255,255,0.7)}
.stats .sec-eyebrow{color:var(--dawn)}

.stats-method-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  margin-top:80px;
  border-top:1px solid rgba(255,255,255,0.16);
}
/* 카드 개수별 그리드 — 1~6개 모두 자연스럽게 */
.stats-method-grid.cards-1{grid-template-columns:1fr !important}
/* 1개일 때 — 카드 내부를 좌우 5:5 로 분할 (좌:번호/이름/한글, 우:정보) */
.stats-method-grid.cards-1 .stats-method-card{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  column-gap:48px;
  align-items:start;
}
.stats-method-grid.cards-1 .stats-method-card > .stats-method-num,
.stats-method-grid.cards-1 .stats-method-card > .stats-method-name,
.stats-method-grid.cards-1 .stats-method-card > .stats-method-ko{
  grid-column:1;
}
.stats-method-grid.cards-1 .stats-method-card > .stats-method-meta{
  grid-column:2;
  grid-row:1 / span 4;
  margin-top:0 !important;
  padding-top:0 !important;
  border-top:none !important;
  align-self:center;
}
.stats-method-grid.cards-1 .stats-method-card > .stats-method-ko{
  margin-bottom:0;
}
.stats-method-grid.cards-2{grid-template-columns:repeat(2,1fr)}
.stats-method-grid.cards-3{grid-template-columns:repeat(3,1fr)}
.stats-method-grid.cards-4{grid-template-columns:repeat(4,1fr)}
.stats-method-grid.cards-5,
.stats-method-grid.cards-6{grid-template-columns:repeat(3,1fr)}  /* 5/6 개는 3열 wrap (2행) */
.stats-method-card{
  position:relative;
  padding:56px 36px 64px;
  border-right:1px solid rgba(255,255,255,0.12);
  border-bottom:1px solid rgba(255,255,255,0.12);
  transition:background 0.5s var(--enter);
}
/* 마지막 컬럼 우측 보더 제거 — 카드 개수별 매칭 */
.stats-method-grid.cards-1 .stats-method-card{border-right:0}
.stats-method-grid.cards-2 .stats-method-card:nth-child(2n){border-right:0}
.stats-method-grid.cards-3 .stats-method-card:nth-child(3n){border-right:0}
.stats-method-grid.cards-4 .stats-method-card:nth-child(4n){border-right:0}
.stats-method-grid.cards-5 .stats-method-card:nth-child(3n){border-right:0}
.stats-method-grid.cards-6 .stats-method-card:nth-child(3n){border-right:0}
/* fallback (클래스 없을 때) */
.stats-method-card:nth-child(4n){border-right:0}
.stats-method-card:hover{background:rgba(255,255,255,0.025)}

.stats-method-num{
  display:block;
  font-size:clamp(56px,5.6vw,88px);
  line-height:1;
  font-weight:300;
  letter-spacing:-0.02em;
  margin-bottom:36px;
  /* 채움 — 위에서 아래로 wipe (background-clip:text) */
  background:linear-gradient(180deg, var(--dawn), var(--dawn)) no-repeat 0 0 / 100% 0;
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
  /* 아웃라인 */
  -webkit-text-stroke:0.5px rgba(199,206,169,0.45);
  transition:background-size 0.9s cubic-bezier(0.22,1,0.36,1),
             -webkit-text-stroke 0.9s cubic-bezier(0.22,1,0.36,1);
}
.stats-method-card:hover .stats-method-num{
  background-size:100% 100%;
  -webkit-text-stroke:0.5px rgba(199,206,169,0);
}

.stats-method-name{
  color:#fff;
  font-weight:300;
  letter-spacing:-0.01em;
  margin-bottom:8px;
  line-height:1.1;
}
.stats-method-ko{
  color:var(--dawn);
  margin-bottom:48px;
  letter-spacing:0.04em;
}

.stats-method-meta{
  display:flex;
  flex-direction:column;
  gap:0;
  padding-top:24px;
  border-top:1px solid rgba(255,255,255,0.10);
}
.stats-method-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.stats-method-row:last-child{border-bottom:0}
.stats-method-label{
  color:rgba(255,255,255,0.55);
  letter-spacing:0;
}
.stats-method-value{color:#fff}
.stats-method-value.is-strong{color:var(--dawn)}

.stats-foot{
  margin-top:64px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
  color:rgba(255,255,255,0.45);
  letter-spacing:0.04em;
}
.stats-foot::before,.stats-foot::after{
  content:'';
  display:block;
  width:32px;height:1px;
  background:rgba(255,255,255,0.2);
}

@media (max-width:1024px){
  .stats-method-grid,
  .stats-method-grid.cards-2,
  .stats-method-grid.cards-3,
  .stats-method-grid.cards-4,
  .stats-method-grid.cards-5,
  .stats-method-grid.cards-6{grid-template-columns:repeat(2,1fr)}
  .stats-method-grid.cards-1{grid-template-columns:1fr}
  .stats-method-card{border-right:1px solid rgba(255,255,255,0.12)}
  .stats-method-grid.cards-1 .stats-method-card{border-right:0}
  .stats-method-card:nth-child(2n){border-right:0}
  /* 1개 카드 5:5 분할 해제 — 모바일에선 1열로 다시 vertical flow */
  .stats-method-grid.cards-1 .stats-method-card{
    display:block;
  }
  .stats-method-grid.cards-1 .stats-method-card > .stats-method-meta{
    margin-top:24px;
    padding-top:24px;
    border-top:1px solid rgba(255,255,255,0.10);
  }
  .stats-method-grid.cards-1 .stats-method-card > .stats-method-ko{
    margin-bottom:48px;
  }
}
@media (max-width:600px){
  /* 2x2 유지 — 컴팩트 */
  .stats-method-grid{grid-template-columns:repeat(2,1fr);margin-top:48px}
  .stats-method-card{
    padding:28px 18px 32px;
    border-right:1px solid rgba(255,255,255,0.12);
  }
  .stats-method-card:nth-child(2n){border-right:0}
  .stats-method-num{
    font-size:clamp(40px,12vw,64px);
    margin-bottom:20px;
  }
  .stats-method-ko{margin-bottom:24px}
  .stats-method-meta{padding-top:16px}
  .stats-method-row{padding:9px 0;gap:8px}
  .stats-method-label{letter-spacing:0}
  .stats-foot{margin-top:40px;gap:10px}
}

/* =========================================================
   06. RECOMMEND — 권장 대상 (sticky 헤딩 + 매거진 row 리스트)
========================================================= */
.recom{background:var(--bg-soft)}
.recom-layout{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:120px;
  align-items:start;
}
.recom-head{
  position:sticky;
  top:120px;
}
.recom-eyebrow{
  color:var(--leaf);
  letter-spacing:0.32em;
  margin-bottom:32px;
  display:block;
}
.recom-en-h{
  color:var(--ink);
  font-weight:300;
  letter-spacing:-0.015em;
  line-height:1.05;
  margin-bottom:12px;   /* 영문↔한글 제목은 한 덩어리로 — 다른 섹션(en/ko 1쌍) 리듬과 통일 (기존 32px → 과한 간격) */
}
.recom-ko-h{
  color:var(--ink);
  margin-bottom:56px;
  font-weight:400;
  line-height:1.5;
}
.recom-counter{
  display:inline-flex;
  align-items:baseline;
  gap:14px;
  padding-top:32px;
  border-top:1px solid var(--line);
}
.recom-counter-num{
  color:var(--leaf);
  font-weight:300;
  letter-spacing:-0.02em;
  line-height:1;
}
.recom-counter-label{
  color:var(--ink-mute);
  letter-spacing:0.28em;
}

.recom-list{
  border-top:1px solid var(--line);
}
.recom-row{
  position:relative;
  display:grid;
  grid-template-columns:90px 1fr;
  gap:32px;
  align-items:baseline;
  padding:32px 24px 32px 16px;
  border-bottom:1px solid var(--line);
  transition:background 0.5s var(--enter);
}
.recom-row::before{
  content:'';
  position:absolute;
  left:0;top:50%;
  width:2px;height:0;
  background:var(--leaf);
  transform:translateY(-50%);
  transition:height 0.5s var(--enter);
}
.recom-row:hover{background:rgba(91,119,84,0.05)}
.recom-row:hover::before{height:62%}
.recom-row-num{
  color:var(--leaf);
  font-weight:300;
  letter-spacing:-0.02em;
  line-height:1;
}
.recom-row-ko{
  color:var(--ink);
  line-height:1.5;
}

@media (max-width:1024px){
  .recom-layout{grid-template-columns:1fr;gap:80px}
  .recom-head{position:relative;top:auto}
  .recom-row{
    grid-template-columns:64px 1fr;
    gap:20px;
    padding:24px 16px 24px 16px;
  }
}

/* =========================================================
   07. STEP — 시술 과정 (academic archive 매거진 스타일)
========================================================= */
.step{background:var(--bg)}
.step-list{
  margin-top:80px;
  border-top:1px solid var(--line);
}
.step-row{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:180px 140px 1fr 160px;
  gap:48px;
  align-items:center;
  padding:48px 24px;
  border-bottom:1px solid var(--line);
}
.step-row::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(91,119,84,0.06);
  clip-path:inset(0 100% 0 0);
  transition:clip-path 0.8s cubic-bezier(0.65,0,0.35,1);
  z-index:-1;
  pointer-events:none;
}
.step-row:hover::before{clip-path:inset(0 0 0 0)}
.step-num{
  color:var(--leaf);
  font-weight:300;
  letter-spacing:-0.02em;
  line-height:1;
}
.step-phase{
  color:var(--ink-mute);
  letter-spacing:0.32em;
}
.step-content{}
.step-title{
  color:var(--ink);
  font-weight:500;
  margin-bottom:12px;
  line-height:1.4;
}
.step-desc{
  color:var(--ink-mute);
  line-height:1.85;
  max-width:560px;
}
.step-badge{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  padding:10px 22px;
  border:1px solid var(--leaf);
  color:var(--leaf);
  border-radius:100px;
  letter-spacing:0.24em;
  background:transparent;
  transition:background 0.4s var(--enter),color 0.4s var(--enter);
}
.step-row:hover .step-badge{
  background:var(--leaf);
  color:#fff;
}
@media (max-width:1024px){
  .step-row{
    grid-template-columns:auto 1fr auto;
    grid-template-areas:
      "num phase badge"
      "content content content";
    gap:24px;
    padding:36px 0;
  }
  .step-num{grid-area:num}
  .step-phase{grid-area:phase;align-self:end}
  .step-content{grid-area:content;margin-top:8px}
  .step-badge{grid-area:badge}
}
@media (max-width:600px){
  .step-row{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "num badge"
      "phase phase"
      "content content";
    gap:8px 16px;
  }
  .step-phase{align-self:start;margin-top:4px}
  .step-content{margin-top:16px}
}

/* =========================================================
   08. NOTICE — 주의사항
========================================================= */
.notice{background:var(--bg-soft)}
.notice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 64px;
}
.notice-item{
  display:flex;gap:24px;
  padding:32px 0;
  border-bottom:1px solid var(--line);
}
.notice-item-num{
  flex-shrink:0;
  color:var(--leaf);
  letter-spacing:0.18em;
  width:80px;
  white-space:nowrap;
  padding-top:4px;
}
.notice-item-text{color:var(--ink)}
@media (max-width:900px){.notice-grid{grid-template-columns:1fr;gap:0}}

/* =========================================================
   09. DOCTOR QUOTE — 풀블리드 의사 + 코멘트
========================================================= */
.doctor{
  padding:0;
  background:var(--cream);
  color:#fff;
}
.doctor-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  align-items:stretch;
  min-height:720px;
}
.doctor-img{
  position:relative;
  background:#0F1A0D;
  overflow:hidden;
}
.doctor-img img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.doctor-img::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(37,43,30,0.55) 100%);
  pointer-events:none;
}
.doctor-body{
  padding:120px 8% 120px 7%;
  display:flex;flex-direction:column;justify-content:center;
}
.doctor-eyebrow{color:var(--dawn);letter-spacing:0.32em;margin-bottom:48px;font-size:13px}
.doctor-quote-mark{
  display:block;
  color:var(--leaf-soft);
  font-size:120px;line-height:1;
  margin-bottom:24px;
  font-family:'Cormorant SC',serif;
}
.doctor-quote{
  color:#fff;
  margin-bottom:48px;
  font-weight:300;
  line-height:1.7;
  font-size:18px;
}
/* 저장된 리치 텍스트의 인라인 font-size 무시 — 인용문 글자 크기 통일 */
.doctor-quote *{font-size:inherit !important;line-height:inherit !important}
.doctor-quote .accent{color:var(--dawn)}
.doctor-author{
  display:flex;align-items:center;gap:16px;
  padding-top:32px;
  border-top:1px solid rgba(255,255,255,0.18);
}
.doctor-author-line{
  width:48px;height:1px;
  background:var(--dawn);
}
.doctor-author-name{
  color:#fff;
  letter-spacing:0.18em;
}
.doctor-author-meta{color:rgba(255,255,255,0.6)}
@media (max-width:1024px){
  .doctor-grid{grid-template-columns:1fr;min-height:auto}
  .doctor-img{aspect-ratio:4/3}
  .doctor-body{padding:80px 8%}
}

/* =========================================================
   10. YOUTUBE — 강점 섹션 (인덱스급)
========================================================= */
.yt{background:var(--ext-bg, var(--bg))}
.yt-head{
  margin-bottom:56px;
}
.yt-eyebrow-row{
  /* 영문 라벨 숨김(--sp-yt-d-eyebrow:none) 시 라인까지 행 전체가 사라지도록 */
  display:var(--sp-yt-d-eyebrow, flex);
  align-items:center;
  gap:16px;
  margin-bottom:32px;
}
.yt-line{
  display:inline-block;
  width:48px;height:1px;
  background:var(--leaf);
  flex-shrink:0;
}
.yt-head h2{
  color:var(--ink);
  font-weight:300;
  letter-spacing:-0.02em;
  line-height:1;
}
.yt-head h2 .ko{
  display:block;
  margin-top:28px;
  color:var(--ink-mute);
  letter-spacing:0;
  font-weight:400;
  line-height:1.4;
}

/* 컨트롤 영역 — 탭 + 검색 한 줄 */
.yt-controls{
  display:grid;
  grid-template-columns:1fr 280px;
  align-items:end;
  gap:32px;
  margin-bottom:56px;
  border-bottom:1px solid var(--line);
}
.yt-tabs{
  display:flex;
  gap:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.yt-tabs::-webkit-scrollbar{display:none}
.yt-tab{
  padding:18px 24px;
  color:var(--ink-mute);
  position:relative;
  white-space:nowrap;
  cursor:pointer;
  transition:color 0.4s var(--enter);
}
.yt-tab::after{
  content:'';
  position:absolute;
  left:0;bottom:-1px;
  width:0;height:2px;
  background:var(--leaf);
  transition:width 0.5s cubic-bezier(0.22,1,0.36,1);
}
.yt-tab:hover{color:var(--ink)}
.yt-tab.is-active{color:var(--ink)}
.yt-tab.is-active::after{width:100%}
.yt-tab-count{
  margin-left:6px;
  color:var(--leaf);
  font-size:12px;
}

/* 검색 */
.yt-search{
  position:relative;
  padding-bottom:14px;
}
.yt-search-input{
  width:100%;
  border:0;
  background:transparent;
  padding:8px 36px 8px 0;
  color:var(--ink);
  font-family:inherit;
  outline:none;
  border-bottom:1px solid var(--line);
}
.yt-search-input:focus{border-bottom-color:var(--leaf)}
.yt-search-input::placeholder{color:var(--ink-mute)}
.yt-search-icon{
  position:absolute;
  right:0;bottom:24px;
  pointer-events:none;
  color:var(--ink-mute);
}

/* 메인 피처드 영상 */
.yt-featured{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:48px;
  margin-bottom:72px;
  align-items:center;
}
.yt-featured-thumb{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0F1A0D;
  cursor:pointer;
}
.yt-featured-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 1.2s var(--enter);
}
.yt-featured-thumb:hover img{transform:scale(1.04)}
.yt-featured-thumb::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.45) 100%);
  z-index:1;
}
.yt-featured-play{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  width:88px;height:88px;
  border-radius:50%;
  background:rgba(255,255,255,0.96);
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.4s var(--enter),background 0.4s var(--enter);
}
.yt-featured-thumb:hover .yt-featured-play{
  transform:translate(-50%,-50%) scale(1.06);
  background:#fff;
}
.yt-featured-play svg{width:24px;height:28px;fill:var(--ink);margin-left:4px}
.yt-featured-time{
  position:absolute;
  right:14px;bottom:14px;
  z-index:2;
  background:rgba(0,0,0,0.85);
  color:#fff;
  padding:5px 10px;
  border-radius:2px;
}
.yt-featured-info{padding:12px 0}
.yt-featured-tag{
  display:inline-block;
  color:var(--leaf);
  letter-spacing:0.04em;
  margin-bottom:24px;
}
.yt-featured-title{
  color:var(--ink);
  font-weight:500;
  margin-bottom:20px;
  line-height:1.45;
}
.yt-featured-desc{
  color:var(--ink-mute);
  margin-bottom:24px;
  line-height:1.7;
}
.yt-featured-meta{
  display:flex;
  gap:18px;
  color:var(--ink-mute);
  padding-top:24px;
  border-top:1px solid var(--line);
}
.yt-featured-meta-dot{
  width:3px;height:3px;
  border-radius:50%;
  background:var(--ink-mute);
  align-self:center;
  opacity:0.5;
}

/* 영상 그리드 — 제목만 크게 */
.yt-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:40px 24px;
}
.yt-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  text-align:left;
  cursor:pointer;
  background:transparent;
  border:0;
  padding:0;
  color:inherit;
  font:inherit;
  width:100%;
  transition:opacity 0.4s var(--enter);
}
.yt-card:hover{opacity:0.92}
.yt-card-thumb{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#0F1A0D;
  margin-bottom:18px;
}
.yt-card-thumb img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.8s var(--enter);
}
.yt-card:hover .yt-card-thumb img{transform:scale(1.04)}
.yt-card-thumb::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 60%,rgba(0,0,0,0.35) 100%);
}
.yt-card-time{
  position:absolute;
  right:8px;bottom:8px;
  background:rgba(0,0,0,0.85);
  color:#fff;
  padding:3px 8px;
  font-size:12px;
  border-radius:2px;
  z-index:1;
}
.yt-card-play{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:48px;height:48px;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transition:opacity 0.4s var(--enter);
  z-index:2;
}
.yt-card:hover .yt-card-play{opacity:1}
.yt-card-play svg{width:14px;height:16px;fill:var(--ink);margin-left:2px}
.yt-card-title{
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--ink);
  font-weight:500;
  margin-bottom:10px;
  line-height:1.4;
  min-height:calc(1em * 1.4); /* 1줄 고정 → 카드 높이 정렬 */
}
.yt-card-meta{
  display:block;
  color:var(--ink-mute);
}

/* 영상 모달 — 페이지 내 재생 (외부 이동 없음) */
.yt-modal{
  position:fixed;inset:0;
  z-index:9000;
  background:rgba(15,26,13,0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.yt-modal.is-open{display:flex}
.yt-modal-frame{
  position:relative;
  width:min(1100px,96vw);
  aspect-ratio:16/9;
  background:#000;
  box-shadow:0 32px 80px -24px rgba(0,0,0,0.6);
}
.yt-modal-frame iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:0;
}
.yt-modal-close{
  position:absolute;
  right:0;top:-48px;
  width:36px;height:36px;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform 0.4s var(--enter);
}
.yt-modal-close:hover{transform:rotate(90deg)}
.yt-modal-close svg{width:20px;height:20px}

/* 모바일 더보기 토글 (모바일 전용) */
.yt-more-toggle{
  display:none;
  margin:40px auto 0;
  padding:14px 36px;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  letter-spacing:0.04em;
  transition:background 0.4s var(--enter),color 0.4s var(--enter);
  width:100%;
  max-width:320px;
}
.yt-more-toggle:hover,
.yt-more-toggle:focus-visible{background:var(--ink);color:var(--bg);outline:none}

@media (max-width:1024px){
  .yt-controls{grid-template-columns:1fr;gap:0}
  .yt-search{padding-bottom:14px}
  .yt-featured{grid-template-columns:1fr}
  .yt-grid{grid-template-columns:repeat(2,1fr);gap:32px 16px}
}
@media (max-width:600px){
  .yt-grid{grid-template-columns:1fr}
  /* 모바일에서는 처음 4개만 보이고 나머지 4개는 더보기 토글 */
  .yt-grid > .yt-card:nth-child(n+5){display:none}
  .yt-grid.is-expanded > .yt-card:nth-child(n+5){display:flex}
  .yt-more-toggle{display:flex;align-items:center;justify-content:center;gap:10px}
}

/* =========================================================
   11. FAQ — 강점 섹션 (인덱스 카테고리 패턴)
========================================================= */
.faq{background:var(--cream);color:#fff;padding-bottom:200px}
.faq .sec-head h2,
.faq .sec-head .lead{color:var(--bg)}
.faq .sec-head .lead{color:rgba(255,255,255,0.72)}
.faq .sec-eyebrow{color:var(--dawn)}
/* FAQ 컨트롤 — 탭 + 검색 한 줄 */
.faq-controls{
  display:grid;
  grid-template-columns:1fr 280px;
  align-items:end;
  gap:32px;
  margin-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,0.18);
}
.faq-tabs{
  display:flex;
  flex-wrap:nowrap;
  gap:0;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  touch-action:pan-x;
  overscroll-behavior-x:contain;
}
.faq-tabs::-webkit-scrollbar{display:none}
.faq-tab{
  flex:0 0 auto;
  padding:18px 24px;
  color:rgba(255,255,255,0.55);
  letter-spacing:0;
  position:relative;
  white-space:nowrap;
  cursor:pointer;
  transition:color 0.4s var(--enter);
}
.faq-tab::after{
  content:'';
  position:absolute;
  left:0;bottom:-1px;
  width:0;height:2px;
  background:var(--dawn);
  transition:width 0.5s var(--enter);
}
.faq-tab:hover{color:#fff}
.faq-tab.is-active{color:var(--dawn)}
.faq-tab.is-active::after{width:100%}

/* FAQ 검색 */
.faq-search{
  position:relative;
  padding-bottom:14px;
}
.faq-search-input{
  width:100%;
  border:0;
  background:transparent;
  padding:8px 36px 8px 0;
  color:#fff;
  font-family:inherit;
  outline:none;
  border-bottom:1px solid rgba(255,255,255,0.2);
}
.faq-search-input:focus{border-bottom-color:var(--dawn)}
.faq-search-input::placeholder{color:rgba(255,255,255,0.45)}
.faq-search-icon{
  position:absolute;
  right:0;bottom:24px;
  pointer-events:none;
  color:rgba(255,255,255,0.45);
}
@media (max-width:1024px){
  .faq-controls{grid-template-columns:1fr;gap:0}
}

.faq-panels{max-width:none;margin:0}
.faq-panel{display:none}
.faq-panel.is-active{display:block;animation:faqFade 0.6s var(--enter) both}
@keyframes faqFade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

.faq-item{
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.faq-item:first-child{border-top:1px solid rgba(255,255,255,0.12)}
.faq-q{
  width:100%;
  padding:36px 32px;
  display:grid;
  grid-template-columns:80px 1fr 32px;
  gap:24px;
  align-items:center;
  text-align:left;
  color:#fff;
  transition:background 0.3s var(--enter);
}
.faq-q:hover{background:rgba(255,255,255,0.02)}
.faq-q:focus-visible{outline:2px solid var(--dawn);outline-offset:-4px}
.faq-q-mark{color:var(--dawn);letter-spacing:0.18em;font-size:14px}
.faq-q-text{color:#fff;font-weight:500}
.faq-q-icon{
  width:32px;height:32px;
  border:1px solid rgba(255,255,255,0.32);
  border-radius:50%;
  position:relative;
  transition:transform 0.5s var(--enter),border-color 0.4s var(--enter);
}
.faq-q-icon::before,.faq-q-icon::after{
  content:'';position:absolute;background:#fff;
  top:50%;left:50%;
}
.faq-q-icon::before{width:12px;height:1px;transform:translate(-50%,-50%)}
.faq-q-icon::after{width:1px;height:12px;transform:translate(-50%,-50%);transition:transform 0.5s var(--enter)}
.faq-q[aria-expanded="true"] .faq-q-icon{border-color:var(--dawn);transform:rotate(45deg)}
.faq-q[aria-expanded="true"] .faq-q-icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height 0.6s var(--enter)}
.faq-q[aria-expanded="true"] + .faq-a{max-height:500px}
.faq-a-inner{
  padding:0 32px 36px 136px;
  color:rgba(255,255,255,0.78);
  line-height:1.85;
}
@media (max-width:900px){
  .faq-q{grid-template-columns:64px 1fr 28px;padding:28px 20px}
  .faq-a-inner{padding:0 20px 28px 92px}
}

/* =========================================================
   12. RELATED — 연관 시술 (큰 이미지 카드)
========================================================= */
.related{background:var(--bg-soft)}
.related-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  align-items:stretch;
}
.related-card-wrap{
  display:flex;
  flex-direction:column;
  height:100%;
  min-width:0;
}
.related-card{
  position:relative;
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  text-decoration:none;
  color:inherit;
  background:var(--paper);
  overflow:hidden;
  transition:transform 0.6s var(--enter);
}
.related-card:hover{transform:translateY(-8px)}
.related-card-img{
  flex:0 0 auto;
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bg);
}
.related-card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--enter)}
.related-card:hover .related-card-img img{transform:scale(1.06)}
.related-card-body{
  flex:1 1 auto;
  min-height:0;
  padding:32px 28px;
  display:grid;
  grid-template-columns:1fr 32px;
  align-items:end;
  gap:16px;
}
.related-card-text{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.related-card-name{display:block}
.related-card-text{display:flex;flex-direction:column;gap:8px}
.related-card-en{color:var(--leaf);letter-spacing:0.18em;font-size:13px}
.related-card-name{color:var(--ink);font-weight:500}
.related-card-arr{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--leaf);
  transition:background 0.4s var(--enter),color 0.4s var(--enter),border-color 0.4s var(--enter);
}
.related-card:hover .related-card-arr{background:var(--leaf);color:#fff;border-color:var(--leaf)}
@media (max-width:1024px){.related-grid{grid-template-columns:repeat(2,1fr)}}

/* =========================================================
   13. CTA — 마지막 상담 유도
========================================================= */
.cta{
  padding:120px 0;
  background:var(--ink);
  color:#fff;
  text-align:center;
}
.cta h2{color:#fff;font-weight:300;margin-bottom:32px}
.cta p{color:rgba(255,255,255,0.72);margin-bottom:48px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.85}
.cta-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  justify-content:center;
  gap:16px;
  max-width:560px;
  margin:0 auto;
}
.cta-btn{
  padding:18px 28px;
  letter-spacing:0.18em;
  font-size:14px;
  text-decoration:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  width:100%;
  min-width:0;
  box-sizing:border-box;
  transition:transform 0.4s var(--enter);
}
.cta-btn > span:first-child{
  flex:1 1 auto;
  min-width:0;
  text-align:center;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cta-btn > [aria-hidden]{
  flex:0 0 auto;
  width:14px;
  text-align:center;
  font-size:14px;
  line-height:1;
}
.cta-btn-primary{background:var(--leaf);color:#fff}
.cta-btn-primary:hover{transform:translateY(-2px)}
.cta-btn-secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,0.32)}
.cta-btn-secondary:hover{background:rgba(255,255,255,0.08);transform:translateY(-2px)}
.cta-buttons:has(.cta-btn:only-child){grid-template-columns:minmax(0,280px)}
@media (max-width:560px){
  .cta-buttons{grid-template-columns:1fr;max-width:320px}
}

/* =========================================================
   reduced-motion
========================================================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
  [data-enter]{opacity:1;transform:none;filter:none}
  .hero-bg{animation:none;transform:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* =========================================================
   sub_tpl 통합 패치 — V2 ext 섹션이 sub_tpl 의 부모 컨테이너에 갇히지 않게.
   원본 HTML 가이드는 body 가 직접 부모지만, sub_tpl 안에서는 main/section 안에
   중첩되어 max-width 제약을 받음 → calc 트릭으로 viewport 전폭 확보.
========================================================= */
body { font-family: 'Pretendard', 'Noto Sans KR', sans-serif; }

.hero,
.intro,
section#ba,
.why,
.method,
.stats,
.recom,
.step,
.notice,
.doctor,
.yt,
.faq,
.related,
.cta {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  position: relative;
  box-sizing: border-box;
}

/* sub_tpl 의 .sp-* 클래스들이 V2 섹션 내부 요소에 영향 주지 않도록 격리 */
.hero *, .intro *, section#ba *,
.why *, .method *, .stats *, .recom *, .step *,
.notice *, .doctor *, .yt *, .faq *, .related *, .cta * {
  box-sizing: border-box;
}
/* V2 ext 한글 텍스트 단어 단위 줄바꿈 전역 */
.intro p,.intro h2,.intro h3,.intro span,
.why p,.why h2,.why h3,.why span,
.method p,.method h2,.method h3,.method span,
.stats p,.stats h2,.stats h3,.stats span,
.recom p,.recom h2,.recom h3,.recom span,
.notice p,.notice h2,.notice h3,.notice span,
.cta p,.cta h2,.cta h3,.cta span,
.step p,.step h2,.step h3,.step span{
  word-break:keep-all;
  overflow-wrap:break-word;
}

/* =========================================================
   sub_tpl override 강화 — sub_tpl 의 .sp-* CSS 가 더 늦게 로드되므로
   동등한 specificity 에서 후순위가 이겨버림. body chain + !important 로
   V2 핵심 레이아웃을 강제 적용. 1차 출시용 — 추후 정리 가능.
========================================================= */
html body section.hero {
  position: relative !important;
  height: 100vh !important;
  min-height: 720px !important;
  overflow: hidden !important;
  color: #fff !important;
  background: #0F1A0D !important;
}
html body section.hero .hero-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
}
html body section.hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg,rgba(15,26,13,0.55) 0%,rgba(15,26,13,0.20) 40%,rgba(15,26,13,0.85) 100%) !important;
  z-index: 1 !important;
}
html body section.hero .hero-inner {
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 0 0 140px !important;
}
html body section.hero .hero-title,
html body section.hero .hero-ko {
  color: #fff !important;
}
html body section.hero .hero-en,
html body section.hero .hero-sub,
html body section.hero .hero-counter {
  color: rgba(255,255,255,0.7) !important;
}
html body section.hero .hero-meta {
  position: absolute !important;
  right: 5% !important;
  bottom: 120px !important;
  z-index: 2 !important;
  text-align: right !important;
  color: rgba(255,255,255,0.72) !important;
}
html body section.hero .scroll-hint {
  position: absolute !important;
  left: 50% !important;
  bottom: 48px !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  color: rgba(255,255,255,0.72) !important;
}

/* =========================================================
   FINAL AGGRESSIVE OVERRIDE — sub_tpl 의 #sp-sections 안에 V2 ext 가
   래핑되어 width/color 가 부모에 종속됨. 다중 selector + !important 로 강제.
   진단 마커: 적용되면 .hero 좌상단에 라임색 점선 박스가 보여야 함.
========================================================= */
section.hero,
div#sp-sections section.hero,
html body section.hero,
html body div#sp-sections section.hero {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: 100vh !important;
  min-height: 600px !important;
  position: relative !important;
  background: #0F1A0D !important;
  color: #fff !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

section.hero .hero-inner,
html body section.hero .hero-inner {
  position: relative !important;
  z-index: 2 !important;
  height: 100% !important;
  width: 95% !important;
  max-width: 1320px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 0 0 140px !important;
  color: #fff !important;
}

section.hero .hero-title,
html body section.hero .hero-title {
  color: #fff !important;
  font-size: clamp(56px,7.6vw,108px) !important;
}

section.hero .hero-ko,
html body section.hero .hero-ko {
  color: #fff !important;
}

section.hero .hero-meta,
html body section.hero .hero-meta {
  position: absolute !important;
  right: 5% !important;
  bottom: 120px !important;
  left: auto !important;
  z-index: 2 !important;
  text-align: right !important;
  color: rgba(255,255,255,0.85) !important;
}

section.hero .scroll-hint,
html body section.hero .scroll-hint {
  position: absolute !important;
  left: 50% !important;
  bottom: 48px !important;
  transform: translateX(-50%) !important;
  z-index: 2 !important;
  color: rgba(255,255,255,0.72) !important;
}

/* =========================================================
   메인 히어로 배경 좌우 반전 (.hero--bgflip) — 배경 이미지/영상을 가로 미러.
   .hero-bg 는 zoom 애니메이션 transform 을 쓰므로 --hero-bg-sx(-1) 로 부호만 바꿔 함께 유지.
========================================================= */
.hero.hero--bgflip{ --hero-bg-sx:-1; }
.hero.hero--bgflip .hero-bg-video{ transform:scaleX(-1); }
@media (prefers-reduced-motion: reduce){
  .hero.hero--bgflip .hero-bg{ transform:scaleX(-1) !important; }
  .hero.hero--bgflip .hero-bg-video{ transform:scaleX(-1) !important; }
}

/* =========================================================
   메인 히어로 좌우 반전 (.hero--flip) — 텍스트 우측 / META 좌측.
   위 override 블록들이 !important 라 3-클래스(.hero.hero--flip .X) + !important 로 이김.
========================================================= */
/* 텍스트 정렬 반전은 데스크톱만 — 모바일은 META 가 숨겨져(단일 컬럼) 좌측 정렬 유지가 자연스러움 */
@media (min-width:901px){
  .hero.hero--flip .hero-inner{ align-items:flex-end !important; text-align:right !important; }
  .hero.hero--flip .hero-meta-line{ justify-content:flex-end !important; }
}
.hero.hero--flip .hero-meta,
html body section.hero.hero--flip .hero-meta{ left:5% !important; right:auto !important; text-align:left !important; }
.hero.hero--flip .hero-meta dt{ justify-content:flex-start !important; }
.hero.hero--flip .sp-geo-meta{ justify-content:flex-start !important; }
.hero.hero--flip .sp-geo-pop{ right:auto !important; left:0 !important; }
.hero.hero--flip .sp-geo-pop::after{ right:auto !important; left:16px !important; }



/* === ba-period-pill : 라운드 뱃지 — 메타 영역 상단 단독 배치 (전:카테고리 / 후:개월수) === */
.ba-period-pill {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 12px 0;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  background: rgba(0,0,0,0.06);
  color: var(--ink, #111);
  border: 1px solid rgba(0,0,0,0.12);
  white-space: nowrap;
}

.ba-before .ba-period-pill {
  background: #fff;
  color: var(--leaf, #3F5638);   /* 초록 (leaf) */
  border-color: rgba(91, 119, 84, 0.35);
}

.ba-after .ba-period-pill,
.ba-meta-after .ba-period-pill {
  background: var(--ink, #111);
  color: var(--bg, #fff);
  border-color: var(--ink, #111);
}

@media (max-width: 768px) {
  .ba-period-pill {
    font-size: 12px;
    padding: 4px 12px;
    margin-bottom: 10px;
  }
}

/* === 긴 텍스트 안전망 — 패널 높이 들쭉/가로 오버플로 방지 === */
.ba-meta-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: keep-all;
  overflow-wrap: anywhere;
  max-height: calc(1.85em * 4);  /* line-height(1.85) × 4줄 */
}

@media (max-width: 768px) {
  .ba-meta-desc {
    -webkit-line-clamp: 3;
    max-height: calc(1.85em * 3);
  }
}

/* 활성 패널 가로 오버플로 컷 — 긴 URL/단어가 페이지를 늘리지 않도록 */
.ba-panel {
  overflow: hidden;
  min-width: 0;
}
.ba-side {
  min-width: 0;            /* grid item 이 콘텐츠로 늘어나지 않도록 */
  overflow: hidden;
}
.ba-meta-title {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 페이지 자체 가로 스크롤 방지 (스와이프 동작 차단) */
.ba-section {
  position: relative;       /* 슈퍼어드민 스타일 칩(.sp-sty-chip) absolute 의 기준 컨테이너 */
  overflow-x: clip;
}
section.yt {
  position: relative;       /* 동일 */
}

/* === YT 모달 — guide.js 의 open/close 가 .is-open 토글 === */
.yt-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.yt-modal.is-open { display: flex; }
.yt-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.86);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.yt-modal-frame-wrap {
  position: relative;
  z-index: 2;
  width: min(1100px, 92vw);
  max-width: 100%;
}
.yt-modal-frame-box {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}
.yt-modal-frame-box iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.yt-modal-close {
  position: absolute;
  top: -48px;
  right: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(0,0,0,0.4);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.yt-modal-close:hover {
  background: rgba(255,255,255,0.15);
  transform: scale(1.06);
}
@media (max-width: 768px) {
  .yt-modal { padding: 16px; }
  .yt-modal-close {
    top: -44px;
    width: 36px;
    height: 36px;
    font-size: 20px;
  }
}

/* ===========================================
   Column (게시판 아코디언) — skin/sub_ext/column
   구조: article > .col-frame (grid 2col x 2row)
     ┌─────────────────────────────────────────┐
     │  [01] [Title       ]  │  [    IMAGE   ] │  row1
     │  [extras            ]  │  [    IMAGE   ] │  row2 (span)
     └─────────────────────────────────────────┘
   image 가 row 1-2 span 으로 title 과 top-align
   =========================================== */
.col,.col *{box-sizing:border-box}
.col img{display:block;max-width:100%;height:auto}
.col button{font:inherit;color:inherit;background:transparent;border:0;cursor:pointer;padding:0;text-align:left}
.col{
  padding:120px 0;
  background:var(--bg,#fff);
  --col-ease:cubic-bezier(0.65, 0, 0.2, 1);
}
.col .hive_b{max-width:var(--sp-mw,1320px);margin:0 auto;padding:0 5vw}
.col .sec-head{text-align:center;margin-bottom:72px}
.col .sec-head h2{font-weight:400;letter-spacing:-.01em;line-height:1.2}
.col .sec-head .sec-eyebrow{color:var(--sp-gold,#a78b5f);letter-spacing:.3em;margin-bottom:14px;text-transform:uppercase}
.col .sec-head .pret{display:block;margin-top:10px;color:var(--ink-mute,#7a7a7a);font-weight:400}

.col-list{
  position:relative;
  border-top:1px solid rgba(0,0,0,.07);
}
.col-row{
  position:relative;
  border-bottom:1px solid rgba(0,0,0,.07);
  transition:border-color 0.6s var(--col-ease);
}
.col-row.is-active{border-bottom-color:rgba(0,0,0,.14)}

/* 행 grid — col1: text(번호+제목+extras) / col2: image (rows span) */
.col-frame{
  display:grid;
  grid-template-columns:minmax(0,1fr) 0fr;
  grid-template-rows:auto auto;
  column-gap:48px;
  row-gap:0;
  padding:44px 4px;
  align-items:start;
  transition:grid-template-columns 0.8s var(--col-ease), padding 0.6s var(--col-ease), column-gap 0.6s var(--col-ease);
}
.col-row.is-active .col-frame{
  grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
  padding:56px 4px;
}
/* 이미지가 없는 항목은 활성 상태에서도 빈 이미지 칼럼을 만들지 않고 글을 전체폭으로 표시 */
.col-row--no-image.is-active .col-frame{
  grid-template-columns:minmax(0,1fr);
  column-gap:0;
}

/* 트리거 — 번호 + 제목 (클릭 영역) */
.col-trigger{
  grid-column:1;
  grid-row:1;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  align-items:baseline;
  gap:24px;
  width:100%;
  cursor:pointer;
}
.col-num{
  display:inline-block;
  font-style:italic;
  font-weight:300;
  font-size:13px;
  letter-spacing:.08em;
  color:rgba(0,0,0,.35);
  line-height:1;
  transition:color 0.6s var(--col-ease);
}
.col-trigger:hover .col-num{color:rgba(0,0,0,.6)}
.col-row.is-active .col-num{color:var(--ink,#111)}

/* 제목 — 비활성 small / 활성 large (scale 로 GPU 가속 전환) */
.col-title{
  display:block;
  /* base size = ACTIVE 기준. 비활성은 scale 로 줄임. 팝오버 '항목 제목 크기'(--sty-t-itemt)로 조절 */
  font-size:var(--sty-t-itemt, clamp(22px, 2.6vw, 32px));
  font-weight:500;
  letter-spacing:-.005em;
  line-height:1.3;
  color:rgba(0,0,0,.42);
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  transform:scale(0.62);
  transform-origin:left center;
  transition:color 0.6s var(--col-ease), transform 0.8s var(--col-ease);
  will-change:transform, color;
}
.col-trigger:hover .col-title{color:rgba(0,0,0,.68)}
.col-row.is-active .col-title{
  color:var(--sty-c-itemt, var(--ink,#111));
  transform:scale(1);
  letter-spacing:-.01em;
}

/* extras — 번호 폭만큼 들여쓰기 (제목과 정렬) */
.col-extras{
  grid-column:1;
  grid-row:2;
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows 0.7s var(--col-ease);
}
.col-row.is-active .col-extras{grid-template-rows:1fr}
.col-extras-inner{
  overflow:hidden;
  min-height:0;
  padding-left:80px;  /* 56px(num) + 24px(gap) */
}
.col-extras-inner > *{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.55s var(--col-ease), transform 0.55s var(--col-ease);
}
.col-row.is-active .col-extras-inner > *{opacity:1;transform:translateY(0)}
.col-row.is-active .col-extras-inner > *:nth-child(1){transition-delay:0.2s}
.col-row.is-active .col-extras-inner > *:nth-child(2){transition-delay:0.28s}
.col-row.is-active .col-extras-inner > *:nth-child(3){transition-delay:0.36s}
.col-extras-inner > *:first-child{margin-top:18px}

.col-tags{
  color:var(--ink-mute,#7a7a7a);
  font-size:13px;
  letter-spacing:.02em;
  line-height:1.7;
  margin:0 0 18px;
}
.col-tag-dot{margin:0 5px;color:rgba(0,0,0,.18)}
.col-tag-item{display:inline-block}
.col-body{
  color:rgba(0,0,0,.72);
  font-size:14px;
  line-height:1.95;
  letter-spacing:-.005em;
  margin:0 0 26px;
}
.col-cta{
  display:inline-flex;
  align-items:center;
  gap:28px;
  padding:14px 24px;
  border:1px solid var(--ink,#111);
  color:var(--ink,#111);
  font-size:13px;
  text-decoration:none;
  letter-spacing:.05em;
  background:transparent;
  transition:background 0.5s var(--col-ease), color 0.5s var(--col-ease), gap 0.4s var(--col-ease), opacity 0.55s var(--col-ease), transform 0.55s var(--col-ease);
}
.col-cta:hover{background:var(--ink,#111);color:var(--bg,#fff);gap:36px}
.col-cta-arrow{font-size:14px;transition:transform 0.4s var(--col-ease)}
.col-cta:hover .col-cta-arrow{transform:translateX(4px)}

/* 이미지 — col2, rows 1~2 span. col-frame grid-template-columns 변화로 width 가 0fr → 0.85fr 부드럽게 */
.col-image{
  grid-column:2;
  grid-row:1 / span 2;
  align-self:start;
  width:100%;
  aspect-ratio:5/3;
  overflow:hidden;
  background:rgba(0,0,0,.04);
  opacity:0;
  transition:opacity 0.7s var(--col-ease);
}
.col-row.is-active .col-image{
  opacity:1;
  transition-delay:0.2s;
}
.col-image img{
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.06);
  transition:transform 1.4s var(--col-ease);
}
.col-row.is-active .col-image img{
  transform:scale(1);
  transition-delay:0.2s;
}

/* tablet */
@media (max-width:1024px){
  .col{padding:80px 0}
  .col .sec-head{margin-bottom:48px}
  .col-frame{padding:32px 4px;column-gap:32px}
  .col-row.is-active .col-frame{padding:44px 4px}
  .col-trigger{grid-template-columns:44px 1fr;gap:18px}
  .col-title{font-size:var(--sty-t-itemt, clamp(20px, 2.6vw, 26px));transform:scale(0.7)}
  .col-row.is-active .col-title{transform:scale(1)}
  .col-extras-inner{padding-left:62px}
}

/* mobile */
@media (max-width:768px){
  .col{padding:56px 0}
  .col .sec-head{margin-bottom:36px}
  .col-frame{
    grid-template-columns:1fr!important;  /* image always full width column */
    column-gap:0;
    padding:20px 0;
  }
  .col-row.is-active .col-frame{padding:28px 0}
  .col-trigger{grid-template-columns:36px 1fr;gap:14px;align-items:center}
  .col-num{font-size:12px}
  .col-title{white-space:normal;font-size:var(--sty-t-itemt, 20px);line-height:1.35;transform:scale(0.82)}
  .col-row.is-active .col-title{transform:scale(1)}
  .col-extras{grid-row:3}
  .col-extras-inner{padding-left:50px}
  .col-extras-inner > *:first-child{margin-top:14px}
  .col-body{margin-bottom:18px}
  .col-cta{padding:12px 20px;gap:20px;font-size:12px}
  .col-image{
    grid-column:1;
    grid-row:2;
    aspect-ratio:16/10;
    max-height:0;
    margin-top:0;
    transition:max-height 0.7s var(--col-ease), margin-top 0.7s var(--col-ease), opacity 0.6s var(--col-ease);
  }
  /* 활성 시에만 상단 여백 — 제목과 이미지가 붙지 않도록 (접힌 상태에선 0 유지) */
  .col-row.is-active .col-image{max-height:60vh;margin-top:20px}
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  .col-title, .col-num, .col-frame, .col-extras, .col-extras-inner > *,
  .col-image, .col-image img{
    transition:none!important;
    transform:none!important;
  }
}

/* ============================================================
   step_sticky - 스크롤 단계 섹션 (레이아웃 3종: split / bg / editorial)
   스크롤 시 현재 단계만 강조 (.is-active). JS: guide.js 의 step-sticky 블록
============================================================ */
.step-sticky{background:var(--bg)}
.step-sticky .sec-head{margin-bottom:0;text-align:left}
/* 한글(.pret)은 자간 제거 - eng_b2(영문) 부모의 letter-spacing 0.02em 상속 차단 */
.step-sticky .pret{letter-spacing:normal}
/* 등장 시 흐림(blur) 제거 - 이미지 포함 또렷하게 (페이드/줌만 유지). 전역 data-enter 의 blur 만 무력화 */
.step-sticky [data-enter]{filter:none!important}
/* 등장 효과 완전 끄기 (anim=off) - 즉시 표시 */
.step-sticky.ss-noanim [data-enter]{opacity:1!important;transform:none!important;transition:none!important}

/* ===== 공통: 단계 이미지(shot) 크로스페이드 + 빈 플레이스홀더 ===== */
.step-sticky .ss-shot{position:absolute;inset:0;opacity:0;transform:scale(1.05);transition:opacity .8s var(--enter),transform 1.3s var(--enter)}
.step-sticky .ss-shot.is-active{opacity:1;transform:scale(1)}
.step-sticky .ss-shot img{width:100%;height:100%;object-fit:cover;display:block}
.step-sticky.ss-single .ss-shot{opacity:1;transform:none}
.step-sticky .ss-shot-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-mute);font-size:14px;background:var(--bg-soft);cursor:pointer;text-align:center;padding:20px}
.step-sticky .ss-ic-empty{display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--ink-mute);cursor:pointer;font-size:18px}

/* ============================================================
   SPLIT - 좌측 헤더+이미지(고정) / 우측 번호 리스트
============================================================ */
.ss-split .ss-split-head{margin-bottom:46px}
.ss-split .ss-split-head h2{font-weight:700}
.ss-split .ss-split-head .lead{margin-left:0;margin-right:0;max-width:62ch}
.ss-split.ss-noen .ss-split-head h2 > .pret{font-size:clamp(23px,2.4vw,32px)!important;font-weight:700;color:var(--ink);margin-top:0}
/* 그리드 - 왼쪽 칸이 오른쪽 리스트 높이까지 늘어나야 sticky 동작 (stretch 필수) */
.ss-split .ss-grid{display:grid;grid-template-columns:var(--ss-ratio,1fr 1fr);gap:clamp(40px,6vw,96px);align-items:stretch}
.ss-split.ss-img-right .ss-media{order:2}
.ss-split.ss-no-img .ss-grid{grid-template-columns:1fr}
.ss-split .ss-media-inner{position:sticky;top:var(--ss-sticky-top,90px)}
.ss-split:not(.ss-sticky) .ss-media-inner{position:static}
.ss-split .ss-media-box{position:relative;width:100%;aspect-ratio:var(--ss-img-ratio,4/3.3);border-radius:24px;overflow:hidden;background:var(--bg-soft);box-shadow:var(--ss-img-shadow,0 26px 56px rgba(0,0,0,.10))}
/* 우측 리스트 */
.ss-split .ss-list{display:flex;flex-direction:column;gap:var(--ss-gap,clamp(70px,9vh,112px));padding:0}
.ss-split .ss-item{position:relative;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;opacity:.42;transform:translateY(10px);transition:opacity .6s var(--enter),transform .7s var(--enter)}
.ss-split .ss-item.is-active{opacity:1;transform:none}
.ss-split[data-active-mode="all"] .ss-item{opacity:1;transform:none}
.ss-split .ss-num{grid-row:1;flex:none;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;color:#b3b3b3;background:#ececec;border:0;transition:background .55s var(--enter),color .55s var(--enter),transform .55s var(--enter)}
.ss-split .ss-item.is-active .ss-num,.ss-split[data-active-mode="all"] .ss-num{background:var(--ss-accent,var(--ink));color:#fff;transform:scale(1.05)}
/* 번호 배경 off - 원형 없이 숫자만 */
.ss-split.ss-nobg .ss-num{width:auto;height:auto;border:0;background:transparent!important;font-size:30px;color:#cfcfcf;transform:none}
.ss-split.ss-nobg .ss-item.is-active .ss-num{color:var(--ss-accent,var(--ink));transform:none}
/* 번호 표시 off - 숫자 칸 제거, 제목/설명 풀폭 */
.ss-split.ss-nonum .ss-num{display:none}
.ss-split.ss-nonum .ss-item{grid-template-columns:1fr}
.ss-split.ss-nonum .ss-titwrap,.ss-split.ss-nonum .ss-desc{grid-column:1}
/* 제목(한글) + 영문 — 중첩 금지(별도 요소). 영문 괄호는 CSS 로만(저장값/누적 차단) */
.ss-split .ss-titwrap{grid-row:1;grid-column:2;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
/* 굵기 기본(400) · 크기는 CSS 변수로 조정(기본 제목20 / 영문14 / 설명16) */
.ss-split .ss-title{margin:0;font-weight:400;color:var(--ss-title-c,var(--ink));line-height:1.3;font-size:var(--ss-title-fs,20px)}
.ss-split .ss-title-en{font-weight:400;color:var(--ss-en-c,var(--ss-accent,var(--leaf)));font-size:var(--ss-en-fs,14px)}
.ss-split .ss-title-en:not(:empty)::before{content:"("}
.ss-split .ss-title-en:not(:empty)::after{content:")"}
body.sp-edit .ss-split .ss-title-en:empty{display:inline-block;min-width:64px;opacity:.55}
.ss-split .ss-desc{grid-column:2;color:var(--ss-desc-c,var(--ink-mute));max-width:46ch;line-height:1.65;margin-top:12px;font-size:var(--ss-desc-fs,16px)}
.ss-split .ss-item .sx-item-del{position:absolute;top:-6px;right:0}

/* ============================================================
   BG - 풀블리드 배경 + 좌측 타이틀(고정) + 우측 글래스 카드
============================================================ */
.step-sticky.ss-bg{position:relative;padding:0;color:#fff;background:var(--ss-bg-color,radial-gradient(120% 120% at 30% 30%,#3b416f 0%,#2a2f50 60%,#202442 100%));overflow:clip}
.ss-bg .ss-bg-media{position:absolute;inset:0;z-index:0}
.ss-bg .ss-bg-media img{width:100%;height:100%;object-fit:cover;display:block}
.ss-bg .ss-bg-overlay{position:absolute;inset:0;z-index:1;background:#10142e}
.ss-bg .hive_b{position:relative;z-index:2}
.ss-bg .ss-bg-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:stretch;min-height:100vh;padding:90px 0}
.ss-bg .ss-bg-head{margin:0;position:sticky;top:18vh;align-self:start}
.ss-bg .ss-bg-head .sec-eyebrow{color:rgba(255,255,255,.78)}
.ss-bg .ss-bg-head h2,.ss-bg .ss-bg-head h2 > .pret{color:#fff}
.ss-bg .ss-bg-head .lead{color:rgba(255,255,255,.82);margin-left:0;max-width:34ch}
.ss-bg.ss-noen .ss-bg-head h2 > .pret{font-size:clamp(30px,4vw,52px)!important;font-weight:600;margin-top:0}
.ss-bg .ss-cards{display:flex;flex-direction:column;gap:26px;padding:26vh 0}
.ss-bg .ss-card{position:relative;border-radius:22px;padding:34px 38px;background:var(--ss-card-color,rgba(255,255,255,.10));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:rgba(255,255,255,.6);transition:background .55s var(--enter),color .55s var(--enter),border-color .55s var(--enter),transform .55s var(--enter),box-shadow .55s var(--enter)}
.ss-bg .ss-card.is-active{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 30px 70px rgba(0,0,0,.28);transform:scale(1.015)}
.ss-bg[data-active-mode="all"] .ss-card{background:#fff;color:var(--ink);border-color:#fff}
.ss-bg .ss-card-num{display:inline-flex;align-items:center;justify-content:center;padding:7px 16px;border-radius:30px;font-size:13px;letter-spacing:.08em;border:1px solid rgba(255,255,255,.4);color:#fff;background:transparent;transition:.55s var(--enter)}
.ss-bg .ss-card.is-active .ss-card-num{background:var(--ss-accent,var(--ink));border-color:var(--ss-accent,var(--ink));color:#fff}
.ss-bg .ss-card-icon{position:absolute;top:34px;right:38px;width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ss-bg .ss-card.is-active .ss-card-icon{background:#eef1ff}
.ss-bg .ss-card-icon .ss-ic-img{width:24px;height:24px;object-fit:contain}
.ss-bg .ss-card-title{color:inherit;font-weight:600;margin:24px 0 10px}
.ss-bg .ss-card-desc{color:inherit;opacity:.92;line-height:1.7}
.ss-bg .ss-card .sx-item-del{position:absolute;top:10px;right:10px;color:#fff}

/* ============================================================
   EDITORIAL - 다크 3단 (영문 네비 + 블롭 이미지 + 콘텐츠)
============================================================ */
.step-sticky.ss-editorial{background:var(--ss-bg-color,#0c0c0d);color:#e8e2d6;padding:90px 0}
.ss-editorial .ss-ed-head{margin-bottom:0}
.ss-editorial .ss-ed-head .sec-eyebrow{color:#9c937f}
.ss-editorial .ss-ed-head h2{color:#fff}
.ss-editorial .ss-ed-head h2 > .pret{color:#bdb3a0}
.ss-editorial .ss-ed-grid{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) 1px minmax(0,1fr);gap:0 clamp(24px,4vw,70px)}
.ss-editorial.ss-no-img .ss-ed-grid{grid-template-columns:minmax(150px,240px) minmax(0,1fr)}
.ss-editorial .ss-nav{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:16px}
.ss-editorial .ss-nav-item{display:flex;gap:14px;align-items:baseline;font-size:clamp(22px,2.3vw,34px);color:rgba(232,226,214,.26);transition:color .5s var(--enter),transform .5s var(--enter)}
.ss-editorial .ss-nav-no{font-size:13px;opacity:0;transition:opacity .5s var(--enter)}
.ss-editorial .ss-nav-item.is-active{color:#fff;transform:translateX(4px)}
.ss-editorial .ss-nav-item.is-active .ss-nav-no{opacity:.8}
.ss-editorial .ss-ed-media{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.ss-editorial .ss-ed-shotbox{position:relative;width:100%;max-width:440px;aspect-ratio:3/4;border-radius:62% 38% 58% 42% / 50% 46% 54% 50%;overflow:hidden;background:#1a1a1c}
.ss-editorial .ss-ed-divider{position:sticky;top:0;height:100vh;width:1px;background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.22) 30%,rgba(255,255,255,.22) 70%,rgba(255,255,255,0))}
.ss-editorial .ss-ed-content{display:flex;flex-direction:column}
.ss-editorial .ss-ed-block{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .5s var(--enter)}
.ss-editorial .ss-ed-block.is-active{opacity:1}
.ss-editorial[data-active-mode="all"] .ss-ed-block{opacity:1}
.ss-editorial .ss-ed-icon{width:46px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(212,196,160,.5);border-radius:50%;color:#d4c4a0;margin-bottom:22px;overflow:hidden}
.ss-editorial .ss-ed-icon .ss-ic-img{width:22px;height:22px;object-fit:contain}
.ss-editorial .ss-ed-title{color:#fff;font-weight:600;margin-bottom:12px}
.ss-editorial .ss-ed-desc{color:rgba(232,226,214,.72);line-height:1.75;max-width:42ch}
.ss-editorial .ss-ed-block .sx-item-del{position:absolute;top:10px;right:0;color:#fff}

/* ============================================================
   편집 모드 (슈퍼관리자) - 활성 디밍/스티키 해제, 이미지 펼쳐 개별 편집
============================================================ */
body.sp-edit .step-sticky .ss-item,
body.sp-edit .step-sticky .ss-card,
body.sp-edit .step-sticky .ss-ed-block,
body.sp-edit .step-sticky .ss-nav-item{opacity:1}
body.sp-edit .step-sticky .ss-media-inner,
body.sp-edit .step-sticky .ss-nav,
body.sp-edit .step-sticky .ss-ed-media,
body.sp-edit .step-sticky .ss-ed-divider,
body.sp-edit .step-sticky .ss-bg-head{position:static;height:auto}
body.sp-edit .step-sticky .ss-media-box,
body.sp-edit .step-sticky .ss-ed-shotbox{aspect-ratio:auto;border-radius:16px}
body.sp-edit .step-sticky .ss-shot{position:static;opacity:1;transform:none;margin-bottom:10px;aspect-ratio:var(--ss-img-ratio,4/3.3);border-radius:14px;overflow:hidden}
body.sp-edit .step-sticky .ss-cards,
body.sp-edit .step-sticky .ss-ed-content{padding:0}
/* 편집 모드 아이콘 클릭 affordance (sp-ext-img 만 붙어 cursor 가 없으므로 보강) */
body.sp-edit .step-sticky .ss-card-icon,
body.sp-edit .step-sticky .ss-ed-icon{cursor:pointer}
body.sp-edit .step-sticky .ss-card-icon:hover,
body.sp-edit .step-sticky .ss-ed-icon:hover{outline:2px dashed rgba(255,255,255,.6);outline-offset:2px}
/* 편집 모드 단계번호 라벨 (이미지↔단계 매칭용. 화면엔 안 보임) */
.ss-shot-no{display:none}
body.sp-edit .step-sticky .ss-shot{position:relative}
body.sp-edit .step-sticky .ss-shot-no{display:inline-block;position:absolute;top:8px;left:8px;z-index:3;background:rgba(0,0,0,.62);color:#fff;padding:3px 10px;border-radius:20px;font-size:12px;letter-spacing:.04em}

/* ============================================================
   관리자 설정 패널 (.ss-cfg = .sp-ext-cfg 재사용 + 디자인/옵션 컨트롤)
   배경 디자인 위에서도 보이도록 z-index 보강
============================================================ */
.step-sticky .ss-cfg{position:relative;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:#fff;border:1px solid #ddd;box-shadow:0 6px 24px rgba(0,0,0,.15)}
.step-sticky .ss-cfg-row{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#444}
.step-sticky .ss-cfg-design select{font-weight:700}
.step-sticky .ss-cfg-color{width:34px;height:24px;padding:0;border:1px solid #ccc;border-radius:5px;cursor:pointer;background:none}
.step-sticky .ss-cfg-thumb{width:44px;height:34px;border-radius:6px;object-fit:cover;border:1px solid #ccc;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:#f1f1f1;color:#999;font-size:18px;overflow:hidden}
.step-sticky .ss-cfg-thumb img{width:100%;height:100%;object-fit:cover}
.step-sticky .ss-cfg-note{flex:1 1 100%;font-size:11.5px;color:#888;line-height:1.5}
.step-sticky .ss-cfg-hint{flex:1 1 100%;font-size:11px;color:#c0392b}

/* 단계 인라인 이미지(모바일 세로/슬라이드용) — 데스크톱 숨김 */
.step-sticky .ss-mo-img{display:none}

/* ============================================================
   모바일 - 세로 나열(stack 기본) / 가로 슬라이드(slide), sticky 해제
============================================================ */
@media(max-width:768px){
  /* ── 공통 1단 스택 ── */
  .ss-split .ss-grid{grid-template-columns:1fr!important;gap:30px}
  .ss-split.ss-img-right .ss-media{order:0}
  .ss-split .ss-media-inner{position:relative!important;top:0}
  .ss-split .ss-list{gap:34px}
  .ss-split .ss-item{opacity:1;transform:none}
  .ss-bg .ss-bg-wrap{grid-template-columns:1fr;min-height:auto;padding:60px 0;gap:26px}
  .ss-bg .ss-bg-head{position:relative!important;top:0}
  .ss-bg .ss-cards{padding:0}
  .ss-bg .ss-card{opacity:1}
  .ss-editorial .ss-ed-grid{grid-template-columns:1fr}
  .ss-editorial .ss-nav,.ss-editorial .ss-ed-divider{display:none}
  .ss-editorial .ss-ed-media{position:relative;height:auto;margin-bottom:24px}
  .ss-editorial .ss-ed-block{min-height:auto;opacity:1;margin-bottom:46px}

  /* ── per_step: 단계별 인라인 이미지 노출 + 원본 미디어 컬럼 숨김(방문자만) ── */
  body:not(.sp-edit) .step-sticky[data-img-mode="per_step"] .ss-media,
  body:not(.sp-edit) .step-sticky[data-img-mode="per_step"] .ss-ed-media{display:none}
  body:not(.sp-edit) .step-sticky .ss-mo-img{display:block;width:100%;aspect-ratio:var(--ss-img-ratio,4/3.3);border-radius:12px;overflow:hidden;margin:0 0 16px;background:rgba(0,0,0,.06)}
  .step-sticky .ss-mo-img img{width:100%;height:100%;object-fit:cover;display:block}
  /* split 아이템은 데스크톱이 2열 그리드(번호|텍스트)라 인라인 이미지가 셀에 끼어 깨짐 →
     per_step 모바일(방문자)에선 세로 플로우로 리셋: 이미지 → 번호 → 제목 → 설명 */
  body:not(.sp-edit) .ss-split[data-img-mode="per_step"] .ss-item{display:flex;flex-direction:column;gap:10px;align-items:flex-start}

  /* ── 가로 슬라이드: 단계 리스트를 scroll-snap 슬라이더로(순수 CSS) ── */
  .step-sticky[data-mobile-mode="slide"] .ss-list,
  .step-sticky[data-mobile-mode="slide"] .ss-ed-content,
  .step-sticky[data-mobile-mode="slide"] .ss-cards{display:flex!important;flex-direction:row!important;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:14px;padding-bottom:8px;scrollbar-width:none}
  .step-sticky[data-mobile-mode="slide"] .ss-list::-webkit-scrollbar,
  .step-sticky[data-mobile-mode="slide"] .ss-ed-content::-webkit-scrollbar,
  .step-sticky[data-mobile-mode="slide"] .ss-cards::-webkit-scrollbar{display:none}
  .step-sticky[data-mobile-mode="slide"] .ss-item,
  .step-sticky[data-mobile-mode="slide"] .ss-ed-block,
  .step-sticky[data-mobile-mode="slide"] .ss-card{flex:0 0 86%;scroll-snap-align:start;min-width:0;margin-bottom:0}
}

/* 슬라이드 하단 도트 (sub_tpl 카드형과 동일 양식: 점이 늘어나는 pill) — JS 가 생성 */
.step-sticky .ss-mo-dots{display:none;justify-content:center;align-items:center;gap:2px;margin-top:22px}
.step-sticky .ss-mo-dot{width:24px;height:24px;padding:0;border:none;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;-webkit-appearance:none;appearance:none}
.step-sticky .ss-mo-dot::before{content:"";display:block;width:8px;height:8px;border-radius:100px;background:var(--ink-mute,rgba(0,0,0,.4));transition:width .25s,background .25s}
.step-sticky .ss-mo-dot.is-active::before{width:22px;background:var(--ss-accent,var(--sp-gold,var(--leaf,#1f7a5a)))}
/* 다크 레이아웃(bg/editorial)은 밝은 도트 */
.ss-bg .ss-mo-dot::before,.ss-editorial .ss-mo-dot::before{background:rgba(255,255,255,.45)}
.ss-bg .ss-mo-dot.is-active::before,.ss-editorial .ss-mo-dot.is-active::before{background:var(--ss-accent,#fff)}
@media(max-width:768px){.step-sticky[data-mobile-mode="slide"] .ss-mo-dots{display:flex}}

/* prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  .step-sticky .ss-shot,.step-sticky .ss-item,.step-sticky .ss-card,
  .step-sticky .ss-ed-block,.step-sticky .ss-nav-item,.step-sticky .ss-num{transition:none!important;transform:none!important}
}
/* FAQ·주의사항 개별 페이지 연결 */
.sx-page-link{padding:clamp(44px,6vw,76px) 0;background:var(--bg-soft,#f7f5f2)}
.sx-page-link a,.sx-page-more a{display:inline-flex;align-items:center;gap:.55em;color:inherit;text-decoration:underline;text-underline-offset:.35em;font-weight:600}
.sx-page-more{margin:0 0 24px;text-align:right}
.sx-page-link a:focus-visible,.sx-page-more a:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:2px}