/* Common UI (publishing) */

.mb-only{display:none;}

/* 크롬 등 UA 기본 body margin(8px) 제거 — default.css 미로드·순서 이슈 대비 */
html { margin: 0; }
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, body.sub_02_02_01 .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, body.sub_02_02_01 .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, body.sub_02_02_01 .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, body.sub_02_02_01 .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, body.sub_02_02_01 .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, body.sub_02_02_01 .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, body.sub_02_02_01 .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, body.sub_02_02_01 .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, body.sub_02_02_01 .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_02_02_01 .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_02_02_01 .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, body.sub_02_02_01 .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; }

/* 반응형 */
@media (max-width:1600px) {
    .subNav__inner{width:90%;}
}

@media (max-width:1440px) {
    .subNav { display: none; }
}
@media (max-width:768px) {
    .pc-only{display:none;}
    .mb-only{display:block;}
}