@charset "utf-8";

/* ==========================================================================
   메인 리뉴얼 (2026-08, Figma 「연세힐치과의원 메인시안 D」 1185-3388 기준)
   - 치수: Figma px ÷ 10 = rem (시안 캔버스 2560px, 1rem = 10px)
   - 토큰: common.css :root (--point01 #FF5E10 / --black #1F2933 / --en Marcellus)
   - 이 파일은 메인($pl==1)에서만 로드된다 — 서브 공용 규칙 금지
   ========================================================================== */
:root{
    --mainTit: 10rem;
    --contMt4: 5rem
}

/* ---------- 공통 ---------- */
body.main { letter-spacing: -0.02em; background-color: #fff; }
.rv { opacity: 0; transform: translateY(4rem); transition: opacity 0.8s ease, transform 0.8s ease; }
.rv.rv_on { opacity: 1; transform: none; }


.main section { position: relative; }
.main img { display: block; }

.sect_head { display: flex; align-items: flex-end; justify-content: space-between; } 
.sect_tit_box .sect_desc { font-size: var(--p2); font-weight: 600; color: var(--point01); margin-bottom: 1.2rem; letter-spacing: normal; }
.sect_tit_box .sect_tit { font-size: var(--mainTit); font-family: var(--en); font-weight: 400; line-height: 1.3 ; }
/*.sect_tit_box .sect_txt { margin-top: 2.4rem; font-size: var(--p1); color: var(--gray50); } */
.sect_tit_box.center { text-align: center; }
.sect_tit_box.wh{color: #fff;}

.more_btn { display: inline-flex; align-items: center; font-size: var(--p4); font-weight: 600; gap: 1em; padding: 1em 1.56em; line-height: 1; border: 1px solid var(--gray90); border-radius: 10rem; background-color: transparent; transition: border-color 0.3s, background-color 0.3s; }
.more_btn svg { width: 0.9em; height: 0.9em; }
@media screen and (min-width: 1241px) { .more_btn:hover { border-color: var(--black); background-color: var(--black); color: #fff; } }

/* 슬라이더 숫자 페이징 (1/3) */
.frac_num { display: flex; align-items: flex-end; font-family: var(--en); line-height: 1; height: 8rem; }
.frac_num .cur { font-size: var(--h3); margin-bottom: 3.6rem; width: 0.5em; }
.frac_num .bar { margin: 0 0.4rem 0 0; width: 3.1rem; height: 4.7rem; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="33" height="49" viewBox="0 0 33 49" fill="none"><path d="M31.918 0.276367L0.417969 47.7764" stroke="%23E4E7EB"/></svg>') no-repeat center / contain;}
.frac_num .total { font-size: var(--h6) ; color: var(--gray30); }

.frac_num.wh{color:#fff;}
.frac_num.wh .bar { background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="33" height="49" viewBox="0 0 33 49" fill="none"><path opacity="0.7" d="M31.918 0.276367L0.417969 47.7764" stroke="white"/></svg>') no-repeat center / contain;}
.frac_num.wh .total { color: #fff; opacity: 0.7; }

/* 슬라이더 버튼 */
.paging .btns { display: flex; gap: 1rem; }
.paging .btns .circle_btn { display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border: 1px solid var(--gray20); border-radius: 50%; background-color: rgba(255,255,255,0.8); color: var(--gray30); transition: all 0.3s; }
.paging .btns .circle_btn svg { width: 40%; height:  40%; }
@media screen and (min-width: 1241px) { .paging .btns .circle_btn:hover { border-color: var(--black); background-color: var(--black); color: #fff; } }




/* ---------- 01 KV ---------- */
.kv_sect { padding: var(--hdH) var(--hdIn) 0; }

.kv_visual { position: relative; height: calc(100vh - var(--hdH)); border-radius: 3rem 3rem 0 0; overflow: hidden; }
.kv_visual .kvSwiper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.kv_visual .kvSwiper .swiper-slide .bg { width: 100%; height: 100%; overflow: hidden; }
.kv_visual .kvSwiper .swiper-slide .bg.bg_filter:before{content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,0.25); z-index: 2;}
.kv_visual .kvSwiper .swiper-slide .bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.1); transition: transform 1.5s ease-in-out; }
.kv_visual .kvSwiper .swiper-slide.swiper-slide-active .bg img,
.kv_visual .kvSwiper .swiper-slide.swiper-slide-duplicate-active .bg img { transform: scale(1);}
/* KV 배너 DB 연동 — 영상/유튜브 배경, 관리자 배경필터(Y) */
.kv_visual .kvSwiper .swiper-slide .bg video { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.kv_visual .kvSwiper .swiper-slide .bg iframe.kv_yt { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100%; min-width: 177.78vh; transform: translate(-50%, -50%); pointer-events: none; border: 0;
    opacity: 0; } /* 유튜브 UI(재생버튼 등) 가림 — 재생 확인 후 .yt_on 페이드인. 숨길 때는 즉시(트랜지션은 .yt_on 쪽에만) */
.kv_visual .kvSwiper .swiper-slide .bg iframe.kv_yt.yt_on { opacity: 1; transition: opacity 0.8s ease-in-out; }
.kv_visual .kvSwiper .swiper-slide .bg .kv_yt_poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none !important; } /* 유튜브 포스터 — iframe 페이드인 전 노출 (줌 모션 제외) */

.kv_visual .kv_gra { position: absolute; left: 0; bottom: 0; width: 100%; z-index: 2; pointer-events: none; height: 0; overflow: hidden; transition: 0.8s ease-in-out; background: linear-gradient(180deg, rgba(255,94,16,0) 0%, rgba(255,94,16,0.08) 35%, rgba(255,94,16,0.3) 58%, rgba(255,94,16,0.68) 82%, #FF5E10 100%); }
.kv_visual.active .kv_gra {height: 40%;}

.kv_visual .kvSwiper .kv_txt { position: absolute; inset:0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 3; width: 100%; height: 100%; text-align: center; color: #fff; }
.kv_visual .kvSwiper .kv_txt > *{opacity: 0; transform: translateY(5rem); transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;}
.kv_visual .kvSwiper .swiper-slide-active .kv_txt > *{opacity: 1; transform: unset;}
.kv_visual .kvSwiper .swiper-slide-duplicate-active .kv_txt > *{opacity: 1; transform: unset;}

.kv_visual .kvSwiper .kv_txt .kv_label { font-size: var(--h6); font-weight: 700; color: var(--point01); transition-delay: 0s;}
.kv_visual .kvSwiper .kv_txt .kv_tit { font-size: 12rem; margin-top: 1.6rem; font-family: var(--en); font-weight: 400; line-height: 1.25; transition-delay: 0.2s;}
.kv_visual .kvSwiper .kv_txt .kv_tit .anim_scatter_text { --scatterX: 0.25em; --scatterY: 1em; display: inline-flex; white-space: nowrap; }
.kv_visual .kvSwiper .kv_txt .kv_tit .scatter_line { display: inline-flex; }
.kv_visual .kvSwiper .kv_txt .kv_tit .scatter_char { display: inline-block; filter: blur(30px); opacity: 0; margin: -0.25em -0.1em; padding: 0.25em 0.1em; transform: translate3d(var(--scatterX), var(--scatterY), 0) skew(15deg, 30deg) scale(2); transform-origin: 0 100%; transition: opacity 1.5s cubic-bezier(0.3, 0.19, 0.3, 1), filter 1.5s cubic-bezier(0.3, 0.19, 0.3, 1), transform 1.5s cubic-bezier(0.3, 0.19, 0.3, 1); transition-delay: calc(0.2s + (var(--char-random, 0) * 75ms)); will-change: opacity, filter, transform; }
.kv_visual .kvSwiper .swiper-slide-active .kv_tit .scatter_char,
.kv_visual .kvSwiper .swiper-slide-duplicate-active .kv_tit .scatter_char { filter: blur(0); opacity: 1; transform: translate3d(0, 0, 0) skew(0deg, 0deg) scale(1); }
@media (prefers-reduced-motion: reduce) {
    .kv_visual .kvSwiper .kv_txt .kv_tit .scatter_char { filter: none; opacity: 1; transform: none; transition: none; }
}
.kv_visual .kvSwiper .kv_txt .kv_btn { display: inline-flex; align-items: center; font-size: var(--p4); margin-top: var(--contMt2); gap: 1em; padding: 0.8em 2em; border-radius: 10rem; letter-spacing: normal;
    background-color: rgba(255, 255, 255, 0.20); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); color: #fff; font-weight: 700; transition: background-color 0.3s, opacity 0.6s ease-in-out 0.4s, transform 0.6s ease-in-out 0.4s; }
@media screen and (min-width: 1241px) { .kv_visual .kvSwiper .kv_txt .kv_btn:hover { background-color: rgba(255,255,255,1); color: var(--black); } }
.kv_visual .kvSwiper .kv_txt .kv_btn svg { width: 0.9em; height: 0.9em; }
/* 링크 버튼 타입 dark — 진한 검정(반투명) + 흰색 글씨 (관리자 p=35 linkBtnType='dark') */
.kv_visual .kvSwiper .kv_txt .kv_btn.dark { background-color: rgba(0, 0, 0, 0.45); color: #fff; }
@media screen and (min-width: 1241px) { .kv_visual .kvSwiper .kv_txt .kv_btn.dark:hover { background-color: rgba(0, 0, 0, 0.85); color: #fff; } }

.kv_visual .kv_paging { position: absolute; left: var(--hdIn); bottom: 5rem; z-index: 4; display: flex; align-items: center; gap: 3rem; }
.kv_visual .kv_paging .circle_btn { background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(5px); color: #fff; border:none; }
@media screen and (min-width: 1241px) { .kv_visual .kv_paging .circle_btn:hover { background-color: rgba(255,255,255,1); color: var(--black); } }


.kv_intro {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--pd3) 0 36rem 0; background-color: var(--point01); 
    border-radius:0 0 3rem 3rem; color: #fff; transition: border-radius 0.9s ease-in-out; } /* 2026-10-01 템포 단축 1.5s → 0.9s(스마일·선 소멸과 같이) */
.kv_intro.active{ border-end-start-radius: 80rem;} /* 논리 속성 — RTL 에서 우하단 */

.kv_intro .kv_smile { position: absolute; left: 50%; top: 24.6rem; z-index: 2; transform: translateX(-50%);  pointer-events: none; z-index: 1; }
.kv_intro .kv_smile svg { width: auto; height: 23.3rem; }
.kv_intro .kv_smile { clip-path: inset(-50rem 100% -50rem 0); transition: clip-path 0.9s ease-in-out; } /* 위아래 -50rem: ≤600 은 상자 높이가 0 이고 svg 가 넘쳐 그려지므로 세로로는 자르지 않는다 */ /* 그리기 와이프(clip-path)는 svg 가 아니라 감싸는 div 에 — 사파리가 svg 루트의 clip-path 트랜지션에서 사각형 잔상을 남김(2026-10-01) */
.kv_intro.active .kv_smile { clip-path: inset(-50rem 0 -50rem 0); } 

.kv_intro .line{position: relative; margin: 0 auto; height: 42.5rem; aspect-ratio: 6 / 425; z-index: 2; } /* 폭을 svg 비율로 확정 — 폭 미지정 부모에서 svg width:100% 를 iOS Safari 가 0 으로 계산해 선이 안 보였음 */
.kv_intro .line svg{display: block; width: 100%; height :100%; overflow: visible; opacity: 0; transform: scaleY(0); transform-origin: top center; will-change: transform, opacity; }
.kv_intro p { font-size: var(--h2);  font-family: var(--en);line-height: 1.5; margin-top: 5rem; padding: 0 var(--inPd);}
.kv_intro p > span{ display: block; }
.kv_intro .kv_intro_line { overflow: hidden; }
.kv_intro .kv_intro_word { display: inline-block; opacity: 0; transform: translateY(115%) rotate(5deg); filter: blur(0.35rem); transition: opacity 0.4s ease, transform 0.6s cubic-bezier(.16, 1, .3, 1), filter 0.4s ease; transition-delay: var(--word-delay, 0s); will-change: transform, opacity; }
.kv_intro.kv_intro_text_active .kv_intro_line + .kv_intro_line .kv_intro_word { transition-delay: calc(var(--word-delay, 0s) + 0.25s); } /* 둘째 줄 시작 지연 0.48s → 0.25s */
.kv_intro.kv_intro_text_active .kv_intro_word { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }




/* ---------- 02 비용 비교 ---------- */
.cost_sect { padding-top: var(--pd2); overflow: hidden;}
.cost_sect .graph { position: relative; margin-top: -30rem; pointer-events: none;}
.cost_sect .cost_graph { aspect-ratio: 2560 / 1708; }
/* 데스크톱은 클립패스 와이프 대신 인라인 SVG 요소별 순차 연출 (곡선 드로잉 → 꼭지점 → 세로선) */
.cost_sect .cost_graph_visual { position: absolute; inset: 0; overflow: hidden; }
.cost_sect .cost_graph_full { display: block; width: 100%; height: 100%; overflow: hidden; }   /* 2026-09-16: 곡선 스트로크가 viewBox 밖으로 7px 삐져나와 375(ru) 에서 가로 스크롤을 만들던 것 클립 */
.cost_sect .cost_graph_card,
.cost_sect .cost_graph_save { position: absolute; z-index: 2; }
.cost_sect .cost_graph_card { opacity: 0; visibility: hidden; transform: translateY(4rem); transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s ease; }

.cost_sect .cost_graph_box { min-width: 37rem; padding: 4rem; border-radius: 3rem; background-color: #fff; box-shadow: 0 0.5rem 2.5rem rgba(0,0,0,0.05); } /*.cost_sect .cost_graph_box*/

/*
 * 카드의 좌우 기준점을 SVG 꼭지점에 맞춘다.
 * 2560px 초과에서는 카드가 rem 기준의 고정 크기이므로, 카드의 left를
 * 그대로 %로 두면 화면이 넓어질수록 꼭지점과 카드 중심이 벌어진다.
 */
.cost_sect .cost_graph_card.cost_graph_usa { left: 18.75%; top: 55.62%; transform: translate(-50%, 4rem); }
.cost_sect .cost_graph_card.cost_graph_canada { left: 31.48%; top: 72.83%; transform: translate(-50%, 4rem); }
.cost_sect .cost_graph_card.cost_graph_heal { left: 81.21%; top: 74.36%; transform: translate(-50%, 4rem); }

.cost_sect .cost_graph_card .cost_graph_box .cost_graph_country { display: flex; align-items: baseline; gap: 1rem; font-size: var(--h8); font-weight: 600; line-height: 1.4; color: #292929; }
.cost_sect .cost_graph_card .cost_graph_box .cost_graph_country span { font-size: var(--p4); font-weight: 500; color: #B0B0B0; }
.cost_sect .cost_graph_card .cost_graph_box .cost_graph_country.accent { color: var(--point01); }

.cost_sect .cost_graph_card .cost_graph_box dl { display: flex; flex-direction: column; align-items: flex-end; margin-top: 2rem;  line-height: 1; color: #292929;}
.cost_sect .cost_graph_card .cost_graph_box dl > div { display: flex; align-items: center; justify-content: flex-end; gap: 2.5rem; }
.cost_sect .cost_graph_card .cost_graph_box dl > div + div { margin-top: 2rem; }
.cost_sect .cost_graph_card .cost_graph_box dt { font-size: var(--p6); font-weight: 500; text-align: end; word-break: keep-all; }
.cost_sect .cost_graph_card .cost_graph_box dd { font-size: var(--h5); font-weight: 700; width: 18rem; white-space: nowrap; }

/* Last */
/* 76% 영역은 카드가 아닌 그래프 비율을 기준으로 세로 간격을 유지한다. */
/* +3rem(2026-10-14): 힐 꼭지점 위 한국 국기(.cg_flag_heal) 자리 — 2560 에서 Save Up 문구와 겹치던 것 */
.cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save { position: absolute; z-index: 2; bottom: calc(100% + clamp(16rem, 8.6vw, 33rem) + 3rem); left: 50%; opacity: 0; visibility: hidden; transform: translate(-50%, 4rem); text-align: center; color: var(--point01); transition: opacity 0.8s ease, transform 0.8s ease, visibility 0.8s ease; }
.cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save .cost_graph_percent { font-family: var(--en); font-size: 22rem; font-weight: 400; line-height: 1; }
.cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save .cost_graph_percent span { font-size: 5rem; }
.cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save .cost_graph_sub { margin-top: 1rem; font-size: var(--p3); font-weight: 600; line-height: 1; white-space: nowrap;}
.cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save .arr svg{display: block; margin: 0 auto; width: auto; height: 13rem; margin-bottom: 2rem;}

.cost_sect .cost_graph_card.cost_graph_heal .cost_graph_box { min-width: 49rem; padding: 4rem 5rem; }
.cost_sect .cost_graph_card.cost_graph_heal .cost_graph_box dl { color: var(--point01); margin-top: 5rem; }
.cost_sect .cost_graph_card.cost_graph_heal .cost_graph_box dl > div { gap: 1.5rem; }

.cost_sect.active .cost_graph_visual { clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); opacity: 1; } /* 모바일 와이프 해제용 — 데스크톱은 무의미 */
.cost_sect.active .cost_graph_card,
.cost_sect.active .cost_graph_save { opacity: 1; visibility: visible; transform: none; }
.cost_sect.active .cost_graph_card { transform: translate(-50%, 0); }
.cost_sect.active .cost_graph_usa { transition-delay: 0.85s; }
.cost_sect.active .cost_graph_canada { transition-delay: 1.15s; }
.cost_sect.active .cost_graph_save { transition-delay: 1.95s; }
.cost_sect.active .cost_graph_heal { transition-delay: 2.2s; }
.cost_sect.active .cost_graph_card.cost_graph_heal .cost_graph_save { opacity: 1; visibility: visible; transform: translate(-50%, 0); }

/* ── 그래프 순차 드로잉 — 왼쪽 위에서 곡선이 그려지며 꼭지점을 지날 때마다
   점 팝 → 세로선 드롭 → 금액 박스 순으로 연쇄 (곡선 2.2s linear 진행 기준:
   USA 지점 ≈0.5s / Canada ≈0.8s / HEAL ≈1.8s) ── */
.cost_graph_visual .cg_curve { stroke-dasharray: var(--curve-length, 1px); stroke-dashoffset: var(--curve-length, 1px); } /* 양수 offset L→0 — 음수 offset 은 Safari 정규화 버그 */
.cost_graph_visual .cg_fill { opacity: 0; }
.cost_graph_visual .cg_dot { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0); }
.cost_graph_visual .cg_flag { opacity: 0; transform-box: fill-box; transform-origin: center bottom; transform: translateY(0.6rem); }
.cost_graph_visual .cg_stem { transform-box: fill-box; transform-origin: center top; transform: scaleY(0); }
.cost_sect.active .cg_curve { animation: cgCurveDraw 2.2s linear forwards; }
.cost_sect.active .cg_fill { animation: cgFadeIn 1.2s ease 0.5s forwards; }
.cost_sect.active .cg_dot_usa { animation: cgDotPop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0.5s forwards; }
.cost_sect.active .cg_flag_usa { animation: cgFlagIn 0.4s ease-out 0.64s forwards; }
.cost_sect.active .cg_stem_usa { animation: cgStemDrop 0.45s cubic-bezier(0.3, 0, 0.2, 1) 0.62s forwards; }
.cost_sect.active .cg_dot_canada { animation: cgDotPop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0.82s forwards; }
.cost_sect.active .cg_flag_canada { animation: cgFlagIn 0.4s ease-out 0.96s forwards; }
.cost_sect.active .cg_stem_canada { animation: cgStemDrop 0.45s cubic-bezier(0.3, 0, 0.2, 1) 0.94s forwards; }
.cost_sect.active .cg_dot_heal { animation: cgDotPop 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 1.8s forwards; }
.cost_sect.active .cg_flag_heal { animation: cgFlagIn 0.4s ease-out 1.94s forwards; }   /* 한국 국기(2026-10-14) — 다른 깃발과 같은 간격(점 팝 +0.14s) */
.cost_sect.active .cg_stem_heal { animation: cgStemDrop 0.4s cubic-bezier(0.3, 0, 0.2, 1) 1.9s forwards; }
@keyframes cgCurveDraw { to { stroke-dashoffset: 0; } }
@keyframes cgFadeIn { to { opacity: 1; } }
@keyframes cgDotPop {
    0% { opacity: 0; transform: scale(0); }
    60% { opacity: 1; transform: scale(1.35); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes cgFlagIn { to { opacity: 1; transform: translateY(0); } }
@keyframes cgStemDrop { to { transform: scaleY(1); } }

/* ── 76% 강조 모션 — "한국이 확실히 저렴" 대비 연출 ──
   시퀀스: 곡선 드로잉(꼭지점 연쇄) → 76% 팝(카운트업 JS 동기) + 화살표 드롭 →
   힐 카드 → (3.3s~) 해외 카드 디밍/축소 + 힐 카드 확대·오렌지 글로우 + 화살표 하강 반복 */
.cost_sect.active .cost_graph_save .cost_graph_percent { animation: costPercentPop 0.7s cubic-bezier(0.2, 1.4, 0.4, 1) 2s both; }
.cost_sect.active .cost_graph_save .arr svg { animation: costArrowDrop 0.6s cubic-bezier(0.2, 1.2, 0.4, 1) 1.95s both, costArrowBob 1.8s ease-in-out 3.4s infinite; }
.cost_sect.active .cost_graph_heal .cost_graph_box { animation: costHealPop 0.8s cubic-bezier(0.2, 1.2, 0.4, 1) 3.3s forwards; }
@keyframes costPercentPop {
    from { opacity: 0; transform: scale(0.5); }
    60% { transform: scale(1.08); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes costArrowDrop {
    from { opacity: 0; transform: translateY(-6rem); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes costArrowBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(1.6rem); }
}
@keyframes costHealPop {
    50% { transform: scale(1.07); }
    to { transform: scale(1.05); } /*box-shadow: 0 1.5rem 6rem rgba(255, 94, 16, 0.3), 0 0 0 0.3rem rgba(255, 94, 16, 0.35); */
}
@media (prefers-reduced-motion: reduce) {
    .cost_sect.active .cost_graph_save .arr svg { animation: costArrowDrop 0.6s ease 1s both; }
    .cost_sect.active .cost_graph_save .cost_graph_percent { animation: none; }
    .cost_sect.active .cg_curve { animation: none; stroke-dashoffset: 0; }
    .cost_sect.active .cg_fill,
    .cost_sect.active .cg_dot,
    .cost_sect.active .cg_flag { animation: none; opacity: 1; transform: none; }
    .cost_sect.active .cg_stem { animation: none; transform: scaleY(1); }
}






/* ---------- 03 가격 ---------- */
.price_sect { }
.price_sect .sect_tit_box .sect_tit { font-size: 5rem; font-weight: 400; }

.price_sect .price_list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: var(--contMt1); }
.price_sect .price_list > li { --price-delay: 0s; position: relative; overflow: hidden; flex: 1; top: 0; display: flex; flex-direction: column; padding:5rem 3rem; border-radius: 3rem; background-color: var(--grayBg1); opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out var(--price-delay), transform 0.6s ease-in-out var(--price-delay), background-color 0.6s ease 0s, box-shadow 0.8s ease 0s, top 0.8s cubic-bezier(.34, 1.56, .64, 1) 0s; /* top: 강조 카드 픽 — 살짝 넘쳤다 자리 잡는 곡선 */}
.price_sect.active .price_list > li{opacity: 1; transform: unset;}
.price_sect .price_list > li:nth-child(1){--price-delay: 0.4s;}
.price_sect .price_list > li:nth-child(2){--price-delay: 0.6s;}
.price_sect .price_list > li:nth-child(3){--price-delay: 0.8s;}
.price_sect .price_list > li:nth-child(4){--price-delay: 1s;} 

.price_sect .price_list > li::before { content: ''; position: absolute; top: -30rem; inset-inline-start: calc(50% - 15.8rem); width: 71.6rem; height: 71.6rem; border-radius: 50%; background: radial-gradient(circle, rgba(255,94,16,0.55) 0%, rgba(255,94,16,0.18) 35%, rgba(255,94,16,0) 62%); opacity: 0; pointer-events: none; transition: opacity 0.8s ease 0s; }
.price_sect .price_list > li > * { position: relative; }
.price_sect .price_list .p_name { font-size: var(--p3); font-weight: 600; transition: color 0.6s ease; }
.price_sect .price_list .p_price { margin-top: 5rem; font-size: var(--h1); font-weight: 600; line-height: 1; transition: color 0.6s ease; }
.price_sect .price_list .p_feat { margin-top: 6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.price_sect .price_list .p_feat li { display: flex; align-items: center; gap: 1rem; font-size: var(--p4); color: #8B9095; font-weight: 500; transition: color 0.6s ease; }
.price_sect .price_list .p_feat li svg { flex: 0 0 auto; width: 1.25em; height: 1.25em; border-radius: 50%; background-color: rgba(204, 202, 201, 0.50); color: #fff; transition: background-color 0.6s ease, color 0.6s ease;}

.price_sect .price_list .p_btn { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 6rem; height: 3.7em; 
    border-radius: 1.2rem; background-color: #FFE2D3; font-size: var(--p3); font-weight: 600; color: var(--point01); transition: background-color 0.3s, color 0.3s; }
.price_sect .price_list .p_btn .ico svg { display: block; width: 0.9em; height: 0.9em; }


/* 강조 카드 — 2026-09-15 시안(1869:22300): 검정 #1C1C1C + 우상단 오렌지 글로우 + 오렌지 버튼. 2026-09-29: 카드 호버 → 기본 강조로 변경
   (1.php $priceCards 의 'active' → li.active, 현재 Full Mouth Implant). 카드 호버 효과는 없고 버튼 호버만(.p_btn:hover). 들어 올림(top)은 4열인 1241 이상만 */
.price_sect .price_list > li.active { background-color: var(--point01); }
.price_sect .price_list > li.active::before {}
.price_sect .price_list > li.active .p_name, .price_sect .price_list > li.active .p_price, .price_sect .price_list > li.active .p_feat li { color: #fff; }
.price_sect .price_list > li.active .p_feat svg { background-color: #fff; color: #1C1C1C; }
.price_sect .price_list > li.active .p_btn { background-color: #fff; }



@media screen and (min-width: 1241px) {
    .price_sect .price_list > li.active { top: -5rem; }
    

    .price_sect .price_list > li.active:hover {background-color: #1C1C1C; box-shadow: 0 2rem 5rem 0 rgba(117, 48, 14, 0.30);}
    .price_sect .price_list > li.active:hover::before {opacity: 1;}
    

    

    .price_sect .price_list .p_btn:hover { background-color: var(--point01) !important; color: #fff; } 
    
}




/* ---------- 04 무료 상담 ---------- */
.consult_sect { padding-top: var(--pd1); opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; }
.consult_sect.active { opacity: 1; transform: unset;  }
.consult_sect .consult_panel { display: flex; justify-content: space-between; gap: 6rem; padding: 8rem 7rem; border-radius: 3rem; background-color: var(--point01); 
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out, border-radius 1.2s ease-in-out 0.4s;}
.consult_sect .consult_panel.active{border-end-start-radius: 32rem;} /* 논리 속성 — RTL 에서 우하단 */

.consult_sect .consult_panel .c_left { display: flex; flex-direction: column; color: #fff;}
.consult_sect .consult_panel .c_left .sect_tit_box {position: relative; z-index: 1;}
.consult_sect .consult_panel .c_left .sect_tit_box .sect_desc{color: #fff;}
.consult_sect .consult_panel .c_left .sect_tit_box .sect_tit{line-height: 1.1;}

.consult_sect .consult_panel .c_smile { position: absolute; bottom: 9rem; inset-inline-start: 17rem; width: 43.6rem; z-index: 0; opacity: 0.3;}
.consult_sect .consult_panel .c_smile svg{ display: block; width: 100%; height: auto; }
.consult_sect .consult_panel .c_smile { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s ease-in-out 0.4s; } /* 그리기 와이프(clip-path)는 svg 가 아니라 감싸는 div 에 — 사파리가 svg 루트의 clip-path 트랜지션에서 사각형 잔상을 남김(2026-10-01) */
.consult_sect .consult_panel.active .c_smile { clip-path: inset(0); }

.consult_sect .consult_panel .c_form { flex: 0 0 auto; width: 60.6rem; padding: 3rem; border-radius: 3rem;  background-color: rgba(255, 255, 255, 0.30); }
/* .c_form 내부 요소 스타일은 공용화되어 common.css 로 이동 (퀵메뉴 상담 모달과 공유) */





/* ---------- 05 환자 스토리 ---------- */
.stories_sect { padding: var(--pd) 0; overflow: hidden; }
.stories_sect .stories_slider { margin-top: var(--contMt2); width: 114%; margin-inline-start: -7%; opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out 0.4s, transform 0.6s ease-in-out 0.4s;}
.stories_sect.active .stories_slider{opacity: 1; transform: unset;} 
/* .stories_sect .stories_slider .swiper-container { overflow: visible; } */
.stories_sect .stories_slider .item { padding-bottom: 10rem; transition: transform 0.8s ease-in-out; }
.stories_sect .stories_slider .item.is-story-offset { transform: translateY(10rem); }
.stories_sect .stories_slider .storySwiper.no_offset_anim .item { transition: none; } /* 루프 순간 이동 직후 높낮이 클래스를 전환 없이 맞출 때(1.php storySwiper.loopFix 래핑) */

.stories_sect .stories_slider .story_card { position: relative; padding-top: 142%; border-radius: 99rem; overflow: hidden; 
    background: var(--point01)}
    
.stories_sect .stories_slider .story_card .img { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; z-index: 2;}
.stories_sect .stories_slider .story_card .img img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.stories_sect .stories_slider .story_card.js_story_modal { cursor: pointer; } /* DB 연동 카드 — 클릭 시 영상 모달 */
.stories_sect .stories_slider .story_card .v_txt { position: absolute; cursor: pointer; inset:0; z-index: 2; width: 100%; height: 100%; padding: 0 5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; background: linear-gradient(0deg, rgba(88, 65, 62, 0.60) 0%, rgba(88, 65, 62, 0.60) 100%); backdrop-filter: blur(17.5px); -webkit-backdrop-filter: blur(17.5px); opacity: 0; transition: opacity 0.3s; }
@media screen and (min-width: 1241px) { .stories_sect .stories_slider .story_card.video:hover .v_txt { opacity: 1; } }

.stories_sect .stories_slider .story_card .v_txt .play { display: block; width: 7.1rem; height: auto; margin-bottom: 3rem; }
.stories_sect .stories_slider .story_card .v_txt .name { font-family: var(--en); font-size: var(--h6); }
.stories_sect .stories_slider .story_card .v_txt .cap { font-size: var(--p3); font-weight: 700; margin-top: 1rem; }





/* ---------- 06 모션 텍스트 ---------- */
/* 2026-10-01 사파리 대응: 주황 번짐을 filter: blur(25rem) 사각형 대신 원형 그라데이션으로 — 사파리는 큰 반경 블러를 일정 범위에서 잘라 그려 번짐이 사각형으로 끊겼다.
   번짐 상자는 섹션 폭에 딱 맞추고(가로는 상자 밖이 안 그려져 가로 스크롤·overflow 처리가 필요 없음) 위아래로 100rem 씩 늘려 앞뒤 섹션까지 은은히 번지게 한다(위끝이 직선으로 잘리지 않게).
   그라데이션 중심·반경은 예전 블롭(크기 S, inset-inline-end -E%, top 40%)과 같은 자리: x = (100% + E%) − S/2, y = 40% + 20rem + S/2(상자를 위아래 100rem 씩 늘림), 반경 = 1.2S(블러처럼 넓고 완만하게). RTL 은 상자를 좌우 반전 */
.motion_sect { position: relative; padding: var(--pd) 0; z-index: 1;}
.motion_sect:before{content: ''; position: absolute; inset-inline: 0; top: -100rem; display: block; height: calc(100% + 200rem); opacity: 0; pointer-events: none; z-index: 2; transition: opacity 1s ease;
    background: radial-gradient(circle 120rem at calc(123% - 50rem) calc(40% + 70rem), rgba(255,94,16,0.95) 0%, rgba(255,94,16,0.6) 30%, rgba(255,94,16,0.25) 60%, rgba(255,94,16,0) 100%);}
.motion_sect.active:before{opacity: 0.5;}

.motion_sect .fill_txt { position: relative; text-align: center; font-size: 12rem; font-family: var(--en); line-height: 1.1; z-index: 3; }
.motion_sect .fill_txt .txt{ display: inline; 
    background: linear-gradient(to right, var(--gray90) 50%, var(--gray10) 50%); 
    background-size: 200% 100%; background-position-x: 100%; color: transparent;background-clip: text; -webkit-background-clip: text;}
/* 스크롤 채움을 못 쓰는 경우(기기 "동작 줄이기" 설정·GSAP 미로드)에 1.php 가 .done 을 붙인다 — 규칙이 없어 모바일에서 글자가 회색으로 남던 문제 */
.motion_sect .fill_txt .txt.done { background-position-x: 0%; }



/* ---------- 07 Before & After ---------- */
.ba_sect { padding-top: var(--pd1); position: relative; z-index: 2; }

.ba_sect .ba_ctrl { display: flex; align-items: flex-end; justify-content: space-between; margin-top: var(--contMt2); opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out 0.6s, transform 0.6s ease-in-out 0.6s;}
.ba_sect.active .ba_ctrl{opacity: 1; transform: unset;}
.ba_sect .ba_ctrl .ba_tabs { display: flex; gap: 1rem; }
.ba_sect .ba_ctrl .ba_tabs button { min-width: 7.2em; padding: 0.5em; border-radius: 10rem; font-size: var(--p1); font-weight: 600; color: var(--gray30); transition: all 0.3s; }
.ba_sect .ba_ctrl .ba_tabs button.active { background-color: var(--black); color: #fff; }
.ba_sect .ba_ctrl .ba_frac { position: relative; }
/* 숫자 페이징 + 이전/다음 버튼(1.php .ba_paging, 버튼 모양은 공용 .paging .btns .circle_btn — 의료진 .d_paging 과 같음) */
.ba_sect .ba_ctrl .ba_paging { display: flex; align-items: center; gap: 3rem; color: var(--black); }

.ba_sect .ba_slider { margin-top: var(--contMt4); overflow: hidden; opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out 0.8s, transform 0.6s ease-in-out 0.8s;}
.ba_sect.active .ba_slider{opacity: 1; transform: unset;}
.ba_sect .ba_slider .swiper-slide { transition: width 0.4s, transform 0.4s; }
.ba_sect .ba_slider .ba_card { width: 100%; transition: width 0.4s; }
.ba_sect .ba_slider .swiper-slide-active { z-index: 2; }
.ba_sect .ba_slider.is-tab-changing .swiper-slide,
.ba_sect .ba_slider.is-tab-changing .ba_card { transition: none !important; }

.ba_sect .ba_slider .ba_card { width: 90%; height: 84rem;}
.ba_sect .ba_slider .swiper-slide-active .ba_card,
.ba_sect .ba_slider .swiper-slide-duplicate-active .ba_card { width: 130%; }
.ba_sect .ba_slider .swiper-slide-active + .swiper-slide,
.ba_sect .ba_slider .swiper-slide-duplicate-active + .swiper-slide { transform: translateX(30%); }
.ba_sect .ba_slider .swiper-slide-active + .swiper-slide + .swiper-slide,
.ba_sect .ba_slider .swiper-slide-duplicate-active + .swiper-slide + .swiper-slide{ transform: translateX(20%); }
.ba_sect .ba_slider .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide { transform: translateX(10%); }
.ba_sect .ba_slider .swiper-slide-duplicate-active + .swiper-slide + .swiper-slide + .swiper-slide { transform: translateX(10%); }

.ba_sect .ba_slider .ba_card .ba_img { position: relative; display: block; border-radius: 3rem; overflow: hidden; aspect-ratio: 48 / 62; }
.ba_sect .ba_slider .ba_card .ba_img.ba_compare { --ba-pos: 67%; direction: ltr; cursor: ew-resize; touch-action: pan-y; } /* 드래그 비교는 물리 좌표계 고정(서브 .sub_ba_compare 와 동일) — RTL 에서 before 사진이 오른쪽 기준으로 붙어 어긋나던 문제 */
.ba_sect .ba_slider .ba_card .ba_img .cimg { position: absolute; inset: 0; background-color: #EEEDED;}
.ba_sect .ba_slider .ba_card .ba_img .cimg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; }
.ba_sect .ba_slider .ba_card .ba_img .bimg_box { right: auto; width: var(--ba-pos); overflow: hidden; z-index: 2; } /* right:auto — inset:0 + width 는 RTL 에서 right 가 이겨 오른쪽에 붙으므로 물리 왼쪽 고정(라인·핸들과 같은 좌표계) */
.ba_sect .ba_slider .ba_card .ba_img .bimg_box img { width: var(--ba-img-width, 100%); max-width: none; }
.ba_sect .ba_slider .ba_card .ba_img .bimg_box:after { content: ''; position: absolute; inset: 0; background-color: rgba(0,0,0,0.3); pointer-events: none; }
.ba_sect .ba_slider .ba_card .ba_img .ba_line { position: absolute; left: var(--ba-pos); top: 0; z-index: 3; width: 2px; height: 100%; background-color: #fff; transform: translateX(-50%); pointer-events: none; }
.ba_sect .ba_slider .ba_card .ba_img.single img { width: 100%; height: 100%; object-fit: cover; }

.ba_sect .ba_slider .ba_card .ba_img .handle { position: absolute; left: var(--ba-pos); top: 50%; z-index: 4; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; padding: 0; border: 0; border-radius: 50%; background-color: #fff; transform: translate(-50%,-50%); color: var(--black); box-shadow: 0 0.4rem 1.2rem rgba(0,0,0,0.2); cursor: ew-resize; }
.ba_sect .ba_slider .ba_card .ba_img .handle svg { width: 100%; height: 100%; }

.ba_sect .ba_slider .ba_card .ba_img .chip { position: absolute; bottom: 1.5rem; z-index: 3; padding: 0.1em 1em; border-radius: 99rem; 
    background-color: rgba(255,255,255,0.3); backdrop-filter: blur(2rem); -webkit-backdrop-filter: blur(2rem); font-size: var(--p6); font-weight: 400; color: #fff; }
.ba_sect .ba_slider .ba_card .ba_img .chip.before { left: 1.5rem; }
.ba_sect .ba_slider .ba_card .ba_img .chip.after { right: 1.5rem; }

.ba_sect .ba_slider .ba_card .ba_txt { margin: 1.5rem auto 0; text-align: center; max-width: 90%; }
.ba_sect .ba_slider .ba_card .ba_txt .cate { font-size: var(--p2); color: var(--point01); font-family:var(--en); transition: 0.4s ease;}
.ba_sect .ba_slider .ba_card .ba_txt .tit { font-size: var(--p3); font-weight: 500; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ba_sect .ba_slider .ba_card .ba_txt .tit a { color: inherit; transition: color 0.3s ease; }   /* 제목 → 전후사진 상세 (2026-10-06) */
.ba_sect .ba_slider .ba_card .ba_txt .tit a:hover, .ba_sect .ba_slider .ba_card .ba_txt .tit a:focus-visible { color: var(--point01); }

.ba_sect .ba_slider .swiper-slide-active .ba_txt { margin-top: 3.5rem; }
.ba_sect .ba_slider .swiper-slide-active .ba_card .ba_img .chip{font-size: var(--p3);}
.ba_sect .ba_slider .swiper-slide-active .ba_card .ba_txt .cate{display: block;}
.ba_sect .ba_slider .swiper-slide-active .ba_card .ba_txt .tit{font-size: var(--p1);}
.ba_sect .ba_slider .swiper-slide-active .ba_card .ba_img .chip { bottom: 2rem; }
.ba_sect .ba_slider .swiper-slide-active .ba_card .ba_img .chip.before { left: 2rem; }
.ba_sect .ba_slider .swiper-slide-active .ba_card .ba_img .chip.after { right: 2rem; }




/* ---------- 08 구글 리뷰 ---------- */
.review_sect { padding-top: var(--pd1); display: none;}

.review_sect .score {position: relative; text-align: right; display: flex; flex-direction: column; align-items: center; }
/* .review_sect .score .g_logo{position: absolute; top: 0; left: 50%; transform: translateX(-50%);} */
.review_sect .score .g_logo svg{ height: auto; display: inline-block; }
.review_sect .score .num { display: flex; align-items: flex-end; margin-top: 0.6rem; font-size: 20rem; font-family: var(--en); line-height: 0.8; color: var(--point01); letter-spacing: -0.03em; }
.review_sect .score .num > span{width: 24.5rem;}
.review_sect .score .num small { position: relative; display: flex; font-size: 8rem; opacity: 0.3; padding-bottom: 1.8rem; }
.review_sect .score .num small:before{content: ''; position: relative; display: block; left: 0; top: 0; margin-right: 0.5rem; width: 1.6rem; height: 0.625em; background:url('data:image/svg+xml,<svg width="16" height="51" viewBox="0 0 16 51" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="14.423" y1="0.258819" x2="0.964367" y2="50.487" stroke="%23FF5E10" stroke-width="2"/></svg>') no-repeat center / contain }

.review_sect .slide_cont{ position: relative; margin-top: var(--contMt2); padding-left: max(calc((100% - var(--in))/2 + var(--inPd)), var(--inPd));}
.review_sect .slide_cont:before{content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48rem; height: 48rem; border-radius: 50%;opacity: 0.5;background: #FF5E10;filter: blur(300px);}


.review_sect .review_slider,
.review_sect .review_foot{opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out 0.4s, transform 0.6s ease-in-out 0.4s;}
.review_sect.active .review_slider,
.review_sect.active .review_foot{opacity: 1; transform: unset;}
.review_sect .review_slider .reviewSwiper { padding: 20px 3.5rem 20px 20px; margin: -20px 0 -20px -20px;  }
.review_sect .review_slider .swiper-slide {height: auto; border-radius:3rem; background-color: #fff; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.05);}

.review_sect .review_slider .review_card { display: flex; flex-direction: column; height: 100%; padding: 5rem 4rem; }
.review_sect .review_slider .review_card .r_top { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; }
.review_sect .review_slider .review_card .r_top .logo { height: 2rem; flex: 0 1 auto; min-width: 0; overflow: hidden; }
.review_sect .review_slider .review_card .r_top .logo img { height: 100%; width: auto; }
.review_sect .review_slider .review_card .stars { display: flex; gap: 0.5rem; color: var(--point01); }
.review_sect .review_slider .review_card .stars svg { display: block; width: 1.8rem; height: 1.8rem; }
.review_sect .review_slider .review_card .r_txt {font-size: var(--p3); color: var(--gray90); opacity: 0.6; line-height: 1.4; 
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; margin-top: 5rem; }
.review_sect .review_slider .review_card .r_name { margin-top: auto; padding-top: 5rem; font-size: var(--p3); font-weight: 700; color: var(--black); }

.review_sect .review_foot { margin-top: var(--contMt3); }
.review_sect .review_foot .bar { position: relative; height: 2px; background-color: rgba(0,0,0,0.15); }
.review_sect .review_foot .bar .swiper-pagination-progressbar-fill { background-color: var(--gray90); }
.review_sect .review_foot .more_wrap { margin-top: var(--contMt2); text-align: center; }


/* ---------- 09 의료진 ---------- */
.doctor_sect { padding-top: var(--pd2); overflow: hidden; }

.doctor_sect .doctor_stage { position: relative; height: 131.4rem; max-height: 110vh; }

.doctor_sect .doctor_stage .d_quote { position: absolute; display: flex; gap: 1rem; width: 62rem; inset-inline-start: 8.8rem; top: 32rem; z-index: 2; font-family: var(--en); font-size: var(--h2); line-height: normal;
    text-align: center; color: var(--point01); opacity: 0; transform: translateX(-4rem); transition: opacity .16s ease-out, transform .16s ease-out; }
.doctor_sect .doctor_stage .d_quote .q_mark { font-size: 1.3em; line-height: inherit; }
.doctor_sect .doctor_stage .d_quote .q_open { inset-inline-start: 0; color: var(--point01); -webkit-text-fill-color: currentColor; }
.doctor_sect .doctor_stage .d_quote .q_close { inset-inline-end: 0; color:#E8B196; -webkit-text-fill-color: currentColor; }
.doctor_sect .doctor_stage .d_quote .d_quote_txt { display: block; flex: 1; }
.doctor_sect .doctor_stage .d_quote .d_quote_line_mask { display: block; overflow: hidden; margin: -0.12em 0; padding: 0.12em 0; }
.doctor_sect .doctor_stage .d_quote .d_quote_line { display: block; background: linear-gradient(112deg, var(--point01) 21.39%, #E8B196 78.61%); background-size: 100% 100%; background-position: center; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.doctor_sect.active .doctor_stage .doctorSwiper .swiper-slide-active .d_quote { opacity: 1; transform: translateX(0); transition: opacity .52s ease-out .08s, transform .88s cubic-bezier(0.16, 1, 0.3, 1) .08s; }
.doctor_sect.active .doctor_stage .doctorSwiper .swiper-slide-active .d_quote .d_quote_line { will-change: opacity, transform, filter; animation: doctorQuoteLineReveal .74s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: var(--line-delay, 0s); }

@keyframes doctorQuoteLineReveal {
    from { opacity: 0; transform: translateY(115%) rotate(2deg); filter: blur(0.25rem); }
    to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .doctor_sect.active .doctor_stage .doctorSwiper .swiper-slide-active .d_quote .d_quote_line { animation: none; }
}

.doctor_sect .doctor_stage .doctorSwiper { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.doctor_sect .doctor_stage .doctorSwiper .swiper-slide { position: relative; }
.doctor_sect .doctor_stage .doctorSwiper .d_photo { position: absolute; inset-inline-start: 57%; bottom: 0; width: auto; height: 100%; opacity: 0; transform: translateX(calc(-50% + 8rem)) scale(0.97); transition: opacity .18s ease-out, transform .18s ease-out; }
.doctor_sect.active .doctor_stage .doctorSwiper .swiper-slide-active .d_photo { opacity: 1; transform: translateX(-50%) scale(1); transition: opacity .65s ease-out .1s, transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) .1s; }
.doctor_sect .doctor_stage .doctorSwiper .d_photo img { width: 100%; height: 100%; object-fit: cover; }

.doctor_sect .doctor_stage .d_paging { display: flex; align-items: center; justify-content: space-between; color: var(--black); }
.doctor_sect .doctor_stage .d_paging .frac_num { position: relative; }

.doctor_sect .doctor_stage .d_panel { position: absolute; inset-inline-start: 13.5rem; top: 66rem; z-index: 3; width: 48.3rem; }
.doctor_sect .doctor_stage .d_panel .d_info { margin-top: 2rem; padding: 5rem 4rem; border-radius: 2rem; background: rgba(242, 242, 242, 0.50); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); opacity: 0; transform: translateY(5rem); transition: opacity .45s ease-out .22s, transform .7s cubic-bezier(0.16, 1, 0.3, 1) .22s; }
.doctor_sect.active .doctor_stage .d_panel .d_info { opacity: 1; transform: translateY(0); }
.doctor_sect.active .doctor_stage .d_panel .d_info.is-info-enter { animation: doctorInfoReveal .86s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes doctorInfoReveal {
    from { opacity: 0; transform: translateY(5rem); filter: blur(0.3rem); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.doctor_sect .doctor_stage .d_panel .d_info .chip { display: inline-block; padding: 0.5em 1em; border-radius: 10rem; background-color: #fff; font-size: var(--p5); font-weight: 600; color: var(--gray70); }
.doctor_sect .doctor_stage .d_panel .d_info .name { margin-top: 3.5rem; font-size: var(--h4); font-weight: 700; }
.doctor_sect .doctor_stage .d_panel .d_info ul { margin-top: 1rem; display: flex; flex-direction: column;  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.doctor_sect .doctor_stage .d_panel .d_info ul li { font-size: var(--p4); color: var(--gray40); text-indent: -0.5em; padding-inline-start: 0.5em; }

.doctor_sect .doctor_stage .d_grad { position: absolute; left: 50%; bottom: 0; z-index: 2; width: 100vw; height: 30%; transform: translateX(-50%); background: linear-gradient(to bottom,rgba(255, 255, 255, 0) 0%,	rgba(255, 255, 255, 0.08) 25%,rgba(255, 255, 255, 0.35) 52%,rgba(255, 255, 255, 0.75) 76%,#fff 100%); pointer-events: none; }

.doctor_sect .d_side {position: absolute;inset-inline-end: calc((100% - 100vw) / 3.3);bottom: 0;z-index: 1;width: 42%;}
.doctor_sect .d_side:before{content: ''; position: absolute; inset-inline-start: 0; top: 0; width: 15%; height: 100%; background: linear-gradient(to left, rgba(255,255,255,0) 0%, #fff 100%); z-index: 4; pointer-events: none;  display: none;}
.doctor_sect .d_side .swiper-slide-prev {opacity: 0; transition: 0.1s ease-in-out;}
.doctor_sect .d_side .d_side_item { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
@keyframes dSideSwap { from { opacity: 0; } to { opacity: 1; } } /* ≤768 양옆 썸네일 제자리 교체 */
.doctor_sect .d_side .d_side_item img { display: block; width: 100%; height: 58.7rem; object-fit: cover; object-position: top; opacity: 0.72; filter: grayscale(1) brightness(1.2) contrast(.85); transition: opacity .3s, filter .3s;}
@media screen and (min-width: 1241px) { .doctor_sect .d_side .d_side_item:hover img { opacity: 1; } }


/* ---------- 08 Why (2026-09-22 재수신 시안 — 배경 사진(블러+틴트 포함 내보내기) 위 중앙 타이틀 → EXPERIENCE | 통계 4행 → 가로 카드 슬라이더) ---------- */
.why_sect { position: relative; margin-top: var(--pd1); padding: var(--pd1) 0 var(--pd3); overflow: hidden; background: var(--point01) url('/inc/img/main/why_bg.webp') center / cover no-repeat; }
.why_sect .sect_tit_box .sect_desc { font-size: calc(var(--h5) - 0.1rem); margin-bottom: 2rem; color: #fff; }
.why_sect .in { z-index: 2; }

/* EXPERIENCE 문구 | 통계 80rem(컨테이너 오른쪽 정렬). 행 = 좌측 제목/설명 20rem + 우측 숫자, 하단 흰 28% 구분선 */
.why_sect .why_stats { display: flex; align-items: flex-start; justify-content: space-between; gap: 6rem; margin-top: var(--pd3); color: #fff; opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out 0.4s, transform 0.6s ease-in-out 0.4s; }
.why_sect.active .why_stats { opacity: 1; transform: none; }
.why_sect .why_stats .why_exp { flex: 1 1 auto; font-size: var(--h3); font-weight: 700; line-height: 1.4; }
.why_sect .why_stats .s_list { flex: 0 0 auto; width: 80rem; }
.why_sect .why_stats .s_list li { display: flex; align-items: flex-end; justify-content: space-between; gap: 4rem; padding-bottom: 2.5rem; border-bottom: 1px solid rgba(255,255,255,0.35); }
.why_sect .why_stats .s_list li + li { margin-top: 5rem; }
.why_sect .why_stats .s_list .k { flex: 0 0 auto; width: 20rem; }
.why_sect .why_stats .s_list .k .tit { font-size: var(--h8); font-weight: 700; line-height: 1.5; white-space: nowrap; }
.why_sect .why_stats .s_list .k .desc { margin-top: 1.4rem; font-size: var(--p4); line-height: 1.3; }
.why_sect .why_stats .s_list .v { display: flex; align-items: flex-end; gap: 0.5rem; font-size: var(--mainTit); line-height: 0.75; white-space: nowrap; }
.why_sect .why_stats .s_list .v .cnt { font-family: var(--en); }
.why_sect .why_stats .s_list .v .unit { padding-bottom: 0.4rem; font-size: 0.5em; line-height: 1; font-weight: 600; }
.why_sect .why_stats .s_list .v .unit.word { font-size: 0.25em; }

/* 카드 슬라이더 — 카드 129rem×72rem(라운드 3rem / 20rem 대각), 컨테이너 우측으로 흘러넘치고 섹션에서 잘린다 */
.why_sect .why_cards { margin-top: var(--pd3); opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out 0.6s, transform 0.6s ease-in-out 0.6s; }
.why_sect.active .why_cards { opacity: 1; transform: none; }
.why_sect .why_cards .whySwiper { overflow: visible; }
.why_sect .why_cards .swiper-slide { width: 75%; }
.why_sect .why_cards .why_card { position: relative; aspect-ratio: 16 / 9; border-radius: 3rem; overflow: hidden; background-color: var(--gray90); }
.why_sect .why_cards .why_card img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* 점 페이지네이션 + 자동넘김 진행(1.php mainWhySectInit: Swiper pagination + .is_run 토글) — 점은 흰 원, 현재 카드의 점은 막대로 늘어나 흰색으로 차오른다.
   채움 4.5s = autoplay.delay(전환이 끝난 뒤부터 다음 전환까지). delay 를 바꾸면 여기도 같이 */
.why_sect .why_pagination { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: var(--contMt3); }
.why_sect .why_pagination .swiper-pagination-bullet { position: relative; display: block; width: 0.7rem; height: 0.7rem; margin: 0; border-radius: 1rem; background-color: rgba(255,255,255,0.4); opacity: 1; overflow: hidden; transition: width 0.4s ease, background-color 0.3s ease; }
.why_sect .why_pagination .swiper-pagination-bullet-active { width: 5rem; background-color: rgba(255,255,255,0.35); }
.why_sect .why_pagination .swiper-pagination-bullet-active::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-color: #fff; transform: scaleX(0); transform-origin: left center; }
.why_sect .why_pagination.is_run .swiper-pagination-bullet-active::after { animation: whyDotFill 4.5s linear forwards; }
@keyframes whyDotFill { to { transform: scaleX(1); } }
@media screen and (min-width: 1241px) { .why_sect .why_pagination .swiper-pagination-bullet:not(.swiper-pagination-bullet-active):hover { background-color: rgba(255,255,255,0.8); } }



.full_video_sect .img {position: relative; padding-top: 56.25%; overflow: hidden; background-color: #000;} /* 유튜브가 뜨기 전(섹션 근처에서 로드) 빈칸 */
.full_video_sect .img .v_poster {position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;} /* 재생 전 유튜브 UI 가림 — 1.php .v_poster */
.full_video_sect .img iframe {position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%; border: 0; object-fit: cover; object-position: center;
    opacity: 0;} /* 유튜브 UI(재생버튼·제목 바) 가림 — 재생 확인 1초 뒤 .yt_on 페이드인 */
.full_video_sect .img iframe.yt_on {opacity: 1; transition: opacity 0.6s ease-in-out;}
/* 투명 덮개(1.php .js_full_video_cover) — 영상 위 휠을 페이지가 받게 해 스크롤이 끊기지 않게, 클릭 한 번 = 재생/일시정지.
   2026-10-01 컨트롤 숨김(controls=0) 이후 하단 컨트롤 줄이 없으므로 영상 전체를 덮는다(유튜브 자체 클릭-정지 차단). 전 폭 공통 — 모바일에서도 정지 수단이 된다 */
.full_video_sect .img .v_cover { display: block; position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
/* 쿠키 '외부 콘텐츠' 미허용(.is-static — 1.php) — 유튜브 없이 로컬 포스터 이미지만. 재생 덮개도 없앤다(이 화면에서 허용하면 스크립트가 떼고 영상을 불러온다) */
.full_video_sect.is-static .img .v_cover, .full_video_sect.is-static .img iframe { display: none; }


/* ---------- 11 진료 ---------- */
.bg_sect_wrap{position: relative; z-index: 2; background-color: #fff; }

.treat_sect { padding: var(--pd1) 0; background-color: #fff; }
.treat_sect .sect_tit_box .sect_tit { text-transform: none; }   /* 2026-10-14 병원명 표기 통일 "Heal Dental Hospital" — 대문자 변환 해제(문구는 팩 그대로) */
.treat_sect .treat_list { display: flex; justify-content: center; gap: 4rem; margin-top: var(--contMt1); width: 215rem; max-width: calc(100% - var(--inPd) * 2); margin-left: auto; margin-right: auto; padding: 0 var(--inPd);}
.treat_sect .treat_list > li { flex: 1; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); opacity: 0; transform: translateY(10rem); transition: opacity 1s ease-in-out, transform 1s ease-in-out;}
.treat_sect.active .treat_list li{opacity: 1; transform: unset;}

.treat_sect .treat_list > li:nth-child(even) { margin-top: 7.5rem; }
.treat_sect .treat_list > li > a { display: block; }
.treat_sect .treat_list .oval { position: relative; border-radius: 2rem; overflow: hidden; aspect-ratio: 506 / 720; transition: border-radius 1s ease-in;}
.treat_sect .treat_list .oval img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.5s ease; }
.treat_sect.active .treat_list .oval {border-radius: 20em;}

.treat_sect .treat_list > li:nth-child(1),
.treat_sect .treat_list > li:nth-child(1) .oval { transition-delay: 0.4s; }
.treat_sect .treat_list > li:nth-child(2),
.treat_sect .treat_list > li:nth-child(2) .oval { transition-delay: 0.8s; }
.treat_sect .treat_list > li:nth-child(3),
.treat_sect .treat_list > li:nth-child(3) .oval { transition-delay: 1.2s; }
.treat_sect .treat_list > li:nth-child(4),
.treat_sect .treat_list > li:nth-child(4) .oval { transition-delay: 1.4s; }

.treat_sect .treat_list .ov_hover { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background-color: rgba(255, 94, 16, 0.45); opacity: 0; transition: opacity 0.45s ease; pointer-events: none; }
.treat_sect .treat_list .ov_hover .ico { display: flex; align-items: center; justify-content: center; width: 6.8rem; height: 6.8rem; border-radius: 50%; background-color: #fff; color: var(--point01); transform: translateY(1.8rem); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.treat_sect .treat_list .ov_hover .ico svg { width: 1.8rem; height: 1.8rem; }
.treat_sect .treat_list .ov_hover .txt { font-size: var(--p3); font-weight: 600; line-height: 1; color: #fff; transform: translateY(1.8rem); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s; }
.treat_sect .treat_list .t_txt { margin-top: 4rem; text-align: center; }
.treat_sect .treat_list .t_txt .cate { font-size: var(--p4); font-weight: 600; text-transform: uppercase; color: var(--gray30); transition: color 0.4s ease; }
.treat_sect .treat_list .t_txt .tit { margin-top: 1rem; font-size: var(--h6); line-height: 1.3; font-family: var(--en); }

@media (hover: hover) and (min-width: 1241px) {
    .treat_sect .treat_list > li:hover .oval img { transform: scale(1.09); filter: blur(1.75rem); }
    .treat_sect .treat_list > li:hover .ov_hover { opacity: 1; }
    .treat_sect .treat_list > li:hover .ov_hover .ico,
    .treat_sect .treat_list > li:hover .ov_hover .txt { transform: translateY(0); }
}





/* ---------- 12 장비 ---------- */
.tech_sect { padding-bottom: var(--pd1); }
.tech_sect .sect_tit_box .sect_tit { text-transform: none; }   /* 2026-10-14 다른 타이틀처럼 타이틀 케이스(문구는 팩 그대로) */
.tech_sect .sect_head .tech_frac { flex: 0 0 auto; } /* 숫자 페이징(펼쳐진 카드 번호/전체) — 타이틀 행 오른쪽 하단 정렬 */
/* 진행도 바 — 공항 카드 롤링바와 같은 2px 트랙 + 검정 채움. 채움 폭은 JS 가 scaleX 로 갱신 */
.tech_sect .tech_progress { position: relative; margin-top: var(--contMt4); height: 2px; background-color: rgba(0,0,0,0.15); display: none;}
.tech_sect .tech_progress .fill { position: absolute; inset-inline-start: 0; top: 0; width: 100%; height: 100%; background-color: var(--black); transform: scaleX(0.25); transform-origin: left top; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
/* 아코디언 슬라이더 무대 — 좌우 화살표는 컨테이너 바깥(양쪽 10rem 간격) 세로 중앙, 트랙은 뷰포트에서 잘린다 */
.tech_sect .tech_stage { position: relative; margin-top: var(--contMt2); }
.tech_sect .tech_stage .btns { position: absolute; inset-inline: -10rem; top: 50%; justify-content: space-between; transform: translateY(-50%); pointer-events: none; z-index: 2; }
.tech_sect .tech_stage .btns .circle_btn { pointer-events: auto; }
.tech_sect .tech_stage.no_page .btns { display: none; } /* 카드가 4개 이하라 넘길 페이지가 없을 때(JS 가 판정) */
.tech_sect .tech_viewport { overflow: hidden; }
/* 장비 개수와 무관하게 한 화면에 4개(펼친 카드 64rem + 접힌 카드 3개, 사이 간격 2rem×3). 트랙 이동은 JS 가 transform 으로 처리 */
.tech_sect .tech_acc { display: flex; gap: 2rem; height: 92rem; will-change: transform; touch-action: pan-y; user-select: none; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } /* 페이지 이동은 이 transition 이 그린다(JS 는 최종 위치만 넣음) */
.tech_sect .tech_acc.snap { transition-duration: 0.35s; } /* 드래그 되돌림 */
.tech_sect .tech_acc.dragging, .tech_sect .tech_acc.no_trans { transition: none; } /* 손가락 추종 · 리사이즈 즉시 배치 */
.tech_sect .tech_acc > li { position: relative; flex: 0 0 calc((100% - 64rem - 6rem) / 3); min-width: 0; border-radius: 3rem; overflow: hidden; background: linear-gradient(180deg, #F0F3F7 0%, #CBD0D6 100%); cursor: pointer; transition: flex-basis 0.9s cubic-bezier(0.22, 1, 0.36, 1), border-radius 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
.tech_sect .tech_acc > li.active { flex-basis: 64rem; border-radius: 60rem; cursor: default; }
/* 한 화면(4개) 밖의 카드 — 카드 폭 전환(0.9s) 동안 보이는 4개의 폭 합이 뷰포트보다 작아져 옆 카드가 잘린 채 비쳐 보이던 것을 가린다.
   display:none 이 아니라 visibility 라 offsetWidth(트랙 위치 계산)는 그대로 유지되고, 잘린 카드에 호버도 걸리지 않는다. JS 가 토글한다. */
.tech_sect .tech_acc > li.out_view { visibility: hidden; }
/* 페이지 이동(화살표·스와이프) 순간만 폭 전환을 끈다 — JS 가 한 프레임 동안 붙였다 뗀다 */
.tech_sect .tech_acc.no_anim > li { transition: none; }
.tech_sect .tech_acc img { -webkit-user-drag: none; }

/* 활성 카드 스튜디오 배경 — background-image 는 transition 불가라 ::before 오버레이 페이드로 처리 */
.tech_sect .tech_acc > li::before { content: ''; position: absolute; inset: 0; background: url('/inc/img/main/tech_bg.webp') center / cover no-repeat; opacity: 0; transition: opacity 0.5s ease; }
.tech_sect .tech_acc > li.active::before { opacity: 1; }

/* 닫힌 패널 요소(세로 이름·장비 이미지): 열릴 땐 즉시 사라지고, 닫힌 뒤 늦게 다시 나타남 */
.tech_sect .tech_acc .v_name { position: absolute; left: 5rem; top: 12rem; height: 25rem; writing-mode: vertical-rl; font-family: var(--en); font-size: var(--h8); line-height: 1.3; opacity: 1; transition: opacity 0.35s ease 0.45s; }
.tech_sect .tech_acc > li.active .v_name { opacity: 0; transition: opacity 0.15s ease; }

.tech_sect .tech_acc .t_cont { position: absolute; left: 50%; top: 0; width: 64rem; height: 100%; opacity: 0; transform: translateX(-50%) translateY(2.4rem); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.tech_sect .tech_acc > li.active .t_cont { opacity: 1; transform: translateX(-50%) translateY(0); transition: opacity 0.6s ease 0.25s, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s; }

.tech_sect .tech_acc .t_cont .tit { margin-top: 12rem; padding: 0 12.5rem; text-align: center; font-family: var(--en); font-size: var(--h3); line-height: 1.5; color: #fff; }
.tech_sect .tech_acc .t_cont .txt { margin-top: 1.5rem; padding: 0 2rem; text-align: center; font-size: var(--p3); font-weight: 300; color: #fff; }

/* 장비 이미지 — 카드당 1개 요소를 접힘/펼침 좌표 간 이동·리사이즈로 전환 (요소 교체 크로스페이드 없음 → 깜빡임 제거) */
.tech_sect .tech_acc .t_img { position: absolute; inset: 0; pointer-events: none; }
.tech_sect .tech_acc .t_img img { position: absolute; inset-inline-start: 50%; bottom: 0; width: 51.2rem; transform: translateX(-50%); height: auto; max-width: none; filter: drop-shadow(0 2rem 2.4rem rgba(31, 41, 51, 0.12)); transition: inset-inline-start 0.9s cubic-bezier(0.22, 1, 0.36, 1), width 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); } 

/* 접힘: 시안 접힌 카드(300)는 640×560 이미지 프레임을 0.8 배(51.2rem)로 왼쪽·바닥에 붙여 오른쪽이 카드 밖으로 잘린다 / 펼침: 프레임 원폭(64rem) 가운데·바닥. 장비별 개별 좌표 없음(프레임 자체가 시안 배치) */
.tech_sect .tech_acc > li.active .t_img img { inset-inline-start: 50%; width: 64rem; transform: translateX(-50%); }






/* ---------- 13 방문 여정 ---------- */
.journey_sect { position: relative; isolation: isolate; overflow: hidden; padding-top: 29rem; padding-bottom: 7rem; }
.journey_sect:before { content: ''; position: absolute; inset: 0; z-index: 0; background: url('/inc/img/main/journey_bg.webp') center top / cover no-repeat; clip-path: inset(0 50% 0 50%); transition: clip-path 0.8s ease-in-out; }
.journey_sect.active:before { clip-path: inset(0); }

.journey_sect .journey_head { position: relative; z-index: 1; text-align: center; }
.journey_sect .journey_head .smile { margin: 0 auto; width: 25.6rem; color: var(--point01);}
.journey_sect .journey_head .smile svg { width: 100%; height: auto; }
.journey_sect .journey_head .smile { clip-path: inset(0 100% 0 0); transition: clip-path 0.8s ease-in-out 0.4s; } /* 그리기 와이프(clip-path)는 svg 가 아니라 감싸는 div 에 — 사파리가 svg 루트의 clip-path 트랜지션에서 사각형 잔상을 남김(2026-10-01) */
.journey_sect.active .journey_head .smile { clip-path: inset(0); } 

.journey_sect .journey_head .j_tit { font-weight: 300; font-family: var(--en); font-size:11vw; line-height:1.2; white-space: nowrap; opacity: 0; transform: translateY(2rem) scaleX(0.94); filter: blur(1.2rem); clip-path: inset(0 50% 0 50%);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0.50) 5.7%, #FFF 88.94%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; }

.journey_sect.active .journey_head .j_tit { animation: journey-title-reveal 2.5s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; }

@keyframes journey-title-reveal {
    0% { opacity: 0; transform: translateY(2rem) scaleX(0.94); filter: blur(1.2rem); clip-path: inset(0 50% 0 50%); }
    65% { opacity: 1; transform: translateY(0) scaleX(1); filter: blur(0); clip-path: inset(0); }
    100% { opacity: 1; transform: translateY(0) scaleX(1); filter: blur(0); clip-path: inset(0); }
}
@media (prefers-reduced-motion: reduce) {
    .journey_sect:before { clip-path: none; transition: none; }
    .journey_sect .journey_head .j_tit { opacity: 1; transform: none; filter: none; clip-path: none; }
    .journey_sect.active .journey_head .j_tit { animation: none; }
}

.journey_sect .cont_wrap{ position: relative; z-index: 1; display: flex; align-items: center; flex-direction: column; margin: -4rem 10rem 0; max-height: 116rem; overflow: hidden; background-color: #fff; 
    border-radius: 5rem; opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out 0.6s, transform 0.6s ease-in-out 0.6s, border-radius 1.5s ease-in-out 0.4s;}
.journey_sect.active .cont_wrap{opacity: 1; transform: unset;} 
.journey_sect .cont_wrap.active {border-end-start-radius: 70rem; } /* 논리 속성 — RTL 에서 우하단 */

.journey_sect .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; }
.journey_sect .bg:before { content: ''; position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.25); transition: background-color 0.6s ease; }
.journey_sect .bg.filter_25:before{background-color: rgba(0,0,0,0.25);}
.journey_sect .bg.filter_60:before{background-color: rgba(0,0,0,0.6);}
.journey_sect .bg.filter_45:before{background-color: rgba(0,0,0,0.45);}
.journey_sect .bg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.journey_sect .bg img.on { opacity: 1; }

.journey_sect .cont { position: relative; width: var(--in); z-index: 2; padding: var(--pd) var(--inPd) var(--pd1); margin-inline-start: 20rem; max-width: 100%;}
.journey_sect .cont .sect_tit_box {  z-index: 2; color: #fff; }
.journey_sect .cont .sect_tit_box .tit { font-size: calc(var(--h5) - 0.1rem); font-weight: 700; opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;}
.journey_sect .cont .sect_tit_box.active .tit{opacity: 1; transform: unset;}
.journey_sect .cont .sect_tit_box .sect_txt { font-size: var(--p3); margin-top: 2rem; line-height: 1.3; }

.journey_sect .cont .journey_cards { z-index: 2; width: 100%; display: flex;  gap: 2.5rem; margin-top: var(--contMt2);}
.journey_sect .cont .journey_cards::-webkit-scrollbar {display: none;}
.journey_sect .cont .journey_cards.is_dragging { cursor: grabbing; user-select: none; }
.journey_sect .cont .journey_cards > li { display: flex; flex-direction: column; padding: 4rem 3.5rem; border-radius: 2rem; background-color: rgba(255,255,255,0.2); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); color: #fff; transition: background-color 0.4s ease, color 0.4s ease; }
.journey_sect .cont .journey_cards > li { flex: 0 0 calc((100% - 7.5rem) / 4); }
.journey_sect .cont .journey_cards.is_dragging > li { cursor: grabbing; }
.journey_sect .cont .journey_cards > li .num { align-self: flex-end; font-size: 7rem; font-family: var(--en); line-height: 1; transition: color 0.4s ease; }
.journey_sect .cont .journey_cards > li .tit { margin-top: var(--contMt4); font-family: var(--en); font-size: var(--h6); line-height: 1.3; }
.journey_sect .cont .journey_cards > li .txt { margin-top: 1.5rem; font-size: var(--p6); line-height: 1.5; transition: color 0.4s ease; }
.journey_sect .cont .journey_cards > li .thumb { margin-top: auto; padding-top: 2rem; }
.journey_sect .cont .journey_cards > li .thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3540 / 1739; object-fit: cover; border-radius: 1.5rem; }
.journey_sect .cont .journey_cards > li.on { background-color: #fff; color: var(--black); }
.journey_sect .cont .journey_cards > li.on .num { color: var(--point01); }

.journey_sect .cont .journey_cards > li{opacity: 0; transform: translateX(5rem); filter: blur(20px); transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out, filter 0.6s ease-in-out;}
.journey_sect .cont_wrap .journey_cards.active > li{opacity: 1; transform: unset; filter:none}
/* .journey_sect .cont_wrap .journey_cards > li:nth-child(1){transition-delay: 0.4s;} */
.journey_sect .cont_wrap .journey_cards > li:nth-child(2){transition-delay: 0.2s;}
.journey_sect .cont_wrap .journey_cards > li:nth-child(3){transition-delay: 0.3s;}
.journey_sect .cont_wrap .journey_cards > li:nth-child(4){transition-delay: 0.4s;}





/* ---------- 14 오시는길 ---------- */
/* .map_box(지도+정보 카드)는 common.css 로 공용화됨 (오시는 길 페이지 idx 21 과 공유, 파셜 _Skin/include/map-info-card.php) */
.location_sect { padding: var(--pd1) 0; background: linear-gradient(0deg, #F5F5F5 -0.01%, #FFF 99.99%), #F5F5F5;}

/* 핀(지도 중심)이 정보카드에 가려지지 않게 iframe 을 오버사이즈해 중심을 좌측 25% 지점으로 이동 */




/* 14_2 Airport */
.location_sect .airport { margin-top: var(--contMt1); padding-inline-start: max(calc((100% - var(--in))/2 + var(--inPd)), var(--inPd)); }
.location_sect .airport .sect_tit { font-family: var(--en); font-size: 5rem; font-weight: 300; }

.location_sect .airport_list { margin-top: var(--contMt3); opacity: 0; transform: translateY(5rem); transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;}
.location_sect.active .airport_list{opacity: 1; transform: unset;}

.location_sect .airport_list .airSwiper {padding-inline-end: 4rem;}

.location_sect .airport_list .swiper-slide { height: auto; }
.location_sect .airport_list .air_card .card { position: relative; border-radius: 2rem; overflow: hidden; background-color: var(--point01); }
.location_sect .airport_list .air_card .card .img { position: relative; padding-top: 56%;  }
.location_sect .airport_list .air_card .card .img:before{content: ''; position: absolute; inset: 0; width: 101%; height: 101%; z-index: 2; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="654" height="127" viewBox="0 0 654 127" fill="none"><path d="M653.332 126.75C579.151 65.4434 460.073 25.6978 325.821 25.6978C192.184 25.6978 73.582 65.0797 -0.667969 125.908V-9.25H653.332V126.75Z" fill="%23FF5E10"/></svg>') no-repeat center top / contain; }
.location_sect .airport_list .air_card .card .img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out; }
@media screen and (min-width: 1241px) { .location_sect .airport_list .air_card .card:hover .img img{transform: scale(1.08);} }
/* .location_sect .airport_list .air_card .card .img:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(20,14,8,0.05) 40%, rgba(20,14,8,0.6) 100%); } */
.location_sect .airport_list .air_card .card .play { position: absolute; left: 50%; top: 50%; z-index: 2; width: 5rem; transform: translate(-50%,-50%); }
.location_sect .airport_list .air_card .card .play img { width: 100%; }
.location_sect .airport_list a.air_card:not([href]) .card .play { display: none; } /* 쿠키 '외부 콘텐츠' 미허용 — 이미지만(1.php, 허용되면 스크립트가 href 를 단다) */
.location_sect .airport_list .air_card .card .play:before{content: ''; position: absolute; left: 50%; top: calc(100% + 1.3rem); width: 9.5rem; height: 2.9rem; transform: translate(-50%,-50%); background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="95" height="29" viewBox="0 0 95 29" fill="none"><foreignObject x="-50" y="-50" width="195" height="129"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(25px);clip-path:url(%23bgblur_0_1313_5507_clip_path);height:100%;width:100%"></div></foreignObject><path opacity="0.5" data-figma-bg-blur-radius="50" d="M47.4883 29C30.2209 29 13.3638 21.2956 0 7.29397L7.63142 0C19.1547 12.0667 32.9288 18.4343 47.5 18.4343C62.0712 18.4343 75.8453 12.055 87.3686 0L95 7.29397C81.6362 21.2839 64.7674 29 47.5117 29H47.4883Z" fill="white"/><defs><clipPath id="bgblur_0_1313_5507_clip_path" transform="translate(50 50)"><path d="M47.4883 29C30.2209 29 13.3638 21.2956 0 7.29397L7.63142 0C19.1547 12.0667 32.9288 18.4343 47.5 18.4343C62.0712 18.4343 75.8453 12.055 87.3686 0L95 7.29397C81.6362 21.2839 64.7674 29 47.5117 29H47.4883Z"/></clipPath></defs></svg>') no-repeat center / contain;}
.location_sect .airport_list .air_card .card .txt_box{position: absolute; display: flex; align-items: center; justify-content: space-between; 
    gap: 3rem; bottom: 0; inset-inline-start: 0; width: 100%; padding: 0 0 3rem; padding-inline: 3rem 5rem; z-index: 2; font-family: var(--en); line-height: 1; }
.location_sect .airport_list .air_card .card .txt_box .tit { font-size: var(--h4); color: #fff; font-weight: 300; }
.location_sect .airport_list .air_card .card .txt_box .by { font-size: calc(var(--h8) - 0.1rem) ; color: #FF9664; }

.location_sect .airport_list .air_card .txt { margin-top: 2rem; font-size: var(--h8); font-weight: 700; }

.location_sect .airport_foot { margin-top: var(--contMt4); width: var(--in); max-width: calc(100% - var(--inPd));}
.location_sect .airport_foot .bar { position: relative; height: 2px; background-color: rgba(0,0,0,0.15); }
.location_sect .airport_foot .bar .swiper-pagination-progressbar-fill { background-color: var(--black); }



 
/* ---------- 인스타 ---------- */
.insta_sect { padding: var(--pd1) 0; display: none;}
.insta_list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; margin-top: var(--contMt2); }
.insta_list li { border-radius: 2rem; overflow: hidden; aspect-ratio: 37 / 50; background-color: #CFCFCF; }
.insta_list li img { width: 100%; height: 100%; object-fit: cover; }

/* 하단 상담 반복 배치 */
.consult_sect.bottom { padding: var(--pd1) 0; }




/* 영문 제외 */

.lang-ja .consult_sect .consult_panel .c_left .sect_tit_box .sect_tit br {display: none;}
.lang-ar .kv_visual .kvSwiper .kv_txt .kv_tit{font-size: min(5vw , 12rem);}





@media screen and (max-width: 2000px){

    :root{
        --mainTit: 8.5rem;
    }

    .cost_sect .cost_graph_box{padding: 3rem; }
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_box{padding: 3rem 4rem;}
    .cost_sect .cost_graph_card.cost_graph_usa{top: 48%;}
    .cost_sect .cost_graph_card.cost_graph_canada{top: 64%;}
    .cost_sect .cost_graph_card.cost_graph_heal{top: 71%;}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save {bottom: calc(100% + clamp(16rem, 6.6vw, 33rem) + 2rem);}   /* +2rem 한국 국기 자리(2026-10-14) */

    .doctor_sect .doctor_stage .d_quote{ width: 51rem; top: 29rem; inset-inline-start: 17.8rem; font-size: var(--h3);}

    .why_sect .why_stats { margin-top: var(--contMt1); }
    .why_sect .why_cards { margin-top: var(--contMt1); }

    .treat_sect .treat_list{width: 175rem; margin-top: var(--contMt3); max-width: 100%;}

    .journey_sect .cont{padding: var(--pd1) var(--inPd) var(--pd2);}
    .journey_sect .cont_wrap.active {border-end-start-radius: 40rem;}

    
    .doctor_sect .d_side {width: 40%;     inset-inline-end: calc((100% - 100vw) / 2.7);}
    .doctor_sect .d_side .d_side_item img {height: 50rem;}

    

    
    
    
}

@media screen and (max-width: 1840px) {

    .journey_sect .cont {margin-block: 0;}
    .journey_sect .cont_wrap {margin: 0 6rem;}


    .doctor_sect .d_side {inset-inline-end: calc((100% - 100vw) / 2);}

    .doctor_sect .d_side {width: 32%;}
    .doctor_sect .d_side .d_side_item img {height: 46rem;}
    .journey_sect .cont {margin-inline-start:10rem}



    



}

@media screen and (max-width: 1640px) {
    .kv_intro.active {border-end-start-radius: 60rem;}
    .cost_sect .cost_graph_card.cost_graph_usa {top: 40%;}

    .doctor_sect .doctor_stage .d_quote {inset-inline-start: 0rem;}
    .doctor_sect .doctor_stage .d_panel {inset-inline-start: 0; top: 50rem;}
    .doctor_sect .doctor_stage .doctorSwiper .d_photo {inset-inline-start: 50%;}

    .motion_sect .fill_txt {font-size: 11rem;}
    .cost_sect .graph {margin-top: -20rem;}

    .journey_sect .cont_wrap {margin:-3rem var(--inPd) 0;}
    .journey_sect .cont_wrap.active {border-end-start-radius: 30rem;}
    .journey_sect .cont {margin-inline-start:6rem; max-width: 95%; margin-inline-end: 5rem;}
    
    
    .tech_sect .tech_stage .btns {display: none;}
    .tech_sect .tech_progress {display: block;}


    .doctor_sect .doctor_stage .d_quote {top: 16rem;}
    .doctor_sect .doctor_stage {height: 100rem;}


    

}


@media screen and (max-width: 1440px) {

    .doctor_sect .d_side .d_side_item img {height: 48rem;}

    .cost_sect .graph {margin-top: 0rem} 
    .cost_sect .cost_graph_card .cost_graph_box dd {font-size: var(--h8);}

    .kv_intro.active {border-end-start-radius: 30rem;} 


    .price_sect {margin-top: var(--pd4);}
    .journey_sect .cont .journey_cards > li .num {font-size: 5rem;}

    .ba_sect .ba_slider .ba_card {height: 47vw;}

    
    
}




@media screen and (max-width: 1240px) {
    :root { --mainTit: 7.5rem; }

    /* 01 KV — 제목은 폭 비례, 스마일은 라인 구간 안에 세로 중앙(고정 높이 svg 가 뷰포트를 넘던 문제) */
    .kv_visual .kvSwiper .kv_txt .kv_tit { font-size: min(12rem, 9vw); }
    .kv_intro { padding-bottom: var(--pd1); }
    .kv_intro.active { border-end-start-radius: 24rem; } /* 하단 여백을 줄인 만큼 좌하단 라운드가 문구를 자르지 않게 축소 */
    .kv_intro .kv_smile { top: var(--pd3); display: flex; align-items: center; justify-content: center; width: min(76.4rem, 80vw); height: 42.5rem; }
    .kv_intro .kv_smile svg { width: 100%; height: auto; }

    

    /* 02 비용 비교 — 그래프가 타이틀을 덮지 않도록 겹침 축소, 카드·76% 축소 */
    .cost_sect .graph { margin-top: -8rem; pointer-events: all;}
    .cost_sect .cost_graph_box { min-width: 30rem; padding: 2.5rem; border-radius: 2rem; }
    .cost_sect .cost_graph_card .cost_graph_box dl > div {width: 100%; justify-content: space-between;}
    .cost_sect .cost_graph_card .cost_graph_box dd { width: auto;  font-size: var(--h7); white-space: nowrap; }
    .cost_sect .cost_graph_card .cost_graph_box dt {text-align: left;}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_box { min-width: 38rem; padding: 2.5rem 3rem; }
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save .cost_graph_percent { font-size: 16rem; }
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save .arr svg { height: 9rem; }


    .price_sect .price_list > li {padding: 30px 20px;}
    .price_sect .price_list .p_feat li {font-size: var(--p6);}
    .price_sect .price_list .p_price {font-size: var(--h2);}
    .price_sect .price_list .p_feat {margin-top: 4rem;}
    .price_sect .price_list .p_price {margin-top: 3rem;}
    .price_sect .price_list .p_btn {height: 3em; margin-top: 4rem;}

    .stories_sect {padding-bottom: 0;}
    .motion_sect:before {background: radial-gradient(circle 96rem at calc(123% - 40rem) calc(40% + 60rem), rgba(255,94,16,0.95) 0%, rgba(255,94,16,0.6) 30%, rgba(255,94,16,0.25) 60%, rgba(255,94,16,0) 100%);}
    .stories_sect .stories_slider .story_card {padding-top: 0; border-radius: 0; background: transparent;}
    .stories_sect .stories_slider .story_card.video:after {content: none;}
    .stories_sect .stories_slider .story_card .img {padding-top: 142%; position: relative; border-radius: 20em; overflow: hidden; background: var(--point01);}
    .stories_sect .stories_slider .story_card .img img {position: absolute; left: 0; top: 0;}
    .stories_sect .stories_slider .story_card .v_txt {position: relative; width: auto; height: auto; opacity: 1; backdrop-filter: unset; background: transparent; color: var(--black); padding: 0 10px; margin-top: -7rem;}
    .stories_sect .stories_slider .story_card .v_txt .cap {font-size: var(--p6); font-weight: 600; line-height: 1.3;}
    .stories_sect .stories_slider .story_card .v_txt .play {width: 6rem; margin-bottom: 5rem;}


    .ba_sect .ba_slider .swiper-slide-active .ba_card .ba_txt .tit {font-size: var(--p3);}

    .location_sect .airport_list {width:calc(100% + var(--inPd) * 1); margin-inline-start: calc(var(--inPd) * -1); padding-inline-start: var(--inPd); overflow: hidden;}
    .location_sect .airport_list .swiper-container{overflow: visible;}
 

    /* 07 Before & After — 활성 카드(130%)가 고정 높이보다 커져 문구가 잘리던 것: 높이 자동 */
    .ba_sect .ba_slider .ba_card { height: 50vw; }

    /* 09 의료진 — 스테이지 안 겹침 정리(정보 카드 고정 높이 해제, 미리보기 폭 축소) */
    .doctor_sect .doctor_stage { height: 100rem; max-height: none; }
    .doctor_sect .doctor_stage .d_quote { inset-inline-start: 0; top: 16rem; width: 44rem; font-size: var(--h4); }
    .doctor_sect .doctor_stage .d_panel { inset-inline-start: 0; bottom: 4rem; width: 44rem; }
    .doctor_sect .doctor_stage .d_panel .d_info { height: auto; padding: 3.5rem 3rem; }
    .doctor_sect .d_side { width: 30%; }
    .doctor_sect .d_side .d_side_item img { height: 36rem; }

    /* 08 WHY — EXPERIENCE | 통계 2열 유지(통계 유동 폭), 카드 폭은 뷰포트 비례 */
    .why_sect .sect_tit_box .sect_desc {font-size: var(--p2);}
    .why_sect .why_stats { gap: 60px; }
    .why_sect .why_stats .why_exp { flex: 0 0 auto; font-size: var(--h6);}
    .why_sect .why_stats .why_exp br {display: none;}
    .why_sect .why_stats .s_list { flex: 1 1 auto; width: auto; min-width: 0; }
    .why_sect .why_stats .s_list .k { flex: 1 1 auto; width: auto; padding-inline-end: 2rem; }
    .why_sect .why_stats .s_list .k .tit {font-size: var(--p1);}
    .why_sect .why_cards .swiper-slide { width: 72vw; }
    .why_sect .why_cards .why_card { border-start-end-radius: 14rem; border-end-start-radius: 14rem; }

    /* 12 장비 — 컨테이너 바깥 화살표를 안쪽 가장자리로 */
    .tech_sect .tech_stage .btns { inset-inline: 1rem; }

    /* 13 방문 여정 — 고정폭 컨테이너(var(--in) px 하한) 해제, 제목 폭 비례, 카드 2열 */
    .journey_sect .journey_head .j_tit { font-size: 11vw; }
    .journey_sect .cont_wrap.active { border-end-start-radius: 20rem; } /* 2열 카드가 좌하단 라운드에 잘리지 않게 축소 */
    .journey_sect .cont { width: 100%; margin-inline: 0; max-width: 100%; padding-inline-end: 0;}
    .journey_sect .cont .journey_cards {width: calc(100% + var(--inPd)); margin-inline-start: calc(var(--inPd) * -1); padding:0 var(--inPd); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;}
    .journey_sect .cont .journey_cards > li {flex: 0 0 300px;}
    /* 1240 이하 스와이퍼식 — 카드 단위 스냅(터치로 밀면 카드 시작선에 멈춤), 마우스 드래그 중·JS 정렬 중엔 스냅 해제. 활성 카드 = 맨 앞 카드(1.php 여정 스크립트) */
    .journey_sect .cont .journey_cards { scroll-snap-type: x mandatory; scroll-padding-inline: var(--inPd); overscroll-behavior-x: contain; cursor: grab; } /* 마우스 드래그는 1240 이하만(1.php) */
    .journey_sect .cont .journey_cards.is_dragging, .journey_sect .cont .journey_cards.is_settling { scroll-snap-type: none; }
    .journey_sect .cont .journey_cards > li { scroll-snap-align: start; }

    .consult_sect .consult_panel.active {border-end-start-radius: 24rem;}


    

    /* 14 오시는길 — 공항 진행바 고정폭 해제 */
    .location_sect .airport_foot { width: auto; margin-inline-end: var(--inPd); }


    .tech_sect .tech_acc .t_img img { width: 40rem; inset-inline-start: 50%; transform: translateX(-50%);}
    .motion_sect .fill_txt {font-size: 9rem;}
    .ba_sect .ba_slider .swiper-slide-active .ba_card .ba_img .chip {font-size: var(--p8);}


    .consult_sect .consult_panel .c_form {width: 70rem;}

    .kv_intro p > span {display: inline;}

    .location_sect .airport .sect_tit {font-size: var(--h4);}
    

    .ba_slider {width: calc(100% + var(--inPd) * 2 ); margin-inline-start: calc(var(--inPd) * -1); margin-inline-end: calc(var(--inPd) * -1); overflow: hidden;padding-inline: var(--inPd);}
    .ba_slider .swiper-container {overflow: visible;}





    /* 12401 */


}


@media screen and (max-width: 1040px) {
    .kv_intro p {font-size: var(--h3);}

    .consult_sect .consult_panel .c_form {width: 55%;}

    .cost_sect .cost_graph_full {width: 140%; height: auto; margin-left: -20%;}

    .cost_sect .graph {margin-top: -20rem;}
    .cost_sect .cost_graph {aspect-ratio: 2560 / 2228;}
    .cost_sect .cost_graph_box {min-width: 25rem;}
    .cost_sect .cost_graph_card .cost_graph_box .cost_graph_country span {font-size: var(--p6);}
    .cost_sect .cost_graph_card .cost_graph_box .cost_graph_country {font-size: var(--p2);}
    .cost_sect .cost_graph_card .cost_graph_box dd {font-size: var(--p2);}
    .cost_sect .cost_graph_card .cost_graph_box dl {align-items: flex-start;}
    .cost_sect .cost_graph_card .cost_graph_box dl > div + div {margin-top: 10px;}

    .cost_sect .cost_graph_card.cost_graph_heal {left: 78%; top: 75%;}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_box {width: 42rem;}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save {bottom: calc(100% + 14rem);}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save .cost_graph_percent {font-size: 12rem;}
    
    .cost_sect .cost_graph_card.cost_graph_usa {left: 15%;top: 52%;}
    .cost_sect .cost_graph_card.cost_graph_canada {top: 75%; left: 33%;}

    .price_sect {margin-top: var(--pd1);}

    .doctor_sect .doctor_stage {height: 90rem;}
    .doctor_sect .doctor_stage .d_quote {font-size: var(--h5);}
    .doctor_sect .doctor_stage .doctorSwiper .d_photo {inset-inline-start: 55%;}
    .doctor_sect .doctor_stage .d_panel {width: 38rem;}
    .doctor_sect .doctor_stage .d_panel .d_info .name {font-size: var(--h6); margin-top: 2.5rem;}
    .doctor_sect .doctor_stage .d_panel .d_info ul li {font-size: var(--p6);}
    .doctor_sect .doctor_stage .d_panel .d_info .chip {font-size: var(--p6); padding: 0.4em 0.9em;}

    .frac_num .cur {font-size: var(--h5); margin-bottom: 2.5rem;}
    .frac_num .total {font-size: var(--h8);}

    .treat_sect .treat_list {gap: 20px;}
    .treat_sect .treat_list .t_txt {margin-top: 30px;}
    .treat_sect .treat_list .t_txt .cate {font-size: var(--p6);}
    .treat_sect .treat_list .t_txt .tit {font-size: var(--h8);}
    


    .price_sect .price_list {grid-template-columns: repeat(2,minmax(0,1fr));}

    .stories_sect .stories_slider .story_card .v_txt .name {font-size: var(--h8);}


    .motion_sect:before {background: radial-gradient(circle 72rem at calc(123% - 30rem) calc(40% + 50rem), rgba(255,94,16,0.95) 0%, rgba(255,94,16,0.6) 30%, rgba(255,94,16,0.25) 60%, rgba(255,94,16,0) 100%);}
    .kv_intro .kv_smile {width:50%; height: 30rem;}
    .kv_intro .line{height: 30rem;}

    
    /* 04 무료 상담 — 2열(문구 | 폼) → 1열, 큰 모서리 연출 해제, 스마일은 제목 아래 흐름 배치 */
    .consult_sect .consult_panel, .consult_sect .consult_panel.active { flex-direction: column; gap: 3rem; padding:20px 15px ; border-radius: 3rem; }
    .consult_sect .consult_panel .c_smile { position: static; width: 20rem; margin-top: 3rem; }
    .consult_sect .consult_panel .c_form { width: 100%; padding: 10px; border-radius: 2rem; }



    .motion_sect .fill_txt {font-size: 7vw;}


    .tech_sect .tech_acc {height: 80rem;}
    .tech_sect .tech_acc > li.active,
    .tech_sect .tech_acc > li {flex-basis: 45rem; border-radius: 60rem;}
    .tech_sect .tech_acc > li.active::before,
    .tech_sect .tech_acc > li::before {opacity: 1;}
    .tech_sect .tech_acc > li .t_cont,
    .tech_sect .tech_acc > li.active .t_cont {opacity: 1;transform: translateX(-50%) translateY(0); width: 100%; padding: 0 20px; pointer-events: all;}
    .tech_sect .tech_acc > li .v_name,
    .tech_sect .tech_acc > li.active .v_name {opacity: 0;}
    .tech_sect .tech_acc > li .t_img img,
    .tech_sect .tech_acc > li.active .t_img img {inset-inline-start: 50%;width: 45rem;transform: translateX(-50%);}


    .tech_sect .tech_acc .t_cont .tit {padding: 0;}


    .tech_sect .tech_viewport {width: calc(100% + var(--inPd) * 2); margin-inline-start: calc(var(--inPd) * -1); padding: 0 var(--inPd);}
    .tech_sect .tech_acc .t_cont .tit {font-size: var(--h6);}
    .tech_sect .tech_acc .t_cont .txt {padding: 0;}

    .journey_sect {padding-top: var(--pd4);}


    


    .ba_sect .ba_slider .ba_card .ba_img .chip {font-size: 10px;}




    

}



@media screen and (max-width: 768px) {
    .sect_tit_box .sect_tit, .sect_tit_box .sect_desc { overflow-wrap: anywhere; }   /* 2026-09-16: ru 'СТОМАТОЛОГИЧЕСКИЕ' 같은 긴 단어가 375 에서 가로 넘침을 만들지 않게 */
    :root { --mainTit: var(--h1); }

    .paging .btns .circle_btn { width: 6rem; height: 6rem; }

    .more_btn{font-size: var(--p6);}
    .sect_tit_box .sect_desc {font-size: var(--p3);}


    /* 01 KV — 제목은 단어 단위 줄바꿈(.scatter_word), 인트로 라인·여백 축소 */
    .kv_visual { height: calc(100vh - var(--hdH)); height: calc(100svh - var(--hdH)); min-height: 50rem; border-radius: 20px 20px 0 0; }
    .kv_visual .kvSwiper .kv_txt { padding: 0 var(--inPd); }
    .kv_visual .kvSwiper .kv_txt .kv_label {font-size: var(--p1);}
    .lang-ar .kv_visual .kvSwiper .kv_txt .kv_tit,
    .kv_visual .kvSwiper .kv_txt .kv_tit { font-size: var(--h1);}
    .kv_visual .kvSwiper .kv_txt .kv_tit .anim_scatter_text, .kv_visual .kvSwiper .kv_txt .kv_tit .scatter_line { display: inline; white-space: normal; }
    .kv_visual .kvSwiper .kv_txt .kv_tit .scatter_word { display: inline-block;}
    
    .kv_visual .kv_paging { bottom: 3rem; gap: 2rem; }
    .kv_intro { padding: var(--pd4) var(--inPd) var(--pd4); border-radius: 0 0 2rem 2rem; }
    .kv_intro.active { border-end-start-radius: 20rem; }
    .kv_intro .kv_smile { width: 50%; height: 10rem; }
    .kv_intro .line { height: 25rem; }
    .kv_intro p { margin-top: 3rem; font-size: var(--h4); }

    /* 02 비용 비교 — 절대 배치 해제: 그래프 → USA → Canada → 76% → HEAL 카드 세로 스택(카드는 국가 | 금액 한 줄형) */
    .cost_sect .cost_graph_card .cost_graph_box .cost_graph_country {font-size: var(--p3);}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_box {padding: 15px;}
    .cost_sect .cost_graph_card .cost_graph_box dd {font-size: var(--p3);}
    .cost_sect .cost_graph_card .cost_graph_box .cost_graph_country span {font-size: 10px;}











    /* 03 가격 — 4열 → 2열, 카드 내부 간격 축소 */
    .price_sect .price_list { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .price_sect .price_list > li { padding: 4rem 2.5rem; border-radius: 2rem; }

    .price_sect .price_list .p_price { margin-top: 2rem; font-size: var(--h3); }
    .price_sect .price_list .p_feat { margin-top: 3.5rem; }
    .price_sect .price_list .p_btn { margin-top: 4rem; font-size: var(--p6);}
    



    /* 05 환자 스토리 — 좌측 블리드 해제(첫 카드가 잘리지 않게) + 컨테이너 시작 패딩, 카드 폭 지정(slidesPerView auto) */
    .stories_sect .stories_slider { width: 100%; margin-inline-start: 0; }
    .stories_sect .stories_slider .storySwiper { padding-inline-start: var(--inPd); }
    .stories_sect .stories_slider .item { width: 30%; padding-bottom: 6rem; }
    .stories_sect .stories_slider .item.is-story-offset { transform: translateY(6rem); }
    .stories_sect .stories_slider .story_card .v_txt { padding: 0 2rem; }
    .stories_sect .stories_slider .story_card .v_txt .play { width: 5rem;}

    /* 06 모션 텍스트 */
    .motion_sect { padding-bottom: 0; }
    .motion_sect:before { background: radial-gradient(circle 72rem at calc(130% - 30rem) calc(40% + 50rem), rgba(255,94,16,0.95) 0%, rgba(255,94,16,0.6) 30%, rgba(255,94,16,0.25) 60%, rgba(255,94,16,0) 100%); }
    .motion_sect .fill_txt { font-size: 8rem; }
    

    /* 07 Before & After — 확대·계단 오프셋 연출 해제, 카드 폭 지정(slidesPerView auto), 터치 타깃 확대 */
    .ba_sect .ba_ctrl .ba_tabs {gap: 0;}
    .ba_sect .ba_ctrl .ba_tabs button { min-width: 0; padding: 0.4em 1.4em; font-size: var(--p4); }
    .ba_sect .ba_slider .swiper-slide { width: 44%; }
    .ba_sect .ba_slider .ba_card, .ba_sect .ba_slider .swiper-slide-active .ba_card, .ba_sect .ba_slider .swiper-slide-duplicate-active .ba_card { width: 100%; height: auto; }
    .ba_sect .ba_slider .swiper-slide-active + .swiper-slide, .ba_sect .ba_slider .swiper-slide-duplicate-active + .swiper-slide, .ba_sect .ba_slider .swiper-slide-active + .swiper-slide + .swiper-slide, .ba_sect .ba_slider .swiper-slide-duplicate-active + .swiper-slide + .swiper-slide, .ba_sect .ba_slider .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide, .ba_sect .ba_slider .swiper-slide-duplicate-active + .swiper-slide + .swiper-slide + .swiper-slide { transform: none; }
    .ba_sect .ba_slider .swiper-slide-active .ba_txt { margin-top: 1.5rem; }
    .ba_sect .ba_slider .ba_card .ba_img .handle { width: 6rem; height: 6rem; }
    .ba_sect .ba_slider .ba_card .ba_img .chip, .ba_sect .ba_slider .swiper-slide-active .ba_card .ba_img .chip { bottom: 1.5rem; font-size: var(--p6); }
    .ba_sect .ba_slider .ba_card .ba_txt .cate {font-size: var(--p8);}
    .ba_sect .ba_slider .swiper-slide-active .ba_card .ba_img .chip.before { left: 1.5rem; }
    .ba_sect .ba_slider .swiper-slide-active .ba_card .ba_img .chip.after { right: 1.5rem; }

    /* 09 의료진 — 절대 배치 스테이지 해제: 인용문 → 사진(하단 페이드 마스크) → 페이징+정보 카드 세로 흐름, 미리보기 썸네일은 숨김(이전/다음 버튼으로 탐색) */
    .doctor_sect { padding-top: var(--pd2); }
    .doctor_sect .sect_tit_box  {text-align: center;}
    .doctor_sect .sect_head { flex-direction: column; align-items: center; } /* 제목이 가운데 정렬이라 더보기도 제목 아래 가운데 */
    .doctor_sect .sect_head .more_btn { margin-top: 2rem; }
    .doctor_sect .doctor_stage .d_quote {display: flex; justify-content: center;}
    .doctor_sect .doctor_stage .d_quote .d_quote_line_mask {display: inline;}
    .doctor_sect .doctor_stage .d_quote .d_quote_line {
    display: inline;
    background: var(--point01);
    background-size: 100% 100%;
    background-position: center;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
    .doctor_sect .doctor_stage .d_quote .d_quote_txt {flex: 0 1 auto; min-width: 0;} /* 내용 폭에 맞춰 가운데 정렬되되, 넘치면 줄어들며 줄바꿈(flex: none 은 shrink 0 이라 한 줄로 삐져나감) */
    

    .doctor_sect .doctor_stage { height: auto; margin-top: var(--contMt1); }
    .doctor_sect .doctor_stage .doctorSwiper { position: relative; height: auto; }
    .doctor_sect .doctor_stage .doctorSwiper .swiper-slide { display: flex; flex-direction: column; align-items: center; height: auto;}
    .doctor_sect .doctor_stage .d_quote { position: relative; inset: auto; width: 100%; max-width: 50rem; margin: 0 auto; font-size: var(--h5); gap: 3px;}
    .doctor_sect .doctor_stage .doctorSwiper .d_photo,
    .doctor_sect.active .doctor_stage .doctorSwiper .swiper-slide-active .d_photo { position: relative; inset: auto; width: auto; height: max(56rem, 55vw); aspect-ratio: 2 / 3; margin-top: 3rem; transform: none; -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); margin-top: auto;}
    .doctor_sect .doctor_stage .d_grad { display: none; }
    /* 601~768: 미리보기 썸네일을 활성 사진 양옆에 — 트랙을 스테이지 전폭으로 펴고 두 슬라이드의 썸네일을 각각 바깥쪽 가장자리로 밀어 좌·우에 하나씩. 600 이하는 숨김(아래 블록) */
    .doctor_sect .d_side { width: 100%; inset-inline-end: 0; top: 45%; bottom: auto; transform: translateY(-50%); }
    .doctor_sect .d_side:before { display: none; }
    .doctor_sect .d_side .d_side_item { width: 24vw; }
    .doctor_sect .d_side .swiper-slide-active .d_side_item { margin-inline-end: auto; }
    .doctor_sect .d_side .swiper-slide-next .d_side_item { margin-inline-start: auto; }
    .doctor_sect .d_side .d_side_item img { height: 30rem; }
    .doctor_sect .d_side .swiper-wrapper { transition-duration: 0ms !important; } /* 양옆 배치는 트랙을 밀지 않는다(밀면 썸네일이 가운데 사진 위를 지나간다) — 교체는 JS 가 즉시 + 페이드 */
    .doctor_sect .d_side.is_swap .swiper-slide { animation: dSideSwap 0.45s ease both; }
    .doctor_sect .doctor_stage .d_panel { position: relative; inset: auto; width: 100%; margin-top: -11rem; height: 48rem;}
    .doctor_sect .doctor_stage .d_panel .d_info { height: auto; margin-top: 1.5rem; padding: 3rem 2.5rem; }
    .doctor_sect .doctor_stage .d_panel .d_info .name { margin-top: 2rem; }
    .why_sect { margin-top: var(--pd2); padding: var(--pd2) 0; }
    .why_sect .why_stats { flex-direction: column; align-items: stretch; gap: 4rem; margin-top: var(--contMt2); }
    .why_sect .why_stats .s_list { flex: 0 0 auto; width: 100%; }
    .why_sect .why_stats .s_list li { gap: 2rem; padding-bottom: 2rem; }
    .why_sect .why_stats .s_list li + li { margin-top: 3rem; }
    .why_sect .why_stats .s_list .k { width: auto; }
    .why_sect .why_cards { margin-top: var(--contMt2); }
    .why_sect .why_cards .swiper-slide { width: 84vw; }
    .why_sect .why_cards .why_card { border-start-start-radius: 2rem; border-end-end-radius: 2rem; border-start-end-radius: 10rem; border-end-start-radius: 10rem; }

    /* 11 진료 — 태블릿은 4열 유지(간격 축소), 600 이하 2열 */
    .treat_sect { padding: var(--pd2) 0; }
    .treat_sect .treat_list { gap: 2rem; margin-top: var(--contMt3); }
    .treat_sect .treat_list > li:nth-child(even) { margin-top: 5rem; }
    .treat_sect .treat_list .t_txt .cate {font-size: var(--p8);}
    .treat_sect .treat_list .t_txt { margin-top: 2.5rem; }
    .treat_sect .treat_list .t_txt .tit {font-size: var(--p1);}
    

    /* 12 장비 — 가로 아코디언 → 세로 아코디언(닫힘: 이름 + 작은 장비 이미지 / 열림: 스튜디오 배경 + 제목·설명·이미지) */
    .tech_sect { padding-bottom: var(--pd2); }
    

    /* 13 방문 여정 — 카드 래퍼 여백·모서리 축소, 제목 폭 비례 */
    .journey_sect { padding-top: var(--pd2); padding-bottom: 4rem; }
    .journey_sect .journey_head .smile { width: 16rem; }
    .journey_sect .journey_head .j_tit { font-size: 11vw; }
    .journey_sect .cont_wrap, .journey_sect .cont_wrap.active { margin: -2rem var(--inPd) 0; max-height: none; border-radius: 3rem; }
    .journey_sect .cont .sect_tit_box .tit { font-size: var(--h6); }
    .journey_sect .cont .journey_cards { gap: 15px; margin-top: var(--contMt3); }
    .journey_sect .cont .journey_cards > li { padding: 3rem 2.5rem; border-radius: 1.5rem; flex-basis: 40%;}
    .journey_sect .cont .journey_cards > li .num { font-size: 5rem; }


    /* 14 오시는길 — 지도 위 정보 카드(absolute) → 지도 아래 세로 스택, 지도 중심 보정 해제 */
    .location_sect { padding: var(--pd2) 0; }
    .location_sect .airport { margin-top: var(--contMt1); }
    .location_sect .airport_list { margin-top: var(--contMt4); }
    .location_sect .airport_list .air_card .card .txt_box { gap: 1.5rem; padding: 0 2.5rem 2.5rem; }
    .location_sect .airport_list .air_card .card .txt_box .tit { font-size: var(--h6); }
    .location_sect .airport_list .air_card .txt { margin-top: 1.5rem; font-size: var(--p2); }
    .location_sect .airport_foot { margin-top: var(--contMt4); }


    .frac_num .cur {font-size: var(--p1);}
    .frac_num .bar {width: 2.5rem; height: 3.8rem;}
    .frac_num .total {font-size: var(--p2);}



    .why_sect .why_stats .s_list .k .desc {font-size: var(--p7);}


    /* 7681 */



}

@media screen and (max-width: 600px) {



    .cost_sect .cost_graph_full {width: 100%; margin-left: 0;}
    .cost_sect .cost_graph {aspect-ratio: unset; position: relative;}
    .cost_sect .graph {margin-top: 0px; padding-bottom: 130px;}
    .cost_sect .cost_graph_visual {position: relative;}

    .cost_sect .cost_graph_card.cost_graph_canada {top: auto;left: 50%;bottom: 59%;}
    .cost_sect .cost_graph_card.cost_graph_usa {left: 24%;top: auto;bottom: 78%;}
    .cost_sect .cost_graph_card .cost_graph_box dt {font-size: 10px;}

    .cost_sect .cost_graph_card.cost_graph_heal {bottom: 2%; left: 62%; top: auto;}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_box {width: 250px;}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_box dl {margin-top: 15px;}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save {top: -20px; bottom: auto; left: auto; right: 0 ; transform: translate(0%,-100%);}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save .arr svg {height: 5rem;}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save .cost_graph_percent {font-size: 9rem;}
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save .cost_graph_sub {font-size: var(--p6);}
    .cost_sect.active .cost_graph_card.cost_graph_heal .cost_graph_save {transform: translate(0%,-100%);}

    


    .doctor_sect .d_side { display: none; } /* 09 의료진 — 600 이하는 미리보기 썸네일 숨김(이전/다음 버튼만) */
    /* 03 가격 — 1열 */
    .price_sect .price_list { grid-template-columns: 1fr; }

    .motion_sect:before {background: radial-gradient(circle 48rem at calc(130% - 20rem) calc(40% + 40rem), rgba(255,94,16,0.95) 0%, rgba(255,94,16,0.6) 30%, rgba(255,94,16,0.25) 60%, rgba(255,94,16,0) 100%);}

    /* 05·07 슬라이더 카드 폭(다음 카드가 살짝 보이는 폭) */
    .stories_sect .stories_slider .item { width: 52%; }
    .ba_sect .ba_ctrl { flex-wrap: wrap; gap: 1.5rem; }
    .ba_sect .ba_ctrl .ba_tabs { flex-wrap: wrap; }
    .ba_sect .ba_slider .swiper-slide { width: 72%; }

    /* 06 모션 텍스트 */
    .motion_sect .fill_txt { font-size: var(--h2); }

    /* 11 진료 — 4열 → 2열(짝수 카드 계단 유지) */
    .treat_sect .treat_list { flex-wrap: wrap; gap: 0rem 2rem; }
    .treat_sect .treat_list > li { flex: 0 0 calc(50% - 1rem); }

    /* 13 방문 여정 — 카드 1열 */
    .journey_sect .cont .journey_cards { grid-template-columns: 1fr; }
    .journey_sect .cont .journey_cards > li {flex-basis: 80%;}

    /* 14 오시는길 — 정보 카드 1열, 공항 카드 문구 세로 */
    .location_sect .airport_list .air_card .card .txt_box { flex-direction: column; align-items: flex-start; gap: 0.5rem; }

    .kv_intro {border-radius: 0 0 15px 15px; padding-top: 30px;}
    .kv_intro.active {border-end-start-radius: 60px;}
    .kv_intro .line {height: 18rem;}
    .kv_intro .kv_smile {height: 0;}
    .kv_intro p {font-size: var(--h8);}

    .sect_head {flex-direction: column; align-items: flex-start; }
    .sect_head .more_btn {margin-top: 20px;}

    .treat_sect .treat_list .t_txt .tit {font-size: var(--p2);}

    .kv_visual .kvSwiper .kv_txt .kv_label {font-size: var(--p2);}
    .lang-ar .kv_visual .kvSwiper .kv_txt .kv_tit,
    .kv_visual .kvSwiper .kv_txt .kv_tit { font-size: var(--h2);}
    

}

/* ===== RTL(ar) 보정 — body.is-rtl 범위. 물리 transform / 그라데이션 / 숫자 표기만 뒤집는다 (구조는 논리 속성으로 자동 미러) ===== */
/* B&A 슬라이더: 활성 카드가 130% 로 넓어지는 방향(inline-end = 왼쪽)으로 이웃 슬라이드를 밀어낸다 */
@media screen and (min-width: 769px) { /* 768 이하는 LTR 처럼 transform:none(카드 펼침 없음) — 이 RTL 규칙이 특이도로 모바일 리셋을 이겨 간격이 들쭉날쭉했음 */
body.is-rtl .ba_sect .ba_slider .swiper-slide-active + .swiper-slide,
body.is-rtl .ba_sect .ba_slider .swiper-slide-duplicate-active + .swiper-slide { transform: translateX(-30%); }
body.is-rtl .ba_sect .ba_slider .swiper-slide-active + .swiper-slide + .swiper-slide,
body.is-rtl .ba_sect .ba_slider .swiper-slide-duplicate-active + .swiper-slide + .swiper-slide { transform: translateX(-20%); }
body.is-rtl .ba_sect .ba_slider .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide,
body.is-rtl .ba_sect .ba_slider .swiper-slide-duplicate-active + .swiper-slide + .swiper-slide + .swiper-slide { transform: translateX(-10%); }
}
/* 의료진 스테이지: 사진 중심 보정(translateX -50% → +50%), 사이드 사진 페이드 방향 */
body.is-rtl .doctor_sect .doctor_stage .doctorSwiper .d_photo { transform: translateX(calc(50% - 8rem)) scale(0.97); }
body.is-rtl .doctor_sect.active .doctor_stage .doctorSwiper .swiper-slide-active .d_photo { transform: translateX(50%) scale(1); }
body.is-rtl .doctor_sect .d_side:before { background: linear-gradient(to right, rgba(255,255,255,0) 0%, #fff 100%); }
/* 가격·비용 숫자는 LTR 표기 유지 ("$ 4,500~" 가 "~4,500 $" 로 재배열되지 않게) */
body.is-rtl .why_sect .why_stats .s_list .v,
body.is-rtl .cost_sect .cost_graph_card dd,
body.is-rtl .price_list .p_price { direction: ltr; unicode-bidi: isolate; text-align: right; }
body.is-rtl .doctor_sect .doctor_stage .d_quote { transform: translateX(4rem); } /* 인용문 등장: 시작(오른쪽)쪽에서 밀려 들어오게 */
body.is-rtl .doctor_sect .doctor_stage .d_quote .q_mark { transform: scaleX(-1); }
@media screen and (min-width: 769px) { body.is-rtl .doctor_sect .doctor_stage .d_quote .d_quote_line { background-image: linear-gradient(248deg, var(--point01) 21.39%, #E8B196 78.61%); } } /* 인용문 그라데이션 미러(112deg → 248deg): 여는 따옴표(주황)쪽=시작(오른쪽)부터 주황. 768 이하는 단색이라 제외 */ /* “ ” 는 유니코드상 RTL 에서 안 뒤집힘 → 여는/닫는 따옴표 모양을 거울 대칭 */
body.is-rtl .frac_num { direction: ltr; } /* 슬라이드 분수(1 ⁄ N): 사선 svg 가 물리 방향이라 숫자 순서도 LTR 고정 — 블록 위치는 부모 정렬 그대로 */
/* 진행 방향 화살표 아이콘 반전 */
body.is-rtl .location_sect .airport_foot .bar .swiper-pagination-progressbar-fill,
body.is-rtl .tech_sect .tech_progress .fill { transform-origin: right top; }
body.is-rtl .paging .btns .circle_btn svg,
body.is-rtl .more_btn svg,
body.is-rtl .price_list .p_btn .arr_ico { transform: scaleX(-1); }
body.is-rtl .why_sect .why_pagination .swiper-pagination-bullet-active::after { transform-origin: right center; } /* WHY 점 막대 채움 방향(시작 쪽부터) */
body.is-rtl .kv_intro .kv_smile svg,
body.is-rtl .journey_sect .journey_head .smile svg,
body.is-rtl .consult_sect .consult_panel .c_smile svg { transform: scaleX(-1); } /* 스마일 미러 */
body.is-rtl .kv_intro .kv_smile { clip-path: inset(-50rem 0 -50rem 100%); } /* 그리기 와이프도 시작(오른쪽)부터 — 와이프는 감싸는 div 에 있음 */
body.is-rtl .kv_intro.active .kv_smile { clip-path: inset(-50rem 0 -50rem 0); }
@media screen and (min-width: 1241px) {
    body.is-rtl .journey_sect .journey_head .smile, body.is-rtl .consult_sect .consult_panel .c_smile { clip-path: inset(0 0 0 100%); }
    body.is-rtl .journey_sect.active .journey_head .smile, body.is-rtl .consult_sect .consult_panel.active .c_smile { clip-path: inset(0); }
}
body.is-rtl .tech_sect .tech_acc .t_img img { transform: translateX(50%); } /* 장비 이미지 가운데 정렬(inset-inline-start:50% = RTL 에선 right:50%) — 펼침/접힘 모두 */
body.is-rtl .tech_sect .tech_acc .v_name { left: auto; right: 5rem; } /* vertical-rl 이라 inset-inline-* 가 세로축이 됨 → 물리 속성으로 미러 */
body.is-rtl .motion_sect:before { transform: scaleX(-1); } /* 주황 번짐을 왼쪽(끝 쪽)으로 — 예전 inset-inline-end 와 같은 쪽 */
body.is-rtl .motion_sect .fill_txt .txt { background-position-x: -100%; } /* 글자 채움: 반복 타일을 -100% 에서 0% 로 밀어 어두운 색이 오른쪽(시작)부터 들어오게 — 1.php 는 0% 로만 트윈 */
body.is-rtl .motion_sect .fill_txt .txt.done { background-position-x: 0%; } /* 펼친 장비 이미지 가운데 정렬(inset-inline-start:50% 기준) */


/* ===== ≤1240 스크롤 리빌 해제(2026-09-23) — 옵저버(.active)로 등장시키던 요소를 처음부터 보이는 상태로 둔다. 태블릿·모바일은 연출 없이 즉시 노출.
   파일 끝에 두는 이유: 위의 ≤768·RTL 규칙보다 뒤에 와야 같은 특이성에서 이긴다. JS 가 인라인으로 그리는 것(KV 인트로 .line svg, 카운트업 숫자)은 여기서 못 막는다 ===== */
@media screen and (max-width: 1240px) {
    .rv { opacity: 1; transform: none; }

    /* 01 KV 인트로 — 스마일 클립·문구·라운드를 최종 상태로 */
    /* .kv_intro .kv_smile { clip-path: none; transition: none; } */
    .kv_intro .kv_intro_word { opacity: 1; transform: none; filter: none; transition: none; }

    /* 02 비용 비교 — 카드·절감 표시·SVG 그래프 파츠를 완성 상태로, 순차 연출 제거 (곡선은 JS 인라인 dashoffset 이라 !important) */
    .cost_sect .cost_graph_card { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: none; }
    .cost_sect .cost_graph_card.cost_graph_heal .cost_graph_save { opacity: 1; visibility: visible; transform: none; transition: none; }
    .cost_sect .cost_graph_visual { clip-path: none; -webkit-clip-path: none; opacity: 1; }
    .cost_sect .cg_curve, .cost_sect.active .cg_curve { animation: none; stroke-dashoffset: 0 !important; }
    .cost_sect .cg_fill, .cost_sect .cg_dot, .cost_sect .cg_flag,
    .cost_sect.active .cg_fill, .cost_sect.active .cg_dot, .cost_sect.active .cg_flag { animation: none; opacity: 1; transform: none; }
    .cost_sect .cg_stem, .cost_sect.active .cg_stem { animation: none; transform: scaleY(1); }
    .cost_sect.active .cost_graph_save .cost_graph_percent, .cost_sect.active .cost_graph_save .arr svg, .cost_sect.active .cost_graph_heal .cost_graph_box { animation: none; }

    /* 03 가격 · 04 상담 · 05 스토리 · 06 모션 배경 · 07 B&A · 08 리뷰 */
    .price_sect .price_list > li { opacity: 1; transform: none; transition: none; }
    .consult_sect { opacity: 1; transform: none; transition: none; }
    .consult_sect .consult_panel .c_smile { clip-path: none; transition: none; }
    .stories_sect .stories_slider { opacity: 1; transform: none; transition: none; }
    .motion_sect:before { opacity: 0.5; }
    .ba_sect .ba_ctrl, .ba_sect .ba_slider { opacity: 1; transform: none; transition: none; }
    .review_sect .review_foot { opacity: 1; transform: none; transition: none; }

    /* 09 의료진 — 섹션 .active 조건을 빼고 슬라이더 활성 슬라이드 조건만 남긴다 */
    .doctor_sect .doctor_stage .doctorSwiper .swiper-slide-active .d_quote { opacity: 1; transform: none; transition: none; }
    .doctor_sect .doctor_stage .doctorSwiper .swiper-slide-active .d_quote .d_quote_line,
    .doctor_sect.active .doctor_stage .doctorSwiper .swiper-slide-active .d_quote .d_quote_line { animation: none; opacity: 1; transform: none; filter: none; }
    .doctor_sect .doctor_stage .doctorSwiper .swiper-slide-active .d_photo { opacity: 1; transform: translateX(-50%) scale(1); transition: none; }
    body.is-rtl .doctor_sect .doctor_stage .doctorSwiper .swiper-slide-active .d_photo { transform: translateX(50%) scale(1); }
    .doctor_sect .doctor_stage .d_panel .d_info { opacity: 1; transform: none; transition: none; }
    .doctor_sect.active .doctor_stage .d_panel .d_info.is-info-enter { animation: none; }

    /* 10 WHY · 11 진료(타원은 처음부터 둥글게) · 13 여정 · 14 오시는길 */
    .why_sect .why_stats, .why_sect .why_cards { opacity: 1; transform: none; transition: none; }
    .treat_sect .treat_list > li { opacity: 1; transform: none; transition: none; }
    .treat_sect .treat_list .oval { border-radius: 20em; transition: none; }
    .journey_sect:before { clip-path: none; transition: none; }
    .journey_sect .journey_head .smile { clip-path: none; transition: none; }
    .journey_sect .journey_head .j_tit, .journey_sect.active .journey_head .j_tit { animation: none; opacity: 1; transform: none; filter: none; clip-path: none; }
    .journey_sect .cont_wrap { opacity: 1; transform: none; border-radius: 5rem; border-end-start-radius: 24rem; transition: none; }
    .journey_sect .cont .sect_tit_box .tit { opacity: 1; transform: none; transition: none; }
    .journey_sect .cont .journey_cards > li { opacity: 1; transform: none; filter: none; transition: background-color 0.4s ease, color 0.4s ease; }
    .location_sect .airport_list { opacity: 1; transform: none; transition: none; }
}

/* ===== ≤768 RTL 의료진 사진 정렬(2026-09-28) — 세로 흐름에서는 사진이 relative 라 RTL 용 translateX(50%)(위 RTL 블록·≤1240 리빌 블록)가 사진을 오른쪽으로 밀어 버린다 → 뒤에서 되돌린다 ===== */
@media screen and (max-width: 768px) {
    body.is-rtl .doctor_sect .doctor_stage .doctorSwiper .d_photo,
    body.is-rtl .doctor_sect .doctor_stage .doctorSwiper .swiper-slide-active .d_photo,
    body.is-rtl .doctor_sect.active .doctor_stage .doctorSwiper .swiper-slide-active .d_photo { transform: none; }
}