/* [Define404] */
/* 언어 메뉴(머리·꼬리)와 언어별 서체. 토큰은 site.css :root 만 쓴다. */

/* ---------- 베트남어 서체: Be Vietnam Pro (OFL, @fontsource/be-vietnam-pro 5.2.8) ---------- */
/* Wanted Sans 에 베트남어 성조 글자가 없어서 베트남어 페이지는 이 서체 하나로 통째로 그린다 */
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 400; src: url("/assets/fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-400-normal.woff2") format("woff2"); 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: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 400; src: url("/assets/fonts/be-vietnam-pro/be-vietnam-pro-latin-400-normal.woff2") format("woff2"); 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; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 600; src: url("/assets/fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-600-normal.woff2") format("woff2"); 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: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 600; src: url("/assets/fonts/be-vietnam-pro/be-vietnam-pro-latin-600-normal.woff2") format("woff2"); 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; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 700; src: url("/assets/fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-700-normal.woff2") format("woff2"); 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: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 700; src: url("/assets/fonts/be-vietnam-pro/be-vietnam-pro-latin-700-normal.woff2") format("woff2"); 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; }
@font-face { font-family: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 800 1000; src: url("/assets/fonts/be-vietnam-pro/be-vietnam-pro-vietnamese-800-normal.woff2") format("woff2"); 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: "Be Vietnam Pro"; font-style: normal; font-display: swap; font-weight: 800 1000; src: url("/assets/fonts/be-vietnam-pro/be-vietnam-pro-latin-800-normal.woff2") format("woff2"); 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; }

/* ---------- 언어별 서체와 줄바꿈 ---------- */
/* 일본어·중국어는 웹폰트를 싣지 않고 기기 서체로 그린다. 라틴과 숫자는 Wanted Sans 가 맡는다 */
html[lang="vi"] { --font-sans: "Be Vietnam Pro", system-ui, sans-serif; }
html[lang="ja"] { --font-sans: "Wanted Sans Variable", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; }
html[lang^="zh"] { --font-sans: "Wanted Sans Variable", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
/* 어절 단위 줄바꿈(keep-all)은 한국어 전용. 일본어·중국어는 글자 사이에서 접히되 금칙은 지킨다 */
html[lang="ja"] .d404, html[lang^="zh"] .d404 { word-break: normal; line-break: strict; }
/* 일본어는 지원 브라우저(크로뮴 계열)에서 구 단위로 접는다. 나머지는 위 normal 로 떨어진다 */
html[lang="ja"] .d404 { word-break: auto-phrase; }
/* 히어로 제목 폭: 한글 기준 7.6em 은 띄어쓰기 없는 일본어·중국어에서 너무 좁다.
   중국어는 한 줄, 일본어는 구 단위로 두 줄 안팎에서 접히도록 폭만 넓힌다 (줄바꿈 태그는 쓰지 않는다) */
html[lang="ja"] .hero-title, html[lang="ja"].has-town .hero-title { max-width: 11em; }
html[lang^="zh"] .hero-title, html[lang^="zh"].has-town .hero-title { max-width: 9.5em; }
/* 베트남어 접수판 칸은 라틴 폭 */
html[lang="vi"] .b-cell { width: 0.95em; }
@media (max-width: 720px) { html[lang="vi"] .b-cell { width: 0.98em; } }

/* 다른 언어 페이지 안에 섞인 언어 이름은 그 언어 서체로 */
.lang-menu a:lang(vi), .foot-lang a:lang(vi) { font-family: "Be Vietnam Pro", system-ui, sans-serif; }
.lang-menu a:lang(ja), .foot-lang a:lang(ja) { font-family: "Wanted Sans Variable", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif; }
.lang-menu a:lang(zh), .foot-lang a:lang(zh) { font-family: "Wanted Sans Variable", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; }

/* ---------- 머리 언어 메뉴 ---------- */
.lang-menu { position: relative; flex: none; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px;
  border: var(--bw) solid var(--line-2); border-radius: var(--r-sm); background: transparent;
  font-size: 13px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; color: var(--ink-1);
  cursor: pointer; list-style: none; user-select: none; white-space: nowrap;
  transition: border-color var(--t-quick) var(--ease), background var(--t-quick) var(--ease);
}
.lang-btn::-webkit-details-marker { display: none; }
.lang-btn::marker { content: ""; }
/* 아래 꺾쇠: 선 두 개로 그린다 */
.lang-btn::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--t-quick) var(--ease);
}
.lang-btn:hover, .lang-menu[open] .lang-btn { border-color: var(--ink-1); }
.lang-menu[open] .lang-btn { background: var(--paper-raised); }
.lang-menu[open] .lang-btn::after { transform: translateY(3px) rotate(225deg); }
.lang-btn:focus-visible { outline: 2px solid var(--sky-ink); outline-offset: 2px; }

.lang-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; min-width: 168px;
  margin: 0; padding: 4px 0; list-style: none;
  background: var(--paper); border: var(--bw) solid var(--ink-1); border-radius: var(--r-sm);
}
.lang-list li + li { border-top: var(--bw) solid var(--line-1); }
.site-nav .lang-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4);
  padding: 9px 14px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-1);
}
.site-nav .lang-list a::after { content: none; }
.lang-list a span { font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.site-nav .lang-list a:hover, .site-nav .lang-list a:focus-visible { background: var(--sky-soft); outline: none; }
.lang-list a[aria-current="page"] { background: var(--paper-sunk); }
.lang-list a[aria-current="page"]::before {
  content: ""; order: 3; width: 6px; height: 6px; align-self: center; border-radius: 50%; background: var(--sky);
}

/* 좁은 화면: 메뉴 링크는 site.css 가 숨기지만 언어 목록은 살린다 */
@media (max-width: 900px) {
  .site-nav .lang-list a:not(.nav-cta) { display: flex; }
  .lang-btn { height: 32px; padding: 0 8px; font-size: 12px; }
}
/* 휴대폰 폭에서는 머리가 상태판과 문의 버튼으로 이미 꽉 차서 언어 메뉴를 빼고 꼬리 목록만 쓴다 */
@media (max-width: 600px) {
  .site-nav .lang-menu { display: none; }
}

/* ---------- 꼬리 언어 목록 ---------- */
.foot-lang { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); width: 100%; padding-top: var(--s4); border-top: var(--bw) solid #2a2a2a; }
.foot-lang a { color: var(--line-2); }
.foot-lang a:hover { color: var(--paper); }
.foot-lang a[aria-current="page"] { color: var(--paper); text-decoration: underline; text-decoration-color: var(--sky); text-underline-offset: 4px; text-decoration-thickness: 1px; }