/* 언어 선택(머리글 오른쪽 위)과 번역 페이지의 글꼴·줄바꿈 보정. 마크업은 scripts/sehyun-i18n.mjs 가 넣고 동작은 js/sehyun-i18n.js.
   PC(1280px 이상)는 #gnb 의 LOGIN·JOIN 옆, 그 아래 폭은 휴대폰 머리글(#top_m)의 메뉴 단추 왼쪽에 둔다. */

.sh-lang { position:relative; display:flex; align-items:center; font-family:'Pretendard', system-ui, sans-serif; letter-spacing:0; }
.sh-lang-btn { display:inline-flex; align-items:center; gap:5px; height:32px; padding:0 10px; border:1px solid rgba(0,0,0,.14); border-radius:16px; background:rgba(255,255,255,.72); color:#333; font:500 11px/1 'Pretendard', system-ui, sans-serif; letter-spacing:.04em; cursor:pointer; transition:border-color .2s, background .2s; }
.sh-lang-btn:hover, .sh-lang.is-open .sh-lang-btn { border-color:rgba(0,0,0,.32); background:#fff; }
.sh-lang-btn:focus-visible, .sh-lang-list a:focus-visible, .sh-lang-m a:focus-visible { outline:2px solid #8a6d3b; outline-offset:2px; }
.sh-lang-ico { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.4; flex:none; }
.sh-lang-caret { width:8px; height:5px; fill:none; stroke:currentColor; stroke-width:1.4; flex:none; transition:transform .2s; }
.sh-lang.is-open .sh-lang-caret { transform:rotate(180deg); }
.sh-lang-cur { white-space:nowrap; }
.sh-lang-list { position:absolute; top:calc(100% + 2px); right:0; z-index:60; min-width:176px; margin:0; padding:6px; list-style:none; text-align:left; background:#fff; border:1px solid rgba(0,0,0,.1); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.12); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s, transform .18s, visibility 0s .18s; }
.sh-lang.is-open .sh-lang-list { opacity:1; visibility:visible; transform:none; transition:opacity .18s, transform .18s; }
.sh-lang-list li { margin:0; }
.sh-lang-list a { position:relative; display:block; padding:10px 34px 10px 14px; border-radius:8px; color:#222; font:400 14px/1.2 'Pretendard', system-ui, sans-serif; letter-spacing:0; white-space:nowrap; text-decoration:none; }
.sh-lang-list a:hover { background:#f5f1ea; color:#111; }
.sh-lang-list a[aria-current] { font-weight:600; color:#8a6d3b; }
.sh-lang-list a[aria-current]::after { content:''; position:absolute; right:14px; top:50%; width:9px; height:5px; margin-top:-4px; border-left:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(-45deg); }

/* PC 머리글: 원래 LANGUAGE 자리(.opt-con 의 오른쪽). 마우스를 올려도 열린다 */
#gnb .opt-con { width:auto; gap:18px; }
#gnb .sh-lang--pc { height:100%; margin-left:auto; }
@media (hover:hover) {
	.sh-lang--pc:hover .sh-lang-list { opacity:1; visibility:visible; transform:none; transition:opacity .18s, transform .18s; }
	.sh-lang--pc:hover .sh-lang-btn { border-color:rgba(0,0,0,.32); background:#fff; }
	.sh-lang--pc::after { content:''; position:absolute; left:0; right:0; top:100%; height:8px; }
}
#gnb .sh-lang--pc .sh-lang-list { top:calc(50% + 20px); }

/* 휴대폰·태블릿 머리글: 메뉴 단추(#gnb_m_onoff, 오른쪽 66px) 왼쪽 */
.sh-lang--top { position:absolute; top:0; right:68px; height:60px; z-index:2; }
.sh-lang--top .sh-lang-btn { height:30px; padding:0 9px; }
.sh-lang--top .sh-lang-list { top:50px; }

/* 휴대폰 메뉴 안의 언어 목록(원래 국기 자리) */
#gnb_m .sh-lang-m { background:#fafafa; padding:14px 20px 16px; border-top:1px solid #eee; }
#gnb_m .sh-lang-m-title { display:flex; align-items:center; gap:6px; margin:0 0 8px; color:#888; font:500 11px/1 'Pretendard', system-ui, sans-serif; letter-spacing:.08em; }
#gnb_m .sh-lang-m ul { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:2px 8px; margin:0; padding:0; list-style:none; }
#gnb_m .sh-lang-m a { display:block; padding:8px 0; color:#333; font:400 13px/1.25 'Pretendard', system-ui, sans-serif; letter-spacing:0; text-decoration:none; }
#gnb_m .sh-lang-m a[aria-current] { color:#8a6d3b; font-weight:600; }

/* ---------- 번역 페이지 ---------- */
/* 라틴 문자 언어: 한글용 좁은 자간(-0.06em)을 풀고, 긴 낱말이 칸을 넘지 않게 한다 */
html:lang(en), html:lang(vi), html:lang(id) { --letter-spacing:-0.005em; }
html:lang(en) body, html:lang(vi) body, html:lang(id) body { overflow-wrap:break-word; }
/* 일본어·중국어: 띄어쓰기가 없어 keep-all 이면 줄이 안 바뀐다. 한자는 프리텐다드에 없어 그 나라 시스템 글꼴을 먼저 쓴다 */
html:lang(ja), html:lang(zh-Hans) { --letter-spacing:0.01em; }
html:lang(ja) body *, html:lang(zh-Hans) body * { word-break:normal !important; line-break:strict; }
html:lang(ja) { --font-primary:"Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans JP", 'Pretendard', sans-serif; }
html:lang(zh-Hans) { --font-primary:"PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", 'Pretendard', sans-serif; }
html:lang(ja) #gnb, html:lang(ja) #gnb_m, html:lang(ja) .common_board, html:lang(ja) #board,
html:lang(zh-Hans) #gnb, html:lang(zh-Hans) #gnb_m, html:lang(zh-Hans) .common_board, html:lang(zh-Hans) #board { font-family:var(--font-primary); }

/* 번역 페이지 PC 하위 메뉴: 상자 폭이 200px 고정이라 긴 항목 이름이 두 줄로 넘친다. 글 길이에 맞춰 넓히고 가운데를 맞춘다 */
html:not(:lang(ko)) #gnb .list-con .list .d2-con { width:auto; min-width:200px; margin-left:0; transform:translateX(-50%); }
html:not(:lang(ko)) #gnb .list-con .list .d2-con .d2-wrap .btn-d2 .txt { white-space:nowrap; padding:0 18px; }

/* 번역 페이지 PC 상단 메뉴: 영어·베트남어·인도네시아어 메뉴 이름은 한국어의 두 배 가까이 길어 1280~1439px 에서 두 줄로 접힌다.
   한 줄을 지키고 그 폭에서만 글자를 줄인다(1280px 기준 메뉴 칸 790px, 영어 이름 합 778px@16px, 인도네시아어 866px@16px) */
html:not(:lang(ko)) #gnb .list-con .list .btn-d1 .txt { white-space:nowrap; }
@media only screen and (max-width:1439px) {
	html:lang(en) #gnb .list-con .list .btn-d1 .txt, html:lang(vi) #gnb .list-con .list .btn-d1 .txt { font-size:14px; }
	html:lang(id) #gnb .list-con .list .btn-d1 .txt { font-size:13px; }
}

/* 번역 페이지의 하단 빠른 상담 바: 1280px 이상에서 바 폭이 1280 으로 고정이라 긴 언어는 안내문이 늘 말줄임으로 잘린다.
   굵은 제목만 남기고, 동의 문구는 두 줄까지 접는다(1024~1279px 에서 입력칸과 단추가 화면 밖으로 밀리지 않게) */
html:not(:lang(ko)) .sh-qc-t span { display:none; }
html:not(:lang(ko)) .sh-qc-agree label span { white-space:normal; max-width:14em; line-height:1.25; }
html:not(:lang(ko)) .sh-qc-btn { white-space:nowrap; }
/* 오른쪽 퀵메뉴의 원형 상담 단추(지름 54px): 라틴 문자 번역은 글자를 조금 줄여 원 안에 둔다 */
html:lang(en) .sh-quick-cp, html:lang(vi) .sh-quick-cp, html:lang(id) .sh-quick-cp { font-size:11px; letter-spacing:0; line-height:1.15; padding:0 2px; }
@media only screen and (max-width:1279px) { html:not(:lang(ko)) .sh-qc-t { display:none; } }
@media only screen and (min-width:1024px) and (max-width:1279px) { html:not(:lang(ko)) .sh-qc-in { justify-content:center; } }
/* 휴대폰·태블릿 빠른 상담 바의 두 단추: 번역이 길면 두 줄로 접혀 겹친다. 한 줄로 두고 조금 줄인다 */
html:not(:lang(ko)) .sh-qc-call, html:not(:lang(ko)) .sh-qc-open { white-space:nowrap; }
@media only screen and (max-width:420px) { html:lang(en) .sh-qc-open, html:lang(vi) .sh-qc-open, html:lang(id) .sh-qc-open, html:lang(ja) .sh-qc-open { font-size:14px; } }
/* 로그인 창의 소셜 단추는 2026-10-04 부터 한 줄 전체 폭이라(sehyun-overrides.css 의 #login.sh-login) 언어별로 줄이지 않는다 */
/* 홈 소개 구역(#mc_info)의 글 상자: 768~1023px 에서 상자 높이가 왼쪽 배경 비율(900:1000)로 정해지고 글은 그 위에 겹쳐 있다.
   긴 번역(영어·베트남어·인도네시아어)은 768px 에서 상자보다 길어 위의 SEHYUN 과 아래 SNS 단추가 잘렸다(인도네시아어 39px).
   큰 문구를 조금 줄이고, 전화번호 위 빈 여백(64px)과 설명 문단 줄 간격을 줄인다 */
@media only screen and (min-width:768px) and (max-width:1023px) {
	html:not(:lang(ko)) #mc_info .contents .box-L .txt .t1 { font-size:2.8rem; }
	html:not(:lang(ko)) #mc_info .contents .box-L .txt .t2 { line-height:1.65; }
	html:not(:lang(ko)) #mc_info .contents .box-L .txt .t4 { margin-top:3rem; }
	html:not(:lang(ko)) #mc_info .contents .box-L .txt .sns-wrap { margin-top:2rem; }
}
/* 사례 카드(.sh-case)의 링크 단추는 높이가 4.8rem(휴대폰 34px)으로 고정이라 두 줄까지만 들어간다.
   인도네시아어 "Selengkapnya tentang Pengangkatan dan Penggantian Implan Hidung" 은 360px 에서 세 줄(45px)이 되어 단추 밖으로 넘쳤다.
   번역 페이지에서는 고정 높이를 최소 높이로 바꿔 글자만큼 늘어나게 한다. 위아래 여백이 작아 한두 줄짜리 단추 높이는 그대로다 */
html:not(:lang(ko)) .sh-sub .sh-case .sh-btn { height:auto; min-height:4.8rem; padding-top:.4rem; padding-bottom:.4rem; text-align:center; }