/* ============================================================
   다국어(영어/중국어) 전용 스타일 오버라이드
   - 이 파일은 다국어 페이지(/en/, /cn/)에서만 로드됩니다 (tran_header.php).
   - 국문 사이트에는 전혀 영향을 주지 않습니다.
   - 언어별로 다르게 하고 싶으면 html[lang="en"] / html[lang="zh-CN"] 셀렉터를 쓰세요.
   - 새 파일/클래스를 만들지 말고, 여기에 오버라이드만 추가하세요.
   ============================================================ */

/* ------------------------------------------------------------
   [예시] 비전/미션 카드 높이 균일화
   영문·중문은 텍스트가 길어 카드 높이가 제각각이 됩니다.
   같은 줄의 카드를 가장 긴 카드에 맞춰 늘립니다.
   ※ 실제 셀렉터·수치는 디자이너가 페이지 확인 후 조정하세요.
   ------------------------------------------------------------ */
html[lang="en"] .value-list,
html[lang="zh-CN"] .value-list {
    align-items: stretch;        
}

html[lang="en"] .value-list ul,
html[lang="zh-CN"] .value-list ul {
    min-height: 24rem;             
    height: auto;
}

/* header gnb 다국어 스타일 변경 */
#header .gnb-s .gnb > li{width:20rem}
#header .gnb-s .gnb > li:hover{width:22rem}

/* ==============================
   로고 — 영문 시그니처로 교체
   CI 매뉴얼 BS 04 p.12 [가로 | 기본형] 영문 시그니처를 원본 벡터에서 추출.
   184x49 (국문 220x49와 심벌 높이 동일 → 헤더 리듬 그대로, 폭만 짧아짐)

   ※ src를 바꾸지 않고 CSS content로 덮는 이유:
      main.js(2곳)·common.js(3곳)가 스크롤·상태에 따라 img/logo_w.png ↔ img/logo_b.png 로
      src를 하드코딩 교체한다. 두 파일 다 국문 공용이라 수정할 수 없으므로,
      파일명을 바꾸면 스크롤 시 국문 로고로 되돌아간다.
      [src*="logo_w"] 로 잡으면 JS의 교체를 그대로 따라가 흑/백 전환이 자동으로 유지된다.
============================== */
.header .logo img[src*="logo_w"],
.mmain-top h1 img[src*="logo_w"] {content: url(../img/logo_en_w.png);}
.header .logo img[src*="logo_b"],
.mmain-top h1 img[src*="logo_b"] {content: url(../img/logo_en_b.png);}


/* ==============================
   언어 전환 (lang_switcher_html)
   국문에 없는 다국어 전용 요소 → html[lang] 접두어 없이 작성.
   마크업: .lang-switch-wrap > .lang-switch > a (현재 언어에 .on)
============================== */
.lang-switch {display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 50px;}
.lang-switch a {display: inline-block; padding: 4px 12px 3px; border-radius: 50px; font-size: var(--fs-14); line-height: 1.5; white-space: nowrap; color: #fff; transition: background-color 0.3s ease, color 0.3s ease;}
.lang-switch a:hover {background: rgba(255, 255, 255, 0.18);}
.lang-switch a.on {background: var(--main-gr); color: #fff;}
.lang-switch a:focus-visible {outline: 2px solid var(--point-color); outline-offset: 2px;}

/* 헤더가 흰 배경으로 바뀌는 상태 — 서브페이지·스크롤 시 */
.navbar-fixed-top .lang-switch {border-color: rgba(0, 0, 0, 0.25);}
.navbar-fixed-top .lang-switch a {color: #222;}
.navbar-fixed-top .lang-switch a:hover {background: rgba(0, 0, 0, 0.06);}
.navbar-fixed-top .lang-switch a.on {color: #fff;}

/* 메인의 밝은 섹션 — main.js onLeave가 헤더 요소를 검게 뒤집지만 언어 전환은 대상 밖이다.
   main.js를 수정하지 않고, 같은 util-menu 안 햄버거의 .black을 :has()로 감지해 함께 반전. */
.util-menu:has(.hamburger-icon.black) .lang-switch {border-color: rgba(0, 0, 0, 0.25);}
.util-menu:has(.hamburger-icon.black) .lang-switch a {color: #222;}
.util-menu:has(.hamburger-icon.black) .lang-switch a:hover {background: rgba(0, 0, 0, 0.06);}
.util-menu:has(.hamburger-icon.black) .lang-switch a.on {color: #fff;}

/* 1025~1200px — GNB(영문은 폭이 넓다)와 VISIT 버튼 사이가 좁아져 압축 */
@media (max-width:1200px) {
    .lang-switch {padding: 2px;}
    .lang-switch a {padding: 4px 8px 3px;}
}

/* 모바일 — 햄버거 메뉴 안에 둔 한 벌 (tran_header.php의 .lang-switch-m) */
.lang-switch-m {display: none;}
@media (max-width:1024px) {
    .lang-switch-m {display: block; padding: 8px 16px;}
    .lang-switch-m .lang-switch {justify-content: center; border-color: transparent;}
    .lang-switch-m .lang-switch a {flex: 1; padding: 9px 8px 8px; font-size: var(--fs-16); text-align: center;}
}

/* 모바일 상단바(.mmain-top, 메뉴 접힌 상태) — 로고와 햄버거 버튼 사이.
   상단바는 흰 배경이라 기본 흰색 테두리·글자를 어둡게 뒤집는다.
   .mmain-top이 position:relative라 absolute로 띄우고, 햄버거(right:10px, 폭 32px)를 피해 right:52px. */
.lang-switch-bar {display: none;}
@media (max-width:1024px) {
    .lang-switch-bar {display: block; position: absolute; top: 50%; right: 52px; transform: translateY(-50%);}
    .lang-switch-bar .lang-switch {gap: 0; padding: 2px; border-color: rgba(0, 0, 0, 0.18);}
    .lang-switch-bar .lang-switch a {padding: 3px 7px 2px; font-size: 11px; letter-spacing: -0.2px; color: #444;}
    .lang-switch-bar .lang-switch a:hover {background: rgba(0, 0, 0, 0.06);}
    .lang-switch-bar .lang-switch a.on {color: #fff;}
}

/* 420px 미만 — 로고(170px)와 전환 버튼(153px)이 겹친다(360px에서 25px 침범).
   라벨을 KO/EN/CN로 줄이지 않고(자국어 표기가 언어 선택엔 더 직관적) 양쪽을 조금씩 압축. */
@media (max-width:420px) {
    .mmain-top h1 img {width: 132px;}
    .lang-switch-bar {right: 46px;}
    .lang-switch-bar .lang-switch a {padding: 3px 5px 2px; font-size: 10px;}
}

/* 340px 이하(구형 소형기기) — 위 압축으로도 320px에서 로고와 1px까지 붙는다. 한 단계 더. */
@media (max-width:340px) {
    .mmain-top h1 img {width: 112px;}
    .lang-switch-bar .lang-switch a {padding: 3px 4px 2px; font-size: 9px;}
}

/* ==============================
   다국어 메인 — 벤또 그리드 섹션
   (tran_main_body.php 전용 신규 마크업 → html[lang] 접두어 없음)
============================== */
/* fullpage 안에서의 세로 중앙정렬 (실측 대응 — 2026-07-21) */
.ml-sec .fp-scroller {height: auto; min-height: 100%; display: flex; flex-direction: column; justify-content: center;}
.ml-sec {display: grid; align-content: center; padding-top: 8dvh; padding-bottom: 8dvh;}
.ml-sec-spaces {background: #f5f6fa;}
.ml-sec-org {background: linear-gradient(180deg, #fff 0%, #eef0f7 100%);}

.ml-bento {display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 16px; height: min(62dvh, 640px); min-height: 420px;}

/* Bento head — 좌측 1열 전체를 쓰는 텍스트 셀 */
.ml-bento-head {grid-column: 1 / 2; grid-row: 1 / 3; align-content: center; padding: 0 12px;}
.ml-eyebrow {display: block; font: 500 var(--fs-14)/1 var(--paper); letter-spacing: 0.22em; color: var(--main-color); margin-bottom: 14px;}
.ml-bento-head h2 {font: 600 var(--fs-36)/1.28 var(--paper); color: #1b1e2b; word-break: keep-all;}
.ml-bento-head p {margin-top: 14px; font-size: var(--fs-16); line-height: 1.65; color: #6a7180; word-break: keep-all;}

/* Chips — 하위 메뉴 바로가기 */
.ml-chips {display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px;}
.ml-chips a {display: inline-block; border: 1px solid #d3d8e3; border-radius: 50px; padding: 7px 16px 6px; font-size: var(--fs-14); color: #4a5160; transition: all 0.3s ease;}
.ml-chips a:hover, .ml-chips a:focus-visible {background: var(--main-gr); border-color: transparent; color: #fff;}

/* Tile — 이미지 배경 카드 (배경/스크림은 가상요소로 처리) */
/* 배경 이미지는 마크업의 inline style(background-image)로 지정한다.
   ※ CSS 변수에 url()을 담아 var()로 넘기면 경로가 "문서"가 아니라 "이 CSS 파일" 기준으로
      해석돼 /jscss/img/... 로 깨진다. ::before가 inherit으로 물려받는 방식이라야 안전. */
.ml-tile {position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; color: #fff; background: #22262f no-repeat center / cover;}
.ml-tile::before {content: ""; position: absolute; inset: 0; z-index: -2; background-image: inherit; background-position: center; background-size: cover; background-repeat: no-repeat; transition: transform 0.7s ease;}
.ml-tile::after {content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(8, 10, 18, 0.9) 0%, rgba(8, 10, 18, 0.72) 30%, rgba(8, 10, 18, 0.34) 62%, rgba(8, 10, 18, 0.06) 100%);}
.ml-tile:hover::before, .ml-tile:focus-visible::before {transform: scale(1.06);}
.ml-tile:focus-visible {outline: 3px solid var(--point-color); outline-offset: 3px;}
.ml-tile h3 {font: 600 var(--fs-26)/1.3 var(--paper); word-break: keep-all;}
.ml-tile p {margin-top: 8px; max-width: 36em; font-size: var(--fs-16); line-height: 1.55; color: rgba(255, 255, 255, 0.88); word-break: keep-all;}

/* More link */
.ml-more {display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font: 500 var(--fs-14)/1 var(--paper); letter-spacing: 0.08em; text-transform: uppercase;}
.ml-more::after {content: ""; width: 15px; height: 15px; background: url(../img/content/main/ic_arrow.svg) no-repeat center / contain; transition: transform 0.35s ease;}
.ml-tile:hover .ml-more::after, .ml-tile:focus-visible .ml-more::after {transform: translateX(5px);}

/* Bento 배치 — 공간소개 */
.ml-bento-spaces .ml-tile-hero {grid-column: 2 / 4; grid-row: 1 / 3;}
.ml-tile-hero h3 {font-size: var(--fs-40);}
.ml-tile-hero p {font-size: var(--fs-18);}

/* Bento 배치 — 재단·사업 */
.ml-bento-org .ml-tile-wide {grid-column: 2 / 5; grid-row: 1 / 2;}
.ml-bento-org .ml-tile-mid {grid-column: 2 / 4; grid-row: 2 / 3;}
.ml-tile-wide h3 {font-size: var(--fs-34);}

@media (max-width:1200px) {
    .ml-sec {padding-top: 12dvh; padding-bottom: 6dvh;}
    .ml-bento {grid-template-columns: repeat(2, 1fr); grid-template-rows: none; grid-auto-rows: minmax(200px, auto); height: auto; min-height: 0;}
    .ml-bento-head {grid-column: 1 / -1; grid-row: auto; padding: 0 4px 8px;}
    .ml-bento-spaces .ml-tile-hero, .ml-bento-org .ml-tile-wide {grid-column: 1 / -1; grid-row: auto; min-height: 280px;}
    .ml-bento-org .ml-tile-mid {grid-column: auto; grid-row: auto;}
}

@media (max-width:768px) {
    .ml-sec {padding-top: 8dvh; padding-bottom: 6dvh;}
    .ml-bento {grid-template-columns: 1fr; gap: 12px; grid-auto-rows: minmax(210px, auto);}
    .ml-tile {border-radius: 16px; padding: 22px;}
    .ml-bento-spaces .ml-tile-hero, .ml-bento-org .ml-tile-wide {min-height: 240px;}
    .ml-tile-hero h3, .ml-tile-wide h3 {font-size: var(--fs-28);}
}


/* ------------------------------------------------------------
   여기 아래에 다른 페이지의 언어별 조정을 계속 추가하세요.
   ------------------------------------------------------------ */