@charset "utf-8";
/* ============================================================
   4.4의원 다국어 스타일
   1) 언어 스위처 UI   2) 언어별 폰트 스택   3) 아랍어 RTL 보정
   ============================================================ */

/* ── 1. 언어 스위처 (PC) ─────────────────────────────────── */
.lang-switch{position:relative;z-index:60;margin-left:10px}
.lang-switch__btn{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;
    border:0;border-radius:100px;background-color:var(--primary,#7F6B58);color:#fff;
    font-size:15px;font-family:inherit;line-height:1;cursor:pointer;white-space:nowrap}
.lang-switch__btn svg{width:16px;height:16px;stroke:#fff}
.lang-switch__btn .caret{transition:transform .2s}
.lang-switch.on .lang-switch__btn .caret{transform:rotate(180deg)}
.lang-switch__list{display:none;position:absolute;top:calc(100% + 8px);right:0;min-width:160px;
    padding:8px 0;border-radius:10px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.16);
    max-height:70vh;overflow-y:auto}
.lang-switch.on .lang-switch__list{display:block}
.lang-switch__list li a{display:block;padding:9px 18px;font-size:15px;line-height:1.2;color:#333;
    text-decoration:none;white-space:nowrap;transition:background .15s}
.lang-switch__list li a:hover{background:#f4efe9}
.lang-switch__list li a.on{color:var(--primary,#7F6B58);font-weight:700;background:#f8f4f0}

/* ── 1-b. 언어 스위처 (모바일 메뉴) ───────────────────────── */
.lang-list-m{display:flex;flex-wrap:wrap;gap:8px;padding:18px 0 6px;margin-top:14px;
    border-top:1px solid rgba(0,0,0,.1)}
.lang-list-m li a{display:block;padding:7px 13px;border:1px solid rgba(0,0,0,.15);border-radius:100px;
    font-size:13px;line-height:1.2;color:#444;text-decoration:none}
.lang-list-m li a.on{border-color:var(--primary,#7F6B58);background:var(--primary,#7F6B58);color:#fff}

@media (max-width:1024px){
    .lang-switch{display:none}
}

/* ── 2. 언어별 폰트 스택 ──────────────────────────────────
   한국어 원본은 --main-font(명조) / --sub-font(Pretendard) 를 쓴다.
   비한국어는 해당 문자셋을 가진 Noto 계열로 갈아끼운다. */
html[lang="en"], html[lang="id"], html[lang="vi"], html[lang="mn"]{
    --main-font:"Marcellus","Noto Sans",sans-serif;
    --sub-font:"Noto Sans",sans-serif;
}
html[lang="zh-Hans"]{ --main-font:"Noto Serif SC",serif; --sub-font:"Noto Sans SC",sans-serif; }
html[lang="zh-Hant"]{ --main-font:"Noto Serif TC",serif; --sub-font:"Noto Sans TC",sans-serif; }
html[lang="ja"]{      --main-font:"Noto Serif JP",serif; --sub-font:"Noto Sans JP",sans-serif; }
html[lang="th"]{      --main-font:"Noto Serif Thai",serif; --sub-font:"Noto Sans Thai",sans-serif; }
html[lang="ar"]{      --main-font:"Noto Kufi Arabic",serif; --sub-font:"Noto Sans Arabic",sans-serif; }

html:not([lang="ko"]) body,
html:not([lang="ko"]) input,
html:not([lang="ko"]) button,
html:not([lang="ko"]) select,
html:not([lang="ko"]) textarea{font-family:var(--sub-font)}

/* 한글 기준으로 잡힌 자간은 다른 문자셋에서 어색해진다 */
html:not([lang="ko"]) h1,
html:not([lang="ko"]) h2,
html:not([lang="ko"]) h3,
html:not([lang="ko"]) h4{letter-spacing:0}

/* 한국어용 줄바꿈 규칙 해제 — 라틴/아랍/태국 문자에서 단어가 잘린다 */
html:not([lang="ko"]) p,
html:not([lang="ko"]) .pl,
html:not([lang="ko"]) li,
html:not([lang="ko"]) dd,
html:not([lang="ko"]) address{word-break:normal;overflow-wrap:break-word}

/* 번역문은 원문보다 길어지므로 고정 높이가 걸린 자리는 여유를 준다 */
html:not([lang="ko"]) .pl{white-space:pre-line}
html:not([lang="ko"]) #shGnb .sh_nav > ul > li > a{padding:0 14px;font-size:15px}
html:not([lang="ko"]) #shGnb .sh_lnb_s li a{font-size:13px;line-height:2}

/* ── 3. 아랍어 RTL 보정 ──────────────────────────────────
   완전한 미러링은 아니고, 가독성이 깨지지 않는 수준의 보정이다. */
html[dir="rtl"] body{direction:rtl;text-align:right}
html[dir="rtl"] .sound_only{direction:rtl}

html[dir="rtl"] #shGnb .top #utilWrap{flex-direction:row-reverse}
html[dir="rtl"] #shGnb .sh_nav > ul{flex-direction:row-reverse}
html[dir="rtl"] #shGnb .sh_nav > ul > li{float:right}
html[dir="rtl"] .lang-switch{margin-left:0;margin-right:10px}
html[dir="rtl"] .lang-switch__list{right:auto;left:0}

html[dir="rtl"] #sh_section .atc__inner,
html[dir="rtl"] #sh_ft .atc__cont,
html[dir="rtl"] .cont_area > .l_cont,
html[dir="rtl"] .cont_area > .r_cont{direction:rtl}
html[dir="rtl"] .fl-l{float:right}
html[dir="rtl"] .fl-r{float:left}

html[dir="rtl"] dl, html[dir="rtl"] dt, html[dir="rtl"] dd,
html[dir="rtl"] ul, html[dir="rtl"] ol, html[dir="rtl"] address{text-align:right}
html[dir="rtl"] .list dl dd{padding-left:0;padding-right:14px}
html[dir="rtl"] .tab_area{flex-direction:row-reverse}

/* 전화번호·주소·시간처럼 숫자가 이어지는 부분은 LTR 유지 */
html[dir="rtl"] .link-contact,
html[dir="rtl"] #sh_ft_btns .tel,
html[dir="rtl"] a[href^="tel:"],
html[dir="rtl"] .call,
html[dir="rtl"] .info-box dd{direction:ltr;unicode-bidi:embed}
html[dir="rtl"] .info-box dd{text-align:right}

/* feather 아이콘류는 뒤집지 않는다 */
html[dir="rtl"] svg{transform:none}