/* 외국어 랜딩 전용 스타일. 한국어 지면(subpage.css)과 선택자가 겹치지 않도록
   모든 규칙이 .intl- 접두 클래스에서 시작한다. */

/* 글꼴 — 외부 호스트에서 불러오지 않는다. 자체 호스팅 파일을 추가하기 전까지는
   운영체제가 이미 갖고 있는 글꼴을 언어별로 지정한다. */
:root{
  --intl-font-latin: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --intl-font-jp: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", var(--intl-font-latin);
  --intl-font-cyr: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --intl-font-ar: "Geeza Pro", "Segoe UI", "Tahoma", "Arial", sans-serif;
  --intl-ink: #0a1628;
  --intl-ink-2: #46586c;
  --intl-line: rgba(10,22,40,.12);
  --intl-bg: #ffffff;
  --intl-bg-2: #f5f7fa;
  --intl-max: 1120px;
  --intl-pad: clamp(16px, 4vw, 32px);
}

.intl-body{
  margin:0;
  background:var(--intl-bg);
  color:var(--intl-ink);
  font-family:var(--intl-font-latin);
  line-height:1.7;
  -webkit-text-size-adjust:100%;
}
html[lang="ja"] .intl-body{ font-family:var(--intl-font-jp); }
html[lang="ru"] .intl-body,
html[lang="mn"] .intl-body{ font-family:var(--intl-font-cyr); }
html[lang="ar"] .intl-body{ font-family:var(--intl-font-ar); line-height:1.9; }

/* 방향 격리 — 오른쪽에서 왼쪽으로 읽는 지면에서도 전화번호·영문 상호는
   왼쪽에서 오른쪽으로 읽어야 한다. 숫자와 라틴 문자가 뒤집혀 보이는 것을 막는다. */
[dir="ltr"]{ direction:ltr; unicode-bidi:isolate; }
[dir="rtl"]{ direction:rtl; }
.intl-ltr{ direction:ltr; unicode-bidi:isolate; display:inline-block; }

/* 머리말 */
.intl-head{
  border-block-end:1px solid var(--intl-line);
  background:var(--intl-bg);
  position:sticky; inset-block-start:0; z-index:10;
}
.intl-head__inner{
  max-inline-size:var(--intl-max);
  margin-inline:auto;
  padding-inline:var(--intl-pad);
  padding-block:14px;
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:center; justify-content:space-between;
}
.intl-head__brand{
  font-size:clamp(15px,2.4vw,18px); font-weight:700;
  color:var(--intl-ink); text-decoration:none;
}

/* 언어 선택 — 알약 버튼 하나(지구본 + 지금 언어 국기 + 이름 + ▾) + 펼침 목록.
   공식 도메인 옛 머리의 언어 선택(ce-chrome-extras.css)과 같은 모양이다 */
.intl-head__inner{ flex-wrap:nowrap; }
.intl-head__brand{ min-inline-size:0; }
.intl-lang{ flex:none; margin-inline-start:auto; }
details.ce-langmenu{ position:relative; display:block; font-size:14px; line-height:1; }
details.ce-langmenu > summary{
  position:relative; display:flex; align-items:center; gap:6px;
  height:32px; padding-block:0; padding-inline:12px;
  border:1px solid #dfe5ec; border-radius:999px;
  background:rgba(255,255,255,.8); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  color:var(--intl-ink); font-size:14px; font-weight:600; white-space:nowrap;
  list-style:none; cursor:pointer; user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease-out, background-color .15s ease-out, color .15s ease-out;
}
details.ce-langmenu > summary::after{ content:""; position:absolute; inset:-8px -4px; }
details.ce-langmenu > summary::-webkit-details-marker{ display:none; }
details.ce-langmenu > summary::marker{ content:""; }
details.ce-langmenu > summary:hover,
details.ce-langmenu[open] > summary{ border-color:rgba(19,72,121,.35); background:#fff; color:#134879; }
details.ce-langmenu > summary:focus-visible{ outline:2px solid #134879; outline-offset:2px; }
details.ce-langmenu .ce-langmenu__globe{ flex:none; inline-size:16px; block-size:16px; color:#134879; }
details.ce-langmenu .ce-langmenu__caret{ flex:none; inline-size:14px; block-size:14px; color:#6b7785; transition:transform .15s ease-out; }
details.ce-langmenu[open] .ce-langmenu__caret{ transform:rotate(180deg); }
details.ce-langmenu .ce-langmenu__flag{
  display:block; flex:none; inline-size:18px; block-size:12px; object-fit:cover;
  border-radius:2px; box-shadow:0 0 0 1px rgba(15,30,50,.14);
}
details.ce-langmenu .ce-langmenu__flag--none{ background:#e8edf2; box-shadow:none; }
details.ce-langmenu .ce-langmenu__list{
  position:absolute; inset-block-start:calc(100% + 8px); inset-inline-end:0; z-index:100;
  inline-size:max-content; min-inline-size:176px; max-block-size:min(70vh, 560px); overflow-y:auto;
  margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid #dfe5ec; border-radius:16px;
  box-shadow:0 20px 25px -5px rgba(10,30,48,.1), 0 8px 10px -6px rgba(10,30,48,.1);
}
details.ce-langmenu:not([open]) .ce-langmenu__list{ display:none; }
details.ce-langmenu .ce-langmenu__list > li{ margin:0; padding:0; }
details.ce-langmenu .ce-langmenu__item{
  display:flex; align-items:center; gap:10px; box-sizing:border-box;
  min-block-size:40px; padding:8px 12px; border-radius:12px;
  color:#374151; font-size:14px; font-weight:500; line-height:1.3;
  white-space:nowrap; text-decoration:none; transition:background-color .15s ease-out;
}
details.ce-langmenu a.ce-langmenu__item:hover,
details.ce-langmenu a.ce-langmenu__item:focus-visible{ background:#f3f5f8; outline:none; }
details.ce-langmenu .ce-langmenu__item[aria-current]{ background:#edf2f8; color:#134879; }
details.ce-langmenu .ce-langmenu__list .ce-langmenu__flag{ inline-size:21px; block-size:14px; }
details.ce-langmenu .ce-langmenu__check{ flex:none; inline-size:16px; block-size:16px; margin-inline-start:auto; padding-inline-start:6px; box-sizing:content-box; color:#2a6aa6; }
@media (max-width:600px){
  details.ce-langmenu > summary{ gap:6px; height:28px; padding-inline:10px; font-size:12px; }
  details.ce-langmenu .ce-langmenu__name{ display:none; }
  details.ce-langmenu .ce-langmenu__list{ max-block-size:calc(100dvh - 90px); }
}
  details.ce-langmenu .ce-langmenu__name{ display:none; }
  details.ce-langmenu .ce-langmenu__list{ max-block-size:calc(100dvh - 90px); }
}

/* 본문 */
.intl-main{
  max-inline-size:var(--intl-max);
  margin-inline:auto;
  padding-inline:var(--intl-pad);
  padding-block:clamp(24px,5vw,56px);
}
.intl-hero__title{
  font-size:clamp(26px,5vw,40px); line-height:1.25;
  margin-block:0 12px; font-weight:700;
}
.intl-hero__lead{ font-size:clamp(15px,2vw,18px); color:var(--intl-ink-2); margin-block:0; }
.intl-sec{ margin-block-start:clamp(28px,5vw,48px); }
.intl-sec h2{ font-size:clamp(20px,3vw,28px); line-height:1.35; margin-block:0 12px; }
.intl-sec h3{ font-size:clamp(16px,2.2vw,20px); line-height:1.45; margin-block:20px 8px; }
.intl-sec p, .intl-sec li{ font-size:clamp(14px,1.8vw,16px); }
.intl-sec img{ max-inline-size:100%; block-size:auto; }
.intl-sec table{ inline-size:100%; border-collapse:collapse; }
.intl-sec th, .intl-sec td{
  border:1px solid var(--intl-line);
  padding-block:8px; padding-inline:10px;
  text-align:start;
}
.intl-sec ul, .intl-sec ol{ padding-inline-start:1.2em; margin-inline:0; }

/* 표가 좁은 화면에서 넘칠 때만 가로로 스크롤한다 */
.intl-table-scroll{ overflow-x:auto; }

/* 문의 */
.intl-cta{ background:var(--intl-bg-2); border-block-start:1px solid var(--intl-line); }
.intl-cta__inner{
  max-inline-size:var(--intl-max);
  margin-inline:auto;
  padding-inline:var(--intl-pad);
  padding-block:20px;
  display:flex; flex-wrap:wrap; gap:10px;
}
.intl-cta__btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-block-size:44px; padding-inline:18px;
  border:1px solid var(--intl-line); border-radius:8px;
  background:var(--intl-bg); color:var(--intl-ink);
  font-size:14px; font-weight:600; text-decoration:none;
}
.intl-cta__btn:hover{ border-color:var(--intl-ink); }

/* 꼬리말 */
.intl-foot{ background:var(--intl-ink); color:#fff; }
.intl-foot__inner{
  max-inline-size:var(--intl-max);
  margin-inline:auto;
  padding-inline:var(--intl-pad);
  padding-block:28px 36px;
}
.intl-foot p{ margin-block:0 6px; font-size:13px; color:rgba(255,255,255,.82); }
.intl-foot__name{ font-weight:700; color:#fff !important; font-size:15px !important; }
.intl-foot__notice{ margin-block-start:14px !important; font-size:12px !important; line-height:1.7; }

@media (max-width:640px){
  .intl-head__inner{ padding-block:10px; }
  .intl-cta__inner{ padding-block:14px; }
}
