/* =====================================================================
 * ui-i18n.css — UI 번역/동시 출력 컨트롤 스타일 (결정 D18)
 *   언어 선택(사이드바 로고 밑) + "한국어 동시 출력" 토글.
 *   Sneat 테마 변수를 최대한 재사용하고, 병기(dual) 시 라벨 줄바꿈만 보강한다.
 * ===================================================================== */

/* ⚠ UI 폰트(Pretendard) 선언은 2026-07-26 에 **fonts-ui.css 로 분리**했다.
 *   사유: 사용자 지시로 폰트를 관리자 화면·좌표 편집기·오류 페이지까지 넓혀야 하는데,
 *         이 파일은 **번역 UI 전용**이라 그 화면들에 통째로 얹는 게 부적절하다.
 *   이 파일에는 폰트 선언이 없다 — base.html 이 fonts-ui.css 를 **직접 link** 한다.
 *   (분리 직후 잠깐 @import 브리지를 뒀다가, base.html link 추가 확인 후 제거했다.
 *    @import 는 직렬 요청이라 폰트 로드가 한 왕복 늦어진다.) */

/* 한국어 동시 출력 토글 버튼 (기본 = 외곽선, active = 채움) */
.ui-dual-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d9dee3;
  color: #566a7f;
  background: transparent;
  border-radius: 0.375rem;
  padding: 0.28rem 0.6rem;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ui-dual-btn:hover {
  border-color: #696cff;
  color: #696cff;
}
.ui-dual-btn.active {
  background: #696cff;
  border-color: #696cff;
  color: #fff;
}
.ui-dual-btn.active:hover {
  background: #5f61e6;
}
.ui-dual-btn i {
  font-size: 1.05rem;
}
/* (2026-07-27 사용자 지적 "아이콘이랑 텍스트랑 정렬 깨져있어")
 *   위 `.ui-dual-btn { display:inline-flex }` 는 **적용되지 않고 있었다.** Sneat 의 core.css 가
 *   프로젝트 CSS 보다 **뒤에** 로드돼, 같은 특이도(0,1,0)인 `.btn { display:inline-block }` 이
 *   순서로 이긴다. 게다가 부모(.ui-lang-side)가 flex 라 inline-block 이 block 으로 굳어져
 *   `align-items:center` 가 아예 무력화됐다 → 실측 아이콘 중심 46.3 / 글자 중심 40.3 (6px 어긋남).
 *   특이도를 한 단계 올려(.btn 을 같이 물려) 되찾는다. 정렬에 필요한 두 속성만 다시 선언하고
 *   패딩·색은 건드리지 않는다(지금 보이는 크기를 바꾸지 않기 위해). */
.btn.ui-dual-btn {
  display: inline-flex;
  align-items: center;
  /* 크기 확대 (사용자 지시 2026-07-29 "테스트 모드랑 한국어 동시출력 이거 두개 좀 키워줘").
     실측 기준선(확대 전): 102.7×28.4 / 127.7×28.4 · font 12px · padding 4/11px · icon 16.8px.
     ⚠ 마크업이 `btn btn-sm` 이라 크기는 테마의 `.btn-sm`(0,1,0)이 쥐고 있다.
       프로젝트 CSS 가 core.css 보다 **먼저** 로드되므로 같은 특이도로는 순서에 진다
       → 위 정렬 수정과 같은 이유로 `.btn` 을 물려 (0,2,0) 으로 올려야 실제로 먹는다. */
  font-size: 0.875rem;        /* 12px → 14px */
  padding: 0.5rem 0.9rem;     /* 4/11px → 8/14.4px (높이 약 28 → 35px) */
}
/* 아이콘도 같이 키운다 — 글자만 키우면 아이콘이 상대적으로 작아 보인다.
   기존 `.ui-dual-btn i`(0,1,1) 를 이기려면 `.btn` 을 물려 (0,2,1) 로 올린다. */
.btn.ui-dual-btn i {
  font-size: 1.25rem;         /* 16.8px → 20px */
}


/* 동시 출력(병기)로 텍스트가 길어질 때 레이아웃 보호:
 *   라벨/메뉴/버튼이 줄바꿈으로 흡수되도록 허용해 폼이 가로로 터지지 않게 한다. */
label.form-label,
label.form-check-label,
.menu-link > div,
#layout-navbar .fw-semibold {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 언어 설정 = 고객 안내 템플릿과 동일한 드롭박스(select). 위치는 **사이드바 로고 밑**(사용자 지시).
 *   옵션은 `언어명 · 국가그룹` 한 줄이고 표기·정렬은 ui-i18n.js 의 langOptions() 단일 소스다. */
/* 최상단 헤더(navbar) 우측 배치 — [언어 드롭박스][한국어 동시 출력] **가로 한 줄**(사용자 지시).
 *   드롭박스가 늘어나도 버튼이 밀려나지 않게 버튼은 축소 금지, 드롭박스만 가변으로 둔다. */
.ui-lang-side { flex: 0 1 auto; min-width: 0; }
.ui-lang-side .ui-dual-btn { flex: 0 0 auto; }
/* ⚠ 이 프로젝트는 `custom-select.js` 가 모든 <select> 를 커스텀 위젯(.cs-wrap/.cs-display)으로
 *   감싸고 **네이티브 select 는 시각적으로 숨긴다**(실측: 네이티브 폭 2px). 따라서 폭·글자 크기는
 *   네이티브가 아니라 **위젯 쪽**에 줘야 한다. 값 변경 시 위젯이 네이티브에 change 를 디스패치하므로
 *   ui-i18n 의 위임 리스너는 그대로 동작한다. */
/* 닫힌 컨트롤과 펼친 목록의 폭을 **같게** 맞춘다(사용자 지시) — 둘 다 17rem.
   .cs-menu 는 right:0 정렬이라 min-width 만 같은 값으로 두면 정확히 겹친다. */
.ui-lang-side .cs-wrap { flex: 0 0 auto; width: 15rem; }
/* 닫힌 컨트롤 글자 크기는 **펼친 목록(.cs-option, 15px)과 통일**한다(사용자 지시).
   따로 줄여놨더니 12.48px vs 15px 로 달라 보였다 → 폰트 지정을 빼서 위젯 기본값을 그대로 쓴다. */
.ui-lang-side .cs-display {
  padding-top: 0.28rem;
  padding-bottom: 0.28rem;
}
/* 옵션 팝업은 닫힌 컨트롤 폭에 갇히지 않게 내용 폭으로 넓히고, 헤더 우측이라 오른쪽으로 맞춘다. */
.ui-lang-side .cs-menu {
  min-width: 15rem;
  left: 0;
  right: 0;
  white-space: nowrap;
}
.ui-lang-select { min-width: 0; }
.ui-lang-side .ui-dual-btn { justify-content: center; }

/* CJK 보완(PL, 실측): 일본어 병기 시 사이드바 메뉴가 박스를 7px 넘쳤다.
 *   원인은 폭이 아니라 CJK 줄바꿈 규칙 — 전각 닫는 괄호 '）' 앞에서는 개행이 금지돼
 *   `overflow-wrap: anywhere` 로도 마지막 조각이 안 쪼개진다(예 "正規SK（外国人専用）").
 *   메뉴 라벨에만 좁게 적용한다(폼 라벨은 현재 넘침 0 — 불필요한 공격적 개행 회피).
 *
 * ⚠ 정정(실측, 잔여 14번 조사 중 발견): 원래 주석의 "line-break: anywhere 는 넘칠 때만
 *   금지 규칙을 풀어주므로 라틴 표기에는 영향이 없다"는 **사실이 아니다.** 이 값은 모든
 *   글자 사이를 정상적인 줄바꿈 기회로 만들기 때문에 라틴어도 단어 중간에서 잘린다.
 *   실측(영어, 사이드바 1440px): "SK Regular (Foreigner ⏎ s Only)" 처럼 단어가 쪼개졌다.
 *   → **CJK 언어에서만** 적용하도록 좁힌다. `<html lang>` 은 ui-i18n.js 가 언어 전환 시
 *      갱신하므로 별도 훅이 필요 없다. 적용 후 실측: "SK Regular ⏎ (Foreigners Only)"
 *      (총 높이·넘침 건수는 전후 동일 — 줄바꿈 위치만 정상화). */
html[lang="ja"] .menu-link > div,
html[lang="zh"] .menu-link > div,
html[lang="zh-Hant"] .menu-link > div {
  line-break: anywhere;
}

/* ── 폰트 선언 전부(@font-face 'UI Script Fit' / 'Pretendard UI' / html:root --bs-font-sans-serif)는
      2026-07-26 에 **fonts-ui.css 로 이동**했다(관리자·편집기·오류 페이지에도 같은 폰트를 적용하기 위해).
      산출 근거(타이 118% · 한글 106%)·커버리지 표·튜닝 방법 주석도 전부 그쪽에 있다.
      로드는 각 화면의 <head> 가 fonts-ui.css 를 직접 link 한다(base.html · pages/* · error/*). */

/* ══════════════════════════════════════════════════════════════════════════
 * (M1·M2) 한국어 동시 출력(병기) 모드 전용 보정
 *   표식은 `ui-i18n.js` 가 루트에 다는 `data-ui-dual="1"` 이다.
 *   ⚠ **한국어 단독 모드에는 절대 걸리지 않아야 한다** — 속성 유무로 스코프한다(D23 폰트 크기 불변).
 *   ⚠ 두 규칙 모두 **높이·줄바꿈만** 손댄다. font-size 는 건드리지 않는다.
 * ══════════════════════════════════════════════════════════════════════════ */

/* M1 — 병기 시 라벨이 1줄/2줄로 갈려 나란한 입력칸이 최대 19px 어긋났다(독일어 4행).
   라벨 높이를 2줄로 고정하고 아래쪽 정렬로 붙여 입력칸 top 을 맞춘다. */
html[data-ui-dual="1"] #dataForm label.form-label {
    min-height: 2.6em;
    display: flex;
    align-items: flex-end;
}

/* M2(a) — 병기 시 `.cs-display` 가 한 줄로 잘려 **고객에게 보여줄 외국어 부분만** 사라졌다.
   병기일 때만 2줄을 허용한다. 폭(240px·15px)은 사용자 확정값이라 건드리지 않는다. */
html[data-ui-dual="1"] .cs-display {
    white-space: normal;
    line-height: 1.25;
}