/* navbar-responsive.css — 최상단 헤더 좁은 폭 대응
 *
 * 신고(사용자): "최상단헤더 좁아지면 드롭박스랑 한국어 동시출력도 아이콘 같은 형태로
 *                바꾸던지 ui,ux 다 개박살나있네"
 *
 * 실측 원인(헤드리스 Chrome, joytel):
 *   `한국어 동시 출력` 버튼은 마크업의 `d-none d-lg-inline-block` 으로 이미 좁은 폭에서
 *   아이콘(41px)이 되는데, **언어 드롭박스만 어떤 폭에서도 240px 고정**이었다.
 *   그래서 폭이 줄면 제목이 밀려 아래처럼 무너졌다.
 *     600px : 제목 113.7×22.9 (1줄, 아직 정상)
 *     540px : 제목 108×45.9  (2줄로 꺾임)
 *     430px : 제목 28.8×114.7 (한 글자씩 5줄) · top=-3.9 (헤더 위로 삐져나감)
 *             navbar scrollWidth 405 > clientWidth 398 = 7px 넘침
 *     375px : 62px 넘침
 *
 * 조치: **두 컨트롤을 같은 브레이크포인트(768px, Bootstrap md)에서 같이 아이콘화**한다.
 *   - <768px : 언어 드롭박스 = 지구본 + 언어 코드(약 68px), 동시 출력 = 아이콘만
 *   - ≥768px : **지금 그대로**(드롭박스 240px·글자 15px — 6세션 사용자 확정값, 손대지 않음)
 *   브레이크포인트를 540 이 아니라 768 로 잡은 이유: 실측 붕괴 지점이 540~430 이고
 *   병기(한국어 동시 출력) 를 켜면 제목이 길어져 더 일찍 무너진다. 새 값을 만들지 않고
 *   기존 Bootstrap md 를 써서 약 230px 의 여유를 둔다.
 *
 * ⚠ 명시도 주의: 이 프로젝트는 프로젝트 CSS 가 테마(core.css)보다 **먼저** 로드된다.
 *   그래서 모든 규칙을 `#layout-navbar`(id) 로 시작해 (1,2,0) 이상으로 잡았다.
 *   특히 제목 규칙은 ui-i18n.css 의 `#layout-navbar .fw-semibold`(1,1,0)와 동률이 되면
 *   로드 순서에 좌우되므로 `.navbar-nav` 를 한 단계 더 끼워 (1,2,0) 으로 이겨둔다.
 *   (7세션에 "로드 순서에 눌려 죽은 선언" 사고가 2회 있었다.)
 *
 * ⚠ custom-select.js / common.css / ui-i18n.css 는 건드리지 않는다(다른 담당 작업 중).
 *   닫힌 컨트롤 `.cs-display` 의 텍스트는 JS 가 만든 텍스트 노드 하나뿐이라
 *   `font-size:0` 으로 감추고 `::before` 로 언어 코드를 넣는다. 자식 엘리먼트가 없어 안전하다.
 *   펼친 목록 `.cs-menu` 는 `.cs-display` 의 형제라 font-size 를 상속받지 않는다(전체 라벨 유지).
 */

/* ────────────────────────────────────────────────────────────────
 * ⓪ 언어 드롭박스 번역제외 래퍼 — 레이아웃에 영향 0
 *    fragments/navbar.html 의 `<span class="ui-lang-widget" data-no-i18n>` 은
 *    **번역 제외 범위를 위젯에만 한정하려고** 넣은 것이다(예전에는 <li> 전체에 걸려
 *    옆 `한국어 동시 출력` 버튼까지 번역에서 빠졌다).
 *    `display:contents` 로 상자를 만들지 않으므로 `.ui-lang-side` 의 flex 자식 구성은
 *    [지구본][.cs-wrap][버튼] 그대로다 — ui-i18n.css 의 `.ui-lang-side .cs-wrap{flex:0 0 auto;width:15rem}`
 *    와 아래 ②의 좁은 폭 규칙이 전부 그대로 걸린다(전부 자손 셀렉터).
 * ──────────────────────────────────────────────────────────────── */
#layout-navbar .ui-lang-side > .ui-lang-widget {
    display: contents;
}

/* ────────────────────────────────────────────────────────────────
 * ① 제목이 짓눌리지 않게 — 아이콘·제목을 가로로, 넘치면 말줄임
 *    navbar-nav 는 Bootstrap 기본이 세로 flex 라 확장 브레이크포인트(xl) 아래에서는
 *    아이콘이 제목 **위**로 올라가 헤더가 2줄이 된다(실측 1024 이하 top 31.5→42.4).
 *    가로로 되돌리고, 폭이 모자라면 줄바꿈 대신 말줄임으로 흡수한다.
 *    (ui-i18n.css 의 `overflow-wrap:anywhere` 가 한 글자씩 쪼개던 것을 이 폭에서만 막는다.)
 * ──────────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    /* 말줄임이 실제로 걸리려면 **flex 사슬 전체**가 줄어들 수 있어야 한다.
       중간에 min-width:auto(기본값)가 하나라도 있으면 그 지점에서 축소가 멈추고
       헤더가 통째로 넘친다 — 실측: 375px + 병기 ON 에서 navbar 가 102px 넘쳤다.
       ⚠ 여기에 overflow:hidden 을 주면 안 된다. 언어 목록(.cs-menu)이 잘린다. */
    #layout-navbar .navbar-nav-right {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* 제목 블록: 아이콘·제목을 가로로 두고, 남는 폭이 없으면 이쪽이 줄어든다 */
    #layout-navbar .navbar-nav-right > .navbar-nav:not(.flex-row) {
        flex-direction: row;
        align-items: center;
        min-width: 0;
        flex: 0 1 auto;
    }

    #layout-navbar .navbar-nav .fw-semibold {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: normal;
    }
}

/* ────────────────────────────────────────────────────────────────
 * ①-b 제목과 동시출력 라벨의 폭 경합 — **줄어드는 쪽을 라벨로 고정**
 *
 * 배경: `한국어 동시 출력` 버튼 라벨이 번역되기 시작하면서(navbar.html 의 data-no-i18n 범위 수정)
 *       라벨이 최대 2.4배가 됐다. 이전에는 오른쪽 묶음이 `flex:0 0 auto`(축소 금지)라
 *       남는 폭을 **제목이 전부 뒤집어썼다**.
 *
 * 실측(uplusuMobile, 임시 역어 주입, 조치 전):
 *     768  mn+병기 : 제목 **25.7px** / 버튼 321.7 / 넘침 0   ← 제목 사실상 소멸
 *     768  id+병기 : 제목 **50.7px** / 버튼 296.7 / 넘침 0
 *     768  mn      : 제목 118.6 / 버튼 228.8
 *     1024 mn+병기 : 제목 261.3 (여유 있음)
 *     430/375      : 라벨이 아이콘으로 접혀 언어와 무관하게 제목 147.1 / 92.2 (영향 없음)
 *   → 문제 구간은 **라벨이 보이는 ≥768** 뿐이다.
 *
 * 판단: 판매자가 "지금 어느 서식지인가"를 아는 것이 항상 우선이다. 긴 라벨은 부가 정보이고
 *       아이콘 + title/aria-label 로 의미가 남는다. 그래서 **제목에 바닥을, 라벨에 양보를** 준다.
 *
 * 제목 최소 폭 = **10rem(160px)** — 근거 두 가지:
 *   · 가장 긴 서식지 제목 "유모바일(미디어로그) 가입신청서" 전체가 207px(15px semibold 실측).
 *     160px 이면 서식지를 특정하는 앞부분이 남는다.
 *   · 이미 사용자가 수용한 아이콘 모드(430px)에서 제목이 실제로 147px 로 표시된다.
 *     그 값보다 좁아지지 않게 잡은 하한이다.
 *
 * ⚠ <768 에는 걸지 않는다 — 375px 에서 제목이 물리적으로 92px 밖에 안 나오므로
 *   바닥을 걸면 헤더가 넘친다(그 구간은 라벨이 이미 아이콘이라 경합 자체가 없다).
 * ⚠ 드롭박스는 `.ui-lang-side .cs-wrap{flex:0 0 auto;width:15rem}`(ui-i18n.css)로 보호돼 있어
 *   이 규칙으로 240px 이 줄어들지 않는다 — 사용자 확정값이므로 손대지 않는다.
 * ──────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
    /* 제목 텍스트의 바닥. 이 폭 아래로는 절대 밀리지 않는다. */
    #layout-navbar .navbar-nav .fw-semibold {
        min-width: 10rem;
    }

    /* 남는 폭이 모자라면 **오른쪽 묶음이 먼저 양보**한다(예전 flex:0 0 auto 를 대체). */
    #layout-navbar .navbar-nav-right > ul.navbar-nav {
        flex: 0 1 auto;
        min-width: 0;
    }
    #layout-navbar .ui-lang-side {
        min-width: 0;
    }

    /* 버튼은 아이콘 크기까지만 줄어든다(그 아래로 줄면 아이콘이 잘린다).
       라벨은 말줄임으로 흡수 — .ui-dual-btn 은 inline-flex 라 자식에 min-width:0 이 필요하다. */
    #layout-navbar .ui-lang-side .ui-dual-btn {
        flex: 0 1 auto;
        /* 아이콘만 남았을 때의 하한. 2026-07-29 버튼 확대(아이콘 20px · 좌우 패딩 14.4px)에 맞춰
           2.35rem → 3.2rem 으로 올렸다. 옛 값을 그대로 두면 확대된 아이콘이 잘린다. */
        min-width: 3.2rem;
        overflow: hidden;
    }
    #layout-navbar .ui-lang-side .ui-dual-btn > i {
        flex: 0 0 auto;
    }
    #layout-navbar .ui-lang-side .ui-dual-btn > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ────────────────────────────────────────────────────────────────
 * ② <768px — 언어 드롭박스를 아이콘 형태로 축소
 *    닫힌 컨트롤: [지구본(마크업에 이미 있음)] [언어코드 ▾]
 *    펼친 목록  : 전체 라벨 그대로(`English · 미국`) — 선택 가능해야 하므로 축소 금지.
 * ──────────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    #layout-navbar .ui-lang-side .cs-wrap {
        width: auto;
        flex: 0 0 auto;
    }

    #layout-navbar .ui-lang-side .cs-display {
        width: 4.25rem;
        padding-left: 0.5rem;
        padding-right: 1.5rem;      /* .form-select 화살표 자리 */
        font-size: 0;               /* JS 가 넣은 긴 라벨 텍스트만 감춘다 */
        justify-content: flex-start;
    }

    /* 현재 언어 코드 — 값은 ui-i18n.js 가 유지하는 <html lang> 에서 온다(별도 상태 없음). */
    #layout-navbar .ui-lang-side .cs-display::before {
        content: "LANG";
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1;
        letter-spacing: 0.02em;
    }

    html[lang="ko"]      #layout-navbar .ui-lang-side .cs-display::before { content: "KO"; }
    html[lang="en"]      #layout-navbar .ui-lang-side .cs-display::before { content: "EN"; }
    html[lang="vi"]      #layout-navbar .ui-lang-side .cs-display::before { content: "VI"; }
    html[lang="zh"]      #layout-navbar .ui-lang-side .cs-display::before { content: "ZH"; }
    html[lang="zh-Hant"] #layout-navbar .ui-lang-side .cs-display::before { content: "ZHT"; }
    html[lang="ja"]      #layout-navbar .ui-lang-side .cs-display::before { content: "JA"; }
    html[lang="ru"]      #layout-navbar .ui-lang-side .cs-display::before { content: "RU"; }
    html[lang="th"]      #layout-navbar .ui-lang-side .cs-display::before { content: "TH"; }
    html[lang="uz"]      #layout-navbar .ui-lang-side .cs-display::before { content: "UZ"; }
    html[lang="tl"]      #layout-navbar .ui-lang-side .cs-display::before { content: "TL"; }
    html[lang="id"]      #layout-navbar .ui-lang-side .cs-display::before { content: "ID"; }
    html[lang="ms"]      #layout-navbar .ui-lang-side .cs-display::before { content: "MS"; }
    html[lang="hi"]      #layout-navbar .ui-lang-side .cs-display::before { content: "HI"; }
    html[lang="fr"]      #layout-navbar .ui-lang-side .cs-display::before { content: "FR"; }
    html[lang="de"]      #layout-navbar .ui-lang-side .cs-display::before { content: "DE"; }
    html[lang="mn"]      #layout-navbar .ui-lang-side .cs-display::before { content: "MN"; }
    html[lang="my"]      #layout-navbar .ui-lang-side .cs-display::before { content: "MY"; }

    /* 펼친 목록은 전체 라벨 유지. 닫힌 컨트롤이 좁아졌으므로 오른쪽 끝에 맞춰 왼쪽으로 편다
       (그대로 두면 375px 에서 목록이 화면 밖으로 나간다). */
    #layout-navbar .ui-lang-side .cs-menu {
        font-size: 0.9375rem;       /* 닫힌 컨트롤의 font-size:0 과 무관하게 고정 */
        min-width: 13.5rem;
        left: auto;
        right: 0;
        white-space: nowrap;
    }

    /* 동시 출력 버튼은 마크업의 d-none d-md-inline-block 으로 라벨이 사라져 아이콘만 남는다.
       두 컨트롤의 시각 무게를 맞추기 위해 좌우 여백만 정리한다. */
    #layout-navbar .ui-lang-side .ui-dual-btn {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* (제거됨 2026-07-29) 「지구본과 드롭박스 사이 간격 축소」 규칙이 여기 있었다.
       셀렉터가 `.ui-lang-side > .bx-globe` 였는데 지구본이 <button> 으로 바뀌면서
       `.bx-globe` 는 그 버튼의 **자식**이 됐다 → 더 이상 매칭되지 않는 죽은 규칙이었고,
       드롭박스 자체도 ⑤에서 숨겼으므로 좁힐 간격이 애초에 없다.
       세 컨트롤의 간격은 이제 마크업의 `me-2`/`ms-2`(8px)로 통일돼 있다(navbar.html 참고). */
}

/* ────────────────────────────────────────────────────────────────
 * ③ 지구본 = 언어 옵션 열기 트리거 (사용자 지시 2026-07-29)
 *    ★ 마크업이 `<i role="button">` → **`<button class="btn btn-sm ui-dual-btn ui-lang-globe">`**
 *      로 바뀌었다("테스트 아이콘은 딱 커서 갖다대면 영역이 잡히는데 지구본도 그렇게 해줘").
 *      맨 <i> 는 패딩·테두리·hover 가 없어 누를 수 있는 영역이 **글리프뿐**이었다.
 *    → 크기·패딩·hover·active·초점 링은 **옆 「테스트 모드」 버튼과 같은 `.ui-dual-btn`** 이
 *      전부 제공한다. 그래서 예전에 여기 있던 `cursor`·`:focus-visible` 보정은 **필요 없어져 제거**했다.
 *      (버튼은 커서·초점 링을 테마에서 이미 받는다. 규칙을 남겨 두면 같은 것을 두 곳에서 정의하게 된다.)
 * ──────────────────────────────────────────────────────────────── */

/* ────────────────────────────────────────────────────────────────
 * ④ 판매자명 (사용자 지시 2026-07-29 — 「한국어 동시 출력」 오른쪽)
 *    이름 길이는 데이터라 예측할 수 없다 → **상한을 두고 말줄임**으로 흡수한다.
 *    상한을 두지 않으면 ①-b 에서 바닥을 깔아 둔 제목(10rem)을 다시 잠식한다.
 *    9rem 근거: 15px 기준 한글 약 9자(대부분의 이름)가 들어가고, 넘치면 말줄임 + title 로 읽힌다.
 *    `flex: 0 1 auto` — 폭이 모자라면 제목보다 **이쪽이 먼저** 줄어든다(부가 정보이므로).
 *    ⚠ 마크업이 `d-none d-md-flex` 라 <768px 에서는 아예 없다 — 그 구간 계산에 끼어들지 않는다.
 * ──────────────────────────────────────────────────────────────── */
#layout-navbar .ui-seller-name {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 9rem;
    font-size: 0.9375rem;
}

#layout-navbar .ui-seller-name > span {
    min-width: 0;
}

/* ────────────────────────────────────────────────────────────────
 * ⑤ 언어 컨트롤 = **지구본만** 남긴다 (사용자 지시 2026-07-29
 *    "지구본 오른쪽에 셀렉트박스 안보이게 하고 지구본 눌렀을때 옵션 뜨게 해")
 *
 *    ⚠ 숨기는 것은 **닫힌 컨트롤(`.cs-display`)뿐**이다. `.cs-wrap` 을 `display:none` 하면
 *      그 안에 있는 펼친 목록(`.cs-menu`)까지 사라져 지구본을 눌러도 아무것도 안 뜬다.
 *      wrap 은 폭 0 으로 남겨 두어 **목록의 기준 상자(position:relative)** 역할만 하게 한다.
 *
 *    ⚠ 목록은 `right:0`(오른쪽 정렬)으로 바꿔야 한다. `.cs-menu` 는 기본이 `left:0;right:0` 인데
 *      기준 상자 폭이 0 이 되면 over-constrained 로 **left 가 이겨** min-width(15rem)만큼
 *      오른쪽으로 뻗는다 → 헤더 우측에 있는 컨트롤이라 화면 밖으로 나간다.
 *      (<768px 블록이 이미 같은 이유로 `left:auto;right:0` 을 쓰고 있다.)
 *
 *    ⚠ 부수 효과: 닫힌 컨트롤이 사라지므로 **현재 언어 표기도 화면에서 사라진다**
 *      (<768px 의 `LANG` 코드 `::before` 규칙도 함께 죽는다 — 지우지 않고 남겨 뒀다).
 *      선택된 언어는 목록을 열면 체크 표시로 확인할 수 있다.
 *      현재 언어를 다시 보여야 하면 이 블록만 지우면 원상 복귀된다.
 * ──────────────────────────────────────────────────────────────── */
#layout-navbar .ui-lang-side .cs-display {
    display: none;
}

#layout-navbar .ui-lang-side .cs-wrap {
    width: 0;
    min-width: 0;
    flex: 0 0 auto;
    /* ★`align-self: stretch` 가 핵심이다 (사용자 지시 2026-07-29
       "옵션창을 조금 내려서 뜨게할없나? 지구본영역하단에").
       닫힌 컨트롤을 숨긴 뒤 이 wrap 은 **높이가 0** 이 됐다. 그런데 목록은
       `top: calc(100% + 4px)`(common.css) 로 wrap 기준이라, 0 높이 + 세로 가운데 정렬 때문에
       목록이 **버튼들 한복판에서** 시작했다. stretch 로 wrap 을 컨트롤 줄 높이만큼 늘려
       `100%` 가 「버튼 아래쪽 끝」을 가리키게 만든다. */
    align-self: stretch;
}

/* ────────────────────────────────────────────────────────────────
 * ⑤-b 제목 축소·말줄임을 **1200px 이상에도** 적용 (2026-07-29)
 *
 *    ① 의 축소·말줄임 규칙은 `@media (max-width: 1199.98px)` 안에만 있었다. 그래서 1200px 이상에서는
 *    제목 블록이 `min-width: auto`(기본값) 라 **내용 폭 아래로 줄어들지 못한다.**
 *    여태 문제가 없었던 것은 그 폭에서는 늘 여유가 있었기 때문이다.
 *
 *    지금 지구본이 현재 언어를 함께 표시하게 되면서 오른쪽 묶음이 커졌고, **병기 ON + 긴 언어명**
 *    조합에서 헤더가 넘쳤다 — 실측 1366px 3px · 1280px 89px 넘침(제목이 271.5px 에 고정된 채).
 *    → 축소 가능성과 말줄임을 전 폭으로 확장한다. 바닥은 ①-b 의 `min-width: 10rem` 이 그대로 지킨다.
 *    ⚠ ① 의 블록을 고치지 않고 여기에 따로 둔다 — 그 블록은 「xl 미만에서 세로로 꺾이는 것」을
 *      되돌리는 별개 목적이고, 조건(`:not(.flex-row)`)도 그 문맥에 맞춰 쓰여 있다.
 * ──────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
    #layout-navbar .navbar-nav-right {
        min-width: 0;
    }

    #layout-navbar .navbar-nav-right > .navbar-nav:not(.flex-row) {
        min-width: 0;
        flex: 0 1 auto;
    }

    #layout-navbar .navbar-nav .fw-semibold {
        min-width: 10rem;          /* ①-b 와 같은 바닥 */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ────────────────────────────────────────────────────────────────
 * ⑥ 지구본 옆 현재 언어 라벨의 **폭 상한** (2026-07-29)
 *    병기(한국어 동시 출력) ON 이면 라벨이 `인도네시아어 / Bahasa Indonesia` 처럼 2배가 된다.
 *    상한이 없으면 지구본 버튼이 253px 까지 자라 **헤더가 넘쳤다** — 실측 1366px 57px · 1280px 143px 넘침.
 *    (①-b 의 말줄임 규칙은 걸리지만 버튼 자체가 content 폭으로 커지는 것을 막지는 못한다.)
 *    → 9rem 에서 자르고, 전체 값은 버튼 `title` 로 읽는다(ui-i18n.js 가 넣는다).
 *      D25 통과 기준의 「텍스트 잘림 0 **또는** title 로 읽을 수단 제공」을 따른다.
 * ──────────────────────────────────────────────────────────────── */
#layout-navbar .ui-lang-side .ui-lang-globe > #uiLangCurrent {
    max-width: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#layout-navbar .ui-lang-side .cs-menu {
    left: auto;
    right: 0;
    min-width: 15rem;
    /* 버튼 아래 + 6px 여백. common.css 기본값(4px)보다 살짝 더 내려 지구본과 목록을 떼어 놓는다. */
    top: calc(100% + 6px);
}