/**
 * dep2_skins/out_7 스킨 스타일
 *
 * 디자인 컨셉:
 * - 상단 4px 반투명 가로 라인
 * - active 메뉴 상단(라인 위)에 active 바 표시
 * - 좌측 1뎁스 박스: 평상시 투명, 홈 아이콘 + 라벨 + 화살표
 * - 화살표/박스 클릭 시 셀렉트 박스 전체에 컬러 배경 적용 (열린 상태)
 *
 * 상속 구조: out_2 베이스, dep2_bg_layer 제거 (배경 없음)
 */

/* ★ 서브 전체 가로스크롤 방지 */
body { overflow-x: hidden; }

/* ========================================
   dep2_out_float_wrap (높이 0 래퍼 - flow 차지 안함)
   ★ top_1.php가 out 스킨을 이 래퍼 안에 넣음 → 배치 기준점 필수
   ======================================== */
.dep2_out_float_wrap {
    width: 100%;
    float: left;
    height: 0;
    overflow: visible;
    position: relative;
    z-index: 50;
}

/* ========================================
   sub2d_menu_out_area.out7_area (이미지 밖 컨테이너 - absolute)
   ======================================== */

/* PC */
@media only all and (min-width:768px) {
    .out7_area.sub2d_menu_out_area {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow: visible;
        margin-top: var(--dep2-offset-top, -40px);
        z-index: 50;
    }
    .out7_area .contents-container {
        overflow: visible !important;
    }
}

/* 모바일 */
@media only all and (max-width:767px) {
    .out7_area.sub2d_menu_out_area {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        overflow-x: hidden;
        margin-top: var(--dep2-offset-top-mo, -10px);
        z-index: 50;
    }
    .out7_area > .contents-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ========================================
   sub2d_menu_area (메뉴 영역)
   ======================================== */

/* PC */
@media only all and (min-width:768px) {
    .out7_area .sub2d_menu_area {
        width: 100%;
        float: left;
        position: relative;
    }

    /* ★ 상단 연한 라인 (두께/색상 설정 가능) */
    .out7_area .dep2_top_line {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--out7-top-line-h, 4px);
        background-color: var(--out7-top-line-color, rgba(255, 255, 255, 0.35));
        z-index: 1;
        pointer-events: none;
    }

    .out7_area .sub2d_menu_area .titgrid {
        width: 100%;
        height: var(--dep2-height, clamp(60px, 5vw, 80px));
        float: left;
        grid-template-columns: var(--out7-d1-w, auto) 1fr;
        display: grid;
        position: relative;
        z-index: 2;
    }
}

/* 모바일 */
@media only all and (max-width:767px) {
    .out7_area .sub2d_menu_area {
        width: 100%;
        float: left;
        position: relative;
        margin-top: 10px;
        background-color: transparent;
    }
    .out7_area .dep2_top_line {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--out7-top-line-h-mo, 3px);
        background-color: var(--out7-top-line-color, rgba(255, 255, 255, 0.35));
        z-index: 1;
        pointer-events: none;
    }
    .out7_area .sub2d_menu_area .titgrid {
        width: 100%;
        height: var(--dep2-height-mo, 50px);
        float: left;
        position: relative;
        z-index: 2;
    }
}

/* ========================================
   d1_wrap (1뎁스 셀렉트 드롭다운)
   ======================================== */

/* PC */
@media only all and (min-width:768px) {
    .out7_area .d1_wrap {
        position: relative;
        display: flex;
        align-items: center;
        gap: 14px;
        height: 100%;
        width: 100%; /* grid 첫 칼럼 폭(--out7-d1-w)에 맞춰 채움 */
        box-sizing: border-box;
        padding-left: 0;
        background-color: transparent;
        transition: background-color 0.22s ease;
    }
    .out7_area .d1_wrap > .d1_tit {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* ★ 컨텐츠(홈 아이콘 + 라벨) 좌측 인셋 — 배경은 그대로, 자식만 우측으로 이동 */
    .out7_area .d1_wrap > .d1_tit__home,
    .out7_area .d1_wrap > .d1_tit > .d1_tit__label {
        transition: margin-left 0.28s ease, padding-left 0.28s ease;
    }
    .out7_area .d1_wrap.is-open > .d1_tit__home {
        margin-left: 20px;
    }
}

/* 모바일: 숨김 + 인라인 PC width 무력화 */
@media only all and (max-width:767px) {
    .out7_area .d1_wrap {
        position: relative;
        display: none;
        width: var(--out7-d1-w-mo, auto) !important;
    }
}

/* ★ d1_tit 토글 버튼 - 평상시 투명 배경 */
.out7_area .d1_tit {
    width: 100%;
    height: 100%;
    background-color: transparent;
    padding: 0 50px 0 0; /* 우측 50px = 화살표(20px영역) + 여백 20px + 안전 10px / 좌측 0 (홈 아이콘 맨앞) */
    color: #fff;
    font-weight: 600;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: var(--out7-d1-fs, calc(var(--tit-mds-size, 18px) * 0.85));
    position: relative;
    cursor: pointer;
    border: none;
    outline: none;
    text-align: left;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color 0.22s ease, color 0.22s ease;
}

/* 홈 아이콘 (좌측) - 메인 링크, 동그라미 보더 없음, 1뎁스 영역 세로 중앙 정렬
   ★ 같은 입력값으로 img는 width, 폰트 아이콘은 font-size 동시 적용 */
.out7_area .d1_tit__home {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #fff;
    text-decoration: none;
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
    cursor: pointer;
    transition: color 0.22s ease, opacity 0.22s ease;
    /* 폰트 아이콘 케이스: 박스를 폰트 크기로 잡음 */
    font-size: var(--out7-home-icon-w, 20px);
    width: auto;
    height: auto;
}
.out7_area .d1_tit__home:hover {
    color: #fff;
    opacity: 0.75;
}
.out7_area .d1_tit__home i {
    font-size: inherit;
    line-height: 1;
    display: inline-block;
}
/* img / HTML 태그 케이스: 박스를 아이콘 가로 크기로 잡음 */
.out7_area .d1_tit__home.is-img,
.out7_area .d1_tit__home.is-html,
.out7_area .d1_tit__home:has(img),
.out7_area .d1_tit__home:has(svg),
.out7_area .d1_tit__home:has(lottie-player) {
    width: var(--out7-home-icon-w, 20px);
}
.out7_area .d1_tit__home img,
.out7_area .d1_tit__home svg,
.out7_area .d1_tit__home lottie-player {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}

/* 라벨 */
.out7_area .d1_tit__label {
    color: #fff;
    font-weight: 600;
    line-height: 1.2;
}

/* 화살표 (우측 - 박스 끝에서 약 20px 안쪽) - 2배 크기 */
.out7_area .d1_tit__arrow {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    pointer-events: none;
    transition: transform 0.22s ease, color 0.22s ease;
}
.out7_area .d1_tit__arrow i { font-size: 36px; line-height: 1; }

.out7_area .d1_tit:hover {
    background-color: transparent;
}

/* ★ 열린 상태 - 셀렉트 박스 전체에 컬러 배경 (d1_wrap 전체에 깔아 home 아이콘까지 포함) */
.out7_area .d1_wrap.is-open {
    background-color: var(--dep2-bg-base-color, var(--dynamic-bg-color, var(--primary)));
}
.out7_area .d1_wrap.is-open .d1_tit,
.out7_area .d1_tit.on {
    background-color: transparent;
}
.out7_area .d1_tit.on .d1_tit__arrow {
    transform: translateY(-50%) rotate(180deg);
}

@media only all and (max-width:767px) {
    .out7_area .d1_tit {
        padding: 0 40px 0 0;
        gap: 10px;
        font-size: var(--out7-d1-fs-mo, var(--out7-d1-fs, inherit));
    }
    .out7_area .d1_tit__arrow { right: 15px; }
    .out7_area .d1_tit__home {
        font-size: var(--out7-home-icon-w-mo, 16px);
        width: auto;
        height: auto;
    }
    .out7_area .d1_tit__home.is-img,
    .out7_area .d1_tit__home:has(img),
    .out7_area .d1_tit__home.is-html {
        width: var(--out7-home-icon-w-mo, 16px);
    }
}

/* ========================================
   d1_select 드롭다운 패널
   ======================================== */
.out7_area .d1_select {
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 100%;
    z-index: 9999999999;
    background: var(--dep2-bg-base-color, var(--dynamic-bg-color, var(--primary)));
    border-radius: 0px 0px 12px 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: none;
    overflow: hidden;
    padding-top: 4px;
}

.out7_area .d1_select.is-anim {
    transform-origin: top center;
    animation: out7_d1SlideDown .18s ease forwards;
}
.out7_area .d1_select.is-hide {
    animation: out7_d1SlideUp .18s ease forwards;
}

@keyframes out7_d1SlideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes out7_d1SlideUp {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-6px); }
}

.out7_area .d1_select__list {
    list-style: none;
    margin: 0;
    padding: 8px;
    max-height: 60vh;
    overflow: auto;
    position: relative; /* 인디케이터 absolute 기준 */
}
.out7_area .d1_select__item { margin: 2px 0; position: relative; z-index: 2; }
.out7_area .d1_select__a {
    display: block;
    padding: 10px 20px;
    border-radius: 8px;
    color: #fff !important;
    text-decoration: none;
    line-height: 1.2;
    transition: color 0.32s cubic-bezier(.4,.6,.2,1),
                font-weight 0.32s cubic-bezier(.4,.6,.2,1);
    position: relative;
    z-index: 2;
    background: transparent;
}
.out7_area .d1_select__item.is-current .d1_select__a,
.out7_area .d1_select__a.is-current {
    font-weight: 700;
    cursor: default;
    color: #fff;
    background: transparent;
}

/* ★ d1_select 호버 시 다른 메뉴 폰트 페이드 */
@media (hover: hover) {
    .out7_area .d1_select__list.is-hovering .d1_select__a.is-current,
    .out7_area .d1_select__list.is-hovering .d1_select__item.is-current .d1_select__a {
        font-weight: 400;
    }
    .out7_area .d1_select__list .d1_select__a:hover {
        font-weight: 700;
    }
}

/* ★ 슬라이딩 active 인디케이터 (d1_select 드롭다운 - 세로 이동) */
.out7_area .d1_select__indicator {
    position: absolute;
    left: 8px;  /* list padding과 동일 */
    top: 0;
    width: calc(100% - 16px);  /* 좌우 padding 제외 */
    height: 0;
    background-color: #333;
    border-radius: 8px;
    z-index: 1;
    pointer-events: none;
    transform: translateY(0);
    transition: transform 0.32s cubic-bezier(.4,.6,.2,1),
                height 0.32s cubic-bezier(.4,.6,.2,1);
    opacity: 0;
}
.out7_area .d1_select__indicator.is-ready { opacity: 1; }
.out7_area .d1_select__indicator.no-anim {
    transition: none !important;
    opacity: 1 !important;
}

/* ========================================
   Sub2d_gnb (2뎁스 메뉴 리스트)
   ======================================== */

/* PC */
@media only all and (min-width:768px) {
    .out7_area ul.Sub2d_gnb {
        list-style: none;
        width: 100%;
        display: flex;
        flex-direction: row;
        padding: 0px 0px 0px 30px;
        background-color: transparent;
        height: var(--dep2-height, clamp(60px, 5vw, 80px));
        grid-gap: clamp(10px, calc(2.632vw + -0.526px), 50px);
        margin: 0;
    }
    .out7_area ul.Sub2d_gnb li {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .out7_area ul.Sub2d_gnb li a {
        padding: 10px 0px 10px 0px;
        position: relative;
        font-size: var(--dep2-font-size, clamp(14px, 1.1vw, 16px));
        font-weight: var(--dep2-font-weight, 600);
        letter-spacing: var(--dep2-letter-spacing, normal);
        color: rgba(255,255,255,0.70);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: color 0.32s cubic-bezier(.4,.6,.2,1),
                    font-weight 0.32s cubic-bezier(.4,.6,.2,1);
    }
}

/* 모바일 */
@media only all and (max-width:767px) {
    .out7_area ul.Sub2d_gnb {
        list-style: none;
        width: 100%;
        float: left;
        display: flex;
        flex-direction: row;
        padding: 0;
        background-color: transparent;
        margin: 0;
        height: var(--dep2-height-mo, 44px);
    }
    .out7_area ul.Sub2d_gnb li {
        padding: 0px 10px;
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
    }
    .out7_area ul.Sub2d_gnb li a {
        padding: 0;
        position: relative;
        font-size: var(--dep2-font-size-mo, 14px);
        font-weight: var(--dep2-font-weight, 400);
        letter-spacing: var(--dep2-letter-spacing, normal);
        color: rgba(255,255,255,0.85);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: color 0.18s ease;
    }
}

/* ========================================
   ★ 현재 선택된 메뉴 (active) - 상단에 active 바
   ======================================== */
.out7_area ul.Sub2d_gnb li.active a {
    color: var(--dep2-active-color, var(--dynamic-point-color, #fff));
    z-index: 99;
    position: relative;
    font-weight: 700;
    transition: color 0.32s cubic-bezier(.4,.6,.2,1),
                font-weight 0.32s cubic-bezier(.4,.6,.2,1);
}
/* ★ 공통 CSS(resources/css/style.css)의 하단 active 라인 제거 */
.out7_area ul.Sub2d_gnb li.active a::after,
.out7_area ul.Sub2d_gnb li.active a:after {
    display: none !important;
    content: none !important;
}
/* ★ 슬라이딩 active 인디케이터 (단일 요소, JS로 위치/폭 제어) */
.out7_area ul.Sub2d_gnb {
    position: relative; /* indicator absolute 기준점 */
}
.out7_area .Sub2d_indicator {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: var(--out7-indi-h, 4px);
    background-color: var(--dep2-active-bar-color, var(--dep2-active-color, var(--dynamic-point-color, #fff)));
    z-index: 5;
    pointer-events: none;
    transform: translateX(0);
    transition: transform 0.32s cubic-bezier(.4,.6,.2,1),
                width 0.32s cubic-bezier(.4,.6,.2,1),
                background-color 0.2s ease;
    opacity: 0;
}
/* ★ 번개 표시: 위치 확정 후 즉시 표시 (페이드 없음) */
.out7_area .Sub2d_indicator.is-ready { opacity: 1; }
.out7_area .Sub2d_indicator.no-anim {
    transition: none !important;
    opacity: 1 !important;
}

/* ★ 호버 중일 때 인디케이터 컬러 (설정값 우선, 없으면 호버 텍스트 컬러 → primary) */
.out7_area .Sub2d_indicator.is-hover {
    background-color: var(--dep2-hover-bar-color, var(--dep2-hover-color, var(--primary)));
}

/* ★ 다른 메뉴 호버 중에는 active 폰트 스타일도 기본으로 복귀 (부드러운 페이드) */
@media only all and (min-width:768px) and (hover: hover) {
    .out7_area ul.Sub2d_gnb.is-hovering li.active:not(:hover) a {
        color: rgba(255,255,255,0.70);
        font-weight: var(--dep2-font-weight, 600);
        transition: color 0.32s cubic-bezier(.4,.6,.2,1),
                    font-weight 0.32s cubic-bezier(.4,.6,.2,1);
    }
    /* ★ 호버한 메뉴: 호버 컬러 + 굵게 (부드러운 페이드) */
    .out7_area ul.Sub2d_gnb li:hover a {
        color: var(--dep2-hover-color, var(--primary));
        font-weight: 700;
        transition: color 0.32s cubic-bezier(.4,.6,.2,1),
                    font-weight 0.32s cubic-bezier(.4,.6,.2,1);
    }
}

@media only all and (max-width:767px) {
    .out7_area .Sub2d_indicator { height: var(--out7-indi-h-mo, 3px); }
}

/* ========================================
   스크롤 래퍼 & 네비게이션
   ======================================== */
.out7_area .Sub2d_scroller {
    position: relative;
}

/* 모바일: 한 줄 가로 스크롤 + 버튼 */
@media only all and (max-width:767px) {
    .out7_area .Sub2d_viewport {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        padding: 0 35px;
        position: relative;
        scroll-snap-type: none;
        scrollbar-width: none;
        height: var(--dep2-height-mo, 44px);
    }
    .out7_area .Sub2d_viewport::-webkit-scrollbar { display: none; }
    .out7_area .Sub2d_viewport > ul.Sub2d_gnb {
        flex-wrap: nowrap !important;
        white-space: nowrap;
        gap: 0;
        width: max-content;
        min-width: 100%;
    }
    .out7_area .Sub2d_viewport > ul.Sub2d_gnb > li {
        flex: 0 0 auto;
        position: relative;
        white-space: nowrap;
    }

    /* 좌/우 네비 버튼 */
    .out7_area .Sub2d_nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 999;
        -webkit-tap-highlight-color: transparent;
        transition: all 0.2s ease;
        font-size: 18px;
        font-weight: bold;
    }
    .out7_area .Sub2d_nav:hover {
        background: rgba(0, 0, 0, 0.8);
        transform: translateY(-50%) scale(1.1);
    }
    .out7_area .Sub2d_nav.prev { left: 5px; }
    .out7_area .Sub2d_nav.next { right: 5px; }
    .out7_area .Sub2d_nav[hidden] {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-50%) scale(0.8);
    }
}

/* ========================================
   ★ Sticky 모드 (스크롤 시 상단 고정)
   - top.php의 JS가 .dep2_fixed 클래스를 .out7_area(=.sub2d_menu_out_area) 에 추가
   - 흰색 배경 100vw 전체 + 글씨/아이콘 검정 컬러로 전환
   ======================================== */
.out7_area.dep2_fixed {
    background-color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
/* 100vw 풀폭 배경: contents-container 좌우 패딩 무관하게 전체 폭 흰색 */
.out7_area.dep2_fixed::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: 100%;
    background-color: #fff;
    z-index: 0;
    pointer-events: none;
}
.out7_area.dep2_fixed > .contents-container {
    position: relative;
    z-index: 1;
}

/* 상단 반투명 라인 → sticky 시 옅은 회색 라인 */
.out7_area.dep2_fixed .dep2_top_line {
    background-color: rgba(0, 0, 0, 0.08);
}

/* 1뎁스 박스 텍스트/아이콘 검정 */
.out7_area.dep2_fixed .d1_tit__home,
.out7_area.dep2_fixed .d1_tit__home i,
.out7_area.dep2_fixed .d1_tit__label,
.out7_area.dep2_fixed .d1_tit__arrow,
.out7_area.dep2_fixed .d1_tit__arrow i {
    color: #222;
}
/* ★ 홈 아이콘이 img/svg/lottie(흰색)일 경우 필터로 검정 전환 */
.out7_area.dep2_fixed .d1_tit__home.is-img img,
.out7_area.dep2_fixed .d1_tit__home.is-html img,
.out7_area.dep2_fixed .d1_tit__home.is-html svg,
.out7_area.dep2_fixed .d1_tit__home.is-html lottie-player {
    filter: brightness(0) saturate(100%);
    transition: filter 0.22s ease;
}
.out7_area.dep2_fixed .d1_tit__home:hover {
    opacity: 0.6;
}

/* 1뎁스 드롭다운 열린 상태에서는 컬러 박스 위라 흰색 복귀 */
.out7_area.dep2_fixed .d1_wrap.is-open .d1_tit__home.is-img img,
.out7_area.dep2_fixed .d1_wrap.is-open .d1_tit__home.is-html img,
.out7_area.dep2_fixed .d1_wrap.is-open .d1_tit__home.is-html svg,
.out7_area.dep2_fixed .d1_wrap.is-open .d1_tit__home.is-html lottie-player {
    filter: none;
}

/* 1뎁스 열린 상태(컬러 박스): sticky여도 원래 컬러 유지 → 가독성 위해 텍스트 흰색 복귀 */
.out7_area.dep2_fixed .d1_wrap.is-open .d1_tit__home,
.out7_area.dep2_fixed .d1_wrap.is-open .d1_tit__home i,
.out7_area.dep2_fixed .d1_wrap.is-open .d1_tit__label,
.out7_area.dep2_fixed .d1_wrap.is-open .d1_tit__arrow,
.out7_area.dep2_fixed .d1_wrap.is-open .d1_tit__arrow i {
    color: #fff;
}

/* 2뎁스 메뉴 텍스트 검정 (비활성 메뉴만), active는 설정값 그대로 유지 */
.out7_area.dep2_fixed ul.Sub2d_gnb li a {
    color: rgba(0, 0, 0, 0.65);
}
.out7_area.dep2_fixed ul.Sub2d_gnb li.active a {
    color: var(--dep2-active-color, var(--dynamic-point-color, var(--primary)));
}
@media only all and (min-width:768px) and (hover: hover) {
    .out7_area.dep2_fixed ul.Sub2d_gnb.is-hovering li.active:not(:hover) a {
        color: rgba(0, 0, 0, 0.65);
    }
    .out7_area.dep2_fixed ul.Sub2d_gnb li:hover a {
        color: var(--dep2-hover-color, var(--primary));
    }
}

/* active 인디케이터 바: sticky 시에도 설정값 유지, 호버 시 호버 라인 컬러 */
.out7_area.dep2_fixed .Sub2d_indicator {
    background-color: var(--dep2-active-bar-color, var(--dep2-active-color, var(--dynamic-point-color, var(--primary))));
}
.out7_area.dep2_fixed .Sub2d_indicator.is-hover {
    background-color: var(--dep2-hover-bar-color, var(--dep2-hover-color, var(--primary)));
}