/* 다국어(2026-10-22) — 언어 고르기(국기 + 이름, 머리 오른쪽)와 언어별 글 흐름. 짝: assets/js/i18n.js */
.lang-pick{position:relative; flex:none; display:inline-flex; margin-right:14px; font-size:14px; line-height:1; z-index:60}
/* 자리: 맨 위 카키 띠 오른쪽(모든 폭) — 머리 메뉴 줄(로고 · 메뉴 · 전화 · 예약)은 한국어에서 예전과 똑같이 둠 */
.site-header .lang-pick{position:absolute; top:calc((var(--topbar-h, 32px) - 26px) / 2); right:var(--gutter, 24px); margin:0; font-size:13px}
.site-header .lang-pick__btn{min-height:26px; padding:3px 11px; gap:6px; border-color:rgba(255,255,255,.5); background:transparent; color:#fff}
.site-header .lang-pick.is-open .lang-pick__btn, .site-header .lang-pick__btn:hover{background:rgba(255,255,255,.14); border-color:#fff}
.site-header .lang-pick__btn img{width:16px; height:16px}
.site-header .lang-pick__list{top:calc(100% + 6px); right:0}
html:not(#_):not(#_) .site-header .topbar{padding-inline:150px}
.lang-pick__btn{display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:7px 12px; border:1px solid rgba(41,41,36,.28); border-radius:999px;
  background:rgba(255,255,255,.72); color:#292924; font:inherit; font-weight:500; cursor:pointer; white-space:nowrap}
.lang-pick__btn:hover,.lang-pick.is-open .lang-pick__btn{border-color:#55584c; background:#fff}
.lang-pick__btn img,.lang-pick__list img{width:20px; height:20px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.1); object-fit:cover; flex:none}   /* 10-23 동그란 국기(캡처) */
.lang-pick__caret{width:7px; height:7px; margin:-3px 0 0 2px; border:solid currentColor; border-width:0 1.6px 1.6px 0; transform:rotate(45deg); transition:transform .2s}
.lang-pick.is-open .lang-pick__caret{transform:rotate(225deg); margin-top:3px}
.lang-pick__list{position:absolute; top:calc(100% + 8px); right:0; min-width:210px; max-height:min(70vh,520px); overflow:auto; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid rgba(41,41,36,.12); border-radius:14px; box-shadow:0 18px 40px rgba(20,20,16,.16); display:none}
.lang-pick.is-open .lang-pick__list{display:block}
.lang-pick__list li{margin:0; padding:0; list-style:none}
.lang-pick__list a{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:9px; color:#292924; font-size:14.5px; font-weight:500; text-decoration:none; white-space:nowrap}
.lang-pick__list a:hover{background:#f3f0ea}
.lang-pick__list a.is-on{background:#eef0e8; color:#3f4236; font-weight:700}
@media (max-width:1180px){ .lang-pick{margin-right:10px} }
@media (max-width:640px){
  .lang-pick{margin-right:8px; font-size:13px}
  .lang-pick__btn{min-height:40px; padding:6px 10px; gap:5px}
  .lang-pick__name{display:none}
  .lang-pick__list{right:-40px; min-width:200px}
}
/* 번역 사전을 받는 동안 한국어가 잠깐 보이지 않게(머리의 작은 스크립트가 html.i18n-wait 를 붙이고 i18n.js 가 뗌, 늦으면 3.5초 뒤 저절로) */
html.i18n-wait body{opacity:0}
/* 중국어 · 일본어 · 태국어는 띄어쓰기로 줄을 나누지 않는다 — 사이트의 한국어용 keep-all 을 풀어 글이 칸 밖으로 넘치지 않게 */
html[data-lang="ja"] body *, html[data-lang="cn"] body *, html[data-lang="tw"] body *, html[data-lang="th"] body *{word-break:normal !important; line-break:auto}
/* 긴 낱말(러시아어 · 몽골어 · 베트남어 · 인도네시아어 · 영어)이 좁은 칸에서 넘치지 않게 */
html[data-lang]:not([data-lang="ko"]) body h1, html[data-lang]:not([data-lang="ko"]) body h2, html[data-lang]:not([data-lang="ko"]) body h3{overflow-wrap:anywhere}
.lang-pick__code{display:none; font-weight:600; letter-spacing:.02em}
.menu-toggle, .nav-cta, .nav-tel{white-space:nowrap}
/* 넓은 화면: 번역된 메뉴 글이 길어 한 줄에 다 들어가게 — 한국어가 아닌 언어만 메뉴 글씨 · 간격을 조금 줄이고, 1700 아래에서는 전화번호를 숨김(아래 상담 바 · 메뉴에 있음) */
html[data-lang]:not([data-lang="ko"]) .site-header .nav-top{font-size:16px; padding-inline:clamp(5px,.6vw,11px)}
@media (max-width:1700px){ html[data-lang]:not([data-lang="ko"]) .site-header .nav-tel{display:none} }
/* 태블릿 · 폰(메뉴 단추가 나오는 폭): 언어 고르기는 맨 위 카키 띠 오른쪽에 작게(국기 + 코드) */
@media (max-width:1180px){
  .site-header .lang-pick{position:absolute; top:calc((var(--topbar-h, 30px) - 24px) / 2); right:var(--gutter, 16px); margin:0; font-size:12px}
  .site-header .lang-pick__btn{min-height:24px; padding:2px 8px; gap:5px; border-color:rgba(255,255,255,.5); background:transparent; color:#fff}
  .site-header .lang-pick.is-open .lang-pick__btn, .site-header .lang-pick__btn:hover{background:rgba(255,255,255,.14); border-color:#fff}
  .site-header .lang-pick__btn img{width:16px; height:16px}
  .site-header .lang-pick__name{display:none}
  .site-header .lang-pick__code{display:inline}
  .site-header .lang-pick__list{top:calc(100% + 6px); right:0}
  html:not(#_):not(#_) .site-header .topbar{padding-right:92px; padding-left:92px}
  .site-header .topbar__in{overflow:hidden; text-overflow:ellipsis}
}
/* 1440 이하: 언어 고르기는 국기 + 코드만(한국어 머리도 1200~1366 에서 두 줄이 되지 않게) */
/* 메뉴 글이 길어 한 줄에 안 들어가는 폭에서는 메뉴 단추(서랍 메뉴)로 — 언어마다 잰 폭(hdrcheck.py) */
@media (max-width:1440px){
  html[data-lang="en"] .site-header .nav, html[data-lang="vi"] .site-header .nav, html[data-lang="mn"] .site-header .nav, html[data-lang="id"] .site-header .nav,
  html[data-lang="ar"] .site-header .nav, html[data-lang="th"] .site-header .nav{display:none !important}
  html[data-lang="en"] .site-header .menu-toggle, html[data-lang="vi"] .site-header .menu-toggle, html[data-lang="mn"] .site-header .menu-toggle, html[data-lang="id"] .site-header .menu-toggle,
  html[data-lang="ar"] .site-header .menu-toggle, html[data-lang="th"] .site-header .menu-toggle{display:inline-flex !important}
}
@media (max-width:1600px){ html[data-lang="ru"] .site-header .nav{display:none !important} html[data-lang="ru"] .site-header .menu-toggle{display:inline-flex !important} }
@media (max-width:1280px){ html[data-lang="ja"] .site-header .nav{display:none !important} html[data-lang="ja"] .site-header .menu-toggle{display:inline-flex !important} }
@media (max-width:1180px){ .site-header .topbar__in{display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap} }
/* 넘침 검사(tools/overflow.py) 결과 — 한국어에 맞춰 한 줄로 고정(nowrap)한 제목 · 이끄는 글 · 접이 제목이 번역문에서는 길어 화면 밖으로 나감 → 줄바꿈 허용 */
html[data-lang]:not([data-lang="ko"]) body :is(h1, h2, h3, h4, .j-h2, .j-lead, .j-acc__label, p:not(.topbar__in), li, dt, dd, figcaption){white-space:normal !important}
html[data-lang]:not([data-lang="ko"]) body :is(h1, h2, h3, .j-h2) b{white-space:normal !important}
/* 폰: 맨 위 카키 띠 글은 왼쪽 정렬로 넓게(오른쪽에 언어 단추) — 번역된 병원 이름이 잘리지 않게 */
@media (max-width:640px){
  html[data-lang]:not([data-lang="ko"]):not(#_):not(#_) .site-header .topbar{justify-content:flex-start; padding-left:var(--gutter, 16px)}
  html[data-lang]:not([data-lang="ko"]) .site-header .topbar__in{font-size:11.5px; letter-spacing:0}
}
/* 넘침 검사 2차(8개 언어 · 폰 390, 2026-10-22 19:5x) — 한국어용 한 줄 고정 · 칸 폭 규칙이 긴 번역문을 화면 밖으로 밀어냄 */
/* 바닥글 주소 · 사업자 정보(.foot-legal span 한 칸씩 한 줄 고정) — 몽골어 주소가 화면 밖 6px */
html[data-lang]:not([data-lang="ko"]) .foot-legal span{white-space:normal}
/* 가격표: 머리 칸 · 가격 칸 한 줄 고정을 풀어 표가 칸(352px) 안에 들어가게 — 'KRW 100 000' 은 붙은 칸(nbsp)이라 한 덩어리로 남음 */
html[data-lang]:not([data-lang="ko"]) table.price :is(th, td){white-space:normal !important}
/* 진행 단계 2칸(900 이하): 긴 낱말(러시아어 '…хирургического')이 칸을 넓혀 화면 밖 37px → 칸 폭은 반반 고정, 넘치는 낱말만 나눔 */
@media (max-width:900px){
  html[data-lang]:not([data-lang="ko"]) .j-flow__steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-lang]:not([data-lang="ko"]) .j-flow__steps :is(b, small){overflow-wrap:anywhere; hyphens:auto}
}
/* 번호 목록(.j-numlist) 글 칸이 긴 낱말 때문에 줄어들지 못해 화면 밖 7px(러시아어 고난도 임플란트) */
html[data-lang]:not([data-lang="ko"]) .j-numlist li > p{min-width:0; overflow-wrap:break-word}
/* 가격표(폰): 러시아어 · 스페인어는 긴 낱말(Профессиональное …)과 붙은 금액(KRW 1 500 000) 때문에 세 칸 최소 폭이 칸(352px)보다 넓음 → 글씨 · 칸 여백을 조금 줄이고 낱말 나눔(hyphens) */
@media (max-width:640px){
  html[data-lang]:not([data-lang="ko"]) table.price{font-size:13.5px}
  html[data-lang]:not([data-lang="ko"]) table.price :is(th, td){padding:10px 9px; hyphens:auto}
}
/* 비교표(폰 두 칸 grid): 긴 낱말이 칸을 넓혀 화면 밖 21px(러시아어 가이드 임플란트) → 칸 폭 반반 고정, 넘치는 낱말만 나눔 */
@media (max-width:900px){
  html[data-lang]:not([data-lang="ko"]) .j-table thead tr{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)}
  html[data-lang]:not([data-lang="ko"]) .j-table tbody tr{grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-lang]:not([data-lang="ko"]) .j-table :is(th, td){overflow-wrap:break-word; hyphens:auto}
}
/* 홈 첫 화면(폰): 글 칸(.hs-cap, 머리 아래 250px)은 가운데 정렬이라 번역문이 길면 위로도 넘쳐 영문 작은 줄이 머리 밑에 가려짐(영 · 러 · 몽 · 인니 · 스페인어)
   → 넘칠 때만 위에서부터(safe center), 머리와 16px 띄움 */
@media (max-width:640px){ html[data-lang]:not([data-lang="ko"]) .hero .hs-cap{justify-content:safe center; padding-top:16px} }
/* 작은 폰(높이 760 이하, 아이폰 SE 급): 번역 제목이 33px 네 줄이라 설명이 사진 · 단추 위로 내려감 → 제목 27px · 설명 13px(설명 끝 424 → 327px, 한국어 295px) */
@media (max-width:640px) and (max-height:760px){
  html[data-lang]:not([data-lang="ko"]) .hero .hs-name{font-size:27px}
  html[data-lang]:not([data-lang="ko"]) .hero .hs-copy{font-size:13px; line-height:1.65}
}

/* ── 아랍어(ar, 2026-10-23 스페인어 대신) ─────────────────────────────────────────────
   글꼴: 사이트 글꼴(Pretendard · Noto Sans/Serif KR · Playfair …)에는 아랍 글자가 없다 → 같은 이름에 아랍 글자 범위만 Noto Sans/Naskh Arabic(OFL, assets/fonts/ar)을 덧붙임.
   unicode-range 라 아랍 글자가 있는 화면에서만 받는다(다른 언어 화면은 그대로). 고딕 자리 = Noto Sans Arabic, 명조 · 세리프 자리 = Noto Naskh Arabic. */
@font-face{font-family:'Pretendard Variable'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/ar/noto-sans-arabic-wght.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Pretendard'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/ar/noto-sans-arabic-wght.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Noto Sans KR'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/ar/noto-sans-arabic-wght.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'DM Sans'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/ar/noto-sans-arabic-wght.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'RIDIBatang Logo'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/ar/noto-sans-arabic-wght.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Noto Serif KR'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/ar/noto-naskh-arabic-wght.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Playfair Display'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/ar/noto-naskh-arabic-wght.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Cormorant Garamond'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/ar/noto-naskh-arabic-wght.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Gowun Batang'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/ar/noto-naskh-arabic-wght.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Nanum Brush Script'; font-style:normal; font-weight:100 900; font-display:swap; src:url(../fonts/ar/noto-naskh-arabic-wght.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* 오른쪽→왼쪽 화면 고침(ar) — 왼쪽 -9999px 로 숨긴 것은 RTL 에서 왼쪽 가로 스크롤을 만든다 → 오른쪽(시작 쪽)으로 숨김 */
html[dir="rtl"] .skip{left:auto; right:-9999px; border-radius:0 0 0 8px}
html[dir="rtl"] .skip:focus{right:0}
html[dir="rtl"] .cbar__hp{left:auto; right:-9999px}
/* RTL 에서는 화면 밖으로 흐르는 사진 띠(Swiper · overflow:visible)가 왼쪽으로 넘쳐 문서가 왼쪽으로 넓어진다(크롬에서 화면이 빈 곳을 비추기도 함) → 문서 가로 넘침을 자름 */
html[dir="rtl"]{overflow-x:clip}
/* 가로 화살표는 RTL 에서 반대로(읽는 방향 = 오른쪽→왼쪽). 아래 화살표 · ✓ · 꺾쇠는 그대로(rtl_css.js 가 회전 모양을 지킴) */
@media (min-width:641px){ html[dir="rtl"] .j-cases .ba-pair::after{transform:translate(50%,-50%) scaleX(-1); animation:none !important} }   /* 전후 사진 사이 → */
html[dir="rtl"] body[data-page="implant-advanced"] .j-cs__shot:not(:last-child)::after,
html[dir="rtl"] body[data-page="implant-advanced"] .j-cs__ev:not(:last-child)::after{transform:translate(-50%,0) scaleX(-1)}
@media (min-width:1101px){
  html[dir="rtl"] .cmpv-link::before{transform:scaleX(-1)}                                              /* 비교 카드 사이 금색 원 화살표 */
  html[dir="rtl"] .wzs-card + .wzs-card::before{transform:scaleX(-1)}                                   /* 사랑니 세 단계 사이 꺾쇠 */
  html[dir="rtl"] .j-story--snake .j-story__step:nth-child(-n+2)::after{transform:scaleX(-1)}           /* 잇몸 과정 1→2→3 */
  html[dir="rtl"] .j-story--snake .j-story__step:nth-child(4)::after{transform:rotate(180deg) scaleX(-1)}   /* 4←5 */
}
html[dir="rtl"] .j-diag__c--m::before, html[dir="rtl"] .j-diag__c--r::before{content:"←"}
/* 홈 첫 화면(넓은 화면): 글이 오른쪽으로 가므로 사진을 좌우로 뒤집어 인물을 왼쪽, 사진에 구운 안개 · 크림 막을 오른쪽(글 뒤)으로. 폰(≤640)은 사진이 아래라 그대로 */
@media (min-width:641px){
  html[dir="rtl"]:not(#_):not(#_):not(#_) body[data-page="home"] .hero-slide.hs--doc .hs-photo img{scale:-1 1; object-position:100% 22%}
  html[dir="rtl"]:not(#_):not(#_):not(#_) body[data-page="home"] .hero-slide.hs--doc .hs-bg{scale:-1 1}
  html[dir="rtl"]:not(#_):not(#_):not(#_) body[data-page="home"] .hs--doc .hs-photo{-webkit-mask-image:linear-gradient(-90deg, transparent 0, transparent 8%, #000 26%); mask-image:linear-gradient(-90deg, transparent 0, transparent 8%, #000 26%)}
  html[dir="rtl"]:not(#_):not(#_):not(#_) body[data-page="home"] .hero-slide.hs--lam .hs-photo :is(img, video){scale:-1 1; object-position:100% 0}
}
/* JS 가 왼쪽 기준으로 재는 부품은 왼쪽→오른쪽 그대로(rtl_css.js 도 이 규칙들은 안 뒤집음): 끌어 보는 전후 비교(치료 전 왼쪽 · 후 오른쪽) · 사진 크게 보기 · 숏츠 넘기기(카드 안 글만 오른쪽→왼쪽) */
html[dir="rtl"] :is(.v3-bacmp, .bacmp, .plb, .j-yt__view, .j-yt__bar){direction:ltr}
html[dir="rtl"] .j-yt__card{direction:rtl}
/* 라미네이트 첫 화면(.v3-hero:before = 크림 막 + 인물 사진): LTR 값 그대로(rtl_css.js KEEP) 통째로 좌우 반전 → 얼굴 왼쪽 · 글 오른쪽 */
html[dir="rtl"] #v3lam .v3-hero:before{scale:-1 1}