/* 다국어 쪽(/en/ 등)에만 붙는 스타일 — 2026-11-11. ko/i18n.php 가 </head> 앞에 넣는다. 한국어 /ko/ 쪽에는 안 붙는다. */

/* ① 한국어 줄바꿈 묶음(.nw)을 번역문에서는 푼다. 번역문이 길면 줄바꿈 없이 잘렸다(병원소개 진료철학 인용 등). */
:root .nw{white-space:normal}

/* ② 손글씨(메인 진료철학 .hand · 병원소개 .g2-hand) — 2026-11-11 사용자: 영어는 영어다운 손글씨로, 다른 언어도 손글씨 느낌으로.
   언어마다 그 글자를 쓰는 손글씨 글꼴(모두 OFL, Google Fonts). 손글씨 문장에 쓰인 글자 + 기본 영문만 담은 작은 파일이다 — 문장을 고치면 새 글자가 이 글꼴에 없을 수 있다(그때는 다시 받는다).
   영어 · 인도네시아어 · 러시아어 · 몽골어 Caveat / 베트남어 Patrick Hand / 일본어 Klee One / 대만 LXGW WenKai TC / 중국 Ma Shan Zheng / 태국어 Itim / 아랍어 Aref Ruqaa */
@font-face{font-family:"DjHandCaveat";src:url("../fonts/hand-caveat.woff2?v=20261111") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DjHandPatrick";src:url("../fonts/hand-patrick.woff2?v=20261111") format("woff2");font-display:swap}
@font-face{font-family:"DjHandKlee";src:url("../fonts/hand-klee.woff2?v=20261111") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"DjHandWenkai";src:url("../fonts/hand-wenkai.woff2?v=20261111") format("woff2");font-display:swap}
@font-face{font-family:"DjHandMashan";src:url("../fonts/hand-mashan.woff2?v=20261111") format("woff2");font-display:swap}
@font-face{font-family:"DjHandItim";src:url("../fonts/hand-itim.woff2?v=20261111") format("woff2");font-display:swap}
@font-face{font-family:"DjHandRuqaa";src:url("../fonts/hand-ruqaa.woff2?v=20261111") format("woff2");font-display:swap}
:root :is(.philosophy .lead p.hand,.g2-hand){text-wrap-style:pretty}
/* 한국어 문장에 맞춘 줄바꿈은 숨긴다(영어에서 「with you」 한 줄만 남던 문제) */
:root :is(.philosophy .lead p.hand,.g2-hand) br{display:none}
:is(:lang(en),:lang(id),:lang(ru),:lang(mn)) :is(.philosophy .lead p.hand,.g2-hand){font-family:"DjHandCaveat",var(--kr);font-weight:500;font-size-adjust:.5;line-height:1.45}
:lang(vi) :is(.philosophy .lead p.hand,.g2-hand){font-family:"DjHandPatrick",var(--kr);font-size-adjust:.5}
:lang(ja) :is(.philosophy .lead p.hand,.g2-hand){font-family:"DjHandKlee",var(--kr);font-weight:600}
:lang(zh-TW) :is(.philosophy .lead p.hand,.g2-hand){font-family:"DjHandWenkai",var(--kr)}
:lang(zh-CN) :is(.philosophy .lead p.hand,.g2-hand){font-family:"DjHandMashan",var(--kr)}
:lang(th) :is(.philosophy .lead p.hand,.g2-hand){font-family:"DjHandItim",var(--kr)}
:lang(ar) :is(.philosophy .lead p.hand,.g2-hand){font-family:"DjHandRuqaa",var(--kr);line-height:1.7}

/* ③ 「아름다움이 완성되는 특별한 공간」 띠: 라틴 · 베트남 · 키릴 글자 언어는 Cormorant Garamond 기울임(사용자: 영문을 조금 더 fancy 하게). 글자가 작아 보여 크기를 1.18배. */
@font-face{font-family:"DjSerif";src:url("../fonts/cormorant-italic-cyrillic-ext.woff2?v=20261111") format("woff2");font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:"DjSerif";src:url("../fonts/cormorant-italic-cyrillic.woff2?v=20261111") format("woff2");font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"DjSerif";src:url("../fonts/cormorant-italic-vietnamese.woff2?v=20261111") format("woff2");font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"DjSerif";src:url("../fonts/cormorant-italic-latin-ext.woff2?v=20261111") format("woff2");font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"DjSerif";src:url("../fonts/cormorant-italic-latin.woff2?v=20261111") format("woff2");font-style:italic;font-weight:500;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:is(:lang(en),:lang(id),:lang(vi),:lang(ru),:lang(mn)) main .space p{font-family:"DjSerif",var(--kr);font-style:italic;font-weight:500;letter-spacing:.005em;line-height:1.35;font-size:26px}
/* 모든 언어: 띠 문구에 좌우 여백 · 두 줄이면 고르게(휴대폰에서 번역 문구가 화면 끝에 닿던 문제) */
:root main .space p{padding:0 20px;text-align:center;text-wrap-style:balance}
@media (min-width:768px){:is(:lang(en),:lang(id),:lang(vi),:lang(ru),:lang(mn)) main .space p{font-size:47px}}
@media (min-width:1200px){:is(:lang(en),:lang(id),:lang(vi),:lang(ru),:lang(mn)) main .space p{font-size:52px}}
@media (min-width:1600px){:is(:lang(en),:lang(id),:lang(vi),:lang(ru),:lang(mn)) main .space p{font-size:57px}}

/* ④ 일본어 · 중국어 · 태국어는 띄어쓰기로 낱말을 나누지 않는다. 한국어용 keep-all(띄어쓰기에서만 줄바꿈)을 끈다.
   켜 두면 문장 전체가 한 덩어리가 되어 칸을 밀어내고 잘렸다(일본어 병원소개 휴대폰에서 최대 512px). */
:is(:lang(ja),:lang(zh-CN),:lang(zh-TW),:lang(th)) *{word-break:normal!important;line-break:strict}

/* ⑤ 본문 글꼴 Pretendard · Wanted Sans 파일은 쓰는 글자만 남긴 서브셋이라 베트남어 성조 글자 · 키릴 · 라틴 확장 글자가 없다.
   그 글자만 Inter(Pretendard 영문의 바탕 글꼴)로 채운다 — 베트남어 낱말 안에서 글꼴이 섞여 보이던 문제. 필요한 글자가 있을 때만 받는다. */
@font-face{font-family:"Pretendard";src:url("../fonts/inter-latin.woff2?v=20261111") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+00C0-00FF}
@font-face{font-family:"Pretendard";src:url("../fonts/inter-latin-ext.woff2?v=20261111") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-024F, U+1E00-1E9F, U+1EF2-1EFF}
@font-face{font-family:"Pretendard";src:url("../fonts/inter-vietnamese.woff2?v=20261111") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Pretendard";src:url("../fonts/inter-cyrillic.woff2?v=20261111") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Pretendard";src:url("../fonts/inter-cyrillic-ext.woff2?v=20261111") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0460-052F}
@font-face{font-family:"Wanted Sans";src:url("../fonts/inter-latin.woff2?v=20261111") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+00C0-00FF}
@font-face{font-family:"Wanted Sans";src:url("../fonts/inter-latin-ext.woff2?v=20261111") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0100-024F, U+1E00-1E9F, U+1EF2-1EFF}
@font-face{font-family:"Wanted Sans";src:url("../fonts/inter-vietnamese.woff2?v=20261111") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:"Wanted Sans";src:url("../fonts/inter-cyrillic.woff2?v=20261111") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:"Wanted Sans";src:url("../fonts/inter-cyrillic-ext.woff2?v=20261111") format("woff2");font-weight:100 900;font-display:swap;unicode-range:U+0460-052F}

/* ⑥ 하위 쪽 큰 제목: 휴대폰 · 태블릿에서 한국어에 맞춘 5글자 폭(max-width:5em)을 푼다. 번역 낱말이 길어(Kerutan/Elastisitas/Lifting) 잘렸다.
   그래도 넘치면 i18n.js 가 글자를 줄인다. */
:root .sub-hero--wide h1{max-width:none}
/* 11/11 고침: 폭 제한을 아예 풀었더니 번역 제목이 오른쪽 얼굴 그림(눈성형 · 동안성형 · 모발이식 등)을 덮었다 → 폭을 다시 묶되 번역에 맞게 넓게.
   휴대폰 60%(제목 27px) · 태블릿 60% · PC 화면 60%(PC 는 한 줄 고정도 풀고 고르게 줄바꿈). 그래도 긴 낱말은 i18n.js 가 글자를 줄인다 */
@media (max-width:767px){:root .sub-hero--wide :is(h1,p){max-width:60vw}:root .sub-hero--wide h1{font-size:30px;overflow-wrap:normal}}   /* 11/11 2차: 78% · 34px 로는 긴 낱말(Омолаживающая)이 얼굴 조각 이마에 걸침 → 60% · 27px
   11/12 사용자 「영문 휴대폰 제목 줄바꿈 이상 · 너무 작음(Our Equipme/nt)」: 60% 는 글 상자(.hero-text) 기준이라 설명 줄 없는 쪽(장비 · 의료진 · 오시는길 · 로그인 …)은 상자 120px → 제목 72px 였다 → 화면 기준 60vw · 30px(한국어 34px) · 낱말 안에서 안 끊음. i18n.js fitSub 최소 80% · 「/」 뒤 줄바꿈 */
@media (min-width:768px) and (max-width:1199px){:root .sub-hero--wide :is(h1,p){max-width:60%}:root .sub-hero--wide h1{max-width:min(44vw,340px)}}   /* 11/12 태블릿도 60% 가 글 상자 기준이라 「Our Equipment」 117px · 낱말 안 끊김 → 제목만 화면 기준(설명 있는 쪽의 예전 폭 334px 와 비슷 — 얼굴 그림 더 안 덮음) */
@media (min-width:1200px){:root .sub-hero--wide h1{white-space:normal;max-width:min(60vw,900px);text-wrap-style:balance}}
@media (max-width:767px){:root .sub-hero.i18n-nobr br{display:none}:root .sub-hero.i18n-nobr .i18n-sp{display:inline}}

/* ⑦ 2026-11-11 영어 쪽 검토 시트(23건) 반영. 같은 틀을 쓰는 다른 언어에도 함께 적용한다. 번호 = 시트 행 */
/* 줄바꿈(#7 #13 #16 #17) — text-wrap 묶음 속성은 nowrap 까지 풀어 버리므로 text-wrap-style 만 쓴다: 문단은 마지막 줄에 낱말 하나만 남지 않게, 제목 · 강조 문구는 줄 길이를 고르게 */
:root main :is(p, li, dd, dt, figcaption){text-wrap-style:balance}   /* 6줄 이하 덩어리는 줄 길이를 고르게(끝줄이 짧게 남지 않음). 더 긴 문단은 브라우저가 balance 를 안 쓰고, i18n.php 가 끝 두 낱말을 묶는다 */
:root main :is(h1, h2, h3, h4, .sec-title, .intro-pk, .intro-strong, .h-lead, .dr-body){text-wrap-style:balance}
/* #3 #4 원장 이름 뒤 영문 이름: 번역 쪽에서는 앞 이름과 같아 뺀다 */
:root .dr-en{display:none}
/* #5 #6 원장 사진: 번역 경력 줄이 길어 글 칸이 높아지면 사진이 칸 맨 아래로 밀렸다 → PC 에서 화면 아래에 붙어 따라오다 칸 끝에 닿으면 멈춘다 */
@media (min-width:1024px){:root .dr{overflow:clip}:root .dr-fig{position:sticky;bottom:0}}
/* #8 진료시간: 요일이 두 줄로 꺾여 시간과 어긋났다 → 요일 줄 위, 시간 줄 아래 */
:root .loc-hours div{grid-template-columns:minmax(0,1fr);gap:2px}
/* #14 피부 고민 카드 4개: 제목 줄 수가 달라 아래 칸이 어긋났다 → 카드 안 줄 높이를 서로 맞춘다(subgrid, 카드 안 5칸) */
@media (min-width:768px){:root .match-card{grid-row:span 5;grid-template-rows:subgrid;row-gap:10px}:root .match-tags{align-content:flex-start;align-items:flex-start}}
/* #15 추천 제품 이름이 붙어 보였다 → 칸 폭 64 → 72px */
:root .match-picks a{width:72px;align-content:start}
/* #18 #19 피부층 표: 이름표 칸 폭이 정해져 있어 긴 이름이 잘리고, 두 줄 칸이 생겨 점선이 어긋났다 → 이름표 폭을 가장 긴 이름에 맞춰 넷 다 같게 */
:root .layers-list{grid-template-columns:max-content minmax(0,1fr)}
:root .layers-list li{grid-column:1/-1;grid-template-columns:subgrid}
:root .layers-list b{padding:0 18px}
/* #24 셀 케어 원 안 이름: 원 밖으로 나갔다 → 원 안 폭에서 줄을 바꾼다 */
:root .dj-f43 .lb{white-space:normal;width:calc(112 * var(--u));text-align:center;line-height:1.15}
:root .dj-f43 .lb.c{width:calc(170 * var(--u))}
/* #21 #22 줄기세포 프로그램 카드 설명: 한국어에 맞춘 줄바꿈을 숨긴다 */
:root .prog-card .desc br{display:none}
/* #9 #11 #13 #16 소개 문단: 한국어 길이에 맞춘 폭(545px)이라 번역 한 문장이 두 줄로 꺾이며 짧은 끝줄이 생겼다 → 780px 까지 */
:root .intro-head p{max-width:min(100%,780px)}
/* #19 휴대폰 피부층 그림 옆 이름표(그림 오른쪽 약 100px 칸): 번역 이름이 길어 넘쳤다 → 13px, 두 줄까지 */
:root .layers-tags li{white-space:normal;font-size:13px;line-height:1.15}
/* 아랍어(오른쪽→왼쪽): 피부층 그림이 오른쪽으로 붙어 이름표 글이 그림 위에 겹쳤다(원래 있던 문제) → 그림 칸만 왼쪽→오른쪽 배치, 글은 아랍어 방향 */
[dir=rtl] .layers-ph{direction:ltr}
[dir=rtl] .layers-tags li{direction:rtl;text-align:left}
/* #18 PC 피부층 표 첫 줄 연결선(CSS)이 그림 점선보다 약 2px 위라 꺾여 보였다 → 그림 점선 높이(그림 145/444)에 맞춘다. 행 가운데 = 32.146%, 차이 2.27px / 행 높이 69.5px = 3.27% */
:root .layers-list li:first-child::before{top:53.27%}
/* 빠른 상담: 휴대폰 아래 바의 카카오톡 버튼을 언어별 기본 메신저로 바꿨을 때의 색(i18n.js) */
:root .qc-kakao.is-line{background:#06c755;color:#fff}
:root .qc-kakao.is-whatsapp{background:#25d366;color:#fff}
:root .qc-kakao.is-wechat{background:#07c160;color:#fff}
/* 휴대폰 메인 히어로: 번역 글이 길어 모델 머리에 걸리는 슬라이드는 한국어용 줄바꿈을 숨긴다(i18n.js 가 .i18n-nobr 를 붙임) */
@media (max-width:767px){:root .hero-slide.i18n-nobr .hero-copy br{display:none}}
:root .i18n-sp{display:none}
@media (max-width:767px){:root .hero-slide.i18n-nobr .i18n-sp{display:inline}}
/* PC 메인 히어로(1200px 이상): 번역 제목이 길어 오른쪽 모델을 덮었다(몽골어 · 러시아어 1번 장 글 끝이 폭의 67~95%, 한국어 45~54%)
   → 글 덩어리를 화면 46%(최대 760px) 안에서 줄바꿈. 2~5번 장은 바탕색이 왼쪽 54%까지라 그 안에 든다 */
@media (min-width:1200px){:root .hero-copy>*{max-width:min(46vw,760px)}}
/* PC 메인 진료철학 목록(1200px 이상): 문장이 한 줄 고정이라 번역 목록이 왼쪽으로 늘어 원장 얼굴을 덮었다(한국어 폭 461px, 번역 557~742px)
   → 450px 안에서 두 줄까지, 글자 15px */
@media (min-width:1200px){:root .phil-list{max-width:450px}:root .phil-list li{align-items:start}:root .phil-list p{white-space:normal;font-size:15px;line-height:1.45;text-wrap-style:balance}}
/* 아랍어 루크아체 손글씨는 위아래 획이 길어 첫 줄 위가 칸에 붙는다 → 위 여백 */
:lang(ar) :is(.philosophy .lead p.hand,.g2-hand){padding-top:.3em}
/* 11/12 바닥글 연락 버튼(.f-contact): 번역 글이 길면 한 칸만 두 줄로 꺾여 다른 칸과 어긋났다(영어 휴대폰 「KakaoTalk Consultation」)
   → i18n.js fitContact 가 4칸을 같이 맞춘다(아이콘 간격 · 글자 크기). 그래도 긴 칸만 두 줄, 가운데 맞춤 */
:root .f-contact a{padding:0 8px;line-height:1.25;text-align:center}
/* 11/12 순서 카드(.step-list) 휴대폰 두 칸: 한국어 틀은 1fr 1fr 이라 긴 번역 낱말이 칸을 넓혀 오른쪽 칸이 화면 밖으로 잘렸다
   (영어 모공 · 흉터 STEP 02 · 04, 사용자 화면) → 두 칸 폭을 화면에 고정. 묶음(&nbsp;)은 i18n.php 가 이 카드에서 하지 않는다. 번호 카드(--num) · 가로 카드(--row)는 휴대폰 한 칸이라 제외 */
@media (max-width:767px){:root .step-list:not(.step-list--num):not(.step-list--row){grid-template-columns:repeat(2,minmax(0,1fr))}}