/* Common UI (publishing) */

/* 크롬 등 UA 기본 body margin(8px) 제거 — default.css 미로드·순서 이슈 대비 */
html { margin: 0; scrollbar-gutter: stable; }
body { margin: 0; }
body.sub #wrap { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
body.sub #wrap > .siteFooter { margin-top: auto; }
/* Sub Navigation (Header 아래) */
.subNav { position: sticky; top: 72px; /* header 높이 */
    z-index: 998; /* 바깥은 투명, 안쪽 박스만 배경을 가짐(시안) */
    background: transparent; border-bottom: 0; }
/* 페이지 내부에 삽입되는 subNav (헤더에 붙지 않게 / 스크롤 따라오지 않게) */
.subNav.subNav--page { position: relative; top: auto; z-index: auto; }
body.sub_01_01 .subNav, body.sub_01_02 .subNav, body.sub_02_01_01 .subNav, body.sub_02_01_02 .subNav, body.sub_02_01_03 .subNav, body.sub_02_01_04 .subNav { border-bottom-color: transparent; z-index: 3; }
.subNav__inner { max-width: 1740px; /* 패딩이 아니라 "양끝 90px" 거터로 정렬 */
    width: calc(100% - 180px); /* 1920 기준 좌우 90px 거터 */
    margin: 0 auto; height: 64px; padding: 0; display: flex; align-items: center; gap: 0; /* 영역 사이를 선으로 분리 */
    background: #f7f7f7; border-radius: 12px; overflow: visible; /* 드롭다운 패널이 잘리지 않게 */
}
body.sub_01_01 .subNav__inner, body.sub_01_02 .subNav__inner, body.sub_02_01_01 .subNav__inner, body.sub_02_01_02 .subNav__inner, body.sub_02_01_03 .subNav__inner, body.sub_02_01_04 .subNav__inner { background: #1d1d1d; border-color: rgba(255, 255, 255, 0.10); }
/* 다크 페이지(sub_01_01/sub_01_02/sub_02_01)에서 subNav 텍스트/아이콘 톤 */
body.sub_01_01 .subNav__label, body.sub_01_02 .subNav__label, body.sub_02_01_01 .subNav__label, body.sub_02_01_02 .subNav__label, body.sub_02_01_03 .subNav__label, body.sub_02_01_04 .subNav__label { color: rgba(255, 255, 255, 0.92); }
body.sub_01_01 .subNav__sum .subNav__chevImg, body.sub_01_02 .subNav__sum .subNav__chevImg, body.sub_02_01_01 .subNav__sum .subNav__chevImg, body.sub_02_01_02 .subNav__sum .subNav__chevImg, body.sub_02_01_03 .subNav__sum .subNav__chevImg, body.sub_02_01_04 .subNav__sum .subNav__chevImg { opacity: 0.9; filter: brightness(0) invert(1); }
body.sub_01_01 .subNav__homeIcon, body.sub_01_02 .subNav__homeIcon, body.sub_02_01_01 .subNav__homeIcon, body.sub_02_01_02 .subNav__homeIcon, body.sub_02_01_03 .subNav__homeIcon, body.sub_02_01_04 .subNav__homeIcon { filter: brightness(0) invert(1); }
body.sub_01_01 .subNav__panel, body.sub_01_02 .subNav__panel, body.sub_02_01_01 .subNav__panel, body.sub_02_01_02 .subNav__panel, body.sub_02_01_03 .subNav__panel, body.sub_02_01_04 .subNav__panel { background: #111111; border-color: rgba(255, 255, 255, 0.10); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28); }
body.sub_01_01 .subNav__item, body.sub_01_02 .subNav__item, body.sub_02_01_01 .subNav__item, body.sub_02_01_02 .subNav__item, body.sub_02_01_03 .subNav__item, body.sub_02_01_04 .subNav__item { color: rgba(255, 255, 255, 0.86); }
body.sub_01_01 .subNav__item:hover, body.sub_01_02 .subNav__item:hover, body.sub_02_01_01 .subNav__item:hover, body.sub_02_01_02 .subNav__item:hover, body.sub_02_01_03 .subNav__item:hover, body.sub_02_01_04 .subNav__item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
body.sub_01_01 .subNav__item.is-active, body.sub_01_02 .subNav__item.is-active, body.sub_02_01_01 .subNav__item.is-active, body.sub_02_01_02 .subNav__item.is-active, body.sub_02_01_03 .subNav__item.is-active, body.sub_02_01_04 .subNav__item.is-active { background: rgba(255, 255, 255, 0.08); color: #ffffff; }
.subNav__home { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; position: relative; padding: 22px; }
.subNav__homeIcon { width: 18px; height: 17px; display: block; object-fit: contain; }
/* 얇은 분리선(시안 디테일) */
.subNav__home::after, .subNav__dd--depth1::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 14px; transform: translateY(-50%); background: #ececed; }
.subNav.subNav--hasDepth3 .subNav__dd--depth2::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 14px; transform: translateY(-50%); background: #ececed; }
body.sub_01_01 .subNav__home::after, body.sub_01_02 .subNav__home::after, body.sub_02_01_01 .subNav__home::after, body.sub_02_01_02 .subNav__home::after, body.sub_02_01_03 .subNav__home::after, body.sub_02_01_04 .subNav__home::after, body.sub_01_01 .subNav__dd--depth1::after, body.sub_01_02 .subNav__dd--depth1::after, body.sub_02_01_01 .subNav__dd--depth1::after, body.sub_02_01_02 .subNav__dd--depth1::after, body.sub_02_01_03 .subNav__dd--depth1::after, body.sub_02_01_04 .subNav__dd--depth1::after, body.sub_01_01 .subNav.subNav--hasDepth3 .subNav__dd--depth2::after, body.sub_01_02 .subNav.subNav--hasDepth3 .subNav__dd--depth2::after, body.sub_02_01_01 .subNav.subNav--hasDepth3 .subNav__dd--depth2::after, body.sub_02_01_02 .subNav.subNav--hasDepth3 .subNav__dd--depth2::after, body.sub_02_01_03 .subNav.subNav--hasDepth3 .subNav__dd--depth2::after, body.sub_02_01_04 .subNav.subNav--hasDepth3 .subNav__dd--depth2::after { background: rgba(255, 255, 255, 0.14); }
/* 구버전 sep는 숨김(마크업 호환) */
.subNav__sep { display: none; }
.subNav__dd { position: relative; }
/* 클릭으로 여는 details UI */
.subNav__dd[open] { z-index: 20; }
.subNav__dd > summary { list-style: none; }
.subNav__dd > summary::-webkit-details-marker { display: none; }
.subNav__sum { height: 64px; min-width: 0; /* 내용만큼만 사용 */
    --subNavSumPadX: 19px; --subNavItemPadX: 10px; padding: 0 var(--subNavSumPadX); /* 구분선 기준 양옆 19px 여백 */
    border-radius: 0; border: 0; background: transparent; display: inline-grid; grid-auto-flow: column; align-items: center; justify-content: start; column-gap: 96px; /* 텍스트-아이콘 간격 */
    cursor: pointer; user-select: none; }
.subNav__label { font-size: 16px; font-weight: 600; color: #111111; white-space: nowrap; }
.subNav__sum .subNav__chevImg { width: 10px; height: 5px; flex: 0 0 auto; display: block; opacity: 0.62; transform: translateY(1px); transform-origin: 50% 50%; }
.subNav__dd[open] .subNav__sum .subNav__chevImg { transform: translateY(1px) rotate(180deg); }
.subNav__panel { position: absolute; /* 박스 위치는 탭(요약) 시작 기준으로 정렬 */
    left: 0; top: calc(100% + 8px); min-width: 180px; padding: 14px; border-radius: 16px; background: #fff; border: 1px solid rgba(11, 15, 26, 0.10); box-shadow: 0 18px 40px rgba(2, 8, 20, 0.12); display: none; }
/* 클릭(open)일 때만 패널 표시 */
.subNav__dd[open] > .subNav__panel { display: block; }
.subNav__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.subNav__item { display: block; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-family: 'Pretendard', sans-serif; color: rgba(11, 15, 26, 0.80); font-size: 16px; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.subNav__item:hover { background: rgba(5, 51, 119, 0.08); color: #053377; }
.subNav__item.is-active { background: rgba(5, 51, 119, 0.08); color: #053377; }
.subNav__item.is-disabled { opacity: 0.45; pointer-events: none; }

.lang_all_wrap { position: relative; margin-right: 20px; }
.lang_btn { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 16px; border: 1px solid rgba(255,255,255,0.2); border-radius: 100px; background: transparent; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); }
.lang_btn i { font-size: 14px; transition: transform 0.3s ease; }
.lang_all_wrap:hover .lang_btn i { transform: rotate(180deg); }
.lang_dropdown { position: absolute; top: calc(100% + 10px); left: 0; width: 100%; min-width: 80px; padding: 8px; border-radius: 16px; background: rgba(20,20,20,0.95); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; }
.lang_all_wrap:hover .lang_dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang_dropdown li + li { margin-top: 4px; }
.lang_dropdown li { list-style: none; margin: 0; padding: 0; }
.lang_dropdown li::marker { display: none; content: ''; }
.lang_dropdown a { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 10px; font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; transition: all 0.3s ease; }
.lang_dropdown a:hover, .lang_dropdown a.active { background: #fff; color: #111; }



.sub_03 header.siteHeader .lang_btn,
.sub_04 header.siteHeader .lang_btn {
    border-color: rgba(0,0,0,0.1);
    color: #111;
}

.sub_03 header.siteHeader .lang_dropdown,
.sub_04 header.siteHeader .lang_dropdown {
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(0,0,0,0.06);
}

.sub_03 header.siteHeader .lang_dropdown a,
.sub_04 header.siteHeader .lang_dropdown a {
    color: #111;
}

.sub_03 header.siteHeader .lang_dropdown a:hover,
.sub_03 header.siteHeader .lang_dropdown a.active,
.sub_04 header.siteHeader .lang_dropdown a:hover,
.sub_04 header.siteHeader .lang_dropdown a.active {
    background: #111;
    color: #fff;
}
@media screen and (max-width:1400px) {
    .lang_all_wrap { margin-right: 14px; }
    .lang_btn { height: 34px; padding: 0 14px; font-size: 12px; }
    .lang_dropdown a { height: 34px; font-size: 12px; }
}
/* 반응형 */
@media (max-width:1440px) {
    .subNav { display: none; }
}
/* ========================================
   KV tabs — 공통 (head 로드, sub_xx.css FOUC 방지)
======================================== */
.subPage .company-kv-tabsToggleLabel, .subPage .company-kv-tabsCurrent, .subPage.company .company-kv-tabsToggleLabel, .subPage.company .company-kv-tabsCurrent { flex: 1; min-width: 0; text-align: left; font-family: 'Pretendard', sans-serif; font-size: inherit; font-weight: 600; }
.subPage .company-kv-tabsToggleIcon, .subPage.company .company-kv-tabsToggleIcon { flex-shrink: 0; width: 10px; height: 10px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.25s ease; }
.subPage .company-kv-tabs.is-open .company-kv-tabsToggleIcon, .subPage.company .company-kv-tabs.is-open .company-kv-tabsToggleIcon { transform: rotate(-135deg); margin-top: 3px; }
@media (min-width:1025px) {
    .subPage .company-kv-tabsDropdown, .subPage.company .company-kv-tabsDropdown { display: contents; }
    .subPage .company-kv-tabsToggle, .subPage.company .company-kv-tabsToggle { display: none; }
}
/* ========================================
   KV hero — 1024px 레이아웃
======================================== */
@media (max-width:1024px) {
    .subPage .company-kv, .subPage.company .company-kv { position: relative; z-index: 10; justify-content: flex-end; overflow: visible; }
    .subPage .company-body, .subPage.company .company-body { position: relative; z-index: 1; }
    .subPage .company-kv-main, .subPage.company .company-kv-main { position: relative; z-index: 2; flex: 0 0 auto; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; padding: 0 5% 16px; box-sizing: border-box; overflow: visible; }
    .subPage .company-kv-main .company-inner, .subPage.company .company-kv-main .company-inner { flex: 0 0 auto; flex-direction: column; align-items: flex-start; justify-content: flex-end; width: 100%; gap: 0; }
    .subPage .company-kv-main .kv-text-wrap, .subPage.company .company-kv-main .kv-text-wrap { width: 100%; }
    /* KV tabs dropdown — 1024px (sub_xx.css body 로드 전 첫 페int용) */
    .subPage .company-kv-tabs, .subPage.company .company-kv-tabs { position: relative; z-index: 30; flex-shrink: 0; padding-bottom: 50px; border-top: 0; overflow: visible; box-sizing: border-box; }
    .subPage .company-inner--tabs, .subPage.company .company-inner--tabs { position: relative; z-index: 31; flex-direction: column; align-items: stretch; width: 100%; padding: 0; }
    .subPage .company-kv-tabsDropdown, .subPage.company .company-kv-tabsDropdown { position: relative; display: block; width: 100%; max-width: 100%; box-sizing: border-box; }
    .subPage .company-kv-tabsToggle, .subPage.company .company-kv-tabsToggle { position: relative; z-index: 33; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 0; padding: 20px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; background: rgba(51, 51, 51, 0.3); color: #fff; font-family: 'Pretendard', sans-serif; font-size: 16px; font-weight: 600; line-height: 1.3; cursor: pointer; box-sizing: border-box; -webkit-tap-highlight-color: transparent; flex-shrink: 0; }
    .subPage .company-kv-tabsToggle:focus-visible, .subPage.company .company-kv-tabsToggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    .subPage .company-kv-tabsPanel, .subPage.company .company-kv-tabsPanel { position: absolute; top: 100%; left: 0; right: auto; z-index: 32; display: block; flex-wrap: nowrap; width: 100%; max-width: 100%; max-height: 0; margin-top: 8px; margin-bottom: 0; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 8px; background: rgba(51, 51, 51, 1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22); overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none; transition: max-height 0.32s ease, opacity 0.22s ease, visibility 0.32s ease, margin-top 0.22s ease; }
    .subPage .company-kv-tabs.is-open .company-kv-tabsPanel, .subPage.company .company-kv-tabs.is-open .company-kv-tabsPanel { max-height: min(50vh, 360px); opacity: 1; visibility: visible; pointer-events: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .subPage .company-kv-tabs.is-open .company-kv-tabsToggle, .subPage.company .company-kv-tabs.is-open .company-kv-tabsToggle { border-radius: 8px; border-bottom-color: rgba(255, 255, 255, 0.25); background: rgba(51, 51, 51, 0.3); }
    .subPage .company-kv-tabsPanelInner, .subPage.company .company-kv-tabsPanelInner { display: flex; flex-direction: column; gap: 0; min-height: 0; overflow: hidden; width: 100%; }
    .subPage .company-kv-tabsPanel .company-kv-tab, .subPage.company .company-kv-tabsPanel .company-kv-tab { flex: none; width: 100%; min-height: 0; padding: 20px; margin: 0; border: 0; border-top: 0; border-radius: 0; background: transparent; color: rgba(255, 255, 255, 0.88); font-size: 16px; font-weight: 400; font-family: 'Pretendard', sans-serif; white-space: normal; box-sizing: border-box; display: flex; align-items: center; text-decoration: none; }
    .subPage .company-kv-tabsPanel .company-kv-tab.is-active, .subPage.company .company-kv-tabsPanel .company-kv-tab.is-active { background: rgba(51, 51, 51, 0.45); color: #fff; font-weight: 600; border-top: 0; }
    .subPage .company-kv-tabsPanel .company-kv-tab:hover, .subPage .company-kv-tabsPanel .company-kv-tab:focus-visible, .subPage.company .company-kv-tabsPanel .company-kv-tab:hover, .subPage.company .company-kv-tabsPanel .company-kv-tab:focus-visible { background: rgba(51, 51, 51, 0.45); color: #fff; outline: none; }
}





/* 
.sub_05.b_write .newsHero {display: none;} */