/* 다국어 — 언어 선택 UI, 제안·폴백 배너, 언어별 글꼴.
   설계 문서: docs/common/i18n-design.md 3.3~3.6, 6.1, 8.1
   킬 스위치가 켜졌을 때만 로드된다(fragments/head.html). */

/* ===== 언어별 글꼴 (8.1) =====
   한국어에는 규칙을 두지 않는다 — 다국어 작업이 한국어 화면의 글꼴·줄 높이를 바꾸면 회귀를 가리기 어렵다.
   페이지 기본값은 Bootstrap 변수로 바꾼다. <html> 에 font-family 를 직접 주면 Bootstrap 의 body 규칙이 다시 덮는다.
   스택은 한자가 없는 라틴 글꼴 → 그 언어의 CJK 글꼴 → system-ui 순이다. system-ui 가 앞이면 한국어 Windows 에서
   맑은 고딕으로 풀려 일본어·중국어 한자가 한국 자형으로 나온다. */
:root:lang(ja) {
    --bs-body-font-family: -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, "Noto Sans JP", system-ui, sans-serif;
}

:root:lang(zh-Hans) {
    --bs-body-font-family: -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

/* 언어가 바뀌는 블록(언어 선택 항목, 본문)은 lang 속성이 달린 그 요소에만 건다. 맨 :lang(ja) 는 그 언어 안의 모든
   요소에 맞아 Bootstrap 컴포넌트 규칙과 명시도가 부딪힌다. */
[lang]:not(html):lang(ja) {
    font-family: -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Yu Gothic UI", Meiryo, "Noto Sans JP", system-ui, sans-serif;
}

[lang]:not(html):lang(zh-Hans) {
    font-family: -apple-system, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
}

/* 번체 본문(CUVT)은 UI 언어가 아니어도 번역본으로 나온다. */
[lang]:not(html):lang(zh-Hant) {
    font-family: -apple-system, "Segoe UI", Roboto, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
}

/* 한국어 화면용 word-break: keep-all 은 띄어쓰기가 없는 일본어·중국어 문장에서 줄바꿈할 곳을 없앤다
   (docs/common/i18n-design.md 8.2). */
[lang]:not(html):lang(ja),
[lang]:not(html):lang(zh-Hans),
[lang]:not(html):lang(zh-Hant) {
    word-break: normal;
}

/* ===== A — 상단바 언어 버튼과 팝오버 ===== */
.language-picker {
    position: relative;
    display: flex;
    align-items: center;
}

.language-picker-toggle {
    gap: 0.3rem;
    min-width: 44px;
    padding: 0.375rem 0.6rem;
    font-size: 0.95rem;
    line-height: 1.5;
    border-radius: 0.375rem;
    white-space: nowrap;
}

.language-picker-globe {
    font-size: 1rem;
    line-height: 1;
}

.language-picker-chevron {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

/* 모바일 상단바는 이미 꽉 차 있다(3.2). 계정 버튼이 있는 화면에서는 계정 시트(B)가 진입점이고,
   계정 버튼이 숨은 화면에서만 그 자리에 아이콘 하나로 들어간다. */
@media (max-width: 767.98px) {
    .language-picker--desktop {
        display: none;
    }

    .language-picker-toggle {
        max-width: 44px;
        flex: 0 0 44px;
        padding: 0.375rem 0.5rem;
    }

    .language-picker-current,
    .language-picker-chevron {
        display: none;
    }
}

/* 기준 상자가 버튼만 한 .language-picker 라서 폭을 정하지 않으면 min-width 에서 멈춘다. 그 폭에서는
   "简体中文 Chinese (Simplified)" 줄이 넘쳐, 글자마다 끊을 수 있는 한자가 "简体中 / 文" 으로 갈린다. */
.language-picker-popover {
    position: absolute;
    top: calc(100% + 0.35rem);
    right: 0;
    z-index: 1040;
    width: max-content;
    min-width: 220px;
    max-width: calc(100vw - 1.5rem);
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-bg-base);
    box-shadow: 0 10px 18px var(--color-shadow);
}

html[data-theme="dark"] .language-picker-popover {
    background: var(--color-bg-elevated);
}

.language-picker-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.language-picker-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.45rem 0.65rem;
    border-radius: 0.4rem;
    color: var(--color-text-primary);
    font-size: 0.95rem;
    text-decoration: none;
}

.language-picker-option:focus {
    outline: none;
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
}

html[data-theme="dark"] .language-picker-option:focus {
    background: var(--color-bg-elevated-strong);
}

@media (hover: hover) and (pointer: fine) {
    .language-picker-option:hover {
        background: var(--color-bg-elevated);
        color: var(--color-text-primary);
    }

    html[data-theme="dark"] .language-picker-option:hover {
        background: var(--color-bg-elevated-strong);
    }
}

.language-picker-check {
    flex: 0 0 0.9rem;
    color: var(--color-accent);
    visibility: hidden;
}

.language-picker-option[aria-current="true"] .language-picker-check,
.language-picker-option[aria-checked="true"] .language-picker-check {
    visibility: visible;
}

/* 태극기·일장기의 흰 바탕이 밝은 팝오버에 묻히지 않게 테두리를 둔다 */
.language-picker-flag {
    flex: 0 0 auto;
    width: 21px;
    height: 14px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px var(--color-border);
}

.language-picker-autonym {
    font-weight: 700;
    white-space: nowrap;
}

/* 줄이 모자라면(280px 폭, 큰 글자) 이름만 공백·괄호에서 내린다. nowrap 이면 시트 밖으로 넘친다. */
.language-picker-name {
    margin-left: auto;
    padding-left: 1rem;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    word-break: keep-all;
}

/* 상단바가 없는 화면(로그인·가입·동의·오류) — 화면 맨 위 오른쪽. 띄우지 않고 한 줄을 차지하게 둔다:
   바로 아래의 제안 배너 닫기(✕)가 오른쪽 끝에 있어 겹친다. z-index 는 팝오버가 본문(로그인 카드) 위로 오게 한다. */
.language-floating {
    position: relative;
    z-index: 1030;
    display: flex;
    justify-content: flex-end;
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) calc(0.75rem + env(safe-area-inset-right, 0px)) 0 0.75rem;
}

/* ===== B — 계정 시트 안의 언어 항목과 서브메뉴 =====
   접기/펼치기·들여쓰기는 바로 아래 "테마" 서브메뉴(top-nav.css)와 같은 값을 쓴다. */
.top-nav-language-entry {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    background: transparent;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.top-nav-language-entry-label {
    flex: 1 1 auto;
    min-width: 0;
}

.top-nav-language-entry-current {
    flex: 0 0 auto;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

.top-nav-language-entry-chevron {
    flex: 0 0 auto;
    font-size: 1rem;
    line-height: 1;
    color: var(--color-text-secondary);
    transition: transform 200ms ease;
}

.top-nav-language-entry[aria-expanded="true"] .top-nav-language-entry-chevron {
    transform: rotate(180deg);
}

.top-nav-language-submenu {
    overflow: hidden;
    max-height: 0;
    visibility: hidden;
    transition: max-height 220ms ease, visibility 0s linear 220ms;
}

/* 모바일 시트의 48px 행 다섯에, 좁은 폭·큰 글자에서 두 줄로 내려앉는 이름까지 넉넉히. 모자라면 마지막 항목이 잘린다 */
.top-nav-language-submenu.is-open {
    max-height: 480px;
    visibility: visible;
    transition: max-height 220ms ease, visibility 0s;
}

/* display 는 .top-nav-account-item(block)과 명시도가 같아 파일 순서에 기대지 않도록 여기서 다시 준다 */
.top-nav-language-submenu .language-picker-option {
    display: flex;
    padding-left: 1.6rem;
    font-size: 0.9rem;
}

.top-nav-language-submenu .language-picker-name {
    text-align: end;
}

.top-nav-language-submenu .language-picker-option[aria-checked="true"] {
    color: var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
    .top-nav-language-entry-chevron,
    .top-nav-language-submenu,
    .top-nav-language-submenu.is-open {
        transition: none;
    }
}

/* ===== C — 푸터 언어 줄 ===== */
.footer-language {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin-top: 12px;
    font-size: 0.9rem;
}

.footer-language-list {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-language-list li + li::before {
    content: "·";
    margin: 0 0.45rem;
    color: var(--color-text-secondary);
}

.footer-language-list a {
    color: var(--color-text-primary);
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .footer-language-list a:hover {
        text-decoration: underline;
    }
}

/* ===== D — 제안 배너, 폴백 안내 ===== */
.language-suggest-banner,
.content-fallback-banner {
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-primary);
    font-size: 0.92rem;
    margin-bottom: 1rem;
}

/* 두 배너가 함께 뜨면 한 덩어리로 붙이고, 본문과의 간격은 아래 배너가 맡는다. */
.language-suggest-banner:has(+ .content-fallback-banner) {
    margin-bottom: 0;
}

.language-suggest-banner-inner,
.content-fallback-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.language-suggest-banner-inner {
    position: relative;
    padding-right: 2.75rem;
}

.language-suggest-banner-text,
.content-fallback-banner-text {
    flex: 1 1 14rem;
    min-width: 0;
    margin: 0;
}

.language-suggest-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.language-suggest-banner-close {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    cursor: pointer;
}

@media (hover: hover) and (pointer: fine) {
    .language-suggest-banner-close:hover {
        background: var(--color-bg-elevated-strong);
    }
}