/**
 * 다국어 전환 — 스켈레톤 로딩 + 국기 버튼 스타일
 */

/* ─── 언어별 폰트 패밀리 ─────────────────────────────────────
   JS 가 document.documentElement.lang 을 바꿔주면 자동 적용됨.
   한국어 웹폰트가 한자를 완전히 커버하지 못해 시스템 fallback 이 끼어
   글꼴 굵기·자폭이 들쭉날쭉 보이는 현상을 방지.
   Google Noto Sans 는 CJK 통합 커버리지가 가장 안정적. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

/* Renewal_2025/*.css 와 Layout.css 가 자손 selector(`#Header .lnb a`, `.brand_box .txt` 등)
   에 font-family 를 직접 박아두어 lang-only 규칙을 override 함.
   `*` 자손까지 적용하고 !important 로 덮어써서 일관 적용 보장. */
html[lang="ja"],
html[lang="ja"] body,
html[lang="ja"] * {
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                 "Yu Gothic", "Meiryo", "ヒラギノ角ゴ Pro", sans-serif !important;
}

html[lang="zh-CN"],
html[lang="zh-CN"] body,
html[lang="zh-CN"] * {
    font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
                 "微软雅黑", "SimHei", sans-serif !important;
}

html[lang="en"],
html[lang="en"] body,
html[lang="en"] * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif !important;
}
/* 한국어는 기존 사이트 기본 폰트 스택 그대로 (설정 안 함) */


/* ─── 사업장 소개 — 비한국어 표시 최적화 ─────────────────────────────
   레거시 EN/JP/CN 페이지는 주소를 1개만 노출했음.
   한국어는 도로명/지번 2개 모두 보여주지만, 지번은 국내 주소체계라 다른 언어권에선 무의미.
   Businesses(본사/공장)는 .businessesInfo, Businesses_Sales(영업)는 .salesInfo 구조. */
html:not([lang="ko"]) .businessesInfo li:has(strong[data-i18n-ui="company.biz.label.addrLot"]),
html:not([lang="ko"]) .businessesInfo li:has(strong[data-i18n-ui-html="company.biz.label.addrLot"]),
html:not([lang="ko"]) .salesInfo li:has(strong[data-i18n-ui="company.biz.label.addrLot"]),
html:not([lang="ko"]) .salesInfo li:has(strong[data-i18n-ui-html="company.biz.label.addrLot"]) {
    display: none !important;
}

/* 영업/판매 카드(.salesItem) — 영문/일문/중문 주소가 길어 카드 높이를 넘어 잘림.
   레거시는 float+고정 150px 높이라 카드마다 높이 다르면 3열 그리드가 계단식으로 깨짐.
   비한국어는 grid 레이아웃으로 전환해 각 행의 가장 긴 카드에 맞춰 정렬되도록 함. */
html:not([lang="ko"]) .salesList_wrap {
    overflow: visible !important;
}
html:not([lang="ko"]) .salesList {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    column-gap: 0;
    row-gap: 20px;
    overflow: visible !important;
}
html:not([lang="ko"]) .salesList li.item {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
}
html:not([lang="ko"]) .salesList li.item .salesItem {
    width: auto !important;
    height: auto !important;
    min-height: 150px;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 12px;
    box-sizing: border-box;
}
html:not([lang="ko"]) .salesInfo li span {
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}


/* ─── 다국어 전환 오버플로우 방어 ─────────────────────────────────────
   CJK(일본어/중국어)·라틴(영어)은 한글 기준으로 잡힌 고정폭 카드에
   살짝 오버플로우하는 케이스가 있음. 비한국어 때 컨테이너를 넘지
   않도록 줄바꿈·박스 컨테인먼트를 강제. */
html:not([lang="ko"]) .section_txt,
html:not([lang="ko"]) .itemCont,
html:not([lang="ko"]) .headLine,
html:not([lang="ko"]) .greeting_headLine,
html:not([lang="ko"]) .h1_summary,
html:not([lang="ko"]) .sub_txt,
html:not([lang="ko"]) .businessesDesc,
html:not([lang="ko"]) .businessesInfo,
html:not([lang="ko"]) .businessesInfo li,
html:not([lang="ko"]) .businessesInfo span {
    word-break: break-word;
    overflow-wrap: anywhere;
    max-width: 100%;
    box-sizing: border-box;
}

/* 사업장 카드 컨테이너도 폭 제한 */
html:not([lang="ko"]) .businessesItem {
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

/* 앵커 메뉴 — 영어권 이름이 길어 줄바꿈 될 때 위아래 겹침 방지 */
html:not([lang="ko"]) .anchorMenu {
    row-gap: 10px;
}
html:not([lang="ko"]) .anchorMenu li {
    height: auto !important;
    min-height: 62px;
    line-height: 1.3 !important;
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center;
}
html:not([lang="ko"]) .anchorMenu li a,
html:not([lang="ko"]) .anchorMenu li a span {
    white-space: normal !important;
    line-height: 1.3 !important;
    word-break: break-word;
    display: block;
    width: 100%;
}

/* CI/Vision/인권 3-column row 카드의 자식이 컬럼 폭을 넘지 않도록 */
html:not([lang="ko"]) .row [class*="col"] {
    box-sizing: border-box;
    min-width: 0;
    overflow-wrap: break-word;
}
html:not([lang="ko"]) .row [class*="col"] .section {
    box-sizing: border-box;
    max-width: 100%;
    overflow: hidden;
}

/* Company 오버뷰 bento 카드: 카드 내부 본문 폰트 축소 + 줄간격 타이트 */
html:not([lang="ko"]) .section_company01 .itemCont,
html:not([lang="ko"]) .section_company02 .itemCont,
html:not([lang="ko"]) .section_company03 .itemCont {
    font-size: 0.92em;
    line-height: 1.45;
}

/* History 타임라인(본문 요약 렌더)에서 날짜와 설명이 끊기지 않도록
   — 각 언어별 번역에   처리 병행 */
html:not([lang="ko"]) [data-i18n-ui-html="company.overview.history.body"] {
    font-size: 0.86em;
    line-height: 1.4;
}


/* ─── 원본이 "버튼 직접 텍스트" 였던 요소를 <span data-i18n-ui> 로 감싸서
       부모의 <span> 전역 CSS 규칙이 적용되어 스타일이 깨지는 것을 복원 ─── */

/* 브랜드 탭 상단 한글 부분 — 버튼 직접 텍스트 스타일 유지 (굵은 검정) */
.section_wrap .brand_tabs .tab > span[data-i18n-ui^="brand.group."],
.main .section_wrap .brand_tabs .tab > span[data-i18n-ui^="brand.group."] {
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* ─── CSS 버튼 (이미지 배너 대체) ─────────────────────────────────
   이미지(.gif/.png) 로 렌더되던 배너/다운로드 버튼을 CSS 로 재현.
   다국어 전환·모바일 반응형·접근성 모두 개선. */

/* Footer 배너 버튼 (인재채용) — 기존 이미지 사이즈·톤 유지 */
.ban_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 185px;
    height: 40px;
    padding: 0 14px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}
.ban_btn--recruit {
    color: #fff;
    background: #3a8cd2;
    border: 1px solid #3a8cd2;
}
.ban_btn--recruit:hover { background: #2a7cc2; color: #fff; }
.ban_btn:focus-visible { outline: 2px solid #ffc107; outline-offset: 2px; }

@media all and (max-width: 660px) {
    #Footer .footer_quickLink .familySite_wrap .ban_site li {
        width: 100%;
        margin: 0 0 6px 0 !important;
    }
    .ban_btn {
        width: 100%;
        height: 42px;
        font-size: 14px;
    }
}

/* 지속가능경영 보고서 다운로드 버튼 */
.down_btn_wrap .down_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 110px;
    height: 36px;
    padding: 0 16px;
    border-radius: 4px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}
/* (이전: ::before ↓ 아이콘) — 텍스트 단독 노출 요청으로 제거 */
.down_btn_wrap .down_btn--kor { background: #0078c2; }
.down_btn_wrap .down_btn--kor:hover { background: #005e9a; }
.down_btn_wrap .down_btn--eng { background: #2a3a6b; }
.down_btn_wrap .down_btn--eng:hover { background: #1d2747; }
.down_btn_wrap .down_btn:focus-visible { outline: 2px solid #ffc107; outline-offset: 2px; }

/* 다운로드 버튼 폭 기존 이미지 크기(95px) 재정의 */
.tab_wrap2 > .down_btn_wrap ul li .down_btn {
    width: auto;
    min-width: 100px;
}

@media all and (max-width: 768px) {
    .down_btn_wrap .down_btn {
        min-width: 100px;
        height: 34px;
        font-size: 12.5px;
        padding: 0 12px;
    }
}


/* ─── 스켈레톤 (전환 중) ─────────────────────────────────────
   배경색을 반투명 그라디언트로 깔아 배경 이미지/어두운 카드에서도
   과도하게 튀지 않도록 함. 텍스트는 살짝 투명화 + shimmer 만 유지. */
[data-i18n].i18n-loading,
[data-i18n-ui].i18n-loading,
[data-i18n-ui-html].i18n-loading {
    color: rgba(0, 0, 0, 0.25) !important;
    background: linear-gradient(
        90deg,
        rgba(128, 128, 128, 0.10) 25%,
        rgba(128, 128, 128, 0.18) 37%,
        rgba(128, 128, 128, 0.10) 63%
    );
    background-size: 400% 100%;
    border-radius: 2px;
    animation: i18n-shimmer 1.2s ease-in-out infinite;
    pointer-events: none;
    user-select: none;
}

/* 어두운 카드 위(흰 텍스트 원래 색)에서는 텍스트를 살짝 밝게 */
.item_black .i18n-loading,
.item_blue .i18n-loading,
.item_black [data-i18n-ui].i18n-loading,
.item_blue [data-i18n-ui].i18n-loading {
    color: rgba(255, 255, 255, 0.30) !important;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.10) 25%,
        rgba(255, 255, 255, 0.18) 37%,
        rgba(255, 255, 255, 0.10) 63%
    );
    background-size: 400% 100%;
}

[data-i18n-src].i18n-loading {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

@keyframes i18n-shimmer {
    0%   { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* ─── 국기 선택 버튼 ─────────────────────────────────────────
   기본(데스크톱) : 4개 국기 가로 pill 노출. 트리거는 숨김.
   모바일(<=768px) : 현재 언어 트리거만 노출, 클릭 시 메뉴 펼침.
*/
.i18n-lang-switcher {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
}

/* 트리거(현재언어 보기) - 데스크톱 숨김 */
.i18n-lang-current {
    display: none;
}

/* 4개 국기 메뉴 */
.i18n-lang-menu {
    display: flex;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.i18n-lang-menu button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    min-width: 52px;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    transition: all 0.15s ease;
}

.i18n-lang-menu button:hover {
    background: #f2f4f7;
    color: #111;
}

.i18n-lang-menu button.is-active {
    background: #1a73e8;
    border-color: #1a73e8;
    color: #fff;
}

.i18n-lang-menu button.is-active:hover {
    background: #1558b8;
}

.i18n-lang-switcher .flag {
    font-size: 14px;
    line-height: 1;
}

/* ─── 모바일 : 햄버거 버튼 왼쪽에 collapsed 트리거 ─── */
@media all and (max-width: 768px) {
    .i18n-lang-switcher {
        /* #Header btn_lnb_toggle 가 top:27px / right:20px / 28x24
           왼쪽 여백을 둬 배치. 겹치지 않도록 right:60px */
        top: 23px;
        right: 60px;
    }

    .i18n-lang-current {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 5px 10px 5px 12px;
        background: rgba(255, 255, 255, 0.97);
        border: 1px solid #ddd;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 700;
        color: #1a73e8;
        cursor: pointer;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
        line-height: 1;
    }

    .i18n-lang-current .flag {
        font-size: 15px;
    }

    .i18n-lang-current .caret {
        font-size: 10px;
        color: #888;
        margin-left: 2px;
        transition: transform 0.15s ease;
    }

    .i18n-lang-switcher.is-open .i18n-lang-current {
        background: #1a73e8;
        border-color: #1a73e8;
        color: #fff;
    }

    .i18n-lang-switcher.is-open .i18n-lang-current .caret {
        color: #fff;
        transform: rotate(180deg);
    }

    /* 메뉴는 기본 숨김, 열릴 때만 노출 (드롭다운) */
    .i18n-lang-menu {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 6px;
        border-radius: 12px;
        min-width: 120px;
    }

    .i18n-lang-switcher.is-open .i18n-lang-menu {
        display: flex;
    }

    .i18n-lang-menu button {
        justify-content: flex-start;
        width: 100%;
        min-width: 0;
        padding: 8px 12px;
        font-size: 14px;
    }
}

/* 해외 사업장 큰 카드 (businessesList2) — 비한국어일 때 컨텐츠 잘림 방지 */
html:not([lang="ko"]) .businessesList2 li.item .businessesItem {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 20px;
}
html:not([lang="ko"]) .businessesList2 li.item .businessesItem .businessesInfo li {
    display: block !important;
}
html:not([lang="ko"]) .businessesList2 li.item .businessesItem .tRow {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
}
html:not([lang="ko"]) .businessesList2 li.item .businessesItem .tRow strong {
    flex: 0 0 auto;
    min-width: 80px;
}
html:not([lang="ko"]) .businessesList2 li.item .businessesItem .tRow span {
    flex: 1 1 60%;
    word-break: break-word;
}


/* ─── 브랜드 리스트 (Brand_List) — tagline 줄바꿈 대응 ─────────────
   `.logo` 는 background-image 기반 한국어 로고.
   비한국어에서는 i18n-swap.js 가 /Images/Renewal_2025/logo/{lang}/ 경로로
   교체 시도하며, 해당 파일이 없으면 한국어 원본을 유지한다.
   텍스트는 `text-indent:-9999px` 로 계속 숨겨둔다. */
html:not([lang="ko"]) .brand_box .txt {
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.35;
}
/* 동원 큰카드의 2열 슬로건(좌|우)은 중앙 구분자 포함 flex 정렬 */
html:not([lang="ko"]) .brand_box.col_1 .txt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 8px;
}