/* 외국어 랜딩 전용 스타일. 한국어 지면(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;
}

/* 언어 목록 */
.intl-lang{ display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; }
.intl-lang__item{
  font-size:13px; color:var(--intl-ink-2); text-decoration:none;
  padding-block:4px; padding-inline:2px;
}
.intl-lang__item:hover{ color:var(--intl-ink); text-decoration:underline; }
.intl-lang__item.is-current{ color:var(--intl-ink); font-weight:700; }

/* 본문 */
.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; }
}